@oxyhq/services 22.9.0 → 22.10.0

package/src/ui/screens/PremiumSubscriptionScreen.tsx

@@ -1,8 +1,9 @@
 import type React from 'react';
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { View, ScrollView, ActivityIndicator } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom';
+import { surfaces } from '@oxyhq/bloom/surfaces';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Button } from '@oxyhq/bloom/button';
 import { Chip } from '@oxyhq/bloom/chip';
@@ -16,8 +17,8 @@ import {
     SegmentedControlItemText,
 } from '@oxyhq/bloom/segmented-control';
 import { Ionicons } from '@expo/vector-icons';
-import Header from '../components/Header';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useOxy } from '../context/OxyContext';
 
 type IoniconName = React.ComponentProps<typeof Ionicons>['name'];
@@ -88,6 +89,20 @@ const FEATURE_CATEGORIES: IndividualFeature['category'][] = [
     'productivity',
 ];
 
+// Pure package-name → display-name mapping (module scope so the nav-header
+// subtitle can reference it before the component's render helpers).
+const getAppDisplayName = (packageName: string): string => {
+    const appNames: Record<string, string> = {
+        'mention': 'Mention',
+        'oxy-social': 'Oxy Social',
+        'oxy-workspace': 'Oxy Workspace',
+        'oxy-creator': 'Oxy Creator',
+        'oxy-analytics': 'Oxy Analytics',
+        'oxy-studio': 'Oxy Studio',
+    };
+    return appNames[packageName] || packageName;
+};
+
 const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     onClose,
     navigate,
@@ -105,16 +120,13 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     const [billingInterval, setBillingInterval] = useState<BillingInterval>(BILLING_MONTH);
     const [activeTab, setActiveTab] = useState<ActiveTab>(TAB_PLANS);
     const [currentAppPackage, setCurrentAppPackage] = useState<string>('mention'); // Default to mention for demo
-    const [pendingUnsubscribeFeatureId, setPendingUnsubscribeFeatureId] = useState<string | null>(null);
 
     const { t } = useI18n();
+
+    useSurfaceHeader({ title: t('premium.title') || 'Oxy+ Subscriptions', subtitle: t('premium.forApp', { app: getAppDisplayName(currentAppPackage) }) || `for ${getAppDisplayName(currentAppPackage)}` });
     const bloomTheme = useTheme();
     const colors = bloomTheme.colors;
 
-    // Prompt controls
-    const cancelSubscriptionDialog = useDialogControl();
-    const unsubscribeFeatureDialog = useDialogControl();
-
     // Oxy+ subscription plans
     const mockPlans: SubscriptionPlan[] = [
         {
@@ -426,11 +438,15 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
         }
     };
 
-    const confirmCancelSubscription = useCallback(() => {
-        cancelSubscriptionDialog.open();
-    }, [cancelSubscriptionDialog]);
-
     const handleCancelSubscription = useCallback(async () => {
+        const confirmed = await surfaces.confirm({
+            title: t('premium.confirms.cancelSubTitle') || 'Cancel Subscription',
+            message: t('premium.confirms.cancelSub') || 'Are you sure you want to cancel your subscription? You will lose access to premium features at the end of your current billing period.',
+            confirmLabel: t('premium.actions.cancelSubBtn') || 'Cancel Subscription',
+            cancelLabel: t('common.cancel') || 'Cancel',
+            destructive: true,
+        });
+        if (!confirmed) return;
         try {
             setSubscription(prev => prev ? {
                 ...prev,
@@ -512,18 +528,22 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
         }
     };
 
-    const confirmFeatureUnsubscribe = useCallback((featureId: string) => {
-        setPendingUnsubscribeFeatureId(featureId);
-        unsubscribeFeatureDialog.open();
-    }, [unsubscribeFeatureDialog]);
-
-    const handleFeatureUnsubscribe = useCallback(async () => {
-        if (!pendingUnsubscribeFeatureId) return;
-        const feature = individualFeatures.find(f => f.id === pendingUnsubscribeFeatureId);
+    const handleFeatureUnsubscribe = useCallback(async (featureId: string) => {
+        const feature = individualFeatures.find(f => f.id === featureId);
+        const confirmed = await surfaces.confirm({
+            title: t('premium.confirms.unsubscribeFeatureTitle') || 'Unsubscribe from Feature',
+            message: feature
+                ? (t('premium.confirms.unsubscribeFeature', { name: feature.name }) ?? `Are you sure you want to unsubscribe from ${feature.name}?`)
+                : '',
+            confirmLabel: t('premium.actions.unsubscribe') || 'Unsubscribe',
+            cancelLabel: t('common.cancel') || 'Cancel',
+            destructive: true,
+        });
+        if (!confirmed) return;
         try {
             setIndividualFeatures(prev =>
                 prev.map(f =>
-                    f.id === pendingUnsubscribeFeatureId
+                    f.id === featureId
                         ? { ...f, isSubscribed: false }
                         : f
                 )
@@ -531,27 +551,8 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
             toast.success((t('premium.toasts.featureUnsubscribed', { name: feature?.name ?? '' }) ?? `Unsubscribed from ${feature?.name}`));
         } catch (error) {
             toast.error(t('premium.toasts.featureUnsubscribeFailed') || 'Failed to unsubscribe from feature');
-        } finally {
-            setPendingUnsubscribeFeatureId(null);
         }
-    }, [pendingUnsubscribeFeatureId, individualFeatures, t]);
-
-    const pendingUnsubscribeFeature = useMemo(
-        () => individualFeatures.find(f => f.id === pendingUnsubscribeFeatureId),
-        [individualFeatures, pendingUnsubscribeFeatureId]
-    );
-
-    const getAppDisplayName = (packageName: string) => {
-        const appNames: Record<string, string> = {
-            'mention': 'Mention',
-            'oxy-social': 'Oxy Social',
-            'oxy-workspace': 'Oxy Workspace',
-            'oxy-creator': 'Oxy Creator',
-            'oxy-analytics': 'Oxy Analytics',
-            'oxy-studio': 'Oxy Studio'
-        };
-        return appNames[packageName] || packageName;
-    };
+    }, [individualFeatures, t]);
 
     const renderCurrentSubscription = () => {
         if (!subscription) return null;
@@ -608,7 +609,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         ) : (
                             <Button
                                 variant="destructive"
-                                onPress={confirmCancelSubscription}
+                                onPress={handleCancelSubscription}
                                 className="flex-1"
                                 accessibilityLabel={t('premium.actions.cancelSubBtn') || 'Cancel Subscription'}
                             >
@@ -915,7 +916,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         </Button>
                         <Button
                             variant="outline"
-                            onPress={() => confirmFeatureUnsubscribe(feature.id)}
+                            onPress={() => handleFeatureUnsubscribe(feature.id)}
                             accessibilityLabel={t('premium.actions.unsubscribe') || 'Unsubscribe'}
                             className="flex-1"
                         >
@@ -1006,41 +1007,21 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
     if (loading) {
         return (
-            <View className="flex-1 bg-bg">
-                <Header
-                    title={t('premium.title') || 'Oxy+ Subscriptions'}
-                    subtitle={t('premium.forApp', { app: getAppDisplayName(currentAppPackage) }) || `for ${getAppDisplayName(currentAppPackage)}`}
-                    onBack={goBack || onClose}
-                    onClose={onClose}
-                    showCloseButton={!!onClose}
-                    elevation="subtle"
-                />
-                <View className="flex-1 items-center justify-center px-screen-margin">
+            <>
+                <View className="items-center justify-center px-screen-margin py-space-40">
                     <ActivityIndicator size="large" color={colors.primary} />
                     <Text className="text-text-secondary text-base text-center mt-space-16">
                         {t('premium.loading') || 'Loading subscription plans...'}
                     </Text>
                 </View>
-            </View>
+            </>
         );
     }
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('premium.title') || 'Oxy+ Subscriptions'}
-                subtitle={t('premium.forApp', { app: getAppDisplayName(currentAppPackage) }) || `for ${getAppDisplayName(currentAppPackage)}`}
-                onBack={goBack || onClose}
-                onClose={onClose}
-                showCloseButton={!!onClose}
-                elevation="subtle"
-            />
-
-            <ScrollView
-                className="flex-1"
-                contentContainerClassName="px-screen-margin pb-space-32"
-                showsVerticalScrollIndicator={false}
-            >
+        <>
+
+            <View className="px-screen-margin pb-space-32">
                 <View className="pt-space-20">
                     {renderAppSwitcher()}
 
@@ -1114,27 +1095,8 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         </BenefitList>
                     </View>
                 </View>
-            </ScrollView>
-
-            <Dialog
-                control={cancelSubscriptionDialog}
-                title={t('premium.confirms.cancelSubTitle') || 'Cancel Subscription'}
-                description={t('premium.confirms.cancelSub') || 'Are you sure you want to cancel your subscription? You will lose access to premium features at the end of your current billing period.'}
-                actions={[
-                    { label: t('premium.actions.cancelSubBtn') || 'Cancel Subscription', color: 'destructive', onPress: handleCancelSubscription },
-                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-                ]}
-            />
-            <Dialog
-                control={unsubscribeFeatureDialog}
-                title={t('premium.confirms.unsubscribeFeatureTitle') || 'Unsubscribe from Feature'}
-                description={pendingUnsubscribeFeature ? (t('premium.confirms.unsubscribeFeature', { name: pendingUnsubscribeFeature.name }) ?? `Are you sure you want to unsubscribe from ${pendingUnsubscribeFeature.name}?`) : ''}
-                actions={[
-                    { label: t('premium.actions.unsubscribe') || 'Unsubscribe', color: 'destructive', onPress: handleFeatureUnsubscribe },
-                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-                ]}
-            />
-        </View>
+            </View>
+        </>
     );
 };
 

package/src/ui/screens/PrivacySettingsScreen.tsx

@@ -1,17 +1,17 @@
 import React, { useState, useCallback, useEffect } 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 { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { Switch } from '@oxyhq/bloom/switch';
 import { Button } from '@oxyhq/bloom/button';
 import { useTheme } from '@oxyhq/bloom/theme';
-import Header from '../components/Header';
 import { Avatar } from '@oxyhq/bloom/avatar';
 import { Loading } from '@oxyhq/bloom/loading';
 import { Text } from '@oxyhq/bloom/typography';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useSettingToggles } from '../hooks/useSettingToggle';
 import type { BlockedUser, RestrictedUser } from '@oxyhq/core';
 import { getAccountDisplayName } from '@oxyhq/core';
@@ -69,6 +69,8 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
     // switched, else the personal user).
     const { oxyServices, user } = useOxy();
     const { t, locale } = useI18n();
+
+    useSurfaceHeader({ title: t('privacySettings.title') || 'Privacy Settings' });
     const bloomTheme = useTheme();
     const [isLoading, setIsLoading] = useState(true);
     const [blockedUsers, setBlockedUsers] = useState<BlockedUser[]>([]);
@@ -205,29 +207,16 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
 
     if (isLoading) {
         return (
-            <View className="flex-1 bg-bg">
-                <Header
-                    title={t('privacySettings.title') || 'Privacy Settings'}
-                    onBack={goBack || onClose}
-                    variant="minimal"
-                    elevation="subtle"
-                />
+            <>
                 <Loading size="large" color={bloomTheme.colors.text} />
-            </View>
+            </>
         );
     }
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('privacySettings.title') || 'Privacy Settings'}
-                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">
                     {/* Account Privacy */}
                     <SettingsListGroup title={t('privacySettings.sections.account') || 'ACCOUNT PRIVACY'}>
                         <SettingsListItem
@@ -423,8 +412,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                         )}
                     </SettingsListGroup>
                 </View>
-            </ScrollView>
-        </View>
+        </>
     );
 };
 

package/src/ui/screens/ProfileScreen.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { useEffect, useState } from 'react';
-import { View, StyleSheet, ActivityIndicator, ScrollView } from 'react-native';
+import { View, StyleSheet, ActivityIndicator } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Button } from '@oxyhq/bloom/button';
@@ -142,7 +142,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
 
     if (isLoading) {
         return (
-            <View style={styles.centerContainer} className="bg-bg">
+            <View className="items-center py-space-40">
                 <ActivityIndicator size="large" color={bloomTheme.colors.primary} />
             </View>
         );
@@ -150,7 +150,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
 
     if (error) {
         return (
-            <View style={styles.container} className="bg-bg">
+            <>
                 <View style={styles.errorHeader} className="px-screen-margin py-space-12 border-b border-border">
                     {goBack && (
                         <Button
@@ -165,14 +165,14 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                         {t('profile.errorTitle') || 'Profile Error'}
                     </H2>
                 </View>
-                <View style={styles.errorContent} className="px-space-32 gap-space-12">
+                <View style={styles.errorContent} className="px-space-32 gap-space-12 py-space-40">
                     <Ionicons name="alert-circle" size={48} color={bloomTheme.colors.error} />
                     <Text style={styles.errorText} className="text-text">{error}</Text>
                     <Text style={styles.errorSubtext} className="text-text-secondary">
                         {t('profile.errorSubtext') || "This could happen if the user doesn't exist or the profile service is unavailable."}
                     </Text>
                 </View>
-            </View>
+            </>
         );
     }
 
@@ -192,8 +192,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
     })();
 
     return (
-        <View style={styles.container} className="bg-bg">
-            <ScrollView style={styles.flex} contentContainerStyle={styles.scrollContainer}>
+        <View style={styles.scrollContainer}>
                 {/* Banner Image */}
                 <View style={styles.bannerContainer} className="bg-fill-brand/20">
                     <View style={styles.flex} className="bg-fill-brand" />
@@ -243,6 +242,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                 </View>
 
                 {/* Info Grid as a settings list group */}
+                <View className="px-screen-margin">
                 <SettingsListGroup>
                     {profile?.createdAt && (
                         <SettingsListItem
@@ -302,6 +302,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                         />
                     )}
                 </SettingsListGroup>
+                </View>
 
                 {/* All Stats in one row */}
                 <View style={styles.statsRow} className="px-screen-margin">
@@ -326,7 +327,6 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                         <Text style={styles.statLabel} className="text-text-secondary">{t('profile.following') || 'Following'}</Text>
                     </View>
                 </View>
-            </ScrollView>
         </View>
     );
 };
@@ -335,9 +335,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
 // that no token class can express. Colors, spacing, radius, and typography roles
 // live on Bloom components + NativeWind token classes.
 const styles = StyleSheet.create({
-    container: { flex: 1 },
     flex: { flex: 1 },
-    centerContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
     scrollContainer: { alignItems: 'stretch', paddingBottom: 40 },
     bannerContainer: { height: BANNER_HEIGHT, position: 'relative', overflow: 'hidden' },
     avatarRow: {
@@ -366,7 +364,7 @@ const styles = StyleSheet.create({
     // Error state layout
     errorHeader: { flexDirection: 'row', alignItems: 'center', gap: 16 },
     errorTitle: { fontSize: 20 },
-    errorContent: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+    errorContent: { justifyContent: 'center', alignItems: 'center' },
     errorText: { fontSize: 18, fontWeight: '600', textAlign: 'center' },
     errorSubtext: { fontSize: 14, textAlign: 'center' },
 });

package/src/ui/screens/SavesCollectionsScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } 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 {
@@ -9,11 +9,11 @@ import {
 } from '@oxyhq/bloom/segmented-control';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
-import Header from '../components/Header';
 import { Loading } from '@oxyhq/bloom/loading';
 import { Text } from '@oxyhq/bloom/typography';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useOxy } from '../context/OxyContext';
 
 type SavesTab = 'saves' | 'collections';
@@ -42,6 +42,8 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
     // switched, else the personal user).
     const { oxyServices, user } = useOxy();
     const { t } = useI18n();
+
+    useSurfaceHeader({ title: t('saves.title') || 'Saves & Collections' });
     const bloomTheme = useTheme();
     const [savedItems, setSavedItems] = useState<SavedItem[]>([]);
     const [collections, setCollections] = useState<Collection[]>([]);
@@ -87,13 +89,7 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
     };
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('saves.title') || 'Saves & Collections'}
-                onBack={goBack || onClose}
-                variant="minimal"
-                elevation="subtle"
-            />
+        <>
 
             {/* Tabs */}
             <View className="px-screen-margin py-space-12 border-b border-border">
@@ -116,8 +112,7 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
                 </SegmentedControl>
             </View>
 
-            <ScrollView className="flex-1">
-                <View className="px-screen-margin pb-space-24">
+            <View className="px-screen-margin pb-space-24">
                     {isLoading ? (
                         <Loading
                             size="large"
@@ -165,8 +160,7 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
                         )
                     )}
                 </View>
-            </ScrollView>
-        </View>
+        </>
     );
 };
 

package/src/ui/screens/SearchSettingsScreen.tsx

@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from 'react';
-import { View, ScrollView } from 'react-native';
+import { View } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import Header from '../components/Header';
 import { Loading } from '@oxyhq/bloom/loading';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { Switch } from '@oxyhq/bloom/switch';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useSettingToggles } from '../hooks/useSettingToggle';
 import { useOxy } from '../context/OxyContext';
 import type { User } from '@oxyhq/core';
@@ -26,6 +26,8 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
     // authenticate as the active session, which IS that account.
     const { oxyServices, user } = useOxy();
     const { t } = useI18n();
+
+    useSurfaceHeader({ title: t('searchSettings.title') || 'Search Settings' });
     const bloomTheme = useTheme();
     const [isLoading, setIsLoading] = useState(true);
 
@@ -79,29 +81,16 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
 
     if (isLoading) {
         return (
-            <View className="flex-1 bg-bg">
-                <Header
-                    title={t('searchSettings.title') || 'Search Settings'}
-                    onBack={goBack || onClose}
-                    variant="minimal"
-                    elevation="subtle"
-                />
+            <>
                 <Loading size="large" color={bloomTheme.colors.text} />
-            </View>
+            </>
         );
     }
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('searchSettings.title') || 'Search Settings'}
-                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">
                     {/* SafeSearch */}
                     <SettingsListGroup title={t('searchSettings.safeSearch.title') || 'SafeSearch'}>
                         <SettingsListItem
@@ -146,8 +135,7 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
                         />
                     </SettingsListGroup>
                 </View>
-            </ScrollView>
-        </View>
+        </>
     );
 };
 

package/src/ui/screens/UserLinksScreen.tsx

@@ -1,11 +1,11 @@
 import type React from 'react';
-import { View, ScrollView, Linking } from 'react-native';
+import { View, Linking } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import Header from '../components/Header';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 
 interface UserLinksScreenProps extends BaseScreenProps {
     userId: string;
@@ -28,6 +28,8 @@ const UserLinksScreen: React.FC<UserLinksScreenProps> = ({
     const bloomTheme = useTheme();
     const { t } = useI18n();
 
+    useSurfaceHeader({ title: t('userLinks.title'), subtitle: links.length !== 1 ? t('userLinks.linkCount_plural', { count: links.length }) : t('userLinks.linkCount', { count: links.length }) });
+
     const handleLinkPress = async (url: string) => {
         try {
             await Linking.openURL(url);
@@ -39,17 +41,9 @@ const UserLinksScreen: React.FC<UserLinksScreenProps> = ({
     };
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('userLinks.title')}
-                subtitle={links.length !== 1 ? t('userLinks.linkCount_plural', { count: links.length }) : t('userLinks.linkCount', { count: links.length })}
-                onBack={goBack}
-                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('userLinks.title')}>
                         {links.map((link) => (
                             <SettingsListItem
@@ -62,8 +56,7 @@ const UserLinksScreen: React.FC<UserLinksScreenProps> = ({
                         ))}
                     </SettingsListGroup>
                 </View>
-            </ScrollView>
-        </View>
+        </>
     );
 };
 

package/src/ui/screens/UserListScreen.tsx

@@ -12,11 +12,11 @@ import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { H6, Text } from '@oxyhq/bloom/typography';
 import { Button } from '@oxyhq/bloom/button';
-import Header from '../components/Header';
 import { Avatar } from '@oxyhq/bloom/avatar';
 import FollowButton from '../components/FollowButton';
 import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useOxy } from '../context/OxyContext';
 import { logger, getAccountDisplayName, getAccountFallbackHandle } from '@oxyhq/core';
 import type { User } from '@oxyhq/core';
@@ -46,7 +46,6 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
   userId,
   mode,
   initialCount,
-  goBack,
   navigate,
 }) => {
   const { oxyServices, user: currentUser } = useOxy();
@@ -230,11 +229,11 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
     : (t('userList.following') || 'Following');
 
   const headerSubtitle = total > 0 ? String(total) : undefined;
+  useSurfaceHeader({ title, subtitle: headerSubtitle });
 
   if (isLoading && users.length === 0) {
     return (
       <View className="flex-1 bg-bg">
-        <Header title={title} onBack={goBack} elevation="subtle" />
         <View style={styles.center}>
           <ActivityIndicator size="large" color={bloomTheme.colors.primary} />
         </View>
@@ -245,7 +244,6 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
   if (error) {
     return (
       <View className="flex-1 bg-bg">
-        <Header title={title} onBack={goBack} elevation="subtle" />
         <View style={styles.center} className="px-space-32 gap-space-16">
           <Ionicons name="alert-circle" size={ERROR_ICON_SIZE} color={bloomTheme.colors.error} />
           <Text className="text-text-secondary text-base text-center">{error}</Text>
@@ -259,7 +257,6 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
 
   return (
     <View className="flex-1 bg-bg">
-      <Header title={title} subtitle={headerSubtitle} onBack={goBack} elevation="subtle" />
       <FlatList
         data={users}
         renderItem={renderUser}

package/src/ui/screens/fileManagement/PhotoPickerSection.tsx

@@ -385,7 +385,7 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
     // long, and the panel hugs its content when the grid is short (no huge empty
     // panel). The cap is tighter for the centered card (a floating modal reads
     // better below full height); the bottom sheet may run taller. Keep this
-    // breakpoint in sync with `DIALOG_PLACEMENT` in BottomSheetRouter.
+    // breakpoint in sync with `SHEET_PLACEMENT` in surfaces.ts.
     const isCenteredPanel = windowWidth >= BREAKPOINTS.md;
     const maxPanelHeight = useMemo(
         () => (isCenteredPanel