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

src/tabs/CheckupTab.js

@@ -2,71 +2,36 @@ import React from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { styles } from '../styles';
 
-export default function CheckupTab({
-  checkupSession,
-  checkupStats,
-  answerCheckupYes,
-  openFixModal,
-  createFreshCheckupSession,
-  saveCheckup,
-}) {
+export default function CheckupTab({ selectedTrip, selectedTripItems, checkupStats, startCheckupFlow }) {
   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>
+      <Text style={styles.sectionTitle}>Check-Up</Text>
 
-      {!!checkupSession.length && (
-        <View style={styles.statsRow}>
-          <View style={[styles.statPill, styles.statPillCorrect]}>
-            <Text style={styles.statPillText}>Correct: {checkupStats.correct}</Text>
-          </View>
-          <View style={[styles.statPill, styles.statPillBad]}>
-            <Text style={styles.statPillText}>Bad: {checkupStats.bad}</Text>
-          </View>
-          <View style={[styles.statPill, styles.statPillPending]}>
-            <Text style={styles.statPillText}>Pending: {checkupStats.pending}</Text>
+      {!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>
+            </View>
+            <View style={[styles.statPill, styles.statPillBad]}>
+              <Text style={styles.statPillText}>Bad: {checkupStats.bad}</Text>
+            </View>
+            <View style={[styles.statPill, styles.statPillPending]}>
+              <Text style={styles.statPillText}>Pending: {checkupStats.pending}</Text>
+            </View>
           </View>
+
+          <Pressable style={styles.primaryBtn} onPress={startCheckupFlow}>
+            <Text style={styles.primaryBtnText}>Start Check-Up</Text>
+          </Pressable>
         </View>
-      )}
-
-      {checkupSession.length === 0 ? <Text style={styles.muted}>No items for this trip yet.</Text> : null}
-
-      {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>
-      ))}
-
-      {!!checkupSession.length && (
-        <Pressable style={styles.primaryBtn} onPress={saveCheckup}>
-          <Text style={styles.primaryBtnText}>Save Check-Up Snapshot</Text>
-        </Pressable>
-      )}
+      ) : null}
     </View>
   );
 }

src/tabs/TripsTab.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Image, Pressable, Text, TextInput, View } from 'react-native';
+import React, { useMemo, useState } from 'react';
+import { Image, KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
 import Field from '../components/Field';
 import { styles } from '../styles';
 
@@ -28,65 +28,40 @@ 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}>
-      <Text style={styles.sectionTitle}>Trips</Text>
-
-      <View style={styles.cardSoft}>
-        <Field label="Name">
-          <TextInput
-            style={styles.input}
-            value={tripForm.name}
-            onChangeText={(v) => updateTripForm('name', v)}
-            placeholder="Summer Weekend"
-            placeholderTextColor="#6b7280"
-            onFocus={onInputFocus}
-          />
-        </Field>
-
-        <Field label="Location">
-          <TextInput
-            style={styles.input}
-            value={tripForm.location}
-            onChangeText={(v) => updateTripForm('location', v)}
-            placeholder="Berlin"
-            placeholderTextColor="#6b7280"
-            onFocus={onInputFocus}
-          />
-        </Field>
-
-        <DateField label="Start Date" value={tripForm.startDate} onPress={() => openDatePicker('startDate')} />
-        <DateField label="End Date" value={tripForm.endDate} onPress={() => openDatePicker('endDate')} />
-
-        <View style={styles.actionRow}>
-          <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={takeTripImage}>
-            <Text style={styles.secondaryBtnText}>Take photo</Text>
-          </Pressable>
-          <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={pickTripImage}>
-            <Text style={styles.secondaryBtnText}>{tripForm.imageUri ? 'From gallery (change)' : 'From gallery'}</Text>
-          </Pressable>
-        </View>
-
-        {tripForm.imageUri ? <Image source={{ uri: tripForm.imageUri }} style={styles.previewImage} /> : null}
-
-        {templateTrip ? (
-          <Pressable style={styles.inlineToggle} onPress={() => updateTripForm('copyDefaultTemplate', !tripForm.copyDefaultTemplate)}>
-            <Text style={styles.inlineToggleText}>
-              {tripForm.copyDefaultTemplate ? '☑' : '☐'} Copy items from template ({templateTrip.name})
-            </Text>
-          </Pressable>
-        ) : null}
-
-        <Pressable style={styles.inlineToggle} onPress={() => updateTripForm('setAsDefaultTemplate', !tripForm.setAsDefaultTemplate)}>
-          <Text style={styles.inlineToggleText}>{tripForm.setAsDefaultTemplate ? '☑' : '☐'} Set as default template</Text>
-        </Pressable>
-
-        <Pressable style={styles.primaryBtn} onPress={createTrip}>
-          <Text style={styles.primaryBtnText}>Create Trip</Text>
+      <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>
 
+      {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))
@@ -113,6 +88,80 @@ export default function TripsTab({
             {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}
+                    value={tripForm.name}
+                    onChangeText={(v) => updateTripForm('name', v)}
+                    placeholder="Summer Weekend"
+                    placeholderTextColor="#6b7280"
+                    onFocus={onInputFocus}
+                  />
+                </Field>
+
+                <Field label="Location">
+                  <TextInput
+                    style={styles.input}
+                    value={tripForm.location}
+                    onChangeText={(v) => updateTripForm('location', v)}
+                    placeholder="Berlin"
+                    placeholderTextColor="#6b7280"
+                    onFocus={onInputFocus}
+                  />
+                </Field>
+
+                <DateField label="Start Date" value={tripForm.startDate} onPress={() => openDatePicker('startDate')} />
+                <DateField label="End Date" value={tripForm.endDate} onPress={() => openDatePicker('endDate')} />
+
+                <View style={styles.actionRow}>
+                  <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={takeTripImage}>
+                    <Text style={styles.secondaryBtnText}>Take photo</Text>
+                  </Pressable>
+                  <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={pickTripImage}>
+                    <Text style={styles.secondaryBtnText}>{tripForm.imageUri ? 'From gallery (change)' : 'From gallery'}</Text>
+                  </Pressable>
+                </View>
+
+                {tripForm.imageUri ? <Image source={{ uri: tripForm.imageUri }} style={styles.previewImage} /> : null}
+
+                {templateTrip ? (
+                  <Pressable style={styles.inlineToggle} onPress={() => updateTripForm('copyDefaultTemplate', !tripForm.copyDefaultTemplate)}>
+                    <Text style={styles.inlineToggleText}>
+                      {tripForm.copyDefaultTemplate ? '☑' : '☐'} Copy items from template ({templateTrip.name})
+                    </Text>
+                  </Pressable>
+                ) : null}
+
+                <Pressable style={styles.inlineToggle} onPress={() => updateTripForm('setAsDefaultTemplate', !tripForm.setAsDefaultTemplate)}>
+                  <Text style={styles.inlineToggleText}>{tripForm.setAsDefaultTemplate ? '☑' : '☐'} Set as default template</Text>
+                </Pressable>
+
+                <Pressable style={styles.primaryBtn} onPress={submitCreateTrip}>
+                  <Text style={styles.primaryBtnText}>Create Trip</Text>
+                </Pressable>
+              </ScrollView>
+            </View>
+          </KeyboardAvoidingView>
+        </View>
+      </Modal>
     </View>
   );
 }