Implement superuser lock management

src/components/moderation/renderers/QueueItemActions.tsx

@@ -1,7 +1,7 @@
 import { memo, useCallback } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 import { 
-  AlertCircle, Edit, Info, ExternalLink, ChevronDown, ListTree, Calendar 
+  AlertCircle, Edit, Info, ExternalLink, ChevronDown, ListTree, Calendar, Crown, Unlock 
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { ActionButton } from '@/components/ui/action-button';
@@ -37,6 +37,7 @@ interface QueueItemActionsProps {
   onInteractionFocus: (id: string) => void;
   onInteractionBlur: (id: string) => void;
   onClaim: () => void;
+  onSuperuserReleaseLock?: (submissionId: string) => Promise<void>;
 }
 
 export const QueueItemActions = memo(({
@@ -60,7 +61,8 @@ export const QueueItemActions = memo(({
   onDeleteSubmission,
   onInteractionFocus,
   onInteractionBlur,
-  onClaim
+  onClaim,
+  onSuperuserReleaseLock
 }: QueueItemActionsProps) => {
   // Memoize all handlers to prevent re-renders
   const handleNoteChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -172,6 +174,34 @@ export const QueueItemActions = memo(({
               </Alert>
             </div>
           )}
+
+          {/* Superuser Lock Override - Show for locked items */}
+          {isSuperuser && isLockedByOther && onSuperuserReleaseLock && (
+            <Alert className="border-purple-500/50 bg-purple-500/10">
+              <Crown className="h-4 w-4 text-purple-600" />
+              <AlertTitle className="text-purple-900 dark:text-purple-100">
+                Superuser Override
+              </AlertTitle>
+              <AlertDescription className="text-purple-800 dark:text-purple-200">
+                <div className="flex flex-col gap-2 mt-2">
+                  <p className="text-sm">
+                    This submission is locked by another moderator. 
+                    You can force-release this lock.
+                  </p>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="border-purple-500 text-purple-700 hover:bg-purple-50 dark:hover:bg-purple-950"
+                    onClick={() => onSuperuserReleaseLock(item.id)}
+                    disabled={actionLoading === item.id}
+                  >
+                    <Unlock className="w-4 h-4 mr-2" />
+                    Force Release Lock
+                  </Button>
+                </div>
+              </AlertDescription>
+            </Alert>
+          )}
           
           <div className={isMobile ? 'space-y-4 mt-4' : 'grid grid-cols-1 lg:grid-cols-[1fr,auto] gap-6 items-start mt-4'}>
             {/* Submitter Context - shown before moderator can add their notes */}