fix(#14,#15): reduce UI clutter and rename status actions

.gitea/workflows/ci.yml

@@ -3,6 +3,10 @@ on:
   push:
     branches:
       - main
+    paths:
+      - '**/*.js'
+      - '**/*.json'
+      - '.gitea/workflows/**'
 
 jobs:
   build-android:

.gitea/workflows/dev.yml

@@ -3,6 +3,10 @@ on:
   push:
     branches-ignore:
       - main
+    paths:
+      - '**/*.js'
+      - '**/*.json'
+      - '.gitea/workflows/**'
 
 jobs:
   validate:

README.md

@@ -2,20 +2,27 @@
 
 Minimal local-first luggage management app built with Expo.
 
-## MVP Implemented
+## Current Features (V2)
 
 - No auth, no server, local storage only (AsyncStorage)
-- Trips with name, location, dates, optional image from gallery
+- Trips with name, location, calendar date picker, optional image from gallery
-- Active trip auto-select when today is inside trip date range
+- Active trip auto-select on first load, with manual trip switching anytime via global trip picker
+- Default trip template (copied into new trip, not linked)
 - Luggage items with:
   - name, description, category
   - status: packed, unpacked, lost, left-behind, lent-to (+ person name)
   - placement: suitcase, backpack, with-user, other
   - optional image from gallery
-- Check-up snapshots per trip
+- Item create/edit via modal
-- Check-up history view with per-item state at that time
+- Check-up flow as yes/no checklist with live stats (correct/bad/pending):
-- JSON export (shareable file)
+  - “No” opens update modal
-- Default trip template (copied into new trip, not linked)
+  - fixes can be check-up-only or optionally synced to trip item list
+- Check-up history per selected trip with saved snapshots + stats
+
+## Notes
+
+- JSON export is removed for now.
+- Dark-mode-first minimalist UI.
 
 ## Run
 

TODO.md

@@ -1,31 +1,14 @@
 # TODO - Luggage List
 
-## In Progress
+This file was intentionally nuked.
-- [x] Bootstrap project from `/root/projects/time-until`
-- [x] Set app metadata to Luggage List
-- [x] Add first MVP implementation shell
 
-## MVP Feature Checklist
+All pending tasks now live as Gitea issues:
-- [x] Local-only storage (no auth/no backend)
+- https://gitea.reversed.dev/space/luggage-list/issues/1
-- [x] Trip creation/selection with active trip auto-selection
+- https://gitea.reversed.dev/space/luggage-list/issues/2
-- [x] Trip image support
+- https://gitea.reversed.dev/space/luggage-list/issues/3
-- [x] Luggage items CRUD with category
+- https://gitea.reversed.dev/space/luggage-list/issues/4
-- [x] Item statuses: packed, unpacked, lost, left-behind, lent-to (+ person name)
+- https://gitea.reversed.dev/space/luggage-list/issues/5
-- [x] Item placement tracking: suitcase, backpack, with-user, other
+- https://gitea.reversed.dev/space/luggage-list/issues/6
-- [x] Item image support
+- https://gitea.reversed.dev/space/luggage-list/issues/7
-- [x] Create check-up snapshots
+- https://gitea.reversed.dev/space/luggage-list/issues/8
-- [x] Check-up history per trip
+- https://gitea.reversed.dev/space/luggage-list/issues/9
-- [x] JSON export
-- [x] Default luggage list template (copy into new trip)
-
-## Remaining
-- [x] Adjust CI/CD workflow naming and artifact naming for this project
-- [x] Validate app builds (web export smoke check)
-- [x] Polish README and commit final notes
-
-## Progress Log
-- [x] Initial MVP scaffold and all requested core features implemented
-- [x] Added trip deletion flow and confirmation
-- [x] Updated Gitea workflows/artifacts naming for Luggage List
-- [x] Ran local web export smoke checks successfully
-- [x] Removed `eas init` from CI/manual workflows (run once locally instead)

app.json

@@ -34,6 +34,15 @@
       "eas": {
         "projectId": "1275f90e-33c6-4af1-942e-ca29a309f8c8"
       }
-    }
+    },
+    "plugins": [
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "Allow Luggage List to access your photos for trip and item images.",
+          "cameraPermission": "Allow Luggage List to use your camera to take trip and item photos."
+        }
+      ]
+    ]
   }
 }

docker-compose.yml

@@ -1,8 +0,0 @@
-services:
-  web:
-    image: nginx:alpine
-    ports:
-      - "45554:80"
-    volumes:
-      - ./entrypoint.sh:/entrypoint.sh:ro
-    entrypoint: ["/bin/sh", "/entrypoint.sh"]

entrypoint.sh

@@ -1,29 +0,0 @@
-#!/bin/sh
-set -e
-
-WEBROOT="/usr/share/nginx/html"
-GITEA_URL="https://gitea.reversed.dev"
-GITEA_REPO="space/time-until"
-
-echo "Fetching latest release"
-
-RELEASE_JSON=$(wget -qO- \
-  "$GITEA_URL/api/v1/repos/$GITEA_REPO/releases/latest")
-
-ASSET_URL=$(echo "$RELEASE_JSON" | sed -n 's/.*"browser_download_url" *: *"\([^"]*dist\.zip[^"]*\)".*/\1/p' | head -1)
-
-if [ -z "$ASSET_URL" ]; then
-  echo "ERROR: No dist.zip found in latest release"
-  exit 1
-fi
-
-echo "Downloading $ASSET_URL ..."
-wget -qO /tmp/dist.zip --header="$AUTH_HEADER" "$ASSET_URL"
-
-echo "Extracting to $WEBROOT ..."
-rm -rf "${WEBROOT:?}"/*
-unzip -o /tmp/dist.zip -d "$WEBROOT"
-rm /tmp/dist.zip
-
-echo "Starting nginx ..."
-exec nginx -g "daemon off;"

package-lock.json

@@ -10,9 +10,7 @@
       "dependencies": {
         "@react-native-async-storage/async-storage": "2.2.0",
         "expo": "~54.0.33",
-        "expo-file-system": "~19.0.17",
         "expo-image-picker": "~17.0.8",
-        "expo-sharing": "~14.0.7",
         "expo-status-bar": "~3.0.9",
         "react": "19.1.0",
         "react-dom": "19.1.0",
@@ -4441,15 +4439,6 @@
         "node": ">=20.16.0"
       }
     },
-    "node_modules/expo-sharing": {
-      "version": "14.0.8",
-      "resolved": "https://registry.npmjs.org/expo-sharing/-/expo-sharing-14.0.8.tgz",
-      "integrity": "sha512-A1pPr2iBrxypFDCWVAESk532HK+db7MFXbvO2sCV9ienaFXAk7lIBm6bkqgE6vzRd9O3RGdEGzYx80cYlc089Q==",
-      "license": "MIT",
-      "peerDependencies": {
-        "expo": "*"
-      }
-    },
     "node_modules/expo-status-bar": {
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-3.0.9.tgz",

package.json

@@ -11,9 +11,7 @@
   "dependencies": {
     "@react-native-async-storage/async-storage": "2.2.0",
     "expo": "~54.0.33",
-    "expo-file-system": "~19.0.17",
     "expo-image-picker": "~17.0.8",
-    "expo-sharing": "~14.0.7",
     "expo-status-bar": "~3.0.9",
     "react": "19.1.0",
     "react-dom": "19.1.0",

src/AppRoot.js

@@ -0,0 +1,981 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, StatusBar as RNStatusBar, Text, View } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import * as ImagePicker from 'expo-image-picker';
+import { StatusBar } from 'expo-status-bar';
+import BottomTab from './components/BottomTab';
+import TripPicker from './components/TripPicker';
+import DatePickerModal from './components/DatePickerModal';
+import AppDialogModal from './components/AppDialogModal';
+import ItemModal from './modals/ItemModal';
+import CheckupFlowModal from './modals/CheckupFlowModal';
+import BackupModal from './modals/BackupModal';
+import TripsTab from './tabs/TripsTab';
+import ItemsTab from './tabs/ItemsTab';
+import CheckupTab from './tabs/CheckupTab';
+import HistoryTab from './tabs/HistoryTab';
+import { emptyData, STORAGE_KEY } from './constants';
+import { findBestTripId, makeId, parseYMD, todayYMD } from './utils/date';
+import { styles } from './styles';
+
+const emptyTripForm = () => ({
+  name: '',
+  location: '',
+  startDate: todayYMD(),
+  endDate: todayYMD(),
+  copyDefaultTemplate: true,
+  setAsDefaultTemplate: false,
+});
+
+const emptyItemForm = () => ({
+  id: null,
+  name: '',
+  description: '',
+  category: '',
+  status: 'unpacked',
+  placement: 'suitcase',
+  lentTo: '',
+  imageUri: '',
+  imageQuality: 'balanced',
+  imageAllowCrop: false,
+});
+
+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);
+
+  const [loaded, setLoaded] = useState(false);
+  const [fakeLoadDone, setFakeLoadDone] = useState(false);
+  const [fakeLoadProgress, setFakeLoadProgress] = useState(0);
+  const [tab, setTab] = useState('trips');
+  const [data, setData] = useState(emptyData);
+
+  const [selectedTripId, setSelectedTripId] = useState(null);
+  const [tripForm, setTripForm] = useState(emptyTripForm());
+  const [datePicker, setDatePicker] = useState({ visible: false, field: 'startDate' });
+
+  const [itemModalVisible, setItemModalVisible] = useState(false);
+  const [itemForm, setItemForm] = useState(emptyItemForm());
+
+  const [checkupSession, setCheckupSession] = useState([]);
+  const [checkupFlowVisible, setCheckupFlowVisible] = useState(false);
+  const [checkupFlowIndex, setCheckupFlowIndex] = useState(0);
+  const [checkupFlowMode, setCheckupFlowMode] = useState('question');
+  const [checkupNoForm, setCheckupNoForm] = useState(emptyCheckupNoForm());
+
+  const [selectedCheckupId, setSelectedCheckupId] = useState(null);
+  const [dialogState, setDialogState] = useState({ visible: false, title: '', message: '', buttons: [] });
+  const [backupModalVisible, setBackupModalVisible] = useState(false);
+  const [backupImportText, setBackupImportText] = useState('');
+
+  const topInset = Platform.OS === 'android' ? (RNStatusBar.currentHeight || 0) + 10 : 0;
+  const fakeLoadTotalMs = useMemo(() => 1200 + Math.floor(Math.random() * 2801), []);
+  const appReady = loaded && fakeLoadDone;
+
+  const visibleTrips = useMemo(() => data.trips.filter((trip) => !trip.archived), [data.trips]);
+
+  const selectedTrip = useMemo(() => visibleTrips.find((trip) => trip.id === selectedTripId) || null, [visibleTrips, selectedTripId]);
+
+  const selectedTripItems = useMemo(() => {
+    if (!selectedTripId) return [];
+    return data.itemsByTrip[selectedTripId] || [];
+  }, [data.itemsByTrip, selectedTripId]);
+
+  const selectedTripCheckups = useMemo(() => {
+    if (!selectedTripId) return [];
+    return (data.checkupsByTrip[selectedTripId] || []).slice().sort((a, b) => b.createdAt - a.createdAt);
+  }, [data.checkupsByTrip, selectedTripId]);
+
+  const templateTrip = useMemo(
+    () => data.trips.find((trip) => trip.id === data.defaultTemplateTripId) || null,
+    [data.trips, data.defaultTemplateTripId]
+  );
+
+  const checkupStats = useMemo(() => {
+    const total = checkupSession.length;
+    const correct = checkupSession.filter((entry) => entry.result === 'correct').length;
+    const bad = checkupSession.filter((entry) => entry.result === 'bad').length;
+    const pending = total - correct - bad;
+    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]);
+
+  function closeDialog() {
+    setDialogState((prev) => ({ ...prev, visible: false }));
+  }
+
+  function showAlert(title, message) {
+    setDialogState({
+      visible: true,
+      title,
+      message,
+      buttons: [{ text: 'OK', tone: 'primary', onPress: closeDialog }],
+    });
+  }
+
+  function showConfirm({ title, message, confirmText = 'Confirm', onConfirm, tone = 'danger' }) {
+    setDialogState({
+      visible: true,
+      title,
+      message,
+      buttons: [
+        { text: 'Cancel', tone: 'neutral', onPress: closeDialog },
+        {
+          text: confirmText,
+          tone,
+          onPress: () => {
+            closeDialog();
+            if (typeof onConfirm === 'function') onConfirm();
+          },
+        },
+      ],
+    });
+  }
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const raw = await AsyncStorage.getItem(STORAGE_KEY);
+        if (raw) {
+          const parsed = JSON.parse(raw);
+          setData({ ...emptyData, ...parsed });
+        }
+      } catch {
+        showAlert('Error', 'Could not load local data.');
+      } finally {
+        setLoaded(true);
+      }
+    })();
+  }, []);
+
+  useEffect(() => {
+    const startedAt = Date.now();
+
+    const interval = setInterval(() => {
+      const elapsed = Date.now() - startedAt;
+      setFakeLoadProgress(Math.min(1, elapsed / fakeLoadTotalMs));
+    }, 60);
+
+    const timeout = setTimeout(() => {
+      setFakeLoadProgress(1);
+      setFakeLoadDone(true);
+      clearInterval(interval);
+    }, fakeLoadTotalMs);
+
+    return () => {
+      clearInterval(interval);
+      clearTimeout(timeout);
+    };
+  }, [fakeLoadTotalMs]);
+
+  useEffect(() => {
+    if (!loaded) return;
+    AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(data)).catch(() => {
+      showAlert('Error', 'Could not save local data.');
+    });
+  }, [data, loaded]);
+
+  useEffect(() => {
+    if (!loaded) return;
+    if (!visibleTrips.length) {
+      setSelectedTripId(null);
+      return;
+    }
+
+    if (selectedTripId && visibleTrips.some((trip) => trip.id === selectedTripId)) {
+      return;
+    }
+
+    const bestTripId = findBestTripId(visibleTrips);
+    setSelectedTripId(bestTripId || visibleTrips[0].id);
+  }, [visibleTrips, selectedTripId, loaded]);
+
+  useEffect(() => {
+    if (tab !== 'checkup') return;
+    createFreshCheckupSession();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedTripId, selectedTripItems.length]);
+
+  function updateTripForm(field, value) {
+    setTripForm((prev) => ({ ...prev, [field]: value }));
+  }
+
+  function updateItemForm(field, value) {
+    setItemForm((prev) => ({ ...prev, [field]: value }));
+  }
+
+  function openDatePicker(field) {
+    setDatePicker({ visible: true, field });
+  }
+
+  function onSelectDate(ymd) {
+    updateTripForm(datePicker.field, ymd);
+    setDatePicker((prev) => ({ ...prev, visible: false }));
+  }
+
+  async function pickImage(onPicked, options = {}) {
+    const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (!perm.granted) {
+      showAlert('Permission needed', 'Allow gallery access to select images.');
+      return;
+    }
+
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: !!options.allowCrop,
+      quality: typeof options.quality === 'number' ? options.quality : 0.85,
+    });
+
+    if (!result.canceled && result.assets?.[0]?.uri) {
+      onPicked(result.assets[0].uri);
+    }
+  }
+
+  async function takeImage(onPicked, options = {}) {
+    const perm = await ImagePicker.requestCameraPermissionsAsync();
+    if (!perm.granted) {
+      showAlert('Permission needed', 'Allow camera access to take photos.');
+      return;
+    }
+
+    const result = await ImagePicker.launchCameraAsync({
+      allowsEditing: !!options.allowCrop,
+      quality: typeof options.quality === 'number' ? options.quality : 0.85,
+    });
+
+    if (!result.canceled && result.assets?.[0]?.uri) {
+      onPicked(result.assets[0].uri);
+    }
+  }
+
+  function createTrip() {
+    if (!tripForm.name.trim()) {
+      showAlert('Missing name', 'Trip name is required.');
+      return false;
+    }
+
+    const start = parseYMD(tripForm.startDate);
+    const end = parseYMD(tripForm.endDate);
+
+    if (!start || !end) {
+      showAlert('Invalid dates', 'Please select valid trip dates.');
+      return false;
+    }
+
+    if (start > end) {
+      showAlert('Invalid dates', 'Start date cannot be after end date.');
+      return false;
+    }
+
+    const now = Date.now();
+    const tripId = makeId('trip');
+
+    setData((prev) => {
+      const next = {
+        ...prev,
+        trips: [
+          ...prev.trips,
+          {
+            id: tripId,
+            name: tripForm.name.trim(),
+            location: tripForm.location.trim(),
+            startDate: tripForm.startDate,
+            endDate: tripForm.endDate,
+            imageUri: '',
+            archived: false,
+            createdAt: now,
+            updatedAt: now,
+          },
+        ],
+        itemsByTrip: { ...prev.itemsByTrip, [tripId]: [] },
+        checkupsByTrip: { ...prev.checkupsByTrip, [tripId]: [] },
+      };
+
+      if (tripForm.copyDefaultTemplate && prev.defaultTemplateTripId) {
+        const templateItems = prev.itemsByTrip[prev.defaultTemplateTripId] || [];
+        next.itemsByTrip[tripId] = templateItems.map((item) => ({
+          ...item,
+          id: makeId('item'),
+          createdAt: now,
+          updatedAt: now,
+        }));
+      }
+
+      if (tripForm.setAsDefaultTemplate) {
+        next.defaultTemplateTripId = tripId;
+      }
+
+      return next;
+    });
+
+    setSelectedTripId(tripId);
+    setTripForm(emptyTripForm());
+    return true;
+  }
+
+  function setTripAsTemplate(tripId) {
+    setData((prev) => ({ ...prev, defaultTemplateTripId: tripId }));
+  }
+
+  function saveTripEdits(tripId, patch) {
+    if (!patch.name.trim()) {
+      showAlert('Missing name', 'Trip name is required.');
+      return false;
+    }
+
+    const start = parseYMD(patch.startDate);
+    const end = parseYMD(patch.endDate);
+
+    if (!start || !end) {
+      showAlert('Invalid dates', 'Please select valid trip dates.');
+      return false;
+    }
+
+    if (start > end) {
+      showAlert('Invalid dates', 'Start date cannot be after end date.');
+      return false;
+    }
+
+    setData((prev) => ({
+      ...prev,
+      trips: prev.trips.map((trip) =>
+        trip.id === tripId
+          ? {
+              ...trip,
+              name: patch.name.trim(),
+              location: patch.location.trim(),
+              startDate: patch.startDate,
+              endDate: patch.endDate,
+              updatedAt: Date.now(),
+            }
+          : trip
+      ),
+    }));
+
+    return true;
+  }
+
+  function setTripArchived(tripId, archived) {
+    setData((prev) => ({
+      ...prev,
+      trips: prev.trips.map((trip) =>
+        trip.id === tripId
+          ? {
+              ...trip,
+              archived,
+              archivedAt: archived ? Date.now() : null,
+              updatedAt: Date.now(),
+            }
+          : trip
+      ),
+      defaultTemplateTripId: archived && prev.defaultTemplateTripId === tripId ? null : prev.defaultTemplateTripId,
+    }));
+  }
+
+  function deleteTrip(tripId) {
+    showConfirm({
+      title: 'Delete trip?',
+      message: 'Trip items and check-up history will also be deleted.',
+      confirmText: 'Delete',
+      tone: 'danger',
+      onConfirm: () => {
+        setData((prev) => {
+          const trips = prev.trips.filter((trip) => trip.id !== tripId);
+          const itemsByTrip = { ...prev.itemsByTrip };
+          const checkupsByTrip = { ...prev.checkupsByTrip };
+          delete itemsByTrip[tripId];
+          delete checkupsByTrip[tripId];
+
+          return {
+            ...prev,
+            trips,
+            itemsByTrip,
+            checkupsByTrip,
+            defaultTemplateTripId: prev.defaultTemplateTripId === tripId ? null : prev.defaultTemplateTripId,
+          };
+        });
+      },
+    });
+  }
+
+  function openAddItemModal() {
+    setItemForm(emptyItemForm());
+    setItemModalVisible(true);
+  }
+
+  function openEditItemModal(item) {
+    setItemForm({
+      id: item.id,
+      name: item.name || '',
+      description: item.description || '',
+      category: item.category || '',
+      status: item.status || 'unpacked',
+      placement: item.placement || 'suitcase',
+      lentTo: item.lentTo || '',
+      imageUri: item.imageUri || '',
+      imageQuality: item.imageQuality || 'balanced',
+      imageAllowCrop: !!item.imageAllowCrop,
+    });
+    setItemModalVisible(true);
+  }
+
+  function saveItemFromModal() {
+    if (!selectedTripId) {
+      showAlert('No trip selected', 'Please select or create a trip first.');
+      return;
+    }
+
+    if (!itemForm.name.trim()) {
+      showAlert('Missing name', 'Item name is required.');
+      return;
+    }
+
+    const now = Date.now();
+
+    setData((prev) => {
+      const items = prev.itemsByTrip[selectedTripId] || [];
+      const existingCreatedAt = items.find((item) => item.id === itemForm.id)?.createdAt || now;
+      const nextItem = {
+        id: itemForm.id || makeId('item'),
+        name: itemForm.name.trim(),
+        description: itemForm.description.trim(),
+        category: itemForm.category.trim(),
+        status: itemForm.status,
+        placement: itemForm.placement,
+        lentTo: itemForm.status === 'lent-to' ? itemForm.lentTo.trim() : '',
+        imageUri: itemForm.imageUri,
+        imageQuality: itemForm.imageQuality,
+        imageAllowCrop: itemForm.imageAllowCrop,
+        createdAt: existingCreatedAt,
+        updatedAt: now,
+      };
+
+      const nextItems = itemForm.id
+        ? items.map((item) => (item.id === itemForm.id ? nextItem : item))
+        : [...items, nextItem];
+
+      return {
+        ...prev,
+        itemsByTrip: {
+          ...prev.itemsByTrip,
+          [selectedTripId]: nextItems,
+        },
+      };
+    });
+
+    setItemModalVisible(false);
+    setItemForm(emptyItemForm());
+  }
+
+  function deleteItem(itemId) {
+    setData((prev) => {
+      const items = prev.itemsByTrip[selectedTripId] || [];
+      return {
+        ...prev,
+        itemsByTrip: {
+          ...prev.itemsByTrip,
+          [selectedTripId]: items.filter((item) => item.id !== itemId),
+        },
+      };
+    });
+  }
+
+  function quickSetItemStatus(itemId, status) {
+    if (!selectedTripId) return;
+    setData((prev) => {
+      const items = prev.itemsByTrip[selectedTripId] || [];
+      return {
+        ...prev,
+        itemsByTrip: {
+          ...prev.itemsByTrip,
+          [selectedTripId]: items.map((item) =>
+            item.id === itemId
+              ? {
+                  ...item,
+                  status,
+                  lentTo: status === 'lent-to' ? item.lentTo : '',
+                  updatedAt: Date.now(),
+                }
+              : item
+          ),
+        },
+      };
+    });
+  }
+
+  function bulkSetItemStatus(itemIds, status) {
+    if (!selectedTripId || !itemIds.length) return;
+    const idSet = new Set(itemIds);
+    setData((prev) => {
+      const items = prev.itemsByTrip[selectedTripId] || [];
+      return {
+        ...prev,
+        itemsByTrip: {
+          ...prev.itemsByTrip,
+          [selectedTripId]: items.map((item) =>
+            idSet.has(item.id)
+              ? {
+                  ...item,
+                  status,
+                  lentTo: status === 'lent-to' ? item.lentTo : '',
+                  updatedAt: Date.now(),
+                }
+              : item
+          ),
+        },
+      };
+    });
+  }
+
+  function deleteCheckup(checkupId) {
+    if (!selectedTripId) return;
+
+    showConfirm({
+      title: 'Delete check-up?',
+      message: 'This snapshot will be removed from history.',
+      confirmText: 'Delete',
+      tone: 'danger',
+      onConfirm: () => {
+        setData((prev) => {
+          const existing = prev.checkupsByTrip[selectedTripId] || [];
+          return {
+            ...prev,
+            checkupsByTrip: {
+              ...prev.checkupsByTrip,
+              [selectedTripId]: existing.filter((checkup) => checkup.id !== checkupId),
+            },
+          };
+        });
+        setSelectedCheckupId((prev) => (prev === checkupId ? null : prev));
+      },
+    });
+  }
+
+  function createFreshCheckupSession() {
+    if (!selectedTripItems.length) {
+      setCheckupSession([]);
+      return;
+    }
+    setCheckupSession(buildCheckupSession(selectedTripItems));
+  }
+
+  function startCheckupFlow() {
+    if (!selectedTripId) {
+      showAlert('No trip selected', 'Please select a trip first.');
+      return;
+    }
+    if (!selectedTripItems.length) {
+      showAlert('No items', 'Add items before starting a check-up.');
+      return;
+    }
+
+    const fresh = buildCheckupSession(selectedTripItems);
+    setCheckupSession(fresh);
+    setCheckupFlowIndex(0);
+    setCheckupFlowMode('question');
+    setCheckupNoForm(emptyCheckupNoForm());
+    setCheckupFlowVisible(true);
+  }
+
+  function closeCheckupFlow() {
+    setCheckupFlowVisible(false);
+    setCheckupFlowMode('question');
+    setCheckupNoForm(emptyCheckupNoForm());
+  }
+
+  function goNextInCheckup() {
+    setCheckupFlowIndex((prev) => prev + 1);
+    setCheckupFlowMode('question');
+    setCheckupNoForm(emptyCheckupNoForm());
+  }
+
+  function goBackInCheckup() {
+    setCheckupFlowIndex((prev) => Math.max(0, prev - 1));
+    setCheckupFlowMode('question');
+    setCheckupNoForm(emptyCheckupNoForm());
+  }
+
+  function skipCurrentCheckupItem() {
+    if (!checkupCurrentEntry) return;
+    setCheckupSession((prev) =>
+      prev.map((x) =>
+        x.itemId === checkupCurrentEntry.itemId
+          ? {
+              ...x,
+              confirmed: false,
+              result: 'pending',
+            }
+          : x
+      )
+    );
+    goNextInCheckup();
+  }
+
+  function answerCurrentCheckupYes() {
+    const entry = checkupCurrentEntry;
+    if (!entry) return;
+
+    setCheckupSession((prev) =>
+      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,
+    });
+    setCheckupFlowMode('edit');
+  }
+
+  function saveCurrentCheckupNo() {
+    const entry = checkupCurrentEntry;
+    if (!entry) return;
+
+    const patch = {
+      status: checkupNoForm.status,
+      placement: checkupNoForm.placement,
+      lentTo: checkupNoForm.status === 'lent-to' ? checkupNoForm.lentTo.trim() : '',
+    };
+
+    setCheckupSession((prev) =>
+      prev.map((x) =>
+        x.itemId === entry.itemId
+          ? {
+              ...x,
+              current: patch,
+              confirmed: true,
+              result: 'bad',
+            }
+          : x
+      )
+    );
+
+    if (checkupNoForm.updateMasterList && selectedTripId) {
+      setData((prev) => {
+        const items = prev.itemsByTrip[selectedTripId] || [];
+        return {
+          ...prev,
+          itemsByTrip: {
+            ...prev.itemsByTrip,
+            [selectedTripId]: items.map((item) =>
+              item.id === entry.itemId
+                ? {
+                    ...item,
+                    status: patch.status,
+                    placement: patch.placement,
+                    lentTo: patch.lentTo,
+                    updatedAt: Date.now(),
+                  }
+                : item
+            ),
+          },
+        };
+      });
+    }
+
+    goNextInCheckup();
+  }
+
+  function saveCheckupSnapshot(sessionToSave) {
+    if (!selectedTripId) {
+      showAlert('No trip selected', 'Please select a trip first.');
+      return false;
+    }
+
+    if (!sessionToSave.length) {
+      showAlert('No items', 'Add items before creating a check-up.');
+      return false;
+    }
+
+    const pending = sessionToSave.filter((entry) => !entry.confirmed).length;
+    if (pending > 0) {
+      showAlert('Incomplete', `Please confirm all items first (${pending} remaining).`);
+      return false;
+    }
+
+    const snapshot = sessionToSave.map((entry) => ({
+      itemId: entry.itemId,
+      name: entry.name,
+      category: entry.category,
+      status: entry.current.status,
+      placement: entry.current.placement,
+      lentTo: entry.current.status === 'lent-to' ? entry.current.lentTo : '',
+      result: entry.result || 'pending',
+    }));
+
+    setData((prev) => {
+      const existing = prev.checkupsByTrip[selectedTripId] || [];
+      return {
+        ...prev,
+        checkupsByTrip: {
+          ...prev.checkupsByTrip,
+          [selectedTripId]: [
+            ...existing,
+            {
+              id: makeId('checkup'),
+              createdAt: Date.now(),
+              snapshot,
+              stats: {
+                correct: snapshot.filter((entry) => entry.result === 'correct').length,
+                bad: snapshot.filter((entry) => entry.result === 'bad').length,
+              },
+            },
+          ],
+        },
+      };
+    });
+
+    return true;
+  }
+
+  function finishCheckupFlow() {
+    const ok = saveCheckupSnapshot(checkupSession);
+    if (!ok) return;
+
+    showAlert('Saved', 'Check-up snapshot saved.');
+    closeCheckupFlow();
+    createFreshCheckupSession();
+  }
+
+  function onInputFocus(event) {
+    const target = event?.target;
+    if (!target) return;
+    setTimeout(() => {
+      const scrollFn = scrollRef.current?.scrollResponderScrollNativeHandleToKeyboard;
+      if (typeof scrollFn === 'function') {
+        scrollFn(target, 90, true);
+      }
+    }, 80);
+  }
+
+  function openQuickAddItemFromNav() {
+    if (!selectedTripId) {
+      showAlert('No trip selected', 'Please select or create a trip first.');
+      return;
+    }
+    openAddItemModal();
+  }
+
+  function buildBackupJson() {
+    return JSON.stringify(
+      {
+        version: 2,
+        exportedAt: new Date().toISOString(),
+        data,
+      },
+      null,
+      2
+    );
+  }
+
+  function openBackupModal() {
+    setBackupImportText('');
+    setBackupModalVisible(true);
+  }
+
+  function applyBackupImport() {
+    if (!backupImportText.trim()) {
+      showAlert('Missing backup', 'Paste backup JSON first.');
+      return;
+    }
+
+    let parsed;
+    try {
+      parsed = JSON.parse(backupImportText);
+    } catch {
+      showAlert('Invalid JSON', 'Backup JSON could not be parsed.');
+      return;
+    }
+
+    const payload = parsed?.data && typeof parsed.data === 'object' ? parsed.data : parsed;
+
+    if (!payload || typeof payload !== 'object' || !Array.isArray(payload.trips) || !payload.itemsByTrip || !payload.checkupsByTrip) {
+      showAlert('Invalid backup', 'Backup format is not supported.');
+      return;
+    }
+
+    showConfirm({
+      title: 'Import backup?',
+      message: 'This will replace all current local data.',
+      confirmText: 'Import',
+      tone: 'danger',
+      onConfirm: () => {
+        setData({ ...emptyData, ...payload });
+        setBackupModalVisible(false);
+        setBackupImportText('');
+        showAlert('Imported', 'Backup data was restored.');
+      },
+    });
+  }
+
+  if (!appReady) {
+    return (
+      <SafeAreaView style={[styles.safe, { paddingTop: topInset }]}>
+        <StatusBar style="light" translucent={false} />
+        <View style={styles.center}>
+          <Text style={styles.loadingEmoji}>🧳</Text>
+          <Text style={styles.loadingTitle}>Packing your list...</Text>
+          <View style={styles.loadingBarTrack}>
+            <View style={[styles.loadingBarFill, { width: `${Math.round(fakeLoadProgress * 100)}%` }]} />
+          </View>
+          <Text style={styles.muted}>{Math.round(fakeLoadProgress * 100)}%</Text>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    <SafeAreaView style={[styles.safe, { paddingTop: topInset }]}>
+      <StatusBar style="light" translucent={false} />
+
+      <KeyboardAvoidingView style={styles.flex} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+        <ScrollView
+          ref={scrollRef}
+          contentContainerStyle={styles.content}
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
+        >
+          <TripPicker trips={visibleTrips} selectedTripId={selectedTripId} onChooseTrip={setSelectedTripId} />
+
+          {tab === 'trips' && (
+            <TripsTab
+              tripForm={tripForm}
+              updateTripForm={updateTripForm}
+              templateTrip={templateTrip}
+              createTrip={createTrip}
+              trips={data.trips}
+              selectedTripId={selectedTripId}
+              setTripAsTemplate={setTripAsTemplate}
+              saveTripEdits={saveTripEdits}
+              setTripArchived={setTripArchived}
+              deleteTrip={deleteTrip}
+              onInputFocus={onInputFocus}
+              defaultTemplateTripId={data.defaultTemplateTripId}
+              openDatePicker={openDatePicker}
+              activeTripItemCount={selectedTripItems.length}
+              activeTripCheckupCount={selectedTripCheckups.length}
+              openBackupModal={openBackupModal}
+            />
+          )}
+
+          {tab === 'items' && (
+            <ItemsTab
+              selectedTrip={selectedTrip}
+              selectedTripItems={selectedTripItems}
+              openAddItemModal={openAddItemModal}
+              openEditItemModal={openEditItemModal}
+              deleteItem={deleteItem}
+              quickSetItemStatus={quickSetItemStatus}
+              bulkSetItemStatus={bulkSetItemStatus}
+            />
+          )}
+
+          {tab === 'checkup' && (
+            <CheckupTab
+              selectedTrip={selectedTrip}
+              selectedTripItems={selectedTripItems}
+              checkupStats={checkupStats}
+              startCheckupFlow={startCheckupFlow}
+            />
+          )}
+
+          {tab === 'history' && (
+            <HistoryTab
+              selectedTrip={selectedTrip}
+              selectedTripCheckups={selectedTripCheckups}
+              selectedCheckupId={selectedCheckupId}
+              setSelectedCheckupId={setSelectedCheckupId}
+              onDeleteCheckup={deleteCheckup}
+            />
+          )}
+        </ScrollView>
+      </KeyboardAvoidingView>
+
+      <BottomTab current={tab} onChange={setTab} onAddItem={openQuickAddItemFromNav} canAddItem={!!selectedTripId} />
+
+      <DatePickerModal
+        visible={datePicker.visible}
+        title={datePicker.field === 'startDate' ? 'Pick start date' : 'Pick end date'}
+        value={tripForm[datePicker.field]}
+        onClose={() => setDatePicker((prev) => ({ ...prev, visible: false }))}
+        onSelect={onSelectDate}
+      />
+
+      <ItemModal
+        visible={itemModalVisible}
+        itemForm={itemForm}
+        setItemModalVisible={setItemModalVisible}
+        updateItemForm={updateItemForm}
+        pickItemImage={(options) => pickImage((uri) => updateItemForm('imageUri', uri), options)}
+        takeItemImage={(options) => takeImage((uri) => updateItemForm('imageUri', uri), options)}
+        saveItemFromModal={saveItemFromModal}
+      />
+
+      <CheckupFlowModal
+        visible={checkupFlowVisible}
+        entry={checkupCurrentEntry}
+        stepIndex={checkupFlowIndex}
+        total={checkupSession.length}
+        mode={checkupFlowMode}
+        noForm={checkupNoForm}
+        setNoForm={setCheckupNoForm}
+        onClose={closeCheckupFlow}
+        onYes={answerCurrentCheckupYes}
+        onNo={openCurrentCheckupNo}
+        onSaveNo={saveCurrentCheckupNo}
+        onSkip={skipCurrentCheckupItem}
+        onBack={goBackInCheckup}
+        onFinish={finishCheckupFlow}
+      />
+
+      <BackupModal
+        visible={backupModalVisible}
+        onClose={() => setBackupModalVisible(false)}
+        exportJson={buildBackupJson()}
+        importJson={backupImportText}
+        setImportJson={setBackupImportText}
+        applyImport={applyBackupImport}
+      />
+
+      <AppDialogModal
+        visible={dialogState.visible}
+        title={dialogState.title}
+        message={dialogState.message}
+        buttons={dialogState.buttons}
+        onClose={closeDialog}
+      />
+    </SafeAreaView>
+  );
+}

src/components/AppDialogModal.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Modal, Pressable, Text, View } from 'react-native';
+import { styles } from '../styles';
+
+export default function AppDialogModal({ visible, title, message, buttons = [], onClose }) {
+  if (!visible) return null;
+
+  const safeButtons = buttons.length ? buttons : [{ text: 'OK' }];
+
+  return (
+    <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
+      <View style={styles.dialogBackdrop}>
+        <View style={styles.dialogCard}>
+          <Text style={styles.dialogTitle}>{title || 'Notice'}</Text>
+          {!!message ? <Text style={styles.dialogMessage}>{message}</Text> : null}
+
+          <View style={styles.dialogButtonsRow}>
+            {safeButtons.map((button, idx) => {
+              const tone = button.tone || (button.style === 'destructive' ? 'danger' : button.style === 'cancel' ? 'neutral' : 'primary');
+              return (
+                <Pressable
+                  key={`${button.text}-${idx}`}
+                  style={[
+                    styles.dialogBtn,
+                    tone === 'primary' ? styles.dialogBtnPrimary : null,
+                    tone === 'danger' ? styles.dialogBtnDanger : null,
+                    tone === 'neutral' ? styles.dialogBtnNeutral : null,
+                  ]}
+                  onPress={button.onPress}
+                >
+                  <Text style={styles.dialogBtnText}>{button.text || 'OK'}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}

src/components/BottomTab.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { styles } from '../styles';
+
+function TabBtn({ tab, current, onChange }) {
+  const active = current === tab.key;
+  return (
+    <Pressable onPress={() => onChange(tab.key)} style={styles.tabItem}>
+      <Ionicons name={active ? tab.iconActive : tab.icon} size={18} color={active ? '#dbeafe' : '#94a3b8'} />
+      <Text style={[styles.tabLabel, active && styles.tabLabelActive]}>{tab.label}</Text>
+    </Pressable>
+  );
+}
+
+export default function BottomTab({ current, onChange, onAddItem, canAddItem }) {
+  const leftTabs = [
+    { key: 'trips', label: 'Trips', icon: 'airplane-outline', iconActive: 'airplane' },
+    { key: 'items', label: 'Items', icon: 'briefcase-outline', iconActive: 'briefcase' },
+  ];
+
+  const rightTabs = [
+    { key: 'checkup', label: 'Check-Up', icon: 'checkmark-circle-outline', iconActive: 'checkmark-circle' },
+    { key: 'history', label: 'History', icon: 'time-outline', iconActive: 'time' },
+  ];
+
+  return (
+    <View style={styles.tabBarWrap}>
+      <View style={styles.tabBar}>
+        <View style={styles.tabGroupSide}>
+          {leftTabs.map((tab) => (
+            <TabBtn key={tab.key} tab={tab} current={current} onChange={onChange} />
+          ))}
+        </View>
+
+        <Pressable
+          style={[styles.tabAddBtn, !canAddItem && styles.tabAddBtnDisabled]}
+          onPress={onAddItem}
+          disabled={!canAddItem}
+        >
+          <Ionicons name="add" size={26} color="#fff" />
+        </Pressable>
+
+        <View style={styles.tabGroupSide}>
+          {rightTabs.map((tab) => (
+            <TabBtn key={tab.key} tab={tab} current={current} onChange={onChange} />
+          ))}
+        </View>
+      </View>
+    </View>
+  );
+}

src/components/ChipGroup.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { styles } from '../styles';
+
+export default function ChipGroup({ options, value, onChange }) {
+  return (
+    <View style={styles.chipGroup}>
+      {options.map((option) => {
+        const active = value === option;
+        return (
+          <Pressable key={option} style={[styles.chip, active && styles.chipActive]} onPress={() => onChange(option)}>
+            <Text style={[styles.chipText, active && styles.chipTextActive]}>{option}</Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

src/components/CountdownRow.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Text, View } from 'react-native';
-
-function pad(n) {
-  return String(n).padStart(2, '0');
-}
-
-export default function CountdownRow({ styles, cd, accent, subText, pinkMode, numStyle, sepStyle }) {
-  const outline = pinkMode
-    ? {
-        borderColor: '#ff4fa3',
-        borderWidth: 1.5,
-        borderRadius: 10,
-        paddingHorizontal: 8,
-      }
-    : {};
-
-  return (
-    <View style={styles.countdownRow}>
-      {cd.hours > 0 && (
-        <>
-          <View style={styles.timeBlock}>
-            <Text style={[numStyle, { color: accent }, outline]}>{pad(cd.hours)}</Text>
-            <Text style={[styles.countdownUnit, { color: subText }]}>HRS</Text>
-          </View>
-          <Text style={[sepStyle, { color: accent }]}>:</Text>
-        </>
-      )}
-      <View style={styles.timeBlock}>
-        <Text style={[numStyle, { color: accent }, outline]}>{pad(cd.minutes)}</Text>
-        <Text style={[styles.countdownUnit, { color: subText }]}>MIN</Text>
-      </View>
-      <Text style={[sepStyle, { color: accent }]}>:</Text>
-      <View style={styles.timeBlock}>
-        <Text style={[numStyle, { color: accent }, outline]}>{pad(cd.seconds)}</Text>
-        <Text style={[styles.countdownUnit, { color: subText }]}>SEC</Text>
-      </View>
-    </View>
-  );
-}

src/components/DatePickerModal.js

@@ -0,0 +1,93 @@
+import React, { useMemo, useState } from 'react';
+import { Modal, Pressable, Text, View } from 'react-native';
+import { styles } from '../styles';
+import { todayYMD } from '../utils/date';
+
+const WEEKDAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+
+function toYMD(date) {
+  const y = date.getFullYear();
+  const m = `${date.getMonth() + 1}`.padStart(2, '0');
+  const d = `${date.getDate()}`.padStart(2, '0');
+  return `${y}-${m}-${d}`;
+}
+
+function parseFromYMD(value) {
+  if (!value || !/^\d{4}-\d{2}-\d{2}$/.test(value)) return new Date();
+  const date = new Date(`${value}T00:00:00`);
+  return Number.isNaN(date.getTime()) ? new Date() : date;
+}
+
+function monthLabel(date) {
+  return date.toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
+}
+
+function buildMonthGrid(viewDate) {
+  const first = new Date(viewDate.getFullYear(), viewDate.getMonth(), 1);
+  const startWeekday = (first.getDay() + 6) % 7;
+  const daysInMonth = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 0).getDate();
+
+  const cells = [];
+  for (let i = 0; i < startWeekday; i += 1) cells.push(null);
+  for (let day = 1; day <= daysInMonth; day += 1) {
+    cells.push(new Date(viewDate.getFullYear(), viewDate.getMonth(), day));
+  }
+
+  while (cells.length % 7 !== 0) cells.push(null);
+  return cells;
+}
+
+export default function DatePickerModal({ visible, value, onClose, onSelect, title = 'Pick date' }) {
+  const [viewDate, setViewDate] = useState(parseFromYMD(value || todayYMD()));
+
+  const grid = useMemo(() => buildMonthGrid(viewDate), [viewDate]);
+  const selected = value || todayYMD();
+
+  const goMonth = (diff) => {
+    setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() + diff, 1));
+  };
+
+  return (
+    <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
+      <View style={styles.dateModalBackdrop}>
+        <View style={styles.dateModalCard}>
+          <View style={styles.sectionRow}>
+            <Text style={styles.sectionTitle}>{title}</Text>
+            <Pressable onPress={onClose}>
+              <Text style={styles.closeText}>Close</Text>
+            </Pressable>
+          </View>
+
+          <View style={styles.calendarHeader}>
+            <Pressable style={styles.calendarNavBtn} onPress={() => goMonth(-1)}>
+              <Text style={styles.calendarNavText}>‹</Text>
+            </Pressable>
+            <Text style={styles.calendarMonthText}>{monthLabel(viewDate)}</Text>
+            <Pressable style={styles.calendarNavBtn} onPress={() => goMonth(1)}>
+              <Text style={styles.calendarNavText}>›</Text>
+            </Pressable>
+          </View>
+
+          <View style={styles.calendarWeekRow}>
+            {WEEKDAYS.map((w) => (
+              <Text key={w} style={styles.calendarWeekday}>{w}</Text>
+            ))}
+          </View>
+
+          <View style={styles.calendarGrid}>
+            {grid.map((cell, idx) => {
+              if (!cell) return <View key={`empty-${idx}`} style={styles.calendarCell} />;
+              const ymd = toYMD(cell);
+              const isSelected = ymd === selected;
+              return (
+                <Pressable key={ymd} style={[styles.calendarCell, isSelected && styles.calendarCellActive]} onPress={() => onSelect(ymd)}>
+                  <Text style={[styles.calendarCellText, isSelected && styles.calendarCellTextActive]}>{cell.getDate()}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}

src/components/Field.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { styles } from '../styles';
+
+export default function Field({ label, children }) {
+  return (
+    <View style={styles.fieldWrap}>
+      <Text style={styles.label}>{label}</Text>
+      {children}
+    </View>
+  );
+}

src/components/ItemCard.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Image, Pressable, Text, View } from 'react-native';
+import { STATUS_COLORS } from '../constants';
+import { styles } from '../styles';
+import { formatStatusLabel } from '../utils/labels';
+
+function statusAccent(status) {
+  return STATUS_COLORS[status] || '#64748b';
+}
+
+export default function ItemCard({ item, onEdit, onDelete, onQuickPack, onQuickUnpack, onOpenImage }) {
+  const isPacked = item.status === 'packed';
+  const isUnpacked = item.status === 'unpacked';
+
+  return (
+    <View style={styles.itemCard}>
+      <View style={[styles.itemAccent, { backgroundColor: statusAccent(item.status) }]} />
+
+      <View style={styles.itemThumbWrap}>
+        {item.imageUri ? (
+          <Pressable onPress={() => onOpenImage?.(item.imageUri)}>
+            <Image source={{ uri: item.imageUri }} style={styles.itemThumbSmall} />
+          </Pressable>
+        ) : (
+          <View style={styles.itemThumbPlaceholder}>
+            <Text style={styles.itemThumbPlaceholderText}>🧳</Text>
+          </View>
+        )}
+      </View>
+
+      <View style={styles.itemMain}>
+        <View style={styles.cardRow}>
+          <View style={styles.flex}>
+            <Text style={styles.itemTitle} numberOfLines={1}>{item.name}</Text>
+            <Text style={styles.itemMeta} numberOfLines={1}>{item.category || 'uncategorized'} · {formatStatusLabel(item.status, item.lentTo)}</Text>
+            <Text style={styles.itemMeta}>Location: {item.placement}</Text>
+            {item.status === 'lent-to' && !!item.lentTo ? <Text style={styles.itemMeta} numberOfLines={1}>Borrower: {item.lentTo}</Text> : null}
+            {!!item.description ? <Text style={styles.itemMeta} numberOfLines={2}>{item.description}</Text> : null}
+          </View>
+          <View style={styles.stackButtons}>
+            <Pressable style={styles.miniBtn} onPress={() => onEdit(item)}>
+              <Text style={styles.miniBtnText}>Edit</Text>
+            </Pressable>
+            <Pressable style={styles.miniBtnDanger} onPress={() => onDelete(item.id)}>
+              <Text style={styles.miniBtnText}>Delete</Text>
+            </Pressable>
+          </View>
+        </View>
+
+        <View style={styles.quickStatusRow}>
+          <Pressable style={[styles.quickStatusBtn, isPacked && styles.quickStatusBtnActive]} onPress={onQuickPack}>
+            <Text style={[styles.quickStatusBtnText, isPacked && styles.quickStatusBtnTextActive]}>Packed</Text>
+          </Pressable>
+          <Pressable style={[styles.quickStatusBtn, isUnpacked && styles.quickStatusBtnActive]} onPress={onQuickUnpack}>
+            <Text style={[styles.quickStatusBtnText, isUnpacked && styles.quickStatusBtnTextActive]}>Unpacked</Text>
+          </Pressable>
+        </View>
+      </View>
+    </View>
+  );
+}

src/components/TopControls.js

@@ -1,70 +0,0 @@
-import React from 'react';
-import { Platform, Text, TouchableOpacity, View } from 'react-native';
-
-export default function TopControls({
-  styles,
-  accent,
-  pink,
-  darkMode,
-  pinkMode,
-  isFullscreen,
-  showBackToMenu,
-  showFocus,
-  onBackToMenu,
-  onToggleDark,
-  onTogglePink,
-  onToggleFullscreen,
-  onFocus,
-}) {
-  return (
-    <View style={styles.topRow}>
-      {showBackToMenu && (
-        <TouchableOpacity
-          style={[styles.backMenuBtn, { borderColor: accent, backgroundColor: `${accent}1f` }]}
-          onPress={onBackToMenu}
-        >
-          <Text style={[styles.toggleText, { color: accent }]}>Back To Menu</Text>
-        </TouchableOpacity>
-      )}
-
-      <View style={styles.toggleRow}>
-        <TouchableOpacity
-          style={[styles.toggleBtn, { borderColor: accent, backgroundColor: `${accent}1f` }]}
-          onPress={onToggleDark}
-        >
-          <Text style={[styles.toggleText, { color: accent }]}>{darkMode ? 'Light' : 'Dark'}</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          style={[
-            styles.toggleBtn,
-            { borderColor: pink, backgroundColor: pinkMode ? `${pink}33` : 'transparent' },
-          ]}
-          onPress={onTogglePink}
-        >
-          <Text style={[styles.toggleText, { color: pink }]}>Pink</Text>
-        </TouchableOpacity>
-
-        {Platform.OS === 'web' && (
-          <TouchableOpacity
-            style={[styles.toggleBtn, { borderColor: accent, backgroundColor: `${accent}14` }]}
-            onPress={onToggleFullscreen}
-          >
-            <Text style={[styles.toggleText, { color: accent }]}>
-              {isFullscreen ? 'Exit Full' : 'Fullscreen'}
-            </Text>
-          </TouchableOpacity>
-        )}
-
-        {showFocus && (
-          <TouchableOpacity
-            style={[styles.toggleBtn, { borderColor: accent, backgroundColor: `${accent}1f` }]}
-            onPress={onFocus}
-          >
-            <Text style={[styles.toggleText, { color: accent }]}>Focus</Text>
-          </TouchableOpacity>
-        )}
-      </View>
-    </View>
-  );
-}

src/components/TripPicker.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Pressable, ScrollView, Text, View } from 'react-native';
+import { styles } from '../styles';
+
+export default function TripPicker({ trips, selectedTripId, onChooseTrip }) {
+  return (
+    <View style={styles.tripPickerWrap}>
+      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.tripChipScroll}>
+        {trips.length ? (
+          trips
+            .slice()
+            .sort((a, b) => b.startDate.localeCompare(a.startDate))
+            .map((trip) => {
+              const active = selectedTripId === trip.id;
+              return (
+                <Pressable key={trip.id} style={[styles.tripChip, active && styles.tripChipActive]} onPress={() => onChooseTrip(trip.id)}>
+                  <Text style={[styles.tripChipText, active && styles.tripChipTextActive]}>{trip.name}</Text>
+                  <Text style={[styles.tripChipSub, active && styles.tripChipSubActive]}>{trip.startDate}</Text>
+                </Pressable>
+              );
+            })
+        ) : (
+          <Text style={styles.muted}>Create your first trip to start.</Text>
+        )}
+      </ScrollView>
+    </View>
+  );
+}

src/constants.js

@@ -0,0 +1,20 @@
+export const STORAGE_KEY = 'luggage-list:v2';
+export const TAB_BAR_HEIGHT = 72;
+
+export const ITEM_STATUSES = ['packed', 'unpacked', 'lost', 'left-behind', 'lent-to'];
+export const ITEM_PLACEMENTS = ['suitcase', 'backpack', 'with-user', 'other'];
+
+export const STATUS_COLORS = {
+  packed: '#22c55e',
+  unpacked: '#64748b',
+  lost: '#ef4444',
+  'left-behind': '#f59e0b',
+  'lent-to': '#8b5cf6',
+};
+
+export const emptyData = {
+  trips: [],
+  itemsByTrip: {},
+  checkupsByTrip: {},
+  defaultTemplateTripId: null,
+};

src/modals/BackupModal.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import { styles } from '../styles';
+
+export default function BackupModal({
+  visible,
+  onClose,
+  exportJson,
+  importJson,
+  setImportJson,
+  applyImport,
+}) {
+  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}>Backup & Restore</Text>
+              <Pressable onPress={onClose}>
+                <Text style={styles.closeText}>Close</Text>
+              </Pressable>
+            </View>
+
+            <ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={{ paddingBottom: 12 }} showsVerticalScrollIndicator={false}>
+              <Text style={styles.cardTitle}>Export JSON</Text>
+              <Text style={styles.cardMeta}>Copy this JSON and store it safely.</Text>
+              <TextInput
+                style={styles.inputMultiline}
+                multiline
+                value={exportJson}
+                editable={false}
+                selectTextOnFocus
+              />
+              <Text style={styles.cardTitle}>Import JSON</Text>
+              <Text style={styles.cardMeta}>Paste a previous backup. This will replace current data.</Text>
+              <TextInput
+                style={styles.inputMultiline}
+                multiline
+                value={importJson}
+                onChangeText={setImportJson}
+                placeholder="Paste backup JSON here"
+                placeholderTextColor="#6b7280"
+              />
+              <Pressable style={styles.primaryBtn} onPress={applyImport}>
+                <Text style={styles.primaryBtnText}>Import & Replace</Text>
+              </Pressable>
+            </ScrollView>
+          </View>
+        </KeyboardAvoidingView>
+      </View>
+    </Modal>
+  );
+}

src/modals/CheckupFixModal.js

@@ -0,0 +1,79 @@
+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 CheckupFixModal({
+  visible,
+  checkupFixForm,
+  setCheckupFixForm,
+  setCheckupFixModalVisible,
+  saveFixModal,
+}) {
+  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}>Update for this Check-Up</Text>
+              <Pressable onPress={() => setCheckupFixModalVisible(false)}>
+                <Text style={styles.closeText}>Close</Text>
+              </Pressable>
+            </View>
+
+            <ScrollView
+              keyboardShouldPersistTaps="handled"
+              keyboardDismissMode="interactive"
+              contentContainerStyle={{ paddingBottom: 12 }}
+              showsVerticalScrollIndicator={false}
+            >
+              <Field label="Status">
+                <ChipGroup
+                  options={ITEM_STATUSES}
+                  value={checkupFixForm.status}
+                  onChange={(v) => setCheckupFixForm((prev) => ({ ...prev, status: v }))}
+                />
+              </Field>
+
+              <Field label="Placement">
+                <ChipGroup
+                  options={ITEM_PLACEMENTS}
+                  value={checkupFixForm.placement}
+                  onChange={(v) => setCheckupFixForm((prev) => ({ ...prev, placement: v }))}
+                />
+              </Field>
+
+              {checkupFixForm.status === 'lent-to' ? (
+                <Field label="Lent to">
+                  <TextInput
+                    style={styles.input}
+                    value={checkupFixForm.lentTo}
+                    onChangeText={(v) => setCheckupFixForm((prev) => ({ ...prev, lentTo: v }))}
+                    placeholder="Person name"
+                    placeholderTextColor="#6b7280"
+                  />
+                </Field>
+              ) : null}
+
+              <Pressable
+                style={styles.inlineToggle}
+                onPress={() => setCheckupFixForm((prev) => ({ ...prev, updateMasterList: !prev.updateMasterList }))}
+              >
+                <Text style={styles.inlineToggleText}>
+                  {checkupFixForm.updateMasterList ? '☑' : '☐'} Also update item in trip list
+                </Text>
+              </Pressable>
+
+              <Pressable style={styles.primaryBtn} onPress={saveFixModal}>
+                <Text style={styles.primaryBtnText}>Save</Text>
+              </Pressable>
+            </ScrollView>
+          </View>
+        </KeyboardAvoidingView>
+      </View>
+    </Modal>
+  );
+}

src/modals/CheckupFlowModal.js

@@ -0,0 +1,144 @@
+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';
+import { formatStatusLabel } from '../utils/labels';
+
+export default function CheckupFlowModal({
+  visible,
+  entry,
+  stepIndex,
+  total,
+  mode,
+  noForm,
+  setNoForm,
+  onClose,
+  onYes,
+  onNo,
+  onSaveNo,
+  onSkip,
+  onBack,
+  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>
+                <View style={styles.actionRow}>
+                  <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={onBack}>
+                    <Text style={styles.secondaryBtnText}>Back</Text>
+                  </Pressable>
+                  <Pressable style={[styles.primaryBtnTight, styles.flex]} onPress={onFinish}>
+                    <Text style={styles.primaryBtnText}>Save Snapshot</Text>
+                  </Pressable>
+                </View>
+              </View>
+            ) : (
+              <ScrollView
+                keyboardShouldPersistTaps="handled"
+                keyboardDismissMode="interactive"
+                contentContainerStyle={{ paddingBottom: 12 }}
+                showsVerticalScrollIndicator={false}
+              >
+                <Text style={styles.tripHistoryLabel}>
+                  Item {stepIndex + 1} / {total}
+                </Text>
+                <View style={styles.checkupProgressTrack}>
+                  <View style={[styles.checkupProgressFill, { width: `${Math.round(((stepIndex + 1) / total) * 100)}%` }]} />
+                </View>
+                <Text style={styles.cardTitle}>{entry.name}</Text>
+                <Text style={styles.cardMeta}>{entry.category || 'uncategorized'}</Text>
+                <Text style={styles.cardMeta}>
+                  Current: {formatStatusLabel(entry.current.status, entry.current.lentTo)} · {entry.current.placement}
+                </Text>
+
+                {mode === 'question' ? (
+                  <View style={styles.answerRowWide}>
+                    <View style={styles.actionRow}>
+                      <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={onBack}>
+                        <Text style={styles.secondaryBtnText}>Back</Text>
+                      </Pressable>
+                      <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={onSkip}>
+                        <Text style={styles.secondaryBtnText}>Skip</Text>
+                      </Pressable>
+                    </View>
+                    <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>
+
+                    <View style={styles.actionRow}>
+                      <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={onBack}>
+                        <Text style={styles.secondaryBtnText}>Back</Text>
+                      </Pressable>
+                      <Pressable style={[styles.primaryBtnTight, styles.flex]} onPress={onSaveNo}>
+                        <Text style={styles.primaryBtnText}>Save + Next</Text>
+                      </Pressable>
+                    </View>
+                  </View>
+                )}
+              </ScrollView>
+            )}
+          </View>
+        </KeyboardAvoidingView>
+      </View>
+    </Modal>
+  );
+}

src/modals/ItemModal.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import { Image, 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';
+
+function qualityValue(level) {
+  if (level === 'high') return 0.95;
+  if (level === 'low') return 0.45;
+  return 0.75;
+}
+
+export default function ItemModal({
+  visible,
+  itemForm,
+  setItemModalVisible,
+  updateItemForm,
+  pickItemImage,
+  takeItemImage,
+  saveItemFromModal,
+}) {
+  const mediaOptions = {
+    quality: qualityValue(itemForm.imageQuality),
+    allowCrop: !!itemForm.imageAllowCrop,
+  };
+
+  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}>{itemForm.id ? 'Update Item' : 'Add Item'}</Text>
+              <Pressable onPress={() => setItemModalVisible(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={itemForm.name}
+                  onChangeText={(v) => updateItemForm('name', v)}
+                  placeholder="Toothbrush"
+                  placeholderTextColor="#6b7280"
+                />
+              </Field>
+
+              <Field label="Description">
+                <TextInput
+                  style={styles.input}
+                  value={itemForm.description}
+                  onChangeText={(v) => updateItemForm('description', v)}
+                  placeholder="Optional"
+                  placeholderTextColor="#6b7280"
+                />
+              </Field>
+
+              <Field label="Category">
+                <TextInput
+                  style={styles.input}
+                  value={itemForm.category}
+                  onChangeText={(v) => updateItemForm('category', v)}
+                  placeholder="toiletries"
+                  placeholderTextColor="#6b7280"
+                />
+              </Field>
+
+              <Field label="Status">
+                <ChipGroup options={ITEM_STATUSES} value={itemForm.status} onChange={(v) => updateItemForm('status', v)} />
+              </Field>
+
+              <Field label="Placement">
+                <ChipGroup options={ITEM_PLACEMENTS} value={itemForm.placement} onChange={(v) => updateItemForm('placement', v)} />
+              </Field>
+
+              {itemForm.status === 'lent-to' ? (
+                <Field label="Lent to">
+                  <TextInput
+                    style={styles.input}
+                    value={itemForm.lentTo}
+                    onChangeText={(v) => updateItemForm('lentTo', v)}
+                    placeholder="Person name"
+                    placeholderTextColor="#6b7280"
+                  />
+                </Field>
+              ) : null}
+
+              <Field label="Image optimization">
+                <View style={styles.chipGroup}>
+                  {['low', 'balanced', 'high'].map((level) => {
+                    const active = itemForm.imageQuality === level;
+                    return (
+                      <Pressable key={level} style={[styles.chip, active && styles.chipActive]} onPress={() => updateItemForm('imageQuality', level)}>
+                        <Text style={[styles.chipText, active && styles.chipTextActive]}>{level}</Text>
+                      </Pressable>
+                    );
+                  })}
+                </View>
+              </Field>
+
+              <Pressable style={styles.inlineToggle} onPress={() => updateItemForm('imageAllowCrop', !itemForm.imageAllowCrop)}>
+                <Text style={styles.inlineToggleText}>{itemForm.imageAllowCrop ? '☑' : '☐'} Enable optional crop before save</Text>
+              </Pressable>
+
+              <View style={styles.actionRow}>
+                <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={() => takeItemImage(mediaOptions)}>
+                  <Text style={styles.secondaryBtnText}>Take photo</Text>
+                </Pressable>
+                <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={() => pickItemImage(mediaOptions)}>
+                  <Text style={styles.secondaryBtnText}>{itemForm.imageUri ? 'From gallery (change)' : 'From gallery'}</Text>
+                </Pressable>
+              </View>
+              {!!itemForm.imageUri && <Image source={{ uri: itemForm.imageUri }} style={styles.previewImageSmall} />}
+
+              <Pressable style={styles.primaryBtn} onPress={saveItemFromModal}>
+                <Text style={styles.primaryBtnText}>{itemForm.id ? 'Save Changes' : 'Add Item'}</Text>
+              </Pressable>
+            </ScrollView>
+          </View>
+        </KeyboardAvoidingView>
+      </View>
+    </Modal>
+  );
+}

src/screens/FocusScreen.js

@@ -1,86 +0,0 @@
-import React from 'react';
-import { StatusBar, Text, TouchableOpacity, View } from 'react-native';
-import CountdownRow from '../components/CountdownRow';
-
-export default function FocusScreen({
-  styles,
-  theme,
-  screen,
-  pinkMode,
-  tuIsOver,
-  tuCountdown,
-  targetTime,
-  timerDone,
-  timerHr,
-  timerMin,
-  timerSec,
-  onShowUI,
-}) {
-  const pinkOutlineText = pinkMode
-    ? {
-        borderColor: theme.pink,
-        borderWidth: 2,
-        borderRadius: 12,
-        paddingHorizontal: 20,
-        paddingVertical: 8,
-      }
-    : {};
-
-  let focusContent = null;
-
-  if (screen === 'timeuntil') {
-    focusContent = tuIsOver ? (
-      <Text style={[styles.overText, styles.focusOverText, { color: pinkMode ? theme.pink : theme.danger }, pinkOutlineText]}>
-        Time's Up!
-      </Text>
-    ) : tuCountdown ? (
-      <View style={styles.focusCountdown}>
-        <Text style={[styles.focusLabel, { color: theme.subText }]}>
-          until {targetTime?.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-        </Text>
-        <CountdownRow
-          styles={styles}
-          cd={tuCountdown}
-          accent={theme.accent}
-          subText={theme.subText}
-          pinkMode={pinkMode}
-          numStyle={styles.focusNum}
-          sepStyle={styles.focusSep}
-        />
-      </View>
-    ) : (
-      <Text style={[styles.placeholder, { color: theme.subText }]}>No timer set</Text>
-    );
-  }
-
-  if (screen === 'timer') {
-    focusContent = timerDone ? (
-      <Text style={[styles.overText, styles.focusOverText, { color: pinkMode ? theme.pink : theme.danger }, pinkOutlineText]}>
-        Done!
-      </Text>
-    ) : (
-      <View style={styles.focusCountdown}>
-        <Text style={[styles.focusLabel, { color: theme.subText }]}>TIMER</Text>
-        <CountdownRow
-          styles={styles}
-          cd={{ hours: timerHr, minutes: timerMin, seconds: timerSec }}
-          accent={theme.accent}
-          subText={theme.subText}
-          pinkMode={pinkMode}
-          numStyle={styles.focusNum}
-          sepStyle={styles.focusSep}
-        />
-      </View>
-    );
-  }
-
-  return (
-    <View style={[styles.root, styles.focusRoot, { backgroundColor: theme.bg }]}>
-      <StatusBar hidden />
-      {focusContent}
-      <TouchableOpacity style={[styles.focusExitBtn, { borderColor: theme.accent }]} onPress={onShowUI}>
-        <Text style={[styles.focusExitText, { color: theme.accent }]}>Show UI</Text>
-      </TouchableOpacity>
-    </View>
-  );
-}

src/screens/HomeScreen.js

@@ -1,91 +0,0 @@
-import React from 'react';
-import { ScrollView, Text, TouchableOpacity, View, Image } from 'react-native';
-import TopControls from '../components/TopControls';
-
-export default function HomeScreen({
-  styles,
-  theme,
-  now,
-  pinkMode,
-  darkMode,
-  isFullscreen,
-  onToggleDark,
-  onTogglePink,
-  onToggleFullscreen,
-  onSelectTimeUntil,
-  onSelectTimer,
-}) {
-  return (
-    <View style={[styles.root, { backgroundColor: theme.bg }]}>
-      <ScrollView contentContainerStyle={styles.scroll} keyboardShouldPersistTaps="handled">
-        <Image
-          source={require('../../assets/icon.png')}
-          style={[styles.logo, pinkMode && { borderColor: theme.accent, borderWidth: 2 }]}
-        />
-        <Text
-          style={[
-            styles.title,
-            { color: theme.accent },
-            pinkMode && {
-              borderColor: theme.accent,
-              borderWidth: 2,
-              borderRadius: 10,
-              paddingHorizontal: 16,
-              paddingVertical: 4,
-            },
-          ]}
-        >
-          Time Until
-        </Text>
-
-        <TopControls
-          styles={styles}
-          accent={theme.accent}
-          pink={theme.pink}
-          darkMode={darkMode}
-          pinkMode={pinkMode}
-          isFullscreen={isFullscreen}
-          showBackToMenu={false}
-          showFocus={false}
-          onBackToMenu={() => {}}
-          onToggleDark={onToggleDark}
-          onTogglePink={onTogglePink}
-          onToggleFullscreen={onToggleFullscreen}
-          onFocus={() => {}}
-        />
-
-        <Text style={[styles.modeSelectLabel, { color: theme.subText }]}>SELECT MODE</Text>
-
-        <TouchableOpacity
-          style={[styles.modeCard, { backgroundColor: theme.cardBg, borderColor: theme.accent }]}
-          onPress={onSelectTimeUntil}
-          activeOpacity={0.75}
-        >
-          <Text style={[styles.modeTitle, { color: theme.accent }]}>Mode 1: Time Until</Text>
-          <Text style={[styles.modeDesc, { color: theme.subText }]}>
-            Set a target clock time and count down to it
-          </Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          style={[styles.modeCard, { backgroundColor: theme.cardBg, borderColor: theme.border }]}
-          onPress={onSelectTimer}
-          activeOpacity={0.75}
-        >
-          <Text style={[styles.modeTitle, { color: theme.accent }]}>Mode 2: Timer</Text>
-          <Text style={[styles.modeDesc, { color: theme.subText }]}>
-            Set duration in hours, minutes, and seconds
-          </Text>
-        </TouchableOpacity>
-
-        <Text style={[styles.clock, { color: theme.subText, marginTop: 32 }]}>
-          {now.toLocaleTimeString([], {
-            hour: '2-digit',
-            minute: '2-digit',
-            second: '2-digit',
-          })}
-        </Text>
-      </ScrollView>
-    </View>
-  );
-}

src/screens/TimeUntilScreen.js

@@ -1,173 +0,0 @@
-import React from 'react';
-import { ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
-import CountdownRow from '../components/CountdownRow';
-import TopControls from '../components/TopControls';
-
-export default function TimeUntilScreen({
-  styles,
-  theme,
-  now,
-  darkMode,
-  pinkMode,
-  isFullscreen,
-  targetTime,
-  tuHour,
-  tuMinute,
-  tuIsOver,
-  tuCountdown,
-  onChangeHour,
-  onChangeMinute,
-  onSetTimer,
-  onResetTimer,
-  onBackToMenu,
-  onToggleDark,
-  onTogglePink,
-  onToggleFullscreen,
-  onFocus,
-}) {
-  const isCountingDown = Boolean(tuCountdown) && !tuIsOver;
-
-  const pinkOutlineText = pinkMode
-    ? {
-        borderColor: theme.pink,
-        borderWidth: 2,
-        borderRadius: 12,
-        paddingHorizontal: 20,
-        paddingVertical: 8,
-      }
-    : {};
-
-  return (
-    <View style={[styles.root, { backgroundColor: theme.bg }]}>
-      <ScrollView contentContainerStyle={styles.scroll} keyboardShouldPersistTaps="handled">
-        <Text
-          style={[
-            styles.title,
-            { color: theme.accent },
-            pinkMode && {
-              borderColor: theme.accent,
-              borderWidth: 2,
-              borderRadius: 10,
-              paddingHorizontal: 16,
-              paddingVertical: 4,
-            },
-          ]}
-        >
-          Time Until
-        </Text>
-
-        <TopControls
-          styles={styles}
-          accent={theme.accent}
-          pink={theme.pink}
-          darkMode={darkMode}
-          pinkMode={pinkMode}
-          isFullscreen={isFullscreen}
-          showBackToMenu
-          showFocus={targetTime !== null || tuIsOver}
-          onBackToMenu={onBackToMenu}
-          onToggleDark={onToggleDark}
-          onTogglePink={onTogglePink}
-          onToggleFullscreen={onToggleFullscreen}
-          onFocus={onFocus}
-        />
-
-        <View style={[styles.card, { backgroundColor: theme.cardBg, borderColor: theme.border }]}>
-          {!isCountingDown && (
-            <>
-              <Text style={[styles.inputLabel, { color: theme.subText }]}>Set target time (24h)</Text>
-              <View style={styles.inputRow}>
-                <TextInput
-                  style={[
-                    styles.timeInput,
-                    { color: theme.text, borderColor: theme.accent, backgroundColor: theme.inputBg },
-                  ]}
-                  placeholder="HH"
-                  placeholderTextColor={darkMode ? '#5a6886' : '#98a1ba'}
-                  value={tuHour}
-                  onChangeText={onChangeHour}
-                  keyboardType="numeric"
-                  maxLength={2}
-                />
-                <Text style={[styles.colon, { color: theme.accent }]}>:</Text>
-                <TextInput
-                  style={[
-                    styles.timeInput,
-                    { color: theme.text, borderColor: theme.accent, backgroundColor: theme.inputBg },
-                  ]}
-                  placeholder="MM"
-                  placeholderTextColor={darkMode ? '#5a6886' : '#98a1ba'}
-                  value={tuMinute}
-                  onChangeText={onChangeMinute}
-                  keyboardType="numeric"
-                  maxLength={2}
-                />
-              </View>
-
-              <View style={styles.btnRow}>
-                <TouchableOpacity style={[styles.setBtn, { backgroundColor: theme.accent }]} onPress={onSetTimer}>
-                  <Text style={styles.setBtnText}>Set Timer</Text>
-                </TouchableOpacity>
-                {targetTime && (
-                  <TouchableOpacity
-                    style={[styles.resetBtn, { borderColor: theme.accent }]}
-                    onPress={onResetTimer}
-                  >
-                    <Text style={[styles.resetBtnText, { color: theme.accent }]}>Reset</Text>
-                  </TouchableOpacity>
-                )}
-              </View>
-            </>
-          )}
-
-          {isCountingDown && targetTime && (
-            <View style={styles.btnRow}>
-              <TouchableOpacity
-                style={[styles.resetBtn, { borderColor: theme.accent }]}
-                onPress={onResetTimer}
-              >
-                <Text style={[styles.resetBtnText, { color: theme.accent }]}>Reset</Text>
-              </TouchableOpacity>
-            </View>
-          )}
-
-          {tuIsOver ? (
-            <View style={styles.overContainer}>
-              <Text style={[styles.overText, { color: pinkMode ? theme.pink : theme.danger }, pinkOutlineText]}>
-                Time's Up!
-              </Text>
-              <Text style={[styles.overSub, { color: theme.subText }]}>
-                {targetTime?.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} has been reached
-              </Text>
-            </View>
-          ) : tuCountdown ? (
-            <View style={styles.countdownContainer}>
-              <Text style={[styles.countdownLabel, { color: theme.subText }]}> 
-                until {targetTime?.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-              </Text>
-              <CountdownRow
-                styles={styles}
-                cd={tuCountdown}
-                accent={theme.accent}
-                subText={theme.subText}
-                pinkMode={pinkMode}
-                numStyle={styles.countdownNum}
-                sepStyle={styles.sep}
-              />
-            </View>
-          ) : (
-            <Text style={[styles.placeholder, { color: theme.subText }]}>Enter a time above to start counting down</Text>
-          )}
-        </View>
-
-        <Text style={[styles.clock, { color: theme.subText }]}>
-          {now.toLocaleTimeString([], {
-            hour: '2-digit',
-            minute: '2-digit',
-            second: '2-digit',
-          })}
-        </Text>
-      </ScrollView>
-    </View>
-  );
-}

src/screens/TimerScreen.js

@@ -1,195 +0,0 @@
-import React from 'react';
-import { ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
-import CountdownRow from '../components/CountdownRow';
-import TopControls from '../components/TopControls';
-
-export default function TimerScreen({
-  styles,
-  theme,
-  now,
-  darkMode,
-  pinkMode,
-  isFullscreen,
-  timerRunning,
-  timerDone,
-  timerRemaining,
-  timerHInput,
-  timerMInput,
-  timerSInput,
-  timerHr,
-  timerMin,
-  timerSec,
-  onChangeH,
-  onChangeM,
-  onChangeS,
-  onStart,
-  onPause,
-  onResume,
-  onReset,
-  onBackToMenu,
-  onToggleDark,
-  onTogglePink,
-  onToggleFullscreen,
-  onFocus,
-}) {
-  const timerActive = timerRunning || timerRemaining > 0 || timerDone;
-  const isCountingDown = timerRemaining > 0;
-  const pinkOutlineText = pinkMode
-    ? {
-        borderColor: theme.pink,
-        borderWidth: 2,
-        borderRadius: 12,
-        paddingHorizontal: 20,
-        paddingVertical: 8,
-      }
-    : {};
-
-  return (
-    <View style={[styles.root, { backgroundColor: theme.bg }]}>
-      <ScrollView contentContainerStyle={styles.scroll} keyboardShouldPersistTaps="handled">
-        <Text
-          style={[
-            styles.title,
-            { color: theme.accent },
-            pinkMode && {
-              borderColor: theme.accent,
-              borderWidth: 2,
-              borderRadius: 10,
-              paddingHorizontal: 16,
-              paddingVertical: 4,
-            },
-          ]}
-        >
-          Timer
-        </Text>
-
-        <TopControls
-          styles={styles}
-          accent={theme.accent}
-          pink={theme.pink}
-          darkMode={darkMode}
-          pinkMode={pinkMode}
-          isFullscreen={isFullscreen}
-          showBackToMenu
-          showFocus={timerActive}
-          onBackToMenu={onBackToMenu}
-          onToggleDark={onToggleDark}
-          onTogglePink={onTogglePink}
-          onToggleFullscreen={onToggleFullscreen}
-          onFocus={onFocus}
-        />
-
-        <View style={[styles.card, { backgroundColor: theme.cardBg, borderColor: theme.border }]}> 
-          {!isCountingDown && !timerDone ? (
-            <>
-              <Text style={[styles.inputLabel, { color: theme.subText }]}>Set duration</Text>
-              <View style={styles.inputRow}>
-                <View style={styles.timerInputGroup}>
-                  <TextInput
-                    style={[
-                      styles.timeInput,
-                      { color: theme.text, borderColor: theme.accent, backgroundColor: theme.inputBg },
-                    ]}
-                    placeholder="00"
-                    placeholderTextColor={darkMode ? '#5a6886' : '#98a1ba'}
-                    value={timerHInput}
-                    onChangeText={onChangeH}
-                    keyboardType="numeric"
-                    maxLength={2}
-                  />
-                  <Text style={[styles.inputUnit, { color: theme.subText }]}>HRS</Text>
-                </View>
-                <Text style={[styles.colon, { color: theme.accent }]}>:</Text>
-                <View style={styles.timerInputGroup}>
-                  <TextInput
-                    style={[
-                      styles.timeInput,
-                      { color: theme.text, borderColor: theme.accent, backgroundColor: theme.inputBg },
-                    ]}
-                    placeholder="00"
-                    placeholderTextColor={darkMode ? '#5a6886' : '#98a1ba'}
-                    value={timerMInput}
-                    onChangeText={onChangeM}
-                    keyboardType="numeric"
-                    maxLength={2}
-                  />
-                  <Text style={[styles.inputUnit, { color: theme.subText }]}>MIN</Text>
-                </View>
-                <Text style={[styles.colon, { color: theme.accent }]}>:</Text>
-                <View style={styles.timerInputGroup}>
-                  <TextInput
-                    style={[
-                      styles.timeInput,
-                      { color: theme.text, borderColor: theme.accent, backgroundColor: theme.inputBg },
-                    ]}
-                    placeholder="00"
-                    placeholderTextColor={darkMode ? '#5a6886' : '#98a1ba'}
-                    value={timerSInput}
-                    onChangeText={onChangeS}
-                    keyboardType="numeric"
-                    maxLength={2}
-                  />
-                  <Text style={[styles.inputUnit, { color: theme.subText }]}>SEC</Text>
-                </View>
-              </View>
-
-              <TouchableOpacity style={[styles.setBtn, { backgroundColor: theme.accent }]} onPress={onStart}>
-                <Text style={styles.setBtnText}>Start</Text>
-              </TouchableOpacity>
-            </>
-          ) : timerDone ? (
-            <View style={styles.overContainer}>
-              <Text style={[styles.overText, { color: pinkMode ? theme.pink : theme.danger }, pinkOutlineText]}>
-                Done!
-              </Text>
-              <TouchableOpacity
-                style={[styles.setBtn, { backgroundColor: theme.accent, marginTop: 20 }]}
-                onPress={onReset}
-              >
-                <Text style={styles.setBtnText}>New Timer</Text>
-              </TouchableOpacity>
-            </View>
-          ) : (
-            <View style={styles.countdownContainer}>
-              <View>
-                <CountdownRow
-                  styles={styles}
-                  cd={{ hours: timerHr, minutes: timerMin, seconds: timerSec }}
-                  accent={theme.accent}
-                  subText={theme.subText}
-                  pinkMode={pinkMode}
-                  numStyle={styles.countdownNum}
-                  sepStyle={styles.sep}
-                />
-              </View>
-
-              <View style={styles.btnRow}>
-                {timerRunning ? (
-                  <TouchableOpacity style={[styles.resetBtn, { borderColor: theme.accent }]} onPress={onPause}>
-                    <Text style={[styles.resetBtnText, { color: theme.accent }]}>Pause</Text>
-                  </TouchableOpacity>
-                ) : (
-                  <TouchableOpacity style={[styles.setBtn, { backgroundColor: theme.accent }]} onPress={onResume}>
-                    <Text style={styles.setBtnText}>Resume</Text>
-                  </TouchableOpacity>
-                )}
-
-                <TouchableOpacity style={[styles.resetBtn, { borderColor: theme.danger }]} onPress={onReset}>
-                  <Text style={[styles.resetBtnText, { color: theme.danger }]}>Reset</Text>
-                </TouchableOpacity>
-              </View>
-            </View>
-          )}
-        </View>
-
-        <Text style={[styles.clock, { color: theme.subText }]}>
-          {now.toLocaleTimeString([], {
-            hour: '2-digit',
-            minute: '2-digit',
-            second: '2-digit',
-          })}
-        </Text>
-      </ScrollView>
-    </View>
-  );
-}

src/styles.js

@@ -1,167 +1,755 @@
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
+import { TAB_BAR_HEIGHT } from './constants';
 
-export function createStyles() {
+export const styles = StyleSheet.create({
-  return StyleSheet.create({
+  safe: {
-    root: { flex: 1 },
+    flex: 1,
-    scroll: {
+    backgroundColor: '#090d12',
-      flexGrow: 1,
+  },
-      alignItems: 'center',
+  flex: {
-      justifyContent: 'center',
+    flex: 1,
-      padding: 24,
+  },
-      paddingVertical: 48,
+  content: {
-    },
+    paddingHorizontal: 14,
-    title: {
+    paddingTop: 10,
-      fontSize: 44,
+    paddingBottom: TAB_BAR_HEIGHT + 20,
-      fontWeight: '900',
+    gap: 10,
-      marginBottom: 20,
+  },
-      letterSpacing: 1,
+  statusSpacer: {
-    },
+    height: Platform.OS === 'android' ? 8 : 0,
-    logo: {
+  },
-      width: 100,
+  center: {
-      height: 100,
+    flex: 1,
-      marginBottom: 20,
+    alignItems: 'center',
-      borderRadius: 22,
+    justifyContent: 'center',
-    },
+  },
-    topRow: {
+  muted: {
-      width: '100%',
+    color: '#8793a5',
-      maxWidth: 640,
+  },
-      alignItems: 'center',
+  loadingEmoji: {
-      gap: 10,
+    fontSize: 52,
-      marginBottom: 20,
+    marginBottom: 8,
-    },
+  },
-    backMenuBtn: {
+  loadingTitle: {
-      paddingHorizontal: 18,
+    color: '#f8fafc',
-      paddingVertical: 10,
+    fontWeight: '700',
-      borderRadius: 14,
+    fontSize: 17,
-      borderWidth: 1.5,
+    marginBottom: 10,
-    },
+  },
-    toggleRow: {
+  loadingBarTrack: {
-      flexDirection: 'row',
+    width: 220,
-      flexWrap: 'wrap',
+    height: 10,
-      gap: 10,
+    borderRadius: 999,
-      justifyContent: 'center',
+    backgroundColor: '#1e293b',
-    },
+    overflow: 'hidden',
-    toggleBtn: {
+    marginBottom: 8,
-      paddingHorizontal: 16,
+  },
-      paddingVertical: 8,
+  loadingBarFill: {
-      borderRadius: 20,
+    height: '100%',
-      borderWidth: 1.5,
+    backgroundColor: '#2563eb',
-    },
+  },
-    toggleText: { fontSize: 14, fontWeight: '600' },
+
-    modeSelectLabel: {
+  tripPickerWrap: {
-      fontSize: 12,
+    marginBottom: 6,
-      letterSpacing: 2,
+  },
-      textTransform: 'uppercase',
+  tripChipScroll: {
-      marginBottom: 20,
+    gap: 8,
-    },
+    paddingRight: 12,
-    modeCard: {
+  },
-      width: '100%',
+  tripChip: {
-      maxWidth: 440,
+    paddingHorizontal: 12,
-      borderRadius: 22,
+    paddingVertical: 9,
-      padding: 28,
+    borderRadius: 12,
-      borderWidth: 2,
+    backgroundColor: '#121923',
-      alignItems: 'center',
+    borderWidth: 1,
-      marginBottom: 16,
+    borderColor: '#1f2937',
-      shadowColor: '#000',
+    minWidth: 120,
-      shadowOffset: { width: 0, height: 6 },
+  },
-      shadowOpacity: 0.18,
+  tripChipActive: {
-      shadowRadius: 14,
+    backgroundColor: '#1d2a3a',
-      elevation: 7,
+    borderColor: '#60a5fa',
-    },
+  },
-    modeTitle: {
+  tripChipText: {
-      fontSize: 26,
+    color: '#e2e8f0',
-      fontWeight: '800',
+    fontWeight: '700',
-      marginBottom: 8,
+  },
-      letterSpacing: 0.5,
+  tripChipTextActive: {
-    },
+    color: '#bfdbfe',
-    modeDesc: {
+  },
-      fontSize: 14,
+  tripChipSub: {
-      textAlign: 'center',
+    color: '#64748b',
-      lineHeight: 22,
+    fontSize: 12,
-    },
+    marginTop: 2,
-    card: {
+  },
-      width: '100%',
+  tripChipSubActive: {
-      maxWidth: 440,
+    color: '#93c5fd',
-      borderRadius: 22,
+  },
-      padding: 28,
+
-      borderWidth: 1.5,
+  section: {
-      alignItems: 'center',
+    gap: 10,
-      shadowColor: '#000',
+  },
-      shadowOffset: { width: 0, height: 6 },
+  sectionTitle: {
-      shadowOpacity: 0.2,
+    color: '#f1f5f9',
-      shadowRadius: 16,
+    fontSize: 18,
-      elevation: 8,
+    fontWeight: '700',
-    },
+  },
-    inputLabel: {
+  sectionRow: {
-      fontSize: 12,
+    flexDirection: 'row',
-      letterSpacing: 1,
+    justifyContent: 'space-between',
-      textTransform: 'uppercase',
+    alignItems: 'center',
-      marginBottom: 10,
+    gap: 10,
-    },
+  },
-    inputRow: {
+
-      flexDirection: 'row',
+  card: {
-      alignItems: 'center',
+    backgroundColor: '#111827',
-      gap: 10,
+    borderRadius: 16,
-      marginBottom: 16,
+    borderWidth: 1,
-    },
+    borderColor: '#1f2937',
-    timerInputGroup: { alignItems: 'center', gap: 4 },
+    padding: 10,
-    inputUnit: { fontSize: 11, fontWeight: '600', letterSpacing: 1.5 },
+    gap: 6,
-    timeInput: {
+  },
-      width: 72,
+  cardActive: {
-      height: 58,
+    borderColor: '#60a5fa',
-      borderRadius: 12,
+  },
-      borderWidth: 2,
+  cardArchived: {
-      textAlign: 'center',
+    opacity: 0.72,
-      fontSize: 28,
+    borderColor: '#374151',
-      fontWeight: '800',
+  },
-    },
+  cardSoft: {
-    colon: { fontSize: 34, fontWeight: '900' },
+    backgroundColor: '#0f172a',
-    btnRow: {
+    borderRadius: 16,
-      flexDirection: 'row',
+    borderWidth: 1,
-      gap: 12,
+    borderColor: '#1e293b',
-      marginTop: 20,
+    padding: 10,
-      alignItems: 'center',
+    gap: 8,
-    },
+  },
-    setBtn: {
+  cardRow: {
-      paddingHorizontal: 32,
+    flexDirection: 'row',
-      paddingVertical: 14,
+    gap: 8,
-      borderRadius: 14,
+  },
-    },
+  cardTitle: {
-    setBtnText: { color: '#fff', fontSize: 16, fontWeight: '700', letterSpacing: 0.5 },
+    color: '#f8fafc',
-    resetBtn: {
+    fontWeight: '700',
-      paddingHorizontal: 20,
+    fontSize: 15,
-      paddingVertical: 13,
+  },
-      borderRadius: 14,
+  cardMeta: {
-      borderWidth: 1.5,
+    color: '#94a3b8',
-    },
+    marginTop: 2,
-    resetBtnText: { fontSize: 15, fontWeight: '600' },
+    fontSize: 12,
-    overContainer: { alignItems: 'center', paddingVertical: 12, gap: 10 },
+  },
-    overText: { fontSize: 52, fontWeight: '900', letterSpacing: 2 },
+  tripHistoryLabel: {
-    overSub: { fontSize: 15 },
+    color: '#93c5fd',
-    countdownContainer: { alignItems: 'center', gap: 12 },
+    fontSize: 13,
-    countdownLabel: { fontSize: 13, letterSpacing: 0.5, textTransform: 'uppercase' },
+    marginTop: -2,
-    countdownRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 6, justifyContent: 'center' },
+    marginBottom: 2,
-    timeBlock: { alignItems: 'center', gap: 4 },
+  },
-    countdownNum: { fontSize: 58, fontWeight: '800', lineHeight: 66 },
+  tripHeroCard: {
-    countdownUnit: { fontSize: 11, fontWeight: '600', letterSpacing: 1.5 },
+    backgroundColor: '#0f172a',
-    sep: { fontSize: 50, fontWeight: '800', marginTop: 4 },
+    borderRadius: 18,
-    placeholder: { fontSize: 15, textAlign: 'center', paddingVertical: 24, lineHeight: 24 },
+    borderWidth: 1,
-    clock: { marginTop: 24, fontSize: 13, letterSpacing: 1.5 },
+    borderColor: '#334155',
-    focusRoot: { alignItems: 'center', justifyContent: 'center', paddingHorizontal: 10 },
+    padding: 10,
-    focusCountdown: { alignItems: 'center', gap: 16, width: '100%' },
+    gap: 6,
-    focusLabel: { fontSize: 16, letterSpacing: 0.5, textTransform: 'uppercase' },
+  },
-    focusNum: { fontSize: 72, fontWeight: '800', lineHeight: 80 },
+  tripHeroImage: {
-    focusSep: { fontSize: 56, fontWeight: '800', marginTop: 8 },
+    width: '100%',
-    focusOverText: { fontSize: 72 },
+    height: 180,
-    focusExitBtn: {
+    borderRadius: 12,
-      position: 'absolute',
+    backgroundColor: '#111827',
-      bottom: 40,
+  },
-      right: 32,
+  tripHeroTitle: {
-      paddingHorizontal: 18,
+    color: '#f8fafc',
-      paddingVertical: 10,
+    fontWeight: '800',
-      borderRadius: 20,
+    fontSize: 20,
-      borderWidth: 1.5,
+  },
-    },
+  tripListTitle: {
-    focusExitText: { fontSize: 14, fontWeight: '600' },
+    color: '#cbd5e1',
-  });
+    fontWeight: '700',
-}
+    fontSize: 13,
+    letterSpacing: 0.4,
+    textTransform: 'uppercase',
+  },
+
+  fieldWrap: {
+    gap: 6,
+  },
+  label: {
+    color: '#cbd5e1',
+    fontWeight: '600',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#243244',
+    borderRadius: 10,
+    backgroundColor: '#0b1220',
+    color: '#e5e7eb',
+    paddingHorizontal: 10,
+    paddingVertical: 11,
+  },
+  inputMultiline: {
+    borderWidth: 1,
+    borderColor: '#243244',
+    borderRadius: 10,
+    backgroundColor: '#0b1220',
+    color: '#e5e7eb',
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    minHeight: 150,
+    textAlignVertical: 'top',
+    fontSize: 12,
+    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+  },
+  dateInput: {
+    borderWidth: 1,
+    borderColor: '#29415e',
+    borderRadius: 10,
+    backgroundColor: '#0b1220',
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+  },
+  dateInputText: {
+    color: '#dbeafe',
+    fontWeight: '600',
+  },
+
+  chipGroup: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 7,
+  },
+  chip: {
+    borderRadius: 999,
+    paddingHorizontal: 11,
+    paddingVertical: 7,
+    borderWidth: 1,
+    borderColor: '#273449',
+    backgroundColor: '#0b1220',
+  },
+  chipActive: {
+    borderColor: '#60a5fa',
+    backgroundColor: '#172338',
+  },
+  chipText: {
+    color: '#cbd5e1',
+    fontWeight: '600',
+    fontSize: 12,
+  },
+  chipTextActive: {
+    color: '#bfdbfe',
+  },
+
+  primaryBtn: {
+    marginTop: 4,
+    borderRadius: 10,
+    backgroundColor: '#2563eb',
+    alignItems: 'center',
+    paddingVertical: 11,
+    paddingHorizontal: 12,
+  },
+  primaryBtnTight: {
+    borderRadius: 10,
+    backgroundColor: '#2563eb',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  primaryBtnText: {
+    color: '#fff',
+    fontWeight: '700',
+  },
+  secondaryBtn: {
+    marginTop: 4,
+    borderRadius: 10,
+    backgroundColor: '#1f2937',
+    alignItems: 'center',
+    paddingVertical: 11,
+    paddingHorizontal: 12,
+  },
+  secondaryBtnTight: {
+    borderRadius: 10,
+    backgroundColor: '#1f2937',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  secondaryBtnText: {
+    color: '#dbeafe',
+    fontWeight: '700',
+  },
+  actionRow: {
+    flexDirection: 'row',
+    gap: 8,
+    marginTop: 4,
+  },
+
+  inlineToggle: {
+    marginTop: 2,
+  },
+  inlineToggleText: {
+    color: '#cbd5e1',
+  },
+
+  stackButtons: {
+    gap: 6,
+  },
+  miniBtn: {
+    backgroundColor: '#1e293b',
+    borderRadius: 8,
+    paddingVertical: 6,
+    paddingHorizontal: 9,
+  },
+  miniBtnDanger: {
+    backgroundColor: '#3b1d22',
+    borderRadius: 8,
+    paddingVertical: 6,
+    paddingHorizontal: 9,
+  },
+  miniBtnText: {
+    color: '#e2e8f0',
+    fontWeight: '700',
+    fontSize: 12,
+  },
+
+  itemCard: {
+    borderRadius: 16,
+    backgroundColor: '#111827',
+    borderWidth: 1,
+    borderColor: '#1f2937',
+    overflow: 'hidden',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  itemAccent: {
+    width: 5,
+    alignSelf: 'stretch',
+  },
+  itemThumbWrap: {
+    paddingTop: 8,
+    paddingLeft: 8,
+  },
+  itemThumbSmall: {
+    width: 42,
+    height: 42,
+    borderRadius: 8,
+    backgroundColor: '#0b1220',
+  },
+  itemThumbPlaceholder: {
+    width: 42,
+    height: 42,
+    borderRadius: 8,
+    backgroundColor: '#0b1220',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#243244',
+  },
+  itemThumbPlaceholderText: {
+    fontSize: 16,
+  },
+  itemMain: {
+    flex: 1,
+    padding: 8,
+    gap: 6,
+  },
+  itemTitle: {
+    color: '#f8fafc',
+    fontWeight: '700',
+    fontSize: 15,
+  },
+  itemMeta: {
+    color: '#94a3b8',
+    marginTop: 1,
+    fontSize: 12,
+  },
+  quickStatusRow: {
+    flexDirection: 'row',
+    gap: 6,
+    marginTop: 1,
+  },
+  quickStatusBtn: {
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: '#334155',
+    backgroundColor: '#0b1220',
+  },
+  quickStatusBtnActive: {
+    borderColor: '#60a5fa',
+    backgroundColor: '#1d2a3a',
+  },
+  quickStatusBtnText: {
+    color: '#cbd5e1',
+    fontWeight: '700',
+    fontSize: 11,
+  },
+  quickStatusBtnTextActive: {
+    color: '#dbeafe',
+  },
+
+  answerRow: {
+    marginTop: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  answerYes: {
+    backgroundColor: '#163223',
+    borderWidth: 1,
+    borderColor: '#1f7a4e',
+    borderRadius: 9,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  answerNo: {
+    backgroundColor: '#3b1d22',
+    borderWidth: 1,
+    borderColor: '#7f1d1d',
+    borderRadius: 9,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  answerText: {
+    color: '#f8fafc',
+    fontWeight: '700',
+  },
+  answerRowWide: {
+    marginTop: 14,
+    gap: 10,
+  },
+  checkupProgressTrack: {
+    width: '100%',
+    height: 8,
+    borderRadius: 999,
+    backgroundColor: '#1e293b',
+    overflow: 'hidden',
+    marginTop: 4,
+    marginBottom: 8,
+  },
+  checkupProgressFill: {
+    height: '100%',
+    backgroundColor: '#2563eb',
+  },
+  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,
+    borderRadius: 99,
+    backgroundColor: '#475569',
+  },
+  answerStateDotOn: {
+    backgroundColor: '#22c55e',
+  },
+  answerStateDotBad: {
+    backgroundColor: '#ef4444',
+  },
+
+  statsRow: {
+    flexDirection: 'row',
+    gap: 8,
+    flexWrap: 'wrap',
+  },
+  statPill: {
+    borderRadius: 999,
+    paddingVertical: 7,
+    paddingHorizontal: 11,
+    borderWidth: 1,
+  },
+  statPillCorrect: {
+    backgroundColor: '#163223',
+    borderColor: '#1f7a4e',
+  },
+  statPillBad: {
+    backgroundColor: '#3b1d22',
+    borderColor: '#7f1d1d',
+  },
+  statPillPending: {
+    backgroundColor: '#1f2937',
+    borderColor: '#334155',
+  },
+  statPillText: {
+    color: '#e2e8f0',
+    fontWeight: '700',
+    fontSize: 12,
+  },
+
+  snapshotWrap: {
+    marginTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: '#1e293b',
+    paddingTop: 8,
+    gap: 7,
+  },
+  snapshotRow: {
+    paddingVertical: 3,
+  },
+  snapshotTitle: {
+    color: '#e2e8f0',
+    fontWeight: '600',
+  },
+
+  previewImage: {
+    width: '100%',
+    height: 150,
+    borderRadius: 10,
+    backgroundColor: '#111827',
+  },
+  previewImageSmall: {
+    width: '100%',
+    height: 120,
+    borderRadius: 10,
+    backgroundColor: '#111827',
+  },
+  imagePreviewBackdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(2,6,23,0.88)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 14,
+  },
+  imagePreviewCard: {
+    width: '100%',
+    maxWidth: 460,
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: '#334155',
+    backgroundColor: '#0f172a',
+    padding: 10,
+    gap: 8,
+  },
+  imagePreviewImage: {
+    width: '100%',
+    height: 360,
+    borderRadius: 10,
+    backgroundColor: '#0b1220',
+  },
+  imagePreviewHint: {
+    color: '#93c5fd',
+    textAlign: 'center',
+    fontSize: 12,
+    fontWeight: '600',
+  },
+
+  tabBarWrap: {
+    position: 'absolute',
+    bottom: 6,
+    left: 0,
+    right: 0,
+    paddingHorizontal: 10,
+    paddingBottom: Platform.OS === 'ios' ? 14 : 8,
+    backgroundColor: 'transparent',
+  },
+  tabBar: {
+    height: TAB_BAR_HEIGHT,
+    borderRadius: 16,
+    backgroundColor: '#0b1220',
+    borderWidth: 1,
+    borderColor: '#1f2937',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 8,
+  },
+  tabGroupSide: {
+    flexDirection: 'row',
+    width: '42%',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+  tabItem: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 3,
+    minWidth: 56,
+  },
+  tabAddBtn: {
+    width: 54,
+    height: 54,
+    borderRadius: 999,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#2563eb',
+    marginTop: -24,
+    borderWidth: 2,
+    borderColor: '#0b1220',
+  },
+  tabAddBtnDisabled: {
+    opacity: 0.45,
+  },
+  tabLabel: {
+    color: '#94a3b8',
+    fontSize: 11,
+    fontWeight: '600',
+  },
+  tabLabelActive: {
+    color: '#dbeafe',
+  },
+
+  modalBackdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(2,6,23,0.72)',
+    paddingHorizontal: 12,
+  },
+  dialogBackdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(2,6,23,0.72)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 18,
+  },
+  dialogCard: {
+    width: '100%',
+    backgroundColor: '#0f172a',
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: '#1e293b',
+    padding: 14,
+    gap: 12,
+  },
+  dialogTitle: {
+    color: '#f8fafc',
+    fontWeight: '700',
+    fontSize: 17,
+  },
+  dialogMessage: {
+    color: '#cbd5e1',
+    lineHeight: 20,
+  },
+  dialogButtonsRow: {
+    flexDirection: 'row',
+    gap: 8,
+    justifyContent: 'flex-end',
+    flexWrap: 'wrap',
+  },
+  dialogBtn: {
+    borderRadius: 10,
+    paddingVertical: 9,
+    paddingHorizontal: 14,
+    borderWidth: 1,
+  },
+  dialogBtnPrimary: {
+    backgroundColor: '#2563eb',
+    borderColor: '#2563eb',
+  },
+  dialogBtnDanger: {
+    backgroundColor: '#7f1d1d',
+    borderColor: '#991b1b',
+  },
+  dialogBtnNeutral: {
+    backgroundColor: '#1e293b',
+    borderColor: '#334155',
+  },
+  dialogBtnText: {
+    color: '#f8fafc',
+    fontWeight: '700',
+  },
+  modalKeyboardWrap: {
+    flex: 1,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  modalCard: {
+    width: '96%',
+    maxHeight: '90%',
+    backgroundColor: '#0f172a',
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: '#1e293b',
+    padding: 14,
+    gap: 8,
+  },
+  closeText: {
+    color: '#93c5fd',
+    fontWeight: '700',
+  },
+
+  dateModalBackdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(2,6,23,0.75)',
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+  },
+  dateModalCard: {
+    backgroundColor: '#0f172a',
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: '#1e293b',
+    padding: 14,
+    gap: 10,
+  },
+  calendarHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  calendarNavBtn: {
+    width: 34,
+    height: 34,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 10,
+    backgroundColor: '#1e293b',
+  },
+  calendarNavText: {
+    color: '#dbeafe',
+    fontSize: 20,
+    fontWeight: '700',
+    lineHeight: 22,
+  },
+  calendarMonthText: {
+    color: '#f8fafc',
+    fontWeight: '700',
+    fontSize: 15,
+  },
+  calendarWeekRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  calendarWeekday: {
+    color: '#94a3b8',
+    width: '14.2%',
+    textAlign: 'center',
+    fontSize: 12,
+  },
+  calendarGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  calendarCell: {
+    width: '14.2%',
+    height: 38,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 10,
+    marginVertical: 2,
+  },
+  calendarCellActive: {
+    backgroundColor: '#2563eb',
+  },
+  calendarCellText: {
+    color: '#cbd5e1',
+    fontWeight: '600',
+  },
+  calendarCellTextActive: {
+    color: '#fff',
+    fontWeight: '700',
+  },
+});

src/tabs/CheckupTab.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { styles } from '../styles';
+
+export default function CheckupTab({ selectedTrip, selectedTripItems, checkupStats, startCheckupFlow }) {
+  return (
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>Check-Up</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>
+      ) : null}
+    </View>
+  );
+}

src/tabs/HistoryTab.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { styles } from '../styles';
+import { formatStatusLabel } from '../utils/labels';
+
+export default function HistoryTab({ selectedTrip, selectedTripCheckups, selectedCheckupId, setSelectedCheckupId, onDeleteCheckup }) {
+  return (
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>History</Text>
+
+      {!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}>
+          <Pressable
+            onPress={() => setSelectedCheckupId((prev) => (prev === checkup.id ? null : checkup.id))}
+            onLongPress={() => onDeleteCheckup(checkup.id)}
+            delayLongPress={280}
+          >
+            <Text style={styles.cardTitle}>{new Date(checkup.createdAt).toLocaleString()}</Text>
+            <Text style={styles.cardMeta}>
+              {checkup.snapshot.length} items · correct: {checkup.stats?.correct ?? checkup.snapshot.filter((x) => x.result === 'correct').length} · bad:{' '}
+              {checkup.stats?.bad ?? checkup.snapshot.filter((x) => x.result === 'bad').length}
+            </Text>
+            <Text style={styles.cardMeta}>{selectedCheckupId === checkup.id ? 'Tap to collapse' : 'Tap to open'} · long hold to delete</Text>
+          </Pressable>
+
+          {selectedCheckupId === checkup.id ? (
+            <View style={styles.snapshotWrap}>
+              {checkup.snapshot.map((entry) => (
+                <View key={entry.itemId} style={styles.snapshotRow}>
+                  <Text style={styles.snapshotTitle}>{entry.name}</Text>
+                  <Text style={styles.cardMeta}>
+                    {formatStatusLabel(entry.status, entry.lentTo)} · {entry.placement}
+                  </Text>
+                </View>
+              ))}
+            </View>
+          ) : null}
+        </View>
+      ))}
+    </View>
+  );
+}

src/tabs/ItemsTab.js

@@ -0,0 +1,120 @@
+import React, { useMemo, useState } from 'react';
+import { Image, Modal, Pressable, Text, View } from 'react-native';
+import ItemCard from '../components/ItemCard';
+import { ITEM_STATUSES } from '../constants';
+import { styles } from '../styles';
+import { formatFilterLabel, formatStatusLabel } from '../utils/labels';
+
+export default function ItemsTab({
+  selectedTrip,
+  selectedTripItems,
+  openAddItemModal,
+  openEditItemModal,
+  deleteItem,
+  quickSetItemStatus,
+  bulkSetItemStatus,
+}) {
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [categoryFilter, setCategoryFilter] = useState('all');
+  const [imagePreviewUri, setImagePreviewUri] = useState('');
+
+  const categories = useMemo(
+    () => Array.from(new Set(selectedTripItems.map((item) => item.category?.trim()).filter(Boolean))).sort((a, b) => a.localeCompare(b)),
+    [selectedTripItems]
+  );
+
+  const filteredItems = useMemo(
+    () =>
+      selectedTripItems.filter((item) => {
+        const matchStatus = statusFilter === 'all' || item.status === statusFilter;
+        const itemCategory = item.category?.trim() || '';
+        const matchCategory = categoryFilter === 'all' || itemCategory === categoryFilter;
+        return matchStatus && matchCategory;
+      }),
+    [selectedTripItems, statusFilter, categoryFilter]
+  );
+
+  const filterStatusOptions = ['all', ...ITEM_STATUSES];
+  const filterCategoryOptions = ['all', ...categories];
+
+  return (
+    <View style={styles.section}>
+      <View style={styles.sectionRow}>
+        <Text style={styles.sectionTitle}>Luggage Items</Text>
+        <Pressable style={styles.primaryBtnTight} onPress={openAddItemModal}>
+          <Text style={styles.primaryBtnText}>+ Add</Text>
+        </Pressable>
+      </View>
+
+      {!selectedTrip ? <Text style={styles.muted}>Select a trip first.</Text> : null}
+      {selectedTripItems.length === 0 && selectedTrip ? <Text style={styles.muted}>No items yet.</Text> : null}
+
+      {selectedTrip ? (
+        <View style={styles.cardSoft}>
+          <Text style={styles.cardTitle}>Quick actions</Text>
+          <View style={styles.actionRow}>
+            <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={() => bulkSetItemStatus(filteredItems.map((x) => x.id), 'packed')}>
+              <Text style={styles.secondaryBtnText}>Pack All ({filteredItems.length})</Text>
+            </Pressable>
+            <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={() => bulkSetItemStatus(filteredItems.map((x) => x.id), 'unpacked')}>
+              <Text style={styles.secondaryBtnText}>Unpack All ({filteredItems.length})</Text>
+            </Pressable>
+          </View>
+        </View>
+      ) : null}
+
+      {selectedTripItems.length > 0 ? (
+        <View style={styles.cardSoft}>
+          <Text style={styles.cardTitle}>Filters</Text>
+
+          <Text style={styles.cardMeta}>Status</Text>
+          <View style={styles.chipGroup}>
+            {filterStatusOptions.map((status) => {
+              const active = statusFilter === status;
+              return (
+                <Pressable key={status} style={[styles.chip, active && styles.chipActive]} onPress={() => setStatusFilter(status)}>
+                  <Text style={[styles.chipText, active && styles.chipTextActive]}>{status === 'all' ? formatFilterLabel(status) : formatStatusLabel(status)}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
+
+          <Text style={styles.cardMeta}>Category</Text>
+          <View style={styles.chipGroup}>
+            {filterCategoryOptions.map((category) => {
+              const active = categoryFilter === category;
+              return (
+                <Pressable key={category} style={[styles.chip, active && styles.chipActive]} onPress={() => setCategoryFilter(category)}>
+                  <Text style={[styles.chipText, active && styles.chipTextActive]}>{formatFilterLabel(category)}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
+        </View>
+      ) : null}
+
+      {filteredItems.map((item) => (
+        <ItemCard
+          key={item.id}
+          item={item}
+          onEdit={openEditItemModal}
+          onDelete={deleteItem}
+          onQuickPack={() => quickSetItemStatus(item.id, 'packed')}
+          onQuickUnpack={() => quickSetItemStatus(item.id, 'unpacked')}
+          onOpenImage={(uri) => setImagePreviewUri(uri)}
+        />
+      ))}
+
+      {selectedTripItems.length > 0 && filteredItems.length === 0 ? <Text style={styles.muted}>No items match the current filters.</Text> : null}
+
+      <Modal visible={!!imagePreviewUri} transparent animationType="fade">
+        <Pressable style={styles.imagePreviewBackdrop} onPress={() => setImagePreviewUri('')}>
+          <Pressable style={styles.imagePreviewCard} onPress={() => {}}>
+            {imagePreviewUri ? <Image source={{ uri: imagePreviewUri }} style={styles.imagePreviewImage} resizeMode="contain" /> : null}
+            <Text style={styles.imagePreviewHint}>Tap outside to close</Text>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+}

src/tabs/TripsTab.js

@@ -0,0 +1,339 @@
+import React, { useMemo, useState } from 'react';
+import { KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import DatePickerModal from '../components/DatePickerModal';
+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>
+  );
+}
+
+const emptyEditForm = {
+  name: '',
+  location: '',
+  startDate: '',
+  endDate: '',
+};
+
+export default function TripsTab({
+  tripForm,
+  updateTripForm,
+  templateTrip,
+  createTrip,
+  trips,
+  selectedTripId,
+  setTripAsTemplate,
+  saveTripEdits,
+  setTripArchived,
+  deleteTrip,
+  onInputFocus,
+  defaultTemplateTripId,
+  openDatePicker,
+  activeTripItemCount,
+  activeTripCheckupCount,
+  openBackupModal,
+}) {
+  const [createModalVisible, setCreateModalVisible] = useState(false);
+  const [viewTripId, setViewTripId] = useState(null);
+  const [editMode, setEditMode] = useState(false);
+  const [editForm, setEditForm] = useState(emptyEditForm);
+  const [viewDatePicker, setViewDatePicker] = useState({ visible: false, field: 'startDate' });
+
+  const activeTrip = useMemo(() => trips.find((trip) => trip.id === selectedTripId) || null, [trips, selectedTripId]);
+  const viewingTrip = useMemo(() => trips.find((trip) => trip.id === viewTripId) || null, [trips, viewTripId]);
+  const activeTrips = useMemo(() => trips.filter((trip) => !trip.archived), [trips]);
+  const archivedTrips = useMemo(() => trips.filter((trip) => trip.archived), [trips]);
+
+  function submitCreateTrip() {
+    const ok = createTrip();
+    if (ok) setCreateModalVisible(false);
+  }
+
+  function openView(tripId) {
+    const trip = trips.find((x) => x.id === tripId);
+    if (!trip) return;
+    setViewTripId(tripId);
+    setEditMode(false);
+    setEditForm({
+      name: trip.name || '',
+      location: trip.location || '',
+      startDate: trip.startDate || '',
+      endDate: trip.endDate || '',
+    });
+  }
+
+  function updateEditForm(field, value) {
+    setEditForm((prev) => ({ ...prev, [field]: value }));
+  }
+
+  function saveEditFromView() {
+    if (!viewingTrip) return;
+    const ok = saveTripEdits(viewingTrip.id, editForm);
+    if (!ok) return;
+    setEditMode(false);
+  }
+
+  function applyTemplateFromView() {
+    if (!viewingTrip) return;
+    setTripAsTemplate(viewingTrip.id);
+  }
+
+  function toggleArchiveFromView() {
+    if (!viewingTrip) return;
+    setTripArchived(viewingTrip.id, !viewingTrip.archived);
+    if (!viewingTrip.archived) {
+      setViewTripId(null);
+      setEditMode(false);
+    }
+  }
+
+  function deleteFromView() {
+    if (!viewingTrip) return;
+    const tripId = viewingTrip.id;
+    setViewTripId(null);
+    setEditMode(false);
+    deleteTrip(tripId);
+  }
+
+  return (
+    <View style={styles.section}>
+      <View style={styles.sectionRow}>
+        <Text style={styles.sectionTitle}>Trips</Text>
+        <View style={styles.actionRow}>
+          <Pressable style={styles.secondaryBtnTight} onPress={openBackupModal}>
+            <Text style={styles.secondaryBtnText}>Backup</Text>
+          </Pressable>
+          <Pressable style={styles.primaryBtnTight} onPress={() => setCreateModalVisible(true)}>
+            <Text style={styles.primaryBtnText}>+ New Trip</Text>
+          </Pressable>
+        </View>
+      </View>
+
+      {activeTrip ? (
+        <View style={styles.tripHeroCard}>
+          <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}>No active trips. Unarchive or create one.</Text>
+      )}
+
+      <Text style={styles.tripListTitle}>Active Trips</Text>
+
+      {activeTrips
+        .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>
+                {defaultTemplateTripId === trip.id ? <Text style={styles.cardMeta}>Default template</Text> : null}
+              </View>
+              <View style={styles.stackButtons}>
+                <Pressable style={styles.miniBtn} onPress={() => openView(trip.id)}>
+                  <Text style={styles.miniBtnText}>View</Text>
+                </Pressable>
+              </View>
+            </View>
+          </View>
+        ))}
+
+      {archivedTrips.length > 0 ? (
+        <>
+          <Text style={styles.tripListTitle}>Archived Trips</Text>
+          {archivedTrips
+            .slice()
+            .sort((a, b) => b.startDate.localeCompare(a.startDate))
+            .map((trip) => (
+              <View key={trip.id} style={[styles.card, styles.cardArchived]}>
+                <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}>Archived</Text>
+                  </View>
+                  <View style={styles.stackButtons}>
+                    <Pressable style={styles.miniBtn} onPress={() => openView(trip.id)}>
+                      <Text style={styles.miniBtnText}>View</Text>
+                    </Pressable>
+                  </View>
+                </View>
+              </View>
+            ))}
+        </>
+      ) : null}
+
+      <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')} />
+
+                {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>
+
+      <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);
+                    setEditMode(false);
+                  }}
+                >
+                  <Text style={styles.closeText}>Close</Text>
+                </Pressable>
+              </View>
+
+              {viewingTrip ? (
+                <ScrollView
+                  keyboardShouldPersistTaps="handled"
+                  keyboardDismissMode="interactive"
+                  contentContainerStyle={{ paddingBottom: 12 }}
+                  showsVerticalScrollIndicator={false}
+                >
+                  {!editMode ? (
+                    <>
+                      <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>
+                      <Text style={styles.cardMeta}>{viewingTrip.archived ? 'Archived' : 'Active'}</Text>
+
+                      <Pressable style={styles.miniBtn} onPress={() => setEditMode(true)}>
+                        <Text style={styles.miniBtnText}>Edit Trip</Text>
+                      </Pressable>
+
+                      <Pressable style={styles.secondaryBtn} onPress={applyTemplateFromView}>
+                        <Text style={styles.secondaryBtnText}>Set as Template</Text>
+                      </Pressable>
+
+                      <Pressable style={styles.secondaryBtn} onPress={toggleArchiveFromView}>
+                        <Text style={styles.secondaryBtnText}>{viewingTrip.archived ? 'Unarchive Trip' : 'Archive Trip'}</Text>
+                      </Pressable>
+
+                      <Pressable style={styles.miniBtnDanger} onPress={deleteFromView}>
+                        <Text style={styles.miniBtnText}>Delete Trip</Text>
+                      </Pressable>
+                    </>
+                  ) : (
+                    <>
+                      <Field label="Name">
+                        <TextInput
+                          style={styles.input}
+                          value={editForm.name}
+                          onChangeText={(v) => updateEditForm('name', v)}
+                          placeholder="Trip name"
+                          placeholderTextColor="#6b7280"
+                          onFocus={onInputFocus}
+                        />
+                      </Field>
+
+                      <Field label="Location">
+                        <TextInput
+                          style={styles.input}
+                          value={editForm.location}
+                          onChangeText={(v) => updateEditForm('location', v)}
+                          placeholder="Location"
+                          placeholderTextColor="#6b7280"
+                          onFocus={onInputFocus}
+                        />
+                      </Field>
+
+                      <DateField label="Start Date" value={editForm.startDate} onPress={() => setViewDatePicker({ visible: true, field: 'startDate' })} />
+                      <DateField label="End Date" value={editForm.endDate} onPress={() => setViewDatePicker({ visible: true, field: 'endDate' })} />
+
+                      <Pressable style={styles.primaryBtn} onPress={saveEditFromView}>
+                        <Text style={styles.primaryBtnText}>Save Trip</Text>
+                      </Pressable>
+                      <Pressable style={styles.secondaryBtn} onPress={() => setEditMode(false)}>
+                        <Text style={styles.secondaryBtnText}>Cancel Edit</Text>
+                      </Pressable>
+                    </>
+                  )}
+                </ScrollView>
+              ) : null}
+            </View>
+          </KeyboardAvoidingView>
+        </View>
+      </Modal>
+
+      <DatePickerModal
+        visible={viewDatePicker.visible}
+        title={viewDatePicker.field === 'startDate' ? 'Pick start date' : 'Pick end date'}
+        value={editForm[viewDatePicker.field]}
+        onClose={() => setViewDatePicker((prev) => ({ ...prev, visible: false }))}
+        onSelect={(ymd) => {
+          updateEditForm(viewDatePicker.field, ymd);
+          setViewDatePicker((prev) => ({ ...prev, visible: false }));
+        }}
+      />
+    </View>
+  );
+}

src/theme.js

@@ -1,31 +0,0 @@
-export function getTheme(darkMode, pinkMode) {
-  const dark = {
-    bg: '#0b1020',
-    cardBg: '#131a2a',
-    text: '#e6ecff',
-    subText: '#93a0bf',
-    accent: '#5fb0ff',
-    border: '#24304a',
-    inputBg: '#0f1727',
-  };
-
-  const light = {
-    bg: '#f7f8fc',
-    cardBg: '#ffffff',
-    text: '#1d2433',
-    subText: '#5f6b85',
-    accent: '#1f67ff',
-    border: '#d5def2',
-    inputBg: '#eef3ff',
-  };
-
-  const base = darkMode ? dark : light;
-  const accent = pinkMode ? '#ff4fa3' : base.accent;
-
-  return {
-    ...base,
-    accent,
-    danger: '#ef4444',
-    pink: '#ff4fa3',
-  };
-}

src/utils/date.js

@@ -0,0 +1,56 @@
+export function makeId(prefix) {
+  return `${prefix}_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+}
+
+export function todayYMD() {
+  const now = new Date();
+  return `${now.getFullYear()}-${`${now.getMonth() + 1}`.padStart(2, '0')}-${`${now.getDate()}`.padStart(2, '0')}`;
+}
+
+export function parseYMD(value) {
+  if (!value || !/^\d{4}-\d{2}-\d{2}$/.test(value)) return null;
+  const d = new Date(`${value}T00:00:00`);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+
+export function findActiveTripId(trips) {
+  const today = parseYMD(todayYMD());
+  if (!today) return null;
+  const active = trips.find((trip) => {
+    const start = parseYMD(trip.startDate);
+    const end = parseYMD(trip.endDate);
+    return !!start && !!end && today >= start && today <= end;
+  });
+  return active?.id || null;
+}
+
+export function findNextTripId(trips) {
+  const today = parseYMD(todayYMD());
+  if (!today) return null;
+
+  const next = trips
+    .map((trip) => ({ id: trip.id, start: parseYMD(trip.startDate) }))
+    .filter((trip) => !!trip.start && trip.start >= today)
+    .sort((a, b) => a.start - b.start)[0];
+
+  return next?.id || null;
+}
+
+export function findBestTripId(trips) {
+  const activeTripId = findActiveTripId(trips);
+  if (activeTripId) return activeTripId;
+
+  const nextTripId = findNextTripId(trips);
+  if (nextTripId) return nextTripId;
+
+  const latestPast = trips
+    .map((trip) => ({ id: trip.id, end: parseYMD(trip.endDate), start: parseYMD(trip.startDate) }))
+    .filter((trip) => !!trip.end || !!trip.start)
+    .sort((a, b) => {
+      const aTime = (a.end || a.start).getTime();
+      const bTime = (b.end || b.start).getTime();
+      return bTime - aTime;
+    })[0];
+
+  return latestPast?.id || null;
+}

src/utils/labels.js

@@ -0,0 +1,23 @@
+export function toTitleWords(value) {
+  if (!value) return '';
+  return value
+    .toString()
+    .split('-')
+    .map((part) => (part ? part[0].toUpperCase() + part.slice(1) : part))
+    .join(' ');
+}
+
+export function formatStatusLabel(status, lentTo = '') {
+  if (!status) return '';
+  if (status === 'lent-to') {
+    const name = lentTo?.trim();
+    return name ? `Lent To ${name}` : 'Lent To';
+  }
+  return toTitleWords(status);
+}
+
+export function formatFilterLabel(value) {
+  if (!value) return '';
+  if (value === 'all') return 'All';
+  return toTitleWords(value);
+}