@oxyhq/services 22.9.0 → 22.10.0

package/src/ui/components/fileManagement/FileDetailsModal.tsx

@@ -1,62 +1,40 @@
 import type React from 'react';
 import { View, Text } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import { Dialog, type DialogControlProps } from '@oxyhq/bloom';
+import { Button } from '@oxyhq/bloom/button';
 import { useTheme } from '@oxyhq/bloom/theme';
+import { surfaces, type SurfaceControls } from '@oxyhq/bloom/surfaces';
 import type { FileMetadata } from '@oxyhq/core';
 import { useI18n } from '../../hooks/useI18n';
 import { formatFileSize, getFileIcon } from '../../utils/fileManagement';
 
 interface FileDetailsModalProps {
-    control: DialogControlProps;
-    file: FileMetadata | null;
+    /** The presenting surface's controls (from `surfaces.present`). */
+    surface: SurfaceControls;
+    file: FileMetadata;
     onDownload: (fileId: string, filename: string) => void;
     onDelete: (fileId: string, filename: string) => void;
     isOwner: boolean;
-    onClose?: () => void;
 }
 
+/**
+ * File-detail panel — a rich presented surface (NOT a yes/no confirm): a file's
+ * icon + metadata plus download / delete / cancel actions. Each action first
+ * dismisses this surface, then runs its handler, so a follow-up delete confirm
+ * stacks cleanly above whatever remains. Presented via {@link presentFileDetails}.
+ */
 export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
-    control,
+    surface,
     file,
     onDownload,
     onDelete,
     isOwner,
-    onClose,
 }) => {
     const { t } = useI18n();
     const { colors } = useTheme();
 
-    if (!file) return null;
-
-    const actions = isOwner
-        ? [
-              {
-                  label: t('fileManagement.details.download'),
-                  onPress: () => onDownload(file.id, file.filename),
-              },
-              {
-                  label: t('common.actions.delete'),
-                  color: 'destructive' as const,
-                  onPress: () => onDelete(file.id, file.filename),
-              },
-              { label: t('common.cancel'), color: 'cancel' as const },
-          ]
-        : [
-              {
-                  label: t('fileManagement.details.download'),
-                  onPress: () => onDownload(file.id, file.filename),
-              },
-              { label: t('common.cancel'), color: 'cancel' as const },
-          ];
-
     return (
-        <Dialog
-            control={control}
-            onClose={onClose}
-            label={t('fileManagement.details.title')}
-            actions={actions}
-        >
+        <View>
             <View className="bg-secondary border-border p-[18px] rounded-[14px] border items-center">
                 <View className="mb-space-16">
                     <Ionicons
@@ -110,6 +88,42 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
                     )}
                 </View>
             </View>
-        </Dialog>
+
+            <View style={{ gap: 8 }}>
+                <Button
+                    variant="primary"
+                    onPress={() => {
+                        surface.dismiss();
+                        onDownload(file.id, file.filename);
+                    }}
+                >
+                    {t('fileManagement.details.download')}
+                </Button>
+                {isOwner ? (
+                    <Button
+                        variant="destructive"
+                        onPress={() => {
+                            surface.dismiss();
+                            onDelete(file.id, file.filename);
+                        }}
+                    >
+                        {t('common.actions.delete')}
+                    </Button>
+                ) : null}
+                <Button variant="secondary" onPress={() => surface.dismiss()}>
+                    {t('common.cancel')}
+                </Button>
+            </View>
+        </View>
     );
 };
+
+/** Options accepted by {@link presentFileDetails} (everything but `surface`). */
+type PresentFileDetailsOptions = Omit<FileDetailsModalProps, 'surface'>;
+
+/** Present the file-detail panel on the shared surface stack. */
+export function presentFileDetails(options: PresentFileDetailsOptions): void {
+    void surfaces.present((surface) => (
+        <FileDetailsModal surface={surface} {...options} />
+    ));
+}

package/src/ui/components/modals/DeleteAccountModal.tsx

@@ -2,18 +2,27 @@ import type React from 'react';
 import { useState, useCallback } from 'react';
 import { View, Text, TextInput } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import { Dialog, type DialogControlProps } from '@oxyhq/bloom';
+import { Button } from '@oxyhq/bloom/button';
 import { useTheme } from '@oxyhq/bloom/theme';
+import { surfaces, type SurfaceControls } from '@oxyhq/bloom/surfaces';
 
 interface DeleteAccountModalProps {
-    control: DialogControlProps;
+    /** The presenting surface's controls (from `surfaces.present`). */
+    surface: SurfaceControls;
     username: string;
     onDelete: (confirmText: string) => Promise<void>;
     t: (key: string, params?: Record<string, string>) => string | undefined;
 }
 
+/**
+ * Delete-account confirmation — a rich presented surface (NOT a yes/no confirm):
+ * the user must retype their username, then the destructive action runs
+ * `onDelete`. On success the surface is dismissed with `true` (the presenter
+ * then signs out + closes); cancel dismisses with `false`. Presented via
+ * {@link presentDeleteAccount}.
+ */
 const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
-    control,
+    surface,
     username,
     onDelete,
     t,
@@ -33,36 +42,21 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
 
         try {
             await onDelete(confirmUsername);
-            // Dialog will be closed by parent on success
+            surface.dismiss(true);
         } catch (err: unknown) {
             setError((err instanceof Error ? err.message : null) || t('deleteAccount.error') || 'Failed to delete account');
         } finally {
             setIsDeleting(false);
         }
-    }, [isValid, confirmUsername, onDelete, t]);
+    }, [isValid, confirmUsername, onDelete, surface, t]);
 
-    const handleCleanup = useCallback(() => {
+    const handleCancel = useCallback(() => {
         if (isDeleting) return;
-        setConfirmUsername('');
-        setError(null);
-    }, [isDeleting]);
+        surface.dismiss(false);
+    }, [isDeleting, surface]);
 
     return (
-        <Dialog
-            control={control}
-            onClose={handleCleanup}
-            label="Delete Account"
-            actions={[
-                {
-                    label: t('deleteAccount.confirm') || 'Delete Forever',
-                    color: 'destructive',
-                    onPress: handleDelete,
-                    disabled: !isValid || isDeleting,
-                    shouldCloseOnPress: false,
-                },
-                { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-            ]}
-        >
+        <View>
             <View className="flex-row items-center mb-4 gap-3">
                 <Ionicons name="alert-circle" size={32} color={theme.colors.error} />
                 <Text className="text-text text-xl font-bold" style={{ color: theme.colors.error }}>
@@ -92,7 +86,7 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
                 <TextInput
                     className="text-text bg-bg text-base py-3 px-4 border rounded-lg"
                     style={{
-                        borderColor: confirmUsername === username ? theme.colors.success : theme.colors.border,
+                        borderColor: isValid ? theme.colors.success : theme.colors.border,
                     }}
                     value={confirmUsername}
                     onChangeText={setConfirmUsername}
@@ -103,8 +97,35 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
                     editable={!isDeleting}
                 />
             </View>
-        </Dialog>
+
+            <View style={{ gap: 8 }}>
+                <Button
+                    variant="destructive"
+                    onPress={handleDelete}
+                    disabled={!isValid || isDeleting}
+                    loading={isDeleting}
+                >
+                    {t('deleteAccount.confirm') || 'Delete Forever'}
+                </Button>
+                <Button variant="secondary" onPress={handleCancel} disabled={isDeleting}>
+                    {t('common.cancel') || 'Cancel'}
+                </Button>
+            </View>
+        </View>
     );
 };
 
+/** Options accepted by {@link presentDeleteAccount} (everything but `surface`). */
+type PresentDeleteAccountOptions = Omit<DeleteAccountModalProps, 'surface'>;
+
+/**
+ * Present the delete-account confirmation on the shared surface stack. Resolves
+ * `true` once the account is deleted, `false` if cancelled/dismissed.
+ */
+export function presentDeleteAccount(options: PresentDeleteAccountOptions): Promise<boolean> {
+    return surfaces
+        .present<boolean>((surface) => <DeleteAccountModal surface={surface} {...options} />)
+        .then((result) => result === true);
+}
+
 export default DeleteAccountModal;

package/src/ui/components/oxyAuthChooserStyles.ts

@@ -4,7 +4,7 @@ import { StyleSheet } from 'react-native';
 const QR_PLATE_BG = '#FFFFFF';
 
 /**
- * Shared styles for `OxyAuthChooser`'s views. Extracted from `OxyAccountDialog`
+ * Shared styles for `OxyAuthChooser`'s views. Extracted from `OxyAccountDialogScreen`
  * so both the Dialog-wrapped host and any bare host (e.g. a future
  * auth.oxy.so hub page) render identically without duplicating a StyleSheet.
  */
@@ -42,16 +42,30 @@ export const authChooserStyles = StyleSheet.create({
     fontSize: 12.5,
     marginTop: 1,
   },
-  addRow: {
+  /** Prominent current-account header (Google-style collapsed row). */
+  currentAccountRow: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: 12,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderStyle: 'dashed',
-    borderRadius: 16,
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    marginTop: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 4,
+  },
+  currentAccountMeta: {
+    flex: 1,
+    minWidth: 0,
+  },
+  currentAccountName: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  currentAccountEmail: {
+    fontSize: 13,
+    marginTop: 2,
+  },
+  manageButton: {
+    width: '100%',
+    borderRadius: 14,
+    marginTop: 4,
   },
   addBadge: {
     width: 40,
@@ -61,10 +75,6 @@ export const authChooserStyles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  footerLinks: {
-    alignItems: 'center',
-    marginTop: 16,
-  },
   footerLink: {
     alignSelf: 'center',
     paddingVertical: 10,

package/src/ui/components/surfaces/ActionSheetSurface.tsx

@@ -0,0 +1,98 @@
+import type React from 'react';
+import { Text, View } from 'react-native';
+import { Button } from '@oxyhq/bloom/button';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { surfaces, type SurfaceControls } from '@oxyhq/bloom/surfaces';
+
+/**
+ * A single choice in an {@link ActionSheetSurface} — a labelled button that
+ * resolves the surface with `value` when pressed.
+ */
+export interface ActionSheetOption<T extends string> {
+    label: string;
+    value: T;
+    /** Render as a destructive (negative) button. */
+    destructive?: boolean;
+}
+
+export interface ActionSheetSurfaceProps<T extends string> {
+    /** The presenting surface's controls (from `surfaces.present`). */
+    surface: SurfaceControls;
+    /** Headline. */
+    title: string;
+    /** Optional supporting copy. */
+    message?: string;
+    /** The choices; each dismisses the surface with its `value`. */
+    options: ActionSheetOption<T>[];
+    /** Cancel button label — dismisses with `undefined`. */
+    cancelLabel: string;
+}
+
+const TITLE_STYLE = { fontSize: 22, fontWeight: '600' as const, lineHeight: 30 };
+const MESSAGE_STYLE = { fontSize: 16, lineHeight: 22 };
+
+/**
+ * A multi-choice action sheet rendered as a shared-stack surface — the
+ * many-option counterpart to Bloom's two-way `surfaces.confirm`. Each option
+ * button resolves the surface's `present()` promise with that option's `value`;
+ * cancel / backdrop / Escape resolve `undefined`. Presented via
+ * {@link presentActionSheet}.
+ */
+export function ActionSheetSurface<T extends string>({
+    surface,
+    title,
+    message,
+    options,
+    cancelLabel,
+}: ActionSheetSurfaceProps<T>): React.ReactElement {
+    const theme = useTheme();
+
+    return (
+        <View>
+            <Text
+                style={[
+                    TITLE_STYLE,
+                    { color: theme.colors.text, paddingBottom: message ? 4 : 16 },
+                ]}
+            >
+                {title}
+            </Text>
+            {message ? (
+                <Text
+                    style={[
+                        MESSAGE_STYLE,
+                        { color: theme.colors.textSecondary, paddingBottom: 16 },
+                    ]}
+                >
+                    {message}
+                </Text>
+            ) : null}
+            <View style={{ gap: 8 }}>
+                {options.map((option) => (
+                    <Button
+                        key={option.value}
+                        variant={option.destructive ? 'destructive' : 'primary'}
+                        onPress={() => surface.dismiss(option.value)}
+                    >
+                        {option.label}
+                    </Button>
+                ))}
+                <Button variant="secondary" onPress={() => surface.dismiss(undefined)}>
+                    {cancelLabel}
+                </Button>
+            </View>
+        </View>
+    );
+}
+
+/**
+ * Present an {@link ActionSheetSurface} on the shared stack and resolve with the
+ * chosen option `value`, or `undefined` if cancelled/dismissed.
+ */
+export function presentActionSheet<T extends string>(
+    options: Omit<ActionSheetSurfaceProps<T>, 'surface'>,
+): Promise<T | undefined> {
+    return surfaces.present<T | undefined>((surface) => (
+        <ActionSheetSurface surface={surface} {...options} />
+    ));
+}

package/src/ui/context/OxyContext.tsx

@@ -644,9 +644,12 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   const commitSwitchedSessionRef = useRef(commitSwitchedSession);
   commitSwitchedSessionRef.current = commitSwitchedSession;
 
-  // The live AccountDialog surface (a stacked Bloom surface), while open. Held so
+  // The live AccountDialog surface (a stacked Bloom surface), while open — the
+  // SINGLE source of truth for "is the account dialog open". Held so
   // `openAccountDialog` can no-op when already open and `closeAccountDialog` /
-  // `onSignedIn` can dismiss it. Cleared when the surface settles.
+  // `onSignedIn` can dismiss it. Its present→settle lifecycle is what drives the
+  // reactive `accountDialogOpen` mirror below: presenting flips it true, the
+  // surface settling (`result.finally`) flips it false — no other write site.
   const accountDialogSurfaceRef = useRef<SurfaceInstance<'AccountDialog'> | null>(null);
 
   const accountDialogControllerRef = useRef<AccountDialogController | null>(null);
@@ -662,8 +665,11 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       commitSession: (session) => handleWebSessionRef.current(session),
       commitSwitchedSession: (session) => commitSwitchedSessionRef.current(session),
       onSignedIn: () => {
+        // Dismiss the surface; its settle (`result.finally` below) is what flips
+        // `accountDialogOpen` false. The surface's present→settle lifecycle is the
+        // SINGLE source of truth for "is the account dialog open" — never a manual
+        // flip here.
         accountDialogSurfaceRef.current?.dismiss();
-        setAccountDialogOpen(false);
       },
       openUrl: (url) => {
         if (isWebBrowser()) {
@@ -692,7 +698,9 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     // Present the AccountDialog surface on the shared Bloom stack the FIRST time
     // (subsequent opens just re-point the controller's view above). `presentDetached`
     // keeps it OUT of the `showBottomSheet` route-surface lineage, so closing the
-    // bottom-sheet session never touches the account dialog and vice-versa.
+    // bottom-sheet session never touches the account dialog and vice-versa. When a
+    // route surface (e.g. ManageAccount) is already open, this stacks the dialog
+    // ABOVE it; dismissing the dialog unwinds back to that surface.
     if (!accountDialogSurfaceRef.current) {
       const instance = presentDetached(
         'AccountDialog',
@@ -700,9 +708,14 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
         { placement: { base: 'bottom', md: 'center' }, dismissOnBackdrop: false, maxWidth: 420 },
       );
       accountDialogSurfaceRef.current = instance;
+      // The surface settling is the ONE place `accountDialogOpen` flips false —
+      // covering every dismiss path (close button, `onSignedIn`, programmatic
+      // `closeAccountDialog`, host unmount). So the stack owns the open state.
       instance.result.finally(() => {
-        if (accountDialogSurfaceRef.current === instance) accountDialogSurfaceRef.current = null;
-        setAccountDialogOpen(false);
+        if (accountDialogSurfaceRef.current === instance) {
+          accountDialogSurfaceRef.current = null;
+          setAccountDialogOpen(false);
+        }
       });
     }
     setAccountDialogOpen(true);
@@ -710,8 +723,10 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
 
   const closeAccountDialog = useCallback((): void => {
     accountDialogControllerRef.current?.cancelSignIn();
+    // Dismiss the surface; its settle (`result.finally` above) flips
+    // `accountDialogOpen` false. Do NOT flip it here — the surface lifecycle is
+    // the single source of truth, so a manual write would be a second authority.
     accountDialogSurfaceRef.current?.dismiss();
-    setAccountDialogOpen(false);
   }, []);
 
   // Start driving the dialog on mount; tear it down on unmount.
@@ -960,7 +975,6 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     currentLanguage,
     activeSessionId,
     queryClient,
-    showBottomSheet: showBottomSheetForContext,
   });
 
   const { accounts, refreshAccounts, switchToAccount, createAccount: createAccountFn } = useOxyAccountGraph({

package/src/ui/hooks/useAvatarPicker.ts

@@ -3,10 +3,11 @@
  *
  * Extracts avatar selection logic from OxyContext for better modularity.
  *
- * Flow:
- *   1. Open the FileManagement bottom sheet in select mode for image files.
- *   2. After the user picks an image, route to the AvatarCrop screen so they
- *      can square-crop + zoom before the avatar is set.
+ * Flow (typed promises over the shared surface stack — no callback props):
+ *   1. `surfaces.present('FileManagement', …)` opens the image-only picker and
+ *      resolves with the picked file (or `undefined` if the user cancels).
+ *   2. Resolve a private-safe source URL, then `surfaces.present('AvatarCrop', …)`
+ *      opens the square-crop editor and resolves with the cropped JPEG.
  *   3. The cropped JPEG is uploaded as a NEW file via `oxyServices.assetUpload`
  *      and that file becomes the user's avatar.
  *
@@ -15,12 +16,12 @@
  */
 
 import { useCallback } from 'react';
-import type { FileMetadata, OxyServices } from '@oxyhq/core';
+import type { OxyServices } from '@oxyhq/core';
 import { translate, updateAvatarVisibility } from '@oxyhq/core';
 import type { QueryClient } from '@tanstack/react-query';
 import { toast } from '@oxyhq/bloom';
-import type { RouteName } from '../navigation/routes';
 import { updateProfileWithAvatar } from '../utils/avatarUtils';
+import { surfaces } from '../navigation/surfaces';
 import type { AvatarCropResult } from '../screens/AvatarCropScreen';
 
 interface UseAvatarPickerOptions {
@@ -28,7 +29,6 @@ interface UseAvatarPickerOptions {
   currentLanguage: string | null | undefined;
   activeSessionId: string | null;
   queryClient: QueryClient;
-  showBottomSheet: (config: { screen: RouteName; props?: Record<string, unknown> }) => void;
 }
 
 /** Upload result shape returned by oxyServices.assetUpload (single-file path). */
@@ -52,7 +52,6 @@ export function useAvatarPicker({
   currentLanguage,
   activeSessionId,
   queryClient,
-  showBottomSheet,
 }: UseAvatarPickerOptions) {
   /**
    * Final step: take the cropped JPEG, upload it as a new public file, then
@@ -99,68 +98,56 @@ export function useAvatarPicker({
     [activeSessionId, currentLanguage, oxyServices, queryClient],
   );
 
-  /**
-   * After the user picks a file in the FileManagement sheet, resolve a working
-   * source URL and route to the crop screen.
-   *
-   * The picked file is usually PRIVATE, so the synchronous
-   * `getFileDownloadUrl` (public CDN origin) would 404 and the crop screen's
-   * `Image.getSize` would fail silently. We resolve the authenticated URL via
-   * `assetGetUrl` (which throws on failure — unlike `getFileDownloadUrlAsync`,
-   * which swallows errors and falls back to the broken public URL) so a
-   * failure surfaces a real user-facing error instead of a blank crop canvas.
-   * No variant is requested — cropping needs the original.
-   */
-  const handleFilePicked = useCallback(
-    async (file: FileMetadata) => {
-      if (!file.contentType?.startsWith('image/')) {
-        toast.error(
-          translate(currentLanguage ?? undefined, 'editProfile.toasts.selectImage') ||
-            'Please select an image file',
-        );
-        return;
-      }
+  const openAvatarPicker = useCallback(async () => {
+    // 1. Present the image-only picker; it dismisses with the picked file when
+    //    the user taps one, or `undefined` if they cancel.
+    const file = await surfaces.present('FileManagement', {
+      selectMode: true,
+      multiSelect: false,
+      disabledMimeTypes: ['video/', 'audio/', 'application/pdf'],
+    });
+    if (!file) return;
 
-      let sourceUri: string;
-      try {
-        const resolved = await oxyServices.assetGetUrl(file.id);
-        if (!resolved?.url) {
-          throw new Error('No download URL returned for the selected image');
-        }
-        sourceUri = resolved.url;
-      } catch (e: unknown) {
-        const message = e instanceof Error ? e.message : undefined;
-        toast.error(
-          message ||
-            translate(currentLanguage ?? undefined, 'editProfile.toasts.cropMeasureFailed') ||
-            'Could not load the selected image',
-        );
-        return;
+    if (!file.contentType?.startsWith('image/')) {
+      toast.error(
+        translate(currentLanguage ?? undefined, 'editProfile.toasts.selectImage') ||
+          'Please select an image file',
+      );
+      return;
+    }
+
+    // 2. Resolve a working source URL. The picked file is usually PRIVATE, so
+    //    the synchronous `getFileDownloadUrl` (public CDN origin) would 404 and
+    //    the crop screen's `Image.getSize` would fail silently. `assetGetUrl`
+    //    throws on failure (unlike `getFileDownloadUrlAsync`, which swallows
+    //    errors and falls back to the broken public URL), so a failure surfaces
+    //    a real user-facing error instead of a blank crop canvas. No variant is
+    //    requested — cropping needs the original.
+    let sourceUri: string;
+    try {
+      const resolved = await oxyServices.assetGetUrl(file.id);
+      if (!resolved?.url) {
+        throw new Error('No download URL returned for the selected image');
       }
+      sourceUri = resolved.url;
+    } catch (e: unknown) {
+      const message = e instanceof Error ? e.message : undefined;
+      toast.error(
+        message ||
+          translate(currentLanguage ?? undefined, 'editProfile.toasts.cropMeasureFailed') ||
+          'Could not load the selected image',
+      );
+      return;
+    }
 
-      showBottomSheet({
-        screen: 'AvatarCrop',
-        props: {
-          imageUri: sourceUri,
-          onConfirm: finalizeCroppedAvatar,
-        },
-      });
-    },
-    [currentLanguage, finalizeCroppedAvatar, oxyServices, showBottomSheet],
-  );
+    // 3. Present the square-crop editor in place of the picker; it dismisses
+    //    with the cropped JPEG on confirm, or `undefined` if cancelled.
+    const cropped = await surfaces.present('AvatarCrop', { imageUri: sourceUri });
+    if (!cropped) return;
 
-  const openAvatarPicker = useCallback(() => {
-    showBottomSheet({
-      screen: 'FileManagement',
-      props: {
-        selectMode: true,
-        multiSelect: false,
-        disabledMimeTypes: ['video/', 'audio/', 'application/pdf'],
-        afterSelect: 'none',
-        onSelect: handleFilePicked,
-      },
-    });
-  }, [handleFilePicked, showBottomSheet]);
+    // 4. Upload + set as the user's avatar.
+    await finalizeCroppedAvatar(cropped);
+  }, [currentLanguage, finalizeCroppedAvatar, oxyServices]);
 
   return { openAvatarPicker };
 }