feat(#17,#18): add location filter and custom-location autofill

feat(#16 ): support custom placement when selecting other
fix(#14,#15): reduce UI clutter and rename status actions
2026-04-18 21:59:23 +02:00 · 2026-04-18 21:41:18 +02:00 · 2026-04-18 21:32:12 +02:00 · 2026-04-18 19:45:53 +02:00 · 2026-04-18 19:45:46 +02:00 · 2026-04-18 19:30:03 +02:00
15 changed files with 868 additions and 277 deletions
--- a/.gitea/workflows/ci.yml
+++ b/.gitea/workflows/ci.yml
@@ -3,6 +3,10 @@ on:
  push:
    branches:
      - main
+    paths:
+      - '**/*.js'
+      - '**/*.json'
+      - '.gitea/workflows/**'

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

 jobs:
  validate:
--- a/TODO.md
+++ b/TODO.md
@@ -1,52 +1,14 @@
 # TODO - Luggage List

-## Stage
-Improving & Fixing Bugs (V3)
+This file was intentionally nuked.

-## V2 Changes Requested
- [x] Trip can be selected from everywhere (global trip picker)
- [x] Fixed trip switching behavior for web by removing aggressive auto-reselect
- [x] Removed trip image crop (gallery pick without editing)
- [x] Item updates now happen in a modal
- [x] Redesigned item cards
- [x] Moved top nav to bottom and made it mobile-friendly
- [x] Removed top title block
- [x] Reworked check-up flow to yes/no checklist
- [x] “No” now opens update modal for check-up-only changes
- [x] Added optional toggle to also sync fix into trip item list
- [x] Removed JSON export feature
- [x] Improved keyboard behavior with KeyboardAvoidingView + scroll-safe forms
- [x] Full UI redesign (dark-first minimalist with accent colors)
- [x] Set new icon from `https://cdn.reversed.dev/pictures/yesnt.png`
-
-## Validation
- [x] `npm install`
- [x] `npx expo export --platform web`
-
-## Progress Log
- [x] V1 prototype complete and shipped
- [x] CI adjusted (no `eas init` in workflows)
- [x] V2 redesign + behavior fixes implemented
- [x] Removed legacy template src folder
- [x] Rebuilt app into modular `src/` structure (tabs/components/modals/styles/utils)
- [x] Fixed status-bar overlap with top spacing
- [x] Replaced trip date text inputs with calendar modal picker
- [x] Improved keyboard focus scrolling to focused input (not scroll-to-end)
- [x] Reworked bottom nav to real icons + labels
- [x] Clarified history as selected-trip check-up history
- [x] Increased safe top inset to avoid status-bar overlap
- [x] Added check-up stats (correct/bad/pending) and persisted per snapshot
- [x] Extra UI polish pass (spacing, cards, hierarchy)
- [x] Centered and enlarged edit/check-up modals to fully overlay nav
- [x] Fixed modal keyboard glitching (stable centered keyboard-aware layout)
- [x] Added trip view editing in modal (name/location/date/image)
- [x] Added trip archive/unarchive flow with archived section
- [x] Added item filters + bulk pack/unpack actions
-
-## Next Improvements (Requested)
- [x] Edit trip directly in the trip view modal (name/location/dates/image)
- [x] Add archive flow for trips (hide from active list without deleting history)
- [ ] Enhance check-up modal UX (progress bar + back/skip controls)
- [x] Add bulk item actions and filters (pack all/unpack all + status/category chips)
- [ ] Add image optimization controls before save (compress/crop)
- [ ] Add JSON export/import backup + restore flow
+All pending tasks now live as Gitea issues:
+- https://gitea.reversed.dev/space/luggage-list/issues/1
+- https://gitea.reversed.dev/space/luggage-list/issues/2
+- https://gitea.reversed.dev/space/luggage-list/issues/3
+- https://gitea.reversed.dev/space/luggage-list/issues/4
+- https://gitea.reversed.dev/space/luggage-list/issues/5
+- https://gitea.reversed.dev/space/luggage-list/issues/6
+- https://gitea.reversed.dev/space/luggage-list/issues/7
+- https://gitea.reversed.dev/space/luggage-list/issues/8
+- https://gitea.reversed.dev/space/luggage-list/issues/9
--- a/src/AppRoot.js
+++ b/src/AppRoot.js
@@ -1,18 +1,20 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Alert, KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, StatusBar as RNStatusBar, Text, View } from 'react-native';
+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 { emptyData, ITEM_PLACEMENTS, STORAGE_KEY } from './constants';
 import { findBestTripId, makeId, parseYMD, todayYMD } from './utils/date';
 import { styles } from './styles';

@@ -21,7 +23,6 @@ const emptyTripForm = () => ({
  location: '',
  startDate: todayYMD(),
  endDate: todayYMD(),
-  imageUri: '',
  copyDefaultTemplate: true,
  setAsDefaultTemplate: false,
 });
@@ -33,13 +34,17 @@ const emptyItemForm = () => ({
  category: '',
  status: 'unpacked',
  placement: 'suitcase',
+  placementCustom: '',
  lentTo: '',
  imageUri: '',
+  imageQuality: 'balanced',
+  imageAllowCrop: false,
 });

 const emptyCheckupNoForm = () => ({
  status: 'unpacked',
  placement: 'suitcase',
+  placementCustom: '',
  lentTo: '',
  updateMasterList: false,
 });
@@ -63,6 +68,8 @@ 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);

@@ -80,8 +87,13 @@ export default function AppRoot() {
  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]);

@@ -97,6 +109,35 @@ export default function AppRoot() {
    return (data.checkupsByTrip[selectedTripId] || []).slice().sort((a, b) => b.createdAt - a.createdAt);
  }, [data.checkupsByTrip, selectedTripId]);

+  const previousCustomPlacements = useMemo(() => {
+    const seen = new Set();
+
+    function takeFrom(items = [], bucket = []) {
+      items
+        .slice()
+        .sort((a, b) => (b.updatedAt || b.createdAt || 0) - (a.updatedAt || a.createdAt || 0))
+        .forEach((item) => {
+          const location = item.placement?.trim();
+          if (!location || ITEM_PLACEMENTS.includes(location) || seen.has(location)) return;
+          seen.add(location);
+          bucket.push(location);
+        });
+      return bucket;
+    }
+
+    const collected = [];
+    if (selectedTripId) {
+      takeFrom(data.itemsByTrip[selectedTripId] || [], collected);
+    }
+
+    Object.entries(data.itemsByTrip).forEach(([tripId, items]) => {
+      if (tripId === selectedTripId) return;
+      takeFrom(items || [], collected);
+    });
+
+    return collected;
+  }, [data.itemsByTrip, selectedTripId]);
+
  const templateTrip = useMemo(
    () => data.trips.find((trip) => trip.id === data.defaultTemplateTripId) || null,
    [data.trips, data.defaultTemplateTripId]
@@ -116,6 +157,38 @@ export default function AppRoot() {
    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 {
@@ -125,17 +198,37 @@ export default function AppRoot() {
          setData({ ...emptyData, ...parsed });
        }
      } catch {
-        Alert.alert('Error', 'Could not load local data.');
+        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(() => {
-      Alert.alert('Error', 'Could not save local data.');
+      showAlert('Error', 'Could not save local data.');
    });
  }, [data, loaded]);

@@ -165,7 +258,18 @@ export default function AppRoot() {
  }

  function updateItemForm(field, value) {
-    setItemForm((prev) => ({ ...prev, [field]: value }));
+    setItemForm((prev) => {
+      if (field === 'placement' && value === 'other') {
+        const fallbackLocation = previousCustomPlacements[0] || '';
+        return {
+          ...prev,
+          placement: value,
+          placementCustom: prev.placementCustom?.trim() ? prev.placementCustom : fallbackLocation,
+        };
+      }
+
+      return { ...prev, [field]: value };
+    });
  }

  function openDatePicker(field) {
@@ -177,17 +281,17 @@ export default function AppRoot() {
    setDatePicker((prev) => ({ ...prev, visible: false }));
  }

-  async function pickImage(onPicked) {
+  async function pickImage(onPicked, options = {}) {
    const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (!perm.granted) {
-      Alert.alert('Permission needed', 'Allow gallery access to select images.');
+      showAlert('Permission needed', 'Allow gallery access to select images.');
      return;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
-      allowsEditing: false,
-      quality: 0.85,
+      allowsEditing: !!options.allowCrop,
+      quality: typeof options.quality === 'number' ? options.quality : 0.85,
    });

    if (!result.canceled && result.assets?.[0]?.uri) {
@@ -195,16 +299,16 @@ export default function AppRoot() {
    }
  }

-  async function takeImage(onPicked) {
+  async function takeImage(onPicked, options = {}) {
    const perm = await ImagePicker.requestCameraPermissionsAsync();
    if (!perm.granted) {
-      Alert.alert('Permission needed', 'Allow camera access to take photos.');
+      showAlert('Permission needed', 'Allow camera access to take photos.');
      return;
    }

    const result = await ImagePicker.launchCameraAsync({
-      allowsEditing: false,
-      quality: 0.85,
+      allowsEditing: !!options.allowCrop,
+      quality: typeof options.quality === 'number' ? options.quality : 0.85,
    });

    if (!result.canceled && result.assets?.[0]?.uri) {
@@ -214,7 +318,7 @@ export default function AppRoot() {

  function createTrip() {
    if (!tripForm.name.trim()) {
-      Alert.alert('Missing name', 'Trip name is required.');
+      showAlert('Missing name', 'Trip name is required.');
      return false;
    }

@@ -222,12 +326,12 @@ export default function AppRoot() {
    const end = parseYMD(tripForm.endDate);

    if (!start || !end) {
-      Alert.alert('Invalid dates', 'Please select valid trip dates.');
+      showAlert('Invalid dates', 'Please select valid trip dates.');
      return false;
    }

    if (start > end) {
-      Alert.alert('Invalid dates', 'Start date cannot be after end date.');
+      showAlert('Invalid dates', 'Start date cannot be after end date.');
      return false;
    }

@@ -245,7 +349,7 @@ export default function AppRoot() {
            location: tripForm.location.trim(),
            startDate: tripForm.startDate,
            endDate: tripForm.endDate,
-            imageUri: tripForm.imageUri,
+            imageUri: '',
            archived: false,
            createdAt: now,
            updatedAt: now,
@@ -283,7 +387,7 @@ export default function AppRoot() {

  function saveTripEdits(tripId, patch) {
    if (!patch.name.trim()) {
-      Alert.alert('Missing name', 'Trip name is required.');
+      showAlert('Missing name', 'Trip name is required.');
      return false;
    }

@@ -291,12 +395,12 @@ export default function AppRoot() {
    const end = parseYMD(patch.endDate);

    if (!start || !end) {
-      Alert.alert('Invalid dates', 'Please select valid trip dates.');
+      showAlert('Invalid dates', 'Please select valid trip dates.');
      return false;
    }

    if (start > end) {
-      Alert.alert('Invalid dates', 'Start date cannot be after end date.');
+      showAlert('Invalid dates', 'Start date cannot be after end date.');
      return false;
    }

@@ -310,7 +414,6 @@ export default function AppRoot() {
              location: patch.location.trim(),
              startDate: patch.startDate,
              endDate: patch.endDate,
-              imageUri: patch.imageUri,
              updatedAt: Date.now(),
            }
          : trip
@@ -338,30 +441,29 @@ export default function AppRoot() {
  }

  function deleteTrip(tripId) {
-    Alert.alert('Delete trip?', 'Trip items and check-up history will also be deleted.', [
-      { text: 'Cancel', style: 'cancel' },
-      {
-        text: 'Delete',
-        style: 'destructive',
-        onPress: () => {
-          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];
+    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,
-            };
-          });
-        },
+          return {
+            ...prev,
+            trips,
+            itemsByTrip,
+            checkupsByTrip,
+            defaultTemplateTripId: prev.defaultTemplateTripId === tripId ? null : prev.defaultTemplateTripId,
+          };
+        });
      },
-    ]);
+    });
  }

  function openAddItemModal() {
@@ -370,27 +472,39 @@ export default function AppRoot() {
  }

  function openEditItemModal(item) {
+    const existingPlacement = item.placement || 'suitcase';
+    const hasPresetPlacement = ITEM_PLACEMENTS.includes(existingPlacement);
+
    setItemForm({
      id: item.id,
      name: item.name || '',
      description: item.description || '',
      category: item.category || '',
      status: item.status || 'unpacked',
-      placement: item.placement || 'suitcase',
+      placement: hasPresetPlacement ? existingPlacement : 'other',
+      placementCustom: hasPresetPlacement || existingPlacement === 'other' ? '' : existingPlacement,
      lentTo: item.lentTo || '',
      imageUri: item.imageUri || '',
+      imageQuality: item.imageQuality || 'balanced',
+      imageAllowCrop: !!item.imageAllowCrop,
    });
    setItemModalVisible(true);
  }

  function saveItemFromModal() {
    if (!selectedTripId) {
-      Alert.alert('No trip selected', 'Please select or create a trip first.');
+      showAlert('No trip selected', 'Please select or create a trip first.');
      return;
    }

    if (!itemForm.name.trim()) {
-      Alert.alert('Missing name', 'Item name is required.');
+      showAlert('Missing name', 'Item name is required.');
+      return;
+    }
+
+    const resolvedPlacement = itemForm.placement === 'other' ? itemForm.placementCustom.trim() : itemForm.placement;
+    if (!resolvedPlacement) {
+      showAlert('Missing location', 'Please enter a custom location for "other".');
      return;
    }

@@ -405,9 +519,11 @@ export default function AppRoot() {
        description: itemForm.description.trim(),
        category: itemForm.category.trim(),
        status: itemForm.status,
-        placement: itemForm.placement,
+        placement: resolvedPlacement,
        lentTo: itemForm.status === 'lent-to' ? itemForm.lentTo.trim() : '',
        imageUri: itemForm.imageUri,
+        imageQuality: itemForm.imageQuality,
+        imageAllowCrop: itemForm.imageAllowCrop,
        createdAt: existingCreatedAt,
        updatedAt: now,
      };
@@ -491,17 +607,26 @@ export default function AppRoot() {

  function deleteCheckup(checkupId) {
    if (!selectedTripId) return;
-    setData((prev) => {
-      const existing = prev.checkupsByTrip[selectedTripId] || [];
-      return {
-        ...prev,
-        checkupsByTrip: {
-          ...prev.checkupsByTrip,
-          [selectedTripId]: existing.filter((checkup) => checkup.id !== checkupId),
-        },
-      };
+
+    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));
+      },
    });
-    setSelectedCheckupId((prev) => (prev === checkupId ? null : prev));
  }

  function createFreshCheckupSession() {
@@ -514,11 +639,11 @@ export default function AppRoot() {

  function startCheckupFlow() {
    if (!selectedTripId) {
-      Alert.alert('No trip selected', 'Please select a trip first.');
+      showAlert('No trip selected', 'Please select a trip first.');
      return;
    }
    if (!selectedTripItems.length) {
-      Alert.alert('No items', 'Add items before starting a check-up.');
+      showAlert('No items', 'Add items before starting a check-up.');
      return;
    }

@@ -542,6 +667,28 @@ export default function AppRoot() {
    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;
@@ -555,9 +702,14 @@ export default function AppRoot() {
  function openCurrentCheckupNo() {
    const entry = checkupCurrentEntry;
    if (!entry) return;
+
+    const existingPlacement = entry.current.placement || 'suitcase';
+    const hasPresetPlacement = ITEM_PLACEMENTS.includes(existingPlacement);
+
    setCheckupNoForm({
      status: entry.current.status || 'unpacked',
-      placement: entry.current.placement || 'suitcase',
+      placement: hasPresetPlacement ? existingPlacement : 'other',
+      placementCustom: hasPresetPlacement || existingPlacement === 'other' ? '' : existingPlacement,
      lentTo: entry.current.lentTo || '',
      updateMasterList: false,
    });
@@ -568,9 +720,15 @@ export default function AppRoot() {
    const entry = checkupCurrentEntry;
    if (!entry) return;

+    const resolvedPlacement = checkupNoForm.placement === 'other' ? checkupNoForm.placementCustom.trim() : checkupNoForm.placement;
+    if (!resolvedPlacement) {
+      showAlert('Missing location', 'Please enter a custom location for "other".');
+      return;
+    }
+
    const patch = {
      status: checkupNoForm.status,
-      placement: checkupNoForm.placement,
+      placement: resolvedPlacement,
      lentTo: checkupNoForm.status === 'lent-to' ? checkupNoForm.lentTo.trim() : '',
    };

@@ -615,18 +773,18 @@ export default function AppRoot() {

  function saveCheckupSnapshot(sessionToSave) {
    if (!selectedTripId) {
-      Alert.alert('No trip selected', 'Please select a trip first.');
+      showAlert('No trip selected', 'Please select a trip first.');
      return false;
    }

    if (!sessionToSave.length) {
-      Alert.alert('No items', 'Add items before creating a check-up.');
+      showAlert('No items', 'Add items before creating a check-up.');
      return false;
    }

    const pending = sessionToSave.filter((entry) => !entry.confirmed).length;
    if (pending > 0) {
-      Alert.alert('Incomplete', `Please confirm all items first (${pending} remaining).`);
+      showAlert('Incomplete', `Please confirm all items first (${pending} remaining).`);
      return false;
    }

@@ -669,7 +827,7 @@ export default function AppRoot() {
    const ok = saveCheckupSnapshot(checkupSession);
    if (!ok) return;

-    Alert.alert('Saved', 'Check-up snapshot saved.');
+    showAlert('Saved', 'Check-up snapshot saved.');
    closeCheckupFlow();
    createFreshCheckupSession();
  }
@@ -685,12 +843,77 @@ export default function AppRoot() {
    }, 80);
  }

-  if (!loaded) {
+  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.muted}>Loading local data...</Text>
+          <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>
    );
@@ -713,23 +936,10 @@ export default function AppRoot() {
            <TripsTab
              tripForm={tripForm}
              updateTripForm={updateTripForm}
-              pickTripImage={(onPicked) =>
-                pickImage((uri) => {
-                  if (typeof onPicked === 'function') onPicked(uri);
-                  else updateTripForm('imageUri', uri);
-                })
-              }
-              takeTripImage={(onPicked) =>
-                takeImage((uri) => {
-                  if (typeof onPicked === 'function') onPicked(uri);
-                  else updateTripForm('imageUri', uri);
-                })
-              }
              templateTrip={templateTrip}
              createTrip={createTrip}
              trips={data.trips}
              selectedTripId={selectedTripId}
-              chooseTrip={setSelectedTripId}
              setTripAsTemplate={setTripAsTemplate}
              saveTripEdits={saveTripEdits}
              setTripArchived={setTripArchived}
@@ -739,6 +949,7 @@ export default function AppRoot() {
              openDatePicker={openDatePicker}
              activeTripItemCount={selectedTripItems.length}
              activeTripCheckupCount={selectedTripCheckups.length}
+              openBackupModal={openBackupModal}
            />
          )}

@@ -775,7 +986,7 @@ export default function AppRoot() {
        </ScrollView>
      </KeyboardAvoidingView>

-      <BottomTab current={tab} onChange={setTab} />
+      <BottomTab current={tab} onChange={setTab} onAddItem={openQuickAddItemFromNav} canAddItem={!!selectedTripId} />

      <DatePickerModal
        visible={datePicker.visible}
@@ -788,10 +999,11 @@ export default function AppRoot() {
      <ItemModal
        visible={itemModalVisible}
        itemForm={itemForm}
+        previousCustomPlacements={previousCustomPlacements}
        setItemModalVisible={setItemModalVisible}
        updateItemForm={updateItemForm}
-        pickItemImage={() => pickImage((uri) => updateItemForm('imageUri', uri))}
-        takeItemImage={() => takeImage((uri) => updateItemForm('imageUri', uri))}
+        pickItemImage={(options) => pickImage((uri) => updateItemForm('imageUri', uri), options)}
+        takeItemImage={(options) => takeImage((uri) => updateItemForm('imageUri', uri), options)}
        saveItemFromModal={saveItemFromModal}
      />

@@ -807,8 +1019,27 @@ export default function AppRoot() {
        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>
  );
 }
--- a/src/components/AppDialogModal.js
+++ b/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>
+  );
+}
--- a/src/components/BottomTab.js
+++ b/src/components/BottomTab.js
@@ -3,10 +3,23 @@ import { Pressable, Text, View } from 'react-native';
 import Ionicons from '@expo/vector-icons/Ionicons';
 import { styles } from '../styles';

-export default function BottomTab({ current, onChange }) {
-  const tabs = [
+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' },
  ];
@@ -14,19 +27,25 @@ export default function BottomTab({ current, onChange }) {
  return (
    <View style={styles.tabBarWrap}>
      <View style={styles.tabBar}>
-        {tabs.map((tab) => {
-          const active = current === tab.key;
-          return (
-            <Pressable key={tab.key} 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>
-          );
-        })}
+        <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>
  );
--- a/src/components/ItemCard.js
+++ b/src/components/ItemCard.js
@@ -2,26 +2,40 @@ 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 }) {
+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}>{item.name}</Text>
-            <Text style={styles.itemMeta}>{item.category || 'uncategorized'} · {item.status}</Text>
+            <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}>Lent to: {item.lentTo}</Text> : null}
-            {!!item.description ? <Text style={styles.itemMeta}>{item.description}</Text> : null}
+            {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)}>
@@ -35,14 +49,12 @@ export default function ItemCard({ item, onEdit, onDelete, onQuickPack, onQuickU

        <View style={styles.quickStatusRow}>
          <Pressable style={[styles.quickStatusBtn, isPacked && styles.quickStatusBtnActive]} onPress={onQuickPack}>
-            <Text style={[styles.quickStatusBtnText, isPacked && styles.quickStatusBtnTextActive]}>Pack</Text>
+            <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]}>Unpack</Text>
+            <Text style={[styles.quickStatusBtnText, isUnpacked && styles.quickStatusBtnTextActive]}>Unpacked</Text>
          </Pressable>
        </View>
-
-        {item.imageUri ? <Image source={{ uri: item.imageUri }} style={styles.previewImageSmall} /> : null}
      </View>
    </View>
  );
--- a/src/modals/BackupModal.js
+++ b/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>
+  );
+}
--- a/src/modals/CheckupFlowModal.js
+++ b/src/modals/CheckupFlowModal.js
@@ -4,6 +4,7 @@ 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,
@@ -17,6 +18,8 @@ export default function CheckupFlowModal({
  onYes,
  onNo,
  onSaveNo,
+  onSkip,
+  onBack,
  onFinish,
 }) {
  const finished = !entry;
@@ -37,9 +40,14 @@ export default function CheckupFlowModal({
              <View style={styles.section}>
                <Text style={styles.cardTitle}>Done. Save this snapshot?</Text>
                <Text style={styles.cardMeta}>All {total} items were checked.</Text>
-                <Pressable style={styles.primaryBtn} onPress={onFinish}>
-                  <Text style={styles.primaryBtnText}>Save Check-Up Snapshot</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={onFinish}>
+                    <Text style={styles.primaryBtnText}>Save Snapshot</Text>
+                  </Pressable>
+                </View>
              </View>
            ) : (
              <ScrollView
@@ -51,15 +59,25 @@ export default function CheckupFlowModal({
                <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: {entry.current.status} · {entry.current.placement}
-                  {entry.current.status === 'lent-to' && entry.current.lentTo ? ` · ${entry.current.lentTo}` : ''}
+                  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>
@@ -85,6 +103,18 @@ export default function CheckupFlowModal({
                      />
                    </Field>

+                    {noForm.placement === 'other' ? (
+                      <Field label="Custom location">
+                        <TextInput
+                          style={styles.input}
+                          value={noForm.placementCustom}
+                          onChangeText={(v) => setNoForm((prev) => ({ ...prev, placementCustom: v }))}
+                          placeholder="bath-kit"
+                          placeholderTextColor="#6b7280"
+                        />
+                      </Field>
+                    ) : null}
+
                    {noForm.status === 'lent-to' ? (
                      <Field label="Lent to">
                        <TextInput
@@ -106,9 +136,14 @@ export default function CheckupFlowModal({
                      </Text>
                    </Pressable>

-                    <Pressable style={styles.primaryBtn} onPress={onSaveNo}>
-                      <Text style={styles.primaryBtnText}>Save update + next</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>
--- a/src/modals/ItemModal.js
+++ b/src/modals/ItemModal.js
@@ -5,15 +5,27 @@ 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,
+  previousCustomPlacements,
  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}>
@@ -70,6 +82,27 @@ export default function ItemModal({
                <ChipGroup options={ITEM_PLACEMENTS} value={itemForm.placement} onChange={(v) => updateItemForm('placement', v)} />
              </Field>

+              {itemForm.placement === 'other' ? (
+                <Field label="Custom location">
+                  <TextInput
+                    style={styles.input}
+                    value={itemForm.placementCustom}
+                    onChangeText={(v) => updateItemForm('placementCustom', v)}
+                    placeholder="bath-kit"
+                    placeholderTextColor="#6b7280"
+                  />
+                  {previousCustomPlacements?.length ? (
+                    <View style={styles.chipGroup}>
+                      {previousCustomPlacements.slice(0, 6).map((location) => (
+                        <Pressable key={location} style={styles.chip} onPress={() => updateItemForm('placementCustom', location)}>
+                          <Text style={styles.chipText}>{location}</Text>
+                        </Pressable>
+                      ))}
+                    </View>
+                  ) : null}
+                </Field>
+              ) : null}
+
              {itemForm.status === 'lent-to' ? (
                <Field label="Lent to">
                  <TextInput
@@ -82,11 +115,28 @@ export default function ItemModal({
                </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}>
+                <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}>
+                <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={() => pickItemImage(mediaOptions)}>
                  <Text style={styles.secondaryBtnText}>{itemForm.imageUri ? 'From gallery (change)' : 'From gallery'}</Text>
                </Pressable>
              </View>
--- a/src/styles.js
+++ b/src/styles.js
@@ -10,10 +10,10 @@ export const styles = StyleSheet.create({
    flex: 1,
  },
  content: {
-    paddingHorizontal: 16,
-    paddingTop: 12,
-    paddingBottom: TAB_BAR_HEIGHT + 22,
-    gap: 14,
+    paddingHorizontal: 14,
+    paddingTop: 10,
+    paddingBottom: TAB_BAR_HEIGHT + 20,
+    gap: 10,
  },
  statusSpacer: {
    height: Platform.OS === 'android' ? 8 : 0,
@@ -26,6 +26,28 @@ export const styles = StyleSheet.create({
  muted: {
    color: '#8793a5',
  },
+  loadingEmoji: {
+    fontSize: 52,
+    marginBottom: 8,
+  },
+  loadingTitle: {
+    color: '#f8fafc',
+    fontWeight: '700',
+    fontSize: 17,
+    marginBottom: 10,
+  },
+  loadingBarTrack: {
+    width: 220,
+    height: 10,
+    borderRadius: 999,
+    backgroundColor: '#1e293b',
+    overflow: 'hidden',
+    marginBottom: 8,
+  },
+  loadingBarFill: {
+    height: '100%',
+    backgroundColor: '#2563eb',
+  },

  tripPickerWrap: {
    marginBottom: 6,
@@ -64,7 +86,7 @@ export const styles = StyleSheet.create({
  },

  section: {
-    gap: 12,
+    gap: 10,
  },
  sectionTitle: {
    color: '#f1f5f9',
@@ -83,8 +105,8 @@ export const styles = StyleSheet.create({
    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#1f2937',
-    padding: 12,
-    gap: 8,
+    padding: 10,
+    gap: 6,
  },
  cardActive: {
    borderColor: '#60a5fa',
@@ -98,12 +120,12 @@ export const styles = StyleSheet.create({
    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#1e293b',
-    padding: 12,
-    gap: 10,
+    padding: 10,
+    gap: 8,
  },
  cardRow: {
    flexDirection: 'row',
-    gap: 10,
+    gap: 8,
  },
  cardTitle: {
    color: '#f8fafc',
@@ -112,8 +134,8 @@ export const styles = StyleSheet.create({
  },
  cardMeta: {
    color: '#94a3b8',
-    marginTop: 3,
-    fontSize: 13,
+    marginTop: 2,
+    fontSize: 12,
  },
  tripHistoryLabel: {
    color: '#93c5fd',
@@ -126,8 +148,8 @@ export const styles = StyleSheet.create({
    borderRadius: 18,
    borderWidth: 1,
    borderColor: '#334155',
-    padding: 12,
-    gap: 8,
+    padding: 10,
+    gap: 6,
  },
  tripHeroImage: {
    width: '100%',
@@ -138,7 +160,7 @@ export const styles = StyleSheet.create({
  tripHeroTitle: {
    color: '#f8fafc',
    fontWeight: '800',
-    fontSize: 22,
+    fontSize: 20,
  },
  tripListTitle: {
    color: '#cbd5e1',
@@ -164,6 +186,19 @@ export const styles = StyleSheet.create({
    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',
@@ -255,19 +290,19 @@ export const styles = StyleSheet.create({
  },

  stackButtons: {
-    gap: 7,
+    gap: 6,
  },
  miniBtn: {
    backgroundColor: '#1e293b',
    borderRadius: 8,
-    paddingVertical: 7,
-    paddingHorizontal: 10,
+    paddingVertical: 6,
+    paddingHorizontal: 9,
  },
  miniBtnDanger: {
    backgroundColor: '#3b1d22',
    borderRadius: 8,
-    paddingVertical: 7,
-    paddingHorizontal: 10,
+    paddingVertical: 6,
+    paddingHorizontal: 9,
  },
  miniBtnText: {
    color: '#e2e8f0',
@@ -282,14 +317,39 @@ export const styles = StyleSheet.create({
    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: 12,
-    gap: 8,
+    padding: 8,
+    gap: 6,
  },
  itemTitle: {
    color: '#f8fafc',
@@ -298,17 +358,17 @@ export const styles = StyleSheet.create({
  },
  itemMeta: {
    color: '#94a3b8',
-    marginTop: 2,
-    fontSize: 13,
+    marginTop: 1,
+    fontSize: 12,
  },
  quickStatusRow: {
    flexDirection: 'row',
-    gap: 8,
-    marginTop: 2,
+    gap: 6,
+    marginTop: 1,
  },
  quickStatusBtn: {
-    paddingVertical: 6,
-    paddingHorizontal: 12,
+    paddingVertical: 5,
+    paddingHorizontal: 10,
    borderRadius: 999,
    borderWidth: 1,
    borderColor: '#334155',
@@ -321,7 +381,7 @@ export const styles = StyleSheet.create({
  quickStatusBtnText: {
    color: '#cbd5e1',
    fontWeight: '700',
-    fontSize: 12,
+    fontSize: 11,
  },
  quickStatusBtnTextActive: {
    color: '#dbeafe',
@@ -357,6 +417,19 @@ export const styles = StyleSheet.create({
    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,
@@ -444,10 +517,39 @@ export const styles = StyleSheet.create({
    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: 0,
+    bottom: 6,
    left: 0,
    right: 0,
    paddingHorizontal: 10,
@@ -462,17 +564,38 @@ export const styles = StyleSheet.create({
    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: 4,
-    minWidth: 62,
+    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: 12,
+    fontSize: 11,
    fontWeight: '600',
  },
  tabLabelActive: {
@@ -484,6 +607,59 @@ export const styles = StyleSheet.create({
    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%',
@@ -497,8 +673,8 @@ export const styles = StyleSheet.create({
    borderRadius: 20,
    borderWidth: 1,
    borderColor: '#1e293b',
-    padding: 16,
-    gap: 10,
+    padding: 14,
+    gap: 8,
  },
  closeText: {
    color: '#93c5fd',
--- a/src/tabs/HistoryTab.js
+++ b/src/tabs/HistoryTab.js
@@ -1,25 +1,9 @@
 import React from 'react';
-import { Alert, Pressable, Text, View } from 'react-native';
+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,
-}) {
-  function askDelete(checkup) {
-    Alert.alert('Delete check-up?', 'This snapshot will be removed from history.', [
-      { text: 'Cancel', style: 'cancel' },
-      {
-        text: 'Delete',
-        style: 'destructive',
-        onPress: () => onDeleteCheckup(checkup.id),
-      },
-    ]);
-  }
-
+export default function HistoryTab({ selectedTrip, selectedTripCheckups, selectedCheckupId, setSelectedCheckupId, onDeleteCheckup }) {
  return (
    <View style={styles.section}>
      <Text style={styles.sectionTitle}>History</Text>
@@ -32,7 +16,7 @@ export default function HistoryTab({
        <View key={checkup.id} style={styles.cardSoft}>
          <Pressable
            onPress={() => setSelectedCheckupId((prev) => (prev === checkup.id ? null : checkup.id))}
-            onLongPress={() => askDelete(checkup)}
+            onLongPress={() => onDeleteCheckup(checkup.id)}
            delayLongPress={280}
          >
            <Text style={styles.cardTitle}>{new Date(checkup.createdAt).toLocaleString()}</Text>
@@ -49,8 +33,7 @@ export default function HistoryTab({
                <View key={entry.itemId} style={styles.snapshotRow}>
                  <Text style={styles.snapshotTitle}>{entry.name}</Text>
                  <Text style={styles.cardMeta}>
-                    {entry.status} · {entry.placement}
-                    {entry.status === 'lent-to' && entry.lentTo ? ` · ${entry.lentTo}` : ''}
+                    {formatStatusLabel(entry.status, entry.lentTo)} · {entry.placement}
                  </Text>
                </View>
              ))}
--- a/src/tabs/ItemsTab.js
+++ b/src/tabs/ItemsTab.js
@@ -1,8 +1,9 @@
 import React, { useMemo, useState } from 'react';
-import { Pressable, Text, View } from 'react-native';
+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,
@@ -15,25 +16,35 @@ export default function ItemsTab({
 }) {
  const [statusFilter, setStatusFilter] = useState('all');
  const [categoryFilter, setCategoryFilter] = useState('all');
+  const [locationFilter, setLocationFilter] = 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 locations = useMemo(
+    () => Array.from(new Set(selectedTripItems.map((item) => item.placement?.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 itemLocation = item.placement?.trim() || '';
        const matchCategory = categoryFilter === 'all' || itemCategory === categoryFilter;
-        return matchStatus && matchCategory;
+        const matchLocation = locationFilter === 'all' || itemLocation === locationFilter;
+        return matchStatus && matchCategory && matchLocation;
      }),
-    [selectedTripItems, statusFilter, categoryFilter]
+    [selectedTripItems, statusFilter, categoryFilter, locationFilter]
  );

  const filterStatusOptions = ['all', ...ITEM_STATUSES];
  const filterCategoryOptions = ['all', ...categories];
+  const filterLocationOptions = ['all', ...locations];

  return (
    <View style={styles.section}>
@@ -52,10 +63,10 @@ export default function ItemsTab({
          <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 shown ({filteredItems.length})</Text>
+              <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 shown ({filteredItems.length})</Text>
+              <Text style={styles.secondaryBtnText}>Unpack All ({filteredItems.length})</Text>
            </Pressable>
          </View>
        </View>
@@ -71,7 +82,7 @@ export default function ItemsTab({
              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}</Text>
+                  <Text style={[styles.chipText, active && styles.chipTextActive]}>{status === 'all' ? formatFilterLabel(status) : formatStatusLabel(status)}</Text>
                </Pressable>
              );
            })}
@@ -83,7 +94,19 @@ export default function ItemsTab({
              const active = categoryFilter === category;
              return (
                <Pressable key={category} style={[styles.chip, active && styles.chipActive]} onPress={() => setCategoryFilter(category)}>
-                  <Text style={[styles.chipText, active && styles.chipTextActive]}>{category}</Text>
+                  <Text style={[styles.chipText, active && styles.chipTextActive]}>{formatFilterLabel(category)}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
+
+          <Text style={styles.cardMeta}>Location</Text>
+          <View style={styles.chipGroup}>
+            {filterLocationOptions.map((location) => {
+              const active = locationFilter === location;
+              return (
+                <Pressable key={location} style={[styles.chip, active && styles.chipActive]} onPress={() => setLocationFilter(location)}>
+                  <Text style={[styles.chipText, active && styles.chipTextActive]}>{formatFilterLabel(location)}</Text>
                </Pressable>
              );
            })}
@@ -99,10 +122,20 @@ export default function ItemsTab({
          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>
  );
 }
--- a/src/tabs/TripsTab.js
+++ b/src/tabs/TripsTab.js
@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { Image, KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+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';
@@ -19,19 +19,15 @@ const emptyEditForm = {
  location: '',
  startDate: '',
  endDate: '',
-  imageUri: '',
 };

 export default function TripsTab({
  tripForm,
  updateTripForm,
-  pickTripImage,
-  takeTripImage,
  templateTrip,
  createTrip,
  trips,
  selectedTripId,
-  chooseTrip,
  setTripAsTemplate,
  saveTripEdits,
  setTripArchived,
@@ -41,6 +37,7 @@ export default function TripsTab({
  openDatePicker,
  activeTripItemCount,
  activeTripCheckupCount,
+  openBackupModal,
 }) {
  const [createModalVisible, setCreateModalVisible] = useState(false);
  const [viewTripId, setViewTripId] = useState(null);
@@ -68,7 +65,6 @@ export default function TripsTab({
      location: trip.location || '',
      startDate: trip.startDate || '',
      endDate: trip.endDate || '',
-      imageUri: trip.imageUri || '',
    });
  }

@@ -83,14 +79,6 @@ export default function TripsTab({
    setEditMode(false);
  }

-  function pickViewTripImage() {
-    pickTripImage((uri) => updateEditForm('imageUri', uri));
-  }
-
-  function takeViewTripImage() {
-    takeTripImage((uri) => updateEditForm('imageUri', uri));
-  }
-
  function applyTemplateFromView() {
    if (!viewingTrip) return;
    setTripAsTemplate(viewingTrip.id);
@@ -117,14 +105,18 @@ export default function TripsTab({
    <View style={styles.section}>
      <View style={styles.sectionRow}>
        <Text style={styles.sectionTitle}>Trips</Text>
-        <Pressable style={styles.primaryBtnTight} onPress={() => setCreateModalVisible(true)}>
-          <Text style={styles.primaryBtnText}>+ New Trip</Text>
-        </Pressable>
+        <View 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}>
-          {activeTrip.imageUri ? <Image source={{ uri: activeTrip.imageUri }} style={styles.tripHeroImage} /> : null}
          <Text style={styles.tripHeroTitle}>{activeTrip.name}</Text>
          <Text style={styles.cardMeta}>{activeTrip.location || 'No location'} · {activeTrip.startDate} → {activeTrip.endDate}</Text>
          <Text style={styles.cardMeta}>{activeTripItemCount} items · {activeTripCheckupCount} check-ups</Text>
@@ -144,18 +136,14 @@ export default function TripsTab({
              <View style={styles.flex}>
                <Text style={styles.cardTitle}>{trip.name}</Text>
                <Text style={styles.cardMeta}>{trip.location || 'No location'} · {trip.startDate} → {trip.endDate}</Text>
-                <Text style={styles.cardMeta}>{defaultTemplateTripId === trip.id ? 'Default template' : ' '}</Text>
+                {defaultTemplateTripId === trip.id ? <Text style={styles.cardMeta}>Default template</Text> : null}
              </View>
              <View style={styles.stackButtons}>
-                <Pressable style={styles.miniBtn} onPress={() => chooseTrip(trip.id)}>
-                  <Text style={styles.miniBtnText}>Select</Text>
-                </Pressable>
                <Pressable style={styles.miniBtn} onPress={() => openView(trip.id)}>
                  <Text style={styles.miniBtnText}>View</Text>
                </Pressable>
              </View>
            </View>
-            {trip.imageUri ? <Image source={{ uri: trip.imageUri }} style={styles.previewImageSmall} /> : null}
          </View>
        ))}

@@ -226,17 +214,6 @@ export default function TripsTab({
                <DateField label="Start Date" value={tripForm.startDate} onPress={() => openDatePicker('startDate')} />
                <DateField label="End Date" value={tripForm.endDate} onPress={() => openDatePicker('endDate')} />

-                <View style={styles.actionRow}>
-                  <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={takeTripImage}>
-                    <Text style={styles.secondaryBtnText}>Take photo</Text>
-                  </Pressable>
-                  <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={pickTripImage}>
-                    <Text style={styles.secondaryBtnText}>{tripForm.imageUri ? 'From gallery (change)' : 'From gallery'}</Text>
-                  </Pressable>
-                </View>
-
-                {tripForm.imageUri ? <Image source={{ uri: tripForm.imageUri }} style={styles.previewImage} /> : null}
-
                {templateTrip ? (
                  <Pressable style={styles.inlineToggle} onPress={() => updateTripForm('copyDefaultTemplate', !tripForm.copyDefaultTemplate)}>
                    <Text style={styles.inlineToggleText}>
@@ -283,7 +260,6 @@ export default function TripsTab({
                >
                  {!editMode ? (
                    <>
-                      {viewingTrip.imageUri ? <Image source={{ uri: viewingTrip.imageUri }} style={styles.previewImage} /> : null}
                      <Text style={styles.tripHeroTitle}>{viewingTrip.name}</Text>
                      <Text style={styles.cardMeta}>{viewingTrip.location || 'No location'}</Text>
                      <Text style={styles.cardMeta}>{viewingTrip.startDate} → {viewingTrip.endDate}</Text>
@@ -333,17 +309,6 @@ export default function TripsTab({
                      <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' })} />

-                      <View style={styles.actionRow}>
-                        <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={takeViewTripImage}>
-                          <Text style={styles.secondaryBtnText}>Take photo</Text>
-                        </Pressable>
-                        <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={pickViewTripImage}>
-                          <Text style={styles.secondaryBtnText}>{editForm.imageUri ? 'From gallery (change)' : 'From gallery'}</Text>
-                        </Pressable>
-                      </View>
-
-                      {editForm.imageUri ? <Image source={{ uri: editForm.imageUri }} style={styles.previewImage} /> : null}
-
                      <Pressable style={styles.primaryBtn} onPress={saveEditFromView}>
                        <Text style={styles.primaryBtnText}>Save Trip</Text>
                      </Pressable>
--- a/src/utils/labels.js
+++ b/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);
+}
Author	SHA1	Message	Date
Luna	e1bfbdbf1e	feat(#17,#18): add location filter and custom-location autofill All checks were successful Luggage List Build / build-web (push) Successful in 52s Details Luggage List Build / build-android (push) Successful in 7m2s Details Luggage List Build / release (push) Successful in 17s Details	2026-04-18 21:59:23 +02:00
Luna	063e5090ed	feat(#16 ): support custom placement when selecting other All checks were successful Luggage List Build / build-web (push) Successful in 40s Details Luggage List Build / build-android (push) Successful in 7m26s Details Luggage List Build / release (push) Successful in 15s Details	2026-04-18 21:41:18 +02:00
Luna	354a13e9a9	fix(#14,#15): reduce UI clutter and rename status actions All checks were successful Luggage List Build / build-web (push) Successful in 29s Details Luggage List Build / build-android (push) Successful in 6m27s Details Luggage List Build / release (push) Successful in 18s Details	2026-04-18 21:32:12 +02:00
Luna	4018e97476	feat(#13 ): open item images in full-screen preview modal All checks were successful Luggage List Build / build-web (push) Successful in 29s Details Luggage List Build / build-android (push) Successful in 5m42s Details Luggage List Build / release (push) Successful in 11s Details	2026-04-18 19:45:53 +02:00
Luna	1e0eb7aee9	fix(#12 ): remove Select action from trips list Some checks failed Luggage List Build / release (push) Has been cancelled Details Luggage List Build / build-android (push) Has been cancelled Details Luggage List Build / build-web (push) Has been cancelled Details	2026-04-18 19:45:46 +02:00
Luna	a9ee91daf3	feat(#3,#4,#7): add backup/restore, polish labels, and rename bulk actions All checks were successful Luggage List Build / build-android (push) Successful in 5m45s Details Luggage List Build / build-web (push) Successful in 29s Details Luggage List Build / release (push) Successful in 14s Details	2026-04-18 19:30:03 +02:00
Luna	0e0ab4a059	feat(#1,#2,#5): add checkup nav/progress, image optimization controls, and raise tab bar Some checks failed Luggage List Build / build-web (push) Successful in 31s Details Luggage List Build / build-android (push) Failing after 1m46s Details Luggage List Build / release (push) Has been skipped Details	2026-04-18 18:45:21 +02:00
Luna	89fd4c2f44	feat(#6 ): add randomized fake startup loader with suitcase progress All checks were successful Luggage List Build / build-web (push) Successful in 41s Details Luggage List Build / build-android (push) Successful in 7m54s Details Luggage List Build / release (push) Successful in 13s Details	2026-04-18 18:32:34 +02:00
Luna	fbdae66c9b	feat(#8 ): make item thumbnails smaller and left-aligned All checks were successful Luggage List Build / build-web (push) Successful in 29s Details Luggage List Build / build-android (push) Successful in 6m12s Details Luggage List Build / release (push) Successful in 12s Details	2026-04-18 18:25:54 +02:00
Luna	e8ffab355e	feat(#9 ): remove trip image controls and displays from UI	2026-04-18 18:25:49 +02:00
Luna	2ec877362f	feat: add centered quick-add item button in bottom nav All checks were successful Luggage List Build / build-web (push) Successful in 29s Details Luggage List Build / build-android (push) Successful in 5m59s Details Luggage List Build / release (push) Successful in 11s Details	2026-04-18 18:13:28 +02:00
Luna	fb54db0619	feat: replace native alerts with custom dialog modals All checks were successful Luggage List Build / build-web (push) Successful in 27s Details Luggage List Build / build-android (push) Successful in 9m46s Details Luggage List Build / release (push) Successful in 21s Details	2026-04-18 15:20:25 +02:00
Luna	a93fec97dc	chore: limit CI triggers and move TODOs to Gitea issues Some checks failed Luggage List Build / build-android (push) Has been cancelled Details Luggage List Build / release (push) Has been cancelled Details Luggage List Build / build-web (push) Has been cancelled Details	2026-04-18 15:08:45 +02:00
Luna	86976d5c26	docs: rewrite latest requested UI polish tasks Some checks failed Luggage List Build / release (push) Has been cancelled Details Luggage List Build / build-android (push) Has been cancelled Details Luggage List Build / build-web (push) Has been cancelled Details	2026-04-18 15:05:46 +02:00