@oxyhq/services 6.9.45 → 6.10.1

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,
@@ -7,12 +7,15 @@ import {
     TouchableOpacity,
 } 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 { toast } from '@oxyhq/bloom';
+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';
 import type { BlockedUser, RestrictedUser } from '@oxyhq/core';
+import { getAccountDisplayName } from '@oxyhq/core';
 import { useOxy } from '../context/OxyContext';
 
 interface PrivacySettings {
@@ -65,7 +68,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
     goBack,
 }) => {
     const { oxyServices, user } = useOxy();
-    const { t } = useI18n();
+    const { t, locale } = useI18n();
     const [isLoading, setIsLoading] = useState(true);
     const [blockedUsers, setBlockedUsers] = useState<BlockedUser[]>([]);
     const [restrictedUsers, setRestrictedUsers] = useState<RestrictedUser[]>([]);
@@ -165,103 +168,39 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
         }
     }, [oxyServices, t]);
 
-    // Helper to extract user info from blocked/restricted objects
+    // Helper to extract user info from blocked/restricted objects.
+    // Display names go through the canonical helper so the fallback chain is
+    // identical across every UI surface (name → username → publicKey → "Unnamed").
     const extractUserInfo = useCallback((
         item: BlockedUser | RestrictedUser,
         idField: 'blockedId' | 'restrictedId'
     ) => {
         let userIdField: string | { _id: string; username?: string; avatar?: string };
-        let username: string;
+        let userShape: { username?: string };
         let avatar: string | undefined;
 
         if (idField === 'blockedId' && 'blockedId' in item) {
             userIdField = item.blockedId;
-            username = typeof item.blockedId === 'string'
-                ? (item.username || 'Unknown')
-                : (item.blockedId.username || 'Unknown');
+            userShape = typeof item.blockedId === 'string'
+                ? { username: item.username }
+                : { username: item.blockedId.username };
             avatar = typeof item.blockedId === 'string' ? item.avatar : item.blockedId.avatar;
         } else if (idField === 'restrictedId' && 'restrictedId' in item) {
             userIdField = item.restrictedId;
-            username = typeof item.restrictedId === 'string'
-                ? (item.username || 'Unknown')
-                : (item.restrictedId.username || 'Unknown');
+            userShape = typeof item.restrictedId === 'string'
+                ? { username: item.username }
+                : { username: item.restrictedId.username };
             avatar = typeof item.restrictedId === 'string' ? item.avatar : item.restrictedId.avatar;
         } else {
-            // Fallback (should not happen)
-            return { userId: '', username: 'Unknown', avatar: undefined };
+            return { userId: '', displayName: getAccountDisplayName(null, locale), avatar: undefined };
         }
 
         const userId = typeof userIdField === 'string' ? userIdField : userIdField._id;
-        return { userId, username, avatar };
-    }, []);
+        return { userId, displayName: getAccountDisplayName(userShape, locale), avatar };
+    }, [locale]);
 
     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 +226,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 +331,27 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                             textColor={bloomTheme.colors.textSecondary}
                         />
                     ) : (
-                        <GroupedSection items={blockedUserItems} />
+                        blockedUsers.map((blocked) => {
+                            const { userId, displayName, avatar } = extractUserInfo(blocked, 'blockedId');
+                            const avatarUri = avatar && oxyServices ? oxyServices.getFileDownloadUrl(avatar, 'thumb') : undefined;
+                            return (
+                                <SettingsListItem
+                                    key={userId}
+                                    icon={<Avatar uri={avatarUri} name={displayName} size={20} />}
+                                    title={displayName}
+                                    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 +360,25 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                             textColor={bloomTheme.colors.textSecondary}
                         />
                     ) : (
-                        <GroupedSection items={restrictedUserItems} />
+                        restrictedUsers.map((restricted) => {
+                            const { userId, displayName, avatar } = extractUserInfo(restricted, 'restrictedId');
+                            const avatarUri = avatar && oxyServices ? oxyServices.getFileDownloadUrl(avatar, 'thumb') : undefined;
+                            return (
+                                <SettingsListItem
+                                    key={userId}
+                                    icon={<Avatar uri={avatarUri} name={displayName} size={20} />}
+                                    title={displayName}
+                                    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/ProfileScreen.tsx

@@ -185,7 +185,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
     if (error) {
         return (
             <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
-                <View style={styles.errorHeader}>
+                <View style={[styles.errorHeader, { borderBottomColor: bloomTheme.colors.border }]}>
                     {goBack && (
                         <TouchableOpacity onPress={goBack} style={styles.backButton}>
                             <Ionicons name="arrow-back" size={24} color={bloomTheme.colors.text} />
@@ -410,7 +410,6 @@ const createStyles = () => StyleSheet.create({
         paddingHorizontal: 16,
         paddingVertical: 12,
         borderBottomWidth: 1,
-        borderBottomColor: '#E0E0E0',
     },
     backButton: {
         padding: 8,

package/src/ui/screens/SavesCollectionsScreen.tsx

@@ -7,8 +7,10 @@ import {
     ScrollView,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { toast } from '../../lib/sonner';
-import { Header, Section, GroupedSection, LoadingState, EmptyState } from '../components';
+import { toast } from '@oxyhq/bloom';
+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';
@@ -51,7 +53,7 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
     const normalizedColorScheme = normalizeColorScheme(colorScheme);
     const themeColors = Colors[normalizedColorScheme];
     const tabActiveColor = themeColors.iconSecurity;
-    const tabInactiveColor = bloomTheme.isDark ? '#888888' : '#666666';
+    const tabInactiveColor = bloomTheme.colors.textTertiary;
 
     // Load saved items and collections from API
     useEffect(() => {
@@ -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>
     );