feat: Implement all 7 phases

src/components/moderation/ModerationQueue.tsx

@@ -12,6 +12,7 @@ import { useIsMobile } from '@/hooks/use-mobile';
 import { useAdminSettings } from '@/hooks/useAdminSettings';
 import { useModerationQueueManager } from '@/hooks/moderation';
 import { QueueItem } from './QueueItem';
+import { ModerationErrorBoundary } from '@/components/error/ModerationErrorBoundary';
 import { QueueSkeleton } from './QueueSkeleton';
 import { LockStatusDisplay } from './LockStatusDisplay';
 import { getLockStatus } from '@/lib/moderation/lockHelpers';
@@ -199,9 +200,10 @@ export const ModerationQueue = forwardRef<ModerationQueueRef, ModerationQueuePro
         <TooltipProvider>
           <div className="space-y-6">
             {queueManager.items.map((item, index) => (
-              <QueueItem
-                key={item.id}
-                item={item}
+              <ModerationErrorBoundary key={item.id} submissionId={item.id}>
+                <QueueItem
+                  key={item.id}
+                  item={item}
                 isMobile={isMobile}
                 actionLoading={queueManager.actionLoading}
                 isLockedByMe={queueManager.queue.isLockedByMe(item.id, item.assigned_to, item.locked_until)}
@@ -221,9 +223,10 @@ export const ModerationQueue = forwardRef<ModerationQueueRef, ModerationQueuePro
                 onOpenItemEditor={handleOpenItemEditor}
                 onClaimSubmission={queueManager.queue.claimSubmission}
                 onDeleteSubmission={queueManager.deleteSubmission}
-                onInteractionFocus={(id) => queueManager.markInteracting(id, true)}
-                onInteractionBlur={(id) => queueManager.markInteracting(id, false)}
-              />
+                  onInteractionFocus={(id) => queueManager.markInteracting(id, true)}
+                  onInteractionBlur={(id) => queueManager.markInteracting(id, false)}
+                />
+              </ModerationErrorBoundary>
             ))}
           </div>
         </TooltipProvider>