refactor: enhance OfflineBanner to accept online status as a prop and update layout-content to pass isOnline state

app/layout-content.tsx

@@ -45,7 +45,7 @@ export default function LayoutContent({ children }: { children: React.ReactNode
 
   return (
     <>
-      {auth.user && <OfflineBanner />}
+      {auth.user && <OfflineBanner isOnline={isOnline} />}
       <Header 
         auth={auth} 
         LinkComponent={Link} 

components/OfflineBanner.tsx

@@ -1,11 +1,8 @@
 'use client';
 
-import { useOnlineStatus } from '@/lib/hooks/useOnlineStatus';
 import { FiWifiOff } from 'react-icons/fi';
 
-export function OfflineBanner() {
-  const isOnline = useOnlineStatus();
-
+export function OfflineBanner({ isOnline }: { isOnline: boolean }) {
   if (isOnline) return null;
 
   return (

lib/hooks/useOnlineStatus.ts

@@ -4,10 +4,9 @@ export function useOnlineStatus() {
   const [isOnline, setIsOnline] = useState(true);
 
   useEffect(() => {
-    // Check initial status
-    if (typeof window !== 'undefined') {
-      setIsOnline(navigator.onLine);
-    }
+    if (typeof window === 'undefined') return;
+
+    setIsOnline(navigator.onLine);
 
     const handleOnline = () => setIsOnline(true);
     const handleOffline = () => setIsOnline(false);

public/manifest.json

@@ -5,15 +5,15 @@
   "start_url": "/",
   "display": "standalone",
   "background_color": "#ffffff",
-  "theme_color": "#000000",
+  "theme_color": "#FD5E0F",
   "icons": [
     {
-      "src": "/Icon%20Padding%20left%20%26%20right%20192x192.png",
+      "src": "/icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "/Icon%20Padding%20left%20%26%20right%20512x512.png",
+      "src": "/icon-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }