@oxyhq/services 22.9.0 → 22.11.0

package/src/ui/screens/HelpSupportScreen.tsx

@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react';
-import { View, ScrollView, Linking } from 'react-native';
+import { View, Linking } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '@oxyhq/bloom';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { useTheme } from '@oxyhq/bloom/theme';
-import Header from '../components/Header';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 
 const HelpSupportScreen: React.FC<BaseScreenProps> = ({
     onClose,
@@ -14,6 +14,8 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
     navigate,
 }) => {
     const { t } = useI18n();
+
+    useSurfaceHeader({ title: t('help.title') || 'Help & Support' });
     const bloomTheme = useTheme();
 
     const handleContactSupport = useMemo(() => () => {
@@ -55,16 +57,9 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
     }, [t]);
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('help.title') || 'Help & Support'}
-                onBack={goBack || onClose}
-                variant="minimal"
-                elevation="subtle"
-            />
+        <>
 
-            <ScrollView className="flex-1">
-                <View className="px-screen-margin pb-space-24">
+            <View className="px-screen-margin pb-space-24">
                     {/* Help Options */}
                     <SettingsListGroup title={t('help.options') || 'Get Help'}>
                         <SettingsListItem
@@ -109,8 +104,7 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
                         />
                     </SettingsListGroup>
                 </View>
-            </ScrollView>
-        </View>
+        </>
     );
 };
 

package/src/ui/screens/HistoryViewScreen.tsx

@@ -1,16 +1,16 @@
 import React, { useState, useCallback } from 'react';
-import { View, ScrollView } from 'react-native';
+import { View } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '@oxyhq/bloom';
-import Header from '../components/Header';
 import { Loading } from '@oxyhq/bloom/loading';
 import { Text } from '@oxyhq/bloom/typography';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
-import { Dialog, useDialogControl } from '@oxyhq/bloom';
+import { surfaces } from '@oxyhq/bloom/surfaces';
 
 interface HistoryItem { id: string; query: string; type: 'search' | 'browse'; timestamp: Date; }
 
@@ -19,12 +19,12 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
     // 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);
-    const deleteLast15Dialog = useDialogControl();
-    const clearAllDialog = useDialogControl();
 
     const getStorage = async () => {
         const isRN = typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
@@ -56,6 +56,14 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
     }, [user?.id]);
 
     const handleDeleteLast15Minutes = useCallback(async () => {
+        const confirmed = await surfaces.confirm({
+            title: t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes',
+            message: 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);
@@ -69,6 +77,14 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
     }, [history, user?.id, t]);
 
     const handleClearAll = useCallback(async () => {
+        const confirmed = await surfaces.confirm({
+            title: t('history.clearAll.title') || 'Clear All History',
+            message: 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 getStorage();
@@ -89,23 +105,21 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
     };
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header title={t('history.title') || 'History'} onBack={goBack || onClose} variant="minimal" elevation="subtle" />
-            <ScrollView className="flex-1">
-                <View className="px-screen-margin pb-space-24">
+        <>
+            <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={() => deleteLast15Dialog.open()}
+                            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={() => clearAllDialog.open()}
+                            onPress={handleClearAll}
                             disabled={isDeleting || history.length === 0}
                         />
                     </SettingsListGroup>
@@ -122,26 +136,7 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
                         ))}
                     </SettingsListGroup>
                 </View>
-            </ScrollView>
-            <Dialog
-                control={deleteLast15Dialog}
-                title={t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes'}
-                description={t('history.deleteLast15Minutes.confirm') || 'Delete last 15 minutes of history?'}
-                actions={[
-                    { label: t('common.actions.delete') || 'Delete', color: 'destructive', onPress: handleDeleteLast15Minutes },
-                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-                ]}
-            />
-            <Dialog
-                control={clearAllDialog}
-                title={t('history.clearAll.title') || 'Clear All History'}
-                description={t('history.clearAll.confirm') || 'Clear all history? This cannot be undone.'}
-                actions={[
-                    { label: t('history.clearAll.title') || 'Clear All', color: 'destructive', onPress: handleClearAll },
-                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-                ]}
-            />
-        </View>
+        </>
     );
 };
 

package/src/ui/screens/LanguageSelectorScreen.tsx

@@ -1,19 +1,19 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { View, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Ionicons } from '@expo/vector-icons';
 import { toast } from '@oxyhq/bloom';
-import { H1, Text } from '@oxyhq/bloom/typography';
-import { SearchInput } from '@oxyhq/bloom/search-input';
+import { Text } from '@oxyhq/bloom/typography';
+import { Search } from '@oxyhq/bloom/search';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import {
     SUPPORTED_LANGUAGES,
     getNativeLanguageName,
     type SupportedLanguage,
 } from '@oxyhq/core';
-import Header from '../components/Header';
 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';
@@ -38,10 +38,7 @@ const CATALOG_BY_CODE: ReadonlyMap<string, SupportedLanguage> = new Map(
  * (`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> = ({
-    goBack,
-    onClose,
-}) => {
+const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = () => {
     const { user, isAuthenticated, currentLanguage, currentLanguages, setLanguage } = useOxy();
     const { t } = useI18n();
     const bloomTheme = useTheme();
@@ -49,6 +46,10 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
     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).
@@ -159,34 +160,9 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
     );
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title=""
-                subtitle=""
-                onBack={onClose || goBack}
-                variant="minimal"
-                elevation="none"
-            />
-
-            <ScrollView
-                className="flex-1"
-                contentContainerClassName="px-screen-margin pt-space-24 pb-space-24"
-                showsVerticalScrollIndicator={false}
-                keyboardShouldPersistTaps="handled"
-            >
-                <View className="mb-space-16">
-                    <H1 className="text-text" style={styles.bigTitle}>
-                        {t('language.title')}
-                    </H1>
-                    {t('language.subtitle') ? (
-                        <Text className="text-text-secondary mt-space-2" style={styles.bigSubtitle}>
-                            {t('language.subtitle')}
-                        </Text>
-                    ) : null}
-                </View>
-
-                <View className="mb-space-16">
-                    <SearchInput
+        <View className="pt-space-24 pb-space-24 px-screen-margin">
+            <View className="mb-space-16">
+                <Search
                         value={query}
                         onChangeText={setQuery}
                         onClearText={() => setQuery('')}
@@ -263,22 +239,12 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
                         />
                     ))}
                 </SettingsListGroup>
-            </ScrollView>
         </View>
     );
 };
 
 // StyleSheet retained ONLY for measured layout (sizes / line metrics) — no colors.
 const styles = StyleSheet.create({
-    bigTitle: {
-        fontSize: 34,
-        lineHeight: 40,
-        letterSpacing: -0.5,
-    },
-    bigSubtitle: {
-        fontSize: 16,
-        lineHeight: 22,
-    },
     chip: {
         width: CHIP_SIZE,
         height: CHIP_SIZE,

package/src/ui/screens/LearnMoreUsernamesScreen.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { useCallback, useState } from 'react';
-import { View, ScrollView, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Text } from '@oxyhq/bloom/typography';
 import { IconCircle } from '@oxyhq/bloom/icon-circle';
@@ -13,8 +13,8 @@ import {
 import * as Icons from '@oxyhq/bloom/icons';
 import type { Props as IconProps } from '@oxyhq/bloom/icons';
 import type { BaseScreenProps } from '../types/navigation';
-import Header from '../components/Header';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 
 interface InfoSection {
     id: string;
@@ -62,6 +62,8 @@ const LearnMoreUsernamesScreen: React.FC<BaseScreenProps> = ({
 }) => {
     const bloomTheme = useTheme();
     const { t } = useI18n();
+
+    useSurfaceHeader({ title: t('learnMoreUsernames.introTitle') });
     // Start with the first section expanded.
     const [expandedIds, setExpandedIds] = useState<string[]>(['what']);
 
@@ -79,18 +81,8 @@ const LearnMoreUsernamesScreen: React.FC<BaseScreenProps> = ({
     );
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('learnMoreUsernames.introTitle')}
-                onBack={goBack || onClose}
-                variant="minimal"
-                elevation="subtle"
-            />
-            <ScrollView
-                className="flex-1 px-screen-margin"
-                showsVerticalScrollIndicator={false}
-                contentContainerClassName="pb-space-32"
-            >
+        <>
+            <View className="px-screen-margin pb-space-32">
                 <View className="items-center py-space-24 gap-space-12">
                     <IconCircle icon={Icons.At_Stroke2_Corner0_Rounded} />
                     <Text className="font-sans text-body text-text-secondary text-center">
@@ -132,8 +124,8 @@ const LearnMoreUsernamesScreen: React.FC<BaseScreenProps> = ({
                 <Text className="font-sans text-caption text-text-tertiary text-center mt-space-16">
                     {t('learnMoreUsernames.footer')}
                 </Text>
-            </ScrollView>
-        </View>
+            </View>
+        </>
     );
 };
 

package/src/ui/screens/LegalDocumentsScreen.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useCallback } from 'react';
-import { View, ScrollView, Linking } from 'react-native';
+import { View, Linking } from 'react-native';
 import { toast } from '@oxyhq/bloom';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { logger } from '@oxyhq/core';
 import type { BaseScreenProps } from '../types/navigation';
-import Header from '../components/Header';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { Loading } from '@oxyhq/bloom/loading';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
@@ -104,37 +104,24 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
         return titles[key];
     };
 
+    useSurfaceHeader({
+        title: documentType ? getPolicyTitle(documentType) : (t('legal.title') || 'Legal Documents'),
+    });
+
     // Deep-link entry: show loading state while the document opens.
     if (documentType) {
         return (
-            <View className="flex-1 bg-bg">
-                <Header
-                    title={getPolicyTitle(documentType)}
-                    onBack={goBack || onClose}
-                    variant="minimal"
-                    elevation="subtle"
-                />
                 <Loading
                     size="large"
                     color={bloomTheme.colors.text}
                     text={t('legal.opening') || 'Opening document...'}
                 />
-            </View>
         );
     }
 
     // Default: show the full list of policies & guidelines.
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('legal.title') || 'Legal Documents'}
-                onBack={goBack || onClose}
-                variant="minimal"
-                elevation="subtle"
-            />
-
-            <ScrollView className="flex-1">
-                <View className="px-screen-margin py-space-16">
+            <View className="px-screen-margin py-space-16">
                     <SettingsListGroup title={t('legal.policies') || 'Policies & Guidelines'}>
                         <SettingsListItem
                             icon={
@@ -241,8 +228,6 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
                         />
                     </SettingsListGroup>
                 </View>
-            </ScrollView>
-        </View>
     );
 };