From fd99eecfb4e119a81e789b6d689e6c1bdd312c0b Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Wed, 15 Oct 2025 14:04:49 +0000
Subject: [PATCH] feat: Implement optimistic UI updates

---
 src/components/moderation/QueueItem.tsx           | 10 ++++++++++
 src/hooks/moderation/useModerationQueueManager.ts |  2 ++
 src/hooks/useModerationQueue.ts                   |  2 +-
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/moderation/QueueItem.tsx b/src/components/moderation/QueueItem.tsx
index 0debfb7f..143f26f2 100644
--- a/src/components/moderation/QueueItem.tsx
+++ b/src/components/moderation/QueueItem.tsx
@@ -425,6 +425,16 @@ export const QueueItem = memo(({
                     <ListTree className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                     Review Items
                   </Button>
+                  
+                  {/* Debug info in dev mode */}
+                  {import.meta.env.DEV && isAdmin && (
+                    <div className="text-xs text-muted-foreground mb-2 font-mono">
+                      🔍 isLockedByMe={String(isLockedByMe)} | 
+                      assigned_to={item.assigned_to?.slice(0,8) || 'null'} | 
+                      currentLock={currentLockSubmissionId?.slice(0,8) || 'null'}
+                    </div>
+                  )}
+                  
                   {isAdmin && isLockedByMe && (
                     <Tooltip>
                       <TooltipTrigger asChild>
diff --git a/src/hooks/moderation/useModerationQueueManager.ts b/src/hooks/moderation/useModerationQueueManager.ts
index b3b69b5d..583418c1 100644
--- a/src/hooks/moderation/useModerationQueueManager.ts
+++ b/src/hooks/moderation/useModerationQueueManager.ts
@@ -115,6 +115,8 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig):
     onLockStateChange: () => {
       logger.log('🔄 Lock state changed, invalidating queue cache');
       queueQuery.invalidate();
+      // Force immediate re-render by triggering a loading cycle
+      setLoadingState(prev => prev === "loading" ? "ready" : prev);
     }
   });
   const entityCache = useEntityCache();
diff --git a/src/hooks/useModerationQueue.ts b/src/hooks/useModerationQueue.ts
index 30d72972..1129173c 100644
--- a/src/hooks/useModerationQueue.ts
+++ b/src/hooks/useModerationQueue.ts
@@ -452,7 +452,7 @@ export const useModerationQueue = (config?: UseModerationQueueConfig) => {
   }, [currentLock, releaseLock]);
 
   return {
-    currentLock,
+    currentLock,  // Exposed for reactive UI updates
     queueStats,
     isLoading,
     claimNext,