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) =>
+    const applyUpdate = (photo: TenantPhoto) => {
-      prev.map((photo) => {
+      if (photo.id !== photoId) {
-        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' };
-        }
-
         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)));
+        updatePhotoInCollections(updated);
-        triggerHaptic(action === 'approve' ? 'success' : 'medium');
+        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">
+            <PhotoGrid
-              {moderationPhotos.map((photo) => {
+              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 (
+                const featureAction: PhotoModerationAction['action'] = photo.is_featured ? 'unfeature' : 'feature';
-                  <MobileCard key={photo.id}>
+                const featureLabel = photo.is_featured
-                    <XStack space="$3" alignItems="center">
+                  ? t('photos.actions.unfeature', 'Remove highlight')
-                      {photo.thumbnail_url ? (
+                  : t('photos.actions.feature', 'Set highlight');
-                        <img
+                return [
-                          src={photo.thumbnail_url}
+                  {
-                          alt={photo.original_name ?? 'Photo'}
+                    key: 'approve',
-                          style={{
+                    label: t('photos.actions.approve', 'Approve'),
-                            width: 72,
+                    icon: Check,
-                            height: 72,
+                    onPress: () => handleModerationAction('approve', photo),
-                            borderRadius: 14,
+                    disabled: !canApprove || isBusy,
-                            objectFit: 'cover',
+                  },
-                            border: `1px solid ${border}`,
+                  {
-                          }}
+                    key: 'visibility',
-                        />
+                    label: visibilityLabel,
-                      ) : null}
+                    icon: canShow ? Eye : EyeOff,
-                      <YStack flex={1} space="$2">
+                    onPress: () => handleModerationAction(visibilityAction, photo),
-                        <Text fontSize="$sm" fontWeight="700" color={text}>
+                    disabled: isBusy,
-                          {photo.original_name ?? t('common.photo', 'Photo')}
+                  },
-                        </Text>
+                  {
-                        <XStack alignItems="center" space="$2">
+                    key: 'feature',
-                          <PillBadge tone={resolveStatusTone(galleryStatus)}>
+                    label: featureLabel,
-                            {resolveGalleryLabel(galleryStatus)}
+                    icon: Sparkles,
-                          </PillBadge>
+                    onPress: () => handleModerationAction(featureAction, photo),
-                          <PillBadge tone={resolveStatusTone(liveStatus)}>
+                    disabled: isBusy,
-                            {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>
           )}
 
           {moderationHasMore ? (
@@ -816,99 +992,76 @@ export default function MobileEventControlRoomPage() {
               </Text>
             </MobileCard>
           ) : (
-            <YStack space="$2">
+            <PhotoGrid
-              {livePhotos.map((photo) => {
+              photos={livePhotos}
-                const isBusy = liveBusyId === photo.id;
+              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 approveDisabled = !online || !canApproveLive || liveStatus === 'approved' || isLiveBusy;
-                const approveLabel =
+                const visibilityLabel = t('photos.actions.hide', 'Hide');
-                  approveMode === 'approve-and-live'
+                const featureAction: PhotoModerationAction['action'] = photo.is_featured ? 'unfeature' : 'feature';
-                    ? t('liveShowQueue.approveAndLive', 'Approve + Live')
+                const featureLabel = photo.is_featured
-                    : approveMode === 'approve-only'
+                  ? t('photos.actions.unfeature', 'Remove highlight')
-                      ? t('liveShowQueue.approve', 'Approve for Live Show')
+                  : t('photos.actions.feature', 'Set highlight');
-                      : t('liveShowQueue.notEligible', 'Not eligible');
 
-                return (
+                return [
-                  <MobileCard key={photo.id}>
+                  {
-                    <XStack space="$3" alignItems="center">
+                    key: 'approve',
-                      {photo.thumbnail_url ? (
+                    label: t('photos.actions.approve', 'Approve'),
-                        <img
+                    icon: Check,
-                          src={photo.thumbnail_url}
+                    onPress: () => {
-                          alt={photo.original_name ?? 'Photo'}
+                      if (approveMode === 'approve-and-live') {
-                          style={{
+                        void handleApproveAndLive(photo);
-                            width: 72,
+                        return;
-                            height: 72,
+                      }
-                            borderRadius: 14,
+                      if (approveMode === 'approve-only') {
-                            objectFit: 'cover',
+                        void handleApprove(photo);
-                            border: `1px solid ${border}`,
+                      }
-                          }}
+                    },
-                        />
+                    disabled: approveDisabled,
-                      ) : null}
+                  },
-                      <YStack flex={1} space="$2">
+                  {
-                        <Text fontSize="$sm" fontWeight="700" color={text}>
+                    key: 'visibility',
-                          {photo.original_name ?? t('common.photo', 'Photo')}
+                    label: visibilityLabel,
-                        </Text>
+                    icon: EyeOff,
-                        <XStack alignItems="center" space="$2">
+                    onPress: () => {
-                          <PillBadge tone={resolveStatusTone(galleryStatus)}>
+                      if (liveStatus === 'approved' || liveStatus === 'rejected') {
-                            {resolveGalleryLabel(galleryStatus)}
+                        void handleClear(photo);
-                          </PillBadge>
+                        return;
-                          <PillBadge tone={resolveStatusTone(liveStatus)}>
+                      }
-                            {resolveLiveLabel(liveStatus)}
+                      void handleReject(photo);
-                          </PillBadge>
+                    },
-                        </XStack>
+                    disabled: !online || isLiveBusy || isModerationBusy,
-                      </YStack>
+                  },
-                    </XStack>
+                  {
-                    <XStack space="$2" marginTop="$2">
+                    key: 'feature',
-                      {showApproveAction ? (
+                    label: featureLabel,
-                        <CTAButton
+                    icon: Sparkles,
-                          label={approveLabel}
+                    onPress: () => handleModerationAction(featureAction, photo),
-                          onPress={() => {
+                    disabled: isModerationBusy,
-                            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>
           )}
 
           {liveHasMore ? (

resources/js/admin/mobile/__tests__/EventControlRoomPage.test.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+
+const navigateMock = vi.fn();
+const selectEventMock = vi.fn();
+
+vi.mock('react-router-dom', () => ({
+  useNavigate: () => navigateMock,
+  useLocation: () => ({ search: '', pathname: '/event-admin/mobile/events/demo-event/control-room' }),
+  useParams: () => ({ slug: 'demo-event' }),
+}));
+
+const tMock = (key: string, fallback?: string | Record<string, unknown>, options?: Record<string, unknown>) => {
+  if (typeof fallback === 'string') {
+    return fallback;
+  }
+  if (fallback && typeof fallback === 'object' && typeof fallback.defaultValue === 'string') {
+    return fallback.defaultValue;
+  }
+  if (options?.defaultValue) {
+    return String(options.defaultValue);
+  }
+  return key;
+};
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: tMock,
+  }),
+}));
+
+vi.mock('../../auth/context', () => ({
+  useAuth: () => ({ user: { role: 'tenant_admin' } }),
+}));
+
+vi.mock('../../context/EventContext', () => ({
+  useEventContext: () => ({
+    activeEvent: { slug: 'demo-event' },
+    selectEvent: selectEventMock,
+  }),
+}));
+
+vi.mock('../hooks/useOnlineStatus', () => ({
+  useOnlineStatus: () => true,
+}));
+
+vi.mock('../hooks/useBackNavigation', () => ({
+  useBackNavigation: () => undefined,
+}));
+
+vi.mock('../components/MobileShell', () => ({
+  MobileShell: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  HeaderActionButton: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+vi.mock('../components/Primitives', () => ({
+  MobileCard: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  CTAButton: ({ label, onPress }: { label: string; onPress?: () => void }) => (
+    <button type="button" onClick={onPress}>
+      {label}
+    </button>
+  ),
+  SkeletonCard: () => <div>Loading...</div>,
+}));
+
+vi.mock('../components/FormControls', () => ({
+  MobileField: ({ label, children }: { label: string; children: React.ReactNode }) => (
+    <label>
+      {label}
+      {children}
+    </label>
+  ),
+  MobileSelect: (props: React.SelectHTMLAttributes<HTMLSelectElement>) => <select {...props} />,
+}));
+
+vi.mock('../components/LegalConsentSheet', () => ({
+  LegalConsentSheet: () => null,
+}));
+
+vi.mock('../components/LimitWarnings', () => ({
+  LimitWarnings: () => null,
+}));
+
+vi.mock('react-hot-toast', () => ({
+  default: {
+    error: vi.fn(),
+    success: vi.fn(),
+  },
+}));
+
+vi.mock('@tamagui/stacks', () => ({
+  YStack: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  XStack: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+vi.mock('@tamagui/text', () => ({
+  SizableText: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
+}));
+
+vi.mock('@tamagui/react-native-web-lite', () => ({
+  Pressable: ({ children, onPress }: { children: React.ReactNode; onPress?: () => void }) => (
+    <button type="button" onClick={onPress}>
+      {children}
+    </button>
+  ),
+}));
+
+vi.mock('../theme', () => ({
+  useAdminTheme: () => ({
+    textStrong: '#111827',
+    text: '#111827',
+    muted: '#6b7280',
+    border: '#e5e7eb',
+    accentSoft: '#eef2ff',
+    accent: '#6366f1',
+    danger: '#dc2626',
+    surfaceMuted: '#f9fafb',
+  }),
+}));
+
+vi.mock('../lib/photoModerationQueue', () => ({
+  enqueuePhotoAction: vi.fn().mockReturnValue([]),
+  loadPhotoQueue: () => [],
+  removePhotoAction: vi.fn((queue: unknown[]) => queue),
+  replacePhotoQueue: vi.fn((queue: unknown[]) => queue),
+}));
+
+vi.mock('../lib/haptics', () => ({
+  triggerHaptic: () => undefined,
+}));
+
+vi.mock('../../api', () => ({
+  approveAndLiveShowPhoto: vi.fn(),
+  approveLiveShowPhoto: vi.fn(),
+  clearLiveShowPhoto: vi.fn(),
+  createEventAddonCheckout: vi.fn(),
+  featurePhoto: vi.fn(),
+  getAddonCatalog: vi.fn().mockResolvedValue([]),
+  getEventPhotos: vi.fn().mockResolvedValue({
+    photos: [
+      {
+        id: 1,
+        filename: 'photo.jpg',
+        original_name: 'Photo 1',
+        mime_type: 'image/jpeg',
+        size: 120,
+        url: '/full.jpg',
+        thumbnail_url: '/thumb.jpg',
+        status: 'pending',
+        live_status: null,
+        is_featured: false,
+        likes_count: 0,
+        uploaded_at: '2024-01-01T00:00:00Z',
+        uploader_name: 'Guest',
+      },
+    ],
+    limits: null,
+    meta: { last_page: 1 },
+  }),
+  getEvents: vi.fn().mockResolvedValue([]),
+  getLiveShowQueue: vi.fn().mockResolvedValue({ photos: [], meta: { last_page: 1 } }),
+  rejectLiveShowPhoto: vi.fn(),
+  unfeaturePhoto: vi.fn(),
+  updatePhotoStatus: vi.fn(),
+  updatePhotoVisibility: vi.fn(),
+}));
+
+import MobileEventControlRoomPage from '../EventControlRoomPage';
+
+describe('MobileEventControlRoomPage', () => {
+  it('renders compact grid actions for moderation photos', async () => {
+    render(<MobileEventControlRoomPage />);
+
+    expect(await screen.findByText('Approve')).toBeInTheDocument();
+    expect(screen.getByText('Hide')).toBeInTheDocument();
+    expect(screen.getByText('Set highlight')).toBeInTheDocument();
+  });
+});