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

feat: Implement mobile responsiveness enhancements

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-30 17:13:56 +00:00
parent 7920bdb911
commit 866f376eda
4 changed files with 166 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,6 +15,7 @@ import { format } from 'date-fns';
import { PhotoModal } from './PhotoModal';
import { SubmissionReviewManager } from './SubmissionReviewManager';
import { useRealtimeSubmissions } from '@/hooks/useRealtimeSubmissions';
import { useIsMobile } from '@/hooks/use-mobile';
interface ModerationItem {
id: string;
@@ -49,6 +50,7 @@ export interface ModerationQueueRef {
}
export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
const isMobile = useIsMobile();
const [items, setItems] = useState<ModerationItem[]>([]);
const [loading, setLoading] = useState(true);
const [actionLoading, setActionLoading] = useState<string | null>(null);
@@ -821,10 +823,10 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
item.status === 'rejected' ? 'border-l-red-400' :
'border-l-amber-500'
}`}>
<CardHeader className="pb-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Badge variant={getStatusBadgeVariant(item.status)}>
<CardHeader className={isMobile ? "pb-3 p-4" : "pb-4"}>
<div className={`flex gap-3 ${isMobile ? 'flex-col' : 'items-center justify-between'}`}>
<div className="flex items-center gap-2 flex-wrap">
<Badge variant={getStatusBadgeVariant(item.status)} className={isMobile ? "text-xs" : ""}>
{item.type === 'review' ? (
<>
<MessageSquare className="w-3 h-3 mr-1" />
@@ -842,21 +844,21 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
</>
)}
</Badge>
<Badge variant={getStatusBadgeVariant(item.status)}>
<Badge variant={getStatusBadgeVariant(item.status)} className={isMobile ? "text-xs" : ""}>
{item.status.charAt(0).toUpperCase() + item.status.slice(1)}
</Badge>
</div>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Calendar className="w-4 h-4" />
{format(new Date(item.created_at), 'MMM d, yyyy HH:mm')}
<div className={`flex items-center gap-2 text-muted-foreground ${isMobile ? 'text-xs' : 'text-sm'}`}>
<Calendar className={isMobile ? "w-3 h-3" : "w-4 h-4"} />
{format(new Date(item.created_at), isMobile ? 'MMM d, yyyy' : 'MMM d, yyyy HH:mm')}
</div>
</div>
{item.user_profile && (
<div className="flex items-center gap-3 text-sm">
<Avatar className="h-8 w-8">
<div className={`flex items-center gap-3 ${isMobile ? 'text-xs' : 'text-sm'}`}>
<Avatar className={isMobile ? "h-7 w-7" : "h-8 w-8"}>
<AvatarImage src={item.user_profile.avatar_url} />
<AvatarFallback>
<AvatarFallback className={isMobile ? "text-xs" : ""}>
{(item.user_profile.display_name || item.user_profile.username)?.slice(0, 2).toUpperCase()}
</AvatarFallback>
</Avatar>
@@ -865,7 +867,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
{item.user_profile.display_name || item.user_profile.username}
</span>
{item.user_profile.display_name && (
<span className="text-muted-foreground block text-xs">
<span className={`text-muted-foreground block ${isMobile ? 'text-xs' : 'text-xs'}`}>
@{item.user_profile.username}
</span>
)}
@@ -874,8 +876,8 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
)}
</CardHeader>
<CardContent className="space-y-4">
<div className="bg-muted/50 p-4 rounded-lg">
<CardContent className={`space-y-4 ${isMobile ? 'p-4 pt-0' : ''}`}>
<div className={`bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4'}`}>
{item.type === 'review' ? (
<div>
{item.content.title && (
@@ -1236,7 +1238,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
/>
</div>
<div className="flex flex-col sm:flex-row gap-2 pt-2">
<div className={`flex gap-2 pt-2 ${isMobile ? 'flex-col' : 'flex-col sm:flex-row'}`}>
{/* Show Review Items button for content submissions */}
{item.type === 'content_submission' && (
<Button
@@ -1246,9 +1248,10 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
}}
disabled={actionLoading === item.id}
variant="outline"
className="flex-1"
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
size={isMobile ? "default" : "default"}
>
<ListTree className="w-4 h-4 mr-2" />
<ListTree className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
Review Items
</Button>
)}
@@ -1256,18 +1259,20 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
<Button
onClick={() => handleModerationAction(item, 'approved', notes[item.id])}
disabled={actionLoading === item.id}
className="flex-1"
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
size={isMobile ? "default" : "default"}
>
<CheckCircle className="w-4 h-4 mr-2" />
<CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
Approve
</Button>
<Button
variant="destructive"
onClick={() => handleModerationAction(item, 'rejected', notes[item.id])}
disabled={actionLoading === item.id}
className="flex-1"
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
size={isMobile ? "default" : "default"}
>
<XCircle className="w-4 h-4 mr-2" />
<XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
Reject
</Button>
</div>
@@ -1314,15 +1319,16 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
onChange={(e) => setNotes(prev => ({ ...prev, [`reverse-${item.id}`]: e.target.value }))}
rows={2}
/>
<div className="flex gap-2">
<div className={`flex gap-2 ${isMobile ? 'flex-col' : ''}`}>
{item.status === 'approved' && (
<Button
variant="destructive"
onClick={() => handleModerationAction(item, 'rejected', notes[`reverse-${item.id}`])}
disabled={actionLoading === item.id}
className="flex-1"
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
size={isMobile ? "default" : "default"}
>
<XCircle className="w-4 h-4 mr-2" />
<XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
Change to Rejected
</Button>
)}
@@ -1330,9 +1336,10 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
<Button
onClick={() => handleModerationAction(item, 'approved', notes[`reverse-${item.id}`])}
disabled={actionLoading === item.id}
className="flex-1"
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
size={isMobile ? "default" : "default"}
>
<CheckCircle className="w-4 h-4 mr-2" />
<CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
Change to Approved
</Button>
)}
@@ -1348,9 +1355,10 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
variant="destructive"
onClick={() => handleDeleteSubmission(item)}
disabled={actionLoading === item.id}
className="w-full"
className={`w-full ${isMobile ? 'h-11' : ''}`}
size={isMobile ? "default" : "default"}
>
<Trash2 className="w-4 h-4 mr-2" />
<Trash2 className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
Delete Submission
</Button>
</div>
@@ -1379,12 +1387,12 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
return (
<div className="space-y-4">
{/* Filter Bar */}
<div className="flex flex-col sm:flex-row gap-4 p-4 bg-muted/50 rounded-lg">
<div className="flex flex-col sm:flex-row gap-4 flex-1">
<div className="space-y-2 min-w-[140px]">
<Label className="text-sm font-medium">Entity Type</Label>
<div className={`flex flex-col gap-4 bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4 sm:flex-row'}`}>
<div className={`flex gap-4 flex-1 ${isMobile ? 'flex-col' : 'flex-col sm:flex-row'}`}>
<div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[140px]'}`}>
<Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>Entity Type</Label>
<Select value={activeEntityFilter} onValueChange={(value) => setActiveEntityFilter(value as EntityFilter)}>
<SelectTrigger>
<SelectTrigger className={isMobile ? "h-10" : ""}>
<SelectValue>
<div className="flex items-center gap-2">
{getEntityFilterIcon(activeEntityFilter)}
@@ -1421,10 +1429,10 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
</Select>
</div>
<div className="space-y-2 min-w-[120px]">
<Label className="text-sm font-medium">Status</Label>
<div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[120px]'}`}>
<Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>Status</Label>
<Select value={activeStatusFilter} onValueChange={(value) => setActiveStatusFilter(value as StatusFilter)}>
<SelectTrigger>
<SelectTrigger className={isMobile ? "h-10" : ""}>
<SelectValue>
<span className="capitalize">{activeStatusFilter === 'all' ? 'All Status' : activeStatusFilter}</span>
</SelectValue>
@@ -1443,12 +1451,12 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
</div>
{(activeEntityFilter !== 'all' || activeStatusFilter !== 'pending') && (
<div className="flex items-end">
<div className={isMobile ? "" : "flex items-end"}>
<Button
variant="outline"
size="sm"
size={isMobile ? "default" : "sm"}
onClick={clearFilters}
className="flex items-center gap-2"
className={`flex items-center gap-2 ${isMobile ? 'w-full h-10' : ''}`}
>
<X className="w-4 h-4" />
Clear Filters