@oxyhq/services 11.0.0 → 11.1.0

package/src/ui/screens/PrivacySettingsScreen.tsx

@@ -1,21 +1,17 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import {
-    View,
-    Text,
-    StyleSheet,
-    ScrollView,
-    TouchableOpacity,
-} from 'react-native';
+import { View, ScrollView } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '@oxyhq/bloom';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { Switch } from '@oxyhq/bloom/switch';
+import { Button } from '@oxyhq/bloom/button';
+import { useTheme } from '@oxyhq/bloom/theme';
 import Header from '../components/Header';
 import Avatar from '../components/Avatar';
 import LoadingState from '../components/LoadingState';
 import EmptyState from '../components/EmptyState';
-import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
-import { Switch } from '@oxyhq/bloom/switch';
+import { SettingsIcon } from '../components/SettingsIcon';
 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';
@@ -67,11 +63,11 @@ const DEFAULT_PRIVACY_SETTINGS: PrivacySettings = {
 
 const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
     onClose,
-    theme,
     goBack,
 }) => {
     const { oxyServices, user } = useOxy();
     const { t, locale } = useI18n();
+    const bloomTheme = useTheme();
     const [isLoading, setIsLoading] = useState(true);
     const [blockedUsers, setBlockedUsers] = useState<BlockedUser[]>([]);
     const [restrictedUsers, setRestrictedUsers] = useState<RestrictedUser[]>([]);
@@ -202,11 +198,9 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
         return { userId, displayName: getAccountDisplayName(userShape, locale), avatar };
     }, [locale]);
 
-    const bloomTheme = useTheme();
-
     if (isLoading) {
         return (
-            <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+            <View className="flex-1 bg-bg">
                 <Header
                     title={t('privacySettings.title') || 'Privacy Settings'}
                     onBack={goBack || onClose}
@@ -219,7 +213,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
     }
 
     return (
-        <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+        <View className="flex-1 bg-bg">
             <Header
                 title={t('privacySettings.title') || 'Privacy Settings'}
                 onBack={goBack || onClose}
@@ -227,184 +221,208 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                 elevation="subtle"
             />
 
-            <ScrollView style={styles.content}>
-                {/* Account Privacy */}
-                <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'}
-                        rightElement={<Switch value={settings.isPrivateAccount} onValueChange={() => toggle('isPrivateAccount')} disabled={isSaving} />}
-                    />
-                    <SettingsListItem
-                        title={t('privacySettings.profileVisibility') || 'Profile Visibility'}
-                        description={t('privacySettings.profileVisibilityDesc') || 'Control who can view your profile'}
-                        rightElement={<Switch value={settings.profileVisibility} onValueChange={() => toggle('profileVisibility')} disabled={isSaving} />}
-                    />
-                    <SettingsListItem
-                        title={t('privacySettings.hideOnlineStatus') || 'Hide Online Status'}
-                        description={t('privacySettings.hideOnlineStatusDesc') || 'Don\'t show when you\'re online'}
-                        rightElement={<Switch value={settings.hideOnlineStatus} onValueChange={() => toggle('hideOnlineStatus')} disabled={isSaving} />}
-                    />
-                    <SettingsListItem
-                        title={t('privacySettings.hideLastSeen') || 'Hide Last Seen'}
-                        description={t('privacySettings.hideLastSeenDesc') || 'Don\'t show when you were last active'}
-                        rightElement={<Switch value={settings.hideLastSeen} onValueChange={() => toggle('hideLastSeen')} disabled={isSaving} />}
-                    />
-                </SettingsListGroup>
-
-                {/* Interactions */}
-                <SettingsListGroup title={t('privacySettings.sections.interactions') || 'INTERACTIONS'}>
-                    <SettingsListItem
-                        title={t('privacySettings.allowTagging') || 'Allow Tagging'}
-                        description={t('privacySettings.allowTaggingDesc') || 'Let others tag you in posts'}
-                        rightElement={<Switch value={settings.allowTagging} onValueChange={() => toggle('allowTagging')} disabled={isSaving} />}
-                    />
-                    <SettingsListItem
-                        title={t('privacySettings.allowMentions') || 'Allow Mentions'}
-                        description={t('privacySettings.allowMentionsDesc') || 'Let others mention you'}
-                        rightElement={<Switch value={settings.allowMentions} onValueChange={() => toggle('allowMentions')} disabled={isSaving} />}
-                    />
-                    <SettingsListItem
-                        title={t('privacySettings.allowDirectMessages') || 'Allow Direct Messages'}
-                        description={t('privacySettings.allowDirectMessagesDesc') || 'Let others send you direct messages'}
-                        rightElement={<Switch value={settings.allowDirectMessages} onValueChange={() => toggle('allowDirectMessages')} disabled={isSaving} />}
-                    />
-                    <SettingsListItem
-                        title={t('privacySettings.hideReadReceipts') || 'Hide Read Receipts'}
-                        description={t('privacySettings.hideReadReceiptsDesc') || 'Don\'t show read receipts in messages'}
-                        rightElement={<Switch value={settings.hideReadReceipts} onValueChange={() => toggle('hideReadReceipts')} disabled={isSaving} />}
-                    />
-                </SettingsListGroup>
-
-                {/* Activity & Data */}
-                <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'}
-                        rightElement={<Switch value={settings.showActivity} onValueChange={() => toggle('showActivity')} disabled={isSaving} />}
-                    />
-                    <SettingsListItem
-                        title={t('privacySettings.dataSharing') || 'Data Sharing'}
-                        description={t('privacySettings.dataSharingDesc') || 'Allow sharing data for personalization'}
-                        rightElement={<Switch value={settings.dataSharing} onValueChange={() => toggle('dataSharing')} disabled={isSaving} />}
-                    />
-                    <SettingsListItem
-                        title={t('privacySettings.locationSharing') || 'Location Sharing'}
-                        description={t('privacySettings.locationSharingDesc') || 'Share your location'}
-                        rightElement={<Switch value={settings.locationSharing} onValueChange={() => toggle('locationSharing')} disabled={isSaving} />}
-                    />
-                    <SettingsListItem
-                        title={t('privacySettings.analyticsSharing') || 'Analytics Sharing'}
-                        description={t('privacySettings.analyticsSharingDesc') || 'Allow analytics data collection'}
-                        rightElement={<Switch value={settings.analyticsSharing} onValueChange={() => toggle('analyticsSharing')} disabled={isSaving} />}
-                    />
-                </SettingsListGroup>
+            <ScrollView className="flex-1">
+                <View className="px-screen-margin pb-space-24">
+                    {/* Account Privacy */}
+                    <SettingsListGroup title={t('privacySettings.sections.account') || 'ACCOUNT PRIVACY'}>
+                        <SettingsListItem
+                            icon={<SettingsIcon name="lock-outline" color={bloomTheme.colors.primary} />}
+                            title={t('privacySettings.isPrivateAccount') || 'Private Account'}
+                            description={t('privacySettings.isPrivateAccountDesc') || 'Only approved followers can see your posts'}
+                            rightElement={<Switch value={settings.isPrivateAccount} onValueChange={() => toggle('isPrivateAccount')} disabled={isSaving} />}
+                            showChevron={false}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="account-eye-outline" color={bloomTheme.colors.info} />}
+                            title={t('privacySettings.profileVisibility') || 'Profile Visibility'}
+                            description={t('privacySettings.profileVisibilityDesc') || 'Control who can view your profile'}
+                            rightElement={<Switch value={settings.profileVisibility} onValueChange={() => toggle('profileVisibility')} disabled={isSaving} />}
+                            showChevron={false}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="circle-outline" color={bloomTheme.colors.success} />}
+                            title={t('privacySettings.hideOnlineStatus') || 'Hide Online Status'}
+                            description={t('privacySettings.hideOnlineStatusDesc') || 'Don\'t show when you\'re online'}
+                            rightElement={<Switch value={settings.hideOnlineStatus} onValueChange={() => toggle('hideOnlineStatus')} disabled={isSaving} />}
+                            showChevron={false}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="clock-outline" color={bloomTheme.colors.secondary} />}
+                            title={t('privacySettings.hideLastSeen') || 'Hide Last Seen'}
+                            description={t('privacySettings.hideLastSeenDesc') || 'Don\'t show when you were last active'}
+                            rightElement={<Switch value={settings.hideLastSeen} onValueChange={() => toggle('hideLastSeen')} disabled={isSaving} />}
+                            showChevron={false}
+                        />
+                    </SettingsListGroup>
 
-                {/* Content & Safety */}
-                <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'}
-                        rightElement={<Switch value={settings.sensitiveContent} onValueChange={() => toggle('sensitiveContent')} disabled={isSaving} />}
-                    />
-                    <SettingsListItem
-                        title={t('privacySettings.autoFilter') || 'Auto Filter'}
-                        description={t('privacySettings.autoFilterDesc') || 'Automatically filter inappropriate content'}
-                        rightElement={<Switch value={settings.autoFilter} onValueChange={() => toggle('autoFilter')} disabled={isSaving} />}
-                    />
-                    <SettingsListItem
-                        title={t('privacySettings.muteKeywords') || 'Mute Keywords'}
-                        description={t('privacySettings.muteKeywordsDesc') || 'Hide posts containing muted keywords'}
-                        rightElement={<Switch value={settings.muteKeywords} onValueChange={() => toggle('muteKeywords')} disabled={isSaving} />}
-                    />
-                    <SettingsListItem
-                        title={t('privacySettings.blockScreenshots') || 'Block Screenshots'}
-                        description={t('privacySettings.blockScreenshotsDesc') || 'Prevent screenshots of your content'}
-                        rightElement={<Switch value={settings.blockScreenshots} onValueChange={() => toggle('blockScreenshots')} disabled={isSaving} />}
-                    />
-                </SettingsListGroup>
+                    {/* Interactions */}
+                    <SettingsListGroup title={t('privacySettings.sections.interactions') || 'INTERACTIONS'}>
+                        <SettingsListItem
+                            icon={<SettingsIcon name="tag-outline" color={bloomTheme.colors.primary} />}
+                            title={t('privacySettings.allowTagging') || 'Allow Tagging'}
+                            description={t('privacySettings.allowTaggingDesc') || 'Let others tag you in posts'}
+                            rightElement={<Switch value={settings.allowTagging} onValueChange={() => toggle('allowTagging')} disabled={isSaving} />}
+                            showChevron={false}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="at" color={bloomTheme.colors.info} />}
+                            title={t('privacySettings.allowMentions') || 'Allow Mentions'}
+                            description={t('privacySettings.allowMentionsDesc') || 'Let others mention you'}
+                            rightElement={<Switch value={settings.allowMentions} onValueChange={() => toggle('allowMentions')} disabled={isSaving} />}
+                            showChevron={false}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="message-outline" color={bloomTheme.colors.success} />}
+                            title={t('privacySettings.allowDirectMessages') || 'Allow Direct Messages'}
+                            description={t('privacySettings.allowDirectMessagesDesc') || 'Let others send you direct messages'}
+                            rightElement={<Switch value={settings.allowDirectMessages} onValueChange={() => toggle('allowDirectMessages')} disabled={isSaving} />}
+                            showChevron={false}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="check-all" color={bloomTheme.colors.secondary} />}
+                            title={t('privacySettings.hideReadReceipts') || 'Hide Read Receipts'}
+                            description={t('privacySettings.hideReadReceiptsDesc') || 'Don\'t show read receipts in messages'}
+                            rightElement={<Switch value={settings.hideReadReceipts} onValueChange={() => toggle('hideReadReceipts')} disabled={isSaving} />}
+                            showChevron={false}
+                        />
+                    </SettingsListGroup>
 
-                {/* Blocked Users */}
-                <SettingsListGroup title={t('privacySettings.sections.blockedUsers') || 'BLOCKED USERS'}>
-                    {isLoadingUsers ? (
-                        <LoadingState color={bloomTheme.colors.text} size="small" />
-                    ) : blockedUsers.length === 0 ? (
-                        <EmptyState
-                            message={t('privacySettings.noBlockedUsers') || 'No blocked users'}
-                            textColor={bloomTheme.colors.textSecondary}
+                    {/* Activity & Data */}
+                    <SettingsListGroup title={t('privacySettings.sections.activity') || 'ACTIVITY & DATA'}>
+                        <SettingsListItem
+                            icon={<SettingsIcon name="pulse" color={bloomTheme.colors.primary} />}
+                            title={t('privacySettings.showActivity') || 'Show Activity Status'}
+                            description={t('privacySettings.showActivityDesc') || 'Display your activity on your profile'}
+                            rightElement={<Switch value={settings.showActivity} onValueChange={() => toggle('showActivity')} disabled={isSaving} />}
+                            showChevron={false}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="database-outline" color={bloomTheme.colors.info} />}
+                            title={t('privacySettings.dataSharing') || 'Data Sharing'}
+                            description={t('privacySettings.dataSharingDesc') || 'Allow sharing data for personalization'}
+                            rightElement={<Switch value={settings.dataSharing} onValueChange={() => toggle('dataSharing')} disabled={isSaving} />}
+                            showChevron={false}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="map-marker-outline" color={bloomTheme.colors.warning} />}
+                            title={t('privacySettings.locationSharing') || 'Location Sharing'}
+                            description={t('privacySettings.locationSharingDesc') || 'Share your location'}
+                            rightElement={<Switch value={settings.locationSharing} onValueChange={() => toggle('locationSharing')} disabled={isSaving} />}
+                            showChevron={false}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="chart-line" color={bloomTheme.colors.secondary} />}
+                            title={t('privacySettings.analyticsSharing') || 'Analytics Sharing'}
+                            description={t('privacySettings.analyticsSharingDesc') || 'Allow analytics data collection'}
+                            rightElement={<Switch value={settings.analyticsSharing} onValueChange={() => toggle('analyticsSharing')} disabled={isSaving} />}
+                            showChevron={false}
                         />
-                    ) : (
-                        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>
-                                    }
-                                />
-                            );
-                        })
-                    )}
-                </SettingsListGroup>
+                    </SettingsListGroup>
 
-                {/* Restricted Users */}
-                <SettingsListGroup title={t('privacySettings.sections.restrictedUsers') || 'RESTRICTED USERS'}>
-                    {isLoadingUsers ? (
-                        <LoadingState color={bloomTheme.colors.text} size="small" />
-                    ) : restrictedUsers.length === 0 ? (
-                        <EmptyState
-                            message={t('privacySettings.noRestrictedUsers') || 'No restricted users'}
-                            textColor={bloomTheme.colors.textSecondary}
+                    {/* Content & Safety */}
+                    <SettingsListGroup title={t('privacySettings.sections.content') || 'CONTENT & SAFETY'}>
+                        <SettingsListItem
+                            icon={<SettingsIcon name="eye-off-outline" color={bloomTheme.colors.warning} />}
+                            title={t('privacySettings.sensitiveContent') || 'Show Sensitive Content'}
+                            description={t('privacySettings.sensitiveContentDesc') || 'Allow sensitive or explicit content'}
+                            rightElement={<Switch value={settings.sensitiveContent} onValueChange={() => toggle('sensitiveContent')} disabled={isSaving} />}
+                            showChevron={false}
                         />
-                    ) : (
-                        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>
-                                    }
-                                />
-                            );
-                        })
-                    )}
-                </SettingsListGroup>
+                        <SettingsListItem
+                            icon={<SettingsIcon name="filter-outline" color={bloomTheme.colors.success} />}
+                            title={t('privacySettings.autoFilter') || 'Auto Filter'}
+                            description={t('privacySettings.autoFilterDesc') || 'Automatically filter inappropriate content'}
+                            rightElement={<Switch value={settings.autoFilter} onValueChange={() => toggle('autoFilter')} disabled={isSaving} />}
+                            showChevron={false}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="volume-off" color={bloomTheme.colors.info} />}
+                            title={t('privacySettings.muteKeywords') || 'Mute Keywords'}
+                            description={t('privacySettings.muteKeywordsDesc') || 'Hide posts containing muted keywords'}
+                            rightElement={<Switch value={settings.muteKeywords} onValueChange={() => toggle('muteKeywords')} disabled={isSaving} />}
+                            showChevron={false}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="cellphone-screenshot" color={bloomTheme.colors.secondary} />}
+                            title={t('privacySettings.blockScreenshots') || 'Block Screenshots'}
+                            description={t('privacySettings.blockScreenshotsDesc') || 'Prevent screenshots of your content'}
+                            rightElement={<Switch value={settings.blockScreenshots} onValueChange={() => toggle('blockScreenshots')} disabled={isSaving} />}
+                            showChevron={false}
+                        />
+                    </SettingsListGroup>
+
+                    {/* Blocked Users */}
+                    <SettingsListGroup title={t('privacySettings.sections.blockedUsers') || 'BLOCKED USERS'}>
+                        {isLoadingUsers ? (
+                            <LoadingState color={bloomTheme.colors.text} size="small" />
+                        ) : blockedUsers.length === 0 ? (
+                            <EmptyState
+                                message={t('privacySettings.noBlockedUsers') || 'No blocked users'}
+                                textColor={bloomTheme.colors.textSecondary}
+                            />
+                        ) : (
+                            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={
+                                            <Button
+                                                variant="destructive"
+                                                size="small"
+                                                onPress={() => handleUnblock(userId)}
+                                            >
+                                                {t('privacySettings.unblock') || 'Unblock'}
+                                            </Button>
+                                        }
+                                        showChevron={false}
+                                    />
+                                );
+                            })
+                        )}
+                    </SettingsListGroup>
+
+                    {/* Restricted Users */}
+                    <SettingsListGroup title={t('privacySettings.sections.restrictedUsers') || 'RESTRICTED USERS'}>
+                        {isLoadingUsers ? (
+                            <LoadingState color={bloomTheme.colors.text} size="small" />
+                        ) : restrictedUsers.length === 0 ? (
+                            <EmptyState
+                                message={t('privacySettings.noRestrictedUsers') || 'No restricted users'}
+                                textColor={bloomTheme.colors.textSecondary}
+                            />
+                        ) : (
+                            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={
+                                            <Button
+                                                variant="secondary"
+                                                size="small"
+                                                onPress={() => handleUnrestrict(userId)}
+                                            >
+                                                {t('privacySettings.unrestrict') || 'Unrestrict'}
+                                            </Button>
+                                        }
+                                        showChevron={false}
+                                    />
+                                );
+                            })
+                        )}
+                    </SettingsListGroup>
+                </View>
             </ScrollView>
         </View>
     );
 };
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    content: {
-        flex: 1,
-        padding: 16,
-    },
-    actionButton: {
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        borderRadius: 8,
-    },
-    actionButtonText: {
-        fontSize: 14,
-        fontWeight: '600',
-    },
-});
-
 export default React.memo(PrivacySettingsScreen);
-