feat: move trip creation and check-up into guided modals

src/AppRoot.js

@@ -7,7 +7,7 @@ import BottomTab from './components/BottomTab';
 import TripPicker from './components/TripPicker';
 import DatePickerModal from './components/DatePickerModal';
 import ItemModal from './modals/ItemModal';
-import CheckupFixModal from './modals/CheckupFixModal';
+import CheckupFlowModal from './modals/CheckupFlowModal';
 import TripsTab from './tabs/TripsTab';
 import ItemsTab from './tabs/ItemsTab';
 import CheckupTab from './tabs/CheckupTab';
@@ -37,6 +37,28 @@ const emptyItemForm = () => ({
   imageUri: '',
 });
 
+const emptyCheckupNoForm = () => ({
+  status: 'unpacked',
+  placement: 'suitcase',
+  lentTo: '',
+  updateMasterList: false,
+});
+
+function buildCheckupSession(items) {
+  return items.map((item) => ({
+    itemId: item.id,
+    name: item.name,
+    category: item.category,
+    current: {
+      status: item.status,
+      placement: item.placement,
+      lentTo: item.lentTo || '',
+    },
+    confirmed: false,
+    result: 'pending',
+  }));
+}
+
 export default function AppRoot() {
   const scrollRef = useRef(null);
 
@@ -52,14 +74,10 @@ export default function AppRoot() {
   const [itemForm, setItemForm] = useState(emptyItemForm());
 
   const [checkupSession, setCheckupSession] = useState([]);
-  const [checkupFixModalVisible, setCheckupFixModalVisible] = useState(false);
+  const [checkupFlowVisible, setCheckupFlowVisible] = useState(false);
-  const [checkupFixTargetId, setCheckupFixTargetId] = useState(null);
+  const [checkupFlowIndex, setCheckupFlowIndex] = useState(0);
-  const [checkupFixForm, setCheckupFixForm] = useState({
+  const [checkupFlowMode, setCheckupFlowMode] = useState('question');
-    status: 'unpacked',
+  const [checkupNoForm, setCheckupNoForm] = useState(emptyCheckupNoForm());
-    placement: 'suitcase',
-    lentTo: '',
-    updateMasterList: false,
-  });
 
   const [selectedCheckupId, setSelectedCheckupId] = useState(null);
 
@@ -90,6 +108,12 @@ export default function AppRoot() {
     return { total, correct, bad, pending };
   }, [checkupSession]);
 
+  const checkupCurrentEntry = useMemo(() => {
+    if (!checkupFlowVisible) return null;
+    if (checkupFlowIndex >= checkupSession.length) return null;
+    return checkupSession[checkupFlowIndex] || null;
+  }, [checkupFlowVisible, checkupFlowIndex, checkupSession]);
+
   useEffect(() => {
     (async () => {
       try {
@@ -189,7 +213,7 @@ export default function AppRoot() {
   function createTrip() {
     if (!tripForm.name.trim()) {
       Alert.alert('Missing name', 'Trip name is required.');
-      return;
+      return false;
     }
 
     const start = parseYMD(tripForm.startDate);
@@ -197,12 +221,12 @@ export default function AppRoot() {
 
     if (!start || !end) {
       Alert.alert('Invalid dates', 'Please select valid trip dates.');
-      return;
+      return false;
     }
 
     if (start > end) {
       Alert.alert('Invalid dates', 'Start date cannot be after end date.');
-      return;
+      return false;
     }
 
     const now = Date.now();
@@ -247,6 +271,7 @@ export default function AppRoot() {
 
     setSelectedTripId(tripId);
     setTripForm(emptyTripForm());
+    return true;
   }
 
   function setTripAsTemplate(tripId) {
@@ -401,67 +426,85 @@ export default function AppRoot() {
       setCheckupSession([]);
       return;
     }
+    setCheckupSession(buildCheckupSession(selectedTripItems));
+  }
 
-    const fresh = selectedTripItems.map((item) => ({
+  function startCheckupFlow() {
-      itemId: item.id,
+    if (!selectedTripId) {
-      name: item.name,
+      Alert.alert('No trip selected', 'Please select a trip first.');
-      category: item.category,
+      return;
-      current: {
+    }
-        status: item.status,
+    if (!selectedTripItems.length) {
-        placement: item.placement,
+      Alert.alert('No items', 'Add items before starting a check-up.');
-        lentTo: item.lentTo || '',
+      return;
-      },
+    }
-      confirmed: false,
-      result: 'pending',
-    }));
 
+    const fresh = buildCheckupSession(selectedTripItems);
     setCheckupSession(fresh);
+    setCheckupFlowIndex(0);
+    setCheckupFlowMode('question');
+    setCheckupNoForm(emptyCheckupNoForm());
+    setCheckupFlowVisible(true);
   }
 
-  function answerCheckupYes(itemId) {
+  function closeCheckupFlow() {
-    setCheckupSession((prev) =>
+    setCheckupFlowVisible(false);
-      prev.map((entry) => (entry.itemId === itemId ? { ...entry, confirmed: true, result: 'correct' } : entry))
+    setCheckupFlowMode('question');
-    );
+    setCheckupNoForm(emptyCheckupNoForm());
   }
 
-  function openFixModal(itemId) {
+  function goNextInCheckup() {
-    const entry = checkupSession.find((x) => x.itemId === itemId);
+    setCheckupFlowIndex((prev) => prev + 1);
+    setCheckupFlowMode('question');
+    setCheckupNoForm(emptyCheckupNoForm());
+  }
+
+  function answerCurrentCheckupYes() {
+    const entry = checkupCurrentEntry;
     if (!entry) return;
 
-    setCheckupFixTargetId(itemId);
+    setCheckupSession((prev) =>
-    setCheckupFixForm({
+      prev.map((x) => (x.itemId === entry.itemId ? { ...x, confirmed: true, result: 'correct' } : x))
+    );
+    goNextInCheckup();
+  }
+
+  function openCurrentCheckupNo() {
+    const entry = checkupCurrentEntry;
+    if (!entry) return;
+    setCheckupNoForm({
       status: entry.current.status || 'unpacked',
       placement: entry.current.placement || 'suitcase',
       lentTo: entry.current.lentTo || '',
       updateMasterList: false,
     });
-    setCheckupFixModalVisible(true);
+    setCheckupFlowMode('edit');
   }
 
-  function saveFixModal() {
+  function saveCurrentCheckupNo() {
-    if (!checkupFixTargetId) return;
+    const entry = checkupCurrentEntry;
+    if (!entry) return;
 
-    const targetId = checkupFixTargetId;
     const patch = {
-      status: checkupFixForm.status,
+      status: checkupNoForm.status,
-      placement: checkupFixForm.placement,
+      placement: checkupNoForm.placement,
-      lentTo: checkupFixForm.status === 'lent-to' ? checkupFixForm.lentTo.trim() : '',
+      lentTo: checkupNoForm.status === 'lent-to' ? checkupNoForm.lentTo.trim() : '',
     };
 
     setCheckupSession((prev) =>
-      prev.map((entry) =>
+      prev.map((x) =>
-        entry.itemId === targetId
+        x.itemId === entry.itemId
           ? {
-              ...entry,
+              ...x,
               current: patch,
               confirmed: true,
               result: 'bad',
             }
-          : entry
+          : x
       )
     );
 
-    if (checkupFixForm.updateMasterList && selectedTripId) {
+    if (checkupNoForm.updateMasterList && selectedTripId) {
       setData((prev) => {
         const items = prev.itemsByTrip[selectedTripId] || [];
         return {
@@ -469,7 +512,7 @@ export default function AppRoot() {
           itemsByTrip: {
             ...prev.itemsByTrip,
             [selectedTripId]: items.map((item) =>
-              item.id === targetId
+              item.id === entry.itemId
                 ? {
                     ...item,
                     status: patch.status,
@@ -484,28 +527,27 @@ export default function AppRoot() {
       });
     }
 
-    setCheckupFixModalVisible(false);
+    goNextInCheckup();
-    setCheckupFixTargetId(null);
   }
 
-  function saveCheckup() {
+  function saveCheckupSnapshot(sessionToSave) {
     if (!selectedTripId) {
       Alert.alert('No trip selected', 'Please select a trip first.');
-      return;
+      return false;
     }
 
-    if (!checkupSession.length) {
+    if (!sessionToSave.length) {
       Alert.alert('No items', 'Add items before creating a check-up.');
-      return;
+      return false;
     }
 
-    const pending = checkupSession.filter((entry) => !entry.confirmed).length;
+    const pending = sessionToSave.filter((entry) => !entry.confirmed).length;
     if (pending > 0) {
       Alert.alert('Incomplete', `Please confirm all items first (${pending} remaining).`);
-      return;
+      return false;
     }
 
-    const snapshot = checkupSession.map((entry) => ({
+    const snapshot = sessionToSave.map((entry) => ({
       itemId: entry.itemId,
       name: entry.name,
       category: entry.category,
@@ -537,7 +579,15 @@ export default function AppRoot() {
       };
     });
 
+    return true;
+  }
+
+  function finishCheckupFlow() {
+    const ok = saveCheckupSnapshot(checkupSession);
+    if (!ok) return;
+
     Alert.alert('Saved', 'Check-up snapshot saved.');
+    closeCheckupFlow();
     createFreshCheckupSession();
   }
 
@@ -592,6 +642,8 @@ export default function AppRoot() {
               onInputFocus={onInputFocus}
               defaultTemplateTripId={data.defaultTemplateTripId}
               openDatePicker={openDatePicker}
+              activeTripItemCount={selectedTripItems.length}
+              activeTripCheckupCount={selectedTripCheckups.length}
             />
           )}
 
@@ -608,12 +660,10 @@ export default function AppRoot() {
 
           {tab === 'checkup' && (
             <CheckupTab
-              checkupSession={checkupSession}
+              selectedTrip={selectedTrip}
+              selectedTripItems={selectedTripItems}
               checkupStats={checkupStats}
-              answerCheckupYes={answerCheckupYes}
+              startCheckupFlow={startCheckupFlow}
-              openFixModal={openFixModal}
-              createFreshCheckupSession={createFreshCheckupSession}
-              saveCheckup={saveCheckup}
             />
           )}
 
@@ -649,12 +699,19 @@ export default function AppRoot() {
         saveItemFromModal={saveItemFromModal}
       />
 
-      <CheckupFixModal
+      <CheckupFlowModal
-        visible={checkupFixModalVisible}
+        visible={checkupFlowVisible}
-        checkupFixForm={checkupFixForm}
+        entry={checkupCurrentEntry}
-        setCheckupFixForm={setCheckupFixForm}
+        stepIndex={checkupFlowIndex}
-        setCheckupFixModalVisible={setCheckupFixModalVisible}
+        total={checkupSession.length}
-        saveFixModal={saveFixModal}
+        mode={checkupFlowMode}
+        noForm={checkupNoForm}
+        setNoForm={setCheckupNoForm}
+        onClose={closeCheckupFlow}
+        onYes={answerCurrentCheckupYes}
+        onNo={openCurrentCheckupNo}
+        onSaveNo={saveCurrentCheckupNo}
+        onFinish={finishCheckupFlow}
       />
     </SafeAreaView>
   );

src/modals/CheckupFlowModal.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import { KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import { ITEM_PLACEMENTS, ITEM_STATUSES } from '../constants';
+import ChipGroup from '../components/ChipGroup';
+import Field from '../components/Field';
+import { styles } from '../styles';
+
+export default function CheckupFlowModal({
+  visible,
+  entry,
+  stepIndex,
+  total,
+  mode,
+  noForm,
+  setNoForm,
+  onClose,
+  onYes,
+  onNo,
+  onSaveNo,
+  onFinish,
+}) {
+  const finished = !entry;
+
+  return (
+    <Modal visible={visible} animationType="slide" transparent>
+      <View style={styles.modalBackdrop}>
+        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.modalKeyboardWrap}>
+          <View style={styles.modalCard}>
+            <View style={styles.sectionRow}>
+              <Text style={styles.sectionTitle}>Check-Up</Text>
+              <Pressable onPress={onClose}>
+                <Text style={styles.closeText}>Close</Text>
+              </Pressable>
+            </View>
+
+            {finished ? (
+              <View style={styles.section}>
+                <Text style={styles.cardTitle}>Done. Save this snapshot?</Text>
+                <Text style={styles.cardMeta}>All {total} items were checked.</Text>
+                <Pressable style={styles.primaryBtn} onPress={onFinish}>
+                  <Text style={styles.primaryBtnText}>Save Check-Up Snapshot</Text>
+                </Pressable>
+              </View>
+            ) : (
+              <ScrollView
+                keyboardShouldPersistTaps="handled"
+                keyboardDismissMode="interactive"
+                contentContainerStyle={{ paddingBottom: 12 }}
+                showsVerticalScrollIndicator={false}
+              >
+                <Text style={styles.tripHistoryLabel}>
+                  Item {stepIndex + 1} / {total}
+                </Text>
+                <Text style={styles.cardTitle}>{entry.name}</Text>
+                <Text style={styles.cardMeta}>{entry.category || 'uncategorized'}</Text>
+                <Text style={styles.cardMeta}>
+                  Current: {entry.current.status} · {entry.current.placement}
+                  {entry.current.status === 'lent-to' && entry.current.lentTo ? ` · ${entry.current.lentTo}` : ''}
+                </Text>
+
+                {mode === 'question' ? (
+                  <View style={styles.answerRowWide}>
+                    <Pressable style={styles.answerYesWide} onPress={onYes}>
+                      <Text style={styles.answerText}>Yes, correct</Text>
+                    </Pressable>
+                    <Pressable style={styles.answerNoWide} onPress={onNo}>
+                      <Text style={styles.answerText}>No, update</Text>
+                    </Pressable>
+                  </View>
+                ) : (
+                  <View style={styles.section}>
+                    <Field label="Status">
+                      <ChipGroup
+                        options={ITEM_STATUSES}
+                        value={noForm.status}
+                        onChange={(v) => setNoForm((prev) => ({ ...prev, status: v }))}
+                      />
+                    </Field>
+
+                    <Field label="Placement">
+                      <ChipGroup
+                        options={ITEM_PLACEMENTS}
+                        value={noForm.placement}
+                        onChange={(v) => setNoForm((prev) => ({ ...prev, placement: v }))}
+                      />
+                    </Field>
+
+                    {noForm.status === 'lent-to' ? (
+                      <Field label="Lent to">
+                        <TextInput
+                          style={styles.input}
+                          value={noForm.lentTo}
+                          onChangeText={(v) => setNoForm((prev) => ({ ...prev, lentTo: v }))}
+                          placeholder="Person name"
+                          placeholderTextColor="#6b7280"
+                        />
+                      </Field>
+                    ) : null}
+
+                    <Pressable
+                      style={styles.inlineToggle}
+                      onPress={() => setNoForm((prev) => ({ ...prev, updateMasterList: !prev.updateMasterList }))}
+                    >
+                      <Text style={styles.inlineToggleText}>
+                        {noForm.updateMasterList ? '☑' : '☐'} Also update item in trip list
+                      </Text>
+                    </Pressable>
+
+                    <Pressable style={styles.primaryBtn} onPress={onSaveNo}>
+                      <Text style={styles.primaryBtnText}>Save update + next</Text>
+                    </Pressable>
+                  </View>
+                )}
+              </ScrollView>
+            )}
+          </View>
+        </KeyboardAvoidingView>
+      </View>
+    </Modal>
+  );
+}

src/styles.js

@@ -117,6 +117,32 @@ export const styles = StyleSheet.create({
     marginTop: -2,
     marginBottom: 2,
   },
+  tripHeroCard: {
+    backgroundColor: '#0f172a',
+    borderRadius: 18,
+    borderWidth: 1,
+    borderColor: '#334155',
+    padding: 12,
+    gap: 8,
+  },
+  tripHeroImage: {
+    width: '100%',
+    height: 180,
+    borderRadius: 12,
+    backgroundColor: '#111827',
+  },
+  tripHeroTitle: {
+    color: '#f8fafc',
+    fontWeight: '800',
+    fontSize: 22,
+  },
+  tripListTitle: {
+    color: '#cbd5e1',
+    fontWeight: '700',
+    fontSize: 13,
+    letterSpacing: 0.4,
+    textTransform: 'uppercase',
+  },
 
   fieldWrap: {
     gap: 6,
@@ -323,6 +349,28 @@ export const styles = StyleSheet.create({
     color: '#f8fafc',
     fontWeight: '700',
   },
+  answerRowWide: {
+    marginTop: 14,
+    gap: 10,
+  },
+  answerYesWide: {
+    backgroundColor: '#163223',
+    borderWidth: 1,
+    borderColor: '#1f7a4e',
+    borderRadius: 10,
+    paddingHorizontal: 16,
+    paddingVertical: 11,
+    alignItems: 'center',
+  },
+  answerNoWide: {
+    backgroundColor: '#3b1d22',
+    borderWidth: 1,
+    borderColor: '#7f1d1d',
+    borderRadius: 10,
+    paddingHorizontal: 16,
+    paddingVertical: 11,
+    alignItems: 'center',
+  },
   answerStateDot: {
     width: 10,
     height: 10,

src/tabs/CheckupTab.js

@@ -2,24 +2,19 @@ import React from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { styles } from '../styles';
 
-export default function CheckupTab({
+export default function CheckupTab({ selectedTrip, selectedTripItems, checkupStats, startCheckupFlow }) {
-  checkupSession,
-  checkupStats,
-  answerCheckupYes,
-  openFixModal,
-  createFreshCheckupSession,
-  saveCheckup,
-}) {
   return (
     <View style={styles.section}>
-      <View style={styles.sectionRow}>
       <Text style={styles.sectionTitle}>Check-Up</Text>
-        <Pressable style={styles.secondaryBtnTight} onPress={createFreshCheckupSession}>
-          <Text style={styles.secondaryBtnText}>Check-up</Text>
-        </Pressable>
-      </View>
 
-      {!!checkupSession.length && (
+      {!selectedTrip ? <Text style={styles.muted}>Select a trip first.</Text> : null}
+      {selectedTrip && selectedTripItems.length === 0 ? <Text style={styles.muted}>No items for this trip yet.</Text> : null}
+
+      {selectedTrip && selectedTripItems.length > 0 ? (
+        <View style={styles.cardSoft}>
+          <Text style={styles.cardTitle}>Run a check-up for {selectedTrip.name}</Text>
+          <Text style={styles.cardMeta}>{selectedTripItems.length} items will be checked one by one.</Text>
+
           <View style={styles.statsRow}>
             <View style={[styles.statPill, styles.statPillCorrect]}>
               <Text style={styles.statPillText}>Correct: {checkupStats.correct}</Text>
@@ -31,42 +26,12 @@ export default function CheckupTab({
               <Text style={styles.statPillText}>Pending: {checkupStats.pending}</Text>
             </View>
           </View>
-      )}
 
-      {checkupSession.length === 0 ? <Text style={styles.muted}>No items for this trip yet.</Text> : null}
+          <Pressable style={styles.primaryBtn} onPress={startCheckupFlow}>
-
+            <Text style={styles.primaryBtnText}>Start Check-Up</Text>
-      {checkupSession.map((entry) => (
-        <View key={entry.itemId} style={styles.cardSoft}>
-          <Text style={styles.cardTitle}>{entry.name}</Text>
-          <Text style={styles.cardMeta}>{entry.category || 'uncategorized'}</Text>
-          <Text style={styles.cardMeta}>
-            {entry.current.status} · {entry.current.placement}
-            {entry.current.status === 'lent-to' && entry.current.lentTo ? ` · ${entry.current.lentTo}` : ''}
-          </Text>
-
-          <View style={styles.answerRow}>
-            <Pressable style={styles.answerYes} onPress={() => answerCheckupYes(entry.itemId)}>
-              <Text style={styles.answerText}>Yes</Text>
           </Pressable>
-            <Pressable style={styles.answerNo} onPress={() => openFixModal(entry.itemId)}>
-              <Text style={styles.answerText}>No</Text>
-            </Pressable>
-            <View
-              style={[
-                styles.answerStateDot,
-                entry.result === 'correct' ? styles.answerStateDotOn : null,
-                entry.result === 'bad' ? styles.answerStateDotBad : null,
-              ]}
-            />
         </View>
-        </View>
+      ) : null}
-      ))}
-
-      {!!checkupSession.length && (
-        <Pressable style={styles.primaryBtn} onPress={saveCheckup}>
-          <Text style={styles.primaryBtnText}>Save Check-Up Snapshot</Text>
-        </Pressable>
-      )}
     </View>
   );
 }

src/tabs/TripsTab.js

@@ -1,5 +1,5 @@
-import React from 'react';
+import React, { useMemo, useState } from 'react';
-import { Image, Pressable, Text, TextInput, View } from 'react-native';
+import { Image, KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
 import Field from '../components/Field';
 import { styles } from '../styles';
 
@@ -28,12 +28,84 @@ export default function TripsTab({
   onInputFocus,
   defaultTemplateTripId,
   openDatePicker,
+  activeTripItemCount,
+  activeTripCheckupCount,
 }) {
+  const [createModalVisible, setCreateModalVisible] = useState(false);
+
+  const activeTrip = useMemo(() => trips.find((trip) => trip.id === selectedTripId) || null, [trips, selectedTripId]);
+
+  function submitCreateTrip() {
+    const ok = createTrip();
+    if (ok) setCreateModalVisible(false);
+  }
+
   return (
     <View style={styles.section}>
+      <View style={styles.sectionRow}>
         <Text style={styles.sectionTitle}>Trips</Text>
+        <Pressable style={styles.primaryBtnTight} onPress={() => setCreateModalVisible(true)}>
+          <Text style={styles.primaryBtnText}>+ New Trip</Text>
+        </Pressable>
+      </View>
 
-      <View style={styles.cardSoft}>
+      {activeTrip ? (
+        <View style={styles.tripHeroCard}>
+          {activeTrip.imageUri ? <Image source={{ uri: activeTrip.imageUri }} style={styles.tripHeroImage} /> : null}
+          <Text style={styles.tripHeroTitle}>{activeTrip.name}</Text>
+          <Text style={styles.cardMeta}>{activeTrip.location || 'No location'} · {activeTrip.startDate} → {activeTrip.endDate}</Text>
+          <Text style={styles.cardMeta}>{activeTripItemCount} items · {activeTripCheckupCount} check-ups</Text>
+        </View>
+      ) : (
+        <Text style={styles.muted}>Create your first trip to get started.</Text>
+      )}
+
+      <Text style={styles.tripListTitle}>All Trips</Text>
+
+      {trips
+        .slice()
+        .sort((a, b) => b.startDate.localeCompare(a.startDate))
+        .map((trip) => (
+          <View key={trip.id} style={[styles.card, selectedTripId === trip.id && styles.cardActive]}>
+            <View style={styles.cardRow}>
+              <View style={styles.flex}>
+                <Text style={styles.cardTitle}>{trip.name}</Text>
+                <Text style={styles.cardMeta}>{trip.location || 'No location'} · {trip.startDate} → {trip.endDate}</Text>
+                <Text style={styles.cardMeta}>{defaultTemplateTripId === trip.id ? 'Default template' : ' '}</Text>
+              </View>
+              <View style={styles.stackButtons}>
+                <Pressable style={styles.miniBtn} onPress={() => chooseTrip(trip.id)}>
+                  <Text style={styles.miniBtnText}>Select</Text>
+                </Pressable>
+                <Pressable style={styles.miniBtn} onPress={() => setTripAsTemplate(trip.id)}>
+                  <Text style={styles.miniBtnText}>Template</Text>
+                </Pressable>
+                <Pressable style={styles.miniBtnDanger} onPress={() => deleteTrip(trip.id)}>
+                  <Text style={styles.miniBtnText}>Delete</Text>
+                </Pressable>
+              </View>
+            </View>
+            {trip.imageUri ? <Image source={{ uri: trip.imageUri }} style={styles.previewImageSmall} /> : null}
+          </View>
+        ))}
+
+      <Modal visible={createModalVisible} animationType="slide" transparent>
+        <View style={styles.modalBackdrop}>
+          <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.modalKeyboardWrap}>
+            <View style={styles.modalCard}>
+              <View style={styles.sectionRow}>
+                <Text style={styles.sectionTitle}>Create Trip</Text>
+                <Pressable onPress={() => setCreateModalVisible(false)}>
+                  <Text style={styles.closeText}>Close</Text>
+                </Pressable>
+              </View>
+
+              <ScrollView
+                keyboardShouldPersistTaps="handled"
+                keyboardDismissMode="interactive"
+                contentContainerStyle={{ paddingBottom: 12 }}
+                showsVerticalScrollIndicator={false}
+              >
                 <Field label="Name">
                   <TextInput
                     style={styles.input}
@@ -82,37 +154,14 @@ export default function TripsTab({
                   <Text style={styles.inlineToggleText}>{tripForm.setAsDefaultTemplate ? '☑' : '☐'} Set as default template</Text>
                 </Pressable>
 
-        <Pressable style={styles.primaryBtn} onPress={createTrip}>
+                <Pressable style={styles.primaryBtn} onPress={submitCreateTrip}>
                   <Text style={styles.primaryBtnText}>Create Trip</Text>
                 </Pressable>
+              </ScrollView>
             </View>
-
+          </KeyboardAvoidingView>
-      {trips
-        .slice()
-        .sort((a, b) => b.startDate.localeCompare(a.startDate))
-        .map((trip) => (
-          <View key={trip.id} style={[styles.card, selectedTripId === trip.id && styles.cardActive]}>
-            <View style={styles.cardRow}>
-              <View style={styles.flex}>
-                <Text style={styles.cardTitle}>{trip.name}</Text>
-                <Text style={styles.cardMeta}>{trip.location || 'No location'} · {trip.startDate} → {trip.endDate}</Text>
-                <Text style={styles.cardMeta}>{defaultTemplateTripId === trip.id ? 'Default template' : ' '}</Text>
         </View>
-              <View style={styles.stackButtons}>
+      </Modal>
-                <Pressable style={styles.miniBtn} onPress={() => chooseTrip(trip.id)}>
-                  <Text style={styles.miniBtnText}>Select</Text>
-                </Pressable>
-                <Pressable style={styles.miniBtn} onPress={() => setTripAsTemplate(trip.id)}>
-                  <Text style={styles.miniBtnText}>Template</Text>
-                </Pressable>
-                <Pressable style={styles.miniBtnDanger} onPress={() => deleteTrip(trip.id)}>
-                  <Text style={styles.miniBtnText}>Delete</Text>
-                </Pressable>
-              </View>
-            </View>
-            {trip.imageUri ? <Image source={{ uri: trip.imageUri }} style={styles.previewImageSmall} /> : null}
-          </View>
-        ))}
     </View>
   );
 }