fix(web): collapse the entire Mobile app section when no APK bundled

When /api/client/version returns 404 (no APK in /app/client/, e.g.
v2026.05.10.0 which had a failed CI APK-attach step), the previous
shape rendered the section heading + intro paragraph with an empty
hole where the button should be. Confusing — looks like a broken
button.

Moved the section wrapper, heading, and intro paragraph INSIDE
MobileAppDownload so the whole block collapses together when info
is null. Settings page just mounts <MobileAppDownload />; nothing
visible if no APK is available.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-10 22:44:38 -04:00
parent e4578593d1
commit 5054c46385
2 changed files with 19 additions and 19 deletions
+18 -12
View File
@@ -36,17 +36,23 @@
</script> </script>
{#if info} {#if info}
<a <section class="space-y-3 rounded border border-border bg-surface p-4">
href={info.apkUrl} <h2 class="text-lg font-semibold">Mobile app</h2>
download="minstrel.apk" <p class="text-sm text-text-secondary">
class="mobile-app-download flex items-center gap-3 rounded-md border border-border bg-surface px-3 py-2 text-sm text-text-primary no-underline transition-colors hover:bg-surface-hover hover:text-accent focus-visible:ring-2 focus-visible:ring-accent" Install the Android app paired to this server. Sign in with the same account.
> </p>
<Smartphone size={18} strokeWidth={1.5} class="shrink-0 text-accent" /> <a
<span class="flex flex-col leading-tight"> href={info.apkUrl}
<span class="font-medium">Get the Android app</span> download="minstrel.apk"
<span class="text-xs text-text-secondary"> class="mobile-app-download flex items-center gap-3 rounded-md border border-border bg-surface px-3 py-2 text-sm text-text-primary no-underline transition-colors hover:bg-surface-hover hover:text-accent focus-visible:ring-2 focus-visible:ring-accent"
{info.version}{info.sizeBytes > 0 ? ` · ${formatSize(info.sizeBytes)}` : ''} >
<Smartphone size={18} strokeWidth={1.5} class="shrink-0 text-accent" />
<span class="flex flex-col leading-tight">
<span class="font-medium">Get the Android app</span>
<span class="text-xs text-text-secondary">
{info.version}{info.sizeBytes > 0 ? ` · ${formatSize(info.sizeBytes)}` : ''}
</span>
</span> </span>
</span> </a>
</a> </section>
{/if} {/if}
+1 -7
View File
@@ -325,11 +325,5 @@
</ul> </ul>
</section> </section>
<section class="space-y-3 rounded border border-border bg-surface p-4"> <MobileAppDownload />
<h2 class="text-lg font-semibold">Mobile app</h2>
<p class="text-sm text-text-secondary">
Install the Android app paired to this server. Sign in with the same account.
</p>
<MobileAppDownload />
</section>
</div> </div>