feat: add trip view modal with template and delete actions

src/tabs/TripsTab.js

@@ -32,14 +32,28 @@ export default function TripsTab({
   activeTripCheckupCount,
 }) {
   const [createModalVisible, setCreateModalVisible] = useState(false);
+  const [viewTripId, setViewTripId] = useState(null);
 
   const activeTrip = useMemo(() => trips.find((trip) => trip.id === selectedTripId) || null, [trips, selectedTripId]);
+  const viewingTrip = useMemo(() => trips.find((trip) => trip.id === viewTripId) || null, [trips, viewTripId]);
 
   function submitCreateTrip() {
     const ok = createTrip();
     if (ok) setCreateModalVisible(false);
   }
 
+  function applyTemplateFromView() {
+    if (!viewingTrip) return;
+    setTripAsTemplate(viewingTrip.id);
+  }
+
+  function deleteFromView() {
+    if (!viewingTrip) return;
+    const tripId = viewingTrip.id;
+    setViewTripId(null);
+    deleteTrip(tripId);
+  }
+
   return (
     <View style={styles.section}>
       <View style={styles.sectionRow}>
@@ -77,11 +91,8 @@ export default function TripsTab({
                 <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 style={styles.miniBtn} onPress={() => setViewTripId(trip.id)}>
+                  <Text style={styles.miniBtnText}>View</Text>
                 </Pressable>
               </View>
             </View>
@@ -162,6 +173,44 @@ export default function TripsTab({
           </KeyboardAvoidingView>
         </View>
       </Modal>
+
+      <Modal visible={!!viewingTrip} 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}>Trip View</Text>
+                <Pressable onPress={() => setViewTripId(null)}>
+                  <Text style={styles.closeText}>Close</Text>
+                </Pressable>
+              </View>
+
+              {viewingTrip ? (
+                <ScrollView
+                  keyboardShouldPersistTaps="handled"
+                  keyboardDismissMode="interactive"
+                  contentContainerStyle={{ paddingBottom: 12 }}
+                  showsVerticalScrollIndicator={false}
+                >
+                  {viewingTrip.imageUri ? <Image source={{ uri: viewingTrip.imageUri }} style={styles.previewImage} /> : null}
+                  <Text style={styles.tripHeroTitle}>{viewingTrip.name}</Text>
+                  <Text style={styles.cardMeta}>{viewingTrip.location || 'No location'}</Text>
+                  <Text style={styles.cardMeta}>{viewingTrip.startDate} → {viewingTrip.endDate}</Text>
+                  <Text style={styles.cardMeta}>{defaultTemplateTripId === viewingTrip.id ? 'Default template trip' : 'Not default template'}</Text>
+
+                  <Pressable style={styles.secondaryBtn} onPress={applyTemplateFromView}>
+                    <Text style={styles.secondaryBtnText}>Set as Template</Text>
+                  </Pressable>
+
+                  <Pressable style={styles.miniBtnDanger} onPress={deleteFromView}>
+                    <Text style={styles.miniBtnText}>Delete Trip</Text>
+                  </Pressable>
+                </ScrollView>
+              ) : null}
+            </View>
+          </KeyboardAvoidingView>
+        </View>
+      </Modal>
     </View>
   );
 }