From 5054c46385d4ec5dd8936f01a944a8b3550b5880 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 10 May 2026 22:44:38 -0400
Subject: [PATCH] fix(web): collapse the entire Mobile app section when no APK
 bundled
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../lib/components/MobileAppDownload.svelte   | 30 +++++++++++--------
 web/src/routes/settings/+page.svelte          |  8 +----
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/web/src/lib/components/MobileAppDownload.svelte b/web/src/lib/components/MobileAppDownload.svelte
index 67734517..cedaddff 100644
--- a/web/src/lib/components/MobileAppDownload.svelte
+++ b/web/src/lib/components/MobileAppDownload.svelte
@@ -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}
diff --git a/web/src/routes/settings/+page.svelte b/web/src/routes/settings/+page.svelte
index 60ec8465..2e71cee0 100644
--- a/web/src/routes/settings/+page.svelte
+++ b/web/src/routes/settings/+page.svelte
@@ -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>