@oxyhq/services 28.0.0 → 30.0.0

package/src/ui/components/authChooser/primitives.tsx

@@ -9,9 +9,9 @@ import { useState } from 'react';
 import { Pressable, View } from 'react-native-css/components';
 import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
 import { Avatar } from '@oxyhq/bloom/avatar';
-import { Text } from '@oxyhq/bloom/typography';
 import { BloomColorScope } from '@oxyhq/bloom/theme';
-import type { SwitchableAccount } from '@oxyhq/core';
+import { Text } from '@oxyhq/bloom/typography';
+import type { SwitcherContextRow } from '@oxyhq/core';
 import { authChooserStyles as styles } from './styles';
 import { resolveAccentHex, toPreset, type Theme } from './types';
 
@@ -83,57 +83,71 @@ export const Dividerish: React.FC<{ theme: Theme; label: string }> = ({ theme, l
 );
 
 /**
- * An account row on the sign-in entry — "continue as one of these" rather than a
- * choice of authentication METHOD, which is why it stays above the primary CTA
- * instead of behind the trouble disclosure.
+ * A `principal acting as account` row on the sign-in entry — "continue as one of
+ * these" rather than a choice of authentication METHOD, which is why it stays
+ * above the primary CTA instead of behind the trouble disclosure.
+ *
+ * Pressing it activates the PAIR. The secondary line is the account's `@handle`:
+ * the device directory carries a handle and no email, deliberately — it is the
+ * minimum that renders a row for every person on the device, and this surface is
+ * reached while signed out, where fetching anyone's profile is not an option.
+ *
+ * The accent comes from the row's OWN account (`context.color`, straight off the
+ * directory), not from the theme and not from whoever is signed in. This surface
+ * is where a device holding two people is most visible, and it is reached while
+ * signed out — so there is no "current user" whose colour could stand in.
  */
 export const AccountRow: React.FC<{
-  account: SwitchableAccount;
+  context: SwitcherContextRow;
+  /** The person this account is reached through, when that is not obvious. */
+  operatedBy: string | null;
   theme: Theme;
-  switching: boolean;
+  activating: boolean;
   disabled: boolean;
   onPress: () => void;
-}> = ({ account, theme, switching, disabled, onPress }) => {
-  const accent = resolveAccentHex(account.color, theme.colors.primary);
+}> = ({ context, operatedBy, theme, activating, disabled, onPress }) => {
+  const accent = resolveAccentHex(context.color, theme.colors.primary);
+  const rowDisabled = disabled || !context.canActivate;
+  const secondary = operatedBy ?? (context.handle ? `@${context.handle}` : null);
 
   return (
-    <BloomColorScope colorPreset={toPreset(account.color)} asChild>
+    <BloomColorScope colorPreset={toPreset(context.color)} asChild>
       <Pressable
         style={[
           styles.accountRow,
           {
-            borderColor: account.isCurrent ? accent : theme.colors.border,
+            borderColor: context.isActive ? accent : theme.colors.border,
             backgroundColor: theme.colors.card,
           },
-          disabled && !switching ? styles.rowDisabled : null,
+          rowDisabled && !activating ? styles.rowDisabled : null,
         ]}
         onPress={onPress}
-        disabled={disabled}
+        disabled={rowDisabled}
         accessibilityRole="button"
-        accessibilityState={{ selected: account.isCurrent, disabled }}
-        accessibilityLabel={account.displayName}
+        accessibilityState={{ selected: context.isActive, disabled: rowDisabled }}
+        accessibilityLabel={context.displayName}
       >
-        <View style={[styles.avatarRing, { borderColor: account.isCurrent ? accent : 'transparent' }]}>
+        <View style={[styles.avatarRing, { borderColor: context.isActive ? accent : 'transparent' }]}>
           <Avatar
-            source={account.avatarUrl ?? undefined}
+            source={context.avatarUrl ?? undefined}
             variant="thumb"
-            name={account.displayName}
+            name={context.displayName}
             size={ROW_AVATAR_SIZE}
           />
         </View>
         <View style={styles.rowMeta}>
           <Text style={[styles.rowName, { color: theme.colors.text }]} numberOfLines={1}>
-            {account.displayName}
+            {context.displayName}
           </Text>
-          {account.email ? (
+          {secondary ? (
             <Text style={[styles.rowHandle, { color: theme.colors.textSecondary }]} numberOfLines={1}>
-              {account.email}
+              {secondary}
             </Text>
           ) : null}
         </View>
-        {switching ? (
+        {activating ? (
           <MaterialCommunityIcons name="loading" size={20} color={accent} />
-        ) : account.isCurrent ? (
+        ) : context.isActive ? (
           <MaterialCommunityIcons name="check-circle" size={20} color={accent} />
         ) : (
           <MaterialCommunityIcons name="chevron-right" size={20} color={theme.colors.textSecondary} />

package/src/ui/components/authChooser/types.ts

@@ -34,7 +34,21 @@ export interface OxySignInSurfaceAction {
 
 /** The account-row actions the container wires for the switcher + menu views. */
 export interface OxyAuthChooserHandlers {
-  onSwitch: (accountId: string) => void;
+  /**
+   * Become one `principal acting as account` pair.
+   *
+   * A `contextId`, never an `accountId`: on a device holding two people the
+   * same organization is reachable through both, and an account id cannot name
+   * which person's route to take.
+   */
+  onActivate: (contextId: string) => void;
+  /**
+   * Drop ONE pair. The same account reached through somebody else stays — that
+   * is a different session with a different audit actor.
+   */
+  onRemoveContext: (contextId: string) => void;
+  /** Drop ONE PERSON and every account they reach here, and nobody else's. */
+  onRemovePrincipal: (principalId: string) => void;
   onAdd: () => void;
   onManage: () => void;
   /**
@@ -46,6 +60,25 @@ export interface OxyAuthChooserHandlers {
   onEditAvatar: () => void;
 }
 
+/**
+ * The account menu's HERO block — the current account, rendered large.
+ *
+ * Built by the container from `useOxy().user`, not from a directory row, and
+ * that asymmetry is deliberate rather than an oversight: the directory carries
+ * the minimum that renders a row (name, handle, avatar) for EVERY person on the
+ * device, while the account this client is actually signed in as is the one it
+ * legitimately holds a full profile for — so the hero keeps its real email and
+ * its own accent colour, and the rows below it do not pretend to.
+ */
+export interface AccountHeroModel {
+  displayName: string;
+  /** The canonical `@oxy.so` email when there is one, else the `@handle`. */
+  addressLine: string | null;
+  avatarUrl: string | undefined;
+  /** The account's own Bloom accent, resolved to a hex. */
+  accentHex: string;
+}
+
 /** Used/total storage bytes for the "Oxy storage" block, or `null` when unknown. */
 export interface AccountStorageModel {
   usedBytes: number;