@oxy.so/services 11.13.0 → 11.15.0

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

@@ -1,48 +1,20 @@
-/**
- * The signed-in Oxy account MENU (`accounts` view) — a Google-account-menu-style
- * full menu built entirely with NativeWind `className` (the dynamic per-account
- * accent hex is the one inline style NativeWind cannot express). Structure:
- *
- *  - HERO on its own chrome-free block: the current account's large pressable
- *    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 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
- *    uses, not a local row copy.
- *  - FOOTER: Privacy Policy · Terms of Service.
- *
- * All three blocks share ONE rhythm taken from that grouped section: a 12px
- * content inset, a 12px gap after the leading element, 16px between blocks, and
- * a 16px trailing chevron column.
- *
- * Collapse state is a plain `useState` toggled in the row's press handler — no
- * effect hook, no derived-from-props sync.
- */
-
+import { SpinnerIcon } from '@oxy.so/bloom/loading';
 import type React from 'react';
-import { Fragment, useCallback, useState } from 'react';
-import { Pressable, View } from 'react-native-css/components';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
+import { useCallback, useState } from 'react';
+import { View } from 'react-native-css/components';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import MaterialCommunityIcons from '../../icons/MaterialCommunityIcons';
 import { Avatar } from '@oxy.so/bloom/avatar';
-import { AvatarGroup, type AvatarGroupItem } from '@oxy.so/bloom/avatar-group';
-import { Button } from '@oxy.so/bloom/button';
+import { Button, LinkButton } from '@oxy.so/bloom/button';
+import { RiSparklingFill } from '@oxy.so/bloom/icons/RiSparklingFill';
 import { PressableScale } from '@oxy.so/bloom/pressable-scale';
-import { CompositionBar, type CompositionCategory } from '@oxy.so/bloom/composition-bar';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { UsageCard } from '@oxy.so/bloom/usage-card';
+import {
+  GroupedSection,
+  GroupedSectionItem,
+  GroupedSectionCollapse,
+  GroupedSectionIcon,
+} from '@oxy.so/bloom/grouped-section';
 import { Text } from '@oxy.so/bloom/typography';
 import {
   showsPrincipalHeaders,
@@ -51,7 +23,9 @@ import {
   type SwitcherPrincipalRow,
 } from '@oxy.so/core/session';
 import AvatarCameraBadge from '../AvatarCameraBadge';
+import LogoIcon from '../logo/LogoIcon';
 import { authChooserStyles as styles } from './styles';
+import { accountStorageUsage, formatStorageSize, shouldShowStorageActions } from './storageUsage';
 import {
   resolveAccentHex,
   type AccountHeroModel,
@@ -62,60 +36,7 @@ import {
   type Translate,
 } from './types';
 
-type HoverPressableProps = Omit<React.ComponentProps<typeof Pressable>, 'className'> & {
-  baseClassName: string;
-  hoverClassName: string;
-};
-
-/**
- * A `Pressable` that appends a hover-tint NativeWind token while pointer-hovered.
- * The Metro web pipeline here does NOT emit NativeWind `hover:` variants, so hover
- * is driven by RN's cross-platform `onHoverIn`/`onHoverOut` (they fire only on web
- * via react-native-web; a no-op on native) toggling a plain background token —
- * the tint stays a NativeWind class, only the trigger is JS.
- */
-const HoverPressable: React.FC<HoverPressableProps> = ({
-  baseClassName,
-  hoverClassName,
-  ...rest
-}) => {
-  const [hovered, setHovered] = useState(false);
-  return (
-    <Pressable
-      {...rest}
-      className={hovered ? `${baseClassName} ${hoverClassName}` : baseClassName}
-      onHoverIn={() => setHovered(true)}
-      onHoverOut={() => setHovered(false)}
-    />
-  );
-};
-
-/**
- * Leading glyph for the rows that live in a Bloom grouped section (the MENU
- * block) and for the storage card's cloud, which lines its title up with them.
- * It is Bloom's OWN icon-slot size: `SettingsListItem` reserves a fixed 20px
- * leading column and Bloom is consumed exactly as it ships, so a menu glyph
- * larger than this would overhang into the row's title.
- */
-const ROW_ICON_SIZE = 20;
-/**
- * The switch card's two corner states. Collapsed it is one row and reads as a
- * PILL; opened it is a card holding rows, on the same 16px corner the Bloom
- * grouped section below it uses. Interpolated across the reveal, never snapped.
- */
-const SWITCH_CARD_PILL_RADIUS = 999;
-const SWITCH_CARD_RADIUS = 16;
-/**
- * The fraction of the reveal over which the corner resolves. The corner is a
- * FASTER gesture than the reveal — it has to be finished before the rows read as
- * rows, or the card still looks like a pill while a list falls out of it — so it
- * is clamped to the reveal's opening fraction instead of tracking it end to end.
- * Measured in a browser against the 240ms reveal: the corner reaches its card
- * value ~120ms in, with the list only ~20% revealed, and (mirrored) the pill is
- * back ~250ms into the close, with the list already down to ~0.
- */
-const SWITCH_CARD_RADIUS_SETTLE = 0.2;
-/** Duration of the switch-list reveal. */
+/** Duration of the disclosure chevron rotation. */
 const SWITCH_REVEAL_MS = 240;
 /** Diameter of an account row's avatar in the switch list (own markup). */
 const SWITCH_AVATAR_SIZE = 36;
@@ -124,36 +45,16 @@ const SWITCH_AVATAR_SIZE = 36;
  * 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. */
-const HERO_AVATAR_SIZE = 72;
-/** Avatars shown in the switch row's facepile before it collapses into `+N`. */
-const FACEPILE_MAX = 2;
-/** Facepile avatar diameter — one clear step down from a switch-list avatar. */
-const FACEPILE_AVATAR_SIZE = 32;
-/**
- * Facepile overlap. Well under Bloom's `size / 3` default: the stack draws the
- * FIRST item on top, so a deep overlap would bury the trailing `+N` chip's own
- * label under the avatar before it.
- */
-const FACEPILE_OVERLAP = 4;
-
-/**
- * `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.
- */
-function formatStorageGb(bytes: number): string {
-  const gb = bytes / 1024 ** 3;
-  if (gb >= 100 || Number.isInteger(gb)) return `${Math.round(gb)} GB`;
-  return `${gb.toFixed(1)} GB`;
-}
-
+/** Current-account avatar in the summary row. */
+const HERO_AVATAR_SIZE = 56;
 interface AccountsMenuViewProps {
-  snapshot: AccountDialogSnapshot;
+  snapshot: Pick<
+    AccountDialogSnapshot,
+    'loading' | 'activatingContextId' | 'removingContextId' | 'removingPrincipalId'
+  >;
   /** The device's people, each with the accounts they may act as. */
   principals: SwitcherPrincipalRow[];
-  /** The current account, rendered large. `null` before the session resolves. */
+  /** The current account in the summary row. `null` before the session resolves. */
   hero: AccountHeroModel | null;
   theme: Theme;
   t: Translate;
@@ -173,64 +74,19 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
   menu,
 }) => {
   const [expanded, setExpanded] = useState(false);
-  // Measured natural height of the switch list, so the reveal animates to an
-  // exact height (and the content below reflows down smoothly) instead of a
-  // guessed max. The measuring wrapper is style-based, NOT className'd — on
-  // RN-Web `onLayout` never fires for className'd Views (see AGENTS.md).
-  const [listContentHeight, setListContentHeight] = useState(0);
-  // 0 = collapsed, 1 = expanded. Set imperatively in the toggle handler (no
-  // effect hook). On RN-Web there is no worklets plugin, so every shared value a
-  // mapper reads MUST be in its deps array or it freezes on the first frame
-  // (AGENTS.md "Reanimated (web)").
+  const [summaryHovered, setSummaryHovered] = useState(false);
+  // Bloom owns the grouped surface; the dialog owns measured size transitions.
   const listProgress = useSharedValue(0);
-  const listStyle = useAnimatedStyle(
-    () => ({ height: listProgress.value * listContentHeight, opacity: listProgress.value }),
-    [listProgress, listContentHeight],
-  );
   const chevronStyle = useAnimatedStyle(
     () => ({ transform: [{ rotate: `${listProgress.value * 180}deg` }] }),
     [listProgress],
   );
-  // Collapsed, the switch card is a single row and reads as a PILL; opened, it
-  // becomes a card holding rows and takes the grouped-section corner. The corner
-  // is driven off the SAME `listProgress` as the reveal — but clamped to its
-  // opening fraction, so it resolves early instead of trailing the rows.
-  const switchCardStyle = useAnimatedStyle(
-    () => ({
-      borderRadius: interpolate(
-        listProgress.value,
-        [0, SWITCH_CARD_RADIUS_SETTLE],
-        [SWITCH_CARD_PILL_RADIUS, SWITCH_CARD_RADIUS],
-        Extrapolation.CLAMP,
-      ),
-    }),
-    [listProgress],
-  );
-  // `CompositionBar` ships as an interactive breakdown: a selected segment
-  // replaces its hint line with that segment's readout. Tapping the selected one
-  // again clears it.
-  const [storageSegment, setStorageSegment] = useState<string | null>(null);
-  const toggleStorageSegment = useCallback(
-    (key: string) => setStorageSegment((previous) => (previous === key ? null : key)),
-    [],
-  );
   const toggleExpanded = useCallback(() => {
     const next = !expanded;
     setExpanded(next);
     listProgress.value = withTiming(next ? 1 : 0, { duration: SWITCH_REVEAL_MS });
   }, [expanded, listProgress]);
 
-  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} />
-        <Text className="text-body text-text-secondary text-center">
-          {t('accountSwitcher.loading')}
-        </Text>
-      </View>
-    );
-  }
-
   // 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.
@@ -238,310 +94,246 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
     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
-  // a progress value — exactly what Bloom's `CompositionBar` models. Both colors
-  // are theme tokens, so the bar is correct in light and dark.
-  const storageCategories: CompositionCategory[] = storage
-    ? [
-        {
-          key: 'used',
-          name: t('accountMenu.storage.used'),
-          amount: storage.usedBytes,
-          color: theme.colors.primary,
-        },
-        {
-          key: 'free',
-          name: t('accountMenu.storage.free'),
-          amount: Math.max(0, storage.limitBytes - storage.usedBytes),
-          color: theme.colors.contrast50,
-        },
-      ]
-    : [];
-  const usageLabel = storage
-    ? t('accountMenu.storage.usage', {
-        used: formatStorageGb(storage.usedBytes),
-        total: formatStorageGb(storage.limitBytes),
-      })
-    : t('accountMenu.storage.unavailable');
 
-  // The switch list body, revealed under the "Switch account" row. Own markup,
-  // not a Bloom grouped section: this is not a list of settings rows and the
-  // component is not a card container. It mirrors the section's rhythm by hand —
-  // 12px content inset, 12px after the avatar, a hairline between rows — and
-  // draws those hairlines INSIDE the animated clip, so a collapsed list never
-  // strands one against the header row.
-  const listItems = (
-    <>
-      {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}
-              <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={busy}
-        theme={theme}
-      />
-      <View className="h-px bg-border opacity-30 ml-space-12" />
-      <AccountAffordanceRow
-        icon="account-multiple-outline"
-        label={t('accountSwitcher.manageOnDevice')}
-        onPress={handlers.onManage}
-        disabled={busy}
-        theme={theme}
-      />
-    </>
-  );
+  // Direct children share Bloom's grouped shape and spacing. Keep the
+  // principal/context pair as the action identity, even for shared accounts.
+  const listItems = principals.flatMap((principal) => [
+    ...(showPrincipalHeaders
+      ? [
+          <PrincipalHeaderRow
+            key={`principal:${principal.principalId}`}
+            principal={principal}
+            removing={snapshot.removingPrincipalId === principal.principalId}
+            disabled={busy}
+            onSignOut={() => handlers.onRemovePrincipal(principal.principalId)}
+            theme={theme}
+            t={t}
+          />,
+        ]
+      : []),
+    ...principal.contexts
+      .filter((context) => !context.isActive)
+      .map((context) => (
+        <ContextRow
+          key={context.contextId}
+          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}
+        />
+      )),
+  ]);
 
   const manageLabel = t('accountMenu.manage');
   const switchLabel = t('accountMenu.switchAccount');
 
   return (
     <View>
-      {/* HERO — chrome-free and centred, in the reference's reading order:
-          NOTHING above the avatar (the nav bar's Oxy wordmark stands alone), the
-          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}>
-        {hero ? (
-          <>
+      {/* The active account is also the switcher disclosure. Avatar editing is
+          a sibling button, so it never toggles the list or nests a button. */}
+      <GroupedSection style={styles.menuGroup}>
+        <View
+          testID="account-summary"
+          onPointerEnter={() => setSummaryHovered(true)}
+          onPointerLeave={() => setSummaryHovered(false)}
+          style={[
+            styles.accountSummary,
+            summaryHovered && !busy && { backgroundColor: theme.colors.contrast50 },
+          ]}
+        >
+          {hero ? (
             <PressableScale
               onPress={handlers.onEditAvatar}
               accessibilityRole="button"
               accessibilityLabel={t('editProfile.changeAvatar')}
-              style={styles.heroAvatarPressable}
+              style={styles.accountAvatar}
             >
               <Avatar
                 source={hero.avatarUrl ?? undefined}
                 name={hero.displayName}
                 size={HERO_AVATAR_SIZE}
               />
-              <View
-                style={[styles.heroAvatarRing, { borderColor: currentAccent }]}
-                pointerEvents="none"
-              />
               <AvatarCameraBadge />
             </PressableScale>
-            <View style={styles.heroNameBlock}>
-              <Text style={[styles.heroGreeting, { color: theme.colors.text }]} numberOfLines={2}>
-                {t('accountMenu.greeting', { name: hero.displayName })}
+          ) : null}
+          <PressableScale
+            className={`flex-1 min-w-0 flex-row items-center gap-space-12 py-space-12${busy ? ' opacity-60' : ''}`}
+            onPress={toggleExpanded}
+            disabled={busy}
+            accessibilityRole="button"
+            aria-expanded={expanded}
+            accessibilityLabel={switchLabel}
+          >
+            <View style={styles.accountIdentity}>
+              <Text style={[styles.accountName, { color: theme.colors.text }]} numberOfLines={1}>
+                {hero?.displayName}
               </Text>
-              {hero.addressLine ? (
+              {hero?.addressLine ? (
                 <Text
-                  style={[styles.heroAddress, { color: theme.colors.textSecondary }]}
+                  style={[styles.accountAddress, { color: theme.colors.textSecondary }]}
                   numberOfLines={1}
                 >
                   {hero.addressLine}
                 </Text>
               ) : null}
             </View>
-          </>
-        ) : null}
-        {/* Bloom's own compact outlined pill — `secondary` is the outlined
-            variant, `small` the compact height; it hugs its label instead of
-            spanning the surface. */}
-        <Button
-          appearance="subtle"
-          tone="neutral"
-          size="sm"
-          onPress={handlers.onManage}
-          accessibilityLabel={manageLabel}
-        >
-          {manageLabel}
-        </Button>
-      </View>
+            <View style={[styles.chevronCircle, { backgroundColor: theme.colors.contrast50 }]}>
+              <Animated.View style={chevronStyle}>
+                <MaterialCommunityIcons name="chevron-down" size={20} color={theme.colors.text} />
+              </Animated.View>
+            </View>
+          </PressableScale>
+        </View>
 
-      {/* SWITCH ACCOUNT — own NativeWind card, NOT a Bloom grouped section: it
-          is a disclosure header over an animated list, not a list of settings
-          rows, and the grouped section is not a bare card container. */}
-      <View className="mb-space-16">
-        <Animated.View style={[{ overflow: 'hidden' }, switchCardStyle]}>
-          <View className="bg-fill">
-            <HoverPressable
-              baseClassName={`flex-row items-center gap-space-12 px-space-12 py-[10px] min-h-[44px]${
-                busy ? ' opacity-60' : ''
-              }`}
-              hoverClassName="bg-fill-secondary"
-              onPress={toggleExpanded}
-              disabled={busy}
-              accessibilityRole="button"
-              // The ARIA prop, not `accessibilityState`: react-native-web 0.21
-              // forwards only this one, and RN maps it to
-              // `accessibilityState.expanded` natively — so the disclosure state
-              // reaches assistive tech on BOTH platforms.
-              aria-expanded={expanded}
-              accessibilityLabel={switchLabel}
-            >
-              <Text className="flex-1 text-body text-text" numberOfLines={1}>
-                {switchLabel}
-              </Text>
-              {/* The facepile previews who you can switch to; once the list is open
-                it would just restate the rows below it. */}
-              {expanded ? null : (
-                <AvatarGroup
-                  items={facepile}
-                  layout="stack"
-                  size={FACEPILE_AVATAR_SIZE}
-                  max={FACEPILE_MAX}
-                  overlap={FACEPILE_OVERLAP}
-                  variant="thumb"
-                  showInitials
-                  ringColor={theme.colors.card}
-                />
-              )}
-              <View style={[styles.chevronCircle, { backgroundColor: theme.colors.contrast50 }]}>
-                <Animated.View style={chevronStyle}>
-                  <MaterialCommunityIcons name="chevron-down" size={20} color={theme.colors.text} />
-                </Animated.View>
-              </View>
-            </HoverPressable>
+        <GroupedSectionCollapse open={expanded} testID="account-switcher-content">
+          {listItems}
 
-            {/* Animated reveal: an overflow-clipped container whose height + opacity
-              are driven by `listProgress`; the inner style-based wrapper measures
-              the natural content height via `onLayout`. */}
-            <Animated.View
-              style={[styles.collapse, listStyle]}
-              pointerEvents={expanded ? 'auto' : 'none'}
-            >
-              <View
-                key={switchListKey}
-                style={styles.collapseMeasure}
-                onLayout={(event) => setListContentHeight(event.nativeEvent.layout.height)}
-              >
-                <View>{listItems}</View>
-              </View>
-            </Animated.View>
-          </View>
-        </Animated.View>
-      </View>
+          <AccountAffordanceRow
+            icon="plus"
+            label={t('accountMenu.addAnother')}
+            onPress={handlers.onAdd}
+            disabled={busy}
+            theme={theme}
+          />
 
-      {/* OXY STORAGE — own NativeWind card for the same reason: a title, a meter
-          and two chips are not settings rows. Its cloud sits in the same 20px
-          column Bloom's own rows use, so the title below lines up with the menu
-          titles. */}
-      <View className="bg-fill rounded-[16px] overflow-hidden mb-space-16 px-space-12 py-[10px] gap-space-12">
-        <View className="flex-row items-center gap-space-12 min-h-[24px]">
-          <View className="w-[20px] items-center">
-            <MaterialCommunityIcons
-              name="cloud-outline"
-              size={ROW_ICON_SIZE}
-              color={theme.colors.textSecondary}
-            />
-          </View>
-          <Text className="flex-1 text-body font-semibold text-text" numberOfLines={1}>
-            {t('accountMenu.storage.title')}
+          <AccountAffordanceRow
+            icon="logout"
+            label={t('accountMenu.signOut')}
+            onPress={menu.onSignOut}
+            disabled={busy}
+            theme={theme}
+          />
+        </GroupedSectionCollapse>
+        <GroupedSectionItem
+          icon={<LogoIcon height={22} />}
+          title={manageLabel}
+          onPress={handlers.onManage}
+          showChevron={false}
+        />
+      </GroupedSection>
+
+      {/* Bloom owns the usage readout, meter and expandable breakdown. */}
+      <UsageCard
+        title={t('accountMenu.storage.title')}
+        style={styles.menuGroup}
+        usage={accountStorageUsage(storage, theme.colors, t)}
+        formatValue={formatStorageSize}
+        labels={{ freeSpace: t('accountMenu.storage.free') }}
+        fallback={
+          <Text className="text-bodySmall text-text-secondary">
+            {t('accountMenu.storage.unavailable')}
           </Text>
-        </View>
-        <CompositionBar
-          categories={storageCategories}
-          selectedKey={storageSegment}
-          onSelect={toggleStorageSegment}
-          hintLabel={usageLabel}
-          formatReadout={(bytes, percent) => `${formatStorageGb(bytes)} · ${percent}%`}
+        }
+        footer={
+          shouldShowStorageActions(storage) ? (
+            <View className="flex-row justify-end gap-space-8">
+              <StorageChip
+                label={t('accountMenu.storage.getStorage')}
+                onPress={menu.onUpgradeStorage}
+              />
+              <StorageChip
+                label={t('accountMenu.storage.cleanUp')}
+                onPress={menu.onManageStorage}
+              />
+            </View>
+          ) : undefined
+        }
+      />
+
+      <GroupedSection style={styles.menuGroup}>
+        <GroupedSectionItem
+          icon={
+            <GroupedSectionIcon>
+              {({ color, size }) => <RiSparklingFill fill={color} width={size} height={size} />}
+            </GroupedSectionIcon>
+          }
+          title={
+            storage?.plan === 'pro' || storage?.plan === 'business'
+              ? t('accountMenu.plan.current', { plan: storage.plan === 'pro' ? 'Pro' : 'Business' })
+              : t(storage?.plan === 'basic' ? 'accountMenu.plan.get' : 'accountMenu.plan.explore')
+          }
+          description={
+            storage?.plan === 'pro' || storage?.plan === 'business'
+              ? t('accountMenu.plan.manage')
+              : undefined
+          }
+          onPress={menu.onOpenPlan}
+          showChevron={false}
         />
-        <View className="flex-row gap-space-8">
-          <StorageChip label={t('accountMenu.storage.upgrade')} onPress={menu.onUpgradeStorage} />
-          <StorageChip label={t('accountMenu.storage.manage')} onPress={menu.onManageStorage} />
-        </View>
-      </View>
+      </GroupedSection>
+
+      {menu.sections.map((section) => (
+        <GroupedSection key={section.key} title={section.title} style={styles.menuGroup}>
+          {section.items.map((item) => (
+            <GroupedSectionItem
+              key={item.key}
+              icon={
+                typeof item.icon === 'string' || !item.icon ? (
+                  <MenuIcon
+                    name={
+                      (item.icon ??
+                        'dots-horizontal') as keyof typeof MaterialCommunityIcons.glyphMap
+                    }
+                  />
+                ) : (
+                  item.icon
+                )
+              }
+              title={item.label}
+              description={item.description}
+              value={item.badge}
+              disabled={item.disabled}
+              onPress={item.onPress}
+              showChevron={false}
+            />
+          ))}
+        </GroupedSection>
+      ))}
 
       {/* MENU — the same stock grouped section. */}
-      <SettingsListGroup>
-        <SettingsListItem
-          icon={<MenuIcon name="tray-arrow-down" theme={theme} />}
+      <GroupedSection style={styles.menuGroup}>
+        <GroupedSectionItem
+          icon={<MenuIcon name="tray-arrow-down" />}
           title={t('accountMenu.data')}
+          description={t('accountMenu.dataDescription')}
           onPress={menu.onOpenData}
+          showChevron={false}
         />
-        <SettingsListItem
-          icon={<MenuIcon name="cog-outline" theme={theme} />}
+        <GroupedSectionItem
+          icon={<MenuIcon name="cog-outline" tone="info" />}
           title={t('accountMenu.settings')}
+          description={t('accountMenu.settingsDescription')}
           onPress={menu.onOpenSettings}
+          showChevron={false}
         />
-        <SettingsListItem
-          icon={<MenuIcon name="help-circle-outline" theme={theme} />}
+        <GroupedSectionItem
+          icon={<MenuIcon name="help-circle-outline" />}
           title={t('accountMenu.help')}
+          description={t('accountOverview.items.help.subtitle')}
           onPress={menu.onHelp}
-        />
-        {menu.customItems.map((item) => (
-          <SettingsListItem
-            key={item.key}
-            icon={
-              <MenuIcon
-                name={
-                  (item.icon ?? 'dots-horizontal') as keyof typeof MaterialCommunityIcons.glyphMap
-                }
-                theme={theme}
-              />
-            }
-            title={item.label}
-            onPress={item.onPress}
-          />
-        ))}
-        <SettingsListItem
-          icon={<MenuIcon name="logout" theme={theme} />}
-          title={t('accountMenu.signOut')}
-          onPress={menu.onSignOut}
           showChevron={false}
         />
-      </SettingsListGroup>
+      </GroupedSection>
 
       {/* FOOTER. */}
-      <View className="flex-row items-center justify-center gap-space-12 px-space-12 pb-space-8">
-        <Pressable onPress={menu.onPrivacy} accessibilityRole="link">
-          <Text className="text-bodySmall text-text-secondary">{t('accountMenu.privacy')}</Text>
-        </Pressable>
+      <View className="flex-row items-center justify-center gap-space-12 px-space-12 pt-space-12 pb-space-8">
+        <LinkButton size="sm" linkTone="secondary" onPress={menu.onPrivacy}>
+          {t('accountMenu.privacy')}
+        </LinkButton>
         <Text className="text-bodySmall text-text-tertiary">·</Text>
-        <Pressable onPress={menu.onTerms} accessibilityRole="link">
-          <Text className="text-bodySmall text-text-secondary">{t('accountMenu.terms')}</Text>
-        </Pressable>
+        <LinkButton size="sm" linkTone="secondary" onPress={menu.onTerms}>
+          {t('accountMenu.terms')}
+        </LinkButton>
       </View>
     </View>
   );
@@ -583,20 +375,17 @@ const PrincipalHeaderRow: React.FC<{
           </Text>
         ) : null}
       </View>
-      <HoverPressable
-        baseClassName={`rounded-radius-max px-space-8 py-[4px]${disabled ? ' opacity-60' : ''}`}
-        hoverClassName="bg-fill-secondary"
+      <Button
+        appearance="plain"
+        tone="neutral"
+        size="sm"
         onPress={onSignOut}
         disabled={disabled}
-        accessibilityRole="button"
+        loading={removing}
         accessibilityLabel={signOutLabel}
       >
-        {removing ? (
-          <MaterialCommunityIcons name="loading" size={16} color={theme.colors.textSecondary} />
-        ) : (
-          <Text className="text-caption text-text-secondary">{t('accountMenu.signOut')}</Text>
-        )}
-      </HoverPressable>
+        {t('accountMenu.signOut')}
+      </Button>
     </View>
   );
 };
@@ -647,70 +436,53 @@ const ContextRow: React.FC<{
   });
   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
+      <View className="flex-1 min-w-0">
+        <GroupedSectionItem
+          title={context.displayName}
+          description={
+            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"
+                : undefined
+          }
+          icon={
+            <Avatar
+              source={context.avatarUrl ?? undefined}
+              variant="thumb"
+              name={context.displayName}
+              size={SWITCH_AVATAR_SIZE}
+            />
+          }
+          onPress={onActivate}
+          disabled={rowDisabled}
+          accessibilityState={{
+            selected: context.isActive,
+            disabled: rowDisabled,
+            busy: activating,
+          }}
+          accessibilityLabel={context.displayName}
+          showChevron={false}
+          rightElement={activating ? <SpinnerIcon size={20} color={accent} /> : undefined}
+        />
+      </View>
+      <Button
+        appearance="plain"
+        tone="neutral"
+        size="sm"
+        iconOnly
         onPress={onRemove}
         disabled={disabled}
-        accessibilityRole="button"
+        loading={removing}
         accessibilityLabel={removeLabel}
-      >
-        <MaterialCommunityIcons
-          name={removing ? 'loading' : 'close'}
-          size={18}
-          color={theme.colors.textTertiary}
-        />
-      </HoverPressable>
+        icon={<MaterialCommunityIcons name="close" size={18} />}
+      />
     </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
- * label lands on the same line as every account name above it. Own markup, like
- * the account rows it closes: this list is not a Bloom grouped section.
+ * Account actions align with the avatars above them inside the same Bloom group.
  */
 const AccountAffordanceRow: React.FC<{
   icon: keyof typeof MaterialCommunityIcons.glyphMap;
@@ -719,51 +491,29 @@ const AccountAffordanceRow: React.FC<{
   disabled?: boolean;
   theme: Theme;
 }> = ({ icon, label, onPress, disabled, theme }) => (
-  <HoverPressable
-    baseClassName={`flex-row items-center gap-space-12 px-space-12 py-[10px]${
-      disabled ? ' opacity-60' : ''
-    }`}
-    hoverClassName="bg-fill-secondary"
+  <GroupedSectionItem
+    title={label}
     onPress={onPress}
     disabled={disabled}
-    accessibilityRole="button"
-    accessibilityLabel={label}
-  >
-    <View className="w-[36px] h-[36px] items-center justify-center rounded-radius-max border border-border">
-      <MaterialCommunityIcons
-        name={icon}
-        size={BADGE_GLYPH_SIZE}
-        color={theme.colors.textSecondary}
-      />
-    </View>
-    <Text className="flex-1 text-body font-semibold text-text" numberOfLines={1}>
-      {label}
-    </Text>
-  </HoverPressable>
+    showChevron={false}
+    icon={<MenuIcon name={icon} />}
+  />
 );
 
-/**
- * The leading glyph for a grouped-section menu row, sized to Bloom's 20px icon
- * column so the icons, the storage block's cloud and every row title align.
- */
+/** Bloom owns the icon surface, sizing and contrast. */
 const MenuIcon: React.FC<{
   name: keyof typeof MaterialCommunityIcons.glyphMap;
-  theme: Theme;
-}> = ({ name, theme }) => (
-  <MaterialCommunityIcons name={name} size={ROW_ICON_SIZE} color={theme.colors.textSecondary} />
+  tone?: React.ComponentProps<typeof GroupedSectionIcon>['tone'];
+}> = ({ name, tone }) => (
+  <GroupedSectionIcon tone={tone}>
+    {({ color, size }) => <MaterialCommunityIcons name={name} size={size} color={color} />}
+  </GroupedSectionIcon>
 );
 
-/** A storage action chip — a bordered pill on the sheet background. */
 const StorageChip: React.FC<{ label: string; onPress: () => void }> = ({ label, onPress }) => (
-  <HoverPressable
-    baseClassName="rounded-radius-max border border-border bg-bg py-[9px] px-[14px]"
-    hoverClassName="bg-fill-secondary"
-    onPress={onPress}
-    accessibilityRole="button"
-    accessibilityLabel={label}
-  >
-    <Text className="text-bodySmall font-semibold text-text">{label}</Text>
-  </HoverPressable>
+  <Button appearance="plain" size="sm" onPress={onPress} accessibilityLabel={label}>
+    {label}
+  </Button>
 );
 
 export default AccountsMenuView;