From b6235577951830d558e8573e1053d21ac2f88824 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Sat, 6 Jun 2026 20:19:22 -0400
Subject: [PATCH] feat(layout): collapsible offline/API-error banner with
 improved messages

Replace the static full-width offline banner with a two-state toggle:
expanded banner (default) with a collapse button, and a small chip in
the top-right corner when collapsed. Adds a subtitle line explaining
what still works offline vs. what requires network. Changes "No API"
chip label to "API Error" and "Offline" title to "Device Offline".

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/routes/+layout.svelte | 47 ++++++++++++++++++++++++++++++++-------
 1 file changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b31861d3..b0249f26 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -12,6 +12,8 @@ import '../app.css';
 // *** Import other supporting libraries
 import {
     RefreshCw,
+    WifiOff,
+    ChevronDown,
 } from '@lucide/svelte';
 
 // Highlight JS
@@ -408,16 +410,45 @@ $effect(() => {
 </svelte:head>
 
 {#if browser && (is_offline || api_unreachable)}
-    <div
-        class="preset-filled-error-200-800 fixed top-0 right-0 left-0 z-100 flex items-center justify-center gap-4 p-4 text-center shadow-2xl print:hidden">
-        <span class="text-xl font-bold"
-            >{is_offline ? 'Offline' : api_error_msg}</span>
-        <button
-            class="btn btn-sm preset-tonal-surface"
-            onclick={() => window.location.reload()}>
+    {#if show_connection_details}
+        <!-- Expanded banner -->
+        <div
+            class="preset-filled-error-200-800 fixed top-0 right-0 left-0 z-100 flex items-center justify-center gap-4 p-4 text-center shadow-2xl print:hidden">
+            <WifiOff size="1.2em" class="shrink-0 opacity-70" />
+            <div class="flex flex-col items-center gap-0.5">
+                <span class="text-xl font-bold leading-tight">
+                    {is_offline ? 'Device Offline' : api_error_msg}
+                </span>
+                <span class="text-xs opacity-75">
+                    {#if is_offline}
+                        Cached event data is still available for search and print · Edits require network
+                    {:else}
+                        The Aether server could not be reached — check your connection or contact support
+                    {/if}
+                </span>
+            </div>
+            <button
+                class="btn btn-sm preset-tonal-surface"
+                onclick={() => window.location.reload()}>
                 <RefreshCw size="1em" class="opacity-60" /> Retry
             </button>
-    </div>
+            <button
+                class="btn btn-sm preset-tonal-surface"
+                title="Collapse"
+                onclick={() => { show_connection_details = false; }}>
+                <ChevronDown size="1em" />
+            </button>
+        </div>
+    {:else}
+        <!-- Collapsed indicator — small chip, top-right corner -->
+        <button
+            class="preset-filled-error-200-800 fixed top-2 right-2 z-100 flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-bold shadow-lg print:hidden"
+            title={is_offline ? 'Device Offline — click to expand' : `${api_error_msg} — click to expand`}
+            onclick={() => { show_connection_details = true; }}>
+            <WifiOff size="0.9em" class="shrink-0" />
+            {is_offline ? 'Offline' : 'API Error'}
+        </button>
+    {/if}
 {/if}
 
 {#if browser && flag_expired}