@oxyhq/services 22.8.7 → 22.10.0

package/src/ui/navigation/surfaces.ts

@@ -0,0 +1,272 @@
+import { createElement } from 'react';
+import type { ViewStyle } from 'react-native';
+import {
+  surfaces as bloomSurfaces,
+  type PresentOptions,
+  type SurfaceControls,
+} from '@oxyhq/bloom/surfaces';
+import SurfaceScreen from '../components/SurfaceScreen';
+import type { RouteName } from './routes';
+import {
+  getSurfaceConfig,
+  getSurfacePresentation,
+  type SurfacePresentation,
+  type SurfaceProps,
+  type SurfaceResult,
+  type SurfaceRouteConfig,
+} from './surfaceRegistry';
+import { createSurfaceNavStack, type SurfaceNavStack } from './surfaceNavStack';
+
+/**
+ * The SDK's typed surface API — a route registry layered on top of Bloom's
+ * content-agnostic surface stack (`@oxyhq/bloom/surfaces`).
+ *
+ * `present(route)` opens a NEW Bloom surface (the DEPTH axis) whose content is a
+ * {@link SurfaceScreen} driven by the route's own {@link SurfaceNavStack} (the
+ * NAV-WITHIN axis). Navigating within that surface mutates its nav stack and
+ * re-renders the SAME Bloom surface; presenting stacks another surface on top.
+ *
+ * Bloom coordinates z-order / backdrop / dismiss across every surface (SDK's and
+ * apps'), so nothing clashes.
+ */
+
+/** Responsive "sheet": bottom sheet on narrow, centered card on wide. */
+const SHEET_PLACEMENT = { base: 'bottom', md: 'center' } as const;
+
+/** Full-bleed black canvas for the `'fullScreen'` approximation (image picker). */
+const FULLSCREEN_SURFACE_STYLE: ViewStyle = { backgroundColor: '#000000', overflow: 'hidden' };
+
+/**
+ * Every SDK screen owns its own background + content padding + scroll region
+ * (they were authored for the bare `BottomSheet`). So the shared `Dialog` must
+ * NOT add its own `contentPadding` on top (that double-pads) — it owns only the
+ * structural chrome: the surface card, the size cap (`maxHeightRatio`) and the
+ * scroll boundary. `contentPadding: 0` makes the screen's own padding the single
+ * source, matching the image-picker (`fullScreen`) surface.
+ */
+const SDK_SURFACE_CHROME = { contentPadding: 0, maxHeightRatio: 0.9 } as const;
+
+/** Map a route's presentation taxonomy onto concrete Bloom `Dialog` options. */
+function bloomOptionsFor(config: SurfaceRouteConfig): PresentOptions {
+  // Threaded onto every placement so a route that owns its own scroll container
+  // (`scrollable: false`) opts out of the Dialog's internal ScrollView.
+  const scrollable = config.scrollable;
+  // Nav-header mode marker: turns on the Dialog's OWN sticky gradient nav bar +
+  // large collapsing title over its scroll content. The title/subtitle/action
+  // slots are contributed at runtime by the mounted screen via `useSurfaceHeader`
+  // (resolved in `SurfaceScreen`), so the seed here just enables the scaffold.
+  const header = config.header ? { largeTitle: true } : undefined;
+  switch (config.presentation) {
+    case 'center':
+      return { placement: 'center', scrollable, header, ...SDK_SURFACE_CHROME };
+    case 'drawer':
+      return { placement: { base: 'bottom', md: 'left' }, scrollable, header, ...SDK_SURFACE_CHROME };
+    case 'fullScreen':
+      // Approximate a full-screen surface with the shared `Dialog`: a tall
+      // sheet / large centered card, flush content, a black canvas and
+      // programmatic-only dismiss — matching the shipped image-picker Dialog.
+      return {
+        placement: SHEET_PLACEMENT,
+        contentPadding: 0,
+        maxWidth: 640,
+        maxHeightRatio: 0.9,
+        dismissOnBackdrop: false,
+        scrollable,
+        style: FULLSCREEN_SURFACE_STYLE,
+        panelStyle: FULLSCREEN_SURFACE_STYLE,
+      };
+    default:
+      return { placement: SHEET_PLACEMENT, scrollable, header, ...SDK_SURFACE_CHROME };
+  }
+}
+
+/**
+ * A live handle to a presented SDK surface. Exposes DEPTH controls (`dismiss`,
+ * `result`) and NAV-WITHIN controls (`navigate`/`replace`/`goBack`/`setStep`) that
+ * drive this surface's own nav stack. Held by the `showBottomSheet` adapter (base
+ * surface) and by `OxyContext` (the AccountDialog surface).
+ */
+export interface SurfaceInstance<K extends RouteName = RouteName> {
+  readonly route: RouteName;
+  readonly presentation: SurfacePresentation;
+  navigate: (route: RouteName, props?: Record<string, unknown>) => void;
+  replace: (route: RouteName, props?: Record<string, unknown>) => void;
+  goBack: () => boolean;
+  canGoBack: () => boolean;
+  setStep: (step: number) => void;
+  dismiss: (result?: SurfaceResult<K>) => void;
+  readonly result: Promise<SurfaceResult<K> | undefined>;
+}
+
+/**
+ * The type-erased handle the `showBottomSheet` adapter needs from a tracked
+ * surface: what it hosts, and how to drive/dismiss it. Kept result-type-free so
+ * the (generic) `SurfaceInstance<K>` never has to be widened into a shared array.
+ */
+interface TrackedSurface {
+  readonly route: RouteName;
+  readonly presentation: SurfacePresentation;
+  navigate: (route: RouteName, props?: Record<string, unknown>) => void;
+  goBack: () => boolean;
+  dismiss: () => void;
+}
+
+/**
+ * Active SDK "route" surfaces (the `showBottomSheet` lineage), bottom → top.
+ * `present`/`presentRoute` register here; `presentDetached` (AccountDialog) does
+ * NOT, so the base-sheet navigation logic never treats the account modal as a
+ * navigable base. Entries self-remove when their surface is dismissed.
+ */
+const activeRouteSurfaces: TrackedSurface[] = [];
+
+function presentInternal<K extends RouteName>(
+  route: K,
+  props: Record<string, unknown>,
+  opts: PresentOptions | undefined,
+  track: boolean,
+): SurfaceInstance<K> {
+  const navStack = createSurfaceNavStack(route, props);
+  const config = getSurfaceConfig(route, props);
+  const bloomOpts: PresentOptions = { label: route, ...bloomOptionsFor(config), ...opts };
+
+  const result = bloomSurfaces.present<SurfaceResult<K>>((surface: SurfaceControls) =>
+    createElement(SurfaceScreen, {
+      navStack,
+      surface,
+      presentation: config.presentation,
+      dismissOnBackdrop: bloomOpts.dismissOnBackdrop ?? true,
+    }),
+    bloomOpts,
+  );
+
+  const instance: SurfaceInstance<K> = {
+    route,
+    presentation: config.presentation,
+    navigate: (nextRoute, nextProps) => {
+      const top = navStack.getTop();
+      if (top.route === nextRoute) navStack.replace(nextRoute, nextProps);
+      else navStack.navigate(nextRoute, nextProps);
+    },
+    replace: (nextRoute, nextProps) => navStack.replace(nextRoute, nextProps),
+    goBack: () => navStack.goBack(),
+    canGoBack: () => navStack.canGoBack(),
+    setStep: (step) => navStack.setStep(step),
+    dismiss: (dismissResult) => navStack.requestDismiss(dismissResult),
+    result,
+  };
+
+  if (track) {
+    const tracked: TrackedSurface = {
+      route: instance.route,
+      presentation: instance.presentation,
+      navigate: instance.navigate,
+      goBack: instance.goBack,
+      dismiss: () => instance.dismiss(),
+    };
+    activeRouteSurfaces.push(tracked);
+    result.finally(() => {
+      const index = activeRouteSurfaces.indexOf(tracked);
+      if (index >= 0) activeRouteSurfaces.splice(index, 1);
+    });
+  }
+
+  return instance;
+}
+
+/**
+ * Present a NEW route surface on top of the stack (the DEPTH axis). Resolves with
+ * the value the surface is dismissed with. Registered in the route-surface stack.
+ */
+export function present<K extends RouteName>(
+  route: K,
+  props?: SurfaceProps<K>,
+  opts?: PresentOptions,
+): SurfaceInstance<K> {
+  return presentInternal(route, (props ?? {}) as Record<string, unknown>, opts, true);
+}
+
+/**
+ * Present a surface that is NOT part of the `showBottomSheet` base-navigation
+ * lineage (the AccountDialog modal). Otherwise identical to {@link present}.
+ */
+export function presentDetached<K extends RouteName>(
+  route: K,
+  props?: SurfaceProps<K>,
+  opts?: PresentOptions,
+): SurfaceInstance<K> {
+  return presentInternal(route, (props ?? {}) as Record<string, unknown>, opts, false);
+}
+
+/**
+ * Untyped present for the adapter, the nav helpers, and the `SurfaceScreen`
+ * binding (where the route is a runtime value and its props are already erased).
+ */
+export function presentRoute(route: RouteName, props?: Record<string, unknown>): SurfaceInstance {
+  return presentInternal(route, props ?? {}, undefined, true);
+}
+
+/** The top-most active route surface, or `undefined` when none are open. */
+export function topRouteSurface(): TrackedSurface | undefined {
+  return activeRouteSurfaces[activeRouteSurfaces.length - 1];
+}
+
+/**
+ * Dismiss every active route surface (the whole `showBottomSheet` session). The
+ * AccountDialog is untracked, so it is untouched. Iterates a snapshot because
+ * `dismiss` mutates `activeRouteSurfaces` asynchronously as surfaces settle.
+ */
+export function closeAllRouteSurfaces(): void {
+  for (const instance of [...activeRouteSurfaces].reverse()) instance.dismiss();
+}
+
+/**
+ * Drill in from a screen: navigate WITHIN the current surface when the target's
+ * presentation matches, else present the target as a NEW surface on top (so a
+ * sheet screen opening the full-bleed picker gets the right chrome).
+ */
+export function navigateWithinOrPresent(
+  currentPresentation: SurfacePresentation,
+  navStack: SurfaceNavStack,
+  route: RouteName,
+  props?: Record<string, unknown>,
+): void {
+  const nextProps = props ?? {};
+  if (getSurfacePresentation(route, nextProps) === currentPresentation) {
+    navStack.navigate(route, nextProps);
+  } else {
+    presentRoute(route, nextProps);
+  }
+}
+
+/** Replace variant of {@link navigateWithinOrPresent}. */
+export function replaceWithinOrPresent(
+  currentPresentation: SurfacePresentation,
+  navStack: SurfaceNavStack,
+  route: RouteName,
+  props?: Record<string, unknown>,
+): void {
+  const nextProps = props ?? {};
+  if (getSurfacePresentation(route, nextProps) === currentPresentation) {
+    navStack.replace(route, nextProps);
+  } else {
+    presentRoute(route, nextProps);
+  }
+}
+
+/**
+ * The SDK's imperative surface API (a module singleton). `present` is the typed
+ * route presenter; `dismissAll` unwinds the whole session. Not yet exported from
+ * the package root — the public `surfaces`/`useSurfaces` API lands in a later
+ * phase; for P1 the internal adapters (`showBottomSheet`, `openAccountDialog`)
+ * are the only public entry points.
+ */
+export const surfaces = {
+  present: <K extends RouteName>(route: K, props?: SurfaceProps<K>, opts?: PresentOptions) =>
+    present(route, props, opts).result,
+  dismissAll: closeAllRouteSurfaces,
+} as const;
+
+/** Hook form of {@link surfaces} (stable singleton). */
+export function useSurfaces(): typeof surfaces {
+  return surfaces;
+}

package/src/ui/screens/AccountMembersScreen.tsx

@@ -2,26 +2,23 @@ import type React from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import {
   View,
-  ScrollView,
   TouchableOpacity,
   ActivityIndicator,
-  Platform,
-  KeyboardAvoidingView,
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { toast, Dialog, useDialogControl } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom';
+import { surfaces } from '@oxyhq/bloom/surfaces';
 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 { Divider } from '@oxyhq/bloom/divider';
 import type { AccountMember, AccountRole } from '@oxyhq/core';
-import { logger as loggerUtil } from '@oxyhq/core';
 import type { BaseScreenProps } from '../types/navigation';
-import Header from '../components/Header';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 
 /** Roles assignable via invite / role change — everything except `owner`. */
 type AssignableRole = Exclude<AccountRole, 'owner'>;
@@ -45,6 +42,11 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
   const bloomTheme = useTheme();
   const colors = bloomTheme.colors;
   const { t } = useI18n();
+
+  useSurfaceHeader({
+    title: t('accounts.members.title') || 'Members',
+    subtitle: t('accounts.members.subtitle') || 'People with access to this account.',
+  });
   const { oxyServices, canUsePrivateApi } = useOxy();
   const queryClient = useQueryClient();
 
@@ -155,11 +157,6 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
     },
   });
 
-  const [memberToRemove, setMemberToRemove] = useState<AccountMember | null>(null);
-  const [memberToPromote, setMemberToPromote] = useState<AccountMember | null>(null);
-  const removeDialog = useDialogControl();
-  const transferDialog = useDialogControl();
-
   const handleInvite = useCallback(() => {
     const usernameOrEmail = inviteIdentifier.trim();
     if (!usernameOrEmail) {
@@ -177,53 +174,46 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
     updateMutation.mutate({ memberId: member._id, role });
   }, [updateMutation]);
 
-  const confirmRemove = useCallback((member: AccountMember) => {
-    setMemberToRemove(member);
-    removeDialog.open();
-  }, [removeDialog]);
-
-  const confirmTransfer = useCallback((member: AccountMember) => {
-    setMemberToPromote(member);
-    transferDialog.open();
-  }, [transferDialog]);
-
-  const title = t('accounts.members.title') || 'Members';
+  const confirmRemove = useCallback(async (member: AccountMember) => {
+    const confirmed = await surfaces.confirm({
+      title: t('accounts.members.removeConfirm.title') || 'Remove member',
+      message:
+        t('accounts.members.removeConfirm.description')
+        || 'Remove this member from the account? They will lose all access.',
+      confirmLabel: t('accounts.members.actions.remove') || 'Remove',
+      cancelLabel: t('common.cancel') || 'Cancel',
+      destructive: true,
+    });
+    if (confirmed) removeMutation.mutate(member._id);
+  }, [removeMutation, t]);
+
+  const confirmTransfer = useCallback(async (member: AccountMember) => {
+    const confirmed = await surfaces.confirm({
+      title: t('accounts.members.transferConfirm.title') || 'Transfer ownership',
+      message:
+        t('accounts.members.transferConfirm.description')
+        || 'Transfer ownership of this account to this member? You will be demoted to admin. This cannot be undone.',
+      confirmLabel: t('accounts.members.actions.transfer') || 'Transfer ownership',
+      cancelLabel: t('common.cancel') || 'Cancel',
+      destructive: true,
+    });
+    if (confirmed) transferMutation.mutate(member.memberUserId);
+  }, [transferMutation, t]);
 
   if (!id) {
     return (
-      <View className="flex-1 bg-bg">
-        <Header title={title} onBack={goBack} onClose={onClose} showBackButton showCloseButton 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">
           <Text className="text-body font-body text-text-secondary text-center">
             {t('accounts.members.errors.missingAccount') || 'No account selected.'}
           </Text>
         </View>
-      </View>
+      </>
     );
   }
 
   return (
-    <View className="flex-1 bg-bg">
-      <Header title={title} onBack={goBack} onClose={onClose} showBackButton showCloseButton elevation="subtle" />
-
-      <KeyboardAvoidingView
-        className="flex-1"
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        keyboardVerticalOffset={Platform.OS === 'ios' ? 88 : 0}
-      >
-        <ScrollView
-          className="flex-1"
-          contentContainerClassName="px-screen-margin pt-space-24 pb-space-32 gap-space-24"
-          showsVerticalScrollIndicator={false}
-          keyboardShouldPersistTaps="handled"
-        >
-          <View className="gap-space-8">
-            <H1 className="text-headerBold font-headerBold text-text">{title}</H1>
-            <Text className="text-body font-body text-text-secondary">
-              {t('accounts.members.subtitle') || 'People with access to this account.'}
-            </Text>
-          </View>
-
+      <View className="px-screen-margin pt-space-16 pb-space-32 gap-space-24">
           {!accountQuery.isLoading && !canRead ? (
             <Text className="text-body font-body text-text-secondary text-center py-space-24">
               {t('accounts.members.errors.noPermission') || 'You do not have permission to view members.'}
@@ -423,58 +413,7 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
               )}
             </View>
           ) : null}
-        </ScrollView>
-      </KeyboardAvoidingView>
-
-      <Dialog
-        control={removeDialog}
-        title={t('accounts.members.removeConfirm.title') || 'Remove member'}
-        description={
-          t('accounts.members.removeConfirm.description')
-          || 'Remove this member from the account? They will lose all access.'
-        }
-        actions={[
-          {
-            label: t('accounts.members.actions.remove') || 'Remove',
-            color: 'destructive',
-            onPress: () => {
-              const target = memberToRemove;
-              setMemberToRemove(null);
-              if (target) {
-                removeMutation.mutate(target._id);
-              } else {
-                loggerUtil.debug('Remove confirmed with no pending member', { component: 'AccountMembersScreen' });
-              }
-            },
-          },
-          { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-        ]}
-      />
-      <Dialog
-        control={transferDialog}
-        title={t('accounts.members.transferConfirm.title') || 'Transfer ownership'}
-        description={
-          t('accounts.members.transferConfirm.description')
-          || 'Transfer ownership of this account to this member? You will be demoted to admin. This cannot be undone.'
-        }
-        actions={[
-          {
-            label: t('accounts.members.actions.transfer') || 'Transfer ownership',
-            color: 'destructive',
-            onPress: () => {
-              const target = memberToPromote;
-              setMemberToPromote(null);
-              if (target) {
-                transferMutation.mutate(target.memberUserId);
-              } else {
-                loggerUtil.debug('Transfer confirmed with no pending member', { component: 'AccountMembersScreen' });
-              }
-            },
-          },
-          { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-        ]}
-      />
-    </View>
+      </View>
   );
 };
 

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -2,24 +2,22 @@ import type React from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import {
   View,
-  ScrollView,
   ActivityIndicator,
-  Platform,
-  KeyboardAvoidingView,
 } from 'react-native';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { toast, Dialog, useDialogControl } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom';
+import { surfaces } from '@oxyhq/bloom/surfaces';
 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 { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import type { UpdateAccountInput } from '@oxyhq/core';
 import type { BaseScreenProps } from '../types/navigation';
-import Header from '../components/Header';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 
 const DISPLAY_NAME_MAX = 50;
 const BIO_MAX = 160;
@@ -38,6 +36,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, nav
   const bloomTheme = useTheme();
   const colors = bloomTheme.colors;
   const { t } = useI18n();
+
   const { oxyServices, canUsePrivateApi, user, accounts, switchToAccount } = useOxy();
   const queryClient = useQueryClient();
 
@@ -109,7 +108,18 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, nav
     },
   });
 
-  const archiveDialog = useDialogControl();
+  const handleArchive = useCallback(async () => {
+    const confirmed = await surfaces.confirm({
+      title: t('accounts.settings.archive.confirmTitle') || 'Archive account',
+      message:
+        t('accounts.settings.archive.confirmDescription')
+        || 'Archive this account? It will be deactivated and its members will lose access.',
+      confirmLabel: t('accounts.settings.archive.title') || 'Archive account',
+      cancelLabel: t('common.cancel') || 'Cancel',
+      destructive: true,
+    });
+    if (confirmed) archiveMutation.mutate();
+  }, [archiveMutation, t]);
 
   const handleSave = useCallback(() => {
     const trimmed = displayName.trim();
@@ -129,49 +139,35 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, nav
     return username ? `@${username}` : '';
   }, [node?.account?.username]);
 
+  // The nav large title is the account's handle once loaded (falls back to the
+  // generic screen title before the account resolves).
+  useSurfaceHeader({
+    title: accountHandle || title,
+    subtitle: t('accounts.settings.subtitle') || 'Manage this account’s profile, members, and access.',
+  });
+
   if (!id) {
     return (
-      <View className="flex-1 bg-bg">
-        <Header title={title} onBack={goBack} onClose={onClose} showBackButton showCloseButton 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">
           <Text className="text-body font-body text-text-secondary text-center">
             {t('accounts.settings.errors.missingAccount') || 'No account selected.'}
           </Text>
         </View>
-      </View>
+      </>
     );
   }
 
   return (
-    <View className="flex-1 bg-bg">
-      <Header title={title} onBack={goBack} onClose={onClose} showBackButton showCloseButton elevation="subtle" />
+    <>
 
-      <KeyboardAvoidingView
-        className="flex-1"
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        keyboardVerticalOffset={Platform.OS === 'ios' ? 88 : 0}
-      >
-        <ScrollView
-          className="flex-1"
-          contentContainerClassName="px-screen-margin pt-space-24 pb-space-32 gap-space-24"
-          showsVerticalScrollIndicator={false}
-          keyboardShouldPersistTaps="handled"
-        >
+      <View className="px-screen-margin pt-space-24 pb-space-32 gap-space-24">
           {accountQuery.isLoading ? (
             <View className="items-center py-space-32">
               <ActivityIndicator color={colors.primary} />
             </View>
           ) : (
             <>
-              <View className="gap-space-8">
-                <H1 className="text-headerBold font-headerBold text-text" numberOfLines={1}>
-                  {accountHandle || title}
-                </H1>
-                <Text className="text-body font-body text-text-secondary">
-                  {t('accounts.settings.subtitle') || 'Manage this account’s profile, members, and access.'}
-                </Text>
-              </View>
-
               {/* Profile edit */}
               {canUpdate ? (
                 <View className="gap-space-16 p-space-16 rounded-radius-20 bg-fill">
@@ -233,32 +229,14 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, nav
                     icon={<SettingsIcon name="archive-arrow-down" color={colors.error} />}
                     title={t('accounts.settings.archive.title') || 'Archive account'}
                     description={t('accounts.settings.archive.subtitle') || 'Deactivate this account'}
-                    onPress={() => archiveDialog.open()}
+                    onPress={handleArchive}
                   />
                 </SettingsListGroup>
               ) : null}
             </>
           )}
-        </ScrollView>
-      </KeyboardAvoidingView>
-
-      <Dialog
-        control={archiveDialog}
-        title={t('accounts.settings.archive.confirmTitle') || 'Archive account'}
-        description={
-          t('accounts.settings.archive.confirmDescription')
-          || 'Archive this account? It will be deactivated and its members will lose access.'
-        }
-        actions={[
-          {
-            label: t('accounts.settings.archive.title') || 'Archive account',
-            color: 'destructive',
-            onPress: () => archiveMutation.mutate(),
-          },
-          { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-        ]}
-      />
-    </View>
+      </View>
+    </>
   );
 };