@oxyhq/services 6.9.43 → 6.9.44

package/src/ui/screens/AccountSwitcherScreen.tsx

@@ -60,11 +60,15 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         refreshSessions,
         isLoading = false,
         isAuthenticated = false,
+        actingAs,
+        managedAccounts,
+        setActingAs,
     } = useOxy();
 
     const [sessionsWithUsers, setSessionsWithUsers] = useState<SessionWithUser[]>([]);
     const [switchingToUserId, setSwitchingToUserId] = useState<string | null>(null);
     const [removingUserId, setRemovingUserId] = useState<string | null>(null);
+    const [switchingManagedId, setSwitchingManagedId] = useState<string | null>(null);
 
     // Device session management state
     const [showDeviceManagement, setShowDeviceManagement] = useState(false);
@@ -210,6 +214,30 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         );
     }, [logoutAll, onClose, t]);
 
+    const handleSwitchToManagedAccount = useCallback(async (accountId: string) => {
+        if (actingAs === accountId) return; // Already acting as this account
+        if (switchingManagedId) return; // Already switching
+
+        setSwitchingManagedId(accountId);
+        try {
+            setActingAs(accountId);
+            toast.success(t('accountSwitcher.toasts.switchSuccess') || 'Switched identity successfully!');
+            onClose?.();
+        } catch (error) {
+            if (__DEV__) {
+                console.error('Switch managed account failed:', error);
+            }
+            toast.error('Failed to switch identity. Please try again.');
+        } finally {
+            setSwitchingManagedId(null);
+        }
+    }, [actingAs, switchingManagedId, setActingAs, t, onClose]);
+
+    const handleSwitchBackToPrimary = useCallback(() => {
+        setActingAs(null);
+        toast.success('Switched back to primary account');
+    }, [setActingAs]);
+
     // Device session management functions - optimized with useCallback
     const loadAllDeviceSessions = useCallback(async () => {
         const currentActiveSessionId = activeSessionId ?? null;
@@ -428,6 +456,151 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                             </View>
                         )}
 
+                        {/* Acting as banner - show switch-back when acting as a managed account */}
+                        {actingAs && (
+                            <View style={styles.section}>
+                                <TouchableOpacity
+                                    style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.actingAsBanner]}
+                                    onPress={handleSwitchBackToPrimary}
+                                    activeOpacity={0.7}
+                                >
+                                    <View style={styles.settingInfo}>
+                                        <Text style={styles.settingLabel}>Switch back to primary account</Text>
+                                        <Text style={styles.settingDescription}>You are currently acting as another identity</Text>
+                                    </View>
+                                    <View style={styles.switchBackButton}>
+                                        <Text style={styles.switchBackButtonText}>Switch Back</Text>
+                                    </View>
+                                </TouchableOpacity>
+                            </View>
+                        )}
+
+                        {/* Managed Accounts */}
+                        {managedAccounts.length > 0 && (
+                            <View style={styles.section}>
+                                <Text style={styles.sectionTitle}>Managed Accounts</Text>
+                                <Text style={styles.sectionSubtitle}>Identities you manage</Text>
+
+                                {managedAccounts.map((managed, index) => {
+                                    const account = managed.account;
+                                    if (!account) return null;
+
+                                    const isActive = actingAs === managed.accountId;
+                                    const isSwitching = switchingManagedId === managed.accountId;
+                                    const isFirst = index === 0;
+                                    const isLast = index === managedAccounts.length - 1;
+
+                                    const managedDisplayName = typeof account.name === 'object'
+                                        ? account.name.full || account.name.first || account.username
+                                        : account.name || account.username || 'Unknown';
+
+                                    // Determine the manager role for badge display
+                                    const myRole = managed.managers?.find(
+                                        (m) => m.userId === user?.id
+                                    )?.role ?? 'owner';
+
+                                    return (
+                                        <TouchableOpacity
+                                            key={`managed-${managed.accountId}`}
+                                            style={[
+                                                styles.settingItem,
+                                                isFirst && styles.firstSettingItem,
+                                                isLast && styles.lastSettingItem,
+                                                isActive && styles.currentAccountCard,
+                                            ]}
+                                            onPress={() => handleSwitchToManagedAccount(managed.accountId)}
+                                            disabled={isActive || isSwitching}
+                                            activeOpacity={0.7}
+                                        >
+                                            <View style={styles.userIcon}>
+                                                {account.avatar ? (
+                                                    <Image source={{ uri: oxyServices.getFileDownloadUrl(account.avatar, 'thumb') }} style={styles.accountAvatarImage} />
+                                                ) : (
+                                                    <View style={[styles.accountAvatarFallback, styles.managedAvatarFallback]}>
+                                                        <Text style={styles.accountAvatarText}>
+                                                            {managedDisplayName.charAt(0).toUpperCase()}
+                                                        </Text>
+                                                    </View>
+                                                )}
+                                                {isActive && (
+                                                    <View style={styles.activeBadge}>
+                                                        <OxyIcon name="checkmark" size={12} color="#fff" />
+                                                    </View>
+                                                )}
+                                            </View>
+                                            <View style={styles.settingInfo}>
+                                                <View>
+                                                    <Text style={styles.settingLabel}>{managedDisplayName}</Text>
+                                                    <Text style={styles.settingDescription}>@{account.username}</Text>
+                                                </View>
+                                            </View>
+                                            <View style={styles.accountActions}>
+                                                <View style={styles.roleBadge}>
+                                                    <Text style={styles.roleBadgeText}>{myRole}</Text>
+                                                </View>
+                                                {isActive ? (
+                                                    <View style={styles.currentBadge}>
+                                                        <Text style={styles.currentBadgeText}>Current</Text>
+                                                    </View>
+                                                ) : (
+                                                    <TouchableOpacity
+                                                        style={styles.switchButton}
+                                                        onPress={() => handleSwitchToManagedAccount(managed.accountId)}
+                                                        disabled={isSwitching}
+                                                    >
+                                                        {isSwitching ? (
+                                                            <ActivityIndicator size="small" color="#fff" />
+                                                        ) : (
+                                                            <Text style={styles.switchButtonText}>Act As</Text>
+                                                        )}
+                                                    </TouchableOpacity>
+                                                )}
+                                            </View>
+                                        </TouchableOpacity>
+                                    );
+                                })}
+
+                                {/* Create New Identity */}
+                                <TouchableOpacity
+                                    style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, { marginTop: 8 }]}
+                                    onPress={() => navigate?.('CreateManagedAccount')}
+                                    activeOpacity={0.7}
+                                >
+                                    <View style={styles.userIcon}>
+                                        <View style={[styles.accountAvatarFallback, { backgroundColor: '#007AFF20' }]}>
+                                            <OxyIcon name="add" size={20} color="#007AFF" />
+                                        </View>
+                                    </View>
+                                    <View style={styles.settingInfo}>
+                                        <Text style={[styles.settingLabel, { color: '#007AFF' }]}>Create New Identity</Text>
+                                        <Text style={styles.settingDescription}>Add a managed sub-account</Text>
+                                    </View>
+                                </TouchableOpacity>
+                            </View>
+                        )}
+
+                        {/* Create first managed account (when none exist yet) */}
+                        {managedAccounts.length === 0 && isAuthenticated && (
+                            <View style={styles.section}>
+                                <Text style={styles.sectionTitle}>Managed Accounts</Text>
+                                <TouchableOpacity
+                                    style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem]}
+                                    onPress={() => navigate?.('CreateManagedAccount')}
+                                    activeOpacity={0.7}
+                                >
+                                    <View style={styles.userIcon}>
+                                        <View style={[styles.accountAvatarFallback, { backgroundColor: '#007AFF20' }]}>
+                                            <OxyIcon name="add" size={20} color="#007AFF" />
+                                        </View>
+                                    </View>
+                                    <View style={styles.settingInfo}>
+                                        <Text style={[styles.settingLabel, { color: '#007AFF' }]}>Create New Identity</Text>
+                                        <Text style={styles.settingDescription}>Create a managed sub-account you control</Text>
+                                    </View>
+                                </TouchableOpacity>
+                            </View>
+                        )}
+
                         {/* Quick Actions */}
                         <View style={styles.section}>
                             <Text style={styles.sectionTitle}>Quick Actions</Text>
@@ -729,6 +902,42 @@ const styles = StyleSheet.create({
         fontSize: 16,
         fontWeight: '600',
     },
+    sectionSubtitle: {
+        fontSize: 13,
+        color: '#888',
+        marginBottom: 12,
+    },
+    managedAvatarFallback: {
+        backgroundColor: '#5856D6',
+    },
+    roleBadge: {
+        backgroundColor: '#F2F2F7',
+        paddingHorizontal: 8,
+        paddingVertical: 3,
+        borderRadius: 8,
+    },
+    roleBadgeText: {
+        color: '#666',
+        fontSize: 11,
+        fontWeight: '500',
+        textTransform: 'capitalize',
+    },
+    actingAsBanner: {
+        borderWidth: 2,
+        borderColor: '#FF9500',
+        backgroundColor: '#FF950010',
+    },
+    switchBackButton: {
+        backgroundColor: '#FF9500',
+        paddingHorizontal: 14,
+        paddingVertical: 8,
+        borderRadius: 16,
+    },
+    switchBackButtonText: {
+        color: '#fff',
+        fontSize: 13,
+        fontWeight: '600',
+    },
 });
 
 export default ModernAccountSwitcherScreen;

package/src/ui/screens/CreateManagedAccountScreen.tsx

@@ -0,0 +1,338 @@
+import type React from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  ActivityIndicator,
+  ScrollView,
+  Platform,
+  KeyboardAvoidingView,
+} from 'react-native';
+import type { BaseScreenProps } from '../types/navigation';
+import { fontFamilies } from '../styles/fonts';
+import { Header } from '../components';
+import { useI18n } from '../hooks/useI18n';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { useOxy } from '../context/OxyContext';
+import { toast } from '../../lib/sonner';
+import { screenContentStyle } from '../constants/spacing';
+
+type UsernameStatus = 'idle' | 'checking' | 'available' | 'taken' | 'invalid';
+
+const USERNAME_REGEX = /^[a-zA-Z0-9_-]{3,30}$/;
+const DEBOUNCE_MS = 400;
+
+const CreateManagedAccountScreen: React.FC<BaseScreenProps> = ({
+  onClose,
+  goBack,
+}) => {
+  const bloomTheme = useTheme();
+  const { oxyServices, createManagedAccount, setActingAs } = useOxy();
+  const { t } = useI18n();
+
+  const [username, setUsername] = useState('');
+  const [displayName, setDisplayName] = useState('');
+  const [bio, setBio] = useState('');
+  const [usernameStatus, setUsernameStatus] = useState<UsernameStatus>('idle');
+  const [usernameMessage, setUsernameMessage] = useState('');
+  const [isCreating, setIsCreating] = useState(false);
+
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Debounced username availability check
+  const checkUsername = useCallback((value: string) => {
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    if (!value || value.length < 3) {
+      setUsernameStatus(value.length > 0 ? 'invalid' : 'idle');
+      setUsernameMessage(value.length > 0 ? 'Username must be at least 3 characters' : '');
+      return;
+    }
+
+    if (!USERNAME_REGEX.test(value)) {
+      setUsernameStatus('invalid');
+      setUsernameMessage('Only letters, numbers, hyphens, and underscores');
+      return;
+    }
+
+    setUsernameStatus('checking');
+    setUsernameMessage('');
+
+    debounceTimerRef.current = setTimeout(async () => {
+      try {
+        const result = await oxyServices.checkUsernameAvailability(value);
+        setUsernameStatus(result.available ? 'available' : 'taken');
+        setUsernameMessage(result.message || (result.available ? 'Username is available' : 'Username is taken'));
+      } catch {
+        setUsernameStatus('idle');
+        setUsernameMessage('Could not check availability');
+      }
+    }, DEBOUNCE_MS);
+  }, [oxyServices]);
+
+  const handleUsernameChange = useCallback((value: string) => {
+    const cleaned = value.toLowerCase().replace(/[^a-z0-9_-]/g, '');
+    setUsername(cleaned);
+    checkUsername(cleaned);
+  }, [checkUsername]);
+
+  // Cleanup debounce timer
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+
+  const canCreate = usernameStatus === 'available' && displayName.trim().length > 0 && !isCreating;
+
+  const handleCreate = useCallback(async () => {
+    if (!canCreate) return;
+
+    setIsCreating(true);
+    try {
+      // Split display name into first/last
+      const nameParts = displayName.trim().split(/\s+/);
+      const firstName = nameParts[0] || '';
+      const lastName = nameParts.length > 1 ? nameParts.slice(1).join(' ') : undefined;
+
+      const account = await createManagedAccount({
+        username,
+        name: { first: firstName, last: lastName },
+        bio: bio.trim() || undefined,
+      });
+
+      toast.success('Identity created successfully');
+
+      // Switch to the new managed account
+      if (account.accountId) {
+        setActingAs(account.accountId);
+      }
+
+      onClose?.();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to create identity';
+      toast.error(message);
+    } finally {
+      setIsCreating(false);
+    }
+  }, [canCreate, username, displayName, bio, createManagedAccount, setActingAs, onClose]);
+
+  const getStatusColor = (): string => {
+    switch (usernameStatus) {
+      case 'available': return '#34C759';
+      case 'taken':
+      case 'invalid': return bloomTheme.colors.error;
+      case 'checking': return bloomTheme.colors.primary;
+      default: return 'transparent';
+    }
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+      <Header
+        title="Create Identity"
+        onBack={goBack}
+        onClose={onClose}
+        showBackButton={true}
+        showCloseButton={true}
+        elevation="subtle"
+      />
+
+      <KeyboardAvoidingView
+        style={styles.flex}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 88 : 0}
+      >
+        <ScrollView
+          style={styles.flex}
+          contentContainerStyle={screenContentStyle}
+          keyboardShouldPersistTaps="handled"
+        >
+          <Text style={[styles.description, { color: bloomTheme.colors.text }]}>
+            Create a managed identity that you control. It will have its own profile, posts, and interactions.
+          </Text>
+
+          {/* Username */}
+          <View style={styles.fieldGroup}>
+            <Text style={[styles.label, { color: bloomTheme.colors.text }]}>Username</Text>
+            <View style={[
+              styles.inputContainer,
+              { borderColor: usernameStatus !== 'idle' ? getStatusColor() : bloomTheme.colors.border },
+            ]}>
+              <Text style={[styles.inputPrefix, { color: bloomTheme.colors.text + '80' }]}>@</Text>
+              <TextInput
+                style={[styles.input, { color: bloomTheme.colors.text }]}
+                value={username}
+                onChangeText={handleUsernameChange}
+                placeholder="username"
+                placeholderTextColor={bloomTheme.colors.text + '40'}
+                autoCapitalize="none"
+                autoCorrect={false}
+                autoComplete="off"
+                maxLength={30}
+              />
+              {usernameStatus === 'checking' && (
+                <ActivityIndicator size="small" color={bloomTheme.colors.primary} />
+              )}
+              {usernameStatus === 'available' && (
+                <Text style={styles.statusIcon}>OK</Text>
+              )}
+            </View>
+            {usernameMessage ? (
+              <Text style={[styles.statusMessage, { color: getStatusColor() }]}>
+                {usernameMessage}
+              </Text>
+            ) : null}
+          </View>
+
+          {/* Display Name */}
+          <View style={styles.fieldGroup}>
+            <Text style={[styles.label, { color: bloomTheme.colors.text }]}>Display Name</Text>
+            <View style={[styles.inputContainer, { borderColor: bloomTheme.colors.border }]}>
+              <TextInput
+                style={[styles.input, { color: bloomTheme.colors.text }]}
+                value={displayName}
+                onChangeText={setDisplayName}
+                placeholder="Display name"
+                placeholderTextColor={bloomTheme.colors.text + '40'}
+                maxLength={50}
+              />
+            </View>
+          </View>
+
+          {/* Bio */}
+          <View style={styles.fieldGroup}>
+            <Text style={[styles.label, { color: bloomTheme.colors.text }]}>Bio (optional)</Text>
+            <View style={[styles.inputContainer, styles.bioContainer, { borderColor: bloomTheme.colors.border }]}>
+              <TextInput
+                style={[styles.input, styles.bioInput, { color: bloomTheme.colors.text }]}
+                value={bio}
+                onChangeText={setBio}
+                placeholder="Tell people about this identity"
+                placeholderTextColor={bloomTheme.colors.text + '40'}
+                maxLength={160}
+                multiline
+                numberOfLines={3}
+                textAlignVertical="top"
+              />
+            </View>
+            <Text style={[styles.charCount, { color: bloomTheme.colors.text + '60' }]}>
+              {bio.length}/160
+            </Text>
+          </View>
+
+          {/* Create Button */}
+          <TouchableOpacity
+            style={[
+              styles.createButton,
+              { backgroundColor: bloomTheme.colors.primary },
+              !canCreate && styles.createButtonDisabled,
+            ]}
+            onPress={handleCreate}
+            disabled={!canCreate}
+            activeOpacity={0.7}
+          >
+            {isCreating ? (
+              <ActivityIndicator size="small" color="#fff" />
+            ) : (
+              <Text style={styles.createButtonText}>Create Identity</Text>
+            )}
+          </TouchableOpacity>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  flex: {
+    flex: 1,
+  },
+  description: {
+    fontSize: 15,
+    lineHeight: 22,
+    marginBottom: 24,
+    fontFamily: fontFamilies.inter,
+  },
+  fieldGroup: {
+    marginBottom: 20,
+  },
+  label: {
+    fontSize: 14,
+    fontFamily: fontFamilies.interSemiBold,
+    fontWeight: Platform.OS === 'web' ? '600' : undefined,
+    marginBottom: 8,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 14,
+    height: 48,
+  },
+  inputPrefix: {
+    fontSize: 16,
+    fontFamily: fontFamilies.inter,
+    marginRight: 2,
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    fontFamily: fontFamilies.inter,
+    paddingVertical: 0,
+  },
+  bioContainer: {
+    height: 88,
+    alignItems: 'flex-start',
+    paddingVertical: 12,
+  },
+  bioInput: {
+    height: 64,
+  },
+  statusIcon: {
+    fontSize: 13,
+    fontFamily: fontFamilies.interSemiBold,
+    fontWeight: Platform.OS === 'web' ? '600' : undefined,
+    color: '#34C759',
+  },
+  statusMessage: {
+    fontSize: 13,
+    fontFamily: fontFamilies.inter,
+    marginTop: 6,
+  },
+  charCount: {
+    fontSize: 12,
+    fontFamily: fontFamilies.inter,
+    textAlign: 'right',
+    marginTop: 4,
+  },
+  createButton: {
+    height: 50,
+    borderRadius: 25,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 12,
+  },
+  createButtonDisabled: {
+    opacity: 0.5,
+  },
+  createButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontFamily: fontFamilies.interSemiBold,
+    fontWeight: Platform.OS === 'web' ? '600' : undefined,
+  },
+});
+
+export default CreateManagedAccountScreen;