@oxyhq/services 5.13.1 → 5.13.2

package/src/ui/screens/steps/SignInUsernameStep.tsx

@@ -4,22 +4,21 @@ import { useRef, useEffect, useMemo, useState, useCallback } from 'react';
 import {
     View,
     Text,
-    Platform,
     StyleSheet,
-    type ViewStyle,
-    type TextStyle,
     ActivityIndicator,
+    TouchableOpacity,
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import HighFive from '../../../assets/illustrations/HighFive';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import TextField from '../../components/internal/TextField';
 import { useI18n } from '../../hooks/useI18n';
-import { STEP_GAP, STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
+import { stepStyles } from '../../styles/spacing';
 import Avatar from '../../components/Avatar';
-import { TouchableOpacity } from 'react-native';
 import { useOxy } from '../../context/OxyContext';
 import { toast } from '../../../lib/sonner';
+import { useAccountStore, useAccounts, useAccountLoading, useAccountLoadingSession, type QuickAccount } from '../../stores/accountStore';
+import { fontFamilies } from '../../styles/fonts';
 
 interface SignInUsernameStepProps {
     // Common props from StepBasedScreen
@@ -56,13 +55,6 @@ interface SignInUsernameStepProps {
     validateUsername: (username: string) => Promise<boolean>;
 }
 
-interface QuickAccount {
-    sessionId: string;
-    username: string;
-    displayName: string;
-    avatar?: string;
-}
-
 const MAX_QUICK_ACCOUNTS = 3;
 
 const getThemeMode = (theme: string | undefined): 'light' | 'dark' =>
@@ -89,190 +81,103 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
     const { t } = useI18n();
     const { sessions, activeSessionId, switchSession, oxyServices } = useOxy();
     const baseStyles = stepStyles;
-    const webShadowReset = Platform.OS === 'web' ? ({ boxShadow: 'none' } as any) : null;
     const themeMode = getThemeMode(theme);
-    const [quickAccounts, setQuickAccounts] = useState<QuickAccount[]>([]);
-    const [loadingAccounts, setLoadingAccounts] = useState(false);
     const [switchingSessionId, setSwitchingSessionId] = useState<string | null>(null);
     const [showAccounts, setShowAccounts] = useState(false);
+    const previousSessionIdsRef = useRef<string>('');
 
-    const otherSessions = useMemo(
-        () => (sessions ?? []).filter((session) => session.sessionId !== activeSessionId),
-        [sessions, activeSessionId]
-    );
+    // Zustand store - use stable selectors
+    const quickAccounts = useAccounts();
+    const loadingAccounts = useAccountLoading();
+    const isLoading = useAccountStore(state => state.loading);
 
-    // Show accounts if we have any sessions (either in add account mode or just have saved sessions)
-    const hasSessions = (sessions ?? []).length > 0;
-
-    // Use other sessions if in add account mode, otherwise show all sessions
-    const sessionsToShow = isAddAccountMode ? otherSessions : (sessions ?? []);
-
-    // Debug logging
-    if (__DEV__) {
-        console.log('SignInUsernameStep - Debug:', {
-            isAddAccountMode,
-            hasSessions,
-            sessionsCount: sessions?.length ?? 0,
-            otherSessionsCount: otherSessions.length,
-            sessionsToShowCount: sessionsToShow.length,
-            activeSessionId,
-            quickAccountsCount: quickAccounts.length,
-            loadingAccounts,
-        });
-    }
+    // Store actions are stable - get them once
+    const loadAccountsRef = useRef(useAccountStore.getState().loadAccounts);
+    const setAccountsRef = useRef(useAccountStore.getState().setAccounts);
+    const moveAccountToTopRef = useRef(useAccountStore.getState().moveAccountToTop);
 
+    // Update refs if store changes (shouldn't happen, but safe)
     useEffect(() => {
-        let cancelled = false;
-
-        const loadQuickAccounts = async () => {
-            // Show accounts if we have sessions and services available
-            // In add account mode, show other sessions; otherwise show all sessions
-            if (!hasSessions || !oxyServices) {
-                if (!cancelled) {
-                    setQuickAccounts([]);
-                    setLoadingAccounts(false);
-                }
-                return;
-            }
+        loadAccountsRef.current = useAccountStore.getState().loadAccounts;
+        setAccountsRef.current = useAccountStore.getState().setAccounts;
+        moveAccountToTopRef.current = useAccountStore.getState().moveAccountToTop;
+    }, []);
+
+    const sessionsToLoad = useMemo(() => {
+        const allSessions = sessions || [];
+        return allSessions.slice(0, MAX_QUICK_ACCOUNTS);
+    }, [sessions]);
+
+    const sessionsToLoadIds = useMemo(
+        () => sessionsToLoad.map(s => s.sessionId).sort().join(','),
+        [sessionsToLoad]
+    );
 
-            // If in add account mode and no other sessions, don't show anything
-            if (isAddAccountMode && sessionsToShow.length === 0) {
-                if (!cancelled) {
-                    setQuickAccounts([]);
-                    setLoadingAccounts(false);
-                }
-                return;
-            }
+    useEffect(() => {
+        if (previousSessionIdsRef.current === sessionsToLoadIds || isLoading) return;
+        if (!sessionsToLoad.length || !oxyServices) {
+            setAccountsRef.current([]);
+            previousSessionIdsRef.current = sessionsToLoadIds;
+            return;
+        }
 
-            // If not in add account mode and no sessions, don't show anything
-            if (!isAddAccountMode && sessionsToShow.length === 0) {
-                if (!cancelled) {
-                    setQuickAccounts([]);
-                    setLoadingAccounts(false);
-                }
-                return;
-            }
+        previousSessionIdsRef.current = sessionsToLoadIds;
 
-            setLoadingAccounts(true);
-            const targetSessions = sessionsToShow.slice(0, MAX_QUICK_ACCOUNTS);
-
-            try {
-                const results = await Promise.all(
-                    targetSessions.map(async (session): Promise<QuickAccount | null> => {
-                        try {
-                            const profile = await oxyServices.getUserBySession(session.sessionId);
-                            const displayName =
-                                profile?.name?.full ||
-                                profile?.name?.first ||
-                                profile?.username ||
-                                'Account';
-
-                            return {
-                                sessionId: session.sessionId,
-                                username: profile?.username ?? 'account',
-                                displayName,
-                                avatar: profile?.avatar,
-                            };
-                        } catch (error) {
-                            if (__DEV__) {
-                                console.error(
-                                    `Failed to load profile for session ${session.sessionId}`,
-                                    error
-                                );
-                            }
-                            return null;
-                        }
-                    })
-                );
-
-                if (!cancelled) {
-                    setQuickAccounts(results.filter((item): item is QuickAccount => Boolean(item)));
-                }
-            } finally {
-                if (!cancelled) {
-                    setLoadingAccounts(false);
-                }
-            }
-        };
+        const uniqueSessionIds = Array.from(new Set(sessionsToLoad.map(s => s.sessionId)));
+        if (uniqueSessionIds.length === 0) {
+            setAccountsRef.current([]);
+            return;
+        }
 
-        void loadQuickAccounts();
+        const currentAccounts = useAccountStore.getState().accounts;
+        const accountsArray = Object.values(currentAccounts);
 
-        return () => {
-            cancelled = true;
-        };
-    }, [hasSessions, sessionsToShow, oxyServices, isAddAccountMode]);
+        void loadAccountsRef.current(uniqueSessionIds, oxyServices, accountsArray);
+    }, [sessionsToLoadIds, oxyServices, isLoading]);
 
     const handleSwitchAccount = useCallback(
         async (sessionId: string) => {
+            if (switchingSessionId || sessionId === activeSessionId) return;
+
             setSwitchingSessionId(sessionId);
-            try {
-                await switchSession(sessionId);
-                const switchedAccount =
-                    quickAccounts.find((account) => account.sessionId === sessionId) ?? null;
-                const successMessage =
-                    t('signin.status.accountSwitched', {
-                        name: switchedAccount?.displayName ?? t('signin.actions.openAccountSwitcher'),
-                    }) || 'Account switched';
-                toast.success(successMessage);
-            } catch (error) {
-                if (__DEV__) {
-                    console.error('Failed to switch account:', error);
+            moveAccountToTopRef.current(sessionId);
+
+            switchSession(sessionId).catch((error) => {
+                if (__DEV__) console.error('Failed to switch account:', error);
+                const state = useAccountStore.getState();
+                const account = state.accounts[sessionId];
+                if (account) {
+                    const filtered = Object.values(state.accounts).filter(a => a.sessionId !== sessionId);
+                    setAccountsRef.current([...filtered, account]);
                 }
-                toast.error(
-                    t('signin.actions.switchAccountFailed') || 'Unable to switch accounts. Please try again.'
-                );
-            } finally {
+                toast.error(t('signin.actions.switchAccountFailed') || 'Unable to switch accounts. Please try again.');
+            }).finally(() => {
                 setSwitchingSessionId(null);
-            }
+            });
         },
-        [quickAccounts, switchSession, t]
+        [switchSession, switchingSessionId, activeSessionId, t]
     );
 
-    const otherAccountsCount = sessionsToShow.length;
-
-    // Get all accounts for avatar display (current user + quick accounts)
-    const allAccountsForAvatars = useMemo(() => {
-        const accounts: Array<{
-            sessionId: string;
-            displayName: string;
-            username?: string;
-            avatar?: string;
-            isCurrent?: boolean;
-        }> = [];
-
-        // Add current user if in add account mode
-        if (isAddAccountMode && user) {
-            accounts.push({
-                sessionId: activeSessionId || '',
-                displayName: user.name?.full || user.username || 'Account',
-                username: user.username,
-                avatar: user.avatar,
-                isCurrent: true,
-            });
-        }
 
-        // Add quick accounts
-        quickAccounts.forEach((account) => {
-            accounts.push({
-                sessionId: account.sessionId,
-                displayName: account.displayName,
-                username: account.username,
-                avatar: account.avatar,
-                isCurrent: account.sessionId === activeSessionId,
-            });
+    const accountsForDisplay = useMemo(() => {
+        const sessionMap = new Map(sessions?.map(s => [s.sessionId, s]) || []);
+        return quickAccounts.map(account => {
+            const session = sessionMap.get(account.sessionId);
+            const isCurrent = session?.isCurrent === true || account.sessionId === activeSessionId;
+            return {
+                ...account,
+                isCurrent,
+            };
         });
+    }, [quickAccounts, sessions, activeSessionId]);
 
-        return accounts;
-    }, [isAddAccountMode, user, quickAccounts, activeSessionId]);
-
-    const handleUsernameChange = (text: string) => {
-        // Text is already filtered by formatValue prop, but ensure it's clean
+    const handleUsernameChange = useCallback((text: string) => {
         const filteredText = text.replace(/[^a-zA-Z0-9]/g, '');
         setUsername(filteredText);
         if (errorMessage) setErrorMessage('');
-    };
+    }, [setUsername, setErrorMessage, errorMessage]);
 
-    const handleContinue = async () => {
+    const handleContinue = useCallback(async () => {
         const trimmedUsername = username?.trim() || '';
 
         if (!trimmedUsername) {
@@ -287,9 +192,7 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
         }
 
         try {
-            // Validate the username before proceeding
             const isValid = await validateUsername(trimmedUsername);
-
             if (isValid) {
                 nextStep();
             }
@@ -297,7 +200,7 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
             if (__DEV__) console.error('Error during username validation:', error);
             setErrorMessage('Unable to validate username. Please try again.');
         }
-    };
+    }, [username, validateUsername, nextStep, setErrorMessage, t]);
 
     return (
         <>
@@ -345,8 +248,7 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
                 />
             </View>
 
-            {/* "Or" divider */}
-            {((isAddAccountMode && user) || (hasSessions && sessionsToShow.length > 0)) && (
+            {accountsForDisplay.length > 0 && (
                 <View style={[baseStyles.container, baseStyles.sectionSpacing, stylesheet.dividerContainer]}>
                     <View style={[stylesheet.dividerLine, { backgroundColor: colors.border }]} />
                     <Text style={[stylesheet.dividerText, { color: colors.secondaryText }]}>
@@ -356,7 +258,7 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
                 </View>
             )}
 
-            {(isAddAccountMode && user) || (hasSessions && sessionsToShow.length > 0) ? (
+            {accountsForDisplay.length > 0 ? (
                 <View style={[baseStyles.container, baseStyles.sectionSpacing]}>
                     <TouchableOpacity
                         style={[
@@ -377,35 +279,34 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
                             <Text style={[stylesheet.toggleButtonText, { color: colors.text }]}>
                                 {t('signin.alreadySignedInWith') || 'Already signed in with'}
                             </Text>
-                            {allAccountsForAvatars.length > 0 && (
+                            {accountsForDisplay.length > 0 && (
                                 <View style={stylesheet.avatarsContainer}>
-                                    {allAccountsForAvatars.slice(0, 5).map((account, index) => (
+                                    {accountsForDisplay.slice(0, 5).map((account, index) => (
                                         <View
-                                            key={account.sessionId}
+                                            key={`avatar-${account.sessionId}`}
                                             style={[
                                                 stylesheet.avatarWrapper,
                                                 account.isCurrent && stylesheet.currentAvatarWrapper,
                                                 index > 0 && { marginLeft: -12 },
-                                                { zIndex: Math.min(allAccountsForAvatars.length, 5) - index },
+                                                { zIndex: Math.min(accountsForDisplay.length, 5) - index },
                                                 { borderColor: colors.inputBackground || colors.background || '#FFFFFF' },
                                             ]}
                                         >
                                             <Avatar
                                                 name={account.displayName}
-                                                text={account.displayName.charAt(0).toUpperCase()}
                                                 size={28}
                                                 theme={themeMode}
                                                 backgroundColor={colors.primary}
-                                                uri={account.avatar && oxyServices ? oxyServices.getFileDownloadUrl(account.avatar, 'thumb') : undefined}
+                                                uri={account.avatarUrl}
                                             />
                                         </View>
                                     ))}
                                 </View>
                             )}
-                            {!showAccounts && (quickAccounts.length > 0 || otherAccountsCount > 0) && allAccountsForAvatars.length === 0 && (
+                            {!showAccounts && accountsForDisplay.length === 0 && quickAccounts.length > 0 && (
                                 <View style={[stylesheet.accountCountBadge, { backgroundColor: `${colors.primary}15` }]}>
                                     <Text style={[stylesheet.accountCountText, { color: colors.primary }]}>
-                                        {otherAccountsCount + (isAddAccountMode && user ? 1 : 0)}
+                                        {quickAccounts.length}
                                     </Text>
                                 </View>
                             )}
@@ -414,63 +315,15 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
 
                     {showAccounts && (
                         <View style={stylesheet.accountsList}>
-                            {loadingAccounts && quickAccounts.length === 0 && !isAddAccountMode ? (
+                            {loadingAccounts && accountsForDisplay.length === 0 ? (
                                 <View style={stylesheet.accountItem}>
                                     <ActivityIndicator color={colors.primary} size="small" />
                                 </View>
                             ) : (
                                 <>
-                                    {/* Show current account when in add account mode */}
-                                    {isAddAccountMode && user && (
-                                        <View
-                                            style={[
-                                                stylesheet.accountItem,
-                                                {
-                                                    backgroundColor: colors.inputBackground,
-                                                },
-                                            ]}
-                                        >
-                                            <View style={[stylesheet.accountItemAvatarWrapper, { borderColor: colors.inputBackground || colors.background || '#FFFFFF' }]}>
-                                                <Avatar
-                                                    name={user.name?.full || user.username}
-                                                    text={(user.name?.full || user.username || 'U')
-                                                        .slice(0, 1)
-                                                        .toUpperCase()}
-                                                    size={36}
-                                                    theme={themeMode}
-                                                    backgroundColor={colors.primary}
-                                                    uri={user.avatar && oxyServices ? oxyServices.getFileDownloadUrl(user.avatar, 'thumb') : undefined}
-                                                />
-                                            </View>
-                                            <View style={stylesheet.accountItemText}>
-                                                <Text
-                                                    style={[stylesheet.accountItemName, { color: colors.text }]}
-                                                    numberOfLines={1}
-                                                >
-                                                    {user.name?.full || user.username}
-                                                </Text>
-                                                {user.username && (
-                                                    <Text
-                                                        style={[
-                                                            stylesheet.accountItemUsername,
-                                                            { color: colors.secondaryText },
-                                                        ]}
-                                                        numberOfLines={1}
-                                                    >
-                                                        @{user.username}
-                                                    </Text>
-                                                )}
-                                            </View>
-                                            <View style={[stylesheet.currentAccountBadgeContainer, { backgroundColor: `${colors.primary}15` }]}>
-                                                <Text style={[stylesheet.currentAccountBadge, { color: colors.primary }]}>
-                                                    {t('signin.currentAccount') || 'Current'}
-                                                </Text>
-                                            </View>
-                                        </View>
-                                    )}
-                                    {quickAccounts.map((account) => (
+                                    {accountsForDisplay.map((account) => (
                                         <TouchableOpacity
-                                            key={account.sessionId}
+                                            key={`account-${account.sessionId}`}
                                             style={[
                                                 stylesheet.accountItem,
                                                 {
@@ -479,7 +332,7 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
                                                 switchingSessionId === account.sessionId && stylesheet.accountItemLoading,
                                             ]}
                                             onPress={() => handleSwitchAccount(account.sessionId)}
-                                            disabled={switchingSessionId === account.sessionId}
+                                            disabled={switchingSessionId === account.sessionId || account.isCurrent}
                                             activeOpacity={0.7}
                                         >
                                             {switchingSessionId === account.sessionId ? (
@@ -489,11 +342,10 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
                                                     <View style={[stylesheet.accountItemAvatarWrapper, { borderColor: colors.inputBackground || colors.background || '#FFFFFF' }]}>
                                                         <Avatar
                                                             name={account.displayName}
-                                                            text={account.displayName.charAt(0).toUpperCase()}
                                                             size={36}
                                                             theme={themeMode}
                                                             backgroundColor={colors.primary}
-                                                            uri={account.avatar && oxyServices ? oxyServices.getFileDownloadUrl(account.avatar, 'thumb') : undefined}
+                                                            uri={account.avatarUrl}
                                                         />
                                                     </View>
                                                     <View style={stylesheet.accountItemText}>
@@ -515,11 +367,18 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
                                                             </Text>
                                                         )}
                                                     </View>
+                                                    {account.isCurrent ? (
+                                                        <View style={[stylesheet.currentAccountBadgeContainer, { backgroundColor: `${colors.primary}20` }]}>
+                                                            <Text style={[stylesheet.currentAccountBadge, { color: colors.primary }]}>
+                                                                {t('signin.currentAccount') || 'Current'}
+                                                            </Text>
+                                                        </View>
+                                                    ) : null}
                                                 </>
                                             )}
                                         </TouchableOpacity>
                                     ))}
-                                    {otherAccountsCount > MAX_QUICK_ACCOUNTS && (
+                                    {sessions && sessions.length > MAX_QUICK_ACCOUNTS && (
                                         <TouchableOpacity
                                             style={[
                                                 stylesheet.accountItem,
@@ -534,8 +393,8 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
                                             <Ionicons name="chevron-forward" size={18} color={colors.primary} />
                                             <Text style={[stylesheet.viewAllText, { color: colors.primary }]}>
                                                 {t('signin.viewAllAccounts', {
-                                                    count: otherAccountsCount - MAX_QUICK_ACCOUNTS,
-                                                }) || `View ${otherAccountsCount - MAX_QUICK_ACCOUNTS} more`}
+                                                    count: sessions.length - MAX_QUICK_ACCOUNTS,
+                                                }) || `View ${sessions.length - MAX_QUICK_ACCOUNTS} more`}
                                             </Text>
                                         </TouchableOpacity>
                                     )}
@@ -615,6 +474,7 @@ const stylesheet = StyleSheet.create({
         borderWidth: 0,
         gap: 12,
         minHeight: 56,
+        justifyContent: 'space-between',
     },
     accountItemLoading: {
         justifyContent: 'center',
@@ -641,14 +501,19 @@ const stylesheet = StyleSheet.create({
         marginLeft: 4,
     },
     currentAccountBadgeContainer: {
-        paddingHorizontal: 10,
-        paddingVertical: 4,
-        borderRadius: 16,
+        paddingHorizontal: 12,
+        paddingVertical: 5,
+        borderRadius: 12,
+        marginLeft: 'auto',
+        minWidth: 60,
+        alignItems: 'center',
+        justifyContent: 'center',
     },
     currentAccountBadge: {
-        fontSize: 10,
-        fontWeight: '600',
-        letterSpacing: 0.3,
+        fontSize: 11,
+        fontFamily: fontFamilies.phuduExtraBold,
+        letterSpacing: 0.5,
+        textTransform: 'uppercase',
     },
     dividerContainer: {
         flexDirection: 'row',
@@ -678,17 +543,6 @@ const stylesheet = StyleSheet.create({
     currentAvatarWrapper: {
         borderWidth: 3,
     },
-    currentBadge: {
-        position: 'absolute',
-        bottom: -2,
-        right: -2,
-        width: 14,
-        height: 14,
-        borderRadius: 7,
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderWidth: 0,
-    },
     accountItemAvatarWrapper: {
         borderRadius: 20,
         borderWidth: 3,