PackRat-AI · andrew-bierman · May 1, 2026 · Apr 30, 2026 · Apr 30, 2026 · Apr 30, 2026
diff --git a/apps/expo/app.config.ts b/apps/expo/app.config.ts
@@ -41,7 +41,7 @@ export default (): ExpoConfig =>
       scheme: 'packrat',
       web: {
         bundler: 'metro',
-        output: 'static',
+        output: 'single',
         favicon: './assets/favicon.png',
       },
       plugins: [

diff --git a/apps/expo/app/(app)/_layout.tsx b/apps/expo/app/(app)/_layout.tsx
@@ -73,7 +73,6 @@ export default function AppLayout() {
           options={getCatalogAddToPackItemDetailsOptions(t)}
         />
         <Stack.Screen name="ai-chat" />
-        <Stack.Screen name="catalog/index" options={getCatalogListOptions(t)} />
         <Stack.Screen name="catalog/[id]" options={getCatalogItemDetailOptions(t)} />
         <Stack.Screen name="weather/index" options={{ headerShown: false }} />
         <Stack.Screen
@@ -104,7 +103,7 @@ export default function AppLayout() {
         />
 
         <Stack.Screen
-          name="current-pack"
+          name="current-pack/[id]"
           options={{
             headerShown: false,
             presentation: 'modal',
@@ -128,7 +127,7 @@ export default function AppLayout() {
           }}
         />
         <Stack.Screen
-          name="weight-analysis"
+          name="weight-analysis/[id]"
           options={{
             headerShown: false,
             presentation: 'modal',
@@ -351,12 +350,6 @@ const getItemEditOptions = (t: TranslationFunction) =>
     title: t('common.edit'),
   }) as const;
 
-const getCatalogListOptions = (t: TranslationFunction) =>
-  ({
-    title: t('catalog.itemsCatalog'),
-    headerLargeTitle: true,
-  }) as const;
-
 const getCatalogItemDetailOptions = (t: TranslationFunction) =>
   ({
     title: t('items.itemDetails'),

diff --git a/apps/expo/app/_layout.tsx b/apps/expo/app/_layout.tsx
@@ -13,7 +13,7 @@ import { userStore } from 'expo-app/features/auth/store';
 import { useColorScheme, useInitialAndroidBarSync } from 'expo-app/lib/hooks/useColorScheme';
 import { Providers } from 'expo-app/providers';
 import { NAV_THEME } from 'expo-app/theme';
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 Sentry.init({
   dsn: clientEnvs.EXPO_PUBLIC_SENTRY_DSN,
@@ -41,6 +41,13 @@ function RootLayout() {
 
   const { colorScheme, isDarkColorScheme } = useColorScheme();
 
+  // Sync NativeWind dark mode class to <html> on web (darkMode: 'class' requires it)
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      document.documentElement.classList.toggle('dark', isDarkColorScheme);
+    }
+  }, [isDarkColorScheme]);
+
   return (
     <Providers>
       <StatusBar

diff --git a/apps/expo/app/auth/(create-account)/credentials.tsx b/apps/expo/app/auth/(create-account)/credentials.tsx
@@ -185,7 +185,7 @@ export default function CredentialsScreen() {
           <View className="items-center pb-1">
             <Image
               source={LOGO_SOURCE}
-              className="ios:h-12 ios:w-12 h-8 w-8 rounded-md"
+              className="ios:h-12 ios:w-12 web:h-8 web:w-8 h-8 w-8 rounded-md"
               resizeMode="contain"
             />
             <Text variant="title1" className="ios:font-bold pb-1 pt-4 text-center">

diff --git a/apps/expo/app/auth/(create-account)/index.tsx b/apps/expo/app/auth/(create-account)/index.tsx
@@ -65,7 +65,7 @@ export default function InfoScreen() {
           <View className="items-center pb-1">
             <Image
               source={LOGO_SOURCE}
-              className="ios:h-12 ios:w-12 h-8 w-8 rounded-md"
+              className="ios:h-12 ios:w-12 web:h-8 web:w-8 h-8 w-8 rounded-md"
               resizeMode="contain"
             />
             <Text variant="title1" className="ios:font-bold pb-1 pt-4 text-center">

diff --git a/apps/expo/app/auth/(login)/forgot-password.tsx b/apps/expo/app/auth/(login)/forgot-password.tsx
@@ -85,7 +85,7 @@ export default function ForgotPasswordScreen() {
           <View className="items-center pb-1">
             <Image
               source={LOGO_SOURCE}
-              className="ios:h-12 ios:w-12 h-8 w-8 rounded-md"
+              className="ios:h-12 ios:w-12 web:h-8 web:w-8 h-8 w-8 rounded-md"
               resizeMode="contain"
             />
             <Text variant="title1" className="ios:font-bold pb-1 pt-4 text-center">

diff --git a/apps/expo/app/auth/(login)/index.tsx b/apps/expo/app/auth/(login)/index.tsx
@@ -94,7 +94,7 @@ export default function LoginScreen() {
           <View className="items-center pb-1">
             <Image
               source={LOGO_SOURCE}
-              className="ios:h-12 ios:w-12 h-8 w-8 rounded-md"
+              className="ios:h-12 ios:w-12 web:h-8 web:w-8 h-8 w-8 rounded-md"
               resizeMode="contain"
             />
             <Text variant="title1" className="ios:font-bold pb-1 pt-4 text-center">

diff --git a/apps/expo/app/auth/(login)/reset-password.tsx b/apps/expo/app/auth/(login)/reset-password.tsx
@@ -176,7 +176,7 @@ export default function ResetPasswordScreen() {
           <View className="items-center pb-1">
             <Image
               source={LOGO_SOURCE}
-              className="ios:h-12 ios:w-12 h-8 w-8 rounded-md"
+              className="ios:h-12 ios:w-12 web:h-8 web:w-8 h-8 w-8 rounded-md"
               resizeMode="contain"
             />
             <Text variant="title1" className="ios:font-bold pb-1 pt-4 text-center">

diff --git a/apps/expo/app/auth/_layout.tsx b/apps/expo/app/auth/_layout.tsx
@@ -3,6 +3,10 @@ import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import { router, Stack } from 'expo-router';
 import { Platform } from 'react-native';
 
+export const unstable_settings = {
+  anchor: 'index',
+};
+
 export default function AuthLayout() {
   const { t } = useTranslation();
 

diff --git a/apps/expo/app/auth/index.tsx b/apps/expo/app/auth/index.tsx
@@ -61,7 +61,7 @@ export default function AuthIndexScreen() {
           <View className="items-center">
             <Image
               source={LOGO_SOURCE}
-              className="ios:h-12 ios:w-12 h-8 w-8 rounded-md"
+              className="ios:h-12 ios:w-12 web:h-8 web:w-8 h-8 w-8 rounded-md"
               resizeMode="contain"
             />
           </View>

diff --git a/apps/expo/features/auth/atoms/authAtoms.ts b/apps/expo/features/auth/atoms/authAtoms.ts
@@ -1,4 +1,4 @@
-import Storage from 'expo-sqlite/kv-store';
+import kvStorage from 'expo-app/lib/kvStorage';
 import { atom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
 
@@ -12,23 +12,9 @@ export type User = {
 };
 
 // Token storage atom
-export const tokenAtom = atomWithStorage<string | null>('access_token', null, {
-  getItem: (key) => Storage.getItemSync(key),
-  setItem: (key, value) => {
-    if (value === null) return Storage.removeItemSync(key);
-    return Storage.setItemSync(key, value);
-  },
-  removeItem: (key) => Storage.removeItemSync(key),
-});
+export const tokenAtom = atomWithStorage<string | null>('access_token', null, kvStorage);
 
-export const refreshTokenAtom = atomWithStorage<string | null>('refresh_token', null, {
-  getItem: (key) => Storage.getItemSync(key),
-  setItem: (key, value) => {
-    if (value === null) return Storage.removeItemSync(key);
-    return Storage.setItemSync(key, value);
-  },
-  removeItem: (key) => Storage.removeItemSync(key),
-});
+export const refreshTokenAtom = atomWithStorage<string | null>('refresh_token', null, kvStorage);
 
 // Loading state atom
 export const isLoadingAtom = atom(false);

diff --git a/apps/expo/features/auth/hooks/useAuthInit.ts b/apps/expo/features/auth/hooks/useAuthInit.ts
@@ -1,10 +1,12 @@
 import { clientEnvs } from '@packrat/env/expo-client';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { GoogleSignin } from '@react-native-google-signin/google-signin';
+import { store } from 'expo-app/atoms/store';
 import { router } from 'expo-router';
 import Storage from 'expo-sqlite/kv-store';
 import { useEffect, useState } from 'react';
 import { Platform } from 'react-native';
+import { tokenAtom } from '../atoms/authAtoms';
 import { isAuthed } from '../store';
 
 export function useAuthInit() {
@@ -37,7 +39,12 @@ export function useAuthInit() {
 
         // If user has session or hasSkippedLogin before, continue to app
         if (accessToken || hasSkippedLogin === 'true') {
-          if (accessToken) isAuthed.set(true);
+          if (accessToken) {
+            isAuthed.set(true);
+            // Hydrate tokenAtom so components (e.g. AI chat) get the correct
+            // token without relying on the sync SQLite read (unavailable on web).
+            store.set(tokenAtom, accessToken);
+          }
           setIsLoading(false);
           return;
         } else {

diff --git a/apps/expo/features/auth/store/user.ts b/apps/expo/features/auth/store/user.ts
@@ -1,9 +1,8 @@
 import { observable, syncState } from '@legendapp/state';
-import { observablePersistSqlite } from '@legendapp/state/persist-plugins/expo-sqlite';
 import { syncObservable } from '@legendapp/state/sync';
 import { syncedCrud } from '@legendapp/state/sync-plugins/crud';
 import type { User } from 'expo-app/features/profile/types';
-import Storage from 'expo-sqlite/kv-store';
+import { persistPlugin } from 'expo-app/lib/persist-plugin';
 
 export const userStore = observable<User | null>(null);
 
@@ -12,7 +11,7 @@ syncObservable(
   syncedCrud({
     persist: {
       name: 'user',
-      plugin: observablePersistSqlite(Storage),
+      plugin: persistPlugin,
     },
   }),
 );

diff --git a/apps/expo/features/catalog/components/CatalogItemCard.tsx b/apps/expo/features/catalog/components/CatalogItemCard.tsx
@@ -11,6 +11,7 @@ import { Icon } from 'expo-app/components/Icon';
 import { useColorScheme } from 'expo-app/lib/hooks/useColorScheme';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import { TouchableWithoutFeedback, View } from 'react-native';
+import { normalizeDescription } from '../lib/normalizeDescription';
 import type { CatalogItem } from '../types';
 import { CatalogItemImage } from './CatalogItemImage';
 
@@ -52,7 +53,7 @@ export function CatalogItemCard({ item, onPress }: CatalogItemCardProps) {
               {item.brand && <CardSubtitle className="text-xs">{item.brand}</CardSubtitle>}
 
               <CardDescription className="mt-1 text-xs" numberOfLines={2}>
-                {item.description}
+                {normalizeDescription(item.description)}
               </CardDescription>
             </View>
           </CardContent>

diff --git a/apps/expo/features/catalog/lib/normalizeDescription.ts b/apps/expo/features/catalog/lib/normalizeDescription.ts
@@ -0,0 +1,15 @@
+const DETAILS_ARRAY_RE = /^Details:\s*(\[[\s\S]*\])$/;
+
+export function normalizeDescription(description: string | null | undefined): string | null {
+  if (!description) return null;
+  const match = description.match(DETAILS_ARRAY_RE);
+  if (match && match[1]) {
+    try {
+      const items = JSON.parse(match[1]) as string[];
+      return items.join('. ');
+    } catch {
+      // fall through
+    }
+  }
+  return description;
+}
diff --git a/apps/expo/features/catalog/screens/CatalogItemDetailScreen.tsx b/apps/expo/features/catalog/screens/CatalogItemDetailScreen.tsx
@@ -18,6 +18,7 @@ import { Linking, Text as RNText, ScrollView, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { CatalogItemImage } from '../components/CatalogItemImage';
 import { useCatalogItemDetails } from '../hooks';
+import { normalizeDescription } from '../lib/normalizeDescription';
 
 export function CatalogItemDetailScreen() {
   const router = useRouter();
@@ -109,7 +110,7 @@ export function CatalogItemDetailScreen() {
           )}
 
           <View className="mb-4">
-            <Text className="mb-2 text-foreground">{item.description}</Text>
+            <Text className="mb-2 text-foreground">{normalizeDescription(item.description)}</Text>
           </View>
 
           <View className="mb-4 flex-row flex-wrap gap-1">

diff --git a/apps/expo/features/pack-templates/store/packTemplateItems.ts b/apps/expo/features/pack-templates/store/packTemplateItems.ts
@@ -1,5 +1,4 @@
 import { observable, syncState } from '@legendapp/state';
-import { observablePersistSqlite } from '@legendapp/state/persist-plugins/expo-sqlite';
 import { syncObservable } from '@legendapp/state/sync';
 import { syncedCrud } from '@legendapp/state/sync-plugins/crud';
 import {
@@ -8,7 +7,7 @@ import {
 } from '@packrat/api/schemas/packTemplates';
 import { isAuthed } from 'expo-app/features/auth/store';
 import { apiClient } from 'expo-app/lib/api/packrat';
-import Storage from 'expo-sqlite/kv-store';
+import { persistPlugin } from 'expo-app/lib/persist-plugin';
 import type { PackTemplateItem } from '../types';
 
 const listAllPackTemplateItems = async (): Promise<PackTemplateItem[]> => {
@@ -84,7 +83,7 @@ syncObservable(
     updatePartial: true,
     mode: 'merge',
     persist: {
-      plugin: observablePersistSqlite(Storage),
+      plugin: persistPlugin,
       retrySync: true,
       name: 'packTemplateItems',
     },

diff --git a/apps/expo/features/pack-templates/store/packTemplates.ts b/apps/expo/features/pack-templates/store/packTemplates.ts
@@ -1,5 +1,4 @@
 import { observable, syncState } from '@legendapp/state';
-import { observablePersistSqlite } from '@legendapp/state/persist-plugins/expo-sqlite';
 import { syncObservable } from '@legendapp/state/sync';
 import { syncedCrud } from '@legendapp/state/sync-plugins/crud';
 import {
@@ -8,7 +7,7 @@ import {
 } from '@packrat/api/schemas/packTemplates';
 import { isAuthed } from 'expo-app/features/auth/store';
 import { apiClient } from 'expo-app/lib/api/packrat';
-import Storage from 'expo-sqlite/kv-store';
+import { persistPlugin } from 'expo-app/lib/persist-plugin';
 import type { PackTemplate, PackTemplateInStore } from '../types';
 
 const listPackTemplates = async (): Promise<PackTemplateInStore[] | null> => {
@@ -73,7 +72,7 @@ syncObservable(
     fieldDeleted: 'deleted',
     mode: 'merge',
     persist: {
-      plugin: observablePersistSqlite(Storage),
+      plugin: persistPlugin,
       retrySync: true,
       name: 'packTemplates',
     },

diff --git a/apps/expo/features/packs/store/packItems.ts b/apps/expo/features/packs/store/packItems.ts
@@ -1,13 +1,12 @@
 import { observable, syncState } from '@legendapp/state';
-import { observablePersistSqlite } from '@legendapp/state/persist-plugins/expo-sqlite';
 import { syncObservable } from '@legendapp/state/sync';
 import { syncedCrud } from '@legendapp/state/sync-plugins/crud';
 import { PackItemSchema, PackWithWeightsSchema } from '@packrat/api/schemas/packs';
 import { isRemoteUrl } from '@packrat/guards';
 import { isAuthed } from 'expo-app/features/auth/store';
 import { apiClient } from 'expo-app/lib/api/packrat';
+import { persistPlugin } from 'expo-app/lib/persist-plugin';
 import ImageCacheManager from 'expo-app/lib/utils/ImageCacheManager';
-import Storage from 'expo-sqlite/kv-store';
 import type { PackItem } from '../types';
 import { uploadImage } from '../utils';
 
@@ -55,7 +54,7 @@ syncObservable(
     updatePartial: true,
     mode: 'merge',
     persist: {
-      plugin: observablePersistSqlite(Storage),
+      plugin: persistPlugin,
       retrySync: true,
       name: 'packItems',
     },

diff --git a/apps/expo/features/packs/store/packWeightHistory.ts b/apps/expo/features/packs/store/packWeightHistory.ts
@@ -1,12 +1,11 @@
 import { observable, syncState } from '@legendapp/state';
-import { observablePersistSqlite } from '@legendapp/state/persist-plugins/expo-sqlite';
 import { syncObservable } from '@legendapp/state/sync';
 import { syncedCrud } from '@legendapp/state/sync-plugins/crud';
 import { PackWeightHistoryResponseSchema } from '@packrat/api/schemas/packs';
 import { isAuthed } from 'expo-app/features/auth/store';
 import { apiClient } from 'expo-app/lib/api/packrat';
+import { persistPlugin } from 'expo-app/lib/persist-plugin';
 import { obs } from 'expo-app/lib/store';
-import Storage from 'expo-sqlite/kv-store';
 import { nanoid } from 'nanoid';
 import type { PackWeightHistoryEntry } from '../types';
 import { computePackWeights } from '../utils';
@@ -40,7 +39,7 @@ syncObservable(
     fieldCreatedAt: 'createdAt',
     mode: 'merge',
     persist: {
-      plugin: observablePersistSqlite(Storage),
+      plugin: persistPlugin,
       retrySync: true,
       name: 'packWeigthHistory',
     },

diff --git a/apps/expo/features/packs/store/packingMode.ts b/apps/expo/features/packs/store/packingMode.ts
@@ -1,13 +1,12 @@
 import { observable } from '@legendapp/state';
-import { observablePersistSqlite } from '@legendapp/state/persist-plugins/expo-sqlite';
 import { syncObservable } from '@legendapp/state/sync';
-import Storage from 'expo-sqlite/kv-store';
+import { persistPlugin } from 'expo-app/lib/persist-plugin';
 
 export const packingModeStore = observable<Record<string, Record<string, boolean>>>({});
 
 syncObservable(packingModeStore, {
   persist: {
-    plugin: observablePersistSqlite(Storage),
+    plugin: persistPlugin,
     retrySync: true,
     name: 'packingMode',
   },

diff --git a/apps/expo/features/packs/store/packs.ts b/apps/expo/features/packs/store/packs.ts
@@ -1,11 +1,10 @@
 import { observable, syncState } from '@legendapp/state';
-import { observablePersistSqlite } from '@legendapp/state/persist-plugins/expo-sqlite';
 import { syncObservable } from '@legendapp/state/sync';
 import { syncedCrud } from '@legendapp/state/sync-plugins/crud';
 import { PackWithWeightsSchema } from '@packrat/api/schemas/packs';
 import { isAuthed } from 'expo-app/features/auth/store';
 import { apiClient } from 'expo-app/lib/api/packrat';
-import Storage from 'expo-sqlite/kv-store';
+import { persistPlugin } from 'expo-app/lib/persist-plugin';
 import type { PackInStore } from '../types';
 
 const listPacks = async (): Promise<PackInStore[] | null> => {
@@ -58,7 +57,7 @@ syncObservable(
     fieldDeleted: 'deleted',
     mode: 'merge',
     persist: {
-      plugin: observablePersistSqlite(Storage),
+      plugin: persistPlugin,
       retrySync: true,
       name: 'packs',
     },