Refactor: Update Tenant PWA headers and tabs to use Playfair Display and Tamagui components

resources/js/admin/mobile/EventControlRoomPage.tsx

@@ -10,7 +10,7 @@ import { Accordion } from '@tamagui/accordion';
 import { ScrollView } from '@tamagui/scroll-view';
 import { ToggleGroup } from '@tamagui/toggle-group';
 import { MobileShell, HeaderActionButton } from './components/MobileShell';
-import { MobileCard, CTAButton, SkeletonCard } from './components/Primitives';
+import { MobileCard, CTAButton, SkeletonCard, ContentTabs } from './components/Primitives';
 import { MobileField, MobileSelect } from './components/FormControls';
 import { useEventContext } from '../context/EventContext';
 import {
@@ -279,7 +279,7 @@ export default function MobileEventControlRoomPage() {
   const isMember = user?.role === 'member';
   const slug = slugParam ?? activeEvent?.slug ?? null;
   const online = useOnlineStatus();
-  const { textStrong, text, muted, border, accentSoft, accent, danger, primary, surfaceMuted, surface } = useAdminTheme();
+  const { textStrong, muted, border, primary, surfaceMuted, surface } = useAdminTheme();
   const [activeTab, setActiveTab] = React.useState<'moderation' | 'live'>('moderation');
 
   const [moderationPhotos, setModerationPhotos] = React.useState<TenantPhoto[]>([]);
@@ -342,8 +342,6 @@ export default function MobileEventControlRoomPage() {
   const liveResetRef = React.useRef(false);
   const [fallbackAttempted, setFallbackAttempted] = React.useState(false);
   const back = useBackNavigation(slug ? adminPath(`/mobile/events/${slug}`) : adminPath('/mobile/events'));
-  const infoBg = accentSoft;
-  const infoBorder = accent;
   const activeFilterBg = primary;
 
   const saveControlRoomSettings = React.useCallback(
@@ -1022,17 +1020,6 @@ export default function MobileEventControlRoomPage() {
     }
   }
 
-  function resolveGalleryLabel(status?: string | null): string {
-    const key = status ?? 'pending';
-    const fallbackMap: Record<string, string> = {
-      approved: 'Gallery approved',
-      pending: 'Gallery pending',
-      rejected: 'Gallery rejected',
-      hidden: 'Hidden',
-    };
-    return t(`liveShowQueue.galleryStatus.${key}`, fallbackMap[key] ?? key);
-  }
-
   function resolveLiveLabel(status?: string | null): string {
     const key = normalizeLiveStatus(status);
     return t(`liveShowQueue.status.${key}`, key);
@@ -1078,24 +1065,10 @@ export default function MobileEventControlRoomPage() {
       onBack={back}
       headerActions={headerActions}
     >
-      <XStack space="$2">
-        {([
-          { key: 'moderation', label: t('controlRoom.tabs.moderation', 'Moderation') },
-          { key: 'live', label: t('controlRoom.tabs.live', 'Live Show') },
-        ] as const).map((tab) => (
-          <Pressable key={tab.key} onPress={() => setActiveTab(tab.key)} style={{ flex: 1 }}>
-            <MobileCard
-              backgroundColor={activeTab === tab.key ? infoBg : 'transparent'}
-              borderColor={activeTab === tab.key ? infoBorder : border}
-              padding="$2.5"
-            >
-              <Text fontSize="$sm" fontWeight="700" textAlign="center" color={textStrong}>
-                {tab.label}
-              </Text>
-            </MobileCard>
-          </Pressable>
-        ))}
-      </XStack>
+      <ContentTabs
+        value={activeTab}
+        onValueChange={(val) => setActiveTab(val as 'moderation' | 'live')}
+        header={(
 
       <MobileCard>
         <Accordion type="single" collapsible>
@@ -1360,8 +1333,12 @@ export default function MobileEventControlRoomPage() {
           </Accordion.Item>
         </Accordion>
       </MobileCard>
-
-      {activeTab === 'moderation' ? (
+        )}
+        tabs={[
+          {
+            value: 'moderation',
+            label: t('controlRoom.tabs.moderation', 'Moderation'),
+            content: (
         <YStack space="$2">
           {queuedEventCount > 0 ? (
             <MobileCard>
@@ -1555,7 +1532,12 @@ export default function MobileEventControlRoomPage() {
             </MobileCard>
           ) : null}
         </YStack>
-      ) : (
+            ),
+          },
+          {
+            value: 'live',
+            label: t('controlRoom.tabs.live', 'Live Show'),
+            content: (
         <YStack space="$2">
           <MobileCard borderColor={border} backgroundColor="transparent">
             <Text fontSize="$sm" color={muted}>
@@ -1744,7 +1726,10 @@ export default function MobileEventControlRoomPage() {
             </MobileCard>
           ) : null}
         </YStack>
-      )}
+            ),
+          },
+        ]}
+      />
 
       <LegalConsentSheet
         open={consentOpen}