Refactor: Complete error handling overhaul

src/components/moderation/ModerationQueue.tsx

@@ -1,6 +1,8 @@
-import { useState, useImperativeHandle, forwardRef, useMemo, useCallback, useRef } from 'react';
+import { useState, useImperativeHandle, forwardRef, useMemo, useCallback, useRef, useEffect } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
+import { AlertCircle } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { useToast } from '@/hooks/use-toast';
 import { useUserRole } from '@/hooks/useUserRole';
@@ -95,6 +97,33 @@ export const ModerationQueue = forwardRef<ModerationQueueRef, ModerationQueuePro
   // Keyboard shortcuts help dialog
   const [showShortcutsHelp, setShowShortcutsHelp] = useState(false);
   
+  // Offline detection state
+  const [isOffline, setIsOffline] = useState(!navigator.onLine);
+  
+  // Offline detection effect
+  useEffect(() => {
+    const handleOnline = () => {
+      setIsOffline(false);
+      toast({
+        title: 'Connection Restored',
+        description: 'You are back online. Refreshing queue...',
+      });
+      queueManager.refresh();
+    };
+    
+    const handleOffline = () => {
+      setIsOffline(true);
+    };
+    
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+    
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, [queueManager, toast]);
+  
   // Virtual scrolling setup
   const parentRef = useRef<HTMLDivElement>(null);
   const virtualizer = useVirtualizer({
@@ -200,6 +229,17 @@ export const ModerationQueue = forwardRef<ModerationQueueRef, ModerationQueuePro
   
   return (
     <div className="space-y-4">
+      {/* Offline Banner */}
+      {isOffline && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>No Internet Connection</AlertTitle>
+          <AlertDescription>
+            You're offline. The moderation queue will automatically sync when your connection is restored.
+          </AlertDescription>
+        </Alert>
+      )}
+      
       {/* Queue Statistics & Lock Status */}
       {queueManager.queue.queueStats && (
         <Card className="bg-gradient-to-r from-primary/5 to-primary/10 border-primary/20">