@oxyhq/services 22.9.0 → 22.11.0

package/src/ui/components/{OxyAccountDialog.tsx → OxyAccountDialogScreen.tsx}

@@ -1,5 +1,5 @@
 /**
- * OxyAccountDialog — the ONE unified account dialog BODY for `@oxyhq/services`.
+ * OxyAccountDialogScreen — the ONE unified account dialog BODY for `@oxyhq/services`.
  *
  * The header (title/subtitle per view + back button) around the headless chooser
  * logic, which lives in `OxyAuthChooser` — the account switcher, sign-in,
@@ -23,19 +23,25 @@
 
 import type React from 'react';
 import { useCallback, useSyncExternalStore } from 'react';
-import { Pressable, ScrollView, StyleSheet, View } from 'react-native';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { Text } from '@oxyhq/bloom/typography';
-import { useTheme } from '@oxyhq/bloom/theme';
+import { StyleSheet, View } from 'react-native';
 import type { AccountDialogSnapshot } from '@oxyhq/core';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
+import type { BaseScreenProps } from '../types/navigation';
+import LogoText from './logo/LogoText';
 import OxyAuthChooser from './OxyAuthChooser';
-import { LogoIcon } from './logo/LogoIcon';
 
-type Theme = ReturnType<typeof useTheme>;
 type Translate = ReturnType<typeof useI18n>['t'];
 
+/**
+ * The account MENU's nav bar carries the Oxy wordmark instead of a title — the
+ * surface IS the Oxy account, so naming it in prose is redundant. A module-level
+ * element: it takes no props, so its identity is stable forever and the header's
+ * identity-compared slot never thrashes.
+ */
+const NAV_LOGO = <LogoText height={20} />;
+
 /**
  * The unified account dialog BODY — the header + `OxyAuthChooser` chooser.
  *
@@ -49,9 +55,8 @@ type Translate = ReturnType<typeof useI18n>['t'];
  * `@oxyhq/core`. Closing routes through `useOxy().closeAccountDialog`, which
  * dismisses the surface and runs its exit animation.
  */
-const OxyAccountDialog: React.FC = () => {
+const OxyAccountDialogScreen: React.FC<BaseScreenProps> = ({ canGoBack }) => {
   const { accountDialogController: controller, closeAccountDialog } = useOxy();
-  const theme = useTheme();
   const { t } = useI18n();
 
   // A lightweight, header-only binding to the same controller `OxyAuthChooser`
@@ -67,79 +72,38 @@ const OxyAccountDialog: React.FC = () => {
   );
   const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 
-  if (!controller) {
-    return null;
-  }
-
   const { view } = snapshot;
   const showBack =
     view === 'qr' || view === 'signup' || (view === 'add' && snapshot.accounts.length > 0);
+  const goToAccounts = useCallback(() => controller?.setView('accounts'), [controller]);
+  // An ENTRY view (accounts / signin — no in-dialog back of its own) that is
+  // MORPHED into a host surface (ManageAccount → switcher) has a frame beneath it,
+  // so its back CLOSES the dialog and reshapes back to the host — routed through
+  // `closeAccountDialog` so the pop + state teardown stay in one place. Opened
+  // cold (detached) it is the root frame → `canGoBack` is false → no back.
+  const backsToHost = !showBack && (canGoBack?.() ?? false);
+  // The account MENU is branded, not titled: its nav bar carries the Oxy
+  // wordmark and no large title. The current account is named by the HERO block
+  // `OxyAuthChooser` renders under it (email + large avatar + greeting), never
+  // by the bar. Every OTHER view keeps the SHARED Dialog nav header the rest of
+  // the SDK uses — a large in-content title/subtitle that collapses into the bar
+  // on scroll — because their copy is informative.
+  const copy = view === 'accounts' ? null : headerCopy(view, snapshot.accounts.length, t);
 
-  return (
-    <>
-      <DialogHeader
-        snapshot={snapshot}
-        theme={theme}
-        t={t}
-        showBack={showBack}
-        onBack={() => controller.setView('accounts')}
-        onClose={closeAccountDialog}
-      />
-      <ScrollView style={styles.body} contentContainerStyle={styles.bodyContent} showsVerticalScrollIndicator={false}>
-        <OxyAuthChooser onComplete={closeAccountDialog} />
-      </ScrollView>
-    </>
-  );
-};
+  useSurfaceHeader({
+    titleContent: copy ? undefined : NAV_LOGO,
+    title: copy?.title,
+    subtitle: copy?.subtitle ?? undefined,
+    onBack: showBack ? goToAccounts : backsToHost ? closeAccountDialog : undefined,
+  });
 
-// ---------------------------------------------------------------------------
-// Header
-// ---------------------------------------------------------------------------
-
-interface HeaderProps {
-  snapshot: AccountDialogSnapshot;
-  theme: Theme;
-  t: Translate;
-  showBack: boolean;
-  onBack: () => void;
-  onClose: () => void;
-}
+  if (!controller) {
+    return null;
+  }
 
-const DialogHeader: React.FC<HeaderProps> = ({ snapshot, theme, t, showBack, onBack, onClose }) => {
-  const { title, subtitle } = headerCopy(snapshot.view, snapshot.accounts.length, t);
   return (
-    <View style={styles.header}>
-      <View style={styles.headerBar}>
-        {showBack ? (
-          <Pressable
-            onPress={onBack}
-            style={[styles.iconButton, { backgroundColor: theme.colors.backgroundSecondary }]}
-            accessibilityRole="button"
-            accessibilityLabel={t('common.actions.back') || 'Back'}
-          >
-            <MaterialCommunityIcons name="chevron-left" size={22} color={theme.colors.textSecondary} />
-          </Pressable>
-        ) : (
-          <View style={styles.iconButton} />
-        )}
-        <LogoIcon height={34} color={theme.colors.primary} />
-        <Pressable
-          onPress={onClose}
-          style={[styles.iconButton, { backgroundColor: theme.colors.backgroundSecondary }]}
-          accessibilityRole="button"
-          accessibilityLabel={t('common.actions.close') || 'Close'}
-        >
-          <MaterialCommunityIcons name="close" size={20} color={theme.colors.textSecondary} />
-        </Pressable>
-      </View>
-      <Text style={[styles.title, { color: theme.colors.text }]} numberOfLines={1}>
-        {title}
-      </Text>
-      {subtitle ? (
-        <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]} numberOfLines={2}>
-          {subtitle}
-        </Text>
-      ) : null}
+    <View style={styles.bodyContent}>
+      <OxyAuthChooser onComplete={closeAccountDialog} />
     </View>
   );
 };
@@ -149,16 +113,11 @@ const DialogHeader: React.FC<HeaderProps> = ({ snapshot, theme, t, showBack, onB
 // ---------------------------------------------------------------------------
 
 function headerCopy(
-  view: AccountDialogSnapshot['view'],
+  view: Exclude<AccountDialogSnapshot['view'], 'accounts'>,
   accountCount: number,
   t: Translate,
 ): { title: string; subtitle: string | null } {
   switch (view) {
-    case 'accounts':
-      return {
-        title: t('accountSwitcher.sections.yourAccounts') || 'Your accounts',
-        subtitle: t('signin.chooser.subtitle') || 'Choose which account to continue with.',
-      };
     case 'qr':
       return {
         title: t('accountSwitcher.scanTitle') || 'Sign in with Oxy',
@@ -193,45 +152,20 @@ const EMPTY_SNAPSHOT: AccountDialogSnapshot = {
   commonsAvailability: 'unknown',
 };
 
+/**
+ * The screen gutter. In the Dialog's nav-header mode the surface adds NO content
+ * padding of its own — the large title and each screen own theirs — so this must
+ * match Bloom's own large-title gutter (`screen-margin`, 20px) for the body to
+ * line up with the title above it.
+ */
+const SCREEN_MARGIN = 20;
+
 const styles = StyleSheet.create({
-  header: {
-    alignItems: 'center',
-    marginBottom: 12,
-  },
-  headerBar: {
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 8,
-  },
-  iconButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 22,
-    fontWeight: '800',
-    letterSpacing: -0.4,
-    textAlign: 'center',
-    marginTop: 6,
-  },
-  subtitle: {
-    fontSize: 14,
-    lineHeight: 19,
-    textAlign: 'center',
-    marginTop: 4,
-  },
-  body: {
-    width: '100%',
-  },
   bodyContent: {
     paddingTop: 4,
     paddingBottom: 4,
+    paddingHorizontal: SCREEN_MARGIN,
   },
 });
 
-export default OxyAccountDialog;
+export default OxyAccountDialogScreen;