@oxyhq/services 22.9.0 → 22.10.0

package/src/ui/screens/FileManagementScreen.tsx

@@ -14,12 +14,15 @@ import {
 } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
 import type { FileManagementScreenProps } from '../types/fileManagement';
-import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom';
+import { surfaces } from '@oxyhq/bloom/surfaces';
 import * as Skeleton from '@oxyhq/bloom/skeleton';
 import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import { Pressable } from 'react-native';
 import type { FileMetadata } from '@oxyhq/core';
 import { useFileStore, useFiles, useUploading as useUploadingStore, useUploadAggregateProgress, useDeleting as useDeletingStore } from '../stores/fileStore';
-import Header from '../components/Header';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
+import { SurfaceHeaderAction } from '../components/SurfaceHeaderAction';
 import JustifiedPhotoGrid from '../components/photogrid/JustifiedPhotoGrid';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
@@ -31,8 +34,9 @@ import {
 } from '../utils/fileManagement';
 import { useResolvedFileUrls, fileThumbSource } from '../hooks/useResolvedFileUrls';
 import { FileViewer } from '../components/fileManagement/FileViewer';
-import { FileDetailsModal } from '../components/fileManagement/FileDetailsModal';
+import { presentFileDetails } from '../components/fileManagement/FileDetailsModal';
 import { UploadPreview } from '../components/fileManagement/UploadPreview';
+import { presentActionSheet } from '../components/surfaces/ActionSheetSurface';
 import { getErrorMessage } from './fileManagement/shared';
 import { useFileUploadState } from './fileManagement/hooks/useFileUploadState';
 import PhotoPickerView from './fileManagement/PhotoPickerSection';
@@ -43,6 +47,21 @@ import { AnimatedButton } from '../components/fileManagement/AnimatedButton';
 // Genuinely-inline-only styles: `viewModeButton` is spread into an Animated.View
 // style array (interpolated backgroundColor), and the photo tiles are
 // `expo-image` (no className remap). Everything else uses NativeWind classNames.
+// Nav-header slot layout for this screen's action row + review-mode back button.
+const fmHeaderStyles = StyleSheet.create({
+    actionsRow: {
+        flexDirection: 'row',
+        gap: 8,
+    },
+    backButton: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+
 const screenStyles = StyleSheet.create({
     viewModeButton: {
         paddingHorizontal: 10,
@@ -62,6 +81,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     theme,
     goBack,
     navigate,
+    dismiss,
     userId,
     containerWidth,
     selectMode = false,
@@ -83,11 +103,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     const { user, oxyServices } = useOxy();
     const { t } = useI18n();
     const uploadFileMutation = useUploadFile();
-    // Prompt controls
-    const fileDeleteDialog = useDialogControl();
-    const bulkDeleteDialog = useDialogControl();
-    const visibilityChangeDialog = useDialogControl();
-    const [pendingDeleteFile, setPendingDeleteFile] = useState<{ id: string; name: string } | null>(null);
     const files = useFiles();
     const { width: windowWidth } = useWindowDimensions();
     // Prefer an explicit sheet width from the router; fall back to the window
@@ -102,8 +117,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     const [loading, setLoading] = useState(true);
     const [refreshing, setRefreshing] = useState(false);
     const [paging, setPaging] = useState({ offset: 0, limit: 40, total: 0, hasMore: true, loadingMore: false });
-    const [selectedFile, setSelectedFile] = useState<FileMetadata | null>(null);
-    const fileDetailsControl = useDialogControl();
     // In selectMode we never open the detailed viewer
     const [openedFile, setOpenedFile] = useState<FileMetadata | null>(null);
     const [fileContent, setFileContent] = useState<string | null>(null);
@@ -260,11 +273,19 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         }
 
         if (!multiSelect) {
-            onSelect?.(file);
-            if (afterSelect === 'back') {
-                goBack?.();
-            } else if (afterSelect === 'close') {
-                onClose?.();
+            if (onSelect) {
+                // Legacy callback caller (inbox, WelcomeNewUser): keep the
+                // callback + afterSelect behaviour unchanged.
+                onSelect(file);
+                if (afterSelect === 'back') {
+                    goBack?.();
+                } else if (afterSelect === 'close') {
+                    onClose?.();
+                }
+            } else {
+                // Promise-based picker (avatar picker): resolve the surface's
+                // present() promise with the picked file.
+                dismiss?.(file);
             }
             return;
         }
@@ -282,7 +303,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             }
             return next;
         });
-    }, [selectMode, multiSelect, onSelect, onClose, goBack, disabledMimeTypes, maxSelection, afterSelect, defaultVisibility, oxyServices, linkContext]);
+    }, [selectMode, multiSelect, onSelect, onClose, goBack, dismiss, disabledMimeTypes, maxSelection, afterSelect, defaultVisibility, oxyServices, linkContext]);
 
     const confirmMultiSelection = useCallback(async () => {
         if (!selectMode || !multiSelect) return;
@@ -322,9 +343,15 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         // Wait for all updates (but don't block on failures)
         await Promise.allSettled(updatePromises);
 
-        onConfirmSelection?.(chosen);
-        onClose?.();
-    }, [selectMode, multiSelect, selectedIds, files, onConfirmSelection, onClose, defaultVisibility, oxyServices, linkContext]);
+        if (onConfirmSelection) {
+            // Legacy callback caller (inbox): keep the callback + close.
+            onConfirmSelection(chosen);
+            onClose?.();
+        } else {
+            // Promise-based picker: resolve the surface with the chosen files.
+            dismiss?.(chosen);
+        }
+    }, [selectMode, multiSelect, selectedIds, files, onConfirmSelection, onClose, dismiss, defaultVisibility, oxyServices, linkContext]);
 
     // Private-safe thumbnail URLs for the currently-shown files, resolved in
     // ONE batch per page (not N per-tile) and cached by React Query. Uploads
@@ -525,14 +552,15 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         return rows;
     }, []);
 
-    const confirmFileDelete = useCallback((fileId: string, filename: string) => {
-        setPendingDeleteFile({ id: fileId, name: filename });
-        fileDeleteDialog.open();
-    }, [fileDeleteDialog]);
-
-    const handleFileDelete = useCallback(async () => {
-        if (!pendingDeleteFile) return;
-        const { id: fileId } = pendingDeleteFile;
+    const confirmFileDelete = useCallback(async (fileId: string, filename: string) => {
+        const confirmed = await surfaces.confirm({
+            title: t('fileManagement.deleteFile') || 'Delete File',
+            message: t('fileManagement.confirms.deleteFile', { filename }),
+            confirmLabel: t('fileManagement.confirm') || 'Delete',
+            cancelLabel: t('common.cancel') || 'Cancel',
+            destructive: true,
+        });
+        if (!confirmed) return;
 
         try {
             storeSetDeleting(fileId);
@@ -559,17 +587,20 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             }
         } finally {
             storeSetDeleting(null);
-            setPendingDeleteFile(null);
         }
-    }, [pendingDeleteFile, storeSetDeleting, oxyServices, loadFiles, t]);
+    }, [storeSetDeleting, oxyServices, loadFiles, t]);
 
-    const confirmBulkDelete = useCallback(() => {
+    const confirmBulkDelete = useCallback(async () => {
         if (selectedIds.size === 0) return;
-        bulkDeleteDialog.open();
-    }, [selectedIds.size, bulkDeleteDialog]);
 
-    const handleBulkDelete = useCallback(async () => {
-        if (selectedIds.size === 0) return;
+        const confirmed = await surfaces.confirm({
+            title: t('fileManagement.deleteFiles') || 'Delete Files',
+            message: t('fileManagement.confirms.deleteFiles', { count: selectedIds.size }),
+            confirmLabel: t('fileManagement.confirm') || 'Delete',
+            cancelLabel: t('common.cancel') || 'Cancel',
+            destructive: true,
+        });
+        if (!confirmed) return;
 
         try {
             const deletePromises = Array.from(selectedIds).map(async (fileId) => {
@@ -598,7 +629,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         } catch (error: unknown) {
             toast.error(getErrorMessage(error) || t('fileManagement.toasts.bulkDeleteError'));
         }
-    }, [selectedIds, files, oxyServices, loadFiles]);
+    }, [selectedIds, oxyServices, loadFiles, t]);
 
     const handleBulkVisibilityChange = useCallback(async (visibility: 'private' | 'public' | 'unlisted') => {
         if (selectedIds.size === 0) return;
@@ -634,7 +665,22 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         } catch (error: unknown) {
             toast.error(getErrorMessage(error) || t('fileManagement.toasts.visibilityError'));
         }
-    }, [selectedIds, oxyServices, files, loadFiles]);
+    }, [selectedIds, oxyServices, files, loadFiles, t]);
+
+    const handleVisibilityChange = useCallback(async () => {
+        if (selectedIds.size === 0) return;
+        const visibility = await presentActionSheet<'private' | 'public' | 'unlisted'>({
+            title: t('fileManagement.changeVisibility') || 'Change Visibility',
+            message: t('fileManagement.changeVisibilityConfirm', { count: selectedIds.size }),
+            options: [
+                { label: t('fileManagement.private') || 'Private', value: 'private' },
+                { label: t('fileManagement.public') || 'Public', value: 'public' },
+                { label: t('fileManagement.unlisted') || 'Unlisted', value: 'unlisted' },
+            ],
+            cancelLabel: t('common.cancel') || 'Cancel',
+        });
+        if (visibility) await handleBulkVisibilityChange(visibility);
+    }, [selectedIds.size, handleBulkVisibilityChange, t]);
 
     // Unified download function - works on all platforms
     const handleFileDownload = async (fileId: string, filename: string) => {
@@ -746,8 +792,12 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     };
 
     const showFileDetailsModal = (file: FileMetadata) => {
-        setSelectedFile(file);
-        fileDetailsControl.open();
+        presentFileDetails({
+            file,
+            onDownload: handleFileDownload,
+            onDelete: confirmFileDelete,
+            isOwner: user?.id === targetUserId,
+        });
     };
 
     const renderJustifiedPhotoItem = useCallback((photo: FileMetadata, width: number, height: number, isLast: boolean) => {
@@ -1129,6 +1179,64 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     // picker's placement-aware container width / columns / tile size and the
     // Dialog-vs-bottom-sheet sizing. Skipping the browse chrome here is what keeps
     // the picker from flashing the wrong (file-manager) skeleton inside the Dialog.
+    // The Dialog owns the nav header; this screen contributes its state-dependent
+    // title/subtitle + action slots. The image-only picker mode is headerless
+    // (PhotoPickerView owns its own bar), so this config is simply ignored there.
+    const fmHeaderRight = useMemo<React.ReactNode>(() => {
+        const actions = selectMode && multiSelect
+            ? [
+                { key: 'clear', label: t('fileManagement.clear'), onPress: () => setSelectedIds(new Set()), disabled: selectedIds.size === 0 },
+                { key: 'confirm', label: t('fileManagement.confirm'), onPress: confirmMultiSelection, disabled: selectedIds.size === 0 },
+            ]
+            : !selectMode && selectedIds.size > 0
+                ? [
+                    { key: 'clear', label: t('fileManagement.clear'), onPress: () => setSelectedIds(new Set()), disabled: false },
+                    { key: 'delete', label: t('fileManagement.delete', { count: selectedIds.size }), onPress: confirmBulkDelete, disabled: false },
+                    { key: 'visibility', label: t('fileManagement.visibility'), onPress: handleVisibilityChange, disabled: false },
+                ]
+                : [];
+        if (actions.length === 0) return undefined;
+        return (
+            <View style={fmHeaderStyles.actionsRow}>
+                {actions.map((a) => (
+                    <SurfaceHeaderAction key={a.key} label={a.label} onPress={a.onPress} disabled={a.disabled} />
+                ))}
+            </View>
+        );
+    }, [selectMode, multiSelect, selectedIds, t, confirmMultiSelection, confirmBulkDelete, handleVisibilityChange]);
+
+    const fmHeaderBack = useMemo<React.ReactNode>(() => (
+        <Pressable
+            onPress={handleCancelUpload}
+            accessibilityRole="button"
+            accessibilityLabel={t('common.back') || 'Back'}
+            hitSlop={8}
+            style={fmHeaderStyles.backButton}
+        >
+            <Ionicons name="chevron-back" size={20} color={colors.text} />
+        </Pressable>
+    ), [handleCancelUpload, colors.text, t]);
+
+    useSurfaceHeader(
+        showUploadPreview
+            ? {
+                title: t('fileManagement.reviewFiles'),
+                subtitle: t('fileManagement.readyToUpload', { count: pendingFiles.length }),
+                left: fmHeaderBack,
+                largeTitle: false,
+            }
+            : {
+                title: selectMode
+                    ? (multiSelect ? (maxSelection ? t('fileManagement.selectedWithMax', { count: selectedIds.size, max: maxSelection }) : t('fileManagement.selected', { count: selectedIds.size })) : t('fileManagement.selectFile'))
+                    : (viewMode === 'photos' ? t('fileManagement.photos') : t('fileManagement.title')),
+                subtitle: selectMode
+                    ? (multiSelect ? t('fileManagement.available', { count: filteredFiles.length }) : t('fileManagement.tapToSelect'))
+                    : (filteredFiles.length === 1 ? t('fileManagement.itemCount', { count: filteredFiles.length }) : t('fileManagement.itemCount_plural', { count: filteredFiles.length })),
+                right: fmHeaderRight,
+                largeTitle: false,
+            },
+    );
+
     if (loading && !isImageOnlyPicker) {
         const GRID_PADDING = 10;
         const TILE_GAP = 4;
@@ -1190,71 +1298,59 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         const allowUpload = isOwner && allowUploadInSelectMode;
 
         return (
-            <>
-                <PhotoPickerView
-                    photos={photosOnly}
-                    selectedIds={selectedIds}
-                    multiSelect={multiSelect}
-                    maxSelection={maxSelection}
-                    allowUpload={allowUpload}
-                    refreshing={refreshing}
-                    uploading={uploading}
-                    isPickingDocument={isPickingDocument}
-                    uploadProgress={uploadProgress}
-                    hasMore={paging.hasMore}
-                    loadingMore={paging.loadingMore}
-                    loading={loading}
-                    reduceMotion={reduceMotion}
-                    getThumbUrl={thumbSourceFor}
-                    primaryColor={colors.primary}
-                    isOwner={isOwner}
-                    onTogglePhoto={toggleSelect}
-                    onPreviewPhoto={(file) => showFileDetailsModal(file)}
-                    onUpload={handleFileUpload}
-                    onRefresh={() => loadFiles('refresh')}
-                    onLoadMore={() => loadFiles('more')}
-                    onCancel={() => {
+            <PhotoPickerView
+                photos={photosOnly}
+                selectedIds={selectedIds}
+                multiSelect={multiSelect}
+                maxSelection={maxSelection}
+                allowUpload={allowUpload}
+                refreshing={refreshing}
+                uploading={uploading}
+                isPickingDocument={isPickingDocument}
+                uploadProgress={uploadProgress}
+                hasMore={paging.hasMore}
+                loadingMore={paging.loadingMore}
+                loading={loading}
+                reduceMotion={reduceMotion}
+                getThumbUrl={thumbSourceFor}
+                primaryColor={colors.primary}
+                isOwner={isOwner}
+                onTogglePhoto={toggleSelect}
+                // Long-press preview surfaces the file-detail panel on the stack.
+                onPreviewPhoto={(file) => showFileDetailsModal(file)}
+                onUpload={handleFileUpload}
+                onRefresh={() => loadFiles('refresh')}
+                onLoadMore={() => loadFiles('more')}
+                onCancel={() => {
+                    if (onSelect || onConfirmSelection) {
+                        // Legacy callback caller: preserve close/back behaviour.
                         if (onClose) onClose();
                         else goBack?.();
-                    }}
-                    onConfirm={confirmMultiSelection}
-                    t={t}
-                />
-                {/* Long-press preview surfaces the existing details modal. */}
-                <FileDetailsModal
-                    control={fileDetailsControl}
-                    file={selectedFile}
-                    onDownload={handleFileDownload}
-                    onDelete={confirmFileDelete}
-                    isOwner={isOwner}
-                />
-            </>
+                    } else {
+                        // Promise picker (avatar): dismiss just this surface.
+                        dismiss?.();
+                    }
+                }}
+                onConfirm={confirmMultiSelection}
+                t={t}
+            />
         );
     }
 
     // If a file is opened, show the file viewer
     if (!selectMode && openedFile) {
         return (
-            <>
-                <FileViewer
-                    file={openedFile}
-                    fileContent={fileContent}
-                    loadingFileContent={loadingFileContent}
-                    showFileDetailsInViewer={showFileDetailsInViewer}
-                    onToggleDetails={() => setShowFileDetailsInViewer(!showFileDetailsInViewer)}
-                    onClose={handleCloseFile}
-                    onDownload={handleFileDownload}
-                    onDelete={confirmFileDelete}
-                    isOwner={user?.id === targetUserId}
-                />
-                <FileDetailsModal
-                    control={fileDetailsControl}
-                    file={selectedFile}
-                    onDownload={handleFileDownload}
-                    onDelete={confirmFileDelete}
-                    isOwner={user?.id === targetUserId}
-                />
-            </>
+            <FileViewer
+                file={openedFile}
+                fileContent={fileContent}
+                loadingFileContent={loadingFileContent}
+                showFileDetailsInViewer={showFileDetailsInViewer}
+                onToggleDetails={() => setShowFileDetailsInViewer(!showFileDetailsInViewer)}
+                onClose={handleCloseFile}
+                onDownload={handleFileDownload}
+                onDelete={confirmFileDelete}
+                isOwner={user?.id === targetUserId}
+            />
         );
     }
 
@@ -1262,15 +1358,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     if (showUploadPreview) {
         return (
             <View className="flex-1">
-                <Header
-                    title={t('fileManagement.reviewFiles')}
-                    subtitle={t('fileManagement.readyToUpload', { count: pendingFiles.length })}
-                    onBack={handleCancelUpload}
-                    showBackButton
-                    variant="minimal"
-                    elevation="none"
-                    titleAlignment="left"
-                />
                 <UploadPreview
                     pendingFiles={pendingFiles}
                     onConfirm={handleConfirmUpload}
@@ -1284,51 +1371,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
     return (
         <View className="flex-1">
-            <Header
-                title={selectMode ? (multiSelect ? (maxSelection ? t('fileManagement.selectedWithMax', { count: selectedIds.size, max: maxSelection }) : t('fileManagement.selected', { count: selectedIds.size })) : t('fileManagement.selectFile')) : (viewMode === 'photos' ? t('fileManagement.photos') : t('fileManagement.title'))}
-                subtitle={selectMode ? (multiSelect ? t('fileManagement.available', { count: filteredFiles.length }) : t('fileManagement.tapToSelect')) : (filteredFiles.length === 1 ? t('fileManagement.itemCount', { count: filteredFiles.length }) : t('fileManagement.itemCount_plural', { count: filteredFiles.length }))}
-                actions={selectMode && multiSelect ? [
-                    {
-                        key: 'clear',
-                        text: t('fileManagement.clear'),
-                        onPress: () => setSelectedIds(new Set()),
-                        disabled: selectedIds.size === 0,
-                    },
-                    {
-                        key: 'confirm',
-                        text: t('fileManagement.confirm'),
-                        onPress: confirmMultiSelection,
-                        disabled: selectedIds.size === 0,
-                    }
-                ] : !selectMode && selectedIds.size > 0 ? [
-                    {
-                        key: 'clear',
-                        text: t('fileManagement.clear'),
-                        onPress: () => setSelectedIds(new Set()),
-                    },
-                    {
-                        key: 'delete',
-                        text: t('fileManagement.delete', { count: selectedIds.size }),
-                        onPress: confirmBulkDelete,
-                        icon: 'delete',
-                    },
-                    {
-                        key: 'visibility',
-                        text: t('fileManagement.visibility'),
-                        onPress: () => {
-                            visibilityChangeDialog.open();
-                        },
-                        icon: 'eye',
-                    }
-                ] : undefined}
-                onBack={onClose || goBack}
-
-                showBackButton
-                variant="minimal"
-                elevation="none"
-                titleAlignment="left"
-            />
-
             <View className="flex-row items-center justify-between px-[12px] py-[12px] gap-[12px]">
                 <ScrollView
                     horizontal
@@ -1542,16 +1584,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 />
             )}
 
-            {!selectMode && (
-                <FileDetailsModal
-                    control={fileDetailsControl}
-                    file={selectedFile}
-                    onDownload={handleFileDownload}
-                    onDelete={confirmFileDelete}
-                    isOwner={user?.id === targetUserId}
-                />
-            )}
-
             {/* Uploading banner overlay with progress */}
             {!selectMode && uploading && (
                 <UploadBar
@@ -1564,35 +1596,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
             {/* Selection bar removed; actions are now in header */}
             {/* Global loadingMore bar removed; now inline in scroll areas */}
-            <Dialog
-                control={fileDeleteDialog}
-                title={t('fileManagement.deleteFile') || 'Delete File'}
-                description={pendingDeleteFile ? t('fileManagement.confirms.deleteFile', { filename: pendingDeleteFile.name }) : ''}
-                actions={[
-                    { label: t('fileManagement.confirm') || 'Delete', color: 'destructive', onPress: handleFileDelete },
-                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-                ]}
-            />
-            <Dialog
-                control={bulkDeleteDialog}
-                title={t('fileManagement.deleteFiles') || 'Delete Files'}
-                description={t('fileManagement.confirms.deleteFiles', { count: selectedIds.size })}
-                actions={[
-                    { label: t('fileManagement.confirm') || 'Delete', color: 'destructive', onPress: handleBulkDelete },
-                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-                ]}
-            />
-            <Dialog
-                control={visibilityChangeDialog}
-                title={t('fileManagement.changeVisibility') || 'Change Visibility'}
-                description={t('fileManagement.changeVisibilityConfirm', { count: selectedIds.size })}
-                actions={[
-                    { label: t('fileManagement.private') || 'Private', onPress: () => handleBulkVisibilityChange('private') },
-                    { label: t('fileManagement.public') || 'Public', onPress: () => handleBulkVisibilityChange('public') },
-                    { label: t('fileManagement.unlisted') || 'Unlisted', onPress: () => handleBulkVisibilityChange('unlisted') },
-                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-                ]}
-            />
         </View>
     );
 };

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>
+        </>
     );
 };