Fix queue refresh on lock state change

src/components/moderation/QueueItem.tsx

@@ -81,6 +81,7 @@ export const QueueItem = memo(({
   onInteractionBlur
 }: QueueItemProps) => {
   const [validationResult, setValidationResult] = useState<ValidationResult | null>(null);
+  const [isClaiming, setIsClaiming] = useState(false);
   
   // Fetch relational photo data for photo submissions
   const { photos: photoItems, loading: photosLoading } = usePhotoSubmissionItems(
@@ -96,6 +97,12 @@ export const QueueItem = memo(({
     setValidationResult(result);
   }, []);
   
+  const handleClaim = useCallback(async () => {
+    setIsClaiming(true);
+    await onClaimSubmission(item.id);
+    setIsClaiming(false);
+  }, [onClaimSubmission, item.id]);
+  
   return (
     <Card 
       key={item.id} 
@@ -298,7 +305,14 @@ export const QueueItem = memo(({
                 <div className="text-sm text-muted-foreground">Loading photos...</div>
               ) : photoItems.length > 0 ? (
                 <div className="space-y-2">
-                  <div className="text-sm font-medium">Photos ({photoItems.length}):</div>
+                  <div className="text-sm font-medium flex items-center justify-between">
+                    <span>Photos ({photoItems.length}):</span>
+                    {import.meta.env.DEV && photoItems[0] && (
+                      <span className="text-xs text-muted-foreground">
+                        URL: {photoItems[0].cloudflare_image_url?.slice(0, 30)}...
+                      </span>
+                    )}
+                  </div>
                   <PhotoGrid
                     photos={photoItems.map(photo => ({
                       id: photo.id,
@@ -312,9 +326,13 @@ export const QueueItem = memo(({
                   />
                 </div>
               ) : (
-                <div className="text-sm text-muted-foreground">
-                  No photos found in submission
-                </div>
+                <Alert variant="destructive" className="mt-4">
+                  <AlertTriangle className="h-4 w-4" />
+                  <AlertTitle>No Photos Found</AlertTitle>
+                  <AlertDescription>
+                    This photo submission has no photos attached. This may be a data integrity issue.
+                  </AlertDescription>
+                </Alert>
               )}
               
               {/* Context Information */}
@@ -356,13 +374,22 @@ export const QueueItem = memo(({
                     <div className="flex items-center justify-between mt-2">
                       <span className="text-sm">Claim this submission to lock it for 15 minutes while you review</span>
                       <Button
-                        onClick={() => onClaimSubmission(item.id)}
-                        disabled={queueIsLoading}
+                        onClick={handleClaim}
+                        disabled={queueIsLoading || isClaiming}
                         size="sm"
                         className="ml-4"
                       >
-                        <Lock className="w-4 h-4 mr-2" />
-                        Claim Submission
+                        {isClaiming ? (
+                          <>
+                            <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
+                            Claiming...
+                          </>
+                        ) : (
+                          <>
+                            <Lock className="w-4 h-4 mr-2" />
+                            Claim Submission
+                          </>
+                        )}
                       </Button>
                     </div>
                   </AlertDescription>

src/hooks/moderation/useModerationQueueManager.ts

@@ -111,7 +111,12 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig):
     },
   });
 
-  const queue = useModerationQueue();
+  const queue = useModerationQueue({
+    onLockStateChange: () => {
+      logger.log('🔄 Lock state changed, invalidating queue cache');
+      queueQuery.invalidate();
+    }
+  });
   const entityCache = useEntityCache();
   const profileCache = useProfileCache();
 

src/hooks/useModerationQueue.ts

@@ -21,7 +21,12 @@ interface QueueStats {
   avgWaitHours: number;
 }
 
-export const useModerationQueue = () => {
+interface UseModerationQueueConfig {
+  onLockStateChange?: () => void;
+}
+
+export const useModerationQueue = (config?: UseModerationQueueConfig) => {
+  const { onLockStateChange } = config || {};
   const [currentLock, setCurrentLock] = useState<LockState | null>(null);
   const [queueStats, setQueueStats] = useState<QueueStats | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -158,6 +163,11 @@ export const useModerationQueue = () => {
         description: `${claimed.submission_type} submission (waiting ${formatInterval(claimed.waiting_time)})`,
       });
 
+      // Trigger refresh callback
+      if (onLockStateChange) {
+        onLockStateChange();
+      }
+
       return claimed.submission_id;
     } catch (error: any) {
       console.error('Error claiming submission:', error);
@@ -239,6 +249,12 @@ export const useModerationQueue = () => {
         }
 
         fetchStats();
+        
+        // Trigger refresh callback
+        if (onLockStateChange) {
+          onLockStateChange();
+        }
+        
         return true;
       }
 
@@ -333,6 +349,11 @@ export const useModerationQueue = () => {
         description: 'You now have 15 minutes to review this submission',
       });
 
+      // Trigger refresh callback
+      if (onLockStateChange) {
+        onLockStateChange();
+      }
+
       return true;
     } catch (error: any) {
       console.error('Error claiming submission:', error);