chore: update version number to 0.1.10

- Integrated useColors hook for dynamic theming in SettingsScreen.
- Updated tab labels and titles to use localized strings.
- Refactored styles to utilize theme palette for consistent styling.
- Improved locale subscription to re-render labels on language change.

feat: implement useSheetDrag hook for bottom sheet gesture handling

- Added useSheetDrag hook to manage drag-to-dismiss functionality for bottom sheets.
- Configured pan responder for handling drag gestures and dismissing the sheet based on distance and velocity.

refactor: restructure color and token management

- Introduced useColors and useResolvedTheme hooks for better theme management.
- Separated light and dark color palettes for improved maintainability.
- Updated tokens to reflect new theming structure and ensure consistency across components.

.github/workflows/release-android.yml

@@ -42,6 +42,16 @@ jobs:
           key: android-sdk-${{ runner.os }}-${{ hashFiles('android/build.gradle', 'android/gradle.properties', 'android/app/build.gradle') }}
           restore-keys: android-sdk-${{ runner.os }}-
 
+      - name: Compute native cache key input
+        run: |
+          node -e "
+            const fs = require('fs');
+            const lock = JSON.parse(fs.readFileSync('package-lock.json', 'utf8'));
+            if (lock.packages && lock.packages['']) delete lock.packages[''].version;
+            delete lock.version;
+            fs.writeFileSync('.cxx-cache-input.json', JSON.stringify(lock.packages || {}));
+          "
+
       - name: Cache native CMake build outputs
         uses: actions/cache@v4
         with:
@@ -50,7 +60,7 @@ jobs:
             android/app/build/intermediates/cxx
             android/app/build/intermediates/merged_native_libs
             android/app/build/intermediates/stripped_native_libs
-          key: cxx-${{ runner.os }}-${{ hashFiles('package-lock.json', 'android/build.gradle', 'android/app/build.gradle') }}
+          key: cxx-${{ runner.os }}-${{ hashFiles('.cxx-cache-input.json', 'android/build.gradle', 'android/app/build.gradle') }}
           restore-keys: cxx-${{ runner.os }}-
 
       - name: Install JS dependencies

App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
+import { useColorScheme } from 'react-native';
 import { NavigationContainer, createNavigationContainerRef } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator, type NativeStackScreenProps } from '@react-navigation/native-stack';
@@ -19,24 +20,28 @@ import {
 import type { MainTabsParamList, RootStackParamList } from './src/navigation/types';
 import ComposeScreen from './src/screens/ComposeScreen';
 import EmailThreadScreen from './src/screens/EmailThreadScreen';
+import EmailSourceScreen from './src/screens/EmailSourceScreen';
 import LoginScreen from './src/screens/LoginScreen';
 import EmailListScreen from './src/screens/EmailListScreen';
 import FilesScreen from './src/screens/FilesScreen';
-import CalendarScreen from './src/screens/CalendarScreenNew';
-import ContactsScreen from './src/screens/ContactsScreenNew';
+import CalendarScreen from './src/screens/CalendarScreen';
+import ContactsScreen from './src/screens/ContactsScreen';
 import ContactDetailScreen from './src/screens/ContactDetailScreen';
 import ContactFormScreen from './src/screens/ContactFormScreen';
 import GroupDetailScreen from './src/screens/GroupDetailScreen';
-import SettingsScreen from './src/screens/SettingsScreenNew2';
+import SettingsScreen from './src/screens/SettingsScreen';
 import { useAccountStore } from './src/stores/account-store';
 import { useAuthStore } from './src/stores/auth-store';
 import { useCalendarStore } from './src/stores/calendar-store';
 import { useContactsStore } from './src/stores/contacts-store';
 import { useEmailStore } from './src/stores/email-store';
 import { useSettingsStore } from './src/stores/settings-store';
+import { useLocaleStore } from './src/stores/locale-store';
+import { useNetworkStore } from './src/stores/network-store';
 import { useUpdatesStore } from './src/stores/updates-store';
 import { UpdateBanner } from './src/components/UpdateBanner';
-import { colors, spacing, typography } from './src/theme/tokens';
+import { spacing, typography, type ThemePalette } from './src/theme/tokens';
+import { useColors } from './src/theme/colors';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 const Tab = createBottomTabNavigator<MainTabsParamList>();
@@ -52,32 +57,32 @@ function navigateToNotificationTap(payload: NotificationTapPayload): void {
 }
 
 function LoadingScreen({ message }: { message: string }) {
+  const c = useColors();
   return (
-    <View style={styles.loadingContainer}>
-      <ActivityIndicator color={colors.primary} />
-      <Text style={styles.loadingText}>{message}</Text>
+    <View style={[styles.loadingContainer, { backgroundColor: c.background }]}>
+      <ActivityIndicator color={c.primary} />
+      <Text style={[styles.loadingText, { color: c.textSecondary }]}>{message}</Text>
     </View>
   );
 }
 
 function MainTabsNavigator({ navigation }: NativeStackScreenProps<RootStackParamList, 'MainTabs'>) {
+  const c = useColors();
   const mailboxes = useEmailStore((state) => state.mailboxes);
   const logout = useAuthStore((state) => state.logout);
   const inboxUnreadCount = mailboxes.find((mailbox) => mailbox.role === 'inbox')?.unreadEmails ?? 0;
 
   return (
-    <View style={{ flex: 1, backgroundColor: colors.background }}>
+    <View style={{ flex: 1, backgroundColor: c.background }}>
       <UpdateBanner />
     <Tab.Navigator
       screenOptions={{
         headerShown: false,
-        // Matches webmail horizontal NavigationRail: bg-background, border-t border-border,
-        // active uses foreground (white), inactive uses muted-foreground.
-        tabBarActiveTintColor: colors.text,
-        tabBarInactiveTintColor: colors.textSecondary,
+        tabBarActiveTintColor: c.text,
+        tabBarInactiveTintColor: c.textSecondary,
         tabBarStyle: {
-          backgroundColor: colors.background,
-          borderTopColor: colors.border,
+          backgroundColor: c.background,
+          borderTopColor: c.border,
           borderTopWidth: 1,
           elevation: 0,
           shadowOpacity: 0,
@@ -95,8 +100,8 @@ function MainTabsNavigator({ navigation }: NativeStackScreenProps<RootStackParam
           tabBarIcon: ({ color, size }) => <Mail size={size} color={color} />,
           tabBarBadge: inboxUnreadCount > 0 ? (inboxUnreadCount > 99 ? '99+' : inboxUnreadCount) : undefined,
           tabBarBadgeStyle: {
-            backgroundColor: colors.error,
-            color: colors.primaryForeground,
+            backgroundColor: c.error,
+            color: c.primaryForeground,
             fontSize: 10,
             fontWeight: '700',
             minWidth: 16,
@@ -160,6 +165,15 @@ export default function App() {
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
   const client = useAuthStore((state) => state.client);
   const restoreSession = useAuthStore((state) => state.restoreSession);
+
+  // Resolve the user's theme preference to a concrete light/dark style for the
+  // system status bar. The rest of the app's colors are still hard-coded dark
+  // until the StyleSheet migration to a theme-aware `useColors` hook lands.
+  const themePref = useSettingsStore((state) => state.theme);
+  const systemScheme = useColorScheme();
+  const resolvedScheme: 'light' | 'dark' =
+    themePref === 'system' ? (systemScheme === 'light' ? 'light' : 'dark') : themePref;
+  const statusBarStyle: 'light' | 'dark' = resolvedScheme === 'light' ? 'dark' : 'light';
   // Persisted active account is the signal that the user was already signed
   // in on the previous launch. When present we render the main UI with the
   // cached mail list instead of the "Restoring session" spinner; the real
@@ -174,6 +188,8 @@ export default function App() {
 
   React.useEffect(() => {
     void useSettingsStore.getState().hydrate();
+    void useLocaleStore.getState().hydrate();
+    return useNetworkStore.getState().init();
   }, []);
 
   React.useEffect(() => {
@@ -304,7 +320,7 @@ export default function App() {
   if (!hasRestoredSession && !hasPersistedAccount) {
     return (
       <>
-        <StatusBar style="light" />
+        <StatusBar style={statusBarStyle} />
         <LoadingScreen message="Loading..." />
       </>
     );
@@ -313,7 +329,7 @@ export default function App() {
   if (hasRestoredSession && !isAuthenticated) {
     return (
       <>
-        <StatusBar style="light" />
+        <StatusBar style={statusBarStyle} />
         <LoginScreen />
       </>
     );
@@ -321,10 +337,11 @@ export default function App() {
 
   return (
     <NavigationContainer ref={navigationRef}>
-      <StatusBar style="light" />
+      <StatusBar style={statusBarStyle} />
       <Stack.Navigator screenOptions={{ headerShown: false }}>
         <Stack.Screen name="MainTabs" component={MainTabsNavigator} />
         <Stack.Screen name="EmailThread" component={EmailThreadScreen} />
+        <Stack.Screen name="EmailSource" component={EmailSourceScreen} />
         <Stack.Screen
           name="Compose"
           component={ComposeScreen}
@@ -368,12 +385,10 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: colors.background,
     gap: spacing.md,
   },
   loadingText: {
     ...typography.body,
-    color: colors.textSecondary,
   },
 });
 

CALENDAR_PLAN.md

@@ -1,227 +0,0 @@
-# React Native Calendar - Parity Plan
-
-Bring `repos/react-native/` calendar to parity with the webmail calendar at
-`components/calendar/`. Webmail totals ~5,940 lines across 19 components plus
-utility libs; mobile port targets ~2,500 lines with feature parity on the
-essentials and explicit deferrals for things that don't fit a phone UX.
-
-## Current state
-
-- `src/screens/CalendarScreenNew.tsx` - month grid + agenda-for-selected-day,
-  all rendering `MOCK_EVENTS`. Doesn't touch the store.
-- `src/stores/calendar-store.ts` - CRUD wiring exists (`fetchCalendars`,
-  `fetchEvents`, `createEvent`, `updateEvent`, `deleteEvent`) but no
-  `handleStateChange`, no per-calendar visibility, no range tracking.
-- `src/api/calendar.ts` - JMAP methods wired (`Calendar/get`,
-  `CalendarEvent/query`, `CalendarEvent/get`, `CalendarEvent/set`).
-- `src/api/types.ts` - `CalendarEvent` and `Calendar` types match webmail.
-- No event modal, no detail view, no week/day view, no sidebar, no recurrence.
-
-## In scope
-
-### Phase 1 - Data layer (foundation for everything else)
-
-**`src/stores/calendar-store.ts`** - expand to match webmail's store semantics:
-
-- `hiddenCalendarIds: Set<string>` persisted via AsyncStorage (matches webmail's
-  `CalendarSidebar` toggle state).
-- `loadedRange: { after: string; before: string } | null` - track what's fetched
-  so view changes don't re-fetch unnecessarily.
-- `ensureRange(after, before)` - fetch only if the requested window isn't
-  covered by `loadedRange`; expand the loaded range in place instead of
-  replacing events wholesale, so switching Month → Week doesn't drop data.
-- `handleStateChange(change)` - subscribe to `Calendar` and `CalendarEvent`
-  typeState keys; on push, refetch calendars and re-query the current window.
-  Already referenced from `App.tsx` push handler - this finally implements it.
-- `toggleCalendarVisibility(id)` / `setCalendarHidden(id, hidden)`.
-- Selectors: `visibleCalendars`, `visibleEvents` (filtered by hidden set).
-
-**`src/lib/calendar-utils.ts`** (new) - port from webmail's `lib/calendar-utils.ts`:
-
-- `parseLocalDateTime(iso)` - JSCalendar start strings are floating local time
-  (`2026-04-20T09:00:00`, no Z). Parse without timezone shifts.
-- `parseDuration(iso8601)` - `PT1H30M` → milliseconds.
-- `eventTimeRange(event)` - returns `{ start: Date, end: Date, allDay: boolean }`
-  handling `showWithoutTime`.
-- `eventsOnDay(events, day)` - day overlap check (not just start-matches-day).
-- `getCalendarColor(cal)` - fallback to a deterministic palette when `color`
-  is missing, matching `theme/tokens.ts` `colors.calendar.*`.
-
-**`src/lib/recurrence-expansion.ts`** (new) - minimal port of webmail's RRULE
-expander. Webmail's version supports `byDay`/`byMonth`/`byMonthDay`/`count`/`until`.
-Mobile port: same surface, same tests. This is the hard part - allocate ~400
-lines. Drives correct rendering of recurring events across the visible window.
-
-### Phase 2 - Views
-
-**`src/screens/CalendarScreenNew.tsx`** - replace mocks, gain view switching:
-
-- On mount: `fetchCalendars()`, then `ensureRange` for visible window.
-- View mode toggle → Month / Week / Agenda (Day view folded into Week for phone).
-- Header shows month/week label; prev/next shifts by the current view's step.
-- "Today" button resets both `currentDate` and `selectedDate`.
-- FAB opens create modal with `start = selectedDate at next half hour`.
-
-**`src/components/calendar/MonthView.tsx`** (extract from current screen,
-~180 lines) - real events, up to 3 colored dots per day, "+N" indicator when
-more. Tap day → selects + scrolls agenda below. Long-press day → opens create
-modal with that date.
-
-**`src/components/calendar/WeekView.tsx`** (new, ~350 lines) - port of
-`calendar-week-view.tsx` (511 lines) trimmed for mobile:
-
-- 7 day columns, hour rows from 6am–10pm scrollable to 0–24.
-- All-day strip at top.
-- Events positioned absolutely by `utcStart`/`utcEnd`, width shared among
-  overlapping events (port webmail's stacking algorithm).
-- Tap event → detail modal. Long-press empty slot → create modal pre-filled.
-- Horizontal swipe → prev/next week (react-native-gesture-handler already
-  available via react-navigation).
-- _Deferred_: drag-to-reschedule, drag-to-resize. Phone targets are too small
-  for it to be better than tap-edit.
-
-**`src/components/calendar/AgendaView.tsx`** (new, ~120 lines) - port of
-`calendar-agenda-view.tsx`. Flat list of upcoming events grouped by day, 30
-days forward. Taps open detail modal.
-
-### Phase 3 - Event interaction
-
-**`src/components/calendar/EventDetailSheet.tsx`** (new, ~280 lines) - bottom
-sheet presenting a single event, port of `event-detail-popover.tsx` (631 lines
-on web - phone version drops the hover card chrome and the inline-edit fields):
-
-- Header: calendar color bar, title, date/time range (or "All day"), calendar name.
-- Sections: location, description (linkified), participants with RSVP status,
-  recurrence summary (e.g. "Weekly on Mon, Wed - until 2026-06-01"), reminders.
-- Actions row: Edit, Delete, Duplicate, "Open in email" if created from invite.
-- If recurring: delete/edit prompts via `RecurrenceScopeDialog` ("This event
-  only" / "This and following" / "All events").
-
-**`src/components/calendar/EventModal.tsx`** (new, ~550 lines) - full-screen
-modal for create + edit, port of `event-modal.tsx` (1,072 lines on web, trimmed):
-
-- Title, calendar picker (color swatches), all-day toggle.
-- Start/end date+time pickers (`@react-native-community/datetimepicker` - add dep).
-- Location, description (multiline).
-- Participant input with autocomplete from contacts store (port of
-  `participant-input.tsx`, ~180 lines).
-- Repeat picker: None / Daily / Weekly (weekday chips) / Monthly / Yearly,
-  plus end: Never / After N / On date. Advanced iCal rules (BYSETPOS etc.)
-  are deferred - covers the 95% case.
-- Alerts: None / At start / 5m / 15m / 30m / 1h / 1d before, mapping to
-  `Alert.trigger.offset`.
-- Timezone: default to device TZ; optional override picker hidden behind
-  "Advanced" disclosure.
-- Save path handles "this instance only" override vs master update for
-  recurring events (write to `recurrenceOverrides[recurrenceId]`).
-
-**`src/components/calendar/RecurrenceScopeDialog.tsx`** (new, ~90 lines) -
-direct port of `recurrence-scope-dialog.tsx`. Three-button picker before
-edit/delete of a recurring instance.
-
-### Phase 4 - Multi-calendar
-
-**`src/components/calendar/CalendarSidebarDrawer.tsx`** (new, ~200 lines) -
-port of `calendar-sidebar-panel.tsx` (273 lines). Slides in from the left
-(reuses `SidebarDrawer.tsx`):
-
-- List of calendars with color swatch + visibility toggle + name.
-- "My calendars" vs "Subscribed" sections if `myRights` differs.
-- Tap calendar → highlight; long-press → rename/color/hide (optional, phase 4.5).
-- Footer: "Add calendar" (deferred to Phase 6).
-
-**`src/theme/tokens.ts`** - audit `colors.calendar.*` palette against webmail's
-calendar color constants (`lib/calendar-utils.ts` `CALENDAR_COLOR_PALETTE`);
-add any missing shades.
-
-### Phase 5 - Polish
-
-- Pull-to-refresh on each view → forces re-fetch of current window.
-- Empty states per view (no calendars yet / no events this month).
-- Loading skeleton for month grid and week grid.
-- Error banner when fetch fails (pattern from `EmailListScreen`).
-- Respect `email-store` push via `handleStateChange` so events update live
-  when another client creates one.
-
-## Explicitly deferred (out of scope)
-
-These are in the webmail but don't make sense for a first mobile pass:
-
-- **iCal import/subscribe modals** (`ical-import-modal.tsx` 455 lines,
-  `ical-subscription-modal.tsx` 220 lines) - file picker + URL subscription
-  with auth flows. Better as a dedicated settings flow later.
-- **Tasks module** (`task-list-view.tsx`, `task-modal.tsx`, `task-toolbar.tsx`) -
-  JSCalendar `@type: 'Task'` is a separate surface from events; worth its own
-  screen, not bolted onto calendar.
-- **Drag to reschedule / resize** - mobile tap targets are too small for the
-  fine-grained control the web drag gives; tap-edit is the mobile idiom.
-- **Quick event input** (`quick-event-input.tsx`) - NLP parser ("Lunch tomorrow
-  at noon"). Neat on desktop, marginal on phone where typing is already slow.
-- **Event context menu** (`event-context-menu.tsx`) - right-click is desktop-
-  only. Actions move into the detail sheet's action row.
-- **Mini-calendar** (`mini-calendar.tsx`) - web uses it as a sidebar date
-  picker. Mobile already has the main month view; redundant.
-- **Birthday calendar auto-derived events** - lower priority; leave the
-  contacts-store integration for a follow-up.
-
-## Dependencies to add
-
-- `@react-native-community/datetimepicker` - native date/time pickers.
-- `react-native-reanimated` is already in (via react-navigation); reuse for
-  bottom-sheet animations on `EventDetailSheet`.
-- No new calendar library - reimplement RRULE expansion in ~400 lines rather
-  than pulling in `rrule.js` (which adds ~180KB and expects browser APIs).
-
-## File map (new / modified)
-
-```
-repos/react-native/src/
-├── screens/
-│   └── CalendarScreenNew.tsx                  [rewrite]
-├── components/
-│   └── calendar/                              [new directory]
-│       ├── MonthView.tsx                      [new]
-│       ├── WeekView.tsx                       [new]
-│       ├── AgendaView.tsx                     [new]
-│       ├── EventCard.tsx                      [new]
-│       ├── EventDetailSheet.tsx               [new]
-│       ├── EventModal.tsx                     [new]
-│       ├── ParticipantInput.tsx               [new]
-│       ├── RecurrenceScopeDialog.tsx          [new]
-│       ├── CalendarSidebarDrawer.tsx          [new]
-│       └── index.ts                           [new]
-├── stores/
-│   └── calendar-store.ts                      [extend]
-├── lib/
-│   ├── calendar-utils.ts                      [new]
-│   └── recurrence-expansion.ts                [new]
-└── theme/
-    └── tokens.ts                              [audit calendar palette]
-```
-
-## Testing approach
-
-- `vitest.config.ts` already exists. Unit tests for:
-  - `recurrence-expansion` (daily/weekly/monthly, count+until, byDay).
-  - `calendar-utils` (duration parse, all-day overlap, DST boundary).
-  - Store: `ensureRange` dedup, `handleStateChange` refetch trigger.
-- Manual emulator test matrix:
-  - Create event (timed, all-day, recurring), verify server round-trip.
-  - Edit recurring event via scope dialog.
-  - Delete recurring instance vs series.
-  - Toggle calendar visibility, confirm events disappear.
-  - Push update from webmail, confirm mobile refreshes.
-
-## Build order (suggested)
-
-1. Phase 1 in full - nothing else works without real data.
-2. MonthView + EventDetailSheet (read path) - first thing user sees.
-3. EventModal create path - unblocks manual testing of write path.
-4. AgendaView + CalendarSidebarDrawer - pulls the rest of month together.
-5. WeekView - biggest UI, easiest to defer if time runs short.
-6. EventModal edit + recurrence scope - finishes the edit surface.
-7. Phase 5 polish.
-
-Rough size estimate: ~2,500 lines of new RN code + ~300 lines of store/util
-changes. Each phase is ship-safe on its own - the app stays functional even if
-we stop at Phase 2.

VERSION

@@ -1 +1 @@
-0.1.3
+0.1.10

android/app/src/main/AndroidManifest.xml

@@ -1,6 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
   <uses-permission android:name="android.permission.INTERNET"/>
   <uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
+  <uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES"/>
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
   <uses-permission android:name="android.permission.RECORD_AUDIO"/>
   <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

android/gradle.properties

@@ -28,7 +28,7 @@ android.enablePngCrunchInReleaseBuilds=true
 # Use this property to specify which architecture you want to build.
 # You can also override it from the CLI using
 # ./gradlew <task> -PreactNativeArchitectures=x86_64
-reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+reactNativeArchitectures=arm64-v8a
 
 # Use this property to enable support to the new architecture.
 # This will allow you to use TurboModules and the Fabric render in

app.config.js

@@ -45,7 +45,7 @@ module.exports = {
     web: {
       favicon: './assets/favicon.png',
     },
-    plugins: ['expo-secure-store', '@react-native-community/datetimepicker'],
+    plugins: ['expo-secure-store', '@react-native-community/datetimepicker', 'expo-localization'],
     extra: {
       commit: COMMIT,
     },

package-lock.json

@@ -1,16 +1,17 @@
 {
   "name": "bulwark-mobile",
-  "version": "0.1.2",
+  "version": "0.1.10",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "bulwark-mobile",
-      "version": "0.1.2",
+      "version": "0.1.10",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@react-native-async-storage/async-storage": "2.2.0",
         "@react-native-community/datetimepicker": "8.4.4",
+        "@react-native-community/netinfo": "11.4.1",
         "@react-navigation/bottom-tabs": "^7.15.9",
         "@react-navigation/native": "^7.2.2",
         "@react-navigation/native-stack": "^7.14.10",
@@ -19,6 +20,7 @@
         "expo-file-system": "~19.0.21",
         "expo-image-picker": "~17.0.10",
         "expo-intent-launcher": "~13.0.8",
+        "expo-localization": "~17.0.8",
         "expo-secure-store": "~15.0.8",
         "expo-sharing": "~14.0.8",
         "expo-status-bar": "~3.0.9",
@@ -2792,6 +2794,15 @@
         }
       }
     },
+    "node_modules/@react-native-community/netinfo": {
+      "version": "11.4.1",
+      "resolved": "https://registry.npmjs.org/@react-native-community/netinfo/-/netinfo-11.4.1.tgz",
+      "integrity": "sha512-B0BYAkghz3Q2V09BF88RA601XursIEA111tnc2JOaN7axJWmNefmfjZqw/KdSxKZp7CZUuPpjBmz/WCR9uaHYg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react-native": ">=0.59"
+      }
+    },
     "node_modules/@react-native/assets-registry": {
       "version": "0.81.5",
       "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.81.5.tgz",
@@ -5245,6 +5256,19 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-localization": {
+      "version": "17.0.8",
+      "resolved": "https://registry.npmjs.org/expo-localization/-/expo-localization-17.0.8.tgz",
+      "integrity": "sha512-UrdwklZBDJ+t+ZszMMiE0SXZ2eJxcquCuQcl6EvGHM9K+e6YqKVRQ+w8qE+iIB3H75v2RJy6MHAaLK+Mqeo04g==",
+      "license": "MIT",
+      "dependencies": {
+        "rtl-detect": "^1.0.2"
+      },
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "3.0.24",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-3.0.24.tgz",
@@ -8789,6 +8813,12 @@
         "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.12"
       }
     },
+    "node_modules/rtl-detect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/rtl-detect/-/rtl-detect-1.1.2.tgz",
+      "integrity": "sha512-PGMBq03+TTG/p/cRB7HCLKJ1MgDIi07+QU1faSjiYRfmY5UsAttV9Hs08jDAHVwcOwmVLcSJkpwyfXszVjWfIQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bulwark-mobile",
-  "version": "0.1.3",
+  "version": "0.1.10",
   "license": "AGPL-3.0-only",
   "main": "index.ts",
   "scripts": {
@@ -9,11 +9,14 @@
     "ios": "expo run:ios",
     "web": "expo start --web",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "bump": "node scripts/bump-version.mjs",
+    "sync-locales": "node scripts/sync-locales.mjs"
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "2.2.0",
     "@react-native-community/datetimepicker": "8.4.4",
+    "@react-native-community/netinfo": "11.4.1",
     "@react-navigation/bottom-tabs": "^7.15.9",
     "@react-navigation/native": "^7.2.2",
     "@react-navigation/native-stack": "^7.14.10",
@@ -22,6 +25,7 @@
     "expo-file-system": "~19.0.21",
     "expo-image-picker": "~17.0.10",
     "expo-intent-launcher": "~13.0.8",
+    "expo-localization": "~17.0.8",
     "expo-secure-store": "~15.0.8",
     "expo-sharing": "~14.0.8",
     "expo-status-bar": "~3.0.9",

scripts/bump-version.mjs

@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+import { execFileSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const versionFile = path.join(root, 'VERSION');
+const pkgFile = path.join(root, 'package.json');
+const lockFile = path.join(root, 'package-lock.json');
+
+const git = (...args) =>
+  execFileSync('git', args, { cwd: root, stdio: ['ignore', 'pipe', 'inherit'] }).toString().trim();
+const gitInherit = (...args) =>
+  execFileSync('git', args, { cwd: root, stdio: 'inherit' });
+
+const dirty = git('status', '--porcelain');
+if (dirty) {
+  console.error('Working tree is not clean. Commit or stash changes before bumping.');
+  console.error(dirty);
+  process.exit(1);
+}
+
+const current = fs.readFileSync(versionFile, 'utf8').trim();
+const parts = current.split('.').map(Number);
+if (parts.length !== 3 || parts.some(Number.isNaN)) {
+  console.error(`Invalid version in VERSION: "${current}" (expected MAJOR.MINOR.PATCH)`);
+  process.exit(1);
+}
+parts[2] += 1;
+const next = parts.join('.');
+
+const existingTags = new Set(git('tag', '--list').split(/\r?\n/).filter(Boolean));
+if (existingTags.has(next)) {
+  console.error(`Tag ${next} already exists.`);
+  process.exit(1);
+}
+
+fs.writeFileSync(versionFile, `${next}\n`);
+
+const pkg = JSON.parse(fs.readFileSync(pkgFile, 'utf8'));
+pkg.version = next;
+fs.writeFileSync(pkgFile, `${JSON.stringify(pkg, null, 2)}\n`);
+
+const lock = JSON.parse(fs.readFileSync(lockFile, 'utf8'));
+lock.version = next;
+if (lock.packages?.['']) lock.packages[''].version = next;
+fs.writeFileSync(lockFile, `${JSON.stringify(lock, null, 2)}\n`);
+
+console.log(`${current} -> ${next}`);
+
+gitInherit('add', 'VERSION', 'package.json', 'package-lock.json');
+gitInherit('commit', '-m', `chore: update version number to ${next}`);
+gitInherit('tag', '-a', next, '-m', next);
+gitInherit('push', '--follow-tags');
+
+execFileSync(
+  'gh',
+  ['release', 'create', next, '--title', next, '--generate-notes'],
+  { cwd: root, stdio: 'inherit' },
+);
+
+console.log(`Released ${next}`);

scripts/sync-locales.mjs

@@ -0,0 +1,43 @@
+// Copy locale JSON files from the parent webmail repo into ./locales/.
+// Run from the RN repo root: `node scripts/sync-locales.mjs`.
+// In environments where the parent repo isn't checked out (e.g. CI clone of
+// the standalone RN repo), this is a no-op — vendored files stay as-is.
+import { readdir, mkdir, copyFile, stat } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const RN_LOCALES = join(__dirname, '..', 'locales');
+const WEBMAIL_LOCALES = join(__dirname, '..', '..', '..', 'locales');
+
+if (!existsSync(WEBMAIL_LOCALES)) {
+  console.log(`No webmail locales at ${WEBMAIL_LOCALES} — skipping (vendored files will be used).`);
+  process.exit(0);
+}
+
+async function copyDir(src, dest) {
+  await mkdir(dest, { recursive: true });
+  for (const entry of await readdir(src, { withFileTypes: true })) {
+    const s = join(src, entry.name);
+    const d = join(dest, entry.name);
+    if (entry.isDirectory()) {
+      await copyDir(s, d);
+    } else if (entry.isFile() && entry.name.endsWith('.json')) {
+      await copyFile(s, d);
+    }
+  }
+}
+
+const langs = (await readdir(WEBMAIL_LOCALES, { withFileTypes: true }))
+  .filter((e) => e.isDirectory())
+  .map((e) => e.name);
+
+let copied = 0;
+for (const lang of langs) {
+  const src = join(WEBMAIL_LOCALES, lang);
+  const dest = join(RN_LOCALES, lang);
+  await copyDir(src, dest);
+  copied++;
+}
+console.log(`Synced ${copied} locale(s) from ${WEBMAIL_LOCALES} → ${RN_LOCALES}`);

src/components/Badge.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, Text, StyleSheet, ViewStyle } from 'react-native';
-import { colors, spacing, radius, typography } from '../theme/tokens';
+import { radius, typography, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
 
 interface BadgeProps {
   children: string;
@@ -8,57 +9,39 @@ interface BadgeProps {
   style?: ViewStyle;
 }
 
-/**
- * Matches webmail badge patterns:
- * - rounded-full px-2 py-0.5 text-xs font-medium
- */
 export default function Badge({ children, variant = 'default', style }: BadgeProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
-    <View style={[styles.base, variantStyles[variant], style]}>
-      <Text style={[styles.text, textVariantStyles[variant]]}>
+    <View style={[styles.base, styles[`bg_${variant}` as const], style]}>
+      <Text style={[styles.text, styles[`text_${variant}` as const]]}>
         {children}
       </Text>
     </View>
   );
 }
 
-const styles = StyleSheet.create({
-  base: {
-    borderRadius: radius.full,
-    paddingHorizontal: 8,        // px-2
-    paddingVertical: 2,          // py-0.5
-    alignSelf: 'flex-start',
-  },
-  text: {
-    ...typography.caption,
-    fontWeight: '500',
-  },
-});
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+    base: {
+      borderRadius: radius.full,
+      paddingHorizontal: 8,
+      paddingVertical: 2,
+      alignSelf: 'flex-start',
+    },
+    text: { ...typography.caption, fontWeight: '500' },
 
-const variantStyles: Record<string, ViewStyle> = {
-  default: {
-    backgroundColor: colors.surface,
-  },
-  primary: {
-    backgroundColor: colors.primaryBg,
-  },
-  destructive: {
-    backgroundColor: colors.errorBg,
-  },
-  outline: {
-    backgroundColor: 'transparent',
-    borderWidth: 1,
-    borderColor: colors.border,
-  },
-  muted: {
-    backgroundColor: colors.muted,
-  },
-};
+    bg_default:     { backgroundColor: c.surface },
+    bg_primary:     { backgroundColor: c.primaryBg },
+    bg_destructive: { backgroundColor: c.errorBg },
+    bg_outline:     { backgroundColor: 'transparent', borderWidth: 1, borderColor: c.border },
+    bg_muted:       { backgroundColor: c.muted },
+
+    text_default:     { color: c.text },
+    text_primary:     { color: c.primary },
+    text_destructive: { color: c.error },
+    text_outline:     { color: c.text },
+    text_muted:       { color: c.mutedForeground },
+  });
+}
 
-const textVariantStyles: Record<string, { color: string }> = {
-  default: { color: colors.text },
-  primary: { color: colors.primary },
-  destructive: { color: colors.error },
-  outline: { color: colors.text },
-  muted: { color: colors.mutedForeground },
-};

src/components/Button.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Pressable, Text, StyleSheet, ViewStyle, TextStyle, ActivityIndicator } from 'react-native';
-import { colors, spacing, radius, typography, componentSizes } from '../theme/tokens';
+import { Pressable, Text, StyleSheet, ViewStyle, ActivityIndicator } from 'react-native';
+import { spacing, radius, typography, componentSizes, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
 
 type ButtonVariant = 'default' | 'ghost' | 'outline' | 'destructive';
 type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';
@@ -26,15 +27,17 @@ export default function Button({
   icon,
   style,
 }: ButtonProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const isDisabled = disabled || loading;
 
   return (
     <Pressable
       style={({ pressed }) => [
         styles.base,
-        sizeStyles[size],
-        variantStyles[variant],
-        pressed && !isDisabled && pressedStyles[variant],
+        styles[`size_${size}` as const],
+        styles[`bg_${variant}` as const],
+        pressed && !isDisabled && styles[`pressed_${variant}` as const],
         isDisabled && styles.disabled,
         style,
       ]}
@@ -44,13 +47,13 @@ export default function Button({
       {loading ? (
         <ActivityIndicator
           size="small"
-          color={variant === 'default' ? colors.primaryForeground : colors.primary}
+          color={variant === 'default' ? c.primaryForeground : c.primary}
         />
       ) : (
         <>
           {icon}
           {typeof children === 'string' ? (
-            <Text style={[styles.text, textVariantStyles[variant], isDisabled && styles.textDisabled]}>
+            <Text style={[styles.text, styles[`text_${variant}` as const], isDisabled && styles.textDisabled]}>
               {children}
             </Text>
           ) : (
@@ -62,105 +65,34 @@ export default function Button({
   );
 }
 
-const styles = StyleSheet.create({
-  base: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: radius.md,       // rounded-md (web)
-    gap: spacing.sm,
-  },
-  text: {
-    ...typography.bodyMedium,      // text-sm font-medium (web)
-  },
-  disabled: {
-    opacity: 0.5,
-  },
-  textDisabled: {
-    opacity: 0.5,
-  },
-});
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+    base: {
+      flexDirection: 'row', alignItems: 'center', justifyContent: 'center',
+      borderRadius: radius.md, gap: spacing.sm,
+    },
+    text: { ...typography.bodyMedium },
+    disabled: { opacity: 0.5 },
+    textDisabled: { opacity: 0.5 },
 
-// Matches web: h-9 (sm), h-10 (md), h-11 (lg), h-10 w-10 (icon)
-const sizeStyles: Record<ButtonSize, ViewStyle> = {
-  sm: {
-    height: componentSizes.buttonSm,
-    paddingHorizontal: spacing.md,   // px-3
-  },
-  md: {
-    height: componentSizes.buttonMd,
-    paddingHorizontal: spacing.lg,   // px-4
-    paddingVertical: spacing.sm,     // py-2
-  },
-  lg: {
-    height: componentSizes.buttonLg,
-    paddingHorizontal: spacing.xxxl, // px-8
-  },
-  icon: {
-    height: componentSizes.buttonMd,
-    width: componentSizes.buttonMd,
-    paddingHorizontal: 0,
-  },
-};
+    size_sm:   { height: componentSizes.buttonSm, paddingHorizontal: spacing.md },
+    size_md:   { height: componentSizes.buttonMd, paddingHorizontal: spacing.lg, paddingVertical: spacing.sm },
+    size_lg:   { height: componentSizes.buttonLg, paddingHorizontal: spacing.xxxl },
+    size_icon: { height: componentSizes.buttonMd, width: componentSizes.buttonMd, paddingHorizontal: 0 },
 
-// Matches web button variant classes exactly
-const variantStyles: Record<ButtonVariant, ViewStyle> = {
-  default: {
-    backgroundColor: colors.primary,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 1,
-    elevation: 1,
-  },
-  ghost: {
-    backgroundColor: 'transparent',
-  },
-  outline: {
-    backgroundColor: colors.background,
-    borderWidth: 1,
-    borderColor: colors.border,
-  },
-  destructive: {
-    backgroundColor: colors.error,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 1,
-    elevation: 1,
-  },
-};
+    bg_default:     { backgroundColor: c.primary, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 1, elevation: 1 },
+    bg_ghost:       { backgroundColor: 'transparent' },
+    bg_outline:     { backgroundColor: c.background, borderWidth: 1, borderColor: c.border },
+    bg_destructive: { backgroundColor: c.error, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 1, elevation: 1 },
 
-const pressedStyles: Record<ButtonVariant, ViewStyle> = {
-  default: {
-    backgroundColor: colors.primaryDark,
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  ghost: {
-    backgroundColor: colors.accent,
-  },
-  outline: {
-    backgroundColor: colors.accent,
-  },
-  destructive: {
-    opacity: 0.9,
-  },
-};
+    pressed_default:     { backgroundColor: c.primaryDark, shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 2, elevation: 2 },
+    pressed_ghost:       { backgroundColor: c.accent },
+    pressed_outline:     { backgroundColor: c.accent },
+    pressed_destructive: { opacity: 0.9 },
 
-const textVariantStyles: Record<ButtonVariant, TextStyle> = {
-  default: {
-    color: colors.primaryForeground,
-  },
-  ghost: {
-    color: colors.text,
-  },
-  outline: {
-    color: colors.text,
-  },
-  destructive: {
-    color: colors.errorForeground,
-  },
-};
+    text_default:     { color: c.primaryForeground },
+    text_ghost:       { color: c.text },
+    text_outline:     { color: c.text },
+    text_destructive: { color: c.errorForeground },
+  });
+}

src/components/Card.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, Text, StyleSheet, ViewStyle } from 'react-native';
-import { colors, spacing, radius, typography } from '../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
 
 interface CardProps {
   children: React.ReactNode;
@@ -13,6 +14,8 @@ interface CardProps {
  * - card-foreground for text
  */
 export function Card({ children, style }: CardProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return <View style={[styles.card, style]}>{children}</View>;
 }
 
@@ -27,6 +30,8 @@ interface SectionHeaderProps {
  * - text-sm text-muted-foreground for description
  */
 export function SectionHeader({ title, description }: SectionHeaderProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <View style={styles.sectionHeader}>
       <Text style={styles.sectionTitle}>{title}</Text>
@@ -51,6 +56,8 @@ interface SettingItemRowProps {
  * - description: text-xs text-muted-foreground mt-1
  */
 export function SettingItemRow({ label, description, right, icon, iconBg, bottomBorder = true }: SettingItemRowProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <View style={[styles.settingRow, bottomBorder && styles.settingRowBorder]}>
       {icon && (
@@ -67,12 +74,13 @@ export function SettingItemRow({ label, description, right, icon, iconBg, bottom
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   card: {
-    backgroundColor: colors.card,
+    backgroundColor: c.card,
     borderRadius: radius.lg,          // rounded-lg
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     overflow: 'hidden',
   },
   sectionHeader: {
@@ -81,11 +89,11 @@ const styles = StyleSheet.create({
   },
   sectionTitle: {
     ...typography.h3,                 // text-lg font-medium
-    color: colors.text,
+    color: c.text,
   },
   sectionDescription: {
     ...typography.body,
-    color: colors.mutedForeground,    // text-muted-foreground
+    color: c.mutedForeground,    // text-muted-foreground
     marginTop: 4,
   },
   settingRow: {
@@ -97,7 +105,7 @@ const styles = StyleSheet.create({
   },
   settingRowBorder: {
     borderBottomWidth: 1,
-    borderBottomColor: colors.border, // border-b border-border
+    borderBottomColor: c.border, // border-b border-border
   },
   settingIcon: {
     width: 32,
@@ -112,14 +120,15 @@ const styles = StyleSheet.create({
   },
   settingLabel: {
     ...typography.bodyMedium,        // text-sm font-medium text-foreground
-    color: colors.text,
+    color: c.text,
   },
   settingDescription: {
     ...typography.caption,           // text-xs text-muted-foreground
-    color: colors.mutedForeground,
+    color: c.mutedForeground,
     marginTop: 2,
   },
   settingRight: {
     flexShrink: 0,
   },
-});
+  });
+}

src/components/Dialog.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { View, Text, Pressable, StyleSheet, Modal } from 'react-native';
 import { AlertTriangle } from 'lucide-react-native';
 import Button from './Button';
-import { colors, spacing, radius, typography } from '../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
 
 interface DialogProps {
   visible: boolean;
@@ -34,6 +35,8 @@ export default function Dialog({
   onConfirm,
   onCancel,
 }: DialogProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <Modal visible={visible} transparent animationType="fade" onRequestClose={onCancel}>
       <View style={styles.backdrop}>
@@ -41,7 +44,7 @@ export default function Dialog({
           <View style={styles.content}>
             {variant === 'destructive' && (
               <View style={styles.iconBadge}>
-                <AlertTriangle size={20} color={colors.error} />
+                <AlertTriangle size={20} color={c.error} />
               </View>
             )}
             <Text style={styles.title}>{title}</Text>
@@ -61,7 +64,8 @@ export default function Dialog({
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   backdrop: {
     flex: 1,
     backgroundColor: 'rgba(0,0,0,0.5)',
@@ -72,9 +76,9 @@ const styles = StyleSheet.create({
   dialog: {
     width: '100%',
     maxWidth: 400,
-    backgroundColor: colors.background,
+    backgroundColor: c.background,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     borderRadius: radius.lg,
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 10 },
@@ -89,18 +93,18 @@ const styles = StyleSheet.create({
     width: 40,
     height: 40,
     borderRadius: radius.full,
-    backgroundColor: colors.errorBg,
+    backgroundColor: c.errorBg,
     alignItems: 'center',
     justifyContent: 'center',
     marginBottom: spacing.md,
   },
   title: {
     ...typography.h3,               // text-lg font-semibold
-    color: colors.text,
+    color: c.text,
   },
   message: {
     ...typography.body,             // text-sm
-    color: colors.mutedForeground,  // text-muted-foreground
+    color: c.mutedForeground,  // text-muted-foreground
     marginTop: spacing.sm,
   },
   footer: {
@@ -110,4 +114,5 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.xxl, // px-6
     paddingBottom: spacing.xxl,     // pb-6
   },
-});
+  });
+}

src/components/EmailBodyView.tsx

@@ -6,7 +6,8 @@ import type { Email } from '../api/types';
 import { wrapEmailHtml, wrapPlainTextEmail, plainTextToSafeHtml, extractCidRefs, hasRemoteContent, hasMeaningfulHtmlBody } from '../lib/email-html';
 import { jmapClient } from '../api/jmap-client';
 import { useSettingsStore } from '../stores/settings-store';
-import { colors, spacing, typography } from '../theme/tokens';
+import { spacing, typography, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
 
 // Largest inline image we'll pull inline as a data: URI. Anything bigger gets
 // skipped so we don't freeze the JS thread base64-encoding megabytes.
@@ -129,6 +130,8 @@ const HEIGHT_REPORTER = `
 `;
 
 export default function EmailBodyView({ email, senderEmail }: EmailBodyViewProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const externalContentPolicy = useSettingsStore((s) => s.externalContentPolicy);
   const isSenderTrusted = useSettingsStore((s) => s.isSenderTrusted);
   const addTrustedSender = useSettingsStore((s) => s.addTrustedSender);
@@ -247,13 +250,13 @@ export default function EmailBodyView({ email, senderEmail }: EmailBodyViewProps
         <View style={styles.banner}>
           {externalContentPolicy === 'ask' && (
             <Pressable style={styles.bannerButton} onPress={onLoadImages} hitSlop={8}>
-              <ImageIcon size={14} color={colors.textSecondary} />
+              <ImageIcon size={14} color={c.textSecondary} />
               <Text style={styles.bannerButtonText}>Load external content</Text>
             </Pressable>
           )}
           {senderEmail ? (
             <Pressable style={styles.bannerButton} onPress={onTrustSender} hitSlop={8}>
-              <ShieldCheck size={14} color={colors.textSecondary} />
+              <ShieldCheck size={14} color={c.textSecondary} />
               <Text style={styles.bannerButtonText}>Trust sender</Text>
             </Pressable>
           ) : null}
@@ -308,7 +311,8 @@ export default function EmailBodyView({ email, senderEmail }: EmailBodyViewProps
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   wrapper: { width: '100%' },
   banner: {
     flexDirection: 'row',
@@ -317,9 +321,9 @@ const styles = StyleSheet.create({
     gap: spacing.md,
     paddingHorizontal: spacing.lg,
     paddingVertical: spacing.sm,
-    backgroundColor: colors.surfaceHover,
+    backgroundColor: c.surfaceHover,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
   },
   bannerButton: {
     flexDirection: 'row',
@@ -329,7 +333,7 @@ const styles = StyleSheet.create({
   },
   bannerButtonText: {
     ...typography.caption,
-    color: colors.textSecondary,
+    color: c.textSecondary,
   },
   webContainer: {
     width: '100%',
@@ -343,4 +347,5 @@ const styles = StyleSheet.create({
   webviewContainer: {
     backgroundColor: 'transparent',
   },
-});
+  });
+}

src/components/Input.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TextInput as RNTextInput, View, Text, StyleSheet, ViewStyle, TextInputProps } from 'react-native';
-import { colors, spacing, radius, typography, componentSizes } from '../theme/tokens';
+import { spacing, radius, typography, componentSizes, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
 
 interface InputProps extends TextInputProps {
   label?: string;
@@ -28,6 +29,8 @@ export default function Input({
   style,
   ...props
 }: InputProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const [focused, setFocused] = React.useState(false);
 
   return (
@@ -43,7 +46,7 @@ export default function Input({
         <RNTextInput
           {...props}
           style={[styles.input, style]}
-          placeholderTextColor={colors.textMuted}
+          placeholderTextColor={c.textMuted}
           onFocus={(e) => { setFocused(true); props.onFocus?.(e); }}
           onBlur={(e) => { setFocused(false); props.onBlur?.(e); }}
         />
@@ -54,10 +57,11 @@ export default function Input({
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   label: {
     ...typography.bodyMedium,
-    color: colors.textSecondary,
+    color: c.textSecondary,
     marginBottom: spacing.sm,
   },
   inputWrapper: {
@@ -65,17 +69,17 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     height: componentSizes.inputHeight,    // h-10 = 40px
     borderWidth: 1,
-    borderColor: colors.border,            // border-input
+    borderColor: c.border,            // border-input
     borderRadius: radius.sm,               // rounded-md = 6px
-    backgroundColor: colors.background,    // bg-background
+    backgroundColor: c.background,    // bg-background
     paddingHorizontal: spacing.md,         // px-3 = 12px
   },
   inputFocused: {
-    borderColor: colors.borderFocus,       // border-ring (blue-500)
+    borderColor: c.borderFocus,       // border-ring (blue-500)
     borderWidth: 2,
   },
   inputError: {
-    borderColor: colors.error,
+    borderColor: c.error,
   },
   inputDisabled: {
     opacity: 0.5,
@@ -83,7 +87,7 @@ const styles = StyleSheet.create({
   input: {
     flex: 1,
     ...typography.body,                   // text-sm = 14px
-    color: colors.text,                   // text-foreground
+    color: c.text,                   // text-foreground
     paddingVertical: 0,
   },
   iconLeft: {
@@ -94,7 +98,8 @@ const styles = StyleSheet.create({
   },
   errorText: {
     ...typography.caption,
-    color: colors.error,
+    color: c.error,
     marginTop: spacing.xs,
   },
-});
+  });
+}

src/components/OfflineBanner.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { CloudOff } from 'lucide-react-native';
+import { useNetworkStore } from '../stores/network-store';
+import { spacing, typography, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
+
+interface OfflineBannerProps {
+  /** Optional extra notice (e.g. "Showing cached mail"). */
+  hint?: string;
+}
+
+export function OfflineBanner({ hint }: OfflineBannerProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  const online = useNetworkStore((s) => s.online);
+  if (online) return null;
+  return (
+    <View style={styles.bar}>
+      <CloudOff size={14} color={c.primaryForeground} />
+      <Text style={styles.text} numberOfLines={1}>
+        You are offline{hint ? ` — ${hint}` : ''}
+      </Text>
+    </View>
+  );
+}
+
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+    bar: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: spacing.sm,
+      paddingHorizontal: spacing.md,
+      paddingVertical: 6,
+      backgroundColor: '#a16207',
+    },
+    text: {
+      ...typography.caption,
+      color: c.primaryForeground,
+      flex: 1,
+    },
+  });
+}

src/components/RadioGroup.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, Text, Pressable, StyleSheet, ViewStyle } from 'react-native';
-import { colors, spacing, radius, typography } from '../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
 
 interface RadioOption {
   label: string;
@@ -22,6 +23,8 @@ interface RadioGroupProps {
  * - unselected: bg-muted text-foreground
  */
 export default function RadioGroup({ options, value, onChange, style }: RadioGroupProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <View style={[styles.container, style]}>
       {options.map((opt) => {
@@ -42,7 +45,8 @@ export default function RadioGroup({ options, value, onChange, style }: RadioGro
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   container: {
     flexDirection: 'row',
     gap: 6,                          // gap-1.5
@@ -53,19 +57,20 @@ const styles = StyleSheet.create({
     borderRadius: radius.sm,         // rounded-md
   },
   optionSelected: {
-    backgroundColor: colors.primary,
+    backgroundColor: c.primary,
   },
   optionUnselected: {
-    backgroundColor: colors.muted,
+    backgroundColor: c.muted,
   },
   optionText: {
     ...typography.caption,           // text-xs
   },
   textSelected: {
-    color: colors.primaryForeground,
+    color: c.primaryForeground,
     fontWeight: '500',
   },
   textUnselected: {
-    color: colors.text,
+    color: c.text,
   },
-});
+  });
+}

src/components/SidebarDrawer.tsx

@@ -10,7 +10,8 @@ import {
   Folder, FolderOpen, ChevronDown, ChevronRight, X, Settings, LogOut, Check, Plus,
 } from 'lucide-react-native';
 import type { LucideIcon } from 'lucide-react-native';
-import { colors, spacing, radius, typography } from '../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
 import { useEmailStore } from '../stores/email-store';
 import { useAuthStore } from '../stores/auth-store';
 import { useAccountStore } from '../stores/account-store';
@@ -52,17 +53,19 @@ const ROLE_COLOR: Record<string, string> = {
   inbox: '#60a5fa',
   sent: '#4ade80',
   drafts: '#a78bfa',
-  trash: colors.textMuted,
+  trash: c.textMuted,
   junk: '#f87171',
   archive: '#fbbf24',
 };
 
 function iconColor(role: string | null | undefined, isSelected: boolean): string {
   if (role && ROLE_COLOR[role]) return ROLE_COLOR[role];
-  return isSelected ? colors.text : colors.textSecondary;
+  return isSelected ? c.text : c.textSecondary;
 }
 
 function RowCounts({ unread, total }: { unread: number; total: number }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   if (unread === 0 && total === 0) return null;
   return (
     <View style={styles.counts}>
@@ -90,6 +93,8 @@ function SidebarRow({
   icon, label, depth, isSelected, unread, total,
   hasChildren, isExpanded, onPress, onToggleExpand,
 }: SidebarRowProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const leftPad = ROW_PX_BASE + depth * INDENT_STEP;
   return (
     <Pressable
@@ -108,9 +113,9 @@ function SidebarRow({
             style={styles.chevron}
           >
             {isExpanded ? (
-              <ChevronDown size={12} color={colors.textMuted} />
+              <ChevronDown size={12} color={c.textMuted} />
             ) : (
-              <ChevronRight size={12} color={colors.textMuted} />
+              <ChevronRight size={12} color={c.textMuted} />
             )}
           </Pressable>
         ) : (
@@ -135,6 +140,8 @@ interface SidebarDrawerProps {
 }
 
 export default function SidebarDrawer({ visible, onClose }: SidebarDrawerProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const mailboxes = useEmailStore((s) => s.mailboxes);
   const currentMailboxId = useEmailStore((s) => s.currentMailboxId);
   const selectMailbox = useEmailStore((s) => s.selectMailbox);
@@ -237,7 +244,7 @@ export default function SidebarDrawer({ visible, onClose }: SidebarDrawerProps)
     [accountEmail],
   );
   const avatarBg = React.useMemo(
-    () => (accountEmail ? generateAvatarColor(accountEmail) : colors.primary),
+    () => (accountEmail ? generateAvatarColor(accountEmail) : c.primary),
     [accountEmail],
   );
   const hostname = React.useMemo(() => {
@@ -267,7 +274,7 @@ export default function SidebarDrawer({ visible, onClose }: SidebarDrawerProps)
           {/* Header: close + account switcher */}
           <View style={styles.header}>
             <Pressable onPress={onClose} style={styles.headerClose} hitSlop={8}>
-              <X size={20} color={colors.text} />
+              <X size={20} color={c.text} />
             </Pressable>
             <Pressable
               onPress={() => setAccountMenuOpen((v) => !v)}
@@ -284,7 +291,7 @@ export default function SidebarDrawer({ visible, onClose }: SidebarDrawerProps)
               </View>
               <ChevronDown
                 size={16}
-                color={colors.textMuted}
+                color={c.textMuted}
                 style={accountMenuOpen ? styles.accountChevronOpen : undefined}
               />
             </Pressable>
@@ -323,7 +330,7 @@ export default function SidebarDrawer({ visible, onClose }: SidebarDrawerProps)
                         </View>
                         {isActive && (
                           <View style={styles.accountMenuCheckBadge}>
-                            <Check size={10} color={colors.primaryForeground} strokeWidth={3} />
+                            <Check size={10} color={c.primaryForeground} strokeWidth={3} />
                           </View>
                         )}
                       </View>
@@ -364,7 +371,7 @@ export default function SidebarDrawer({ visible, onClose }: SidebarDrawerProps)
                       navigation.navigate('AddAccount');
                     }}
                   >
-                    <Plus size={16} color={colors.textSecondary} />
+                    <Plus size={16} color={c.textSecondary} />
                     <Text style={styles.accountMenuActionText}>Add account</Text>
                   </Pressable>
                 </>
@@ -382,7 +389,7 @@ export default function SidebarDrawer({ visible, onClose }: SidebarDrawerProps)
                     ]}
                     onPress={() => setDefaultAccount(active.id)}
                   >
-                    <Star size={16} color={colors.textSecondary} />
+                    <Star size={16} color={c.textSecondary} />
                     <Text style={styles.accountMenuActionText}>Set as default</Text>
                   </Pressable>
                 );
@@ -394,7 +401,7 @@ export default function SidebarDrawer({ visible, onClose }: SidebarDrawerProps)
                 ]}
                 onPress={() => { setAccountMenuOpen(false); onClose(); void logout(); }}
               >
-                <LogOut size={16} color={colors.textSecondary} />
+                <LogOut size={16} color={c.textSecondary} />
                 <Text style={styles.accountMenuActionText} numberOfLines={1}>
                   Sign out of {accountEmailFull || 'account'}
                 </Text>
@@ -407,8 +414,8 @@ export default function SidebarDrawer({ visible, onClose }: SidebarDrawerProps)
                   ]}
                   onPress={() => { setAccountMenuOpen(false); onClose(); void logoutAll(); }}
                 >
-                  <LogOut size={16} color={colors.error} />
-                  <Text style={[styles.accountMenuActionText, { color: colors.error }]}>
+                  <LogOut size={16} color={c.error} />
+                  <Text style={[styles.accountMenuActionText, { color: c.error }]}>
                     Sign out all
                   </Text>
                 </Pressable>
@@ -420,14 +427,14 @@ export default function SidebarDrawer({ visible, onClose }: SidebarDrawerProps)
             {/* Folders section */}
             <Pressable style={styles.sectionHeader} onPress={toggleFoldersSection}>
               {foldersExpanded ? (
-                <ChevronDown size={14} color={colors.textMuted} />
+                <ChevronDown size={14} color={c.textMuted} />
               ) : (
-                <ChevronRight size={14} color={colors.textMuted} />
+                <ChevronRight size={14} color={c.textMuted} />
               )}
               <Text style={styles.sectionHeaderText}>Folders</Text>
               <View style={{ flex: 1 }} />
               <View style={styles.sectionSettings}>
-                <Settings size={14} color={colors.textMuted} />
+                <Settings size={14} color={c.textMuted} />
               </View>
             </Pressable>
 
@@ -465,7 +472,8 @@ export default function SidebarDrawer({ visible, onClose }: SidebarDrawerProps)
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   overlay: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0,0,0,0.5)',
@@ -478,7 +486,7 @@ const styles = StyleSheet.create({
     maxWidth: 340,
     backgroundColor: '#262626', // matches webmail bg-secondary (dark mode)
     borderRightWidth: 1,
-    borderRightColor: colors.border,
+    borderRightColor: c.border,
   },
   drawerSafe: { flex: 1 },
 
@@ -490,7 +498,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.sm,
     paddingVertical: spacing.sm,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
   },
   headerClose: {
     width: 36, height: 36,
@@ -506,7 +514,7 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     borderRadius: radius.sm,
   },
-  accountPressed: { backgroundColor: colors.surfaceHover },
+  accountPressed: { backgroundColor: c.surfaceHover },
   accountChevronOpen: { transform: [{ rotate: '180deg' }] },
   accountAvatar: {
     width: 36, height: 36,
@@ -515,11 +523,11 @@ const styles = StyleSheet.create({
   },
   accountAvatarText: {
     ...typography.bodySemibold,
-    color: colors.primaryForeground,
+    color: c.primaryForeground,
   },
   accountInfo: { flex: 1, minWidth: 0 },
-  accountName: { ...typography.bodyMedium, color: colors.text },
-  accountEmail: { ...typography.caption, color: colors.textMuted, marginTop: 1 },
+  accountName: { ...typography.bodyMedium, color: c.text },
+  accountEmail: { ...typography.caption, color: c.textMuted, marginTop: 1 },
 
   // Account menu - floating popover card under the header
   accountMenu: {
@@ -529,7 +537,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#1f1f1f',
     borderRadius: radius.md,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     overflow: 'hidden',
     // Elevation / shadow
     shadowColor: '#000',
@@ -566,14 +574,14 @@ const styles = StyleSheet.create({
   accountMenuAvatarText: {
     ...typography.caption,
     fontWeight: '600',
-    color: colors.primaryForeground,
+    color: c.primaryForeground,
   },
   accountMenuCheckBadge: {
     position: 'absolute',
     right: -3, bottom: -3,
     width: 16, height: 16,
     borderRadius: 8,
-    backgroundColor: colors.primary,
+    backgroundColor: c.primary,
     alignItems: 'center', justifyContent: 'center',
     borderWidth: 2,
     borderColor: '#1f1f1f',
@@ -586,13 +594,13 @@ const styles = StyleSheet.create({
   },
   accountMenuName: {
     ...typography.bodyMedium,
-    color: colors.text,
+    color: c.text,
     flexShrink: 1,
     fontWeight: '600',
   },
   accountMenuHost: {
     ...typography.caption,
-    color: colors.textMuted,
+    color: c.textMuted,
     marginTop: 2,
   },
   accountMenuStatusRow: {
@@ -607,17 +615,17 @@ const styles = StyleSheet.create({
     backgroundColor: '#22c55e',
   },
   accountMenuStatusDotOffline: {
-    backgroundColor: colors.textMuted,
+    backgroundColor: c.textMuted,
   },
   accountMenuStatusText: {
     fontSize: 10,
     lineHeight: 12,
-    color: colors.textMuted,
+    color: c.textMuted,
     flexShrink: 1,
   },
   accountMenuDivider: {
     height: StyleSheet.hairlineWidth,
-    backgroundColor: colors.border,
+    backgroundColor: c.border,
   },
   accountMenuAction: {
     flexDirection: 'row',
@@ -627,10 +635,10 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
     minHeight: 40,
   },
-  accountMenuActionPressed: { backgroundColor: colors.surfaceHover },
+  accountMenuActionPressed: { backgroundColor: c.surfaceHover },
   accountMenuActionText: {
     ...typography.body,
-    color: colors.text,
+    color: c.text,
     flexShrink: 1,
     fontSize: 13,
   },
@@ -650,13 +658,13 @@ const styles = StyleSheet.create({
   },
   sectionHeaderText: {
     ...typography.bodySemibold,
-    color: colors.text,
+    color: c.text,
   },
   sectionSettings: { padding: 4 },
 
   empty: {
     ...typography.body,
-    color: colors.textMuted,
+    color: c.textMuted,
     paddingHorizontal: spacing.lg,
     paddingVertical: spacing.sm,
   },
@@ -670,10 +678,10 @@ const styles = StyleSheet.create({
     borderLeftWidth: 2,
     borderLeftColor: 'transparent',
   },
-  rowPressed: { backgroundColor: colors.surfaceHover },
+  rowPressed: { backgroundColor: c.surfaceHover },
   rowSelected: {
-    backgroundColor: colors.accent,
-    borderLeftColor: colors.primary,
+    backgroundColor: c.accent,
+    borderLeftColor: c.primary,
   },
   rowIndent: {
     flexDirection: 'row',
@@ -692,11 +700,11 @@ const styles = StyleSheet.create({
   rowLabel: {
     flex: 1,
     ...typography.body,
-    color: colors.text,
+    color: c.text,
   },
   rowLabelSelected: {
     ...typography.bodySemibold,
-    color: colors.text,
+    color: c.text,
   },
   counts: {
     flexDirection: 'row',
@@ -707,16 +715,17 @@ const styles = StyleSheet.create({
   countUnread: {
     ...typography.caption,
     fontWeight: '600',
-    color: colors.text,
+    color: c.text,
   },
   countSep: {
     ...typography.caption,
-    color: colors.textMuted,
+    color: c.textMuted,
     opacity: 0.6,
   },
   countTotal: {
     ...typography.caption,
-    color: colors.textMuted,
+    color: c.textMuted,
   },
 
-});
+  });
+}

src/components/SwipeableRow.tsx

@@ -0,0 +1,179 @@
+import React, { useRef, useState } from 'react';
+import {
+  View, Text, StyleSheet, Animated, PanResponder, Pressable, Dimensions,
+} from 'react-native';
+import {
+  Archive, Trash2, ShieldAlert, MailOpen, Mail, Star,
+  type LucideIcon,
+} from 'lucide-react-native';
+import { typography, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
+import type { SwipeAction } from '../stores/settings-store';
+
+interface SwipeableRowProps {
+  children: React.ReactNode;
+  /** Right-to-left swipe action (revealed under a leftward drag, sits at right edge). */
+  leftAction: SwipeAction;
+  /** Left-to-right swipe action (revealed under a rightward drag, sits at left edge). */
+  rightAction: SwipeAction;
+  /** Pass the row state used to compute action labels (e.g. unread/starred toggling). */
+  context: { unread: boolean; starred: boolean };
+  onAction: (action: SwipeAction) => void;
+}
+
+const REVEAL_WIDTH = 88;          // px shown when fully revealed
+const ACTIVATION_THRESHOLD = 32;  // px past which release snaps open instead of closing
+const DIRECTION_BIAS = 1.5;       // dx must dominate dy by this factor
+const MIN_DX_TO_CLAIM = 6;
+const MAX_DRAG_OVERSHOOT = REVEAL_WIDTH * 1.4;
+
+const ACTION_META: Record<Exclude<SwipeAction, 'none'>, { icon: LucideIcon; bg: string; defaultLabel: string }> = {
+  archive: { icon: Archive,      bg: '#1d4ed8', defaultLabel: 'Archive' },
+  delete:  { icon: Trash2,       bg: '#b91c1c', defaultLabel: 'Delete' },
+  spam:    { icon: ShieldAlert,  bg: '#a16207', defaultLabel: 'Spam' },
+  read:    { icon: MailOpen,     bg: '#0f766e', defaultLabel: 'Read' },
+  star:    { icon: Star,         bg: '#a16207', defaultLabel: 'Star' },
+};
+
+function actionLabel(action: SwipeAction, context: { unread: boolean; starred: boolean }): string {
+  if (action === 'read') return context.unread ? 'Read' : 'Unread';
+  if (action === 'star') return context.starred ? 'Unstar' : 'Star';
+  if (action === 'none') return '';
+  return ACTION_META[action].defaultLabel;
+}
+
+export function SwipeableRow({
+  children, leftAction, rightAction, context, onAction,
+}: SwipeableRowProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  const dx = useRef(new Animated.Value(0)).current;
+  const claimed = useRef(false);
+  const widthRef = useRef(Dimensions.get('window').width);
+  const openSideRef = useRef<'left' | 'right' | null>(null);
+  const [openSide, setOpenSide] = useState<'left' | 'right' | null>(null);
+
+  const close = () => {
+    Animated.spring(dx, { toValue: 0, useNativeDriver: true, speed: 24, bounciness: 4 }).start();
+    openSideRef.current = null;
+    setOpenSide(null);
+  };
+
+  const openRight = () => {
+    Animated.spring(dx, { toValue: REVEAL_WIDTH, useNativeDriver: true, speed: 24, bounciness: 4 }).start();
+    openSideRef.current = 'right';
+    setOpenSide('right');
+  };
+
+  const openLeft = () => {
+    Animated.spring(dx, { toValue: -REVEAL_WIDTH, useNativeDriver: true, speed: 24, bounciness: 4 }).start();
+    openSideRef.current = 'left';
+    setOpenSide('left');
+  };
+
+  const responder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => false,
+      onMoveShouldSetPanResponder: (_, g) => {
+        if (Math.abs(g.dx) < MIN_DX_TO_CLAIM) return false;
+        if (Math.abs(g.dx) < Math.abs(g.dy) * DIRECTION_BIAS) return false;
+        // If a side is already open, allow the gesture so the user can drag it closed.
+        if (openSideRef.current === null) {
+          if (g.dx > 0 && rightAction === 'none') return false;
+          if (g.dx < 0 && leftAction === 'none') return false;
+        }
+        claimed.current = true;
+        return true;
+      },
+      onPanResponderMove: (_, g) => {
+        const base = openSideRef.current === 'right' ? REVEAL_WIDTH : openSideRef.current === 'left' ? -REVEAL_WIDTH : 0;
+        const next = base + g.dx;
+        const clamped = Math.max(-MAX_DRAG_OVERSHOOT, Math.min(MAX_DRAG_OVERSHOOT, next));
+        dx.setValue(clamped);
+      },
+      onPanResponderRelease: (_, g) => {
+        const base = openSideRef.current === 'right' ? REVEAL_WIDTH : openSideRef.current === 'left' ? -REVEAL_WIDTH : 0;
+        const finalDx = base + g.dx;
+
+        if (finalDx > ACTIVATION_THRESHOLD && rightAction !== 'none') {
+          openRight();
+        } else if (finalDx < -ACTIVATION_THRESHOLD && leftAction !== 'none') {
+          openLeft();
+        } else {
+          close();
+        }
+        claimed.current = false;
+      },
+      onPanResponderTerminate: () => {
+        close();
+        claimed.current = false;
+      },
+      onPanResponderTerminationRequest: () => !claimed.current,
+    }),
+  ).current;
+
+  const fireAction = (action: SwipeAction) => {
+    close();
+    if (action !== 'none') onAction(action);
+  };
+
+  const renderBand = (action: SwipeAction, side: 'left' | 'right') => {
+    if (action === 'none') return null;
+    const meta = ACTION_META[action];
+    const Icon = meta.icon;
+    const label = actionLabel(action, context);
+    return (
+      <Pressable
+        onPress={() => fireAction(action)}
+        style={[
+          styles.band,
+          side === 'left' ? { left: 0, alignItems: 'flex-start' } : { right: 0, alignItems: 'flex-end' },
+          { backgroundColor: meta.bg, width: REVEAL_WIDTH },
+        ]}
+      >
+        <View style={styles.bandInner}>
+          <Icon size={20} color="#fff" />
+          <Text style={styles.bandLabel}>{label}</Text>
+        </View>
+      </Pressable>
+    );
+  };
+
+  const onLayout = (e: { nativeEvent: { layout: { width: number } } }) => {
+    widthRef.current = e.nativeEvent.layout.width;
+  };
+
+  return (
+    <View style={styles.wrap} onLayout={onLayout} {...responder.panHandlers}>
+      {renderBand(rightAction, 'left')}
+      {renderBand(leftAction, 'right')}
+      <Animated.View style={[styles.content, { transform: [{ translateX: dx }] }]}>
+        {children}
+        {/* When an action is revealed, an overlay absorbs taps on the row so a
+            tap closes the swipe instead of opening the email. */}
+        {openSide ? (
+          <Pressable
+            style={StyleSheet.absoluteFill}
+            onPress={close}
+          />
+        ) : null}
+      </Animated.View>
+    </View>
+  );
+}
+
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+  wrap: { position: 'relative', backgroundColor: c.background },
+  content: { backgroundColor: c.background },
+  band: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+  },
+  bandInner: { alignItems: 'center', gap: 4 },
+  bandLabel: { color: '#fff', fontWeight: '600', ...typography.caption },
+  });
+}

src/components/ToggleSwitch.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Pressable, View, StyleSheet } from 'react-native';
-import { colors, radius, componentSizes } from '../theme/tokens';
+import { radius, componentSizes, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
 
 interface ToggleSwitchProps {
   value: boolean;
@@ -16,6 +17,8 @@ interface ToggleSwitchProps {
  * - translate-x-6 (checked) / translate-x-1 (unchecked)
  */
 export default function ToggleSwitch({ value, onValueChange, disabled = false }: ToggleSwitchProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <Pressable
       style={[
@@ -37,7 +40,8 @@ export default function ToggleSwitch({ value, onValueChange, disabled = false }:
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   track: {
     width: componentSizes.toggleWidth,    // w-11 = 44
     height: componentSizes.toggleHeight,  // h-6  = 24
@@ -45,18 +49,19 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   trackOn: {
-    backgroundColor: colors.primary,
+    backgroundColor: c.primary,
   },
   trackOff: {
-    backgroundColor: colors.muted,
+    backgroundColor: c.muted,
   },
   thumb: {
     width: componentSizes.toggleThumb,    // h-4 w-4 = 16
     height: componentSizes.toggleThumb,
     borderRadius: radius.full,
-    backgroundColor: colors.background,
+    backgroundColor: c.background,
   },
   disabled: {
     opacity: 0.5,
   },
-});
+  });
+}

src/components/UpdateBanner.tsx

@@ -2,9 +2,12 @@ import React from 'react';
 import { View, Text, StyleSheet, Pressable } from 'react-native';
 import { Download, X } from 'lucide-react-native';
 import { useUpdatesStore } from '../stores/updates-store';
-import { colors, spacing, radius, typography } from '../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
 
 export function UpdateBanner(): React.ReactElement | null {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const cachedLatest = useUpdatesStore((s) => s.cachedLatest);
   const dismissedTag = useUpdatesStore((s) => s.dismissedTag);
   const installing = useUpdatesStore((s) => s.installing);
@@ -18,7 +21,7 @@ export function UpdateBanner(): React.ReactElement | null {
 
   return (
     <View style={styles.banner}>
-      <Download size={16} color={colors.primaryForeground} />
+      <Download size={16} color={c.primaryForeground} />
       <View style={{ flex: 1 }}>
         <Text style={styles.title}>Update available</Text>
         <Text style={styles.subtitle}>
@@ -33,29 +36,31 @@ export function UpdateBanner(): React.ReactElement | null {
         <Text style={styles.installText}>{installing ? '…' : 'Install'}</Text>
       </Pressable>
       <Pressable style={styles.dismiss} onPress={dismissCurrent} hitSlop={8}>
-        <X size={14} color={colors.primaryForeground} />
+        <X size={14} color={c.primaryForeground} />
       </Pressable>
     </View>
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   banner: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: spacing.md,
     paddingHorizontal: spacing.lg,
     paddingVertical: spacing.md,
-    backgroundColor: colors.primary,
+    backgroundColor: c.primary,
   },
-  title: { ...typography.bodyMedium, color: colors.primaryForeground },
-  subtitle: { ...typography.caption, color: colors.primaryForeground, opacity: 0.85 },
+  title: { ...typography.bodyMedium, color: c.primaryForeground },
+  subtitle: { ...typography.caption, color: c.primaryForeground, opacity: 0.85 },
   installButton: {
     paddingHorizontal: spacing.md,
     paddingVertical: 6,
     borderRadius: radius.sm,
     backgroundColor: 'rgba(255,255,255,0.2)',
   },
-  installText: { ...typography.captionMedium, color: colors.primaryForeground },
+  installText: { ...typography.captionMedium, color: c.primaryForeground },
   dismiss: { padding: 4 },
-});
+  });
+}

src/components/calendar/AgendaView.tsx

@@ -3,7 +3,8 @@ import { SectionList, StyleSheet, Text, View } from 'react-native';
 import { format, isSameDay, isToday, isTomorrow } from 'date-fns';
 import { CalendarDays } from 'lucide-react-native';
 import type { Calendar, CalendarEvent } from '../../api/types';
-import { colors, spacing, typography } from '../../theme/tokens';
+import { spacing, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 import {
   buildEventDayIndex,
   eventsOnDayFromIndex,
@@ -41,6 +42,8 @@ export function AgendaView({
   eventsByDay,
   onSelectEvent,
 }: AgendaViewProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const index = React.useMemo(
     () => eventsByDay ?? buildEventDayIndex(events),
     [eventsByDay, events],
@@ -78,7 +81,7 @@ export function AgendaView({
   if (sections.length === 0) {
     return (
       <View style={styles.empty}>
-        <CalendarDays size={40} color={colors.surfaceActive} />
+        <CalendarDays size={40} color={c.surfaceActive} />
         <Text style={styles.emptyTitle}>No upcoming events</Text>
         <Text style={styles.emptySubtitle}>The next {daysAhead} days are clear.</Text>
       </View>
@@ -118,7 +121,8 @@ export function AgendaView({
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   listContent: { paddingBottom: 80 },
   sectionHeader: {
     flexDirection: 'row',
@@ -126,16 +130,16 @@ const styles = StyleSheet.create({
     gap: spacing.sm,
     paddingHorizontal: spacing.lg,
     paddingVertical: spacing.sm,
-    backgroundColor: colors.surface,
+    backgroundColor: c.surface,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
   },
-  sectionTitle: { ...typography.bodyMedium, color: colors.text },
-  sectionTitleToday: { color: colors.primary },
-  sectionSub: { ...typography.caption, color: colors.textMuted },
+  sectionTitle: { ...typography.bodyMedium, color: c.text },
+  sectionTitleToday: { color: c.primary },
+  sectionSub: { ...typography.caption, color: c.textMuted },
   itemWrap: { paddingHorizontal: spacing.lg, paddingTop: spacing.sm },
   emptyDayWrap: { paddingHorizontal: spacing.lg, paddingVertical: spacing.md },
-  emptyDayText: { ...typography.caption, color: colors.textMuted, textAlign: 'center' },
+  emptyDayText: { ...typography.caption, color: c.textMuted, textAlign: 'center' },
   empty: {
     flex: 1,
     alignItems: 'center',
@@ -143,6 +147,7 @@ const styles = StyleSheet.create({
     gap: spacing.sm,
     paddingVertical: spacing.xxxl,
   },
-  emptyTitle: { ...typography.bodyMedium, color: colors.textSecondary },
-  emptySubtitle: { ...typography.caption, color: colors.textMuted },
-});
+  emptyTitle: { ...typography.bodyMedium, color: c.textSecondary },
+  emptySubtitle: { ...typography.caption, color: c.textMuted },
+  });
+}

src/components/calendar/CalendarSidebarDrawer.tsx

@@ -13,7 +13,8 @@ import {
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Check, X } from 'lucide-react-native';
 import type { Calendar } from '../../api/types';
-import { colors, radius, spacing, typography } from '../../theme/tokens';
+import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 import { getCalendarColor } from '../../lib/calendar-utils';
 
 interface CalendarSidebarDrawerProps {
@@ -31,6 +32,8 @@ export function CalendarSidebarDrawer({
   onToggle,
   onClose,
 }: CalendarSidebarDrawerProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const slideX = React.useRef(new Animated.Value(-Dimensions.get('window').width)).current;
   const overlayOpacity = React.useRef(new Animated.Value(0)).current;
 
@@ -89,7 +92,7 @@ export function CalendarSidebarDrawer({
         <SafeAreaView style={styles.drawerSafe} edges={['top', 'bottom', 'left']}>
           <View style={styles.header}>
             <Pressable onPress={onClose} style={styles.headerClose} hitSlop={8}>
-              <X size={20} color={colors.text} />
+              <X size={20} color={c.text} />
             </Pressable>
             <Text style={styles.headerTitle}>Calendars</Text>
           </View>
@@ -134,15 +137,17 @@ function Section({
   hiddenSet: Set<string>;
   onToggle: (id: string) => void;
 }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <View style={styles.section}>
       <Text style={styles.sectionTitle}>{title}</Text>
-      {calendars.map((c) => {
-        const visible = !hiddenSet.has(c.id);
+      {calendars.map((cal) => {
+        const visible = !hiddenSet.has(cal.id);
         return (
           <Pressable
-            key={c.id}
-            onPress={() => onToggle(c.id)}
+            key={cal.id}
+            onPress={() => onToggle(cal.id)}
             style={({ pressed }) => [
               styles.row,
               pressed && styles.rowPressed,
@@ -152,15 +157,15 @@ function Section({
               style={[
                 styles.swatch,
                 {
-                  backgroundColor: visible ? getCalendarColor(c) : 'transparent',
-                  borderColor: getCalendarColor(c),
+                  backgroundColor: visible ? getCalendarColor(cal) : 'transparent',
+                  borderColor: getCalendarColor(cal),
                 },
               ]}
             >
-              {visible && <Check size={12} color={colors.textInverse} />}
+              {visible && <Check size={12} color={c.textInverse} />}
             </View>
             <Text style={[styles.rowName, !visible && styles.rowNameMuted]}>
-              {c.name}
+              {cal.name}
             </Text>
           </Pressable>
         );
@@ -169,7 +174,8 @@ function Section({
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   overlay: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0,0,0,0.5)',
@@ -184,7 +190,7 @@ const styles = StyleSheet.create({
     maxWidth: 340,
     backgroundColor: '#262626',
     borderRightWidth: 1,
-    borderRightColor: colors.border,
+    borderRightColor: c.border,
   },
   drawerSafe: { flex: 1 },
 
@@ -195,7 +201,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.sm,
     paddingVertical: spacing.sm,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
   },
   headerClose: {
     width: 36,
@@ -204,14 +210,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     borderRadius: radius.sm,
   },
-  headerTitle: { ...typography.h3, color: colors.text },
+  headerTitle: { ...typography.h3, color: c.text },
 
   scroll: { flex: 1 },
   scrollContent: { paddingBottom: spacing.lg },
 
   empty: {
     ...typography.body,
-    color: colors.textMuted,
+    color: c.textMuted,
     paddingHorizontal: spacing.lg,
     paddingVertical: spacing.lg,
   },
@@ -219,7 +225,7 @@ const styles = StyleSheet.create({
   section: { paddingTop: spacing.md },
   sectionTitle: {
     ...typography.bodySemibold,
-    color: colors.text,
+    color: c.text,
     paddingHorizontal: spacing.lg,
     paddingBottom: spacing.xs,
   },
@@ -231,7 +237,7 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.sm,
     minHeight: 44,
   },
-  rowPressed: { backgroundColor: colors.surfaceHover },
+  rowPressed: { backgroundColor: c.surfaceHover },
   swatch: {
     width: 18,
     height: 18,
@@ -240,6 +246,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  rowName: { flex: 1, ...typography.body, color: colors.text },
-  rowNameMuted: { color: colors.textMuted },
-});
+  rowName: { flex: 1, ...typography.body, color: c.text },
+  rowNameMuted: { color: c.textMuted },
+  });
+}

src/components/calendar/EventCard.tsx

@@ -3,7 +3,8 @@ import { View, Text, StyleSheet, Pressable } from 'react-native';
 import { Clock, MapPin, Users } from 'lucide-react-native';
 import { format } from 'date-fns';
 import type { Calendar, CalendarEvent } from '../../api/types';
-import { colors, radius, spacing, typography } from '../../theme/tokens';
+import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 import { eventTimeRange, getEventColor } from '../../lib/calendar-utils';
 
 interface EventCardProps {
@@ -24,6 +25,8 @@ function formatTimeRange(event: CalendarEvent): string {
 }
 
 export function EventCard({ event, calendars, onPress, onLongPress }: EventCardProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const color = getEventColor(event, calendars);
   const time = formatTimeRange(event);
   const count = participantCount(event);
@@ -48,13 +51,13 @@ export function EventCard({ event, calendars, onPress, onLongPress }: EventCardP
         </View>
         {!event.showWithoutTime && (
           <View style={styles.detailRow}>
-            <Clock size={12} color={colors.textMuted} />
+            <Clock size={12} color={c.textMuted} />
             <Text style={styles.detailText}>{time}</Text>
           </View>
         )}
         {event.description ? (
           <View style={styles.detailRow}>
-            <MapPin size={12} color={colors.textMuted} />
+            <MapPin size={12} color={c.textMuted} />
             <Text style={styles.detailText} numberOfLines={1}>
               {event.description}
             </Text>
@@ -62,7 +65,7 @@ export function EventCard({ event, calendars, onPress, onLongPress }: EventCardP
         ) : null}
         {count > 0 && (
           <View style={styles.detailRow}>
-            <Users size={12} color={colors.textMuted} />
+            <Users size={12} color={c.textMuted} />
             <Text style={styles.detailText}>{count} participants</Text>
           </View>
         )}
@@ -71,17 +74,18 @@ export function EventCard({ event, calendars, onPress, onLongPress }: EventCardP
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   card: {
     flexDirection: 'row',
-    backgroundColor: colors.card,
+    backgroundColor: c.card,
     borderRadius: radius.lg,
     marginBottom: spacing.sm,
     overflow: 'hidden',
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
   },
-  cardPressed: { backgroundColor: colors.surfaceHover },
+  cardPressed: { backgroundColor: c.surfaceHover },
   colorBar: { width: 3 },
   body: { flex: 1, padding: spacing.md, gap: 4 },
   headerRow: {
@@ -90,14 +94,15 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: spacing.sm,
   },
-  title: { ...typography.bodyMedium, color: colors.text, flex: 1 },
+  title: { ...typography.bodyMedium, color: c.text, flex: 1 },
   allDayBadge: {
-    backgroundColor: colors.primaryBg,
+    backgroundColor: c.primaryBg,
     paddingHorizontal: 8,
     paddingVertical: 2,
     borderRadius: radius.full,
   },
-  allDayText: { ...typography.small, color: colors.primary },
+  allDayText: { ...typography.small, color: c.primary },
   detailRow: { flexDirection: 'row', alignItems: 'center', gap: 6 },
-  detailText: { ...typography.caption, color: colors.textMuted, flexShrink: 1 },
-});
+  detailText: { ...typography.caption, color: c.textMuted, flexShrink: 1 },
+  });
+}

src/components/calendar/EventDetailSheet.tsx

@@ -26,12 +26,14 @@ import {
 } from 'lucide-react-native';
 import { format } from 'date-fns';
 import type { Calendar, CalendarEvent } from '../../api/types';
-import { colors, radius, spacing, typography } from '../../theme/tokens';
+import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 import {
   eventTimeRange,
   getEventColor,
   getPrimaryCalendarId,
 } from '../../lib/calendar-utils';
+import { useSheetDrag } from '../../lib/use-sheet-drag';
 
 interface EventDetailSheetProps {
   event: CalendarEvent | null;
@@ -106,9 +108,16 @@ export function EventDetailSheet({
   onDelete,
   onDuplicate,
 }: EventDetailSheetProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const slideY = React.useRef(new Animated.Value(Dimensions.get('window').height)).current;
   const overlayOpacity = React.useRef(new Animated.Value(0)).current;
   const visible = !!event;
+  const dragHandlers = useSheetDrag({
+    slideY,
+    closedY: Dimensions.get('window').height,
+    onClose,
+  });
 
   React.useEffect(() => {
     if (visible) {
@@ -166,17 +175,21 @@ export function EventDetailSheet({
 
       <Animated.View style={[styles.sheet, { transform: [{ translateY: slideY }] }]}>
         <SafeAreaView edges={['bottom']} style={styles.sheetSafe}>
-          <View style={styles.handle} />
+          <View {...dragHandlers}>
+            <View style={styles.handleHit}>
+              <View style={styles.handle} />
+            </View>
 
-          <View style={styles.header}>
-            <View style={[styles.colorBar, { backgroundColor: color }]} />
-            <View style={styles.headerText}>
-              <Text style={styles.title}>{event.title || 'Untitled'}</Text>
-              {calendar && <Text style={styles.subtitle}>{calendar.name}</Text>}
+            <View style={styles.header}>
+              <View style={[styles.colorBar, { backgroundColor: color }]} />
+              <View style={styles.headerText}>
+                <Text style={styles.title}>{event.title || 'Untitled'}</Text>
+                {calendar && <Text style={styles.subtitle}>{calendar.name}</Text>}
+              </View>
+              <Pressable onPress={onClose} style={styles.closeBtn} hitSlop={8}>
+                <X size={20} color={c.textMuted} />
+              </Pressable>
             </View>
-            <Pressable onPress={onClose} style={styles.closeBtn} hitSlop={8}>
-              <X size={20} color={colors.textMuted} />
-            </Pressable>
           </View>
 
           <ScrollView
@@ -184,29 +197,29 @@ export function EventDetailSheet({
             contentContainerStyle={styles.bodyContent}
             showsVerticalScrollIndicator={false}
           >
-            <DetailRow icon={<Clock size={16} color={colors.textMuted} />} text={range} />
+            <DetailRow icon={<Clock size={16} color={c.textMuted} />} text={range} />
             {event.description ? (
               <DetailRow
-                icon={<AlignLeft size={16} color={colors.textMuted} />}
+                icon={<AlignLeft size={16} color={c.textMuted} />}
                 text={event.description}
                 multiline
               />
             ) : null}
             {recurrence && (
               <DetailRow
-                icon={<Repeat size={16} color={colors.textMuted} />}
+                icon={<Repeat size={16} color={c.textMuted} />}
                 text={recurrence}
               />
             )}
             {alert && (
               <DetailRow
-                icon={<Bell size={16} color={colors.textMuted} />}
+                icon={<Bell size={16} color={c.textMuted} />}
                 text={alert}
               />
             )}
             {calendar && (
               <DetailRow
-                icon={<CalendarIcon size={16} color={colors.textMuted} />}
+                icon={<CalendarIcon size={16} color={c.textMuted} />}
                 text={calendar.name}
               />
             )}
@@ -214,7 +227,7 @@ export function EventDetailSheet({
             {participants.length > 0 && (
               <View style={styles.participantsBlock}>
                 <View style={styles.participantsHeader}>
-                  <Users size={16} color={colors.textMuted} />
+                  <Users size={16} color={c.textMuted} />
                   <Text style={styles.participantsHeaderText}>
                     {participants.length} participants
                   </Text>
@@ -244,21 +257,21 @@ export function EventDetailSheet({
           <View style={styles.actions}>
             {onEdit && (
               <ActionButton
-                icon={<Pencil size={18} color={colors.text} />}
+                icon={<Pencil size={18} color={c.text} />}
                 label="Edit"
                 onPress={() => onEdit(event)}
               />
             )}
             {onDuplicate && (
               <ActionButton
-                icon={<Copy size={18} color={colors.text} />}
+                icon={<Copy size={18} color={c.text} />}
                 label="Duplicate"
                 onPress={() => onDuplicate(event)}
               />
             )}
             {onDelete && (
               <ActionButton
-                icon={<Trash2 size={18} color={colors.error} />}
+                icon={<Trash2 size={18} color={c.error} />}
                 label="Delete"
                 onPress={() => onDelete(event)}
                 destructive
@@ -280,6 +293,8 @@ function DetailRow({
   text: string;
   multiline?: boolean;
 }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <View style={styles.detailRow}>
       <View style={styles.detailIcon}>{icon}</View>
@@ -301,6 +316,8 @@ function ActionButton({
   onPress: () => void;
   destructive?: boolean;
 }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <Pressable
       onPress={onPress}
@@ -320,13 +337,13 @@ function ActionButton({
 function statusColor(status?: string): string {
   switch (status) {
     case 'accepted':
-      return colors.success;
+      return c.success;
     case 'declined':
-      return colors.error;
+      return c.error;
     case 'tentative':
-      return colors.warning;
+      return c.warning;
     default:
-      return colors.textMuted;
+      return c.textMuted;
   }
 }
 
@@ -345,7 +362,8 @@ function statusLabel(status?: string): string {
   }
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   overlay: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0,0,0,0.5)',
@@ -357,20 +375,23 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
     maxHeight: '85%',
-    backgroundColor: colors.background,
+    backgroundColor: c.background,
     borderTopLeftRadius: radius.xl,
     borderTopRightRadius: radius.xl,
     borderTopWidth: 1,
-    borderTopColor: colors.border,
+    borderTopColor: c.border,
   },
   sheetSafe: { paddingTop: spacing.sm },
+  handleHit: {
+    alignItems: 'center',
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.sm,
+  },
   handle: {
-    alignSelf: 'center',
     width: 36,
     height: 4,
     borderRadius: 2,
-    backgroundColor: colors.surfaceActive,
-    marginBottom: spacing.sm,
+    backgroundColor: c.surfaceActive,
   },
 
   header: {
@@ -382,8 +403,8 @@ const styles = StyleSheet.create({
   },
   colorBar: { width: 4, alignSelf: 'stretch', borderRadius: 2 },
   headerText: { flex: 1 },
-  title: { ...typography.h3, color: colors.text },
-  subtitle: { ...typography.caption, color: colors.textMuted, marginTop: 2 },
+  title: { ...typography.h3, color: c.text },
+  subtitle: { ...typography.caption, color: c.textMuted, marginTop: 2 },
   closeBtn: { padding: 4 },
 
   body: { maxHeight: 400 },
@@ -394,7 +415,7 @@ const styles = StyleSheet.create({
   },
   detailRow: { flexDirection: 'row', gap: spacing.md, alignItems: 'flex-start' },
   detailIcon: { width: 16, paddingTop: 2 },
-  detailText: { flex: 1, ...typography.body, color: colors.text },
+  detailText: { flex: 1, ...typography.body, color: c.text },
 
   participantsBlock: {
     marginTop: spacing.sm,
@@ -406,7 +427,7 @@ const styles = StyleSheet.create({
     gap: spacing.md,
     marginBottom: spacing.xs,
   },
-  participantsHeaderText: { ...typography.bodyMedium, color: colors.text },
+  participantsHeaderText: { ...typography.bodyMedium, color: c.text },
   participantRow: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -414,13 +435,13 @@ const styles = StyleSheet.create({
     paddingVertical: 4,
   },
   participantDot: { width: 8, height: 8, borderRadius: 4 },
-  participantName: { flex: 1, ...typography.body, color: colors.text },
-  participantStatus: { ...typography.caption, color: colors.textMuted },
+  participantName: { flex: 1, ...typography.body, color: c.text },
+  participantStatus: { ...typography.caption, color: c.textMuted },
 
   actions: {
     flexDirection: 'row',
     borderTopWidth: 1,
-    borderTopColor: colors.border,
+    borderTopColor: c.border,
     paddingHorizontal: spacing.md,
     paddingTop: spacing.sm,
   },
@@ -432,7 +453,8 @@ const styles = StyleSheet.create({
     gap: 4,
     borderRadius: radius.sm,
   },
-  actionBtnPressed: { backgroundColor: colors.surfaceHover },
-  actionLabel: { ...typography.caption, color: colors.text },
-  actionLabelDestructive: { color: colors.error },
-});
+  actionBtnPressed: { backgroundColor: c.surfaceHover },
+  actionLabel: { ...typography.caption, color: c.text },
+  actionLabelDestructive: { color: c.error },
+  });
+}

src/components/calendar/EventModal.tsx

@@ -24,7 +24,8 @@ import {
 } from 'lucide-react-native';
 import { addHours, addMinutes, format } from 'date-fns';
 import type { Calendar, CalendarEvent, Participant } from '../../api/types';
-import { colors, radius, spacing, typography } from '../../theme/tokens';
+import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 import {
   buildAllDayDuration,
   getCalendarColor,
@@ -150,6 +151,8 @@ export function EventModal({
   onDelete,
   onClose,
 }: EventModalProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const isEdit = !!event;
 
   const [title, setTitle] = React.useState('');
@@ -264,7 +267,7 @@ export function EventModal({
       <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
         <View style={styles.header}>
           <Pressable onPress={onClose} hitSlop={8} style={styles.headerBtn}>
-            <X size={20} color={colors.text} />
+            <X size={20} color={c.text} />
           </Pressable>
           <Text style={styles.headerTitle}>{isEdit ? 'Edit event' : 'New event'}</Text>
           <Button
@@ -287,12 +290,12 @@ export function EventModal({
             value={title}
             onChangeText={setTitle}
             placeholder="Title"
-            placeholderTextColor={colors.textMuted}
+            placeholderTextColor={c.textMuted}
             style={styles.titleInput}
           />
 
           <Section
-            icon={<CalendarIcon size={16} color={colors.textMuted} />}
+            icon={<CalendarIcon size={16} color={c.textMuted} />}
             label="Calendar"
           >
             <Pressable
@@ -340,14 +343,14 @@ export function EventModal({
             )}
           </Section>
 
-          <Section icon={<Clock size={16} color={colors.textMuted} />} label="Time">
+          <Section icon={<Clock size={16} color={c.textMuted} />} label="Time">
             <View style={styles.allDayRow}>
               <Text style={styles.fieldText}>All-day</Text>
               <Switch
                 value={allDay}
                 onValueChange={setAllDay}
-                thumbColor={allDay ? colors.primary : colors.textMuted}
-                trackColor={{ false: colors.surface, true: colors.primaryBg }}
+                thumbColor={allDay ? c.primary : c.textMuted}
+                trackColor={{ false: c.surface, true: c.primaryBg }}
               />
             </View>
 
@@ -392,7 +395,7 @@ export function EventModal({
             </View>
           </Section>
 
-          <Section icon={<Repeat size={16} color={colors.textMuted} />} label="Repeat">
+          <Section icon={<Repeat size={16} color={c.textMuted} />} label="Repeat">
             <Pressable
               style={styles.fieldButton}
               onPress={() => setRecurrenceOpen((v) => !v)}
@@ -420,7 +423,7 @@ export function EventModal({
             )}
           </Section>
 
-          <Section icon={<Bell size={16} color={colors.textMuted} />} label="Reminder">
+          <Section icon={<Bell size={16} color={c.textMuted} />} label="Reminder">
             <Pressable
               style={styles.fieldButton}
               onPress={() => setAlertOpen((v) => !v)}
@@ -449,21 +452,21 @@ export function EventModal({
           </Section>
 
           <Section
-            icon={<MapPin size={16} color={colors.textMuted} />}
+            icon={<MapPin size={16} color={c.textMuted} />}
             label="Description"
           >
             <TextInput
               value={description}
               onChangeText={setDescription}
               placeholder="Notes, location, link…"
-              placeholderTextColor={colors.textMuted}
+              placeholderTextColor={c.textMuted}
               multiline
               style={styles.descriptionInput}
             />
           </Section>
 
           <Section
-            icon={<Users size={16} color={colors.textMuted} />}
+            icon={<Users size={16} color={c.textMuted} />}
             label="Participants"
           >
             <ParticipantInput
@@ -480,7 +483,7 @@ export function EventModal({
               ]}
               onPress={handleDelete}
             >
-              <Trash2 size={16} color={colors.error} />
+              <Trash2 size={16} color={c.error} />
               <Text style={styles.deleteBtnText}>Delete event</Text>
             </Pressable>
           )}
@@ -560,6 +563,8 @@ function Section({
   label: string;
   children: React.ReactNode;
 }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <View style={styles.section}>
       <View style={styles.sectionHeader}>
@@ -571,15 +576,16 @@ function Section({
   );
 }
 
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+  container: { flex: 1, backgroundColor: c.background },
   header: {
     flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.sm,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
     gap: spacing.md,
   },
   headerBtn: {
@@ -589,23 +595,23 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     borderRadius: radius.full,
   },
-  headerTitle: { flex: 1, ...typography.h3, color: colors.text },
+  headerTitle: { flex: 1, ...typography.h3, color: c.text },
 
   body: { flex: 1 },
   bodyContent: { padding: spacing.lg, gap: spacing.lg, paddingBottom: spacing.xxxl },
 
   titleInput: {
     ...typography.h2,
-    color: colors.text,
+    color: c.text,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
     paddingVertical: spacing.sm,
   },
 
   section: { gap: spacing.sm },
   sectionHeader: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
   sectionIcon: { width: 16 },
-  sectionLabel: { ...typography.bodyMedium, color: colors.textSecondary },
+  sectionLabel: { ...typography.bodyMedium, color: c.textSecondary },
   sectionBody: { gap: spacing.sm },
 
   fieldButton: {
@@ -614,20 +620,20 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.sm,
     borderRadius: radius.sm,
     borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.surface,
+    borderColor: c.border,
+    backgroundColor: c.surface,
     justifyContent: 'center',
   },
-  fieldText: { ...typography.body, color: colors.text },
+  fieldText: { ...typography.body, color: c.text },
 
   calendarRow: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
   calendarSwatch: { width: 12, height: 12, borderRadius: 6 },
 
   popover: {
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     borderRadius: radius.sm,
-    backgroundColor: colors.surface,
+    backgroundColor: c.surface,
     overflow: 'hidden',
   },
   popoverRow: {
@@ -637,10 +643,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.sm,
     borderBottomWidth: 1,
-    borderBottomColor: colors.borderLight,
+    borderBottomColor: c.borderLight,
   },
-  popoverRowActive: { backgroundColor: colors.primaryBg },
-  popoverRowText: { ...typography.body, color: colors.text },
+  popoverRowActive: { backgroundColor: c.primaryBg },
+  popoverRowText: { ...typography.body, color: c.text },
 
   allDayRow: {
     flexDirection: 'row',
@@ -649,9 +655,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.xs,
     borderRadius: radius.sm,
-    backgroundColor: colors.surface,
+    backgroundColor: c.surface,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
   },
   dateRow: {
     flexDirection: 'row',
@@ -660,20 +666,20 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.sm,
     borderRadius: radius.sm,
     borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.surface,
+    borderColor: c.border,
+    backgroundColor: c.surface,
   },
-  dateLabel: { ...typography.body, color: colors.textSecondary, flex: 1 },
+  dateLabel: { ...typography.body, color: c.textSecondary, flex: 1 },
   datePickers: { flexDirection: 'row', gap: spacing.sm },
   dateBtn: {
     paddingHorizontal: spacing.sm,
     paddingVertical: 4,
     borderRadius: radius.xs,
-    backgroundColor: colors.background,
+    backgroundColor: c.background,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
   },
-  dateText: { ...typography.body, color: colors.text },
+  dateText: { ...typography.body, color: c.text },
 
   descriptionInput: {
     minHeight: 80,
@@ -681,9 +687,9 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.sm,
     borderRadius: radius.sm,
     borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.surface,
-    color: colors.text,
+    borderColor: c.border,
+    backgroundColor: c.surface,
+    color: c.text,
     ...typography.body,
     textAlignVertical: 'top',
   },
@@ -696,9 +702,10 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.md,
     borderRadius: radius.sm,
     borderWidth: 1,
-    borderColor: colors.errorBorder,
+    borderColor: c.errorBorder,
     marginTop: spacing.lg,
   },
-  deleteBtnPressed: { backgroundColor: colors.errorBg },
-  deleteBtnText: { ...typography.bodyMedium, color: colors.error },
-});
+  deleteBtnPressed: { backgroundColor: c.errorBg },
+  deleteBtnText: { ...typography.bodyMedium, color: c.error },
+  });
+}

src/components/calendar/MonthView.tsx

@@ -12,7 +12,8 @@ import {
   startOfWeek,
 } from 'date-fns';
 import type { Calendar, CalendarEvent } from '../../api/types';
-import { colors, componentSizes, radius, spacing, typography } from '../../theme/tokens';
+import { componentSizes, radius, spacing, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 import {
   buildEventDayIndex,
   eventsOnDayFromIndex,
@@ -32,7 +33,7 @@ interface MonthViewProps {
   onLongPressDate?: (date: Date) => void;
 }
 
-export function MonthView({
+function MonthViewInner({
   currentDate,
   selectedDate,
   events,
@@ -41,6 +42,8 @@ export function MonthView({
   onSelectDate,
   onLongPressDate,
 }: MonthViewProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const index = React.useMemo(
     () => eventsByDay ?? buildEventDayIndex(events),
     [eventsByDay, events],
@@ -118,14 +121,17 @@ export function MonthView({
   );
 }
 
-const styles = StyleSheet.create({
+export const MonthView = React.memo(MonthViewInner);
+
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   grid: { paddingHorizontal: spacing.sm },
   weekdayRow: { flexDirection: 'row', paddingHorizontal: spacing.xs, marginBottom: 4 },
   weekdayLabel: {
     flex: 1,
     textAlign: 'center',
     ...typography.small,
-    color: colors.textMuted,
+    color: c.textMuted,
   },
   daysGrid: { flexDirection: 'row', flexWrap: 'wrap' },
   dayCell: { width: '14.28%', alignItems: 'center', paddingVertical: 4 },
@@ -136,12 +142,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  dayText: { ...typography.body, color: colors.text },
-  dayTextMuted: { color: colors.textMuted },
-  todayCircle: { backgroundColor: colors.primary },
-  todayText: { color: colors.textInverse, fontWeight: '700' },
-  selectedCircle: { backgroundColor: colors.primaryBg, borderWidth: 1.5, borderColor: colors.primary },
-  selectedText: { color: colors.primary, fontWeight: '600' },
+  dayText: { ...typography.body, color: c.text },
+  dayTextMuted: { color: c.textMuted },
+  todayCircle: { backgroundColor: c.primary },
+  todayText: { color: c.textInverse, fontWeight: '700' },
+  selectedCircle: { backgroundColor: c.primaryBg, borderWidth: 1.5, borderColor: c.primary },
+  selectedText: { color: c.primary, fontWeight: '600' },
   dotsRow: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -158,9 +164,10 @@ const styles = StyleSheet.create({
     borderRadius: componentSizes.eventDot / 2,
   },
   overflowText: {
-    color: colors.textMuted,
+    color: c.textMuted,
     fontSize: 9,
     lineHeight: 10,
     marginLeft: 1,
   },
-});
+  });
+}

src/components/calendar/ParticipantInput.tsx

@@ -8,7 +8,8 @@ import {
   ScrollView,
 } from 'react-native';
 import { X } from 'lucide-react-native';
-import { colors, radius, spacing, typography } from '../../theme/tokens';
+import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 import { useContactsStore } from '../../stores/contacts-store';
 import type { Participant } from '../../api/types';
 
@@ -44,6 +45,8 @@ function flattenContactEmails(): Suggestion[] {
 }
 
 export function ParticipantInput({ participants, onChange }: ParticipantInputProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const [draft, setDraft] = React.useState('');
   const [allSuggestions] = React.useState(() => flattenContactEmails());
 
@@ -110,7 +113,7 @@ export function ParticipantInput({ participants, onChange }: ParticipantInputPro
                 {p.name || p.email || 'Unknown'}
               </Text>
               <Pressable onPress={() => removeParticipant(id)} hitSlop={6}>
-                <X size={12} color={colors.textMuted} />
+                <X size={12} color={c.textMuted} />
               </Pressable>
             </View>
           ))}
@@ -121,7 +124,7 @@ export function ParticipantInput({ participants, onChange }: ParticipantInputPro
         value={draft}
         onChangeText={setDraft}
         placeholder="Add participant by email"
-        placeholderTextColor={colors.textMuted}
+        placeholderTextColor={c.textMuted}
         autoCapitalize="none"
         autoCorrect={false}
         keyboardType="email-address"
@@ -155,45 +158,47 @@ export function ParticipantInput({ participants, onChange }: ParticipantInputPro
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   container: { gap: spacing.sm },
   chips: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
   chip: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: 6,
-    backgroundColor: colors.surface,
+    backgroundColor: c.surface,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     borderRadius: radius.full,
     paddingHorizontal: spacing.md,
     paddingVertical: 4,
     maxWidth: '100%',
   },
-  chipText: { ...typography.caption, color: colors.text, maxWidth: 200 },
+  chipText: { ...typography.caption, color: c.text, maxWidth: 200 },
   input: {
     height: 40,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     borderRadius: radius.sm,
     paddingHorizontal: spacing.md,
-    color: colors.text,
+    color: c.text,
     ...typography.body,
   },
   suggestions: {
     maxHeight: 180,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     borderRadius: radius.sm,
-    backgroundColor: colors.surface,
+    backgroundColor: c.surface,
   },
   suggestionRow: {
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.sm,
     borderBottomWidth: 1,
-    borderBottomColor: colors.borderLight,
+    borderBottomColor: c.borderLight,
   },
-  suggestionRowPressed: { backgroundColor: colors.surfaceHover },
-  suggestionName: { ...typography.bodyMedium, color: colors.text },
-  suggestionEmail: { ...typography.caption, color: colors.textMuted, marginTop: 1 },
-});
+  suggestionRowPressed: { backgroundColor: c.surfaceHover },
+  suggestionName: { ...typography.bodyMedium, color: c.text },
+  suggestionEmail: { ...typography.caption, color: c.textMuted, marginTop: 1 },
+  });
+}

src/components/calendar/RecurrenceScopeDialog.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Modal, View, Text, Pressable, StyleSheet } from 'react-native';
 import { Repeat, Trash2 } from 'lucide-react-native';
-import { colors, radius, spacing, typography } from '../../theme/tokens';
+import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 import { Button } from '..';
 
 export type RecurrenceEditScope = 'this' | 'this_and_future' | 'all';
@@ -25,6 +26,8 @@ export function RecurrenceScopeDialog({
   onSelect,
   onClose,
 }: RecurrenceScopeDialogProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const [selected, setSelected] = React.useState<RecurrenceEditScope>('this');
   const isDelete = actionType === 'delete';
 
@@ -39,9 +42,9 @@ export function RecurrenceScopeDialog({
           <View style={styles.header}>
             <View style={[styles.iconBadge, isDelete ? styles.iconBadgeDanger : styles.iconBadgePrimary]}>
               {isDelete ? (
-                <Trash2 size={20} color={colors.error} />
+                <Trash2 size={20} color={c.error} />
               ) : (
-                <Repeat size={20} color={colors.primary} />
+                <Repeat size={20} color={c.primary} />
               )}
             </View>
             <View style={styles.headerText}>
@@ -90,7 +93,8 @@ export function RecurrenceScopeDialog({
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   backdrop: {
     flex: 1,
     backgroundColor: 'rgba(0,0,0,0.5)',
@@ -101,9 +105,9 @@ const styles = StyleSheet.create({
   dialog: {
     width: '100%',
     maxWidth: 400,
-    backgroundColor: colors.background,
+    backgroundColor: c.background,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     borderRadius: radius.lg,
     padding: spacing.xxl,
     gap: spacing.lg,
@@ -116,11 +120,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  iconBadgeDanger: { backgroundColor: colors.errorBg },
-  iconBadgePrimary: { backgroundColor: colors.primaryBg },
+  iconBadgeDanger: { backgroundColor: c.errorBg },
+  iconBadgePrimary: { backgroundColor: c.primaryBg },
   headerText: { flex: 1 },
-  title: { ...typography.h3, color: colors.text },
-  description: { ...typography.body, color: colors.textMuted, marginTop: 4 },
+  title: { ...typography.h3, color: c.text },
+  description: { ...typography.body, color: c.textMuted, marginTop: 4 },
   options: { gap: spacing.xs },
   option: {
     flexDirection: 'row',
@@ -132,27 +136,28 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: 'transparent',
   },
-  optionActive: { backgroundColor: colors.primaryBg, borderColor: colors.primary },
+  optionActive: { backgroundColor: c.primaryBg, borderColor: c.primary },
   radio: {
     width: 18,
     height: 18,
     borderRadius: 9,
     borderWidth: 1.5,
-    borderColor: colors.border,
+    borderColor: c.border,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  radioActive: { borderColor: colors.primary },
+  radioActive: { borderColor: c.primary },
   radioDot: {
     width: 8,
     height: 8,
     borderRadius: 4,
-    backgroundColor: colors.primary,
+    backgroundColor: c.primary,
   },
-  optionLabel: { ...typography.body, color: colors.text, flex: 1 },
+  optionLabel: { ...typography.body, color: c.text, flex: 1 },
   footer: {
     flexDirection: 'row',
     justifyContent: 'flex-end',
     gap: spacing.md,
   },
-});
+  });
+}

src/components/calendar/WeekView.tsx

@@ -8,7 +8,8 @@ import {
 } from 'react-native';
 import { addDays, format, isSameDay, isToday, startOfWeek } from 'date-fns';
 import type { Calendar, CalendarEvent } from '../../api/types';
-import { colors, radius, spacing, typography } from '../../theme/tokens';
+import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 import {
   buildEventDayIndex,
   buildTimedFullDayWeekSegments,
@@ -39,7 +40,7 @@ interface WeekViewProps {
   weekStartsOn?: 0 | 1;
 }
 
-export function WeekView({
+function WeekViewInner({
   selectedDate,
   events,
   calendars,
@@ -49,6 +50,8 @@ export function WeekView({
   onCreateAtTime,
   weekStartsOn = 0,
 }: WeekViewProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const scrollRef = React.useRef<ScrollView>(null);
 
   const index = React.useMemo(
@@ -303,18 +306,21 @@ export function WeekView({
   );
 }
 
+export const WeekView = React.memo(WeekViewInner);
+
 function minutesToTimeLabel(minutes: number): string {
   const h = Math.floor(minutes / 60);
   const m = minutes % 60;
   return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
 }
 
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+  container: { flex: 1, backgroundColor: c.background },
   headerRow: {
     flexDirection: 'row',
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
   },
   gutter: { width: GUTTER_WIDTH },
   dayHeaders: { flex: 1, flexDirection: 'row' },
@@ -326,7 +332,7 @@ const styles = StyleSheet.create({
   },
   dayHeaderWeekday: {
     ...typography.small,
-    color: colors.textMuted,
+    color: c.textMuted,
     textTransform: 'uppercase',
   },
   dayHeaderNumber: {
@@ -336,29 +342,29 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  dayHeaderNumberToday: { backgroundColor: colors.primary },
+  dayHeaderNumberToday: { backgroundColor: c.primary },
   dayHeaderNumberSelected: {
-    backgroundColor: colors.primaryBg,
+    backgroundColor: c.primaryBg,
     borderWidth: 1,
-    borderColor: colors.primary,
+    borderColor: c.primary,
   },
-  dayHeaderNumberText: { ...typography.bodyMedium, color: colors.text },
-  dayHeaderNumberTextToday: { color: colors.textInverse, fontWeight: '700' },
-  dayHeaderNumberTextSelected: { color: colors.primary, fontWeight: '600' },
+  dayHeaderNumberText: { ...typography.bodyMedium, color: c.text },
+  dayHeaderNumberTextToday: { color: c.textInverse, fontWeight: '700' },
+  dayHeaderNumberTextSelected: { color: c.primary, fontWeight: '600' },
 
   allDayStrip: {
     flexDirection: 'row',
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
     paddingVertical: 2,
   },
   allDayLabelWrap: { alignItems: 'flex-end', justifyContent: 'flex-start', paddingRight: 4 },
-  allDayLabel: { ...typography.small, color: colors.textMuted },
+  allDayLabel: { ...typography.small, color: c.textMuted },
   allDayGrid: { flex: 1, flexDirection: 'row', position: 'relative' },
   allDayCol: {
     flex: 1,
     borderLeftWidth: 1,
-    borderLeftColor: colors.borderLight,
+    borderLeftColor: c.borderLight,
   },
   allDayOverlay: {
     position: 'absolute',
@@ -374,7 +380,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 4,
     justifyContent: 'center',
   },
-  allDayChipText: { fontSize: 10, color: colors.text, fontWeight: '500' },
+  allDayChipText: { fontSize: 10, color: c.text, fontWeight: '500' },
 
   scroll: { flex: 1 },
   scrollContent: {},
@@ -383,19 +389,19 @@ const styles = StyleSheet.create({
   hourLabelCell: { paddingRight: 4, alignItems: 'flex-end' },
   hourLabel: {
     ...typography.small,
-    color: colors.textMuted,
+    color: c.textMuted,
     transform: [{ translateY: -6 }],
   },
   dayCols: { flex: 1, flexDirection: 'row' },
   dayCol: {
     flex: 1,
     borderLeftWidth: 1,
-    borderLeftColor: colors.border,
+    borderLeftColor: c.border,
     position: 'relative',
   },
   hourSlot: {
     borderBottomWidth: 1,
-    borderBottomColor: colors.borderLight,
+    borderBottomColor: c.borderLight,
   },
   eventBlock: {
     position: 'absolute',
@@ -405,8 +411,8 @@ const styles = StyleSheet.create({
     paddingVertical: 2,
     overflow: 'hidden',
   },
-  eventBlockTitle: { fontSize: 10, color: colors.text, fontWeight: '600' },
-  eventBlockTime: { fontSize: 9, color: colors.textMuted, marginTop: 1 },
+  eventBlockTitle: { fontSize: 10, color: c.text, fontWeight: '600' },
+  eventBlockTime: { fontSize: 9, color: c.textMuted, marginTop: 1 },
 
   nowLine: {
     position: 'absolute',
@@ -419,7 +425,8 @@ const styles = StyleSheet.create({
     width: 6,
     height: 6,
     borderRadius: 3,
-    backgroundColor: colors.error,
+    backgroundColor: c.error,
   },
-  nowBar: { flex: 1, height: 1, backgroundColor: colors.error },
-});
+  nowBar: { flex: 1, height: 1, backgroundColor: c.error },
+  });
+}

src/components/contacts/ContactActivity.tsx

@@ -9,7 +9,8 @@ import type { RootStackParamList } from '../../navigation/types';
 import { getEmails, queryEmailsByFilter } from '../../api/email';
 import { useCalendarStore } from '../../stores/calendar-store';
 import SenderAvatar from '../SenderAvatar';
-import { colors, radius, spacing, typography } from '../../theme/tokens';
+import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 
 const EMAIL_LIMIT = 5;
 const EVENT_LIMIT = 5;
@@ -82,6 +83,8 @@ interface Props {
 }
 
 export function ContactActivity({ contact }: Props) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const navigation = useNavigation<Nav>();
   const calendarEvents = useCalendarStore((s) => s.events);
 
@@ -142,12 +145,12 @@ export function ContactActivity({ contact }: Props) {
     <View style={styles.wrap}>
       <View style={styles.section}>
         <View style={styles.sectionHeader}>
-          <MailIcon size={14} color={colors.primary} />
+          <MailIcon size={14} color={c.primary} />
           <Text style={styles.sectionTitle}>Recent emails</Text>
         </View>
         {emailsLoading ? (
           <View style={styles.loading}>
-            <ActivityIndicator size="small" color={colors.primary} />
+            <ActivityIndicator size="small" color={c.primary} />
           </View>
         ) : emailsError ? (
           <Text style={styles.emptyText}>Couldn't load emails.</Text>
@@ -190,7 +193,7 @@ export function ContactActivity({ contact }: Props) {
 
       <View style={styles.section}>
         <View style={styles.sectionHeader}>
-          <CalendarDays size={14} color={colors.primary} />
+          <CalendarDays size={14} color={c.primary} />
           <Text style={styles.sectionTitle}>Upcoming events</Text>
         </View>
         {upcomingEvents.length === 0 ? (
@@ -215,21 +218,22 @@ export function ContactActivity({ contact }: Props) {
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   wrap: { gap: spacing.md, paddingHorizontal: spacing.lg, marginBottom: spacing.lg },
   section: {
-    backgroundColor: colors.card,
+    backgroundColor: c.card,
     borderRadius: radius.sm,
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.sm,
     gap: spacing.sm,
     borderLeftWidth: 3,
-    borderLeftColor: colors.primary,
+    borderLeftColor: c.primary,
   },
   sectionHeader: { flexDirection: 'row', alignItems: 'center', gap: spacing.xs },
-  sectionTitle: { ...typography.bodySemibold, color: colors.text },
+  sectionTitle: { ...typography.bodySemibold, color: c.text },
   loading: { paddingVertical: spacing.sm, alignItems: 'flex-start' },
-  emptyText: { ...typography.caption, color: colors.textMuted },
+  emptyText: { ...typography.caption, color: c.textMuted },
 
   row: {
     flexDirection: 'row',
@@ -238,21 +242,22 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     borderRadius: radius.xs,
   },
-  rowPressed: { backgroundColor: colors.surface },
+  rowPressed: { backgroundColor: c.surface },
   rowContent: { flex: 1, minWidth: 0 },
   rowTop: { flexDirection: 'row', justifyContent: 'space-between', gap: spacing.sm },
-  rowSender: { ...typography.bodyMedium, color: colors.text, flex: 1 },
-  rowDate: { ...typography.caption, color: colors.textMuted },
-  rowSubject: { ...typography.body, color: colors.text },
-  rowPreview: { ...typography.caption, color: colors.textMuted },
+  rowSender: { ...typography.bodyMedium, color: c.text, flex: 1 },
+  rowDate: { ...typography.caption, color: c.textMuted },
+  rowSubject: { ...typography.body, color: c.text },
+  rowPreview: { ...typography.caption, color: c.textMuted },
 
   eventRow: { flexDirection: 'row', gap: spacing.sm, alignItems: 'baseline', paddingVertical: 4 },
   eventTime: {
     ...typography.caption,
-    color: colors.textMuted,
+    color: c.textMuted,
     width: 64,
   },
   eventInfo: { flex: 1, minWidth: 0 },
-  eventTitle: { ...typography.body, color: colors.text },
-  eventDate: { ...typography.caption, color: colors.textMuted, marginTop: 2 },
-});
+  eventTitle: { ...typography.body, color: c.text },
+  eventDate: { ...typography.caption, color: c.textMuted, marginTop: 2 },
+  });
+}

src/components/contacts/ContactListRow.tsx

@@ -10,7 +10,8 @@ import {
   isGroup,
 } from '../../lib/contact-utils';
 import SenderAvatar from '../SenderAvatar';
-import { colors, spacing, radius, typography, componentSizes } from '../../theme/tokens';
+import { spacing, radius, typography, componentSizes, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 
 interface ContactListRowProps {
   contact: ContactCard;
@@ -29,6 +30,8 @@ export default function ContactListRow({
   selectionMode,
   secondaryText,
 }: ContactListRowProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const name = getContactDisplayName(contact) || 'Unnamed';
   const email = getContactPrimaryEmail(contact);
   const org = getPrimaryOrg(contact);
@@ -50,7 +53,7 @@ export default function ContactListRow({
     >
       {selectionMode && (
         <View style={[styles.checkbox, selected && styles.checkboxSelected]}>
-          {selected && <Check size={14} color={colors.primaryForeground} />}
+          {selected && <Check size={14} color={c.primaryForeground} />}
         </View>
       )}
 
@@ -58,7 +61,7 @@ export default function ContactListRow({
         <Image source={{ uri: photoUri }} style={styles.avatarImage} />
       ) : group ? (
         <View style={styles.groupAvatar}>
-          <Users size={18} color={colors.primary} />
+          <Users size={18} color={c.primary} />
         </View>
       ) : (
         <SenderAvatar name={name} email={email} size={componentSizes.avatarMd} />
@@ -77,7 +80,8 @@ export default function ContactListRow({
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   row: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -85,37 +89,38 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.md,
     gap: spacing.md,
   },
-  rowPressed: { backgroundColor: colors.surfaceHover },
-  rowSelected: { backgroundColor: colors.primaryBg },
+  rowPressed: { backgroundColor: c.surfaceHover },
+  rowSelected: { backgroundColor: c.primaryBg },
   checkbox: {
     width: 22,
     height: 22,
     borderRadius: radius.xs,
     borderWidth: 2,
-    borderColor: colors.border,
+    borderColor: c.border,
     alignItems: 'center',
     justifyContent: 'center',
   },
   checkboxSelected: {
-    backgroundColor: colors.primary,
-    borderColor: colors.primary,
+    backgroundColor: c.primary,
+    borderColor: c.primary,
   },
   avatarImage: {
     width: componentSizes.avatarMd,
     height: componentSizes.avatarMd,
     borderRadius: componentSizes.avatarMd / 2,
-    backgroundColor: colors.surface,
+    backgroundColor: c.surface,
   },
   groupAvatar: {
     width: componentSizes.avatarMd,
     height: componentSizes.avatarMd,
     borderRadius: componentSizes.avatarMd / 2,
-    backgroundColor: colors.primaryBg,
+    backgroundColor: c.primaryBg,
     alignItems: 'center',
     justifyContent: 'center',
   },
   info: { flex: 1, minWidth: 0 },
-  name: { ...typography.bodyMedium, color: colors.text },
-  subtitle: { ...typography.caption, color: colors.textMuted, marginTop: 1 },
-  tertiary: { ...typography.small, color: colors.textSecondary, marginTop: 1 },
-});
+  name: { ...typography.bodyMedium, color: c.text },
+  subtitle: { ...typography.caption, color: c.textMuted, marginTop: 1 },
+  tertiary: { ...typography.small, color: c.textSecondary, marginTop: 1 },
+  });
+}

src/components/contacts/ContactPickerSheet.tsx

@@ -12,7 +12,9 @@ import {
 } from '../../stores/contacts-store';
 import { matchesContactSearch, isGroup } from '../../lib/contact-utils';
 import ContactListRow from './ContactListRow';
-import { colors, spacing, radius, typography, componentSizes } from '../../theme/tokens';
+import { useSheetDrag } from '../../lib/use-sheet-drag';
+import { spacing, radius, typography, componentSizes, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 
 interface Props {
   visible: boolean;
@@ -26,9 +28,11 @@ interface Props {
 export default function ContactPickerSheet({
   visible, onClose, onSelect, title = 'Add Contact', excludedIds, multi = true,
 }: Props) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const allContacts = useContactsStore((s) => s.contacts);
   const sorted = React.useMemo(
-    () => sortContactsByDisplayName(allContacts.filter((c) => !isGroup(c))),
+    () => sortContactsByDisplayName(allContacts.filter((contact) => !isGroup(contact))),
     [allContacts],
   );
   const [query, setQuery] = React.useState('');
@@ -36,6 +40,11 @@ export default function ContactPickerSheet({
 
   const slideY = React.useRef(new Animated.Value(Dimensions.get('window').height)).current;
   const overlay = React.useRef(new Animated.Value(0)).current;
+  const dragHandlers = useSheetDrag({
+    slideY,
+    closedY: Dimensions.get('window').height,
+    onClose,
+  });
 
   React.useEffect(() => {
     if (visible) {
@@ -90,37 +99,41 @@ export default function ContactPickerSheet({
 
       <Animated.View style={[styles.sheet, { transform: [{ translateY: slideY }] }]}>
         <SafeAreaView style={{ flex: 1 }} edges={['bottom']}>
-          <View style={styles.handle} />
-          <View style={styles.header}>
-            <Pressable onPress={onClose} style={styles.headerBtn} hitSlop={8}>
-              <X size={20} color={colors.text} />
-            </Pressable>
-            <Text style={styles.headerTitle}>{title}</Text>
-            {multi && (
-              <Pressable
-                onPress={confirm}
-                disabled={selected.size === 0}
-                style={[styles.doneBtn, selected.size === 0 && styles.doneBtnDisabled]}
-                hitSlop={8}
-              >
-                <Text style={styles.doneLabel}>Add{selected.size > 0 ? ` (${selected.size})` : ''}</Text>
+          <View {...dragHandlers}>
+            <View style={styles.handleHit}>
+              <View style={styles.handle} />
+            </View>
+            <View style={styles.header}>
+              <Pressable onPress={onClose} style={styles.headerBtn} hitSlop={8}>
+                <X size={20} color={c.text} />
               </Pressable>
-            )}
+              <Text style={styles.headerTitle}>{title}</Text>
+              {multi && (
+                <Pressable
+                  onPress={confirm}
+                  disabled={selected.size === 0}
+                  style={[styles.doneBtn, selected.size === 0 && styles.doneBtnDisabled]}
+                  hitSlop={8}
+                >
+                  <Text style={styles.doneLabel}>Add{selected.size > 0 ? ` (${selected.size})` : ''}</Text>
+                </Pressable>
+              )}
+            </View>
           </View>
 
           <View style={styles.searchBar}>
-            <Search size={16} color={colors.textMuted} />
+            <Search size={16} color={c.textMuted} />
             <TextInput
               style={styles.searchInput}
               placeholder="Search contacts..."
-              placeholderTextColor={colors.textMuted}
+              placeholderTextColor={c.textMuted}
               value={query}
               onChangeText={setQuery}
               autoFocus
             />
             {query.length > 0 && (
               <Pressable onPress={() => setQuery('')} hitSlop={8}>
-                <X size={16} color={colors.textMuted} />
+                <X size={16} color={c.textMuted} />
               </Pressable>
             )}
           </View>
@@ -150,24 +163,28 @@ export default function ContactPickerSheet({
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   overlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0,0,0,0.5)' },
   overlayPress: { flex: 1 },
   sheet: {
     position: 'absolute',
     left: 0, right: 0, bottom: 0,
     top: '15%',
-    backgroundColor: colors.background,
+    backgroundColor: c.background,
     borderTopLeftRadius: radius.lg,
     borderTopRightRadius: radius.lg,
   },
+  handleHit: {
+    alignItems: 'center',
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.xs,
+  },
   handle: {
-    alignSelf: 'center',
     width: 40,
     height: 4,
     borderRadius: 2,
-    backgroundColor: colors.border,
-    marginTop: spacing.sm,
+    backgroundColor: c.border,
   },
   header: {
     flexDirection: 'row',
@@ -176,23 +193,23 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.sm,
     gap: spacing.xs,
     borderBottomWidth: 1,
-    borderBottomColor: colors.borderLight,
+    borderBottomColor: c.borderLight,
   },
   headerBtn: {
     width: 40, height: 40,
     alignItems: 'center', justifyContent: 'center',
     borderRadius: radius.full,
   },
-  headerTitle: { ...typography.h3, color: colors.text, flex: 1, marginLeft: spacing.xs },
+  headerTitle: { ...typography.h3, color: c.text, flex: 1, marginLeft: spacing.xs },
   doneBtn: {
     paddingHorizontal: spacing.md,
     height: 36,
     justifyContent: 'center',
-    backgroundColor: colors.primary,
+    backgroundColor: c.primary,
     borderRadius: radius.full,
   },
   doneBtnDisabled: { opacity: 0.5 },
-  doneLabel: { ...typography.bodyMedium, color: colors.primaryForeground },
+  doneLabel: { ...typography.bodyMedium, color: c.primaryForeground },
 
   searchBar: {
     flexDirection: 'row',
@@ -202,14 +219,15 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.md,
     height: componentSizes.inputHeight,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     borderRadius: radius.sm,
     gap: spacing.sm,
   },
-  searchInput: { flex: 1, ...typography.body, color: colors.text, paddingVertical: 0 },
+  searchInput: { flex: 1, ...typography.body, color: c.text, paddingVertical: 0 },
 
-  separator: { height: 1, backgroundColor: colors.borderLight, marginLeft: 68 },
+  separator: { height: 1, backgroundColor: c.borderLight, marginLeft: 68 },
 
   empty: { paddingVertical: spacing.xxxl, alignItems: 'center' },
-  emptyText: { ...typography.body, color: colors.textMuted },
-});
+  emptyText: { ...typography.body, color: c.textMuted },
+  });
+}

src/components/contacts/ContactsSidebarDrawer.tsx

@@ -9,7 +9,8 @@ import {
 import type { ContactCategory } from '../../stores/contacts-store';
 import { useContactsStore } from '../../stores/contacts-store';
 import { getContactDisplayName, getContactKeywords, isGroup } from '../../lib/contact-utils';
-import { colors, spacing, radius, typography } from '../../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 
 interface Props {
   visible: boolean;
@@ -25,6 +26,8 @@ function isSameCategory(a: ContactCategory, b: ContactCategory): boolean {
 }
 
 export default function ContactsSidebarDrawer({ visible, onClose }: Props) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const selectedCategory = useContactsStore((s) => s.selectedCategory);
   const setSelectedCategory = useContactsStore((s) => s.setSelectedCategory);
   const contacts = useContactsStore((s) => s.contacts);
@@ -93,14 +96,14 @@ export default function ContactsSidebarDrawer({ visible, onClose }: Props) {
         <SafeAreaView style={styles.drawerSafe} edges={['top', 'bottom', 'left']}>
           <View style={styles.header}>
             <Pressable onPress={onClose} style={styles.headerClose} hitSlop={8}>
-              <X size={20} color={colors.text} />
+              <X size={20} color={c.text} />
             </Pressable>
             <Text style={styles.headerTitle}>Contacts</Text>
           </View>
 
           <ScrollView style={styles.scroll} contentContainerStyle={styles.scrollContent}>
             <CategoryRow
-              icon={<Inbox size={16} color={colors.primary} />}
+              icon={<Inbox size={16} color={c.primary} />}
               label="All Contacts"
               count={totalCount}
               active={selectedCategory.type === 'all'}
@@ -115,7 +118,7 @@ export default function ContactsSidebarDrawer({ visible, onClose }: Props) {
             {expanded.books && books.map((book) => (
               <CategoryRow
                 key={book.id}
-                icon={<BookUser size={16} color={colors.textSecondary} />}
+                icon={<BookUser size={16} color={c.textSecondary} />}
                 label={book.name}
                 count={book.count}
                 active={isSameCategory(selectedCategory, { type: 'addressBook', addressBookId: book.id })}
@@ -124,7 +127,7 @@ export default function ContactsSidebarDrawer({ visible, onClose }: Props) {
             ))}
             {expanded.books && (
               <CategoryRow
-                icon={<BookUser size={16} color={colors.textMuted} />}
+                icon={<BookUser size={16} color={c.textMuted} />}
                 label="Uncategorized"
                 count={0}
                 active={selectedCategory.type === 'uncategorized'}
@@ -142,7 +145,7 @@ export default function ContactsSidebarDrawer({ visible, onClose }: Props) {
             {expanded.groups && groups.map((g) => (
               <CategoryRow
                 key={g.id}
-                icon={<Users size={16} color={colors.textSecondary} />}
+                icon={<Users size={16} color={c.textSecondary} />}
                 label={getContactDisplayName(g) || 'Group'}
                 count={g.members ? Object.keys(g.members).length : 0}
                 active={isSameCategory(selectedCategory, { type: 'group', groupId: g.id })}
@@ -160,7 +163,7 @@ export default function ContactsSidebarDrawer({ visible, onClose }: Props) {
             {expanded.tags && keywords.map((kw) => (
               <CategoryRow
                 key={kw.keyword}
-                icon={<Tag size={16} color={colors.textSecondary} />}
+                icon={<Tag size={16} color={c.textSecondary} />}
                 label={kw.keyword}
                 count={kw.count}
                 active={isSameCategory(selectedCategory, { type: 'keyword', keyword: kw.keyword })}
@@ -175,12 +178,14 @@ export default function ContactsSidebarDrawer({ visible, onClose }: Props) {
 }
 
 function SectionHeader({ label, expanded, onPress }: { label: string; expanded: boolean; onPress: () => void }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <Pressable style={styles.sectionHeader} onPress={onPress}>
       {expanded ? (
-        <ChevronDown size={14} color={colors.textMuted} />
+        <ChevronDown size={14} color={c.textMuted} />
       ) : (
-        <ChevronRight size={14} color={colors.textMuted} />
+        <ChevronRight size={14} color={c.textMuted} />
       )}
       <Text style={styles.sectionHeaderText}>{label}</Text>
     </Pressable>
@@ -196,6 +201,8 @@ function CategoryRow({
   active: boolean;
   onPress: () => void;
 }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <Pressable
       onPress={onPress}
@@ -212,7 +219,8 @@ function CategoryRow({
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   overlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0,0,0,0.5)' },
   overlayPress: { flex: 1 },
   drawer: {
@@ -222,7 +230,7 @@ const styles = StyleSheet.create({
     maxWidth: 340,
     backgroundColor: '#262626',
     borderRightWidth: 1,
-    borderRightColor: colors.border,
+    borderRightColor: c.border,
   },
   drawerSafe: { flex: 1 },
 
@@ -233,14 +241,14 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.sm,
     paddingVertical: spacing.sm,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
   },
   headerClose: {
     width: 36, height: 36,
     alignItems: 'center', justifyContent: 'center',
     borderRadius: radius.sm,
   },
-  headerTitle: { ...typography.h3, color: colors.text },
+  headerTitle: { ...typography.h3, color: c.text },
 
   scroll: { flex: 1 },
   scrollContent: { paddingBottom: spacing.md },
@@ -253,7 +261,7 @@ const styles = StyleSheet.create({
     paddingTop: spacing.md,
     paddingBottom: 4,
   },
-  sectionHeaderText: { ...typography.bodySemibold, color: colors.text },
+  sectionHeaderText: { ...typography.bodySemibold, color: c.text },
 
   row: {
     flexDirection: 'row',
@@ -263,14 +271,15 @@ const styles = StyleSheet.create({
     borderLeftWidth: 2,
     borderLeftColor: 'transparent',
   },
-  rowPressed: { backgroundColor: colors.surfaceHover },
-  rowActive: { backgroundColor: colors.accent, borderLeftColor: colors.primary },
+  rowPressed: { backgroundColor: c.surfaceHover },
+  rowActive: { backgroundColor: c.accent, borderLeftColor: c.primary },
   rowIcon: {
     width: 20, height: 20,
     alignItems: 'center', justifyContent: 'center',
     marginRight: spacing.sm,
   },
-  rowLabel: { flex: 1, ...typography.body, color: colors.text },
-  rowLabelActive: { ...typography.bodySemibold, color: colors.text },
-  rowCount: { ...typography.caption, color: colors.textMuted, marginLeft: spacing.sm },
-});
+  rowLabel: { flex: 1, ...typography.body, color: c.text },
+  rowLabelActive: { ...typography.bodySemibold, color: c.text },
+  rowCount: { ...typography.caption, color: c.textMuted, marginLeft: spacing.sm },
+  });
+}

src/components/contacts/FieldBlock.tsx

@@ -1,19 +1,22 @@
 import React from 'react';
 import { View, Text, StyleSheet, Pressable } from 'react-native';
 import { Plus, X } from 'lucide-react-native';
-import { colors, spacing, radius, typography } from '../../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 
 export type CategoryAccent = 'contact' | 'work' | 'location' | 'personal' | 'digital' | 'calendar' | 'notes';
 
-const ACCENT_COLORS: Record<CategoryAccent, string> = {
-  contact: colors.primary,
-  work: colors.calendar.orange,
-  location: colors.calendar.green,
-  personal: colors.calendar.pink,
-  digital: colors.calendar.teal,
-  calendar: colors.calendar.indigo,
-  notes: colors.calendar.purple,
-};
+function accentColor(category: CategoryAccent, c: ThemePalette): string {
+  switch (category) {
+    case 'contact':  return c.primary;
+    case 'work':     return c.calendar.orange;
+    case 'location': return c.calendar.green;
+    case 'personal': return c.calendar.pink;
+    case 'digital':  return c.calendar.teal;
+    case 'calendar': return c.calendar.indigo;
+    case 'notes':    return c.calendar.purple;
+  }
+}
 
 interface FieldBlockProps {
   title: string;
@@ -27,7 +30,9 @@ interface FieldBlockProps {
 export default function FieldBlock({
   title, category = 'contact', icon, onAdd, addLabel, children,
 }: FieldBlockProps) {
-  const accent = ACCENT_COLORS[category];
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  const accent = accentColor(category, c);
   return (
     <View style={[styles.block, { borderLeftColor: accent }]}>
       <View style={styles.header}>
@@ -36,7 +41,7 @@ export default function FieldBlock({
         <View style={{ flex: 1 }} />
         {onAdd && (
           <Pressable onPress={onAdd} hitSlop={8} style={styles.addBtn}>
-            <Plus size={14} color={colors.primary} />
+            <Plus size={14} color={c.primary} />
             {!!addLabel && <Text style={styles.addLabel}>{addLabel}</Text>}
           </Pressable>
         )}
@@ -52,59 +57,63 @@ interface FieldRowProps {
 }
 
 export function FieldRow({ onRemove, children }: FieldRowProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <View style={styles.row}>
       <View style={{ flex: 1 }}>{children}</View>
       {onRemove && (
         <Pressable onPress={onRemove} hitSlop={8} style={styles.removeBtn}>
-          <X size={14} color={colors.textMuted} />
+          <X size={14} color={c.textMuted} />
         </Pressable>
       )}
     </View>
   );
 }
 
-const styles = StyleSheet.create({
-  block: {
-    marginHorizontal: spacing.lg,
-    marginBottom: spacing.md,
-    paddingLeft: spacing.md,
-    paddingRight: spacing.sm,
-    paddingVertical: spacing.sm,
-    borderLeftWidth: 3,
-    borderRadius: radius.sm,
-    backgroundColor: colors.card,
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing.xs,
-    marginBottom: spacing.sm,
-  },
-  title: { ...typography.bodySemibold, color: colors.text },
-  addBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-    paddingHorizontal: spacing.sm,
-    paddingVertical: 4,
-    borderRadius: radius.full,
-    backgroundColor: colors.primaryBg,
-  },
-  addLabel: { ...typography.caption, color: colors.primary },
-  body: { gap: spacing.sm },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    gap: spacing.sm,
-  },
-  removeBtn: {
-    width: 28,
-    height: 28,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: radius.full,
-    backgroundColor: colors.surface,
-    marginTop: 4,
-  },
-});
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+    block: {
+      marginHorizontal: spacing.lg,
+      marginBottom: spacing.md,
+      paddingLeft: spacing.md,
+      paddingRight: spacing.sm,
+      paddingVertical: spacing.sm,
+      borderLeftWidth: 3,
+      borderRadius: radius.sm,
+      backgroundColor: c.card,
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: spacing.xs,
+      marginBottom: spacing.sm,
+    },
+    title: { ...typography.bodySemibold, color: c.text },
+    addBtn: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+      paddingHorizontal: spacing.sm,
+      paddingVertical: 4,
+      borderRadius: radius.full,
+      backgroundColor: c.primaryBg,
+    },
+    addLabel: { ...typography.caption, color: c.primary },
+    body: { gap: spacing.sm },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: spacing.sm,
+    },
+    removeBtn: {
+      width: 28,
+      height: 28,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: radius.full,
+      backgroundColor: c.surface,
+      marginTop: 4,
+    },
+  });
+}

src/components/settings/AboutDataSettings.tsx

@@ -4,7 +4,8 @@ import Constants from 'expo-constants';
 import { ExternalLink } from 'lucide-react-native';
 import { SettingsSection, SettingItem, ToggleSwitch } from './settings-section';
 import Button from '../Button';
-import { colors, spacing, radius, typography } from '../../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 import { useSettingsStore } from '../../stores/settings-store';
 
 const APP_VERSION = Constants.expoConfig?.version ?? '0.0.0';
@@ -17,7 +18,9 @@ const DEBUG_CATEGORIES = [
   { id: 'render',     label: 'Render',     description: 'React render counts and timings.' },
 ];
 
-export function AdvancedSettings() {
+export function AboutDataSettings() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const senderFavicons = useSettingsStore((s) => s.senderFavicons);
   const setSenderFaviconsStore = useSettingsStore((s) => s.setSenderFavicons);
   const hydrated = useSettingsStore((s) => s.hydrated);
@@ -64,7 +67,7 @@ export function AdvancedSettings() {
             onPress={() => Linking.openURL('https://github.com/bulwarkmail/webmail')}
           >
             <Text style={styles.ghText}>GitHub</Text>
-            <ExternalLink size={12} color={colors.mutedForeground} />
+            <ExternalLink size={12} color={c.mutedForeground} />
           </Pressable>
         </View>
       </View>
@@ -122,14 +125,15 @@ export function AdvancedSettings() {
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   container: { gap: spacing.xxxl },
   aboutBox: {
     padding: spacing.xl,
     borderRadius: radius.md,
     borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.card,
+    borderColor: c.border,
+    backgroundColor: c.card,
   },
   aboutRow: {
     flexDirection: 'row',
@@ -140,30 +144,31 @@ const styles = StyleSheet.create({
     width: 48,
     height: 48,
     borderRadius: radius.md,
-    backgroundColor: colors.primary,
+    backgroundColor: c.primary,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  logoText: { fontSize: 24, fontWeight: '700', color: colors.primaryForeground },
-  aboutTitle: { ...typography.bodyMedium, color: colors.text },
-  aboutVersion: { ...typography.caption, color: colors.mutedForeground, marginTop: 2 },
-  aboutCommit: { color: colors.mutedForeground, opacity: 0.6 },
+  logoText: { fontSize: 24, fontWeight: '700', color: c.primaryForeground },
+  aboutTitle: { ...typography.bodyMedium, color: c.text },
+  aboutVersion: { ...typography.caption, color: c.mutedForeground, marginTop: 2 },
+  aboutCommit: { color: c.mutedForeground, opacity: 0.6 },
   ghLink: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: 4,
   },
-  ghText: { ...typography.caption, color: colors.mutedForeground },
+  ghText: { ...typography.caption, color: c.mutedForeground },
   debugCategoriesBox: {
     marginLeft: spacing.lg,
     paddingLeft: spacing.lg,
     borderLeftWidth: 2,
-    borderLeftColor: colors.muted,
+    borderLeftColor: c.muted,
     gap: 4,
   },
   debugCategoriesHint: {
     ...typography.caption,
-    color: colors.mutedForeground,
+    color: c.mutedForeground,
     marginBottom: spacing.sm,
   },
 });
+}

src/components/settings/AccountSecuritySettings.tsx

@@ -4,7 +4,8 @@ import { Key, Smartphone, Lock, Eye, EyeOff, Shield, Monitor, Trash2 } from 'luc
 import { SettingsSection, SettingItem, ToggleSwitch } from './settings-section';
 import Input from '../Input';
 import Button from '../Button';
-import { colors, spacing, radius, typography } from '../../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 
 interface Session {
   id: string;
@@ -19,6 +20,8 @@ const MOCK_SESSIONS: Session[] = [
 ];
 
 export function AccountSecuritySettings() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const [currentPwd, setCurrentPwd] = useState('');
   const [newPwd, setNewPwd] = useState('');
   const [confirmPwd, setConfirmPwd] = useState('');
@@ -42,9 +45,9 @@ export function AccountSecuritySettings() {
               />
               <Pressable style={styles.eyeBtn} onPress={() => setShowCurrent((v) => !v)}>
                 {showCurrent ? (
-                  <EyeOff size={16} color={colors.mutedForeground} />
+                  <EyeOff size={16} color={c.mutedForeground} />
                 ) : (
-                  <Eye size={16} color={colors.mutedForeground} />
+                  <Eye size={16} color={c.mutedForeground} />
                 )}
               </Pressable>
             </View>
@@ -61,9 +64,9 @@ export function AccountSecuritySettings() {
               />
               <Pressable style={styles.eyeBtn} onPress={() => setShowNew((v) => !v)}>
                 {showNew ? (
-                  <EyeOff size={16} color={colors.mutedForeground} />
+                  <EyeOff size={16} color={c.mutedForeground} />
                 ) : (
-                  <Eye size={16} color={colors.mutedForeground} />
+                  <Eye size={16} color={c.mutedForeground} />
                 )}
               </Pressable>
             </View>
@@ -79,7 +82,7 @@ export function AccountSecuritySettings() {
           </View>
 
           <View style={{ alignItems: 'flex-end' }}>
-            <Button size="sm" icon={<Key size={14} color={colors.primaryForeground} />}>
+            <Button size="sm" icon={<Key size={14} color={c.primaryForeground} />}>
               Change Password
             </Button>
           </View>
@@ -93,7 +96,7 @@ export function AccountSecuritySettings() {
 
         {twoFactor && (
           <View style={styles.infoBox}>
-            <Smartphone size={16} color={colors.primary} />
+            <Smartphone size={16} color={c.primary} />
             <Text style={styles.infoText}>
               Scan the QR code in your authenticator app to finish setup.
             </Text>
@@ -104,7 +107,7 @@ export function AccountSecuritySettings() {
       <SettingsSection title="App Passwords" description="Generate passwords for other mail clients.">
         {appPwds.length === 0 ? (
           <View style={styles.empty}>
-            <Lock size={24} color={colors.mutedForeground} />
+            <Lock size={24} color={c.mutedForeground} />
             <Text style={styles.emptyText}>No app passwords yet.</Text>
           </View>
         ) : null}
@@ -119,7 +122,7 @@ export function AccountSecuritySettings() {
         {MOCK_SESSIONS.map((s) => (
           <View key={s.id} style={styles.sessionRow}>
             <View style={styles.sessionIcon}>
-              <Monitor size={18} color={colors.text} />
+              <Monitor size={18} color={c.text} />
             </View>
             <View style={{ flex: 1 }}>
               <Text style={styles.sessionDevice}>{s.device}</Text>
@@ -129,7 +132,7 @@ export function AccountSecuritySettings() {
             </View>
             {!s.current && (
               <Pressable style={styles.trashBtn}>
-                <Trash2 size={16} color={colors.error} />
+                <Trash2 size={16} color={c.error} />
               </Pressable>
             )}
           </View>
@@ -139,23 +142,24 @@ export function AccountSecuritySettings() {
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   container: { gap: spacing.xxxl },
   pwField: { gap: 4 },
-  pwLabel: { ...typography.caption, color: colors.mutedForeground },
+  pwLabel: { ...typography.caption, color: c.mutedForeground },
   pwInputRow: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
   eyeBtn: { padding: spacing.sm },
   infoBox: {
     flexDirection: 'row',
     gap: spacing.sm,
     padding: spacing.md,
-    backgroundColor: colors.primaryBg,
+    backgroundColor: c.primaryBg,
     borderRadius: radius.sm,
     alignItems: 'center',
   },
   infoText: {
     ...typography.caption,
-    color: colors.primary,
+    color: c.primary,
     flex: 1,
   },
   empty: {
@@ -165,7 +169,7 @@ const styles = StyleSheet.create({
   },
   emptyText: {
     ...typography.body,
-    color: colors.mutedForeground,
+    color: c.mutedForeground,
   },
   sessionRow: {
     flexDirection: 'row',
@@ -173,18 +177,18 @@ const styles = StyleSheet.create({
     gap: spacing.md,
     paddingVertical: spacing.md,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
   },
   sessionIcon: {
     width: 36,
     height: 36,
     borderRadius: radius.sm,
-    backgroundColor: colors.muted,
+    backgroundColor: c.muted,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  sessionDevice: { ...typography.bodyMedium, color: colors.text },
-  sessionMeta: { ...typography.caption, color: colors.mutedForeground, marginTop: 2 },
+  sessionDevice: { ...typography.bodyMedium, color: c.text },
+  sessionMeta: { ...typography.caption, color: c.mutedForeground, marginTop: 2 },
   trashBtn: {
     width: 32,
     height: 32,
@@ -193,3 +197,4 @@ const styles = StyleSheet.create({
     borderRadius: radius.sm,
   },
 });
+}

src/components/settings/AccountSettings.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { SettingsSection, SettingItem } from './settings-section';
-import { colors, spacing, radius, typography } from '../../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 import { useAuthStore } from '../../stores/auth-store';
 import { useAccountStore } from '../../stores/account-store';
 
@@ -29,6 +30,8 @@ function formatFileSize(bytes: number): string {
 }
 
 export function AccountSettings(props: AccountSettingsProps = {}) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const authUsername = useAuthStore((s) => s.username);
   const authServerUrl = useAuthStore((s) => s.serverUrl);
   const activeAccountId = useAuthStore((s) => s.activeAccountId);
@@ -99,10 +102,11 @@ export function AccountSettings(props: AccountSettingsProps = {}) {
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   value: {
     ...typography.body,
-    color: colors.text,
+    color: c.text,
     maxWidth: 240,
   },
   storage: {
@@ -112,13 +116,13 @@ const styles = StyleSheet.create({
   bar: {
     width: 128,
     height: 8,
-    backgroundColor: colors.muted,
+    backgroundColor: c.muted,
     borderRadius: radius.full,
     overflow: 'hidden',
   },
   barFill: {
     height: '100%',
-    backgroundColor: colors.primary,
+    backgroundColor: c.primary,
     borderRadius: radius.full,
   },
   demoRow: {
@@ -137,3 +141,4 @@ const styles = StyleSheet.create({
     color: '#fbbf24',
   },
 });
+}

src/components/settings/AppearanceSettings.tsx

@@ -1,14 +1,11 @@
-import React, { useState } from 'react';
-import { View, Text, StyleSheet, Pressable } from 'react-native';
-import { PlayCircle } from 'lucide-react-native';
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
 import { SettingsSection, SettingItem, RadioGroup, ToggleSwitch } from './settings-section';
-import Button from '../Button';
-import { colors, spacing, radius, typography } from '../../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
+import { useSettingsStore, type ThemeMode, type FontSize, type Density } from '../../stores/settings-store';
 
-type Theme = 'light' | 'dark' | 'system';
-type FontSize = 'small' | 'medium' | 'large';
-type Density = 'extra-compact' | 'compact' | 'regular' | 'comfortable';
-type ToolbarPosition = 'top' | 'below-subject';
+type Theme = ThemeMode;
 
 const DENSITY_PREVIEW: Record<Density, { py: number; gap: number; showAvatar: boolean; showPreview: boolean }> = {
   'extra-compact': { py: 2, gap: 6, showAvatar: false, showPreview: false },
@@ -24,6 +21,8 @@ const PREVIEW_ROWS = [
 ];
 
 function DensityPreview({ density }: { density: Density }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const cfg = DENSITY_PREVIEW[density];
   return (
     <View style={styles.densityPreview}>
@@ -50,7 +49,7 @@ function DensityPreview({ density }: { density: Density }) {
               <Text
                 style={[
                   styles.densitySender,
-                  row.unread ? { color: colors.text, fontWeight: '600' } : { color: colors.mutedForeground },
+                  row.unread ? { color: c.text, fontWeight: '600' } : { color: c.mutedForeground },
                 ]}
                 numberOfLines={1}
               >
@@ -61,7 +60,7 @@ function DensityPreview({ density }: { density: Density }) {
             <Text
               style={[
                 styles.densitySubject,
-                row.unread ? { color: colors.text, fontWeight: '500' } : { color: 'rgba(250,250,250,0.8)' },
+                row.unread ? { color: c.text, fontWeight: '500' } : { color: 'rgba(250,250,250,0.8)' },
               ]}
               numberOfLines={1}
             >
@@ -80,16 +79,24 @@ function DensityPreview({ density }: { density: Density }) {
 }
 
 export function AppearanceSettings() {
-  const [theme, setTheme] = useState<Theme>('dark');
-  const [fontSize, setFontSize] = useState<FontSize>('medium');
-  const [density, setDensity] = useState<Density>('regular');
-  const [toolbarPosition, setToolbarPosition] = useState<ToolbarPosition>('top');
-  const [showToolbarLabels, setShowToolbarLabels] = useState(true);
-  const [hideAccountSwitcher, setHideAccountSwitcher] = useState(false);
-  const [showRailAccountList, setShowRailAccountList] = useState(false);
-  const [colorfulSidebarIcons, setColorfulSidebarIcons] = useState(true);
-  const [animationsEnabled, setAnimationsEnabled] = useState(true);
-  const [language, setLanguage] = useState('en');
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  const theme = useSettingsStore((s) => s.theme);
+  const setTheme = useSettingsStore((s) => s.setTheme);
+  const fontSize = useSettingsStore((s) => s.fontSize);
+  const setFontSize = useSettingsStore((s) => s.setFontSize);
+  const density = useSettingsStore((s) => s.density);
+  const setDensity = useSettingsStore((s) => s.setDensity);
+  const showToolbarLabels = useSettingsStore((s) => s.showToolbarLabels);
+  const setShowToolbarLabels = useSettingsStore((s) => s.setShowToolbarLabels);
+  const animationsEnabled = useSettingsStore((s) => s.animationsEnabled);
+  const setAnimationsEnabled = useSettingsStore((s) => s.setAnimationsEnabled);
+  const hydrated = useSettingsStore((s) => s.hydrated);
+  const hydrate = useSettingsStore((s) => s.hydrate);
+
+  React.useEffect(() => {
+    if (!hydrated) void hydrate();
+  }, [hydrated, hydrate]);
 
   return (
     <SettingsSection title="Appearance" description="Customize how the interface looks and feels.">
@@ -105,18 +112,6 @@ export function AppearanceSettings() {
         />
       </SettingItem>
 
-      <SettingItem label="Language" description="Interface language.">
-        <RadioGroup
-          value={language}
-          onChange={setLanguage}
-          options={[
-            { value: 'en', label: 'EN' },
-            { value: 'de', label: 'DE' },
-            { value: 'fr', label: 'FR' },
-          ]}
-        />
-      </SettingItem>
-
       <SettingItem label="Font Size" description="Adjust text size.">
         <RadioGroup
           value={fontSize}
@@ -145,64 +140,36 @@ export function AppearanceSettings() {
         <View style={styles.divider} />
       </View>
 
-      <SettingItem label="Toolbar Position" description="Where to place the message toolbar.">
-        <RadioGroup
-          value={toolbarPosition}
-          onChange={(v) => setToolbarPosition(v as ToolbarPosition)}
-          options={[
-            { value: 'top', label: 'Top' },
-            { value: 'below-subject', label: 'Below' },
-          ]}
-        />
-      </SettingItem>
-
       <SettingItem label="Toolbar Labels" description="Show text labels on toolbar buttons.">
         <ToggleSwitch checked={showToolbarLabels} onChange={setShowToolbarLabels} />
       </SettingItem>
 
-      <SettingItem label="Hide Account Switcher" description="Hide the account switcher from the navigation rail.">
-        <ToggleSwitch checked={hideAccountSwitcher} onChange={setHideAccountSwitcher} />
-      </SettingItem>
-
-      <SettingItem label="Rail Account List" description="Show all accounts inside the navigation rail.">
-        <ToggleSwitch checked={showRailAccountList} onChange={setShowRailAccountList} />
-      </SettingItem>
-
-      <SettingItem label="Colorful Sidebar Icons" description="Display sidebar icons with their brand colors.">
-        <ToggleSwitch checked={colorfulSidebarIcons} onChange={setColorfulSidebarIcons} />
-      </SettingItem>
-
       <SettingItem label="Animations" description="Enable or disable interface animations.">
         <ToggleSwitch checked={animationsEnabled} onChange={setAnimationsEnabled} />
       </SettingItem>
-
-      <SettingItem label="Restart Tour" description="Replay the onboarding walkthrough.">
-        <Button variant="outline" size="sm" icon={<PlayCircle size={14} color={colors.text} />}>
-          Restart
-        </Button>
-      </SettingItem>
     </SettingsSection>
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   densityPreview: {
     marginTop: spacing.md,
     borderRadius: radius.md,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     overflow: 'hidden',
-    backgroundColor: colors.background,
+    backgroundColor: c.background,
   },
   densityRow: {
     flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: spacing.md,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
   },
   densityAvatar: {
     borderRadius: radius.full,
-    backgroundColor: colors.muted,
+    backgroundColor: c.muted,
   },
   densityHeader: {
     flexDirection: 'row',
@@ -216,7 +183,7 @@ const styles = StyleSheet.create({
   },
   densityTime: {
     fontSize: 10,
-    color: colors.mutedForeground,
+    color: c.mutedForeground,
   },
   densitySubject: {
     ...typography.caption,
@@ -227,7 +194,8 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: colors.border,
+    backgroundColor: c.border,
     marginTop: spacing.md,
   },
 });
+}

src/components/settings/ComposingSettings.tsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, Pressable, TextInput } from 'react-native';
+import { X, Plus } from 'lucide-react-native';
+import { SettingsSection, SettingItem, ToggleSwitch } from './settings-section';
+import Button from '../Button';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
+import { useSettingsStore } from '../../stores/settings-store';
+
+export function ComposingSettings() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  const autoSelectReplyIdentity = useSettingsStore((s) => s.autoSelectReplyIdentity);
+  const setAutoSelectReplyIdentity = useSettingsStore((s) => s.setAutoSelectReplyIdentity);
+  const attachmentReminderEnabled = useSettingsStore((s) => s.attachmentReminderEnabled);
+  const setAttachmentReminderEnabled = useSettingsStore((s) => s.setAttachmentReminderEnabled);
+  const attachmentReminderKeywords = useSettingsStore((s) => s.attachmentReminderKeywords);
+  const setAttachmentReminderKeywords = useSettingsStore((s) => s.setAttachmentReminderKeywords);
+  const hydrated = useSettingsStore((s) => s.hydrated);
+  const hydrate = useSettingsStore((s) => s.hydrate);
+
+  const [newKeyword, setNewKeyword] = useState('');
+
+  useEffect(() => { if (!hydrated) void hydrate(); }, [hydrated, hydrate]);
+
+  const addKeyword = () => {
+    const trimmed = newKeyword.trim().toLowerCase();
+    if (!trimmed || attachmentReminderKeywords.includes(trimmed)) {
+      setNewKeyword('');
+      return;
+    }
+    setAttachmentReminderKeywords([...attachmentReminderKeywords, trimmed]);
+    setNewKeyword('');
+  };
+
+  const removeKeyword = (kw: string) => {
+    setAttachmentReminderKeywords(attachmentReminderKeywords.filter((k) => k !== kw));
+  };
+
+  return (
+    <SettingsSection
+      title="Composing"
+      description="How the composer behaves when you reply, forward, or send."
+    >
+      <SettingItem
+        label="Auto-select reply identity"
+        description="When replying, pick the identity that received the original message."
+      >
+        <ToggleSwitch checked={autoSelectReplyIdentity} onChange={setAutoSelectReplyIdentity} />
+      </SettingItem>
+
+      <SettingItem
+        label="Attachment reminder"
+        description="Warn before sending if the message mentions an attachment but none is attached."
+      >
+        <ToggleSwitch
+          checked={attachmentReminderEnabled}
+          onChange={setAttachmentReminderEnabled}
+        />
+      </SettingItem>
+
+      {attachmentReminderEnabled && (
+        <View style={styles.subBlock}>
+          <Text style={styles.subLabel}>Trigger keywords</Text>
+          <Text style={styles.subDescription}>
+            Words that, when found in the body or subject without an attachment, trigger the reminder.
+          </Text>
+
+          <View style={styles.chips}>
+            {attachmentReminderKeywords.map((kw) => (
+              <View key={kw} style={styles.chip}>
+                <Text style={styles.chipText}>{kw}</Text>
+                <Pressable onPress={() => removeKeyword(kw)} hitSlop={6}>
+                  <X size={12} color={c.textSecondary} />
+                </Pressable>
+              </View>
+            ))}
+          </View>
+
+          <View style={styles.addRow}>
+            <TextInput
+              value={newKeyword}
+              onChangeText={setNewKeyword}
+              placeholder="e.g. attached"
+              placeholderTextColor={c.textMuted}
+              autoCapitalize="none"
+              autoCorrect={false}
+              style={styles.input}
+              onSubmitEditing={addKeyword}
+              returnKeyType="done"
+            />
+            <Button
+              variant="default"
+              size="sm"
+              onPress={addKeyword}
+              disabled={!newKeyword.trim()}
+              icon={<Plus size={14} color={c.primaryForeground} />}
+            >
+              Add
+            </Button>
+          </View>
+        </View>
+      )}
+    </SettingsSection>
+  );
+}
+
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+  subBlock: { paddingVertical: spacing.md, gap: spacing.sm },
+  subLabel: { ...typography.bodyMedium, color: c.text },
+  subDescription: { ...typography.caption, color: c.mutedForeground },
+  chips: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: radius.full,
+    backgroundColor: c.muted,
+  },
+  chipText: { ...typography.caption, color: c.text },
+  addRow: { flexDirection: 'row', gap: spacing.sm, marginTop: 4 },
+  input: {
+    flex: 1,
+    backgroundColor: c.background,
+    borderRadius: radius.sm,
+    borderWidth: 1,
+    borderColor: c.border,
+    paddingHorizontal: spacing.md,
+    paddingVertical: 8,
+    color: c.text,
+    ...typography.body,
+  },
+});
+}

src/components/settings/ContactsSettings.tsx

@@ -9,9 +9,11 @@ import { useSettingsStore } from '../../stores/settings-store';
 import { useContactsStore } from '../../stores/contacts-store';
 import { contactsToVCard } from '../../lib/vcard';
 import { isGroup } from '../../lib/contact-utils';
-import { colors, typography } from '../../theme/tokens';
+import { typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 
 export function ContactsSettings() {
+  const c = useColors();
   const groupByLetter = useSettingsStore((s) => s.groupContactsByLetter);
   const setGroupByLetter = useSettingsStore((s) => s.setGroupContactsByLetter);
   const contacts = useContactsStore((s) => s.contacts);
@@ -67,7 +69,7 @@ export function ContactsSettings() {
         <Button
           variant="outline"
           size="sm"
-          icon={<Download size={14} color={colors.text} />}
+          icon={<Download size={14} color={c.text} />}
           onPress={() => { void handleExport(); }}
           disabled={exportable.length === 0 || exporting}
           loading={exporting}
@@ -80,7 +82,7 @@ export function ContactsSettings() {
         label="Import contacts"
         description="Importing vCard files is currently available on the web client only."
       >
-        <Text style={[typography.caption, { color: colors.textMuted }]}>Web only</Text>
+        <Text style={[typography.caption, { color: c.textMuted }]}>Web only</Text>
       </SettingItem>
     </SettingsSection>
   );

src/components/settings/ContentSendersSettings.tsx

@@ -0,0 +1,217 @@
+import React, { useEffect, useState } from 'react';
+import {
+  View, Text, StyleSheet, Pressable, TextInput, FlatList, Modal,
+} from 'react-native';
+import { ChevronRight, X, Plus, Trash2 } from 'lucide-react-native';
+import { SettingsSection, SettingItem, RadioGroup, ToggleSwitch } from './settings-section';
+import Button from '../Button';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
+import { useSettingsStore, type ExternalContentPolicy } from '../../stores/settings-store';
+
+export function ContentSendersSettings() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  const externalContentPolicy = useSettingsStore((s) => s.externalContentPolicy);
+  const setExternalContentPolicy = useSettingsStore((s) => s.setExternalContentPolicy);
+  const emailAlwaysLightMode = useSettingsStore((s) => s.emailAlwaysLightMode);
+  const setEmailAlwaysLightMode = useSettingsStore((s) => s.setEmailAlwaysLightMode);
+  const trustedSenders = useSettingsStore((s) => s.trustedSenders);
+  const addTrustedSender = useSettingsStore((s) => s.addTrustedSender);
+  const removeTrustedSender = useSettingsStore((s) => s.removeTrustedSender);
+  const hydrated = useSettingsStore((s) => s.hydrated);
+  const hydrate = useSettingsStore((s) => s.hydrate);
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [newSender, setNewSender] = useState('');
+
+  useEffect(() => { if (!hydrated) void hydrate(); }, [hydrated, hydrate]);
+
+  const trustedCount = trustedSenders.length;
+  const trustedLabel = trustedCount === 0 ? 'None' : trustedCount === 1 ? '1 sender' : `${trustedCount} senders`;
+
+  return (
+    <View style={{ gap: spacing.xxxl }}>
+      <SettingsSection
+        title="Content & Senders"
+        description="Control how external resources and tracking pixels are handled."
+      >
+        <SettingItem
+          label="External content"
+          description="What to do when an email links to remote images or media."
+        >
+          <RadioGroup
+            value={externalContentPolicy}
+            onChange={(v) => setExternalContentPolicy(v as ExternalContentPolicy)}
+            options={[
+              { value: 'ask', label: 'Ask' },
+              { value: 'block', label: 'Block' },
+              { value: 'allow', label: 'Allow' },
+            ]}
+          />
+        </SettingItem>
+
+        <SettingItem
+          label="Always view emails in light mode"
+          description="Force a light background for the message body, even when the app is in dark mode."
+        >
+          <ToggleSwitch checked={emailAlwaysLightMode} onChange={setEmailAlwaysLightMode} />
+        </SettingItem>
+
+        <SettingItem
+          label="Trusted senders"
+          description="External content always loads for senders on this list."
+        >
+          <Pressable
+            onPress={() => setModalOpen(true)}
+            style={({ pressed }) => [styles.trustedButton, pressed && styles.trustedButtonPressed]}
+          >
+            <Text style={styles.trustedButtonText}>{trustedLabel}</Text>
+            <ChevronRight size={14} color={c.textMuted} />
+          </Pressable>
+        </SettingItem>
+      </SettingsSection>
+
+      <Modal
+        visible={modalOpen}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setModalOpen(false)}
+      >
+        <Pressable style={styles.modalBackdrop} onPress={() => setModalOpen(false)}>
+          <Pressable style={styles.modalCard} onPress={() => {}}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalTitle}>Trusted senders</Text>
+              <Pressable onPress={() => setModalOpen(false)} hitSlop={6}>
+                <X size={18} color={c.textSecondary} />
+              </Pressable>
+            </View>
+
+            <View style={styles.addRow}>
+              <TextInput
+                value={newSender}
+                onChangeText={setNewSender}
+                placeholder="sender@example.com"
+                placeholderTextColor={c.textMuted}
+                autoCapitalize="none"
+                autoCorrect={false}
+                keyboardType="email-address"
+                style={styles.input}
+                onSubmitEditing={() => {
+                  if (newSender.trim()) {
+                    addTrustedSender(newSender);
+                    setNewSender('');
+                  }
+                }}
+              />
+              <Button
+                variant="default"
+                size="sm"
+                onPress={() => {
+                  if (newSender.trim()) {
+                    addTrustedSender(newSender);
+                    setNewSender('');
+                  }
+                }}
+                disabled={!newSender.trim()}
+                icon={<Plus size={14} color={c.primaryForeground} />}
+              >
+                Add
+              </Button>
+            </View>
+
+            {trustedSenders.length === 0 ? (
+              <Text style={styles.emptyText}>No trusted senders yet.</Text>
+            ) : (
+              <FlatList
+                data={trustedSenders}
+                keyExtractor={(item) => item}
+                style={styles.list}
+                ItemSeparatorComponent={() => <View style={styles.separator} />}
+                renderItem={({ item }) => (
+                  <View style={styles.row}>
+                    <Text style={styles.rowText} numberOfLines={1}>{item}</Text>
+                    <Pressable
+                      onPress={() => removeTrustedSender(item)}
+                      hitSlop={6}
+                      style={({ pressed }) => [styles.removeBtn, pressed && styles.removeBtnPressed]}
+                    >
+                      <Trash2 size={16} color={c.error} />
+                    </Pressable>
+                  </View>
+                )}
+              />
+            )}
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+}
+
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+  trustedButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    paddingHorizontal: spacing.md,
+    paddingVertical: 6,
+    backgroundColor: c.muted,
+    borderRadius: radius.sm,
+  },
+  trustedButtonPressed: { opacity: 0.7 },
+  trustedButtonText: { ...typography.body, color: c.text },
+
+  modalBackdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+    paddingHorizontal: spacing.lg,
+  },
+  modalCard: {
+    backgroundColor: c.card,
+    borderRadius: radius.lg,
+    borderWidth: 1,
+    borderColor: c.border,
+    padding: spacing.lg,
+    maxHeight: '80%',
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: spacing.md,
+  },
+  modalTitle: { ...typography.h3, color: c.text },
+  addRow: { flexDirection: 'row', gap: spacing.sm, marginBottom: spacing.md },
+  input: {
+    flex: 1,
+    backgroundColor: c.background,
+    borderRadius: radius.sm,
+    borderWidth: 1,
+    borderColor: c.border,
+    paddingHorizontal: spacing.md,
+    paddingVertical: 8,
+    color: c.text,
+    ...typography.body,
+  },
+  list: { maxHeight: 300 },
+  separator: { height: 1, backgroundColor: c.border },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: spacing.md,
+  },
+  rowText: { ...typography.body, color: c.text, flex: 1, marginRight: spacing.sm },
+  removeBtn: { padding: 6, borderRadius: radius.sm },
+  removeBtnPressed: { backgroundColor: c.muted },
+  emptyText: {
+    ...typography.body,
+    color: c.textMuted,
+    textAlign: 'center',
+    paddingVertical: spacing.xl,
+  },
+});
+}

src/components/settings/FilesSettings.tsx

@@ -4,7 +4,8 @@ import {
   Folder, FileText, FileCode, FileAudio, File, Image as ImageIcon,
 } from 'lucide-react-native';
 import { SettingsSection, SettingItem, RadioGroup, ToggleSwitch } from './settings-section';
-import { colors, spacing, radius, typography } from '../../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 
 type FolderLayout = 'inline' | 'sidebar';
 type ViewMode = 'list' | 'grid';
@@ -58,23 +59,25 @@ function formatSize(b: number) {
 }
 
 function getIcon(file: SampleFile, colored: boolean, sz: number) {
-  if (file.isFolder) return <Folder size={sz} color={colored ? '#60a5fa' : colors.mutedForeground} />;
+  if (file.isFolder) return <Folder size={sz} color={colored ? '#60a5fa' : c.mutedForeground} />;
   const ext = file.name.split('.').pop()?.toLowerCase();
   switch (ext) {
     case 'jpg': case 'png': case 'gif':
-      return <ImageIcon size={sz} color={colored ? '#4ade80' : colors.mutedForeground} />;
+      return <ImageIcon size={sz} color={colored ? '#4ade80' : c.mutedForeground} />;
     case 'mp3': case 'wav':
-      return <FileAudio size={sz} color={colored ? '#a78bfa' : colors.mutedForeground} />;
+      return <FileAudio size={sz} color={colored ? '#a78bfa' : c.mutedForeground} />;
     case 'pdf':
-      return <FileText size={sz} color={colored ? '#f87171' : colors.mutedForeground} />;
+      return <FileText size={sz} color={colored ? '#f87171' : c.mutedForeground} />;
     case 'md': case 'json': case 'js': case 'ts':
-      return <FileCode size={sz} color={colored ? '#fbbf24' : colors.mutedForeground} />;
+      return <FileCode size={sz} color={colored ? '#fbbf24' : c.mutedForeground} />;
     default:
-      return <File size={sz} color={colors.mutedForeground} />;
+      return <File size={sz} color={c.mutedForeground} />;
   }
 }
 
 function FilesPreview({ prefs }: { prefs: FilesPrefs }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const files = SAMPLE.filter((f) => {
     if (!prefs.showHiddenFiles && f.hidden) return false;
     return true;
@@ -127,6 +130,8 @@ function FilesPreview({ prefs }: { prefs: FilesPrefs }) {
 }
 
 export function FilesSettings() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const [prefs, setPrefs] = useState<FilesPrefs>(DEFAULTS);
   const update = (patch: Partial<FilesPrefs>) => setPrefs((p) => ({ ...p, ...patch }));
 
@@ -188,7 +193,7 @@ export function FilesSettings() {
         <SettingItem label="Show icons" description="Display icons for files and folders.">
           <ToggleSwitch checked={prefs.showIcons} onChange={(v) => update({ showIcons: v })} />
         </SettingItem>
-        <SettingItem label="Colored icons" description="Use file-type-specific colors.">
+        <SettingItem label="Colored icons" description="Use file-type-specific c.">
           <ToggleSwitch
             checked={prefs.coloredIcons}
             onChange={(v) => update({ coloredIcons: v })}
@@ -212,14 +217,15 @@ export function FilesSettings() {
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   container: { gap: spacing.xxxl },
-  previewLabel: { ...typography.bodyMedium, color: colors.text, marginBottom: spacing.sm },
+  previewLabel: { ...typography.bodyMedium, color: c.text, marginBottom: spacing.sm },
   previewBox: {
     borderRadius: radius.md,
     borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.background,
+    borderColor: c.border,
+    backgroundColor: c.background,
     overflow: 'hidden',
     minHeight: 160,
   },
@@ -230,10 +236,10 @@ const styles = StyleSheet.create({
     paddingVertical: 4,
     paddingHorizontal: spacing.sm,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
-    backgroundColor: colors.muted,
+    borderBottomColor: c.border,
+    backgroundColor: c.muted,
   },
-  listHeaderText: { fontSize: 10, fontWeight: '500', color: colors.mutedForeground },
+  listHeaderText: { fontSize: 10, fontWeight: '500', color: c.mutedForeground },
   listRow: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -241,10 +247,10 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     paddingHorizontal: spacing.sm,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
   },
-  listName: { fontSize: 11, color: colors.text, flex: 1 },
-  listMeta: { fontSize: 10, color: colors.mutedForeground, width: 60, textAlign: 'right' },
+  listName: { fontSize: 11, color: c.text, flex: 1 },
+  listMeta: { fontSize: 10, color: c.mutedForeground, width: 60, textAlign: 'right' },
   gridWrap: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -258,5 +264,6 @@ const styles = StyleSheet.create({
     width: 72,
     borderRadius: radius.sm,
   },
-  gridName: { fontSize: 9, color: colors.text, textAlign: 'center' },
+  gridName: { fontSize: 9, color: c.text, textAlign: 'center' },
 });
+}

src/components/settings/FilterSettings.tsx

@@ -3,7 +3,8 @@ import { View, Text, StyleSheet, Pressable } from 'react-native';
 import { Plus, GripVertical, X, Code, Filter, AlertTriangle, RotateCcw } from 'lucide-react-native';
 import { SettingsSection, ToggleSwitch } from './settings-section';
 import Button from '../Button';
-import { colors, spacing, radius, typography } from '../../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 
 interface Rule {
   id: string;
@@ -16,6 +17,8 @@ interface Rule {
 const SAMPLE_RULES: Rule[] = [];
 
 export function FilterSettings() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const [rules, setRules] = useState<Rule[]>(SAMPLE_RULES);
   const [expandedView, setExpandedView] = useState(false);
   const [isOpaque] = useState(false);
@@ -45,7 +48,7 @@ export function FilterSettings() {
                   <Text style={styles.linkText}>Open Sieve Editor</Text>
                 </Pressable>
                 <Pressable style={styles.resetLink}>
-                  <RotateCcw size={12} color={colors.error} />
+                  <RotateCcw size={12} color={c.error} />
                   <Text style={styles.resetText}>Reset to visual</Text>
                 </Pressable>
               </View>
@@ -55,7 +58,7 @@ export function FilterSettings() {
 
         {rules.length === 0 && !isOpaque && (
           <View style={styles.emptyState}>
-            <Filter size={40} color={colors.mutedForeground} style={{ opacity: 0.4 }} />
+            <Filter size={40} color={c.mutedForeground} style={{ opacity: 0.4 }} />
             <Text style={styles.emptyText}>No rules yet.</Text>
           </View>
         )}
@@ -65,7 +68,7 @@ export function FilterSettings() {
             {rules.map((rule) => (
               <View key={rule.id} style={[styles.ruleRow, !rule.enabled && styles.ruleDisabled]}>
                 <View style={styles.grip}>
-                  <GripVertical size={16} color={colors.mutedForeground} />
+                  <GripVertical size={16} color={c.mutedForeground} />
                 </View>
 
                 <ToggleSwitch checked={rule.enabled} onChange={() => toggle(rule.id)} />
@@ -88,7 +91,7 @@ export function FilterSettings() {
                   </View>
                 ) : (
                   <Pressable style={styles.iconBtn} onPress={() => setDeleteId(rule.id)}>
-                    <X size={16} color={colors.mutedForeground} />
+                    <X size={16} color={c.mutedForeground} />
                   </Pressable>
                 )}
               </View>
@@ -100,11 +103,11 @@ export function FilterSettings() {
       <View style={styles.footer}>
         <View style={{ flexDirection: 'row', gap: spacing.sm }}>
           {!isOpaque && (
-            <Button variant="outline" size="sm" icon={<Plus size={14} color={colors.text} />}>
+            <Button variant="outline" size="sm" icon={<Plus size={14} color={c.text} />}>
               Add Rule
             </Button>
           )}
-          <Button variant="outline" size="sm" icon={<Code size={14} color={colors.text} />}>
+          <Button variant="outline" size="sm" icon={<Code size={14} color={c.text} />}>
             Raw Editor
           </Button>
         </View>
@@ -120,7 +123,8 @@ export function FilterSettings() {
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   container: { gap: spacing.xl },
   opaqueWarning: {
     flexDirection: 'row',
@@ -134,11 +138,11 @@ const styles = StyleSheet.create({
   },
   opaqueText: { ...typography.caption, color: '#fde68a' },
   opaqueActions: { flexDirection: 'row', gap: spacing.md, marginTop: spacing.sm },
-  linkText: { ...typography.caption, color: colors.primary, fontWeight: '500' },
+  linkText: { ...typography.caption, color: c.primary, fontWeight: '500' },
   resetLink: { flexDirection: 'row', alignItems: 'center', gap: 4 },
-  resetText: { ...typography.caption, color: colors.error, fontWeight: '500' },
+  resetText: { ...typography.caption, color: c.error, fontWeight: '500' },
   emptyState: { alignItems: 'center', paddingVertical: spacing.xxl, gap: spacing.md },
-  emptyText: { ...typography.body, color: colors.mutedForeground },
+  emptyText: { ...typography.body, color: c.mutedForeground },
   ruleRow: {
     flexDirection: 'row',
     alignItems: 'flex-start',
@@ -146,12 +150,12 @@ const styles = StyleSheet.create({
     padding: spacing.md,
     borderRadius: radius.sm,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
   },
   ruleDisabled: { opacity: 0.6 },
   grip: { paddingTop: 2 },
-  ruleName: { ...typography.bodyMedium, color: colors.text },
-  ruleSummary: { ...typography.caption, color: colors.mutedForeground, marginTop: 2 },
+  ruleName: { ...typography.bodyMedium, color: c.text },
+  ruleSummary: { ...typography.caption, color: c.mutedForeground, marginTop: 2 },
   iconBtn: {
     width: 28,
     height: 28,
@@ -167,5 +171,6 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
   },
   expandedToggle: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
-  expandedLabel: { ...typography.caption, color: colors.mutedForeground },
+  expandedLabel: { ...typography.caption, color: c.mutedForeground },
 });
+}

src/components/settings/FolderSettings.tsx

@@ -4,7 +4,8 @@ import {
   Folder, Inbox, Send, FileText, Trash, ShieldAlert, Archive,
 } from 'lucide-react-native';
 import { SettingsSection, SettingItem } from './settings-section';
-import { colors, spacing, radius, typography } from '../../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 import { useEmailStore } from '../../stores/email-store';
 import type { Mailbox } from '../../api/types';
 
@@ -23,6 +24,8 @@ function getIcon(mb: Mailbox) {
 }
 
 export function FolderSettings() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const mailboxes = useEmailStore((s) => s.mailboxes);
   const fetchMailboxes = useEmailStore((s) => s.fetchMailboxes);
 
@@ -47,7 +50,7 @@ export function FolderSettings() {
       >
         {mailboxes.length === 0 ? (
           <View style={styles.loading}>
-            <ActivityIndicator size="small" color={colors.primary} />
+            <ActivityIndicator size="small" color={c.primary} />
           </View>
         ) : (
           <View>
@@ -58,7 +61,7 @@ export function FolderSettings() {
                   <View style={styles.folderLeft}>
                     <Icon
                       size={16}
-                      color={mb.role ? colors.primary : colors.mutedForeground}
+                      color={mb.role ? c.primary : c.mutedForeground}
                     />
                     <Text style={styles.folderName} numberOfLines={1}>{mb.name}</Text>
                     {mb.role && ROLE_LABEL[mb.role] && (
@@ -94,7 +97,8 @@ export function FolderSettings() {
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   container: { gap: spacing.xxxl },
   loading: { paddingVertical: 40, alignItems: 'center' },
   folderRow: {
@@ -106,22 +110,23 @@ const styles = StyleSheet.create({
     borderRadius: radius.sm,
   },
   folderLeft: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm, flex: 1 },
-  folderName: { ...typography.body, color: colors.text, flexShrink: 1 },
+  folderName: { ...typography.body, color: c.text, flexShrink: 1 },
   rolePill: {
     paddingHorizontal: 6,
     paddingVertical: 2,
     borderRadius: radius.full,
-    backgroundColor: colors.primaryBg,
+    backgroundColor: c.primaryBg,
   },
-  rolePillText: { fontSize: 10, fontWeight: '500', color: colors.primary },
+  rolePillText: { fontSize: 10, fontWeight: '500', color: c.primary },
   folderRight: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
   unreadBadge: {
     paddingHorizontal: 6,
     paddingVertical: 2,
     borderRadius: radius.full,
-    backgroundColor: colors.primary,
+    backgroundColor: c.primary,
   },
-  unreadText: { fontSize: 10, fontWeight: '500', color: colors.primaryForeground },
-  total: { ...typography.caption, color: colors.mutedForeground, minWidth: 32, textAlign: 'right' },
-  caption: { ...typography.caption, color: colors.mutedForeground },
+  unreadText: { fontSize: 10, fontWeight: '500', color: c.primaryForeground },
+  total: { ...typography.caption, color: c.mutedForeground, minWidth: 32, textAlign: 'right' },
+  caption: { ...typography.caption, color: c.mutedForeground },
 });
+}

src/components/settings/IdentitySettings.tsx

@@ -2,10 +2,13 @@ import React, { useEffect } from 'react';
 import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
 import { SettingsSection, SettingItem } from './settings-section';
 import Button from '../Button';
-import { colors, typography, spacing, radius } from '../../theme/tokens';
+import { typography, spacing, radius, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 import { useSettingsStore } from '../../stores/settings-store';
 
 export function IdentitySettings() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const identities = useSettingsStore((s) => s.identities);
   const loading = useSettingsStore((s) => s.loading);
   const error = useSettingsStore((s) => s.error);
@@ -30,7 +33,7 @@ export function IdentitySettings() {
       >
         <View style={styles.row}>
           {loading ? (
-            <ActivityIndicator size="small" color={colors.primary} />
+            <ActivityIndicator size="small" color={c.primary} />
           ) : (
             <Text style={styles.count}>{countLabel}</Text>
           )}
@@ -67,7 +70,8 @@ export function IdentitySettings() {
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   row: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -75,14 +79,14 @@ const styles = StyleSheet.create({
   },
   count: {
     ...typography.body,
-    color: colors.text,
+    color: c.text,
   },
   errorBox: {
     padding: spacing.md,
     borderRadius: radius.sm,
-    backgroundColor: colors.errorBg,
+    backgroundColor: c.errorBg,
   },
-  errorText: { ...typography.caption, color: colors.error },
+  errorText: { ...typography.caption, color: c.error },
   identityRow: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -90,15 +94,16 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.md,
     paddingHorizontal: spacing.md,
     borderRadius: radius.sm,
-    backgroundColor: colors.muted,
+    backgroundColor: c.muted,
   },
-  identityName: { ...typography.bodyMedium, color: colors.text },
-  identityEmail: { ...typography.caption, color: colors.mutedForeground, marginTop: 2 },
+  identityName: { ...typography.bodyMedium, color: c.text },
+  identityEmail: { ...typography.caption, color: c.mutedForeground, marginTop: 2 },
   badge: {
     paddingHorizontal: 6,
     paddingVertical: 2,
     borderRadius: radius.full,
     backgroundColor: 'rgba(59,130,246,0.15)',
   },
-  badgeText: { fontSize: 10, fontWeight: '500', color: colors.primary },
+  badgeText: { fontSize: 10, fontWeight: '500', color: c.primary },
 });
+}

src/components/settings/KeywordSettings.tsx

@@ -1,45 +1,47 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { View, Text, StyleSheet, Pressable, TextInput } from 'react-native';
 import { Plus, Pencil, Trash2, Check, X, RotateCcw } from 'lucide-react-native';
 import { SettingsSection } from './settings-section';
-import { colors, spacing, radius, typography } from '../../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
+import { useKeywordsStore, type KeywordDef } from '../../stores/keywords-store';
+import { DARK_COLORS } from '../../theme/tokens';
 
-interface Keyword {
-  id: string;
-  label: string;
-  color: keyof typeof colors.tags;
-}
+type Keyword = KeywordDef;
 
-const PALETTE_KEYS = Object.keys(colors.tags) as (keyof typeof colors.tags)[];
-
-const DEFAULT_KEYWORDS: Keyword[] = [
-  { id: 'important', label: 'Important', color: 'red' },
-  { id: 'work',      label: 'Work',      color: 'blue' },
-  { id: 'personal',  label: 'Personal',  color: 'green' },
-  { id: 'todo',      label: 'Todo',      color: 'amber' },
-];
+// Palette keys are theme-agnostic (same names in both palettes), so use DARK_COLORS
+// at module load. The actual rendered swatch colors come from the active theme via `c.tags[key]`.
+const PALETTE_KEYS = Object.keys(DARK_COLORS.tags) as (keyof typeof DARK_COLORS.tags)[];
 
 export function KeywordSettings() {
-  const [keywords, setKeywords] = useState<Keyword[]>(DEFAULT_KEYWORDS);
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  const keywords = useKeywordsStore((s) => s.keywords);
+  const addKeyword = useKeywordsStore((s) => s.add);
+  const updateKeyword = useKeywordsStore((s) => s.update);
+  const removeKeyword = useKeywordsStore((s) => s.remove);
+  const resetDefaults = useKeywordsStore((s) => s.resetDefaults);
+  const hydrated = useKeywordsStore((s) => s.hydrated);
+  const hydrate = useKeywordsStore((s) => s.hydrate);
+
+  useEffect(() => { if (!hydrated) void hydrate(); }, [hydrated, hydrate]);
+
   const [editingId, setEditingId] = useState<string | null>(null);
   const [isAdding, setIsAdding] = useState(false);
 
   const saveKeyword = (kw: Keyword, editing: boolean) => {
-    if (editing) {
-      setKeywords((ks) => ks.map((k) => k.id === editingId ? kw : k));
+    if (editing && editingId) {
+      const { id, ...patch } = kw;
+      updateKeyword(editingId, patch);
       setEditingId(null);
     } else {
-      setKeywords((ks) => [...ks, kw]);
+      addKeyword(kw);
       setIsAdding(false);
     }
   };
 
   const deleteKeyword = (id: string) => {
-    setKeywords((ks) => ks.filter((k) => k.id !== id));
-  };
-
-  const resetDefaults = () => {
-    setKeywords(DEFAULT_KEYWORDS);
+    removeKeyword(id);
   };
 
   return (
@@ -57,7 +59,7 @@ export function KeywordSettings() {
               />
             );
           }
-          const palette = colors.tags[kw.color];
+          const palette = c.tags[kw.color];
           return (
             <View key={kw.id} style={styles.kwRow}>
               <View style={[styles.kwDot, { backgroundColor: palette.dot }]} />
@@ -65,10 +67,10 @@ export function KeywordSettings() {
               <Text style={styles.kwId}>$label:{kw.id}</Text>
               <View style={{ flexDirection: 'row', gap: 2 }}>
                 <Pressable style={styles.iconBtn} onPress={() => setEditingId(kw.id)}>
-                  <Pencil size={14} color={colors.mutedForeground} />
+                  <Pencil size={14} color={c.mutedForeground} />
                 </Pressable>
                 <Pressable style={styles.iconBtn} onPress={() => deleteKeyword(kw.id)}>
-                  <Trash2 size={14} color={colors.mutedForeground} />
+                  <Trash2 size={14} color={c.mutedForeground} />
                 </Pressable>
               </View>
             </View>
@@ -86,11 +88,11 @@ export function KeywordSettings() {
         {!isAdding && editingId === null && (
           <View style={styles.bottomActions}>
             <Pressable style={styles.outlineBtn} onPress={() => setIsAdding(true)}>
-              <Plus size={14} color={colors.mutedForeground} />
+              <Plus size={14} color={c.mutedForeground} />
               <Text style={styles.outlineBtnText}>Add keyword</Text>
             </Pressable>
             <Pressable style={styles.outlineBtn} onPress={resetDefaults}>
-              <RotateCcw size={14} color={colors.mutedForeground} />
+              <RotateCcw size={14} color={c.mutedForeground} />
               <Text style={styles.outlineBtnText}>Reset defaults</Text>
             </Pressable>
           </View>
@@ -108,8 +110,10 @@ interface KeywordFormProps {
 }
 
 function KeywordForm({ initial, existingIds, onSave, onCancel }: KeywordFormProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const [label, setLabel] = useState(initial?.label ?? '');
-  const [color, setColor] = useState<keyof typeof colors.tags>(initial?.color ?? 'blue');
+  const [color, setColor] = useState<keyof typeof DARK_COLORS.tags>(initial?.color ?? 'blue');
 
   const normalizedId = label
     .trim()
@@ -134,7 +138,7 @@ function KeywordForm({ initial, existingIds, onSave, onCancel }: KeywordFormProp
           value={label}
           onChangeText={setLabel}
           placeholder="e.g. Important"
-          placeholderTextColor={colors.mutedForeground}
+          placeholderTextColor={c.mutedForeground}
           style={styles.input}
           maxLength={30}
           autoFocus
@@ -146,7 +150,7 @@ function KeywordForm({ initial, existingIds, onSave, onCancel }: KeywordFormProp
         <Text style={styles.formLabel}>Color</Text>
         <View style={styles.palette}>
           {PALETTE_KEYS.map((key) => {
-            const p = colors.tags[key];
+            const p = c.tags[key];
             return (
               <Pressable
                 key={key}
@@ -164,7 +168,7 @@ function KeywordForm({ initial, existingIds, onSave, onCancel }: KeywordFormProp
 
       <View style={styles.formActions}>
         <Pressable style={styles.cancelFormBtn} onPress={onCancel}>
-          <X size={14} color={colors.text} />
+          <X size={14} color={c.text} />
           <Text style={styles.cancelFormText}>Cancel</Text>
         </Pressable>
         <Pressable
@@ -172,7 +176,7 @@ function KeywordForm({ initial, existingIds, onSave, onCancel }: KeywordFormProp
           onPress={handleSave}
           disabled={!isValid}
         >
-          <Check size={14} color={colors.primaryForeground} />
+          <Check size={14} color={c.primaryForeground} />
           <Text style={styles.saveBtnText}>{initial ? 'Save' : 'Add'}</Text>
         </Pressable>
       </View>
@@ -180,7 +184,8 @@ function KeywordForm({ initial, existingIds, onSave, onCancel }: KeywordFormProp
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   kwRow: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -188,12 +193,12 @@ const styles = StyleSheet.create({
     padding: spacing.md,
     borderRadius: radius.sm,
     borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.background,
+    borderColor: c.border,
+    backgroundColor: c.background,
   },
   kwDot: { width: 20, height: 20, borderRadius: 10 },
-  kwLabel: { ...typography.bodyMedium, color: colors.text, flex: 1 },
-  kwId: { fontSize: 10, color: colors.mutedForeground, fontFamily: 'monospace' },
+  kwLabel: { ...typography.bodyMedium, color: c.text, flex: 1 },
+  kwId: { fontSize: 10, color: c.mutedForeground, fontFamily: 'monospace' },
   iconBtn: {
     width: 28,
     height: 28,
@@ -215,34 +220,34 @@ const styles = StyleSheet.create({
     borderRadius: radius.sm,
     borderWidth: 1,
     borderStyle: 'dashed',
-    borderColor: colors.border,
+    borderColor: c.border,
   },
-  outlineBtnText: { ...typography.caption, color: colors.mutedForeground },
+  outlineBtnText: { ...typography.caption, color: c.mutedForeground },
   form: {
     gap: spacing.md,
     padding: spacing.md,
     borderRadius: radius.sm,
     borderWidth: 1,
-    borderColor: colors.primaryBorder,
-    backgroundColor: colors.accent,
+    borderColor: c.primaryBorder,
+    backgroundColor: c.accent,
   },
-  formLabel: { ...typography.caption, color: colors.mutedForeground, marginBottom: 4 },
+  formLabel: { ...typography.caption, color: c.mutedForeground, marginBottom: 4 },
   input: {
     paddingHorizontal: spacing.sm,
     paddingVertical: 6,
     borderRadius: radius.sm,
-    backgroundColor: colors.background,
+    backgroundColor: c.background,
     borderWidth: 1,
-    borderColor: colors.border,
-    color: colors.text,
+    borderColor: c.border,
+    color: c.text,
     ...typography.body,
   },
-  errorText: { ...typography.caption, color: colors.error, marginTop: 4 },
+  errorText: { ...typography.caption, color: c.error, marginTop: 4 },
   palette: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
   colorSwatch: { width: 24, height: 24, borderRadius: 12 },
   colorSwatchSelected: {
     borderWidth: 2,
-    borderColor: colors.text,
+    borderColor: c.text,
   },
   formActions: {
     flexDirection: 'row',
@@ -257,9 +262,9 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     borderRadius: radius.sm,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
   },
-  cancelFormText: { ...typography.caption, color: colors.text },
+  cancelFormText: { ...typography.caption, color: c.text },
   saveBtn: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -267,7 +272,8 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.md,
     paddingVertical: 6,
     borderRadius: radius.sm,
-    backgroundColor: colors.primary,
+    backgroundColor: c.primary,
   },
-  saveBtnText: { ...typography.caption, color: colors.primaryForeground, fontWeight: '500' },
+  saveBtnText: { ...typography.caption, color: c.primaryForeground, fontWeight: '500' },
 });
+}

src/components/settings/LanguageSettings.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect } from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { Check } from 'lucide-react-native';
+import { SettingsSection, SettingItem } from './settings-section';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
+import { useLocaleStore } from '../../stores/locale-store';
+import { SUPPORTED_LOCALES, detectDeviceLocale, type LocaleCode } from '../../i18n';
+
+export function LanguageSettings() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  const override = useLocaleStore((s) => s.override);
+  const setOverride = useLocaleStore((s) => s.setOverride);
+  const hydrated = useLocaleStore((s) => s.hydrated);
+  const hydrate = useLocaleStore((s) => s.hydrate);
+  const t = useLocaleStore((s) => s.t);
+
+  useEffect(() => { if (!hydrated) void hydrate(); }, [hydrated, hydrate]);
+
+  const deviceCode = detectDeviceLocale();
+  const selected: LocaleCode | 'system' = override ?? 'system';
+
+  const renderRow = (code: LocaleCode | 'system', label: string, sublabel?: string) => {
+    const active = selected === code;
+    return (
+      <Pressable
+        key={code}
+        onPress={() => setOverride(code === 'system' ? null : (code as LocaleCode))}
+        style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
+      >
+        <View style={{ flex: 1 }}>
+          <Text style={styles.label}>{label}</Text>
+          {sublabel ? <Text style={styles.sublabel}>{sublabel}</Text> : null}
+        </View>
+        {active ? <Check size={16} color={c.primary} /> : null}
+      </Pressable>
+    );
+  };
+
+  const deviceLabel =
+    SUPPORTED_LOCALES.find((l) => l.code === deviceCode)?.label ?? 'English';
+
+  return (
+    <SettingsSection
+      title={t('settings.appearance.language.label', 'Language')}
+      description={t('settings.appearance.language.description', 'Choose your preferred language')}
+    >
+      <SettingItem
+        label={t('settings.appearance.language.label', 'Language')}
+        description={t('settings.appearance.language.description', 'Choose your preferred language')}
+        noBorder
+      />
+      <View style={styles.list}>
+        {renderRow('system', `System default (${deviceLabel})`)}
+        <View style={styles.divider} />
+        {SUPPORTED_LOCALES.map((l) => renderRow(l.code, l.label))}
+      </View>
+    </SettingsSection>
+  );
+}
+
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+  list: { borderRadius: radius.md, overflow: 'hidden', backgroundColor: c.background },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: spacing.md,
+    gap: spacing.sm,
+  },
+  rowPressed: { backgroundColor: c.muted },
+  divider: { height: 1, backgroundColor: c.border, marginHorizontal: spacing.md },
+  label: { ...typography.body, color: c.text },
+  sublabel: { ...typography.caption, color: c.textMuted, marginTop: 2 },
+});
+}

src/components/settings/LayoutSettings.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { ArrowRight, ArrowLeft } from 'lucide-react-native';
+import { SettingsSection, SettingItem, RadioGroup } from './settings-section';
+import { spacing, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
+import { useSettingsStore, type SwipeAction } from '../../stores/settings-store';
+
+const SWIPE_OPTIONS: { value: SwipeAction; label: string }[] = [
+  { value: 'none',    label: 'None' },
+  { value: 'archive', label: 'Archive' },
+  { value: 'delete',  label: 'Delete' },
+  { value: 'spam',    label: 'Spam' },
+  { value: 'read',    label: 'Read/Unread' },
+  { value: 'star',    label: 'Star' },
+];
+
+export function LayoutSettings() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  const swipeLeftAction = useSettingsStore((s) => s.swipeLeftAction);
+  const setSwipeLeftAction = useSettingsStore((s) => s.setSwipeLeftAction);
+  const swipeRightAction = useSettingsStore((s) => s.swipeRightAction);
+  const setSwipeRightAction = useSettingsStore((s) => s.setSwipeRightAction);
+  const hydrated = useSettingsStore((s) => s.hydrated);
+  const hydrate = useSettingsStore((s) => s.hydrate);
+
+  useEffect(() => { if (!hydrated) void hydrate(); }, [hydrated, hydrate]);
+
+  return (
+    <SettingsSection title="Layout" description="Tune the email list interactions for mobile.">
+      <View style={{ gap: spacing.sm }}>
+        <View style={styles.row}>
+          <ArrowRight size={14} color={c.mutedForeground} />
+          <Text style={styles.rowLabel}>Swipe right (left → right)</Text>
+        </View>
+        <Text style={styles.rowDescription}>
+          Action when you drag a row from its left edge towards the right.
+        </Text>
+        <RadioGroup
+          value={swipeRightAction}
+          onChange={(v) => setSwipeRightAction(v as SwipeAction)}
+          options={SWIPE_OPTIONS}
+        />
+      </View>
+
+      <View style={{ gap: spacing.sm, marginTop: spacing.lg }}>
+        <View style={styles.row}>
+          <ArrowLeft size={14} color={c.mutedForeground} />
+          <Text style={styles.rowLabel}>Swipe left (right → left)</Text>
+        </View>
+        <Text style={styles.rowDescription}>
+          Action when you drag a row from its right edge towards the left.
+        </Text>
+        <RadioGroup
+          value={swipeLeftAction}
+          onChange={(v) => setSwipeLeftAction(v as SwipeAction)}
+          options={SWIPE_OPTIONS}
+        />
+      </View>
+
+      <SettingItem
+        label=""
+        description="Drag past about half a row to commit; lift earlier to cancel."
+      />
+    </SettingsSection>
+  );
+}
+
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+  rowLabel: { ...typography.bodyMedium, color: c.text },
+  rowDescription: { ...typography.caption, color: c.mutedForeground },
+});
+}

src/components/settings/NotificationSettings.tsx

@@ -10,7 +10,8 @@ import { CheckCircle2, Volume2, XCircle } from 'lucide-react-native';
 import Button from '../Button';
 import Dialog from '../Dialog';
 import { SettingsSection, SettingItem, Select, ToggleSwitch } from './settings-section';
-import { colors, radius, spacing, typography } from '../../theme/tokens';
+import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 import { useAuthStore } from '../../stores/auth-store';
 import {
   DEFAULT_RELAY_BASE_URL,
@@ -35,6 +36,8 @@ type PushStatus =
   | { kind: 'error'; message: string };
 
 export function NotificationSettings() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const username = useAuthStore((s) => s.username);
 
   const [sound, setSound] = useState('default');
@@ -120,26 +123,26 @@ export function NotificationSettings() {
             <View style={styles.statusRow}>
               {pushStatus.kind === 'busy' && (
                 <>
-                  <ActivityIndicator size="small" color={colors.primary} />
+                  <ActivityIndicator size="small" color={c.primary} />
                   <Text style={styles.statusText}>{pushStatus.message}</Text>
                 </>
               )}
               {pushStatus.kind === 'enabled' && (
                 <>
-                  <CheckCircle2 size={14} color={colors.success} />
-                  <Text style={[styles.statusText, { color: colors.success }]}>Active</Text>
+                  <CheckCircle2 size={14} color={c.success} />
+                  <Text style={[styles.statusText, { color: c.success }]}>Active</Text>
                 </>
               )}
               {pushStatus.kind === 'error' && (
                 <>
-                  <XCircle size={14} color={colors.error} />
-                  <Text style={[styles.statusText, { color: colors.error }]}>
+                  <XCircle size={14} color={c.error} />
+                  <Text style={[styles.statusText, { color: c.error }]}>
                     {pushStatus.message}
                   </Text>
                 </>
               )}
               {pushStatus.kind === 'idle' && (
-                <Text style={[styles.statusText, { color: colors.mutedForeground }]}>
+                <Text style={[styles.statusText, { color: c.mutedForeground }]}>
                   Not configured
                 </Text>
               )}
@@ -152,7 +155,7 @@ export function NotificationSettings() {
             value={relayUrl}
             onChangeText={setRelayUrl}
             placeholder={DEFAULT_RELAY_BASE_URL}
-            placeholderTextColor={colors.textMuted}
+            placeholderTextColor={c.textMuted}
             autoCapitalize="none"
             autoCorrect={false}
             keyboardType="url"
@@ -183,7 +186,7 @@ export function NotificationSettings() {
             <Button
               variant="ghost"
               size="icon"
-              icon={<Volume2 size={16} color={colors.text} />}
+              icon={<Volume2 size={16} color={c.text} />}
             />
             <Select
               value={sound}
@@ -229,12 +232,13 @@ export function NotificationSettings() {
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   container: { gap: spacing.xxxl },
   row: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
   pushCard: {
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     borderRadius: radius.md,
     padding: spacing.lg,
     gap: spacing.sm,
@@ -247,18 +251,18 @@ const styles = StyleSheet.create({
   },
   fieldLabel: {
     ...typography.bodyMedium,
-    color: colors.text,
+    color: c.text,
   },
   fieldDescription: {
     ...typography.caption,
-    color: colors.mutedForeground,
+    color: c.mutedForeground,
   },
   urlInput: {
     ...typography.body,
-    color: colors.text,
-    backgroundColor: colors.surface,
+    color: c.text,
+    backgroundColor: c.surface,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     borderRadius: radius.sm,
     paddingHorizontal: spacing.md,
     paddingVertical: 8,
@@ -266,6 +270,7 @@ const styles = StyleSheet.create({
     marginTop: 4,
   },
   statusRow: { flexDirection: 'row', alignItems: 'center', gap: 6, flexShrink: 1 },
-  statusText: { ...typography.caption, color: colors.text },
+  statusText: { ...typography.caption, color: c.text },
   actions: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing.sm, marginTop: spacing.md },
 });
+}

src/components/settings/PluginsSettings.tsx

@@ -3,7 +3,8 @@ import { View, Text, StyleSheet, Pressable } from 'react-native';
 import { Upload, Puzzle, AlertTriangle, Lock, Trash2, ChevronDown, ChevronRight } from 'lucide-react-native';
 import { SettingsSection, SettingItem, ToggleSwitch } from './settings-section';
 import Button from '../Button';
-import { colors, spacing, radius, typography } from '../../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 
 interface Plugin {
   id: string;
@@ -20,14 +21,16 @@ interface Plugin {
 }
 
 const STATUS_STYLE: Record<Plugin['status'], { bg: string; fg: string }> = {
-  installed: { bg: colors.muted, fg: colors.mutedForeground },
+  installed: { bg: c.muted, fg: c.mutedForeground },
   enabled:   { bg: 'rgba(59, 130, 246, 0.15)', fg: '#60a5fa' },
   running:   { bg: 'rgba(34, 197, 94, 0.15)',  fg: '#4ade80' },
-  disabled:  { bg: colors.muted, fg: colors.mutedForeground },
+  disabled:  { bg: c.muted, fg: c.mutedForeground },
   error:     { bg: 'rgba(239, 68, 68, 0.15)',  fg: '#f87171' },
 };
 
 export function PluginsSettings() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const [plugins, setPlugins] = useState<Plugin[]>([]);
   const [expandedId, setExpandedId] = useState<string | null>(null);
 
@@ -52,7 +55,7 @@ export function PluginsSettings() {
     >
       {plugins.length === 0 ? (
         <View style={styles.empty}>
-          <Puzzle size={48} color={colors.mutedForeground} style={{ opacity: 0.3 }} />
+          <Puzzle size={48} color={c.mutedForeground} style={{ opacity: 0.3 }} />
           <Text style={styles.emptyTitle}>No plugins installed</Text>
           <Text style={styles.emptyDesc}>Upload a plugin .zip file to get started.</Text>
         </View>
@@ -66,7 +69,7 @@ export function PluginsSettings() {
                 key={plugin.id}
                 style={[
                   styles.card,
-                  plugin.status === 'error' && { borderColor: colors.errorBorder },
+                  plugin.status === 'error' && { borderColor: c.errorBorder },
                 ]}
               >
                 <View style={styles.cardHeader}>
@@ -107,7 +110,7 @@ export function PluginsSettings() {
 
                     {plugin.error && (
                       <View style={styles.errorBox}>
-                        <AlertTriangle size={14} color={colors.error} />
+                        <AlertTriangle size={14} color={c.error} />
                         <Text style={styles.errorText}>{plugin.error}</Text>
                       </View>
                     )}
@@ -145,7 +148,7 @@ export function PluginsSettings() {
       )}
 
       <SettingItem label="Upload Plugin" description="Install a new plugin from a .zip file.">
-        <Button variant="outline" size="sm" icon={<Upload size={14} color={colors.text} />}>
+        <Button variant="outline" size="sm" icon={<Upload size={14} color={c.text} />}>
           Upload .zip
         </Button>
       </SettingItem>
@@ -153,18 +156,19 @@ export function PluginsSettings() {
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   empty: {
     alignItems: 'center',
     paddingVertical: spacing.xxxl,
     gap: spacing.sm,
   },
-  emptyTitle: { ...typography.body, color: colors.mutedForeground },
-  emptyDesc: { ...typography.caption, color: colors.mutedForeground },
+  emptyTitle: { ...typography.body, color: c.mutedForeground },
+  emptyDesc: { ...typography.caption, color: c.mutedForeground },
   card: {
     borderRadius: radius.md,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
   },
   cardHeader: {
     flexDirection: 'row',
@@ -173,7 +177,7 @@ const styles = StyleSheet.create({
     padding: spacing.md,
   },
   headerRow: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm, flexWrap: 'wrap' },
-  pluginName: { ...typography.bodyMedium, color: colors.text },
+  pluginName: { ...typography.bodyMedium, color: c.text },
   statusPill: { paddingHorizontal: 6, paddingVertical: 2, borderRadius: radius.full },
   statusText: { fontSize: 10, fontWeight: '500' },
   forcedPill: {
@@ -187,38 +191,39 @@ const styles = StyleSheet.create({
   },
   forcedText: { fontSize: 10, fontWeight: '500', color: '#fbbf24' },
   metaRow: { flexDirection: 'row', gap: spacing.sm, marginTop: 2 },
-  meta: { ...typography.caption, color: colors.mutedForeground },
-  metaDot: { ...typography.caption, color: colors.mutedForeground, opacity: 0.6 },
+  meta: { ...typography.caption, color: c.mutedForeground },
+  metaDot: { ...typography.caption, color: c.mutedForeground, opacity: 0.6 },
   cardBody: {
     borderTopWidth: 1,
-    borderTopColor: colors.border,
+    borderTopColor: c.border,
     padding: spacing.md,
     gap: spacing.md,
   },
-  description: { ...typography.caption, color: colors.mutedForeground },
+  description: { ...typography.caption, color: c.mutedForeground },
   errorBox: {
     flexDirection: 'row',
     gap: spacing.sm,
     padding: spacing.sm,
     borderRadius: radius.sm,
-    backgroundColor: colors.errorBg,
+    backgroundColor: c.errorBg,
     alignItems: 'flex-start',
   },
-  errorText: { ...typography.caption, color: colors.error, flex: 1 },
-  sectionLabel: { ...typography.captionMedium, color: colors.text, marginBottom: 4 },
+  errorText: { ...typography.caption, color: c.error, flex: 1 },
+  sectionLabel: { ...typography.captionMedium, color: c.text, marginBottom: 4 },
   permWrap: { flexDirection: 'row', flexWrap: 'wrap', gap: 4 },
   permPill: {
     paddingHorizontal: 6,
     paddingVertical: 2,
     borderRadius: radius.xs,
-    backgroundColor: colors.muted,
+    backgroundColor: c.muted,
   },
-  permText: { fontSize: 10, color: colors.mutedForeground },
+  permText: { fontSize: 10, color: c.mutedForeground },
   uninstallRow: {
     flexDirection: 'row',
     justifyContent: 'flex-end',
     paddingTop: spacing.sm,
     borderTopWidth: 1,
-    borderTopColor: colors.border,
+    borderTopColor: c.border,
   },
 });
+}

src/components/settings/ReadingSettings.tsx

@@ -2,7 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { View, Text, StyleSheet, Pressable, TextInput } from 'react-native';
 import { AlertTriangle, FolderSync, Mail, X } from 'lucide-react-native';
 import { SettingsSection, SettingItem, Select, RadioGroup, ToggleSwitch } from './settings-section';
-import { colors, spacing, radius, typography } from '../../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 import { useSettingsStore, type ExternalContentPolicy } from '../../stores/settings-store';
 
 type MailLayout = 'split' | 'focus';
@@ -14,6 +15,8 @@ type AttachmentPosition = 'beside-sender' | 'below-header';
 const DEFAULT_KEYWORDS = ['attached', 'attachment', 'enclosed', 'attaching'];
 
 function MailLayoutPreview({ value }: { value: MailLayout }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const isSplit = value === 'split';
   return (
     <View style={styles.layoutPreview}>
@@ -65,7 +68,9 @@ function MailLayoutPreview({ value }: { value: MailLayout }) {
   );
 }
 
-export function EmailSettings() {
+export function ReadingSettings() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const externalContentPolicy = useSettingsStore((s) => s.externalContentPolicy);
   const setExternalContentPolicyStore = useSettingsStore((s) => s.setExternalContentPolicy);
   const trustedSenders = useSettingsStore((s) => s.trustedSenders);
@@ -124,7 +129,7 @@ export function EmailSettings() {
         />
         {deleteAction === 'permanent' && (
           <View style={styles.warning}>
-            <AlertTriangle size={14} color={colors.error} />
+            <AlertTriangle size={14} color={c.error} />
             <Text style={styles.warningText}>Permanent deletion cannot be undone.</Text>
           </View>
         )}
@@ -144,7 +149,7 @@ export function EmailSettings() {
         />
         {archiveMode !== 'single' && (
           <Pressable style={styles.inlineBtn}>
-            <FolderSync size={14} color={colors.text} />
+            <FolderSync size={14} color={c.text} />
             <Text style={styles.inlineBtnText}>Reorganize existing archive</Text>
           </Pressable>
         )}
@@ -206,7 +211,7 @@ export function EmailSettings() {
                   }
                   hitSlop={6}
                 >
-                  <X size={12} color={colors.mutedForeground} />
+                  <X size={12} color={c.mutedForeground} />
                 </Pressable>
               </View>
             ))}
@@ -216,7 +221,7 @@ export function EmailSettings() {
               value={newKeyword}
               onChangeText={setNewKeyword}
               placeholder="Add a keyword"
-              placeholderTextColor={colors.mutedForeground}
+              placeholderTextColor={c.mutedForeground}
               style={styles.keywordInput}
               onSubmitEditing={() => {
                 const t = newKeyword.trim().toLowerCase();
@@ -282,62 +287,12 @@ export function EmailSettings() {
         />
       </SettingItem>
 
-      <SettingItem label="Always Light Mode for Emails" description="Render email content on a white background.">
-        <ToggleSwitch checked={emailAlwaysLightMode} onChange={setEmailAlwaysLightMode} />
-      </SettingItem>
-
-      <SettingItem label="External Content" description="How to handle images and remote resources in incoming email.">
-        <Select
-          value={externalContentPolicy}
-          onChange={(v) => setExternalContentPolicyStore(v as ExternalContentPolicy)}
-          options={[
-            { value: 'ask', label: 'Ask' },
-            { value: 'block', label: 'Block' },
-            { value: 'allow', label: 'Allow' },
-          ]}
-        />
-      </SettingItem>
-
-      <View style={styles.group}>
-        <SettingItem
-          label="Trusted Senders"
-          description="Senders whose external content loads without asking."
-          noBorder
-        >
-          <Pressable style={styles.inlineBtn} onPress={() => setShowTrustedList((v) => !v)}>
-            <Text style={styles.inlineBtnText}>
-              {trustedSenders.length === 0
-                ? 'No trusted senders'
-                : `${trustedSenders.length} sender${trustedSenders.length === 1 ? '' : 's'}`}
-            </Text>
-          </Pressable>
-        </SettingItem>
-        {showTrustedList && trustedSenders.length > 0 && (
-          <View style={styles.trustedList}>
-            {trustedSenders.map((email) => (
-              <View key={email} style={styles.trustedRow}>
-                <Text style={styles.trustedEmail} numberOfLines={1}>{email}</Text>
-                <Pressable onPress={() => removeTrustedSender(email)} hitSlop={8}>
-                  <X size={14} color={colors.mutedForeground} />
-                </Pressable>
-              </View>
-            ))}
-          </View>
-        )}
-        <View style={styles.divider} />
-      </View>
-
-      <SettingItem label="Sync Trusted Senders" description="Store trusted senders in the address book.">
-        <ToggleSwitch
-          checked={trustedSendersAddressBook}
-          onChange={setTrustedSendersAddressBook}
-        />
-      </SettingItem>
     </SettingsSection>
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   group: {},
   warning: {
     flexDirection: 'row',
@@ -349,12 +304,12 @@ const styles = StyleSheet.create({
   },
   warningText: {
     ...typography.caption,
-    color: colors.error,
+    color: c.error,
     flex: 1,
   },
   divider: {
     height: 1,
-    backgroundColor: colors.border,
+    backgroundColor: c.border,
     marginTop: spacing.md,
   },
   inlineBtn: {
@@ -363,23 +318,23 @@ const styles = StyleSheet.create({
     gap: spacing.sm,
     paddingHorizontal: spacing.md,
     paddingVertical: 6,
-    backgroundColor: colors.muted,
+    backgroundColor: c.muted,
     borderRadius: radius.sm,
     alignSelf: 'flex-start',
     marginTop: spacing.sm,
   },
   inlineBtnText: {
     ...typography.body,
-    color: colors.text,
+    color: c.text,
   },
   subLabel: {
     ...typography.bodyMedium,
-    color: colors.text,
+    color: c.text,
     marginTop: spacing.sm,
   },
   subDesc: {
     ...typography.caption,
-    color: colors.mutedForeground,
+    color: c.mutedForeground,
     marginTop: 2,
     marginBottom: spacing.sm,
   },
@@ -395,11 +350,11 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.sm,
     paddingVertical: 2,
     borderRadius: radius.full,
-    backgroundColor: colors.muted,
+    backgroundColor: c.muted,
   },
   chipText: {
     ...typography.caption,
-    color: colors.text,
+    color: c.text,
   },
   addKeywordRow: {
     flexDirection: 'row',
@@ -411,37 +366,37 @@ const styles = StyleSheet.create({
     height: 32,
     paddingHorizontal: spacing.sm,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     borderRadius: radius.sm,
-    backgroundColor: colors.background,
-    color: colors.text,
+    backgroundColor: c.background,
+    color: c.text,
     ...typography.body,
   },
   addKeywordBtn: {
     paddingHorizontal: spacing.md,
     justifyContent: 'center',
-    backgroundColor: colors.muted,
+    backgroundColor: c.muted,
     borderRadius: radius.sm,
   },
   addKeywordText: {
     ...typography.body,
-    color: colors.text,
+    color: c.text,
   },
   layoutPreview: {
     marginTop: spacing.md,
     borderRadius: radius.md,
     borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.background,
+    borderColor: c.border,
+    backgroundColor: c.background,
     padding: spacing.md,
   },
   layoutTitle: {
     ...typography.bodyMedium,
-    color: colors.text,
+    color: c.text,
   },
   layoutDesc: {
     ...typography.caption,
-    color: colors.mutedForeground,
+    color: c.mutedForeground,
     marginTop: 2,
   },
   layoutFrame: {
@@ -450,27 +405,27 @@ const styles = StyleSheet.create({
     marginTop: spacing.md,
     borderRadius: radius.sm,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     overflow: 'hidden',
     backgroundColor: 'rgba(24,24,27,0.4)',
   },
   layoutRail: {
     width: 32,
     borderRightWidth: 1,
-    borderRightColor: colors.border,
+    borderRightColor: c.border,
     backgroundColor: 'rgba(24,24,27,0.6)',
   },
   layoutList: {
     width: 96,
     borderRightWidth: 1,
-    borderRightColor: colors.border,
-    backgroundColor: colors.background,
+    borderRightColor: c.border,
+    backgroundColor: c.background,
   },
   layoutRow: {
     paddingHorizontal: 6,
     paddingVertical: 4,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
   },
   layoutRowSel: {
     backgroundColor: 'rgba(59,130,246,0.1)',
@@ -478,16 +433,16 @@ const styles = StyleSheet.create({
   layoutRowName: {
     fontSize: 9,
     fontWeight: '500',
-    color: colors.text,
+    color: c.text,
   },
   layoutRowSub: {
     fontSize: 9,
-    color: colors.mutedForeground,
+    color: c.mutedForeground,
   },
   layoutReader: {
     flex: 1,
     padding: spacing.md,
-    backgroundColor: colors.background,
+    backgroundColor: c.background,
   },
   layoutBar: {
     height: 6,
@@ -506,14 +461,14 @@ const styles = StyleSheet.create({
   },
   layoutFocusText: {
     fontSize: 9,
-    color: colors.text,
+    color: c.text,
   },
   trustedList: {
     marginTop: spacing.sm,
     borderRadius: radius.sm,
     borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.muted,
+    borderColor: c.border,
+    backgroundColor: c.muted,
   },
   trustedRow: {
     flexDirection: 'row',
@@ -523,7 +478,8 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.sm,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
   },
-  trustedEmail: { ...typography.caption, color: colors.text, flex: 1 },
+  trustedEmail: { ...typography.caption, color: c.text, flex: 1 },
 });
+}

src/components/settings/SidebarAppsSettings.tsx

@@ -5,7 +5,8 @@ import {
 } from 'lucide-react-native';
 import { SettingsSection, SettingItem, ToggleSwitch } from './settings-section';
 import Button from '../Button';
-import { colors, spacing, radius, typography } from '../../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 
 interface SidebarApp {
   id: string;
@@ -17,6 +18,8 @@ interface SidebarApp {
 }
 
 export function SidebarAppsSettings() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const [keepLoaded, setKeepLoaded] = useState(false);
   const [apps, setApps] = useState<SidebarApp[]>([]);
   const [editingId, setEditingId] = useState<string | null>(null);
@@ -63,9 +66,9 @@ export function SidebarAppsSettings() {
             }
             return (
               <View key={app.id} style={styles.appRow}>
-                <GripVertical size={16} color={colors.mutedForeground} style={{ opacity: 0.5 }} />
+                <GripVertical size={16} color={c.mutedForeground} style={{ opacity: 0.5 }} />
                 <View style={styles.appIcon}>
-                  <Globe size={16} color={colors.text} />
+                  <Globe size={16} color={c.text} />
                 </View>
                 <View style={{ flex: 1 }}>
                   <Text style={styles.appName} numberOfLines={1}>{app.name}</Text>
@@ -77,16 +80,16 @@ export function SidebarAppsSettings() {
                 ]}>
                   <Text style={[
                     styles.modeBadgeText,
-                    { color: app.openMode === 'inline' ? '#60a5fa' : colors.mutedForeground },
+                    { color: app.openMode === 'inline' ? '#60a5fa' : c.mutedForeground },
                   ]}>
                     {app.openMode === 'inline' ? 'Inline' : 'Tab'}
                   </Text>
                 </View>
                 <Pressable style={styles.iconBtn} onPress={() => setEditingId(app.id)}>
-                  <Pencil size={14} color={colors.mutedForeground} />
+                  <Pencil size={14} color={c.mutedForeground} />
                 </Pressable>
                 <Pressable style={styles.iconBtn} onPress={() => removeApp(app.id)}>
-                  <Trash2 size={14} color={colors.mutedForeground} />
+                  <Trash2 size={14} color={c.mutedForeground} />
                 </Pressable>
               </View>
             );
@@ -101,7 +104,7 @@ export function SidebarAppsSettings() {
 
           {!isAdding && editingId === null && (
             <Pressable style={styles.addBtn} onPress={() => setIsAdding(true)}>
-              <Plus size={16} color={colors.text} />
+              <Plus size={16} color={c.text} />
               <Text style={styles.addBtnText}>Add app</Text>
             </Pressable>
           )}
@@ -133,7 +136,7 @@ function AppForm({ initial, onSave, onCancel }: AppFormProps) {
           value={name}
           onChangeText={setName}
           placeholder="App name"
-          placeholderTextColor={colors.mutedForeground}
+          placeholderTextColor={c.mutedForeground}
           style={formStyles.input}
         />
       </View>
@@ -144,7 +147,7 @@ function AppForm({ initial, onSave, onCancel }: AppFormProps) {
           value={url}
           onChangeText={setUrl}
           placeholder="https://example.com"
-          placeholderTextColor={colors.mutedForeground}
+          placeholderTextColor={c.mutedForeground}
           style={formStyles.input}
           autoCapitalize="none"
           keyboardType="url"
@@ -158,8 +161,8 @@ function AppForm({ initial, onSave, onCancel }: AppFormProps) {
             onPress={() => setOpenMode('tab')}
             style={[formStyles.modeBtn, openMode === 'tab' && formStyles.modeBtnActive]}
           >
-            <ExternalLink size={14} color={openMode === 'tab' ? colors.primary : colors.text} />
-            <Text style={[formStyles.modeBtnText, openMode === 'tab' && { color: colors.primary }]}>
+            <ExternalLink size={14} color={openMode === 'tab' ? c.primary : c.text} />
+            <Text style={[formStyles.modeBtnText, openMode === 'tab' && { color: c.primary }]}>
               New tab
             </Text>
           </Pressable>
@@ -167,8 +170,8 @@ function AppForm({ initial, onSave, onCancel }: AppFormProps) {
             onPress={() => setOpenMode('inline')}
             style={[formStyles.modeBtn, openMode === 'inline' && formStyles.modeBtnActive]}
           >
-            <PanelRight size={14} color={openMode === 'inline' ? colors.primary : colors.text} />
-            <Text style={[formStyles.modeBtnText, openMode === 'inline' && { color: colors.primary }]}>
+            <PanelRight size={14} color={openMode === 'inline' ? c.primary : c.text} />
+            <Text style={[formStyles.modeBtnText, openMode === 'inline' && { color: c.primary }]}>
               Inline
             </Text>
           </Pressable>
@@ -194,11 +197,12 @@ function AppForm({ initial, onSave, onCancel }: AppFormProps) {
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   container: { gap: spacing.xxxl },
   emptyText: {
     ...typography.body,
-    color: colors.mutedForeground,
+    color: c.mutedForeground,
     textAlign: 'center',
     paddingVertical: spacing.lg,
   },
@@ -209,25 +213,25 @@ const styles = StyleSheet.create({
     padding: spacing.md,
     borderRadius: radius.md,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
   },
   appIcon: {
     width: 32,
     height: 32,
     borderRadius: radius.sm,
-    backgroundColor: colors.muted,
+    backgroundColor: c.muted,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  appName: { ...typography.bodyMedium, color: colors.text },
-  appUrl: { ...typography.caption, color: colors.mutedForeground, marginTop: 2 },
+  appName: { ...typography.bodyMedium, color: c.text },
+  appUrl: { ...typography.caption, color: c.mutedForeground, marginTop: 2 },
   modeBadge: {
     paddingHorizontal: 6,
     paddingVertical: 2,
     borderRadius: radius.full,
   },
   modeBadgeInline: { backgroundColor: 'rgba(59, 130, 246, 0.1)' },
-  modeBadgeTab: { backgroundColor: colors.muted },
+  modeBadgeTab: { backgroundColor: c.muted },
   modeBadgeText: { fontSize: 10, fontWeight: '500' },
   iconBtn: {
     width: 28,
@@ -244,10 +248,11 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.sm,
     borderRadius: radius.sm,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
   },
-  addBtnText: { ...typography.body, color: colors.text },
+  addBtnText: { ...typography.body, color: c.text },
 });
+}
 
 const formStyles = StyleSheet.create({
   form: {
@@ -255,19 +260,19 @@ const formStyles = StyleSheet.create({
     padding: spacing.lg,
     borderRadius: radius.md,
     borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.muted,
+    borderColor: c.border,
+    backgroundColor: c.muted,
   },
-  label: { ...typography.captionMedium, color: colors.text },
+  label: { ...typography.captionMedium, color: c.text },
   input: {
     marginTop: 4,
     paddingHorizontal: spacing.md,
     paddingVertical: 8,
     borderRadius: radius.sm,
-    backgroundColor: colors.background,
+    backgroundColor: c.background,
     borderWidth: 1,
-    borderColor: colors.border,
-    color: colors.text,
+    borderColor: c.border,
+    color: c.text,
     ...typography.body,
   },
   modeBtn: {
@@ -278,11 +283,11 @@ const formStyles = StyleSheet.create({
     paddingVertical: 8,
     borderRadius: radius.sm,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
   },
   modeBtnActive: {
-    borderColor: colors.primary,
+    borderColor: c.primary,
     backgroundColor: 'rgba(59, 130, 246, 0.1)',
   },
-  modeBtnText: { ...typography.caption, color: colors.text },
+  modeBtnText: { ...typography.caption, color: c.text },
 });

src/components/settings/SmimeSettings.tsx

@@ -6,7 +6,8 @@ import {
 } from 'lucide-react-native';
 import { SettingsSection, SettingItem, ToggleSwitch, Select } from './settings-section';
 import Button from '../Button';
-import { colors, spacing, radius, typography } from '../../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 
 interface KeyRecord {
   id: string;
@@ -31,6 +32,8 @@ const MOCK_KEYS: KeyRecord[] = [];
 const MOCK_CERTS: PublicCert[] = [];
 
 export function SmimeSettings() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const [keys, setKeys] = useState<KeyRecord[]>(MOCK_KEYS);
   const [certs, setCerts] = useState<PublicCert[]>(MOCK_CERTS);
   const [bindings, setBindings] = useState<Record<string, string>>({});
@@ -64,9 +67,9 @@ export function SmimeSettings() {
                 <View style={styles.certLeft}>
                   <View style={[styles.certIcon, expired ? styles.certIconError : styles.certIconOk]}>
                     {expired ? (
-                      <ShieldAlert size={16} color={colors.error} />
+                      <ShieldAlert size={16} color={c.error} />
                     ) : (
-                      <ShieldCheck size={16} color={colors.primary} />
+                      <ShieldCheck size={16} color={c.primary} />
                     )}
                   </View>
                   <View style={{ flex: 1 }}>
@@ -80,19 +83,19 @@ export function SmimeSettings() {
                 <View style={styles.certActions}>
                   <Pressable style={styles.iconBtn} onPress={() => toggleUnlock(k.id)}>
                     {k.unlocked ? (
-                      <Unlock size={16} color={colors.success} />
+                      <Unlock size={16} color={c.success} />
                     ) : (
-                      <Lock size={16} color={colors.text} />
+                      <Lock size={16} color={c.text} />
                     )}
                   </Pressable>
                   <Pressable style={styles.iconBtn}>
-                    <Eye size={16} color={colors.text} />
+                    <Eye size={16} color={c.text} />
                   </Pressable>
                   <Pressable style={styles.iconBtn}>
-                    <Download size={16} color={colors.text} />
+                    <Download size={16} color={c.text} />
                   </Pressable>
                   <Pressable style={styles.iconBtn} onPress={() => deleteKey(k.id)}>
-                    <Trash2 size={16} color={colors.error} />
+                    <Trash2 size={16} color={c.error} />
                   </Pressable>
                 </View>
               </View>
@@ -105,7 +108,7 @@ export function SmimeSettings() {
         </View>
 
         <View style={{ alignItems: 'flex-start', marginTop: spacing.sm }}>
-          <Button variant="outline" size="sm" icon={<Upload size={14} color={colors.text} />}>
+          <Button variant="outline" size="sm" icon={<Upload size={14} color={c.text} />}>
             Import PKCS#12
           </Button>
         </View>
@@ -122,7 +125,7 @@ export function SmimeSettings() {
               <View key={c.id} style={styles.certRow}>
                 <View style={styles.certLeft}>
                   <View style={[styles.certIcon, styles.certIconMuted]}>
-                    <Users size={16} color={colors.mutedForeground} />
+                    <Users size={16} color={c.mutedForeground} />
                   </View>
                   <View style={{ flex: 1 }}>
                     <Text style={styles.certName} numberOfLines={1}>{c.email || c.subject}</Text>
@@ -134,10 +137,10 @@ export function SmimeSettings() {
                 </View>
                 <View style={styles.certActions}>
                   <Pressable style={styles.iconBtn}>
-                    <Eye size={16} color={colors.text} />
+                    <Eye size={16} color={c.text} />
                   </Pressable>
                   <Pressable style={styles.iconBtn} onPress={() => deleteCert(c.id)}>
-                    <Trash2 size={16} color={colors.error} />
+                    <Trash2 size={16} color={c.error} />
                   </Pressable>
                 </View>
               </View>
@@ -150,7 +153,7 @@ export function SmimeSettings() {
         </View>
 
         <View style={{ alignItems: 'flex-start', marginTop: spacing.sm }}>
-          <Button variant="outline" size="sm" icon={<Upload size={14} color={colors.text} />}>
+          <Button variant="outline" size="sm" icon={<Upload size={14} color={c.text} />}>
             Import Certificate
           </Button>
         </View>
@@ -185,7 +188,8 @@ export function SmimeSettings() {
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   container: { gap: spacing.xxxl },
   certRow: {
     flexDirection: 'row',
@@ -195,7 +199,7 @@ const styles = StyleSheet.create({
     padding: spacing.md,
     borderRadius: radius.md,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
   },
   certLeft: {
     flexDirection: 'row',
@@ -211,12 +215,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  certIconOk: { backgroundColor: colors.primaryBg },
-  certIconError: { backgroundColor: colors.errorBg },
-  certIconMuted: { backgroundColor: colors.muted },
-  certName: { ...typography.bodyMedium, color: colors.text },
-  certMeta: { ...typography.caption, color: colors.mutedForeground, marginTop: 2 },
-  expiredText: { color: colors.error },
+  certIconOk: { backgroundColor: c.primaryBg },
+  certIconError: { backgroundColor: c.errorBg },
+  certIconMuted: { backgroundColor: c.muted },
+  certName: { ...typography.bodyMedium, color: c.text },
+  certMeta: { ...typography.caption, color: c.mutedForeground, marginTop: 2 },
+  expiredText: { color: c.error },
   certActions: { flexDirection: 'row', gap: 2 },
   iconBtn: {
     width: 32,
@@ -227,8 +231,9 @@ const styles = StyleSheet.create({
   },
   empty: {
     ...typography.body,
-    color: colors.mutedForeground,
+    color: c.mutedForeground,
     textAlign: 'center',
     paddingVertical: spacing.lg,
   },
 });
+}

src/components/settings/TemplateSettings.tsx

@@ -3,9 +3,12 @@ import { View, Text, StyleSheet } from 'react-native';
 import { FileText, Download, Upload } from 'lucide-react-native';
 import { SettingsSection } from './settings-section';
 import Button from '../Button';
-import { colors, spacing, typography } from '../../theme/tokens';
+import { spacing, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 
 export function TemplateSettings() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const [templates] = useState<{ id: string; name: string }[]>([]);
 
   return (
@@ -13,7 +16,7 @@ export function TemplateSettings() {
       <SettingsSection title="Templates" description="Reusable email templates for common responses.">
         <View style={styles.row}>
           <View style={styles.countRow}>
-            <FileText size={16} color={colors.mutedForeground} />
+            <FileText size={16} color={c.mutedForeground} />
             <Text style={styles.count}>
               {templates.length === 1 ? '1 template' : `${templates.length} templates`}
             </Text>
@@ -28,11 +31,11 @@ export function TemplateSettings() {
             variant="outline"
             size="sm"
             disabled={templates.length === 0}
-            icon={<Download size={14} color={colors.text} />}
+            icon={<Download size={14} color={c.text} />}
           >
             Export
           </Button>
-          <Button variant="outline" size="sm" icon={<Upload size={14} color={colors.text} />}>
+          <Button variant="outline" size="sm" icon={<Upload size={14} color={c.text} />}>
             Import
           </Button>
         </View>
@@ -41,7 +44,8 @@ export function TemplateSettings() {
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   container: { gap: spacing.xxxl },
   row: {
     flexDirection: 'row',
@@ -50,6 +54,7 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.md,
   },
   countRow: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
-  count: { ...typography.body, color: colors.mutedForeground },
+  count: { ...typography.body, color: c.mutedForeground },
   actions: { flexDirection: 'row', gap: spacing.md, paddingVertical: spacing.md },
 });
+}

src/components/settings/ThemesSettings.tsx

@@ -3,7 +3,8 @@ import { View, Text, StyleSheet, Pressable } from 'react-native';
 import { Upload, Check, Palette, Trash2 } from 'lucide-react-native';
 import { SettingsSection, SettingItem } from './settings-section';
 import Button from '../Button';
-import { colors, spacing, radius, typography } from '../../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 
 interface Theme {
   id: string | null;
@@ -20,6 +21,8 @@ const BUILT_IN: Theme[] = [
 ];
 
 export function ThemesSettings() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const [themes] = useState<Theme[]>(BUILT_IN);
   const [active, setActive] = useState<string | null>(null);
 
@@ -40,12 +43,12 @@ export function ThemesSettings() {
               style={[styles.card, isActive && styles.cardActive]}
             >
               <View style={styles.preview}>
-                <Palette size={32} color={colors.mutedForeground} style={{ opacity: 0.4 }} />
+                <Palette size={32} color={c.mutedForeground} style={{ opacity: 0.4 }} />
               </View>
               <View style={{ width: '100%' }}>
                 <View style={styles.cardHeader}>
                   <Text style={styles.cardName} numberOfLines={1}>{theme.name}</Text>
-                  {isActive && <Check size={16} color={colors.primary} />}
+                  {isActive && <Check size={16} color={c.primary} />}
                 </View>
                 <Text style={styles.cardAuthor} numberOfLines={1}>{theme.author}</Text>
                 {theme.variants && (
@@ -67,7 +70,7 @@ export function ThemesSettings() {
         label="Upload Theme"
         description="Install a custom theme from a .zip file."
       >
-        <Button variant="outline" size="sm" icon={<Upload size={14} color={colors.text} />}>
+        <Button variant="outline" size="sm" icon={<Upload size={14} color={c.text} />}>
           Upload .zip
         </Button>
       </SettingItem>
@@ -75,7 +78,8 @@ export function ThemesSettings() {
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   grid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -87,19 +91,19 @@ const styles = StyleSheet.create({
     padding: spacing.md,
     borderRadius: radius.lg,
     borderWidth: 2,
-    borderColor: colors.border,
-    backgroundColor: colors.card,
+    borderColor: c.border,
+    backgroundColor: c.card,
     gap: spacing.sm,
   },
   cardActive: {
-    borderColor: colors.primary,
+    borderColor: c.primary,
     backgroundColor: 'rgba(59, 130, 246, 0.05)',
   },
   preview: {
     width: '100%',
     aspectRatio: 16 / 10,
     borderRadius: radius.md,
-    backgroundColor: colors.muted,
+    backgroundColor: c.muted,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -108,14 +112,15 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
   },
-  cardName: { ...typography.bodyMedium, color: colors.text, flex: 1 },
-  cardAuthor: { ...typography.caption, color: colors.mutedForeground },
+  cardName: { ...typography.bodyMedium, color: c.text, flex: 1 },
+  cardAuthor: { ...typography.caption, color: c.mutedForeground },
   variants: { flexDirection: 'row', gap: 4, marginTop: 4 },
   variantPill: {
     paddingHorizontal: 6,
     paddingVertical: 2,
     borderRadius: radius.xs,
-    backgroundColor: colors.muted,
+    backgroundColor: c.muted,
   },
-  variantText: { fontSize: 10, color: colors.mutedForeground },
+  variantText: { fontSize: 10, color: c.mutedForeground },
 });
+}

src/components/settings/UpdatesSettings.tsx

@@ -2,8 +2,10 @@ import React, { useEffect } from 'react';
 import { View, Text, StyleSheet, Linking, Alert } from 'react-native';
 import { SettingsSection, SettingItem, ToggleSwitch } from './settings-section';
 import Button from '../Button';
-import { colors, spacing, radius, typography } from '../../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 import { useUpdatesStore } from '../../stores/updates-store';
+import type { InstallProgress } from '../../lib/install-update';
 
 function formatTime(ts: number): string {
   if (!ts) return 'never';
@@ -11,11 +13,39 @@ function formatTime(ts: number): string {
   return date.toLocaleString();
 }
 
+function formatBytes(n: number): string {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(0)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function formatProgressLabel(p: InstallProgress): string {
+  const pct = p.progress != null ? `${Math.round(p.progress * 100)}%` : null;
+  const written = p.bytesWritten ? formatBytes(p.bytesWritten) : null;
+  const total = p.totalBytes ? formatBytes(p.totalBytes) : null;
+  const sizes = written && total ? `${written} of ${total}` : written ?? '';
+  return [pct, sizes].filter(Boolean).join(' · ') || 'Downloading…';
+}
+
+function installButtonLabel(
+  installing: boolean,
+  progress: InstallProgress | null,
+  apkAsset: unknown,
+): string {
+  if (!installing) return apkAsset ? 'Install' : 'Open release';
+  if (progress?.phase === 'installing') return 'Installing…';
+  if (progress?.progress != null) return `Downloading ${Math.round(progress.progress * 100)}%`;
+  return 'Downloading…';
+}
+
 export function UpdatesSettings() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const hydrated = useUpdatesStore((s) => s.hydrated);
   const hydrate = useUpdatesStore((s) => s.hydrate);
   const checking = useUpdatesStore((s) => s.checking);
   const installing = useUpdatesStore((s) => s.installing);
+  const installProgress = useUpdatesStore((s) => s.installProgress);
   const error = useUpdatesStore((s) => s.error);
   const lastCheckedAt = useUpdatesStore((s) => s.lastCheckedAt);
   const cachedLatest = useUpdatesStore((s) => s.cachedLatest);
@@ -81,7 +111,7 @@ export function UpdatesSettings() {
               onPress={onInstall}
               disabled={installing}
             >
-              {installing ? 'Downloading…' : apkAsset ? 'Install' : 'Open release'}
+              {installButtonLabel(installing, installProgress, apkAsset)}
             </Button>
           ) : (
             <Button
@@ -95,6 +125,29 @@ export function UpdatesSettings() {
           )}
         </SettingItem>
 
+        {installing && installProgress ? (
+          <View style={styles.progressBox}>
+            <View style={styles.progressTrack}>
+              <View
+                style={[
+                  styles.progressFill,
+                  {
+                    width:
+                      installProgress.phase === 'installing'
+                        ? '100%'
+                        : `${Math.round((installProgress.progress ?? 0) * 100)}%`,
+                  },
+                ]}
+              />
+            </View>
+            <Text style={styles.progressLabel}>
+              {installProgress.phase === 'installing'
+                ? 'Opening installer…'
+                : formatProgressLabel(installProgress)}
+            </Text>
+          </View>
+        ) : null}
+
         {cachedLatest?.body ? (
           <View style={styles.notesBox}>
             <Text style={styles.notesTitle}>Release notes</Text>
@@ -108,17 +161,35 @@ export function UpdatesSettings() {
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   container: { gap: spacing.xxxl },
-  value: { ...typography.bodyMedium, color: colors.text },
+  value: { ...typography.bodyMedium, color: c.text },
   notesBox: {
     padding: spacing.md,
     borderRadius: radius.md,
     borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.muted,
+    borderColor: c.border,
+    backgroundColor: c.muted,
     gap: spacing.sm,
   },
-  notesTitle: { ...typography.caption, color: colors.mutedForeground, textTransform: 'uppercase' },
-  notesBody: { ...typography.body, color: colors.text, lineHeight: 20 },
+  notesTitle: { ...typography.caption, color: c.mutedForeground, textTransform: 'uppercase' },
+  notesBody: { ...typography.body, color: c.text, lineHeight: 20 },
+  progressBox: {
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    gap: 6,
+  },
+  progressTrack: {
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: c.muted,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+    backgroundColor: c.primary,
+  },
+  progressLabel: { ...typography.caption, color: c.mutedForeground },
 });
+}

src/components/settings/VacationSettings.tsx

@@ -3,7 +3,8 @@ import { View, Text, StyleSheet, TextInput, Pressable, ActivityIndicator, Alert
 import { AlertTriangle, Eye, EyeOff } from 'lucide-react-native';
 import { SettingsSection, SettingItem, ToggleSwitch } from './settings-section';
 import Button from '../Button';
-import { colors, spacing, radius, typography } from '../../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 import { useVacationStore } from '../../stores/vacation-store';
 
 function toJmapDate(input: string): string | null {
@@ -23,6 +24,8 @@ function fromJmapDate(value: string | null): string {
 }
 
 export function VacationSettings() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const store = useVacationStore();
 
   const [enabled, setEnabled] = useState(store.isEnabled);
@@ -75,7 +78,7 @@ export function VacationSettings() {
   if (store.isLoading && !store.hasLoaded) {
     return (
       <View style={styles.centered}>
-        <ActivityIndicator color={colors.primary} />
+        <ActivityIndicator color={c.primary} />
       </View>
     );
   }
@@ -84,7 +87,7 @@ export function VacationSettings() {
     return (
       <SettingsSection title="Vacation Responder" description="Automatically reply while you are away.">
         <View style={styles.unsupported}>
-          <AlertTriangle size={16} color={colors.warning} />
+          <AlertTriangle size={16} color={c.warning} />
           <Text style={styles.unsupportedText}>
             Your server does not advertise support for the JMAP vacation responder.
           </Text>
@@ -114,7 +117,7 @@ export function VacationSettings() {
             value={fromDate}
             onChangeText={setFromDate}
             placeholder="YYYY-MM-DD HH:MM"
-            placeholderTextColor={colors.mutedForeground}
+            placeholderTextColor={c.mutedForeground}
             style={styles.dateInput}
             autoCapitalize="none"
           />
@@ -124,7 +127,7 @@ export function VacationSettings() {
             value={toDate}
             onChangeText={setToDate}
             placeholder="YYYY-MM-DD HH:MM"
-            placeholderTextColor={colors.mutedForeground}
+            placeholderTextColor={c.mutedForeground}
             style={styles.dateInput}
             autoCapitalize="none"
           />
@@ -137,7 +140,7 @@ export function VacationSettings() {
             value={subject}
             onChangeText={setSubject}
             placeholder="Out of office"
-            placeholderTextColor={colors.mutedForeground}
+            placeholderTextColor={c.mutedForeground}
             style={styles.subjectInput}
           />
         </SettingItem>
@@ -148,7 +151,7 @@ export function VacationSettings() {
             value={body}
             onChangeText={setBody}
             placeholder="I am away from…"
-            placeholderTextColor={colors.mutedForeground}
+            placeholderTextColor={c.mutedForeground}
             style={styles.bodyInput}
             multiline
             numberOfLines={6}
@@ -161,9 +164,9 @@ export function VacationSettings() {
         <SettingsSection title="Preview">
           <Pressable style={styles.previewToggle} onPress={() => setShowPreview((v) => !v)}>
             {showPreview ? (
-              <EyeOff size={14} color={colors.primary} />
+              <EyeOff size={14} color={c.primary} />
             ) : (
-              <Eye size={14} color={colors.primary} />
+              <Eye size={14} color={c.primary} />
             )}
             <Text style={styles.previewToggleText}>
               {showPreview ? 'Hide preview' : 'Show preview'}
@@ -182,7 +185,7 @@ export function VacationSettings() {
         <View style={styles.warnings}>
           {warnings.map((w, i) => (
             <View key={i} style={styles.warnRow}>
-              <AlertTriangle size={14} color={colors.warning} />
+              <AlertTriangle size={14} color={c.warning} />
               <Text style={styles.warnText}>{w}</Text>
             </View>
           ))}
@@ -204,7 +207,8 @@ export function VacationSettings() {
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   container: { gap: spacing.xl },
   centered: { paddingVertical: 40, alignItems: 'center' },
   unsupported: {
@@ -215,7 +219,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(202,138,4,0.12)',
     borderRadius: radius.sm,
   },
-  unsupportedText: { ...typography.body, color: colors.warning, flex: 1 },
+  unsupportedText: { ...typography.body, color: c.warning, flex: 1 },
   statusRow: { flexDirection: 'row', alignItems: 'center', gap: spacing.md },
   pill: {
     paddingHorizontal: 8,
@@ -223,19 +227,19 @@ const styles = StyleSheet.create({
     borderRadius: radius.full,
   },
   pillActive: { backgroundColor: 'rgba(22,163,74,0.2)' },
-  pillInactive: { backgroundColor: colors.muted },
+  pillInactive: { backgroundColor: c.muted },
   pillText: { fontSize: 11, fontWeight: '500' },
   pillTextActive: { color: '#4ade80' },
-  pillTextInactive: { color: colors.mutedForeground },
+  pillTextInactive: { color: c.mutedForeground },
   dateInput: {
     minWidth: 180,
     paddingHorizontal: spacing.md,
     paddingVertical: 6,
     borderRadius: radius.sm,
-    backgroundColor: colors.muted,
+    backgroundColor: c.muted,
     borderWidth: 1,
-    borderColor: colors.border,
-    color: colors.text,
+    borderColor: c.border,
+    color: c.text,
     ...typography.body,
   },
   subjectInput: {
@@ -243,47 +247,48 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.md,
     paddingVertical: 6,
     borderRadius: radius.sm,
-    backgroundColor: colors.muted,
+    backgroundColor: c.muted,
     borderWidth: 1,
-    borderColor: colors.border,
-    color: colors.text,
+    borderColor: c.border,
+    color: c.text,
     ...typography.body,
   },
   bodyBlock: { paddingVertical: spacing.md },
-  bodyLabel: { ...typography.bodyMedium, color: colors.text },
-  bodyDesc: { ...typography.caption, color: colors.mutedForeground, marginTop: 2, marginBottom: spacing.sm },
+  bodyLabel: { ...typography.bodyMedium, color: c.text },
+  bodyDesc: { ...typography.caption, color: c.mutedForeground, marginTop: 2, marginBottom: spacing.sm },
   bodyInput: {
     width: '100%',
     minHeight: 96,
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.sm,
     borderRadius: radius.sm,
-    backgroundColor: colors.muted,
+    backgroundColor: c.muted,
     borderWidth: 1,
-    borderColor: colors.border,
-    color: colors.text,
+    borderColor: c.border,
+    color: c.text,
     ...typography.body,
   },
   previewToggle: { flexDirection: 'row', alignItems: 'center', gap: 6 },
-  previewToggleText: { ...typography.body, color: colors.primary },
+  previewToggleText: { ...typography.body, color: c.primary },
   previewBox: {
     marginTop: spacing.sm,
     padding: spacing.lg,
     borderRadius: radius.sm,
     borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.background,
+    borderColor: c.border,
+    backgroundColor: c.background,
   },
-  previewSubject: { ...typography.bodyMedium, color: colors.text, marginBottom: spacing.sm },
-  previewBody: { ...typography.body, color: colors.mutedForeground },
+  previewSubject: { ...typography.bodyMedium, color: c.text, marginBottom: spacing.sm },
+  previewBody: { ...typography.body, color: c.mutedForeground },
   warnings: { gap: spacing.sm },
   warnRow: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
-  warnText: { ...typography.body, color: colors.warning, flex: 1 },
+  warnText: { ...typography.body, color: c.warning, flex: 1 },
   errorBox: {
     padding: spacing.md,
     borderRadius: radius.sm,
-    backgroundColor: colors.errorBg,
+    backgroundColor: c.errorBg,
   },
-  errorText: { ...typography.body, color: colors.error },
+  errorText: { ...typography.body, color: c.error },
   saveRow: { alignItems: 'flex-end' },
 });
+}

src/components/settings/settings-section.tsx

@@ -9,7 +9,8 @@ import {
   ViewStyle,
 } from 'react-native';
 import { FlaskConical, Lock, ChevronDown, Check } from 'lucide-react-native';
-import { colors, spacing, radius, typography } from '../../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
 import ToggleSwitchComponent from '../ToggleSwitch';
 
 /**
@@ -36,6 +37,8 @@ export function SettingsSection({
   experimental,
   experimentalDescription,
 }: SettingsSectionProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <View style={styles.section}>
       {experimental && (
@@ -73,12 +76,14 @@ export function SettingItem({
   locked,
   noBorder,
 }: SettingItemProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <View style={[styles.settingItem, !noBorder && styles.settingItemBorder, locked && styles.locked]}>
       <View style={styles.settingContent}>
         <View style={styles.settingLabelRow}>
           <Text style={styles.settingLabel}>{label}</Text>
-          {locked && <Lock size={12} color={colors.mutedForeground} />}
+          {locked && <Lock size={12} color={c.mutedForeground} />}
         </View>
         {description && <Text style={styles.settingDescription}>{description}</Text>}
       </View>
@@ -111,6 +116,8 @@ interface RadioGroupProps {
 }
 
 export function RadioGroup({ value, onChange, options, style }: RadioGroupProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <View style={[styles.radioGroup, style]}>
       {options.map((opt) => {
@@ -145,6 +152,8 @@ interface SelectProps {
 }
 
 export function Select({ value, onChange, options, style }: SelectProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const [open, setOpen] = useState(false);
   const current = options.find((o) => o.value === value);
 
@@ -152,7 +161,7 @@ export function Select({ value, onChange, options, style }: SelectProps) {
     <>
       <Pressable style={[styles.select, style]} onPress={() => setOpen(true)}>
         <Text style={styles.selectText}>{current?.label ?? ''}</Text>
-        <ChevronDown size={14} color={colors.mutedForeground} />
+        <ChevronDown size={14} color={c.mutedForeground} />
       </Pressable>
       <Modal
         visible={open}
@@ -178,7 +187,7 @@ export function Select({ value, onChange, options, style }: SelectProps) {
                     }}
                   >
                     <Text style={styles.selectItemText}>{opt.label}</Text>
-                    {selected && <Check size={16} color={colors.primary} />}
+                    {selected && <Check size={16} color={c.primary} />}
                   </Pressable>
                 );
               })}
@@ -190,7 +199,8 @@ export function Select({ value, onChange, options, style }: SelectProps) {
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   section: {
     gap: spacing.lg,
   },
@@ -199,11 +209,11 @@ const styles = StyleSheet.create({
   },
   sectionTitle: {
     ...typography.h3,
-    color: colors.text,
+    color: c.text,
   },
   sectionDescription: {
     ...typography.body,
-    color: colors.mutedForeground,
+    color: c.mutedForeground,
     marginTop: 4,
   },
   experimentalBanner: {
@@ -233,7 +243,7 @@ const styles = StyleSheet.create({
   },
   settingItemBorder: {
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
   },
   locked: {
     opacity: 0.6,
@@ -249,11 +259,11 @@ const styles = StyleSheet.create({
   },
   settingLabel: {
     ...typography.bodyMedium,
-    color: colors.text,
+    color: c.text,
   },
   settingDescription: {
     ...typography.caption,
-    color: colors.mutedForeground,
+    color: c.mutedForeground,
     marginTop: 2,
   },
   settingRight: {
@@ -270,20 +280,20 @@ const styles = StyleSheet.create({
     borderRadius: radius.sm,
   },
   radioSelected: {
-    backgroundColor: colors.primary,
+    backgroundColor: c.primary,
   },
   radioUnselected: {
-    backgroundColor: colors.muted,
+    backgroundColor: c.muted,
   },
   radioText: {
     ...typography.caption,
   },
   radioTextSelected: {
-    color: colors.primaryForeground,
+    color: c.primaryForeground,
     fontWeight: '500',
   },
   radioTextUnselected: {
-    color: colors.text,
+    color: c.text,
   },
   select: {
     flexDirection: 'row',
@@ -292,14 +302,14 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.md,
     paddingVertical: 6,
     borderRadius: radius.sm,
-    backgroundColor: colors.muted,
+    backgroundColor: c.muted,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     minWidth: 120,
   },
   selectText: {
     ...typography.body,
-    color: colors.text,
+    color: c.text,
     flex: 1,
   },
   modalBackdrop: {
@@ -313,10 +323,10 @@ const styles = StyleSheet.create({
     width: '100%',
     maxWidth: 320,
     maxHeight: '70%',
-    backgroundColor: colors.popover,
+    backgroundColor: c.popover,
     borderRadius: radius.md,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     paddingVertical: spacing.sm,
   },
   selectItem: {
@@ -327,10 +337,11 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.md,
   },
   selectItemPressed: {
-    backgroundColor: colors.accent,
+    backgroundColor: c.accent,
   },
   selectItemText: {
     ...typography.body,
-    color: colors.text,
+    color: c.text,
   },
-});
+  });
+}

src/i18n/index.ts

@@ -0,0 +1,71 @@
+// Minimal i18n: lookup keys like `settings.tabs.account` against a flat
+// dictionary loaded from ./locales/<lang>/common.json. Picks language from
+// the user override (locale-store) → device locale → English fallback.
+import { getLocales } from 'expo-localization';
+import en from '../../locales/en/common.json';
+import de from '../../locales/de/common.json';
+import cs from '../../locales/cs/common.json';
+import es from '../../locales/es/common.json';
+import fr from '../../locales/fr/common.json';
+import it from '../../locales/it/common.json';
+import ja from '../../locales/ja/common.json';
+import ko from '../../locales/ko/common.json';
+import lv from '../../locales/lv/common.json';
+import nl from '../../locales/nl/common.json';
+import pl from '../../locales/pl/common.json';
+import pt from '../../locales/pt/common.json';
+import ru from '../../locales/ru/common.json';
+import uk from '../../locales/uk/common.json';
+import zh from '../../locales/zh/common.json';
+
+export const SUPPORTED_LOCALES = [
+  { code: 'en', label: 'English' },
+  { code: 'cs', label: 'Čeština' },
+  { code: 'de', label: 'Deutsch' },
+  { code: 'es', label: 'Español' },
+  { code: 'fr', label: 'Français' },
+  { code: 'it', label: 'Italiano' },
+  { code: 'nl', label: 'Nederlands' },
+  { code: 'pl', label: 'Polski' },
+  { code: 'pt', label: 'Português' },
+  { code: 'ru', label: 'Русский' },
+  { code: 'uk', label: 'Українська' },
+  { code: 'ja', label: '日本語' },
+  { code: 'ko', label: '한국어' },
+  { code: 'zh', label: '中文' },
+  { code: 'lv', label: 'Latviešu' },
+] as const;
+
+export type LocaleCode = typeof SUPPORTED_LOCALES[number]['code'];
+
+const dictionaries: Record<LocaleCode, Record<string, unknown>> = {
+  en, cs, de, es, fr, it, nl, pl, pt, ru, uk, ja, ko, zh, lv,
+};
+
+export function detectDeviceLocale(): LocaleCode {
+  const codes = SUPPORTED_LOCALES.map((l) => l.code) as readonly string[];
+  for (const l of getLocales()) {
+    const lang = l.languageCode?.toLowerCase();
+    if (lang && codes.includes(lang)) return lang as LocaleCode;
+  }
+  return 'en';
+}
+
+function lookup(dict: Record<string, unknown>, key: string): string | undefined {
+  let current: unknown = dict;
+  for (const part of key.split('.')) {
+    if (current && typeof current === 'object' && part in (current as Record<string, unknown>)) {
+      current = (current as Record<string, unknown>)[part];
+    } else {
+      return undefined;
+    }
+  }
+  return typeof current === 'string' ? current : undefined;
+}
+
+export function translate(locale: LocaleCode, key: string, fallback?: string): string {
+  return lookup(dictionaries[locale], key)
+    ?? lookup(dictionaries.en, key)
+    ?? fallback
+    ?? key;
+}

src/lib/calendar-utils.ts

@@ -117,9 +117,29 @@ export function buildEventDayIndex(events: CalendarEvent[]): EventDayIndex {
       safety++;
     }
   }
+  // Sort each day's bucket: all-day events first, then timed events by start.
+  // Without this, events from different calendars come out in arrival order
+  // (roughly grouped by calendar) rather than chronologically.
+  for (const arr of idx.values()) {
+    arr.sort(compareEventsForDay);
+  }
   return idx;
 }
 
+function compareEventsForDay(a: CalendarEvent, b: CalendarEvent): number {
+  const aAllDay = !!a.showWithoutTime;
+  const bAllDay = !!b.showWithoutTime;
+  if (aAllDay !== bAllDay) return aAllDay ? -1 : 1;
+  const aStart = getEventStartDate(a).getTime();
+  const bStart = getEventStartDate(b).getTime();
+  if (aStart !== bStart) return aStart - bStart;
+  // Tie-breaker on end (shorter events first), then title for stability.
+  const aEnd = getEventEndDate(a).getTime();
+  const bEnd = getEventEndDate(b).getTime();
+  if (aEnd !== bEnd) return aEnd - bEnd;
+  return (a.title ?? '').localeCompare(b.title ?? '');
+}
+
 export function eventsOnDayFromIndex(
   index: EventDayIndex,
   day: Date,

src/lib/email-export.ts

@@ -0,0 +1,41 @@
+import { File, Paths } from 'expo-file-system';
+import * as Sharing from 'expo-sharing';
+import { jmapClient } from '../api/jmap-client';
+import { getDownloadUrl } from '../api/blob';
+
+const RFC822 = 'message/rfc822';
+
+function authHeader(): string {
+  const h = (jmapClient as { authHeader?: string }).authHeader;
+  if (!h) throw new Error('Not connected');
+  return h;
+}
+
+export async function fetchRawEmail(blobId: string): Promise<string> {
+  const url = getDownloadUrl(blobId, 'email.eml', RFC822);
+  const r = await fetch(url, { headers: { Authorization: authHeader() } });
+  if (!r.ok) throw new Error(`Download failed: ${r.status}`);
+  return r.text();
+}
+
+function safeFilename(subject: string | undefined): string {
+  const base = (subject ?? 'email').replace(/[^\w\s-]/g, '').trim().slice(0, 60) || 'email';
+  return `${base}.eml`;
+}
+
+export async function shareEmailEml(blobId: string, subject?: string): Promise<void> {
+  const dest = new File(Paths.cache, safeFilename(subject));
+  if (dest.exists) dest.delete();
+  const url = getDownloadUrl(blobId, dest.name, RFC822);
+  const downloaded = await File.downloadFileAsync(url, dest, {
+    headers: { Authorization: authHeader() },
+  });
+  if (!(await Sharing.isAvailableAsync())) {
+    throw new Error('Sharing is not available on this device');
+  }
+  await Sharing.shareAsync(downloaded.uri, {
+    mimeType: RFC822,
+    dialogTitle: 'Share email',
+    UTI: 'public.email-message',
+  });
+}

src/lib/install-update.ts

@@ -7,16 +7,55 @@ import type { ReleaseAsset } from '../api/updates';
 const FLAG_GRANT_READ_URI_PERMISSION = 0x00000001;
 const FLAG_ACTIVITY_NEW_TASK = 0x10000000;
 
-export async function downloadAndInstallApk(asset: ReleaseAsset): Promise<void> {
+export interface InstallProgress {
+  phase: 'downloading' | 'installing';
+  /** 0-1 during download; undefined for installing phase */
+  progress?: number;
+  /** Bytes received during current download */
+  bytesWritten?: number;
+  /** Total bytes for the download (best-effort, may be 0 if server omits Content-Length) */
+  totalBytes?: number;
+}
+
+export type InstallProgressListener = (p: InstallProgress) => void;
+
+export async function downloadAndInstallApk(
+  asset: ReleaseAsset,
+  onProgress?: InstallProgressListener,
+): Promise<void> {
   if (Platform.OS !== 'android') {
     throw new Error('APK install is only supported on Android');
   }
 
   const dest = new File(Paths.cache, asset.name);
   if (dest.exists) dest.delete();
-  const downloaded = await File.downloadFileAsync(asset.browser_download_url, dest);
 
-  const contentUri = await FileSystemLegacy.getContentUriAsync(downloaded.uri);
+  onProgress?.({ phase: 'downloading', progress: 0 });
+
+  const download = FileSystemLegacy.createDownloadResumable(
+    asset.browser_download_url,
+    dest.uri,
+    {},
+    (state) => {
+      const total = state.totalBytesExpectedToWrite ?? 0;
+      const progress = total > 0 ? state.totalBytesWritten / total : undefined;
+      onProgress?.({
+        phase: 'downloading',
+        progress,
+        bytesWritten: state.totalBytesWritten,
+        totalBytes: total,
+      });
+    },
+  );
+
+  const result = await download.downloadAsync();
+  if (!result?.uri) {
+    throw new Error('APK download failed');
+  }
+
+  onProgress?.({ phase: 'installing' });
+
+  const contentUri = await FileSystemLegacy.getContentUriAsync(result.uri);
 
   await IntentLauncher.startActivityAsync('android.intent.action.VIEW', {
     data: contentUri,
@@ -24,3 +63,16 @@ export async function downloadAndInstallApk(asset: ReleaseAsset): Promise<void>
     flags: FLAG_GRANT_READ_URI_PERMISSION | FLAG_ACTIVITY_NEW_TASK,
   });
 }
+
+/**
+ * Open the system "Install unknown apps" settings page for this app, so the
+ * user can grant permission to install APKs from the package installer.
+ * Useful as a fallback if the install intent never reaches the installer.
+ */
+export async function openInstallUnknownAppsSettings(): Promise<void> {
+  if (Platform.OS !== 'android') return;
+  await IntentLauncher.startActivityAsync(
+    'android.settings.MANAGE_UNKNOWN_APP_SOURCES',
+    { data: 'package:com.anonymous.bulwarkmobile' },
+  );
+}

src/lib/use-sheet-drag.ts

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Animated, PanResponder } from 'react-native';
+
+interface Options {
+  /** Animated value driving the sheet's translateY. Resting (open) position is 0. */
+  slideY: Animated.Value;
+  /** Off-screen target the sheet animates to when dismissed. */
+  closedY: number;
+  /** Called when the gesture commits a dismissal. */
+  onClose: () => void;
+  /** Pixels of downward drag needed to commit a dismiss on release. */
+  closeDistance?: number;
+  /** Downward velocity (px/ms) that commits a dismiss regardless of distance. */
+  closeVelocity?: number;
+}
+
+/**
+ * Wires drag-to-dismiss on a bottom sheet's grab handle. Spread the returned
+ * panHandlers on the handle/header area — not the scrollable body — so vertical
+ * scrolling inside the sheet is not intercepted.
+ */
+export function useSheetDrag({
+  slideY,
+  closedY,
+  onClose,
+  closeDistance = 100,
+  closeVelocity = 0.6,
+}: Options) {
+  const startRef = React.useRef(0);
+
+  const panResponder = React.useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: (_, g) =>
+          Math.abs(g.dy) > 4 && Math.abs(g.dy) > Math.abs(g.dx),
+        onPanResponderGrant: () => {
+          slideY.stopAnimation((v) => {
+            startRef.current = v;
+          });
+        },
+        onPanResponderMove: (_, g) => {
+          const next = startRef.current + Math.max(0, g.dy);
+          slideY.setValue(next);
+        },
+        onPanResponderRelease: (_, g) => {
+          const traveled = startRef.current + Math.max(0, g.dy);
+          if (traveled > closeDistance || g.vy > closeVelocity) {
+            Animated.timing(slideY, {
+              toValue: closedY,
+              duration: 180,
+              useNativeDriver: true,
+            }).start(({ finished }) => {
+              if (finished) onClose();
+            });
+          } else {
+            Animated.spring(slideY, {
+              toValue: 0,
+              useNativeDriver: true,
+              bounciness: 0,
+            }).start();
+          }
+        },
+        onPanResponderTerminate: () => {
+          Animated.spring(slideY, {
+            toValue: 0,
+            useNativeDriver: true,
+            bounciness: 0,
+          }).start();
+        },
+      }),
+    [slideY, closedY, onClose, closeDistance, closeVelocity],
+  );
+
+  return panResponder.panHandlers;
+}

src/navigation/types.ts

@@ -3,6 +3,7 @@ import type { EmailAddress } from '../api/types';
 export type RootStackParamList = {
   MainTabs: undefined;
   EmailThread: { emailId: string; threadId: string; subject?: string };
+  EmailSource: { emailId: string; blobId: string; subject?: string };
   Compose:
     | {
         mode?: 'reply' | 'replyAll' | 'forward';

src/screens/CalendarScreen.tsx

@@ -1,165 +1,553 @@
 import React from 'react';
-import { View, Text, StyleSheet, ScrollView, Pressable } from 'react-native';
-import { CalendarDays, ChevronLeft, ChevronRight } from 'lucide-react-native';
-import { format, startOfMonth, endOfMonth, startOfWeek, endOfWeek, addDays, isSameMonth, isToday, addMonths, subMonths } from 'date-fns';
-import { colors } from '../theme/colors';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Pressable,
+  ActivityIndicator,
+  ScrollView,
+  RefreshControl,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import {
+  ChevronLeft,
+  ChevronRight,
+  Plus,
+  CalendarDays,
+  LayoutGrid,
+  List as ListIcon,
+  Menu,
+} from 'lucide-react-native';
+import {
+  format,
+  startOfMonth,
+  endOfMonth,
+  startOfWeek,
+  endOfWeek,
+  addDays,
+  isToday,
+  addMonths,
+  subMonths,
+  addWeeks,
+  subWeeks,
+} from 'date-fns';
+import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
+import { Button } from '../components';
+import { useCalendarStore } from '../stores/calendar-store';
+import { MonthView } from '../components/calendar/MonthView';
+import { WeekView } from '../components/calendar/WeekView';
+import { AgendaView } from '../components/calendar/AgendaView';
+import { EventCard } from '../components/calendar/EventCard';
+import { EventDetailSheet } from '../components/calendar/EventDetailSheet';
+import { EventModal } from '../components/calendar/EventModal';
+import {
+  RecurrenceScopeDialog,
+  type RecurrenceEditScope,
+} from '../components/calendar/RecurrenceScopeDialog';
+import { CalendarSidebarDrawer } from '../components/calendar/CalendarSidebarDrawer';
+import {
+  buildEventDayIndex,
+  eventsOnDayFromIndex,
+  type EventDayIndex,
+} from '../lib/calendar-utils';
+import type { Calendar, CalendarEvent } from '../api/types';
 
-const MOCK_EVENTS = [
-  { id: '1', title: 'Team Standup', time: '09:00', color: '#3b82f6' },
-  { id: '2', title: 'Design Review', time: '11:00', color: '#8b5cf6' },
-  { id: '3', title: 'Lunch with Sarah', time: '12:30', color: '#22c55e' },
-  { id: '4', title: 'Sprint Planning', time: '14:00', color: '#f59e0b' },
-];
+type ViewMode = 'month' | 'week' | 'agenda';
+type PendingAction =
+  | { kind: 'edit'; event: CalendarEvent }
+  | { kind: 'delete'; event: CalendarEvent }
+  | null;
 
-const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const AGENDA_DAYS = 30;
+const RANGE_BUFFER_DAYS = 14;
 
-function MonthGrid({ currentDate }: { currentDate: Date }) {
-  const monthStart = startOfMonth(currentDate);
-  const monthEnd = endOfMonth(currentDate);
-  const calStart = startOfWeek(monthStart);
-  const calEnd = endOfWeek(monthEnd);
-
-  const days: Date[] = [];
-  let day = calStart;
-  while (day <= calEnd) {
-    days.push(day);
-    day = addDays(day, 1);
+function rangeForView(viewMode: ViewMode, currentDate: Date): { after: Date; before: Date } {
+  if (viewMode === 'month') {
+    const start = startOfWeek(startOfMonth(currentDate));
+    const end = endOfWeek(endOfMonth(currentDate));
+    return { after: addDays(start, -RANGE_BUFFER_DAYS), before: addDays(end, RANGE_BUFFER_DAYS) };
   }
+  if (viewMode === 'week') {
+    const start = startOfWeek(currentDate);
+    const end = endOfWeek(currentDate);
+    return { after: addDays(start, -RANGE_BUFFER_DAYS), before: addDays(end, RANGE_BUFFER_DAYS) };
+  }
+  return {
+    after: addDays(currentDate, -1),
+    before: addDays(currentDate, AGENDA_DAYS + RANGE_BUFFER_DAYS),
+  };
+}
 
-  return (
-    <View>
-      <View style={styles.weekdayRow}>
-        {WEEKDAYS.map((wd) => (
-          <Text key={wd} style={styles.weekdayLabel}>{wd}</Text>
-        ))}
-      </View>
-      <View style={styles.daysGrid}>
-        {days.map((d, i) => {
-          const sameMonth = isSameMonth(d, currentDate);
-          const today = isToday(d);
-          return (
-            <View key={i} style={styles.dayCell}>
-              <View style={[styles.dayNumber, today && styles.todayCircle]}>
-                <Text style={[
-                  styles.dayText,
-                  !sameMonth && styles.dayTextMuted,
-                  today && styles.todayText,
-                ]}>
-                  {format(d, 'd')}
-                </Text>
-              </View>
-            </View>
-          );
-        })}
-      </View>
-    </View>
-  );
+function headerTitle(viewMode: ViewMode, currentDate: Date): string {
+  if (viewMode === 'month') return format(currentDate, 'MMMM yyyy');
+  if (viewMode === 'week') {
+    const start = startOfWeek(currentDate);
+    const end = endOfWeek(currentDate);
+    if (start.getMonth() === end.getMonth()) {
+      return `${format(start, 'MMM d')} – ${format(end, 'd, yyyy')}`;
+    }
+    return `${format(start, 'MMM d')} – ${format(end, 'MMM d, yyyy')}`;
+  }
+  return format(currentDate, 'MMMM yyyy');
 }
 
 export default function CalendarScreen() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const [currentDate, setCurrentDate] = React.useState(new Date());
+  const [selectedDate, setSelectedDate] = React.useState(new Date());
+  const [viewMode, setViewMode] = React.useState<ViewMode>('month');
+
+  const [detailEvent, setDetailEvent] = React.useState<CalendarEvent | null>(null);
+  const [modalEvent, setModalEvent] = React.useState<CalendarEvent | null>(null);
+  const [modalDate, setModalDate] = React.useState<Date | undefined>(undefined);
+  const [modalVisible, setModalVisible] = React.useState(false);
+  const [pendingAction, setPendingAction] = React.useState<PendingAction>(null);
+  const [sidebarVisible, setSidebarVisible] = React.useState(false);
+  const [refreshing, setRefreshing] = React.useState(false);
+
+  const hydrate = useCalendarStore((s) => s.hydrate);
+  const fetchCalendarsAction = useCalendarStore((s) => s.fetchCalendars);
+  const ensureRange = useCalendarStore((s) => s.ensureRange);
+  const refresh = useCalendarStore((s) => s.refresh);
+  const createEvent = useCalendarStore((s) => s.createEvent);
+  const updateEvent = useCalendarStore((s) => s.updateEvent);
+  const deleteEvent = useCalendarStore((s) => s.deleteEvent);
+  const toggleCalendarVisibility = useCalendarStore((s) => s.toggleCalendarVisibility);
+  const allCalendars = useCalendarStore((s) => s.calendars);
+  const hiddenCalendarIds = useCalendarStore((s) => s.hiddenCalendarIds);
+  const loading = useCalendarStore((s) => s.loading);
+  const error = useCalendarStore((s) => s.error);
+  const allEvents = useCalendarStore((s) => s.events);
+
+  const calendars = React.useMemo(
+    () => allCalendars.filter((c) => !hiddenCalendarIds.includes(c.id)),
+    [allCalendars, hiddenCalendarIds],
+  );
+  const events = React.useMemo(() => {
+    if (hiddenCalendarIds.length === 0) return allEvents;
+    const hidden = new Set(hiddenCalendarIds);
+    return allEvents.filter((e) => {
+      const ids = Object.keys(e.calendarIds || {});
+      if (ids.length === 0) return true;
+      return ids.some((id) => !hidden.has(id));
+    });
+  }, [allEvents, hiddenCalendarIds]);
+  // Pre-index events by day once. Child views do O(1) map lookups per cell
+  // instead of re-filtering the full event list with parseISO per day.
+  const eventsByDay = React.useMemo(() => buildEventDayIndex(events), [events]);
+
+  React.useEffect(() => {
+    void hydrate();
+    void fetchCalendarsAction();
+  }, [hydrate, fetchCalendarsAction]);
+
+  React.useEffect(() => {
+    const { after, before } = rangeForView(viewMode, currentDate);
+    void ensureRange(after.toISOString(), before.toISOString());
+  }, [viewMode, currentDate, ensureRange]);
+
+  const goPrev = React.useCallback(() => {
+    setCurrentDate((d) => {
+      if (viewMode === 'month') return subMonths(d, 1);
+      if (viewMode === 'week') return subWeeks(d, 1);
+      return addDays(d, -AGENDA_DAYS);
+    });
+  }, [viewMode]);
+
+  const goNext = React.useCallback(() => {
+    setCurrentDate((d) => {
+      if (viewMode === 'month') return addMonths(d, 1);
+      if (viewMode === 'week') return addWeeks(d, 1);
+      return addDays(d, AGENDA_DAYS);
+    });
+  }, [viewMode]);
+
+  const goToday = React.useCallback(() => {
+    const today = new Date();
+    setCurrentDate(today);
+    setSelectedDate(today);
+  }, []);
+
+  const handleSelectDate = React.useCallback(
+    (date: Date) => {
+      setSelectedDate(date);
+      if (viewMode === 'week') setCurrentDate(date);
+    },
+    [viewMode],
+  );
+
+  const openCreate = React.useCallback((date?: Date) => {
+    setModalEvent(null);
+    setModalDate(date);
+    setModalVisible(true);
+  }, []);
+
+  const openEditDirect = React.useCallback((event: CalendarEvent) => {
+    setModalEvent(event);
+    setModalDate(undefined);
+    setModalVisible(true);
+  }, []);
+
+  const handleEditFromDetail = React.useCallback((event: CalendarEvent) => {
+    setDetailEvent(null);
+    if (event.recurrenceRules?.length || event.originalId) {
+      setPendingAction({ kind: 'edit', event });
+    } else {
+      openEditDirect(event);
+    }
+  }, [openEditDirect]);
+
+  const handleDeleteFromDetail = React.useCallback((event: CalendarEvent) => {
+    setDetailEvent(null);
+    if (event.recurrenceRules?.length || event.originalId) {
+      setPendingAction({ kind: 'delete', event });
+    } else {
+      void deleteEvent(event.id);
+    }
+  }, [deleteEvent]);
+
+  const handleScopeSelect = React.useCallback(
+    async (scope: RecurrenceEditScope) => {
+      const action = pendingAction;
+      setPendingAction(null);
+      if (!action) return;
+      // For the first pass, treat all scopes as "all" - proper override
+      // handling lives in the store's update/delete path against originalId.
+      // TODO: implement "this only" via recurrenceOverrides write, and
+      // "this and following" via excludedRecurrenceRules + new master.
+      if (action.kind === 'edit') {
+        openEditDirect(action.event);
+      } else {
+        await deleteEvent(action.event.id);
+      }
+    },
+    [pendingAction, openEditDirect, deleteEvent],
+  );
+
+  const handleSave = React.useCallback(
+    async (data: Partial<CalendarEvent>, calendarId: string) => {
+      if (modalEvent) {
+        await updateEvent(modalEvent.id, data);
+      } else {
+        await createEvent(data, calendarId);
+      }
+    },
+    [modalEvent, createEvent, updateEvent],
+  );
+
+  const handleDeleteFromModal = React.useCallback(
+    async (event: CalendarEvent) => {
+      setModalVisible(false);
+      await deleteEvent(event.id);
+    },
+    [deleteEvent],
+  );
+
+  const onRefresh = React.useCallback(async () => {
+    setRefreshing(true);
+    try {
+      await refresh();
+    } finally {
+      setRefreshing(false);
+    }
+  }, [refresh]);
+
+  const isSelectedToday = isToday(selectedDate);
 
   return (
-    <ScrollView style={styles.container}>
+    <SafeAreaView style={styles.container} edges={['top']}>
       <View style={styles.header}>
-        <CalendarDays size={24} color={colors.primary} />
-        <Text style={styles.headerTitle}>Calendar</Text>
-      </View>
-
-      <View style={styles.monthNav}>
-        <Pressable onPress={() => setCurrentDate(subMonths(currentDate, 1))} style={styles.navBtn}>
-          <ChevronLeft size={20} color={colors.text} />
+        <Pressable
+          onPress={() => setSidebarVisible(true)}
+          hitSlop={8}
+          style={styles.headerBtn}
+        >
+          <Menu size={20} color={c.text} />
         </Pressable>
-        <Text style={styles.monthLabel}>{format(currentDate, 'MMMM yyyy')}</Text>
-        <Pressable onPress={() => setCurrentDate(addMonths(currentDate, 1))} style={styles.navBtn}>
-          <ChevronRight size={20} color={colors.text} />
-        </Pressable>
-      </View>
-
-      <MonthGrid currentDate={currentDate} />
-
-      <View style={styles.todaySection}>
-        <Text style={styles.todaySectionTitle}>Today's Events</Text>
-        {MOCK_EVENTS.map((event) => (
-          <Pressable key={event.id} style={styles.eventCard}>
-            <View style={[styles.eventDot, { backgroundColor: event.color }]} />
-            <View style={styles.eventContent}>
-              <Text style={styles.eventTitle}>{event.title}</Text>
-              <Text style={styles.eventTime}>{event.time}</Text>
-            </View>
+        <View style={styles.headerLeft}>
+          <Text style={styles.headerTitle}>{headerTitle(viewMode, currentDate)}</Text>
+          <Text style={styles.headerSubtitle}>
+            {isSelectedToday ? 'Today' : format(selectedDate, 'EEE, MMM d')}
+          </Text>
+        </View>
+        <View style={styles.headerActions}>
+          <View style={styles.viewToggle}>
+            {(['month', 'week', 'agenda'] as ViewMode[]).map((mode) => {
+              const Icon =
+                mode === 'month' ? LayoutGrid : mode === 'week' ? CalendarDays : ListIcon;
+              const active = viewMode === mode;
+              return (
+                <Pressable
+                  key={mode}
+                  style={[styles.viewToggleBtn, active && styles.viewToggleBtnActive]}
+                  onPress={() => setViewMode(mode)}
+                >
+                  <Icon size={16} color={active ? c.primary : c.textMuted} />
+                </Pressable>
+              );
+            })}
+          </View>
+          <Pressable style={styles.fab} onPress={() => openCreate(selectedDate)}>
+            <Plus size={18} color={c.primaryForeground} />
           </Pressable>
-        ))}
+        </View>
       </View>
+
+      <View style={styles.nav}>
+        <Pressable onPress={goPrev} style={styles.navBtn} hitSlop={8}>
+          <ChevronLeft size={20} color={c.text} />
+        </Pressable>
+        <Button variant="outline" size="sm" onPress={goToday}>
+          Today
+        </Button>
+        <Pressable onPress={goNext} style={styles.navBtn} hitSlop={8}>
+          <ChevronRight size={20} color={c.text} />
+        </Pressable>
+      </View>
+
+      {error && (
+        <View style={styles.errorBanner}>
+          <Text style={styles.errorText}>{error}</Text>
+        </View>
+      )}
+
+      <View style={styles.content}>
+        {viewMode === 'month' && (
+          <MonthView
+            currentDate={currentDate}
+            selectedDate={selectedDate}
+            events={events}
+            eventsByDay={eventsByDay}
+            calendars={calendars}
+            onSelectDate={handleSelectDate}
+            onLongPressDate={openCreate}
+          />
+        )}
+        {viewMode === 'week' && (
+          <WeekView
+            selectedDate={selectedDate}
+            events={events}
+            eventsByDay={eventsByDay}
+            calendars={calendars}
+            onSelectDate={handleSelectDate}
+            onSelectEvent={setDetailEvent}
+            onCreateAtTime={openCreate}
+          />
+        )}
+        {viewMode === 'agenda' && (
+          <AgendaView
+            fromDate={currentDate}
+            daysAhead={AGENDA_DAYS}
+            events={events}
+            eventsByDay={eventsByDay}
+            calendars={calendars}
+            onSelectEvent={setDetailEvent}
+          />
+        )}
+
+        {viewMode === 'month' && (
+          <View style={styles.dayDetail}>
+            <View style={styles.dayDetailHeader}>
+              <Text style={styles.dayDetailTitle}>
+                {isSelectedToday ? "Today's Events" : format(selectedDate, 'EEEE, MMMM d')}
+              </Text>
+              {loading && <ActivityIndicator size="small" color={c.textMuted} />}
+            </View>
+            <DayEventList
+              date={selectedDate}
+              eventsByDay={eventsByDay}
+              calendars={calendars}
+              onSelectEvent={setDetailEvent}
+              refreshing={refreshing}
+              onRefresh={onRefresh}
+            />
+          </View>
+        )}
+      </View>
+
+      <EventDetailSheet
+        event={detailEvent}
+        calendars={calendars}
+        onClose={() => setDetailEvent(null)}
+        onEdit={handleEditFromDetail}
+        onDelete={handleDeleteFromDetail}
+      />
+
+      <EventModal
+        visible={modalVisible}
+        event={modalEvent}
+        calendars={allCalendars}
+        defaultDate={modalDate}
+        onSave={handleSave}
+        onDelete={handleDeleteFromModal}
+        onClose={() => setModalVisible(false)}
+      />
+
+      <RecurrenceScopeDialog
+        visible={!!pendingAction}
+        actionType={pendingAction?.kind === 'delete' ? 'delete' : 'edit'}
+        onSelect={handleScopeSelect}
+        onClose={() => setPendingAction(null)}
+      />
+
+      <CalendarSidebarDrawer
+        visible={sidebarVisible}
+        calendars={allCalendars}
+        hiddenCalendarIds={hiddenCalendarIds}
+        onToggle={toggleCalendarVisibility}
+        onClose={() => setSidebarVisible(false)}
+      />
+    </SafeAreaView>
+  );
+}
+
+function DayEventList({
+  date,
+  eventsByDay,
+  calendars,
+  onSelectEvent,
+  refreshing,
+  onRefresh,
+}: {
+  date: Date;
+  eventsByDay: EventDayIndex;
+  calendars: Calendar[];
+  onSelectEvent?: (event: CalendarEvent) => void;
+  refreshing: boolean;
+  onRefresh: () => void;
+}) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  const dayEvents = React.useMemo(
+    () => eventsOnDayFromIndex(eventsByDay, date),
+    [eventsByDay, date],
+  );
+  if (dayEvents.length === 0) {
+    return (
+      <ScrollView
+        contentContainerStyle={styles.emptyState}
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={c.textMuted} />
+        }
+      >
+        <CalendarDays size={32} color={c.surfaceActive} />
+        <Text style={styles.emptyTitle}>No events</Text>
+        <Text style={styles.emptySubtitle}>Tap + to create one</Text>
+      </ScrollView>
+    );
+  }
+  return (
+    <ScrollView
+      contentContainerStyle={styles.dayList}
+      refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={c.textMuted} />
+      }
+    >
+      {dayEvents.map((event) => (
+        <EventCard
+          key={event.id}
+          event={event}
+          calendars={calendars}
+          onPress={onSelectEvent}
+        />
+      ))}
     </ScrollView>
   );
 }
 
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+  container: { flex: 1, backgroundColor: c.background },
+
   header: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.border,
-    gap: 8,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    gap: spacing.sm,
   },
-  headerTitle: { fontSize: 20, fontWeight: '700', color: colors.text },
-  monthNav: {
-    flexDirection: 'row',
+  headerBtn: {
+    width: 36,
+    height: 36,
     alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
+    justifyContent: 'center',
+    borderRadius: radius.full,
   },
-  navBtn: { padding: 8 },
-  monthLabel: { fontSize: 17, fontWeight: '600', color: colors.text },
-  weekdayRow: {
+  headerLeft: { flex: 1 },
+  headerTitle: { ...typography.h3, color: c.text },
+  headerSubtitle: { ...typography.caption, color: c.textMuted, marginTop: 2 },
+  headerActions: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
+  viewToggle: {
     flexDirection: 'row',
-    paddingHorizontal: 8,
-    marginBottom: 4,
+    backgroundColor: c.surface,
+    borderRadius: radius.md,
+    padding: 2,
   },
-  weekdayLabel: {
-    flex: 1,
-    textAlign: 'center',
-    fontSize: 12,
-    fontWeight: '600',
-    color: colors.textMuted,
-  },
-  daysGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    paddingHorizontal: 8,
-  },
-  dayCell: {
-    width: '14.28%',
-    alignItems: 'center',
-    paddingVertical: 6,
-  },
-  dayNumber: {
+  viewToggleBtn: {
     width: 32,
     height: 32,
-    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: radius.sm,
+  },
+  viewToggleBtnActive: { backgroundColor: c.background },
+  fab: {
+    width: 36,
+    height: 36,
+    borderRadius: radius.full,
+    backgroundColor: c.primary,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  dayText: { fontSize: 14, color: colors.text },
-  dayTextMuted: { color: colors.textMuted },
-  todayCircle: { backgroundColor: colors.primary },
-  todayText: { color: colors.textInverse, fontWeight: '700' },
-  todaySection: { paddingHorizontal: 16, paddingTop: 20 },
-  todaySectionTitle: { fontSize: 16, fontWeight: '600', color: colors.text, marginBottom: 12 },
-  eventCard: {
+
+  nav: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: colors.surface,
-    borderRadius: 10,
-    padding: 12,
-    marginBottom: 8,
+    justifyContent: 'center',
+    paddingVertical: spacing.xs,
+    gap: spacing.lg,
   },
-  eventDot: { width: 10, height: 10, borderRadius: 5, marginRight: 12 },
-  eventContent: { flex: 1 },
-  eventTitle: { fontSize: 15, fontWeight: '500', color: colors.text },
-  eventTime: { fontSize: 13, color: colors.textSecondary, marginTop: 2 },
-});
+  navBtn: {
+    width: 36,
+    height: 36,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: radius.full,
+  },
+
+  errorBanner: {
+    backgroundColor: c.errorBg,
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.sm,
+  },
+  errorText: { ...typography.caption, color: c.errorForeground },
+
+  content: { flex: 1 },
+
+  dayDetail: {
+    flex: 1,
+    borderTopWidth: 1,
+    borderTopColor: c.border,
+  },
+  dayDetailHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.sm,
+  },
+  dayDetailTitle: { ...typography.bodyMedium, color: c.text },
+  dayList: { paddingHorizontal: spacing.lg, paddingBottom: spacing.lg },
+
+  emptyState: {
+    alignItems: 'center',
+    paddingVertical: spacing.xl,
+    gap: spacing.xs,
+    flexGrow: 1,
+  },
+  emptyTitle: { ...typography.bodyMedium, color: c.textSecondary },
+  emptySubtitle: { ...typography.caption, color: c.textMuted },
+  });
+}

src/screens/CalendarScreenNew.tsx

@@ -1,546 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  Pressable,
-  ActivityIndicator,
-  ScrollView,
-  RefreshControl,
-} from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import {
-  ChevronLeft,
-  ChevronRight,
-  Plus,
-  CalendarDays,
-  LayoutGrid,
-  List as ListIcon,
-  Menu,
-} from 'lucide-react-native';
-import {
-  format,
-  startOfMonth,
-  endOfMonth,
-  startOfWeek,
-  endOfWeek,
-  addDays,
-  isToday,
-  addMonths,
-  subMonths,
-  addWeeks,
-  subWeeks,
-} from 'date-fns';
-import { colors, spacing, radius, typography } from '../theme/tokens';
-import { Button } from '../components';
-import { useCalendarStore } from '../stores/calendar-store';
-import { MonthView } from '../components/calendar/MonthView';
-import { WeekView } from '../components/calendar/WeekView';
-import { AgendaView } from '../components/calendar/AgendaView';
-import { EventCard } from '../components/calendar/EventCard';
-import { EventDetailSheet } from '../components/calendar/EventDetailSheet';
-import { EventModal } from '../components/calendar/EventModal';
-import {
-  RecurrenceScopeDialog,
-  type RecurrenceEditScope,
-} from '../components/calendar/RecurrenceScopeDialog';
-import { CalendarSidebarDrawer } from '../components/calendar/CalendarSidebarDrawer';
-import {
-  buildEventDayIndex,
-  eventsOnDayFromIndex,
-  type EventDayIndex,
-} from '../lib/calendar-utils';
-import type { Calendar, CalendarEvent } from '../api/types';
-
-type ViewMode = 'month' | 'week' | 'agenda';
-type PendingAction =
-  | { kind: 'edit'; event: CalendarEvent }
-  | { kind: 'delete'; event: CalendarEvent }
-  | null;
-
-const AGENDA_DAYS = 30;
-const RANGE_BUFFER_DAYS = 14;
-
-function rangeForView(viewMode: ViewMode, currentDate: Date): { after: Date; before: Date } {
-  if (viewMode === 'month') {
-    const start = startOfWeek(startOfMonth(currentDate));
-    const end = endOfWeek(endOfMonth(currentDate));
-    return { after: addDays(start, -RANGE_BUFFER_DAYS), before: addDays(end, RANGE_BUFFER_DAYS) };
-  }
-  if (viewMode === 'week') {
-    const start = startOfWeek(currentDate);
-    const end = endOfWeek(currentDate);
-    return { after: addDays(start, -RANGE_BUFFER_DAYS), before: addDays(end, RANGE_BUFFER_DAYS) };
-  }
-  return {
-    after: addDays(currentDate, -1),
-    before: addDays(currentDate, AGENDA_DAYS + RANGE_BUFFER_DAYS),
-  };
-}
-
-function headerTitle(viewMode: ViewMode, currentDate: Date): string {
-  if (viewMode === 'month') return format(currentDate, 'MMMM yyyy');
-  if (viewMode === 'week') {
-    const start = startOfWeek(currentDate);
-    const end = endOfWeek(currentDate);
-    if (start.getMonth() === end.getMonth()) {
-      return `${format(start, 'MMM d')} – ${format(end, 'd, yyyy')}`;
-    }
-    return `${format(start, 'MMM d')} – ${format(end, 'MMM d, yyyy')}`;
-  }
-  return format(currentDate, 'MMMM yyyy');
-}
-
-export default function CalendarScreen() {
-  const [currentDate, setCurrentDate] = React.useState(new Date());
-  const [selectedDate, setSelectedDate] = React.useState(new Date());
-  const [viewMode, setViewMode] = React.useState<ViewMode>('month');
-
-  const [detailEvent, setDetailEvent] = React.useState<CalendarEvent | null>(null);
-  const [modalEvent, setModalEvent] = React.useState<CalendarEvent | null>(null);
-  const [modalDate, setModalDate] = React.useState<Date | undefined>(undefined);
-  const [modalVisible, setModalVisible] = React.useState(false);
-  const [pendingAction, setPendingAction] = React.useState<PendingAction>(null);
-  const [sidebarVisible, setSidebarVisible] = React.useState(false);
-  const [refreshing, setRefreshing] = React.useState(false);
-
-  const hydrate = useCalendarStore((s) => s.hydrate);
-  const fetchCalendarsAction = useCalendarStore((s) => s.fetchCalendars);
-  const ensureRange = useCalendarStore((s) => s.ensureRange);
-  const refresh = useCalendarStore((s) => s.refresh);
-  const createEvent = useCalendarStore((s) => s.createEvent);
-  const updateEvent = useCalendarStore((s) => s.updateEvent);
-  const deleteEvent = useCalendarStore((s) => s.deleteEvent);
-  const toggleCalendarVisibility = useCalendarStore((s) => s.toggleCalendarVisibility);
-  const allCalendars = useCalendarStore((s) => s.calendars);
-  const hiddenCalendarIds = useCalendarStore((s) => s.hiddenCalendarIds);
-  const loading = useCalendarStore((s) => s.loading);
-  const error = useCalendarStore((s) => s.error);
-  const allEvents = useCalendarStore((s) => s.events);
-
-  const calendars = React.useMemo(
-    () => allCalendars.filter((c) => !hiddenCalendarIds.includes(c.id)),
-    [allCalendars, hiddenCalendarIds],
-  );
-  const events = React.useMemo(() => {
-    if (hiddenCalendarIds.length === 0) return allEvents;
-    const hidden = new Set(hiddenCalendarIds);
-    return allEvents.filter((e) => {
-      const ids = Object.keys(e.calendarIds || {});
-      if (ids.length === 0) return true;
-      return ids.some((id) => !hidden.has(id));
-    });
-  }, [allEvents, hiddenCalendarIds]);
-  // Pre-index events by day once. Child views do O(1) map lookups per cell
-  // instead of re-filtering the full event list with parseISO per day.
-  const eventsByDay = React.useMemo(() => buildEventDayIndex(events), [events]);
-
-  React.useEffect(() => {
-    void hydrate();
-    void fetchCalendarsAction();
-  }, [hydrate, fetchCalendarsAction]);
-
-  React.useEffect(() => {
-    const { after, before } = rangeForView(viewMode, currentDate);
-    void ensureRange(after.toISOString(), before.toISOString());
-  }, [viewMode, currentDate, ensureRange]);
-
-  const goPrev = React.useCallback(() => {
-    setCurrentDate((d) => {
-      if (viewMode === 'month') return subMonths(d, 1);
-      if (viewMode === 'week') return subWeeks(d, 1);
-      return addDays(d, -AGENDA_DAYS);
-    });
-  }, [viewMode]);
-
-  const goNext = React.useCallback(() => {
-    setCurrentDate((d) => {
-      if (viewMode === 'month') return addMonths(d, 1);
-      if (viewMode === 'week') return addWeeks(d, 1);
-      return addDays(d, AGENDA_DAYS);
-    });
-  }, [viewMode]);
-
-  const goToday = React.useCallback(() => {
-    const today = new Date();
-    setCurrentDate(today);
-    setSelectedDate(today);
-  }, []);
-
-  const handleSelectDate = React.useCallback(
-    (date: Date) => {
-      setSelectedDate(date);
-      if (viewMode === 'week') setCurrentDate(date);
-    },
-    [viewMode],
-  );
-
-  const openCreate = React.useCallback((date?: Date) => {
-    setModalEvent(null);
-    setModalDate(date);
-    setModalVisible(true);
-  }, []);
-
-  const openEditDirect = React.useCallback((event: CalendarEvent) => {
-    setModalEvent(event);
-    setModalDate(undefined);
-    setModalVisible(true);
-  }, []);
-
-  const handleEditFromDetail = React.useCallback((event: CalendarEvent) => {
-    setDetailEvent(null);
-    if (event.recurrenceRules?.length || event.originalId) {
-      setPendingAction({ kind: 'edit', event });
-    } else {
-      openEditDirect(event);
-    }
-  }, [openEditDirect]);
-
-  const handleDeleteFromDetail = React.useCallback((event: CalendarEvent) => {
-    setDetailEvent(null);
-    if (event.recurrenceRules?.length || event.originalId) {
-      setPendingAction({ kind: 'delete', event });
-    } else {
-      void deleteEvent(event.id);
-    }
-  }, [deleteEvent]);
-
-  const handleScopeSelect = React.useCallback(
-    async (scope: RecurrenceEditScope) => {
-      const action = pendingAction;
-      setPendingAction(null);
-      if (!action) return;
-      // For the first pass, treat all scopes as "all" - proper override
-      // handling lives in the store's update/delete path against originalId.
-      // TODO: implement "this only" via recurrenceOverrides write, and
-      // "this and following" via excludedRecurrenceRules + new master.
-      if (action.kind === 'edit') {
-        openEditDirect(action.event);
-      } else {
-        await deleteEvent(action.event.id);
-      }
-    },
-    [pendingAction, openEditDirect, deleteEvent],
-  );
-
-  const handleSave = React.useCallback(
-    async (data: Partial<CalendarEvent>, calendarId: string) => {
-      if (modalEvent) {
-        await updateEvent(modalEvent.id, data);
-      } else {
-        await createEvent(data, calendarId);
-      }
-    },
-    [modalEvent, createEvent, updateEvent],
-  );
-
-  const handleDeleteFromModal = React.useCallback(
-    async (event: CalendarEvent) => {
-      setModalVisible(false);
-      await deleteEvent(event.id);
-    },
-    [deleteEvent],
-  );
-
-  const onRefresh = React.useCallback(async () => {
-    setRefreshing(true);
-    try {
-      await refresh();
-    } finally {
-      setRefreshing(false);
-    }
-  }, [refresh]);
-
-  const isSelectedToday = isToday(selectedDate);
-
-  return (
-    <SafeAreaView style={styles.container} edges={['top']}>
-      <View style={styles.header}>
-        <Pressable
-          onPress={() => setSidebarVisible(true)}
-          hitSlop={8}
-          style={styles.headerBtn}
-        >
-          <Menu size={20} color={colors.text} />
-        </Pressable>
-        <View style={styles.headerLeft}>
-          <Text style={styles.headerTitle}>{headerTitle(viewMode, currentDate)}</Text>
-          <Text style={styles.headerSubtitle}>
-            {isSelectedToday ? 'Today' : format(selectedDate, 'EEE, MMM d')}
-          </Text>
-        </View>
-        <View style={styles.headerActions}>
-          <View style={styles.viewToggle}>
-            {(['month', 'week', 'agenda'] as ViewMode[]).map((mode) => {
-              const Icon =
-                mode === 'month' ? LayoutGrid : mode === 'week' ? CalendarDays : ListIcon;
-              const active = viewMode === mode;
-              return (
-                <Pressable
-                  key={mode}
-                  style={[styles.viewToggleBtn, active && styles.viewToggleBtnActive]}
-                  onPress={() => setViewMode(mode)}
-                >
-                  <Icon size={16} color={active ? colors.primary : colors.textMuted} />
-                </Pressable>
-              );
-            })}
-          </View>
-          <Pressable style={styles.fab} onPress={() => openCreate(selectedDate)}>
-            <Plus size={18} color={colors.primaryForeground} />
-          </Pressable>
-        </View>
-      </View>
-
-      <View style={styles.nav}>
-        <Pressable onPress={goPrev} style={styles.navBtn} hitSlop={8}>
-          <ChevronLeft size={20} color={colors.text} />
-        </Pressable>
-        <Button variant="outline" size="sm" onPress={goToday}>
-          Today
-        </Button>
-        <Pressable onPress={goNext} style={styles.navBtn} hitSlop={8}>
-          <ChevronRight size={20} color={colors.text} />
-        </Pressable>
-      </View>
-
-      {error && (
-        <View style={styles.errorBanner}>
-          <Text style={styles.errorText}>{error}</Text>
-        </View>
-      )}
-
-      <View style={styles.content}>
-        {viewMode === 'month' && (
-          <MonthView
-            currentDate={currentDate}
-            selectedDate={selectedDate}
-            events={events}
-            eventsByDay={eventsByDay}
-            calendars={calendars}
-            onSelectDate={handleSelectDate}
-            onLongPressDate={(date) => openCreate(date)}
-          />
-        )}
-        {viewMode === 'week' && (
-          <WeekView
-            selectedDate={selectedDate}
-            events={events}
-            eventsByDay={eventsByDay}
-            calendars={calendars}
-            onSelectDate={handleSelectDate}
-            onSelectEvent={setDetailEvent}
-            onCreateAtTime={(date) => openCreate(date)}
-          />
-        )}
-        {viewMode === 'agenda' && (
-          <AgendaView
-            fromDate={currentDate}
-            daysAhead={AGENDA_DAYS}
-            events={events}
-            eventsByDay={eventsByDay}
-            calendars={calendars}
-            onSelectEvent={setDetailEvent}
-          />
-        )}
-
-        {viewMode === 'month' && (
-          <View style={styles.dayDetail}>
-            <View style={styles.dayDetailHeader}>
-              <Text style={styles.dayDetailTitle}>
-                {isSelectedToday ? "Today's Events" : format(selectedDate, 'EEEE, MMMM d')}
-              </Text>
-              {loading && <ActivityIndicator size="small" color={colors.textMuted} />}
-            </View>
-            <DayEventList
-              date={selectedDate}
-              eventsByDay={eventsByDay}
-              calendars={calendars}
-              onSelectEvent={setDetailEvent}
-              refreshing={refreshing}
-              onRefresh={onRefresh}
-            />
-          </View>
-        )}
-      </View>
-
-      <EventDetailSheet
-        event={detailEvent}
-        calendars={calendars}
-        onClose={() => setDetailEvent(null)}
-        onEdit={handleEditFromDetail}
-        onDelete={handleDeleteFromDetail}
-      />
-
-      <EventModal
-        visible={modalVisible}
-        event={modalEvent}
-        calendars={allCalendars}
-        defaultDate={modalDate}
-        onSave={handleSave}
-        onDelete={handleDeleteFromModal}
-        onClose={() => setModalVisible(false)}
-      />
-
-      <RecurrenceScopeDialog
-        visible={!!pendingAction}
-        actionType={pendingAction?.kind === 'delete' ? 'delete' : 'edit'}
-        onSelect={handleScopeSelect}
-        onClose={() => setPendingAction(null)}
-      />
-
-      <CalendarSidebarDrawer
-        visible={sidebarVisible}
-        calendars={allCalendars}
-        hiddenCalendarIds={hiddenCalendarIds}
-        onToggle={toggleCalendarVisibility}
-        onClose={() => setSidebarVisible(false)}
-      />
-    </SafeAreaView>
-  );
-}
-
-function DayEventList({
-  date,
-  eventsByDay,
-  calendars,
-  onSelectEvent,
-  refreshing,
-  onRefresh,
-}: {
-  date: Date;
-  eventsByDay: EventDayIndex;
-  calendars: Calendar[];
-  onSelectEvent?: (event: CalendarEvent) => void;
-  refreshing: boolean;
-  onRefresh: () => void;
-}) {
-  const dayEvents = React.useMemo(
-    () => eventsOnDayFromIndex(eventsByDay, date),
-    [eventsByDay, date],
-  );
-  if (dayEvents.length === 0) {
-    return (
-      <ScrollView
-        contentContainerStyle={styles.emptyState}
-        refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={colors.textMuted} />
-        }
-      >
-        <CalendarDays size={32} color={colors.surfaceActive} />
-        <Text style={styles.emptyTitle}>No events</Text>
-        <Text style={styles.emptySubtitle}>Tap + to create one</Text>
-      </ScrollView>
-    );
-  }
-  return (
-    <ScrollView
-      contentContainerStyle={styles.dayList}
-      refreshControl={
-        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={colors.textMuted} />
-      }
-    >
-      {dayEvents.map((event) => (
-        <EventCard
-          key={event.id}
-          event={event}
-          calendars={calendars}
-          onPress={onSelectEvent}
-        />
-      ))}
-    </ScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
-
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.sm,
-    gap: spacing.sm,
-  },
-  headerBtn: {
-    width: 36,
-    height: 36,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: radius.full,
-  },
-  headerLeft: { flex: 1 },
-  headerTitle: { ...typography.h3, color: colors.text },
-  headerSubtitle: { ...typography.caption, color: colors.textMuted, marginTop: 2 },
-  headerActions: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
-  viewToggle: {
-    flexDirection: 'row',
-    backgroundColor: colors.surface,
-    borderRadius: radius.md,
-    padding: 2,
-  },
-  viewToggleBtn: {
-    width: 32,
-    height: 32,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: radius.sm,
-  },
-  viewToggleBtnActive: { backgroundColor: colors.background },
-  fab: {
-    width: 36,
-    height: 36,
-    borderRadius: radius.full,
-    backgroundColor: colors.primary,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  nav: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: spacing.xs,
-    gap: spacing.lg,
-  },
-  navBtn: {
-    width: 36,
-    height: 36,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: radius.full,
-  },
-
-  errorBanner: {
-    backgroundColor: colors.errorBg,
-    paddingHorizontal: spacing.lg,
-    paddingVertical: spacing.sm,
-  },
-  errorText: { ...typography.caption, color: colors.errorForeground },
-
-  content: { flex: 1 },
-
-  dayDetail: {
-    flex: 1,
-    borderTopWidth: 1,
-    borderTopColor: colors.border,
-  },
-  dayDetailHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: spacing.lg,
-    paddingVertical: spacing.sm,
-  },
-  dayDetailTitle: { ...typography.bodyMedium, color: colors.text },
-  dayList: { paddingHorizontal: spacing.lg, paddingBottom: spacing.lg },
-
-  emptyState: {
-    alignItems: 'center',
-    paddingVertical: spacing.xl,
-    gap: spacing.xs,
-    flexGrow: 1,
-  },
-  emptyTitle: { ...typography.bodyMedium, color: colors.textSecondary },
-  emptySubtitle: { ...typography.caption, color: colors.textMuted },
-});

src/screens/ComposeScreen.tsx

@@ -9,7 +9,8 @@ import {
   X, Send, Paperclip, ChevronDown, Bold, Italic, List,
   Link2, Image as ImageIcon, MoreHorizontal,
 } from 'lucide-react-native';
-import { colors, spacing, radius, typography, componentSizes } from '../theme/tokens';
+import { spacing, radius, typography, componentSizes, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
 import { Button } from '../components';
 import { useEmailStore } from '../stores/email-store';
 import { useContactsStore } from '../stores/contacts-store';
@@ -42,13 +43,15 @@ function parseRecipients(input: string): Recipient[] {
 }
 
 function RecipientChip({ recipient, onRemove }: { recipient: Recipient; onRemove: () => void }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <View style={styles.chip}>
       <Text style={styles.chipText} numberOfLines={1}>
         {recipient.name || recipient.email}
       </Text>
       <Pressable onPress={onRemove} hitSlop={8}>
-        <X size={12} color={colors.textMuted} />
+        <X size={12} color={c.textMuted} />
       </Pressable>
     </View>
   );
@@ -60,6 +63,8 @@ function SuggestionList({
   suggestions: Array<{ contact: ContactCard; name: string; email: string }>;
   onPick: (s: { name: string; email: string }) => void;
 }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <View style={styles.suggestionBox}>
       {suggestions.map((s, i) => {
@@ -89,6 +94,8 @@ function SuggestionList({
 }
 
 export default function ComposeScreen({ route, navigation }: Props) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const replyTo = route.params?.replyTo;
   const mode = route.params?.mode;
   const prefillTo = route.params?.prefillTo;
@@ -274,14 +281,14 @@ export default function ComposeScreen({ route, navigation }: Props) {
     <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
       <View style={styles.header}>
         <Pressable onPress={onClose} style={styles.headerBtn}>
-          <X size={22} color={colors.text} />
+          <X size={22} color={c.text} />
         </Pressable>
         <Text style={styles.headerTitle}>
           {mode === 'forward' ? 'Forward' : mode === 'replyAll' ? 'Reply All' : replyTo ? 'Reply' : 'New Message'}
         </Text>
         <View style={styles.headerRight}>
           <Pressable style={styles.headerBtn}>
-            <Paperclip size={20} color={colors.text} />
+            <Paperclip size={20} color={c.text} />
           </Pressable>
           <Button
             variant="default"
@@ -290,11 +297,11 @@ export default function ComposeScreen({ route, navigation }: Props) {
             disabled={!canSend}
             icon={
               sending ? (
-                <ActivityIndicator color={colors.primaryForeground} size="small" />
+                <ActivityIndicator color={c.primaryForeground} size="small" />
               ) : (
                 <Send
                   size={14}
-                  color={canSend ? colors.primaryForeground : colors.textMuted}
+                  color={canSend ? c.primaryForeground : c.textMuted}
                 />
               )
             }
@@ -316,7 +323,7 @@ export default function ComposeScreen({ route, navigation }: Props) {
               <Text style={styles.fromText} numberOfLines={1}>
                 {primaryIdentity?.email ?? (identityError ? 'identity unavailable' : 'Loading...')}
               </Text>
-              <ChevronDown size={14} color={colors.textMuted} />
+              <ChevronDown size={14} color={c.textMuted} />
             </View>
           </View>
 
@@ -333,7 +340,7 @@ export default function ComposeScreen({ route, navigation }: Props) {
               <TextInput
                 style={styles.recipientInput}
                 placeholder="Add recipient..."
-                placeholderTextColor={colors.textMuted}
+                placeholderTextColor={c.textMuted}
                 value={toInput}
                 onChangeText={setToInput}
                 onFocus={() => setActiveField('to')}
@@ -371,7 +378,7 @@ export default function ComposeScreen({ route, navigation }: Props) {
                 <TextInput
                   style={styles.recipientInput}
                   placeholder="Add Cc..."
-                  placeholderTextColor={colors.textMuted}
+                  placeholderTextColor={c.textMuted}
                   value={ccInput}
                   onChangeText={setCcInput}
                   onFocus={() => setActiveField('cc')}
@@ -396,7 +403,7 @@ export default function ComposeScreen({ route, navigation }: Props) {
             <TextInput
               style={styles.subjectInput}
               placeholder="Email subject"
-              placeholderTextColor={colors.textMuted}
+              placeholderTextColor={c.textMuted}
               value={subject}
               onChangeText={setSubject}
             />
@@ -405,7 +412,7 @@ export default function ComposeScreen({ route, navigation }: Props) {
           <TextInput
             style={styles.bodyInput}
             placeholder="Write your message..."
-            placeholderTextColor={colors.textMuted}
+            placeholderTextColor={c.textMuted}
             value={body}
             onChangeText={setBody}
             multiline
@@ -430,22 +437,22 @@ export default function ComposeScreen({ route, navigation }: Props) {
         <View style={styles.formatBar}>
           <View style={styles.formatActions}>
             <Pressable style={styles.formatBtn}>
-              <Bold size={18} color={colors.textSecondary} />
+              <Bold size={18} color={c.textSecondary} />
             </Pressable>
             <Pressable style={styles.formatBtn}>
-              <Italic size={18} color={colors.textSecondary} />
+              <Italic size={18} color={c.textSecondary} />
             </Pressable>
             <Pressable style={styles.formatBtn}>
-              <List size={18} color={colors.textSecondary} />
+              <List size={18} color={c.textSecondary} />
             </Pressable>
             <Pressable style={styles.formatBtn}>
-              <Link2 size={18} color={colors.textSecondary} />
+              <Link2 size={18} color={c.textSecondary} />
             </Pressable>
             <Pressable style={styles.formatBtn}>
-              <ImageIcon size={18} color={colors.textSecondary} />
+              <ImageIcon size={18} color={c.textSecondary} />
             </Pressable>
             <Pressable style={styles.formatBtn}>
-              <MoreHorizontal size={18} color={colors.textSecondary} />
+              <MoreHorizontal size={18} color={c.textSecondary} />
             </Pressable>
           </View>
         </View>
@@ -454,8 +461,9 @@ export default function ComposeScreen({ route, navigation }: Props) {
   );
 }
 
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+  container: { flex: 1, backgroundColor: c.background },
   flex: { flex: 1 },
 
   header: {
@@ -465,7 +473,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.sm,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
     gap: spacing.sm,
   },
   headerBtn: {
@@ -475,7 +483,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     borderRadius: radius.full,
   },
-  headerTitle: { ...typography.h3, color: colors.text, flex: 1 },
+  headerTitle: { ...typography.h3, color: c.text, flex: 1 },
   headerRight: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
   sendButtonDisabled: { opacity: 0.5 },
 
@@ -485,12 +493,12 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.lg,
     paddingVertical: spacing.sm,
     borderBottomWidth: 1,
-    borderBottomColor: colors.borderLight,
+    borderBottomColor: c.borderLight,
     gap: spacing.md,
   },
   fieldLabel: {
     ...typography.body,
-    color: colors.textMuted,
+    color: c.textMuted,
     width: 56,
     paddingTop: 10,
   },
@@ -501,7 +509,7 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
     gap: spacing.sm,
   },
-  fromText: { ...typography.body, color: colors.text },
+  fromText: { ...typography.body, color: c.text },
   recipientField: {
     flex: 1,
     flexDirection: 'row',
@@ -517,24 +525,24 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.sm,
     paddingVertical: 4,
     borderRadius: radius.full,
-    backgroundColor: colors.surfaceActive,
+    backgroundColor: c.surfaceActive,
     maxWidth: 220,
   },
-  chipText: { ...typography.caption, color: colors.text, flexShrink: 1 },
+  chipText: { ...typography.caption, color: c.text, flexShrink: 1 },
   recipientInput: {
     flexGrow: 1,
     minWidth: 100,
     ...typography.body,
-    color: colors.text,
+    color: c.text,
     paddingVertical: 6,
   },
   suggestionBox: {
     marginTop: spacing.xs,
     marginLeft: 60,
     borderWidth: 1,
-    borderColor: colors.borderLight,
+    borderColor: c.borderLight,
     borderRadius: radius.sm,
-    backgroundColor: colors.card,
+    backgroundColor: c.card,
     overflow: 'hidden',
   },
   suggestionRow: {
@@ -544,33 +552,33 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.sm,
     gap: spacing.sm,
   },
-  suggestionRowPressed: { backgroundColor: colors.surfaceHover },
+  suggestionRowPressed: { backgroundColor: c.surfaceHover },
   suggestionAvatar: {
     width: 32, height: 32,
     borderRadius: 16,
-    backgroundColor: colors.primaryBg,
+    backgroundColor: c.primaryBg,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  suggestionAvatarText: { ...typography.captionMedium, color: colors.primary },
+  suggestionAvatarText: { ...typography.captionMedium, color: c.primary },
   suggestionText: { flex: 1 },
-  suggestionName: { ...typography.bodyMedium, color: colors.text },
-  suggestionEmail: { ...typography.caption, color: colors.textSecondary },
+  suggestionName: { ...typography.bodyMedium, color: c.text },
+  suggestionEmail: { ...typography.caption, color: c.textSecondary },
   ccToggle: {
     paddingHorizontal: spacing.sm,
     paddingVertical: 6,
   },
-  ccToggleText: { ...typography.caption, color: colors.primary },
+  ccToggleText: { ...typography.caption, color: c.primary },
   subjectInput: {
     flex: 1,
     ...typography.body,
-    color: colors.text,
+    color: c.text,
     paddingVertical: 10,
   },
 
   bodyInput: {
     ...typography.body,
-    color: colors.text,
+    color: c.text,
     paddingHorizontal: spacing.lg,
     paddingVertical: spacing.md,
     minHeight: 200,
@@ -583,15 +591,15 @@ const styles = StyleSheet.create({
     marginTop: spacing.md,
     gap: spacing.sm,
   },
-  quoteBorder: { width: 3, backgroundColor: colors.border, borderRadius: radius.xs },
+  quoteBorder: { width: 3, backgroundColor: c.border, borderRadius: radius.xs },
   quoteContent: { flex: 1 },
-  quoteMeta: { ...typography.caption, color: colors.textMuted, marginBottom: spacing.xs },
-  quoteText: { ...typography.caption, color: colors.textSecondary, lineHeight: 18 },
+  quoteMeta: { ...typography.caption, color: c.textMuted, marginBottom: spacing.xs },
+  quoteText: { ...typography.caption, color: c.textSecondary, lineHeight: 18 },
 
   formatBar: {
     borderTopWidth: 1,
-    borderTopColor: colors.border,
-    backgroundColor: colors.surface,
+    borderTopColor: c.border,
+    backgroundColor: c.surface,
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.xs,
   },
@@ -606,4 +614,5 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     borderRadius: radius.sm,
   },
-});
+  });
+}

src/screens/ContactDetailScreen.tsx

@@ -24,18 +24,19 @@ import { contactToVCard } from '../lib/vcard';
 import SenderAvatar from '../components/SenderAvatar';
 import Dialog from '../components/Dialog';
 import { ContactActivity } from '../components/contacts/ContactActivity';
-import { colors, spacing, radius, typography } from '../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
 
 type Nav = NativeStackNavigationProp<RootStackParamList, 'ContactDetail'>;
 type Route = RouteProp<RootStackParamList, 'ContactDetail'>;
 
 const CATEGORY_COLORS: Record<string, string> = {
-  contact: colors.primary,
-  work: colors.calendar.orange,
-  location: colors.calendar.green,
-  personal: colors.calendar.pink,
-  digital: colors.calendar.teal,
-  notes: colors.calendar.purple,
+  contact: c.primary,
+  work: c.calendar.orange,
+  location: c.calendar.green,
+  personal: c.calendar.pink,
+  digital: c.calendar.teal,
+  notes: c.calendar.purple,
 };
 
 function Section({
@@ -46,7 +47,9 @@ function Section({
   category?: keyof typeof CATEGORY_COLORS;
   children: React.ReactNode;
 }) {
-  const accent = CATEGORY_COLORS[category] || colors.primary;
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  const accent = CATEGORY_COLORS[category] || c.primary;
   return (
     <View style={[styles.section, { borderLeftColor: accent }]}>
       <View style={styles.sectionHeader}>
@@ -59,6 +62,8 @@ function Section({
 }
 
 function ContextChips({ contexts }: { contexts?: Record<string, boolean> }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   if (!contexts) return null;
   const keys = Object.keys(contexts).filter((k) => contexts[k]);
   if (keys.length === 0) return null;
@@ -74,6 +79,8 @@ function ContextChips({ contexts }: { contexts?: Record<string, boolean> }) {
 }
 
 export default function ContactDetailScreen() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const navigation = useNavigation<Nav>();
   const route = useRoute<Route>();
   const { contactId } = route.params;
@@ -90,7 +97,7 @@ export default function ContactDetailScreen() {
       <SafeAreaView style={styles.container}>
         <View style={styles.header}>
           <Pressable onPress={() => navigation.goBack()} style={styles.headerBtn} hitSlop={8}>
-            <ArrowLeft size={22} color={colors.text} />
+            <ArrowLeft size={22} color={c.text} />
           </Pressable>
           <Text style={styles.headerTitle}>Contact</Text>
         </View>
@@ -183,7 +190,7 @@ export default function ContactDetailScreen() {
     <SafeAreaView style={styles.container} edges={['top']}>
       <View style={styles.header}>
         <Pressable onPress={() => navigation.goBack()} style={styles.headerBtn} hitSlop={8}>
-          <ArrowLeft size={22} color={colors.text} />
+          <ArrowLeft size={22} color={c.text} />
         </Pressable>
         <Text style={styles.headerTitle} numberOfLines={1}>{name}</Text>
         <View style={styles.headerActions}>
@@ -193,7 +200,7 @@ export default function ContactDetailScreen() {
               style={styles.headerBtn}
               hitSlop={8}
             >
-              <Copy size={18} color={colors.text} />
+              <Copy size={18} color={c.text} />
             </Pressable>
           )}
           <Pressable
@@ -201,14 +208,14 @@ export default function ContactDetailScreen() {
             style={styles.headerBtn}
             hitSlop={8}
           >
-            <Edit2 size={18} color={colors.text} />
+            <Edit2 size={18} color={c.text} />
           </Pressable>
           <Pressable
             onPress={() => setConfirmDelete(true)}
             style={styles.headerBtn}
             hitSlop={8}
           >
-            <Trash2 size={18} color={colors.error} />
+            <Trash2 size={18} color={c.error} />
           </Pressable>
         </View>
       </View>
@@ -227,17 +234,17 @@ export default function ContactDetailScreen() {
 
         <View style={styles.quickActions}>
           {!!email && (
-            <QuickAction icon={<Mail size={18} color={colors.primary} />} label="Email" onPress={() => openMail(email)} />
+            <QuickAction icon={<Mail size={18} color={c.primary} />} label="Email" onPress={() => openMail(email)} />
           )}
           {!!phone && (
-            <QuickAction icon={<Phone size={18} color={colors.primary} />} label="Call" onPress={() => openTel(phone)} />
+            <QuickAction icon={<Phone size={18} color={c.primary} />} label="Call" onPress={() => openTel(phone)} />
           )}
           {!!phone && (
-            <QuickAction icon={<MessageSquare size={18} color={colors.primary} />} label="SMS" onPress={() => openSms(phone)} />
+            <QuickAction icon={<MessageSquare size={18} color={c.primary} />} label="SMS" onPress={() => openSms(phone)} />
           )}
           {!!name && (
             <QuickAction
-              icon={<Share2 size={18} color={colors.primary} />}
+              icon={<Share2 size={18} color={c.primary} />}
               label="Share"
               onPress={async () => {
                 const vcard = contactToVCard(contact);
@@ -263,7 +270,7 @@ export default function ContactDetailScreen() {
         </View>
 
         {emails.length > 0 && (
-          <Section icon={<Mail size={14} color={colors.primary} />} title="Email" category="contact">
+          <Section icon={<Mail size={14} color={c.primary} />} title="Email" category="contact">
             {emails.map((e) => (
               <Pressable key={e.id} onPress={() => openMail(e.address)} style={styles.fieldRow}>
                 <Text style={styles.fieldValue} selectable>{e.address}</Text>
@@ -275,7 +282,7 @@ export default function ContactDetailScreen() {
         )}
 
         {phones.length > 0 && (
-          <Section icon={<Phone size={14} color={colors.primary} />} title="Phone" category="contact">
+          <Section icon={<Phone size={14} color={c.primary} />} title="Phone" category="contact">
             {phones.map((p) => (
               <Pressable key={p.id} onPress={() => openTel(p.number)} style={styles.fieldRow}>
                 <Text style={styles.fieldValue} selectable>{p.number}</Text>
@@ -287,7 +294,7 @@ export default function ContactDetailScreen() {
         )}
 
         {orgs.length > 0 && (
-          <Section icon={<Building size={14} color={colors.calendar.orange} />} title="Organization" category="work">
+          <Section icon={<Building size={14} color={c.calendar.orange} />} title="Organization" category="work">
             {orgs.map((o, i) => (
               <View key={i} style={styles.fieldRow}>
                 <Text style={styles.fieldValue}>{o.name}</Text>
@@ -300,7 +307,7 @@ export default function ContactDetailScreen() {
         )}
 
         {titles.length > 0 && (
-          <Section icon={<Briefcase size={14} color={colors.calendar.orange} />} title="Title" category="work">
+          <Section icon={<Briefcase size={14} color={c.calendar.orange} />} title="Title" category="work">
             {titles.map((tl, i) => (
               <View key={i} style={styles.fieldRow}>
                 <Text style={styles.fieldValue}>{tl.name}</Text>
@@ -311,7 +318,7 @@ export default function ContactDetailScreen() {
         )}
 
         {addresses.length > 0 && (
-          <Section icon={<MapPin size={14} color={colors.calendar.green} />} title="Addresses" category="location">
+          <Section icon={<MapPin size={14} color={c.calendar.green} />} title="Addresses" category="location">
             {addresses.map((a) => {
               const formatted = formatAddress(a);
               return (
@@ -325,7 +332,7 @@ export default function ContactDetailScreen() {
         )}
 
         {anniversaries.length > 0 && (
-          <Section icon={<Cake size={14} color={colors.calendar.pink} />} title="Anniversaries" category="personal">
+          <Section icon={<Cake size={14} color={c.calendar.pink} />} title="Anniversaries" category="personal">
             {anniversaries.map((a, i) => (
               <View key={i} style={styles.fieldRow}>
                 <Text style={styles.fieldValue}>{formatPartialDate(a.date)}</Text>
@@ -336,7 +343,7 @@ export default function ContactDetailScreen() {
         )}
 
         {onlineServices.length > 0 && (
-          <Section icon={<Globe size={14} color={colors.calendar.teal} />} title="Online" category="digital">
+          <Section icon={<Globe size={14} color={c.calendar.teal} />} title="Online" category="digital">
             {onlineServices.map((s, i) => (
               <Pressable
                 key={i}
@@ -352,7 +359,7 @@ export default function ContactDetailScreen() {
         )}
 
         {personalInfo.length > 0 && (
-          <Section icon={<Heart size={14} color={colors.calendar.pink} />} title="Personal" category="personal">
+          <Section icon={<Heart size={14} color={c.calendar.pink} />} title="Personal" category="personal">
             {personalInfo.map((pi, i) => (
               <View key={i} style={styles.fieldRow}>
                 <Text style={styles.fieldValue}>{pi.value}</Text>
@@ -363,7 +370,7 @@ export default function ContactDetailScreen() {
         )}
 
         {relatedTo.length > 0 && (
-          <Section icon={<Users size={14} color={colors.calendar.pink} />} title="Related" category="personal">
+          <Section icon={<Users size={14} color={c.calendar.pink} />} title="Related" category="personal">
             {relatedTo.map(([uri, rel], i) => {
               const relType = rel.relation ? Object.keys(rel.relation).find((k) => rel.relation![k]) : undefined;
               return (
@@ -377,7 +384,7 @@ export default function ContactDetailScreen() {
         )}
 
         {notes.length > 0 && (
-          <Section icon={<FileText size={14} color={colors.calendar.purple} />} title="Notes" category="notes">
+          <Section icon={<FileText size={14} color={c.calendar.purple} />} title="Notes" category="notes">
             {notes.map((n, i) => (
               <Text key={i} style={styles.noteText}>{n.note}</Text>
             ))}
@@ -385,7 +392,7 @@ export default function ContactDetailScreen() {
         )}
 
         {keywords.length > 0 && (
-          <Section icon={<Tag size={14} color={colors.calendar.teal} />} title="Tags" category="digital">
+          <Section icon={<Tag size={14} color={c.calendar.teal} />} title="Tags" category="digital">
             <View style={styles.chipRow}>
               {keywords.map((kw) => (
                 <View key={kw} style={styles.tagChip}>
@@ -397,7 +404,7 @@ export default function ContactDetailScreen() {
         )}
 
         {bookNames.length > 0 && (
-          <Section icon={<BookUser size={14} color={colors.textSecondary} />} title="Address Book" category="contact">
+          <Section icon={<BookUser size={14} color={c.textSecondary} />} title="Address Book" category="contact">
             {bookNames.map((n, i) => (
               <Text key={i} style={styles.fieldValue}>{n}</Text>
             ))}
@@ -427,6 +434,8 @@ function QuickAction({
   label: string;
   onPress: () => void;
 }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <Pressable style={({ pressed }) => [styles.quickBtn, pressed && styles.quickBtnPressed]} onPress={onPress}>
       <View style={styles.quickIcon}>{icon}</View>
@@ -435,8 +444,9 @@ function QuickAction({
   );
 }
 
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+  container: { flex: 1, backgroundColor: c.background },
   scrollContent: { paddingBottom: spacing.xxxl * 2 },
 
   header: {
@@ -446,14 +456,14 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.sm,
     gap: spacing.xs,
     borderBottomWidth: 1,
-    borderBottomColor: colors.borderLight,
+    borderBottomColor: c.borderLight,
   },
   headerBtn: {
     width: 40, height: 40,
     alignItems: 'center', justifyContent: 'center',
     borderRadius: radius.full,
   },
-  headerTitle: { ...typography.h3, color: colors.text, flex: 1, marginLeft: spacing.xs },
+  headerTitle: { ...typography.h3, color: c.text, flex: 1, marginLeft: spacing.xs },
   headerActions: { flexDirection: 'row', gap: spacing.xs },
 
   hero: {
@@ -466,10 +476,10 @@ const styles = StyleSheet.create({
     width: 96,
     height: 96,
     borderRadius: 48,
-    backgroundColor: colors.surface,
+    backgroundColor: c.surface,
   },
-  heroName: { ...typography.h2, color: colors.text, textAlign: 'center', marginTop: spacing.sm },
-  heroSubtitle: { ...typography.body, color: colors.textSecondary, textAlign: 'center' },
+  heroName: { ...typography.h2, color: c.text, textAlign: 'center', marginTop: spacing.sm },
+  heroSubtitle: { ...typography.body, color: c.textSecondary, textAlign: 'center' },
 
   quickActions: {
     flexDirection: 'row',
@@ -483,17 +493,17 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingVertical: spacing.md,
     borderRadius: radius.md,
-    backgroundColor: colors.surface,
+    backgroundColor: c.surface,
     gap: spacing.xs,
   },
-  quickBtnPressed: { backgroundColor: colors.surfaceHover },
+  quickBtnPressed: { backgroundColor: c.surfaceHover },
   quickIcon: {
     width: 32, height: 32,
     alignItems: 'center', justifyContent: 'center',
     borderRadius: radius.full,
-    backgroundColor: colors.primaryBg,
+    backgroundColor: c.primaryBg,
   },
-  quickLabel: { ...typography.caption, color: colors.textSecondary },
+  quickLabel: { ...typography.caption, color: c.textSecondary },
 
   section: {
     marginHorizontal: spacing.lg,
@@ -502,33 +512,34 @@ const styles = StyleSheet.create({
     paddingLeft: spacing.md,
     paddingVertical: spacing.sm,
     borderRadius: radius.sm,
-    backgroundColor: colors.card,
+    backgroundColor: c.card,
   },
   sectionHeader: { flexDirection: 'row', alignItems: 'center', gap: spacing.xs, marginBottom: spacing.sm },
-  sectionTitle: { ...typography.bodySemibold, color: colors.text },
+  sectionTitle: { ...typography.bodySemibold, color: c.text },
   sectionBody: { gap: spacing.sm },
 
   fieldRow: { gap: 2 },
-  fieldValue: { ...typography.body, color: colors.text },
-  fieldLabel: { ...typography.caption, color: colors.textMuted },
-  noteText: { ...typography.body, color: colors.text },
+  fieldValue: { ...typography.body, color: c.text },
+  fieldLabel: { ...typography.caption, color: c.textMuted },
+  noteText: { ...typography.body, color: c.text },
 
   chipRow: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing.xs, marginTop: 2 },
   contextChip: {
     paddingHorizontal: 6,
     paddingVertical: 2,
-    backgroundColor: colors.surface,
+    backgroundColor: c.surface,
     borderRadius: radius.xs,
   },
-  contextChipText: { ...typography.small, color: colors.textMuted },
+  contextChipText: { ...typography.small, color: c.textMuted },
   tagChip: {
     paddingHorizontal: spacing.sm,
     paddingVertical: 2,
     borderRadius: radius.full,
-    backgroundColor: colors.primaryBg,
+    backgroundColor: c.primaryBg,
   },
-  tagChipText: { ...typography.caption, color: colors.primary },
+  tagChipText: { ...typography.caption, color: c.primary },
 
   missing: { flex: 1, alignItems: 'center', justifyContent: 'center' },
-  missingText: { ...typography.body, color: colors.textMuted },
-});
+  missingText: { ...typography.body, color: c.textMuted },
+  });
+}

src/screens/ContactFormScreen.tsx

@@ -22,7 +22,8 @@ import { getContactKeywords } from '../lib/contact-utils';
 import { getContactDisplayName } from '../lib/contact-utils';
 import FieldBlock, { FieldRow } from '../components/contacts/FieldBlock';
 import Dialog from '../components/Dialog';
-import { colors, spacing, radius, typography, componentSizes } from '../theme/tokens';
+import { spacing, radius, typography, componentSizes, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
 
 type Nav = NativeStackNavigationProp<RootStackParamList, 'ContactForm'>;
 type Route = RouteProp<RootStackParamList, 'ContactForm'>;
@@ -250,6 +251,8 @@ function ContextPills({
   options: string[];
   onChange: (v: string) => void;
 }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <View style={styles.pillRow}>
       {options.map((o) => (
@@ -266,6 +269,8 @@ function ContextPills({
 }
 
 export default function ContactFormScreen() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const navigation = useNavigation<Nav>();
   const route = useRoute<Route>();
   const { contactId, addressBookId: initialBook, asGroup } = route.params || {};
@@ -360,7 +365,7 @@ export default function ContactFormScreen() {
     <SafeAreaView style={styles.container} edges={['top']}>
       <View style={styles.header}>
         <Pressable onPress={handleBack} style={styles.headerBtn} hitSlop={8}>
-          <ArrowLeft size={22} color={colors.text} />
+          <ArrowLeft size={22} color={c.text} />
         </Pressable>
         <Text style={styles.headerTitle} numberOfLines={1}>{headerTitle}</Text>
         <Pressable onPress={handleSave} disabled={saving} style={styles.saveBtn} hitSlop={8}>
@@ -368,7 +373,7 @@ export default function ContactFormScreen() {
             <Text style={styles.saveLabel}>Saving…</Text>
           ) : (
             <>
-              <Check size={16} color={colors.primaryForeground} />
+              <Check size={16} color={c.primaryForeground} />
               <Text style={styles.saveLabel}>Save</Text>
             </>
           )}
@@ -382,7 +387,7 @@ export default function ContactFormScreen() {
         <ScrollView contentContainerStyle={styles.scrollContent} keyboardShouldPersistTaps="handled">
           {/* Address book picker */}
           {addressBooks.length > 1 && (
-            <FieldBlock title="Address Book" icon={<User size={14} color={colors.primary} />} category="contact">
+            <FieldBlock title="Address Book" icon={<User size={14} color={c.primary} />} category="contact">
               <View style={styles.pillRow}>
                 {addressBooks.map((book) => (
                   <Pressable
@@ -400,7 +405,7 @@ export default function ContactFormScreen() {
           )}
 
           {/* Photo */}
-          <FieldBlock title="Photo" icon={<Camera size={14} color={colors.primary} />} category="contact">
+          <FieldBlock title="Photo" icon={<Camera size={14} color={c.primary} />} category="contact">
             <View style={styles.photoRow}>
               {form.photoUri ? (
                 <View style={styles.photoThumbWrap}>
@@ -413,12 +418,12 @@ export default function ContactFormScreen() {
                     style={styles.photoRemoveBtn}
                     hitSlop={8}
                   >
-                    <XIcon size={14} color={colors.primaryForeground} />
+                    <XIcon size={14} color={c.primaryForeground} />
                   </Pressable>
                 </View>
               ) : (
                 <View style={[styles.photoThumb, styles.photoPlaceholder]}>
-                  <Camera size={28} color={colors.textMuted} />
+                  <Camera size={28} color={c.textMuted} />
                 </View>
               )}
               <Pressable
@@ -455,25 +460,25 @@ export default function ContactFormScreen() {
           </FieldBlock>
 
           {/* Name */}
-          <FieldBlock title="Name" icon={<User size={14} color={colors.primary} />} category="contact">
+          <FieldBlock title="Name" icon={<User size={14} color={c.primary} />} category="contact">
             <TextInput
               style={styles.input}
               placeholder="First name"
-              placeholderTextColor={colors.textMuted}
+              placeholderTextColor={c.textMuted}
               value={form.given}
               onChangeText={(v) => updateForm('given', v)}
             />
             <TextInput
               style={styles.input}
               placeholder="Last name"
-              placeholderTextColor={colors.textMuted}
+              placeholderTextColor={c.textMuted}
               value={form.surname}
               onChangeText={(v) => updateForm('surname', v)}
             />
             <TextInput
               style={styles.input}
               placeholder="Display name (optional)"
-              placeholderTextColor={colors.textMuted}
+              placeholderTextColor={c.textMuted}
               value={form.full}
               onChangeText={(v) => updateForm('full', v)}
             />
@@ -482,7 +487,7 @@ export default function ContactFormScreen() {
           {/* Emails */}
           <FieldBlock
             title="Email"
-            icon={<Mail size={14} color={colors.primary} />}
+            icon={<Mail size={14} color={c.primary} />}
             category="contact"
             onAdd={() => updateForm('emails', [...form.emails, { address: '', label: '', context: 'personal' }])}
             addLabel="Add"
@@ -495,7 +500,7 @@ export default function ContactFormScreen() {
                 <TextInput
                   style={styles.input}
                   placeholder="email@example.com"
-                  placeholderTextColor={colors.textMuted}
+                  placeholderTextColor={c.textMuted}
                   keyboardType="email-address"
                   autoCapitalize="none"
                   value={e.address}
@@ -521,7 +526,7 @@ export default function ContactFormScreen() {
           {/* Phones */}
           <FieldBlock
             title="Phone"
-            icon={<Phone size={14} color={colors.primary} />}
+            icon={<Phone size={14} color={c.primary} />}
             category="contact"
             onAdd={() => updateForm('phones', [...form.phones, { number: '', label: '', context: 'personal' }])}
             addLabel="Add"
@@ -534,7 +539,7 @@ export default function ContactFormScreen() {
                 <TextInput
                   style={styles.input}
                   placeholder="+1 555 0100"
-                  placeholderTextColor={colors.textMuted}
+                  placeholderTextColor={c.textMuted}
                   keyboardType="phone-pad"
                   value={p.number}
                   onChangeText={(v) => {
@@ -559,7 +564,7 @@ export default function ContactFormScreen() {
           {/* Orgs */}
           <FieldBlock
             title="Organization"
-            icon={<Building size={14} color={colors.calendar.orange} />}
+            icon={<Building size={14} color={c.calendar.orange} />}
             category="work"
             onAdd={() => updateForm('orgs', [...form.orgs, { name: '', title: '' }])}
             addLabel="Add"
@@ -572,7 +577,7 @@ export default function ContactFormScreen() {
                 <TextInput
                   style={styles.input}
                   placeholder="Company"
-                  placeholderTextColor={colors.textMuted}
+                  placeholderTextColor={c.textMuted}
                   value={o.name}
                   onChangeText={(v) => {
                     const next = [...form.orgs];
@@ -583,7 +588,7 @@ export default function ContactFormScreen() {
                 <TextInput
                   style={styles.input}
                   placeholder="Title"
-                  placeholderTextColor={colors.textMuted}
+                  placeholderTextColor={c.textMuted}
                   value={o.title}
                   onChangeText={(v) => {
                     const next = [...form.orgs];
@@ -598,7 +603,7 @@ export default function ContactFormScreen() {
           {/* Addresses */}
           <FieldBlock
             title="Address"
-            icon={<MapPin size={14} color={colors.calendar.green} />}
+            icon={<MapPin size={14} color={c.calendar.green} />}
             category="location"
             onAdd={() => updateForm('addresses', [...form.addresses, { full: '', context: 'home' }])}
             addLabel="Add"
@@ -611,7 +616,7 @@ export default function ContactFormScreen() {
                 <TextInput
                   style={[styles.input, styles.multiline]}
                   placeholder="Street, city, region, postcode, country"
-                  placeholderTextColor={colors.textMuted}
+                  placeholderTextColor={c.textMuted}
                   multiline
                   value={a.full}
                   onChangeText={(v) => {
@@ -636,7 +641,7 @@ export default function ContactFormScreen() {
           {/* Anniversaries */}
           <FieldBlock
             title="Important Dates"
-            icon={<Cake size={14} color={colors.calendar.pink} />}
+            icon={<Cake size={14} color={c.calendar.pink} />}
             category="personal"
             onAdd={() => updateForm('anniversaries', [...form.anniversaries, { kind: 'birth', date: '' }])}
             addLabel="Add"
@@ -650,7 +655,7 @@ export default function ContactFormScreen() {
                   <TextInput
                     style={[styles.input, styles.dateTextInput]}
                     placeholder="YYYY-MM-DD or --MM-DD"
-                    placeholderTextColor={colors.textMuted}
+                    placeholderTextColor={c.textMuted}
                     value={a.date}
                     onChangeText={(v) => {
                       const next = [...form.anniversaries];
@@ -663,7 +668,7 @@ export default function ContactFormScreen() {
                     style={styles.datePickerBtn}
                     hitSlop={8}
                   >
-                    <Calendar size={18} color={colors.primary} />
+                    <Calendar size={18} color={c.primary} />
                   </Pressable>
                 </View>
                 <ContextPills
@@ -680,7 +685,7 @@ export default function ContactFormScreen() {
           </FieldBlock>
 
           {/* Keywords */}
-          <FieldBlock title="Tags" icon={<Tag size={14} color={colors.calendar.teal} />} category="digital">
+          <FieldBlock title="Tags" icon={<Tag size={14} color={c.calendar.teal} />} category="digital">
             <View style={styles.chipRow}>
               {form.keywords.map((kw) => (
                 <Pressable
@@ -696,7 +701,7 @@ export default function ContactFormScreen() {
             <TextInput
               style={styles.input}
               placeholder="Add tag and press Enter"
-              placeholderTextColor={colors.textMuted}
+              placeholderTextColor={c.textMuted}
               value={keywordInput}
               onChangeText={setKeywordInput}
               onSubmitEditing={() => {
@@ -729,7 +734,7 @@ export default function ContactFormScreen() {
           {/* Notes */}
           <FieldBlock
             title="Notes"
-            icon={<FileText size={14} color={colors.calendar.purple} />}
+            icon={<FileText size={14} color={c.calendar.purple} />}
             category="notes"
             onAdd={() => updateForm('notes', [...form.notes, { note: '' }])}
             addLabel="Add"
@@ -750,7 +755,7 @@ export default function ContactFormScreen() {
                 <TextInput
                   style={[styles.input, styles.multiline]}
                   placeholder="Notes"
-                  placeholderTextColor={colors.textMuted}
+                  placeholderTextColor={c.textMuted}
                   multiline
                   value={n.note}
                   onChangeText={(v) => {
@@ -852,8 +857,9 @@ function formatDateAsISO(d: Date): string {
   return `${y}-${m}-${da}`;
 }
 
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+  container: { flex: 1, backgroundColor: c.background },
   scrollContent: { paddingVertical: spacing.md, paddingBottom: spacing.xxxl * 2 },
 
   dateInputRow: { flexDirection: 'row', alignItems: 'center', gap: spacing.xs },
@@ -862,34 +868,34 @@ const styles = StyleSheet.create({
     width: 40, height: 40,
     alignItems: 'center', justifyContent: 'center',
     borderRadius: radius.full,
-    backgroundColor: colors.primaryBg,
+    backgroundColor: c.primaryBg,
   },
   photoRow: { flexDirection: 'row', alignItems: 'center', gap: spacing.md },
   photoThumbWrap: { position: 'relative' },
   photoThumb: {
     width: 72, height: 72,
     borderRadius: 36,
-    backgroundColor: colors.surface,
+    backgroundColor: c.surface,
   },
   photoPlaceholder: {
     alignItems: 'center', justifyContent: 'center',
-    borderWidth: 1, borderColor: colors.border, borderStyle: 'dashed',
+    borderWidth: 1, borderColor: c.border, borderStyle: 'dashed',
   },
   photoRemoveBtn: {
     position: 'absolute',
     top: -4, right: -4,
     width: 24, height: 24,
     borderRadius: 12,
-    backgroundColor: colors.error,
+    backgroundColor: c.error,
     alignItems: 'center', justifyContent: 'center',
   },
   photoPickBtn: {
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.sm,
     borderRadius: radius.full,
-    backgroundColor: colors.primaryBg,
+    backgroundColor: c.primaryBg,
   },
-  photoPickLabel: { ...typography.bodyMedium, color: colors.primary },
+  photoPickLabel: { ...typography.bodyMedium, color: c.primary },
   pickerOverlay: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0,0,0,0.5)',
@@ -897,7 +903,7 @@ const styles = StyleSheet.create({
   pickerSheet: {
     position: 'absolute',
     left: 0, right: 0, bottom: 0,
-    backgroundColor: colors.background,
+    backgroundColor: c.background,
     borderTopLeftRadius: radius.lg,
     borderTopRightRadius: radius.lg,
     paddingBottom: spacing.lg,
@@ -907,9 +913,9 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
     padding: spacing.md,
     borderBottomWidth: 1,
-    borderBottomColor: colors.borderLight,
+    borderBottomColor: c.borderLight,
   },
-  pickerDone: { ...typography.bodySemibold, color: colors.primary },
+  pickerDone: { ...typography.bodySemibold, color: c.primary },
 
   header: {
     flexDirection: 'row',
@@ -918,34 +924,34 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.sm,
     gap: spacing.xs,
     borderBottomWidth: 1,
-    borderBottomColor: colors.borderLight,
+    borderBottomColor: c.borderLight,
   },
   headerBtn: {
     width: 40, height: 40,
     alignItems: 'center', justifyContent: 'center',
     borderRadius: radius.full,
   },
-  headerTitle: { ...typography.h3, color: colors.text, flex: 1 },
+  headerTitle: { ...typography.h3, color: c.text, flex: 1 },
   saveBtn: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: spacing.xs,
     paddingHorizontal: spacing.md,
     height: 36,
-    backgroundColor: colors.primary,
+    backgroundColor: c.primary,
     borderRadius: radius.full,
   },
-  saveLabel: { ...typography.bodyMedium, color: colors.primaryForeground },
+  saveLabel: { ...typography.bodyMedium, color: c.primaryForeground },
 
   input: {
     height: componentSizes.inputHeight,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     borderRadius: radius.sm,
-    backgroundColor: colors.background,
+    backgroundColor: c.background,
     paddingHorizontal: spacing.md,
     ...typography.body,
-    color: colors.text,
+    color: c.text,
   },
   multiline: { height: 80, paddingVertical: spacing.sm, textAlignVertical: 'top' },
 
@@ -954,13 +960,13 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.sm,
     paddingVertical: 4,
     borderRadius: radius.full,
-    backgroundColor: colors.surface,
+    backgroundColor: c.surface,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
   },
-  pillActive: { backgroundColor: colors.primary, borderColor: colors.primary },
-  pillText: { ...typography.caption, color: colors.textSecondary },
-  pillTextActive: { color: colors.primaryForeground },
+  pillActive: { backgroundColor: c.primary, borderColor: c.primary },
+  pillText: { ...typography.caption, color: c.textSecondary },
+  pillTextActive: { color: c.primaryForeground },
 
   chipRow: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing.xs },
   keywordChip: {
@@ -969,28 +975,29 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.sm,
     paddingVertical: 4,
     borderRadius: radius.full,
-    backgroundColor: colors.primaryBg,
+    backgroundColor: c.primaryBg,
   },
-  keywordChipText: { ...typography.caption, color: colors.primary },
-  keywordChipRemove: { ...typography.caption, color: colors.primary },
+  keywordChipText: { ...typography.caption, color: c.primary },
+  keywordChipRemove: { ...typography.caption, color: c.primary },
   suggestedChip: {
     paddingHorizontal: spacing.sm,
     paddingVertical: 4,
     borderRadius: radius.full,
-    backgroundColor: colors.surface,
+    backgroundColor: c.surface,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
   },
-  suggestedChipText: { ...typography.caption, color: colors.textSecondary },
+  suggestedChipText: { ...typography.caption, color: c.textSecondary },
 
   addNoteBtn: {
     paddingVertical: spacing.md,
     paddingHorizontal: spacing.sm,
     borderRadius: radius.sm,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     borderStyle: 'dashed',
     alignItems: 'center',
   },
-  addNoteText: { ...typography.caption, color: colors.textMuted },
-});
+  addNoteText: { ...typography.caption, color: c.textMuted },
+  });
+}

src/screens/ContactsScreen.tsx

@@ -1,110 +1,505 @@
 import React from 'react';
-import { View, Text, StyleSheet, SectionList, Pressable } from 'react-native';
-import { Users } from 'lucide-react-native';
-import { colors } from '../theme/colors';
+import {
+  View,
+  Text,
+  StyleSheet,
+  SectionList,
+  Pressable,
+  TextInput,
+  ActivityIndicator,
+  RefreshControl,
+  ScrollView,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import {
+  Search, Plus, UserCircle, X, Menu, Trash2, Tag, FolderInput,
+} from 'lucide-react-native';
+import type { RootStackParamList } from '../navigation/types';
+import type { ContactCard } from '../api/types';
+import {
+  useContactsStore,
+  sortContactsByDisplayName,
+  selectGroupMembers,
+  type ContactCategory,
+} from '../stores/contacts-store';
+import { getContactDisplayName, isGroup, matchesContactSearch } from '../lib/contact-utils';
+import { ContactListRow } from '../components/contacts';
+import Dialog from '../components/Dialog';
+import ContactsSidebarDrawer from '../components/contacts/ContactsSidebarDrawer';
+import { useSettingsStore } from '../stores/settings-store';
+import { spacing, radius, typography, componentSizes, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
 
-const MOCK_CONTACTS = [
-  { id: '1', name: 'Alice Johnson', email: 'alice@example.com', phone: '+1 555-0101' },
-  { id: '2', name: 'Bob Smith', email: 'bob@example.com', phone: '+1 555-0102' },
-  { id: '3', name: 'Carol Davis', email: 'carol@example.com', phone: '+1 555-0103' },
-  { id: '4', name: 'David Wilson', email: 'david@example.com', phone: '+1 555-0104' },
-  { id: '5', name: 'Emma Brown', email: 'emma@example.com', phone: '+1 555-0105' },
-  { id: '6', name: 'Frank Miller', email: 'frank@example.com', phone: '+1 555-0106' },
-  { id: '7', name: 'Grace Lee', email: 'grace@example.com', phone: '+1 555-0107' },
-  { id: '8', name: 'Henry Taylor', email: 'henry@example.com', phone: '+1 555-0108' },
-];
+type Nav = NativeStackNavigationProp<RootStackParamList>;
 
-function groupByLetter(contacts: typeof MOCK_CONTACTS) {
-  const groups: Record<string, typeof MOCK_CONTACTS> = {};
-  contacts.forEach((c) => {
-    const letter = c.name.charAt(0).toUpperCase();
-    if (!groups[letter]) groups[letter] = [];
-    groups[letter].push(c);
-  });
-  return Object.keys(groups)
-    .sort()
-    .map((letter) => ({ title: letter, data: groups[letter] }));
+interface Section {
+  title: string;
+  data: ContactCard[];
 }
 
-function ContactRow({ item }: { item: typeof MOCK_CONTACTS[0] }) {
-  return (
-    <Pressable style={({ pressed }) => [styles.contactRow, pressed && styles.contactRowPressed]}>
-      <View style={styles.avatar}>
-        <Text style={styles.avatarText}>{item.name.charAt(0)}</Text>
-      </View>
-      <View style={styles.contactInfo}>
-        <Text style={styles.contactName}>{item.name}</Text>
-        <Text style={styles.contactEmail}>{item.email}</Text>
-      </View>
-    </Pressable>
-  );
+function groupContacts(contacts: ContactCard[]): Section[] {
+  const sorted = sortContactsByDisplayName(contacts);
+  const groups: Record<string, ContactCard[]> = {};
+  for (const c of sorted) {
+    const name = getContactDisplayName(c).trim();
+    const letter = (name[0] || '#').toUpperCase();
+    const key = /[A-Z]/.test(letter) ? letter : '#';
+    if (!groups[key]) groups[key] = [];
+    groups[key].push(c);
+  }
+  return Object.keys(groups)
+    .sort((a, b) => {
+      if (a === '#') return 1;
+      if (b === '#') return -1;
+      return a.localeCompare(b);
+    })
+    .map((title) => ({ title, data: groups[title] }));
+}
+
+function categoryTitle(category: ContactCategory, books: Array<{ id: string; name: string }>, groups: ContactCard[]): string {
+  switch (category.type) {
+    case 'all':
+      return 'All Contacts';
+    case 'addressBook':
+      return books.find((b) => b.id === category.addressBookId)?.name || 'Address Book';
+    case 'group': {
+      const g = groups.find((c) => c.id === category.groupId);
+      return g ? getContactDisplayName(g) || 'Group' : 'Group';
+    }
+    case 'keyword':
+      return `#${category.keyword}`;
+    case 'uncategorized':
+      return 'Uncategorized';
+    default:
+      return 'Contacts';
+  }
 }
 
 export default function ContactsScreen() {
-  const sections = React.useMemo(() => groupByLetter(MOCK_CONTACTS), []);
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  const navigation = useNavigation<Nav>();
+  const contacts = useContactsStore((s) => s.contacts);
+  const addressBooks = useContactsStore((s) => s.addressBooks);
+  const loading = useContactsStore((s) => s.loading);
+  const error = useContactsStore((s) => s.error);
+  const selectedCategory = useContactsStore((s) => s.selectedCategory);
+  const hydrated = useContactsStore((s) => s.hydrated);
+  const fetchAddressBooks = useContactsStore((s) => s.fetchAddressBooks);
+  const fetchContacts = useContactsStore((s) => s.fetchContacts);
+  const hydrate = useContactsStore((s) => s.hydrate);
+  const bulkDelete = useContactsStore((s) => s.bulkDelete);
+  const setSelectedCategory = useContactsStore((s) => s.setSelectedCategory);
+  const groupByLetter = useSettingsStore((s) => s.groupContactsByLetter);
+
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [searchActive, setSearchActive] = React.useState(false);
+  const [drawerOpen, setDrawerOpen] = React.useState(false);
+  const [selection, setSelection] = React.useState<Set<string>>(new Set());
+  const [confirmBulkDelete, setConfirmBulkDelete] = React.useState(false);
+
+  React.useEffect(() => {
+    void hydrate();
+  }, [hydrate]);
+
+  React.useEffect(() => {
+    void fetchAddressBooks();
+    void fetchContacts();
+  }, [fetchAddressBooks, fetchContacts]);
+
+  const groups = React.useMemo(() => contacts.filter(isGroup), [contacts]);
+  const individuals = React.useMemo(() => contacts.filter((c) => !isGroup(c)), [contacts]);
+
+  const visible = React.useMemo(() => {
+    let filtered: ContactCard[];
+    switch (selectedCategory.type) {
+      case 'all':
+        filtered = individuals;
+        break;
+      case 'addressBook':
+        filtered = individuals.filter((c) => c.addressBookIds?.[selectedCategory.addressBookId]);
+        break;
+      case 'group':
+        filtered = selectGroupMembers(
+          { contacts } as Parameters<typeof selectGroupMembers>[0],
+          selectedCategory.groupId,
+        ).filter((c) => !isGroup(c));
+        break;
+      case 'keyword':
+        filtered = individuals.filter((c) => c.keywords?.[selectedCategory.keyword]);
+        break;
+      case 'uncategorized':
+        filtered = individuals.filter(
+          (c) => !c.addressBookIds || Object.keys(c.addressBookIds).length === 0,
+        );
+        break;
+      default:
+        filtered = individuals;
+    }
+    if (!searchQuery) return filtered;
+    return filtered.filter((c) => matchesContactSearch(c, searchQuery));
+  }, [contacts, individuals, selectedCategory, searchQuery]);
+
+  const sections = React.useMemo<Section[]>(() => {
+    if (groupByLetter) return groupContacts(visible);
+    // Flat list - single unnamed section keeps SectionList rendering simple.
+    return [{ title: '', data: sortContactsByDisplayName(visible) }];
+  }, [visible, groupByLetter]);
+
+  const selectionMode = selection.size > 0;
+  const toggleSelect = (id: string) => {
+    setSelection((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const handleRowPress = (c: ContactCard) => {
+    if (selectionMode) {
+      toggleSelect(c.id);
+      return;
+    }
+    if (isGroup(c)) {
+      navigation.navigate('GroupDetail', { groupId: c.id });
+    } else {
+      navigation.navigate('ContactDetail', { contactId: c.id });
+    }
+  };
+
+  const handleLongPress = (c: ContactCard) => {
+    toggleSelect(c.id);
+  };
+
+  const clearSelection = () => setSelection(new Set());
+
+  const doBulkDelete = async () => {
+    const ids = Array.from(selection);
+    setConfirmBulkDelete(false);
+    clearSelection();
+    await bulkDelete(ids);
+  };
+
+  const title = categoryTitle(selectedCategory, addressBooks, groups);
+
+  // Top chip row: All / per-address-book / Groups
+  const chips = React.useMemo(() => {
+    const items: Array<{ key: string; label: string; category: ContactCategory; active: boolean }> = [
+      {
+        key: 'all',
+        label: 'All',
+        category: { type: 'all' },
+        active: selectedCategory.type === 'all',
+      },
+    ];
+    for (const book of addressBooks) {
+      items.push({
+        key: `book:${book.id}`,
+        label: book.name,
+        category: { type: 'addressBook', addressBookId: book.id },
+        active: selectedCategory.type === 'addressBook' && selectedCategory.addressBookId === book.id,
+      });
+    }
+    if (groups.length > 0) {
+      items.push({
+        key: 'groups-divider',
+        label: 'Groups',
+        category: { type: 'all' },
+        active: false,
+      });
+      for (const g of groups) {
+        items.push({
+          key: `group:${g.id}`,
+          label: getContactDisplayName(g) || 'Group',
+          category: { type: 'group', groupId: g.id },
+          active: selectedCategory.type === 'group' && selectedCategory.groupId === g.id,
+        });
+      }
+    }
+    return items;
+  }, [addressBooks, groups, selectedCategory]);
 
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container} edges={['top']}>
+      <ContactsSidebarDrawer visible={drawerOpen} onClose={() => setDrawerOpen(false)} />
+
       <View style={styles.header}>
-        <Users size={24} color={colors.primary} />
-        <Text style={styles.headerTitle}>Contacts</Text>
-        <Text style={styles.headerCount}>{MOCK_CONTACTS.length}</Text>
+        {selectionMode ? (
+          <>
+            <Pressable onPress={clearSelection} style={styles.headerIconBtn} hitSlop={8}>
+              <X size={22} color={c.text} />
+            </Pressable>
+            <Text style={styles.headerTitle}>{selection.size} selected</Text>
+            <View style={styles.headerActions}>
+              <Pressable
+                onPress={() => setConfirmBulkDelete(true)}
+                style={styles.headerIconBtn}
+                hitSlop={8}
+              >
+                <Trash2 size={20} color={c.error} />
+              </Pressable>
+            </View>
+          </>
+        ) : (
+          <>
+            <Pressable onPress={() => setDrawerOpen(true)} style={styles.headerIconBtn} hitSlop={8}>
+              <Menu size={22} color={c.text} />
+            </Pressable>
+            <Text style={styles.headerTitle} numberOfLines={1}>{title}</Text>
+            <Text style={styles.headerCount}>{visible.length}</Text>
+            <View style={styles.headerActions}>
+              <Pressable
+                onPress={() => setSearchActive((v) => !v)}
+                style={styles.headerIconBtn}
+                hitSlop={8}
+              >
+                <Search size={20} color={c.text} />
+              </Pressable>
+              <Pressable
+                onPress={() => navigation.navigate('ContactForm', {})}
+                style={styles.addBtn}
+                hitSlop={8}
+              >
+                <Plus size={18} color={c.primaryForeground} />
+              </Pressable>
+            </View>
+          </>
+        )}
       </View>
+
+      {searchActive && (
+        <View style={styles.searchBar}>
+          <Search size={16} color={c.textMuted} />
+          <TextInput
+            style={styles.searchInput}
+            placeholder="Search contacts..."
+            placeholderTextColor={c.textMuted}
+            value={searchQuery}
+            onChangeText={setSearchQuery}
+            autoFocus
+          />
+          {searchQuery.length > 0 && (
+            <Pressable onPress={() => setSearchQuery('')} hitSlop={8}>
+              <X size={16} color={c.textMuted} />
+            </Pressable>
+          )}
+        </View>
+      )}
+
+      {!selectionMode && (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          style={styles.chipBar}
+          contentContainerStyle={styles.chipBarContent}
+        >
+          {chips.map((chip) =>
+            chip.key === 'groups-divider' ? (
+              <View key={chip.key} style={styles.chipDivider} />
+            ) : (
+              <Pressable
+                key={chip.key}
+                onPress={() => setSelectedCategory(chip.category)}
+                style={[styles.chip, chip.active && styles.chipActive]}
+              >
+                <Text style={[styles.chipText, chip.active && styles.chipTextActive]} numberOfLines={1}>
+                  {chip.label}
+                </Text>
+              </Pressable>
+            ),
+          )}
+        </ScrollView>
+      )}
+
+      {error && (
+        <View style={styles.errorBanner}>
+          <Text style={styles.errorText}>{error}</Text>
+        </View>
+      )}
+
       <SectionList
         sections={sections}
         keyExtractor={(item) => item.id}
-        renderItem={({ item }) => <ContactRow item={item} />}
-        renderSectionHeader={({ section: { title } }) => (
-          <View style={styles.sectionHeader}>
-            <Text style={styles.sectionTitle}>{title}</Text>
-          </View>
+        renderItem={({ item }) => (
+          <ContactListRow
+            contact={item}
+            onPress={() => handleRowPress(item)}
+            onLongPress={() => handleLongPress(item)}
+            selected={selection.has(item.id)}
+            selectionMode={selectionMode}
+          />
         )}
+        renderSectionHeader={({ section }) =>
+          section.title ? (
+            <View style={styles.sectionHeader}>
+              <Text style={styles.sectionHeaderText}>{section.title}</Text>
+            </View>
+          ) : null
+        }
         ItemSeparatorComponent={() => <View style={styles.separator} />}
+        stickySectionHeadersEnabled
         contentContainerStyle={styles.listContent}
+        refreshControl={
+          <RefreshControl
+            refreshing={loading && hydrated}
+            onRefresh={() => {
+              void fetchContacts();
+              void fetchAddressBooks();
+            }}
+            tintColor={c.primary}
+          />
+        }
+        ListEmptyComponent={
+          loading ? (
+            <View style={styles.emptyState}>
+              <ActivityIndicator color={c.primary} />
+            </View>
+          ) : (
+            <View style={styles.emptyState}>
+              <UserCircle size={48} color={c.surfaceActive} />
+              <Text style={styles.emptyTitle}>
+                {searchQuery ? 'No contacts found' : 'No contacts yet'}
+              </Text>
+              <Text style={styles.emptySubtitle}>
+                {searchQuery ? 'Try a different search' : 'Tap + to add one'}
+              </Text>
+            </View>
+          )
+        }
       />
-    </View>
+
+      <Dialog
+        visible={confirmBulkDelete}
+        title="Delete contacts"
+        message={`Delete ${selection.size} contact${selection.size === 1 ? '' : 's'}? This cannot be undone.`}
+        variant="destructive"
+        confirmText="Delete"
+        onConfirm={doBulkDelete}
+        onCancel={() => setConfirmBulkDelete(false)}
+      />
+    </SafeAreaView>
   );
 }
 
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+  container: { flex: 1, backgroundColor: c.background },
+  listContent: { paddingBottom: 80 },
+
   header: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.border,
-    gap: 8,
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.md,
+    gap: spacing.sm,
   },
-  headerTitle: { fontSize: 20, fontWeight: '700', color: colors.text, flex: 1 },
-  headerCount: { fontSize: 13, color: colors.textSecondary },
-  listContent: { paddingBottom: 20 },
-  sectionHeader: {
-    backgroundColor: colors.surface,
-    paddingHorizontal: 16,
-    paddingVertical: 6,
+  headerTitle: { ...typography.h3, color: c.text, flexShrink: 1 },
+  headerCount: {
+    ...typography.small,
+    color: c.textMuted,
+    backgroundColor: c.surface,
+    borderRadius: radius.full,
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    overflow: 'hidden',
   },
-  sectionTitle: { fontSize: 13, fontWeight: '600', color: colors.textSecondary },
-  contactRow: {
+  headerActions: {
+    flex: 1,
     flexDirection: 'row',
+    justifyContent: 'flex-end',
     alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 10,
+    gap: spacing.sm,
   },
-  contactRowPressed: { backgroundColor: colors.surfaceHover },
-  avatar: {
+  headerIconBtn: {
     width: 40,
     height: 40,
-    borderRadius: 20,
-    backgroundColor: colors.primaryLight,
     alignItems: 'center',
     justifyContent: 'center',
-    marginRight: 12,
+    borderRadius: radius.full,
   },
-  avatarText: { fontSize: 16, fontWeight: '600', color: colors.textInverse },
-  contactInfo: { flex: 1 },
-  contactName: { fontSize: 15, fontWeight: '500', color: colors.text },
-  contactEmail: { fontSize: 13, color: colors.textSecondary, marginTop: 2 },
-  separator: { height: 1, backgroundColor: colors.borderLight, marginLeft: 68 },
-});
+  addBtn: {
+    width: 36,
+    height: 36,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: c.primary,
+    borderRadius: radius.full,
+  },
+
+  searchBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: spacing.lg,
+    marginBottom: spacing.md,
+    paddingHorizontal: spacing.md,
+    height: componentSizes.inputHeight,
+    backgroundColor: c.background,
+    borderRadius: radius.sm,
+    borderWidth: 1,
+    borderColor: c.border,
+    gap: spacing.sm,
+  },
+  searchInput: { flex: 1, ...typography.body, color: c.text, paddingVertical: 0 },
+
+  chipBar: { flexGrow: 0, marginBottom: spacing.sm },
+  chipBarContent: {
+    paddingHorizontal: spacing.lg,
+    gap: spacing.sm,
+    alignItems: 'center',
+  },
+  chip: {
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.xs,
+    borderRadius: radius.full,
+    backgroundColor: c.surface,
+    borderWidth: 1,
+    borderColor: c.border,
+  },
+  chipActive: {
+    backgroundColor: c.primary,
+    borderColor: c.primary,
+  },
+  chipText: { ...typography.captionMedium, color: c.textSecondary },
+  chipTextActive: { color: c.primaryForeground },
+  chipDivider: {
+    width: 1,
+    height: 16,
+    backgroundColor: c.border,
+    marginHorizontal: spacing.xs,
+  },
+
+  sectionHeader: {
+    backgroundColor: c.background,
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.xs,
+    borderBottomWidth: 1,
+    borderBottomColor: c.borderLight,
+  },
+  sectionHeaderText: { ...typography.small, color: c.primary },
+
+  separator: { height: 1, backgroundColor: c.borderLight, marginLeft: 68 },
+
+  errorBanner: {
+    marginHorizontal: spacing.lg,
+    marginBottom: spacing.sm,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.sm,
+    backgroundColor: c.errorBg,
+    borderWidth: 1,
+    borderColor: c.errorBorder,
+  },
+  errorText: { ...typography.caption, color: c.errorForeground },
+
+  emptyState: {
+    alignItems: 'center',
+    paddingVertical: spacing.xxxl * 2,
+    gap: spacing.sm,
+  },
+  emptyTitle: { ...typography.bodyMedium, color: c.textSecondary },
+  emptySubtitle: { ...typography.caption, color: c.textMuted },
+  });
+}

src/screens/ContactsScreenNew.tsx

@@ -1,500 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  SectionList,
-  Pressable,
-  TextInput,
-  ActivityIndicator,
-  RefreshControl,
-  ScrollView,
-} from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { useNavigation } from '@react-navigation/native';
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import {
-  Search, Plus, UserCircle, X, Menu, Trash2, Tag, FolderInput,
-} from 'lucide-react-native';
-import type { RootStackParamList } from '../navigation/types';
-import type { ContactCard } from '../api/types';
-import {
-  useContactsStore,
-  sortContactsByDisplayName,
-  selectGroupMembers,
-  type ContactCategory,
-} from '../stores/contacts-store';
-import { getContactDisplayName, isGroup, matchesContactSearch } from '../lib/contact-utils';
-import { ContactListRow } from '../components/contacts';
-import Dialog from '../components/Dialog';
-import ContactsSidebarDrawer from '../components/contacts/ContactsSidebarDrawer';
-import { useSettingsStore } from '../stores/settings-store';
-import { colors, spacing, radius, typography, componentSizes } from '../theme/tokens';
-
-type Nav = NativeStackNavigationProp<RootStackParamList>;
-
-interface Section {
-  title: string;
-  data: ContactCard[];
-}
-
-function groupContacts(contacts: ContactCard[]): Section[] {
-  const sorted = sortContactsByDisplayName(contacts);
-  const groups: Record<string, ContactCard[]> = {};
-  for (const c of sorted) {
-    const name = getContactDisplayName(c).trim();
-    const letter = (name[0] || '#').toUpperCase();
-    const key = /[A-Z]/.test(letter) ? letter : '#';
-    if (!groups[key]) groups[key] = [];
-    groups[key].push(c);
-  }
-  return Object.keys(groups)
-    .sort((a, b) => {
-      if (a === '#') return 1;
-      if (b === '#') return -1;
-      return a.localeCompare(b);
-    })
-    .map((title) => ({ title, data: groups[title] }));
-}
-
-function categoryTitle(category: ContactCategory, books: Array<{ id: string; name: string }>, groups: ContactCard[]): string {
-  switch (category.type) {
-    case 'all':
-      return 'All Contacts';
-    case 'addressBook':
-      return books.find((b) => b.id === category.addressBookId)?.name || 'Address Book';
-    case 'group': {
-      const g = groups.find((c) => c.id === category.groupId);
-      return g ? getContactDisplayName(g) || 'Group' : 'Group';
-    }
-    case 'keyword':
-      return `#${category.keyword}`;
-    case 'uncategorized':
-      return 'Uncategorized';
-    default:
-      return 'Contacts';
-  }
-}
-
-export default function ContactsScreen() {
-  const navigation = useNavigation<Nav>();
-  const contacts = useContactsStore((s) => s.contacts);
-  const addressBooks = useContactsStore((s) => s.addressBooks);
-  const loading = useContactsStore((s) => s.loading);
-  const error = useContactsStore((s) => s.error);
-  const selectedCategory = useContactsStore((s) => s.selectedCategory);
-  const hydrated = useContactsStore((s) => s.hydrated);
-  const fetchAddressBooks = useContactsStore((s) => s.fetchAddressBooks);
-  const fetchContacts = useContactsStore((s) => s.fetchContacts);
-  const hydrate = useContactsStore((s) => s.hydrate);
-  const bulkDelete = useContactsStore((s) => s.bulkDelete);
-  const setSelectedCategory = useContactsStore((s) => s.setSelectedCategory);
-  const groupByLetter = useSettingsStore((s) => s.groupContactsByLetter);
-
-  const [searchQuery, setSearchQuery] = React.useState('');
-  const [searchActive, setSearchActive] = React.useState(false);
-  const [drawerOpen, setDrawerOpen] = React.useState(false);
-  const [selection, setSelection] = React.useState<Set<string>>(new Set());
-  const [confirmBulkDelete, setConfirmBulkDelete] = React.useState(false);
-
-  React.useEffect(() => {
-    void hydrate();
-  }, [hydrate]);
-
-  React.useEffect(() => {
-    void fetchAddressBooks();
-    void fetchContacts();
-  }, [fetchAddressBooks, fetchContacts]);
-
-  const groups = React.useMemo(() => contacts.filter(isGroup), [contacts]);
-  const individuals = React.useMemo(() => contacts.filter((c) => !isGroup(c)), [contacts]);
-
-  const visible = React.useMemo(() => {
-    let filtered: ContactCard[];
-    switch (selectedCategory.type) {
-      case 'all':
-        filtered = individuals;
-        break;
-      case 'addressBook':
-        filtered = individuals.filter((c) => c.addressBookIds?.[selectedCategory.addressBookId]);
-        break;
-      case 'group':
-        filtered = selectGroupMembers(
-          { contacts } as Parameters<typeof selectGroupMembers>[0],
-          selectedCategory.groupId,
-        ).filter((c) => !isGroup(c));
-        break;
-      case 'keyword':
-        filtered = individuals.filter((c) => c.keywords?.[selectedCategory.keyword]);
-        break;
-      case 'uncategorized':
-        filtered = individuals.filter(
-          (c) => !c.addressBookIds || Object.keys(c.addressBookIds).length === 0,
-        );
-        break;
-      default:
-        filtered = individuals;
-    }
-    if (!searchQuery) return filtered;
-    return filtered.filter((c) => matchesContactSearch(c, searchQuery));
-  }, [contacts, individuals, selectedCategory, searchQuery]);
-
-  const sections = React.useMemo<Section[]>(() => {
-    if (groupByLetter) return groupContacts(visible);
-    // Flat list - single unnamed section keeps SectionList rendering simple.
-    return [{ title: '', data: sortContactsByDisplayName(visible) }];
-  }, [visible, groupByLetter]);
-
-  const selectionMode = selection.size > 0;
-  const toggleSelect = (id: string) => {
-    setSelection((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-
-  const handleRowPress = (c: ContactCard) => {
-    if (selectionMode) {
-      toggleSelect(c.id);
-      return;
-    }
-    if (isGroup(c)) {
-      navigation.navigate('GroupDetail', { groupId: c.id });
-    } else {
-      navigation.navigate('ContactDetail', { contactId: c.id });
-    }
-  };
-
-  const handleLongPress = (c: ContactCard) => {
-    toggleSelect(c.id);
-  };
-
-  const clearSelection = () => setSelection(new Set());
-
-  const doBulkDelete = async () => {
-    const ids = Array.from(selection);
-    setConfirmBulkDelete(false);
-    clearSelection();
-    await bulkDelete(ids);
-  };
-
-  const title = categoryTitle(selectedCategory, addressBooks, groups);
-
-  // Top chip row: All / per-address-book / Groups
-  const chips = React.useMemo(() => {
-    const items: Array<{ key: string; label: string; category: ContactCategory; active: boolean }> = [
-      {
-        key: 'all',
-        label: 'All',
-        category: { type: 'all' },
-        active: selectedCategory.type === 'all',
-      },
-    ];
-    for (const book of addressBooks) {
-      items.push({
-        key: `book:${book.id}`,
-        label: book.name,
-        category: { type: 'addressBook', addressBookId: book.id },
-        active: selectedCategory.type === 'addressBook' && selectedCategory.addressBookId === book.id,
-      });
-    }
-    if (groups.length > 0) {
-      items.push({
-        key: 'groups-divider',
-        label: 'Groups',
-        category: { type: 'all' },
-        active: false,
-      });
-      for (const g of groups) {
-        items.push({
-          key: `group:${g.id}`,
-          label: getContactDisplayName(g) || 'Group',
-          category: { type: 'group', groupId: g.id },
-          active: selectedCategory.type === 'group' && selectedCategory.groupId === g.id,
-        });
-      }
-    }
-    return items;
-  }, [addressBooks, groups, selectedCategory]);
-
-  return (
-    <SafeAreaView style={styles.container} edges={['top']}>
-      <ContactsSidebarDrawer visible={drawerOpen} onClose={() => setDrawerOpen(false)} />
-
-      <View style={styles.header}>
-        {selectionMode ? (
-          <>
-            <Pressable onPress={clearSelection} style={styles.headerIconBtn} hitSlop={8}>
-              <X size={22} color={colors.text} />
-            </Pressable>
-            <Text style={styles.headerTitle}>{selection.size} selected</Text>
-            <View style={styles.headerActions}>
-              <Pressable
-                onPress={() => setConfirmBulkDelete(true)}
-                style={styles.headerIconBtn}
-                hitSlop={8}
-              >
-                <Trash2 size={20} color={colors.error} />
-              </Pressable>
-            </View>
-          </>
-        ) : (
-          <>
-            <Pressable onPress={() => setDrawerOpen(true)} style={styles.headerIconBtn} hitSlop={8}>
-              <Menu size={22} color={colors.text} />
-            </Pressable>
-            <Text style={styles.headerTitle} numberOfLines={1}>{title}</Text>
-            <Text style={styles.headerCount}>{visible.length}</Text>
-            <View style={styles.headerActions}>
-              <Pressable
-                onPress={() => setSearchActive((v) => !v)}
-                style={styles.headerIconBtn}
-                hitSlop={8}
-              >
-                <Search size={20} color={colors.text} />
-              </Pressable>
-              <Pressable
-                onPress={() => navigation.navigate('ContactForm', {})}
-                style={styles.addBtn}
-                hitSlop={8}
-              >
-                <Plus size={18} color={colors.primaryForeground} />
-              </Pressable>
-            </View>
-          </>
-        )}
-      </View>
-
-      {searchActive && (
-        <View style={styles.searchBar}>
-          <Search size={16} color={colors.textMuted} />
-          <TextInput
-            style={styles.searchInput}
-            placeholder="Search contacts..."
-            placeholderTextColor={colors.textMuted}
-            value={searchQuery}
-            onChangeText={setSearchQuery}
-            autoFocus
-          />
-          {searchQuery.length > 0 && (
-            <Pressable onPress={() => setSearchQuery('')} hitSlop={8}>
-              <X size={16} color={colors.textMuted} />
-            </Pressable>
-          )}
-        </View>
-      )}
-
-      {!selectionMode && (
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          style={styles.chipBar}
-          contentContainerStyle={styles.chipBarContent}
-        >
-          {chips.map((chip) =>
-            chip.key === 'groups-divider' ? (
-              <View key={chip.key} style={styles.chipDivider} />
-            ) : (
-              <Pressable
-                key={chip.key}
-                onPress={() => setSelectedCategory(chip.category)}
-                style={[styles.chip, chip.active && styles.chipActive]}
-              >
-                <Text style={[styles.chipText, chip.active && styles.chipTextActive]} numberOfLines={1}>
-                  {chip.label}
-                </Text>
-              </Pressable>
-            ),
-          )}
-        </ScrollView>
-      )}
-
-      {error && (
-        <View style={styles.errorBanner}>
-          <Text style={styles.errorText}>{error}</Text>
-        </View>
-      )}
-
-      <SectionList
-        sections={sections}
-        keyExtractor={(item) => item.id}
-        renderItem={({ item }) => (
-          <ContactListRow
-            contact={item}
-            onPress={() => handleRowPress(item)}
-            onLongPress={() => handleLongPress(item)}
-            selected={selection.has(item.id)}
-            selectionMode={selectionMode}
-          />
-        )}
-        renderSectionHeader={({ section }) =>
-          section.title ? (
-            <View style={styles.sectionHeader}>
-              <Text style={styles.sectionHeaderText}>{section.title}</Text>
-            </View>
-          ) : null
-        }
-        ItemSeparatorComponent={() => <View style={styles.separator} />}
-        stickySectionHeadersEnabled
-        contentContainerStyle={styles.listContent}
-        refreshControl={
-          <RefreshControl
-            refreshing={loading && hydrated}
-            onRefresh={() => {
-              void fetchContacts();
-              void fetchAddressBooks();
-            }}
-            tintColor={colors.primary}
-          />
-        }
-        ListEmptyComponent={
-          loading ? (
-            <View style={styles.emptyState}>
-              <ActivityIndicator color={colors.primary} />
-            </View>
-          ) : (
-            <View style={styles.emptyState}>
-              <UserCircle size={48} color={colors.surfaceActive} />
-              <Text style={styles.emptyTitle}>
-                {searchQuery ? 'No contacts found' : 'No contacts yet'}
-              </Text>
-              <Text style={styles.emptySubtitle}>
-                {searchQuery ? 'Try a different search' : 'Tap + to add one'}
-              </Text>
-            </View>
-          )
-        }
-      />
-
-      <Dialog
-        visible={confirmBulkDelete}
-        title="Delete contacts"
-        message={`Delete ${selection.size} contact${selection.size === 1 ? '' : 's'}? This cannot be undone.`}
-        variant="destructive"
-        confirmText="Delete"
-        onConfirm={doBulkDelete}
-        onCancel={() => setConfirmBulkDelete(false)}
-      />
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
-  listContent: { paddingBottom: 80 },
-
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: spacing.lg,
-    paddingVertical: spacing.md,
-    gap: spacing.sm,
-  },
-  headerTitle: { ...typography.h3, color: colors.text, flexShrink: 1 },
-  headerCount: {
-    ...typography.small,
-    color: colors.textMuted,
-    backgroundColor: colors.surface,
-    borderRadius: radius.full,
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    overflow: 'hidden',
-  },
-  headerActions: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-    gap: spacing.sm,
-  },
-  headerIconBtn: {
-    width: 40,
-    height: 40,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: radius.full,
-  },
-  addBtn: {
-    width: 36,
-    height: 36,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: colors.primary,
-    borderRadius: radius.full,
-  },
-
-  searchBar: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginHorizontal: spacing.lg,
-    marginBottom: spacing.md,
-    paddingHorizontal: spacing.md,
-    height: componentSizes.inputHeight,
-    backgroundColor: colors.background,
-    borderRadius: radius.sm,
-    borderWidth: 1,
-    borderColor: colors.border,
-    gap: spacing.sm,
-  },
-  searchInput: { flex: 1, ...typography.body, color: colors.text, paddingVertical: 0 },
-
-  chipBar: { flexGrow: 0, marginBottom: spacing.sm },
-  chipBarContent: {
-    paddingHorizontal: spacing.lg,
-    gap: spacing.sm,
-    alignItems: 'center',
-  },
-  chip: {
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.xs,
-    borderRadius: radius.full,
-    backgroundColor: colors.surface,
-    borderWidth: 1,
-    borderColor: colors.border,
-  },
-  chipActive: {
-    backgroundColor: colors.primary,
-    borderColor: colors.primary,
-  },
-  chipText: { ...typography.captionMedium, color: colors.textSecondary },
-  chipTextActive: { color: colors.primaryForeground },
-  chipDivider: {
-    width: 1,
-    height: 16,
-    backgroundColor: colors.border,
-    marginHorizontal: spacing.xs,
-  },
-
-  sectionHeader: {
-    backgroundColor: colors.background,
-    paddingHorizontal: spacing.lg,
-    paddingVertical: spacing.xs,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.borderLight,
-  },
-  sectionHeaderText: { ...typography.small, color: colors.primary },
-
-  separator: { height: 1, backgroundColor: colors.borderLight, marginLeft: 68 },
-
-  errorBanner: {
-    marginHorizontal: spacing.lg,
-    marginBottom: spacing.sm,
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.sm,
-    borderRadius: radius.sm,
-    backgroundColor: colors.errorBg,
-    borderWidth: 1,
-    borderColor: colors.errorBorder,
-  },
-  errorText: { ...typography.caption, color: colors.errorForeground },
-
-  emptyState: {
-    alignItems: 'center',
-    paddingVertical: spacing.xxxl * 2,
-    gap: spacing.sm,
-  },
-  emptyTitle: { ...typography.bodyMedium, color: colors.textSecondary },
-  emptySubtitle: { ...typography.caption, color: colors.textMuted },
-});

src/screens/EmailListScreen.tsx

@@ -6,10 +6,15 @@ import {
   Search, SquarePen, Menu, Filter, Square, SquareCheck, Minus, X,
   Star, Paperclip, Mail as MailIcon, MailOpen, Trash2, RotateCcw, CalendarDays,
 } from 'lucide-react-native';
-import { colors, spacing, radius, typography, componentSizes } from '../theme/tokens';
+import { spacing, radius, typography, componentSizes, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
 import SidebarDrawer from '../components/SidebarDrawer';
 import SenderAvatar from '../components/SenderAvatar';
+import { SwipeableRow } from '../components/SwipeableRow';
+import { OfflineBanner } from '../components/OfflineBanner';
+import { useNetworkStore } from '../stores/network-store';
 import { useEmailStore, type EmailFilters } from '../stores/email-store';
+import { useSettingsStore, type SwipeAction } from '../stores/settings-store';
 import type { Email } from '../api/types';
 
 function getSenderName(email: Email): string {
@@ -43,7 +48,7 @@ function formatRelativeTime(date: Date): string {
   return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
 }
 
-function EmailRow({
+const EmailRow = React.memo(function EmailRow({
   item,
   onPress,
   onLongPress,
@@ -51,16 +56,21 @@ function EmailRow({
   selectionMode,
 }: {
   item: Email;
-  onPress: () => void;
-  onLongPress: () => void;
+  onPress: (id: string) => void;
+  onLongPress: (id: string) => void;
   selected: boolean;
   selectionMode: boolean;
 }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const senderName = getSenderName(item);
   const senderEmail = getSenderEmail(item);
   const unread = isUnread(item);
   const starred = isStarred(item);
 
+  const handlePress = React.useCallback(() => onPress(item.id), [onPress, item.id]);
+  const handleLongPress = React.useCallback(() => onLongPress(item.id), [onLongPress, item.id]);
+
   return (
     <Pressable
       style={({ pressed }) => [
@@ -68,16 +78,16 @@ function EmailRow({
         pressed && styles.emailRowPressed,
         selected && styles.emailRowSelected,
       ]}
-      onPress={onPress}
-      onLongPress={onLongPress}
+      onPress={handlePress}
+      onLongPress={handleLongPress}
       delayLongPress={300}
     >
       {selectionMode && (
         <View style={styles.rowCheckboxWrap}>
           {selected ? (
-            <SquareCheck size={16} color={colors.primary} />
+            <SquareCheck size={16} color={c.primary} />
           ) : (
-            <Square size={16} color={colors.textMuted} />
+            <Square size={16} color={c.textMuted} />
           )}
         </View>
       )}
@@ -92,10 +102,10 @@ function EmailRow({
               {senderName}
             </Text>
             {starred && (
-              <Star size={componentSizes.statusIcon} color={colors.starred} fill={colors.starred} />
+              <Star size={componentSizes.statusIcon} color={c.starred} fill={c.starred} />
             )}
             {item.hasAttachment && (
-              <Paperclip size={componentSizes.statusIcon} color={colors.textMuted} />
+              <Paperclip size={componentSizes.statusIcon} color={c.textMuted} />
             )}
           </View>
           <View style={styles.timeAndTag}>
@@ -117,7 +127,11 @@ function EmailRow({
       </View>
     </Pressable>
   );
-}
+});
+
+const EmailRowSeparator = () => <View style={styles.separator} />;
+
+const emailKeyExtractor = (item: Email) => item.id;
 
 interface EmailListScreenProps {
   onEmailPress?: (email: Email) => void;
@@ -125,6 +139,8 @@ interface EmailListScreenProps {
 }
 
 export default function EmailListScreen({ onEmailPress, onComposePress }: EmailListScreenProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const [drawerOpen, setDrawerOpen] = React.useState(false);
   const [filterMenuOpen, setFilterMenuOpen] = React.useState(false);
   const emails = useEmailStore((s) => s.emails);
@@ -145,6 +161,24 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
   const markUnread = useEmailStore((s) => s.markUnread);
   const toggleStar = useEmailStore((s) => s.toggleStar);
   const deleteEmailAction = useEmailStore((s) => s.deleteEmail);
+  const moveToMailboxAction = useEmailStore((s) => s.moveToMailbox);
+
+  const swipeLeftAction = useSettingsStore((s) => s.swipeLeftAction);
+  const swipeRightAction = useSettingsStore((s) => s.swipeRightAction);
+  const networkOnline = useNetworkStore((s) => s.online);
+
+  const archiveMailboxId = React.useMemo(
+    () => mailboxes.find((m) => m.role === 'archive')?.id ?? null,
+    [mailboxes],
+  );
+  const trashMailboxId = React.useMemo(
+    () => mailboxes.find((m) => m.role === 'trash')?.id ?? null,
+    [mailboxes],
+  );
+  const junkMailboxId = React.useMemo(
+    () => mailboxes.find((m) => m.role === 'junk' || m.role === 'spam')?.id ?? null,
+    [mailboxes],
+  );
 
   // Selection state
   const [selectedIds, setSelectedIds] = React.useState<Set<string>>(new Set());
@@ -152,6 +186,16 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
   const allSelected =
     emails.length > 0 && emails.every((e) => selectedIds.has(e.id));
 
+  // Refs so row press handlers stay referentially stable across renders.
+  // FlatList rows then skip re-render when the parent re-renders for unrelated
+  // reasons (e.g. opening the filter modal).
+  const onEmailPressRef = React.useRef(onEmailPress);
+  React.useEffect(() => { onEmailPressRef.current = onEmailPress; }, [onEmailPress]);
+  const selectionModeRef = React.useRef(selectionMode);
+  React.useEffect(() => { selectionModeRef.current = selectionMode; }, [selectionMode]);
+  const emailsRef = React.useRef(emails);
+  React.useEffect(() => { emailsRef.current = emails; }, [emails]);
+
   const toggleSelect = React.useCallback((id: string) => {
     setSelectedIds((prev) => {
       const next = new Set(prev);
@@ -161,6 +205,68 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
     });
   }, []);
 
+  const handleRowPress = React.useCallback((id: string) => {
+    if (selectionModeRef.current) {
+      toggleSelect(id);
+    } else {
+      const email = emailsRef.current.find((e) => e.id === id);
+      if (email) onEmailPressRef.current?.(email);
+    }
+  }, [toggleSelect]);
+
+  const handleSwipeAction = React.useCallback((id: string, action: SwipeAction) => {
+    if (action === 'none') return;
+    const email = emailsRef.current.find((e) => e.id === id);
+    if (!email || !currentMailboxId) return;
+    switch (action) {
+      case 'archive':
+        if (archiveMailboxId && currentMailboxId !== archiveMailboxId) {
+          void moveToMailboxAction(id, currentMailboxId, archiveMailboxId);
+        }
+        break;
+      case 'delete':
+        if (trashMailboxId) {
+          void deleteEmailAction(id, trashMailboxId, currentMailboxId);
+        }
+        break;
+      case 'spam':
+        if (junkMailboxId && currentMailboxId !== junkMailboxId) {
+          void moveToMailboxAction(id, currentMailboxId, junkMailboxId);
+        }
+        break;
+      case 'read':
+        if (isUnread(email)) void markRead(id);
+        else void markUnread(id);
+        break;
+      case 'star':
+        void toggleStar(id);
+        break;
+    }
+  }, [
+    currentMailboxId, archiveMailboxId, trashMailboxId, junkMailboxId,
+    moveToMailboxAction, deleteEmailAction, markRead, markUnread, toggleStar,
+  ]);
+
+  const renderEmailRow = React.useCallback(
+    ({ item }: { item: Email }) => (
+      <SwipeableRow
+        leftAction={selectionMode ? 'none' : swipeLeftAction}
+        rightAction={selectionMode ? 'none' : swipeRightAction}
+        context={{ unread: isUnread(item), starred: isStarred(item) }}
+        onAction={(action) => handleSwipeAction(item.id, action)}
+      >
+        <EmailRow
+          item={item}
+          selected={selectedIds.has(item.id)}
+          selectionMode={selectionMode}
+          onPress={handleRowPress}
+          onLongPress={toggleSelect}
+        />
+      </SwipeableRow>
+    ),
+    [selectedIds, selectionMode, handleRowPress, toggleSelect, swipeLeftAction, swipeRightAction, handleSwipeAction],
+  );
+
   const clearSelection = React.useCallback(() => {
     setSelectedIds(new Set());
   }, []);
@@ -284,7 +390,7 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
       {selectionMode ? (
         <View style={styles.header}>
           <Pressable onPress={clearSelection} style={styles.headerButton}>
-            <X size={20} color={colors.text} />
+            <X size={20} color={c.text} />
           </Pressable>
           <Text style={styles.headerTitle}>{selectedIds.size} selected</Text>
           <Pressable
@@ -294,8 +400,8 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
           >
             <Star
               size={20}
-              color={allSelectedAreStarred ? colors.starred : colors.text}
-              fill={allSelectedAreStarred ? colors.starred : 'transparent'}
+              color={allSelectedAreStarred ? c.starred : c.text}
+              fill={allSelectedAreStarred ? c.starred : 'transparent'}
             />
           </Pressable>
           <Pressable
@@ -304,9 +410,9 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
             hitSlop={6}
           >
             {allSelectedAreRead ? (
-              <MailIcon size={20} color={colors.text} />
+              <MailIcon size={20} color={c.text} />
             ) : (
-              <MailOpen size={20} color={colors.text} />
+              <MailOpen size={20} color={c.text} />
             )}
           </Pressable>
           <Pressable
@@ -314,13 +420,13 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
             style={styles.headerButton}
             hitSlop={6}
           >
-            <Trash2 size={20} color={colors.text} />
+            <Trash2 size={20} color={c.text} />
           </Pressable>
         </View>
       ) : (
         <View style={styles.header}>
           <Pressable onPress={() => setDrawerOpen(true)} style={styles.headerButton}>
-            <Menu size={20} color={colors.textMuted} />
+            <Menu size={20} color={c.textMuted} />
           </Pressable>
           <Text style={styles.headerTitle}>{currentMailbox?.name ?? 'Inbox'}</Text>
           <View style={{ flex: 1 }} />
@@ -336,21 +442,21 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
       <View style={styles.searchBar}>
         <Pressable style={styles.checkboxButton} onPress={toggleSelectAllVisible} hitSlop={6}>
           {allSelected ? (
-            <SquareCheck size={18} color={colors.primary} />
+            <SquareCheck size={18} color={c.primary} />
           ) : selectionMode ? (
             <View style={styles.checkboxIndeterminate}>
-              <Minus size={14} color={colors.background} />
+              <Minus size={14} color={c.background} />
             </View>
           ) : (
-            <Square size={18} color={colors.textMuted} />
+            <Square size={18} color={c.textMuted} />
           )}
         </Pressable>
         <View style={styles.searchInputArea}>
-          <Search size={16} color={colors.textMuted} />
+          <Search size={16} color={c.textMuted} />
           <TextInput
             style={styles.searchInput}
             placeholder="Search mail..."
-            placeholderTextColor={colors.textMuted}
+            placeholderTextColor={c.textMuted}
             value={searchInput}
             onChangeText={setSearchInput}
             autoCapitalize="none"
@@ -363,7 +469,7 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
               hitSlop={8}
               style={styles.searchClearButton}
             >
-              <X size={14} color={colors.textMuted} />
+              <X size={14} color={c.textMuted} />
             </Pressable>
           )}
         </View>
@@ -371,7 +477,7 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
           style={[styles.filterButton, activeFilterCount > 0 && styles.filterButtonActive]}
           onPress={() => setFilterMenuOpen(true)}
         >
-          <Filter size={18} color={activeFilterCount > 0 ? colors.primary : colors.textMuted} />
+          <Filter size={18} color={activeFilterCount > 0 ? c.primary : c.textMuted} />
           {activeFilterCount > 0 && (
             <View style={styles.filterBadge}>
               <Text style={styles.filterBadgeText}>{activeFilterCount}</Text>
@@ -384,7 +490,7 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
         <View style={styles.filterChipsRow}>
           {storeSearchQuery ? (
             <View style={styles.chip}>
-              <Search size={12} color={colors.textSecondary} />
+              <Search size={12} color={c.textSecondary} />
               <Text style={styles.chipText} numberOfLines={1}>
                 {storeSearchQuery}
               </Text>
@@ -407,35 +513,35 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
           ) : null}
           {filters.dateAfter ? (
             <View style={styles.chip}>
-              <CalendarDays size={12} color={colors.textSecondary} />
+              <CalendarDays size={12} color={c.textSecondary} />
               <Text style={styles.chipText}>After {filters.dateAfter}</Text>
             </View>
           ) : null}
           {filters.dateBefore ? (
             <View style={styles.chip}>
-              <CalendarDays size={12} color={colors.textSecondary} />
+              <CalendarDays size={12} color={c.textSecondary} />
               <Text style={styles.chipText}>Before {filters.dateBefore}</Text>
             </View>
           ) : null}
           {filters.isUnread !== undefined && (
             <View style={styles.chip}>
               {filters.isUnread ? (
-                <MailIcon size={12} color={colors.textSecondary} />
+                <MailIcon size={12} color={c.textSecondary} />
               ) : (
-                <MailOpen size={12} color={colors.textSecondary} />
+                <MailOpen size={12} color={c.textSecondary} />
               )}
               <Text style={styles.chipText}>{filters.isUnread ? 'Unread' : 'Read'}</Text>
             </View>
           )}
           {filters.isStarred !== undefined && (
             <View style={styles.chip}>
-              <Star size={12} color={colors.starred} fill={filters.isStarred ? colors.starred : 'transparent'} />
+              <Star size={12} color={c.starred} fill={filters.isStarred ? c.starred : 'transparent'} />
               <Text style={styles.chipText}>{filters.isStarred ? 'Starred' : 'Not starred'}</Text>
             </View>
           )}
           {filters.hasAttachment !== undefined && (
             <View style={styles.chip}>
-              <Paperclip size={12} color={colors.textSecondary} />
+              <Paperclip size={12} color={c.textSecondary} />
               <Text style={styles.chipText}>
                 {filters.hasAttachment ? 'Has attachment' : 'No attachment'}
               </Text>
@@ -454,15 +560,19 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
         </View>
       )}
 
+      <OfflineBanner hint={emails.length > 0 ? 'Showing cached mail' : undefined} />
+
       {/* Email list */}
       {loading && emails.length === 0 ? (
         <View style={styles.loadingContainer}>
-          <ActivityIndicator color={colors.primary} />
+          <ActivityIndicator color={c.primary} />
           <Text style={styles.loadingText}>Loading emails...</Text>
         </View>
-      ) : error ? (
+      ) : error && emails.length === 0 ? (
         <View style={styles.loadingContainer}>
-          <Text style={styles.errorText}>{error}</Text>
+          <Text style={styles.errorText}>
+            {networkOnline ? error : 'No connection. Showing nothing because no mail has been cached yet.'}
+          </Text>
           <Pressable onPress={() => { void refreshEmails(); }}>
             <Text style={styles.retryText}>Retry</Text>
           </Pressable>
@@ -488,20 +598,9 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
       ) : (
         <FlatList
           data={emails}
-          keyExtractor={item => item.id}
-          renderItem={({ item }) => (
-            <EmailRow
-              item={item}
-              selected={selectedIds.has(item.id)}
-              selectionMode={selectionMode}
-              onPress={() => {
-                if (selectionMode) toggleSelect(item.id);
-                else onEmailPress?.(item);
-              }}
-              onLongPress={() => toggleSelect(item.id)}
-            />
-          )}
-          ItemSeparatorComponent={() => <View style={styles.separator} />}
+          keyExtractor={emailKeyExtractor}
+          renderItem={renderEmailRow}
+          ItemSeparatorComponent={EmailRowSeparator}
           contentContainerStyle={styles.listContent}
           onEndReached={() => { void loadMoreEmails(); }}
           onEndReachedThreshold={0.3}
@@ -515,7 +614,7 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
         onPress={onComposePress}
         style={({ pressed }) => [styles.fab, pressed && styles.fabPressed]}
       >
-        <SquarePen size={24} color={colors.background} />
+        <SquarePen size={24} color={c.background} />
       </Pressable>
 
       <SidebarDrawer visible={drawerOpen} onClose={() => setDrawerOpen(false)} />
@@ -538,7 +637,7 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
                       style={styles.filterMenuHeaderBtn}
                       hitSlop={6}
                     >
-                      <RotateCcw size={12} color={colors.textSecondary} />
+                      <RotateCcw size={12} color={c.textSecondary} />
                       <Text style={styles.filterMenuHeaderBtnText}>Clear</Text>
                     </Pressable>
                     <Pressable
@@ -546,7 +645,7 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
                       style={styles.filterMenuClose}
                       hitSlop={6}
                     >
-                      <X size={16} color={colors.textSecondary} />
+                      <X size={16} color={c.textSecondary} />
                     </Pressable>
                   </View>
                 </View>
@@ -559,7 +658,7 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
                         value={filters.from ?? ''}
                         onChangeText={(v) => setFilterField('from', v)}
                         placeholder="sender@example.com"
-                        placeholderTextColor={colors.textMuted}
+                        placeholderTextColor={c.textMuted}
                         autoCapitalize="none"
                         autoCorrect={false}
                         style={styles.filterFieldInput}
@@ -571,7 +670,7 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
                         value={filters.to ?? ''}
                         onChangeText={(v) => setFilterField('to', v)}
                         placeholder="recipient@example.com"
-                        placeholderTextColor={colors.textMuted}
+                        placeholderTextColor={c.textMuted}
                         autoCapitalize="none"
                         autoCorrect={false}
                         style={styles.filterFieldInput}
@@ -585,7 +684,7 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
                       value={filters.subject ?? ''}
                       onChangeText={(v) => setFilterField('subject', v)}
                       placeholder="Subject contains..."
-                      placeholderTextColor={colors.textMuted}
+                      placeholderTextColor={c.textMuted}
                       style={styles.filterFieldInput}
                     />
                   </View>
@@ -597,7 +696,7 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
                         style={styles.filterDateButton}
                         onPress={() => setDatePickerField('dateAfter')}
                       >
-                        <CalendarDays size={14} color={colors.textMuted} />
+                        <CalendarDays size={14} color={c.textMuted} />
                         <Text style={[styles.filterDateText, !filters.dateAfter && styles.filterDateTextEmpty]}>
                           {filters.dateAfter || 'YYYY-MM-DD'}
                         </Text>
@@ -606,7 +705,7 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
                             onPress={() => setFilterField('dateAfter', undefined)}
                             hitSlop={6}
                           >
-                            <X size={14} color={colors.textMuted} />
+                            <X size={14} color={c.textMuted} />
                           </Pressable>
                         ) : null}
                       </Pressable>
@@ -617,7 +716,7 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
                         style={styles.filterDateButton}
                         onPress={() => setDatePickerField('dateBefore')}
                       >
-                        <CalendarDays size={14} color={colors.textMuted} />
+                        <CalendarDays size={14} color={c.textMuted} />
                         <Text style={[styles.filterDateText, !filters.dateBefore && styles.filterDateTextEmpty]}>
                           {filters.dateBefore || 'YYYY-MM-DD'}
                         </Text>
@@ -626,7 +725,7 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
                             onPress={() => setFilterField('dateBefore', undefined)}
                             hitSlop={6}
                           >
-                            <X size={14} color={colors.textMuted} />
+                            <X size={14} color={c.textMuted} />
                           </Pressable>
                         ) : null}
                       </Pressable>
@@ -635,13 +734,13 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
 
                   <View style={styles.filterToggleGroup}>
                     <TriToggle
-                      icon={<Paperclip size={14} color={colors.textSecondary} />}
+                      icon={<Paperclip size={14} color={c.textSecondary} />}
                       label="Has attachment"
                       value={filters.hasAttachment}
                       onPress={() => cycleTriState('hasAttachment')}
                     />
                     <TriToggle
-                      icon={<Star size={14} color={colors.starred} fill={filters.isStarred ? colors.starred : 'transparent'} />}
+                      icon={<Star size={14} color={c.starred} fill={filters.isStarred ? c.starred : 'transparent'} />}
                       label="Starred"
                       value={filters.isStarred}
                       onPress={() => cycleTriState('isStarred')}
@@ -649,9 +748,9 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
                     <TriToggle
                       icon={
                         filters.isUnread === false ? (
-                          <MailOpen size={14} color={colors.textSecondary} />
+                          <MailOpen size={14} color={c.textSecondary} />
                         ) : (
-                          <MailIcon size={14} color={colors.textSecondary} />
+                          <MailIcon size={14} color={c.textSecondary} />
                         )
                       }
                       label={filters.isUnread === false ? 'Read' : 'Unread'}
@@ -746,8 +845,9 @@ function TriToggle({
   );
 }
 
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+  container: { flex: 1, backgroundColor: c.background },
 
   // Header - matches web mobile-header: h-14 (56px), px-4, border-b
   header: {
@@ -756,7 +856,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.lg,
     height: componentSizes.headerHeight,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
     gap: spacing.md,
   },
   headerButton: {
@@ -764,7 +864,7 @@ const styles = StyleSheet.create({
     alignItems: 'center', justifyContent: 'center',
     borderRadius: radius.full,
   },
-  headerTitle: { ...typography.h3, color: colors.text, flex: 1 }, // text-lg font-semibold
+  headerTitle: { ...typography.h3, color: c.text, flex: 1 }, // text-lg font-semibold
   headerLogo: {
     width: 28,
     height: 28,
@@ -789,13 +889,13 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingHorizontal: spacing.md,
     height: componentSizes.inputHeight, // h-10 = 40px
-    backgroundColor: colors.surface,
+    backgroundColor: c.surface,
     borderRadius: radius.sm,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     gap: spacing.sm,
   },
-  searchInput: { flex: 1, ...typography.body, color: colors.text },
+  searchInput: { flex: 1, ...typography.body, color: c.text },
   filterButton: {
     width: componentSizes.buttonMd, height: componentSizes.buttonMd,
     alignItems: 'center', justifyContent: 'center',
@@ -803,7 +903,7 @@ const styles = StyleSheet.create({
     position: 'relative',
   },
   filterButtonActive: {
-    backgroundColor: colors.accent,
+    backgroundColor: c.accent,
   },
   filterBadge: {
     position: 'absolute',
@@ -812,7 +912,7 @@ const styles = StyleSheet.create({
     minWidth: 16,
     height: 16,
     borderRadius: 8,
-    backgroundColor: colors.primary,
+    backgroundColor: c.primary,
     alignItems: 'center',
     justifyContent: 'center',
     paddingHorizontal: 4,
@@ -820,7 +920,7 @@ const styles = StyleSheet.create({
   filterBadgeText: {
     fontSize: 10,
     fontWeight: '700',
-    color: colors.primaryForeground,
+    color: c.primaryForeground,
     lineHeight: 14,
   },
   searchClearButton: {
@@ -842,9 +942,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     gap: spacing.xs,
-    backgroundColor: colors.surface,
+    backgroundColor: c.surface,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     borderRadius: radius.full,
     paddingHorizontal: spacing.md,
     paddingVertical: 4,
@@ -852,7 +952,7 @@ const styles = StyleSheet.create({
   },
   chipText: {
     ...typography.caption,
-    color: colors.textSecondary,
+    color: c.textSecondary,
   },
   clearAllButton: {
     paddingHorizontal: spacing.sm,
@@ -860,7 +960,7 @@ const styles = StyleSheet.create({
   },
   clearAllText: {
     ...typography.captionMedium,
-    color: colors.primary,
+    color: c.primary,
   },
   filterBackdrop: {
     flex: 1,
@@ -873,10 +973,10 @@ const styles = StyleSheet.create({
     width: '100%',
     maxWidth: 380,
     maxHeight: '85%',
-    backgroundColor: colors.popover,
+    backgroundColor: c.popover,
     borderRadius: radius.md,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
   },
   filterMenuHeader: {
     flexDirection: 'row',
@@ -886,11 +986,11 @@ const styles = StyleSheet.create({
     paddingTop: spacing.md,
     paddingBottom: spacing.sm,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
   },
   filterMenuTitle: {
     ...typography.bodySemibold,
-    color: colors.text,
+    color: c.text,
   },
   filterMenuHeaderActions: {
     flexDirection: 'row',
@@ -907,7 +1007,7 @@ const styles = StyleSheet.create({
   },
   filterMenuHeaderBtnText: {
     ...typography.caption,
-    color: colors.textSecondary,
+    color: c.textSecondary,
   },
   filterMenuClose: {
     width: 28,
@@ -927,15 +1027,15 @@ const styles = StyleSheet.create({
   filterFieldHalf: { flex: 1 },
   filterFieldLabel: {
     ...typography.caption,
-    color: colors.textMuted,
+    color: c.textMuted,
     marginBottom: 4,
   },
   filterFieldInput: {
     ...typography.body,
-    color: colors.text,
-    backgroundColor: colors.surface,
+    color: c.text,
+    backgroundColor: c.surface,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     borderRadius: radius.sm,
     paddingHorizontal: spacing.md,
     paddingVertical: 6,
@@ -945,20 +1045,20 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     gap: 6,
-    backgroundColor: colors.surface,
+    backgroundColor: c.surface,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     borderRadius: radius.sm,
     paddingHorizontal: spacing.md,
     height: 32,
   },
   filterDateText: {
     ...typography.body,
-    color: colors.text,
+    color: c.text,
     flex: 1,
   },
   filterDateTextEmpty: {
-    color: colors.textMuted,
+    color: c.textMuted,
   },
   filterToggleGroup: {
     flexDirection: 'row',
@@ -975,26 +1075,26 @@ const styles = StyleSheet.create({
     paddingVertical: 4,
     borderRadius: radius.full,
     borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.background,
+    borderColor: c.border,
+    backgroundColor: c.background,
   },
   triToggleOn: {
     backgroundColor: 'rgba(59, 130, 246, 0.1)',
     borderColor: 'rgba(59, 130, 246, 0.3)',
   },
   triToggleOff: {
-    backgroundColor: colors.muted,
-    borderColor: colors.border,
+    backgroundColor: c.muted,
+    borderColor: c.border,
   },
   triToggleText: {
     ...typography.caption,
-    color: colors.textMuted,
+    color: c.textMuted,
   },
   triToggleTextOn: {
-    color: colors.primary,
+    color: c.primary,
   },
   triToggleTextOff: {
-    color: colors.textMuted,
+    color: c.textMuted,
     textDecorationLine: 'line-through',
   },
   pickerOverlay: {
@@ -1006,12 +1106,12 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: colors.popover,
+    backgroundColor: c.popover,
     paddingBottom: spacing.xl,
     borderTopLeftRadius: radius.lg,
     borderTopRightRadius: radius.lg,
     borderTopWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
   },
   pickerHeader: {
     flexDirection: 'row',
@@ -1019,11 +1119,11 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.lg,
     paddingVertical: spacing.sm,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
   },
   pickerDone: {
     ...typography.bodyMedium,
-    color: colors.primary,
+    color: c.primary,
   },
 
   // Email list - matches web email-list-item
@@ -1034,10 +1134,10 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.md,        // py-3 = 12px (density-item-py)
     gap: spacing.md,                    // gap-3 = 12px (density-item-gap)
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,   // border-b border-border
+    borderBottomColor: c.border,   // border-b border-border
   },
-  emailRowPressed: { backgroundColor: colors.surface },
-  emailRowSelected: { backgroundColor: colors.selection },
+  emailRowPressed: { backgroundColor: c.surface },
+  emailRowSelected: { backgroundColor: c.selection },
   rowCheckboxWrap: {
     width: 16,
     height: componentSizes.avatarMd,
@@ -1049,7 +1149,7 @@ const styles = StyleSheet.create({
     width: 18,
     height: 18,
     borderRadius: radius.xs,
-    backgroundColor: colors.primary,
+    backgroundColor: c.primary,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -1068,7 +1168,7 @@ const styles = StyleSheet.create({
     marginRight: spacing.sm,
   },
   // Sender: text-sm, font-medium (read) / font-bold (unread)
-  emailFrom: { ...typography.bodyMedium, color: colors.textSecondary, flexShrink: 1 },
+  emailFrom: { ...typography.bodyMedium, color: c.textSecondary, flexShrink: 1 },
   timeAndTag: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -1079,20 +1179,20 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: 3,
   },
-  threadBadgeText: { ...typography.caption, color: colors.textMuted },
+  threadBadgeText: { ...typography.caption, color: c.textMuted },
   // Date: text-xs (12px), tabular-nums
-  emailDate: { ...typography.caption, color: colors.textMuted },
+  emailDate: { ...typography.caption, color: c.textMuted },
   subjectRow: {
     flexDirection: 'row',
     alignItems: 'center',
     marginBottom: 2,
   },
   // Subject: text-sm (14px), font-semibold (unread) / font-normal (read)
-  emailSubject: { ...typography.body, color: colors.text, flex: 1 },
+  emailSubject: { ...typography.body, color: c.text, flex: 1 },
   // Preview: text-sm, leading-relaxed, line-clamp-2
-  emailPreview: { ...typography.body, color: colors.textSecondary, lineHeight: 20, opacity: 0.8 },
+  emailPreview: { ...typography.body, color: c.textSecondary, lineHeight: 20, opacity: 0.8 },
   // Unread state: text foreground + font-bold
-  textUnread: { fontWeight: '600', color: colors.text },
+  textUnread: { fontWeight: '600', color: c.text },
   textBold: { fontWeight: '700' },
   // Tag pill: text-[10px], rounded-full, px-1.5 py-0.5, gap-1
   tagPill: {
@@ -1119,7 +1219,7 @@ const styles = StyleSheet.create({
     width: componentSizes.fab,       // 56px (h-14)
     height: componentSizes.fab,      // 56px (w-14)
     borderRadius: radius.full,       // rounded-full (circle)
-    backgroundColor: colors.text,    // white - matches webmail mobile FAB
+    backgroundColor: c.text,    // white - matches webmail mobile FAB
     alignItems: 'center',
     justifyContent: 'center',
     elevation: 6,
@@ -1140,26 +1240,27 @@ const styles = StyleSheet.create({
   },
   loadingText: {
     ...typography.body,
-    color: colors.textMuted,
+    color: c.textMuted,
   },
   errorText: {
     ...typography.body,
-    color: colors.error,
+    color: c.error,
     textAlign: 'center',
     paddingHorizontal: spacing.lg,
   },
   retryText: {
     ...typography.bodyMedium,
-    color: colors.primary,
+    color: c.primary,
     marginTop: spacing.sm,
   },
   hintText: {
     ...typography.caption,
-    color: colors.textMuted,
+    color: c.textMuted,
     marginTop: spacing.xs,
     textAlign: 'center',
     paddingHorizontal: spacing.lg,
   },
-});
+  });
+}
 
 export type { EmailListScreenProps };

src/screens/EmailScreen.tsx

@@ -1,106 +0,0 @@
-import React from 'react';
-import { View, Text, StyleSheet, FlatList, Pressable } from 'react-native';
-import { Mail, Star } from 'lucide-react-native';
-import { colors } from '../theme/colors';
-
-const MOCK_EMAILS = [
-  { id: '1', from: 'Alice Johnson', subject: 'Project update for Q2', preview: 'Hi, I wanted to share the latest progress on our Q2 deliverables...', date: '10:30 AM', unread: true, starred: true },
-  { id: '2', from: 'Bob Smith', subject: 'Re: Meeting tomorrow', preview: 'Sounds good! I\'ll bring the presentation slides...', date: '9:15 AM', unread: true, starred: false },
-  { id: '3', from: 'Carol Davis', subject: 'Invoice #1234', preview: 'Please find attached the invoice for March services...', date: 'Yesterday', unread: false, starred: false },
-  { id: '4', from: 'David Wilson', subject: 'Welcome to the team!', preview: 'We\'re excited to have you on board. Here are some resources...', date: 'Yesterday', unread: false, starred: true },
-  { id: '5', from: 'Emma Brown', subject: 'Vacation request', preview: 'I\'d like to request time off from April 15-22...', date: 'Mar 27', unread: false, starred: false },
-  { id: '6', from: 'Frank Miller', subject: 'Security alert', preview: 'We detected a new sign-in to your account from...', date: 'Mar 26', unread: false, starred: false },
-  { id: '7', from: 'Grace Lee', subject: 'Newsletter: March Highlights', preview: 'Here\'s what happened this month in our community...', date: 'Mar 25', unread: false, starred: false },
-  { id: '8', from: 'Henry Taylor', subject: 'Re: Code review', preview: 'Great work on the refactor! I left a few comments...', date: 'Mar 24', unread: false, starred: false },
-];
-
-function EmailRow({ item }: { item: typeof MOCK_EMAILS[0] }) {
-  return (
-    <Pressable style={({ pressed }) => [styles.emailRow, pressed && styles.emailRowPressed]}>
-      <View style={styles.emailLeft}>
-        <View style={[styles.avatar, { backgroundColor: item.unread ? colors.primary : colors.surfaceHover }]}>
-          <Text style={[styles.avatarText, { color: item.unread ? colors.textInverse : colors.textSecondary }]}>
-            {item.from.charAt(0)}
-          </Text>
-        </View>
-      </View>
-      <View style={styles.emailContent}>
-        <View style={styles.emailHeader}>
-          <Text style={[styles.emailFrom, item.unread && styles.emailUnread]} numberOfLines={1}>
-            {item.from}
-          </Text>
-          <Text style={styles.emailDate}>{item.date}</Text>
-        </View>
-        <Text style={[styles.emailSubject, item.unread && styles.emailUnread]} numberOfLines={1}>
-          {item.subject}
-        </Text>
-        <Text style={styles.emailPreview} numberOfLines={1}>
-          {item.preview}
-        </Text>
-      </View>
-      {item.starred && (
-        <Star size={16} color={colors.starred} fill={colors.starred} style={styles.starIcon} />
-      )}
-    </Pressable>
-  );
-}
-
-export default function EmailScreen() {
-  return (
-    <View style={styles.container}>
-      <View style={styles.header}>
-        <Mail size={24} color={colors.primary} />
-        <Text style={styles.headerTitle}>Inbox</Text>
-        <Text style={styles.headerCount}>2 unread</Text>
-      </View>
-      <FlatList
-        data={MOCK_EMAILS}
-        keyExtractor={(item) => item.id}
-        renderItem={({ item }) => <EmailRow item={item} />}
-        ItemSeparatorComponent={() => <View style={styles.separator} />}
-        contentContainerStyle={styles.listContent}
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.border,
-    gap: 8,
-  },
-  headerTitle: { fontSize: 20, fontWeight: '700', color: colors.text, flex: 1 },
-  headerCount: { fontSize: 13, color: colors.textSecondary },
-  listContent: { paddingBottom: 20 },
-  emailRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-  },
-  emailRowPressed: { backgroundColor: colors.surfaceHover },
-  emailLeft: { marginRight: 12 },
-  avatar: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  avatarText: { fontSize: 16, fontWeight: '600' },
-  emailContent: { flex: 1 },
-  emailHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 2 },
-  emailFrom: { fontSize: 15, color: colors.text, flex: 1, marginRight: 8 },
-  emailDate: { fontSize: 12, color: colors.textMuted },
-  emailSubject: { fontSize: 14, color: colors.text, marginBottom: 2 },
-  emailPreview: { fontSize: 13, color: colors.textSecondary },
-  emailUnread: { fontWeight: '700' },
-  separator: { height: 1, backgroundColor: colors.borderLight, marginLeft: 68 },
-  starIcon: { marginLeft: 8 },
-});

src/screens/EmailSourceScreen.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import {
+  View, Text, StyleSheet, ScrollView, ActivityIndicator, Pressable, Alert,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { ArrowLeft, Share2 } from 'lucide-react-native';
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+import type { RootStackParamList } from '../navigation/types';
+import { fetchRawEmail, shareEmailEml } from '../lib/email-export';
+import { spacing, typography, componentSizes, radius, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
+
+type Props = NativeStackScreenProps<RootStackParamList, 'EmailSource'>;
+
+export default function EmailSourceScreen({ route, navigation }: Props) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  const { blobId, subject } = route.params;
+  const [raw, setRaw] = React.useState<string | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const text = await fetchRawEmail(blobId);
+        if (!cancelled) setRaw(text);
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Failed to load email source');
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [blobId]);
+
+  const onShare = async () => {
+    try {
+      await shareEmailEml(blobId, subject);
+    } catch (e) {
+      Alert.alert('Share failed', e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  return (
+    <SafeAreaView style={styles.container} edges={['top']}>
+      <View style={styles.header}>
+        <Pressable onPress={() => navigation.goBack()} style={styles.headerBtn} hitSlop={8}>
+          <ArrowLeft size={22} color={c.text} />
+        </Pressable>
+        <Text style={styles.headerTitle} numberOfLines={1}>
+          {subject || 'Email source'}
+        </Text>
+        <Pressable onPress={onShare} style={styles.headerBtn} hitSlop={8} disabled={!raw}>
+          <Share2 size={20} color={raw ? c.text : c.textMuted} />
+        </Pressable>
+      </View>
+
+      {!raw && !error ? (
+        <View style={styles.loading}>
+          <ActivityIndicator color={c.primary} />
+        </View>
+      ) : error ? (
+        <View style={styles.loading}>
+          <Text style={styles.error}>{error}</Text>
+        </View>
+      ) : (
+        <ScrollView contentContainerStyle={styles.body}>
+          <Text selectable style={styles.source}>{raw}</Text>
+        </ScrollView>
+      )}
+    </SafeAreaView>
+  );
+}
+
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+  container: { flex: 1, backgroundColor: c.background },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: componentSizes.headerHeight,
+    paddingHorizontal: spacing.lg,
+    borderBottomWidth: 1,
+    borderBottomColor: c.border,
+    gap: spacing.sm,
+  },
+  headerBtn: {
+    width: 40, height: 40, alignItems: 'center', justifyContent: 'center', borderRadius: radius.md,
+  },
+  headerTitle: { ...typography.h3, color: c.text, flex: 1 },
+  loading: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  error: { ...typography.body, color: c.error, paddingHorizontal: spacing.lg, textAlign: 'center' },
+  body: { padding: spacing.lg },
+  source: {
+    fontFamily: 'monospace',
+    fontSize: 11,
+    lineHeight: 16,
+    color: c.text,
+  },
+  });
+}

src/screens/EmailThreadScreen.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {
   View, Text, StyleSheet, ScrollView, Pressable, ActivityIndicator,
-  Modal, useWindowDimensions, Animated, Easing,
+  Modal, useWindowDimensions, Animated, Easing, Alert,
 } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
@@ -9,15 +9,19 @@ import {
   ArrowLeft, Star, Trash2, MoreVertical, Reply, ReplyAll, Forward,
   ChevronLeft, ChevronRight, Paperclip, Archive, Mail, MailOpen,
   FolderInput, ShieldAlert, ShieldCheck, X, Check,
-  Inbox, Send, File as FileIcon, Ban, Folder,
+  Inbox, Send, File as FileIcon, Ban, Folder, Code, Download, Tag,
 } from 'lucide-react-native';
 import type { LucideIcon } from 'lucide-react-native';
-import { colors, spacing, radius, typography, componentSizes } from '../theme/tokens';
+import { spacing, radius, typography, componentSizes, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
 import EmailBodyView from '../components/EmailBodyView';
 import SenderAvatar from '../components/SenderAvatar';
 import { useEmailStore } from '../stores/email-store';
 import { setEmailKeywords } from '../api/email';
+import { shareEmailEml } from '../lib/email-export';
+import { useKeywordsStore, keywordToken, type KeywordDef } from '../stores/keywords-store';
 import { buildMailboxTree, flattenVisible, type MailboxNode } from '../lib/mailbox-tree';
+import { useSheetDrag } from '../lib/use-sheet-drag';
 import type { Email, Mailbox } from '../api/types';
 import type { RootStackParamList } from '../navigation/types';
 
@@ -58,6 +62,8 @@ function plainTextBody(email: Email): string {
 }
 
 export default function EmailThreadScreen({ route, navigation }: Props) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const { emailId, subject: subjectParam } = route.params;
   const insets = useSafeAreaInsets();
   const { width: windowWidth } = useWindowDimensions();
@@ -67,12 +73,29 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
   const moveToMailbox = useEmailStore((s) => s.moveToMailbox);
   const mailboxes = useEmailStore((s) => s.mailboxes);
   const currentMailboxId = useEmailStore((s) => s.currentMailboxId);
+  const emails = useEmailStore((s) => s.emails);
+
+  const currentIndex = emails.findIndex((e) => e.id === emailId);
+  const prevEmail = currentIndex > 0 ? emails[currentIndex - 1] : null;
+  const nextEmail = currentIndex >= 0 && currentIndex < emails.length - 1 ? emails[currentIndex + 1] : null;
+  const goToEmail = (target: { id: string; threadId: string; subject: string }) => {
+    navigation.replace('EmailThread', {
+      emailId: target.id,
+      threadId: target.threadId,
+      subject: target.subject,
+    });
+  };
 
   const [email, setEmail] = React.useState<Email | null>(null);
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | null>(null);
   const [moreMenuOpen, setMoreMenuOpen] = React.useState(false);
   const [moveMenuOpen, setMoveMenuOpen] = React.useState(false);
+  const [tagMenuOpen, setTagMenuOpen] = React.useState(false);
+  const keywordDefs = useKeywordsStore((s) => s.keywords);
+  const hydrateKeywords = useKeywordsStore((s) => s.hydrate);
+  const keywordsHydrated = useKeywordsStore((s) => s.hydrated);
+  React.useEffect(() => { if (!keywordsHydrated) void hydrateKeywords(); }, [keywordsHydrated, hydrateKeywords]);
 
   React.useEffect(() => {
     let cancelled = false;
@@ -118,6 +141,15 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
     setEmail((prev) => (prev ? { ...prev, keywords: next } : prev));
   };
 
+  const onToggleKeyword = (token: string) => {
+    if (!email) return;
+    const next = { ...email.keywords };
+    if (next[token]) delete next[token];
+    else next[token] = true;
+    updateLocalKeywords(next);
+    void setEmailKeywords(email.id, next);
+  };
+
   const onToggleStar = () => {
     if (!email) return;
     const next = { ...email.keywords };
@@ -208,17 +240,17 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
       {/* Toolbar */}
       <View style={styles.toolbar}>
         <Pressable onPress={() => navigation.goBack()} style={styles.toolbarBack} hitSlop={8}>
-          <ArrowLeft size={22} color={colors.text} />
+          <ArrowLeft size={22} color={c.text} />
         </Pressable>
         <View style={styles.toolbarActions}>
           <ToolbarButton
-            icon={<Trash2 size={18} color={colors.textSecondary} />}
+            icon={<Trash2 size={18} color={c.textSecondary} />}
             label="Delete"
             onPress={onDelete}
           />
           {showArchive && (
             <ToolbarButton
-              icon={<Archive size={18} color={colors.textSecondary} />}
+              icon={<Archive size={18} color={c.textSecondary} />}
               label="Archive"
               onPress={onArchive}
             />
@@ -227,9 +259,9 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
             <ToolbarButton
               icon={
                 unread ? (
-                  <MailOpen size={18} color={colors.textSecondary} />
+                  <MailOpen size={18} color={c.textSecondary} />
                 ) : (
-                  <Mail size={18} color={colors.textSecondary} />
+                  <Mail size={18} color={c.textSecondary} />
                 )
               }
               label={unread ? 'Read' : 'Unread'}
@@ -240,15 +272,15 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
             icon={
               <Star
                 size={18}
-                color={starred ? colors.starred : colors.textSecondary}
-                fill={starred ? colors.starred : 'transparent'}
+                color={starred ? c.starred : c.textSecondary}
+                fill={starred ? c.starred : 'transparent'}
               />
             }
             label="Star"
             onPress={onToggleStar}
           />
           <ToolbarButton
-            icon={<MoreVertical size={18} color={colors.textSecondary} />}
+            icon={<MoreVertical size={18} color={c.textSecondary} />}
             label="More"
             onPress={() => setMoreMenuOpen(true)}
           />
@@ -257,7 +289,7 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
 
       {loading ? (
         <View style={styles.centered}>
-          <ActivityIndicator color={colors.primary} />
+          <ActivityIndicator color={c.primary} />
         </View>
       ) : error ? (
         <View style={styles.centered}>
@@ -276,8 +308,8 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
                   <Pressable onPress={onToggleStar} hitSlop={8} style={styles.subjectStar}>
                     <Star
                       size={18}
-                      color={starred ? colors.starred : colors.textMuted}
-                      fill={starred ? colors.starred : 'transparent'}
+                      color={starred ? c.starred : c.textMuted}
+                      fill={starred ? c.starred : 'transparent'}
                     />
                   </Pressable>
                   <Text style={styles.subjectText}>{subject}</Text>
@@ -320,7 +352,7 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
                 <View style={styles.attachmentsRow}>
                   {email.attachments.map((att, idx) => (
                     <View key={att.blobId ?? idx} style={styles.attachmentChip}>
-                      <Paperclip size={14} color={colors.textMuted} />
+                      <Paperclip size={14} color={c.textMuted} />
                       <Text style={styles.attachmentName} numberOfLines={1}>
                         {att.name || 'attachment'}
                       </Text>
@@ -340,29 +372,31 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
           {/* Bottom action bar */}
           <View style={[styles.bottomBar, { paddingBottom: Math.max(insets.bottom, 4) }]}>
             <BottomBarButton
-              icon={<ChevronLeft size={20} color={colors.textMuted} />}
+              icon={<ChevronLeft size={20} color={c.textMuted} />}
               label="Prev"
-              disabled
+              onPress={prevEmail ? () => goToEmail(prevEmail) : undefined}
+              disabled={!prevEmail}
             />
             <BottomBarButton
-              icon={<Reply size={20} color={colors.textSecondary} />}
+              icon={<Reply size={20} color={c.textSecondary} />}
               label="Reply"
               onPress={() => navigateCompose('reply')}
             />
             <BottomBarButton
-              icon={<ReplyAll size={20} color={colors.textSecondary} />}
+              icon={<ReplyAll size={20} color={c.textSecondary} />}
               label="Reply All"
               onPress={() => navigateCompose('replyAll')}
             />
             <BottomBarButton
-              icon={<Forward size={20} color={colors.textSecondary} />}
+              icon={<Forward size={20} color={c.textSecondary} />}
               label="Forward"
               onPress={() => navigateCompose('forward')}
             />
             <BottomBarButton
-              icon={<ChevronRight size={20} color={colors.textMuted} />}
+              icon={<ChevronRight size={20} color={c.textMuted} />}
               label="Next"
-              disabled
+              onPress={nextEmail ? () => goToEmail(nextEmail) : undefined}
+              disabled={!nextEmail}
             />
           </View>
         </>
@@ -372,15 +406,38 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
         visible={moreMenuOpen}
         onClose={() => setMoreMenuOpen(false)}
         unread={unread}
-        canArchive={!!archiveMailbox && !showArchive && currentMailboxId !== archiveMailbox?.id}
-        canMarkUnread={!showMarkUnread}
+        canArchive={!!archiveMailbox && currentMailboxId !== archiveMailbox?.id}
+        canMarkUnread={true}
         canMove={mailboxes.length > 0}
         showSpam={!!junkMailbox || isInJunk}
         isInJunk={isInJunk}
+        canViewSource={!!email?.blobId}
+        canExport={!!email?.blobId}
+        canTag={keywordDefs.length > 0}
         onArchive={() => { setMoreMenuOpen(false); onArchive(); }}
         onToggleUnread={() => { setMoreMenuOpen(false); onToggleUnread(); }}
         onMove={() => { setMoreMenuOpen(false); setMoveMenuOpen(true); }}
+        onTag={() => { setMoreMenuOpen(false); setTagMenuOpen(true); }}
         onToggleSpam={onToggleSpam}
+        onViewSource={() => {
+          setMoreMenuOpen(false);
+          if (email?.blobId) {
+            navigation.navigate('EmailSource', {
+              emailId: email.id,
+              blobId: email.blobId,
+              subject: email.subject,
+            });
+          }
+        }}
+        onExport={async () => {
+          setMoreMenuOpen(false);
+          if (!email?.blobId) return;
+          try {
+            await shareEmailEml(email.blobId, email.subject);
+          } catch (e) {
+            Alert.alert('Export failed', e instanceof Error ? e.message : String(e));
+          }
+        }}
       />
 
       <MoveMenuSheet
@@ -390,6 +447,14 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
         currentMailboxId={currentMailboxId}
         onPick={onMoveToMailbox}
       />
+
+      <TagMenuSheet
+        visible={tagMenuOpen}
+        onClose={() => setTagMenuOpen(false)}
+        keywords={keywordDefs}
+        activeKeywords={email?.keywords ?? {}}
+        onToggle={onToggleKeyword}
+      />
     </SafeAreaView>
   );
 }
@@ -401,21 +466,31 @@ interface MoreMenuSheetProps {
   canArchive: boolean;
   canMarkUnread: boolean;
   canMove: boolean;
+  canTag: boolean;
   showSpam: boolean;
   isInJunk: boolean;
+  canViewSource: boolean;
+  canExport: boolean;
   onArchive: () => void;
   onToggleUnread: () => void;
   onMove: () => void;
+  onTag: () => void;
   onToggleSpam: () => void;
+  onViewSource: () => void;
+  onExport: () => void;
 }
 
 function MoreMenuSheet({
-  visible, onClose, unread, canArchive, canMarkUnread, canMove,
-  showSpam, isInJunk, onArchive, onToggleUnread, onMove, onToggleSpam,
+  visible, onClose, unread, canArchive, canMarkUnread, canMove, canTag,
+  showSpam, isInJunk, canViewSource, canExport,
+  onArchive, onToggleUnread, onMove, onTag, onToggleSpam, onViewSource, onExport,
 }: MoreMenuSheetProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const insets = useSafeAreaInsets();
   const slideY = React.useRef(new Animated.Value(400)).current;
   const overlayOpacity = React.useRef(new Animated.Value(0)).current;
+  const dragHandlers = useSheetDrag({ slideY, closedY: 400, onClose });
 
   React.useEffect(() => {
     if (visible) {
@@ -442,16 +517,20 @@ function MoreMenuSheet({
           { paddingBottom: Math.max(insets.bottom, spacing.md), transform: [{ translateY: slideY }] },
         ]}
       >
-        <View style={styles.sheetHandle} />
-        <View style={styles.sheetHeader}>
-          <Text style={styles.sheetTitle}>More actions</Text>
-          <Pressable onPress={onClose} hitSlop={8} style={styles.sheetClose}>
-            <X size={18} color={colors.textSecondary} />
-          </Pressable>
+        <View {...dragHandlers}>
+          <View style={styles.sheetHandleHit}>
+            <View style={styles.sheetHandle} />
+          </View>
+          <View style={styles.sheetHeader}>
+            <Text style={styles.sheetTitle}>More actions</Text>
+            <Pressable onPress={onClose} hitSlop={8} style={styles.sheetClose}>
+              <X size={18} color={c.textSecondary} />
+            </Pressable>
+          </View>
         </View>
         {canArchive && (
           <MoreMenuItem
-            icon={<Archive size={18} color={colors.textSecondary} />}
+            icon={<Archive size={18} color={c.textSecondary} />}
             label="Archive"
             onPress={onArchive}
           />
@@ -460,9 +539,9 @@ function MoreMenuSheet({
           <MoreMenuItem
             icon={
               unread ? (
-                <MailOpen size={18} color={colors.textSecondary} />
+                <MailOpen size={18} color={c.textSecondary} />
               ) : (
-                <Mail size={18} color={colors.textSecondary} />
+                <Mail size={18} color={c.textSecondary} />
               )
             }
             label={unread ? 'Mark as read' : 'Mark as unread'}
@@ -471,25 +550,124 @@ function MoreMenuSheet({
         )}
         {canMove && (
           <MoreMenuItem
-            icon={<FolderInput size={18} color={colors.textSecondary} />}
+            icon={<FolderInput size={18} color={c.textSecondary} />}
             label="Move to folder…"
             onPress={onMove}
-            trailing={<ChevronRight size={16} color={colors.textMuted} />}
+            trailing={<ChevronRight size={16} color={c.textMuted} />}
+          />
+        )}
+        {canTag && (
+          <MoreMenuItem
+            icon={<Tag size={18} color={c.textSecondary} />}
+            label="Tag…"
+            onPress={onTag}
+            trailing={<ChevronRight size={16} color={c.textMuted} />}
           />
         )}
         {showSpam && (
           <MoreMenuItem
             icon={
               isInJunk ? (
-                <ShieldCheck size={18} color={colors.success} />
+                <ShieldCheck size={18} color={c.success} />
               ) : (
-                <ShieldAlert size={18} color={colors.error} />
+                <ShieldAlert size={18} color={c.error} />
               )
             }
             label={isInJunk ? 'Not spam' : 'Mark as spam'}
             onPress={onToggleSpam}
           />
         )}
+        {canViewSource && (
+          <MoreMenuItem
+            icon={<Code size={18} color={c.textSecondary} />}
+            label="View source"
+            onPress={onViewSource}
+          />
+        )}
+        {canExport && (
+          <MoreMenuItem
+            icon={<Download size={18} color={c.textSecondary} />}
+            label="Export email (.eml)"
+            onPress={onExport}
+          />
+        )}
+      </Animated.View>
+    </Modal>
+  );
+}
+
+interface TagMenuSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  keywords: KeywordDef[];
+  activeKeywords: Record<string, boolean>;
+  onToggle: (token: string) => void;
+}
+
+function TagMenuSheet({ visible, onClose, keywords, activeKeywords, onToggle }: TagMenuSheetProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  const insets = useSafeAreaInsets();
+  const slideY = React.useRef(new Animated.Value(500)).current;
+  const overlayOpacity = React.useRef(new Animated.Value(0)).current;
+  const dragHandlers = useSheetDrag({ slideY, closedY: 500, onClose });
+
+  React.useEffect(() => {
+    if (visible) {
+      Animated.parallel([
+        Animated.timing(slideY, { toValue: 0, duration: 220, easing: Easing.out(Easing.cubic), useNativeDriver: true }),
+        Animated.timing(overlayOpacity, { toValue: 1, duration: 220, useNativeDriver: true }),
+      ]).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(slideY, { toValue: 500, duration: 180, easing: Easing.in(Easing.cubic), useNativeDriver: true }),
+        Animated.timing(overlayOpacity, { toValue: 0, duration: 180, useNativeDriver: true }),
+      ]).start();
+    }
+  }, [visible, slideY, overlayOpacity]);
+
+  return (
+    <Modal visible={visible} transparent animationType="none" onRequestClose={onClose} statusBarTranslucent>
+      <Animated.View style={[styles.sheetOverlay, { opacity: overlayOpacity }]}>
+        <Pressable style={styles.sheetOverlayPress} onPress={onClose} />
+      </Animated.View>
+      <Animated.View
+        style={[
+          styles.sheet,
+          { paddingBottom: Math.max(insets.bottom, spacing.md), transform: [{ translateY: slideY }] },
+        ]}
+      >
+        <View {...dragHandlers}>
+          <View style={styles.sheetHandleHit}>
+            <View style={styles.sheetHandle} />
+          </View>
+          <View style={styles.sheetHeader}>
+            <Text style={styles.sheetTitle}>Tags</Text>
+            <Pressable onPress={onClose} hitSlop={8} style={styles.sheetClose}>
+              <X size={18} color={c.textSecondary} />
+            </Pressable>
+          </View>
+        </View>
+        {keywords.length === 0 ? (
+          <Text style={{ ...typography.body, color: c.textMuted, paddingVertical: spacing.lg, paddingHorizontal: spacing.lg }}>
+            No tags yet. Add some in Settings → Keywords & Labels.
+          </Text>
+        ) : (
+          keywords.map((kw) => {
+            const token = keywordToken(kw.id);
+            const active = !!activeKeywords[token];
+            const palette = c.tags[kw.color];
+            return (
+              <MoreMenuItem
+                key={kw.id}
+                icon={<View style={{ width: 18, height: 18, borderRadius: 9, backgroundColor: palette.dot }} />}
+                label={kw.label}
+                onPress={() => onToggle(token)}
+                trailing={active ? <Check size={16} color={c.primary} /> : null}
+              />
+            );
+          })
+        )}
       </Animated.View>
     </Modal>
   );
@@ -504,9 +682,12 @@ interface MoveMenuSheetProps {
 }
 
 function MoveMenuSheet({ visible, onClose, mailboxes, currentMailboxId, onPick }: MoveMenuSheetProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const insets = useSafeAreaInsets();
   const slideY = React.useRef(new Animated.Value(500)).current;
   const overlayOpacity = React.useRef(new Animated.Value(0)).current;
+  const dragHandlers = useSheetDrag({ slideY, closedY: 500, onClose });
 
   React.useEffect(() => {
     if (visible) {
@@ -549,12 +730,16 @@ function MoveMenuSheet({ visible, onClose, mailboxes, currentMailboxId, onPick }
           { paddingBottom: Math.max(insets.bottom, spacing.md), transform: [{ translateY: slideY }] },
         ]}
       >
-        <View style={styles.sheetHandle} />
-        <View style={styles.sheetHeader}>
-          <Text style={styles.sheetTitle}>Move to folder</Text>
-          <Pressable onPress={onClose} hitSlop={8} style={styles.sheetClose}>
-            <X size={18} color={colors.textSecondary} />
-          </Pressable>
+        <View {...dragHandlers}>
+          <View style={styles.sheetHandleHit}>
+            <View style={styles.sheetHandle} />
+          </View>
+          <View style={styles.sheetHeader}>
+            <Text style={styles.sheetTitle}>Move to folder</Text>
+            <Pressable onPress={onClose} hitSlop={8} style={styles.sheetClose}>
+              <X size={18} color={c.textSecondary} />
+            </Pressable>
+          </View>
         </View>
         <ScrollView>
           {visibleNodes.map((node) => {
@@ -572,14 +757,14 @@ function MoveMenuSheet({ visible, onClose, mailboxes, currentMailboxId, onPick }
                   { paddingLeft: spacing.lg + node.depth * 16 },
                 ]}
               >
-                <Icon size={16} color={canTarget ? colors.textSecondary : colors.textMuted} />
+                <Icon size={16} color={canTarget ? c.textSecondary : c.textMuted} />
                 <Text
                   style={[styles.moveRowLabel, !canTarget && styles.moveRowLabelDisabled]}
                   numberOfLines={1}
                 >
                   {node.name}
                 </Text>
-                {isCurrent && <Check size={14} color={colors.textMuted} />}
+                {isCurrent && <Check size={14} color={c.textMuted} />}
               </Pressable>
             );
           })}
@@ -592,6 +777,8 @@ function MoveMenuSheet({ visible, onClose, mailboxes, currentMailboxId, onPick }
 function MoreMenuItem({
   icon, label, onPress, trailing,
 }: { icon: React.ReactNode; label: string; onPress?: () => void; trailing?: React.ReactNode }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <Pressable
       onPress={onPress}
@@ -607,6 +794,8 @@ function MoreMenuItem({
 function ToolbarButton({
   icon, label, onPress,
 }: { icon: React.ReactNode; label: string; onPress?: () => void }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <Pressable onPress={onPress} style={styles.toolbarAction} hitSlop={6}>
       {icon}
@@ -618,6 +807,8 @@ function ToolbarButton({
 function BottomBarButton({
   icon, label, onPress, disabled,
 }: { icon: React.ReactNode; label: string; onPress?: () => void; disabled?: boolean }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <Pressable
       onPress={disabled ? undefined : onPress}
@@ -632,8 +823,9 @@ function BottomBarButton({
   );
 }
 
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+  container: { flex: 1, backgroundColor: c.background },
 
   // Top toolbar
   toolbar: {
@@ -643,9 +835,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.sm,
     paddingTop: spacing.xs,
     paddingBottom: spacing.xs,
-    backgroundColor: colors.background,
+    backgroundColor: c.background,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
   },
   toolbarBack: {
     width: componentSizes.avatarSm,
@@ -668,7 +860,7 @@ const styles = StyleSheet.create({
   },
   toolbarActionLabel: {
     ...typography.small,
-    color: colors.textSecondary,
+    color: c.textSecondary,
   },
 
   // Content
@@ -678,14 +870,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     padding: spacing.lg,
   },
-  errorText: { ...typography.body, color: colors.error, textAlign: 'center' },
-  scroll: { flex: 1, backgroundColor: colors.background },
+  errorText: { ...typography.body, color: c.error, textAlign: 'center' },
+  scroll: { flex: 1, backgroundColor: c.background },
 
   // Subject block
   subjectBlock: {
-    backgroundColor: colors.background,
+    backgroundColor: c.background,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
     paddingHorizontal: spacing.lg,
     paddingVertical: spacing.md,
   },
@@ -708,7 +900,7 @@ const styles = StyleSheet.create({
     fontSize: 20,
     fontWeight: '700',
     lineHeight: 28,
-    color: colors.text,
+    color: c.text,
     letterSpacing: -0.2,
   },
   subjectMeta: {
@@ -716,19 +908,19 @@ const styles = StyleSheet.create({
   },
   subjectDate: {
     ...typography.caption,
-    color: colors.textSecondary,
+    color: c.textSecondary,
   },
   subjectSize: {
     ...typography.caption,
-    color: colors.textMuted,
+    color: c.textMuted,
     marginTop: 2,
   },
 
   // Sender block
   senderBlock: {
-    backgroundColor: colors.background,
+    backgroundColor: c.background,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
     paddingHorizontal: spacing.lg,
     paddingVertical: spacing.md,
   },
@@ -740,27 +932,27 @@ const styles = StyleSheet.create({
   senderInfo: { flex: 1, minWidth: 0 },
   senderName: {
     ...typography.bodySemibold,
-    color: colors.text,
+    color: c.text,
   },
   senderEmail: {
     ...typography.caption,
-    color: colors.textSecondary,
+    color: c.textSecondary,
     marginTop: 2,
   },
   senderRecipients: {
     ...typography.caption,
-    color: colors.textSecondary,
+    color: c.textSecondary,
     marginTop: 4,
   },
   senderRecipientsLabel: {
-    color: colors.textMuted,
+    color: c.textMuted,
   },
 
   // Attachments
   attachmentsBlock: {
-    backgroundColor: colors.background,
+    backgroundColor: c.background,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
     paddingHorizontal: spacing.lg,
     paddingVertical: spacing.sm,
   },
@@ -775,24 +967,24 @@ const styles = StyleSheet.create({
     gap: spacing.xs,
     paddingHorizontal: spacing.sm,
     paddingVertical: 6,
-    backgroundColor: colors.surface,
+    backgroundColor: c.surface,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     borderRadius: radius.sm,
   },
   attachmentName: {
     ...typography.caption,
-    color: colors.text,
+    color: c.text,
     maxWidth: 180,
   },
   attachmentSize: {
     ...typography.small,
-    color: colors.textMuted,
+    color: c.textMuted,
   },
 
   // Body
   bodyBlock: {
-    backgroundColor: colors.background,
+    backgroundColor: c.background,
   },
 
   // Bottom bar
@@ -803,9 +995,9 @@ const styles = StyleSheet.create({
     bottom: 0,
     flexDirection: 'row',
     alignItems: 'stretch',
-    backgroundColor: colors.background,
+    backgroundColor: c.background,
     borderTopWidth: 1,
-    borderTopColor: colors.border,
+    borderTopColor: c.border,
   },
   bottomBarBtn: {
     flex: 1,
@@ -820,10 +1012,10 @@ const styles = StyleSheet.create({
   },
   bottomBarLabel: {
     ...typography.small,
-    color: colors.textSecondary,
+    color: c.textSecondary,
   },
   bottomBarLabelDisabled: {
-    color: colors.textMuted,
+    color: c.textMuted,
   },
 
   // Bottom sheet (More menu / Move folder picker)
@@ -837,23 +1029,26 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: colors.popover,
+    backgroundColor: c.popover,
     borderTopLeftRadius: radius.lg,
     borderTopRightRadius: radius.lg,
     borderTopWidth: 1,
-    borderColor: colors.border,
+    borderColor: c.border,
     paddingTop: spacing.sm,
   },
   sheetTall: {
     maxHeight: '75%',
   },
+  sheetHandleHit: {
+    alignItems: 'center',
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.sm,
+  },
   sheetHandle: {
-    alignSelf: 'center',
     width: 36,
     height: 4,
     borderRadius: 2,
-    backgroundColor: colors.border,
-    marginBottom: spacing.sm,
+    backgroundColor: c.border,
   },
   sheetHeader: {
     flexDirection: 'row',
@@ -862,11 +1057,11 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.lg,
     paddingBottom: spacing.sm,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
   },
   sheetTitle: {
     ...typography.bodySemibold,
-    color: colors.text,
+    color: c.text,
   },
   sheetClose: {
     width: 28,
@@ -885,7 +1080,7 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.md,
     minHeight: 48,
   },
-  moreItemPressed: { backgroundColor: colors.surfaceHover },
+  moreItemPressed: { backgroundColor: c.surfaceHover },
   moreItemIcon: {
     width: 20,
     alignItems: 'center',
@@ -893,7 +1088,7 @@ const styles = StyleSheet.create({
   },
   moreItemLabel: {
     ...typography.body,
-    color: colors.text,
+    color: c.text,
     flex: 1,
   },
 
@@ -906,13 +1101,14 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.sm + 2,
     minHeight: 44,
   },
-  moveRowPressed: { backgroundColor: colors.surfaceHover },
+  moveRowPressed: { backgroundColor: c.surfaceHover },
   moveRowLabel: {
     ...typography.body,
-    color: colors.text,
+    color: c.text,
     flex: 1,
   },
   moveRowLabelDisabled: {
-    color: colors.textMuted,
+    color: c.textMuted,
   },
-});
+  });
+}

src/screens/FilesScreen.tsx

@@ -10,7 +10,8 @@ import {
 import { FileText, Folder, HardDrive } from 'lucide-react-native';
 import { getFileNodes } from '../api/files';
 import type { FileNode } from '../api/types';
-import { colors, spacing, typography } from '../theme/tokens';
+import { spacing, typography, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
 
 function formatFileSize(bytes?: number): string {
   if (bytes == null) return '';
@@ -20,6 +21,8 @@ function formatFileSize(bytes?: number): string {
 }
 
 export default function FilesScreen() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const [files, setFiles] = useState<FileNode[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -44,7 +47,7 @@ export default function FilesScreen() {
   if (loading) {
     return (
       <View style={styles.center}>
-        <ActivityIndicator color={colors.primary} />
+        <ActivityIndicator color={c.primary} />
       </View>
     );
   }
@@ -67,7 +70,7 @@ export default function FilesScreen() {
           <Text style={styles.title}>Files</Text>
         </View>
         <View style={styles.center}>
-          <HardDrive size={48} color={colors.textMuted} />
+          <HardDrive size={48} color={c.textMuted} />
           <Text style={styles.emptyText}>No files yet</Text>
         </View>
       </View>
@@ -85,9 +88,9 @@ export default function FilesScreen() {
         renderItem={({ item }) => (
           <View style={styles.fileRow}>
             {item.type === 'directory' ? (
-              <Folder size={20} color={colors.primary} />
+              <Folder size={20} color={c.primary} />
             ) : (
-              <FileText size={20} color={colors.textMuted} />
+              <FileText size={20} color={c.textMuted} />
             )}
             <View style={styles.fileInfo}>
               <Text style={styles.fileName} numberOfLines={1}>
@@ -104,22 +107,23 @@ export default function FilesScreen() {
   );
 }
 
-const styles = StyleSheet.create({
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: colors.background,
+    backgroundColor: c.background,
   },
   header: {
     paddingTop: 60,
     paddingHorizontal: spacing.md,
     paddingBottom: spacing.sm,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
   },
   title: {
     fontSize: typography.h2.fontSize,
     fontWeight: '700' as const,
-    color: colors.text,
+    color: c.text,
   },
   center: {
     flex: 1,
@@ -128,12 +132,12 @@ const styles = StyleSheet.create({
     gap: spacing.sm,
   },
   emptyText: {
-    color: colors.textMuted,
+    color: c.textMuted,
     fontSize: typography.body.fontSize,
     marginTop: spacing.sm,
   },
   errorText: {
-    color: colors.error,
+    color: c.error,
     fontSize: typography.body.fontSize,
     textAlign: 'center',
     paddingHorizontal: spacing.lg,
@@ -142,11 +146,11 @@ const styles = StyleSheet.create({
     marginTop: spacing.md,
     paddingHorizontal: spacing.lg,
     paddingVertical: spacing.sm,
-    backgroundColor: colors.primary,
+    backgroundColor: c.primary,
     borderRadius: 8,
   },
   retryText: {
-    color: colors.primaryForeground,
+    color: c.primaryForeground,
     fontWeight: '600' as const,
   },
   fileRow: {
@@ -155,7 +159,7 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.sm,
     paddingHorizontal: spacing.md,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: c.border,
     gap: spacing.sm,
   },
   fileInfo: {
@@ -163,11 +167,12 @@ const styles = StyleSheet.create({
   },
   fileName: {
     fontSize: typography.body.fontSize,
-    color: colors.text,
+    color: c.text,
   },
   fileSize: {
     fontSize: typography.caption.fontSize,
-    color: colors.textMuted,
+    color: c.textMuted,
     marginTop: 2,
   },
-});
+  });
+}

src/screens/GroupDetailScreen.tsx

@@ -22,12 +22,15 @@ import type { EmailAddress } from '../api/types';
 import ContactListRow from '../components/contacts/ContactListRow';
 import ContactPickerSheet from '../components/contacts/ContactPickerSheet';
 import Dialog from '../components/Dialog';
-import { colors, spacing, radius, typography } from '../theme/tokens';
+import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
 
 type Nav = NativeStackNavigationProp<RootStackParamList, 'GroupDetail'>;
 type Route = RouteProp<RootStackParamList, 'GroupDetail'>;
 
 export default function GroupDetailScreen() {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const navigation = useNavigation<Nav>();
   const route = useRoute<Route>();
   const { groupId } = route.params;
@@ -53,7 +56,7 @@ export default function GroupDetailScreen() {
       <SafeAreaView style={styles.container} edges={['top']}>
         <View style={styles.header}>
           <Pressable onPress={() => navigation.goBack()} style={styles.headerBtn} hitSlop={8}>
-            <ArrowLeft size={22} color={colors.text} />
+            <ArrowLeft size={22} color={c.text} />
           </Pressable>
           <Text style={styles.headerTitle}>Group</Text>
         </View>
@@ -127,7 +130,7 @@ export default function GroupDetailScreen() {
     <SafeAreaView style={styles.container} edges={['top']}>
       <View style={styles.header}>
         <Pressable onPress={() => navigation.goBack()} style={styles.headerBtn} hitSlop={8}>
-          <ArrowLeft size={22} color={colors.text} />
+          <ArrowLeft size={22} color={c.text} />
         </Pressable>
         <Text style={styles.headerTitle} numberOfLines={1}>{name}</Text>
         <View style={styles.headerActions}>
@@ -136,17 +139,17 @@ export default function GroupDetailScreen() {
             style={styles.headerBtn}
             hitSlop={8}
           >
-            <Edit2 size={18} color={colors.text} />
+            <Edit2 size={18} color={c.text} />
           </Pressable>
           <Pressable onPress={() => setConfirmDelete(true)} style={styles.headerBtn} hitSlop={8}>
-            <Trash2 size={18} color={colors.error} />
+            <Trash2 size={18} color={c.error} />
           </Pressable>
         </View>
       </View>
 
       <View style={styles.hero}>
         <View style={styles.heroIcon}>
-          <Users size={32} color={colors.primary} />
+          <Users size={32} color={c.primary} />
         </View>
         <Text style={styles.heroName}>{name}</Text>
         <Text style={styles.heroSubtitle}>
@@ -156,11 +159,11 @@ export default function GroupDetailScreen() {
 
       <View style={styles.actionsRow}>
         <Pressable onPress={emailAll} style={styles.actionBtn}>
-          <Mail size={16} color={colors.primary} />
+          <Mail size={16} color={c.primary} />
           <Text style={styles.actionLabel}>Email all</Text>
         </Pressable>
         <Pressable onPress={() => setPickerOpen(true)} style={[styles.actionBtn, styles.actionBtnPrimary]}>
-          <Plus size={16} color={colors.primaryForeground} />
+          <Plus size={16} color={c.primaryForeground} />
           <Text style={[styles.actionLabel, styles.actionLabelPrimary]}>Add member</Text>
         </Pressable>
       </View>
@@ -181,14 +184,14 @@ export default function GroupDetailScreen() {
               style={styles.removeMemberBtn}
               hitSlop={8}
             >
-              <UserMinus size={16} color={colors.error} />
+              <UserMinus size={16} color={c.error} />
             </Pressable>
           </View>
         )}
         ItemSeparatorComponent={() => <View style={styles.separator} />}
         ListEmptyComponent={
           <View style={styles.empty}>
-            <Users size={40} color={colors.surfaceActive} />
+            <Users size={40} color={c.surfaceActive} />
             <Text style={styles.emptyTitle}>No members yet</Text>
             <Text style={styles.emptySubtitle}>Tap "Add member" to get started</Text>
           </View>
@@ -231,8 +234,9 @@ export default function GroupDetailScreen() {
   );
 }
 
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+  container: { flex: 1, backgroundColor: c.background },
   header: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -240,14 +244,14 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.sm,
     gap: spacing.xs,
     borderBottomWidth: 1,
-    borderBottomColor: colors.borderLight,
+    borderBottomColor: c.borderLight,
   },
   headerBtn: {
     width: 40, height: 40,
     alignItems: 'center', justifyContent: 'center',
     borderRadius: radius.full,
   },
-  headerTitle: { ...typography.h3, color: colors.text, flex: 1, marginLeft: spacing.xs },
+  headerTitle: { ...typography.h3, color: c.text, flex: 1, marginLeft: spacing.xs },
   headerActions: { flexDirection: 'row', gap: spacing.xs },
 
   hero: {
@@ -258,12 +262,12 @@ const styles = StyleSheet.create({
   heroIcon: {
     width: 80, height: 80,
     borderRadius: 40,
-    backgroundColor: colors.primaryBg,
+    backgroundColor: c.primaryBg,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  heroName: { ...typography.h2, color: colors.text, marginTop: spacing.sm },
-  heroSubtitle: { ...typography.body, color: colors.textSecondary },
+  heroName: { ...typography.h2, color: c.text, marginTop: spacing.sm },
+  heroSubtitle: { ...typography.body, color: c.textSecondary },
 
   actionsRow: {
     flexDirection: 'row',
@@ -280,11 +284,11 @@ const styles = StyleSheet.create({
     gap: spacing.xs,
     paddingVertical: spacing.sm,
     borderRadius: radius.md,
-    backgroundColor: colors.surface,
+    backgroundColor: c.surface,
   },
-  actionBtnPrimary: { backgroundColor: colors.primary },
-  actionLabel: { ...typography.bodyMedium, color: colors.text },
-  actionLabelPrimary: { color: colors.primaryForeground },
+  actionBtnPrimary: { backgroundColor: c.primary },
+  actionLabel: { ...typography.bodyMedium, color: c.text },
+  actionLabelPrimary: { color: c.primaryForeground },
 
   memberRow: {
     flexDirection: 'row',
@@ -296,12 +300,13 @@ const styles = StyleSheet.create({
     borderRadius: radius.full,
     marginRight: spacing.md,
   },
-  separator: { height: 1, backgroundColor: colors.borderLight, marginLeft: 68 },
+  separator: { height: 1, backgroundColor: c.borderLight, marginLeft: 68 },
 
   empty: { alignItems: 'center', paddingVertical: spacing.xxxl, gap: spacing.sm },
-  emptyTitle: { ...typography.bodyMedium, color: colors.textSecondary },
-  emptySubtitle: { ...typography.caption, color: colors.textMuted },
+  emptyTitle: { ...typography.bodyMedium, color: c.textSecondary },
+  emptySubtitle: { ...typography.caption, color: c.textMuted },
 
   missing: { flex: 1, alignItems: 'center', justifyContent: 'center' },
-  missingText: { ...typography.body, color: colors.textMuted },
-});
+  missingText: { ...typography.body, color: c.textMuted },
+  });
+}

src/screens/LoginScreen.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { View, Text, Pressable, StyleSheet, KeyboardAvoidingView, Platform, Image } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Eye, EyeOff, X } from 'lucide-react-native';
-import { colors, spacing, radius, typography, componentSizes } from '../theme/tokens';
+import { spacing, radius, typography, componentSizes, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
 import { Button, Input } from '../components';
 import { useAuthStore } from '../stores/auth-store';
 
@@ -13,6 +14,8 @@ interface LoginScreenProps {
 }
 
 export default function LoginScreen({ onLogin, isAddMode, onCancel }: LoginScreenProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
   const login = useAuthStore((state) => state.login);
   const isLoading = useAuthStore((state) => state.isLoading);
   const error = useAuthStore((state) => state.error);
@@ -56,7 +59,7 @@ export default function LoginScreen({ onLogin, isAddMode, onCancel }: LoginScree
     <SafeAreaView style={styles.container}>
       {isAddMode && onCancel ? (
         <Pressable onPress={onCancel} style={styles.cancelButton} hitSlop={10}>
-          <X size={24} color={colors.text} />
+          <X size={24} color={c.text} />
         </Pressable>
       ) : null}
       <KeyboardAvoidingView
@@ -113,9 +116,9 @@ export default function LoginScreen({ onLogin, isAddMode, onCancel }: LoginScree
               rightIcon={
                 <Pressable onPress={() => setShowPassword(!showPassword)}>
                   {showPassword ? (
-                    <EyeOff size={20} color={colors.textMuted} />
+                    <EyeOff size={20} color={c.textMuted} />
                   ) : (
-                    <Eye size={20} color={colors.textMuted} />
+                    <Eye size={20} color={c.textMuted} />
                   )}
                 </Pressable>
               }
@@ -162,8 +165,9 @@ export default function LoginScreen({ onLogin, isAddMode, onCancel }: LoginScree
   );
 }
 
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+  container: { flex: 1, backgroundColor: c.background },
   cancelButton: {
     position: 'absolute',
     top: 50,
@@ -189,8 +193,8 @@ const styles = StyleSheet.create({
     width: 72,
     height: 72,
   },
-  appName: { ...typography.h1, color: colors.text },
-  tagline: { ...typography.caption, color: colors.textMuted, marginTop: spacing.xs },
+  appName: { ...typography.h1, color: c.text },
+  tagline: { ...typography.caption, color: c.textMuted, marginTop: spacing.xs },
 
   form: { gap: spacing.lg },
 
@@ -199,7 +203,7 @@ const styles = StyleSheet.create({
   },
   errorText: {
     ...typography.caption,
-    color: colors.error,
+    color: c.error,
     textAlign: 'center',
   },
 
@@ -209,12 +213,13 @@ const styles = StyleSheet.create({
     marginVertical: spacing.md,
     gap: spacing.md,
   },
-  dividerLine: { flex: 1, height: 1, backgroundColor: colors.border },
-  dividerText: { ...typography.caption, color: colors.textMuted },
+  dividerLine: { flex: 1, height: 1, backgroundColor: c.border },
+  dividerText: { ...typography.caption, color: c.textMuted },
 
   oauthRow: { gap: spacing.md },
 
   footer: { alignItems: 'center', marginTop: 40, gap: spacing.xs },
-  footerText: { ...typography.caption, color: colors.textMuted },
-  footerLink: { ...typography.caption, color: colors.textLink },
-});
+  footerText: { ...typography.caption, color: c.textMuted },
+  footerLink: { ...typography.caption, color: c.textLink },
+  });
+}

src/screens/SettingsScreen.tsx

@@ -1,143 +1,373 @@
-import React from 'react';
-import { View, Text, StyleSheet, ScrollView, Pressable, Switch } from 'react-native';
-import { Settings, User, Palette, Bell, Shield, ChevronRight } from 'lucide-react-native';
-import { colors } from '../theme/colors';
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, ScrollView, Pressable, BackHandler } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import {
+  ArrowLeft, LogOut, Settings, ChevronRight,
+  Palette, User, Shield, UserPen, Palmtree, Calendar,
+  Filter, FileText, FolderOpen, Tags, HardDrive,
+  BookUser, KeyRound, PanelLeftClose, Bell, Puzzle, RefreshCw,
+  LayoutGrid, BookOpen, PenLine, EyeOff, Languages, Info, Bug,
+  type LucideIcon,
+} from 'lucide-react-native';
+import { spacing, radius, typography, componentSizes, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
+import { ReadingSettings } from '../components/settings/ReadingSettings';
+import { NotificationSettings } from '../components/settings/NotificationSettings';
+import { AccountSettings } from '../components/settings/AccountSettings';
+import { IdentitySettings } from '../components/settings/IdentitySettings';
+import { VacationSettings } from '../components/settings/VacationSettings';
+import { FolderSettings } from '../components/settings/FolderSettings';
+import { AboutDataSettings } from '../components/settings/AboutDataSettings';
+import { UpdatesSettings } from '../components/settings/UpdatesSettings';
+import { AppearanceSettings } from '../components/settings/AppearanceSettings';
+import { CalendarSettings } from '../components/settings/CalendarSettings';
+import { ContactsSettings } from '../components/settings/ContactsSettings';
+import { FilesSettings } from '../components/settings/FilesSettings';
+import { FilterSettings } from '../components/settings/FilterSettings';
+import { TemplateSettings } from '../components/settings/TemplateSettings';
+import { KeywordSettings } from '../components/settings/KeywordSettings';
+import { AccountSecuritySettings } from '../components/settings/AccountSecuritySettings';
+import { SmimeSettings } from '../components/settings/SmimeSettings';
+import { SidebarAppsSettings } from '../components/settings/SidebarAppsSettings';
+import { ThemesSettings } from '../components/settings/ThemesSettings';
+import { PluginsSettings } from '../components/settings/PluginsSettings';
+import { ContentSendersSettings } from '../components/settings/ContentSendersSettings';
+import { LanguageSettings } from '../components/settings/LanguageSettings';
+import { ComposingSettings } from '../components/settings/ComposingSettings';
+import { LayoutSettings } from '../components/settings/LayoutSettings';
+import { useLocaleStore } from '../stores/locale-store';
 
-interface SettingItemProps {
-  icon: React.ReactNode;
-  title: string;
-  subtitle?: string;
-  rightElement?: React.ReactNode;
+type Tab =
+  | 'account' | 'language' | 'notifications'
+  | 'appearance' | 'layout'
+  | 'reading' | 'composing' | 'identities' | 'vacation'
+  | 'filters' | 'templates' | 'folders' | 'keywords'
+  | 'security' | 'encryption' | 'content_senders'
+  | 'calendar' | 'contacts' | 'files' | 'sidebar_apps'
+  | 'about_data' | 'themes' | 'plugins' | 'updates' | 'debug';
+
+type TabGroup = 'general' | 'appearance' | 'mail' | 'privacy' | 'apps' | 'advanced';
+
+interface TabDef {
+  id: Tab;
+  label: string;
+  icon: LucideIcon;
+  group: TabGroup;
+  experimental?: boolean;
+  implemented: boolean;
 }
 
-function SettingItem({ icon, title, subtitle, rightElement }: SettingItemProps) {
-  return (
-    <Pressable style={({ pressed }) => [styles.settingRow, pressed && styles.settingRowPressed]}>
-      <View style={styles.settingIcon}>{icon}</View>
-      <View style={styles.settingContent}>
-        <Text style={styles.settingTitle}>{title}</Text>
-        {subtitle && <Text style={styles.settingSubtitle}>{subtitle}</Text>}
-      </View>
-      {rightElement || <ChevronRight size={18} color={colors.textMuted} />}
-    </Pressable>
-  );
+const GROUP_LABELS: Record<TabGroup, string> = {
+  general: 'General',
+  appearance: 'Appearance',
+  mail: 'Mail',
+  privacy: 'Privacy & Security',
+  apps: 'Apps',
+  advanced: 'Advanced',
+};
+
+const GROUP_ORDER: TabGroup[] = ['general', 'appearance', 'mail', 'privacy', 'apps', 'advanced'];
+
+const TABS: TabDef[] = [
+  // General
+  { id: 'account',         label: 'Account',            icon: User,           group: 'general',    implemented: true  },
+  { id: 'language',        label: 'Language',           icon: Languages,      group: 'general',    implemented: true  },
+  { id: 'notifications',   label: 'Notifications',      icon: Bell,           group: 'general',    implemented: true  },
+
+  // Appearance
+  { id: 'appearance',      label: 'Appearance',         icon: Palette,        group: 'appearance', implemented: true  },
+  { id: 'layout',          label: 'Layout',             icon: LayoutGrid,     group: 'appearance', implemented: true  },
+
+  // Mail
+  { id: 'reading',         label: 'Reading',            icon: BookOpen,       group: 'mail',       implemented: true  },
+  { id: 'composing',       label: 'Composing',          icon: PenLine,        group: 'mail',       implemented: true  },
+  { id: 'identities',      label: 'Identities',         icon: UserPen,        group: 'mail',       implemented: true  },
+  { id: 'vacation',        label: 'Vacation Responder', icon: Palmtree,       group: 'mail',       implemented: true  },
+  { id: 'filters',         label: 'Filters & Rules',    icon: Filter,         group: 'mail',       implemented: true  },
+  { id: 'templates',       label: 'Templates',          icon: FileText,       group: 'mail',       implemented: true  },
+  { id: 'folders',         label: 'Folders',            icon: FolderOpen,     group: 'mail',       implemented: true  },
+  { id: 'keywords',        label: 'Keywords & Labels',  icon: Tags,           group: 'mail',       implemented: true  },
+
+  // Privacy & Security
+  { id: 'security',        label: 'Security',           icon: Shield,         group: 'privacy',    implemented: true  },
+  { id: 'encryption',      label: 'S/MIME Encryption',  icon: KeyRound,       group: 'privacy',    implemented: true  },
+  { id: 'content_senders', label: 'Content & Senders',  icon: EyeOff,         group: 'privacy',    implemented: true  },
+
+  // Apps
+  { id: 'calendar',        label: 'Calendar',           icon: Calendar,       group: 'apps',       implemented: true  },
+  { id: 'contacts',        label: 'Contacts',           icon: BookUser,       group: 'apps',       implemented: true  },
+  { id: 'files',           label: 'Files',              icon: HardDrive,      group: 'apps',       implemented: true  },
+  { id: 'sidebar_apps',    label: 'Sidebar Apps',       icon: PanelLeftClose, group: 'apps',       implemented: true  },
+
+  // Advanced
+  { id: 'about_data',      label: 'About & Data',       icon: Info,           group: 'advanced',   implemented: true  },
+  { id: 'themes',          label: 'Themes',             icon: Palette,        group: 'advanced',   experimental: true, implemented: true  },
+  { id: 'plugins',         label: 'Plugins',            icon: Puzzle,         group: 'advanced',   experimental: true, implemented: true  },
+  { id: 'updates',         label: 'Updates',            icon: RefreshCw,      group: 'advanced',   implemented: true  },
+  { id: 'debug',           label: 'Debug',              icon: Bug,            group: 'advanced',   implemented: false },
+];
+
+const TAB_COMPONENTS: Partial<Record<Tab, React.ComponentType<any>>> = {
+  account: AccountSettings,
+  language: LanguageSettings,
+  notifications: NotificationSettings,
+  appearance: AppearanceSettings,
+  layout: LayoutSettings,
+  reading: ReadingSettings,
+  composing: ComposingSettings,
+  identities: IdentitySettings,
+  vacation: VacationSettings,
+  filters: FilterSettings,
+  templates: TemplateSettings,
+  folders: FolderSettings,
+  keywords: KeywordSettings,
+  security: AccountSecuritySettings,
+  encryption: SmimeSettings,
+  content_senders: ContentSendersSettings,
+  calendar: CalendarSettings,
+  contacts: ContactsSettings,
+  files: FilesSettings,
+  sidebar_apps: SidebarAppsSettings,
+  about_data: AboutDataSettings,
+  themes: ThemesSettings,
+  plugins: PluginsSettings,
+  updates: UpdatesSettings,
+};
+
+function groupTabs() {
+  return GROUP_ORDER.map(group => ({
+    group,
+    label: GROUP_LABELS[group],
+    items: TABS.filter(t => t.group === group),
+  })).filter(g => g.items.length > 0);
 }
 
-export default function SettingsScreen() {
-  const [darkMode, setDarkMode] = React.useState(false);
-  const [notifications, setNotifications] = React.useState(true);
+interface SettingsScreenProps {
+  onLogout?: () => void;
+  onBack?: () => void;
+  onTabSelect?: (tab: Tab) => void;
+}
+
+export default function SettingsScreen({ onLogout, onBack, onTabSelect }: SettingsScreenProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  const [selectedTab, setSelectedTab] = useState<Tab | null>(null);
+  // Subscribe to locale so labels re-render when the user picks a different language.
+  const locale = useLocaleStore((s) => s.locale);
+  const t = useLocaleStore((s) => s.t);
+  const groupedTabs = React.useMemo(() => {
+    void locale; // dependency: re-translate on locale change
+    return groupTabs().map((g) => ({
+      ...g,
+      label: t(`settings.tab_groups.${g.group}`, g.label),
+      items: g.items.map((tab) => ({
+        ...tab,
+        label: t(`settings.tabs.${tab.id}`, tab.label),
+      })),
+    }));
+  }, [locale, t]);
+
+  useEffect(() => {
+    if (!selectedTab) return;
+    const sub = BackHandler.addEventListener('hardwareBackPress', () => {
+      setSelectedTab(null);
+      return true;
+    });
+    return () => sub.remove();
+  }, [selectedTab]);
+
+  const handleTabPress = (tab: TabDef) => {
+    if (!tab.implemented) return;
+    setSelectedTab(tab.id);
+    onTabSelect?.(tab.id);
+  };
+
+  if (selectedTab) {
+    const tabDef = TABS.find((tab) => tab.id === selectedTab)!;
+    const Component = TAB_COMPONENTS[selectedTab];
+    const TabIcon = tabDef.icon;
+    const tabLabel = t(`settings.tabs.${tabDef.id}`, tabDef.label);
+
+    return (
+      <SafeAreaView style={styles.container} edges={['top']}>
+        <View style={styles.header}>
+          <Pressable
+            onPress={() => setSelectedTab(null)}
+            style={({ pressed }) => [styles.headerBackBtn, pressed && styles.headerBackBtnPressed]}
+          >
+            <ArrowLeft size={20} color={c.text} />
+          </Pressable>
+          <TabIcon size={20} color={c.mutedForeground} />
+          <Text style={styles.headerTitle}>{tabLabel}</Text>
+        </View>
+
+        <ScrollView style={styles.scrollArea} contentContainerStyle={styles.detailContent}>
+          {Component ? <Component /> : null}
+        </ScrollView>
+      </SafeAreaView>
+    );
+  }
 
   return (
-    <ScrollView style={styles.container}>
+    <SafeAreaView style={styles.container} edges={['top']}>
+      {/* Header - matches webmail mobile: h-14, border-b, back button + icon + title */}
       <View style={styles.header}>
-        <Settings size={24} color={colors.primary} />
-        <Text style={styles.headerTitle}>Settings</Text>
+        <Pressable
+          onPress={onBack}
+          style={({ pressed }) => [styles.headerBackBtn, pressed && styles.headerBackBtnPressed]}
+        >
+          <ArrowLeft size={20} color={c.text} />
+        </Pressable>
+        <Settings size={20} color={c.mutedForeground} />
+        <Text style={styles.headerTitle}>{t('settings.title', 'Settings')}</Text>
       </View>
 
-      <View style={styles.profileCard}>
-        <View style={styles.profileAvatar}>
-          <Text style={styles.profileAvatarText}>B</Text>
+      {/* Tab list - matches webmail mobile: flat grouped list, no cards */}
+      <ScrollView style={styles.scrollArea} contentContainerStyle={styles.scrollContent}>
+        <View style={styles.tabList}>
+          {groupedTabs.map((group, groupIndex) => (
+            <View key={group.group}>
+              {groupIndex > 0 && <View style={styles.groupDivider} />}
+
+              <View style={styles.groupHeader}>
+                <Text style={styles.groupLabel}>{group.label}</Text>
+              </View>
+
+              {group.items.map((tab) => {
+                const Icon = tab.icon;
+                const disabled = !tab.implemented;
+                return (
+                  <Pressable
+                    key={tab.id}
+                    onPress={() => handleTabPress(tab)}
+                    disabled={disabled}
+                    style={({ pressed }) => [
+                      styles.tabItem,
+                      disabled && styles.tabItemDisabled,
+                      !disabled && pressed && styles.tabItemPressed,
+                    ]}
+                  >
+                    <View style={styles.tabItemLeft}>
+                      <Icon size={16} color={c.mutedForeground} />
+                      <Text
+                        style={[
+                          styles.tabItemLabel,
+                          disabled && styles.tabItemLabelDisabled,
+                        ]}
+                      >
+                        {tab.label}
+                      </Text>
+                      {tab.experimental && !disabled && (
+                        <View style={styles.experimentalBadge}>
+                          <Text style={styles.experimentalText}>Experimental</Text>
+                        </View>
+                      )}
+                    </View>
+                    {disabled ? (
+                      <View style={styles.notWorkingBadge}>
+                        <Text style={styles.notWorkingText}>Not implemented</Text>
+                      </View>
+                    ) : (
+                      <ChevronRight size={16} color={c.mutedForeground} />
+                    )}
+                  </Pressable>
+                );
+              })}
+            </View>
+          ))}
         </View>
-        <View style={styles.profileInfo}>
-          <Text style={styles.profileName}>Bulwark User</Text>
-          <Text style={styles.profileEmail}>user@example.com</Text>
+
+        {/* Logout - matches webmail: border-t, destructive text, icon + label */}
+        <View style={styles.logoutSection}>
+          <Pressable
+            onPress={onLogout}
+            style={({ pressed }) => [styles.logoutBtn, pressed && styles.logoutBtnPressed]}
+          >
+            <LogOut size={16} color={c.error} />
+            <Text style={styles.logoutText}>{t('sidebar.sign_out', 'Sign Out')}</Text>
+          </Pressable>
         </View>
-      </View>
-
-      <View style={styles.section}>
-        <Text style={styles.sectionTitle}>Account</Text>
-        <SettingItem
-          icon={<User size={20} color={colors.primary} />}
-          title="Account Settings"
-          subtitle="Manage your account details"
-        />
-        <SettingItem
-          icon={<Shield size={20} color={colors.primary} />}
-          title="Privacy & Security"
-          subtitle="Passwords, encryption, trusted senders"
-        />
-      </View>
-
-      <View style={styles.section}>
-        <Text style={styles.sectionTitle}>Preferences</Text>
-        <SettingItem
-          icon={<Palette size={20} color={colors.primary} />}
-          title="Dark Mode"
-          rightElement={<Switch value={darkMode} onValueChange={setDarkMode} trackColor={{ true: colors.primary }} />}
-        />
-        <SettingItem
-          icon={<Bell size={20} color={colors.primary} />}
-          title="Notifications"
-          rightElement={<Switch value={notifications} onValueChange={setNotifications} trackColor={{ true: colors.primary }} />}
-        />
-      </View>
-
-      <View style={styles.footer}>
-        <Text style={styles.footerText}>Bulwark Mobile v0.0.1</Text>
-        <Text style={styles.footerText}>Built with Expo + React Native</Text>
-      </View>
-    </ScrollView>
+      </ScrollView>
+    </SafeAreaView>
   );
 }
 
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.border,
-    gap: 8,
-  },
-  headerTitle: { fontSize: 20, fontWeight: '700', color: colors.text },
-  profileCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 16,
-    margin: 16,
-    backgroundColor: colors.surface,
-    borderRadius: 12,
-  },
-  profileAvatar: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    backgroundColor: colors.primary,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 16,
-  },
-  profileAvatarText: { fontSize: 24, fontWeight: '700', color: colors.textInverse },
-  profileInfo: { flex: 1 },
-  profileName: { fontSize: 18, fontWeight: '600', color: colors.text },
-  profileEmail: { fontSize: 14, color: colors.textSecondary, marginTop: 2 },
-  section: { marginTop: 8 },
-  sectionTitle: {
-    fontSize: 13,
-    fontWeight: '600',
-    color: colors.textSecondary,
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    textTransform: 'uppercase',
-    letterSpacing: 0.5,
-  },
-  settingRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-  },
-  settingRowPressed: { backgroundColor: colors.surfaceHover },
-  settingIcon: { marginRight: 14 },
-  settingContent: { flex: 1 },
-  settingTitle: { fontSize: 16, color: colors.text },
-  settingSubtitle: { fontSize: 13, color: colors.textSecondary, marginTop: 2 },
-  footer: {
-    alignItems: 'center',
-    paddingVertical: 32,
-    gap: 4,
-  },
-  footerText: { fontSize: 12, color: colors.textMuted },
-});
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+    container: { flex: 1, backgroundColor: c.background },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      height: componentSizes.headerHeight,
+      paddingHorizontal: spacing.lg,
+      borderBottomWidth: 1,
+      borderBottomColor: c.border,
+      gap: spacing.sm,
+    },
+    headerBackBtn: {
+      width: 40, height: 40,
+      alignItems: 'center', justifyContent: 'center',
+      borderRadius: radius.md,
+    },
+    headerBackBtnPressed: { backgroundColor: c.accent },
+    headerTitle: { ...typography.h3, color: c.text },
+
+    scrollArea: { flex: 1 },
+    scrollContent: { paddingBottom: 40 },
+    detailContent: { padding: spacing.lg, paddingBottom: 40 },
+
+    tabList: { paddingVertical: spacing.sm },
+
+    groupDivider: {
+      height: 1, backgroundColor: c.border,
+      marginHorizontal: 20, marginVertical: spacing.sm,
+    },
+    groupHeader: { paddingHorizontal: 20, paddingTop: spacing.md, paddingBottom: 6 },
+    groupLabel: {
+      fontSize: 11, fontWeight: '600',
+      textTransform: 'uppercase', letterSpacing: 0.8,
+      color: c.mutedForeground,
+    },
+
+    tabItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: 20, paddingVertical: 14,
+    },
+    tabItemPressed: { backgroundColor: c.muted },
+    tabItemLeft: {
+      flexDirection: 'row', alignItems: 'center',
+      gap: spacing.md, flex: 1,
+    },
+    tabItemLabel: { ...typography.body, color: c.text },
+
+    experimentalBadge: {
+      backgroundColor: 'rgba(202, 138, 4, 0.15)',
+      borderRadius: radius.full,
+      paddingHorizontal: 6, paddingVertical: 2,
+    },
+    experimentalText: { fontSize: 10, fontWeight: '500', color: c.warning },
+
+    tabItemDisabled: { opacity: 0.55 },
+    tabItemLabelDisabled: { color: c.mutedForeground },
+    notWorkingBadge: {
+      backgroundColor: c.muted,
+      borderRadius: radius.full,
+      paddingHorizontal: 8, paddingVertical: 2,
+    },
+    notWorkingText: { fontSize: 10, fontWeight: '500', color: c.mutedForeground },
+
+    logoutSection: {
+      borderTopWidth: 1, borderTopColor: c.border,
+      paddingHorizontal: 20, paddingVertical: spacing.md,
+    },
+    logoutBtn: {
+      flexDirection: 'row', alignItems: 'center', gap: spacing.md,
+      paddingVertical: 10, paddingHorizontal: spacing.sm,
+      borderRadius: radius.sm,
+    },
+    logoutBtnPressed: { backgroundColor: c.muted },
+    logoutText: { ...typography.body, color: c.error },
+  });
+}

src/screens/SettingsScreenNew.tsx

@@ -1,250 +0,0 @@
-import React from 'react';
-import { View, Text, StyleSheet, ScrollView, Pressable, Switch } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import {
-  User, Mail, CalendarDays, Shield, Bell, Palette, Globe, Lock,
-  ChevronRight, LogOut, Moon, Server, Key, Fingerprint, Info, HelpCircle
-} from 'lucide-react-native';
-import { colors, spacing, radius, typography, componentSizes } from '../theme/tokens';
-
-interface SettingItem {
-  id: string;
-  icon: any;
-  iconColor: string;
-  iconBg: string;
-  label: string;
-  detail?: string;
-  type: 'link' | 'toggle';
-  value?: boolean;
-}
-
-const PROFILE = {
-  name: 'Jane Doe',
-  email: 'jane@bulwark.mail',
-  plan: 'Pro',
-};
-
-const SECTIONS: { title: string; items: SettingItem[] }[] = [
-  {
-    title: 'Account',
-    items: [
-      { id: 'profile', icon: User, iconColor: colors.primary, iconBg: colors.primaryBg, label: 'Profile', detail: PROFILE.email, type: 'link' },
-      { id: 'identities', icon: Mail, iconColor: colors.calendar.purple, iconBg: colors.calendar.purpleBg, label: 'Identities & Signatures', type: 'link' },
-      { id: 'security', icon: Lock, iconColor: colors.error, iconBg: colors.errorBg, label: 'Security', detail: '2FA enabled', type: 'link' },
-    ],
-  },
-  {
-    title: 'Email',
-    items: [
-      { id: 'filters', icon: Mail, iconColor: colors.calendar.teal, iconBg: colors.calendar.tealBg, label: 'Filters & Rules', type: 'link' },
-      { id: 'smime', icon: Shield, iconColor: colors.calendar.indigo, iconBg: colors.calendar.indigoBg, label: 'S/MIME Encryption', type: 'link' },
-      { id: 'vacation', icon: CalendarDays, iconColor: colors.calendar.orange, iconBg: colors.warningBg, label: 'Vacation Responder', detail: 'Off', type: 'link' },
-    ],
-  },
-  {
-    title: 'Appearance',
-    items: [
-      { id: 'theme', icon: Palette, iconColor: colors.calendar.pink, iconBg: colors.calendar.pinkBg, label: 'Theme', detail: 'System', type: 'link' },
-      { id: 'darkMode', icon: Moon, iconColor: colors.calendar.purple, iconBg: colors.calendar.purpleBg, label: 'Dark Mode', type: 'toggle', value: false },
-      { id: 'language', icon: Globe, iconColor: colors.calendar.blue, iconBg: colors.primaryBg, label: 'Language', detail: 'English', type: 'link' },
-    ],
-  },
-  {
-    title: 'Notifications',
-    items: [
-      { id: 'pushNotif', icon: Bell, iconColor: colors.calendar.green, iconBg: colors.successBg, label: 'Push Notifications', type: 'toggle', value: true },
-      { id: 'emailNotif', icon: Mail, iconColor: colors.primary, iconBg: colors.primaryBg, label: 'Email Notifications', type: 'toggle', value: true },
-    ],
-  },
-  {
-    title: 'Advanced',
-    items: [
-      { id: 'server', icon: Server, iconColor: colors.textMuted, iconBg: colors.surface, label: 'Server Settings', type: 'link' },
-      { id: 'privacy', icon: Fingerprint, iconColor: colors.textSecondary, iconBg: colors.surface, label: 'Privacy', type: 'link' },
-      { id: 'about', icon: Info, iconColor: colors.textMuted, iconBg: colors.surface, label: 'About', detail: 'v1.0.0', type: 'link' },
-      { id: 'help', icon: HelpCircle, iconColor: colors.textMuted, iconBg: colors.surface, label: 'Help & Support', type: 'link' },
-    ],
-  },
-];
-
-function SettingRow({ item }: { item: SettingItem }) {
-  const Icon = item.icon;
-  const [toggled, setToggled] = React.useState(item.value ?? false);
-
-  return (
-    <Pressable
-      style={({ pressed }) => [styles.settingRow, pressed && item.type === 'link' && styles.settingRowPressed]}
-    >
-      <View style={[styles.settingIcon, { backgroundColor: item.iconBg }]}>
-        <Icon size={18} color={item.iconColor} />
-      </View>
-      <View style={styles.settingContent}>
-        <Text style={styles.settingLabel}>{item.label}</Text>
-        {item.detail && item.type === 'link' && (
-          <Text style={styles.settingDetail}>{item.detail}</Text>
-        )}
-      </View>
-      {item.type === 'link' && (
-        <ChevronRight size={18} color={colors.textMuted} />
-      )}
-      {item.type === 'toggle' && (
-        <Switch
-          value={toggled}
-          onValueChange={setToggled}
-          trackColor={{ false: colors.surface, true: colors.primary }}
-          thumbColor={colors.background}
-        />
-      )}
-    </Pressable>
-  );
-}
-
-interface SettingsScreenProps {
-  onLogout?: () => void;
-}
-
-export default function SettingsScreen({ onLogout }: SettingsScreenProps) {
-  return (
-    <SafeAreaView style={styles.container} edges={['top']}>
-      <ScrollView contentContainerStyle={styles.scrollContent}>
-        {/* Profile card */}
-        <View style={styles.profileCard}>
-          <View style={styles.profileAvatar}>
-            <Text style={styles.profileAvatarText}>JD</Text>
-          </View>
-          <View style={styles.profileInfo}>
-            <Text style={styles.profileName}>{PROFILE.name}</Text>
-            <Text style={styles.profileEmail}>{PROFILE.email}</Text>
-          </View>
-          <View style={styles.planBadge}>
-            <Text style={styles.planBadgeText}>{PROFILE.plan}</Text>
-          </View>
-        </View>
-
-        {/* Settings sections */}
-        {SECTIONS.map(section => (
-          <View key={section.title} style={styles.section}>
-            <Text style={styles.sectionTitle}>{section.title}</Text>
-            <View style={styles.sectionCard}>
-              {section.items.map((item, idx) => (
-                <React.Fragment key={item.id}>
-                  {idx > 0 && <View style={styles.sectionSeparator} />}
-                  <SettingRow item={item} />
-                </React.Fragment>
-              ))}
-            </View>
-          </View>
-        ))}
-
-        {/* Sign out */}
-        <Pressable style={styles.signOutBtn} onPress={onLogout}>
-          <LogOut size={18} color={colors.error} />
-          <Text style={styles.signOutText}>Sign Out</Text>
-        </Pressable>
-
-        {/* Version info */}
-        <Text style={styles.versionText}>Bulwark Mobile v0.0.1</Text>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: colors.background },
-  scrollContent: { paddingBottom: 40 },
-
-  // Profile card
-  profileCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    margin: spacing.lg,
-    padding: spacing.lg,
-    backgroundColor: colors.surface,
-    borderRadius: radius.xl,
-    gap: spacing.md,
-  },
-  profileAvatar: {
-    width: componentSizes.avatarLg, height: componentSizes.avatarLg,
-    borderRadius: componentSizes.avatarLg / 2,
-    backgroundColor: colors.primary,
-    alignItems: 'center', justifyContent: 'center',
-  },
-  profileAvatarText: { ...typography.h3, color: colors.textInverse },
-  profileInfo: { flex: 1 },
-  profileName: { ...typography.bodyMedium, color: colors.text },
-  profileEmail: { ...typography.caption, color: colors.textMuted, marginTop: 2 },
-  planBadge: {
-    backgroundColor: colors.primaryBg,
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderRadius: radius.full,
-  },
-  planBadgeText: { ...typography.small, color: colors.primary },
-
-  // Sections
-  section: {
-    marginHorizontal: spacing.lg,
-    marginBottom: spacing.xl,
-  },
-  sectionTitle: {
-    ...typography.small,
-    color: colors.textMuted,
-    textTransform: 'uppercase',
-    letterSpacing: 0.5,
-    marginBottom: spacing.sm,
-    marginLeft: spacing.xs,
-  },
-  sectionCard: {
-    backgroundColor: colors.surface,
-    borderRadius: radius.lg,
-    overflow: 'hidden',
-  },
-  sectionSeparator: {
-    height: 1,
-    backgroundColor: colors.borderLight,
-    marginLeft: 56,
-  },
-
-  // Setting row
-  settingRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.md,
-    gap: spacing.md,
-  },
-  settingRowPressed: { backgroundColor: colors.surfaceHover },
-  settingIcon: {
-    width: 32, height: 32,
-    borderRadius: radius.sm,
-    alignItems: 'center', justifyContent: 'center',
-  },
-  settingContent: { flex: 1 },
-  settingLabel: { ...typography.body, color: colors.text },
-  settingDetail: { ...typography.small, color: colors.textMuted, marginTop: 1 },
-
-  // Sign out
-  signOutBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: spacing.sm,
-    marginHorizontal: spacing.lg,
-    marginTop: spacing.md,
-    paddingVertical: spacing.md,
-    borderRadius: radius.lg,
-    borderWidth: 1,
-    borderColor: colors.errorBorder,
-    backgroundColor: colors.errorBg,
-  },
-  signOutText: { ...typography.bodyMedium, color: colors.error },
-
-  // Version
-  versionText: {
-    ...typography.small,
-    color: colors.textMuted,
-    textAlign: 'center',
-    marginTop: spacing.xl,
-    marginBottom: spacing.lg,
-  },
-});

src/screens/SettingsScreenNew2.tsx

@@ -1,359 +0,0 @@
-import React, { useState } from 'react';
-import { View, Text, StyleSheet, ScrollView, Pressable } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import {
-  ArrowLeft, LogOut, Settings, ChevronRight,
-  Palette, Mail, User, Shield, UserPen, Palmtree, Calendar,
-  Filter, FileText, FolderOpen, Tags, HardDrive, Wrench,
-  BookUser, KeyRound, PanelLeftClose, Bell, Puzzle, RefreshCw,
-  type LucideIcon,
-} from 'lucide-react-native';
-import { colors, spacing, radius, typography, componentSizes } from '../theme/tokens';
-import { EmailSettings } from '../components/settings/EmailSettings';
-import { NotificationSettings } from '../components/settings/NotificationSettings';
-import { AccountSettings } from '../components/settings/AccountSettings';
-import { IdentitySettings } from '../components/settings/IdentitySettings';
-import { VacationSettings } from '../components/settings/VacationSettings';
-import { FolderSettings } from '../components/settings/FolderSettings';
-import { AdvancedSettings } from '../components/settings/AdvancedSettings';
-import { UpdatesSettings } from '../components/settings/UpdatesSettings';
-
-type Tab =
-  | 'appearance' | 'email' | 'notifications'
-  | 'account' | 'security' | 'identities' | 'encryption' | 'vacation'
-  | 'filters' | 'templates' | 'folders' | 'keywords'
-  | 'calendar' | 'contacts' | 'files' | 'sidebar_apps'
-  | 'themes' | 'plugins' | 'updates' | 'advanced';
-
-type TabGroup = 'general' | 'account' | 'organization' | 'apps' | 'system';
-
-interface TabDef {
-  id: Tab;
-  label: string;
-  icon: LucideIcon;
-  group: TabGroup;
-  experimental?: boolean;
-  implemented: boolean;
-}
-
-const GROUP_LABELS: Record<TabGroup, string> = {
-  general: 'General',
-  account: 'Account',
-  organization: 'Organization',
-  apps: 'Apps',
-  system: 'System',
-};
-
-const GROUP_ORDER: TabGroup[] = ['general', 'account', 'organization', 'apps', 'system'];
-
-const TABS: TabDef[] = [
-  { id: 'appearance',   label: 'Appearance',            icon: Palette,        group: 'general',      implemented: false },
-  { id: 'email',        label: 'Email',                 icon: Mail,           group: 'general',      implemented: true },
-  { id: 'notifications',label: 'Notifications',         icon: Bell,           group: 'general',      implemented: true },
-  { id: 'account',      label: 'Account',               icon: User,           group: 'account',      implemented: true },
-  { id: 'security',     label: 'Security',              icon: Shield,         group: 'account',      implemented: false },
-  { id: 'identities',   label: 'Identities',            icon: UserPen,        group: 'account',      implemented: true },
-  { id: 'encryption',   label: 'S/MIME Encryption',     icon: KeyRound,       group: 'account',      implemented: false },
-  { id: 'vacation',     label: 'Vacation Responder',    icon: Palmtree,       group: 'account',      implemented: true },
-  { id: 'filters',      label: 'Filters & Rules',       icon: Filter,         group: 'organization', implemented: false },
-  { id: 'templates',    label: 'Templates',             icon: FileText,       group: 'organization', implemented: false },
-  { id: 'folders',      label: 'Folders',               icon: FolderOpen,     group: 'organization', implemented: true },
-  { id: 'keywords',     label: 'Keywords & Labels',     icon: Tags,           group: 'organization', implemented: false },
-  { id: 'calendar',     label: 'Calendar',              icon: Calendar,       group: 'apps',         implemented: false },
-  { id: 'contacts',     label: 'Contacts',              icon: BookUser,       group: 'apps',         implemented: false },
-  { id: 'files',        label: 'Files',                 icon: HardDrive,      group: 'apps',         implemented: false },
-  { id: 'sidebar_apps', label: 'Sidebar Apps',          icon: PanelLeftClose, group: 'apps',         implemented: false },
-  { id: 'themes',       label: 'Themes',                icon: Palette,        group: 'system',       experimental: true, implemented: false },
-  { id: 'plugins',      label: 'Plugins',               icon: Puzzle,         group: 'system',       experimental: true, implemented: false },
-  { id: 'updates',      label: 'Updates',               icon: RefreshCw,      group: 'system',       implemented: true },
-  { id: 'advanced',     label: 'Advanced',              icon: Wrench,         group: 'system',       implemented: true },
-];
-
-const TAB_COMPONENTS: Partial<Record<Tab, React.ComponentType<any>>> = {
-  email: EmailSettings,
-  notifications: NotificationSettings,
-  account: AccountSettings,
-  identities: IdentitySettings,
-  vacation: VacationSettings,
-  folders: FolderSettings,
-  updates: UpdatesSettings,
-  advanced: AdvancedSettings,
-};
-
-function groupTabs() {
-  return GROUP_ORDER.map(group => ({
-    group,
-    label: GROUP_LABELS[group],
-    items: TABS.filter(t => t.group === group),
-  })).filter(g => g.items.length > 0);
-}
-
-interface SettingsScreenProps {
-  onLogout?: () => void;
-  onBack?: () => void;
-  onTabSelect?: (tab: Tab) => void;
-}
-
-export default function SettingsScreen({ onLogout, onBack, onTabSelect }: SettingsScreenProps) {
-  const [selectedTab, setSelectedTab] = useState<Tab | null>(null);
-  const groupedTabs = groupTabs();
-
-  const handleTabPress = (tab: TabDef) => {
-    if (!tab.implemented) return;
-    setSelectedTab(tab.id);
-    onTabSelect?.(tab.id);
-  };
-
-  if (selectedTab) {
-    const tabDef = TABS.find(t => t.id === selectedTab)!;
-    const Component = TAB_COMPONENTS[selectedTab];
-    const TabIcon = tabDef.icon;
-
-    return (
-      <SafeAreaView style={styles.container} edges={['top']}>
-        <View style={styles.header}>
-          <Pressable
-            onPress={() => setSelectedTab(null)}
-            style={({ pressed }) => [styles.headerBackBtn, pressed && styles.headerBackBtnPressed]}
-          >
-            <ArrowLeft size={20} color={colors.text} />
-          </Pressable>
-          <TabIcon size={20} color={colors.mutedForeground} />
-          <Text style={styles.headerTitle}>{tabDef.label}</Text>
-        </View>
-
-        <ScrollView style={styles.scrollArea} contentContainerStyle={styles.detailContent}>
-          {Component ? <Component /> : null}
-        </ScrollView>
-      </SafeAreaView>
-    );
-  }
-
-  return (
-    <SafeAreaView style={styles.container} edges={['top']}>
-      {/* Header - matches webmail mobile: h-14, border-b, back button + icon + title */}
-      <View style={styles.header}>
-        <Pressable
-          onPress={onBack}
-          style={({ pressed }) => [styles.headerBackBtn, pressed && styles.headerBackBtnPressed]}
-        >
-          <ArrowLeft size={20} color={colors.text} />
-        </Pressable>
-        <Settings size={20} color={colors.mutedForeground} />
-        <Text style={styles.headerTitle}>Settings</Text>
-      </View>
-
-      {/* Tab list - matches webmail mobile: flat grouped list, no cards */}
-      <ScrollView style={styles.scrollArea} contentContainerStyle={styles.scrollContent}>
-        <View style={styles.tabList}>
-          {groupedTabs.map((group, groupIndex) => (
-            <View key={group.group}>
-              {groupIndex > 0 && <View style={styles.groupDivider} />}
-
-              <View style={styles.groupHeader}>
-                <Text style={styles.groupLabel}>{group.label}</Text>
-              </View>
-
-              {group.items.map((tab) => {
-                const Icon = tab.icon;
-                const disabled = !tab.implemented;
-                return (
-                  <Pressable
-                    key={tab.id}
-                    onPress={() => handleTabPress(tab)}
-                    disabled={disabled}
-                    style={({ pressed }) => [
-                      styles.tabItem,
-                      disabled && styles.tabItemDisabled,
-                      !disabled && pressed && styles.tabItemPressed,
-                    ]}
-                  >
-                    <View style={styles.tabItemLeft}>
-                      <Icon size={16} color={colors.mutedForeground} />
-                      <Text
-                        style={[
-                          styles.tabItemLabel,
-                          disabled && styles.tabItemLabelDisabled,
-                        ]}
-                      >
-                        {tab.label}
-                      </Text>
-                      {tab.experimental && !disabled && (
-                        <View style={styles.experimentalBadge}>
-                          <Text style={styles.experimentalText}>Experimental</Text>
-                        </View>
-                      )}
-                    </View>
-                    {disabled ? (
-                      <View style={styles.notWorkingBadge}>
-                        <Text style={styles.notWorkingText}>Not implemented</Text>
-                      </View>
-                    ) : (
-                      <ChevronRight size={16} color={colors.mutedForeground} />
-                    )}
-                  </Pressable>
-                );
-              })}
-            </View>
-          ))}
-        </View>
-
-        {/* Logout - matches webmail: border-t, destructive text, icon + label */}
-        <View style={styles.logoutSection}>
-          <Pressable
-            onPress={onLogout}
-            style={({ pressed }) => [styles.logoutBtn, pressed && styles.logoutBtnPressed]}
-          >
-            <LogOut size={16} color={colors.error} />
-            <Text style={styles.logoutText}>Sign Out</Text>
-          </Pressable>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: colors.background,
-  },
-
-  // Header - webmail: h-14, px-4, border-b, flex items-center gap-2
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    height: componentSizes.headerHeight,
-    paddingHorizontal: spacing.lg,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.border,
-    gap: spacing.sm,
-  },
-  headerBackBtn: {
-    width: 40,
-    height: 40,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: radius.md,
-  },
-  headerBackBtnPressed: {
-    backgroundColor: colors.accent,
-  },
-  headerTitle: {
-    ...typography.h3,
-    color: colors.text,
-  },
-
-  scrollArea: {
-    flex: 1,
-  },
-  scrollContent: {
-    paddingBottom: 40,
-  },
-  detailContent: {
-    padding: spacing.lg,
-    paddingBottom: 40,
-  },
-
-  tabList: {
-    paddingVertical: spacing.sm,
-  },
-
-  // Group divider - webmail: mx-5 my-2 border-t border-border
-  groupDivider: {
-    height: 1,
-    backgroundColor: colors.border,
-    marginHorizontal: 20,
-    marginVertical: spacing.sm,
-  },
-
-  // Group header - webmail: px-5 pt-3 pb-1.5
-  groupHeader: {
-    paddingHorizontal: 20,
-    paddingTop: spacing.md,
-    paddingBottom: 6,
-  },
-  groupLabel: {
-    fontSize: 11,
-    fontWeight: '600',
-    textTransform: 'uppercase',
-    letterSpacing: 0.8,
-    color: colors.mutedForeground,
-  },
-
-  // Tab item - webmail: px-5 py-3.5, icon w-4 h-4 text-muted-foreground, gap-3, ChevronRight
-  tabItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 20,
-    paddingVertical: 14,
-  },
-  tabItemPressed: {
-    backgroundColor: colors.muted,
-  },
-  tabItemLeft: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing.md,
-    flex: 1,
-  },
-  tabItemLabel: {
-    ...typography.body,
-    color: colors.text,
-  },
-
-  // Experimental badge - webmail: text-[10px] rounded-full bg-warning/15 text-warning
-  experimentalBadge: {
-    backgroundColor: 'rgba(202, 138, 4, 0.15)',
-    borderRadius: radius.full,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-  },
-  experimentalText: {
-    fontSize: 10,
-    fontWeight: '500',
-    color: colors.warning,
-  },
-
-  tabItemDisabled: {
-    opacity: 0.55,
-  },
-  tabItemLabelDisabled: {
-    color: colors.mutedForeground,
-  },
-  notWorkingBadge: {
-    backgroundColor: colors.muted,
-    borderRadius: radius.full,
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-  },
-  notWorkingText: {
-    fontSize: 10,
-    fontWeight: '500',
-    color: colors.mutedForeground,
-  },
-
-  // Logout - webmail: border-t border-border, px-5 py-3, destructive text
-  logoutSection: {
-    borderTopWidth: 1,
-    borderTopColor: colors.border,
-    paddingHorizontal: 20,
-    paddingVertical: spacing.md,
-  },
-  logoutBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing.md,
-    paddingVertical: 10,
-    paddingHorizontal: spacing.sm,
-    borderRadius: radius.sm,
-  },
-  logoutBtnPressed: {
-    backgroundColor: colors.muted,
-  },
-  logoutText: {
-    ...typography.body,
-    color: colors.error,
-  },
-});

src/stores/keywords-store.ts

@@ -0,0 +1,89 @@
+import { create } from 'zustand';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { colors } from '../theme/tokens';
+
+const STORAGE_KEY = 'webmail:keywords:v1';
+
+export type KeywordColor = keyof typeof colors.tags;
+
+export interface KeywordDef {
+  id: string;
+  label: string;
+  color: KeywordColor;
+}
+
+const DEFAULT_KEYWORDS: KeywordDef[] = [
+  { id: 'important', label: 'Important', color: 'red' },
+  { id: 'work',      label: 'Work',      color: 'blue' },
+  { id: 'personal',  label: 'Personal',  color: 'green' },
+  { id: 'todo',      label: 'Todo',      color: 'amber' },
+];
+
+/**
+ * JMAP keyword token used on emails for a given keyword id.
+ * Matches webmail convention: `$label:<id>`.
+ */
+export function keywordToken(id: string): string {
+  return `$label:${id}`;
+}
+
+interface KeywordsState {
+  keywords: KeywordDef[];
+  hydrated: boolean;
+  hydrate: () => Promise<void>;
+  add: (kw: KeywordDef) => void;
+  update: (id: string, patch: Partial<Omit<KeywordDef, 'id'>>) => void;
+  remove: (id: string) => void;
+  resetDefaults: () => void;
+}
+
+function persist(keywords: KeywordDef[]): void {
+  void AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(keywords)).catch((err) => {
+    console.warn('[keywords-store] persist failed', err);
+  });
+}
+
+export const useKeywordsStore = create<KeywordsState>((set, get) => ({
+  keywords: DEFAULT_KEYWORDS,
+  hydrated: false,
+
+  hydrate: async () => {
+    if (get().hydrated) return;
+    try {
+      const raw = await AsyncStorage.getItem(STORAGE_KEY);
+      if (raw) {
+        const parsed = JSON.parse(raw) as KeywordDef[];
+        if (Array.isArray(parsed)) {
+          set({ keywords: parsed, hydrated: true });
+          return;
+        }
+      }
+    } catch (err) {
+      console.warn('[keywords-store] hydrate failed', err);
+    }
+    set({ hydrated: true });
+  },
+
+  add: (kw) => {
+    const next = [...get().keywords, kw];
+    set({ keywords: next });
+    persist(next);
+  },
+
+  update: (id, patch) => {
+    const next = get().keywords.map((k) => (k.id === id ? { ...k, ...patch } : k));
+    set({ keywords: next });
+    persist(next);
+  },
+
+  remove: (id) => {
+    const next = get().keywords.filter((k) => k.id !== id);
+    set({ keywords: next });
+    persist(next);
+  },
+
+  resetDefaults: () => {
+    set({ keywords: DEFAULT_KEYWORDS });
+    persist(DEFAULT_KEYWORDS);
+  },
+}));