@oxyhq/services 11.0.0 → 11.1.1

package/src/ui/screens/AppInfoScreen.tsx

@@ -2,9 +2,6 @@ import type React from 'react';
 import { useState, useEffect } from 'react';
 import {
     View,
-    Text,
-    TouchableOpacity,
-    StyleSheet,
     Platform,
     Dimensions,
     Clipboard,
@@ -14,18 +11,14 @@ import {
 import type { BaseScreenProps } from '../types/navigation';
 import { packageInfo } from '@oxyhq/core';
 import { toast } from '@oxyhq/bloom';
-import { Ionicons } from '@expo/vector-icons';
 import OxyServicesLogo from '../../assets/icons/OxyServices';
 import { SettingsIcon } from '../components/SettingsIcon';
+import Header from '../components/Header';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { useColorScheme } from '../hooks/useColorScheme';
-import { Colors } from '../constants/theme';
-import { normalizeColorScheme } from '@oxyhq/core';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 
-
 interface SystemInfo {
     platform: string;
     version: string;
@@ -38,7 +31,7 @@ interface SystemInfo {
 
 const AppInfoScreen: React.FC<BaseScreenProps> = ({
     onClose,
-    theme,
+    goBack,
     navigate,
 }) => {
     // Use useOxy() hook for OxyContext values
@@ -49,11 +42,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
     const [connectionStatus, setConnectionStatus] = useState<'checking' | 'connected' | 'disconnected' | 'unknown'>('unknown');
 
     const bloomTheme = useTheme();
-    const colorScheme = useColorScheme();
-    const normalizedColorScheme = normalizeColorScheme(colorScheme);
-    const themeColors = Colors[normalizedColorScheme];
-    const backgroundColor = bloomTheme.colors.background;
-    const primaryColor = themeColors.iconSecurity;
+    const colors = bloomTheme.colors;
 
     useEffect(() => {
         const updateDimensions = () => {
@@ -159,241 +148,214 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
     };
 
     return (
-        <View style={[styles.container, { backgroundColor }]}>
-            {/* Header */}
-            <View style={[styles.header, { backgroundColor: bloomTheme.colors.card }]}>
-                <TouchableOpacity style={styles.cancelButton} onPress={onClose}>
-                    <Ionicons name="close" size={24} color={bloomTheme.colors.textSecondary} />
-                </TouchableOpacity>
-                <Text style={[styles.headerTitle, { color: bloomTheme.colors.text }]}>{t('appInfo.title')}</Text>
-                <View style={styles.placeholder} />
-            </View>
+        <View className="flex-1 bg-bg">
+            <Header
+                title={t('appInfo.title')}
+                onBack={goBack || onClose}
+                variant="minimal"
+                elevation="subtle"
+            />
 
-            <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
-                {/* Package Information */}
-                <SettingsListGroup title={t('appInfo.sections.package')}>
-                    <SettingsListItem
-                        icon={<OxyServicesLogo width={20} height={20} />}
-                        title={t('appInfo.items.name')}
-                        description={packageInfo.name}
-                        onPress={() => copyToClipboard(packageInfo.name, t('appInfo.items.name'))}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="tag" color={themeColors.iconData} />}
-                        title={t('appInfo.items.version')}
-                        description={packageInfo.version}
-                        onPress={() => copyToClipboard(packageInfo.version, t('appInfo.items.version'))}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="file-document" color={themeColors.iconPersonalInfo} />}
-                        title={t('appInfo.items.description')}
-                        description={packageInfo.description || t('appInfo.items.noDescription')}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="code-tags" color={themeColors.iconStorage} />}
-                        title={t('appInfo.items.mainEntry')}
-                        description={packageInfo.main || 'N/A'}
-                        onPress={() => copyToClipboard(packageInfo.main || 'N/A', t('appInfo.items.mainEntry'))}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="library" color={themeColors.iconSharing} />}
-                        title={t('appInfo.items.moduleEntry')}
-                        description={packageInfo.module || 'N/A'}
-                        onPress={() => copyToClipboard(packageInfo.module || 'N/A', t('appInfo.items.moduleEntry'))}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="wrench" color={themeColors.iconPersonalInfo} />}
-                        title={t('appInfo.items.typesEntry')}
-                        description={packageInfo.types || 'N/A'}
-                        onPress={() => copyToClipboard(packageInfo.types || 'N/A', t('appInfo.items.typesEntry'))}
-                    />
-                </SettingsListGroup>
+            <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
+                <View className="px-screen-margin py-space-16 pb-space-24">
+                    {/* Package Information */}
+                    <SettingsListGroup title={t('appInfo.sections.package')}>
+                        <SettingsListItem
+                            icon={<OxyServicesLogo width={20} height={20} />}
+                            title={t('appInfo.items.name')}
+                            description={packageInfo.name}
+                            onPress={() => copyToClipboard(packageInfo.name, t('appInfo.items.name'))}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="tag" color={colors.info} />}
+                            title={t('appInfo.items.version')}
+                            description={packageInfo.version}
+                            onPress={() => copyToClipboard(packageInfo.version, t('appInfo.items.version'))}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="file-document" color={colors.success} />}
+                            title={t('appInfo.items.description')}
+                            description={packageInfo.description || t('appInfo.items.noDescription')}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="code-tags" color={colors.secondary} />}
+                            title={t('appInfo.items.mainEntry')}
+                            description={packageInfo.main || 'N/A'}
+                            onPress={() => copyToClipboard(packageInfo.main || 'N/A', t('appInfo.items.mainEntry'))}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="library" color={colors.warning} />}
+                            title={t('appInfo.items.moduleEntry')}
+                            description={packageInfo.module || 'N/A'}
+                            onPress={() => copyToClipboard(packageInfo.module || 'N/A', t('appInfo.items.moduleEntry'))}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="wrench" color={colors.success} />}
+                            title={t('appInfo.items.typesEntry')}
+                            description={packageInfo.types || 'N/A'}
+                            onPress={() => copyToClipboard(packageInfo.types || 'N/A', t('appInfo.items.typesEntry'))}
+                        />
+                    </SettingsListGroup>
 
-                {/* System Information */}
-                <SettingsListGroup title={t('appInfo.sections.system')}>
-                    <SettingsListItem
-                        icon={<SettingsIcon name="cellphone" color={themeColors.iconSecurity} />}
-                        title={t('appInfo.items.platform')}
-                        description={Platform.OS}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="chip" color={themeColors.iconData} />}
-                        title={t('appInfo.items.platformVersion')}
-                        description={systemInfo?.version || t('common.status.loading')}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="resize" color={themeColors.iconStorage} />}
-                        title={t('appInfo.items.screenWidth')}
-                        description={`${systemInfo?.screenDimensions.width || 0}px`}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="resize" color={themeColors.iconSharing} />}
-                        title={t('appInfo.items.screenHeight')}
-                        description={`${systemInfo?.screenDimensions.height || 0}px`}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="cog" color={themeColors.iconPersonalInfo} />}
-                        title={t('appInfo.items.environment')}
-                        description={__DEV__ ? t('appInfo.items.development') : t('appInfo.items.production')}
-                    />
-                </SettingsListGroup>
+                    {/* System Information */}
+                    <SettingsListGroup title={t('appInfo.sections.system')}>
+                        <SettingsListItem
+                            icon={<SettingsIcon name="cellphone" color={colors.primary} />}
+                            title={t('appInfo.items.platform')}
+                            description={Platform.OS}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="chip" color={colors.info} />}
+                            title={t('appInfo.items.platformVersion')}
+                            description={systemInfo?.version || t('common.status.loading')}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="resize" color={colors.secondary} />}
+                            title={t('appInfo.items.screenWidth')}
+                            description={`${systemInfo?.screenDimensions.width || 0}px`}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="resize" color={colors.warning} />}
+                            title={t('appInfo.items.screenHeight')}
+                            description={`${systemInfo?.screenDimensions.height || 0}px`}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="cog" color={colors.success} />}
+                            title={t('appInfo.items.environment')}
+                            description={__DEV__ ? t('appInfo.items.development') : t('appInfo.items.production')}
+                        />
+                    </SettingsListGroup>
 
-                {/* User Information */}
-                <SettingsListGroup title={t('appInfo.sections.user')}>
-                    <SettingsListItem
-                        icon={<SettingsIcon name="shield-check" color={isAuthenticated ? themeColors.iconPersonalInfo : themeColors.iconSharing} />}
-                        title={t('appInfo.items.authStatus')}
-                        description={isAuthenticated ? t('appInfo.items.authenticated') : t('appInfo.items.notAuthenticated')}
-                    />
-                    {user && (
-                        <>
-                            <SettingsListItem
-                                icon={<SettingsIcon name="account" color={themeColors.iconSecurity} />}
-                                title={t('appInfo.items.userId')}
-                                description={user.id}
-                                onPress={() => copyToClipboard(user.id, t('appInfo.items.userId'))}
-                            />
-                            <SettingsListItem
-                                icon={<SettingsIcon name="at" color={themeColors.iconData} />}
-                                title={t('appInfo.items.username')}
-                                description={user.username || 'N/A'}
-                                onPress={() => {
-                                    if (user?.username && navigate) {
-                                        navigate('Profile', { userId: user.id });
-                                    } else {
-                                        toast.info(t('appInfo.toasts.noUsernameOrNav'));
-                                    }
-                                }}
-                            />
-                            <SettingsListItem
-                                icon={<SettingsIcon name="email" color={themeColors.iconStorage} />}
-                                title={t('appInfo.items.email')}
-                                description={user.email || 'N/A'}
-                            />
-                            <SettingsListItem
-                                icon={<SettingsIcon name="star" color={user.isPremium ? bloomTheme.colors.warning : bloomTheme.colors.textTertiary} />}
-                                title={t('appInfo.items.premiumStatus')}
-                                description={user.isPremium ? t('appInfo.items.premium') : t('appInfo.items.standard')}
-                            />
-                        </>
-                    )}
-                    <SettingsListItem
-                        icon={<SettingsIcon name="account-group" color={themeColors.iconPersonalInfo} />}
-                        title={t('appInfo.items.totalActiveSessions')}
-                        description={sessions?.length?.toString() || '0'}
-                    />
-                </SettingsListGroup>
+                    {/* User Information */}
+                    <SettingsListGroup title={t('appInfo.sections.user')}>
+                        <SettingsListItem
+                            icon={<SettingsIcon name="shield-check" color={isAuthenticated ? colors.success : colors.warning} />}
+                            title={t('appInfo.items.authStatus')}
+                            description={isAuthenticated ? t('appInfo.items.authenticated') : t('appInfo.items.notAuthenticated')}
+                        />
+                        {user && (
+                            <>
+                                <SettingsListItem
+                                    icon={<SettingsIcon name="account" color={colors.primary} />}
+                                    title={t('appInfo.items.userId')}
+                                    description={user.id}
+                                    onPress={() => copyToClipboard(user.id, t('appInfo.items.userId'))}
+                                />
+                                <SettingsListItem
+                                    icon={<SettingsIcon name="at" color={colors.info} />}
+                                    title={t('appInfo.items.username')}
+                                    description={user.username || 'N/A'}
+                                    onPress={() => {
+                                        if (user?.username && navigate) {
+                                            navigate('Profile', { userId: user.id });
+                                        } else {
+                                            toast.info(t('appInfo.toasts.noUsernameOrNav'));
+                                        }
+                                    }}
+                                />
+                                <SettingsListItem
+                                    icon={<SettingsIcon name="email" color={colors.secondary} />}
+                                    title={t('appInfo.items.email')}
+                                    description={user.email || 'N/A'}
+                                />
+                                <SettingsListItem
+                                    icon={<SettingsIcon name="star" color={user.isPremium ? colors.warning : colors.textTertiary} />}
+                                    title={t('appInfo.items.premiumStatus')}
+                                    description={user.isPremium ? t('appInfo.items.premium') : t('appInfo.items.standard')}
+                                />
+                            </>
+                        )}
+                        <SettingsListItem
+                            icon={<SettingsIcon name="account-group" color={colors.success} />}
+                            title={t('appInfo.items.totalActiveSessions')}
+                            description={sessions?.length?.toString() || '0'}
+                        />
+                    </SettingsListGroup>
 
-                {/* API Configuration */}
-                <SettingsListGroup title={t('appInfo.sections.api')}>
-                    <SettingsListItem
-                        icon={<SettingsIcon name="server" color={themeColors.iconSecurity} />}
-                        title={t('appInfo.items.apiBaseUrl')}
-                        description={oxyServices?.getBaseURL() || t('appInfo.items.notConfigured')}
-                        onPress={() => copyToClipboard(oxyServices?.getBaseURL() || t('appInfo.items.notConfigured'), t('appInfo.items.apiBaseUrl'))}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon
-                            name={connectionStatus === 'checking' ? 'sync' : connectionStatus === 'connected' ? 'wifi' : 'wifi-off'}
-                            color={connectionStatus === 'checking' ? themeColors.iconStorage : connectionStatus === 'connected' ? themeColors.iconPersonalInfo : themeColors.iconSharing}
-                        />}
-                        title={t('appInfo.items.connectionStatus')}
-                        description={connectionStatus === 'checking' ? t('appInfo.items.checking') : connectionStatus === 'connected' ? t('appInfo.items.connected') : connectionStatus === 'disconnected' ? t('appInfo.items.disconnected') : t('appInfo.items.unknown')}
-                        onPress={async () => {
-                            setConnectionStatus('checking');
+                    {/* API Configuration */}
+                    <SettingsListGroup title={t('appInfo.sections.api')}>
+                        <SettingsListItem
+                            icon={<SettingsIcon name="server" color={colors.primary} />}
+                            title={t('appInfo.items.apiBaseUrl')}
+                            description={oxyServices?.getBaseURL() || t('appInfo.items.notConfigured')}
+                            onPress={() => copyToClipboard(oxyServices?.getBaseURL() || t('appInfo.items.notConfigured'), t('appInfo.items.apiBaseUrl'))}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon
+                                name={connectionStatus === 'checking' ? 'sync' : connectionStatus === 'connected' ? 'wifi' : 'wifi-off'}
+                                color={connectionStatus === 'checking' ? colors.secondary : connectionStatus === 'connected' ? colors.success : colors.warning}
+                            />}
+                            title={t('appInfo.items.connectionStatus')}
+                            description={connectionStatus === 'checking' ? t('appInfo.items.checking') : connectionStatus === 'connected' ? t('appInfo.items.connected') : connectionStatus === 'disconnected' ? t('appInfo.items.disconnected') : t('appInfo.items.unknown')}
+                            onPress={async () => {
+                                setConnectionStatus('checking');
 
-                            if (!oxyServices) {
-                                setConnectionStatus('disconnected');
-                                toast.error(t('appInfo.toasts.oxyServicesNotInitialized'));
-                                return;
-                            }
+                                if (!oxyServices) {
+                                    setConnectionStatus('disconnected');
+                                    toast.error(t('appInfo.toasts.oxyServicesNotInitialized'));
+                                    return;
+                                }
 
-                            try {
-                                await oxyServices.healthCheck();
-                                setConnectionStatus('connected');
-                                toast.success(t('appInfo.toasts.apiConnectionSuccess'));
-                            } catch (error) {
-                                setConnectionStatus('disconnected');
-                                toast.error(t('appInfo.toasts.apiConnectionFailed'));
-                            }
-                        }}
-                    />
-                </SettingsListGroup>
+                                try {
+                                    await oxyServices.healthCheck();
+                                    setConnectionStatus('connected');
+                                    toast.success(t('appInfo.toasts.apiConnectionSuccess'));
+                                } catch (error) {
+                                    setConnectionStatus('disconnected');
+                                    toast.error(t('appInfo.toasts.apiConnectionFailed'));
+                                }
+                            }}
+                        />
+                    </SettingsListGroup>
 
-                {/* Build Information */}
-                <SettingsListGroup title={t('appInfo.sections.build')}>
-                    <SettingsListItem
-                        icon={<SettingsIcon name="clock" color={themeColors.iconSecurity} />}
-                        title={t('appInfo.items.buildTimestamp')}
-                        description={systemInfo?.timestamp || t('common.status.loading')}
-                        onPress={() => copyToClipboard(systemInfo?.timestamp || t('common.status.loading'), t('appInfo.items.buildTimestamp'))}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="react" color="#61DAFB" />}
-                        title={t('appInfo.items.reactNative')}
-                        description={t('appInfo.items.reactNativeValue')}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="flash" color={themeColors.iconSharing} />}
-                        title={t('appInfo.items.jsEngine')}
-                        description={t('appInfo.items.jsEngineValue')}
-                    />
-                </SettingsListGroup>
+                    {/* Build Information */}
+                    <SettingsListGroup title={t('appInfo.sections.build')}>
+                        <SettingsListItem
+                            icon={<SettingsIcon name="clock" color={colors.primary} />}
+                            title={t('appInfo.items.buildTimestamp')}
+                            description={systemInfo?.timestamp || t('common.status.loading')}
+                            onPress={() => copyToClipboard(systemInfo?.timestamp || t('common.status.loading'), t('appInfo.items.buildTimestamp'))}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="react" color={colors.info} />}
+                            title={t('appInfo.items.reactNative')}
+                            description={t('appInfo.items.reactNativeValue')}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="flash" color={colors.warning} />}
+                            title={t('appInfo.items.jsEngine')}
+                            description={t('appInfo.items.jsEngineValue')}
+                        />
+                    </SettingsListGroup>
 
-                {/* Quick Actions */}
-                <SettingsListGroup title={t('appInfo.sections.quickActions')}>
-                    <SettingsListItem
-                        icon={<SettingsIcon name="content-copy" color={themeColors.iconSecurity} />}
-                        title={t('appInfo.items.copyFullReport')}
-                        description={t('appInfo.items.copyFullReportSubtitle')}
-                        onPress={handleCopyFullReport}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon
-                            name={isRunningSystemCheck ? 'sync' : 'check-circle'}
-                            color={isRunningSystemCheck ? bloomTheme.colors.warning : bloomTheme.colors.success}
-                        />}
-                        title={isRunningSystemCheck ? t('appInfo.items.runningSystemCheck') : t('appInfo.items.runSystemCheck')}
-                        description={isRunningSystemCheck
-                            ? t('appInfo.items.systemCheckRunning')
-                            : t('appInfo.items.systemCheckSubtitle')}
-                        onPress={runSystemCheck}
-                        disabled={isRunningSystemCheck}
-                        rightElement={isRunningSystemCheck ? (
-                            <ActivityIndicator color={bloomTheme.colors.warning} size="small" />
-                        ) : undefined}
-                    />
-                </SettingsListGroup>
+                    {/* Quick Actions */}
+                    <SettingsListGroup title={t('appInfo.sections.quickActions')}>
+                        <SettingsListItem
+                            icon={<SettingsIcon name="content-copy" color={colors.primary} />}
+                            title={t('appInfo.items.copyFullReport')}
+                            description={t('appInfo.items.copyFullReportSubtitle')}
+                            onPress={handleCopyFullReport}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon
+                                name={isRunningSystemCheck ? 'sync' : 'check-circle'}
+                                color={isRunningSystemCheck ? colors.warning : colors.success}
+                            />}
+                            title={isRunningSystemCheck ? t('appInfo.items.runningSystemCheck') : t('appInfo.items.runSystemCheck')}
+                            description={isRunningSystemCheck
+                                ? t('appInfo.items.systemCheckRunning')
+                                : t('appInfo.items.systemCheckSubtitle')}
+                            onPress={runSystemCheck}
+                            disabled={isRunningSystemCheck}
+                            rightElement={isRunningSystemCheck ? (
+                                <ActivityIndicator color={colors.warning} size="small" />
+                            ) : undefined}
+                        />
+                    </SettingsListGroup>
+                </View>
             </ScrollView>
         </View>
     );
 };
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    header: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-    },
-    cancelButton: {
-        padding: 5,
-    },
-    headerTitle: {
-        fontSize: 24,
-        fontWeight: 'bold',
-    },
-    placeholder: {
-        width: 34, // Same width as cancel button to center title
-    },
-    content: {
-        flex: 1,
-        padding: 16,
-    },
-});
-
 export default AppInfoScreen;

package/src/ui/screens/AvatarCropScreen.tsx

@@ -168,13 +168,22 @@ function isCanvasLoadFailure(err: unknown): boolean {
     );
 }
 
+const SENSITIVE_URI_PATTERN =
+    /\b(?:file|content|ph|assets-library):\/\/\S+|\/(?:data|var|private|storage|sdcard|tmp)\/\S+/gi;
+
+function sanitizeImageErrorMessage(message: string): string {
+    return message.replace(SENSITIVE_URI_PATTERN, '[redacted-uri]');
+}
+
 function normalizeCropError(err: unknown): Error {
-    if (err instanceof Error) return err;
     if (isCanvasLoadFailure(err)) {
         return new Error('Image could not be loaded for cropping');
     }
+    if (err instanceof Error) {
+        return new Error(sanitizeImageErrorMessage(err.message || 'Failed to crop image'));
+    }
     if (typeof err === 'string' && err.trim()) {
-        return new Error(err.trim());
+        return new Error(sanitizeImageErrorMessage(err.trim()));
     }
     return new Error('Failed to crop image');
 }
@@ -382,8 +391,12 @@ const AvatarCropScreen: React.FC<AvatarCropScreenProps> = ({
                     setMeasureError(null);
                     setNaturalSize({ width: w, height: h });
                 },
-                (err) => {
-                    logger.error('Image.getSize failed', err, { component: LOG_COMPONENT });
+                () => {
+                    logger.error(
+                        'Image.getSize failed',
+                        new Error('Image measurement failed'),
+                        { component: LOG_COMPONENT },
+                    );
                     const message = t('editProfile.toasts.cropMeasureFailed') ||
                         'Could not measure the image';
                     setMeasureError(message);