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

Refactor: Improve moderation queue layout

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-15 15:12:36 +00:00
parent 74156d5fc1
commit 644e915096
2 changed files with 26 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/moderation/ModerationQueue.tsx
View File

@@ -192,7 +192,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
/>
) : (
<TooltipProvider>
<div className={isMobile ? 'space-y-6' : 'grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6'}>
<div className="space-y-6">
{queueManager.items.map((item, index) => (
<QueueItem
key={item.id}

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

@@ -108,7 +108,7 @@ export const QueueItem = memo(({
return (
<Card
key={item.id}
className={`h-full border-l-4 transition-all duration-300 ${
className={`border-l-4 transition-all duration-300 ${
item._removing ? 'opacity-0 scale-95 pointer-events-none' : ''
} ${
hasModeratorEdits ? 'ring-2 ring-blue-200 dark:ring-blue-800' : ''
@@ -233,8 +233,8 @@ 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' : 'grid grid-cols-1 lg:grid-cols-2 gap-6'}`}>
<div className={`bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4'} ${isMobile ? '' : 'lg:col-span-1'}`}>
{item.type === 'review' ? (
<div>
{item.content.title && (
@@ -363,7 +363,27 @@ export const QueueItem = memo(({
)}
</div>
{/* Action buttons based on status */}
{/* Notes and metadata column on desktop */}
<div className={`space-y-4 ${isMobile ? '' : 'lg:col-span-1'}`}>
{(item.status === 'pending' || item.status === 'flagged') && (
<div className="space-y-2">
<Label htmlFor={`notes-${item.id}`}>Moderation Notes</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 : 6}
disabled={isLockedByOther || currentLockSubmissionId !== item.id}
/>
</div>
)}
</div>
{/* Action buttons - full width below columns */}
<div className={`${isMobile ? '' : 'lg:col-span-2'} space-y-4`}>
{(item.status === 'pending' || item.status === 'flagged') && (
<>
{/* Claim button for unclaimed submissions */}
@@ -399,20 +419,6 @@ 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={isMobile ? 'flex flex-col gap-2 pt-2' : 'grid grid-cols-2 lg:grid-cols-4 gap-2 pt-2'}>
{/* Show Review Items button for content submissions */}
{item.type === 'content_submission' && (
@@ -622,6 +628,7 @@ export const QueueItem = memo(({
</Button>
</div>
)}
</div>
</CardContent>
</Card>
);