feat: Implement 3-column layout for content submissions

This commit is contained in:
gpt-engineer-app[bot]
2025-10-15 16:52:48 +00:00
parent 4b697fe45a
commit 92e63c4a80

View File

@@ -239,9 +239,13 @@ export const QueueItem = memo(({
</CardHeader>
<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' : ''
}`}>
<div className={`bg-muted/50 rounded-lg ${isMobile ? 'p-3 space-y-3' : 'p-4'} ${
!isMobile
? item.type === 'content_submission'
? 'lg:grid lg:grid-cols-[1fr,320px] lg:gap-6 2xl:grid-cols-[1fr,400px,320px] 2xl:gap-6'
: 'lg:grid lg:grid-cols-[1fr,320px] lg:gap-6'
: ''
}`}>
{item.type === 'review' ? (
<div>
{item.content.title && (
@@ -359,14 +363,47 @@ export const QueueItem = memo(({
)}
</div>
) : (
<div>
{/* Composite Submissions or Standard Submissions */}
<SubmissionItemsList
submissionId={item.id}
view="detailed"
showImages={true}
/>
</div>
<>
{/* Main content area - spans 1st column on all layouts */}
<div>
<SubmissionItemsList
submissionId={item.id}
view="detailed"
showImages={true}
/>
</div>
{/* Middle column for wide screens - shows extended submission details */}
{!isMobile && item.type === 'content_submission' && (
<div className="hidden 2xl:block space-y-3">
<div className="bg-card rounded-md border p-3">
<div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
Review Summary
</div>
<div className="text-sm space-y-2">
<div>
<span className="text-muted-foreground">Type:</span>{' '}
<span className="font-medium">{item.submission_type}</span>
</div>
{item.submission_items && item.submission_items.length > 0 && (
<div>
<span className="text-muted-foreground">Items:</span>{' '}
<span className="font-medium">{item.submission_items.length}</span>
</div>
)}
{item.status === 'partially_approved' && (
<div>
<span className="text-muted-foreground">Status:</span>{' '}
<span className="font-medium text-yellow-600 dark:text-yellow-400">
Partially Approved
</span>
</div>
)}
</div>
</div>
</div>
)}
</>
)}
{/* Right sidebar on desktop: metadata & context */}