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/components/BottomNav.tsx

@@ -5,14 +5,18 @@ import { Pressable } from '@tamagui/react-native-web-lite';
 import { Home, CheckSquare, Image as ImageIcon, User } from 'lucide-react';
 import { useTheme } from '@tamagui/core';
 import { useTranslation } from 'react-i18next';
+import { withAlpha } from './colors';
 
-const ICON_SIZE = 18;
+const ICON_SIZE = 20;
 
 export type NavKey = 'home' | 'tasks' | 'uploads' | 'profile';
 
 export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate: (key: NavKey) => void }) {
   const { t } = useTranslation('mobile');
   const theme = useTheme();
+  const surfaceColor = String(theme.surface?.val ?? 'white');
+  const navSurface = withAlpha(surfaceColor, 0.92);
+  const [pressedKey, setPressedKey] = React.useState<NavKey | null>(null);
   const items: Array<{ key: NavKey; icon: React.ComponentType<{ size?: number; color?: string }>; label: string }> = [
     { key: 'home', icon: Home, label: t('nav.home', 'Home') },
     { key: 'tasks', icon: CheckSquare, label: t('nav.tasks', 'Tasks') },
@@ -21,30 +25,41 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
   ];
 
   return (
-        <YStack
-          position="fixed"
-          bottom={0}
-          left={0}
-          right={0}
-          backgroundColor={String(theme.surface?.val ?? 'white')}
-          borderTopWidth={1}
-          borderColor={String(theme.borderColor?.val ?? '#e5e7eb')}
-          paddingVertical="$2"
-          paddingHorizontal="$4"
-          zIndex={50}
+    <YStack
+      position="fixed"
+      bottom={0}
+      left={0}
+      right={0}
+      backgroundColor={navSurface}
+      borderTopWidth={1}
+      borderColor={String(theme.borderColor?.val ?? '#e5e7eb')}
+      paddingVertical="$2"
+      paddingHorizontal="$4"
+      zIndex={50}
       shadowColor="#0f172a"
       shadowOpacity={0.08}
       shadowRadius={12}
       shadowOffset={{ width: 0, height: -4 }}
       // allow for safe-area inset on modern phones
-      style={{ paddingBottom: 'max(env(safe-area-inset-bottom, 0px), 8px)' }}
+      style={{
+        paddingBottom: 'max(env(safe-area-inset-bottom, 0px), 8px)',
+        backdropFilter: 'blur(14px)',
+        WebkitBackdropFilter: 'blur(14px)',
+      }}
     >
       <XStack justifyContent="space-between" alignItems="center">
         {items.map((item) => {
           const activeState = item.key === active;
+          const isPressed = pressedKey === item.key;
           const IconCmp = item.icon;
           return (
-            <Pressable key={item.key} onPress={() => onNavigate(item.key)}>
+            <Pressable
+              key={item.key}
+              onPress={() => onNavigate(item.key)}
+              onPressIn={() => setPressedKey(item.key)}
+              onPressOut={() => setPressedKey(null)}
+              onPointerLeave={() => setPressedKey(null)}
+            >
               <YStack
                 flexGrow={1}
                 flexBasis="0%"
@@ -59,7 +74,22 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
                 borderRadius={12}
                 backgroundColor={activeState ? '#e8f1ff' : 'transparent'}
                 gap="$1"
+                style={{
+                  transform: isPressed ? 'scale(0.96)' : 'scale(1)',
+                  opacity: isPressed ? 0.9 : 1,
+                  transition: 'transform 140ms ease, background-color 140ms ease, opacity 140ms ease',
+                }}
               >
+                {activeState ? (
+                  <YStack
+                    position="absolute"
+                    top={6}
+                    width={28}
+                    height={3}
+                    borderRadius={999}
+                    backgroundColor={String(theme.primary?.val ?? '#007AFF')}
+                  />
+                ) : null}
                 <YStack width={ICON_SIZE} height={ICON_SIZE} alignItems="center" justifyContent="center" shrink={0}>
                   <IconCmp size={ICON_SIZE} color={activeState ? String(theme.primary?.val ?? '#007AFF') : '#94a3b8'} />
                 </YStack>