feat(ui): show global banner when API server is unreachable (#97)

.

Author: skylenet

ui/src/api/api-status-events.ts

@@ -0,0 +1,18 @@
+type Listener = (isDown: boolean) => void
+
+let listener: Listener | null = null
+
+export function reportApiDown() {
+  listener?.(true)
+}
+
+export function reportApiUp() {
+  listener?.(false)
+}
+
+export function onApiStatusChange(fn: Listener): () => void {
+  listener = fn
+  return () => {
+    if (listener === fn) listener = null
+  }
+}

ui/src/components/layout/ApiDownBanner.tsx

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react'
+import { WifiOff } from 'lucide-react'
+import { useAuth } from '@/hooks/useAuth'
+import { onApiStatusChange } from '@/api/api-status-events'
+
+export function ApiDownBanner() {
+  const { isApiEnabled } = useAuth()
+  const [isDown, setIsDown] = useState(false)
+
+  useEffect(() => onApiStatusChange(setIsDown), [])
+
+  if (!isApiEnabled || !isDown) return null
+
+  return (
+    <div className="border-b border-amber-300 bg-amber-50 dark:border-amber-700 dark:bg-amber-950">
+      <div className="mx-auto flex max-w-7xl items-center justify-center gap-3 px-4 py-2 text-sm/5 text-amber-800 dark:text-amber-200">
+        <WifiOff className="size-4 shrink-0" />
+        <span>
+          Unable to reach the API server. Data may be stale. The banner will
+          dismiss automatically once connectivity is restored.
+        </span>
+      </div>
+    </div>
+  )
+}

ui/src/components/layout/RootLayout.tsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react'
 import { Outlet, useNavigate, useLocation } from '@tanstack/react-router'
 import { useAuth } from '@/hooks/useAuth'
 import { Header } from '@/components/layout/Header'
+import { ApiDownBanner } from '@/components/layout/ApiDownBanner'
 import { Footer } from '@/components/layout/Footer'
 
 export function RootLayout() {
@@ -24,6 +25,7 @@ export function RootLayout() {
   return (
     <div className="flex min-h-dvh flex-col bg-gray-50 dark:bg-gray-900">
       {!requiresLogin && <Header />}
+      <ApiDownBanner />
       <main className="mx-auto w-full max-w-7xl flex-1 px-4 py-8">
         <Outlet />
       </main>

ui/src/main.tsx

@@ -1,9 +1,10 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { QueryCache, MutationCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { RouterProvider } from '@tanstack/react-router'
 import { AuthProvider } from '@/contexts/auth'
 import { loadRuntimeConfig } from '@/config/runtime'
+import { reportApiDown, reportApiUp } from '@/api/api-status-events'
 import { router } from './router'
 import './index.css'
 
@@ -34,8 +35,24 @@ function handleOAuthCallback(): boolean {
   return true
 }
 
+function isNetworkError(error: unknown): boolean {
+  return error instanceof TypeError
+}
+
 if (!handleOAuthCallback()) {
+  const queryCache = new QueryCache({
+    onError: (error) => { if (isNetworkError(error)) reportApiDown() },
+    onSuccess: () => reportApiUp(),
+  })
+
+  const mutationCache = new MutationCache({
+    onError: (error) => { if (isNetworkError(error)) reportApiDown() },
+    onSuccess: () => reportApiUp(),
+  })
+
   const queryClient = new QueryClient({
+    queryCache,
+    mutationCache,
     defaultOptions: {
       queries: {
         staleTime: 30_000,