@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/screens/SavesCollectionsScreen.js

@@ -0,0 +1,150 @@
+"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 OxyContext_1 = require("../context/OxyContext");
+const SavesCollectionsScreen = ({ onClose, theme, goBack, }) => {
+    // Use useOxy() hook for OxyContext values
+    const { oxyServices, user } = (0, OxyContext_1.useOxy)();
+    const { t } = (0, useI18n_1.useI18n)();
+    const [savedItems, setSavedItems] = (0, react_1.useState)([]);
+    const [collections, setCollections] = (0, react_1.useState)([]);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [activeTab, setActiveTab] = (0, react_1.useState)('saves');
+    const colorScheme = (0, useColorScheme_1.useColorScheme)();
+    const themeStyles = (0, useThemeStyles_1.useThemeStyles)(theme || 'light', colorScheme);
+    const tabActiveColor = themeStyles.colors.iconSecurity;
+    const tabInactiveColor = themeStyles.isDarkTheme ? '#888888' : '#666666';
+    // Load saved items and collections from API
+    (0, react_1.useEffect)(() => {
+        const loadData = async () => {
+            try {
+                setIsLoading(true);
+                if (user?.id && oxyServices) {
+                    const [saved, cols] = await Promise.all([
+                        oxyServices.getSavedItems(user.id),
+                        oxyServices.getCollections(user.id),
+                    ]);
+                    setSavedItems(saved.map((item) => ({
+                        id: item.id,
+                        title: item.title,
+                        type: item.itemType === 'post' ? 'post' : 'collection',
+                        savedAt: new Date(item.createdAt),
+                        url: item.url,
+                    })));
+                    setCollections(cols.map((col) => ({
+                        id: col.id,
+                        name: col.name,
+                        description: col.description,
+                        itemCount: col.itemCount,
+                        createdAt: col.createdAt ? new Date(col.createdAt) : undefined,
+                    })));
+                }
+            }
+            catch (error) {
+                sonner_1.toast.error(t('saves.loadError') || 'Failed to load saved items');
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        loadData();
+    }, [user?.id, oxyServices, t]);
+    const formatDate = (date) => {
+        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('saves.title') || 'Saves & Collections', onBack: goBack || onClose, variant: "minimal", elevation: "subtle" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.tabs, { borderBottomColor: themeStyles.borderColor }], children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                            styles.tab,
+                            activeTab === 'saves' && { borderBottomColor: tabActiveColor },
+                        ], onPress: () => setActiveTab('saves'), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                styles.tabText,
+                                {
+                                    color: activeTab === 'saves' ? tabActiveColor : tabInactiveColor,
+                                    fontWeight: activeTab === 'saves' ? '600' : '400',
+                                },
+                            ], children: t('saves.tabs.saves') || 'Saves' }) }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                            styles.tab,
+                            activeTab === 'collections' && { borderBottomColor: tabActiveColor },
+                        ], onPress: () => setActiveTab('collections'), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                styles.tabText,
+                                {
+                                    color: activeTab === 'collections' ? tabActiveColor : tabInactiveColor,
+                                    fontWeight: activeTab === 'collections' ? '600' : '400',
+                                },
+                            ], children: t('saves.tabs.collections') || 'Collections' }) })] }), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: styles.content, children: isLoading ? ((0, jsx_runtime_1.jsx)(components_1.LoadingState, { message: t('saves.loading') || 'Loading...', color: themeStyles.textColor })) : activeTab === 'saves' ? (savedItems.length === 0 ? ((0, jsx_runtime_1.jsx)(components_1.EmptyState, { message: t('saves.empty') || 'No saved items yet', textColor: themeStyles.textColor })) : ((0, jsx_runtime_1.jsx)(components_1.Section, { title: t('saves.savedItems') || 'Saved Items', isFirst: true, children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: savedItems.map((item) => ({
+                            id: item.id,
+                            icon: item.type === 'post' ? 'document-text' : 'folder',
+                            iconColor: item.type === 'post' ? themeStyles.colors.iconSecurity : themeStyles.colors.iconStorage,
+                            title: item.title,
+                            subtitle: formatDate(item.savedAt),
+                        })) }) }))) : (collections.length === 0 ? ((0, jsx_runtime_1.jsx)(components_1.EmptyState, { message: t('saves.noCollections') || 'No collections yet', textColor: themeStyles.textColor })) : ((0, jsx_runtime_1.jsx)(components_1.Section, { title: t('saves.collections') || 'Collections', isFirst: true, children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: collections.map((collection) => ({
+                            id: collection.id,
+                            icon: 'folder',
+                            iconColor: themeStyles.colors.iconStorage,
+                            title: collection.name,
+                            subtitle: `${collection.itemCount || 0} items`,
+                        })) }) }))) })] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    tabs: {
+        flexDirection: 'row',
+        borderBottomWidth: 1,
+    },
+    tab: {
+        flex: 1,
+        paddingVertical: 16,
+        alignItems: 'center',
+        borderBottomWidth: 2,
+        borderBottomColor: 'transparent',
+    },
+    tabText: {
+        fontSize: 16,
+    },
+    content: {
+        flex: 1,
+        padding: 16,
+    },
+});
+exports.default = react_1.default.memo(SavesCollectionsScreen);

package/src/ui/screens/SearchSettingsScreen.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/SearchSettingsScreen.js

@@ -0,0 +1,109 @@
+"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 components_1 = require("../components");
+const useI18n_1 = require("../hooks/useI18n");
+const useThemeStyles_1 = require("../hooks/useThemeStyles");
+const useSettingToggle_1 = require("../hooks/useSettingToggle");
+const themeUtils_1 = require("../utils/themeUtils");
+const OxyContext_1 = require("../context/OxyContext");
+const SearchSettingsScreen = ({ onClose, theme, goBack, }) => {
+    const { oxyServices, user } = (0, OxyContext_1.useOxy)();
+    const { t } = (0, useI18n_1.useI18n)();
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    // Use the existing useSettingToggles hook for toggle management
+    const { values: settings, toggle, savingKeys, setValues } = (0, useSettingToggle_1.useSettingToggles)({
+        initialValues: { safeSearch: false, searchPersonalization: true },
+        onSave: async (key, value) => {
+            if (!user?.id || !oxyServices)
+                return;
+            const fieldMap = {
+                safeSearch: 'autoFilter',
+                searchPersonalization: 'dataSharing',
+            };
+            await oxyServices.updateProfile({
+                privacySettings: {
+                    [fieldMap[key]]: value,
+                },
+            });
+        },
+        errorMessage: (key) => t(`searchSettings.${key}.error`) || `Failed to update ${key}`,
+    });
+    const isSaving = savingKeys.size > 0;
+    // Load initial settings
+    (0, react_1.useEffect)(() => {
+        const loadSettings = async () => {
+            try {
+                setIsLoading(true);
+                if (user?.id && oxyServices) {
+                    const userData = await oxyServices.getCurrentUser();
+                    const privacySettings = userData?.privacySettings || {};
+                    setValues({
+                        safeSearch: privacySettings.autoFilter ?? false,
+                        searchPersonalization: privacySettings.dataSharing ?? true,
+                    });
+                }
+            }
+            catch (error) {
+                if (__DEV__) {
+                    console.error('Failed to load search settings:', error);
+                }
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        loadSettings();
+    }, [user?.id, oxyServices, setValues]);
+    const normalizedTheme = (0, themeUtils_1.normalizeTheme)(theme);
+    const themeStyles = (0, useThemeStyles_1.useThemeStyles)(normalizedTheme);
+    if (isLoading) {
+        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('searchSettings.title') || 'Search Settings', onBack: goBack || onClose, variant: "minimal", elevation: "subtle" }), (0, jsx_runtime_1.jsx)(components_1.LoadingState, { color: themeStyles.textColor })] }));
+    }
+    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('searchSettings.title') || 'Search Settings', 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('searchSettings.safeSearch.title') || 'SafeSearch', isFirst: true, children: (0, jsx_runtime_1.jsx)(components_1.SettingRow, { title: t('searchSettings.safeSearch.label') || 'Enable SafeSearch', description: t('searchSettings.safeSearch.description') || 'Filter out explicit content from search results', value: settings.safeSearch, onValueChange: () => toggle('safeSearch'), disabled: isSaving, textColor: themeStyles.textColor, mutedTextColor: themeStyles.mutedTextColor, borderColor: themeStyles.borderColor }) }), (0, jsx_runtime_1.jsx)(components_1.Section, { title: t('searchSettings.personalization.title') || 'Search Personalization', children: (0, jsx_runtime_1.jsx)(components_1.SettingRow, { title: t('searchSettings.personalization.label') || 'Personalized Search', description: t('searchSettings.personalization.description') || 'Use your activity to improve search results', value: settings.searchPersonalization, onValueChange: () => toggle('searchPersonalization'), disabled: isSaving, textColor: themeStyles.textColor, mutedTextColor: themeStyles.mutedTextColor, borderColor: themeStyles.borderColor }) })] })] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        flex: 1,
+        padding: 16,
+    },
+});
+exports.default = react_1.default.memo(SearchSettingsScreen);

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

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

package/src/ui/screens/SessionManagementScreen.js

@@ -0,0 +1,320 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const spacing_1 = require("../constants/spacing");
+const sonner_1 = require("../../lib/sonner");
+const confirmAction_1 = require("../utils/confirmAction");
+const components_1 = require("../components");
+const useThemeStyles_1 = require("../hooks/useThemeStyles");
+const themeUtils_1 = require("../utils/themeUtils");
+const OxyContext_1 = require("../context/OxyContext");
+const useI18n_1 = require("../hooks/useI18n");
+// Button background colors for session actions
+const SWITCH_BUTTON_BG = {
+    dark: '#1E2A38',
+    light: '#E6F2FF',
+};
+const LOGOUT_BUTTON_BG = {
+    dark: '#3A1E1E',
+    light: '#FFEBEE',
+};
+const SessionManagementScreen = ({ onClose, theme, goBack, }) => {
+    // Use useOxy() hook for OxyContext values
+    const { sessions: userSessions, activeSessionId, refreshSessions, logout, logoutAll, switchSession, } = (0, OxyContext_1.useOxy)();
+    const { t } = (0, useI18n_1.useI18n)();
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [refreshing, setRefreshing] = (0, react_1.useState)(false);
+    const [actionLoading, setActionLoading] = (0, react_1.useState)(null);
+    const [switchLoading, setSwitchLoading] = (0, react_1.useState)(null);
+    const [lastRefreshed, setLastRefreshed] = (0, react_1.useState)(null);
+    // Use centralized theme styles hook for consistency
+    const normalizedTheme = (0, themeUtils_1.normalizeTheme)(theme);
+    const themeStyles = (0, useThemeStyles_1.useThemeStyles)(normalizedTheme);
+    // Extract commonly used colors for readability
+    const { textColor, backgroundColor, borderColor, primaryColor, dangerColor, successColor, isDarkTheme } = themeStyles;
+    // Memoized load sessions function - prevents unnecessary re-renders
+    const loadSessions = (0, react_1.useCallback)(async (isRefresh = false) => {
+        try {
+            if (isRefresh) {
+                setRefreshing(true);
+            }
+            else {
+                setLoading(true);
+            }
+            await refreshSessions();
+            setLastRefreshed(new Date());
+        }
+        catch (error) {
+            if (__DEV__) {
+                console.error('Failed to load sessions:', error);
+            }
+            if (react_native_1.Platform.OS === 'web') {
+                sonner_1.toast.error(t('sessionManagement.toasts.loadFailed'));
+            }
+            else {
+                react_native_1.Alert.alert('Error', t('sessionManagement.toasts.loadFailed'), [{ text: 'OK' }]);
+            }
+        }
+        finally {
+            setLoading(false);
+            setRefreshing(false);
+        }
+    }, [refreshSessions]);
+    // Memoized logout session handler - prevents unnecessary re-renders
+    const handleLogoutSession = (0, react_1.useCallback)(async (sessionId) => {
+        (0, confirmAction_1.confirmAction)(t('sessionManagement.confirms.logoutSession'), async () => {
+            try {
+                setActionLoading(sessionId);
+                await logout(sessionId);
+                await refreshSessions();
+                sonner_1.toast.success(t('sessionManagement.toasts.logoutSuccess'));
+            }
+            catch (error) {
+                if (__DEV__) {
+                    console.error('Logout session failed:', error);
+                }
+                sonner_1.toast.error(t('sessionManagement.toasts.logoutFailed'));
+            }
+            finally {
+                setActionLoading(null);
+            }
+        });
+    }, [logout, refreshSessions]);
+    // Memoized bulk action items - prevents unnecessary re-renders when dependencies haven't changed
+    const otherSessionsCount = (0, react_1.useMemo)(() => userSessions.filter(s => s.sessionId !== activeSessionId).length, [userSessions, activeSessionId]);
+    // Memoized logout other sessions handler - prevents unnecessary re-renders
+    const handleLogoutOtherSessions = (0, react_1.useCallback)(async () => {
+        if (otherSessionsCount === 0) {
+            sonner_1.toast.info(t('sessionManagement.toasts.noOtherSessions'));
+            return;
+        }
+        (0, confirmAction_1.confirmAction)(t('sessionManagement.confirms.logoutOthers', { count: otherSessionsCount }), async () => {
+            try {
+                setActionLoading('others');
+                for (const session of userSessions) {
+                    if (session.sessionId !== activeSessionId) {
+                        await logout(session.sessionId);
+                    }
+                }
+                await refreshSessions();
+                sonner_1.toast.success(t('sessionManagement.toasts.logoutOthersSuccess'));
+            }
+            catch (error) {
+                if (__DEV__) {
+                    console.error('Logout other sessions failed:', error);
+                }
+                sonner_1.toast.error(t('sessionManagement.toasts.logoutOthersFailed'));
+            }
+            finally {
+                setActionLoading(null);
+            }
+        });
+    }, [otherSessionsCount, userSessions, activeSessionId, logout, refreshSessions]);
+    // Memoized logout all sessions handler - prevents unnecessary re-renders
+    const handleLogoutAllSessions = (0, react_1.useCallback)(async () => {
+        (0, confirmAction_1.confirmAction)(t('sessionManagement.confirms.logoutAll'), async () => {
+            try {
+                setActionLoading('all');
+                await logoutAll();
+            }
+            catch (error) {
+                if (__DEV__) {
+                    console.error('Logout all sessions failed:', error);
+                }
+                sonner_1.toast.error(t('sessionManagement.toasts.logoutAllFailed'));
+            }
+            finally {
+                setActionLoading(null);
+            }
+        });
+    }, [logoutAll]);
+    // Memoized relative time formatter - prevents function recreation on every render
+    const formatRelative = (0, react_1.useCallback)((dateString) => {
+        if (!dateString)
+            return t('appInfo.items.unknown');
+        const date = new Date(dateString);
+        const now = new Date();
+        const diffMs = date.getTime() - now.getTime();
+        const absMin = Math.abs(diffMs) / 60000;
+        const isFuture = diffMs > 0;
+        const fmt = (n) => (n < 1 ? 'moments' : Math.floor(n));
+        if (absMin < 1)
+            return isFuture ? 'in moments' : 'just now';
+        if (absMin < 60)
+            return isFuture ? `in ${fmt(absMin)}m` : `${fmt(absMin)}m ago`;
+        const hrs = absMin / 60;
+        if (hrs < 24)
+            return isFuture ? `in ${fmt(hrs)}h` : `${fmt(hrs)}h ago`;
+        const days = hrs / 24;
+        if (days < 7)
+            return isFuture ? `in ${fmt(days)}d` : `${fmt(days)}d ago`;
+        return date.toLocaleDateString();
+    }, []);
+    // Memoized switch session handler - prevents unnecessary re-renders
+    const handleSwitchSession = (0, react_1.useCallback)(async (sessionId) => {
+        if (sessionId === activeSessionId)
+            return;
+        setSwitchLoading(sessionId);
+        try {
+            await switchSession(sessionId);
+            sonner_1.toast.success(t('sessionManagement.toasts.switchSuccess'));
+        }
+        catch (e) {
+            if (__DEV__) {
+                console.error('Switch session failed', e);
+            }
+            sonner_1.toast.error(t('sessionManagement.toasts.switchFailed'));
+        }
+        finally {
+            setSwitchLoading(null);
+        }
+    }, [activeSessionId, switchSession]);
+    // Memoized refresh handler for pull-to-refresh
+    const handleRefresh = (0, react_1.useCallback)(() => {
+        loadSessions(true);
+    }, [loadSessions]);
+    (0, react_1.useEffect)(() => {
+        loadSessions();
+    }, [loadSessions]);
+    // Memoized session items - prevents unnecessary re-renders when dependencies haven't changed
+    const sessionItems = (0, react_1.useMemo)(() => {
+        return userSessions.map((session) => {
+            const isCurrent = session.sessionId === activeSessionId;
+            const subtitleParts = [];
+            if (session.deviceId)
+                subtitleParts.push(`Device ${session.deviceId.substring(0, 10)}...`);
+            subtitleParts.push(`Last ${formatRelative(session.lastActive)}`);
+            subtitleParts.push(`Expires ${formatRelative(session.expiresAt)}`);
+            return {
+                id: session.sessionId,
+                icon: isCurrent ? 'shield-checkmark' : 'laptop-outline',
+                iconColor: isCurrent ? successColor : primaryColor,
+                title: isCurrent ? t('sessionManagement.currentSession') : t('sessionManagement.sessionLabel', { id: session.sessionId.substring(0, 8) }),
+                subtitle: subtitleParts.join(' \u2022 '),
+                showChevron: false,
+                multiRow: true,
+                customContentBelow: !isCurrent ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.sessionActionsRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: () => handleSwitchSession(session.sessionId), style: [styles.sessionPillButton, { backgroundColor: isDarkTheme ? SWITCH_BUTTON_BG.dark : SWITCH_BUTTON_BG.light, borderColor: primaryColor }], disabled: switchLoading === session.sessionId || actionLoading === session.sessionId, children: switchLoading === session.sessionId ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: primaryColor })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.sessionPillText, { color: primaryColor }], children: t('sessionManagement.switch') })) }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: () => handleLogoutSession(session.sessionId), style: [styles.sessionPillButton, { backgroundColor: isDarkTheme ? LOGOUT_BUTTON_BG.dark : LOGOUT_BUTTON_BG.light, borderColor: dangerColor }], disabled: actionLoading === session.sessionId || switchLoading === session.sessionId, children: actionLoading === session.sessionId ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: dangerColor })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.sessionPillText, { color: dangerColor }], children: t('sessionManagement.logout') })) })] })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.sessionActionsRow, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.currentBadgeText, { color: successColor }], children: t('sessionManagement.active') }) })),
+                selected: isCurrent,
+                dense: true,
+            };
+        });
+    }, [userSessions, activeSessionId, formatRelative, successColor, primaryColor, isDarkTheme, switchLoading, actionLoading, handleSwitchSession, handleLogoutSession, dangerColor]);
+    const bulkItems = (0, react_1.useMemo)(() => [
+        {
+            id: 'logout-others',
+            icon: 'exit-outline',
+            iconColor: primaryColor,
+            title: t('sessionManagement.logoutOthers.title'),
+            subtitle: otherSessionsCount === 0 ? t('sessionManagement.logoutOthers.noOtherSessions') : t('sessionManagement.logoutOthers.subtitle'),
+            onPress: handleLogoutOtherSessions,
+            showChevron: false,
+            customContent: actionLoading === 'others' ? (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: primaryColor }) : undefined,
+            disabled: actionLoading === 'others' || otherSessionsCount === 0,
+            dense: true,
+        },
+        {
+            id: 'logout-all',
+            icon: 'warning-outline',
+            iconColor: dangerColor,
+            title: t('sessionManagement.logoutAll.title'),
+            subtitle: t('sessionManagement.logoutAll.subtitle'),
+            onPress: handleLogoutAllSessions,
+            showChevron: false,
+            customContent: actionLoading === 'all' ? (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: dangerColor }) : undefined,
+            disabled: actionLoading === 'all',
+            dense: true,
+        },
+    ], [otherSessionsCount, primaryColor, dangerColor, handleLogoutOtherSessions, handleLogoutAllSessions, actionLoading]);
+    if (loading) {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, styles.centerContent, { backgroundColor }], children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "large", color: primaryColor }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.loadingText, { color: textColor }], children: t('sessionManagement.loading') })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, { backgroundColor }], children: [(0, jsx_runtime_1.jsx)(components_1.Header, { title: t('sessionManagement.title'), subtitle: t('sessionManagement.subtitle'), onBack: goBack || onClose, elevation: "subtle" }), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: styles.scrollView, contentContainerStyle: styles.scrollContainer, refreshControl: (0, jsx_runtime_1.jsx)(react_native_1.RefreshControl, { refreshing: refreshing, onRefresh: handleRefresh, tintColor: primaryColor }), children: userSessions.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [lastRefreshed && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.metaText, { color: '#777', marginBottom: 6 }], children: t('sessionManagement.lastRefreshed', { time: formatRelative(lastRefreshed.toISOString()) }) })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.fullBleed, children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: sessionItems }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.sectionSpacer }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.fullBleed, children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: bulkItems }) })] })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.emptyState, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.emptyStateText, { color: isDarkTheme ? '#BBBBBB' : '#666666' }], children: t('sessionManagement.empty') }) })) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.footer, { borderTopColor: borderColor }], children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.closeButton, onPress: onClose, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.closeButtonText, { color: primaryColor }], children: t('sessionManagement.close') }) }) })] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    centerContent: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    scrollView: {
+        flex: 1,
+    },
+    scrollContainer: {
+        ...spacing_1.screenContentStyle,
+        paddingTop: 0, // Header handles top spacing
+    },
+    // Removed legacy session card & bulk action styles (now using GroupedSection)
+    sessionActionsRow: {
+        flexDirection: 'row',
+        gap: 8,
+        marginTop: 6,
+    },
+    sessionPillButton: {
+        paddingHorizontal: 14,
+        paddingVertical: 6,
+        borderRadius: 20,
+        borderWidth: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    sessionPillText: {
+        fontSize: 12,
+        fontWeight: '600',
+        letterSpacing: 0.3,
+        textTransform: 'uppercase',
+    },
+    currentBadgeText: {
+        fontSize: 12,
+        fontWeight: '600',
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+        backgroundColor: '#2E7D3215',
+        borderRadius: 16,
+        overflow: 'hidden',
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    },
+    metaText: {
+        fontSize: 12,
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+        fontWeight: '600',
+    },
+    fullBleed: {
+        width: '100%',
+        alignSelf: 'stretch',
+    },
+    sectionSpacer: {
+        height: 12,
+    },
+    emptyState: {
+        alignItems: 'center',
+        paddingVertical: 40,
+    },
+    emptyStateText: {
+        fontSize: 16,
+        fontStyle: 'italic',
+    },
+    loadingText: {
+        fontSize: 16,
+        marginTop: 16,
+    },
+    footer: {
+        padding: 16,
+        borderTopWidth: 1,
+        alignItems: 'center',
+    },
+    closeButton: {
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+    },
+    closeButtonText: {
+        fontSize: 16,
+        fontWeight: '600',
+    },
+});
+exports.default = SessionManagementScreen;

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

@@ -0,0 +1,14 @@
+import type React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+interface UserLinksScreenProps extends BaseScreenProps {
+    userId: string;
+    links?: Array<{
+        url: string;
+        title?: string;
+        description?: string;
+        image?: string;
+        id: string;
+    }>;
+}
+declare const UserLinksScreen: React.FC<UserLinksScreenProps>;
+export default UserLinksScreen;

package/src/ui/screens/UserLinksScreen.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const components_1 = require("../components");
+const useThemeStyles_1 = require("../hooks/useThemeStyles");
+const themeUtils_1 = require("../utils/themeUtils");
+const useI18n_1 = require("../hooks/useI18n");
+const UserLinksScreen = ({ userId, links = [], theme, goBack, navigate }) => {
+    // Use centralized theme styles hook for consistency
+    // primaryColor from hook (#007AFF) is already correct for this screen
+    const normalizedTheme = (0, themeUtils_1.normalizeTheme)(theme);
+    const themeStyles = (0, useThemeStyles_1.useThemeStyles)(normalizedTheme);
+    const { t } = (0, useI18n_1.useI18n)();
+    const handleLinkPress = async (url) => {
+        try {
+            await react_native_1.Linking.openURL(url);
+        }
+        catch (error) {
+            if (__DEV__) {
+                console.error('Error opening link:', error);
+            }
+        }
+    };
+    const groupedItems = links.map((link) => ({
+        id: link.id,
+        icon: link.image ? undefined : 'link',
+        iconColor: '#32D74B',
+        image: link.image || undefined,
+        imageSize: 40,
+        title: link.title || link.url,
+        subtitle: link.description || link.url,
+        onPress: () => handleLinkPress(link.url),
+        multiRow: true,
+    }));
+    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('userLinks.title'), subtitle: links.length !== 1 ? t('userLinks.linkCount_plural', { count: links.length }) : t('userLinks.linkCount', { count: links.length }), onBack: goBack, elevation: "subtle" }), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: styles.content, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.sectionTitle, { color: themeStyles.textColor }], children: t('userLinks.title') }), (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: groupedItems })] }) })] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#f2f2f2',
+    },
+    content: {
+        flex: 1,
+        padding: 16,
+    },
+    section: {
+        marginBottom: 24,
+    },
+    sectionTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: 12,
+    },
+});
+exports.default = UserLinksScreen;