Refactor: Improve desktop layout and fix release lock

This commit is contained in:
gpt-engineer-app[bot]
2025-10-15 15:02:30 +00:00
parent 415aa45f4c
commit 9904a0c36b
3 changed files with 19 additions and 6 deletions

View File

@@ -413,7 +413,7 @@ export const QueueItem = memo(({
/> />
</div> </div>
<div className={`flex gap-2 pt-2 ${isMobile ? 'flex-col' : 'flex-col sm:flex-row'}`}> <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 */} {/* Show Review Items button for content submissions */}
{item.type === 'content_submission' && ( {item.type === 'content_submission' && (
<> <>
@@ -421,7 +421,7 @@ export const QueueItem = memo(({
onClick={() => onOpenReviewManager(item.id)} onClick={() => onOpenReviewManager(item.id)}
disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id} disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id}
variant="outline" variant="outline"
className={`flex-1 ${isMobile ? 'h-11' : ''}`} className={isMobile ? 'h-11' : ''}
size={isMobile ? "default" : "default"} size={isMobile ? "default" : "default"}
> >
<ListTree className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} /> <ListTree className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
@@ -453,7 +453,7 @@ export const QueueItem = memo(({
<Button <Button
onClick={() => onApprove(item, 'approved', notes[item.id])} onClick={() => onApprove(item, 'approved', notes[item.id])}
disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id} disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id}
className={`flex-1 ${isMobile ? 'h-11' : ''}`} className={isMobile ? 'h-11' : ''}
size={isMobile ? "default" : "default"} size={isMobile ? "default" : "default"}
> >
<CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} /> <CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
@@ -463,7 +463,7 @@ export const QueueItem = memo(({
variant="destructive" variant="destructive"
onClick={() => onApprove(item, 'rejected', notes[item.id])} onClick={() => onApprove(item, 'rejected', notes[item.id])}
disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id} disabled={actionLoading === item.id || isLockedByOther || currentLockSubmissionId !== item.id}
className={`flex-1 ${isMobile ? 'h-11' : ''}`} className={isMobile ? 'h-11' : ''}
size={isMobile ? "default" : "default"} size={isMobile ? "default" : "default"}
> >
<XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} /> <XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />

View File

@@ -126,7 +126,7 @@ export function SubmissionChangesDisplay({
</div> </div>
{(changes.action === 'edit' || changes.action === 'create') && changes.totalChanges > 0 && ( {(changes.action === 'edit' || changes.action === 'create') && changes.totalChanges > 0 && (
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1 lg:grid lg:grid-cols-2 xl:grid-cols-3">
{changes.fieldChanges.slice(0, 5).map((change, idx) => ( {changes.fieldChanges.slice(0, 5).map((change, idx) => (
<FieldDiff key={idx} change={change} compact /> <FieldDiff key={idx} change={change} compact />
))} ))}

View File

@@ -231,6 +231,7 @@ export const useModerationQueue = (config?: UseModerationQueueConfig) => {
const releaseLock = useCallback(async (submissionId: string): Promise<boolean> => { const releaseLock = useCallback(async (submissionId: string): Promise<boolean> => {
if (!user?.id) return false; if (!user?.id) return false;
setIsLoading(true);
try { try {
const { data, error } = await supabase.rpc('release_submission_lock', { const { data, error } = await supabase.rpc('release_submission_lock', {
submission_id: submissionId, submission_id: submissionId,
@@ -250,6 +251,11 @@ export const useModerationQueue = (config?: UseModerationQueueConfig) => {
fetchStats(); fetchStats();
toast({
title: 'Lock Released',
description: 'You can now claim another submission',
});
// Trigger refresh callback // Trigger refresh callback
if (onLockStateChange) { if (onLockStateChange) {
onLockStateChange(); onLockStateChange();
@@ -261,9 +267,16 @@ export const useModerationQueue = (config?: UseModerationQueueConfig) => {
return false; return false;
} catch (error: any) { } catch (error: any) {
console.error('Error releasing lock:', error); console.error('Error releasing lock:', error);
toast({
title: 'Error',
description: error.message || 'Failed to release lock',
variant: 'destructive',
});
return false; return false;
} finally {
setIsLoading(false);
} }
}, [user, fetchStats]); }, [user, fetchStats, toast, onLockStateChange]);
// Get time remaining on current lock // Get time remaining on current lock
const getTimeRemaining = useCallback((): number | null => { const getTimeRemaining = useCallback((): number | null => {