@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/screens/FollowersListScreen.d.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+interface FollowersListScreenProps extends BaseScreenProps {
+    userId: string;
+    initialCount?: number;
+}
+declare const FollowersListScreen: React.FC<FollowersListScreenProps>;
+export default FollowersListScreen;

package/src/ui/screens/FollowersListScreen.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const UserListScreen_1 = __importDefault(require("./UserListScreen"));
+const FollowersListScreen = (props) => {
+    return (0, jsx_runtime_1.jsx)(UserListScreen_1.default, { ...props, mode: "followers" });
+};
+exports.default = FollowersListScreen;

package/src/ui/screens/FollowingListScreen.d.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+interface FollowingListScreenProps extends BaseScreenProps {
+    userId: string;
+    initialCount?: number;
+}
+declare const FollowingListScreen: React.FC<FollowingListScreenProps>;
+export default FollowingListScreen;

package/src/ui/screens/FollowingListScreen.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const UserListScreen_1 = __importDefault(require("./UserListScreen"));
+const FollowingListScreen = (props) => {
+    return (0, jsx_runtime_1.jsx)(UserListScreen_1.default, { ...props, mode: "following" });
+};
+exports.default = FollowingListScreen;

package/src/ui/screens/HelpSupportScreen.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+declare const _default: React.NamedExoticComponent<BaseScreenProps>;
+export default _default;

package/src/ui/screens/HelpSupportScreen.js

@@ -0,0 +1,140 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const sonner_1 = require("../../lib/sonner");
+const components_1 = require("../components");
+const useI18n_1 = require("../hooks/useI18n");
+const useThemeStyles_1 = require("../hooks/useThemeStyles");
+const useColorScheme_1 = require("../hooks/useColorScheme");
+const HelpSupportScreen = ({ onClose, theme, goBack, navigate, }) => {
+    const { t } = (0, useI18n_1.useI18n)();
+    const colorScheme = (0, useColorScheme_1.useColorScheme)();
+    const themeStyles = (0, useThemeStyles_1.useThemeStyles)(theme || 'light', colorScheme);
+    const handleContactSupport = (0, react_1.useMemo)(() => () => {
+        react_native_1.Linking.openURL('mailto:support@oxy.so?subject=Support Request').catch(() => {
+            sonner_1.toast.error(t('help.contactError') || 'Failed to open email client');
+        });
+    }, [t]);
+    const handleFAQ = (0, react_1.useMemo)(() => () => {
+        if (navigate) {
+            navigate('FAQ');
+        }
+        else {
+            sonner_1.toast.info(t('help.faqComing') || 'FAQ coming soon');
+        }
+    }, [navigate, t]);
+    const handleReportBug = (0, react_1.useMemo)(() => () => {
+        // TODO: Consider implementing a dedicated bug report form instead of just email
+        react_native_1.Linking.openURL('mailto:bugs@oxy.so?subject=Bug Report').catch(() => {
+            sonner_1.toast.error(t('help.reportError') || 'Failed to open email client');
+        });
+    }, [t]);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, { backgroundColor: themeStyles.backgroundColor }], children: [(0, jsx_runtime_1.jsx)(components_1.Header, { title: t('help.title') || 'Help & Support', onBack: goBack || onClose, variant: "minimal", elevation: "subtle" }), (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { style: styles.content, children: [(0, jsx_runtime_1.jsx)(components_1.Section, { title: t('help.options') || 'Get Help', isFirst: true, children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: [
+                                {
+                                    id: 'faq',
+                                    icon: 'help-circle',
+                                    iconColor: themeStyles.colors.iconSecurity,
+                                    title: t('help.faq.title') || 'Frequently Asked Questions',
+                                    subtitle: t('help.faq.subtitle') || 'Find answers to common questions',
+                                    onPress: handleFAQ,
+                                },
+                                {
+                                    id: 'contact',
+                                    icon: 'mail',
+                                    iconColor: themeStyles.colors.iconPersonalInfo,
+                                    title: t('help.contact.title') || 'Contact Support',
+                                    subtitle: t('help.contact.subtitle') || 'Get help from our support team',
+                                    onPress: handleContactSupport,
+                                },
+                                {
+                                    id: 'report-bug',
+                                    icon: 'bug',
+                                    iconColor: themeStyles.colors.iconStorage,
+                                    title: t('help.reportBug.title') || 'Report a Bug',
+                                    subtitle: t('help.reportBug.subtitle') || 'Help us improve by reporting issues',
+                                    onPress: handleReportBug,
+                                },
+                            ] }) }), (0, jsx_runtime_1.jsx)(components_1.Section, { title: t('help.resources') || 'Resources', children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: [
+                                {
+                                    id: 'documentation',
+                                    icon: 'file-document',
+                                    iconColor: '#8E8E93',
+                                    title: t('help.documentation.title') || 'Documentation',
+                                    subtitle: t('help.documentation.subtitle') || 'User guides and tutorials',
+                                    onPress: () => {
+                                        react_native_1.Linking.openURL('https://developer.oxy.so/docs').catch(() => {
+                                            sonner_1.toast.error(t('help.linkError') || 'Failed to open link');
+                                        });
+                                    },
+                                },
+                                {
+                                    id: 'community',
+                                    icon: 'account-group',
+                                    iconColor: themeStyles.colors.iconData,
+                                    title: t('help.community.title') || 'Community',
+                                    subtitle: t('help.community.subtitle') || 'Join our community',
+                                    onPress: () => {
+                                        react_native_1.Linking.openURL('https://community.oxy.so').catch(() => {
+                                            sonner_1.toast.error(t('help.linkError') || 'Failed to open link');
+                                        });
+                                    },
+                                },
+                                {
+                                    id: 'developers-portal',
+                                    icon: 'code-tags',
+                                    iconColor: themeStyles.colors.iconSharing,
+                                    title: t('help.developersPortal.title') || 'Developers Portal',
+                                    subtitle: t('help.developersPortal.subtitle') || 'API documentation and developer resources',
+                                    onPress: () => {
+                                        react_native_1.Linking.openURL('https://developer.oxy.so').catch(() => {
+                                            sonner_1.toast.error(t('help.linkError') || 'Failed to open link');
+                                        });
+                                    },
+                                },
+                            ] }) })] })] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        flex: 1,
+        padding: 16,
+    },
+});
+exports.default = react_1.default.memo(HelpSupportScreen);

package/src/ui/screens/HistoryViewScreen.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+declare const _default: React.NamedExoticComponent<BaseScreenProps>;
+export default _default;

package/src/ui/screens/HistoryViewScreen.js

@@ -0,0 +1,225 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const sonner_1 = require("../../lib/sonner");
+const confirmAction_1 = require("../utils/confirmAction");
+const components_1 = require("../components");
+const useI18n_1 = require("../hooks/useI18n");
+const useThemeStyles_1 = require("../hooks/useThemeStyles");
+const useColorScheme_1 = require("../hooks/useColorScheme");
+const OxyContext_1 = require("../context/OxyContext");
+const HistoryViewScreen = ({ onClose, theme, goBack, }) => {
+    // Use useOxy() hook for OxyContext values
+    const { user } = (0, OxyContext_1.useOxy)();
+    const { t } = (0, useI18n_1.useI18n)();
+    const colorScheme = (0, useColorScheme_1.useColorScheme)();
+    const themeStyles = (0, useThemeStyles_1.useThemeStyles)(theme || 'light', colorScheme);
+    const [history, setHistory] = (0, react_1.useState)([]);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [isDeleting, setIsDeleting] = (0, react_1.useState)(false);
+    // Helper to get storage
+    const getStorage = async () => {
+        const isReactNative = typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
+        if (isReactNative) {
+            try {
+                const asyncStorageModule = await import('@react-native-async-storage/async-storage');
+                const storage = asyncStorageModule.default;
+                return {
+                    getItem: storage.getItem.bind(storage),
+                    setItem: storage.setItem.bind(storage),
+                    removeItem: storage.removeItem.bind(storage),
+                };
+            }
+            catch (error) {
+                if (__DEV__) {
+                    console.error('AsyncStorage not available:', error);
+                }
+                throw new Error('AsyncStorage is required in React Native environment');
+            }
+        }
+        else {
+            // Use localStorage for web
+            return {
+                getItem: async (key) => {
+                    if (typeof window !== 'undefined' && window.localStorage) {
+                        return window.localStorage.getItem(key);
+                    }
+                    return null;
+                },
+                setItem: async (key, value) => {
+                    if (typeof window !== 'undefined' && window.localStorage) {
+                        window.localStorage.setItem(key, value);
+                    }
+                },
+                removeItem: async (key) => {
+                    if (typeof window !== 'undefined' && window.localStorage) {
+                        window.localStorage.removeItem(key);
+                    }
+                }
+            };
+        }
+    };
+    // TODO: Integrate with backend API for history storage
+    // Currently uses local storage only. Should fetch from backend API and sync across devices.
+    // Load history from storage
+    react_1.default.useEffect(() => {
+        const loadHistory = async () => {
+            try {
+                setIsLoading(true);
+                const storage = await getStorage();
+                const historyKey = `history_${user?.id || 'guest'}`;
+                const stored = await storage.getItem(historyKey);
+                if (stored) {
+                    const parsed = JSON.parse(stored);
+                    setHistory(parsed.map((item) => ({
+                        ...item,
+                        timestamp: new Date(item.timestamp),
+                    })));
+                }
+                else {
+                    setHistory([]);
+                }
+            }
+            catch (error) {
+                setHistory([]);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        loadHistory();
+    }, [user?.id]);
+    const handleDeleteLast15Minutes = (0, react_1.useCallback)(async () => {
+        (0, confirmAction_1.confirmAction)(t('history.deleteLast15Minutes.confirm') || 'Delete last 15 minutes of history?', async () => {
+            try {
+                setIsDeleting(true);
+                const fifteenMinutesAgo = new Date(Date.now() - 15 * 60 * 1000);
+                const filtered = history.filter(item => item.timestamp < fifteenMinutesAgo);
+                setHistory(filtered);
+                // Save to storage
+                const storage = await getStorage();
+                const historyKey = `history_${user?.id || 'guest'}`;
+                await storage.setItem(historyKey, JSON.stringify(filtered));
+                sonner_1.toast.success(t('history.deleteLast15Minutes.success') || 'Last 15 minutes deleted');
+            }
+            catch (error) {
+                if (__DEV__) {
+                    console.error('Failed to delete history:', error);
+                }
+                sonner_1.toast.error(t('history.deleteLast15Minutes.error') || 'Failed to delete history');
+            }
+            finally {
+                setIsDeleting(false);
+            }
+        });
+    }, [history, user?.id, t]);
+    const handleClearAll = (0, react_1.useCallback)(async () => {
+        (0, confirmAction_1.confirmAction)(t('history.clearAll.confirm') || 'Clear all history? This cannot be undone.', async () => {
+            try {
+                setIsDeleting(true);
+                setHistory([]);
+                // Clear from storage
+                const storage = await getStorage();
+                const historyKey = `history_${user?.id || 'guest'}`;
+                await storage.removeItem(historyKey);
+                sonner_1.toast.success(t('history.clearAll.success') || 'History cleared');
+            }
+            catch (error) {
+                if (__DEV__) {
+                    console.error('Failed to clear history:', error);
+                }
+                sonner_1.toast.error(t('history.clearAll.error') || 'Failed to clear history');
+            }
+            finally {
+                setIsDeleting(false);
+            }
+        });
+    }, [user?.id, t]);
+    const formatTime = (date) => {
+        const now = new Date();
+        const diff = now.getTime() - date.getTime();
+        const minutes = Math.floor(diff / 60000);
+        const hours = Math.floor(minutes / 60);
+        const days = Math.floor(hours / 24);
+        if (minutes < 1)
+            return t('history.justNow') || 'Just now';
+        if (minutes < 60)
+            return `${minutes} ${t('history.minutesAgo') || 'minutes ago'}`;
+        if (hours < 24)
+            return `${hours} ${t('history.hoursAgo') || 'hours ago'}`;
+        if (days < 7)
+            return `${days} ${t('history.daysAgo') || 'days ago'}`;
+        return date.toLocaleDateString();
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, { backgroundColor: themeStyles.backgroundColor }], children: [(0, jsx_runtime_1.jsx)(components_1.Header, { title: t('history.title') || 'History', onBack: goBack || onClose, variant: "minimal", elevation: "subtle" }), (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { style: styles.content, children: [(0, jsx_runtime_1.jsx)(components_1.Section, { title: t('history.actions') || 'Actions', isFirst: true, children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: [
+                                {
+                                    id: 'delete-last-15',
+                                    icon: 'clock-outline',
+                                    iconColor: themeStyles.colors.iconStorage,
+                                    title: t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes',
+                                    subtitle: t('history.deleteLast15Minutes.subtitle') || 'Remove recent history entries',
+                                    onPress: handleDeleteLast15Minutes,
+                                    disabled: isDeleting || history.length === 0,
+                                },
+                                {
+                                    id: 'clear-all',
+                                    icon: 'delete-outline',
+                                    iconColor: themeStyles.colors.iconSharing,
+                                    title: t('history.clearAll.title') || 'Clear All History',
+                                    subtitle: t('history.clearAll.subtitle') || 'Remove all history entries',
+                                    onPress: handleClearAll,
+                                    disabled: isDeleting || history.length === 0,
+                                },
+                            ] }) }), (0, jsx_runtime_1.jsx)(components_1.Section, { title: t('history.recent') || 'Recent History', children: isLoading ? ((0, jsx_runtime_1.jsx)(components_1.LoadingState, { message: t('history.loading') || 'Loading history...', color: themeStyles.textColor })) : history.length === 0 ? ((0, jsx_runtime_1.jsx)(components_1.EmptyState, { message: t('history.empty') || 'No history yet', textColor: themeStyles.textColor })) : ((0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: history.map((item) => ({
+                                id: item.id,
+                                icon: item.type === 'search' ? 'search' : 'globe',
+                                iconColor: item.type === 'search' ? themeStyles.colors.iconSecurity : themeStyles.colors.iconPersonalInfo,
+                                title: item.query,
+                                subtitle: formatTime(item.timestamp),
+                            })) })) })] })] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        flex: 1,
+        padding: 16,
+    },
+});
+exports.default = react_1.default.memo(HistoryViewScreen);

package/src/ui/screens/LanguageSelectorScreen.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+interface LanguageSelectorScreenProps extends BaseScreenProps {
+}
+declare const _default: React.NamedExoticComponent<LanguageSelectorScreenProps>;
+export default _default;

package/src/ui/screens/LanguageSelectorScreen.js

@@ -0,0 +1,178 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const useThemeStyles_1 = require("../hooks/useThemeStyles");
+const useColorScheme_1 = require("../hooks/useColorScheme");
+const themeUtils_1 = require("../utils/themeUtils");
+const vector_icons_1 = require("@expo/vector-icons");
+const sonner_1 = require("../../lib/sonner");
+const components_1 = require("../components");
+const useI18n_1 = require("../hooks/useI18n");
+const core_1 = require("@oxyhq/core");
+const OxyContext_1 = require("../context/OxyContext");
+const fonts_1 = require("../styles/fonts");
+/**
+ * LanguageSelectorScreen - Optimized for performance
+ *
+ * Performance optimizations:
+ * - useMemo for language items to prevent recreation on every render
+ * - useCallback for handlers to prevent unnecessary re-renders
+ * - Memoized current language section
+ */
+const LanguageSelectorScreen = ({ goBack, onClose, theme, }) => {
+    // Use useOxy() hook for OxyContext values
+    const { user, currentLanguage, setLanguage, oxyServices, isAuthenticated } = (0, OxyContext_1.useOxy)();
+    const { t } = (0, useI18n_1.useI18n)();
+    const colorScheme = (0, useColorScheme_1.useColorScheme)();
+    const normalizedTheme = (0, themeUtils_1.normalizeTheme)(theme);
+    const themeStyles = (0, useThemeStyles_1.useThemeStyles)(normalizedTheme, colorScheme);
+    const themeColors = themeStyles.colors;
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    // Memoize the language select handler to prevent recreation on every render
+    const handleLanguageSelect = (0, react_1.useCallback)(async (languageId) => {
+        if (languageId === currentLanguage || isLoading) {
+            return; // Already selected or loading
+        }
+        setIsLoading(true);
+        try {
+            let serverSyncFailed = false;
+            // If signed in, persist preference to backend user settings
+            if (isAuthenticated && user?.id) {
+                try {
+                    await oxyServices.updateProfile({ language: languageId });
+                }
+                catch (e) {
+                    // Server sync failed, but we'll save locally anyway
+                    serverSyncFailed = true;
+                    if (__DEV__) {
+                        console.warn('Failed to sync language to server (will save locally only):', e instanceof Error ? e.message : e);
+                    }
+                }
+            }
+            // Always persist locally for immediate UX and for guests
+            await setLanguage(languageId);
+            const selectedLang = core_1.SUPPORTED_LANGUAGES.find(lang => lang.id === languageId);
+            // Show success message (language is saved locally regardless of server sync)
+            sonner_1.toast.success(t('language.changed', { lang: selectedLang?.name || languageId }));
+            // Log server sync failure only in dev mode (user experience is still good - saved locally)
+            if (serverSyncFailed && __DEV__) {
+                console.warn('Language saved locally but server sync failed');
+            }
+            setIsLoading(false);
+            // Close the bottom sheet if possible; otherwise, go back
+            if (onClose)
+                onClose();
+            else
+                goBack?.();
+        }
+        catch (error) {
+            // Only show error if local storage also failed
+            if (__DEV__) {
+                console.error('Error saving language preference:', error);
+            }
+            sonner_1.toast.error(t('language.saveFailed'));
+            setIsLoading(false);
+        }
+    }, [currentLanguage, isLoading, isAuthenticated, user?.id, oxyServices, setLanguage, t, onClose, goBack]);
+    // Memoize language items to prevent recreation on every render
+    const languageItems = (0, react_1.useMemo)(() => core_1.SUPPORTED_LANGUAGES.map(language => {
+        const isSelected = currentLanguage === language.id;
+        return {
+            id: language.id,
+            title: language.name,
+            subtitle: language.nativeName,
+            customIcon: ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.languageFlag, { backgroundColor: `${language.color}15` }], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.flagEmoji, children: language.flag }) })),
+            iconColor: language.color,
+            selected: isSelected,
+            onPress: () => handleLanguageSelect(language.id),
+            customContent: isSelected ? ((0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "checkmark-circle", size: 24, color: themeColors.tint })) : undefined,
+        };
+    }), [currentLanguage, handleLanguageSelect, themeColors]);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, { backgroundColor: theme === 'dark' ? '#000000' : '#F5F5F5' }], children: [(0, jsx_runtime_1.jsx)(components_1.Header, { title: "", subtitle: "", theme: normalizedTheme, onBack: onClose || goBack, variant: "minimal", elevation: "none" }), (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { style: styles.content, contentContainerStyle: styles.contentContainer, showsVerticalScrollIndicator: false, removeClippedSubviews: true, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.titleContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.bigTitle, { color: themeColors.text }], children: t('language.title') }), t('language.subtitle') && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.bigSubtitle, { color: themeColors.secondaryText }], children: t('language.subtitle') }))] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.sectionContainer, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.materialCard, {
+                                    backgroundColor: themeColors.card,
+                                }], children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: languageItems }) }) })] })] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        flex: 1,
+    },
+    contentContainer: {
+        padding: 16,
+        paddingTop: 24,
+    },
+    titleContainer: {
+        marginBottom: 32,
+        paddingTop: 0,
+    },
+    bigTitle: {
+        fontSize: 34,
+        fontWeight: react_native_1.Platform.OS === 'web' ? 'bold' : undefined,
+        fontFamily: fonts_1.fontFamilies.interBold,
+        lineHeight: 40,
+        marginBottom: 8,
+        letterSpacing: -0.5,
+    },
+    bigSubtitle: {
+        fontSize: 16,
+        lineHeight: 22,
+        opacity: 0.7,
+        marginTop: 4,
+    },
+    sectionContainer: {
+        marginBottom: 8,
+    },
+    materialCard: {
+        borderRadius: 12,
+        overflow: 'hidden',
+    },
+    languageFlag: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    flagEmoji: {
+        fontSize: 20,
+    },
+});
+// Export memoized component to prevent unnecessary re-renders
+exports.default = react_1.default.memo(LanguageSelectorScreen);

package/src/ui/screens/LearnMoreUsernamesScreen.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+declare const LearnMoreUsernamesScreen: React.FC<BaseScreenProps>;
+export default LearnMoreUsernamesScreen;