F(frontend): add image lightbox and derivative fallbacks

src/views/AdminEvents.tsx

@@ -11,8 +11,9 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import ProgressiveImage from '@/components/ProgressiveImage';
 import { useToast } from '@/hooks/use-toast';
-import { formatJalali, formatToman, getThumbUrl, resolveErrorMessage, toPersianDigits } from '@/lib/utils';
+import { formatJalali, formatToman, getEventCardImageUrl, resolveErrorMessage, toPersianDigits } from '@/lib/utils';
 
 const EVENTS_PAGE_SIZE = 30;
 
@@ -225,11 +226,11 @@ const AdminEventsPage: React.FC = () => {
                       {sortedEvents.map((event) => (
                         <tr key={event.id} className="border-b last:border-0 hover:bg-muted/50">
                           <td className="px-3 py-2 text-right">
-                            <img
-                              src={getThumbUrl(event)}
+                            <ProgressiveImage
+                              src={getEventCardImageUrl(event)}
                               alt={event.title}
+                              wrapperClassName="h-12 w-12 rounded"
                               className="h-12 w-12 rounded object-cover"
-                              loading="lazy"
                             />
                           </td>
                           <td className="px-3 py-2 text-right cursor-pointer" onClick={() => navigate(`/admin/events/${event.id}`)}>