@oxyhq/services 5.15.9 → 5.16.0

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -36,10 +36,8 @@ import { EditEmailModal } from '../components/profile/EditEmailModal';
 import { EditBioModal } from '../components/profile/EditBioModal';
 import { EditLocationModal } from '../components/profile/EditLocationModal';
 import { EditLinksModal } from '../components/profile/EditLinksModal';
-import { TwoFactorSetupModal } from '../components/profile/TwoFactorSetupModal';
 import { getDisplayName } from '../utils/user-utils';
 import { TTLCache, registerCacheForCleanup } from '../../utils/cache';
-import QRCode from 'react-native-qrcode-svg';
 import { useOxy } from '../context/OxyContext';
 import {
     SCREEN_PADDING_HORIZONTAL,
@@ -102,13 +100,6 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
     const [quickActionsSectionY, setQuickActionsSectionY] = useState<number | null>(null);
     const [securitySectionY, setSecuritySectionY] = useState<number | null>(null);
 
-    // Two-Factor (TOTP) state
-    const [totpSetupUrl, setTotpSetupUrl] = useState<string | null>(null);
-    const [totpCode, setTotpCode] = useState('');
-    const [isTotpBusy, setIsTotpBusy] = useState(false);
-    const [showRecoveryModal, setShowRecoveryModal] = useState(false);
-    const [generatedBackupCodes, setGeneratedBackupCodes] = useState<string[] | null>(null);
-    const [generatedRecoveryKey, setGeneratedRecoveryKey] = useState<string | null>(null);
 
     // Animation refs
     const saveButtonScale = useRef(new Animated.Value(1)).current;
@@ -130,7 +121,6 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
     const [showEditBioModal, setShowEditBioModal] = useState(false);
     const [showEditLocationModal, setShowEditLocationModal] = useState(false);
     const [showEditLinksModal, setShowEditLinksModal] = useState(false);
-    const [showTwoFactorModal, setShowTwoFactorModal] = useState(false);
 
     // Location and links state (for display only - modals handle editing)
     const [locations, setLocations] = useState<Array<{
@@ -342,9 +332,6 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
             case 'links':
                 setTempLinksWithMetadata([...linksMetadata]);
                 break;
-            case 'twoFactor':
-                // No temp state needed for twoFactor
-                break;
         }
     }, [displayName, lastName, username, email, bio, locations, linksMetadata]);
 
@@ -423,8 +410,6 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                 return bio;
             case 'location':
             case 'links':
-            case 'twoFactor':
-                return '';
             default:
                 return '';
         }
@@ -529,7 +514,6 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
     const handleOpenBioModal = useCallback(() => setShowEditBioModal(true), []);
     const handleOpenLocationModal = useCallback(() => setShowEditLocationModal(true), []);
     const handleOpenLinksModal = useCallback(() => setShowEditLinksModal(true), []);
-    const handleOpenTwoFactorModal = useCallback(() => setShowTwoFactorModal(true), []);
 
     // Handler to refresh data after modal saves
     // Note: Access user directly from store when invoked to get latest value,
@@ -611,9 +595,6 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                         case 'links':
                             setShowEditLinksModal(true);
                             break;
-                        case 'twoFactor':
-                            setShowTwoFactorModal(true);
-                            break;
                     }
                 }, 300);
             }
@@ -760,135 +741,9 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
     // Memoize display name for avatar
     const displayNameForAvatar = useMemo(() => getDisplayName(user), [user]);
 
-    // Legacy renderEditingField function (still used for twoFactor and fallback)
+    // Legacy renderEditingField function (fallback)
     const renderEditingField = (type: string | null) => {
         if (!type) return null;
-
-        if (type === 'twoFactor') {
-            const enabled = !!user?.privacySettings?.twoFactorEnabled;
-            return (
-                <View style={[styles.editingFieldContainer, { backgroundColor: colors.background }]}>
-                    <View style={styles.editingFieldContent}>
-                        <View style={styles.newValueSection}>
-                            <View style={styles.editingFieldHeader}>
-                                <Text style={[styles.editingFieldLabel, { color: colors.text }]}>Two‑Factor Authentication (TOTP)</Text>
-                            </View>
-
-                            {!enabled ? (
-                                <>
-                                    <Text style={styles.editingFieldDescription}>
-                                        Protect your account with a 6‑digit code from an authenticator app. Scan the QR code then enter the code to enable.
-                                    </Text>
-                                    {!totpSetupUrl ? (
-                                        <TouchableOpacity
-                                            style={[styles.primaryButton, { backgroundColor: colors.iconSecurity }]}
-                                            disabled={isTotpBusy}
-                                            onPress={async () => {
-                                                if (!activeSessionId) { toast.error(t('editProfile.toasts.noActiveSession') || 'No active session'); return; }
-                                                setIsTotpBusy(true);
-                                                try {
-                                                    const { otpauthUrl } = await oxyServices.startTotpEnrollment(activeSessionId);
-                                                    setTotpSetupUrl(otpauthUrl);
-                                                } catch (e: any) {
-                                                    toast.error(e?.message || (t('editProfile.toasts.totpStartFailed') || 'Failed to start TOTP enrollment'));
-                                                } finally {
-                                                    setIsTotpBusy(false);
-                                                }
-                                            }}
-                                        >
-                                            <Ionicons name="shield-checkmark" size={18} color="#fff" />
-                                            <Text style={styles.primaryButtonText}>Generate QR Code</Text>
-                                        </TouchableOpacity>
-                                    ) : (
-                                        <View style={{ alignItems: 'center', gap: 16 }}>
-                                            <View style={{ padding: 16, backgroundColor: '#fff', borderRadius: 16 }}>
-                                                <QRCode value={totpSetupUrl} size={180} />
-                                            </View>
-                                            <View>
-                                                <Text style={styles.editingFieldLabel}>Enter 6‑digit code</Text>
-                                                <TextInput
-                                                    style={styles.editingFieldInput}
-                                                    keyboardType="number-pad"
-                                                    placeholder="123456"
-                                                    value={totpCode}
-                                                    onChangeText={setTotpCode}
-                                                    maxLength={6}
-                                                />
-                                            </View>
-                                            <TouchableOpacity
-                                                style={[styles.primaryButton, { backgroundColor: colors.iconSecurity }]}
-                                                disabled={isTotpBusy || totpCode.length !== 6}
-                                                onPress={async () => {
-                                                    if (!activeSessionId) { toast.error(t('editProfile.toasts.noActiveSession') || 'No active session'); return; }
-                                                    setIsTotpBusy(true);
-                                                    try {
-                                                        const result = await oxyServices.verifyTotpEnrollment(activeSessionId, totpCode);
-                                                        await updateUser({ privacySettings: { twoFactorEnabled: true } }, oxyServices);
-                                                        if (result?.backupCodes || result?.recoveryKey) {
-                                                            setGeneratedBackupCodes(result.backupCodes || null);
-                                                            setGeneratedRecoveryKey(result.recoveryKey || null);
-                                                            setShowRecoveryModal(true);
-                                                        } else {
-                                                            toast.success(t('editProfile.toasts.twoFactorEnabled') || 'Two‑Factor Authentication enabled');
-                                                            setEditingField(null);
-                                                        }
-                                                    } catch (e: any) {
-                                                        toast.error(e?.message || (t('editProfile.toasts.invalidCode') || 'Invalid code'));
-                                                    } finally {
-                                                        setIsTotpBusy(false);
-                                                    }
-                                                }}
-                                            >
-                                                <Ionicons name="checkmark-circle" size={18} color="#fff" />
-                                                <Text style={styles.primaryButtonText}>Verify & Enable</Text>
-                                            </TouchableOpacity>
-                                        </View>
-                                    )}
-                                </>
-                            ) : (
-                                <>
-                                    <Text style={styles.editingFieldDescription}>
-                                        Two‑Factor Authentication is currently enabled. To disable, enter a code from your authenticator app.
-                                    </Text>
-                                    <View>
-                                        <Text style={styles.editingFieldLabel}>Enter 6‑digit code</Text>
-                                        <TextInput
-                                            style={styles.editingFieldInput}
-                                            keyboardType="number-pad"
-                                            placeholder="123456"
-                                            value={totpCode}
-                                            onChangeText={setTotpCode}
-                                            maxLength={6}
-                                        />
-                                    </View>
-                                    <TouchableOpacity
-                                        style={[styles.primaryButton, { backgroundColor: colors.sidebarIconSharing }]}
-                                        disabled={isTotpBusy || totpCode.length !== 6}
-                                        onPress={async () => {
-                                            if (!activeSessionId) { toast.error(t('editProfile.toasts.noActiveSession') || 'No active session'); return; }
-                                            setIsTotpBusy(true);
-                                            try {
-                                                await oxyServices.disableTotp(activeSessionId, totpCode);
-                                                await updateUser({ privacySettings: { twoFactorEnabled: false } }, oxyServices);
-                                                toast.success(t('editProfile.toasts.twoFactorDisabled') || 'Two‑Factor Authentication disabled');
-                                                setEditingField(null);
-                                            } catch (e: any) {
-                                                toast.error(e?.message || t('editProfile.toasts.disableFailed') || 'Failed to disable');
-                                            } finally {
-                                                setIsTotpBusy(false);
-                                            }
-                                        }}
-                                    >
-                                        <Ionicons name="close-circle" size={18} color="#fff" />
-                                        <Text style={styles.primaryButtonText}>Disable 2FA</Text>
-                                    </TouchableOpacity>
-                                </>
-                            )}
-                        </View>
-                    </View>
-                </View>
-            );
-        }
         if (type === 'displayName') {
             return (
                 <View style={[styles.editingFieldContainer, { backgroundColor: colors.background }]}>
@@ -1368,41 +1223,6 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                             </Text>
                         </View>
 
-                        {showRecoveryModal && (
-                            <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.6)', zIndex: 50, padding: 16, justifyContent: 'center' }}>
-                                <View style={{ backgroundColor: '#fff', borderRadius: 20, padding: 20, maxHeight: '80%' }}>
-                                    <Text style={{ fontSize: 18, fontWeight: '700', marginBottom: 12 }}>Save These Codes Now</Text>
-                                    <Text style={{ fontSize: 14, color: '#444', marginBottom: 12 }}>
-                                        Backup codes and your Recovery Key are shown only once. Store them securely (paper or password manager).
-                                    </Text>
-                                    {generatedBackupCodes && generatedBackupCodes.length > 0 && (
-                                        <View style={{ marginBottom: 12 }}>
-                                            <Text style={{ fontSize: 16, fontWeight: '600', marginBottom: 8 }}>Backup Codes</Text>
-                                            <View style={{ backgroundColor: '#F8F9FA', borderRadius: 12, padding: 12 }}>
-                                                {generatedBackupCodes.map((c, idx) => (
-                                                    <Text key={idx} style={{ fontFamily: Platform.OS === 'web' ? 'monospace' as any : 'monospace', fontSize: 14, marginBottom: 4 }}>{c}</Text>
-                                                ))}
-                                            </View>
-                                        </View>
-                                    )}
-                                    {generatedRecoveryKey && (
-                                        <View style={{ marginBottom: 12 }}>
-                                            <Text style={{ fontSize: 16, fontWeight: '600', marginBottom: 8 }}>Recovery Key</Text>
-                                            <View style={{ backgroundColor: '#F8F9FA', borderRadius: 12, padding: 12 }}>
-                                                <Text style={{ fontFamily: Platform.OS === 'web' ? 'monospace' as any : 'monospace', fontSize: 14 }}>{generatedRecoveryKey}</Text>
-                                            </View>
-                                        </View>
-                                    )}
-                                    <TouchableOpacity
-                                        style={[styles.primaryButton, { backgroundColor: colors.iconSecurity, alignSelf: 'flex-end', marginTop: 8 }]}
-                                        onPress={() => { setShowRecoveryModal(false); setEditingField(null); toast.success(t('editProfile.toasts.twoFactorEnabled') || 'Two‑Factor Authentication enabled'); }}
-                                    >
-                                        <Ionicons name="checkmark" size={18} color="#fff" />
-                                        <Text style={styles.primaryButtonText}>I saved them</Text>
-                                    </TouchableOpacity>
-                                </View>
-                            </View>
-                        )}
                         {/* Profile Picture Section */}
                         <View
                             ref={(ref) => {
@@ -1634,20 +1454,6 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                 {t('editProfile.sections.security') || 'SECURITY'}
                             </Text>
                             <View style={styles.groupedSectionWrapper}>
-                                <GroupedSection
-                                    items={[
-                                        {
-                                            id: 'two-factor',
-                                            icon: 'shield-lock',
-                                            iconColor: colors.sidebarIconSecurity,
-                                            title: t('editProfile.items.twoFactor.title') || 'Two‑Factor Authentication',
-                                            subtitle: user?.privacySettings?.twoFactorEnabled
-                                                ? (t('editProfile.items.twoFactor.enabled') || 'Enabled')
-                                                : (t('editProfile.items.twoFactor.disabled') || 'Disabled (recommended)'),
-                                            onPress: handleOpenTwoFactorModal,
-                                        },
-                                    ]}
-                                />
                             </View>
                         </View>
                     </>
@@ -1698,12 +1504,6 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                 theme={normalizedTheme}
                 onSave={handleModalSave}
             />
-            <TwoFactorSetupModal
-                visible={showTwoFactorModal}
-                onClose={() => setShowTwoFactorModal(false)}
-                isEnabled={!!user?.privacySettings?.twoFactorEnabled}
-                theme={normalizedTheme}
-            />
         </View>
     );
 };

package/src/ui/screens/OxyAuthScreen.tsx

@@ -60,7 +60,7 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
 }) => {
   const themeValue = (theme === 'light' || theme === 'dark') ? theme : 'light';
   const colors = useThemeColors(themeValue);
-  const { oxyServices, signIn } = useOxy();
+  const { oxyServices, signIn, switchSession } = useOxy();
 
   const [authSession, setAuthSession] = useState<AuthSession | null>(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -78,12 +78,19 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
     isProcessingRef.current = true;
 
     try {
-      // Get token and user data
-      await oxyServices.getTokenBySession(sessionId);
-      const user = await oxyServices.getUserBySession(sessionId);
-
-      if (onAuthenticated) {
-        onAuthenticated(user);
+      // Switch to the new session (this will get token, user data, and update state)
+      if (switchSession) {
+        const user = await switchSession(sessionId);
+        if (onAuthenticated) {
+          onAuthenticated(user);
+        }
+      } else {
+        // Fallback if switchSession not available (shouldn't happen, but for safety)
+        await oxyServices.getTokenBySession(sessionId);
+        const user = await oxyServices.getUserBySession(sessionId);
+        if (onAuthenticated) {
+          onAuthenticated(user);
+        }
       }
     } catch (err) {
       if (__DEV__) {
@@ -92,7 +99,7 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
       setError('Authorization successful but failed to complete sign in. Please try again.');
       isProcessingRef.current = false;
     }
-  }, [oxyServices, onAuthenticated]);
+  }, [oxyServices, switchSession, onAuthenticated]);
 
   // Connect to socket for real-time updates
   const connectSocket = useCallback((sessionToken: string) => {
@@ -517,3 +524,4 @@ const styles = StyleSheet.create({
 
 export default OxyAuthScreen;
 
+

package/src/ui/screens/PrivacySettingsScreen.tsx

@@ -21,7 +21,6 @@ interface PrivacySettings {
     hideOnlineStatus: boolean;
     hideLastSeen: boolean;
     profileVisibility: boolean;
-    twoFactorEnabled: boolean;
     loginAlerts: boolean;
     blockScreenshots: boolean;
     login: boolean;
@@ -52,7 +51,6 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
         hideOnlineStatus: false,
         hideLastSeen: false,
         profileVisibility: true,
-        twoFactorEnabled: false,
         loginAlerts: true,
         blockScreenshots: false,
         login: true,

package/src/ui/screens/SessionManagementScreen.tsx

@@ -21,6 +21,17 @@ import { useThemeStyles } from '../hooks/useThemeStyles';
 import { normalizeTheme } from '../utils/themeUtils';
 import { useOxy } from '../context/OxyContext';
 
+// Button background colors for session actions
+const SWITCH_BUTTON_BG = {
+    dark: '#1E2A38',
+    light: '#E6F2FF',
+} as const;
+
+const LOGOUT_BUTTON_BG = {
+    dark: '#3A1E1E',
+    light: '#FFEBEE',
+} as const;
+
 const SessionManagementScreen: React.FC<BaseScreenProps> = ({
     onClose,
     theme,
@@ -45,7 +56,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
     const normalizedTheme = normalizeTheme(theme);
     const themeStyles = useThemeStyles(normalizedTheme);
     // Extract commonly used colors for readability
-    const { textColor, backgroundColor, secondaryBackgroundColor, borderColor, primaryColor, dangerColor, successColor, isDarkTheme } = themeStyles;
+    const { textColor, backgroundColor, borderColor, primaryColor, dangerColor, successColor, isDarkTheme } = themeStyles;
 
     // Memoized load sessions function - prevents unnecessary re-renders
     const loadSessions = useCallback(async (isRefresh = false) => {
@@ -92,9 +103,14 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
         });
     }, [logout, refreshSessions]);
 
+    // Memoized bulk action items - prevents unnecessary re-renders when dependencies haven't changed
+    const otherSessionsCount = useMemo(() =>
+        userSessions.filter(s => s.sessionId !== activeSessionId).length,
+        [userSessions, activeSessionId]
+    );
+
     // Memoized logout other sessions handler - prevents unnecessary re-renders
     const handleLogoutOtherSessions = useCallback(async () => {
-        const otherSessionsCount = userSessions.filter(s => s.sessionId !== activeSessionId).length;
         if (otherSessionsCount === 0) {
             toast.info('No other sessions to logout.');
             return;
@@ -119,7 +135,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                 }
             }
         );
-    }, [userSessions, activeSessionId, logout, refreshSessions]);
+    }, [otherSessionsCount, userSessions, activeSessionId, logout, refreshSessions]);
 
     // Memoized logout all sessions handler - prevents unnecessary re-renders
     const handleLogoutAllSessions = useCallback(async () => {
@@ -132,6 +148,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                 } catch (error) {
                     console.error('Logout all sessions failed:', error);
                     toast.error('Failed to logout all sessions. Please try again.');
+                } finally {
                     setActionLoading(null);
                 }
             }
@@ -171,22 +188,18 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
         }
     }, [activeSessionId, switchSession]);
 
+    // Memoized refresh handler for pull-to-refresh
+    const handleRefresh = useCallback(() => {
+        loadSessions(true);
+    }, [loadSessions]);
+
     useEffect(() => {
         loadSessions();
     }, [loadSessions]);
 
-    if (loading) {
-        return (
-            <View style={[styles.container, styles.centerContent, { backgroundColor }]}>
-                <ActivityIndicator size="large" color={primaryColor} />
-                <Text style={[styles.loadingText, { color: textColor }]}>Loading sessions...</Text>
-            </View>
-        );
-    }
-
     // Memoized session items - prevents unnecessary re-renders when dependencies haven't changed
     const sessionItems = useMemo(() => {
-        return userSessions.map((session: ClientSession) => {
+        return userSessions.map((session) => {
             const isCurrent = session.sessionId === activeSessionId;
             const subtitleParts: string[] = [];
             if (session.deviceId) subtitleParts.push(`Device ${session.deviceId.substring(0, 10)}...`);
@@ -205,7 +218,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                     <View style={styles.sessionActionsRow}>
                         <TouchableOpacity
                             onPress={() => handleSwitchSession(session.sessionId)}
-                            style={[styles.sessionPillButton, { backgroundColor: isDarkTheme ? '#1E2A38' : '#E6F2FF', borderColor: primaryColor }]}
+                            style={[styles.sessionPillButton, { backgroundColor: isDarkTheme ? SWITCH_BUTTON_BG.dark : SWITCH_BUTTON_BG.light, borderColor: primaryColor }]}
                             disabled={switchLoading === session.sessionId || actionLoading === session.sessionId}
                         >
                             {switchLoading === session.sessionId ? (
@@ -216,7 +229,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                         </TouchableOpacity>
                         <TouchableOpacity
                             onPress={() => handleLogoutSession(session.sessionId)}
-                            style={[styles.sessionPillButton, { backgroundColor: isDarkTheme ? '#3A1E1E' : '#FFEBEE', borderColor: dangerColor }]}
+                            style={[styles.sessionPillButton, { backgroundColor: isDarkTheme ? LOGOUT_BUTTON_BG.dark : LOGOUT_BUTTON_BG.light, borderColor: dangerColor }]}
                             disabled={actionLoading === session.sessionId || switchLoading === session.sessionId}
                         >
                             {actionLoading === session.sessionId ? (
@@ -237,12 +250,6 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
         });
     }, [userSessions, activeSessionId, formatRelative, successColor, primaryColor, isDarkTheme, switchLoading, actionLoading, handleSwitchSession, handleLogoutSession, dangerColor]);
 
-    // Memoized bulk action items - prevents unnecessary re-renders when dependencies haven't changed
-    const otherSessionsCount = useMemo(() =>
-        userSessions.filter(s => s.sessionId !== activeSessionId).length,
-        [userSessions, activeSessionId]
-    );
-
     const bulkItems = useMemo(() => [
         {
             id: 'logout-others',
@@ -270,6 +277,15 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
         },
     ], [otherSessionsCount, primaryColor, dangerColor, handleLogoutOtherSessions, handleLogoutAllSessions, actionLoading]);
 
+    if (loading) {
+        return (
+            <View style={[styles.container, styles.centerContent, { backgroundColor }]}>
+                <ActivityIndicator size="large" color={primaryColor} />
+                <Text style={[styles.loadingText, { color: textColor }]}>Loading sessions...</Text>
+            </View>
+        );
+    }
+
     return (
         <View style={[styles.container, { backgroundColor }]}>
             <Header
@@ -285,7 +301,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                 refreshControl={
                     <RefreshControl
                         refreshing={refreshing}
-                        onRefresh={() => loadSessions(true)}
+                        onRefresh={handleRefresh}
                         tintColor={primaryColor}
                     />
                 }
@@ -293,12 +309,12 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                 {userSessions.length > 0 ? (
                     <>
                         {lastRefreshed && (
-                            <Text style={[styles.metaText, { color: isDarkTheme ? '#777' : '#777', marginBottom: 6 }]}>Last refreshed {formatRelative(lastRefreshed.toISOString())}</Text>
+                            <Text style={[styles.metaText, { color: '#777', marginBottom: 6 }]}>Last refreshed {formatRelative(lastRefreshed.toISOString())}</Text>
                         )}
                         <View style={styles.fullBleed}>
                             <GroupedSection items={sessionItems} />
                         </View>
-                        <View style={{ height: 12 }} />
+                        <View style={styles.sectionSpacer} />
                         <View style={styles.fullBleed}>
                             <GroupedSection items={bulkItems} />
                         </View>
@@ -326,8 +342,6 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         alignItems: 'center',
     },
-
-
     scrollView: {
         flex: 1,
     },
@@ -376,6 +390,9 @@ const styles = StyleSheet.create({
         width: '100%',
         alignSelf: 'stretch',
     },
+    sectionSpacer: {
+        height: 12,
+    },
     emptyState: {
         alignItems: 'center',
         paddingVertical: 40,

package/src/ui/stores/authStore.ts

@@ -7,12 +7,21 @@ export interface AuthState {
   isLoading: boolean;
   error: string | null;
   lastUserFetch: number | null; // Timestamp of last user fetch for caching
+  
+  // Identity sync state (offline-first)
+  isIdentitySynced: boolean;
+  isSyncing: boolean;
+  
   loginSuccess: (user: User) => void;
   loginFailure: (error: string) => void;
   logout: () => void;
   fetchUser: (oxyServices: { getCurrentUser: () => Promise<User> }, forceRefresh?: boolean) => Promise<void>;
   updateUser: (updates: Partial<User>, oxyServices: { updateProfile: (updates: Partial<User>) => Promise<User>; getCurrentUser: () => Promise<User> }) => Promise<void>;
   setUser: (user: User) => void; // Direct user setter for caching
+  
+  // Identity sync actions
+  setIdentitySynced: (synced: boolean) => void;
+  setSyncing: (syncing: boolean) => void;
 }
 
 export const useAuthStore = create<AuthState>((set: (state: Partial<AuthState>) => void, get: () => AuthState) => ({
@@ -21,10 +30,30 @@ export const useAuthStore = create<AuthState>((set: (state: Partial<AuthState>)
   isLoading: false,
   error: null,
   lastUserFetch: null,
-  loginSuccess: (user: User) => set({ isLoading: false, isAuthenticated: true, user, lastUserFetch: Date.now() }),
+  
+  // Identity sync state (offline-first)
+  isIdentitySynced: true, // Assume synced until proven otherwise
+  isSyncing: false,
+  
+  loginSuccess: (user: User) => set({ 
+    isLoading: false, 
+    isAuthenticated: true, 
+    user, 
+    lastUserFetch: Date.now(),
+    isIdentitySynced: true, // If login succeeded, identity is synced
+  }),
   loginFailure: (error: string) => set({ isLoading: false, error }),
-  logout: () => set({ user: null, isAuthenticated: false, lastUserFetch: null }),
+  logout: () => set({ 
+    user: null, 
+    isAuthenticated: false, 
+    lastUserFetch: null,
+    // Keep identity sync state - user might still have local identity
+  }),
   setUser: (user: User) => set({ user, lastUserFetch: Date.now() }),
+  
+  // Identity sync actions
+  setIdentitySynced: (synced: boolean) => set({ isIdentitySynced: synced }),
+  setSyncing: (syncing: boolean) => set({ isSyncing: syncing }),
   fetchUser: async (oxyServices, forceRefresh = false) => {
     const state = get();
     const now = Date.now();

package/lib/commonjs/core/mixins/OxyServices.totp.js

@@ -1,53 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.OxyServicesTotpMixin = OxyServicesTotpMixin;
-/**
- * TOTP Enrollment Methods Mixin
- */
-
-function OxyServicesTotpMixin(Base) {
-  return class extends Base {
-    constructor(...args) {
-      super(...args);
-    }
-    async startTotpEnrollment(sessionId) {
-      try {
-        return await this.makeRequest('POST', '/api/auth/totp/enroll/start', {
-          sessionId
-        }, {
-          cache: false
-        });
-      } catch (error) {
-        throw this.handleError(error);
-      }
-    }
-    async verifyTotpEnrollment(sessionId, code) {
-      try {
-        return await this.makeRequest('POST', '/api/auth/totp/enroll/verify', {
-          sessionId,
-          code
-        }, {
-          cache: false
-        });
-      } catch (error) {
-        throw this.handleError(error);
-      }
-    }
-    async disableTotp(sessionId, code) {
-      try {
-        return await this.makeRequest('POST', '/api/auth/totp/disable', {
-          sessionId,
-          code
-        }, {
-          cache: false
-        });
-      } catch (error) {
-        throw this.handleError(error);
-      }
-    }
-  };
-}
-//# sourceMappingURL=OxyServices.totp.js.map

package/lib/commonjs/core/mixins/OxyServices.totp.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["OxyServicesTotpMixin","Base","constructor","args","startTotpEnrollment","sessionId","makeRequest","cache","error","handleError","verifyTotpEnrollment","code","disableTotp"],"sourceRoot":"../../../../src","sources":["core/mixins/OxyServices.totp.ts"],"mappings":";;;;;;AAAA;AACA;AACA;;AAGO,SAASA,oBAAoBA,CAAmCC,IAAO,EAAE;EAC9E,OAAO,cAAcA,IAAI,CAAC;IACxBC,WAAWA,CAAC,GAAGC,IAAW,EAAE;MAC1B,KAAK,CAAC,GAAIA,IAAc,CAAC;IAC3B;IACA,MAAMC,mBAAmBA,CAACC,SAAiB,EAAkF;MAC3H,IAAI;QACF,OAAO,MAAM,IAAI,CAACC,WAAW,CAAC,MAAM,EAAE,6BAA6B,EAAE;UAAED;QAAU,CAAC,EAAE;UAAEE,KAAK,EAAE;QAAM,CAAC,CAAC;MACvG,CAAC,CAAC,OAAOC,KAAK,EAAE;QACd,MAAM,IAAI,CAACC,WAAW,CAACD,KAAK,CAAC;MAC/B;IACF;IAEA,MAAME,oBAAoBA,CAACL,SAAiB,EAAEM,IAAY,EAA+E;MACvI,IAAI;QACF,OAAO,MAAM,IAAI,CAACL,WAAW,CAAC,MAAM,EAAE,8BAA8B,EAAE;UAAED,SAAS;UAAEM;QAAK,CAAC,EAAE;UAAEJ,KAAK,EAAE;QAAM,CAAC,CAAC;MAC9G,CAAC,CAAC,OAAOC,KAAK,EAAE;QACd,MAAM,IAAI,CAACC,WAAW,CAACD,KAAK,CAAC;MAC/B;IACF;IAEA,MAAMI,WAAWA,CAACP,SAAiB,EAAEM,IAAY,EAAkC;MACjF,IAAI;QACF,OAAO,MAAM,IAAI,CAACL,WAAW,CAAC,MAAM,EAAE,wBAAwB,EAAE;UAAED,SAAS;UAAEM;QAAK,CAAC,EAAE;UAAEJ,KAAK,EAAE;QAAM,CAAC,CAAC;MACxG,CAAC,CAAC,OAAOC,KAAK,EAAE;QACd,MAAM,IAAI,CAACC,WAAW,CAACD,KAAK,CAAC;MAC/B;IACF;EACF,CAAC;AACH","ignoreList":[]}