Refined offline banner UI with semi-transparency and collapse/expand toggle.

src/routes/+layout.svelte

@@ -118,6 +118,7 @@
     // Connection Status
     let is_offline = $derived(browser && online.current === false);
     let api_unreachable = $derived($ae_loc?.account_id === 'ghost');
+    let show_connection_details = $state(true);
 
     // BEGIN: Sanity Checks:
     // Added 2025-07-15
@@ -778,32 +779,59 @@
 </script>
 
 <svelte:head>
-    <link rel="stylesheet" href={ae_acct.loc.site_style_href} />
+    <link rel="stylesheet" href={ae_acct?.loc?.site_style_href} />
     <!-- <link rel="manifest" href="/manifest.json"> -->
 </svelte:head>
 
 {#if browser && (is_offline || api_unreachable)}
-    <div
+    {#if show_connection_details}
-        class="fixed top-0 left-0 right-0 z-[100] p-4 bg-orange-600 text-white text-center shadow-2xl flex flex-row items-center justify-center gap-4"
+        <div
-    >
+            class="fixed top-0 left-0 right-0 z-[100] p-4 bg-orange-600/90 backdrop-blur-sm text-white text-center shadow-2xl flex flex-row items-center justify-center gap-4 transition-all"
-        <span class="text-xl font-bold">
-            {#if is_offline}
-                <span class="fas fa-wifi-slash mr-2"></span>
-                Connection Offline
-            {:else}
-                <span class="fas fa-server mr-2"></span>
-                API Server Unreachable
-            {/if}
-        </span>
-        <span class="hidden md:inline">Viewing cached data. Changes may not be saved.</span>
-        <button
-            class="btn btn-sm variant-filled-white text-orange-600 font-bold"
-            onclick={() => window.location.reload()}
         >
-            <RefreshCw class="inline-block mr-1 size-4" />
+            <span class="text-xl font-bold">
-            Retry Connection
+                {#if is_offline}
+                    <span class="fas fa-wifi-slash mr-2"></span>
+                    Connection Offline
+                {:else}
+                    <span class="fas fa-server mr-2"></span>
+                    API Server Unreachable
+                {/if}
+            </span>
+            <span class="hidden md:inline">Viewing cached data. Changes may not be saved.</span>
+            
+            <div class="flex flex-row gap-2">
+                <button
+                    class="btn btn-sm variant-filled-white text-orange-600 font-bold"
+                    onclick={() => window.location.reload()}
+                >
+                    <RefreshCw class="inline-block mr-1 size-4" />
+                    Retry
+                </button>
+                
+                <button
+                    class="btn btn-sm variant-soft-white font-bold"
+                    onclick={() => show_connection_details = false}
+                    title="Acknowledge and Hide Details"
+                >
+                    OK
+                </button>
+            </div>
+        </div>
+    {:else}
+        <!-- Collapsed Warning Indicator -->
+        <button
+            class="fixed top-2 right-2 z-[101] p-2 rounded-full bg-error-600 text-white shadow-lg animate-pulse hover:scale-110 transition-transform"
+            onclick={() => show_connection_details = true}
+            title={is_offline ? 'Connection Offline - Click for details' : 'API Unreachable - Click for details'}
+        >
+            {#if is_offline}
+                <span class="fas fa-wifi-slash"></span>
+            {:else}
+                <span class="fas fa-server"></span>
+            {/if}
+            <div class="absolute -top-1 -right-1 w-3 h-3 bg-white rounded-full border-2 border-error-600"></div>
         </button>
-    </div>
+    {/if}
 {/if}
 
 {#if $ae_loc?.site_google_tracking_id && $ae_loc?.site_google_tracking_id.length > 0}