From adad353e4bbec71a35e64a2d315410a05820d86f 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:37:28 +0000
Subject: [PATCH] feat: Optimize moderation queue desktop layout and fix
 release lock

---
 src/components/moderation/QueueItem.tsx       | 95 +++++++++++++++----
 .../moderation/SubmissionChangesDisplay.tsx   |  8 +-
 src/hooks/useModerationQueue.ts               | 16 +++-
 3 files changed, 97 insertions(+), 22 deletions(-)

diff --git a/src/components/moderation/QueueItem.tsx b/src/components/moderation/QueueItem.tsx
index ab9b9e64..4a14deaf 100644
--- a/src/components/moderation/QueueItem.tsx
+++ b/src/components/moderation/QueueItem.tsx
@@ -233,8 +233,10 @@ export const QueueItem = memo(({
         )}
       </CardHeader>
       
-      <CardContent className={`space-y-4 ${isMobile ? 'p-4 pt-0' : ''}`}>
-        <div className={`bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4'}`}>
+      <CardContent className={`${isMobile ? 'p-4 pt-0 space-y-4' : 'p-6 pt-0'}`}>
+        <div className={`bg-muted/50 rounded-lg ${isMobile ? 'p-3 space-y-3' : 'p-4'} ${
+          !isMobile ? 'lg:grid lg:grid-cols-[1fr,320px] lg:gap-6' : ''
+        }`}>
           {item.type === 'review' ? (
             <div>
               {item.content.title && (
@@ -361,6 +363,59 @@ export const QueueItem = memo(({
               />
             </div>
           )}
+          
+          {/* Right sidebar on desktop: metadata & context */}
+          {!isMobile && (item.entity_name || item.park_name || item.user_profile) && (
+            <div className="space-y-3">
+              {(item.entity_name || item.park_name) && (
+                <div className="bg-card rounded-md border p-3 space-y-2">
+                  <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                    Context
+                  </div>
+                  {item.entity_name && (
+                    <div className="text-sm">
+                      <span className="text-xs text-muted-foreground block mb-0.5">
+                        {item.park_name ? 'Ride' : 'Entity'}
+                      </span>
+                      <span className="font-medium">{item.entity_name}</span>
+                    </div>
+                  )}
+                  {item.park_name && (
+                    <div className="text-sm">
+                      <span className="text-xs text-muted-foreground block mb-0.5">Park</span>
+                      <span className="font-medium">{item.park_name}</span>
+                    </div>
+                  )}
+                </div>
+              )}
+              
+              {item.user_profile && (
+                <div className="bg-card rounded-md border p-3 space-y-2">
+                  <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                    Submitter
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Avatar className="h-8 w-8">
+                      <AvatarImage src={item.user_profile.avatar_url} />
+                      <AvatarFallback className="text-xs">
+                        {(item.user_profile.display_name || item.user_profile.username)?.slice(0, 2).toUpperCase()}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="text-sm">
+                      <div className="font-medium">
+                        {item.user_profile.display_name || item.user_profile.username}
+                      </div>
+                      {item.user_profile.display_name && (
+                        <div className="text-xs text-muted-foreground">
+                          @{item.user_profile.username}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
         </div>
         
         {/* Action buttons based on status */}
@@ -399,21 +454,26 @@ export const QueueItem = memo(({
               </div>
             )}
             
-            <div className="space-y-2">
-              <Label htmlFor={`notes-${item.id}`}>Moderation Notes (optional)</Label>
-              <Textarea
-                id={`notes-${item.id}`}
-                placeholder="Add notes about your moderation decision..."
-                value={notes[item.id] || ''}
-                onChange={(e) => onNoteChange(item.id, e.target.value)}
-                onFocus={() => onInteractionFocus(item.id)}
-                onBlur={() => onInteractionBlur(item.id)}
-                rows={2}
-                disabled={isLockedByOther || currentLockSubmissionId !== item.id}
-              />
-            </div>
-            
-            <div className={`flex gap-2 pt-2 ${isMobile ? 'flex-col' : 'flex-col sm:flex-row'}`}>
+            <div className={isMobile ? 'space-y-4 mt-4' : 'grid grid-cols-1 lg:grid-cols-[1fr,auto] gap-6 items-start mt-4'}>
+              {/* Left: Notes textarea */}
+              <div className="space-y-2">
+                <Label htmlFor={`notes-${item.id}`}>Moderation Notes (optional)</Label>
+                <Textarea
+                  id={`notes-${item.id}`}
+                  placeholder="Add notes about your moderation decision..."
+                  value={notes[item.id] || ''}
+                  onChange={(e) => onNoteChange(item.id, e.target.value)}
+                  onFocus={() => onInteractionFocus(item.id)}
+                  onBlur={() => onInteractionBlur(item.id)}
+                  rows={isMobile ? 2 : 4}
+                  className={!isMobile ? 'min-h-[120px]' : ''}
+                  disabled={isLockedByOther || currentLockSubmissionId !== item.id}
+                />
+              </div>
+              
+              {/* Right: Action buttons */}
+              <div className={isMobile ? 'flex flex-col gap-2' : 'grid grid-cols-2 gap-2 min-w-[400px]'}>
+
               {/* Show Review Items button for content submissions */}
               {item.type === 'content_submission' && (
                 <>
@@ -469,6 +529,7 @@ export const QueueItem = memo(({
                 <XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                 Reject
               </Button>
+              </div>
             </div>
           </>
         )}
diff --git a/src/components/moderation/SubmissionChangesDisplay.tsx b/src/components/moderation/SubmissionChangesDisplay.tsx
index 0b87d727..11ac2645 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-3 xl:grid-cols-4">
             {changes.fieldChanges.slice(0, 5).map((change, idx) => (
               <FieldDiff key={idx} change={change} compact />
             ))}
@@ -221,7 +221,7 @@ export function SubmissionChangesDisplay({
               {changes.fieldChanges.length > 0 && (
                 <div className="flex flex-col gap-2">
                   <h4 className="text-sm font-medium">Creation Data (with moderator edits highlighted)</h4>
-                  <div className="grid gap-2">
+                  <div className="grid gap-2 lg:grid-cols-2">
                     {changes.fieldChanges.map((change, idx) => {
                       // Highlight fields that were added OR modified by moderator
                       const wasEditedByModerator = item.original_data && 
@@ -254,7 +254,7 @@ export function SubmissionChangesDisplay({
               {changes.fieldChanges.length > 0 && (
                 <div className="flex flex-col gap-2">
                   <h4 className="text-sm font-medium">Creation Data</h4>
-                  <div className="grid gap-2">
+                  <div className="grid gap-2 lg:grid-cols-2">
                     {changes.fieldChanges.map((change, idx) => (
                       <div key={idx}>
                         <FieldDiff change={change} />
@@ -300,7 +300,7 @@ export function SubmissionChangesDisplay({
           {changes.fieldChanges.length > 0 && (
             <div className="flex flex-col gap-2">
               <h4 className="text-sm font-medium">Field Changes ({changes.fieldChanges.length})</h4>
-              <div className="grid gap-2">
+              <div className="grid gap-2 lg:grid-cols-2">
                 {changes.fieldChanges.map((change, idx) => (
                   <FieldDiff key={idx} change={change} />
                 ))}
diff --git a/src/hooks/useModerationQueue.ts b/src/hooks/useModerationQueue.ts
index 1129173c..e22792aa 100644
--- a/src/hooks/useModerationQueue.ts
+++ b/src/hooks/useModerationQueue.ts
@@ -231,6 +231,8 @@ 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 +252,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 +268,16 @@ export const useModerationQueue = (config?: UseModerationQueueConfig) => {
       return false;
     } catch (error: any) {
       console.error('Error releasing lock:', error);
+      toast({
+        title: 'Failed to Release Lock',
+        description: error.message || 'An error occurred',
+        variant: 'destructive',
+      });
       return false;
+    } finally {
+      setIsLoading(false);
     }
-  }, [user, fetchStats]);
+  }, [user, fetchStats, toast, onLockStateChange]);
 
   // Get time remaining on current lock
   const getTimeRemaining = useCallback((): number | null => {