feat(#16): support custom placement when selecting other

src/AppRoot.js

@@ -9,11 +9,12 @@ 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';
 
@@ -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,
 });
@@ -83,6 +88,8 @@ export default function AppRoot() {
 
   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), []);
@@ -234,7 +241,7 @@ 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) {
       showAlert('Permission needed', 'Allow gallery access to select images.');
@@ -243,8 +250,8 @@ export default function AppRoot() {
 
     const result = await ImagePicker.launchImageLibraryAsync({
       mediaTypes: ImagePicker.MediaTypeOptions.Images,
-      allowsEditing: false,
+      allowsEditing: !!options.allowCrop,
-      quality: 0.85,
+      quality: typeof options.quality === 'number' ? options.quality : 0.85,
     });
 
     if (!result.canceled && result.assets?.[0]?.uri) {
@@ -252,7 +259,7 @@ export default function AppRoot() {
     }
   }
 
-  async function takeImage(onPicked) {
+  async function takeImage(onPicked, options = {}) {
     const perm = await ImagePicker.requestCameraPermissionsAsync();
     if (!perm.granted) {
       showAlert('Permission needed', 'Allow camera access to take photos.');
@@ -260,8 +267,8 @@ export default function AppRoot() {
     }
 
     const result = await ImagePicker.launchCameraAsync({
-      allowsEditing: false,
+      allowsEditing: !!options.allowCrop,
-      quality: 0.85,
+      quality: typeof options.quality === 'number' ? options.quality : 0.85,
     });
 
     if (!result.canceled && result.assets?.[0]?.uri) {
@@ -425,15 +432,21 @@ 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);
   }
@@ -449,6 +462,12 @@ export default function AppRoot() {
       return;
     }
 
+    const resolvedPlacement = itemForm.placement === 'other' ? itemForm.placementCustom.trim() : itemForm.placement;
+    if (!resolvedPlacement) {
+      showAlert('Missing location', 'Please enter a custom location for "other".');
+      return;
+    }
+
     const now = Date.now();
 
     setData((prev) => {
@@ -460,9 +479,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,
       };
@@ -606,6 +627,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;
@@ -619,9 +662,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,
     });
@@ -632,9 +680,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() : '',
     };
 
@@ -757,6 +811,58 @@ export default function AppRoot() {
     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 }]}>
@@ -794,7 +900,6 @@ export default function AppRoot() {
               createTrip={createTrip}
               trips={data.trips}
               selectedTripId={selectedTripId}
-              chooseTrip={setSelectedTripId}
               setTripAsTemplate={setTripAsTemplate}
               saveTripEdits={saveTripEdits}
               setTripArchived={setTripArchived}
@@ -804,6 +909,7 @@ export default function AppRoot() {
               openDatePicker={openDatePicker}
               activeTripItemCount={selectedTripItems.length}
               activeTripCheckupCount={selectedTripCheckups.length}
+              openBackupModal={openBackupModal}
             />
           )}
 
@@ -855,8 +961,8 @@ export default function AppRoot() {
         itemForm={itemForm}
         setItemModalVisible={setItemModalVisible}
         updateItemForm={updateItemForm}
-        pickItemImage={() => pickImage((uri) => updateItemForm('imageUri', uri))}
+        pickItemImage={(options) => pickImage((uri) => updateItemForm('imageUri', uri), options)}
-        takeItemImage={() => takeImage((uri) => updateItemForm('imageUri', uri))}
+        takeItemImage={(options) => takeImage((uri) => updateItemForm('imageUri', uri), options)}
         saveItemFromModal={saveItemFromModal}
       />
 
@@ -872,9 +978,20 @@ 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}

src/components/ItemCard.js

@@ -2,12 +2,13 @@ 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';
 
@@ -17,7 +18,9 @@ export default function ItemCard({ item, onEdit, onDelete, onQuickPack, onQuickU
 
       <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>
@@ -28,11 +31,11 @@ export default function ItemCard({ item, onEdit, onDelete, onQuickPack, onQuickU
       <View style={styles.itemMain}>
         <View style={styles.cardRow}>
           <View style={styles.flex}>
-            <Text style={styles.itemTitle}>{item.name}</Text>
+            <Text style={styles.itemTitle} numberOfLines={1}>{item.name}</Text>
-            <Text style={styles.itemMeta}>{item.category || 'uncategorized'} · {item.status}</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.status === 'lent-to' && !!item.lentTo ? <Text style={styles.itemMeta} numberOfLines={1}>Borrower: {item.lentTo}</Text> : null}
-            {!!item.description ? <Text style={styles.itemMeta}>{item.description}</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)}>
@@ -46,10 +49,10 @@ 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>
       </View>

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/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}>
+                <View style={styles.actionRow}>
-                  <Text style={styles.primaryBtnText}>Save Check-Up Snapshot</Text>
+                  <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}
+                  Current: {formatStatusLabel(entry.current.status, entry.current.lentTo)} · {entry.current.placement}
-                  {entry.current.status === 'lent-to' && entry.current.lentTo ? ` · ${entry.current.lentTo}` : ''}
                 </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}>
+                    <View style={styles.actionRow}>
-                      <Text style={styles.primaryBtnText}>Save update + next</Text>
+                      <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>

src/modals/ItemModal.js

@@ -5,6 +5,12 @@ 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,
@@ -14,6 +20,11 @@ export default function ItemModal({
   takeItemImage,
   saveItemFromModal,
 }) {
+  const mediaOptions = {
+    quality: qualityValue(itemForm.imageQuality),
+    allowCrop: !!itemForm.imageAllowCrop,
+  };
+
   return (
     <Modal visible={visible} animationType="slide" transparent>
       <View style={styles.modalBackdrop}>
@@ -70,6 +81,18 @@ 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"
+                  />
+                </Field>
+              ) : null}
+
               {itemForm.status === 'lent-to' ? (
                 <Field label="Lent to">
                   <TextInput
@@ -82,11 +105,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>

src/styles.js

@@ -10,10 +10,10 @@ export const styles = StyleSheet.create({
     flex: 1,
   },
   content: {
-    paddingHorizontal: 16,
+    paddingHorizontal: 14,
-    paddingTop: 12,
+    paddingTop: 10,
-    paddingBottom: TAB_BAR_HEIGHT + 22,
+    paddingBottom: TAB_BAR_HEIGHT + 20,
-    gap: 14,
+    gap: 10,
   },
   statusSpacer: {
     height: Platform.OS === 'android' ? 8 : 0,
@@ -86,7 +86,7 @@ export const styles = StyleSheet.create({
   },
 
   section: {
-    gap: 12,
+    gap: 10,
   },
   sectionTitle: {
     color: '#f1f5f9',
@@ -105,8 +105,8 @@ export const styles = StyleSheet.create({
     borderRadius: 16,
     borderWidth: 1,
     borderColor: '#1f2937',
-    padding: 12,
+    padding: 10,
-    gap: 8,
+    gap: 6,
   },
   cardActive: {
     borderColor: '#60a5fa',
@@ -120,12 +120,12 @@ export const styles = StyleSheet.create({
     borderRadius: 16,
     borderWidth: 1,
     borderColor: '#1e293b',
-    padding: 12,
+    padding: 10,
-    gap: 10,
+    gap: 8,
   },
   cardRow: {
     flexDirection: 'row',
-    gap: 10,
+    gap: 8,
   },
   cardTitle: {
     color: '#f8fafc',
@@ -134,8 +134,8 @@ export const styles = StyleSheet.create({
   },
   cardMeta: {
     color: '#94a3b8',
-    marginTop: 3,
+    marginTop: 2,
-    fontSize: 13,
+    fontSize: 12,
   },
   tripHistoryLabel: {
     color: '#93c5fd',
@@ -148,8 +148,8 @@ export const styles = StyleSheet.create({
     borderRadius: 18,
     borderWidth: 1,
     borderColor: '#334155',
-    padding: 12,
+    padding: 10,
-    gap: 8,
+    gap: 6,
   },
   tripHeroImage: {
     width: '100%',
@@ -160,7 +160,7 @@ export const styles = StyleSheet.create({
   tripHeroTitle: {
     color: '#f8fafc',
     fontWeight: '800',
-    fontSize: 22,
+    fontSize: 20,
   },
   tripListTitle: {
     color: '#cbd5e1',
@@ -186,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',
@@ -277,19 +290,19 @@ export const styles = StyleSheet.create({
   },
 
   stackButtons: {
-    gap: 7,
+    gap: 6,
   },
   miniBtn: {
     backgroundColor: '#1e293b',
     borderRadius: 8,
-    paddingVertical: 7,
+    paddingVertical: 6,
-    paddingHorizontal: 10,
+    paddingHorizontal: 9,
   },
   miniBtnDanger: {
     backgroundColor: '#3b1d22',
     borderRadius: 8,
-    paddingVertical: 7,
+    paddingVertical: 6,
-    paddingHorizontal: 10,
+    paddingHorizontal: 9,
   },
   miniBtnText: {
     color: '#e2e8f0',
@@ -311,18 +324,18 @@ export const styles = StyleSheet.create({
     alignSelf: 'stretch',
   },
   itemThumbWrap: {
-    paddingTop: 10,
+    paddingTop: 8,
-    paddingLeft: 10,
+    paddingLeft: 8,
   },
   itemThumbSmall: {
-    width: 46,
+    width: 42,
-    height: 46,
+    height: 42,
     borderRadius: 8,
     backgroundColor: '#0b1220',
   },
   itemThumbPlaceholder: {
-    width: 46,
+    width: 42,
-    height: 46,
+    height: 42,
     borderRadius: 8,
     backgroundColor: '#0b1220',
     alignItems: 'center',
@@ -331,12 +344,12 @@ export const styles = StyleSheet.create({
     borderColor: '#243244',
   },
   itemThumbPlaceholderText: {
-    fontSize: 18,
+    fontSize: 16,
   },
   itemMain: {
     flex: 1,
-    padding: 10,
+    padding: 8,
-    gap: 8,
+    gap: 6,
   },
   itemTitle: {
     color: '#f8fafc',
@@ -345,17 +358,17 @@ export const styles = StyleSheet.create({
   },
   itemMeta: {
     color: '#94a3b8',
-    marginTop: 2,
+    marginTop: 1,
-    fontSize: 13,
+    fontSize: 12,
   },
   quickStatusRow: {
     flexDirection: 'row',
-    gap: 8,
+    gap: 6,
-    marginTop: 2,
+    marginTop: 1,
   },
   quickStatusBtn: {
-    paddingVertical: 6,
+    paddingVertical: 5,
-    paddingHorizontal: 12,
+    paddingHorizontal: 10,
     borderRadius: 999,
     borderWidth: 1,
     borderColor: '#334155',
@@ -368,7 +381,7 @@ export const styles = StyleSheet.create({
   quickStatusBtnText: {
     color: '#cbd5e1',
     fontWeight: '700',
-    fontSize: 12,
+    fontSize: 11,
   },
   quickStatusBtnTextActive: {
     color: '#dbeafe',
@@ -404,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,
@@ -491,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,
@@ -521,8 +576,8 @@ export const styles = StyleSheet.create({
   tabItem: {
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 4,
+    gap: 3,
-    minWidth: 58,
+    minWidth: 56,
   },
   tabAddBtn: {
     width: 54,
@@ -540,7 +595,7 @@ export const styles = StyleSheet.create({
   },
   tabLabel: {
     color: '#94a3b8',
-    fontSize: 12,
+    fontSize: 11,
     fontWeight: '600',
   },
   tabLabelActive: {
@@ -618,8 +673,8 @@ export const styles = StyleSheet.create({
     borderRadius: 20,
     borderWidth: 1,
     borderColor: '#1e293b',
-    padding: 16,
+    padding: 14,
-    gap: 10,
+    gap: 8,
   },
   closeText: {
     color: '#93c5fd',

src/tabs/HistoryTab.js

@@ -1,6 +1,7 @@
 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 (
@@ -32,8 +33,7 @@ export default function HistoryTab({ selectedTrip, selectedTripCheckups, selecte
                 <View key={entry.itemId} style={styles.snapshotRow}>
                   <Text style={styles.snapshotTitle}>{entry.name}</Text>
                   <Text style={styles.cardMeta}>
-                    {entry.status} · {entry.placement}
+                    {formatStatusLabel(entry.status, entry.lentTo)} · {entry.placement}
-                    {entry.status === 'lent-to' && entry.lentTo ? ` · ${entry.lentTo}` : ''}
                   </Text>
                 </View>
               ))}

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,6 +16,7 @@ export default function ItemsTab({
 }) {
   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)),
@@ -52,10 +54,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 +73,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 +85,7 @@ 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>
               );
             })}
@@ -99,10 +101,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>
   );
 }

src/tabs/TripsTab.js

@@ -28,7 +28,6 @@ export default function TripsTab({
   createTrip,
   trips,
   selectedTripId,
-  chooseTrip,
   setTripAsTemplate,
   saveTripEdits,
   setTripArchived,
@@ -38,6 +37,7 @@ export default function TripsTab({
   openDatePicker,
   activeTripItemCount,
   activeTripCheckupCount,
+  openBackupModal,
 }) {
   const [createModalVisible, setCreateModalVisible] = useState(false);
   const [viewTripId, setViewTripId] = useState(null);
@@ -105,10 +105,15 @@ export default function TripsTab({
     <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}>
@@ -131,12 +136,9 @@ 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>

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);
+}