@oxyhq/services 5.13.40 → 5.15.0

package/src/ui/screens/SavesCollectionsScreen.tsx

@@ -1,17 +1,18 @@
-import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import React, { useState, useEffect } 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 { 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 SavedItem {
     id: string;
@@ -26,6 +27,7 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
     theme,
     goBack,
 }) => {
+    // Use useOxy() hook for OxyContext values
     const { oxyServices, user } = useOxy();
     const { t } = useI18n();
     const [savedItems, setSavedItems] = useState<SavedItem[]>([]);
@@ -33,12 +35,24 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
     const [isLoading, setIsLoading] = useState(true);
     const [activeTab, setActiveTab] = useState<'saves' | 'collections'>('saves');
 
+    const colorScheme = useColorScheme();
+    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
+    const tabActiveColor = themeStyles.colors.iconSecurity;
+    const tabInactiveColor = themeStyles.isDarkTheme ? '#888888' : '#666666';
+
+    // TODO: Implement API integration for saved items and collections
+    // Currently sets empty arrays. Should fetch from oxyServices.getSavedItems() and oxyServices.getCollections()
     // Load saved items and collections
     useEffect(() => {
         const loadData = async () => {
             try {
                 setIsLoading(true);
                 if (user?.id && oxyServices) {
+                    // TODO: Replace with actual API calls
+                    // const saved = await oxyServices.getSavedItems(user.id);
+                    // const cols = await oxyServices.getCollections(user.id);
+                    // setSavedItems(saved);
+                    // setCollections(cols);
                     setSavedItems([]);
                     setCollections([]);
                 }
@@ -52,18 +66,6 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
         loadData();
     }, [user?.id, oxyServices, 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',
-            tabActiveColor: '#007AFF',
-            tabInactiveColor: isDarkTheme ? '#888888' : '#666666',
-        };
-    }, [theme]);
-
     const formatDate = (date: Date) => {
         return date.toLocaleDateString();
     };
@@ -72,7 +74,6 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
         <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
             <Header
                 title={t('saves.title') || 'Saves & Collections'}
-                theme={theme}
                 onBack={goBack || onClose}
                 variant="minimal"
                 elevation="subtle"
@@ -83,7 +84,7 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
                 <TouchableOpacity
                     style={[
                         styles.tab,
-                        activeTab === 'saves' && { borderBottomColor: themeStyles.tabActiveColor },
+                        activeTab === 'saves' && { borderBottomColor: tabActiveColor },
                     ]}
                     onPress={() => setActiveTab('saves')}
                 >
@@ -91,7 +92,7 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
                         style={[
                             styles.tabText,
                             {
-                                color: activeTab === 'saves' ? themeStyles.tabActiveColor : themeStyles.tabInactiveColor,
+                                color: activeTab === 'saves' ? tabActiveColor : tabInactiveColor,
                                 fontWeight: activeTab === 'saves' ? '600' : '400',
                             },
                         ]}
@@ -102,7 +103,7 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
                 <TouchableOpacity
                     style={[
                         styles.tab,
-                        activeTab === 'collections' && { borderBottomColor: themeStyles.tabActiveColor },
+                        activeTab === 'collections' && { borderBottomColor: tabActiveColor },
                     ]}
                     onPress={() => setActiveTab('collections')}
                 >
@@ -110,7 +111,7 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
                         style={[
                             styles.tabText,
                             {
-                                color: activeTab === 'collections' ? themeStyles.tabActiveColor : themeStyles.tabInactiveColor,
+                                color: activeTab === 'collections' ? tabActiveColor : tabInactiveColor,
                                 fontWeight: activeTab === 'collections' ? '600' : '400',
                             },
                         ]}
@@ -122,51 +123,45 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
 
             <ScrollView style={styles.content}>
                 {isLoading ? (
-                    <View style={styles.loadingContainer}>
-                        <ActivityIndicator size="large" color={themeStyles.textColor} />
-                        <Text style={[styles.loadingText, { color: themeStyles.textColor }]}>
-                            {t('saves.loading') || 'Loading...'}
-                        </Text>
-                    </View>
+                    <LoadingState
+                        message={t('saves.loading') || 'Loading...'}
+                        color={themeStyles.textColor}
+                    />
                 ) : activeTab === 'saves' ? (
                     savedItems.length === 0 ? (
-                        <View style={styles.emptyContainer}>
-                            <Text style={[styles.emptyText, { color: themeStyles.textColor }]}>
-                                {t('saves.empty') || 'No saved items yet'}
-                            </Text>
-                        </View>
+                        <EmptyState
+                            message={t('saves.empty') || 'No saved items yet'}
+                            textColor={themeStyles.textColor}
+                        />
                     ) : (
-                        <Section title={t('saves.savedItems') || 'Saved Items'} theme={theme} isFirst={true}>
+                        <Section title={t('saves.savedItems') || 'Saved Items'} isFirst={true}>
                             <GroupedSection
                                 items={savedItems.map((item) => ({
                                     id: item.id,
                                     icon: item.type === 'post' ? 'document-text' : 'folder',
-                                    iconColor: item.type === 'post' ? '#007AFF' : '#FF9500',
+                                    iconColor: item.type === 'post' ? themeStyles.colors.iconSecurity : themeStyles.colors.iconStorage,
                                     title: item.title,
                                     subtitle: formatDate(item.savedAt),
                                 }))}
-                                theme={theme}
                             />
                         </Section>
                     )
                 ) : (
                     collections.length === 0 ? (
-                        <View style={styles.emptyContainer}>
-                            <Text style={[styles.emptyText, { color: themeStyles.textColor }]}>
-                                {t('saves.noCollections') || 'No collections yet'}
-                            </Text>
-                        </View>
+                        <EmptyState
+                            message={t('saves.noCollections') || 'No collections yet'}
+                            textColor={themeStyles.textColor}
+                        />
                     ) : (
-                        <Section title={t('saves.collections') || 'Collections'} theme={theme} isFirst={true}>
+                        <Section title={t('saves.collections') || 'Collections'} isFirst={true}>
                             <GroupedSection
                                 items={collections.map((collection) => ({
                                     id: collection.id,
                                     icon: 'folder',
-                                    iconColor: '#FF9500',
+                                    iconColor: themeStyles.colors.iconStorage,
                                     title: collection.name,
                                     subtitle: `${collection.itemCount || 0} items`,
                                 }))}
-                                theme={theme}
                             />
                         </Section>
                     )
@@ -198,24 +193,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(SavesCollectionsScreen);

package/src/ui/screens/SearchSettingsScreen.tsx

@@ -1,24 +1,23 @@
-import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import {
     View,
-    Text,
-    TouchableOpacity,
     StyleSheet,
     ScrollView,
-    Switch,
-    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 { Header, Section, GroupedSection } from '../components';
+import { Header, Section, LoadingState, SettingRow } from '../components';
 import { useI18n } from '../hooks/useI18n';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { normalizeTheme } from '../utils/themeUtils';
+import { useOxy } from '../context/OxyContext';
 
 const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
     onClose,
     theme,
     goBack,
 }) => {
+    // Use useOxy() hook for OxyContext values
     const { oxyServices, user } = useOxy();
     const { t } = useI18n();
     const [safeSearch, setSafeSearch] = useState(false);
@@ -35,7 +34,7 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
                     // Load from user's privacy settings
                     const userData = await oxyServices.getCurrentUser();
                     const privacySettings = (userData as any)?.privacySettings || {};
-                    
+
                     // SafeSearch is typically stored in privacySettings.autoFilter or a separate field
                     setSafeSearch(privacySettings.autoFilter ?? false);
                     setSearchPersonalization(privacySettings.dataSharing ?? true);
@@ -54,7 +53,7 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
         try {
             setIsSaving(true);
             setSafeSearch(value);
-            
+
             if (user?.id && oxyServices) {
                 // Update privacy settings
                 await oxyServices.updateProfile({
@@ -77,7 +76,7 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
         try {
             setIsSaving(true);
             setSearchPersonalization(value);
-            
+
             if (user?.id && oxyServices) {
                 // Update privacy settings
                 await oxyServices.updateProfile({
@@ -96,29 +95,19 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
         }
     }, [user?.id, oxyServices, 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 normalizedTheme = normalizeTheme(theme);
+    const themeStyles = useThemeStyles(normalizedTheme);
 
     if (isLoading) {
         return (
             <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
                 <Header
                     title={t('searchSettings.title') || 'Search Settings'}
-                    theme={theme}
                     onBack={goBack || onClose}
                     variant="minimal"
                     elevation="subtle"
                 />
-                <View style={styles.loadingContainer}>
-                    <ActivityIndicator size="large" color={themeStyles.textColor} />
-                </View>
+                <LoadingState color={themeStyles.textColor} />
             </View>
         );
     }
@@ -127,7 +116,7 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
         <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
             <Header
                 title={t('searchSettings.title') || 'Search Settings'}
-                theme={theme}
+
                 onBack={goBack || onClose}
                 variant="minimal"
                 elevation="subtle"
@@ -135,45 +124,31 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
 
             <ScrollView style={styles.content}>
                 {/* SafeSearch */}
-                <Section title={t('searchSettings.safeSearch.title') || 'SafeSearch'} theme={theme} isFirst={true}>
-                    <View style={[styles.settingRow, { borderBottomColor: themeStyles.borderColor }]}>
-                        <View style={styles.settingInfo}>
-                            <Text style={[styles.settingTitle, { color: themeStyles.textColor }]}>
-                                {t('searchSettings.safeSearch.label') || 'Enable SafeSearch'}
-                            </Text>
-                            <Text style={[styles.settingDescription, { color: themeStyles.textColor }]}>
-                                {t('searchSettings.safeSearch.description') || 'Filter out explicit content from search results'}
-                            </Text>
-                        </View>
-                        <Switch
-                            value={safeSearch}
-                            onValueChange={handleSafeSearchToggle}
-                            disabled={isSaving}
-                            trackColor={{ false: '#767577', true: '#d169e5' }}
-                            thumbColor={safeSearch ? '#fff' : '#f4f3f4'}
-                        />
-                    </View>
+                <Section title={t('searchSettings.safeSearch.title') || 'SafeSearch'} isFirst={true}>
+                    <SettingRow
+                        title={t('searchSettings.safeSearch.label') || 'Enable SafeSearch'}
+                        description={t('searchSettings.safeSearch.description') || 'Filter out explicit content from search results'}
+                        value={safeSearch}
+                        onValueChange={handleSafeSearchToggle}
+                        disabled={isSaving}
+                        textColor={themeStyles.textColor}
+                        mutedTextColor={themeStyles.mutedTextColor}
+                        borderColor={themeStyles.borderColor}
+                    />
                 </Section>
 
                 {/* Search Personalization */}
-                <Section title={t('searchSettings.personalization.title') || 'Search Personalization'} theme={theme}>
-                    <View style={[styles.settingRow, { borderBottomColor: themeStyles.borderColor }]}>
-                        <View style={styles.settingInfo}>
-                            <Text style={[styles.settingTitle, { color: themeStyles.textColor }]}>
-                                {t('searchSettings.personalization.label') || 'Personalized Search'}
-                            </Text>
-                            <Text style={[styles.settingDescription, { color: themeStyles.textColor }]}>
-                                {t('searchSettings.personalization.description') || 'Use your activity to improve search results'}
-                            </Text>
-                        </View>
-                        <Switch
-                            value={searchPersonalization}
-                            onValueChange={handlePersonalizationToggle}
-                            disabled={isSaving}
-                            trackColor={{ false: '#767577', true: '#d169e5' }}
-                            thumbColor={searchPersonalization ? '#fff' : '#f4f3f4'}
-                        />
-                    </View>
+                <Section title={t('searchSettings.personalization.title') || 'Search Personalization'}>
+                    <SettingRow
+                        title={t('searchSettings.personalization.label') || 'Personalized Search'}
+                        description={t('searchSettings.personalization.description') || 'Use your activity to improve search results'}
+                        value={searchPersonalization}
+                        onValueChange={handlePersonalizationToggle}
+                        disabled={isSaving}
+                        textColor={themeStyles.textColor}
+                        mutedTextColor={themeStyles.mutedTextColor}
+                        borderColor={themeStyles.borderColor}
+                    />
                 </Section>
             </ScrollView>
         </View>
@@ -188,31 +163,6 @@ const styles = StyleSheet.create({
         flex: 1,
         padding: 16,
     },
-    loadingContainer: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    settingRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingVertical: 16,
-        borderBottomWidth: 1,
-    },
-    settingInfo: {
-        flex: 1,
-        marginRight: 16,
-    },
-    settingTitle: {
-        fontSize: 16,
-        fontWeight: '500',
-        marginBottom: 4,
-    },
-    settingDescription: {
-        fontSize: 14,
-        opacity: 0.7,
-    },
 });
 
 export default React.memo(SearchSettingsScreen);

package/src/ui/screens/SessionManagementScreen.tsx

@@ -11,33 +11,41 @@ import {
     Platform,
     RefreshControl,
 } from 'react-native';
-import type { BaseScreenProps } from '../navigation/types';
-import { useOxy } from '../context/OxyContext';
+import type { BaseScreenProps } from '../types/navigation';
+import { screenContentStyle } from '../constants/spacing';
 import { toast } from '../../lib/sonner';
 import type { ClientSession } from '../../models/session';
 import { confirmAction } from '../utils/confirmAction';
 import { Header, GroupedSection } from '../components';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { normalizeTheme } from '../utils/themeUtils';
+import { useOxy } from '../context/OxyContext';
 
 const SessionManagementScreen: React.FC<BaseScreenProps> = ({
     onClose,
     theme,
     goBack,
 }) => {
-    const { sessions: userSessions, activeSessionId, refreshSessions, logout, logoutAll, switchSession } = useOxy();
+    // Use useOxy() hook for OxyContext values
+    const {
+        sessions: userSessions,
+        activeSessionId,
+        refreshSessions,
+        logout,
+        logoutAll,
+        switchSession,
+    } = useOxy();
     const [loading, setLoading] = useState(true);
     const [refreshing, setRefreshing] = useState(false);
     const [actionLoading, setActionLoading] = useState<string | null>(null);
     const [switchLoading, setSwitchLoading] = useState<string | null>(null);
     const [lastRefreshed, setLastRefreshed] = useState<Date | null>(null);
 
-    const isDarkTheme = theme === 'dark';
-    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
-    const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
-    const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#F5F5F5';
-    const borderColor = isDarkTheme ? '#444444' : '#E0E0E0';
-    const primaryColor = '#0066CC';
-    const dangerColor = '#D32F2F';
-    const successColor = '#2E7D32';
+    // Use centralized theme styles hook for consistency
+    const normalizedTheme = normalizeTheme(theme);
+    const themeStyles = useThemeStyles(normalizedTheme);
+    // Extract commonly used colors for readability
+    const { textColor, backgroundColor, secondaryBackgroundColor, borderColor, primaryColor, dangerColor, successColor, isDarkTheme } = themeStyles;
 
     // Memoized load sessions function - prevents unnecessary re-renders
     const loadSessions = useCallback(async (isRefresh = false) => {
@@ -230,7 +238,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
     }, [userSessions, activeSessionId, formatRelative, successColor, primaryColor, isDarkTheme, switchLoading, actionLoading, handleSwitchSession, handleLogoutSession, dangerColor]);
 
     // Memoized bulk action items - prevents unnecessary re-renders when dependencies haven't changed
-    const otherSessionsCount = useMemo(() => 
+    const otherSessionsCount = useMemo(() =>
         userSessions.filter(s => s.sessionId !== activeSessionId).length,
         [userSessions, activeSessionId]
     );
@@ -267,7 +275,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
             <Header
                 title="Active Sessions"
                 subtitle="Manage your active sessions across all devices"
-                theme={theme}
+
                 onBack={goBack || onClose}
                 elevation="subtle"
             />
@@ -288,11 +296,11 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                             <Text style={[styles.metaText, { color: isDarkTheme ? '#777' : '#777', marginBottom: 6 }]}>Last refreshed {formatRelative(lastRefreshed.toISOString())}</Text>
                         )}
                         <View style={styles.fullBleed}>
-                            <GroupedSection items={sessionItems} theme={theme as 'light' | 'dark'} />
+                            <GroupedSection items={sessionItems} />
                         </View>
                         <View style={{ height: 12 }} />
                         <View style={styles.fullBleed}>
-                            <GroupedSection items={bulkItems} theme={theme as 'light' | 'dark'} />
+                            <GroupedSection items={bulkItems} />
                         </View>
                     </>
                 ) : (
@@ -324,8 +332,8 @@ const styles = StyleSheet.create({
         flex: 1,
     },
     scrollContainer: {
-        padding: 20,
-        paddingTop: 0,
+        ...screenContentStyle,
+        paddingTop: 0, // Header handles top spacing
     },
     // Removed legacy session card & bulk action styles (now using GroupedSection)
     sessionActionsRow: {

package/src/ui/screens/UserLinksScreen.tsx

@@ -1,12 +1,14 @@
 import type React from 'react';
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, Linking } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import type { BaseScreenProps } from '../navigation/types';
+import type { BaseScreenProps } from '../types/navigation';
 import { Header, GroupedSection } from '../components';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { normalizeTheme } from '../utils/themeUtils';
 
 interface UserLinksScreenProps extends BaseScreenProps {
     userId: string;
-    links: Array<{
+    links?: Array<{
         url: string;
         title?: string;
         description?: string;
@@ -17,17 +19,15 @@ interface UserLinksScreenProps extends BaseScreenProps {
 
 const UserLinksScreen: React.FC<UserLinksScreenProps> = ({
     userId,
-    links,
+    links = [],
     theme,
     goBack,
     navigate
 }) => {
-    const isDarkTheme = theme === 'dark';
-    const themeStyles = {
-        backgroundColor: isDarkTheme ? '#000' : '#f2f2f2',
-        textColor: isDarkTheme ? '#fff' : '#333',
-        primaryColor: '#007AFF',
-    };
+    // Use centralized theme styles hook for consistency
+    // primaryColor from hook (#007AFF) is already correct for this screen
+    const normalizedTheme = normalizeTheme(theme);
+    const themeStyles = useThemeStyles(normalizedTheme);
 
     const handleLinkPress = async (url: string) => {
         try {
@@ -54,7 +54,6 @@ const UserLinksScreen: React.FC<UserLinksScreenProps> = ({
             <Header
                 title="Links"
                 subtitle={`${links.length} link${links.length !== 1 ? 's' : ''}`}
-                theme={theme}
                 onBack={goBack}
                 elevation="subtle"
             />
@@ -65,7 +64,7 @@ const UserLinksScreen: React.FC<UserLinksScreenProps> = ({
 
                     <GroupedSection
                         items={groupedItems}
-                        theme={theme}
+
                     />
                 </View>
             </ScrollView>