Completed the full mobile app polish pass: navigation feel, safe‑area consistency, input styling, list rows, FAB

patterns, skeleton loading, photo selection/bulk actions with shared‑element transitions, notification detail sheet,
  offline banner, maskable manifest icons, and route prefetching.

  Key changes

  - Navigation/shell: press feedback on all header actions, glassy sticky header and tab bar, safer bottom spacing
    (resources/js/admin/mobile/components/MobileShell.tsx, resources/js/admin/mobile/components/BottomNav.tsx).
  - Forms + lists: shared mobile form controls, list‑style rows in settings/profile, consistent inputs across core
    flows (resources/js/admin/mobile/components/FormControls.tsx, resources/js/admin/mobile/SettingsPage.tsx,
    resources/js/admin/mobile/ProfilePage.tsx, resources/js/admin/mobile/EventFormPage.tsx, resources/js/admin/mobile/
    EventMembersPage.tsx, resources/js/admin/mobile/EventTasksPage.tsx, resources/js/admin/mobile/
    EventGuestNotificationsPage.tsx, resources/js/admin/mobile/NotificationsPage.tsx, resources/js/admin/mobile/
    EventPhotosPage.tsx, resources/js/admin/mobile/EventsPage.tsx).
  - Media workflows: shared‑element photo transitions, selection mode + bulk actions bar (resources/js/admin/mobile/
    EventPhotosPage.tsx).
  - Loading UX: shimmering skeletons (resources/css/app.css, resources/js/admin/mobile/components/Primitives.tsx).
  - PWA polish + perf: maskable icons, offline banner hook, and route prefetch (public/manifest.json, resources/js/
    admin/mobile/hooks/useOnlineStatus.tsx, resources/js/admin/mobile/prefetch.ts, resources/js/admin/main.tsx).

resources/js/admin/mobile/EventsPage.tsx

@@ -5,8 +5,9 @@ import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
 import { useTranslation } from 'react-i18next';
-import { MobileShell } from './components/MobileShell';
-import { MobileCard, PillBadge, CTAButton } from './components/Primitives';
+import { MobileShell, HeaderActionButton } from './components/MobileShell';
+import { MobileCard, PillBadge, CTAButton, FloatingActionButton, SkeletonCard } from './components/Primitives';
+import { MobileInput } from './components/FormControls';
 import { getEvents, TenantEvent } from '../api';
 import { adminPath } from '../constants';
 import { isAuthError } from '../auth/tokens';
@@ -20,6 +21,7 @@ export default function MobileEventsPage() {
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | null>(null);
   const [query, setQuery] = React.useState('');
+  const searchRef = React.useRef<HTMLInputElement>(null);
   const theme = useTheme();
   const text = String(theme.color?.val ?? '#111827');
   const muted = String(theme.gray?.val ?? '#4b5563');
@@ -28,20 +30,6 @@ export default function MobileEventsPage() {
   const primary = String(theme.primary?.val ?? '#007AFF');
   const danger = String(theme.red10?.val ?? '#b91c1c');
   const surface = String(theme.surface?.val ?? '#ffffff');
-  const baseInputStyle = React.useMemo<React.CSSProperties>(
-    () => ({
-      width: '100%',
-      height: 38,
-      borderRadius: 10,
-      border: `1px solid ${border}`,
-      padding: '0 12px',
-      fontSize: 13,
-      background: surface,
-      color: text,
-    }),
-    [border, surface, text],
-  );
-
   React.useEffect(() => {
     (async () => {
       try {
@@ -62,9 +50,9 @@ export default function MobileEventsPage() {
       title={t('events.list.dashboardTitle', 'All Events Dashboard')}
       onBack={() => navigate(-1)}
       headerActions={
-        <Pressable>
+        <HeaderActionButton onPress={() => searchRef.current?.focus()} ariaLabel={t('events.list.search', 'Search events')}>
           <Search size={18} color={text} />
-        </Pressable>
+        </HeaderActionButton>
       }
     >
       {error ? (
@@ -75,20 +63,20 @@ export default function MobileEventsPage() {
         </MobileCard>
       ) : null}
 
-      <CTAButton label={t('events.actions.create', 'Create New Event')} onPress={() => navigate(adminPath('/mobile/events/new'))} />
-
-      <input
+      <MobileInput
+        ref={searchRef}
         type="search"
         value={query}
         onChange={(e) => setQuery(e.target.value)}
         placeholder={t('events.list.search', 'Search events')}
-        style={{ ...baseInputStyle, marginBottom: 12 }}
+        compact
+        style={{ marginBottom: 12 }}
       />
 
       {loading ? (
         <YStack space="$2">
           {Array.from({ length: 3 }).map((_, idx) => (
-            <MobileCard key={`sk-${idx}`} height={90} opacity={0.6} />
+            <SkeletonCard key={`sk-${idx}`} height={90} />
           ))}
         </YStack>
       ) : events.length === 0 ? (
@@ -124,6 +112,12 @@ export default function MobileEventsPage() {
             ))}
         </YStack>
       )}
+
+      <FloatingActionButton
+        label={t('events.actions.create', 'Create New Event')}
+        icon={Plus}
+        onPress={() => navigate(adminPath('/mobile/events/new'))}
+      />
     </MobileShell>
   );
 }