feat: Implement enhanced realtime subscriptions

src/components/moderation/ModerationQueue.tsx

@@ -17,6 +17,7 @@ import { SubmissionReviewManager } from './SubmissionReviewManager';
 import { useRealtimeSubmissions } from '@/hooks/useRealtimeSubmissions';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { EntityEditPreview } from './EntityEditPreview';
+import { RealtimeConnectionStatus } from './RealtimeConnectionStatus';
 
 interface ModerationItem {
   id: string;
@@ -348,7 +349,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
   };
 
   // Set up realtime subscriptions
-  useRealtimeSubmissions({
+  const { connectionState: submissionsConnectionState, reconnect: reconnectSubmissions } = useRealtimeSubmissions({
     onInsert: (payload) => {
       console.log('New submission received');
       toast({
@@ -1736,6 +1737,13 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
     <div className="space-y-4">
       {/* Filter Bar */}
       <div className={`flex flex-col gap-4 bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4 sm:flex-row'}`}>
+        <div className="flex items-center justify-between w-full mb-2 pb-2 border-b border-border">
+          <h3 className="text-sm font-medium text-muted-foreground">Moderation Queue</h3>
+          <RealtimeConnectionStatus
+            connectionState={submissionsConnectionState}
+            onReconnect={reconnectSubmissions}
+          />
+        </div>
         <div className={`flex gap-4 flex-1 ${isMobile ? 'flex-col' : 'flex-col sm:flex-row'}`}>
           <div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[140px]'}`}>
             <Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>Entity Type</Label>

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>
+  );
+}