@oxyhq/services 6.9.45 → 6.9.46

package/src/ui/screens/PrivacySettingsScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import {
     View,
     Text,
@@ -8,7 +8,9 @@ import {
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
-import { Header, Section, Avatar, SettingRow, LoadingState, EmptyState, GroupedSection } from '../components';
+import { Header, Avatar, LoadingState, EmptyState } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { Switch } from '@oxyhq/bloom/switch';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useSettingToggles } from '../hooks/useSettingToggle';
@@ -197,71 +199,6 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
 
     const bloomTheme = useTheme();
 
-    // Convert blocked users to GroupedSection items
-    const blockedUserItems = useMemo(() => {
-        return blockedUsers.map((blocked) => {
-            const { userId, username, avatar } = extractUserInfo(blocked, 'blockedId');
-            const avatarUri = avatar && oxyServices 
-                ? oxyServices.getFileDownloadUrl(avatar, 'thumb') 
-                : undefined;
-            
-            return {
-                id: userId,
-                title: username,
-                customIcon: (
-                    <Avatar
-                        uri={avatarUri}
-                        name={username}
-                        size={40}
-                    />
-                ),
-                customContent: (
-                    <TouchableOpacity
-                        onPress={() => handleUnblock(userId)}
-                        style={[styles.actionButton, { backgroundColor: bloomTheme.colors.backgroundSecondary }]}
-                    >
-                        <Text style={[styles.actionButtonText, { color: bloomTheme.colors.error }]}>
-                            {t('privacySettings.unblock') || 'Unblock'}
-                        </Text>
-                    </TouchableOpacity>
-                ),
-            };
-        });
-    }, [blockedUsers, oxyServices, bloomTheme, handleUnblock, t]);
-
-    // Convert restricted users to GroupedSection items
-    const restrictedUserItems = useMemo(() => {
-        return restrictedUsers.map((restricted) => {
-            const { userId, username, avatar } = extractUserInfo(restricted, 'restrictedId');
-            const avatarUri = avatar && oxyServices 
-                ? oxyServices.getFileDownloadUrl(avatar, 'thumb') 
-                : undefined;
-            
-            return {
-                id: userId,
-                title: username,
-                subtitle: t('privacySettings.restrictedDescription') || 'Limited interactions',
-                customIcon: (
-                    <Avatar
-                        uri={avatarUri}
-                        name={username}
-                        size={40}
-                    />
-                ),
-                customContent: (
-                    <TouchableOpacity
-                        onPress={() => handleUnrestrict(userId)}
-                        style={[styles.actionButton, { backgroundColor: bloomTheme.colors.backgroundSecondary }]}
-                    >
-                        <Text style={[styles.actionButtonText, { color: bloomTheme.colors.primary }]}>
-                            {t('privacySettings.unrestrict') || 'Unrestrict'}
-                        </Text>
-                    </TouchableOpacity>
-                ),
-            };
-        });
-    }, [restrictedUsers, oxyServices, bloomTheme, handleUnrestrict, t]);
-
     if (isLoading) {
         return (
             <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
@@ -287,183 +224,103 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
 
             <ScrollView style={styles.content}>
                 {/* Account Privacy */}
-                <Section title={t('privacySettings.sections.account') || 'ACCOUNT PRIVACY'}  isFirst={true}>
-                    <SettingRow
+                <SettingsListGroup title={t('privacySettings.sections.account') || 'ACCOUNT PRIVACY'}>
+                    <SettingsListItem
                         title={t('privacySettings.isPrivateAccount') || 'Private Account'}
                         description={t('privacySettings.isPrivateAccountDesc') || 'Only approved followers can see your posts'}
-                        value={settings.isPrivateAccount}
-                        onValueChange={() => toggle('isPrivateAccount')}
-                        disabled={isSaving}
-                        textColor={bloomTheme.colors.text}
-                        mutedTextColor={bloomTheme.colors.textSecondary}
-                        borderColor={bloomTheme.colors.border}
+                        rightElement={<Switch value={settings.isPrivateAccount} onValueChange={() => toggle('isPrivateAccount')} disabled={isSaving} />}
                     />
-                    <SettingRow
+                    <SettingsListItem
                         title={t('privacySettings.profileVisibility') || 'Profile Visibility'}
                         description={t('privacySettings.profileVisibilityDesc') || 'Control who can view your profile'}
-                        value={settings.profileVisibility}
-                        onValueChange={() => toggle('profileVisibility')}
-                        disabled={isSaving}
-                        textColor={bloomTheme.colors.text}
-                        mutedTextColor={bloomTheme.colors.textSecondary}
-                        borderColor={bloomTheme.colors.border}
+                        rightElement={<Switch value={settings.profileVisibility} onValueChange={() => toggle('profileVisibility')} disabled={isSaving} />}
                     />
-                    <SettingRow
+                    <SettingsListItem
                         title={t('privacySettings.hideOnlineStatus') || 'Hide Online Status'}
                         description={t('privacySettings.hideOnlineStatusDesc') || 'Don\'t show when you\'re online'}
-                        value={settings.hideOnlineStatus}
-                        onValueChange={() => toggle('hideOnlineStatus')}
-                        disabled={isSaving}
-                        textColor={bloomTheme.colors.text}
-                        mutedTextColor={bloomTheme.colors.textSecondary}
-                        borderColor={bloomTheme.colors.border}
+                        rightElement={<Switch value={settings.hideOnlineStatus} onValueChange={() => toggle('hideOnlineStatus')} disabled={isSaving} />}
                     />
-                    <SettingRow
+                    <SettingsListItem
                         title={t('privacySettings.hideLastSeen') || 'Hide Last Seen'}
                         description={t('privacySettings.hideLastSeenDesc') || 'Don\'t show when you were last active'}
-                        value={settings.hideLastSeen}
-                        onValueChange={() => toggle('hideLastSeen')}
-                        disabled={isSaving}
-                        textColor={bloomTheme.colors.text}
-                        mutedTextColor={bloomTheme.colors.textSecondary}
-                        borderColor={bloomTheme.colors.border}
+                        rightElement={<Switch value={settings.hideLastSeen} onValueChange={() => toggle('hideLastSeen')} disabled={isSaving} />}
                     />
-                </Section>
+                </SettingsListGroup>
 
                 {/* Interactions */}
-                <Section title={t('privacySettings.sections.interactions') || 'INTERACTIONS'} >
-                    <SettingRow
+                <SettingsListGroup title={t('privacySettings.sections.interactions') || 'INTERACTIONS'}>
+                    <SettingsListItem
                         title={t('privacySettings.allowTagging') || 'Allow Tagging'}
                         description={t('privacySettings.allowTaggingDesc') || 'Let others tag you in posts'}
-                        value={settings.allowTagging}
-                        onValueChange={() => toggle('allowTagging')}
-                        disabled={isSaving}
-                        textColor={bloomTheme.colors.text}
-                        mutedTextColor={bloomTheme.colors.textSecondary}
-                        borderColor={bloomTheme.colors.border}
+                        rightElement={<Switch value={settings.allowTagging} onValueChange={() => toggle('allowTagging')} disabled={isSaving} />}
                     />
-                    <SettingRow
+                    <SettingsListItem
                         title={t('privacySettings.allowMentions') || 'Allow Mentions'}
                         description={t('privacySettings.allowMentionsDesc') || 'Let others mention you'}
-                        value={settings.allowMentions}
-                        onValueChange={() => toggle('allowMentions')}
-                        disabled={isSaving}
-                        textColor={bloomTheme.colors.text}
-                        mutedTextColor={bloomTheme.colors.textSecondary}
-                        borderColor={bloomTheme.colors.border}
+                        rightElement={<Switch value={settings.allowMentions} onValueChange={() => toggle('allowMentions')} disabled={isSaving} />}
                     />
-                    <SettingRow
+                    <SettingsListItem
                         title={t('privacySettings.allowDirectMessages') || 'Allow Direct Messages'}
                         description={t('privacySettings.allowDirectMessagesDesc') || 'Let others send you direct messages'}
-                        value={settings.allowDirectMessages}
-                        onValueChange={() => toggle('allowDirectMessages')}
-                        disabled={isSaving}
-                        textColor={bloomTheme.colors.text}
-                        mutedTextColor={bloomTheme.colors.textSecondary}
-                        borderColor={bloomTheme.colors.border}
+                        rightElement={<Switch value={settings.allowDirectMessages} onValueChange={() => toggle('allowDirectMessages')} disabled={isSaving} />}
                     />
-                    <SettingRow
+                    <SettingsListItem
                         title={t('privacySettings.hideReadReceipts') || 'Hide Read Receipts'}
                         description={t('privacySettings.hideReadReceiptsDesc') || 'Don\'t show read receipts in messages'}
-                        value={settings.hideReadReceipts}
-                        onValueChange={() => toggle('hideReadReceipts')}
-                        disabled={isSaving}
-                        textColor={bloomTheme.colors.text}
-                        mutedTextColor={bloomTheme.colors.textSecondary}
-                        borderColor={bloomTheme.colors.border}
+                        rightElement={<Switch value={settings.hideReadReceipts} onValueChange={() => toggle('hideReadReceipts')} disabled={isSaving} />}
                     />
-                </Section>
+                </SettingsListGroup>
 
                 {/* Activity & Data */}
-                <Section title={t('privacySettings.sections.activity') || 'ACTIVITY & DATA'} >
-                    <SettingRow
+                <SettingsListGroup title={t('privacySettings.sections.activity') || 'ACTIVITY & DATA'}>
+                    <SettingsListItem
                         title={t('privacySettings.showActivity') || 'Show Activity Status'}
                         description={t('privacySettings.showActivityDesc') || 'Display your activity on your profile'}
-                        value={settings.showActivity}
-                        onValueChange={() => toggle('showActivity')}
-                        disabled={isSaving}
-                        textColor={bloomTheme.colors.text}
-                        mutedTextColor={bloomTheme.colors.textSecondary}
-                        borderColor={bloomTheme.colors.border}
+                        rightElement={<Switch value={settings.showActivity} onValueChange={() => toggle('showActivity')} disabled={isSaving} />}
                     />
-                    <SettingRow
+                    <SettingsListItem
                         title={t('privacySettings.dataSharing') || 'Data Sharing'}
                         description={t('privacySettings.dataSharingDesc') || 'Allow sharing data for personalization'}
-                        value={settings.dataSharing}
-                        onValueChange={() => toggle('dataSharing')}
-                        disabled={isSaving}
-                        textColor={bloomTheme.colors.text}
-                        mutedTextColor={bloomTheme.colors.textSecondary}
-                        borderColor={bloomTheme.colors.border}
+                        rightElement={<Switch value={settings.dataSharing} onValueChange={() => toggle('dataSharing')} disabled={isSaving} />}
                     />
-                    <SettingRow
+                    <SettingsListItem
                         title={t('privacySettings.locationSharing') || 'Location Sharing'}
                         description={t('privacySettings.locationSharingDesc') || 'Share your location'}
-                        value={settings.locationSharing}
-                        onValueChange={() => toggle('locationSharing')}
-                        disabled={isSaving}
-                        textColor={bloomTheme.colors.text}
-                        mutedTextColor={bloomTheme.colors.textSecondary}
-                        borderColor={bloomTheme.colors.border}
+                        rightElement={<Switch value={settings.locationSharing} onValueChange={() => toggle('locationSharing')} disabled={isSaving} />}
                     />
-                    <SettingRow
+                    <SettingsListItem
                         title={t('privacySettings.analyticsSharing') || 'Analytics Sharing'}
                         description={t('privacySettings.analyticsSharingDesc') || 'Allow analytics data collection'}
-                        value={settings.analyticsSharing}
-                        onValueChange={() => toggle('analyticsSharing')}
-                        disabled={isSaving}
-                        textColor={bloomTheme.colors.text}
-                        mutedTextColor={bloomTheme.colors.textSecondary}
-                        borderColor={bloomTheme.colors.border}
+                        rightElement={<Switch value={settings.analyticsSharing} onValueChange={() => toggle('analyticsSharing')} disabled={isSaving} />}
                     />
-                </Section>
+                </SettingsListGroup>
 
                 {/* Content & Safety */}
-                <Section title={t('privacySettings.sections.content') || 'CONTENT & SAFETY'} >
-                    <SettingRow
+                <SettingsListGroup title={t('privacySettings.sections.content') || 'CONTENT & SAFETY'}>
+                    <SettingsListItem
                         title={t('privacySettings.sensitiveContent') || 'Show Sensitive Content'}
                         description={t('privacySettings.sensitiveContentDesc') || 'Allow sensitive or explicit content'}
-                        value={settings.sensitiveContent}
-                        onValueChange={() => toggle('sensitiveContent')}
-                        disabled={isSaving}
-                        textColor={bloomTheme.colors.text}
-                        mutedTextColor={bloomTheme.colors.textSecondary}
-                        borderColor={bloomTheme.colors.border}
+                        rightElement={<Switch value={settings.sensitiveContent} onValueChange={() => toggle('sensitiveContent')} disabled={isSaving} />}
                     />
-                    <SettingRow
+                    <SettingsListItem
                         title={t('privacySettings.autoFilter') || 'Auto Filter'}
                         description={t('privacySettings.autoFilterDesc') || 'Automatically filter inappropriate content'}
-                        value={settings.autoFilter}
-                        onValueChange={() => toggle('autoFilter')}
-                        disabled={isSaving}
-                        textColor={bloomTheme.colors.text}
-                        mutedTextColor={bloomTheme.colors.textSecondary}
-                        borderColor={bloomTheme.colors.border}
+                        rightElement={<Switch value={settings.autoFilter} onValueChange={() => toggle('autoFilter')} disabled={isSaving} />}
                     />
-                    <SettingRow
+                    <SettingsListItem
                         title={t('privacySettings.muteKeywords') || 'Mute Keywords'}
                         description={t('privacySettings.muteKeywordsDesc') || 'Hide posts containing muted keywords'}
-                        value={settings.muteKeywords}
-                        onValueChange={() => toggle('muteKeywords')}
-                        disabled={isSaving}
-                        textColor={bloomTheme.colors.text}
-                        mutedTextColor={bloomTheme.colors.textSecondary}
-                        borderColor={bloomTheme.colors.border}
+                        rightElement={<Switch value={settings.muteKeywords} onValueChange={() => toggle('muteKeywords')} disabled={isSaving} />}
                     />
-                    <SettingRow
+                    <SettingsListItem
                         title={t('privacySettings.blockScreenshots') || 'Block Screenshots'}
                         description={t('privacySettings.blockScreenshotsDesc') || 'Prevent screenshots of your content'}
-                        value={settings.blockScreenshots}
-                        onValueChange={() => toggle('blockScreenshots')}
-                        disabled={isSaving}
-                        textColor={bloomTheme.colors.text}
-                        mutedTextColor={bloomTheme.colors.textSecondary}
-                        borderColor={bloomTheme.colors.border}
+                        rightElement={<Switch value={settings.blockScreenshots} onValueChange={() => toggle('blockScreenshots')} disabled={isSaving} />}
                     />
-                </Section>
+                </SettingsListGroup>
 
                 {/* Blocked Users */}
-                <Section title={t('privacySettings.sections.blockedUsers') || 'BLOCKED USERS'}>
+                <SettingsListGroup title={t('privacySettings.sections.blockedUsers') || 'BLOCKED USERS'}>
                     {isLoadingUsers ? (
                         <LoadingState color={bloomTheme.colors.text} size="small" />
                     ) : blockedUsers.length === 0 ? (
@@ -472,12 +329,27 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                             textColor={bloomTheme.colors.textSecondary}
                         />
                     ) : (
-                        <GroupedSection items={blockedUserItems} />
+                        blockedUsers.map((blocked) => {
+                            const { userId, username, avatar } = extractUserInfo(blocked, 'blockedId');
+                            const avatarUri = avatar && oxyServices ? oxyServices.getFileDownloadUrl(avatar, 'thumb') : undefined;
+                            return (
+                                <SettingsListItem
+                                    key={userId}
+                                    icon={<Avatar uri={avatarUri} name={username} size={20} />}
+                                    title={username}
+                                    rightElement={
+                                        <TouchableOpacity onPress={() => handleUnblock(userId)} style={[styles.actionButton, { backgroundColor: bloomTheme.colors.backgroundSecondary }]}>
+                                            <Text style={[styles.actionButtonText, { color: bloomTheme.colors.error }]}>{t('privacySettings.unblock') || 'Unblock'}</Text>
+                                        </TouchableOpacity>
+                                    }
+                                />
+                            );
+                        })
                     )}
-                </Section>
+                </SettingsListGroup>
 
                 {/* Restricted Users */}
-                <Section title={t('privacySettings.sections.restrictedUsers') || 'RESTRICTED USERS'}>
+                <SettingsListGroup title={t('privacySettings.sections.restrictedUsers') || 'RESTRICTED USERS'}>
                     {isLoadingUsers ? (
                         <LoadingState color={bloomTheme.colors.text} size="small" />
                     ) : restrictedUsers.length === 0 ? (
@@ -486,9 +358,25 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                             textColor={bloomTheme.colors.textSecondary}
                         />
                     ) : (
-                        <GroupedSection items={restrictedUserItems} />
+                        restrictedUsers.map((restricted) => {
+                            const { userId, username, avatar } = extractUserInfo(restricted, 'restrictedId');
+                            const avatarUri = avatar && oxyServices ? oxyServices.getFileDownloadUrl(avatar, 'thumb') : undefined;
+                            return (
+                                <SettingsListItem
+                                    key={userId}
+                                    icon={<Avatar uri={avatarUri} name={username} size={20} />}
+                                    title={username}
+                                    description={t('privacySettings.restrictedDescription') || 'Limited interactions'}
+                                    rightElement={
+                                        <TouchableOpacity onPress={() => handleUnrestrict(userId)} style={[styles.actionButton, { backgroundColor: bloomTheme.colors.backgroundSecondary }]}>
+                                            <Text style={[styles.actionButtonText, { color: bloomTheme.colors.primary }]}>{t('privacySettings.unrestrict') || 'Unrestrict'}</Text>
+                                        </TouchableOpacity>
+                                    }
+                                />
+                            );
+                        })
                     )}
-                </Section>
+                </SettingsListGroup>
             </ScrollView>
         </View>
     );

package/src/ui/screens/SavesCollectionsScreen.tsx

@@ -8,7 +8,9 @@ import {
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
-import { Header, Section, GroupedSection, LoadingState, EmptyState } from '../components';
+import { Header, LoadingState, EmptyState } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useColorScheme } from '../hooks/useColorScheme';
@@ -156,17 +158,16 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
                             textColor={bloomTheme.colors.text}
                         />
                     ) : (
-                        <Section title={t('saves.savedItems') || 'Saved Items'} isFirst={true}>
-                            <GroupedSection
-                                items={savedItems.map((item) => ({
-                                    id: item.id,
-                                    icon: item.type === 'post' ? 'document-text' : 'folder',
-                                    iconColor: item.type === 'post' ? themeColors.iconSecurity : themeColors.iconStorage,
-                                    title: item.title,
-                                    subtitle: formatDate(item.savedAt),
-                                }))}
-                            />
-                        </Section>
+                        <SettingsListGroup title={t('saves.savedItems') || 'Saved Items'}>
+                            {savedItems.map((item) => (
+                                <SettingsListItem
+                                    key={item.id}
+                                    icon={<SettingsIcon name={item.type === 'post' ? 'file-document-outline' : 'folder'} color={item.type === 'post' ? themeColors.iconSecurity : themeColors.iconStorage} />}
+                                    title={item.title}
+                                    description={formatDate(item.savedAt)}
+                                />
+                            ))}
+                        </SettingsListGroup>
                     )
                 ) : (
                     collections.length === 0 ? (
@@ -175,17 +176,16 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
                             textColor={bloomTheme.colors.text}
                         />
                     ) : (
-                        <Section title={t('saves.collections') || 'Collections'} isFirst={true}>
-                            <GroupedSection
-                                items={collections.map((collection) => ({
-                                    id: collection.id,
-                                    icon: 'folder',
-                                    iconColor: themeColors.iconStorage,
-                                    title: collection.name,
-                                    subtitle: `${collection.itemCount || 0} items`,
-                                }))}
-                            />
-                        </Section>
+                        <SettingsListGroup title={t('saves.collections') || 'Collections'}>
+                            {collections.map((collection) => (
+                                <SettingsListItem
+                                    key={collection.id}
+                                    icon={<SettingsIcon name="folder" color={themeColors.iconStorage} />}
+                                    title={collection.name}
+                                    description={`${collection.itemCount || 0} items`}
+                                />
+                            ))}
+                        </SettingsListGroup>
                     )
                 )}
             </ScrollView>

package/src/ui/screens/SearchSettingsScreen.tsx

@@ -5,7 +5,9 @@ import {
     ScrollView,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { Header, Section, LoadingState, SettingRow } from '../components';
+import { Header, LoadingState } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { Switch } from '@oxyhq/bloom/switch';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useSettingToggles } from '../hooks/useSettingToggle';
@@ -102,32 +104,22 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
 
             <ScrollView style={styles.content}>
                 {/* SafeSearch */}
-                <Section title={t('searchSettings.safeSearch.title') || 'SafeSearch'} isFirst={true}>
-                    <SettingRow
+                <SettingsListGroup title={t('searchSettings.safeSearch.title') || 'SafeSearch'}>
+                    <SettingsListItem
                         title={t('searchSettings.safeSearch.label') || 'Enable SafeSearch'}
                         description={t('searchSettings.safeSearch.description') || 'Filter out explicit content from search results'}
-                        value={settings.safeSearch}
-                        onValueChange={() => toggle('safeSearch')}
-                        disabled={isSaving}
-                        textColor={bloomTheme.colors.text}
-                        mutedTextColor={bloomTheme.colors.textSecondary}
-                        borderColor={bloomTheme.colors.border}
+                        rightElement={<Switch value={settings.safeSearch} onValueChange={() => toggle('safeSearch')} disabled={isSaving} />}
                     />
-                </Section>
+                </SettingsListGroup>
 
                 {/* Search Personalization */}
-                <Section title={t('searchSettings.personalization.title') || 'Search Personalization'}>
-                    <SettingRow
+                <SettingsListGroup title={t('searchSettings.personalization.title') || 'Search Personalization'}>
+                    <SettingsListItem
                         title={t('searchSettings.personalization.label') || 'Personalized Search'}
                         description={t('searchSettings.personalization.description') || 'Use your activity to improve search results'}
-                        value={settings.searchPersonalization}
-                        onValueChange={() => toggle('searchPersonalization')}
-                        disabled={isSaving}
-                        textColor={bloomTheme.colors.text}
-                        mutedTextColor={bloomTheme.colors.textSecondary}
-                        borderColor={bloomTheme.colors.border}
+                        rightElement={<Switch value={settings.searchPersonalization} onValueChange={() => toggle('searchPersonalization')} disabled={isSaving} />}
                     />
-                </Section>
+                </SettingsListGroup>
             </ScrollView>
         </View>
     );

package/src/ui/screens/SessionManagementScreen.tsx

@@ -16,7 +16,9 @@ import { toast } from '../../lib/sonner';
 import type { ClientSession } from '@oxyhq/core';
 import * as Prompt from '@oxyhq/bloom/prompt';
 import { usePromptControl } from '@oxyhq/bloom/prompt';
-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 { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
@@ -328,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>
                     </>
                 ) : (

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;