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

@@ -6,8 +6,9 @@ import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { ListItem } from '@tamagui/list-item';
 import { Pressable } from '@tamagui/react-native-web-lite';
-import { MobileShell } from './components/MobileShell';
-import { MobileCard, CTAButton } from './components/Primitives';
+import { MobileShell, HeaderActionButton } from './components/MobileShell';
+import { MobileCard, CTAButton, SkeletonCard } from './components/Primitives';
+import { MobileField, MobileInput, MobileSelect, MobileTextArea } from './components/FormControls';
 import {
   getEvent,
   getEvents,
@@ -38,14 +39,6 @@ import { useEventContext } from '../context/EventContext';
 import { useTheme } from '@tamagui/core';
 import { RadioGroup } from '@tamagui/radio-group';
 
-const inputBaseStyle = {
-  width: '100%',
-  height: 40,
-  borderRadius: 10,
-  padding: '0 12px',
-  fontSize: 13,
-} as const;
-
 function InlineSeparator() {
   const theme = useTheme();
   return <XStack height={1} opacity={0.7} marginLeft="$3" backgroundColor={theme.borderColor?.val ?? '#e5e7eb'} />;
@@ -65,16 +58,6 @@ export default function MobileEventTasksPage() {
   const primary = String(theme.primary?.val ?? '#007AFF');
   const danger = String(theme.red10?.val ?? '#ef4444');
   const surface = String(theme.surface?.val ?? '#ffffff');
-  const inputStyle = React.useMemo<React.CSSProperties>(
-    () => ({
-      ...inputBaseStyle,
-      border: `1px solid ${border}`,
-      background: surface,
-      color: text,
-    }),
-    [border, surface, text],
-  );
-
   const [assignedTasks, setAssignedTasks] = React.useState<TenantTask[]>([]);
   const [library, setLibrary] = React.useState<TenantTask[]>([]);
   const [collections, setCollections] = React.useState<TenantTaskCollection[]>([]);
@@ -375,9 +358,9 @@ export default function MobileEventTasksPage() {
       onBack={() => navigate(-1)}
       headerActions={
         <XStack space="$2">
-          <Pressable onPress={() => load()}>
+          <HeaderActionButton onPress={() => load()} ariaLabel={t('common.refresh', 'Refresh')}>
             <RefreshCcw size={18} color={text} />
-          </Pressable>
+          </HeaderActionButton>
         </XStack>
       }
     >
@@ -392,7 +375,7 @@ export default function MobileEventTasksPage() {
       {loading ? (
         <YStack space="$2">
           {Array.from({ length: 4 }).map((_, idx) => (
-            <MobileCard key={`tsk-${idx}`} height={70} opacity={0.6} />
+            <SkeletonCard key={`tsk-${idx}`} height={70} />
           ))}
         </YStack>
       ) : assignedTasks.length === 0 ? (
@@ -474,12 +457,12 @@ export default function MobileEventTasksPage() {
       ) : (
         <YStack space="$2">
           <YStack space="$2">
-            <input
+            <MobileInput
               type="search"
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
               placeholder={t('events.tasks.search', 'Search tasks')}
-              style={{ ...inputStyle, height: 38 }}
+              compact
             />
             <Pressable onPress={() => setShowEmotionFilterSheet(true)}>
               <MobileCard borderColor={border} backgroundColor={surface} space="$2">
@@ -667,28 +650,27 @@ export default function MobileEventTasksPage() {
         }
       >
         <YStack space="$2">
-          <Field label={t('events.tasks.titleLabel', 'Titel')} color={text}>
-            <input
+          <MobileField label={t('events.tasks.titleLabel', 'Titel')}>
+            <MobileInput
               type="text"
               value={newTask.title}
               onChange={(e) => setNewTask((prev) => ({ ...prev, title: e.target.value }))}
               placeholder={t('events.tasks.titlePlaceholder', 'z.B. Erstes Gruppenfoto')}
-              style={inputStyle}
             />
-          </Field>
-          <Field label={t('events.tasks.description', 'Beschreibung')} color={text}>
-            <textarea
+          </MobileField>
+          <MobileField label={t('events.tasks.description', 'Beschreibung')}>
+            <MobileTextArea
               value={newTask.description}
               onChange={(e) => setNewTask((prev) => ({ ...prev, description: e.target.value }))}
               placeholder={t('events.tasks.descriptionPlaceholder', 'Optionale Hinweise')}
-              style={{ ...inputStyle, minHeight: 80 }}
+              compact
+              style={{ minHeight: 80 }}
             />
-          </Field>
-          <Field label={t('events.tasks.emotion', 'Emotion')} color={text}>
-            <select
+          </MobileField>
+          <MobileField label={t('events.tasks.emotion', 'Emotion')}>
+            <MobileSelect
               value={newTask.emotion_id}
               onChange={(e) => setNewTask((prev) => ({ ...prev, emotion_id: e.target.value }))}
-              style={{ ...inputStyle, height: 42 }}
             >
               <option value="">{t('events.tasks.emotionNone', 'Keine')}</option>
               {emotions.map((emotion) => (
@@ -696,8 +678,8 @@ export default function MobileEventTasksPage() {
                   {emotion.name}
                 </option>
               ))}
-            </select>
-          </Field>
+            </MobileSelect>
+          </MobileField>
         </YStack>
       </MobileSheet>
 
@@ -711,11 +693,11 @@ export default function MobileEventTasksPage() {
           <Text fontSize={12} color={muted}>
             {t('events.tasks.bulkHint', 'One task per line. These will be created and added to the event.')}
           </Text>
-          <textarea
+          <MobileTextArea
             value={bulkLines}
             onChange={(e) => setBulkLines(e.target.value)}
             placeholder={t('events.tasks.bulkPlaceholder', 'e.g.\nBride & groom portrait\nGroup photo main guests')}
-            style={{ ...inputStyle, minHeight: 140, fontSize: 12.5 }}
+            style={{ minHeight: 140, fontSize: 12.5 }}
           />
         </YStack>
       </MobileSheet>
@@ -736,23 +718,22 @@ export default function MobileEventTasksPage() {
         }
       >
         <YStack space="$2">
-          <Field label={t('events.tasks.emotionName', 'Name')} color={text}>
-            <input
+          <MobileField label={t('events.tasks.emotionName', 'Name')}>
+            <MobileInput
               type="text"
               value={emotionForm.name}
               onChange={(e) => setEmotionForm((prev) => ({ ...prev, name: e.target.value }))}
               placeholder={t('events.tasks.emotionNamePlaceholder', 'z.B. Joy')}
-              style={inputStyle}
             />
-          </Field>
-          <Field label={t('events.tasks.emotionColor', 'Farbe')} color={text}>
-            <input
+          </MobileField>
+          <MobileField label={t('events.tasks.emotionColor', 'Farbe')}>
+            <MobileInput
               type="color"
               value={emotionForm.color}
               onChange={(e) => setEmotionForm((prev) => ({ ...prev, color: e.target.value }))}
-              style={{ width: '100%', height: 44, borderRadius: 10, border: `1px solid ${border}`, background: surface }}
+              style={{ padding: 0 }}
             />
-          </Field>
+          </MobileField>
           <YStack space="$2">
             {emotions.map((em) => (
               <ListItem
@@ -829,7 +810,7 @@ export default function MobileEventTasksPage() {
     style={{
       position: 'fixed',
       right: 20,
-      bottom: 90,
+      bottom: 'calc(env(safe-area-inset-bottom, 0px) + 96px)',
       width: 56,
       height: 56,
       borderRadius: 28,
@@ -908,14 +889,3 @@ export default function MobileEventTasksPage() {
     </MobileShell>
   );
 }
-
-function Field({ label, color, children }: { label: string; color: string; children: React.ReactNode }) {
-  return (
-    <YStack space="$1">
-      <Text fontSize={12.5} fontWeight="600" color={color}>
-        {label}
-      </Text>
-      {children}
-    </YStack>
-  );
-}