Implement persistent lock state

src/components/moderation/ModerationQueue.tsx

@@ -1,6 +1,6 @@
 import { useState, useImperativeHandle, forwardRef, useMemo, useCallback, useRef, useEffect } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { AlertCircle } from 'lucide-react';
+import { AlertCircle, Info } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { TooltipProvider } from '@/components/ui/tooltip';
@@ -88,6 +88,8 @@ export const ModerationQueue = forwardRef<ModerationQueueRef, ModerationQueuePro
   const [bulkEditMode, setBulkEditMode] = useState(false);
   const [bulkEditItems, setBulkEditItems] = useState<SubmissionItemWithDeps[]>([]);
   const [activeLocksCount, setActiveLocksCount] = useState(0);
+  const [lockRestored, setLockRestored] = useState(false);
+  const [initialLoadComplete, setInitialLoadComplete] = useState(false);
   
   // Confirmation dialog state
   const [confirmDialog, setConfirmDialog] = useState<{
@@ -153,6 +155,19 @@ export const ModerationQueue = forwardRef<ModerationQueueRef, ModerationQueuePro
     return () => clearInterval(interval);
   }, [isSuperuser, queueManager.queue.queueStats]);
   
+  // Track if lock was restored from database
+  useEffect(() => {
+    if (!initialLoadComplete) {
+      setInitialLoadComplete(true);
+      return;
+    }
+
+    if (queueManager.queue.currentLock && !lockRestored) {
+      // If we have a lock after initial load but haven't claimed in this session
+      setLockRestored(true);
+    }
+  }, [queueManager.queue.currentLock, lockRestored, initialLoadComplete]);
+  
   // Virtual scrolling setup
   const parentRef = useRef<HTMLDivElement>(null);
   const virtualizer = useVirtualizer({
@@ -359,6 +374,17 @@ export const ModerationQueue = forwardRef<ModerationQueueRef, ModerationQueuePro
         />
       )}
       
+      {/* Lock Restored Alert */}
+      {lockRestored && queueManager.queue.currentLock && (
+        <Alert className="border-blue-500/50 bg-blue-500/5">
+          <Info className="h-4 w-4 text-blue-600" />
+          <AlertTitle>Active Claim Restored</AlertTitle>
+          <AlertDescription>
+            Your previous claim was restored. You still have time to review this submission.
+          </AlertDescription>
+        </Alert>
+      )}
+      
       {/* Filter Bar */}
         <QueueFilters
           activeEntityFilter={queueManager.filters.entityFilter}