@oxy.so/services 12.10.1 → 12.12.0

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>

package/src/ui/screens/CreateAccountScreen.tsx

@@ -7,13 +7,10 @@ import { View, ActivityIndicator } from 'react-native';
 import Ionicons from '../icons/Ionicons';
 import type { AccountCategoryId, AccountKind, CreateAccountInput } from '@oxy.so/core';
 import {
-  accountCategoryLabel,
   accountNameInvalidKey,
   accountNameInvalidMessage,
   accountNameMaxLength,
   isValidAccountName,
-  MAX_ACCOUNT_CATEGORIES,
-  SELECTABLE_ACCOUNT_CATEGORY_IDS,
 } from '@oxy.so/core';
 import {
   applyBotUsernameSuffix,
@@ -33,6 +30,7 @@ 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 { useOxy } from '../context/oxyRuntimeContext';
+import { AccountCategoriesSection } from '../components/accountSettings/AccountCategoriesSection';
 import { toast } from '@oxy.so/bloom/toast';
 
 type UsernameStatus = 'idle' | 'checking' | 'available' | 'taken' | 'invalid';
@@ -102,13 +100,6 @@ const kindDescription = (
   }
 };
 
-/**
- * Only the SELECTABLE ids are offered. The full `ACCOUNT_CATEGORY_IDS` still
- * contains withdrawn ones so that accounts already carrying them keep working —
- * offering them here would be how an account newly acquires one.
- */
-const ACCOUNT_CATEGORY_OPTIONS: readonly AccountCategoryId[] = SELECTABLE_ACCOUNT_CATEGORY_IDS;
-
 /**
  * Create a new account in the unified account graph (an organization, project,
  * or bot). The caller becomes its owner. Optionally nested under a parent
@@ -123,7 +114,7 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
 }) => {
   const bloomTheme = useTheme();
   const { oxyServices, createAccount, switchToAccount, user, canUsePrivateApi } = useOxy();
-  const { t, locale } = useI18n();
+  const { t } = useI18n();
 
   const parentId = typeof parentAccountId === 'string' ? parentAccountId : undefined;
 
@@ -291,23 +282,6 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
     [kind, t],
   );
 
-  /**
-   * Append on select, splice out on de-select. Never sorts — appending is what
-   * makes the FIRST category the user chose the primary one, and a sort would
-   * silently reassign that. De-selecting the primary promotes whatever the user
-   * picked next, which is the only interpretation that does not invent a choice
-   * on their behalf.
-   */
-  const toggleAccountCategory = useCallback((category: AccountCategoryId) => {
-    setAccountCategories((current) => {
-      if (current.includes(category)) {
-        return current.filter((entry) => entry !== category);
-      }
-      if (current.length >= MAX_ACCOUNT_CATEGORIES) return current;
-      return [...current, category];
-    });
-  }, []);
-
   const canCreate =
     canUsePrivateApi &&
     usernameStatus === 'available' &&
@@ -449,39 +423,14 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
               />
             </>
           ) : null}
-          {/* Categories — multi-select, shown for every kind this screen can create
-          (they are all non-personal). The badge on a selected row is its
-          POSITION, so the primary is legible as "1" rather than being a rule the
-          user has to be told. */}
-          <View className="gap-space-4">
-            <GroupedSection title={t('accounts.create.accountCategory.label')}>
-              {ACCOUNT_CATEGORY_OPTIONS.map((option) => {
-                const position = accountCategories.indexOf(option);
-                const selected = position >= 0;
-                const label = accountCategoryLabel(locale, option);
-                return (
-                  <GroupedSectionItem
-                    key={option}
-                    title={label}
-                    disabled={!selected && accountCategories.length >= MAX_ACCOUNT_CATEGORIES}
-                    onPress={() => toggleAccountCategory(option)}
-                    showChevron={false}
-                    rightElement={
-                      selected ? (
-                        <Text className="text-caption-1 font-semibold text-primary">
-                          {position + 1}
-                        </Text>
-                      ) : undefined
-                    }
-                    accessibilityLabel={label}
-                  />
-                );
-              })}
-            </GroupedSection>
-            <Text className="text-caption font-caption text-text-tertiary px-space-4">
-              {t('accounts.create.accountCategory.hint', { max: MAX_ACCOUNT_CATEGORIES })}
-            </Text>
-          </View>
+          {/* Categories — the same editor the account's settings use: what is
+          chosen, in order (the first is the primary), and the vocabulary to add
+          from. */}
+          <AccountCategoriesSection
+            value={accountCategories}
+            onChange={setAccountCategories}
+            disabled={isCreating}
+          />
 
           {/* Details — a grouped section card hosting the form fields */}
           <GroupedSection title={t('accounts.create.detailsSection') || 'Details'}>

package/src/ui/screens/index.ts

@@ -18,3 +18,11 @@ export { default as AccountSettingsScreen } from './AccountSettingsScreen';
 
 export { default as SupervisionScreen } from './SupervisionScreen';
 export { default as OxyOneScreen } from './OxyOneScreen';
+
+// The body of the `AccountSettings` surface, for an app embedding a managed
+// account's settings in its own page with its own sections around them.
+export {
+  AccountSettings,
+  type AccountSettingsProps,
+  type AccountSettingsArchiveOptions,
+} from '../components/accountSettings/AccountSettings';