feat: Implement automatic API connectivity banner

src/lib/errorHandler.ts

@@ -32,6 +32,35 @@ export class AppError extends Error {
   }
 }
 
+/**
+ * Check if error is a Supabase connection/API error
+ */
+function isSupabaseConnectionError(error: unknown): boolean {
+  if (error && typeof error === 'object') {
+    const supabaseError = error as { code?: string; status?: number; message?: string };
+    
+    // Connection timeout errors
+    if (supabaseError.code === 'PGRST301') return true; // Timeout
+    if (supabaseError.code === 'PGRST000') return true; // Connection error
+    
+    // 5xx server errors
+    if (supabaseError.status && supabaseError.status >= 500) return true;
+    
+    // Database connection errors (08xxx codes)
+    if (supabaseError.code?.startsWith('08')) return true;
+  }
+  
+  // Network fetch errors
+  if (error instanceof TypeError) {
+    const message = error.message.toLowerCase();
+    if (message.includes('fetch') || message.includes('network') || message.includes('failed to fetch')) {
+      return true;
+    }
+  }
+  
+  return false;
+}
+
 export const handleError = (
   error: unknown,
   context: ErrorContext
@@ -40,6 +69,11 @@ export const handleError = (
   const errorId = (context.metadata?.requestId as string) || crypto.randomUUID();
   const shortErrorId = errorId.slice(0, 8);
   
+  // Check if this is a connection error and dispatch event
+  if (isSupabaseConnectionError(error)) {
+    window.dispatchEvent(new CustomEvent('api-connectivity-down'));
+  }
+  
   // Enhanced error message and stack extraction
   let errorMessage: string;
   let stack: string | undefined;