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/Primitives.tsx

@@ -147,6 +147,12 @@ export function KpiTile({
   );
 }
 
+export function SkeletonCard({ height = 80 }: { height?: number }) {
+  return (
+    <MobileCard className="mobile-skeleton" height={height} />
+  );
+}
+
 export function ActionTile({
   icon: IconCmp,
   label,
@@ -189,3 +195,53 @@ export function ActionTile({
     </Pressable>
   );
 }
+
+export function FloatingActionButton({
+  onPress,
+  label,
+  icon: IconCmp,
+}: {
+  onPress: () => void;
+  label: string;
+  icon: React.ComponentType<{ size?: number; color?: string }>;
+}) {
+  const theme = useTheme();
+  const [pressed, setPressed] = React.useState(false);
+  return (
+    <Pressable
+      onPress={onPress}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      onPointerLeave={() => setPressed(false)}
+      style={{
+        position: 'fixed',
+        right: 18,
+        bottom: 'calc(env(safe-area-inset-bottom, 0px) + 96px)',
+        zIndex: 60,
+        transform: pressed ? 'scale(0.96)' : 'scale(1)',
+        opacity: pressed ? 0.92 : 1,
+        transition: 'transform 140ms ease, opacity 140ms ease',
+      }}
+      aria-label={label}
+    >
+      <XStack
+        height={56}
+        paddingHorizontal="$4"
+        borderRadius={999}
+        alignItems="center"
+        justifyContent="center"
+        space="$2"
+        backgroundColor={String(theme.primary?.val ?? '#007AFF')}
+        shadowColor="#0f172a"
+        shadowOpacity={0.2}
+        shadowRadius={16}
+        shadowOffset={{ width: 0, height: 8 }}
+      >
+        <IconCmp size={18} color="white" />
+        <Text fontSize="$sm" fontWeight="800" color="white">
+          {label}
+        </Text>
+      </XStack>
+    </Pressable>
+  );
+}