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>