Ft/build account switcher panel

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/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,
+  },
+});