Misc unrelated updates

resources/js/admin/mobile/components/MobileShell.tsx

@@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { ChevronDown, ChevronLeft, Bell, QrCode } from 'lucide-react';
+import { ChevronLeft, Bell, QrCode } from 'lucide-react';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
@@ -9,11 +9,10 @@ import { useEventContext } from '../../context/EventContext';
 import { BottomNav, NavKey } from './BottomNav';
 import { useMobileNav } from '../hooks/useMobileNav';
 import { adminPath } from '../../constants';
-import { MobileSheet } from './Sheet';
-import { MobileCard, PillBadge, CTAButton } from './Primitives';
+import { MobileCard, CTAButton } from './Primitives';
 import { useNotificationsBadge } from '../hooks/useNotificationsBadge';
 import { useOnlineStatus } from '../hooks/useOnlineStatus';
-import { formatEventDate, resolveEventDisplayName } from '../../lib/events';
+import { resolveEventDisplayName } from '../../lib/events';
 import { TenantEvent, getEvents } from '../../api';
 import { withAlpha } from './colors';
 import { setTabHistory } from '../lib/tabHistory';
@@ -31,11 +30,11 @@ type MobileShellProps = {
 };
 
 export function MobileShell({ title, subtitle, children, activeTab, onBack, headerActions }: MobileShellProps) {
-  const { events, activeEvent, hasMultipleEvents, hasEvents, selectEvent } = useEventContext();
+  const { events, activeEvent, selectEvent } = useEventContext();
   const { go } = useMobileNav(activeEvent?.slug, activeTab);
   const navigate = useNavigate();
   const location = useLocation();
-  const { t, i18n } = useTranslation('mobile');
+  const { t } = useTranslation('mobile');
   const { count: notificationCount } = useNotificationsBadge();
   const online = useOnlineStatus();
   const { background, surface, border, text, muted, warningBg, warningText, primary, danger, shadow } = useAdminTheme();
@@ -45,16 +44,13 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
   const textColor = text;
   const mutedText = muted;
   const headerSurface = withAlpha(surfaceColor, 0.94);
-  const [pickerOpen, setPickerOpen] = React.useState(false);
   const [fallbackEvents, setFallbackEvents] = React.useState<TenantEvent[]>([]);
   const [loadingEvents, setLoadingEvents] = React.useState(false);
   const [attemptedFetch, setAttemptedFetch] = React.useState(false);
   const [queuedPhotoCount, setQueuedPhotoCount] = React.useState(0);
+  const [isCompactHeader, setIsCompactHeader] = React.useState(false);
 
-  const locale = i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE';
   const effectiveEvents = events.length ? events : fallbackEvents;
-  const effectiveHasMultiple = hasMultipleEvents || effectiveEvents.length > 1;
-  const effectiveHasEvents = hasEvents || effectiveEvents.length > 0;
   const effectiveActive = activeEvent ?? (effectiveEvents.length === 1 ? effectiveEvents[0] : null);
 
   React.useEffect(() => {
@@ -74,16 +70,6 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
       .finally(() => setLoadingEvents(false));
   }, [events.length, loadingEvents, attemptedFetch, activeEvent, selectEvent]);
 
-  React.useEffect(() => {
-    if (!pickerOpen) return;
-    if (effectiveEvents.length) return;
-    setLoadingEvents(true);
-    getEvents({ force: true })
-      .then((list) => setFallbackEvents(list ?? []))
-      .catch(() => setFallbackEvents([]))
-      .finally(() => setLoadingEvents(false));
-  }, [pickerOpen, effectiveEvents.length]);
-
   React.useEffect(() => {
     const path = `${location.pathname}${location.search}${location.hash}`;
     
@@ -114,17 +100,104 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
     };
   }, [refreshQueuedActions]);
 
-  const eventTitle = title ?? (effectiveActive ? resolveEventDisplayName(effectiveActive) : t('header.appName', 'Event Admin'));
-  const subtitleText =
-    subtitle ??
-    (effectiveActive?.event_date
-      ? formatEventDate(effectiveActive.event_date, locale) ?? ''
-      : effectiveHasEvents
-        ? t('header.selectEvent', 'Select an event to continue')
-        : t('header.empty', 'Create your first event to get started'));
+  React.useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+      return;
+    }
+    const query = window.matchMedia('(max-width: 520px)');
+    const handleChange = (event: MediaQueryListEvent) => {
+      setIsCompactHeader(event.matches);
+    };
+    setIsCompactHeader(query.matches);
+    query.addEventListener?.('change', handleChange);
+    return () => {
+      query.removeEventListener?.('change', handleChange);
+    };
+  }, []);
 
-  const showEventSwitcher = effectiveHasMultiple;
+  const pageTitle = title ?? t('header.appName', 'Event Admin');
+  const eventContext = !isCompactHeader && effectiveActive ? resolveEventDisplayName(effectiveActive) : null;
+  const subtitleText = subtitle ?? eventContext ?? '';
   const showQr = Boolean(effectiveActive?.slug);
+  const headerBackButton = onBack ? (
+    <HeaderActionButton onPress={onBack} ariaLabel={t('actions.back', 'Back')}>
+      <XStack alignItems="center" space="$1.5">
+        <ChevronLeft size={28} color={primary} strokeWidth={2.5} />
+      </XStack>
+    </HeaderActionButton>
+  ) : (
+    <XStack width={28} />
+  );
+  const headerTitle = (
+    <XStack alignItems="center" space="$1" flex={1} minWidth={0} justifyContent="flex-end">
+      <YStack alignItems="flex-end" maxWidth="100%">
+        <Text fontSize="$lg" fontWeight="800" fontFamily="$display" color={textColor} textAlign="right" numberOfLines={1}>
+          {pageTitle}
+        </Text>
+        {subtitleText ? (
+          <Text fontSize="$xs" color={mutedText} textAlign="right" numberOfLines={1} fontFamily="$body">
+            {subtitleText}
+          </Text>
+        ) : null}
+      </YStack>
+    </XStack>
+  );
+  const headerActionsRow = (
+    <XStack alignItems="center" space="$2">
+      <HeaderActionButton
+        onPress={() => navigate(adminPath('/mobile/notifications'))}
+        ariaLabel={t('mobile.notifications', 'Notifications')}
+      >
+        <XStack
+          width={34}
+          height={34}
+          borderRadius={12}
+          backgroundColor={surfaceColor}
+          alignItems="center"
+          justifyContent="center"
+          position="relative"
+        >
+          <Bell size={16} color={textColor} />
+          {notificationCount > 0 ? (
+            <YStack
+              position="absolute"
+              top={-4}
+              right={-4}
+              minWidth={18}
+              height={18}
+              paddingHorizontal={6}
+              borderRadius={999}
+              backgroundColor={danger}
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Text fontSize={10} color="white" fontWeight="700">
+                {notificationCount > 9 ? '9+' : notificationCount}
+              </Text>
+            </YStack>
+          ) : null}
+        </XStack>
+      </HeaderActionButton>
+      {showQr ? (
+        <HeaderActionButton
+          onPress={() => navigate(adminPath(`/mobile/events/${effectiveActive?.slug}/qr`))}
+          ariaLabel={t('header.quickQr', 'Quick QR')}
+        >
+          <XStack
+            width={34}
+            height={34}
+            borderRadius={12}
+            backgroundColor={primary}
+            alignItems="center"
+            justifyContent="center"
+          >
+            <QrCode size={16} color="white" />
+          </XStack>
+        </HeaderActionButton>
+      ) : null}
+      {headerActions ?? null}
+    </XStack>
+  );
 
   return (
     <YStack backgroundColor={backgroundColor} minHeight="100vh" alignItems="center">
@@ -150,96 +223,27 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
           WebkitBackdropFilter: 'blur(12px)',
         }}
       >
-        <XStack alignItems="center" justifyContent="space-between" minHeight={48} space="$3">
-          {onBack ? (
-            <HeaderActionButton onPress={onBack} ariaLabel={t('actions.back', 'Back')}>
-              <XStack alignItems="center" space="$1.5">
-                <ChevronLeft size={28} color={primary} strokeWidth={2.5} />
+        {isCompactHeader ? (
+          <YStack space="$2">
+            <XStack alignItems="center" justifyContent="space-between" minHeight={48} space="$3">
+              {headerBackButton}
+              <XStack flex={1} minWidth={0} justifyContent="flex-end">
+                {headerTitle}
               </XStack>
-            </HeaderActionButton>
-          ) : (
-            <XStack width={28} />
-          )}
-
-          <XStack alignItems="center" space="$2.5" flex={1} justifyContent="flex-end">
-            <XStack alignItems="center" space="$1" maxWidth="55%">
-              <Pressable
-                disabled={!showEventSwitcher}
-                onPress={() => setPickerOpen(true)}
-                style={{ alignItems: 'flex-end' }}
-              >
-                <Text fontSize="$lg" fontWeight="800" fontFamily="$display" color={textColor} textAlign="right" numberOfLines={1}>
-                  {eventTitle}
-                </Text>
-                {subtitleText ? (
-                  <Text fontSize="$xs" color={mutedText} textAlign="right" numberOfLines={1} fontFamily="$body">
-                    {subtitleText}
-                  </Text>
-                ) : null}
-              </Pressable>
-              {showEventSwitcher ? <ChevronDown size={14} color={textColor} /> : null}
             </XStack>
-
-            <XStack alignItems="center" space="$2">
-              <HeaderActionButton
-                onPress={() => navigate(adminPath('/mobile/notifications'))}
-                ariaLabel={t('mobile.notifications', 'Notifications')}
-              >
-                <XStack
-                  width={34}
-                  height={34}
-                  borderRadius={12}
-                  backgroundColor={surfaceColor}
-                  alignItems="center"
-                  justifyContent="center"
-                  position="relative"
-                >
-                  <Bell size={16} color={textColor} />
-                  {notificationCount > 0 ? (
-                    <YStack
-                      position="absolute"
-                      top={-4}
-                      right={-4}
-                      minWidth={18}
-                      height={18}
-                      paddingHorizontal={6}
-                      borderRadius={999}
-                      backgroundColor={danger}
-                      alignItems="center"
-                      justifyContent="center"
-                    >
-                      <Text fontSize={10} color="white" fontWeight="700">
-                        {notificationCount > 9 ? '9+' : notificationCount}
-                      </Text>
-                    </YStack>
-                  ) : null}
-                </XStack>
-              </HeaderActionButton>
-              {showQr ? (
-                <HeaderActionButton
-                  onPress={() => navigate(adminPath(`/mobile/events/${effectiveActive?.slug}/qr`))}
-                  ariaLabel={t('header.quickQr', 'Quick QR')}
-                >
-                  <XStack
-                    height={34}
-                    paddingHorizontal="$3"
-                    borderRadius={12}
-                    backgroundColor={primary}
-                    alignItems="center"
-                    justifyContent="center"
-                    space="$1.5"
-                  >
-                    <QrCode size={16} color="white" />
-                    <Text fontSize="$xs" fontWeight="800" color="white">
-                      {t('header.quickQr', 'Quick QR')}
-                    </Text>
-                  </XStack>
-                </HeaderActionButton>
-              ) : null}
-              {headerActions ?? null}
+            <XStack alignItems="center" justifyContent="flex-end">
+              {headerActionsRow}
+            </XStack>
+          </YStack>
+        ) : (
+          <XStack alignItems="center" justifyContent="space-between" minHeight={48} space="$3">
+            {headerBackButton}
+            <XStack alignItems="center" space="$2.5" flex={1} justifyContent="flex-end" minWidth={0}>
+              {headerTitle}
+              {headerActionsRow}
             </XStack>
           </XStack>
-        </XStack>
+        )}
       </YStack>
 
       <YStack
@@ -290,75 +294,6 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
 
       <BottomNav active={activeTab} onNavigate={go} />
 
-      <MobileSheet
-        open={pickerOpen}
-        onClose={() => setPickerOpen(false)}
-        title={t('header.eventSwitcher', 'Choose an event')}
-        footer={null}
-        bottomOffsetPx={110}
-      >
-        <YStack space="$2">
-          {effectiveEvents.length === 0 ? (
-            <MobileCard alignItems="flex-start" space="$2">
-              <Text fontSize="$sm" color={textColor} fontWeight="700">
-                {t('header.noEventsTitle', 'Create your first event')}
-              </Text>
-              <Text fontSize="$xs" color={mutedText}>
-                {t('header.noEventsBody', 'Start an event to access tasks, uploads, QR posters and more.')}
-              </Text>
-              <Pressable onPress={() => navigate(adminPath('/mobile/events/new'))}>
-                <XStack alignItems="center" space="$2">
-                  <Text fontSize="$sm" color={primary} fontWeight="700">
-                    {t('header.createEvent', 'Create event')}
-                  </Text>
-                </XStack>
-              </Pressable>
-            </MobileCard>
-          ) : (
-            effectiveEvents.map((event) => (
-              <Pressable
-                key={event.slug}
-                onPress={() => {
-                  const targetSlug = event.slug ?? null;
-                  selectEvent(targetSlug);
-                  setPickerOpen(false);
-                  if (targetSlug) {
-                    navigate(adminPath(`/mobile/events/${targetSlug}`));
-                  }
-                }}
-              >
-                <XStack alignItems="center" justifyContent="space-between" paddingVertical="$2">
-                  <YStack space="$0.5">
-                    <Text fontSize="$sm" fontWeight="700" color={textColor}>
-                      {resolveEventDisplayName(event)}
-                    </Text>
-                    <Text fontSize="$xs" color={mutedText}>
-                      {formatEventDate(event.event_date, locale) ?? t('header.noDate', 'Date tbd')}
-                    </Text>
-                  </YStack>
-                  <PillBadge tone={event.slug === activeEvent?.slug ? 'success' : 'muted'}>
-                    {event.slug === activeEvent?.slug
-                      ? t('header.active', 'Active')
-                      : (event.status ?? '—')}
-                  </PillBadge>
-                </XStack>
-              </Pressable>
-            ))
-          )}
-          {activeEvent ? (
-            <Pressable
-              onPress={() => {
-                selectEvent(null);
-                setPickerOpen(false);
-              }}
-            >
-              <Text fontSize="$xs" color={mutedText} textAlign="center">
-                {t('header.clearSelection', 'Clear selection')}
-              </Text>
-            </Pressable>
-          ) : null}
-        </YStack>
-      </MobileSheet>
     </YStack>
   );
 }

resources/js/admin/mobile/components/Sheet.test.tsx

@@ -50,7 +50,7 @@ describe('MobileSheet', () => {
     const onClose = vi.fn();
 
     render(
-      <MobileSheet open title="Test Sheet" onClose={onClose}>
+      <MobileSheet open title="Test Sheet" onClose={onClose} snapPoints={[94]} contentSpacing="$2" padding="$3" paddingBottom="$6">
         <div>Body</div>
       </MobileSheet>,
     );

resources/js/admin/mobile/components/Sheet.tsx

@@ -12,11 +12,26 @@ type SheetProps = {
   onClose: () => void;
   children: React.ReactNode;
   footer?: React.ReactNode;
+  snapPoints?: number[];
+  contentSpacing?: string;
+  padding?: string;
+  paddingBottom?: string;
   /** Optional bottom offset so content sits above the bottom nav/safe-area. */
   bottomOffsetPx?: number;
 };
 
-export function MobileSheet({ open, title, onClose, children, footer, bottomOffsetPx = 88 }: SheetProps) {
+export function MobileSheet({
+  open,
+  title,
+  onClose,
+  children,
+  footer,
+  snapPoints = [82],
+  contentSpacing = '$3',
+  padding = '$4',
+  paddingBottom = '$7',
+  bottomOffsetPx = 88,
+}: SheetProps) {
   const { t } = useTranslation('mobile');
   const { surface, textStrong, muted, overlay, shadow, border } = useAdminTheme();
   const bottomOffset = `max(env(safe-area-inset-bottom, 0px), ${bottomOffsetPx}px)`;
@@ -33,7 +48,7 @@ export function MobileSheet({ open, title, onClose, children, footer, bottomOffs
           onClose();
         }
       }}
-      snapPoints={[82]}
+      snapPoints={snapPoints}
       snapPointsMode="percent"
       dismissOnOverlayPress
       dismissOnSnapToBottom
@@ -48,8 +63,8 @@ export function MobileSheet({ open, title, onClose, children, footer, bottomOffs
           borderTopLeftRadius: 24,
           borderTopRightRadius: 24,
           backgroundColor: surface,
-          padding: '$4',
-          paddingBottom: '$7',
+          padding,
+          paddingBottom,
           shadowColor: shadow,
           shadowOpacity: 0.12,
           shadowRadius: 18,
@@ -62,7 +77,7 @@ export function MobileSheet({ open, title, onClose, children, footer, bottomOffs
           showsVerticalScrollIndicator={false}
           {...({ contentContainerStyle: { paddingBottom: 6 } } as any)}
         >
-          <YStack space="$3">
+          <YStack space={contentSpacing}>
             <XStack alignItems="center" justifyContent="space-between">
               <Text fontSize="$md" fontWeight="800" color={textStrong}>
                 {title}