refactor: split app into modular src architecture

src/tabs/TripsTab.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import { Image, Pressable, Text, TextInput, View } from 'react-native';
+import Field from '../components/Field';
+import { styles } from '../styles';
+
+export default function TripsTab({
+  tripForm,
+  updateTripForm,
+  pickTripImage,
+  templateTrip,
+  createTrip,
+  trips,
+  selectedTripId,
+  chooseTrip,
+  setTripAsTemplate,
+  deleteTrip,
+  focusToEnd,
+  defaultTemplateTripId,
+}) {
+  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={focusToEnd}
+          />
+        </Field>
+
+        <Field label="Location">
+          <TextInput
+            style={styles.input}
+            value={tripForm.location}
+            onChangeText={(v) => updateTripForm('location', v)}
+            placeholder="Berlin"
+            placeholderTextColor="#6b7280"
+            onFocus={focusToEnd}
+          />
+        </Field>
+
+        <Field label="Start Date (YYYY-MM-DD)">
+          <TextInput
+            style={styles.input}
+            value={tripForm.startDate}
+            onChangeText={(v) => updateTripForm('startDate', v)}
+            placeholderTextColor="#6b7280"
+            onFocus={focusToEnd}
+          />
+        </Field>
+
+        <Field label="End Date (YYYY-MM-DD)">
+          <TextInput
+            style={styles.input}
+            value={tripForm.endDate}
+            onChangeText={(v) => updateTripForm('endDate', v)}
+            placeholderTextColor="#6b7280"
+            onFocus={focusToEnd}
+          />
+        </Field>
+
+        <Pressable style={styles.secondaryBtn} onPress={pickTripImage}>
+          <Text style={styles.secondaryBtnText}>{tripForm.imageUri ? 'Change trip image' : 'Add trip image'}</Text>
+        </Pressable>
+
+        {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>
+        </Pressable>
+      </View>
+
+      {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>
+        ))}
+    </View>
+  );
+}