feat: Implement direct edit button for queue items

src/components/moderation/ModerationQueue.tsx

@@ -6,6 +6,7 @@ import { useUserRole } from '@/hooks/useUserRole';
 import { useAuth } from '@/hooks/useAuth';
 import { PhotoModal } from './PhotoModal';
 import { SubmissionReviewManager } from './SubmissionReviewManager';
+import { ItemEditDialog } from './ItemEditDialog';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { useAdminSettings } from '@/hooks/useAdminSettings';
 import { useModerationQueueManager } from '@/hooks/moderation';
@@ -20,6 +21,7 @@ import { AutoRefreshIndicator } from './AutoRefreshIndicator';
 import { NewItemsAlert } from './NewItemsAlert';
 import { EmptyQueueState } from './EmptyQueueState';
 import { QueuePagination } from './QueuePagination';
+import { fetchSubmissionItems, type SubmissionItemWithDeps } from '@/lib/submissionItemsService';
 import type { ModerationQueueRef } from '@/types/moderation';
 import type { PhotoItem } from '@/types/photos';
 
@@ -62,6 +64,8 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
   const [selectedPhotoIndex, setSelectedPhotoIndex] = useState(0);
   const [reviewManagerOpen, setReviewManagerOpen] = useState(false);
   const [selectedSubmissionId, setSelectedSubmissionId] = useState<string | null>(null);
+  const [showItemEditDialog, setShowItemEditDialog] = useState(false);
+  const [editingItem, setEditingItem] = useState<SubmissionItemWithDeps | null>(null);
   
   // UI-specific handlers
   const handleNoteChange = (id: string, value: string) => {
@@ -79,6 +83,36 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
     setReviewManagerOpen(true);
   };
   
+  const handleOpenItemEditor = async (submissionId: string) => {
+    try {
+      const items = await fetchSubmissionItems(submissionId);
+      
+      // Find first pending item, fallback to first available
+      let itemToEdit = items.find(item => item.status === 'pending');
+      if (!itemToEdit && items.length > 0) {
+        itemToEdit = items[0];
+      }
+      
+      if (itemToEdit) {
+        setEditingItem(itemToEdit);
+        setShowItemEditDialog(true);
+      } else {
+        toast({
+          title: 'No Items Found',
+          description: 'This submission has no items to edit',
+          variant: 'destructive',
+        });
+      }
+    } catch (error) {
+      console.error('Error fetching items for edit:', error);
+      toast({
+        title: 'Error',
+        description: 'Failed to load submission items',
+        variant: 'destructive',
+      });
+    }
+  };
+  
   // Expose imperative API
   useImperativeHandle(ref, () => ({
     refresh: async () => {
@@ -179,6 +213,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                 onRetryFailed={queueManager.retryFailedItems}
                 onOpenPhotos={handleOpenPhotos}
                 onOpenReviewManager={handleOpenReviewManager}
+                onOpenItemEditor={handleOpenItemEditor}
                 onClaimSubmission={queueManager.queue.claimSubmission}
                 onDeleteSubmission={queueManager.deleteSubmission}
                 onInteractionFocus={(id) => queueManager.markInteracting(id, true)}
@@ -218,6 +253,19 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
           onComplete={() => setReviewManagerOpen(false)}
         />
       )}
+      
+      {editingItem && (
+        <ItemEditDialog
+          item={editingItem}
+          open={showItemEditDialog}
+          onOpenChange={setShowItemEditDialog}
+          onComplete={async () => {
+            setShowItemEditDialog(false);
+            setEditingItem(null);
+            await queueManager.refresh();
+          }}
+        />
+      )}
     </div>
   );
 });