feat: add calendar date picker, nav icons, and input-focused keyboard scrolling

src/tabs/HistoryTab.js

@@ -2,11 +2,14 @@ import React from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { styles } from '../styles';
 
-export default function HistoryTab({ selectedTripCheckups, selectedCheckupId, setSelectedCheckupId }) {
+export default function HistoryTab({ selectedTrip, selectedTripCheckups, selectedCheckupId, setSelectedCheckupId }) {
   return (
     <View style={styles.section}>
       <Text style={styles.sectionTitle}>History</Text>
-      {selectedTripCheckups.length === 0 ? <Text style={styles.muted}>No check-ups saved yet.</Text> : null}
+
+      {!selectedTrip ? <Text style={styles.muted}>Select a trip first.</Text> : null}
+      {selectedTrip ? <Text style={styles.tripHistoryLabel}>Check-ups for: {selectedTrip.name}</Text> : null}
+      {selectedTrip && selectedTripCheckups.length === 0 ? <Text style={styles.muted}>No check-ups saved yet.</Text> : null}
 
       {selectedTripCheckups.map((checkup) => (
         <View key={checkup.id} style={styles.cardSoft}>

src/tabs/TripsTab.js

@@ -3,6 +3,16 @@ import { Image, Pressable, Text, TextInput, View } from 'react-native';
 import Field from '../components/Field';
 import { styles } from '../styles';
 
+function DateField({ label, value, onPress }) {
+  return (
+    <Field label={label}>
+      <Pressable style={styles.dateInput} onPress={onPress}>
+        <Text style={styles.dateInputText}>{value}</Text>
+      </Pressable>
+    </Field>
+  );
+}
+
 export default function TripsTab({
   tripForm,
   updateTripForm,
@@ -14,8 +24,9 @@ export default function TripsTab({
   chooseTrip,
   setTripAsTemplate,
   deleteTrip,
-  focusToEnd,
+  onInputFocus,
   defaultTemplateTripId,
+  openDatePicker,
 }) {
   return (
     <View style={styles.section}>
@@ -29,7 +40,7 @@ export default function TripsTab({
             onChangeText={(v) => updateTripForm('name', v)}
             placeholder="Summer Weekend"
             placeholderTextColor="#6b7280"
-            onFocus={focusToEnd}
+            onFocus={onInputFocus}
           />
         </Field>
 
@@ -40,29 +51,12 @@ export default function TripsTab({
             onChangeText={(v) => updateTripForm('location', v)}
             placeholder="Berlin"
             placeholderTextColor="#6b7280"
-            onFocus={focusToEnd}
+            onFocus={onInputFocus}
           />
         </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>
+        <DateField label="Start Date" value={tripForm.startDate} onPress={() => openDatePicker('startDate')} />
+        <DateField label="End Date" value={tripForm.endDate} onPress={() => openDatePicker('endDate')} />
 
         <Pressable style={styles.secondaryBtn} onPress={pickTripImage}>
           <Text style={styles.secondaryBtnText}>{tripForm.imageUri ? 'Change trip image' : 'Add trip image'}</Text>