feat(#6): add randomized fake startup loader with suitcase progress

.gitea/workflows/ci.yml

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

.gitea/workflows/dev.yml

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

TODO.md

@@ -1,52 +1,14 @@
 # TODO - Luggage List
 
-## Stage
+This file was intentionally nuked.
-Improving & Fixing Bugs (V3)
 
-## V2 Changes Requested
+All pending tasks now live as Gitea issues:
-- [x] Trip can be selected from everywhere (global trip picker)
+- https://gitea.reversed.dev/space/luggage-list/issues/1
-- [x] Fixed trip switching behavior for web by removing aggressive auto-reselect
+- https://gitea.reversed.dev/space/luggage-list/issues/2
-- [x] Removed trip image crop (gallery pick without editing)
+- https://gitea.reversed.dev/space/luggage-list/issues/3
-- [x] Item updates now happen in a modal
+- https://gitea.reversed.dev/space/luggage-list/issues/4
-- [x] Redesigned item cards
+- https://gitea.reversed.dev/space/luggage-list/issues/5
-- [x] Moved top nav to bottom and made it mobile-friendly
+- https://gitea.reversed.dev/space/luggage-list/issues/6
-- [x] Removed top title block
+- https://gitea.reversed.dev/space/luggage-list/issues/7
-- [x] Reworked check-up flow to yes/no checklist
+- https://gitea.reversed.dev/space/luggage-list/issues/8
-- [x] “No” now opens update modal for check-up-only changes
+- https://gitea.reversed.dev/space/luggage-list/issues/9
-- [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

src/AppRoot.js

@@ -1,11 +1,12 @@
 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 TripsTab from './tabs/TripsTab';
@@ -21,7 +22,6 @@ const emptyTripForm = () => ({
   location: '',
   startDate: todayYMD(),
   endDate: todayYMD(),
-  imageUri: '',
   copyDefaultTemplate: true,
   setAsDefaultTemplate: false,
 });
@@ -63,6 +63,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 +82,11 @@ export default function AppRoot() {
   const [checkupNoForm, setCheckupNoForm] = useState(emptyCheckupNoForm());
 
   const [selectedCheckupId, setSelectedCheckupId] = useState(null);
+  const [dialogState, setDialogState] = useState({ visible: false, title: '', message: '', buttons: [] });
 
   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]);
 
@@ -116,6 +121,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 +162,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]);
 
@@ -180,7 +237,7 @@ export default function AppRoot() {
   async function pickImage(onPicked) {
     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;
     }
 
@@ -198,7 +255,7 @@ export default function AppRoot() {
   async function takeImage(onPicked) {
     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;
     }
 
@@ -214,7 +271,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 +279,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 +302,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 +340,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 +348,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 +367,6 @@ export default function AppRoot() {
               location: patch.location.trim(),
               startDate: patch.startDate,
               endDate: patch.endDate,
-              imageUri: patch.imageUri,
               updatedAt: Date.now(),
             }
           : trip
@@ -338,30 +394,29 @@ export default function AppRoot() {
   }
 
   function deleteTrip(tripId) {
-    Alert.alert('Delete trip?', 'Trip items and check-up history will also be deleted.', [
+    showConfirm({
-      { text: 'Cancel', style: 'cancel' },
+      title: 'Delete trip?',
-      {
+      message: 'Trip items and check-up history will also be deleted.',
-        text: 'Delete',
+      confirmText: 'Delete',
-        style: 'destructive',
+      tone: 'danger',
-        onPress: () => {
+      onConfirm: () => {
-          setData((prev) => {
+        setData((prev) => {
-            const trips = prev.trips.filter((trip) => trip.id !== tripId);
+          const trips = prev.trips.filter((trip) => trip.id !== tripId);
-            const itemsByTrip = { ...prev.itemsByTrip };
+          const itemsByTrip = { ...prev.itemsByTrip };
-            const checkupsByTrip = { ...prev.checkupsByTrip };
+          const checkupsByTrip = { ...prev.checkupsByTrip };
-            delete itemsByTrip[tripId];
+          delete itemsByTrip[tripId];
-            delete checkupsByTrip[tripId];
+          delete checkupsByTrip[tripId];
 
-            return {
+          return {
-              ...prev,
+            ...prev,
-              trips,
+            trips,
-              itemsByTrip,
+            itemsByTrip,
-              checkupsByTrip,
+            checkupsByTrip,
-              defaultTemplateTripId: prev.defaultTemplateTripId === tripId ? null : prev.defaultTemplateTripId,
+            defaultTemplateTripId: prev.defaultTemplateTripId === tripId ? null : prev.defaultTemplateTripId,
-            };
+          };
-          });
+        });
-        },
       },
-    ]);
+    });
   }
 
   function openAddItemModal() {
@@ -385,12 +440,12 @@ export default function AppRoot() {
 
   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;
     }
 
@@ -491,17 +546,26 @@ export default function AppRoot() {
 
   function deleteCheckup(checkupId) {
     if (!selectedTripId) return;
-    setData((prev) => {
+
-      const existing = prev.checkupsByTrip[selectedTripId] || [];
+    showConfirm({
-      return {
+      title: 'Delete check-up?',
-        ...prev,
+      message: 'This snapshot will be removed from history.',
-        checkupsByTrip: {
+      confirmText: 'Delete',
-          ...prev.checkupsByTrip,
+      tone: 'danger',
-          [selectedTripId]: existing.filter((checkup) => checkup.id !== checkupId),
+      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 +578,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;
     }
 
@@ -615,18 +679,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 +733,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 +749,25 @@ export default function AppRoot() {
     }, 80);
   }
 
-  if (!loaded) {
+  function openQuickAddItemFromNav() {
+    if (!selectedTripId) {
+      showAlert('No trip selected', 'Please select or create a trip first.');
+      return;
+    }
+    openAddItemModal();
+  }
+
+  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,18 +790,6 @@ 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}
@@ -775,7 +840,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}
@@ -809,6 +874,14 @@ export default function AppRoot() {
         onSaveNo={saveCurrentCheckupNo}
         onFinish={finishCheckupFlow}
       />
+
+      <AppDialogModal
+        visible={dialogState.visible}
+        title={dialogState.title}
+        message={dialogState.message}
+        buttons={dialogState.buttons}
+        onClose={closeDialog}
+      />
     </SafeAreaView>
   );
 }

src/components/AppDialogModal.js

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

src/components/BottomTab.js

@@ -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 }) {
+function TabBtn({ tab, current, onChange }) {
-  const tabs = [
+  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) => {
+        <View style={styles.tabGroupSide}>
-          const active = current === tab.key;
+          {leftTabs.map((tab) => (
-          return (
+            <TabBtn key={tab.key} tab={tab} current={current} onChange={onChange} />
-            <Pressable key={tab.key} onPress={() => onChange(tab.key)} style={styles.tabItem}>
+          ))}
-              <Ionicons
+        </View>
-                name={active ? tab.iconActive : tab.icon}
+
-                size={18}
+        <Pressable
-                color={active ? '#dbeafe' : '#94a3b8'}
+          style={[styles.tabAddBtn, !canAddItem && styles.tabAddBtnDisabled]}
-              />
+          onPress={onAddItem}
-              <Text style={[styles.tabLabel, active && styles.tabLabelActive]}>{tab.label}</Text>
+          disabled={!canAddItem}
-            </Pressable>
+        >
-          );
+          <Ionicons name="add" size={26} color="#fff" />
-        })}
+        </Pressable>
+
+        <View style={styles.tabGroupSide}>
+          {rightTabs.map((tab) => (
+            <TabBtn key={tab.key} tab={tab} current={current} onChange={onChange} />
+          ))}
+        </View>
       </View>
     </View>
   );

src/components/ItemCard.js

@@ -14,6 +14,17 @@ export default function ItemCard({ item, onEdit, onDelete, onQuickPack, onQuickU
   return (
     <View style={styles.itemCard}>
       <View style={[styles.itemAccent, { backgroundColor: statusAccent(item.status) }]} />
+
+      <View style={styles.itemThumbWrap}>
+        {item.imageUri ? (
+          <Image source={{ uri: item.imageUri }} style={styles.itemThumbSmall} />
+        ) : (
+          <View style={styles.itemThumbPlaceholder}>
+            <Text style={styles.itemThumbPlaceholderText}>🧳</Text>
+          </View>
+        )}
+      </View>
+
       <View style={styles.itemMain}>
         <View style={styles.cardRow}>
           <View style={styles.flex}>
@@ -41,8 +52,6 @@ export default function ItemCard({ item, onEdit, onDelete, onQuickPack, onQuickU
             <Text style={[styles.quickStatusBtnText, isUnpacked && styles.quickStatusBtnTextActive]}>Unpack</Text>
           </Pressable>
         </View>
-
-        {item.imageUri ? <Image source={{ uri: item.imageUri }} style={styles.previewImageSmall} /> : null}
       </View>
     </View>
   );

src/styles.js

@@ -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,
@@ -282,13 +304,38 @@ export const styles = StyleSheet.create({
     borderColor: '#1f2937',
     overflow: 'hidden',
     flexDirection: 'row',
+    alignItems: 'flex-start',
   },
   itemAccent: {
     width: 5,
+    alignSelf: 'stretch',
+  },
+  itemThumbWrap: {
+    paddingTop: 10,
+    paddingLeft: 10,
+  },
+  itemThumbSmall: {
+    width: 46,
+    height: 46,
+    borderRadius: 8,
+    backgroundColor: '#0b1220',
+  },
+  itemThumbPlaceholder: {
+    width: 46,
+    height: 46,
+    borderRadius: 8,
+    backgroundColor: '#0b1220',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#243244',
+  },
+  itemThumbPlaceholderText: {
+    fontSize: 18,
   },
   itemMain: {
     flex: 1,
-    padding: 12,
+    padding: 10,
     gap: 8,
   },
   itemTitle: {
@@ -462,13 +509,34 @@ 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,
+    minWidth: 58,
+  },
+  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',
@@ -484,6 +552,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%',

src/tabs/HistoryTab.js

@@ -1,25 +1,8 @@
 import React from 'react';
-import { Alert, Pressable, Text, View } from 'react-native';
+import { Pressable, Text, View } from 'react-native';
 import { styles } from '../styles';
 
-export default function HistoryTab({
+export default function HistoryTab({ selectedTrip, selectedTripCheckups, selectedCheckupId, setSelectedCheckupId, onDeleteCheckup }) {
-  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),
-      },
-    ]);
-  }
-
   return (
     <View style={styles.section}>
       <Text style={styles.sectionTitle}>History</Text>
@@ -32,7 +15,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>

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,14 +19,11 @@ const emptyEditForm = {
   location: '',
   startDate: '',
   endDate: '',
-  imageUri: '',
 };
 
 export default function TripsTab({
   tripForm,
   updateTripForm,
-  pickTripImage,
-  takeTripImage,
   templateTrip,
   createTrip,
   trips,
@@ -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);
@@ -124,7 +112,6 @@ export default function TripsTab({
 
       {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>
@@ -155,7 +142,6 @@ export default function TripsTab({
                 </Pressable>
               </View>
             </View>
-            {trip.imageUri ? <Image source={{ uri: trip.imageUri }} style={styles.previewImageSmall} /> : null}
           </View>
         ))}
 
@@ -226,17 +212,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 +258,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 +307,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>