ucswift · Oct 9, 2026 · Oct 9, 2026 · Oct 9, 2026 · coderabbitai · Oct 9, 2026
diff --git a/AGENTS.md b/AGENTS.md
@@ -47,7 +47,6 @@ src/
 │   ├── common/           # Cross-feature shared components
 │   └── [domain]/         # Domain-specific components (maps, calls, etc.)
 ├── constants/            # App constants (colors, map icons)
-├── features/             # Feature-specific modules (livekit-call)
 ├── hooks/                # Custom React hooks
 ├── lib/                  # Core utilities & services
 │   ├── auth/             # Auth API, types, and utilities

diff --git a/CLAUDE.md b/CLAUDE.md
@@ -95,7 +95,6 @@ src/
 │   ├── common/           # Cross-feature shared components
 │   └── [domain]/         # Domain-specific components (maps, calls, etc.)
 ├── constants/            # App constants (colors, map icons)
-├── features/             # Feature-specific modules (livekit-call)
 ├── hooks/                # Custom React hooks
 ├── lib/                  # Core utilities & services
 │   ├── auth/             # Auth API, types, and utilities

diff --git a/docs/bluetooth-audio-integration.md b/docs/bluetooth-audio-integration.md
@@ -25,17 +25,16 @@ This system provides comprehensive Bluetooth audio device integration for the Li
    - Tracks available devices, connection status, and button events
    - Provides reactive state for UI components
 
-3. **BluetoothAudioModal** (`src/components/bluetooth/bluetooth-audio-modal.tsx`)
+3. **BluetoothDeviceSelectionBottomSheet** (`src/components/settings/bluetooth-device-selection-bottom-sheet.tsx`)
    - User interface for device selection and management
    - Shows device list, connection status, and controls
-   - Displays button events and audio routing status
 
 ### Data Flow
 
 ```mermaid
 graph TD
     A[BluetoothAudioService] --> B[BluetoothAudioStore]
-    B --> C[BluetoothAudioModal]
+    B --> C[BluetoothDeviceSelectionBottomSheet]
     A --> D[LiveKit Integration]
     E[BLE Device] --> A
     A --> F[Audio Routing]
@@ -51,18 +50,18 @@ graph TD
 ```typescript
 import { bluetoothAudioService } from '@/services/bluetooth-audio.service';
 import { useBluetoothAudioStore } from '@/stores/app/bluetooth-audio-store';
-import BluetoothAudioModal from '@/components/bluetooth/bluetooth-audio-modal';
+import { BluetoothDeviceSelectionBottomSheet } from '@/components/settings/bluetooth-device-selection-bottom-sheet';
 ```
 
 ### 2. Show Device Selection UI
 
 ```typescript
-const [isBluetoothModalOpen, setIsBluetoothModalOpen] = useState(false);
+const [isDeviceSelectionOpen, setIsDeviceSelectionOpen] = useState(false);
 
 // In your component render:
-<BluetoothAudioModal
-  isOpen={isBluetoothModalOpen}
-  onClose={() => setIsBluetoothModalOpen(false)}
+<BluetoothDeviceSelectionBottomSheet
+  isOpen={isDeviceSelectionOpen}
+  onClose={() => setIsDeviceSelectionOpen(false)}
 />
 ```
 
@@ -308,7 +307,7 @@ Tests are provided for:
 
 - BluetoothAudioStore state management
 - BluetoothAudioService methods
-- BluetoothAudioModal UI components
+- BluetoothDeviceSelectionBottomSheet UI components
 
 ### Mocking
 
@@ -324,7 +323,7 @@ The system includes mocks for:
 # Run all Bluetooth audio tests
 yarn test src/stores/app/__tests__/bluetooth-audio-store.test.ts
 yarn test src/services/__tests__/bluetooth-audio.service.test.ts
-yarn test src/components/bluetooth/__tests__/bluetooth-audio-modal.test.tsx
+yarn test src/components/settings/__tests__/bluetooth-device-selection-bottom-sheet.test.tsx
 ```
 
 ## Performance Considerations

diff --git a/src/app/(app)/_layout.tsx b/src/app/(app)/_layout.tsx
@@ -449,7 +449,8 @@ export default function TabLayout() {
         zIndex: 100,
         backgroundColor: 'transparent',
         borderTopWidth: 0.5,
-        borderTopColor: 'rgba(0, 0, 0, 0.1)',
+        // Mid-gray rather than black-alpha so the divider still shows on the dark tab bar.
+        borderTopColor: 'rgba(127, 127, 127, 0.2)',
       },
     }),
     [isLandscape, insets.bottom]
@@ -462,12 +463,12 @@ export default function TabLayout() {
   const handleCloseNotifications = useCallback(() => setIsNotificationsOpen(false), []);
 
   // Memoize per-screen tab bar icon renderers to prevent new functions every render
-  const mapIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Map} stroke={color as string} className="text-primary-500 dark:text-primary-400" />, []);
-  const callsIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Megaphone} stroke={color as string} className="text-primary-500 dark:text-primary-400" />, []);
-  const contactsIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Contact} stroke={color as string} className="text-primary-500 dark:text-primary-400" />, []);
+  const mapIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Map} stroke={color as string} className="text-primary-500" />, []);
+  const callsIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Megaphone} stroke={color as string} className="text-primary-500" />, []);
+  const contactsIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Contact} stroke={color as string} className="text-primary-500" />, []);
   const notesIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Notebook} stroke={color as string} />, []);
-  const routesIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Navigation} stroke={color as string} className="text-primary-500 dark:text-primary-400" />, []);
-  const weatherAlertsIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={CloudAlert} stroke={color as string} className="text-primary-500 dark:text-primary-400" />, []);
+  const routesIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Navigation} stroke={color as string} className="text-primary-500" />, []);
+  const weatherAlertsIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={CloudAlert} stroke={color as string} className="text-primary-500" />, []);
   const protocolsIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={ListTree} stroke={color as string} />, []);
   const settingsIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Settings} stroke={color as string} />, []);
 
@@ -604,7 +605,7 @@ export default function TabLayout() {
 
       {/* Loading overlay during initialization — shown on top of Tabs so the navigator stays mounted */}
       {!isInitComplete ? (
-        <View style={styles.loadingOverlay}>
+        <View style={styles.loadingOverlay} className={Platform.OS === 'web' ? 'bg-background-0' : 'bg-background-0/95'}>
           <ActivityIndicator size="large" />
         </View>
       ) : null}
@@ -701,7 +702,8 @@ const CreateDrawerMenuButton = ({ setIsOpen, isLandscape }: CreateDrawerMenuButt
         setIsOpen(true);
       }}
     >
-      <Menu size={24} color="currentColor" className="text-gray-700 dark:text-gray-300" />
+      {/* No `color` prop: an explicit one overrides the className colour, and "currentColor" resolves to black against the dark header. */}
+      <Menu size={24} className="text-gray-700 dark:text-gray-300" />
     </Pressable>
   );
 };
@@ -743,7 +745,6 @@ const styles = StyleSheet.create({
     ...(StyleSheet.absoluteFill as object),
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: Platform.OS === 'web' ? '#ffffff' : 'rgba(255,255,255,0.95)',
     zIndex: 1000,
   },
 });
diff --git a/src/app/(app)/chat.tsx b/src/app/(app)/chat.tsx
@@ -66,7 +66,7 @@ function ChannelRow({ channel, onPress }: { channel: ChatChannelResultData; onPr
           ) : null}
         </VStack>
         {unread ? (
-          <Badge className="rounded-full bg-primary-600" size="sm">
+          <Badge className="rounded-full bg-primary-600 dark:bg-primary-400" size="sm">
             <BadgeText className="text-white">{channel.UnreadCount > 99 ? '99+' : String(channel.UnreadCount)}</BadgeText>
           </Badge>
         ) : null}

diff --git a/src/app/(app)/chatbot.tsx b/src/app/(app)/chatbot.tsx
@@ -1,5 +1,6 @@
 import { Redirect, useFocusEffect } from 'expo-router';
 import { RefreshCw, Send, Sparkles } from 'lucide-react-native';
+import { useColorScheme } from 'nativewind';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useWindowDimensions } from 'react-native';
@@ -30,6 +31,7 @@ import { useToastStore } from '@/stores/toast/store';
 
 export default function ChatbotScreen() {
   const { t } = useTranslation();
+  const { colorScheme } = useColorScheme();
   // The assistant is a hidden tab, so the tab bar still sits below it and the keyboard
   // already covers that strip — pad for the remainder only.
   const insets = useSafeAreaInsets();
@@ -117,7 +119,7 @@ export default function ChatbotScreen() {
           </VStack>
         </HStack>
         <Pressable className="flex-row items-center rounded-full bg-purple-100 px-3 py-1 dark:bg-purple-900" onPress={() => useChatStore.getState().newChatbotSession()} accessibilityLabel={t('chatbot.new_session')}>
-          <RefreshCw size={14} color="#7c3aed" />
+          <RefreshCw size={14} color={colorScheme === 'dark' ? '#d8b4fe' : '#7c3aed'} />
           <Text className="ml-1 text-xs font-medium text-purple-700 dark:text-purple-300">{t('chatbot.new_session')}</Text>
         </Pressable>
       </HStack>
@@ -156,7 +158,7 @@ export default function ChatbotScreen() {
             </Input>
           </Box>
           <Pressable className={`rounded-full p-2 ${text.trim() ? 'bg-purple-600' : 'bg-background-300'}`} onPress={send} disabled={!text.trim()} accessibilityLabel={t('chat.send')}>
-            <Send size={20} color="#ffffff" />
+            <Send size={20} color={text.trim() || colorScheme === 'dark' ? '#ffffff' : '#737373'} />
           </Pressable>
         </HStack>
       </BottomAnchoredKeyboardView>

diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
@@ -32,7 +32,7 @@ import { StatusBottomSheet } from '@/components/status/status-bottom-sheet';
 import { ToastContainer } from '@/components/toast/toast-container';
 import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider';
 import { loadKeepAliveState } from '@/lib/hooks/use-keep-alive';
-import { loadSelectedTheme } from '@/lib/hooks/use-selected-theme';
+import { loadSelectedTheme, useSelectedTheme } from '@/lib/hooks/use-selected-theme';
 import { logger } from '@/lib/logging';
 import { registerNavigationReadyCheck } from '@/lib/navigation';
 import { getDeviceUuid, setDeviceUuid } from '@/lib/storage/app';
@@ -224,10 +224,13 @@ function Providers({ children }: { children: React.ReactNode }) {
   // nativewind's hook (not react-native's) so manually selected themes are
   // reflected on web, where Appearance only tracks the system preference.
   const { colorScheme } = useColorScheme();
+  // The provider gets the user's choice, not the resolved scheme: handing it the resolved 'light' or 'dark'
+  // pinned Appearance to that value, so a 'system' choice stopped following the OS until a restart.
+  const { selectedTheme } = useSelectedTheme();
 
   const renderContent = () => (
     <APIProvider>
-      <GluestackUIProvider mode={(colorScheme ?? 'light') as 'light' | 'dark'}>
+      <GluestackUIProvider mode={selectedTheme}>
         <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
           <BottomSheetModalProvider>
             {children}

diff --git a/src/app/call/[id].tsx b/src/app/call/[id].tsx
@@ -493,10 +493,10 @@ export default function CallDetail() {
                   <Box key={index} className="rounded-lg bg-gray-50 p-3 dark:bg-gray-700">
                     <Text className="font-semibold">{dispatched.Name}</Text>
                     <HStack className="mt-1">
-                      <Text className="mr-2 text-sm text-gray-600">
+                      <Text className="mr-2 text-sm text-gray-600 dark:text-gray-400">
                         {t('call_detail.group')}: {dispatched.Group}
                       </Text>
-                      <Text className="text-sm text-gray-600">
+                      <Text className="text-sm text-gray-600 dark:text-gray-400">
                         {t('call_detail.type')}: {dispatched.Type}
                       </Text>
                     </HStack>
@@ -527,7 +527,7 @@ export default function CallDetail() {
                       {/* Marks a status the sender did not link to this call themselves (auto-linked / inferred). */}
                       <ActivityLinkMarker source={event.DestinationSource} />
                     </HStack>
-                    <Text className="text-sm text-gray-600">
+                    <Text className="text-sm text-gray-600 dark:text-gray-400">
                       {event.Name} - {event.Group}
                     </Text>
                     <Text className="text-xs text-gray-500">{new Date(event.Timestamp).toLocaleString()}</Text>

diff --git a/src/app/call/new/index.tsx b/src/app/call/new/index.tsx
@@ -697,7 +697,7 @@ export default function NewCall() {
                   <ButtonText>{t('common.cancel')}</ButtonText>
                 </Button>
                 <Button className="ml-10 flex-1" variant="solid" action="primary" isDisabled={!fieldPolicy.isLoaded || isSubmitting} onPress={handleSubmit(onSubmit)} testID="create-call-button">
-                  {isSubmitting ? <ButtonSpinner className="mr-2" /> : <PlusIcon size={18} className="mr-2" />}
+                  {isSubmitting ? <ButtonSpinner className="mr-2" /> : <PlusIcon size={18} className="mr-2 text-typography-0" />}
                   <ButtonText>{isSubmitting ? t('common.submitting') : t('calls.create')}</ButtonText>
                 </Button>
               </Box>

diff --git a/src/app/chat/[channelId].tsx b/src/app/chat/[channelId].tsx
@@ -332,9 +332,9 @@ export default function ChannelConversationScreen() {
 
         {/* Unit-app identity chip: shows which unit the current user is chatting as. */}
         {activeUnit ? (
-          <HStack className="mx-3 mb-1 items-center self-start rounded-full bg-primary-50 px-3 py-1 dark:bg-primary-950" space="xs">
+          <HStack className="mx-3 mb-1 items-center self-start rounded-full bg-primary-50 px-3 py-1" space="xs">
             <Circle size={8} color="#2563eb" fill="#2563eb" />
-            <Text className="text-xs font-medium text-primary-700 dark:text-primary-300">{t('chat.chatting_as', { name: activeUnit.Name })}</Text>
+            <Text className="text-xs font-medium text-primary-700">{t('chat.chatting_as', { name: activeUnit.Name })}</Text>
           </HStack>
         ) : null}
 

diff --git a/src/app/login/login-form.tsx b/src/app/login/login-form.tsx
@@ -197,7 +197,7 @@ export const LoginForm = ({ onSubmit = () => {}, isLoading = false, error = unde
           ) : null}
           {onSsoPress ? (
             <Button className="flex-1" variant="outline" action="secondary" size="sm" onPress={onSsoPress}>
-              <ShieldCheck size={14} style={{ marginRight: 4 }} />
+              <ShieldCheck size={14} className="text-typography-500" style={{ marginRight: 4 }} />
               <ButtonText className="text-xs">{t('login.sso_button')}</ButtonText>
             </Button>
           ) : null}
@@ -206,7 +206,7 @@ export const LoginForm = ({ onSubmit = () => {}, isLoading = false, error = unde
         {/* Shared vehicle device: every sign-in here starts a shared session that locks between operators */}
         {onSharedDevicePress ? (
           <Button className="mt-2 self-center" variant="link" action="secondary" size="sm" onPress={onSharedDevicePress} testID="login-shared-device">
-            <Truck size={14} style={{ marginRight: 4 }} />
+            <Truck size={14} className="text-typography-500" style={{ marginRight: 4 }} />
             <ButtonText className="text-xs">
               {!sharedDevice?.configured
                 ? t('shared_session.device_setup')

diff --git a/src/app/login/sso.tsx b/src/app/login/sso.tsx
@@ -253,7 +253,7 @@ export default function SsoLogin() {
           {/* Back button */}
           <View className="mb-4 mt-2">
             <Button variant="link" action="secondary" onPress={() => router.back()} className="self-start">
-              <ArrowLeft size={18} className="mr-1" />
+              <ArrowLeft size={18} className="mr-1 text-typography-500" />
               <ButtonText className="text-sm">{t('common.back')}</ButtonText>
             </Button>
           </View>
@@ -344,7 +344,7 @@ export default function SsoLogin() {
                 </Button>
               ) : (
                 <Button className="w-full" variant="solid" action="primary" onPress={handleSsoPress} accessibilityLabel={t('login.sso_button')}>
-                  <ShieldCheck size={18} color="#fff" style={{ marginRight: 8 }} />
+                  <ShieldCheck size={18} className="text-typography-0" style={{ marginRight: 8 }} />
                   <ButtonText>{t('login.sso_button')}</ButtonText>
                 </Button>
               )}

diff --git a/src/app/routes/active.tsx b/src/app/routes/active.tsx
@@ -380,7 +380,7 @@ export default function ActiveRouteScreen() {
           <Box className="mx-4 mt-4">
             <Button className="bg-red-500" onPress={handleEndRoute}>
               <Icon as={LogOut} size="sm" className="mr-2 text-white" />
-              <ButtonText>{t('routes.end_route')}</ButtonText>
+              <ButtonText className="text-white">{t('routes.end_route')}</ButtonText>
             </Button>
           </Box>
         </ScrollView>
@@ -394,13 +394,23 @@ export default function ActiveRouteScreen() {
               {t('routes.skip')} — {currentStop?.Name}
             </Text>
             <Text className="mb-3 text-sm text-gray-500 dark:text-gray-400">{t('routes.skip_reason')}</Text>
-            <TextInput value={skipReason} onChangeText={setSkipReason} placeholder={t('routes.skip_reason_placeholder')} placeholderTextColor="#9ca3af" multiline numberOfLines={3} style={styles.skipInput} autoFocus />
+            <TextInput
+              value={skipReason}
+              onChangeText={setSkipReason}
+              placeholder={t('routes.skip_reason_placeholder')}
+              placeholderTextColor="#9ca3af"
+              multiline
+              numberOfLines={3}
+              style={styles.skipInput}
+              className="border-gray-300 text-gray-900 dark:border-gray-600 dark:text-white"
+              autoFocus
+            />
             <HStack className="mt-4 gap-3">
               <TouchableOpacity style={styles.cancelBtn} onPress={() => setSkipModalVisible(false)}>
                 <Text className="text-center text-sm font-medium text-gray-700 dark:text-gray-300">{t('common.cancel')}</Text>
               </TouchableOpacity>
               <TouchableOpacity style={styles.skipBtn} onPress={handleSkipConfirm}>
-                <Text className="text-center text-sm font-semibold text-white">{t('routes.skip')}</Text>
+                <Text className="text-center text-sm font-semibold text-gray-900">{t('routes.skip')}</Text>
               </TouchableOpacity>
             </HStack>
           </Box>
@@ -416,11 +426,9 @@ const styles = StyleSheet.create({
   },
   skipInput: {
     borderWidth: 1,
-    borderColor: '#d1d5db',
     borderRadius: 8,
     padding: 10,
     fontSize: 14,
-    color: '#111827',
     textAlignVertical: 'top',
     minHeight: 80,
   },

diff --git a/src/app/routes/directions.tsx b/src/app/routes/directions.tsx
@@ -709,7 +709,7 @@ export default function RouteDirectionsScreen() {
 
         {/* Loading overlay while fetching driving directions */}
         {isFetchingDirections ? (
-          <View style={styles.fetchingOverlay}>
+          <View style={styles.fetchingOverlay} className="bg-background-0/90">
             <ActivityIndicator size="small" color="#3b82f6" />
             <Text className="ml-2 text-xs text-typography-500">{t('routes.fetching_directions')}</Text>
           </View>
@@ -877,7 +877,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: 'rgba(255,255,255,0.9)',
     paddingVertical: 6,
     marginHorizontal: 60,
     borderRadius: 20,

diff --git a/src/app/routes/poi/[id].tsx b/src/app/routes/poi/[id].tsx
@@ -111,8 +111,8 @@ export default function PoiDetailScreen() {
 
           <VStack space="sm">
             <Button onPress={handleRoute} className="bg-blue-600">
-              <ButtonIcon as={Navigation} />
-              <ButtonText>{t('routes.route_to_poi')}</ButtonText>
+              <ButtonIcon as={Navigation} className="text-white" />
+              <ButtonText className="text-white">{t('routes.route_to_poi')}</ButtonText>
             </Button>
             {destinationEnabled ? (
               <Button onPress={handleSetDestination} variant="outline">