feat: Implement enhanced realtime subscriptions

src/components/moderation/RealtimeConnectionStatus.tsx

@@ -0,0 +1,99 @@
+import { RefreshCw, Wifi, WifiOff, AlertCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { ConnectionState } from '@/hooks/useEnhancedRealtime';
+
+interface RealtimeConnectionStatusProps {
+  connectionState: ConnectionState;
+  onReconnect: () => void;
+  className?: string;
+}
+
+export function RealtimeConnectionStatus({
+  connectionState,
+  onReconnect,
+  className = '',
+}: RealtimeConnectionStatusProps) {
+  const getStatusConfig = () => {
+    switch (connectionState) {
+      case 'connected':
+        return {
+          icon: Wifi,
+          color: 'text-green-500',
+          label: 'Connected',
+          description: 'Live updates active',
+          showReconnect: false,
+        };
+      case 'connecting':
+        return {
+          icon: RefreshCw,
+          color: 'text-yellow-500',
+          label: 'Connecting',
+          description: 'Establishing connection...',
+          showReconnect: false,
+          animate: 'animate-spin',
+        };
+      case 'error':
+        return {
+          icon: AlertCircle,
+          color: 'text-red-500',
+          label: 'Error',
+          description: 'Connection failed. Retrying...',
+          showReconnect: true,
+        };
+      case 'disconnected':
+        return {
+          icon: WifiOff,
+          color: 'text-muted-foreground',
+          label: 'Disconnected',
+          description: 'Live updates unavailable',
+          showReconnect: true,
+        };
+      default:
+        return {
+          icon: WifiOff,
+          color: 'text-muted-foreground',
+          label: 'Unknown',
+          description: 'Connection status unknown',
+          showReconnect: true,
+        };
+    }
+  };
+
+  const config = getStatusConfig();
+  const Icon = config.icon;
+
+  return (
+    <div className={`flex items-center gap-2 ${className}`}>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="flex items-center gap-2">
+              <Icon 
+                className={`w-4 h-4 ${config.color} ${config.animate || ''}`} 
+              />
+              <span className="text-sm text-muted-foreground hidden sm:inline">
+                {config.label}
+              </span>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{config.description}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      {config.showReconnect && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onReconnect}
+          className="h-8 px-2"
+        >
+          <RefreshCw className="w-3 h-3 mr-1" />
+          Reconnect
+        </Button>
+      )}
+    </div>
+  );
+}