Ft/account switching in the switching panel

src/app/appStyles.ts

@@ -472,4 +472,10 @@ export const appStyles = StyleSheet.create({
     textAlign: 'center',
   },
   loadingTextAppInit: { marginTop: 10, fontSize: 14 },
+  menuItemDisabled: {
+    opacity: 0.5,
+  },
+  menuItemTextDisabled: {
+    color: '#999',
+  },
 });

src/app/screens/DraftingScreen.tsx

@@ -13,6 +13,8 @@ import { ChapterAssignmentData, VerseData } from '../../types/db/types';
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
 import { ScreenContainer } from '../../components/layout/ScreenContainer';
 import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
+import { useActiveAccountSummary } from '../../hooks/useActiveAccountSummary';
+import { AccountSwitcherPanel } from '../../components/ui/AccountSwitcherPanel';
 import {
   getLastActiveTab,
   setLastActiveTab,
@@ -59,12 +61,42 @@ export default function DraftingScreen() {
   const [loading, setLoading] = useState(true);
   const [initialVerse, setInitialVerse] = useState(1);
   const [refreshKey, setRefreshKey] = useState(0);
+  const [accountSwitcherVisible, setAccountSwitcherVisible] = useState(false);
 
   const { isSyncing, triggerSync } = useSync();
   const { status: syncStatus } = useSyncStatus({ isSyncing, refreshKey });
+  const activeAccount = useActiveAccountSummary(refreshKey);
+  const closeAccountSwitcher = useCallback(() => {
+    setAccountSwitcherVisible(false);
+  }, []);
 
   const goBack = useCallback(() => navigation.goBack(), [navigation]);
 
+  const handleAccountPress = useCallback(() => {
+    setAccountSwitcherVisible(true);
+  }, []);
+
+  const renderHeader = () => (
+    <DraftingHeader
+      title={chapterName}
+      onBack={goBack}
+      syncStatus={syncStatus}
+      onSyncPress={triggerSync}
+      showAccountIndicator={activeAccount.hasMultipleAccounts}
+      accountFirstName={activeAccount.firstName}
+      accountLastName={activeAccount.lastName}
+      accountEmail={activeAccount.email}
+      onAccountPress={handleAccountPress}
+    />
+  );
+
+  const renderAccountSwitcher = () => (
+    <AccountSwitcherPanel
+      visible={accountSwitcherVisible}
+      onClose={closeAccountSwitcher}
+    />
+  );
+
   useEffect(() => {
     const unsubscribe = onSyncComplete(() => {
       setRefreshKey(key => key + 1);
@@ -127,21 +159,23 @@ export default function DraftingScreen() {
   if (loading) {
     return (
       <ScreenContainer edges={['top', 'bottom']}>
-        <DraftingHeader title={chapterName} onBack={goBack} />
+        {renderHeader()}
         <View style={styles.centered}>
           <ActivityIndicator size="large" color={theme.colors.primary} />
         </View>
+        {renderAccountSwitcher()}
       </ScreenContainer>
     );
   }
 
   if (!chapterData) {
     return (
       <ScreenContainer edges={['top', 'bottom']}>
-        <DraftingHeader title={chapterName} onBack={goBack} />
+        {renderHeader()}
         <View style={styles.centered}>
           <Text style={styles.emptyText}>No chapter data found</Text>
         </View>
+        {renderAccountSwitcher()}
       </ScreenContainer>
     );
   }
@@ -150,12 +184,7 @@ export default function DraftingScreen() {
     <ScreenContainer edges={['top', 'bottom']}>
       <DraftingProvider verses={verses} initialVerse={initialVerse}>
         <View style={styles.screen}>
-          <DraftingHeader
-            title={chapterName}
-            onBack={goBack}
-            syncStatus={syncStatus}
-            onSyncPress={triggerSync}
-          />
+          {renderHeader()}
 
           <View style={styles.content}>
             {activeTab === 'bible' ? <BibleTab /> : <RecordTab />}
@@ -165,6 +194,7 @@ export default function DraftingScreen() {
 
           <DraftingTabBar activeTab={activeTab} onTabChange={setActiveTab} />
         </View>
+        {renderAccountSwitcher()}
       </DraftingProvider>
     </ScreenContainer>
   );

src/app/screens/SettingsScreen.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
+import { useFocusEffect } from '@react-navigation/native';
 import { Alert, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
@@ -28,6 +29,7 @@ import {
   kvStorage,
   KV_KEYS,
   switchActiveUser,
+  MAX_DEVICE_ACCOUNTS,
 } from '../../services/storage';
 import { usePreferences } from '../../hooks/usePreferences';
 import { RootStackParamList } from '../../types/navigation/types';
@@ -60,12 +62,22 @@ function SettingsSection({
 export default function SettingsScreen({ onSignOut }: SettingsScreenProps) {
   const navigation = useNavigation<Nav>();
   const { uploadOverCellular, setUploadOverCellular } = usePreferences();
+  const [atAccountLimit, setAtAccountLimit] = useState(
+    () => getKnownUserIds().length >= MAX_DEVICE_ACCOUNTS,
+  );
+
+  useFocusEffect(
+    useCallback(() => {
+      setAtAccountLimit(getKnownUserIds().length >= MAX_DEVICE_ACCOUNTS);
+    }, []),
+  );
 
   const goBack = useCallback(() => navigation.goBack(), [navigation]);
 
   const handleAddUser = useCallback(() => {
+    if (atAccountLimit) return;
     navigation.navigate('AddUser');
-  }, [navigation]);
+  }, [navigation, atAccountLimit]);
 
   const performLogOut = async () => {
     const currentUserId = getActiveUserId();
@@ -82,16 +94,33 @@ export default function SettingsScreen({ onSignOut }: SettingsScreenProps) {
     kvStorage.setItemSync(KV_KEYS.KNOWN_USER_IDS, remaining.join(','));
     log.info('User signed out', { userId: currentUserId });
 
-    if (remaining.length > 0) {
-      const nextUserId = remaining[0];
-      const creds = await getCredentials(nextUserId);
-      authToken.set(creds?.token ?? null);
-      switchActiveUser(nextUserId);
+    for (const candidateUserId of remaining) {
+      let creds;
+      try {
+        creds = await getCredentials(candidateUserId);
+      } catch (e) {
+        log.error('Failed to read credentials for candidate account', {
+          userId: candidateUserId,
+          error: e,
+        });
+        continue;
+      }
+
+      if (!creds?.token) {
+        log.error('Skipping candidate account with no usable session', {
+          userId: candidateUserId,
+        });
+        continue;
+      }
+
+      authToken.set(creds.token);
+      switchActiveUser(candidateUserId);
       navigation.goBack();
-    } else {
-      signOut();
-      onSignOut?.();
+      return;
     }
+
+    signOut();
+    onSignOut?.();
   };
 
   const handleLogOut = async () => {
@@ -159,6 +188,8 @@ export default function SettingsScreen({ onSignOut }: SettingsScreenProps) {
             <SettingsNavigationRow
               title="Add user"
               subtitle="Sign in with another account on this device"
+              disabled={atAccountLimit}
+              disabledSubtitle="You've reached the 3-account limit"
               icon={
                 <UserPlus
                   size={iconSizes.headerTab}

src/components/layout/DraftingHeader.tsx

@@ -3,6 +3,7 @@ import { theme } from '../../theme';
 import { ChevronLeft } from 'lucide-react-native';
 import { SyncStatus } from '../../utils/syncStatusState';
 import { PageHeaderSyncButton } from '../ui/PageHeaderSyncButton';
+import { AccountInitialsButton } from '../ui/AccountInitialsButton';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import {
   headerLayout,
@@ -16,13 +17,23 @@ interface DraftingHeaderProps {
   onBack: () => void;
   syncStatus?: SyncStatus;
   onSyncPress?: () => void;
+  showAccountIndicator?: boolean;
+  accountFirstName?: string;
+  accountLastName?: string;
+  accountEmail?: string;
+  onAccountPress?: () => void;
 }
 
 export function DraftingHeader({
   title,
   onBack,
   syncStatus,
   onSyncPress,
+  showAccountIndicator = false,
+  accountFirstName,
+  accountLastName,
+  accountEmail,
+  onAccountPress,
 }: DraftingHeaderProps) {
   return (
     <View style={styles.header}>
@@ -48,10 +59,18 @@ export function DraftingHeader({
         </Text>
       </View>
 
-      <View style={[styles.sideSlot, styles.sideSlotRight]}>
+      <View style={styles.rightActions}>
         {syncStatus && onSyncPress ? (
           <PageHeaderSyncButton syncStatus={syncStatus} onPress={onSyncPress} />
         ) : null}
+        {showAccountIndicator && onAccountPress ? (
+          <AccountInitialsButton
+            firstName={accountFirstName}
+            lastName={accountLastName}
+            email={accountEmail}
+            onPress={onAccountPress}
+          />
+        ) : null}
       </View>
     </View>
   );
@@ -77,8 +96,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     zIndex: 1,
   },
-  sideSlotRight: {
-    alignItems: 'flex-end',
+  rightActions: {
+    minWidth: headerLayout.sideSlot * 2,
+    height: headerLayout.sideSlot,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: theme.spacing.md,
+    zIndex: 1,
   },
   backButton: {
     borderRadius: theme.radius.full,

src/components/ui/AccountInitialsButton.tsx

@@ -0,0 +1,52 @@
+import { theme } from '../../theme';
+import { touchHitSlop } from '../../theme/iconSpecs';
+import { getAccountInitials } from '../../utils/accountDisplay';
+import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+
+interface AccountInitialsButtonProps {
+  firstName?: string;
+  lastName?: string;
+  email?: string;
+  onPress: () => void;
+}
+
+export function AccountInitialsButton({
+  firstName,
+  lastName,
+  email,
+  onPress,
+}: AccountInitialsButtonProps) {
+  const initials = getAccountInitials({ firstName, lastName, email });
+
+  return (
+    <TouchableOpacity
+      style={styles.button}
+      onPress={onPress}
+      activeOpacity={0.75}
+      hitSlop={touchHitSlop}
+      accessibilityRole="button"
+      accessibilityLabel="Switch account"
+      testID="drafting-account-initials"
+    >
+      <Text style={styles.initials} numberOfLines={1} adjustsFontSizeToFit>
+        {initials}
+      </Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    width: 32,
+    height: 32,
+    borderRadius: theme.radius.full,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.colors.primary,
+  },
+  initials: {
+    color: theme.colors.primaryForeground,
+    fontSize: theme.typography.sizes.sm,
+    fontWeight: theme.typography.weights.bold,
+  },
+});