@oxyhq/services 6.9.46 → 6.10.2

package/src/ui/navigation/routes.ts

@@ -1,4 +1,4 @@
-import type { ComponentType } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import type { BaseScreenProps } from '../types/navigation';
 
 // Lazy loading: Screens are loaded on-demand to break require cycles
@@ -40,7 +40,8 @@ export type RouteName =
     | 'KarmaFAQ'
     | 'FollowersList'  // List of user's followers
     | 'FollowingList' // List of users being followed
-    | 'CreateManagedAccount'; // Create a new managed sub-account
+    | 'CreateManagedAccount' // Create a new managed sub-account
+    | 'AvatarCrop'; // Square-crop editor presented before avatar upload
 
 // Lazy screen loaders - functions that return screen components on-demand
 // This breaks the require cycle by deferring imports until screens are actually needed
@@ -82,6 +83,7 @@ const screenLoaders: Record<RouteName, () => ComponentType<BaseScreenProps>> = {
     FollowersList: () => require('../screens/FollowersListScreen').default,
     FollowingList: () => require('../screens/FollowingListScreen').default,
     CreateManagedAccount: () => require('../screens/CreateManagedAccountScreen').default,
+    AvatarCrop: () => require('../screens/AvatarCropScreen').default,
 };
 
 // Cache loaded components to avoid re-requiring
@@ -117,3 +119,92 @@ export const getScreenComponent = (routeName: RouteName): ComponentType<BaseScre
 export const isValidRoute = (routeName: string): routeName is RouteName => {
     return routeName in screenLoaders;
 };
+
+/**
+ * Configuration that BottomSheetRouter applies to the underlying BottomSheet
+ * for a given route. Adding new options here is additive — never rename or
+ * remove fields without bumping the consumer surface as a breaking change.
+ */
+export interface SheetRouteConfig {
+    /**
+     * When `false`, BottomSheet skips its internal ScrollView and lets the
+     * screen own scrolling. Required for screens that render a FlatList,
+     * SectionList, or any other VirtualizedList — nesting one inside a
+     * plain ScrollView breaks windowing and triggers a RN warning.
+     */
+    scrollable: boolean;
+    /**
+     * Controls the body-pan activation strategy on the underlying bloom
+     * `BottomSheet`. `true` uses RNGH's `manualActivation` with scroll-handoff
+     * (recommended for scrollable content — the only RNGH 2.x pattern that
+     * doesn't steal vertical events from the inner scroller on Android).
+     * `false` uses an always-active body pan that gates on scroll offset.
+     *
+     * Defaults to `true` for all routes — matches the historical in-tree
+     * BottomSheet behavior. Per-route opt-out is possible if a screen needs
+     * the always-active pan instead.
+     */
+    manualActivation: boolean;
+    /**
+     * When `true`, the backdrop dims proportionally with drag distance (iOS
+     * Photos style). Defaults to `true` for all routes — matches the
+     * historical in-tree BottomSheet behavior.
+     */
+    dynamicBackdrop: boolean;
+    /**
+     * Optional custom handle slot. When provided, replaces the default
+     * 36×5 pill drag handle. The handle remains unconditionally draggable
+     * via the dedicated handle gesture (when `manualActivation` is `true`).
+     * Use sparingly — screens should default to the standard handle for
+     * platform consistency.
+     */
+    handleComponent?: () => ReactNode;
+}
+
+/**
+ * Predicate matching FileManagementScreen's internal `isImageOnlyPicker`
+ * derivation. When the consumer restricts to image MIME types (no videos,
+ * no audio, no documents), FileManagement renders the flagship PhotoPickerView
+ * which owns its own FlatList. The sheet must therefore stop scrolling
+ * children. Kept in sync with `FileManagementScreen` — both check the same
+ * disabled MIME type families.
+ */
+const isFileManagementImageOnlyPicker = (props: Record<string, unknown>): boolean => {
+    if (!props.selectMode) return false;
+    const disabled = props.disabledMimeTypes;
+    if (!Array.isArray(disabled) || disabled.length === 0) return false;
+    const has = (predicate: (mt: string) => boolean): boolean =>
+        disabled.some((mt) => typeof mt === 'string' && predicate(mt));
+    const blocksVideos = has((mt) => mt === 'video/' || mt.startsWith('video/'));
+    const blocksAudio = has((mt) => mt === 'audio/' || mt.startsWith('audio/'));
+    const blocksDocs = has(
+        (mt) => mt === 'application/pdf' || mt === 'application/' || mt.startsWith('application/'),
+    );
+    return blocksVideos && blocksAudio && blocksDocs;
+};
+
+/** Defaults shared across all routes — preserves the historical in-tree BS UX. */
+const DEFAULT_SHEET_CONFIG: SheetRouteConfig = {
+    scrollable: true,
+    manualActivation: true,
+    dynamicBackdrop: true,
+};
+
+/**
+ * Returns the bottom-sheet configuration for a route. Defaults match the
+ * pre-refactor in-tree `BottomSheet` (scrollable, manualActivation,
+ * dynamicBackdrop). Routes opt out per-field as needed.
+ */
+export const getSheetConfig = (
+    routeName: RouteName | null,
+    screenProps: Record<string, unknown>,
+): SheetRouteConfig => {
+    if (!routeName) return DEFAULT_SHEET_CONFIG;
+    if (routeName === 'FileManagement' && isFileManagementImageOnlyPicker(screenProps)) {
+        // PhotoPickerView owns its own FlatList — the sheet must not wrap a
+        // ScrollView around it. Everything else stays at the standard
+        // manualActivation + dynamicBackdrop defaults.
+        return { ...DEFAULT_SHEET_CONFIG, scrollable: false };
+    }
+    return DEFAULT_SHEET_CONFIG;
+};

package/src/ui/screens/AccountCenterScreen.tsx

@@ -10,10 +10,7 @@ import {
 import { useCallback, useMemo } from 'react';
 import type { BaseScreenProps } from '../types/navigation';
 import { packageInfo } from '@oxyhq/core';
-import { toast } from '../../lib/sonner';
-import { fontFamilies } from '../styles/fonts';
-import * as Prompt from '@oxyhq/bloom/prompt';
-import { usePromptControl } from '@oxyhq/bloom/prompt';
+import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
 import ProfileCard from '../components/ProfileCard';
 import QuickActions from '../components/QuickActions';
 import { SettingsIcon } from '../components/SettingsIcon';
@@ -38,7 +35,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     const normalizedTheme = normalizeTheme(theme);
     const dangerColor = bloomTheme.colors.error;
     const colors = Colors[normalizeColorScheme(colorScheme, normalizedTheme)];
-    const logoutPrompt = usePromptControl();
+    const logoutDialog = useDialogControl();
 
     const handleLogout = useCallback(async () => {
         try {
@@ -134,14 +131,14 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                     ) : null}
                     <SettingsListItem icon={<SettingsIcon name="translate" color={colors.iconPersonalInfo} />} title={t('language.title') || 'Language'} description={t('language.subtitle') || 'Choose your preferred language'} onPress={() => navigate?.('LanguageSelector')} />
                     <SettingsListItem icon={<SettingsIcon name="help-circle" color={colors.iconSecurity} />} title={t('accountOverview.items.help.title') || 'Help & Support'} description={t('accountOverview.items.help.subtitle') || 'Get help and contact support'} onPress={() => navigate?.('HelpSupport')} />
-                    <SettingsListItem icon={<SettingsIcon name="information" color="#8E8E93" />} title={t('accountCenter.items.appInfo.title') || 'App Information'} description={t('accountCenter.items.appInfo.subtitle') || 'Version and system details'} onPress={() => navigate?.('AppInfo')} />
+                    <SettingsListItem icon={<SettingsIcon name="information" color={bloomTheme.colors.textTertiary} />} title={t('accountCenter.items.appInfo.title') || 'App Information'} description={t('accountCenter.items.appInfo.subtitle') || 'Version and system details'} onPress={() => navigate?.('AppInfo')} />
                 </SettingsListGroup>
 
                 <SettingsListGroup>
                     <SettingsListItem
                         icon={<SettingsIcon name="logout" color={dangerColor} />}
                         title={isLoading ? (t('accountCenter.signingOut') || 'Signing out...') : (t('common.actions.signOut') || 'Sign Out')}
-                        onPress={() => logoutPrompt.open()}
+                        onPress={() => logoutDialog.open()}
                         destructive={true}
                         showChevron={false}
                         disabled={isLoading}
@@ -156,13 +153,18 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                 </View>
             </ScrollView>
 
-            <Prompt.Basic
-                control={logoutPrompt}
+            <Dialog
+                control={logoutDialog}
                 title={t('common.actions.signOut') || 'Sign Out'}
                 description={t('common.confirms.signOut') || 'Are you sure you want to sign out?'}
-                onConfirm={handleLogout}
-                confirmButtonCta={t('common.actions.signOut') || 'Sign Out'}
-                confirmButtonColor="negative"
+                actions={[
+                    {
+                        label: t('common.actions.signOut') || 'Sign Out',
+                        color: 'destructive',
+                        onPress: handleLogout,
+                    },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
             />
         </View>
     );
@@ -173,7 +175,7 @@ const styles = StyleSheet.create({
     scrollView: { flex: 1 },
     scrollContainer: screenContentStyle,
     versionContainer: { alignItems: 'center', marginTop: 20, marginBottom: 20 },
-    versionText: { fontSize: 12, fontFamily: fontFamilies.inter },
+    versionText: { fontSize: 12 },
     message: { fontSize: 16, textAlign: 'center', marginTop: 24 },
 });
 

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -14,15 +14,13 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { BaseScreenProps } from '../types/navigation';
 import OxyLogo from '../components/OxyLogo';
 import Avatar from '../components/Avatar';
-import { fontFamilies } from '../styles/fonts';
-import { toast } from '../../lib/sonner';
+import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
 import { Ionicons } from '@expo/vector-icons';
-import * as Prompt from '@oxyhq/bloom/prompt';
-import { usePromptControl } from '@oxyhq/bloom/prompt';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { getDisplayName, getShortDisplayName } from '../utils/userUtils';
+import { getAccountDisplayName, getAccountFallbackHandle } from '@oxyhq/core';
 import { useColorScheme } from '../hooks/useColorScheme';
 import { Colors } from '../constants/theme';
 import { normalizeColorScheme, normalizeTheme } from '../utils/themeUtils';
@@ -35,7 +33,6 @@ import {
     createScreenContentStyle,
 } from '../constants/spacing';
 import { DeleteAccountModal } from '../components/modals';
-import { useDialogControl } from '@oxyhq/bloom/dialog';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 
 // Optional Lottie import - gracefully handle if not available
@@ -82,14 +79,14 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
         isAuthenticated,
         openAvatarPicker,
     } = useOxy();
-    const { t } = useI18n();
+    const { t, locale } = useI18n();
     const [showMoreAccounts, setShowMoreAccounts] = useState(false);
     const [additionalAccountsData, setAdditionalAccountsData] = useState<any[]>([]);
     const [loadingAdditionalAccounts, setLoadingAdditionalAccounts] = useState(false);
     const deleteAccountControl = useDialogControl();
-    const logoutPrompt = usePromptControl();
-    const signOutAllPrompt = usePromptControl();
-    const downloadDataPrompt = usePromptControl();
+    const logoutDialog = useDialogControl();
+    const signOutAllDialog = useDialogControl();
+    const downloadDataDialog = useDialogControl();
     const lottieRef = useRef<any>(null);
     const hasPlayedRef = useRef(false);
     const insets = useSafeAreaInsets();
@@ -149,27 +146,13 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 
     React.useEffect(() => {
         if (usersData && usersData.length > 0) {
-            const accountsData = usersData.map(({ sessionId, user: userProfile }: { sessionId: string; user: any }) => {
-                if (!userProfile) {
-                    return {
-                        id: sessionId,
-                        sessionId,
-                        username: 'Unknown User',
-                        email: 'No email available',
-                        avatar: null,
-                        userProfile: null
-                    };
-                }
-                return {
-                    id: sessionId,
-                    sessionId,
-                    username: userProfile.username,
-                    email: userProfile.email,
-                    name: userProfile.name,
-                    avatar: userProfile.avatar,
-                    userProfile
-                };
-            });
+            const accountsData = usersData.map(({ sessionId, user: userProfile }: { sessionId: string; user: any }) => ({
+                id: sessionId,
+                sessionId,
+                userProfile: userProfile ?? null,
+                avatar: userProfile?.avatar ?? null,
+                email: userProfile?.email,
+            }));
             setAdditionalAccountsData(accountsData);
             setLoadingAdditionalAccounts(false);
         } else if (additionalAccounts.length === 0) {
@@ -208,7 +191,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     const performDownload = useCallback(async (format: 'json' | 'csv') => {
         if (!oxyServices || !user) { toast.error(t('accountOverview.items.downloadData.error') || 'Service not available'); return; }
         try {
-            toast.loading(t('accountOverview.items.downloadData.downloading') || 'Preparing download...');
+            toast.info(t('accountOverview.items.downloadData.downloading') || 'Preparing download...');
             const blob = await oxyServices.downloadAccountData(format);
             if (Platform.OS === 'web') {
                 const url = URL.createObjectURL(blob);
@@ -229,8 +212,8 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 
     const handleDownloadData = useCallback(() => {
         if (!oxyServices || !user) { toast.error(t('accountOverview.items.downloadData.error') || 'Service not available'); return; }
-        downloadDataPrompt.open();
-    }, [oxyServices, user, t, downloadDataPrompt]);
+        downloadDataDialog.open();
+    }, [oxyServices, user, t, downloadDataDialog]);
 
     const handleDeleteAccount = useCallback(() => {
         if (!user) {
@@ -240,12 +223,12 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
         deleteAccountControl.open();
     }, [user, t, deleteAccountControl]);
 
-    const handleConfirmDelete = useCallback(async (password: string) => {
+    const handleConfirmDelete = useCallback(async (confirmText: string) => {
         if (!oxyServices || !user) {
             throw new Error(t('accountOverview.items.deleteAccount.error') || 'Service not available');
         }
 
-        await oxyServices.deleteAccount(password);
+        await oxyServices.deleteAccount(confirmText);
         toast.success(t('accountOverview.items.deleteAccount.success') || 'Account deleted successfully');
         deleteAccountControl.close();
         await logout();
@@ -322,7 +305,13 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                     <SettingsListItem
                         icon={<SettingsIcon name="account" color={baseThemeColors.iconSecurity} />}
                         title={displayName}
-                        description={user ? (user.email || user.username) : (t('common.status.loading') || 'Loading...')}
+                        description={(() => {
+                            if (!user) return t('common.status.loading') || 'Loading...';
+                            if (user.email) return user.email;
+                            const handle = getAccountFallbackHandle(user);
+                            if (!handle) return '';
+                            return user.username ? `@${handle}` : handle;
+                        })()}
                         onPress={() => navigate?.('AccountSettings', { activeTab: 'profile' })}
                     />
                 </SettingsListGroup>
@@ -379,37 +368,42 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                 showChevron={false}
                             />
                         ) : additionalAccountsData.length > 0 ? (
-                            additionalAccountsData.map((account) => (
-                                <SettingsListItem
-                                    key={`account-${account.id}`}
-                                    icon={
-                                        <View style={styles.userIcon}>
-                                            {account.avatar ? (
-                                                <Image
-                                                    source={{ uri: oxyServices.getFileDownloadUrl(account.avatar, 'thumb') }}
-                                                    style={styles.accountAvatarImage}
-                                                />
-                                            ) : (
-                                                <View style={styles.accountAvatarFallback}>
-                                                    <Text style={styles.accountAvatarText}>
-                                                        {account.username?.charAt(0).toUpperCase() || '?'}
-                                                    </Text>
-                                                </View>
-                                            )}
-                                        </View>
-                                    }
-                                    title={typeof account.name === 'object'
-                                        ? account.name?.full || account.name?.first || account.username
-                                        : account.name || account.username}
-                                    description={account.email || account.username}
-                                    onPress={() => {
-                                        toast.info(t('accountOverview.items.accountSwitcher.switchPrompt', { username: account.username }) || `Switch to ${account.username}?`);
-                                    }}
-                                />
-                            ))
+                            additionalAccountsData.map((account) => {
+                                const accountDisplayName = getAccountDisplayName(account.userProfile, locale);
+                                const accountHandle = getAccountFallbackHandle(account.userProfile);
+                                const description = account.email
+                                    ?? (accountHandle && account.userProfile?.username ? `@${accountHandle}` : accountHandle)
+                                    ?? '';
+                                return (
+                                    <SettingsListItem
+                                        key={`account-${account.id}`}
+                                        icon={
+                                            <View style={styles.userIcon}>
+                                                {account.avatar ? (
+                                                    <Image
+                                                        source={{ uri: oxyServices.getFileDownloadUrl(account.avatar, 'thumb') }}
+                                                        style={styles.accountAvatarImage}
+                                                    />
+                                                ) : (
+                                                    <View style={styles.accountAvatarFallback}>
+                                                        <Text style={styles.accountAvatarText}>
+                                                            {accountDisplayName.charAt(0).toUpperCase()}
+                                                        </Text>
+                                                    </View>
+                                                )}
+                                            </View>
+                                        }
+                                        title={accountDisplayName}
+                                        description={description}
+                                        onPress={() => {
+                                            toast.info(t('accountOverview.items.accountSwitcher.switchPrompt', { username: accountDisplayName }) || `Switch to ${accountDisplayName}?`);
+                                        }}
+                                    />
+                                );
+                            })
                         ) : (
                             <SettingsListItem
-                                icon={<SettingsIcon name="account-outline" color="#ccc" />}
+                                icon={<SettingsIcon name="account-outline" color={bloomTheme.colors.textTertiary} />}
                                 title={t('accountOverview.additional.noAccounts.title') || 'No other accounts'}
                                 description={t('accountOverview.additional.noAccounts.subtitle') || 'Add another account to switch between them'}
                                 showChevron={false}
@@ -431,7 +425,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             icon={<SettingsIcon name="logout" color={baseThemeColors.iconSharing} />}
                             title={t('accountOverview.items.signOutAll.title') || 'Sign out of all accounts'}
                             description={t('accountOverview.items.signOutAll.subtitle') || 'Remove all accounts from this device'}
-                            onPress={() => signOutAllPrompt.open()}
+                            onPress={() => signOutAllDialog.open()}
                         />
                     </SettingsListGroup>
                 )}
@@ -493,7 +487,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         onPress={() => navigate?.('LanguageSelector')}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="cog" color="#8E8E93" />}
+                        icon={<SettingsIcon name="cog" color={bloomTheme.colors.textTertiary} />}
                         title={t('accountOverview.items.preferences.title')}
                         description={t('accountOverview.items.preferences.subtitle')}
                         onPress={() => toast.info(t('accountOverview.items.preferences.coming'))}
@@ -523,7 +517,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         onPress={() => toast.info(t('accountOverview.items.connectedApps.coming'))}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="information" color="#8E8E93" />}
+                        icon={<SettingsIcon name="information" color={bloomTheme.colors.textTertiary} />}
                         title={t('accountOverview.items.about.title')}
                         description={t('accountOverview.items.about.subtitle')}
                         onPress={() => navigate?.('AppInfo')}
@@ -533,10 +527,10 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {/* Sign Out */}
                 <SettingsListGroup title={t('accountOverview.sections.actions')}>
                     <SettingsListItem
-                        icon={<SettingsIcon name="logout" color="#FF3B30" />}
+                        icon={<SettingsIcon name="logout" color={bloomTheme.colors.error} />}
                         title={t('accountOverview.items.signOut.title')}
                         description={t('accountOverview.items.signOut.subtitle')}
-                        onPress={() => logoutPrompt.open()}
+                        onPress={() => logoutDialog.open()}
                         destructive={true}
                         showChevron={false}
                     />
@@ -553,33 +547,42 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 />
             )}
 
-            <Prompt.Basic
-                control={logoutPrompt}
+            <Dialog
+                control={logoutDialog}
                 title={t('accountOverview.items.signOut.title') || 'Sign Out'}
                 description={t('common.confirms.signOut') || 'Are you sure you want to sign out?'}
-                onConfirm={handleLogout}
-                confirmButtonCta={t('accountOverview.items.signOut.title') || 'Sign Out'}
-                confirmButtonColor="negative"
+                actions={[
+                    {
+                        label: t('accountOverview.items.signOut.title') || 'Sign Out',
+                        color: 'destructive',
+                        onPress: handleLogout,
+                    },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
             />
-            <Prompt.Basic
-                control={signOutAllPrompt}
+            <Dialog
+                control={signOutAllDialog}
                 title={t('accountOverview.items.signOutAll.title') || 'Sign Out All'}
                 description={t('common.confirms.signOutAll') || 'Are you sure you want to sign out of all accounts?'}
-                onConfirm={handleLogout}
-                confirmButtonCta={t('accountOverview.items.signOutAll.title') || 'Sign Out All'}
-                confirmButtonColor="negative"
+                actions={[
+                    {
+                        label: t('accountOverview.items.signOutAll.title') || 'Sign Out All',
+                        color: 'destructive',
+                        onPress: handleLogout,
+                    },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
+            />
+            <Dialog
+                control={downloadDataDialog}
+                title={t('accountOverview.items.downloadData.confirmTitle') || 'Download Account Data'}
+                description={t('accountOverview.items.downloadData.confirmMessage') || 'Choose the format for your account data export:'}
+                actions={[
+                    { label: 'JSON', onPress: () => performDownload('json') },
+                    { label: 'CSV', onPress: () => performDownload('csv') },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
             />
-            <Prompt.Outer control={downloadDataPrompt}>
-                <Prompt.Content>
-                    <Prompt.TitleText>{t('accountOverview.items.downloadData.confirmTitle') || 'Download Account Data'}</Prompt.TitleText>
-                    <Prompt.DescriptionText>{t('accountOverview.items.downloadData.confirmMessage') || 'Choose the format for your account data export:'}</Prompt.DescriptionText>
-                </Prompt.Content>
-                <Prompt.Actions>
-                    <Prompt.Action cta="JSON" onPress={() => performDownload('json')} color="primary" />
-                    <Prompt.Action cta="CSV" onPress={() => performDownload('csv')} color="primary_subtle" />
-                    <Prompt.Cancel cta={t('common.cancel') || 'Cancel'} />
-                </Prompt.Actions>
-            </Prompt.Outer>
         </View>
     );
 };
@@ -645,7 +648,6 @@ const styles = StyleSheet.create({
         fontSize: 28,
         fontWeight: '600',
         marginBottom: 8,
-        fontFamily: fontFamilies.interBold,
         maxWidth: '90%',
     },
     welcomeSubtext: {
@@ -656,16 +658,6 @@ const styles = StyleSheet.create({
     userIcon: {
         marginRight: 12,
     },
-    manageButton: {
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        borderRadius: 16,
-    },
-    manageButtonText: {
-        color: '#fff',
-        fontSize: 14,
-        fontWeight: '500',
-    },
     accountAvatarImage: {
         width: 40,
         height: 40,
@@ -688,7 +680,6 @@ const styles = StyleSheet.create({
         fontSize: 16,
         textAlign: 'center',
         marginTop: 24,
-        color: '#333',
     },
     loadingContainer: {
         flexDirection: 'row',
@@ -699,7 +690,6 @@ const styles = StyleSheet.create({
     },
     loadingText: {
         fontSize: 16,
-        color: '#666',
     },
 });
 

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -11,10 +11,7 @@ import {
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import type { BaseScreenProps } from '../types/navigation';
-import { toast } from '../../lib/sonner';
-import { fontFamilies } from '../styles/fonts';
-import * as Prompt from '@oxyhq/bloom/prompt';
-import { usePromptControl } from '@oxyhq/bloom/prompt';
+import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
 import { useAuthStore } from '../stores/authStore';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { useI18n } from '../hooks/useI18n';
@@ -56,10 +53,11 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
     const { data: user, isLoading: userLoading } = useCurrentUser({ enabled: isAuthenticated });
     const uploadAvatarMutation = useUploadAvatar();
 
-    // Prompt controls
-    const removeAvatarPrompt = usePromptControl();
+    // Dialog controls
+    const removeAvatarDialog = useDialogControl();
 
-    // Fallback to store for backward compatibility
+    // Fall back to the auth store while the query is loading so the screen
+    // can render immediately with cached profile data on subsequent visits.
     const userFromStore = useAuthStore((state) => state.user);
     const finalUser = user || userFromStore;
     const isUpdatingAvatar = uploadAvatarMutation.isPending;
@@ -270,8 +268,8 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
     }, [t]);
 
     const handleAvatarRemove = useCallback(() => {
-        removeAvatarPrompt.open();
-    }, [removeAvatarPrompt]);
+        removeAvatarDialog.open();
+    }, [removeAvatarDialog]);
 
     const { openAvatarPicker } = useOxy();
 
@@ -385,7 +383,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                                         bottom: 0,
                                                         justifyContent: 'center',
                                                         alignItems: 'center',
-                                                        backgroundColor: colorScheme === 'dark' ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.7)',
+                                                        backgroundColor: bloomTheme.colors.overlay,
                                                         borderRadius: 18,
                                                     }}>
                                                         <ActivityIndicator size="small" color={colors.tint} />
@@ -551,13 +549,18 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                             </View>
                         </View>
             </ScrollView>
-            <Prompt.Basic
-                control={removeAvatarPrompt}
+            <Dialog
+                control={removeAvatarDialog}
                 title={t('editProfile.confirms.removeAvatarTitle') || 'Remove Avatar'}
                 description={t('editProfile.confirms.removeAvatar') || 'Remove your profile picture?'}
-                onConfirm={handleAvatarRemoveConfirmed}
-                confirmButtonCta={t('common.remove') || 'Remove'}
-                confirmButtonColor='negative'
+                actions={[
+                    {
+                        label: t('common.remove') || 'Remove',
+                        color: 'destructive',
+                        onPress: handleAvatarRemoveConfirmed,
+                    },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
             />
         </View>
     );
@@ -584,7 +587,6 @@ const styles = StyleSheet.create({
         gap: COMPONENT_GAP,
     },
     modernTitle: {
-        fontFamily: fontFamilies.interBold,
         fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
         fontSize: 42,
         lineHeight: 50.4, // 42 * 1.2
@@ -609,7 +611,6 @@ const styles = StyleSheet.create({
         marginTop: 4,
         textTransform: 'uppercase',
         letterSpacing: 0.5,
-        fontFamily: fontFamilies.interSemiBold,
     },
     groupedSectionWrapper: {
         backgroundColor: 'transparent',