From 9904a0c36b5bb3ac9b67830dd05d63b2bd1f74fb 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 15:02:30 +0000
Subject: [PATCH] Refactor: Improve desktop layout and fix release lock

---
 src/components/moderation/QueueItem.tsx           |  8 ++++----
 .../moderation/SubmissionChangesDisplay.tsx       |  2 +-
 src/hooks/useModerationQueue.ts                   | 15 ++++++++++++++-
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/moderation/QueueItem.tsx b/src/components/moderation/QueueItem.tsx
index ab9b9e64..beec2b2c 100644
--- a/src/components/moderation/QueueItem.tsx
+++ b/src/components/moderation/QueueItem.tsx
@@ -413,7 +413,7 @@ export const QueueItem = memo(({
               />
             </div>
             
-            <div className={`flex gap-2 pt-2 ${isMobile ? 'flex-col' : 'flex-col sm:flex-row'}`}>
+            <div className={isMobile ? 'flex flex-col gap-2 pt-2' : 'grid grid-cols-2 lg:grid-cols-4 gap-2 pt-2'}>
               {/* Show Review Items button for content submissions */}
               {item.type === 'content_submission' && (
                 <>
@@ -421,7 +421,7 @@ export const QueueItem = memo(({
                     onClick={() => onOpenReviewManager(item.id)}
                     disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id}
                     variant="outline"
-                    className={`flex-1 ${isMobile ? 'h-11' : ''}`}
+                    className={isMobile ? 'h-11' : ''}
                     size={isMobile ? "default" : "default"}
                   >
                     <ListTree className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
@@ -453,7 +453,7 @@ export const QueueItem = memo(({
               <Button
                 onClick={() => onApprove(item, 'approved', notes[item.id])}
                 disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id}
-                className={`flex-1 ${isMobile ? 'h-11' : ''}`}
+                className={isMobile ? 'h-11' : ''}
                 size={isMobile ? "default" : "default"}
               >
                 <CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
@@ -463,7 +463,7 @@ export const QueueItem = memo(({
                 variant="destructive"
                 onClick={() => onApprove(item, 'rejected', notes[item.id])}
                 disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id}
-                className={`flex-1 ${isMobile ? 'h-11' : ''}`}
+                className={isMobile ? 'h-11' : ''}
                 size={isMobile ? "default" : "default"}
               >
                 <XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
diff --git a/src/components/moderation/SubmissionChangesDisplay.tsx b/src/components/moderation/SubmissionChangesDisplay.tsx
index 0b87d727..008ea09f 100644
--- a/src/components/moderation/SubmissionChangesDisplay.tsx
+++ b/src/components/moderation/SubmissionChangesDisplay.tsx
@@ -126,7 +126,7 @@ export function SubmissionChangesDisplay({
         </div>
         
         {(changes.action === 'edit' || changes.action === 'create') && changes.totalChanges > 0 && (
-          <div className="flex flex-wrap gap-1">
+          <div className="flex flex-wrap gap-1 lg:grid lg:grid-cols-2 xl:grid-cols-3">
             {changes.fieldChanges.slice(0, 5).map((change, idx) => (
               <FieldDiff key={idx} change={change} compact />
             ))}
diff --git a/src/hooks/useModerationQueue.ts b/src/hooks/useModerationQueue.ts
index 1129173c..c3461799 100644
--- a/src/hooks/useModerationQueue.ts
+++ b/src/hooks/useModerationQueue.ts
@@ -231,6 +231,7 @@ export const useModerationQueue = (config?: UseModerationQueueConfig) => {
   const releaseLock = useCallback(async (submissionId: string): Promise<boolean> => {
     if (!user?.id) return false;
 
+    setIsLoading(true);
     try {
       const { data, error } = await supabase.rpc('release_submission_lock', {
         submission_id: submissionId,
@@ -250,6 +251,11 @@ export const useModerationQueue = (config?: UseModerationQueueConfig) => {
 
         fetchStats();
         
+        toast({
+          title: 'Lock Released',
+          description: 'You can now claim another submission',
+        });
+        
         // Trigger refresh callback
         if (onLockStateChange) {
           onLockStateChange();
@@ -261,9 +267,16 @@ export const useModerationQueue = (config?: UseModerationQueueConfig) => {
       return false;
     } catch (error: any) {
       console.error('Error releasing lock:', error);
+      toast({
+        title: 'Error',
+        description: error.message || 'Failed to release lock',
+        variant: 'destructive',
+      });
       return false;
+    } finally {
+      setIsLoading(false);
     }
-  }, [user, fetchStats]);
+  }, [user, fetchStats, toast, onLockStateChange]);
 
   // Get time remaining on current lock
   const getTimeRemaining = useCallback((): number | null => {