@oxy.so/services 12.10.0 → 12.11.0

package/src/ui/components/accountSettings/__tests__/AccountSettings.test.tsx

@@ -0,0 +1,101 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { AccountNode } from '@oxy.so/core';
+import { AccountSettings } from '../AccountSettings';
+
+const mockGet = jest.fn();
+const mockUpdate = jest.fn();
+const mockArchive = jest.fn();
+const mockServices = {
+  accounts: { get: mockGet, update: mockUpdate, archive: mockArchive },
+  assets: { publicUrl: (id: string) => `https://cdn.test/${id}` },
+};
+jest.mock('../../../context/oxyRuntimeContext', () => ({
+  useOptionalOxy: () => null,
+  useOxy: () => ({
+    oxyServices: mockServices,
+    canUsePrivateApi: true,
+    user: { id: 'viewer' },
+    accounts: [],
+    switchToAccount: jest.fn(),
+    showBottomSheet: jest.fn(),
+  }),
+}));
+
+function channel(permissions: string[]): AccountNode {
+  return {
+    accountId: 'chan',
+    kind: 'channel',
+    parentAccountId: null,
+    relationship: 'member',
+    callerMembership: { permissions } as AccountNode['callerMembership'],
+    account: {
+      id: 'chan',
+      kind: 'channel',
+      username: 'daily',
+      name: { displayName: 'Daily' },
+      bio: 'Every day',
+      accountCategories: ['news', 'politics'],
+    } as AccountNode['account'],
+  };
+}
+
+function renderSettings(props: Partial<Parameters<typeof AccountSettings>[0]> = {}) {
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={client}>
+      <AccountSettings accountId="chan" {...props} />
+    </QueryClientProvider>,
+  );
+}
+
+beforeEach(() => jest.clearAllMocks());
+
+test('saves the profile with its categories in order and hands the write to the app', async () => {
+  const node = channel(['account:update']);
+  mockGet.mockResolvedValue(node);
+  mockUpdate.mockResolvedValue(node);
+  const onUpdated = jest.fn();
+  renderSettings({ onUpdated, extraSections: <p>App section</p> });
+
+  fireEvent.click(await screen.findByText('Make primary'));
+  fireEvent.change(screen.getByLabelText('Bio (optional)'), { target: { value: '' } });
+  fireEvent.click(screen.getByText('Save changes'));
+
+  await waitFor(() =>
+    expect(mockUpdate).toHaveBeenCalledWith('chan', {
+      name: { displayName: 'Daily' },
+      bio: null,
+      accountCategories: ['politics', 'news'],
+    }),
+  );
+  await waitFor(() => expect(onUpdated).toHaveBeenCalledWith(node.account, { cleared: ['bio'] }));
+  expect(screen.getByText('App section')).toBeTruthy();
+  // Archiving is a separate right, and this member was not granted it.
+  expect(screen.queryByText('Archive account')).toBeNull();
+});
+
+test("archiving runs the app's confirmation and pre-archive step before Oxy's archive", async () => {
+  const order: string[] = [];
+  mockGet.mockResolvedValue(channel(['account:delete']));
+  mockArchive.mockImplementation(async () => order.push('archive'));
+  const onArchived = jest.fn();
+  renderSettings({
+    archive: {
+      title: 'Delete channel',
+      confirm: async () => {
+        order.push('confirm');
+        return true;
+      },
+      beforeArchive: async () => {
+        order.push('before');
+      },
+      onArchived,
+    },
+  });
+
+  fireEvent.click(await screen.findByText('Delete channel'));
+
+  await waitFor(() => expect(onArchived).toHaveBeenCalled());
+  expect(order).toEqual(['confirm', 'before', 'archive']);
+});

package/src/ui/context/OxyContext.tsx

@@ -999,8 +999,8 @@ export const OxyRuntimeProvider: React.FC<OxyRuntimeProviderProps> = ({
     if (host) {
       accountDialogHostRef.current = null;
       setAccountDialogOpen(false);
-      host.goBack();
-      return;
+      // A host that is already gone cannot pop; fall through to the detached surface.
+      if (host.goBack()) return;
     }
     accountDialogSurfaceRef.current?.dismiss();
   }, []);
@@ -1161,7 +1161,16 @@ export const OxyRuntimeProvider: React.FC<OxyRuntimeProviderProps> = ({
       accountDialogControllerRef.current?.setView(nextView);
 
       // Its own detached surface is already open → just re-point the view above.
+      // A route surface (e.g. ManageAccount) may sit ON TOP of it, so re-pointing the
+      // view is not enough: bring the AccountDialog frame back to the front too.
       if (accountDialogSurfaceRef.current) {
+        const top = topRouteSurface();
+        if (top) {
+          accountDialogHostRef.current = top;
+          top.navigate('AccountDialog', { initialView: nextView });
+        } else {
+          accountDialogSurfaceRef.current.navigate('AccountDialog', { initialView: nextView });
+        }
         setAccountDialogOpen(true);
         return;
       }

package/src/ui/hooks/useAvatarPicker.ts

@@ -2,7 +2,10 @@
  * Avatar Picker Hook
  *
  * The ONE write path for a user's profile picture. It owns no UI: the whole
- * choose-and-crop experience is a single surface.
+ * choose-and-crop experience is a single surface. The choosing half —
+ * {@link pickAvatarFile} — is account-agnostic and also serves a managed
+ * account's picture (`AccountSettings`), so there is one picker, one cropper and
+ * one upload for every account an app can edit.
  *
  * Flow (typed promise over the shared surface stack — no callback props):
  *   1. `openWithinOrPresent('ChangeAvatar')` opens the source list (device gallery,
@@ -27,7 +30,6 @@ import type { QueryClient } from '@tanstack/react-query';
 import { toast } from '@oxy.so/bloom/toast';
 import { updateProfileWithAvatar } from '../utils/avatarUtils';
 import { openWithinOrPresent } from '../navigation/surfaces';
-import type { AvatarCropResult } from '../screens/AvatarCropScreen';
 
 interface UseAvatarPickerOptions {
   oxyServices: OxyServices;
@@ -52,84 +54,78 @@ function extractUploadedFileId(result: AssetUploadResult | undefined): string |
   return undefined;
 }
 
+/**
+ * Whose picture the picker is changing, when it is not the signed-in user's —
+ * the source list previews it and offers "Remove" only when there is one.
+ */
+export interface AvatarPickerSubject {
+  avatar?: string | null;
+  displayName?: string;
+}
+
+/**
+ * The shared choose-and-crop flow, then the crop uploaded as a NEW public file.
+ *
+ * Resolves the new file's id, `null` when the person chose to remove the
+ * picture, or `undefined` when they backed out. It writes no account: the
+ * caller decides whose picture the file becomes, which is what lets the
+ * signed-in user's profile and a managed account share every step before that.
+ * An upload failure rejects.
+ */
+export async function pickAvatarFile(
+  oxyServices: OxyServices,
+  subject?: AvatarPickerSubject,
+): Promise<string | null | undefined> {
+  // The source list + crop editor are ONE flow. When triggered from a screen
+  // already inside a surface (EditProfile, ManageAccount, WelcomeNewUser,
+  // AccountSettings), it MORPHS into that surface and pops back on finish;
+  // triggered with no surface open it presents cold. Either way it resolves with
+  // the cropped JPEG, a removal, or `undefined` when the user backs out.
+  const result = await openWithinOrPresent('ChangeAvatar', subject ? { subject } : undefined);
+  if (!result) return undefined;
+  if ('removed' in result) return null;
+  const uploadResult = (await oxyServices.assets.upload(
+    { uri: result.uri, type: result.mime, name: `avatar-${Date.now()}.jpg` },
+    { visibility: 'public' },
+  )) as AssetUploadResult;
+  const fileId = extractUploadedFileId(uploadResult);
+  if (!fileId) {
+    throw new Error('Avatar upload succeeded but no file ID was returned');
+  }
+  await updateAvatarVisibility(fileId, oxyServices, 'pickAvatarFile');
+  return fileId;
+}
+
 export function useAvatarPicker({
   oxyServices,
   currentLanguage,
   activeSessionId,
   queryClient,
 }: UseAvatarPickerOptions) {
-  /**
-   * Final step: take the cropped JPEG, upload it as a new public file, then
-   * set it as the user's avatar. Fires success/error toasts.
-   */
-  const finalizeCroppedAvatar = useCallback(
-    async (cropped: AvatarCropResult) => {
-      try {
-        const uploadResult = (await oxyServices.assets.upload(
-          {
-            uri: cropped.uri,
-            type: cropped.mime,
-            name: `avatar-${Date.now()}.jpg`,
-          },
-          { visibility: 'public' },
-        )) as AssetUploadResult;
-
-        const newFileId = extractUploadedFileId(uploadResult);
-        if (!newFileId) {
-          throw new Error('Avatar upload succeeded but no file ID was returned');
-        }
-
-        await updateAvatarVisibility(newFileId, oxyServices, 'useAvatarPicker');
-        await updateProfileWithAvatar(
-          { avatar: newFileId },
-          oxyServices,
-          activeSessionId,
-          queryClient,
-        );
-
-        toast.success(
-          translate(currentLanguage ?? undefined, 'editProfile.toasts.avatarUpdated') ||
-            'Avatar updated',
-        );
-      } catch (e: unknown) {
-        const message = e instanceof Error ? e.message : undefined;
-        toast.error(
-          message ||
-            translate(currentLanguage ?? undefined, 'editProfile.toasts.updateAvatarFailed') ||
-            'Failed to update avatar',
-        );
-      }
-    },
-    [activeSessionId, currentLanguage, oxyServices, queryClient],
-  );
-
-  /** Clear the avatar so the profile falls back to the user's initials. */
-  const removeAvatar = useCallback(async () => {
+  const openAvatarPicker = useCallback(async () => {
+    const locale = currentLanguage ?? undefined;
     try {
-      await updateProfileWithAvatar({ avatar: '' }, oxyServices, activeSessionId, queryClient);
-      toast.success(translate(currentLanguage ?? undefined, 'editProfile.toasts.avatarRemoved'));
+      const fileId = await pickAvatarFile(oxyServices);
+      if (fileId === undefined) return;
+      // `''` clears the field on `updateMe`, so the profile falls back to the
+      // user's initials.
+      await updateProfileWithAvatar(
+        { avatar: fileId ?? '' },
+        oxyServices,
+        activeSessionId,
+        queryClient,
+      );
+      toast.success(
+        translate(
+          locale,
+          fileId === null ? 'editProfile.toasts.avatarRemoved' : 'editProfile.toasts.avatarUpdated',
+        ),
+      );
     } catch (e: unknown) {
       const message = e instanceof Error ? e.message : undefined;
-      toast.error(
-        message || translate(currentLanguage ?? undefined, 'editProfile.toasts.updateAvatarFailed'),
-      );
+      toast.error(message || translate(locale, 'editProfile.toasts.updateAvatarFailed'));
     }
   }, [activeSessionId, currentLanguage, oxyServices, queryClient]);
 
-  const openAvatarPicker = useCallback(async () => {
-    // The source list + crop editor are ONE flow. When triggered from a screen
-    // already inside a surface (EditProfile, ManageAccount, WelcomeNewUser — every
-    // current entry point), it MORPHS into that surface and pops back on finish;
-    // triggered with no surface open it presents cold. Either way it resolves with
-    // the cropped JPEG, a removal, or `undefined` when the user backs out.
-    const result = await openWithinOrPresent('ChangeAvatar');
-    if (!result) return;
-    if ('removed' in result) {
-      await removeAvatar();
-      return;
-    }
-    await finalizeCroppedAvatar(result);
-  }, [finalizeCroppedAvatar, removeAvatar]);
-
   return { openAvatarPicker };
 }

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -1,41 +1,17 @@
 import type React from 'react';
-import { OrganizationSettings } from '../components/organizations/OrganizationSettings';
-import { useCallback, useMemo, useState } from 'react';
-import { View } from 'react-native';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { toast } from '@oxy.so/bloom/toast';
-import { surfaces } from '@oxy.so/bloom/surfaces';
-import { useTheme } from '@oxy.so/bloom/theme';
-import { Text } from '@oxy.so/bloom/typography';
-import { Button } from '@oxy.so/bloom/button';
-import { TextField, TextFieldInput } from '@oxy.so/bloom/text-field';
-import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
-import {
-  accountNameInvalidKey,
-  accountNameInvalidMessage,
-  accountNameMaxLength,
-  getNormalizedUserHandle,
-  isValidAccountName,
-  type UpdateAccountInput,
-} from '@oxy.so/core';
 import type { BaseScreenProps } from '../types/navigation';
-import { SettingsIcon } from '../components/SettingsIcon';
-import { useOxy } from '../context/oxyRuntimeContext';
+import {
+  AccountSettings,
+  useAccountSettingsNode,
+} from '../components/accountSettings/AccountSettings';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
-import { clearedFieldsFromAccountUpdate, upsertCachedUser } from '../hooks/queries/userCache';
-
-const BIO_MAX = 160;
-
-const errorMessage = (error: unknown, fallback: string): string =>
-  error instanceof Error && error.message ? error.message : fallback;
 
 /**
- * Per-account settings: edit the account's profile, jump to member management,
- * and archive the account (danger zone). Receives the target `accountId` via
- * navigation props. Self-surface for the caller's own personal account lives in
- * {@link ManageAccountScreen}; this screen manages a non-personal account in the
- * graph.
+ * The `AccountSettings` surface: {@link AccountSettings} for the `accountId`
+ * route prop, under the surface's own header. Self-surface for the caller's own
+ * personal account lives in {@link ManageAccountScreen}; this screen manages a
+ * non-personal account in the graph.
  */
 const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
   onClose,
@@ -43,259 +19,19 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
   navigate,
   accountId,
 }) => {
-  const bloomTheme = useTheme();
-  const colors = bloomTheme.colors;
   const { t } = useI18n();
-
-  const { oxyServices, canUsePrivateApi, user, accounts, switchToAccount } = useOxy();
-  const queryClient = useQueryClient();
-
   const id = typeof accountId === 'string' ? accountId : '';
-
-  const accountQuery = useQuery({
-    queryKey: ['accounts', 'detail', id, user?.id, canUsePrivateApi],
-    initialData: canUsePrivateApi
-      ? accounts?.find((account) => account.accountId === id)
-      : undefined,
-    initialDataUpdatedAt: 0,
-    queryFn: () => oxyServices.accounts.get(id),
-    enabled: canUsePrivateApi && id.length > 0,
-  });
-
-  const node = canUsePrivateApi && accountQuery.isSuccess ? accountQuery.data : null;
-  const permissions = node?.callerMembership?.permissions ?? [];
-  const isImplicitOwner = node ? node.relationship !== 'member' : false;
-  const can = useCallback(
-    (permission: string): boolean => isImplicitOwner || permissions.includes(permission),
-    [isImplicitOwner, permissions],
-  );
-  const canUpdate = can('account:update');
-  const canViewMembers = can('members:read');
-  const canArchive = can('account:delete');
-
-  // Editable fields, seeded lazily from the loaded account once.
-  const [seeded, setSeeded] = useState(false);
-  const [displayName, setDisplayName] = useState('');
-  const [displayNameError, setDisplayNameError] = useState('');
-  const [bio, setBio] = useState('');
-
-  // Seed the form from the account during render (no useEffect): the first time
-  // the query resolves we capture its values into local edit state.
-  if (node && !seeded) {
-    setDisplayName(node.account?.name?.displayName ?? getNormalizedUserHandle(node.account) ?? '');
-    setBio(node.account?.bio ?? '');
-    setSeeded(true);
-  }
-
-  const updateMutation = useMutation({
-    mutationKey: ['accounts', 'update', id],
-    mutationFn: (input: UpdateAccountInput) => oxyServices.accounts.update(id, input),
-    onSuccess: (updatedNode, input) => {
-      const cleared = clearedFieldsFromAccountUpdate(input);
-      upsertCachedUser(queryClient, updatedNode.account, user?.id, {
-        cleared: cleared.length > 0 ? cleared : undefined,
-      });
-      queryClient.invalidateQueries({ queryKey: ['accounts', 'detail', id] });
-      queryClient.invalidateQueries({ queryKey: ['accounts'] });
-      toast.success(t('accounts.settings.toasts.saved') || 'Account updated');
-    },
-    onError: (error) => {
-      toast.error(
-        errorMessage(error, t('accounts.settings.toasts.saveFailed') || 'Failed to update account'),
-      );
-    },
-  });
-
-  const archiveMutation = useMutation({
-    mutationKey: ['accounts', 'archive', id],
-    mutationFn: () => oxyServices.accounts.archive(id),
-    onSuccess: async () => {
-      // If we archived the account we're currently signed in AS, switch back to
-      // the personal account so the app isn't left as an archived identity.
-      if (user?.id === id) {
-        const personal = accounts.find((node) => node.relationship === 'self');
-        if (personal) {
-          await switchToAccount(personal.accountId).catch(() => undefined);
-        }
-      }
-      queryClient.invalidateQueries({ queryKey: ['accounts'] });
-      toast.success(t('accounts.settings.toasts.archived') || 'Account archived');
-      (onClose ?? goBack)?.();
-    },
-    onError: (error) => {
-      toast.error(
-        errorMessage(
-          error,
-          t('accounts.settings.toasts.archiveFailed') || 'Failed to archive account',
-        ),
-      );
-    },
-  });
-
-  const handleArchive = useCallback(async () => {
-    const confirmed = await surfaces.confirm({
-      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.',
-      confirmLabel: t('accounts.settings.archive.title') || 'Archive account',
-      cancelLabel: t('common.cancel') || 'Cancel',
-      destructive: true,
-    });
-    if (confirmed) archiveMutation.mutate();
-  }, [archiveMutation, t]);
-
-  const handleDisplayNameChange = useCallback(
-    (value: string) => {
-      setDisplayName(value);
-      const trimmed = value.trim();
-      if (!trimmed) {
-        setDisplayNameError('');
-        return;
-      }
-      const kind = node?.account.kind;
-      setDisplayNameError(
-        isValidAccountName(trimmed, kind)
-          ? ''
-          : t(`accounts.settings.displayName.${accountNameInvalidKey(kind)}`) ||
-              accountNameInvalidMessage(kind),
-      );
-    },
-    [node?.account.kind, t],
-  );
-
-  const handleSave = useCallback(() => {
-    const trimmed = displayName.trim();
-    if (!trimmed || displayNameError) return;
-    // Managed accounts (org / project / bot / channel) have a title, not a
-    // given-and-family name — persist the explicit displayName column.
-    updateMutation.mutate({
-      name: { displayName: trimmed },
-      bio: bio.trim() ? bio.trim() : null,
-    });
-  }, [displayName, displayNameError, bio, updateMutation]);
-
-  const title = t('accounts.settings.title') || 'Account settings';
-
-  const accountHandle = useMemo(() => {
-    const username = node?.account?.username;
-    return username ? `@${username}` : '';
-  }, [node?.account?.username]);
+  const { node } = useAccountSettingsNode(id);
 
   // The nav large title is the account's handle once loaded (falls back to the
   // generic screen title before the account resolves).
+  const username = node?.account?.username;
   useSurfaceHeader({
-    title: accountHandle || title,
-    subtitle:
-      t('accounts.settings.subtitle') || 'Manage this account’s profile, members, and access.',
+    title: username ? `@${username}` : t('accounts.settings.title'),
+    subtitle: t('accounts.settings.subtitle'),
   });
 
-  if (!id) {
-    return (
-      <>
-        <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>
-      </>
-    );
-  }
-
-  return (
-    <>
-      <View className="px-screen-margin pt-space-24 pb-space-32 gap-space-24">
-        {accountQuery.isLoading ? (
-          <View className="items-center py-space-32">{null}</View>
-        ) : (
-          <>
-            {/* Profile edit */}
-            {canUpdate ? (
-              <View className="gap-space-16 p-space-16 rounded-radius-20 bg-fill">
-                <View className="gap-space-4">
-                  <TextField isInvalid={Boolean(displayNameError)}>
-                    <TextFieldInput
-                      floatingLabel
-                      label={t('accounts.settings.displayName.label') || 'Display name'}
-                      value={displayName}
-                      onChangeText={handleDisplayNameChange}
-                      isInvalid={Boolean(displayNameError)}
-                      maxLength={accountNameMaxLength(node?.account.kind)}
-                    />
-                  </TextField>
-                  {displayNameError ? (
-                    <Text className="text-caption font-caption text-negative px-space-4">
-                      {displayNameError}
-                    </Text>
-                  ) : null}
-                </View>
-                <View className="gap-space-4">
-                  <TextField>
-                    <TextFieldInput
-                      floatingLabel
-                      label={t('accounts.settings.bio.label') || 'Bio (optional)'}
-                      value={bio}
-                      onChangeText={setBio}
-                      maxLength={BIO_MAX}
-                      multiline
-                      numberOfLines={3}
-                      textAlignVertical="top"
-                    />
-                  </TextField>
-                  <Text className="text-caption font-caption text-text-tertiary px-space-4 text-right">
-                    {bio.length}/{BIO_MAX}
-                  </Text>
-                </View>
-                <Button
-                  appearance="solid"
-                  tone="accent"
-                  onPress={handleSave}
-                  disabled={
-                    updateMutation.isPending || !displayName.trim() || Boolean(displayNameError)
-                  }
-                  loading={updateMutation.isPending}
-                  accessibilityLabel={t('accounts.settings.save') || 'Save changes'}
-                  className="w-full"
-                >
-                  {t('accounts.settings.save') || 'Save changes'}
-                </Button>
-              </View>
-            ) : null}
-
-            {node?.account.kind === 'organization' ? (
-              <OrganizationSettings key={id} accountId={id} canUpdate={canUpdate} />
-            ) : null}
-
-            {/* Members entry */}
-            {canViewMembers ? (
-              <GroupedSection title={t('accounts.settings.sections.access') || 'Access'}>
-                <GroupedSectionItem
-                  icon={<SettingsIcon name="account-multiple" color={colors.info} />}
-                  title={t('accounts.members.title') || 'Members'}
-                  description={
-                    t('accounts.settings.members.subtitle') || 'Invite people and manage roles'
-                  }
-                  onPress={() => navigate?.('AccountMembers', { accountId: id })}
-                />
-              </GroupedSection>
-            ) : null}
-
-            {/* Danger zone */}
-            {canArchive ? (
-              <GroupedSection title={t('accounts.settings.sections.dangerZone') || 'Danger zone'}>
-                <GroupedSectionItem
-                  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={handleArchive}
-                />
-              </GroupedSection>
-            ) : null}
-          </>
-        )}
-      </View>
-    </>
-  );
+  return <AccountSettings accountId={id} navigate={navigate} onClose={onClose ?? goBack} />;
 };
 
 export default AccountSettingsScreen;

package/src/ui/screens/ChangeAvatarScreen.tsx

@@ -47,6 +47,7 @@ import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { SettingsIcon } from '../components/SettingsIcon';
 import type { BaseScreenProps } from '../types/navigation';
+import type { AvatarPickerSubject } from '../hooks/useAvatarPicker';
 
 /** Component name used in `logger` context for filtered diagnostics. */
 const LOG_COMPONENT = 'ChangeAvatarScreen';
@@ -131,10 +132,25 @@ async function loadImagePicker(): Promise<ImagePickerModule | null> {
   }
 }
 
-const ChangeAvatarScreen: React.FC<BaseScreenProps> = ({ navigate, dismiss }) => {
+/**
+ * The `subject` route prop, when a caller is changing a picture that is not the
+ * signed-in user's (see `pickAvatarFile`). Route props arrive untyped.
+ */
+function readSubject(value: unknown): AvatarPickerSubject | null {
+  if (!value || typeof value !== 'object') return null;
+  const { avatar, displayName } = value as Record<string, unknown>;
+  return {
+    avatar: typeof avatar === 'string' && avatar.length > 0 ? avatar : null,
+    displayName: typeof displayName === 'string' ? displayName : undefined,
+  };
+}
+
+const ChangeAvatarScreen: React.FC<BaseScreenProps> = ({ navigate, dismiss, subject }) => {
   const bloomTheme = useTheme();
   const { t } = useI18n();
   const { user, oxyServices } = useOxy();
+  const other = useMemo(() => readSubject(subject), [subject]);
+  const currentAvatar = other ? other.avatar : user?.avatar;
 
   /** Set when a permission was refused — drives the inline denied notice. */
   const [denied, setDenied] = useState<DeniedSource | null>(null);
@@ -144,13 +160,16 @@ const ChangeAvatarScreen: React.FC<BaseScreenProps> = ({ navigate, dismiss }) =>
   useSurfaceHeader(useMemo(() => ({ title: t('changeAvatar.title') }), [t]));
 
   const displayName = useMemo(
-    () => user?.name?.displayName ?? getNormalizedUserHandle(user) ?? '',
-    [user],
+    () =>
+      other
+        ? (other.displayName ?? '')
+        : (user?.name?.displayName ?? getNormalizedUserHandle(user) ?? ''),
+    [other, user],
   );
   const avatarUri = useMemo(
     // `thumb` is 256x256 — exactly a 2x source for the 132dp hero.
-    () => (user?.avatar ? oxyServices.assets.publicUrl(user.avatar, 'thumb') : undefined),
-    [user?.avatar, oxyServices],
+    () => (currentAvatar ? oxyServices.assets.publicUrl(currentAvatar, 'thumb') : undefined),
+    [currentAvatar, oxyServices],
   );
 
   /**
@@ -362,7 +381,7 @@ const ChangeAvatarScreen: React.FC<BaseScreenProps> = ({ navigate, dismiss }) =>
           title={t('changeAvatar.sources.remove.title')}
           description={t('changeAvatar.sources.remove.description')}
           destructive
-          disabled={busy || !user?.avatar}
+          disabled={busy || !currentAvatar}
           onPress={() => void removeCurrentPhoto()}
         />
       </GroupedSection>