@oxyhq/services 28.0.0 → 30.0.0

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

@@ -7,8 +7,11 @@
  *    avatar (with a camera badge to change the photo), the greeting, the account
  *    address, and a "Manage your Oxy account" pill.
  *  - SWITCH ACCOUNT: a disclosure row whose corner animates from pill to card as
- *    the other switchable accounts + "Add another account" + "Manage accounts on
- *    this device" reveal beneath it.
+ *    the device's people + "Add another account" + "Manage accounts on this
+ *    device" reveal beneath it. The list is grouped BY PERSON (ADR 0002): an
+ *    account sits under the human who can operate it, and the same organization
+ *    reachable through two people is two rows under two names — the thing a list
+ *    keyed by account id structurally cannot say.
  *  - OXY STORAGE: cloud + used/total + a composition meter + Upgrade / Manage chips.
  *  - MENU rows: Your data in Oxy · Oxy settings · Help & feedback · Sign out —
  *    Bloom's grouped section, the same component every other SDK settings surface
@@ -41,13 +44,18 @@ import { PressableScale } from '@oxyhq/bloom/pressable-scale';
 import { CompositionBar, type CompositionCategory } from '@oxyhq/bloom/composition-bar';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { Text } from '@oxyhq/bloom/typography';
-import type { AccountDialogSnapshot, SwitchableAccount } from '@oxyhq/core';
-import { getNormalizedUserHandle } from '@oxyhq/core';
+import {
+  showsPrincipalHeaders,
+  type AccountDialogSnapshot,
+  type SwitcherContextRow,
+  type SwitcherPrincipalRow,
+} from '@oxyhq/core';
 import AvatarCameraBadge from '../AvatarCameraBadge';
 import { HoverPressable } from './primitives';
 import { authChooserStyles as styles } from './styles';
 import {
   resolveAccentHex,
+  type AccountHeroModel,
   type AccountStorageModel,
   type AccountsMenuActions,
   type OxyAuthChooserHandlers,
@@ -84,6 +92,11 @@ const SWITCH_CARD_RADIUS_SETTLE = 0.2;
 const SWITCH_REVEAL_MS = 240;
 /** Diameter of an account row's avatar in the switch list (own markup). */
 const SWITCH_AVATAR_SIZE = 36;
+/**
+ * The person's avatar above their block of accounts. Smaller than the account
+ * rows beneath it: the header labels the group, the rows are the targets.
+ */
+const PRINCIPAL_AVATAR_SIZE = 24;
 /** Glyph inside a bordered affordance badge, sized to the avatar it stands in for. */
 const BADGE_GLYPH_SIZE = 19;
 /** The hero block's large current-account avatar. */
@@ -99,20 +112,6 @@ const FACEPILE_AVATAR_SIZE = 32;
  */
 const FACEPILE_OVERLAP = 4;
 
-/**
- * The hero's address line, shown under the "Hi, <name>!" greeting: the account's
- * canonical `@oxy.so` email when it has one, else its normalized `@handle`. Never
- * synthesizes a `username@oxy.so` address (the identity contract forbids it) — a
- * non-Oxy or missing email falls back to `getNormalizedUserHandle`.
- */
-function heroAddressLine(account: SwitchableAccount): string | null {
-  if (account.email?.toLowerCase().endsWith('@oxy.so')) {
-    return account.email;
-  }
-  const handle = getNormalizedUserHandle(account.user);
-  return handle ? `@${handle}` : null;
-}
-
 /**
  * `bytes` → `"11.6 GB"`. Whole plan sizes read as whole numbers (`"17 GB"`, not
  * `"17.0 GB"`), and anything ≥ 100 GB drops the decimal entirely.
@@ -125,6 +124,10 @@ function formatStorageGb(bytes: number): string {
 
 interface AccountsMenuViewProps {
   snapshot: AccountDialogSnapshot;
+  /** The device's people, each with the accounts they may act as. */
+  principals: SwitcherPrincipalRow[];
+  /** The current account, rendered large. `null` before the session resolves. */
+  hero: AccountHeroModel | null;
   theme: Theme;
   t: Translate;
   handlers: OxyAuthChooserHandlers;
@@ -134,6 +137,8 @@ interface AccountsMenuViewProps {
 
 const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
   snapshot,
+  principals,
+  hero,
   theme,
   t,
   handlers,
@@ -188,7 +193,7 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
     listProgress.value = withTiming(next ? 1 : 0, { duration: SWITCH_REVEAL_MS });
   }, [expanded, listProgress]);
 
-  if (snapshot.loading && snapshot.accounts.length === 0) {
+  if (snapshot.loading && principals.length === 0) {
     return (
       <View className="items-center justify-center gap-space-12 py-space-24">
         <MaterialCommunityIcons name="loading" size={24} color={theme.colors.textSecondary} />
@@ -199,24 +204,26 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
     );
   }
 
-  const switchingDisabled = snapshot.switchingAccountId !== null;
-  const current = snapshot.accounts.find((account) => account.isCurrent) ?? snapshot.accounts[0];
-  const others = current
-    ? snapshot.accounts.filter((account) => account.accountId !== current.accountId)
-    : snapshot.accounts;
-  const currentAccent = current
-    ? resolveAccentHex(current.color, theme.colors.primary)
-    : theme.colors.primary;
-  const currentAddress = current ? heroAddressLine(current) : null;
-  // The switch list repeats the CURRENT account (first, ringed) — unlike the old
-  // compact header it is not represented anywhere else once the hero moved out
-  // of the card, and the list is where you switch back to it.
-  const switchableAccounts = current ? [current, ...others] : others;
-  const switchableAccountKey = switchableAccounts.map((account) => account.accountId).join(':');
-  const facepile: AvatarGroupItem[] = switchableAccounts.map((account) => ({
-    id: account.accountId,
-    uri: account.avatarUrl ?? undefined,
-    displayName: account.displayName,
+  // Activation and the two removals all mutate the same device, so any one of
+  // them in flight disables every row: a second press would race the first for
+  // which context the server ends up electing as active.
+  const busy =
+    snapshot.activatingContextId !== null ||
+    snapshot.removingContextId !== null ||
+    snapshot.removingPrincipalId !== null;
+  const currentAccent = hero?.accentHex ?? theme.colors.primary;
+  // Naming the person above each block earns its place only when the grouping
+  // carries information — a second person, or somebody with more than one
+  // account. On a one-person, one-account device it would just repeat the hero.
+  const showPrincipalHeaders = showsPrincipalHeaders(principals);
+  const contextRows = principals.flatMap((principal) => principal.contexts);
+  // Remounts the measured wrapper when the rows change, so the collapse animates
+  // to the new natural height instead of the previous one.
+  const switchListKey = contextRows.map((context) => context.contextId).join(':');
+  const facepile: AvatarGroupItem[] = contextRows.map((context) => ({
+    id: context.contextId,
+    uri: context.avatarUrl ?? undefined,
+    displayName: context.displayName,
   }));
 
   // Used vs free is a two-part COMPOSITION (the parts always fill the bar), not
@@ -253,62 +260,47 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
   // strands one against the header row.
   const listItems = (
     <>
-      {switchableAccounts.map((account, index) => {
-        const accent = resolveAccentHex(account.color, theme.colors.primary);
-        const isSwitching = snapshot.switchingAccountId === account.accountId;
-        return (
-          <Fragment key={account.accountId}>
-            {index > 0 ? <View className="h-px bg-border opacity-30 ml-space-12" /> : null}
-            <HoverPressable
-              baseClassName={`flex-row items-center gap-space-12 px-space-12 py-[10px]${
-                switchingDisabled ? ' opacity-60' : ''
-              }`}
-              hoverClassName="bg-fill-secondary"
-              onPress={() => handlers.onSwitch(account.accountId)}
-              disabled={switchingDisabled}
-              accessibilityRole="button"
-              accessibilityLabel={account.displayName}
-            >
-              <View>
-                <Avatar
-                  source={account.avatarUrl ?? undefined}
-                  variant="thumb"
-                  name={account.displayName}
-                  size={SWITCH_AVATAR_SIZE}
-                />
-                {/* The accent ring is an OVERLAY: it costs the row no width, so
-                    every avatar in the list starts on the same content line. */}
-                {account.isCurrent ? (
-                  <View
-                    style={[styles.currentAvatarRing, { borderColor: accent }]}
-                    pointerEvents="none"
-                  />
-                ) : null}
-              </View>
-              <View className="flex-1 min-w-0">
-                <Text className="text-body font-semibold text-text" numberOfLines={1}>
-                  {account.displayName}
-                </Text>
-                {account.email ? (
-                  <Text className="text-caption text-text-secondary" numberOfLines={1}>
-                    {account.email}
-                  </Text>
-                ) : null}
-              </View>
-              {isSwitching ? (
-                <MaterialCommunityIcons name="loading" size={20} color={accent} />
+      {principals.map((principal, principalIndex) => (
+        <Fragment key={principal.principalId}>
+          {principalIndex > 0 ? <View className="h-px bg-border opacity-30" /> : null}
+          {showPrincipalHeaders ? (
+            <PrincipalHeaderRow
+              principal={principal}
+              removing={snapshot.removingPrincipalId === principal.principalId}
+              disabled={busy}
+              onSignOut={() => handlers.onRemovePrincipal(principal.principalId)}
+              theme={theme}
+              t={t}
+            />
+          ) : null}
+          {principal.contexts.map((context, contextIndex) => (
+            <Fragment key={context.contextId}>
+              {contextIndex > 0 || showPrincipalHeaders ? (
+                <View className="h-px bg-border opacity-30 ml-space-12" />
               ) : null}
-            </HoverPressable>
-          </Fragment>
-        );
-      })}
+              <ContextRow
+                context={context}
+                principalName={principal.displayName}
+                accent={resolveAccentHex(context.color, theme.colors.primary)}
+                activating={snapshot.activatingContextId === context.contextId}
+                removing={snapshot.removingContextId === context.contextId}
+                disabled={busy}
+                onActivate={() => handlers.onActivate(context.contextId)}
+                onRemove={() => handlers.onRemoveContext(context.contextId)}
+                theme={theme}
+                t={t}
+              />
+            </Fragment>
+          ))}
+        </Fragment>
+      ))}
 
       <View className="h-px bg-border opacity-30 ml-space-12" />
       <AccountAffordanceRow
         icon="plus"
         label={t('accountMenu.addAnother')}
         onPress={handlers.onAdd}
-        disabled={switchingDisabled}
+        disabled={busy}
         theme={theme}
       />
       <View className="h-px bg-border opacity-30 ml-space-12" />
@@ -316,7 +308,7 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
         icon="account-multiple-outline"
         label={t('accountSwitcher.manageOnDevice')}
         onPress={handlers.onManage}
-        disabled={switchingDisabled}
+        disabled={busy}
         theme={theme}
       />
     </>
@@ -332,7 +324,7 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
           large pressable avatar (with a camera badge to change the photo), then
           the greeting, then the account address under it, then the manage action. */}
       <View style={styles.hero}>
-        {current ? (
+        {hero ? (
           <>
             <PressableScale
               onPress={handlers.onEditAvatar}
@@ -341,8 +333,8 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
               style={styles.heroAvatarPressable}
             >
               <Avatar
-                source={current.avatarUrl ?? undefined}
-                name={current.displayName}
+                source={hero.avatarUrl ?? undefined}
+                name={hero.displayName}
                 size={HERO_AVATAR_SIZE}
               />
               <View
@@ -353,14 +345,14 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
             </PressableScale>
             <View style={styles.heroNameBlock}>
               <Text style={[styles.heroGreeting, { color: theme.colors.text }]} numberOfLines={2}>
-                {t('accountMenu.greeting', { name: current.displayName })}
+                {t('accountMenu.greeting', { name: hero.displayName })}
               </Text>
-              {currentAddress ? (
+              {hero.addressLine ? (
                 <Text
                   style={[styles.heroAddress, { color: theme.colors.textSecondary }]}
                   numberOfLines={1}
                 >
-                  {currentAddress}
+                  {hero.addressLine}
                 </Text>
               ) : null}
             </View>
@@ -387,11 +379,11 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
           <View className="bg-fill">
           <HoverPressable
             baseClassName={`flex-row items-center gap-space-12 px-space-12 py-[10px] min-h-[44px]${
-              switchingDisabled ? ' opacity-60' : ''
+              busy ? ' opacity-60' : ''
             }`}
             hoverClassName="bg-fill-secondary"
             onPress={toggleExpanded}
-            disabled={switchingDisabled}
+            disabled={busy}
             accessibilityRole="button"
             // The ARIA prop, not `accessibilityState`: react-native-web 0.21
             // forwards only this one, and RN maps it to
@@ -432,7 +424,7 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
             pointerEvents={expanded ? 'auto' : 'none'}
           >
             <View
-              key={switchableAccountKey}
+              key={switchListKey}
               style={styles.collapseMeasure}
               onLayout={(event) => setListContentHeight(event.nativeEvent.layout.height)}
             >
@@ -520,6 +512,164 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
   );
 };
 
+/**
+ * The person a block of accounts hangs off, with the one action that removes
+ * THEM rather than one of their accounts.
+ *
+ * The distinction is the reason this row exists: dropping Alice's route to an
+ * organization is not the same as dropping Alice, and on a shared device the
+ * second must not touch Nate's route to the same organization. Two different
+ * server calls, two different rows, never one control doing both.
+ */
+const PrincipalHeaderRow: React.FC<{
+  principal: SwitcherPrincipalRow;
+  removing: boolean;
+  disabled: boolean;
+  onSignOut: () => void;
+  theme: Theme;
+  t: Translate;
+}> = ({ principal, removing, disabled, onSignOut, theme, t }) => {
+  const signOutLabel = t('accountSwitcher.principal.signOut', { name: principal.displayName });
+  return (
+    <View className="flex-row items-center gap-space-12 px-space-12 pt-space-12 pb-space-8">
+      <Avatar
+        source={principal.avatarUrl ?? undefined}
+        variant="thumb"
+        name={principal.displayName}
+        size={PRINCIPAL_AVATAR_SIZE}
+      />
+      <View className="flex-1 min-w-0">
+        <Text className="text-caption font-semibold text-text" numberOfLines={1}>
+          {principal.displayName}
+        </Text>
+        {principal.handle ? (
+          <Text className="text-caption text-text-tertiary" numberOfLines={1}>
+            {`@${principal.handle}`}
+          </Text>
+        ) : null}
+      </View>
+      <HoverPressable
+        baseClassName={`rounded-radius-max px-space-8 py-[4px]${disabled ? ' opacity-60' : ''}`}
+        hoverClassName="bg-fill-secondary"
+        onPress={onSignOut}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityLabel={signOutLabel}
+      >
+        {removing ? (
+          <MaterialCommunityIcons name="loading" size={16} color={theme.colors.textSecondary} />
+        ) : (
+          <Text className="text-caption text-text-secondary">{t('accountMenu.signOut')}</Text>
+        )}
+      </HoverPressable>
+    </View>
+  );
+};
+
+/**
+ * One `principal acting as account` row.
+ *
+ * Pressing it activates the PAIR — a `contextId`, not an account id, because on
+ * this device the account below may also be reachable through somebody else.
+ * A row the server marks unavailable is rendered rather than hidden, so a
+ * membership going away is something the person can see instead of a row that
+ * silently stopped existing; it is disabled, because activating it is a request
+ * the server answers with a 403 and then heals the row away.
+ */
+const ContextRow: React.FC<{
+  context: SwitcherContextRow;
+  principalName: string;
+  /**
+   * This ROW's own accent, resolved from `context.color` by the caller. Never
+   * the signed-in account's: two people on one device would then be drawn in
+   * whichever of them happens to be active.
+   */
+  accent: string;
+  activating: boolean;
+  removing: boolean;
+  disabled: boolean;
+  onActivate: () => void;
+  onRemove: () => void;
+  theme: Theme;
+  t: Translate;
+}> = ({
+  context,
+  principalName,
+  accent,
+  activating,
+  removing,
+  disabled,
+  onActivate,
+  onRemove,
+  theme,
+  t,
+}) => {
+  const unavailable = !context.canActivate;
+  const rowDisabled = disabled || unavailable;
+  const removeLabel = t('accountSwitcher.context.remove', {
+    account: context.displayName,
+    person: principalName,
+  });
+  return (
+    <View className="flex-row items-center">
+      <HoverPressable
+        baseClassName={`flex-1 min-w-0 flex-row items-center gap-space-12 pl-space-12 py-[10px]${
+          rowDisabled ? ' opacity-60' : ''
+        }`}
+        hoverClassName="bg-fill-secondary"
+        onPress={onActivate}
+        disabled={rowDisabled}
+        accessibilityRole="button"
+        accessibilityState={{ selected: context.isActive, disabled: rowDisabled }}
+        accessibilityLabel={context.displayName}
+      >
+        <View>
+          <Avatar
+            source={context.avatarUrl ?? undefined}
+            variant="thumb"
+            name={context.displayName}
+            size={SWITCH_AVATAR_SIZE}
+          />
+          {/* The accent ring is an OVERLAY: it costs the row no width, so every
+              avatar in the list starts on the same content line. */}
+          {context.isActive ? (
+            <View style={[styles.currentAvatarRing, { borderColor: accent }]} pointerEvents="none" />
+          ) : null}
+        </View>
+        <View className="flex-1 min-w-0">
+          <Text className="text-body font-semibold text-text" numberOfLines={1}>
+            {context.displayName}
+          </Text>
+          <Text className="text-caption text-text-secondary" numberOfLines={1}>
+            {unavailable
+              ? t('accountSwitcher.context.unavailable')
+              : context.handle
+                ? `@${context.handle}`
+                : ''}
+          </Text>
+        </View>
+        {activating ? (
+          <MaterialCommunityIcons name="loading" size={20} color={accent} />
+        ) : null}
+      </HoverPressable>
+      <HoverPressable
+        baseClassName={`px-space-12 py-[10px]${disabled ? ' opacity-60' : ''}`}
+        hoverClassName="bg-fill-secondary"
+        onPress={onRemove}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityLabel={removeLabel}
+      >
+        <MaterialCommunityIcons
+          name={removing ? 'loading' : 'close'}
+          size={18}
+          color={theme.colors.textTertiary}
+        />
+      </HoverPressable>
+    </View>
+  );
+};
+
 /**
  * An account-list AFFORDANCE row ("Add another account", "Manage accounts on
  * this device") — a bordered circle sized to the avatar it stands in for, so its

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

@@ -19,7 +19,11 @@
 import type React from 'react';
 import { View } from 'react-native';
 import { Button } from '@oxyhq/bloom/button';
-import type { AccountDialogSnapshot } from '@oxyhq/core';
+import {
+  showsPrincipalHeaders,
+  type AccountDialogSnapshot,
+  type SwitcherPrincipalRow,
+} from '@oxyhq/core';
 import TroubleDisclosure from './TroubleDisclosure';
 import { AccountRow, Dividerish, SubtleLink } from './primitives';
 import { authChooserStyles as styles } from './styles';
@@ -33,6 +37,8 @@ import type {
 
 interface SignInEntryViewProps {
   snapshot: AccountDialogSnapshot;
+  /** The device's people, each with the accounts they may act as. */
+  principals: SwitcherPrincipalRow[];
   theme: Theme;
   t: Translate;
   handlers: OxyAuthChooserHandlers;
@@ -43,6 +49,7 @@ interface SignInEntryViewProps {
 
 const SignInEntryView: React.FC<SignInEntryViewProps> = ({
   snapshot,
+  principals,
   theme,
   t,
   handlers,
@@ -76,18 +83,34 @@ const SignInEntryView: React.FC<SignInEntryViewProps> = ({
     },
   ];
 
+  // Whose route this is only needs naming when the list holds more than one
+  // person, or somebody with more than one account — the same rule the account
+  // menu's group headers follow, so the two surfaces agree on when the actor is
+  // worth stating.
+  const namesTheOperator = showsPrincipalHeaders(principals);
+  const rows = principals.flatMap((principal) =>
+    principal.contexts.map((context) => ({
+      context,
+      operatedBy:
+        namesTheOperator && context.isDelegated
+          ? t('accountSwitcher.context.operatedBy', { name: principal.displayName })
+          : null,
+    })),
+  );
+
   return (
     <View style={styles.signInBlock}>
-      {snapshot.accounts.length > 0 ? (
+      {rows.length > 0 ? (
         <View style={styles.rows}>
-          {snapshot.accounts.map((account) => (
+          {rows.map(({ context, operatedBy }) => (
             <AccountRow
-              key={account.accountId}
-              account={account}
+              key={context.contextId}
+              context={context}
+              operatedBy={operatedBy}
               theme={theme}
-              switching={snapshot.switchingAccountId === account.accountId}
-              disabled={snapshot.switchingAccountId !== null}
-              onPress={() => handlers.onSwitch(account.accountId)}
+              activating={snapshot.activatingContextId === context.contextId}
+              disabled={snapshot.activatingContextId !== null}
+              onPress={() => handlers.onActivate(context.contextId)}
             />
           ))}
           <Dividerish theme={theme} label={t('signin.or')} />

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

@@ -6,21 +6,24 @@
  * creating an account — lives here, hidden until the user asks for it or the
  * chosen primary route fails.
  *
- * Two renderings, deliberately not one controlled component:
+ * Two renderings:
  *  - `revealed` (the primary route failed, or there IS no primary route): the
  *    alternatives ARE the surface's content now, so they render plainly. There
  *    is nothing left to hide them behind.
- *  - otherwise: Bloom's own `Collapsible`, whose trigger is the small
+ *  - otherwise: a single-item Bloom `Accordion`, whose trigger is the small
  *    "Having trouble?" affordance.
  *
- * Splitting on `revealed` is what keeps the open state where it belongs — inside
- * Bloom's uncontrolled disclosure — instead of forcing a hand-rolled controlled
- * copy of it here.
+ * The disclosure is CONTROLLED because Bloom 1.0.0's `Accordion` — which
+ * replaced the deleted `Collapsible` — takes `value`/`onValueChange` and has no
+ * uncontrolled mode. Splitting on `revealed` still matters: it decides whether
+ * a disclosure exists at all, so the open state below only ever describes the
+ * collapsed rendering.
  */
 
 import type React from 'react';
+import { useState } from 'react';
 import { View } from 'react-native';
-import { Collapsible } from '@oxyhq/bloom/collapsible';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@oxyhq/bloom/accordion';
 import { SubtleLink } from './primitives';
 import { authChooserStyles as styles } from './styles';
 import type { OxySignInSurfaceAction, Theme, Translate } from './types';
@@ -38,7 +41,13 @@ interface TroubleDisclosureProps {
   t: Translate;
 }
 
+/** The accordion's single item. Its identity is never shown to the user. */
+const TROUBLE_ITEM = 'trouble';
+
 const TroubleDisclosure: React.FC<TroubleDisclosureProps> = ({ actions, revealed, theme, t }) => {
+  // Declared above the early return: hooks may not sit behind a conditional.
+  const [openItem, setOpenItem] = useState<string | string[] | undefined>(undefined);
+
   if (actions.length === 0) return null;
 
   const links = (
@@ -59,14 +68,20 @@ const TroubleDisclosure: React.FC<TroubleDisclosureProps> = ({ actions, revealed
   if (revealed) return links;
 
   return (
-    <Collapsible
-      title={t('accountSwitcher.havingTrouble')}
+    <Accordion
+      type="single"
+      value={openItem}
+      onValueChange={setOpenItem}
       style={styles.troubleTrigger}
-      titleStyle={[styles.linkText, { color: theme.colors.textSecondary }]}
       testID="trouble-disclosure"
     >
-      {links}
-    </Collapsible>
+      <AccordionItem value={TROUBLE_ITEM}>
+        <AccordionTrigger textStyle={[styles.linkText, { color: theme.colors.textSecondary }]}>
+          {t('accountSwitcher.havingTrouble')}
+        </AccordionTrigger>
+        <AccordionContent>{links}</AccordionContent>
+      </AccordionItem>
+    </Accordion>
   );
 };