@oxyhq/services 22.9.0 → 22.11.0

package/src/ui/screens/EditProfileFieldScreen.tsx

@@ -1,24 +1,22 @@
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useRef } from 'react';
 import {
     View,
-    Platform,
     Image,
     StyleSheet,
-    ScrollView,
     TouchableOpacity,
     type TextInputProps,
-    KeyboardAvoidingView,
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { H1, Text } from '@oxyhq/bloom/typography';
+import { Text } from '@oxyhq/bloom/typography';
 import { Button } from '@oxyhq/bloom/button';
 import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
 import { normalizeTheme } from '@oxyhq/core';
 import type { User } from '@oxyhq/core';
-import Header from '../components/Header';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
+import { SurfaceHeaderAction } from '../components/SurfaceHeaderAction';
 import { useOxy } from '../context/OxyContext';
 import { useProfileEditing } from '../hooks/useProfileEditing';
 import { toast } from '@oxyhq/bloom';
@@ -464,6 +462,26 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
         }
     };
 
+    // Contribute the field title/subtitle + a Save action into the Dialog's own
+    // nav header (this screen renders no header of its own). `handleSave` closes
+    // over the live form values, so route it through a ref to keep the Save node
+    // stable across keystrokes (only re-created when the saving state flips).
+    const handleSaveRef = useRef(handleSave);
+    handleSaveRef.current = handleSave;
+    const onSavePress = useCallback(() => { void handleSaveRef.current(); }, []);
+    const saveAction = useMemo(
+        () => (
+            <SurfaceHeaderAction
+                label={isSaving ? (t('common.saving') || 'Saving…') : (t('common.save') || 'Save')}
+                onPress={onSavePress}
+                loading={isSaving}
+                disabled={isSaving}
+            />
+        ),
+        [isSaving, onSavePress, t],
+    );
+    useSurfaceHeader({ title: fieldConfig.title, subtitle: fieldConfig.subtitle, right: saveAction });
+
     // Render a single field input
     const renderField = (field: FieldConfig['fields'][0], index: number) => {
         const error = fieldErrors[field.key];
@@ -569,48 +587,12 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
     };
 
     return (
-        <KeyboardAvoidingView
-            className="flex-1 bg-bg"
-            behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        >
-            <Header
-                title=""
-                subtitle=""
-                onBack={onClose || goBack}
-                variant="minimal"
-                elevation="none"
-                actions={[{
-                    text: isSaving ? (t('common.saving') || 'Saving...') : (t('common.save') || 'Save'),
-                    onPress: handleSave,
-                    disabled: isSaving,
-                    loading: isSaving,
-                }]}
-            />
-
-            <ScrollView
-                className="flex-1"
-                contentContainerClassName="px-screen-margin pt-space-24 pb-space-32 gap-space-24"
-                showsVerticalScrollIndicator={false}
-                keyboardShouldPersistTaps="handled"
-            >
-                {/* Big Title */}
-                <View className="gap-space-8">
-                    <H1 className="text-headerBold font-headerBold text-text">
-                        {fieldConfig.title}
-                    </H1>
-                    {fieldConfig.subtitle && (
-                        <Text className="text-body font-body text-text-secondary">
-                            {fieldConfig.subtitle}
-                        </Text>
-                    )}
-                </View>
-
-                {/* Form Content */}
-                <View className="gap-space-16 p-space-16 rounded-radius-20 bg-fill">
-                    {fieldConfig.isList ? renderListContent() : fieldConfig.fields.map(renderField)}
-                </View>
-            </ScrollView>
-        </KeyboardAvoidingView>
+        <View className="px-screen-margin pt-space-16 pb-space-32 gap-space-24">
+            {/* Form Content */}
+            <View className="gap-space-16 p-space-16 rounded-radius-20 bg-fill">
+                {fieldConfig.isList ? renderListContent() : fieldConfig.fields.map(renderField)}
+            </View>
+        </View>
     );
 };
 

package/src/ui/screens/EditProfileScreen.tsx

@@ -1,16 +1,16 @@
 import type React from 'react';
 import { useMemo } from 'react';
-import { View, ScrollView } from 'react-native';
+import { View } from 'react-native';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { getAccountDisplayName } from '@oxyhq/core';
 import type { BaseScreenProps } from '../types/navigation';
-import Header from '../components/Header';
 import { Avatar } from '@oxyhq/bloom/avatar';
 import ProfileSummaryCard from '../components/ProfileSummaryCard';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import type { ProfileFieldType } from './EditProfileFieldScreen';
 
 /**
@@ -22,11 +22,13 @@ import type { ProfileFieldType } from './EditProfileFieldScreen';
  * {@link ManageAccountScreen} uses. This is the single entry into per-field
  * editing — reached from ManageAccount's "Edit profile" row.
  */
-const EditProfileScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navigate }) => {
+const EditProfileScreen: React.FC<BaseScreenProps> = ({ navigate }) => {
     const bloomTheme = useTheme();
     const { t, locale } = useI18n();
     const { user, oxyServices, openAvatarPicker } = useOxy();
 
+    useSurfaceHeader({ title: t('editProfile.title') || 'Edit Profile' });
+
     const displayName = useMemo(() => getAccountDisplayName(user, locale), [user, locale]);
     const avatarUri = useMemo(
         () => (user?.avatar ? oxyServices.getFileDownloadUrl(user.avatar, 'thumb') : undefined),
@@ -51,17 +53,7 @@ const EditProfileScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navigat
     const goToField = (fieldType: ProfileFieldType) => navigate?.('EditProfileField', { fieldType });
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('editProfile.title') || 'Edit Profile'}
-                onBack={goBack || onClose}
-                elevation="subtle"
-            />
-            <ScrollView
-                className="flex-1"
-                contentContainerClassName="px-screen-margin pb-space-24"
-                showsVerticalScrollIndicator={false}
-            >
+            <View className="px-screen-margin pt-space-16 pb-space-24">
                 {/* Profile card */}
                 <ProfileSummaryCard
                     displayName={displayName}
@@ -141,8 +133,7 @@ const EditProfileScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navigat
                         onPress={() => goToField('locations')}
                     />
                 </SettingsListGroup>
-            </ScrollView>
-        </View>
+            </View>
     );
 };
 

package/src/ui/screens/FAQScreen.tsx

@@ -4,7 +4,7 @@ import { View, ScrollView, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { toast } from '@oxyhq/bloom';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { SearchInput } from '@oxyhq/bloom/search-input';
+import { Search } from '@oxyhq/bloom/search';
 import { Button } from '@oxyhq/bloom/button';
 import {
     Accordion,
@@ -14,9 +14,9 @@ import {
 } from '@oxyhq/bloom/accordion';
 import { Text } from '@oxyhq/bloom/typography';
 import type { BaseScreenProps } from '../types/navigation';
-import Header from '../components/Header';
 import { Loading } from '@oxyhq/bloom/loading';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useOxy } from '../context/OxyContext';
 
 interface FAQ {
@@ -32,6 +32,8 @@ const FAQScreen: React.FC<BaseScreenProps> = ({
 }) => {
     const { oxyServices } = useOxy();
     const { t } = useI18n();
+
+    useSurfaceHeader({ title: t('faq.title') || 'FAQ' });
     const bloomTheme = useTheme();
 
     const [faqs, setFaqs] = useState<FAQ[]>([]);
@@ -96,17 +98,11 @@ const FAQScreen: React.FC<BaseScreenProps> = ({
     );
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('faq.title') || 'FAQ'}
-                onBack={goBack || onClose}
-                variant="minimal"
-                elevation="subtle"
-            />
+        <>
 
             {/* Search bar */}
             <View className="px-screen-margin py-space-12">
-                <SearchInput
+                <Search
                     label={t('faq.searchPlaceholder') || 'Search FAQs...'}
                     value={searchQuery}
                     onChangeText={setSearchQuery}
@@ -147,7 +143,7 @@ const FAQScreen: React.FC<BaseScreenProps> = ({
                 </ScrollView>
             )}
 
-            <ScrollView className="flex-1 px-screen-margin" showsVerticalScrollIndicator={false}>
+            <View className="px-screen-margin">
                 {isLoading ? (
                     <Loading
                         size="large"
@@ -188,8 +184,8 @@ const FAQScreen: React.FC<BaseScreenProps> = ({
                         ))}
                     </Accordion>
                 )}
-            </ScrollView>
-        </View>
+            </View>
+        </>
     );
 };
 

package/src/ui/screens/FeedbackScreen.tsx

@@ -3,8 +3,6 @@ import { useState, useRef, useCallback, useMemo } from 'react';
 import {
     View,
     Platform,
-    KeyboardAvoidingView,
-    ScrollView,
     Animated,
     StyleSheet,
 } from 'react-native';
@@ -20,8 +18,8 @@ import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
 import { Switch } from '@oxyhq/bloom/switch';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { SettingsIcon } from '../components/SettingsIcon';
-import Header from '../components/Header';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useOxy } from '../context/OxyContext';
 
 import { useFeedbackForm } from '../components/feedback/useFeedbackForm';
@@ -64,6 +62,8 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
     const colors = bloomTheme.colors;
     const { t } = useI18n();
 
+    useSurfaceHeader({ title: t('feedback.title') || 'Feedback' });
+
     const { feedbackData, feedbackState, setFeedbackState, updateField, resetForm } = useFeedbackForm();
 
     const [currentStep, setCurrentStep] = useState(0);
@@ -564,27 +564,13 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
     };
 
     return (
-        <KeyboardAvoidingView
-            className="flex-1 bg-bg"
-            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        >
-            <Header
-                title={t('feedback.title') || 'Feedback'}
-                onBack={goBack || onClose}
-                variant="minimal"
-                elevation="subtle"
-            />
-
-            <ScrollView
-                className="flex-1"
-                contentContainerClassName="px-screen-margin pt-space-24 pb-space-32"
-                showsVerticalScrollIndicator={false}
-                keyboardShouldPersistTaps="handled"
-            >
+        <>
+
+            <View className="px-screen-margin pt-space-24 pb-space-32">
                 {feedbackState.status !== 'success' ? renderProgress() : null}
                 {renderCurrentStep()}
-            </ScrollView>
-        </KeyboardAvoidingView>
+            </View>
+        </>
     );
 };