pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-21 20:51:17 -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

36
src/components/moderation/DependencyVisualizer.tsx
View File

@@ -4,6 +4,7 @@ import { Badge } from '@/components/ui/badge';
import { ArrowDown, AlertCircle } from 'lucide-react'; import { ArrowDown, AlertCircle } from 'lucide-react';
import { type SubmissionItemWithDeps } from '@/lib/submissionItemsService'; import { type SubmissionItemWithDeps } from '@/lib/submissionItemsService';
import { Alert, AlertDescription } from '@/components/ui/alert'; import { Alert, AlertDescription } from '@/components/ui/alert';
import { useIsMobile } from '@/hooks/use-mobile';
interface DependencyVisualizerProps { interface DependencyVisualizerProps {
items: SubmissionItemWithDeps[]; items: SubmissionItemWithDeps[];
@@ -11,6 +12,8 @@ interface DependencyVisualizerProps {
} }
export function DependencyVisualizer({ items, selectedIds }: DependencyVisualizerProps) { export function DependencyVisualizer({ items, selectedIds }: DependencyVisualizerProps) {
const isMobile = useIsMobile();
const dependencyLevels = useMemo(() => { const dependencyLevels = useMemo(() => {
const levels: SubmissionItemWithDeps[][] = []; const levels: SubmissionItemWithDeps[][] = [];
const visited = new Set<string>(); const visited = new Set<string>();
@@ -62,13 +65,13 @@ export function DependencyVisualizer({ items, selectedIds }: DependencyVisualize
{dependencyLevels.map((level, levelIdx) => ( {dependencyLevels.map((level, levelIdx) => (
<div key={levelIdx} className="space-y-3"> <div key={levelIdx} className="space-y-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<h4 className="text-sm font-medium text-muted-foreground"> <h4 className={`font-medium text-muted-foreground ${isMobile ? 'text-xs' : 'text-sm'}`}>
Level {levelIdx + 1} Level {levelIdx + 1}
</h4> </h4>
<div className="flex-1 h-px bg-border" /> <div className="flex-1 h-px bg-border" />
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3"> <div className={`grid gap-3 ${isMobile ? 'grid-cols-1' : 'grid-cols-1 md:grid-cols-2'}`}>
{level.map((item) => ( {level.map((item) => (
<Card <Card
key={item.id} key={item.id}
@@ -76,28 +79,31 @@ export function DependencyVisualizer({ items, selectedIds }: DependencyVisualize
selectedIds.has(item.id) selectedIds.has(item.id)
? 'ring-2 ring-primary' ? 'ring-2 ring-primary'
: '' : ''
}`} } ${isMobile ? 'touch-manipulation' : ''}`}
> >
<CardHeader className="pb-2"> <CardHeader className={isMobile ? "pb-2 p-4" : "pb-2"}>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between gap-2">
<CardTitle className="text-sm"> <CardTitle className={isMobile ? "text-xs" : "text-sm"}>
{item.item_type.replace('_', ' ').toUpperCase()} {item.item_type.replace('_', ' ').toUpperCase()}
</CardTitle> </CardTitle>
<Badge variant={ <Badge
item.status === 'approved' ? 'default' : variant={
item.status === 'rejected' ? 'destructive' : item.status === 'approved' ? 'default' :
'secondary' item.status === 'rejected' ? 'destructive' :
}> 'secondary'
}
className={isMobile ? "text-xs shrink-0" : ""}
>
{item.status} {item.status}
</Badge> </Badge>
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent className={isMobile ? "p-4 pt-0" : ""}>
<p className="text-sm font-medium"> <p className={`font-medium ${isMobile ? 'text-sm' : 'text-sm'}`}>
{item.item_data.name || 'Unnamed'} {item.item_data.name || 'Unnamed'}
</p> </p>
{item.dependents && item.dependents.length > 0 && ( {item.dependents && item.dependents.length > 0 && (
<p className="text-xs text-muted-foreground mt-1"> <p className={`text-muted-foreground mt-1 ${isMobile ? 'text-xs' : 'text-xs'}`}>
Has {item.dependents.length} dependent(s) Has {item.dependents.length} dependent(s)
</p> </p>
)} )}
@@ -108,7 +114,7 @@ export function DependencyVisualizer({ items, selectedIds }: DependencyVisualize
{levelIdx < dependencyLevels.length - 1 && ( {levelIdx < dependencyLevels.length - 1 && (
<div className="flex justify-center py-2"> <div className="flex justify-center py-2">
<ArrowDown className="w-5 h-5 text-muted-foreground" /> <ArrowDown className={isMobile ? "w-4 h-4 text-muted-foreground" : "w-5 h-5 text-muted-foreground"} />
</div> </div>
)} )}
</div> </div>

37
src/components/moderation/ItemReviewCard.tsx
View File

@@ -3,6 +3,7 @@ import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Edit, MapPin, Zap, Building2, Image, Package } from 'lucide-react'; import { Edit, MapPin, Zap, Building2, Image, Package } from 'lucide-react';
import { type SubmissionItemWithDeps } from '@/lib/submissionItemsService'; import { type SubmissionItemWithDeps } from '@/lib/submissionItemsService';
import { useIsMobile } from '@/hooks/use-mobile';
interface ItemReviewCardProps { interface ItemReviewCardProps {
item: SubmissionItemWithDeps; item: SubmissionItemWithDeps;
@@ -11,6 +12,8 @@ interface ItemReviewCardProps {
} }
export function ItemReviewCard({ item, onEdit, onStatusChange }: ItemReviewCardProps) { export function ItemReviewCard({ item, onEdit, onStatusChange }: ItemReviewCardProps) {
const isMobile = useIsMobile();
const getItemIcon = () => { const getItemIcon = () => {
switch (item.item_type) { switch (item.item_type) {
case 'park': return <MapPin className="w-4 h-4" />; case 'park': return <MapPin className="w-4 h-4" />;
@@ -91,19 +94,19 @@ export function ItemReviewCard({ item, onEdit, onStatusChange }: ItemReviewCardP
case 'photo': case 'photo':
return ( return (
<div className="space-y-2"> <div className="space-y-2">
<div className="grid grid-cols-3 gap-2"> <div className={`grid gap-2 ${isMobile ? 'grid-cols-2' : 'grid-cols-3'}`}>
{data.photos?.slice(0, 3).map((photo: any, idx: number) => ( {data.photos?.slice(0, isMobile ? 2 : 3).map((photo: any, idx: number) => (
<img <img
key={idx} key={idx}
src={photo.url} src={photo.url}
alt={photo.caption || 'Submission photo'} alt={photo.caption || 'Submission photo'}
className="w-full h-20 object-cover rounded" className={`w-full object-cover rounded ${isMobile ? 'h-24' : 'h-20'}`}
/> />
))} ))}
</div> </div>
{data.photos?.length > 3 && ( {data.photos?.length > (isMobile ? 2 : 3) && (
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
+{data.photos.length - 3} more photo(s) +{data.photos.length - (isMobile ? 2 : 3)} more photo(s)
</p> </p>
)} )}
</div> </div>
@@ -120,11 +123,11 @@ export function ItemReviewCard({ item, onEdit, onStatusChange }: ItemReviewCardP
return ( return (
<Card className="w-full"> <Card className="w-full">
<CardHeader className="pb-3"> <CardHeader className={isMobile ? "pb-3 p-4" : "pb-3"}>
<div className="flex items-start justify-between gap-2"> <div className={`flex gap-2 ${isMobile ? 'flex-col' : 'items-start justify-between'}`}>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 flex-wrap">
{getItemIcon()} {getItemIcon()}
<CardTitle className="text-base"> <CardTitle className={isMobile ? "text-sm" : "text-base"}>
{item.item_type.replace('_', ' ').toUpperCase()} {item.item_type.replace('_', ' ').toUpperCase()}
</CardTitle> </CardTitle>
{item.original_data && ( {item.original_data && (
@@ -134,27 +137,29 @@ export function ItemReviewCard({ item, onEdit, onStatusChange }: ItemReviewCardP
)} )}
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Badge variant={getStatusColor()}> <Badge variant={getStatusColor()} className={isMobile ? "text-xs" : ""}>
{item.status} {item.status}
</Badge> </Badge>
{item.status === 'pending' && ( {item.status === 'pending' && (
<Button <Button
size="sm" size={isMobile ? "default" : "sm"}
variant="ghost" variant="ghost"
onClick={onEdit} onClick={onEdit}
className={isMobile ? "h-9 px-3" : ""}
> >
<Edit className="w-3 h-3" /> <Edit className={isMobile ? "w-4 h-4" : "w-3 h-3"} />
{isMobile && <span className="ml-2">Edit</span>}
</Button> </Button>
)} )}
</div> </div>
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent className={isMobile ? "p-4 pt-0" : ""}>
{renderItemPreview()} {renderItemPreview()}
{item.depends_on && ( {item.depends_on && (
<div className="mt-3 pt-3 border-t"> <div className="mt-3 pt-3 border-t">
<p className="text-xs text-muted-foreground"> <p className={`text-muted-foreground ${isMobile ? 'text-xs' : 'text-xs'}`}>
Depends on another item in this submission Depends on another item in this submission
</p> </p>
</div> </div>
@@ -162,10 +167,10 @@ export function ItemReviewCard({ item, onEdit, onStatusChange }: ItemReviewCardP
{item.rejection_reason && ( {item.rejection_reason && (
<div className="mt-3 pt-3 border-t"> <div className="mt-3 pt-3 border-t">
<p className="text-xs font-medium text-destructive"> <p className={`font-medium text-destructive ${isMobile ? 'text-xs' : 'text-xs'}`}>
Rejection Reason: Rejection Reason:
</p> </p>
<p className="text-xs text-muted-foreground mt-1"> <p className={`text-muted-foreground mt-1 ${isMobile ? 'text-xs' : 'text-xs'}`}>
{item.rejection_reason} {item.rejection_reason}
</p> </p>
</div> </div>

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

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

91
src/components/moderation/PhotoModal.tsx
View File

@@ -1,7 +1,8 @@
import { useState } from 'react'; import { useState, useEffect, useRef } from 'react';
import { X, ChevronLeft, ChevronRight } from 'lucide-react'; import { X, ChevronLeft, ChevronRight } from 'lucide-react';
import { Dialog, DialogContent } from '@/components/ui/dialog'; import { Dialog, DialogContent } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { useIsMobile } from '@/hooks/use-mobile';
interface PhotoModalProps { interface PhotoModalProps {
photos: Array<{ photos: Array<{
@@ -16,8 +17,16 @@ interface PhotoModalProps {
} }
export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModalProps) { export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModalProps) {
const isMobile = useIsMobile();
const [currentIndex, setCurrentIndex] = useState(initialIndex); const [currentIndex, setCurrentIndex] = useState(initialIndex);
const [touchStart, setTouchStart] = useState<number | null>(null);
const [touchEnd, setTouchEnd] = useState<number | null>(null);
const imageRef = useRef<HTMLImageElement>(null);
const currentPhoto = photos[currentIndex]; const currentPhoto = photos[currentIndex];
// Minimum swipe distance (in px)
const minSwipeDistance = 50;
const goToPrevious = () => { const goToPrevious = () => {
setCurrentIndex((prev) => (prev > 0 ? prev - 1 : photos.length - 1)); setCurrentIndex((prev) => (prev > 0 ? prev - 1 : photos.length - 1));
@@ -33,28 +42,62 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
if (e.key === 'Escape') onClose(); if (e.key === 'Escape') onClose();
}; };
const onTouchStart = (e: React.TouchEvent) => {
setTouchEnd(null);
setTouchStart(e.targetTouches[0].clientX);
};
const onTouchMove = (e: React.TouchEvent) => {
setTouchEnd(e.targetTouches[0].clientX);
};
const onTouchEnd = () => {
if (!touchStart || !touchEnd) return;
const distance = touchStart - touchEnd;
const isLeftSwipe = distance > minSwipeDistance;
const isRightSwipe = distance < -minSwipeDistance;
if (isLeftSwipe) {
goToNext();
} else if (isRightSwipe) {
goToPrevious();
}
};
useEffect(() => {
setCurrentIndex(initialIndex);
}, [initialIndex]);
return ( return (
<Dialog open={isOpen} onOpenChange={onClose}> <Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="max-w-7xl w-full max-h-[90vh] p-0 [&>button]:hidden"> <DialogContent className={`max-w-7xl w-full p-0 [&>button]:hidden ${isMobile ? 'max-h-screen h-screen' : 'max-h-[90vh]'}`}>
<div className="relative bg-black rounded-lg overflow-hidden" onKeyDown={handleKeyDown} tabIndex={0}> <div
className="relative bg-black rounded-lg overflow-hidden touch-none"
onKeyDown={handleKeyDown}
onTouchStart={onTouchStart}
onTouchMove={onTouchMove}
onTouchEnd={onTouchEnd}
tabIndex={0}
>
{/* Close button */} {/* Close button */}
<Button <Button
variant="ghost" variant="ghost"
size="sm" size={isMobile ? "default" : "sm"}
onClick={onClose} onClick={onClose}
className="absolute top-4 right-4 z-20 text-white hover:bg-white/10" className={`absolute z-20 text-white hover:bg-white/10 ${isMobile ? 'top-2 right-2 h-10 w-10 p-0' : 'top-4 right-4'}`}
> >
<X className="h-4 w-4" /> <X className={isMobile ? "h-5 w-5" : "h-4 w-4"} />
</Button> </Button>
{/* Header */} {/* Header */}
<div className="absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-black/80 to-transparent p-4"> <div className={`absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-black/80 to-transparent ${isMobile ? 'p-3' : 'p-4'}`}>
<div className="text-white"> <div className="text-white">
<h3 className="font-medium"> <h3 className={`font-medium ${isMobile ? 'text-sm pr-12' : ''}`}>
{currentPhoto?.filename || `Photo ${currentIndex + 1}`} {currentPhoto?.filename || `Photo ${currentIndex + 1}`}
</h3> </h3>
{photos.length > 1 && ( {photos.length > 1 && (
<p className="text-sm text-white/70"> <p className={`text-white/70 ${isMobile ? 'text-xs' : 'text-sm'}`}>
{currentIndex + 1} of {photos.length} {currentIndex + 1} of {photos.length}
</p> </p>
)} )}
@@ -62,17 +105,19 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
</div> </div>
{/* Image */} {/* Image */}
<div className="flex items-center justify-center min-h-[400px] max-h-[80vh]"> <div className={`flex items-center justify-center ${isMobile ? 'min-h-screen' : 'min-h-[400px] max-h-[80vh]'}`}>
<img <img
ref={imageRef}
src={currentPhoto?.url} src={currentPhoto?.url}
alt={currentPhoto?.caption || `Photo ${currentIndex + 1}`} alt={currentPhoto?.caption || `Photo ${currentIndex + 1}`}
className="max-w-full max-h-full object-contain" className="max-w-full max-h-full object-contain select-none"
loading="lazy" loading="lazy"
draggable={false}
/> />
</div> </div>
{/* Navigation */} {/* Navigation */}
{photos.length > 1 && ( {photos.length > 1 && !isMobile && (
<> <>
<Button <Button
variant="ghost" variant="ghost"
@@ -92,11 +137,29 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
</Button> </Button>
</> </>
)} )}
{/* Mobile navigation dots */}
{photos.length > 1 && isMobile && (
<div className="absolute bottom-20 left-0 right-0 flex justify-center gap-2 px-4">
{photos.map((_, idx) => (
<button
key={idx}
onClick={() => setCurrentIndex(idx)}
className={`h-2 rounded-full transition-all ${
idx === currentIndex
? 'w-8 bg-white'
: 'w-2 bg-white/50'
}`}
aria-label={`Go to photo ${idx + 1}`}
/>
))}
</div>
)}
{/* Caption */} {/* Caption */}
{currentPhoto?.caption && ( {currentPhoto?.caption && (
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4"> <div className={`absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent ${isMobile ? 'p-3' : 'p-4'} ${isMobile && photos.length > 1 ? 'pb-14' : ''}`}>
<p className="text-white text-sm">{currentPhoto.caption}</p> <p className={`text-white ${isMobile ? 'text-xs' : 'text-sm'}`}>{currentPhoto.caption}</p>
</div> </div>
)} )}
</div> </div>