@oxyhq/services 5.13.40 → 5.15.0

package/src/ui/screens/HelpSupportScreen.tsx

@@ -7,10 +7,12 @@ import {
     ScrollView,
     Linking,
 } from 'react-native';
-import type { BaseScreenProps } from '../navigation/types';
+import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
 import { Header, Section, GroupedSection } from '../components';
 import { useI18n } from '../hooks/useI18n';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useColorScheme } from '../hooks/use-color-scheme';
 
 const HelpSupportScreen: React.FC<BaseScreenProps> = ({
     onClose,
@@ -18,6 +20,8 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
     goBack,
 }) => {
     const { t } = useI18n();
+    const colorScheme = useColorScheme();
+    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
 
     const handleContactSupport = useMemo(() => () => {
         // In a real implementation, this would open a contact form or email
@@ -26,33 +30,24 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
         });
     }, [t]);
 
+    // TODO: Implement FAQ screen navigation
+    // Currently shows a placeholder toast. Should navigate to a dedicated FAQ screen or modal.
     const handleFAQ = useMemo(() => () => {
-        // In a real implementation, this would navigate to FAQ screen
         toast.info(t('help.faqComing') || 'FAQ coming soon');
     }, [t]);
 
     const handleReportBug = useMemo(() => () => {
-        // In a real implementation, this would open a bug report form
+        // TODO: Consider implementing a dedicated bug report form instead of just email
         Linking.openURL('mailto:bugs@oxy.so?subject=Bug Report').catch(() => {
             toast.error(t('help.reportError') || 'Failed to open email client');
         });
     }, [t]);
 
-    const themeStyles = useMemo(() => {
-        const isDarkTheme = theme === 'dark';
-        return {
-            textColor: isDarkTheme ? '#FFFFFF' : '#000000',
-            backgroundColor: isDarkTheme ? '#121212' : '#FFFFFF',
-            secondaryBackgroundColor: isDarkTheme ? '#222222' : '#F5F5F5',
-            borderColor: isDarkTheme ? '#444444' : '#E0E0E0',
-        };
-    }, [theme]);
-
     return (
         <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
             <Header
                 title={t('help.title') || 'Help & Support'}
-                theme={theme}
+
                 onBack={goBack || onClose}
                 variant="minimal"
                 elevation="subtle"
@@ -60,13 +55,13 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
 
             <ScrollView style={styles.content}>
                 {/* Help Options */}
-                <Section title={t('help.options') || 'Get Help'} theme={theme} isFirst={true}>
+                <Section title={t('help.options') || 'Get Help'} isFirst={true}>
                     <GroupedSection
                         items={[
                             {
                                 id: 'faq',
                                 icon: 'help-circle',
-                                iconColor: '#007AFF',
+                                iconColor: themeStyles.colors.iconSecurity,
                                 title: t('help.faq.title') || 'Frequently Asked Questions',
                                 subtitle: t('help.faq.subtitle') || 'Find answers to common questions',
                                 onPress: handleFAQ,
@@ -74,7 +69,7 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'contact',
                                 icon: 'mail',
-                                iconColor: '#32D74B',
+                                iconColor: themeStyles.colors.iconPersonalInfo,
                                 title: t('help.contact.title') || 'Contact Support',
                                 subtitle: t('help.contact.subtitle') || 'Get help from our support team',
                                 onPress: handleContactSupport,
@@ -82,18 +77,18 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'report-bug',
                                 icon: 'bug',
-                                iconColor: '#FF9500',
+                                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,
                             },
                         ]}
-                        theme={theme}
+
                     />
                 </Section>
 
                 {/* Resources */}
-                <Section title={t('help.resources') || 'Resources'} theme={theme}>
+                <Section title={t('help.resources') || 'Resources'} >
                     <GroupedSection
                         items={[
                             {
@@ -103,7 +98,7 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
                                 title: t('help.documentation.title') || 'Documentation',
                                 subtitle: t('help.documentation.subtitle') || 'User guides and tutorials',
                                 onPress: () => {
-                                    Linking.openURL('https://docs.oxy.so').catch(() => {
+                                    Linking.openURL('https://developer.oxy.so/docs').catch(() => {
                                         toast.error(t('help.linkError') || 'Failed to open link');
                                     });
                                 },
@@ -111,7 +106,7 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'community',
                                 icon: 'people',
-                                iconColor: '#5856D6',
+                                iconColor: themeStyles.colors.iconData,
                                 title: t('help.community.title') || 'Community',
                                 subtitle: t('help.community.subtitle') || 'Join our community',
                                 onPress: () => {
@@ -120,8 +115,20 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
                                     });
                                 },
                             },
+                            {
+                                id: 'developers-portal',
+                                icon: 'code',
+                                iconColor: themeStyles.colors.iconSharing,
+                                title: t('help.developersPortal.title') || 'Developers Portal',
+                                subtitle: t('help.developersPortal.subtitle') || 'API documentation and developer resources',
+                                onPress: () => {
+                                    Linking.openURL('https://developer.oxy.so').catch(() => {
+                                        toast.error(t('help.linkError') || 'Failed to open link');
+                                    });
+                                },
+                            },
                         ]}
-                        theme={theme}
+
                     />
                 </Section>
             </ScrollView>

package/src/ui/screens/HistoryViewScreen.tsx

@@ -1,18 +1,17 @@
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback } from 'react';
 import {
     View,
-    Text,
-    TouchableOpacity,
     StyleSheet,
     ScrollView,
-    ActivityIndicator,
 } from 'react-native';
-import type { BaseScreenProps } from '../navigation/types';
-import { useOxy } from '../context/OxyContext';
+import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
 import { confirmAction } from '../utils/confirmAction';
-import { Header, Section, GroupedSection } from '../components';
+import { Header, Section, GroupedSection, LoadingState, EmptyState } from '../components';
 import { useI18n } from '../hooks/useI18n';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useColorScheme } from '../hooks/use-color-scheme';
+import { useOxy } from '../context/OxyContext';
 
 interface HistoryItem {
     id: string;
@@ -26,8 +25,11 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({
     theme,
     goBack,
 }) => {
+    // Use useOxy() hook for OxyContext values
     const { user } = useOxy();
     const { t } = useI18n();
+    const colorScheme = useColorScheme();
+    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
     const [history, setHistory] = useState<HistoryItem[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [isDeleting, setIsDeleting] = useState(false);
@@ -72,13 +74,13 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({
         }
     };
 
+    // 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.useEffect(() => {
         const loadHistory = async () => {
             try {
                 setIsLoading(true);
-                // In a real implementation, this would fetch from API or local storage
-                // For now, we'll use a mock implementation
                 const storage = await getStorage();
                 const historyKey = `history_${user?.id || 'guest'}`;
                 const stored = await storage.getItem(historyKey);
@@ -153,16 +155,6 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({
         );
     }, [user?.id, t]);
 
-    const themeStyles = useMemo(() => {
-        const isDarkTheme = theme === 'dark';
-        return {
-            textColor: isDarkTheme ? '#FFFFFF' : '#000000',
-            backgroundColor: isDarkTheme ? '#121212' : '#FFFFFF',
-            secondaryBackgroundColor: isDarkTheme ? '#222222' : '#F5F5F5',
-            borderColor: isDarkTheme ? '#444444' : '#E0E0E0',
-        };
-    }, [theme]);
-
     const formatTime = (date: Date) => {
         const now = new Date();
         const diff = now.getTime() - date.getTime();
@@ -181,7 +173,6 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({
         <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
             <Header
                 title={t('history.title') || 'History'}
-                theme={theme}
                 onBack={goBack || onClose}
                 variant="minimal"
                 elevation="subtle"
@@ -189,13 +180,13 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({
 
             <ScrollView style={styles.content}>
                 {/* Actions */}
-                <Section title={t('history.actions') || 'Actions'} theme={theme} isFirst={true}>
+                <Section title={t('history.actions') || 'Actions'} isFirst={true}>
                     <GroupedSection
                         items={[
                             {
                                 id: 'delete-last-15',
                                 icon: 'time-outline',
-                                iconColor: '#FF9500',
+                                iconColor: themeStyles.colors.iconStorage,
                                 title: t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes',
                                 subtitle: t('history.deleteLast15Minutes.subtitle') || 'Remove recent history entries',
                                 onPress: handleDeleteLast15Minutes,
@@ -204,42 +195,38 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'clear-all',
                                 icon: 'trash-outline',
-                                iconColor: '#FF3B30',
+                                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,
                             },
                         ]}
-                        theme={theme}
+
                     />
                 </Section>
 
                 {/* History List */}
-                <Section title={t('history.recent') || 'Recent History'} theme={theme}>
+                <Section title={t('history.recent') || 'Recent History'}>
                     {isLoading ? (
-                        <View style={styles.loadingContainer}>
-                            <ActivityIndicator size="large" color={themeStyles.textColor} />
-                            <Text style={[styles.loadingText, { color: themeStyles.textColor }]}>
-                                {t('history.loading') || 'Loading history...'}
-                            </Text>
-                        </View>
+                        <LoadingState
+                            message={t('history.loading') || 'Loading history...'}
+                            color={themeStyles.textColor}
+                        />
                     ) : history.length === 0 ? (
-                        <View style={styles.emptyContainer}>
-                            <Text style={[styles.emptyText, { color: themeStyles.textColor }]}>
-                                {t('history.empty') || 'No history yet'}
-                            </Text>
-                        </View>
+                        <EmptyState
+                            message={t('history.empty') || 'No history yet'}
+                            textColor={themeStyles.textColor}
+                        />
                     ) : (
                         <GroupedSection
                             items={history.map((item) => ({
                                 id: item.id,
                                 icon: item.type === 'search' ? 'search' : 'globe',
-                                iconColor: item.type === 'search' ? '#007AFF' : '#32D74B',
+                                iconColor: item.type === 'search' ? themeStyles.colors.iconSecurity : themeStyles.colors.iconPersonalInfo,
                                 title: item.query,
                                 subtitle: formatTime(item.timestamp),
                             }))}
-                            theme={theme}
                         />
                     )}
                 </Section>
@@ -256,24 +243,6 @@ const styles = StyleSheet.create({
         flex: 1,
         padding: 16,
     },
-    loadingContainer: {
-        padding: 40,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    loadingText: {
-        marginTop: 12,
-        fontSize: 16,
-    },
-    emptyContainer: {
-        padding: 40,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    emptyText: {
-        fontSize: 16,
-        textAlign: 'center',
-    },
 });
 
 export default React.memo(HistoryViewScreen);

package/src/ui/screens/LanguageSelectorScreen.tsx

@@ -5,16 +5,17 @@ import {
     TouchableOpacity,
     StyleSheet,
     ScrollView,
-    Alert,
 } from 'react-native';
-import type { BaseScreenProps } from '../navigation/types';
-import { useOxy } from '../context/OxyContext';
-import { useThemeColors } from '../styles';
+import type { BaseScreenProps } from '../types/navigation';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useColorScheme } from '../hooks/use-color-scheme';
+import { normalizeTheme } from '../utils/themeUtils';
 import { Ionicons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
-import { Header, Section, GroupedSection } from '../components';
+import { Header, GroupedSection } from '../components';
 import { useI18n } from '../hooks/useI18n';
 import { SUPPORTED_LANGUAGES } from '../../utils/languageUtils';
+import { useOxy } from '../context/OxyContext';
 
 interface LanguageSelectorScreenProps extends BaseScreenProps { }
 
@@ -30,11 +31,14 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
     goBack,
     onClose,
     theme,
-    navigate,
 }) => {
+    // Use useOxy() hook for OxyContext values
     const { user, currentLanguage, setLanguage, oxyServices, isAuthenticated } = useOxy();
     const { t } = useI18n();
-    const colors = useThemeColors(theme);
+    const colorScheme = useColorScheme();
+    const normalizedTheme = normalizeTheme(theme);
+    const themeStyles = useThemeStyles(normalizedTheme, colorScheme);
+    const themeColors = themeStyles.colors;
     const [isLoading, setIsLoading] = useState(false);
 
     // Memoize the language select handler to prevent recreation on every render
@@ -47,7 +51,7 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
 
         try {
             let serverSyncFailed = false;
-            
+
             // If signed in, persist preference to backend user settings
             if (isAuthenticated && user?.id) {
                 try {
@@ -65,10 +69,10 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
             await setLanguage(languageId);
 
             const selectedLang = SUPPORTED_LANGUAGES.find(lang => lang.id === languageId);
-            
+
             // Show success message (language is saved locally regardless of server sync)
             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');
@@ -76,7 +80,7 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
 
             setIsLoading(false);
             // Close the bottom sheet if possible; otherwise, go back
-            if (onClose) onClose(); else goBack();
+            if (onClose) onClose(); else goBack?.();
 
         } catch (error) {
             // Only show error if local storage also failed
@@ -87,109 +91,67 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
     }, [currentLanguage, isLoading, isAuthenticated, user?.id, oxyServices, setLanguage, t, onClose, goBack]);
 
     // Memoize language items to prevent recreation on every render
-    const languageItems = useMemo(() => 
-        SUPPORTED_LANGUAGES.map(language => ({
-            id: language.id,
-            title: language.name,
-            subtitle: language.nativeName,
-            customIcon: (
-                <View style={[styles.languageFlag, { backgroundColor: `${language.color}20` }]}>
-                    <Text style={styles.flagEmoji}>{language.flag}</Text>
-                </View>
-            ),
-            iconColor: language.color,
-            selected: currentLanguage === language.id,
-            onPress: () => handleLanguageSelect(language.id),
-            dense: true,
-        })), 
-        [currentLanguage, handleLanguageSelect]
+    const languageItems = useMemo(() =>
+        SUPPORTED_LANGUAGES.map(language => {
+            const isSelected = currentLanguage === language.id;
+            return {
+                id: language.id,
+                title: language.name,
+                subtitle: language.nativeName,
+                customIcon: (
+                    <View style={[styles.languageFlag, { backgroundColor: `${language.color}15` }]}>
+                        <Text style={styles.flagEmoji}>{language.flag}</Text>
+                    </View>
+                ),
+                iconColor: language.color,
+                selected: isSelected,
+                onPress: () => handleLanguageSelect(language.id),
+                customContent: isSelected ? (
+                    <Ionicons name="checkmark-circle" size={24} color={themeColors.tint} />
+                ) : undefined,
+            };
+        }),
+        [currentLanguage, handleLanguageSelect, themeColors]
     );
 
-    // Memoize current language data to prevent recalculation
-    const currentLanguageData = useMemo(() => {
-        if (!currentLanguage) return null;
-        return SUPPORTED_LANGUAGES.find(lang => lang.id === currentLanguage);
-    }, [currentLanguage]);
-
-    // Memoize current language section items
-    const currentLanguageItems = useMemo(() => {
-        if (!currentLanguageData) return [];
-        return [{
-            id: `current-${currentLanguageData.id}`,
-            title: currentLanguageData.name,
-            subtitle: currentLanguageData.nativeName,
-            customIcon: (
-                <View style={[styles.languageFlag, { backgroundColor: `${currentLanguageData.color}20` }]}>
-                    <Text style={styles.flagEmoji}>{currentLanguageData.flag}</Text>
-                </View>
-            ),
-            iconColor: currentLanguageData.color,
-            selected: false,
-            showChevron: false,
-            dense: true,
-            disabled: true,
-        }];
-    }, [currentLanguageData]);
 
     return (
-        <View style={[styles.container, { backgroundColor: '#f2f2f2' }]}>
+        <View style={[styles.container, { backgroundColor: theme === 'dark' ? '#000000' : '#F5F5F5' }]}>
             <Header
-                title={t('language.title')}
-                subtitle={t('language.subtitle')}
-                theme={theme}
+                title=""
+                subtitle=""
+                theme={normalizedTheme}
                 onBack={onClose || goBack}
                 variant="minimal"
-                elevation="subtle"
+                elevation="none"
             />
 
-            <ScrollView 
-                style={styles.content} 
+            <ScrollView
+                style={styles.content}
+                contentContainerStyle={styles.contentContainer}
                 showsVerticalScrollIndicator={false}
                 removeClippedSubviews={true}
             >
-                {/* Current selection */}
-                {currentLanguage && currentLanguageItems.length > 0 && (
-                    <Section title={t('language.current')} theme={theme} isFirst={true}>
-                        <GroupedSection
-                            items={currentLanguageItems}
-                            theme={theme}
-                        />
-                    </Section>
-                )}
-
-                {/* Available languages */}
-                <Section title={t('language.available')} theme={theme}>
-                    <Text style={[styles.sectionDescription, { color: colors.secondaryText }]}>
-                        {t('language.subtitle')}
+                {/* Big Title */}
+                <View style={styles.titleContainer}>
+                    <Text style={[styles.bigTitle, { color: themeColors.text }]}>
+                        {t('language.title')}
                     </Text>
-                    <View style={styles.languageList}>
-                        <GroupedSection
-                            items={languageItems}
-                            theme={theme}
-                        />
-                    </View>
-                </Section>
+                    {t('language.subtitle') && (
+                        <Text style={[styles.bigSubtitle, { color: themeColors.secondaryText }]}>
+                            {t('language.subtitle')}
+                        </Text>
+                    )}
+                </View>
 
-                {/* Information */}
-                <Section theme={theme}>
-                    <View style={[styles.infoCard, {
-                        backgroundColor: colors.inputBackground,
-                        borderColor: colors.border
+                {/* Available languages - Main section */}
+                <View style={styles.sectionContainer}>
+                    <View style={[styles.materialCard, {
+                        backgroundColor: themeColors.card,
                     }]}>
-                        <View style={styles.infoHeader}>
-                            <Ionicons name="information-circle" size={20} color={colors.primary} />
-                            <Text style={[styles.infoTitle, { color: colors.text }]}>
-                                Language Settings
-                            </Text>
-                        </View>
-                        <Text style={[styles.infoText, { color: colors.secondaryText }]}>
-                            • Language changes apply immediately{'\n'}
-                            • Your preference is saved automatically{'\n'}
-                            • All text and interface elements will update{'\n'}
-                            • You can change this setting anytime
-                        </Text>
+                        <GroupedSection items={languageItems} />
                     </View>
-                </Section>
+                </View>
             </ScrollView>
         </View>
     );
@@ -201,92 +163,44 @@ const styles = StyleSheet.create({
     },
     content: {
         flex: 1,
-        padding: 16,
-    },
-    section: {
-        marginBottom: 24,
-    },
-    sectionTitle: {
-        fontSize: 16,
-        fontWeight: '600',
-        marginBottom: 4,
-    },
-    sectionDescription: {
-        fontSize: 14,
-        lineHeight: 20,
-        marginBottom: 16,
-    },
-    languageList: {
-        marginTop: 8,
     },
-    languageFlag: {
-        width: 38,
-        height: 38,
-        borderRadius: 19,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    flagEmoji: {
-        fontSize: 18,
-    },
-    infoSection: {
-        marginBottom: 24,
-    },
-    infoCard: {
+    contentContainer: {
         padding: 16,
-        borderRadius: 12,
-        borderWidth: 1,
+        paddingTop: 24,
     },
-    infoHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
+    titleContainer: {
+        marginBottom: 32,
+        paddingTop: 0,
+    },
+    bigTitle: {
+        fontSize: 34,
+        fontWeight: '700',
+        lineHeight: 40,
         marginBottom: 8,
+        letterSpacing: -0.5,
     },
-    infoTitle: {
+    bigSubtitle: {
         fontSize: 16,
-        fontWeight: '600',
-        marginLeft: 8,
-    },
-    infoText: {
-        fontSize: 14,
-        lineHeight: 20,
+        lineHeight: 22,
+        opacity: 0.7,
+        marginTop: 4,
     },
-    currentSection: {
-        marginBottom: 24,
-    },
-    currentLabel: {
-        fontSize: 14,
-        fontWeight: '500',
+    sectionContainer: {
         marginBottom: 8,
     },
-    currentLanguage: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: 16,
+    materialCard: {
         borderRadius: 12,
-        borderWidth: 2,
+        overflow: 'hidden',
     },
-    currentFlag: {
-        width: 38,
-        height: 38,
-        borderRadius: 19,
+    languageFlag: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
         alignItems: 'center',
         justifyContent: 'center',
-        marginRight: 12,
-    },
-    currentFlagEmoji: {
-        fontSize: 18,
     },
-    currentInfo: {
-        flex: 1,
-    },
-    currentName: {
-        fontSize: 16,
-        fontWeight: '600',
-    },
-    currentNative: {
-        fontSize: 14,
-        marginTop: 2,
+    flagEmoji: {
+        fontSize: 20,
     },
 });