@oxyhq/services 6.9.44 → 6.9.46

package/src/ui/screens/SessionManagementScreen.tsx

@@ -7,7 +7,6 @@ import {
     StyleSheet,
     ScrollView,
     ActivityIndicator,
-    Alert,
     Platform,
     RefreshControl,
 } from 'react-native';
@@ -15,8 +14,11 @@ import type { BaseScreenProps } from '../types/navigation';
 import { screenContentStyle } from '../constants/spacing';
 import { toast } from '../../lib/sonner';
 import type { ClientSession } from '@oxyhq/core';
-import { confirmAction } from '../utils/confirmAction';
-import { Header, GroupedSection } from '../components';
+import * as Prompt from '@oxyhq/bloom/prompt';
+import { usePromptControl } from '@oxyhq/bloom/prompt';
+import { Header } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { SettingsIcon } from '../components/SettingsIcon';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
@@ -52,6 +54,12 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
     const [actionLoading, setActionLoading] = useState<string | null>(null);
     const [switchLoading, setSwitchLoading] = useState<string | null>(null);
     const [lastRefreshed, setLastRefreshed] = useState<Date | null>(null);
+    const [pendingLogoutSessionId, setPendingLogoutSessionId] = useState<string | null>(null);
+
+    // Prompt controls
+    const logoutSessionPrompt = usePromptControl();
+    const logoutOtherSessionsPrompt = usePromptControl();
+    const logoutAllSessionsPrompt = usePromptControl();
 
     // Use bloom theme for non-style color props (ActivityIndicator, icon colors, etc.)
     const bloomTheme = useTheme();
@@ -75,39 +83,37 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
             if (__DEV__) {
                 console.error('Failed to load sessions:', error);
             }
-            if (Platform.OS === 'web') {
-                toast.error(t('sessionManagement.toasts.loadFailed'));
-            } else {
-                Alert.alert(
-                    'Error',
-                    t('sessionManagement.toasts.loadFailed'),
-                    [{ text: 'OK' }]
-                );
-            }
+            toast.error(t('sessionManagement.toasts.loadFailed'));
         } finally {
             setLoading(false);
             setRefreshing(false);
         }
     }, [refreshSessions]);
 
-    // Memoized logout session handler - prevents unnecessary re-renders
-    const handleLogoutSession = useCallback(async (sessionId: string) => {
-        confirmAction(t('sessionManagement.confirms.logoutSession'), async () => {
-            try {
-                setActionLoading(sessionId);
-                await logout(sessionId);
-                await refreshSessions();
-                toast.success(t('sessionManagement.toasts.logoutSuccess'));
-            } catch (error) {
-                if (__DEV__) {
-                    console.error('Logout session failed:', error);
-                }
-                toast.error(t('sessionManagement.toasts.logoutFailed'));
-            } finally {
-                setActionLoading(null);
+    // Confirm logout session - opens prompt
+    const confirmLogoutSession = useCallback((sessionId: string) => {
+        setPendingLogoutSessionId(sessionId);
+        logoutSessionPrompt.open();
+    }, [logoutSessionPrompt]);
+
+    // Handle logout session - executes after prompt confirmation
+    const handleLogoutSession = useCallback(async () => {
+        if (!pendingLogoutSessionId) return;
+        try {
+            setActionLoading(pendingLogoutSessionId);
+            await logout(pendingLogoutSessionId);
+            await refreshSessions();
+            toast.success(t('sessionManagement.toasts.logoutSuccess'));
+        } catch (error) {
+            if (__DEV__) {
+                console.error('Logout session failed:', error);
             }
-        });
-    }, [logout, refreshSessions]);
+            toast.error(t('sessionManagement.toasts.logoutFailed'));
+        } finally {
+            setActionLoading(null);
+            setPendingLogoutSessionId(null);
+        }
+    }, [pendingLogoutSessionId, logout, refreshSessions, t]);
 
     // Memoized bulk action items - prevents unnecessary re-renders when dependencies haven't changed
     const otherSessionsCount = useMemo(() =>
@@ -115,55 +121,55 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
         [userSessions, activeSessionId]
     );
 
-    // Memoized logout other sessions handler - prevents unnecessary re-renders
-    const handleLogoutOtherSessions = useCallback(async () => {
+    // Confirm logout other sessions - opens prompt
+    const confirmLogoutOtherSessions = useCallback(() => {
         if (otherSessionsCount === 0) {
             toast.info(t('sessionManagement.toasts.noOtherSessions'));
             return;
         }
-        confirmAction(
-            t('sessionManagement.confirms.logoutOthers', { count: otherSessionsCount }),
-            async () => {
-                try {
-                    setActionLoading('others');
-                    for (const session of userSessions) {
-                        if (session.sessionId !== activeSessionId) {
-                            await logout(session.sessionId);
-                        }
-                    }
-                    await refreshSessions();
-                    toast.success(t('sessionManagement.toasts.logoutOthersSuccess'));
-                } catch (error) {
-                    if (__DEV__) {
-                        console.error('Logout other sessions failed:', error);
-                    }
-                    toast.error(t('sessionManagement.toasts.logoutOthersFailed'));
-                } finally {
-                    setActionLoading(null);
+        logoutOtherSessionsPrompt.open();
+    }, [otherSessionsCount, logoutOtherSessionsPrompt, t]);
+
+    // Handle logout other sessions - executes after prompt confirmation
+    const handleLogoutOtherSessions = useCallback(async () => {
+        try {
+            setActionLoading('others');
+            for (const session of userSessions) {
+                if (session.sessionId !== activeSessionId) {
+                    await logout(session.sessionId);
                 }
             }
-        );
-    }, [otherSessionsCount, userSessions, activeSessionId, logout, refreshSessions]);
+            await refreshSessions();
+            toast.success(t('sessionManagement.toasts.logoutOthersSuccess'));
+        } catch (error) {
+            if (__DEV__) {
+                console.error('Logout other sessions failed:', error);
+            }
+            toast.error(t('sessionManagement.toasts.logoutOthersFailed'));
+        } finally {
+            setActionLoading(null);
+        }
+    }, [userSessions, activeSessionId, logout, refreshSessions, t]);
+
+    // Confirm logout all sessions - opens prompt
+    const confirmLogoutAllSessions = useCallback(() => {
+        logoutAllSessionsPrompt.open();
+    }, [logoutAllSessionsPrompt]);
 
-    // Memoized logout all sessions handler - prevents unnecessary re-renders
+    // Handle logout all sessions - executes after prompt confirmation
     const handleLogoutAllSessions = useCallback(async () => {
-        confirmAction(
-            t('sessionManagement.confirms.logoutAll'),
-            async () => {
-                try {
-                    setActionLoading('all');
-                    await logoutAll();
-                } catch (error) {
-                    if (__DEV__) {
-                        console.error('Logout all sessions failed:', error);
-                    }
-                    toast.error(t('sessionManagement.toasts.logoutAllFailed'));
-                } finally {
-                    setActionLoading(null);
-                }
+        try {
+            setActionLoading('all');
+            await logoutAll();
+        } catch (error) {
+            if (__DEV__) {
+                console.error('Logout all sessions failed:', error);
             }
-        );
-    }, [logoutAll]);
+            toast.error(t('sessionManagement.toasts.logoutAllFailed'));
+        } finally {
+            setActionLoading(null);
+        }
+    }, [logoutAll, t]);
 
     // Memoized relative time formatter - prevents function recreation on every render
     const formatRelative = useCallback((dateString?: string) => {
@@ -240,7 +246,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                             )}
                         </TouchableOpacity>
                         <TouchableOpacity
-                            onPress={() => handleLogoutSession(session.sessionId)}
+                            onPress={() => confirmLogoutSession(session.sessionId)}
                             style={[styles.sessionPillButton, { backgroundColor: isDarkTheme ? LOGOUT_BUTTON_BG.dark : LOGOUT_BUTTON_BG.light, borderColor: dangerColor }]}
                             disabled={actionLoading === session.sessionId || switchLoading === session.sessionId}
                         >
@@ -260,7 +266,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                 dense: true,
             };
         });
-    }, [userSessions, activeSessionId, formatRelative, successColor, primaryColor, isDarkTheme, switchLoading, actionLoading, handleSwitchSession, handleLogoutSession, dangerColor]);
+    }, [userSessions, activeSessionId, formatRelative, successColor, primaryColor, isDarkTheme, switchLoading, actionLoading, handleSwitchSession, confirmLogoutSession, dangerColor]);
 
     const bulkItems = useMemo(() => [
         {
@@ -269,7 +275,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
             iconColor: primaryColor,
             title: t('sessionManagement.logoutOthers.title'),
             subtitle: otherSessionsCount === 0 ? t('sessionManagement.logoutOthers.noOtherSessions') : t('sessionManagement.logoutOthers.subtitle'),
-            onPress: handleLogoutOtherSessions,
+            onPress: confirmLogoutOtherSessions,
             showChevron: false,
             customContent: actionLoading === 'others' ? <ActivityIndicator size="small" color={primaryColor} /> : undefined,
             disabled: actionLoading === 'others' || otherSessionsCount === 0,
@@ -281,13 +287,13 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
             iconColor: dangerColor,
             title: t('sessionManagement.logoutAll.title'),
             subtitle: t('sessionManagement.logoutAll.subtitle'),
-            onPress: handleLogoutAllSessions,
+            onPress: confirmLogoutAllSessions,
             showChevron: false,
             customContent: actionLoading === 'all' ? <ActivityIndicator size="small" color={dangerColor} /> : undefined,
             disabled: actionLoading === 'all',
             dense: true,
         },
-    ], [otherSessionsCount, primaryColor, dangerColor, handleLogoutOtherSessions, handleLogoutAllSessions, actionLoading]);
+    ], [otherSessionsCount, primaryColor, dangerColor, confirmLogoutOtherSessions, confirmLogoutAllSessions, actionLoading]);
 
     if (loading) {
         return (
@@ -324,11 +330,35 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                             <Text style={[styles.metaText, { color: '#777', marginBottom: 6 }]}>{t('sessionManagement.lastRefreshed', { time: formatRelative(lastRefreshed.toISOString()) })}</Text>
                         )}
                         <View style={styles.fullBleed}>
-                            <GroupedSection items={sessionItems} />
+                            <SettingsListGroup>
+                                {sessionItems.map(item => (
+                                    <SettingsListItem
+                                        key={item.id}
+                                        icon={<SettingsIcon name={item.icon} color={item.iconColor} />}
+                                        title={item.title}
+                                        description={item.subtitle}
+                                        showChevron={false}
+                                        rightElement={item.customContentBelow}
+                                    />
+                                ))}
+                            </SettingsListGroup>
                         </View>
                         <View style={styles.sectionSpacer} />
                         <View style={styles.fullBleed}>
-                            <GroupedSection items={bulkItems} />
+                            <SettingsListGroup>
+                                {bulkItems.map(item => (
+                                    <SettingsListItem
+                                        key={item.id}
+                                        icon={<SettingsIcon name={item.icon} color={item.iconColor} />}
+                                        title={item.title}
+                                        description={item.subtitle}
+                                        onPress={item.onPress}
+                                        showChevron={false}
+                                        disabled={item.disabled}
+                                        rightElement={item.customContent}
+                                    />
+                                ))}
+                            </SettingsListGroup>
                         </View>
                     </>
                 ) : (
@@ -342,6 +372,30 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                     <Text style={styles.closeButtonText} className="text-primary">{t('sessionManagement.close')}</Text>
                 </TouchableOpacity>
             </View>
+            <Prompt.Basic
+                control={logoutSessionPrompt}
+                title={t('sessionManagement.confirms.logoutSessionTitle') || 'Log Out Session'}
+                description={t('sessionManagement.confirms.logoutSession')}
+                onConfirm={handleLogoutSession}
+                confirmButtonCta={t('sessionManagement.logout') || 'Log Out'}
+                confirmButtonColor='negative'
+            />
+            <Prompt.Basic
+                control={logoutOtherSessionsPrompt}
+                title={t('sessionManagement.confirms.logoutOthersTitle') || 'Log Out Other Sessions'}
+                description={t('sessionManagement.confirms.logoutOthers', { count: otherSessionsCount })}
+                onConfirm={handleLogoutOtherSessions}
+                confirmButtonCta={t('sessionManagement.logoutOthers.title') || 'Log Out Others'}
+                confirmButtonColor='negative'
+            />
+            <Prompt.Basic
+                control={logoutAllSessionsPrompt}
+                title={t('sessionManagement.confirms.logoutAllTitle') || 'Log Out All Sessions'}
+                description={t('sessionManagement.confirms.logoutAll')}
+                onConfirm={handleLogoutAllSessions}
+                confirmButtonCta={t('sessionManagement.logoutAll.title') || 'Log Out All'}
+                confirmButtonColor='negative'
+            />
         </View>
     );
 };

package/src/ui/screens/UserLinksScreen.tsx

@@ -1,8 +1,9 @@
 import type React from 'react';
-import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, Linking } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
+import { View, StyleSheet, ScrollView, Linking } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { Header, GroupedSection } from '../components';
+import { Header } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { SettingsIcon } from '../components/SettingsIcon';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useI18n } from '../hooks/useI18n';
 
@@ -37,18 +38,6 @@ const UserLinksScreen: React.FC<UserLinksScreenProps> = ({
         }
     };
 
-    const groupedItems = links.map((link) => ({
-        id: link.id,
-        icon: link.image ? undefined : 'link',
-        iconColor: '#32D74B',
-        image: link.image || undefined,
-        imageSize: 40,
-        title: link.title || link.url,
-        subtitle: link.description || link.url,
-        onPress: () => handleLinkPress(link.url),
-        multiRow: true,
-    }));
-
     return (
         <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
             <Header
@@ -59,14 +48,17 @@ const UserLinksScreen: React.FC<UserLinksScreenProps> = ({
             />
 
             <ScrollView style={styles.content}>
-                <View style={styles.section}>
-                    <Text style={styles.sectionTitle} className="text-foreground">{t('userLinks.title')}</Text>
-
-                    <GroupedSection
-                        items={groupedItems}
-
-                    />
-                </View>
+                <SettingsListGroup title={t('userLinks.title')}>
+                    {links.map((link) => (
+                        <SettingsListItem
+                            key={link.id}
+                            icon={<SettingsIcon name="link" color="#32D74B" />}
+                            title={link.title || link.url}
+                            description={link.description || link.url}
+                            onPress={() => handleLinkPress(link.url)}
+                        />
+                    ))}
+                </SettingsListGroup>
             </ScrollView>
         </View>
     );
@@ -81,15 +73,6 @@ const styles = StyleSheet.create({
         flex: 1,
         padding: 16,
     },
-    section: {
-        marginBottom: 24,
-    },
-    sectionTitle: {
-        fontSize: 16,
-        fontWeight: '600',
-        color: '#333',
-        marginBottom: 12,
-    },
 });
 
 export default UserLinksScreen; 

package/src/ui/screens/WelcomeNewUserScreen.tsx

@@ -10,7 +10,7 @@ import { useAuthStore } from '../stores/authStore';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { fontFamilies } from '../styles/fonts';
 import { normalizeTheme } from '../utils/themeUtils';
-import GroupedPillButtons from '../components/internal/GroupedPillButtons';
+import { Button } from '@oxyhq/bloom/button';
 import { useI18n } from '../hooks/useI18n';
 import { useOxy } from '../context/OxyContext';
 import { useUpdateProfile } from '../hooks/mutations/useAccountMutations';
@@ -177,30 +177,56 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
     }, [navigate, updateProfileMutation, oxyServices, currentStep, avatarStepIndex, animateToStepCallback, t]);
 
     const step = steps[currentStep];
-    const pillButtons = useMemo(() => {
+    const renderActionButtons = useCallback(() => {
         if (currentStep === totalSteps - 1) {
-            return [
-                { text: t('welcomeNew.actions.back') || 'Back', onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
-                { text: t('welcomeNew.actions.enter') || 'Enter', onPress: finish, icon: 'log-in-outline', variant: 'primary' },
-            ];
+            return (
+                <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+                    <Button variant="secondary" onPress={prevStep} size="small" icon={<Ionicons name="arrow-back" size={16} />}>
+                        {t('welcomeNew.actions.back') || 'Back'}
+                    </Button>
+                    <Button variant="primary" onPress={finish} size="small" icon={<Ionicons name="log-in-outline" size={16} />} iconPosition="right">
+                        {t('welcomeNew.actions.enter') || 'Enter'}
+                    </Button>
+                </View>
+            );
         }
         if (currentStep === 0) {
-            const arr: any[] = [];
-            if (avatarStepIndex > 0) arr.push({ text: t('welcomeNew.actions.skip') || 'Skip', onPress: skipToAvatar, icon: 'play-skip-forward', variant: 'transparent' });
-            arr.push({ text: t('welcomeNew.actions.next') || 'Next', onPress: nextStep, icon: 'arrow-forward', variant: 'primary' });
-            return arr;
+            return (
+                <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+                    {avatarStepIndex > 0 && (
+                        <Button variant="secondary" onPress={skipToAvatar} size="small" icon={<Ionicons name="play-skip-forward" size={16} />}>
+                            {t('welcomeNew.actions.skip') || 'Skip'}
+                        </Button>
+                    )}
+                    <Button variant="primary" onPress={nextStep} size="small" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
+                        {t('welcomeNew.actions.next') || 'Next'}
+                    </Button>
+                </View>
+            );
         }
         if (step.showAvatar) {
-            return [
-                { text: t('welcomeNew.actions.back') || 'Back', onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
-                { text: avatarUri ? (t('welcomeNew.actions.continue') || 'Continue') : (t('welcomeNew.actions.skip') || 'Skip'), onPress: nextStep, icon: 'arrow-forward', variant: 'primary' },
-            ];
+            return (
+                <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+                    <Button variant="secondary" onPress={prevStep} size="small" icon={<Ionicons name="arrow-back" size={16} />}>
+                        {t('welcomeNew.actions.back') || 'Back'}
+                    </Button>
+                    <Button variant="primary" onPress={nextStep} size="small" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
+                        {avatarUri ? (t('welcomeNew.actions.continue') || 'Continue') : (t('welcomeNew.actions.skip') || 'Skip')}
+                    </Button>
+                </View>
+            );
         }
-        return [
-            { text: t('welcomeNew.actions.back') || 'Back', onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
-            { text: t('welcomeNew.actions.next') || 'Next', onPress: nextStep, icon: 'arrow-forward', variant: 'primary' },
-        ];
-    }, [currentStep, totalSteps, prevStep, nextStep, finish, skipToAvatar, avatarStepIndex, step.showAvatar, avatarUri]);
+        return (
+            <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+                <Button variant="secondary" onPress={prevStep} size="small" icon={<Ionicons name="arrow-back" size={16} />}>
+                    {t('welcomeNew.actions.back') || 'Back'}
+                </Button>
+                <Button variant="primary" onPress={nextStep} size="small" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
+                    {t('welcomeNew.actions.next') || 'Next'}
+                </Button>
+            </View>
+        );
+    }, [currentStep, totalSteps, prevStep, nextStep, finish, skipToAvatar, avatarStepIndex, step.showAvatar, avatarUri, t]);
 
     return (
         <View style={styles.container}>
@@ -247,7 +273,7 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
                         </View>
                     )}
                     <View style={styles.sectionSpacing}>
-                        <GroupedPillButtons buttons={pillButtons} colors={colors} />
+                        {renderActionButtons()}
                     </View>
                 </View>
             </Animated.View>

package/src/ui/screens/karma/KarmaFAQScreen.tsx

@@ -2,7 +2,8 @@ import React, { useState, useMemo, useCallback } from 'react';
 import { View, Text, StyleSheet, ScrollView, Platform, TextInput, LayoutAnimation } from 'react-native';
 import type { BaseScreenProps } from '../../types/navigation';
 import { Ionicons } from '@expo/vector-icons';
-import { Header, GroupedItem } from '../../components';
+import { Header } from '../../components';
+import { SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { useI18n } from '../../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { normalizeColorScheme } from '../../utils/themeUtils';
@@ -86,18 +87,15 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                     <View style={styles.groupedSectionContainer}>
                         {filteredFaqs.map((faq, idx) => {
                             const isExpanded = expanded === faq.id;
-                            const isFirst = idx === 0;
                             const isLast = idx === filteredFaqs.length - 1;
 
                             return (
                                 <View key={faq.id} style={[styles.faqItemWrapper, { marginBottom: idx < filteredFaqs.length - 1 ? 4 : 0 }]}>
-                                    <GroupedItem
+                                    <SettingsListItem
                                         title={faq.q}
                                         onPress={() => handleToggle(faq.id)}
-                                        isFirst={isFirst}
-                                        isLast={isLast && !isExpanded}
                                         showChevron={false}
-                                        customContent={
+                                        rightElement={
                                             <Ionicons
                                                 name={isExpanded ? 'chevron-up' : 'chevron-down'}
                                                 size={20}

package/src/ui/utils/fileManagement.ts

@@ -1,4 +1,3 @@
-import { Alert } from 'react-native';
 import type { FileMetadata } from '@oxyhq/core';
 import { File as ExpoFile } from 'expo-file-system';
 import { toast } from '../../lib/sonner';
@@ -39,35 +38,6 @@ export function getFileIcon(contentType: string): string {
     return 'document-outline';
 }
 
-/**
- * Unified confirmation dialog - uses Alert.alert for all platforms
- */
-export function confirmAction(
-    message: string,
-    title?: string,
-    confirmText = 'OK',
-    cancelText = 'Cancel'
-): Promise<boolean> {
-    return new Promise((resolve) => {
-        Alert.alert(
-            title || 'Confirm',
-            message,
-            [
-                {
-                    text: cancelText,
-                    style: 'cancel',
-                    onPress: () => resolve(false),
-                },
-                {
-                    text: confirmText,
-                    onPress: () => resolve(true),
-                },
-            ],
-            { cancelable: true, onDismiss: () => resolve(false) }
-        );
-    });
-}
-
 /**
  * Convert DocumentPicker asset to File object
  * Handles both web (native File API) and mobile (URI-based) file sources