@oxyhq/services 5.16.16 → 5.16.18

package/src/ui/context/hooks/useLanguageManagement.ts

@@ -7,8 +7,8 @@ import {
   normalizeLanguageCode,
   type LanguageMetadata,
 } from '../../../utils/languageUtils';
-import type { StorageInterface } from '../utils/storageHelpers';
-import { extractErrorMessage } from '../utils/errorHandlers';
+import type { StorageInterface } from '../../utils/storageHelpers';
+import { extractErrorMessage } from '../../utils/errorHandlers';
 
 export interface UseLanguageManagementOptions {
   storage: StorageInterface | null;

package/src/ui/context/hooks/useSessionManagement.ts

@@ -2,9 +2,9 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import type { ApiError, User } from '../../../models/interfaces';
 import type { ClientSession } from '../../../models/session';
 import { mergeSessions, normalizeAndSortSessions, sessionsArraysEqual } from '../../../utils/sessionUtils';
-import { fetchSessionsWithFallback, mapSessionsToClient, validateSessionBatch } from '../utils/sessionHelpers';
-import { getStorageKeys, type StorageInterface } from '../utils/storageHelpers';
-import { handleAuthError, isInvalidSessionError } from '../utils/errorHandlers';
+import { fetchSessionsWithFallback, mapSessionsToClient, validateSessionBatch } from '../../utils/sessionHelpers';
+import { getStorageKeys, type StorageInterface } from '../../utils/storageHelpers';
+import { handleAuthError, isInvalidSessionError } from '../../utils/errorHandlers';
 import type { OxyServices } from '../../../core';
 import type { QueryClient } from '@tanstack/react-query';
 import { clearQueryCache } from '../../hooks/queryClient';

package/src/ui/context/hooks/useStorage.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { ApiError } from '../../../models/interfaces';
-import { createPlatformStorage, type StorageInterface } from '../utils/storageHelpers';
-import { extractErrorMessage } from '../utils/errorHandlers';
+import { createPlatformStorage, type StorageInterface } from '../../utils/storageHelpers';
+import { extractErrorMessage } from '../../utils/errorHandlers';
 
 export interface UseStorageOptions {
   onError?: (error: ApiError) => void;

package/src/ui/hooks/queries/useAccountQueries.ts

@@ -132,7 +132,7 @@ export const usePrivacySettings = (userId?: string, options?: { enabled?: boolea
   const targetUserId = userId || user?.id;
 
   return useQuery({
-    queryKey: queryKeys.privacy.settings(userId),
+    queryKey: queryKeys.privacy.settings(targetUserId),
     queryFn: async () => {
       if (!targetUserId) {
         throw new Error('User ID is required');

package/src/ui/hooks/queries/useServicesQueries.ts

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import type { ClientSession } from '../../../models/session';
 import { queryKeys } from './queryKeys';
 import { useOxy } from '../../context/OxyContext';
-import { fetchSessionsWithFallback, mapSessionsToClient } from '../../context/utils/sessionHelpers';
+import { fetchSessionsWithFallback, mapSessionsToClient } from '../../utils/sessionHelpers';
 
 /**
  * Get all active sessions for the current user

package/src/ui/hooks/useSessionSocket.ts

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import io from 'socket.io-client';
 import { toast } from '../../lib/sonner';
+import { logger } from '../../utils/loggerUtils';
 
 interface UseSessionSocketProps {
   userId: string | null | undefined;
@@ -113,7 +114,7 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
             await clearSessionStateRef.current();
           } catch (error) {
             if (__DEV__) {
-              console.error('Failed to clear session state after session_removed:', error);
+              logger.error('Failed to clear session state after session_removed', error instanceof Error ? error : new Error(String(error)), { component: 'useSessionSocket' });
             }
           }
         } else {
@@ -121,7 +122,7 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
           refreshSessionsRef.current().catch((error) => {
             // Silently handle errors from refresh - they're expected if sessions were removed
             if (__DEV__) {
-              console.debug('Failed to refresh sessions after session_removed:', error);
+              logger.debug('Failed to refresh sessions after session_removed', { component: 'useSessionSocket' }, error as unknown);
             }
           });
         }
@@ -146,7 +147,7 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
             await clearSessionStateRef.current();
           } catch (error) {
             if (__DEV__) {
-              console.error('Failed to clear session state after device_removed:', error);
+              logger.error('Failed to clear session state after device_removed', error instanceof Error ? error : new Error(String(error)), { component: 'useSessionSocket' });
             }
           }
         } else {
@@ -154,7 +155,7 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
           refreshSessionsRef.current().catch((error) => {
             // Silently handle errors from refresh - they're expected if sessions were removed
             if (__DEV__) {
-              console.debug('Failed to refresh sessions after device_removed:', error);
+              logger.debug('Failed to refresh sessions after device_removed', { component: 'useSessionSocket' }, error as unknown);
             }
           });
         }
@@ -179,7 +180,7 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
             await clearSessionStateRef.current();
           } catch (error) {
             if (__DEV__) {
-              console.error('Failed to clear session state after sessions_removed:', error);
+              logger.error('Failed to clear session state after sessions_removed', error instanceof Error ? error : new Error(String(error)), { component: 'useSessionSocket' });
             }
           }
         } else {
@@ -187,7 +188,7 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
           refreshSessionsRef.current().catch((error) => {
             // Silently handle errors from refresh - they're expected if sessions were removed
             if (__DEV__) {
-              console.debug('Failed to refresh sessions after sessions_removed:', error);
+              logger.debug('Failed to refresh sessions after sessions_removed', { component: 'useSessionSocket' }, error as unknown);
             }
           });
         }
@@ -196,7 +197,7 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
         refreshSessionsRef.current().catch((error) => {
           // Log but don't throw - refresh errors shouldn't break the socket handler
           if (__DEV__) {
-            console.debug('Failed to refresh sessions after session_update:', error);
+            logger.debug('Failed to refresh sessions after session_update', { component: 'useSessionSocket' }, error as unknown);
           }
         });
         

package/src/ui/screens/AccountCenterScreen.tsx

@@ -102,9 +102,9 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                     <QuickActions
                         theme={normalizedTheme}
                         actions={useMemo(() => [
-                            { id: 'overview', icon: 'person-circle', iconColor: colors.iconSecurity, title: t('accountCenter.quickActions.overview') || 'Overview', onPress: () => navigate?.('AccountOverview') },
-                            { id: 'settings', icon: 'settings', iconColor: colors.iconData, title: t('accountCenter.quickActions.editProfile') || 'Edit Profile', onPress: () => navigate?.('EditProfile') },
-                            { id: 'sessions', icon: 'shield-checkmark', iconColor: colors.iconSecurity, title: t('accountCenter.quickActions.sessions') || 'Sessions', onPress: () => navigate?.('SessionManagement') },
+                            { id: 'overview', icon: 'account-circle', iconColor: colors.iconSecurity, title: t('accountCenter.quickActions.overview') || 'Overview', onPress: () => navigate?.('AccountOverview') },
+                            { id: 'settings', icon: 'cog', iconColor: colors.iconData, title: t('accountCenter.quickActions.editProfile') || 'Edit Profile', onPress: () => navigate?.('EditProfile') },
+                            { id: 'sessions', icon: 'shield-check', iconColor: colors.iconSecurity, title: t('accountCenter.quickActions.sessions') || 'Sessions', onPress: () => navigate?.('SessionManagement') },
                             { id: 'premium', icon: 'star', iconColor: colors.iconPayments, title: t('accountCenter.quickActions.premium') || 'Premium', onPress: () => navigate?.('PremiumSubscription') },
                             ...(user?.isPremium ? [{ id: 'billing', icon: 'card', iconColor: colors.iconPersonalInfo, title: t('accountCenter.quickActions.billing') || 'Billing', onPress: () => navigate?.('PaymentGateway') }] : []),
                             ...(sessions && sessions.length > 1 ? [{ id: 'switch', icon: 'swap-horizontal', iconColor: colors.iconStorage, title: t('accountCenter.quickActions.switch') || 'Switch', onPress: () => navigate?.('AccountSwitcher') }] : []),
@@ -119,7 +119,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                         items={useMemo(() => [
                             {
                                 id: 'overview',
-                                icon: 'person-circle',
+                                icon: 'account-circle',
                                 iconColor: colors.iconSecurity,
                                 title: t('accountCenter.items.accountOverview.title') || 'Account Overview',
                                 subtitle: t('accountCenter.items.accountOverview.subtitle') || 'Complete account information',
@@ -127,7 +127,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'settings',
-                                icon: 'settings',
+                                icon: 'cog',
                                 iconColor: colors.iconData,
                                 title: t('accountCenter.items.editProfile.title') || 'Edit Profile',
                                 subtitle: t('accountCenter.items.editProfile.subtitle') || 'Manage your profile and preferences',
@@ -135,7 +135,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'sessions',
-                                icon: 'shield-checkmark',
+                                icon: 'shield-check',
                                 iconColor: colors.iconSecurity,
                                 title: t('accountCenter.items.manageSessions.title') || 'Manage Sessions',
                                 subtitle: t('accountCenter.items.manageSessions.subtitle') || 'Security and active devices',
@@ -177,7 +177,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                             items={useMemo(() => [
                                 {
                                     id: 'switch',
-                                    icon: 'people',
+                                    icon: 'account-group',
                                     iconColor: colors.iconStorage,
                                     title: t('accountCenter.items.switchAccount.title') || 'Switch Account',
                                     subtitle: t('accountCenter.items.switchAccount.subtitle', { count: sessions.length }) || `${sessions.length} accounts available`,
@@ -185,7 +185,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                 },
                                 {
                                     id: 'add',
-                                    icon: 'person-add',
+                                    icon: 'account-plus',
                                     iconColor: colors.iconPersonalInfo,
                                     title: t('accountCenter.items.addAccount.title') || 'Add Another Account',
                                     subtitle: t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account',
@@ -204,7 +204,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                             items={useMemo(() => [
                                 {
                                     id: 'add',
-                                    icon: 'person-add',
+                                    icon: 'account-plus',
                                     iconColor: colors.iconPersonalInfo,
                                     title: t('accountCenter.items.addAccount.title') || 'Add Another Account',
                                     subtitle: t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account',
@@ -222,7 +222,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                         items={useMemo(() => [
                             ...(Platform.OS !== 'web' ? [{
                                 id: 'notifications',
-                                icon: 'notifications',
+                                icon: 'bell',
                                 iconColor: colors.iconStorage,
                                 title: t('accountCenter.items.notifications.title') || 'Notifications',
                                 subtitle: t('accountCenter.items.notifications.subtitle') || 'Manage notification settings',
@@ -230,7 +230,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                             }] : []),
                             {
                                 id: 'language',
-                                icon: 'language',
+                                icon: 'translate',
                                 iconColor: colors.iconPersonalInfo,
                                 title: t('language.title') || 'Language',
                                 subtitle: t('language.subtitle') || 'Choose your preferred language',
@@ -246,7 +246,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'appinfo',
-                                icon: 'information-circle',
+                                icon: 'information',
                                 iconColor: '#8E8E93',
                                 title: t('accountCenter.items.appInfo.title') || 'App Information',
                                 subtitle: t('accountCenter.items.appInfo.subtitle') || 'Version and system details',
@@ -260,7 +260,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                 {/* Sign Out Section */}
                 <Section >
                     <GroupedItem
-                        icon="log-out"
+                        icon="logout"
                         iconColor={dangerColor}
                         title={isLoading ? (t('accountCenter.signingOut') || 'Signing out...') : (t('common.actions.signOut') || 'Sign Out')}
 

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -398,7 +398,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         items={[
                             {
                                 id: 'profile-info',
-                                icon: 'person',
+                                icon: 'account',
                                 iconColor: baseThemeStyles.colors.iconSecurity,
                                 title: displayName,
                                 subtitle: user ? (user.email || user.username) : (t('common.status.loading') || 'Loading...'),
@@ -414,7 +414,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         items={[
                             {
                                 id: 'edit-profile',
-                                icon: 'person-circle',
+                                icon: 'account-circle',
                                 iconColor: baseThemeStyles.colors.iconPersonalInfo,
                                 title: t('accountOverview.items.editProfile.title'),
                                 subtitle: t('accountOverview.items.editProfile.subtitle'),
@@ -422,7 +422,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'security-privacy',
-                                icon: 'shield-checkmark',
+                                icon: 'shield-check',
                                 iconColor: baseThemeStyles.colors.iconSecurity,
                                 title: t('accountOverview.items.security.title'),
                                 subtitle: t('accountOverview.items.security.subtitle'),
@@ -430,7 +430,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'notifications',
-                                icon: 'notifications',
+                                icon: 'bell',
                                 iconColor: baseThemeStyles.colors.iconStorage,
                                 title: t('accountOverview.items.notifications.title'),
                                 subtitle: t('accountOverview.items.notifications.subtitle'),
@@ -483,7 +483,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             <GroupedSection
                                 items={additionalAccountsData.map((account, index) => ({
                                     id: `account-${account.id}`,
-                                    icon: 'person',
+                                    icon: 'account',
                                     iconColor: baseThemeStyles.colors.iconData,
                                     title: typeof account.name === 'object'
                                         ? account.name?.full || account.name?.first || account.username
@@ -519,7 +519,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                 items={[
                                     {
                                         id: 'no-accounts',
-                                        icon: 'person-outline',
+                                        icon: 'account-outline',
                                         iconColor: '#ccc',
                                         title: t('accountOverview.additional.noAccounts.title') || 'No other accounts',
                                         subtitle: t('accountOverview.additional.noAccounts.subtitle') || 'Add another account to switch between them',
@@ -546,7 +546,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                 },
                                 {
                                     id: 'sign-out-all',
-                                    icon: 'log-out',
+                                    icon: 'logout',
                                     iconColor: baseThemeStyles.colors.iconSharing,
                                     title: t('accountOverview.items.signOutAll.title') || 'Sign out of all accounts',
                                     subtitle: t('accountOverview.items.signOutAll.subtitle') || 'Remove all accounts from this device',
@@ -564,7 +564,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         items={[
                             {
                                 id: 'account-switcher',
-                                icon: 'people',
+                                icon: 'account-group',
                                 iconColor: baseThemeStyles.colors.iconData,
                                 title: showMoreAccounts
                                     ? t('accountOverview.items.accountSwitcher.titleHide')
@@ -580,7 +580,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'history-view',
-                                icon: 'time',
+                                icon: 'clock',
                                 iconColor: baseThemeStyles.colors.iconSecurity,
                                 title: t('accountOverview.items.history.title') || 'History',
                                 subtitle: t('accountOverview.items.history.subtitle') || 'View and manage your search history',
@@ -604,7 +604,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'delete-account',
-                                icon: 'trash',
+                                icon: 'delete',
                                 iconColor: baseThemeStyles.colors.iconSharing,
                                 title: t('accountOverview.items.deleteAccount.title'),
                                 subtitle: t('accountOverview.items.deleteAccount.subtitle'),
@@ -621,7 +621,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         items={[
                             {
                                 id: 'search-settings',
-                                icon: 'search',
+                                icon: 'magnify',
                                 iconColor: baseThemeStyles.colors.iconSecurity,
                                 title: t('accountOverview.items.searchSettings.title') || 'Search Settings',
                                 subtitle: t('accountOverview.items.searchSettings.subtitle') || 'SafeSearch and personalization',
@@ -629,7 +629,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'language-settings',
-                                icon: 'language',
+                                icon: 'translate',
                                 iconColor: baseThemeStyles.colors.iconPersonalInfo,
                                 title: t('accountOverview.items.language.title') || 'Language',
                                 subtitle: t('accountOverview.items.language.subtitle') || 'Choose your preferred language',
@@ -637,7 +637,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'account-preferences',
-                                icon: 'settings',
+                                icon: 'cog',
                                 iconColor: '#8E8E93',
                                 title: t('accountOverview.items.preferences.title'),
                                 subtitle: t('accountOverview.items.preferences.subtitle'),
@@ -653,7 +653,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'privacy-policy',
-                                icon: 'shield-checkmark',
+                                icon: 'shield-check',
                                 iconColor: baseThemeStyles.colors.iconPersonalInfo,
                                 title: t('accountOverview.items.privacyPolicy.title') || 'Privacy Policy',
                                 subtitle: t('accountOverview.items.privacyPolicy.subtitle') || 'How we handle your data',
@@ -661,7 +661,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'terms-of-service',
-                                icon: 'document-text',
+                                icon: 'file-document',
                                 iconColor: baseThemeStyles.colors.iconSecurity,
                                 title: t('accountOverview.items.termsOfService.title') || 'Terms of Service',
                                 subtitle: t('accountOverview.items.termsOfService.subtitle') || 'Terms and conditions of use',
@@ -677,7 +677,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'about',
-                                icon: 'information-circle',
+                                icon: 'information',
                                 iconColor: '#8E8E93',
                                 title: t('accountOverview.items.about.title'),
                                 subtitle: t('accountOverview.items.about.subtitle'),
@@ -691,7 +691,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {/* Sign Out */}
                 <Section title={t('accountOverview.sections.actions')} >
                     <GroupedItem
-                        icon="log-out"
+                        icon="logout"
                         iconColor="#FF3B30"
                         title={t('accountOverview.items.signOut.title')}
                         subtitle={t('accountOverview.items.signOut.subtitle')}

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -1038,10 +1038,10 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
             );
         }
         const fieldConfig = {
-            displayName: { label: 'Display Name', value: displayName, placeholder: 'Enter your display name', icon: 'person', color: colors.iconPersonalInfo, multiline: false, keyboardType: 'default' as const },
+            displayName: { label: 'Display Name', value: displayName, placeholder: 'Enter your display name', icon: 'account', color: colors.iconPersonalInfo, multiline: false, keyboardType: 'default' as const },
             username: { label: 'Username', value: username, placeholder: 'Choose a username', icon: 'at', color: colors.iconData, multiline: false, keyboardType: 'default' as const },
             email: { label: 'Email', value: email, placeholder: 'Enter your email address', icon: 'mail', color: colors.iconStorage, multiline: false, keyboardType: 'email-address' as const },
-            bio: { label: 'Bio', value: bio, placeholder: 'Tell people about yourself...', icon: 'document-text', color: colors.iconPersonalInfo, multiline: true, keyboardType: 'default' as const },
+            bio: { label: 'Bio', value: bio, placeholder: 'Tell people about yourself...', icon: 'file-document', color: colors.iconPersonalInfo, multiline: true, keyboardType: 'default' as const },
             location: { label: 'Location', value: location, placeholder: 'Enter your location', icon: 'location', color: colors.iconSharing, multiline: false, keyboardType: 'default' as const },
             links: { label: 'Links', value: links.join(', '), placeholder: 'Enter your links (comma separated)', icon: 'link', color: colors.iconPersonalInfo, multiline: false, keyboardType: 'url' as const }
         };

package/src/ui/screens/AccountSwitcherScreen.tsx

@@ -456,7 +456,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                 items={[
                                     {
                                         id: 'add-account',
-                                        icon: 'person-add',
+                                        icon: 'account-plus',
                                         iconColor: '#007AFF',
                                         title: 'Add Another Account',
                                         subtitle: 'Sign in with a different account',
@@ -464,7 +464,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                     },
                                     {
                                         id: 'device-management',
-                                        icon: 'phone-portrait',
+                                        icon: 'cellphone',
                                         iconColor: '#5856D6',
                                         title: `${showDeviceManagement ? 'Hide' : 'Manage'} Device Sessions`,
                                         subtitle: 'View and manage sessions on other devices',
@@ -472,7 +472,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                     },
                                     {
                                         id: 'sign-out-all',
-                                        icon: 'log-out',
+                                        icon: 'logout',
                                         iconColor: '#FF3B30',
                                         title: 'Sign Out All Accounts',
                                         subtitle: 'Remove all accounts from this device',
@@ -511,7 +511,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                         items={[
                                             {
                                                 id: 'no-device-sessions',
-                                                icon: 'phone-portrait',
+                                                icon: 'cellphone',
                                                 iconColor: '#ccc',
                                                 title: t('accountSwitcher.device.noneTitle') || 'No device sessions found',
                                                 subtitle: t('accountSwitcher.device.noneSubtitle') || 'Device session management not available',
@@ -524,7 +524,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                     <GroupedSection
                                         items={deviceSessions.map((session, index) => ({
                                             id: `device-session-${session.sessionId}`,
-                                            icon: session.isCurrent ? 'phone-portrait' : 'phone-portrait-outline',
+                                            icon: session.isCurrent ? 'cellphone' : 'cellphone-basic',
                                             iconColor: session.isCurrent ? '#34C759' : '#8E8E93',
                                             title: `${session.deviceName} ${session.isCurrent ? '(' + (t('accountSwitcher.device.thisDevice') || 'This device') + ')' : ''}`,
                                             subtitle: t('accountSwitcher.device.lastActive', { date: new Date(session.lastActive).toLocaleDateString() }) || `Last active: ${new Date(session.lastActive).toLocaleDateString()}`,
@@ -557,7 +557,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                     items={[
                                         {
                                             id: 'empty-state',
-                                            icon: 'person-outline',
+                                            icon: 'account-outline',
                                             iconColor: '#ccc',
                                             title: t('accountSwitcher.empty.title') || 'No saved accounts',
                                             subtitle: t('accountSwitcher.empty.subtitle') || 'Add another account to switch between them quickly',
@@ -605,9 +605,9 @@ const styles = StyleSheet.create({
     },
     sectionTitle: {
         fontSize: 16,
-        fontWeight: '600',
+        fontWeight: Platform.OS === 'web' ? '600' : undefined,
+        fontFamily: fontFamilies.phuduSemiBold,
         color: '#333',
-        marginBottom: 12,
     },
     settingItem: {
         backgroundColor: '#fff',

package/src/ui/screens/AppInfoScreen.tsx

@@ -175,7 +175,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                         items={[
                             {
                                 id: 'name',
-                                icon: 'information-circle',
+                                icon: 'information',
                                 iconColor: themeStyles.colors.iconSecurity,
                                 title: 'Name',
                                 subtitle: packageInfo.name,
@@ -184,7 +184,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'version',
-                                icon: 'pricetag',
+                                icon: 'tag',
                                 iconColor: themeStyles.colors.iconData,
                                 title: 'Version',
                                 subtitle: packageInfo.version,
@@ -192,14 +192,14 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'description',
-                                icon: 'document-text',
+                                icon: 'file-document',
                                 iconColor: themeStyles.colors.iconPersonalInfo,
                                 title: 'Description',
                                 subtitle: packageInfo.description || 'No description',
                             },
                             {
                                 id: 'main-entry',
-                                icon: 'code',
+                                icon: 'code-tags',
                                 iconColor: themeStyles.colors.iconStorage,
                                 title: 'Main Entry',
                                 subtitle: packageInfo.main || 'N/A',
@@ -215,7 +215,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'types-entry',
-                                icon: 'construct',
+                                icon: 'wrench',
                                 iconColor: themeStyles.colors.iconPersonalInfo,
                                 title: 'Types Entry',
                                 subtitle: packageInfo.types || 'N/A',
@@ -231,14 +231,14 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                         items={[
                             {
                                 id: 'platform',
-                                icon: 'phone-portrait',
+                                icon: 'cellphone',
                                 iconColor: themeStyles.colors.iconSecurity,
                                 title: 'Platform',
                                 subtitle: Platform.OS,
                             },
                             {
                                 id: 'platform-version',
-                                icon: 'hardware-chip',
+                                icon: 'chip',
                                 iconColor: themeStyles.colors.iconData,
                                 title: 'Platform Version',
                                 subtitle: systemInfo?.version || 'Loading...',
@@ -259,7 +259,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'environment',
-                                icon: 'settings',
+                                icon: 'cog',
                                 iconColor: themeStyles.colors.iconPersonalInfo,
                                 title: 'Environment',
                                 subtitle: __DEV__ ? 'Development' : 'Production',
@@ -274,7 +274,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                         items={[
                             {
                                 id: 'auth-status',
-                                icon: 'shield-checkmark',
+                                icon: 'shield-check',
                                 iconColor: isAuthenticated ? themeStyles.colors.iconPersonalInfo : themeStyles.colors.iconSharing,
                                 title: 'Authentication Status',
                                 subtitle: isAuthenticated ? 'Authenticated' : 'Not Authenticated',
@@ -282,7 +282,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                             ...(user ? [
                                 {
                                     id: 'user-id',
-                                    icon: 'person',
+                                    icon: 'account',
                                     iconColor: themeStyles.colors.iconSecurity,
                                     title: 'User ID',
                                     subtitle: user.id,
@@ -319,7 +319,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                             ] : []),
                             {
                                 id: 'active-sessions',
-                                icon: 'people',
+                                icon: 'account-group',
                                 iconColor: themeStyles.colors.iconPersonalInfo,
                                 title: 'Total Active Sessions',
                                 subtitle: sessions?.length?.toString() || '0',
@@ -375,7 +375,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                         items={[
                             {
                                 id: 'build-timestamp',
-                                icon: 'time',
+                                icon: 'clock',
                                 iconColor: themeStyles.colors.iconSecurity,
                                 title: 'Build Timestamp',
                                 subtitle: systemInfo?.timestamp || 'Loading...',
@@ -383,7 +383,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'react-native',
-                                icon: 'logo-react',
+                                icon: 'react',
                                 iconColor: '#61DAFB',
                                 title: 'React Native',
                                 subtitle: 'Expo/React Native',
@@ -405,7 +405,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                         items={[
                             {
                                 id: 'copy-full-report',
-                                icon: 'copy',
+                                icon: 'content-copy',
                                 iconColor: themeStyles.colors.iconSecurity,
                                 title: 'Copy Full Report',
                                 subtitle: 'Copy complete application information to clipboard',
@@ -413,7 +413,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'run-system-check',
-                                icon: isRunningSystemCheck ? 'sync' : 'checkmark-circle',
+                                icon: isRunningSystemCheck ? 'sync' : 'check-circle',
                                 iconColor: isRunningSystemCheck ? '#FF9500' : '#34C759',
                                 title: isRunningSystemCheck ? 'Running System Check...' : 'Run System Check',
                                 subtitle: isRunningSystemCheck

package/src/ui/screens/FeedbackScreen.tsx

@@ -648,7 +648,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 
     const categoryItems = useMemo(() => (feedbackData.type ? (CATEGORIES[feedbackData.type as keyof typeof CATEGORIES] || []).map(cat => ({
         id: cat,
-        icon: feedbackData.category === cat ? 'checkmark-circle' : 'ellipse-outline',
+        icon: feedbackData.category === cat ? 'check-circle' : 'ellipse-outline',
         iconColor: feedbackData.category === cat ? colors.primary : colors.secondaryText,
         title: cat,
         onPress: () => updateField('category', cat),

package/src/ui/screens/FileManagementScreen.tsx

@@ -2007,7 +2007,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         key: 'delete',
                         text: `Delete (${selectedIds.size})`,
                         onPress: handleBulkDelete,
-                        icon: 'trash',
+                        icon: 'delete',
                     },
                     {
                         key: 'visibility',