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>
{#if info}
<a
href={info.apkUrl}
download="minstrel.apk"
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"
>
<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)}` : ''}
<section class="space-y-3 rounded border border-border bg-surface p-4">
<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>
<a
href={info.apkUrl}
download="minstrel.apk"
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"
>
<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>
</a>
</a>
</section>
{/if}
+1 -7
View File
@@ -325,11 +325,5 @@
</ul>
</section>
<section class="space-y-3 rounded border border-border bg-surface p-4">
<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>
<MobileAppDownload />
</div>