Add compact control room photo grid

resources/js/admin/mobile/EventControlRoomPage.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Image as ImageIcon, RefreshCcw, Settings } from 'lucide-react';
+import { Check, Eye, EyeOff, Image as ImageIcon, RefreshCcw, Settings, Sparkles } from 'lucide-react';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
 import { MobileShell, HeaderActionButton } from './components/MobileShell';
-import { MobileCard, CTAButton, PillBadge, SkeletonCard } from './components/Primitives';
+import { MobileCard, CTAButton, SkeletonCard } from './components/Primitives';
 import { MobileField, MobileSelect } from './components/FormControls';
 import { useEventContext } from '../context/EventContext';
 import {
@@ -37,6 +37,7 @@ import { useBackNavigation } from './hooks/useBackNavigation';
 import { useAdminTheme } from './theme';
 import { useOnlineStatus } from './hooks/useOnlineStatus';
 import { useAuth } from '../auth/context';
+import { withAlpha } from './components/colors';
 import {
   enqueuePhotoAction,
   loadPhotoQueue,
@@ -45,7 +46,7 @@ import {
   type PhotoModerationAction,
 } from './lib/photoModerationQueue';
 import { triggerHaptic } from './lib/haptics';
-import { normalizeLiveStatus, resolveLiveShowApproveMode, resolveStatusTone } from './lib/controlRoom';
+import { normalizeLiveStatus, resolveLiveShowApproveMode } from './lib/controlRoom';
 import { LegalConsentSheet } from './components/LegalConsentSheet';
 import { selectAddonKeyForScope } from './addons';
 import { LimitWarnings } from './components/LimitWarnings';
@@ -86,6 +87,167 @@ function translateLimits(t: (key: string, defaultValue?: string, options?: Recor
   return (key, options) => t(`limits.${key}`, defaults[key] ?? key, options);
 }
 
+type PhotoGridAction = {
+  key: string;
+  label: string;
+  icon: React.ComponentType<{ size?: number; color?: string }>;
+  onPress: () => void;
+  disabled?: boolean;
+};
+
+function PhotoGrid({
+  photos,
+  actionsForPhoto,
+  badgesForPhoto,
+  isBusy,
+}: {
+  photos: TenantPhoto[];
+  actionsForPhoto: (photo: TenantPhoto) => PhotoGridAction[];
+  badgesForPhoto?: (photo: TenantPhoto) => string[];
+  isBusy?: (photo: TenantPhoto) => boolean;
+}) {
+  const gridStyle: React.CSSProperties = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
+    gap: 10,
+  };
+
+  return (
+    <div style={gridStyle}>
+      {photos.map((photo) => (
+        <PhotoGridTile
+          key={photo.id}
+          photo={photo}
+          actions={actionsForPhoto(photo)}
+          badges={badgesForPhoto ? badgesForPhoto(photo) : []}
+          isBusy={isBusy ? isBusy(photo) : false}
+        />
+      ))}
+    </div>
+  );
+}
+
+function PhotoGridTile({
+  photo,
+  actions,
+  badges,
+  isBusy,
+}: {
+  photo: TenantPhoto;
+  actions: PhotoGridAction[];
+  badges: string[];
+  isBusy: boolean;
+}) {
+  const { border, muted, surfaceMuted } = useAdminTheme();
+  const overlayBg = withAlpha('#0f172a', 0.65);
+  const actionBg = withAlpha('#ffffff', 0.14);
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        borderRadius: 16,
+        overflow: 'hidden',
+        border: `1px solid ${border}`,
+        aspectRatio: '1 / 1',
+        backgroundColor: surfaceMuted,
+        opacity: isBusy ? 0.7 : 1,
+      }}
+    >
+      {photo.thumbnail_url ? (
+        <img
+          src={photo.thumbnail_url}
+          alt={photo.original_name ?? 'Photo'}
+          loading="lazy"
+          decoding="async"
+          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+        />
+      ) : (
+        <XStack alignItems="center" justifyContent="center" height="100%" backgroundColor={surfaceMuted}>
+          <ImageIcon size={22} color={muted} />
+        </XStack>
+      )}
+
+      {badges.length ? (
+        <XStack position="absolute" top={6} left={6} space="$1.5">
+          {badges.map((label) => (
+            <PhotoStatusTag key={`${photo.id}-${label}`} label={label} />
+          ))}
+        </XStack>
+      ) : null}
+
+      <XStack
+        position="absolute"
+        left={6}
+        right={6}
+        bottom={6}
+        padding="$1"
+        borderRadius={12}
+        backgroundColor={overlayBg}
+        space="$1.5"
+      >
+        {actions.map((action) => (
+          <PhotoActionButton
+            key={action.key}
+            label={action.label}
+            icon={action.icon}
+            onPress={action.onPress}
+            disabled={action.disabled}
+            backgroundColor={actionBg}
+          />
+        ))}
+      </XStack>
+    </div>
+  );
+}
+
+function PhotoActionButton({
+  label,
+  icon: Icon,
+  onPress,
+  disabled = false,
+  backgroundColor,
+}: {
+  label: string;
+  icon: React.ComponentType<{ size?: number; color?: string }>;
+  onPress: () => void;
+  disabled?: boolean;
+  backgroundColor: string;
+}) {
+  return (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      disabled={disabled}
+      style={{ flex: 1, opacity: disabled ? 0.55 : 1 }}
+    >
+      <YStack
+        alignItems="center"
+        justifyContent="center"
+        paddingVertical={6}
+        paddingHorizontal={4}
+        borderRadius={10}
+        minHeight={36}
+        style={{ backgroundColor }}
+      >
+        <Icon size={14} color="#fff" />
+        <Text fontSize={9} fontWeight="700" color="#fff" textAlign="center">
+          {label}
+        </Text>
+      </YStack>
+    </Pressable>
+  );
+}
+
+function PhotoStatusTag({ label }: { label: string }) {
+  return (
+    <XStack paddingHorizontal={6} paddingVertical={2} borderRadius={999} backgroundColor={withAlpha('#0f172a', 0.7)}>
+      <Text fontSize={9} fontWeight="700" color="#fff">
+        {label}
+      </Text>
+    </XStack>
+  );
+}
+
 export default function MobileEventControlRoomPage() {
   const { slug: slugParam } = useParams<{ slug?: string }>();
   const navigate = useNavigate();
@@ -288,28 +450,42 @@ export default function MobileEventControlRoomPage() {
     setQueuedActions(queue);
   }, []);
 
+  const updatePhotoInCollections = React.useCallback((updated: TenantPhoto) => {
+    setModerationPhotos((prev) => prev.map((photo) => (photo.id === updated.id ? updated : photo)));
+    setLivePhotos((prev) => prev.map((photo) => (photo.id === updated.id ? updated : photo)));
+  }, []);
+
   const applyOptimisticUpdate = React.useCallback((photoId: number, action: PhotoModerationAction['action']) => {
-    setModerationPhotos((prev) =>
-      prev.map((photo) => {
-        if (photo.id !== photoId) {
-          return photo;
-        }
-
-        if (action === 'approve') {
-          return { ...photo, status: 'approved' };
-        }
-
-        if (action === 'hide') {
-          return { ...photo, status: 'hidden' };
-        }
-
-        if (action === 'show') {
-          return { ...photo, status: 'approved' };
-        }
-
+    const applyUpdate = (photo: TenantPhoto) => {
+      if (photo.id !== photoId) {
         return photo;
-      }),
-    );
+      }
+
+      if (action === 'approve') {
+        return { ...photo, status: 'approved' };
+      }
+
+      if (action === 'hide') {
+        return { ...photo, status: 'hidden' };
+      }
+
+      if (action === 'show') {
+        return { ...photo, status: 'approved' };
+      }
+
+      if (action === 'feature') {
+        return { ...photo, is_featured: true };
+      }
+
+      if (action === 'unfeature') {
+        return { ...photo, is_featured: false };
+      }
+
+      return photo;
+    };
+
+    setModerationPhotos((prev) => prev.map(applyUpdate));
+    setLivePhotos((prev) => prev.map(applyUpdate));
   }, []);
 
   const enqueueModerationAction = React.useCallback(
@@ -359,7 +535,7 @@ export default function MobileEventControlRoomPage() {
         remaining = removePhotoAction(remaining, entry.id);
 
         if (updated && entry.eventSlug === slug) {
-          setModerationPhotos((prev) => prev.map((photo) => (photo.id === updated!.id ? updated! : photo)));
+          updatePhotoInCollections(updated);
         }
       } catch (err) {
         toast.error(t('mobilePhotos.syncFailed', 'Sync failed. Please try again later.'));
@@ -372,7 +548,7 @@ export default function MobileEventControlRoomPage() {
     updateQueueState(remaining);
     setSyncingQueue(false);
     syncingQueueRef.current = false;
-  }, [online, slug, t, updateQueueState]);
+  }, [online, slug, t, updatePhotoInCollections, updateQueueState]);
 
   React.useEffect(() => {
     if (online) {
@@ -399,15 +575,25 @@ export default function MobileEventControlRoomPage() {
           updated = await updatePhotoStatus(slug, photo.id, 'approved');
         } else if (action === 'hide') {
           updated = await updatePhotoVisibility(slug, photo.id, true);
-        } else {
+        } else if (action === 'show') {
           updated = await updatePhotoVisibility(slug, photo.id, false);
+        } else if (action === 'feature') {
+          updated = await featurePhoto(slug, photo.id);
+        } else {
+          updated = await unfeaturePhoto(slug, photo.id);
         }
 
-        setModerationPhotos((prev) => prev.map((item) => (item.id === photo.id ? updated : item)));
-        triggerHaptic(action === 'approve' ? 'success' : 'medium');
+        updatePhotoInCollections(updated);
+        triggerHaptic(action === 'approve' || action === 'feature' ? 'success' : 'medium');
       } catch (err) {
         if (!isAuthError(err)) {
-          const message = getApiErrorMessage(err, t('mobilePhotos.visibilityFailed', 'Visibility could not be changed.'));
+          const fallbackMessage =
+            action === 'approve'
+              ? t('mobilePhotos.approveFailed', 'Approval failed.')
+              : action === 'feature' || action === 'unfeature'
+                ? t('mobilePhotos.featureFailed', 'Highlight could not be changed.')
+                : t('mobilePhotos.visibilityFailed', 'Visibility could not be changed.');
+          const message = getApiErrorMessage(err, fallbackMessage);
           setModerationError(message);
           toast.error(message);
         }
@@ -415,7 +601,7 @@ export default function MobileEventControlRoomPage() {
         setModerationBusyId(null);
       }
     },
-    [enqueueModerationAction, online, slug, t],
+    [enqueueModerationAction, online, slug, t, updatePhotoInCollections],
   );
 
   function resolveScopeAndAddonKey(scopeOrKey: 'photos' | 'gallery' | 'guests' | string) {
@@ -691,67 +877,57 @@ export default function MobileEventControlRoomPage() {
               </Text>
             </MobileCard>
           ) : (
-            <YStack space="$2">
-              {moderationPhotos.map((photo) => {
+            <PhotoGrid
+              photos={moderationPhotos}
+              isBusy={(photo) => moderationBusyId === photo.id}
+              badgesForPhoto={(photo) => {
+                const badges: string[] = [];
+                if (photo.status === 'hidden') {
+                  badges.push(t('photos.filters.hidden', 'Hidden'));
+                }
+                if (photo.is_featured) {
+                  badges.push(t('photos.filters.featured', 'Highlights'));
+                }
+                return badges;
+              }}
+              actionsForPhoto={(photo) => {
                 const isBusy = moderationBusyId === photo.id;
                 const galleryStatus = photo.status ?? 'pending';
-                const liveStatus = normalizeLiveStatus(photo.live_status);
                 const canApprove = galleryStatus === 'pending';
                 const canShow = galleryStatus === 'hidden';
                 const visibilityAction: PhotoModerationAction['action'] = canShow ? 'show' : 'hide';
                 const visibilityLabel = canShow
                   ? t('photos.actions.show', 'Show')
                   : t('photos.actions.hide', 'Hide');
-                return (
-                  <MobileCard key={photo.id}>
-                    <XStack space="$3" alignItems="center">
-                      {photo.thumbnail_url ? (
-                        <img
-                          src={photo.thumbnail_url}
-                          alt={photo.original_name ?? 'Photo'}
-                          style={{
-                            width: 72,
-                            height: 72,
-                            borderRadius: 14,
-                            objectFit: 'cover',
-                            border: `1px solid ${border}`,
-                          }}
-                        />
-                      ) : null}
-                      <YStack flex={1} space="$2">
-                        <Text fontSize="$sm" fontWeight="700" color={text}>
-                          {photo.original_name ?? t('common.photo', 'Photo')}
-                        </Text>
-                        <XStack alignItems="center" space="$2">
-                          <PillBadge tone={resolveStatusTone(galleryStatus)}>
-                            {resolveGalleryLabel(galleryStatus)}
-                          </PillBadge>
-                          <PillBadge tone={resolveStatusTone(liveStatus)}>
-                            {resolveLiveLabel(liveStatus)}
-                          </PillBadge>
-                        </XStack>
-                      </YStack>
-                    </XStack>
-                    <XStack space="$2" marginTop="$2">
-                      <CTAButton
-                        label={t('photos.actions.approve', 'Approve')}
-                        onPress={() => handleModerationAction('approve', photo)}
-                        disabled={!canApprove}
-                        loading={isBusy}
-                        tone="primary"
-                      />
-                      <CTAButton
-                        label={visibilityLabel}
-                        onPress={() => handleModerationAction(visibilityAction, photo)}
-                        disabled={false}
-                        loading={isBusy}
-                        tone="ghost"
-                      />
-                    </XStack>
-                  </MobileCard>
-                );
-              })}
-            </YStack>
+                const featureAction: PhotoModerationAction['action'] = photo.is_featured ? 'unfeature' : 'feature';
+                const featureLabel = photo.is_featured
+                  ? t('photos.actions.unfeature', 'Remove highlight')
+                  : t('photos.actions.feature', 'Set highlight');
+                return [
+                  {
+                    key: 'approve',
+                    label: t('photos.actions.approve', 'Approve'),
+                    icon: Check,
+                    onPress: () => handleModerationAction('approve', photo),
+                    disabled: !canApprove || isBusy,
+                  },
+                  {
+                    key: 'visibility',
+                    label: visibilityLabel,
+                    icon: canShow ? Eye : EyeOff,
+                    onPress: () => handleModerationAction(visibilityAction, photo),
+                    disabled: isBusy,
+                  },
+                  {
+                    key: 'feature',
+                    label: featureLabel,
+                    icon: Sparkles,
+                    onPress: () => handleModerationAction(featureAction, photo),
+                    disabled: isBusy,
+                  },
+                ];
+              }}
+            />
           )}
 
           {moderationHasMore ? (
@@ -816,99 +992,76 @@ export default function MobileEventControlRoomPage() {
               </Text>
             </MobileCard>
           ) : (
-            <YStack space="$2">
-              {livePhotos.map((photo) => {
-                const isBusy = liveBusyId === photo.id;
+            <PhotoGrid
+              photos={livePhotos}
+              isBusy={(photo) => moderationBusyId === photo.id || liveBusyId === photo.id}
+              badgesForPhoto={(photo) => {
+                const badges: string[] = [];
+                const liveStatus = normalizeLiveStatus(photo.live_status);
+                if (liveStatus !== 'pending') {
+                  badges.push(resolveLiveLabel(liveStatus));
+                }
+                if (photo.status === 'hidden') {
+                  badges.push(t('photos.filters.hidden', 'Hidden'));
+                }
+                if (photo.is_featured) {
+                  badges.push(t('photos.filters.featured', 'Highlights'));
+                }
+                return badges;
+              }}
+              actionsForPhoto={(photo) => {
+                const isLiveBusy = liveBusyId === photo.id;
+                const isModerationBusy = moderationBusyId === photo.id;
                 const liveStatus = normalizeLiveStatus(photo.live_status);
                 const galleryStatus = photo.status ?? 'pending';
                 const approveMode = resolveLiveShowApproveMode(galleryStatus);
                 const canApproveLive = approveMode !== 'not-eligible';
-                const showApproveAction = liveStatus !== 'approved';
-                const approveLabel =
-                  approveMode === 'approve-and-live'
-                    ? t('liveShowQueue.approveAndLive', 'Approve + Live')
-                    : approveMode === 'approve-only'
-                      ? t('liveShowQueue.approve', 'Approve for Live Show')
-                      : t('liveShowQueue.notEligible', 'Not eligible');
+                const approveDisabled = !online || !canApproveLive || liveStatus === 'approved' || isLiveBusy;
+                const visibilityLabel = t('photos.actions.hide', 'Hide');
+                const featureAction: PhotoModerationAction['action'] = photo.is_featured ? 'unfeature' : 'feature';
+                const featureLabel = photo.is_featured
+                  ? t('photos.actions.unfeature', 'Remove highlight')
+                  : t('photos.actions.feature', 'Set highlight');
 
-                return (
-                  <MobileCard key={photo.id}>
-                    <XStack space="$3" alignItems="center">
-                      {photo.thumbnail_url ? (
-                        <img
-                          src={photo.thumbnail_url}
-                          alt={photo.original_name ?? 'Photo'}
-                          style={{
-                            width: 72,
-                            height: 72,
-                            borderRadius: 14,
-                            objectFit: 'cover',
-                            border: `1px solid ${border}`,
-                          }}
-                        />
-                      ) : null}
-                      <YStack flex={1} space="$2">
-                        <Text fontSize="$sm" fontWeight="700" color={text}>
-                          {photo.original_name ?? t('common.photo', 'Photo')}
-                        </Text>
-                        <XStack alignItems="center" space="$2">
-                          <PillBadge tone={resolveStatusTone(galleryStatus)}>
-                            {resolveGalleryLabel(galleryStatus)}
-                          </PillBadge>
-                          <PillBadge tone={resolveStatusTone(liveStatus)}>
-                            {resolveLiveLabel(liveStatus)}
-                          </PillBadge>
-                        </XStack>
-                      </YStack>
-                    </XStack>
-                    <XStack space="$2" marginTop="$2">
-                      {showApproveAction ? (
-                        <CTAButton
-                          label={approveLabel}
-                          onPress={() => {
-                            if (approveMode === 'approve-and-live') {
-                              void handleApproveAndLive(photo);
-                              return;
-                            }
-                            if (approveMode === 'approve-only') {
-                              void handleApprove(photo);
-                            }
-                          }}
-                          disabled={!online || !canApproveLive}
-                          loading={isBusy}
-                          tone="primary"
-                        />
-                      ) : (
-                        <CTAButton
-                          label={t('liveShowQueue.clear', 'Remove from Live Show')}
-                          onPress={() => handleClear(photo)}
-                          disabled={!online}
-                          loading={isBusy}
-                          tone="ghost"
-                        />
-                      )}
-                      {liveStatus !== 'rejected' ? (
-                        <CTAButton
-                          label={t('liveShowQueue.reject', 'Reject')}
-                          onPress={() => handleReject(photo)}
-                          disabled={!online}
-                          loading={isBusy}
-                          tone="danger"
-                        />
-                      ) : (
-                        <CTAButton
-                          label={t('liveShowQueue.clear', 'Remove from Live Show')}
-                          onPress={() => handleClear(photo)}
-                          disabled={!online}
-                          loading={isBusy}
-                          tone="ghost"
-                        />
-                      )}
-                    </XStack>
-                  </MobileCard>
-                );
-              })}
-            </YStack>
+                return [
+                  {
+                    key: 'approve',
+                    label: t('photos.actions.approve', 'Approve'),
+                    icon: Check,
+                    onPress: () => {
+                      if (approveMode === 'approve-and-live') {
+                        void handleApproveAndLive(photo);
+                        return;
+                      }
+                      if (approveMode === 'approve-only') {
+                        void handleApprove(photo);
+                      }
+                    },
+                    disabled: approveDisabled,
+                  },
+                  {
+                    key: 'visibility',
+                    label: visibilityLabel,
+                    icon: EyeOff,
+                    onPress: () => {
+                      if (liveStatus === 'approved' || liveStatus === 'rejected') {
+                        void handleClear(photo);
+                        return;
+                      }
+                      void handleReject(photo);
+                    },
+                    disabled: !online || isLiveBusy || isModerationBusy,
+                  },
+                  {
+                    key: 'feature',
+                    label: featureLabel,
+                    icon: Sparkles,
+                    onPress: () => handleModerationAction(featureAction, photo),
+                    disabled: isModerationBusy,
+                  },
+                ];
+              }}
+            />
           )}
 
           {liveHasMore ? (