pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-22 13:11:16 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Optimize moderation queue desktop layout and fix release lock

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-15 15:37:28 +00:00
parent 92759f917d
commit adad353e4b
3 changed files with 97 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/components/moderation/QueueItem.tsx
View File

@@ -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>
</>
)}