@oxy.so/services 1.0.0

package/src/ui/screens/FollowersListScreen.tsx

@@ -0,0 +1,17 @@
+import type React from 'react';
+import type { FollowGraphSort } from '@oxy.so/core';
+import type { BaseScreenProps } from '../types/navigation';
+import UserListScreen from './UserListScreen';
+
+interface FollowersListScreenProps extends BaseScreenProps {
+  userId: string;
+  initialCount?: number;
+  /** List ordering — see `UserListScreen`. Omitted ⇒ the server default. */
+  sort?: FollowGraphSort;
+}
+
+const FollowersListScreen: React.FC<FollowersListScreenProps> = (props) => {
+  return <UserListScreen {...props} mode="followers" />;
+};
+
+export default FollowersListScreen;

package/src/ui/screens/FollowingListScreen.tsx

@@ -0,0 +1,17 @@
+import type React from 'react';
+import type { FollowGraphSort } from '@oxy.so/core';
+import type { BaseScreenProps } from '../types/navigation';
+import UserListScreen from './UserListScreen';
+
+interface FollowingListScreenProps extends BaseScreenProps {
+  userId: string;
+  initialCount?: number;
+  /** List ordering — see `UserListScreen`. Omitted ⇒ the server default. */
+  sort?: FollowGraphSort;
+}
+
+const FollowingListScreen: React.FC<FollowingListScreenProps> = (props) => {
+  return <UserListScreen {...props} mode="following" />;
+};
+
+export default FollowingListScreen;

package/src/ui/screens/HelpSupportScreen.tsx

@@ -0,0 +1,111 @@
+import React, { useMemo } from 'react';
+import { View, Linking } from 'react-native';
+import type { BaseScreenProps } from '../types/navigation';
+import { toast } from '@oxy.so/bloom/toast';
+import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { SettingsIcon } from '../components/SettingsIcon';
+import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
+
+const HelpSupportScreen: React.FC<BaseScreenProps> = ({
+    onClose,
+    goBack,
+    navigate,
+}) => {
+    const { t } = useI18n();
+
+    useSurfaceHeader({ title: t('help.title') || 'Help & Support' });
+    const bloomTheme = useTheme();
+
+    const handleContactSupport = useMemo(() => () => {
+        Linking.openURL('mailto:support@oxy.so?subject=Support Request').catch(() => {
+            toast.error(t('help.contactError') || 'Failed to open email client');
+        });
+    }, [t]);
+
+    const handleFAQ = useMemo(() => () => {
+        if (navigate) {
+            navigate('FAQ');
+        } else {
+            toast.info(t('help.faqComing') || 'FAQ coming soon');
+        }
+    }, [navigate, t]);
+
+    const handleReportBug = useMemo(() => () => {
+        Linking.openURL('mailto:bugs@oxy.so?subject=Bug Report').catch(() => {
+            toast.error(t('help.reportError') || 'Failed to open email client');
+        });
+    }, [t]);
+
+    const handleDocumentation = useMemo(() => () => {
+        Linking.openURL('https://developer.oxy.so/docs').catch(() => {
+            toast.error(t('help.linkError') || 'Failed to open link');
+        });
+    }, [t]);
+
+    const handleCommunity = useMemo(() => () => {
+        Linking.openURL('https://community.oxy.so').catch(() => {
+            toast.error(t('help.linkError') || 'Failed to open link');
+        });
+    }, [t]);
+
+    const handleDevelopersPortal = useMemo(() => () => {
+        Linking.openURL('https://developer.oxy.so').catch(() => {
+            toast.error(t('help.linkError') || 'Failed to open link');
+        });
+    }, [t]);
+
+    return (
+        <>
+
+            <View className="px-screen-margin pb-space-24">
+                    {/* Help Options */}
+                    <SettingsListGroup title={t('help.options') || 'Get Help'}>
+                        <SettingsListItem
+                            icon={<SettingsIcon name="help-circle" color={bloomTheme.colors.info} />}
+                            title={t('help.faq.title') || 'Frequently Asked Questions'}
+                            description={t('help.faq.subtitle') || 'Find answers to common questions'}
+                            onPress={handleFAQ}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="email" color={bloomTheme.colors.success} />}
+                            title={t('help.contact.title') || 'Contact Support'}
+                            description={t('help.contact.subtitle') || 'Get help from our support team'}
+                            onPress={handleContactSupport}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="bug" color={bloomTheme.colors.warning} />}
+                            title={t('help.reportBug.title') || 'Report a Bug'}
+                            description={t('help.reportBug.subtitle') || 'Help us improve by reporting issues'}
+                            onPress={handleReportBug}
+                        />
+                    </SettingsListGroup>
+
+                    {/* Resources */}
+                    <SettingsListGroup title={t('help.resources') || 'Resources'}>
+                        <SettingsListItem
+                            icon={<SettingsIcon name="file-document" color={bloomTheme.colors.textTertiary} />}
+                            title={t('help.documentation.title') || 'Documentation'}
+                            description={t('help.documentation.subtitle') || 'User guides and tutorials'}
+                            onPress={handleDocumentation}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="account-group" color={bloomTheme.colors.secondary} />}
+                            title={t('help.community.title') || 'Community'}
+                            description={t('help.community.subtitle') || 'Join our community'}
+                            onPress={handleCommunity}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="code-tags" color={bloomTheme.colors.error} />}
+                            title={t('help.developersPortal.title') || 'Developers Portal'}
+                            description={t('help.developersPortal.subtitle') || 'API documentation and developer resources'}
+                            onPress={handleDevelopersPortal}
+                        />
+                    </SettingsListGroup>
+                </View>
+        </>
+    );
+};
+
+export default React.memo(HelpSupportScreen);

package/src/ui/screens/HistoryViewScreen.tsx

@@ -0,0 +1,128 @@
+import React, { useState, useCallback } from 'react';
+import { View } from 'react-native';
+import type { BaseScreenProps } from '../types/navigation';
+import { toast } from '@oxy.so/bloom/toast';
+import { Loading } from '@oxy.so/bloom/loading';
+import { Text } from '@oxy.so/bloom/typography';
+import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { SettingsIcon } from '../components/SettingsIcon';
+import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { useOxy } from '../context/OxyContext';
+import { surfaces } from '@oxy.so/bloom/surfaces';
+import { createPlatformStorage } from '../utils/storageHelpers';
+
+interface HistoryItem { id: string; query: string; type: 'search' | 'browse'; timestamp: Date; }
+
+const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
+    // History is scoped to the ACTIVE account so a switch into an org/project/bot
+    // shows that account's history, not the device-session owner's.
+    const { user } = useOxy();
+    const { t } = useI18n();
+
+    useSurfaceHeader({ title: t('history.title') || 'History' });
+    const bloomTheme = useTheme();
+    const [history, setHistory] = useState<HistoryItem[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isDeleting, setIsDeleting] = useState(false);
+
+    React.useEffect(() => {
+        const load = async () => {
+            try {
+                setIsLoading(true);
+                const storage = await createPlatformStorage();
+                const stored = await storage.getItem(`history_${user?.id || 'guest'}`);
+                if (stored) { const parsed = JSON.parse(stored); setHistory(parsed.map((i: HistoryItem) => ({ ...i, timestamp: new Date(i.timestamp) }))); }
+                else setHistory([]);
+            } catch { setHistory([]); } finally { setIsLoading(false); }
+        };
+        load();
+    }, [user?.id]);
+
+    const handleDeleteLast15Minutes = useCallback(async () => {
+        const confirmed = await surfaces.confirm({
+            title: t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes',
+            description: t('history.deleteLast15Minutes.confirm') || 'Delete last 15 minutes of history?',
+            confirmLabel: t('common.actions.delete') || 'Delete',
+            cancelLabel: t('common.cancel') || 'Cancel',
+            destructive: true,
+        });
+        if (!confirmed) return;
+        try {
+            setIsDeleting(true);
+            const cutoff = new Date(Date.now() - 15 * 60 * 1000);
+            const filtered = history.filter(item => item.timestamp < cutoff);
+            setHistory(filtered);
+            const storage = await createPlatformStorage();
+            await storage.setItem(`history_${user?.id || 'guest'}`, JSON.stringify(filtered));
+            toast.success(t('history.deleteLast15Minutes.success') || 'Last 15 minutes deleted');
+        } catch (e) { if (__DEV__) console.error('Failed to delete history:', e); toast.error(t('history.deleteLast15Minutes.error') || 'Failed to delete history'); }
+        finally { setIsDeleting(false); }
+    }, [history, user?.id, t]);
+
+    const handleClearAll = useCallback(async () => {
+        const confirmed = await surfaces.confirm({
+            title: t('history.clearAll.title') || 'Clear All History',
+            description: t('history.clearAll.confirm') || 'Clear all history? This cannot be undone.',
+            confirmLabel: t('history.clearAll.title') || 'Clear All',
+            cancelLabel: t('common.cancel') || 'Cancel',
+            destructive: true,
+        });
+        if (!confirmed) return;
+        try {
+            setIsDeleting(true); setHistory([]);
+            const storage = await createPlatformStorage();
+            await storage.removeItem(`history_${user?.id || 'guest'}`);
+            toast.success(t('history.clearAll.success') || 'History cleared');
+        } catch (e) { if (__DEV__) console.error('Failed to clear history:', e); toast.error(t('history.clearAll.error') || 'Failed to clear history'); }
+        finally { setIsDeleting(false); }
+    }, [user?.id, t]);
+
+    const formatTime = (date: Date) => {
+        const diff = new Date().getTime() - date.getTime();
+        const min = Math.floor(diff / 60000); const hrs = Math.floor(min / 60); const days = Math.floor(hrs / 24);
+        if (min < 1) return t('history.justNow') || 'Just now';
+        if (min < 60) return `${min} ${t('history.minutesAgo') || 'minutes ago'}`;
+        if (hrs < 24) return `${hrs} ${t('history.hoursAgo') || 'hours ago'}`;
+        if (days < 7) return `${days} ${t('history.daysAgo') || 'days ago'}`;
+        return date.toLocaleDateString();
+    };
+
+    return (
+        <>
+            <View className="px-screen-margin pb-space-24">
+                    <SettingsListGroup title={t('history.actions') || 'Actions'}>
+                        <SettingsListItem
+                            icon={<SettingsIcon name="clock-outline" color={bloomTheme.colors.warning} />}
+                            title={t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes'}
+                            description={t('history.deleteLast15Minutes.subtitle') || 'Remove recent history entries'}
+                            onPress={handleDeleteLast15Minutes}
+                            disabled={isDeleting || history.length === 0}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="delete-outline" color={bloomTheme.colors.error} />}
+                            title={t('history.clearAll.title') || 'Clear All History'}
+                            description={t('history.clearAll.subtitle') || 'Remove all history entries'}
+                            onPress={handleClearAll}
+                            disabled={isDeleting || history.length === 0}
+                        />
+                    </SettingsListGroup>
+                    <SettingsListGroup title={t('history.recent') || 'Recent History'}>
+                        {isLoading ? <Loading size="large" color={bloomTheme.colors.text} text={t('history.loading') || 'Loading history...'} />
+                         : history.length === 0 ? <Text className="text-text-secondary text-center p-space-40">{t('history.empty') || 'No history yet'}</Text>
+                         : history.map(item => (
+                            <SettingsListItem
+                                key={item.id}
+                                icon={<SettingsIcon name={item.type === 'search' ? 'magnify' : 'earth'} color={item.type === 'search' ? bloomTheme.colors.info : bloomTheme.colors.primary} />}
+                                title={item.query}
+                                description={formatTime(item.timestamp)}
+                            />
+                        ))}
+                    </SettingsListGroup>
+                </View>
+        </>
+    );
+};
+
+export default React.memo(HistoryViewScreen);

package/src/ui/screens/LanguageSelectorScreen.tsx

@@ -0,0 +1,264 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import type { BaseScreenProps } from '../types/navigation';
+import { useTheme } from '@oxy.so/bloom/theme';
+import Ionicons from '../icons/Ionicons';
+import { toast } from '@oxy.so/bloom/toast';
+import { Text } from '@oxy.so/bloom/typography';
+import { Search } from '@oxy.so/bloom/search';
+import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import {
+    SUPPORTED_LANGUAGES,
+    getNativeLanguageName,
+    type SupportedLanguage,
+} from '@oxy.so/core';
+import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
+import { useOxy } from '../context/OxyContext';
+import { addLocale, removeLocale, setPrimaryLocale } from '../hooks/useLanguageManagement';
+import { useUpdateProfile } from '../hooks/mutations/useAccountMutations';
+
+interface LanguageSelectorScreenProps extends BaseScreenProps { }
+
+// Size (in dp) of the circular chip rendered as each row's leading icon.
+const CHIP_SIZE = 40;
+// Trailing remove-affordance icon size (dp).
+const REMOVE_ICON_SIZE = 24;
+
+/** O(1) catalog lookup by canonical locale code. */
+const CATALOG_BY_CODE: ReadonlyMap<string, SupportedLanguage> = new Map(
+    SUPPORTED_LANGUAGES.map((entry) => [entry.code, entry]),
+);
+
+/**
+ * LanguageSelectorScreen — multi-select over the supported BCP-47 locales.
+ *
+ * The user picks one or more locales; the FIRST (primary) drives the app's UI
+ * language. When signed in the ordered selection is persisted to the account
+ * (`updateProfile({ languages })`, primary first) and every Oxy app follows it;
+ * when signed out a single local override is stored on-device.
+ */
+const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = () => {
+    const { user, isAuthenticated, currentLanguage, currentLanguages, setLanguage } = useOxy();
+    const { t } = useI18n();
+    const bloomTheme = useTheme();
+    const updateProfile = useUpdateProfile();
+    const [query, setQuery] = useState('');
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    // The Dialog owns the nav header + large collapsing title; this screen just
+    // declares its title/subtitle.
+    useSurfaceHeader({ title: t('language.title'), subtitle: t('language.subtitle') || undefined });
+
+    // The current ordered selection: the account locales when signed in, else
+    // the single guest/device locale. Always non-empty (`currentLanguage`
+    // resolves to the device or fallback locale).
+    const selected = useMemo<string[]>(
+        () => (currentLanguages.length > 0 ? currentLanguages : [currentLanguage]),
+        [currentLanguages, currentLanguage],
+    );
+
+    const selectedSet = useMemo(() => new Set(selected), [selected]);
+
+    const selectedEntries = useMemo<SupportedLanguage[]>(
+        () =>
+            selected
+                .map((code) => CATALOG_BY_CODE.get(code))
+                .filter((entry): entry is SupportedLanguage => entry !== undefined),
+        [selected],
+    );
+
+    // Available = supported locales not already selected, filtered by the query
+    // (matches English name + native name).
+    const availableEntries = useMemo<SupportedLanguage[]>(() => {
+        const normalizedQuery = query.trim().toLowerCase();
+        return SUPPORTED_LANGUAGES.filter((entry) => {
+            if (selectedSet.has(entry.code)) {
+                return false;
+            }
+            if (!normalizedQuery) {
+                return true;
+            }
+            return (
+                entry.name.toLowerCase().includes(normalizedQuery) ||
+                entry.nativeName.toLowerCase().includes(normalizedQuery)
+            );
+        });
+    }, [query, selectedSet]);
+
+    const isBusy = isSubmitting || updateProfile.isPending;
+
+    // Persist the next ordered selection. Signed-in accounts write the full
+    // ordered array; guests store only the primary locally.
+    const commitSelection = useCallback(
+        async (next: string[], announceCode: string): Promise<void> => {
+            if (isBusy || next.length === 0) {
+                return;
+            }
+            setIsSubmitting(true);
+            try {
+                if (isAuthenticated && user?.id) {
+                    await updateProfile.mutateAsync({ languages: next });
+                } else {
+                    await setLanguage(next[0]);
+                }
+                toast.success(t('language.changed', { lang: getNativeLanguageName(announceCode) }));
+            } catch (error) {
+                // `useUpdateProfile` already surfaces a toast on failure; only the
+                // local (guest) path needs its own error toast.
+                if (!(isAuthenticated && user?.id)) {
+                    toast.error(t('language.saveFailed'));
+                }
+                if (__DEV__) {
+                    console.error('Error saving language preference:', error);
+                }
+            } finally {
+                setIsSubmitting(false);
+            }
+        },
+        [isAuthenticated, user?.id, updateProfile, setLanguage, t, isBusy],
+    );
+
+    // Adding a locale: signed-in appends (non-primary); a guest can only hold a
+    // single locale, so the tapped locale becomes their primary.
+    const handleAdd = useCallback(
+        (code: string) => {
+            const next = isAuthenticated && user?.id ? addLocale(selected, code) : [code];
+            void commitSelection(next, code);
+        },
+        [isAuthenticated, user?.id, selected, commitSelection],
+    );
+
+    const handleSetPrimary = useCallback(
+        (code: string) => {
+            if (selected[0] === code) {
+                return;
+            }
+            void commitSelection(setPrimaryLocale(selected, code), code);
+        },
+        [selected, commitSelection],
+    );
+
+    const handleRemove = useCallback(
+        (code: string) => {
+            if (selected.length <= 1) {
+                return;
+            }
+            const next = removeLocale(selected, code);
+            const announceCode = next[0] ?? code;
+            void commitSelection(next, announceCode);
+        },
+        [selected, commitSelection],
+    );
+
+    const renderChip = (entry: SupportedLanguage) => (
+        <View className="bg-fill-secondary items-center justify-center" style={styles.chip}>
+            <Text className="text-text-secondary" style={styles.chipLabel}>
+                {entry.language.toUpperCase()}
+            </Text>
+        </View>
+    );
+
+    return (
+        <View className="pt-space-24 pb-space-24 px-screen-margin">
+            <View className="mb-space-16">
+                <Search
+                        value={query}
+                        onChangeText={setQuery}
+                        onClearText={() => setQuery('')}
+                        label={t('language.search') || 'Search languages'}
+                    />
+                </View>
+
+                {/* Selected locales — ordered, primary first. */}
+                <SettingsListGroup title={t('language.selected')}>
+                    {selectedEntries.map((entry, index) => {
+                        const isPrimary = index === 0;
+                        const canRemove = selected.length > 1;
+                        return (
+                            <SettingsListItem
+                                key={entry.code}
+                                icon={renderChip(entry)}
+                                title={entry.nativeName}
+                                description={entry.name}
+                                onPress={isPrimary ? undefined : () => handleSetPrimary(entry.code)}
+                                disabled={isBusy}
+                                accessibilityLabel={
+                                    isPrimary
+                                        ? `${entry.name} — ${t('language.primary')}`
+                                        : entry.name
+                                }
+                                rightElement={
+                                    isPrimary ? (
+                                        <View className="bg-fill-secondary rounded-full px-space-8 py-space-2">
+                                            <Text className="text-primary" style={styles.primaryBadge}>
+                                                {t('language.primary')}
+                                            </Text>
+                                        </View>
+                                    ) : canRemove ? (
+                                        <TouchableOpacity
+                                            onPress={() => handleRemove(entry.code)}
+                                            disabled={isBusy}
+                                            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                                            accessibilityRole="button"
+                                            accessibilityLabel={`${t('language.remove')} ${entry.name}`}
+                                        >
+                                            <Ionicons
+                                                name="close-circle"
+                                                size={REMOVE_ICON_SIZE}
+                                                color={bloomTheme.colors.textSecondary}
+                                            />
+                                        </TouchableOpacity>
+                                    ) : undefined
+                                }
+                                showChevron={false}
+                            />
+                        );
+                    })}
+                </SettingsListGroup>
+
+                {/* Available locales. */}
+                <SettingsListGroup title={t('language.available')}>
+                    {availableEntries.map((entry) => (
+                        <SettingsListItem
+                            key={entry.code}
+                            icon={renderChip(entry)}
+                            title={entry.nativeName}
+                            description={entry.name}
+                            onPress={() => handleAdd(entry.code)}
+                            disabled={isBusy}
+                            accessibilityLabel={entry.name}
+                            rightElement={
+                                <Ionicons
+                                    name="add-circle-outline"
+                                    size={REMOVE_ICON_SIZE}
+                                    color={bloomTheme.colors.textSecondary}
+                                />
+                            }
+                            showChevron={false}
+                        />
+                    ))}
+                </SettingsListGroup>
+        </View>
+    );
+};
+
+// StyleSheet retained ONLY for measured layout (sizes / line metrics) — no colors.
+const styles = StyleSheet.create({
+    chip: {
+        width: CHIP_SIZE,
+        height: CHIP_SIZE,
+        borderRadius: CHIP_SIZE / 2,
+    },
+    chipLabel: {
+        fontSize: 13,
+        fontWeight: '600',
+    },
+    primaryBadge: {
+        fontSize: 12,
+        fontWeight: '600',
+    },
+});
+
+// Export memoized component to prevent unnecessary re-renders
+export default React.memo(LanguageSelectorScreen);