mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 06:11:11 -05:00
459 lines
19 KiB
TypeScript
459 lines
19 KiB
TypeScript
import { memo, useCallback } from 'react';
|
|
import {
|
|
CheckCircle, XCircle, RefreshCw, AlertCircle, Lock, Trash2,
|
|
Edit, Info, ExternalLink, ChevronDown, ListTree, Calendar
|
|
} from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
|
|
import { UserAvatar } from '@/components/ui/user-avatar';
|
|
import { format } from 'date-fns';
|
|
import type { ModerationItem } from '@/types/moderation';
|
|
import { sanitizeURL, sanitizePlainText } from '@/lib/sanitize';
|
|
|
|
interface QueueItemActionsProps {
|
|
item: ModerationItem;
|
|
isMobile: boolean;
|
|
actionLoading: string | null;
|
|
isLockedByMe: boolean;
|
|
isLockedByOther: boolean;
|
|
currentLockSubmissionId?: string;
|
|
notes: Record<string, string>;
|
|
isAdmin: boolean;
|
|
isSuperuser: boolean;
|
|
queueIsLoading: boolean;
|
|
isClaiming: boolean;
|
|
onNoteChange: (id: string, value: string) => void;
|
|
onApprove: (item: ModerationItem, action: 'approved' | 'rejected', notes?: string) => void;
|
|
onResetToPending: (item: ModerationItem) => void;
|
|
onRetryFailed: (item: ModerationItem) => void;
|
|
onOpenReviewManager: (submissionId: string) => void;
|
|
onOpenItemEditor: (submissionId: string) => void;
|
|
onDeleteSubmission: (item: ModerationItem) => void;
|
|
onInteractionFocus: (id: string) => void;
|
|
onInteractionBlur: (id: string) => void;
|
|
onClaim: () => void;
|
|
}
|
|
|
|
export const QueueItemActions = memo(({
|
|
item,
|
|
isMobile,
|
|
actionLoading,
|
|
isLockedByMe,
|
|
isLockedByOther,
|
|
currentLockSubmissionId,
|
|
notes,
|
|
isAdmin,
|
|
isSuperuser,
|
|
queueIsLoading,
|
|
isClaiming,
|
|
onNoteChange,
|
|
onApprove,
|
|
onResetToPending,
|
|
onRetryFailed,
|
|
onOpenReviewManager,
|
|
onOpenItemEditor,
|
|
onDeleteSubmission,
|
|
onInteractionFocus,
|
|
onInteractionBlur,
|
|
onClaim
|
|
}: QueueItemActionsProps) => {
|
|
// Memoize all handlers to prevent re-renders
|
|
const handleNoteChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
|
onNoteChange(item.id, e.target.value);
|
|
}, [onNoteChange, item.id]);
|
|
|
|
const handleApprove = useCallback(() => {
|
|
onApprove(item, 'approved', notes[item.id]);
|
|
}, [onApprove, item, notes]);
|
|
|
|
const handleReject = useCallback(() => {
|
|
onApprove(item, 'rejected', notes[item.id]);
|
|
}, [onApprove, item, notes]);
|
|
|
|
const handleResetToPending = useCallback(() => {
|
|
onResetToPending(item);
|
|
}, [onResetToPending, item]);
|
|
|
|
const handleRetryFailed = useCallback(() => {
|
|
onRetryFailed(item);
|
|
}, [onRetryFailed, item]);
|
|
|
|
const handleOpenReviewManager = useCallback(() => {
|
|
onOpenReviewManager(item.id);
|
|
}, [onOpenReviewManager, item.id]);
|
|
|
|
const handleOpenItemEditor = useCallback(() => {
|
|
onOpenItemEditor(item.id);
|
|
}, [onOpenItemEditor, item.id]);
|
|
|
|
const handleDeleteSubmission = useCallback(() => {
|
|
onDeleteSubmission(item);
|
|
}, [onDeleteSubmission, item]);
|
|
|
|
const handleFocus = useCallback(() => {
|
|
onInteractionFocus(item.id);
|
|
}, [onInteractionFocus, item.id]);
|
|
|
|
const handleBlur = useCallback(() => {
|
|
onInteractionBlur(item.id);
|
|
}, [onInteractionBlur, item.id]);
|
|
|
|
const handleReverseNoteChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
|
onNoteChange(`reverse-${item.id}`, e.target.value);
|
|
}, [onNoteChange, item.id]);
|
|
|
|
const handleReverseApprove = useCallback(() => {
|
|
onApprove(item, 'approved', notes[`reverse-${item.id}`]);
|
|
}, [onApprove, item, notes]);
|
|
|
|
const handleReverseReject = useCallback(() => {
|
|
onApprove(item, 'rejected', notes[`reverse-${item.id}`]);
|
|
}, [onApprove, item, notes]);
|
|
|
|
return (
|
|
<>
|
|
{/* Action buttons based on status */}
|
|
{(item.status === 'pending' || item.status === 'flagged') && (
|
|
<>
|
|
{/* Claim button for unclaimed submissions */}
|
|
{!isLockedByOther && currentLockSubmissionId !== item.id && (
|
|
<div className="mb-4">
|
|
<Alert className="border-blue-200 bg-blue-50 dark:bg-blue-950/20">
|
|
<AlertCircle className="h-4 w-4 text-blue-600" />
|
|
<AlertTitle className="text-blue-900 dark:text-blue-100">Unclaimed Submission</AlertTitle>
|
|
<AlertDescription className="text-blue-800 dark:text-blue-200">
|
|
<div className="flex items-center justify-between mt-2">
|
|
<span className="text-sm">Claim this submission to lock it for 15 minutes while you review</span>
|
|
<Button
|
|
onClick={onClaim}
|
|
disabled={queueIsLoading || isClaiming}
|
|
size="sm"
|
|
className="ml-4"
|
|
>
|
|
{isClaiming ? (
|
|
<>
|
|
<RefreshCw className="w-4 h-4 mr-2 animate-spin" />
|
|
Claiming...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Lock className="w-4 h-4 mr-2" />
|
|
Claim Submission
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
)}
|
|
|
|
<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 */}
|
|
{(item.submission_items?.[0]?.item_data?.source_url || item.submission_items?.[0]?.item_data?.submission_notes) && (
|
|
<div className="space-y-3 mb-4 p-4 bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800 rounded-lg lg:col-span-2">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Info className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
|
<h4 className="text-sm font-semibold text-blue-900 dark:text-blue-100">
|
|
Submitter Context
|
|
</h4>
|
|
</div>
|
|
|
|
{item.submission_items?.[0]?.item_data?.source_url && (
|
|
<div className="text-sm">
|
|
<span className="font-medium text-blue-900 dark:text-blue-100">Source: </span>
|
|
<a
|
|
href={sanitizeURL(item.submission_items[0].item_data.source_url)}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-blue-600 hover:underline dark:text-blue-400 inline-flex items-center gap-1"
|
|
>
|
|
{sanitizePlainText(item.submission_items[0].item_data.source_url)}
|
|
<ExternalLink className="w-3 h-3" />
|
|
</a>
|
|
</div>
|
|
)}
|
|
|
|
{item.submission_items?.[0]?.item_data?.submission_notes && (
|
|
<div className="text-sm">
|
|
<span className="font-medium text-blue-900 dark:text-blue-100">Submitter Notes: </span>
|
|
<p className="mt-1 whitespace-pre-wrap text-blue-800 dark:text-blue-200">
|
|
{sanitizePlainText(item.submission_items[0].item_data.submission_notes)}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 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={handleNoteChange}
|
|
onFocus={handleFocus}
|
|
onBlur={handleBlur}
|
|
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' && (
|
|
<>
|
|
<Button
|
|
onClick={handleOpenReviewManager}
|
|
disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id}
|
|
variant="outline"
|
|
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
|
|
size={isMobile ? "default" : "default"}
|
|
>
|
|
<ListTree className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
|
|
Review Items
|
|
</Button>
|
|
|
|
{isAdmin && isLockedByMe && (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
onClick={handleOpenItemEditor}
|
|
disabled={actionLoading === item.id}
|
|
variant="ghost"
|
|
className={isMobile ? 'h-11' : ''}
|
|
size={isMobile ? "default" : "default"}
|
|
>
|
|
<Edit className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
|
|
{!isMobile && "Edit"}
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Quick edit first pending item</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
<Button
|
|
onClick={handleApprove}
|
|
disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id}
|
|
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
|
|
size={isMobile ? "default" : "default"}
|
|
>
|
|
<CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
|
|
Approve
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={handleReject}
|
|
disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id}
|
|
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
|
|
size={isMobile ? "default" : "default"}
|
|
>
|
|
<XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
|
|
Reject
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Reset button for rejected items */}
|
|
{item.status === 'rejected' && item.type === 'content_submission' && (
|
|
<div className="space-y-3 pt-4 border-t bg-red-50 dark:bg-red-950/20 -mx-4 px-4 py-3 rounded-b-lg">
|
|
<div className="flex items-start gap-2 text-sm text-red-800 dark:text-red-300">
|
|
<AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
<p className="font-medium">This submission was rejected</p>
|
|
<p className="text-xs mt-1">You can reset it to pending to re-review and approve it.</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
onClick={handleResetToPending}
|
|
disabled={actionLoading === item.id}
|
|
variant="outline"
|
|
className="w-full"
|
|
>
|
|
<RefreshCw className="w-4 h-4 mr-2" />
|
|
Reset to Pending
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Retry/Reset buttons for partially approved items */}
|
|
{item.status === 'partially_approved' && item.type === 'content_submission' && (
|
|
<div className="space-y-3 pt-4 border-t bg-yellow-50 dark:bg-yellow-950/20 -mx-4 px-4 py-3 rounded-b-lg">
|
|
<div className="flex items-start gap-2 text-sm text-yellow-800 dark:text-yellow-300">
|
|
<AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
<p className="font-medium">This submission was partially approved</p>
|
|
<p className="text-xs mt-1">Some items failed. You can retry them or reset everything to pending.</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
onClick={handleOpenReviewManager}
|
|
disabled={actionLoading === item.id}
|
|
variant="outline"
|
|
className="flex-1"
|
|
>
|
|
<ListTree className="w-4 h-4 mr-2" />
|
|
Review Items
|
|
</Button>
|
|
<Button
|
|
onClick={handleResetToPending}
|
|
disabled={actionLoading === item.id}
|
|
variant="outline"
|
|
className="flex-1"
|
|
>
|
|
<RefreshCw className="w-4 h-4 mr-2" />
|
|
Reset All
|
|
</Button>
|
|
<Button
|
|
onClick={handleRetryFailed}
|
|
disabled={actionLoading === item.id}
|
|
className="flex-1 bg-yellow-600 hover:bg-yellow-700"
|
|
>
|
|
<RefreshCw className="w-4 h-4 mr-2" />
|
|
Retry Failed
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Reviewer Information for approved/rejected items */}
|
|
{(item.status === 'approved' || item.status === 'rejected') && (item.reviewed_at || item.reviewer_notes || item.submission_items?.[0]?.item_data?.source_url || item.submission_items?.[0]?.item_data?.submission_notes) && (
|
|
<div className="space-y-3 pt-4 border-t">
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<Calendar className="w-4 h-4" />
|
|
<span>Reviewed {item.reviewed_at ? format(new Date(item.reviewed_at), 'MMM d, yyyy HH:mm') : 'recently'}</span>
|
|
{item.reviewer_profile && (
|
|
<>
|
|
<span>by</span>
|
|
<div className="flex items-center gap-2">
|
|
<UserAvatar
|
|
key={item.reviewer_profile.avatar_url || `reviewer-${item.reviewed_by}`}
|
|
avatarUrl={item.reviewer_profile.avatar_url}
|
|
fallbackText={item.reviewer_profile.display_name || item.reviewer_profile.username || 'R'}
|
|
size="sm"
|
|
className="h-6 w-6"
|
|
/>
|
|
<span className="font-medium">
|
|
{item.reviewer_profile.display_name || item.reviewer_profile.username}
|
|
</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Submitter Context (shown in collapsed state after review) */}
|
|
{(item.submission_items?.[0]?.item_data?.source_url || item.submission_items?.[0]?.item_data?.submission_notes) && (
|
|
<Collapsible>
|
|
<CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium hover:underline">
|
|
<ChevronDown className="w-4 h-4" />
|
|
View Submitter Context
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent className="mt-2 bg-muted/30 p-3 rounded-lg">
|
|
{item.submission_items?.[0]?.item_data?.source_url && (
|
|
<div className="text-sm mb-2">
|
|
<span className="font-medium">Source: </span>
|
|
<a
|
|
href={sanitizeURL(item.submission_items[0].item_data.source_url)}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-blue-600 hover:underline inline-flex items-center gap-1"
|
|
>
|
|
{sanitizePlainText(item.submission_items[0].item_data.source_url)}
|
|
<ExternalLink className="w-3 h-3" />
|
|
</a>
|
|
</div>
|
|
)}
|
|
{item.submission_items?.[0]?.item_data?.submission_notes && (
|
|
<div className="text-sm">
|
|
<span className="font-medium">Submitter Notes: </span>
|
|
<p className="mt-1 whitespace-pre-wrap text-muted-foreground">
|
|
{sanitizePlainText(item.submission_items[0].item_data.submission_notes)}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
)}
|
|
|
|
{item.reviewer_notes && (
|
|
<div className="bg-muted/30 p-3 rounded-lg">
|
|
<p className="text-sm font-medium mb-1">Moderator Notes:</p>
|
|
<p className="text-sm text-muted-foreground">{item.reviewer_notes}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Reverse Decision Buttons */}
|
|
<div className="space-y-2">
|
|
<Label className="text-sm">Reverse Decision</Label>
|
|
<Textarea
|
|
placeholder="Add notes about reversing this decision..."
|
|
value={notes[`reverse-${item.id}`] || ''}
|
|
onChange={handleReverseNoteChange}
|
|
onFocus={handleFocus}
|
|
onBlur={handleBlur}
|
|
rows={2}
|
|
/>
|
|
<div className={`flex gap-2 ${isMobile ? 'flex-col' : ''}`}>
|
|
{item.status === 'approved' && (
|
|
<Button
|
|
variant="destructive"
|
|
onClick={handleReverseReject}
|
|
disabled={actionLoading === item.id}
|
|
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
|
|
size={isMobile ? "default" : "default"}
|
|
>
|
|
<XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
|
|
Change to Rejected
|
|
</Button>
|
|
)}
|
|
{item.status === 'rejected' && (
|
|
<Button
|
|
onClick={handleReverseApprove}
|
|
disabled={actionLoading === item.id}
|
|
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
|
|
size={isMobile ? "default" : "default"}
|
|
>
|
|
<CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
|
|
Change to Approved
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Delete button for rejected submissions (admin/superadmin only) */}
|
|
{item.status === 'rejected' && item.type === 'content_submission' && (isAdmin || isSuperuser) && (
|
|
<div className="pt-2">
|
|
<Button
|
|
variant="destructive"
|
|
onClick={handleDeleteSubmission}
|
|
disabled={actionLoading === item.id}
|
|
className={`w-full ${isMobile ? 'h-11' : ''}`}
|
|
size={isMobile ? "default" : "default"}
|
|
>
|
|
<Trash2 className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
|
|
Delete Submission
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
});
|
|
|
|
QueueItemActions.displayName = 'QueueItemActions';
|