Update admin PWA events, branding, and packages

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

@@ -33,7 +33,7 @@ type MobileShellProps = {
 };
 
 export function MobileShell({ title, subtitle, children, activeTab, onBack, headerActions }: MobileShellProps) {
-  const { events, activeEvent, hasMultipleEvents, selectEvent } = useEventContext();
+  const { events, activeEvent, selectEvent } = useEventContext();
   const { user } = useAuth();
   const { go } = useMobileNav(activeEvent?.slug, activeTab);
   const navigate = useNavigate();
@@ -45,6 +45,7 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
   const theme = useAdminTheme();
   
   const backgroundColor = theme.background;
+  const [isCompactHeader, setIsCompactHeader] = React.useState(false);
   
   // --- DARK HEADER ---
   const headerSurface = '#0F172A'; // Slate 900
@@ -78,6 +79,27 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
       .finally(() => setLoadingEvents(false));
   }, [events.length, loadingEvents, attemptedFetch, activeEvent, selectEvent]);
 
+  React.useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia('(max-width: 320px)');
+    const handleChange = (event: MediaQueryListEvent | MediaQueryList) => {
+      setIsCompactHeader(event.matches);
+    };
+
+    handleChange(mediaQuery);
+
+    if (typeof mediaQuery.addEventListener === 'function') {
+      mediaQuery.addEventListener('change', handleChange);
+      return () => mediaQuery.removeEventListener('change', handleChange);
+    }
+
+    mediaQuery.addListener?.(handleChange);
+    return () => mediaQuery.removeListener?.(handleChange);
+  }, []);
+
   React.useEffect(() => {
     const path = `${location.pathname}${location.search}${location.hash}`;
     if (!location.pathname.includes('/billing/shop') && !location.pathname.includes('/welcome')) {
@@ -102,7 +124,7 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
 
   const pageTitle = title ?? t('header.appName', 'Event Admin');
   const isEventsIndex = location.pathname === ADMIN_EVENTS_PATH;
-  const canSwitchEvents = hasMultipleEvents && !isEventsIndex;
+  const canSwitchEvents = effectiveEvents.length > 1 && !isEventsIndex;
   const isMember = user?.role === 'member';
   const memberPermissions = Array.isArray(effectiveActive?.member_permissions) ? effectiveActive?.member_permissions ?? [] : [];
   
@@ -119,7 +141,7 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
 
   // --- CONTEXT PILL ---
   const EventContextPill = () => {
-    if (!effectiveActive || isEventsIndex) {
+    if (!effectiveActive || isEventsIndex || isCompactHeader) {
        return (
          <Text fontSize="$md" fontWeight="800" fontFamily="$display" color="white">
             {pageTitle}
@@ -138,7 +160,7 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
     }
 
     return (
-      <Pressable onPress={() => setSwitcherOpen(true)}>
+      <Pressable onPress={() => setSwitcherOpen(true)} aria-label={t('header.eventSwitcher', 'Switch event')}>
         <XStack 
            backgroundColor="rgba(255, 255, 255, 0.12)" 
            paddingHorizontal="$3"