fix: show offline status in pwa

components/layout/app-shell.tsx

@@ -2,7 +2,8 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { CloudSun, Droplets, Settings, TriangleAlert } from "lucide-react";
+import { useEffect, useState } from "react";
+import { CloudSun, Droplets, Settings, TriangleAlert, WifiOff } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { isAppNavItemVisible } from "@/lib/app-sections";
 import { NAV_ITEMS } from "@/lib/constants";
@@ -23,6 +24,18 @@ export function AppShell({ children }: { children: React.ReactNode }) {
   const { t } = useI18n();
   const appSections = useWeatherStore((state) => state.appSections);
   const visibleNavItems = NAV_ITEMS.filter((item) => isAppNavItemVisible(item.href, appSections));
+  const [isOffline, setIsOffline] = useState(false);
+
+  useEffect(() => {
+    const updateConnectionStatus = () => setIsOffline(!navigator.onLine);
+    updateConnectionStatus();
+    window.addEventListener("online", updateConnectionStatus);
+    window.addEventListener("offline", updateConnectionStatus);
+    return () => {
+      window.removeEventListener("online", updateConnectionStatus);
+      window.removeEventListener("offline", updateConnectionStatus);
+    };
+  }, []);
 
   return (
     <div className="min-h-screen overflow-x-hidden bg-background">
@@ -56,6 +69,14 @@ export function AppShell({ children }: { children: React.ReactNode }) {
           </div>
         </div>
       </header>
+      {isOffline && (
+        <div className="border-b border-warning/25 bg-warning/10 px-4 py-2 text-sm font-medium text-warning sm:px-6 lg:px-8">
+          <div className="mx-auto flex max-w-7xl items-center gap-2">
+            <WifiOff className="size-4 shrink-0" aria-hidden="true" />
+            <span>{t("offline.banner")}</span>
+          </div>
+        </div>
+      )}
       <main className="app-main-safe mx-auto max-w-7xl px-4 pt-5 sm:px-6 sm:pt-8 lg:px-8">{children}</main>
       <nav
         aria-label={t("nav.mobile")}