@oxy.so/services 11.13.0 → 11.15.0

package/lib/module/ui/components/authChooser/AccountsMenuView.js

@@ -1,96 +1,26 @@
 "use strict";
 
-/**
- * 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 { 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 { SpinnerIcon } from '@oxy.so/bloom/loading';
+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.js";
 import { Avatar } from '@oxy.so/bloom/avatar';
-import { AvatarGroup } 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 } 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 } from '@oxy.so/core/session';
 import AvatarCameraBadge from "../AvatarCameraBadge.js";
+import LogoIcon from "../logo/LogoIcon.js";
 import { authChooserStyles as styles } from "./styles.js";
+import { accountStorageUsage, formatStorageSize, shouldShowStorageActions } from "./storageUsage.js";
 import { resolveAccentHex } from "./types.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * 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 = ({
-  baseClassName,
-  hoverClassName,
-  ...rest
-}) => {
-  const [hovered, setHovered] = useState(false);
-  return /*#__PURE__*/_jsx(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. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SWITCH_REVEAL_MS = 240;
 /** Diameter of an account row's avatar in the switch list (own markup). */
 const SWITCH_AVATAR_SIZE = 36;
@@ -99,30 +29,8 @@ 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) {
-  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;
 const AccountsMenuView = ({
   snapshot,
   principals,
@@ -134,37 +42,14 @@ const AccountsMenuView = ({
   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(null);
-  const toggleStorageSegment = useCallback(key => setStorageSegment(previous => previous === key ? null : key), []);
   const toggleExpanded = useCallback(() => {
     const next = !expanded;
     setExpanded(next);
@@ -172,305 +57,218 @@ const AccountsMenuView = ({
       duration: SWITCH_REVEAL_MS
     });
   }, [expanded, listProgress]);
-  if (snapshot.loading && principals.length === 0) {
-    return /*#__PURE__*/_jsxs(View, {
-      className: "items-center justify-center gap-space-12 py-space-24",
-      children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
-        name: "loading",
-        size: 24,
-        color: theme.colors.textSecondary
-      }), /*#__PURE__*/_jsx(Text, {
-        className: "text-body text-text-secondary text-center",
-        children: t('accountSwitcher.loading')
-      })]
-    });
-  }
 
   // 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 = 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 = 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 = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [principals.map((principal, principalIndex) => /*#__PURE__*/_jsxs(Fragment, {
-      children: [principalIndex > 0 ? /*#__PURE__*/_jsx(View, {
-        className: "h-px bg-border opacity-30"
-      }) : null, showPrincipalHeaders ? /*#__PURE__*/_jsx(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) => /*#__PURE__*/_jsxs(Fragment, {
-        children: [contextIndex > 0 || showPrincipalHeaders ? /*#__PURE__*/_jsx(View, {
-          className: "h-px bg-border opacity-30 ml-space-12"
-        }) : null, /*#__PURE__*/_jsx(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
-        })]
-      }, context.contextId))]
-    }, principal.principalId)), /*#__PURE__*/_jsx(View, {
-      className: "h-px bg-border opacity-30 ml-space-12"
-    }), /*#__PURE__*/_jsx(AccountAffordanceRow, {
-      icon: "plus",
-      label: t('accountMenu.addAnother'),
-      onPress: handlers.onAdd,
-      disabled: busy,
-      theme: theme
-    }), /*#__PURE__*/_jsx(View, {
-      className: "h-px bg-border opacity-30 ml-space-12"
-    }), /*#__PURE__*/_jsx(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 ? [/*#__PURE__*/_jsx(PrincipalHeaderRow, {
+    principal: principal,
+    removing: snapshot.removingPrincipalId === principal.principalId,
+    disabled: busy,
+    onSignOut: () => handlers.onRemovePrincipal(principal.principalId),
+    theme: theme,
+    t: t
+  }, `principal:${principal.principalId}`)] : []), ...principal.contexts.filter(context => !context.isActive).map(context => /*#__PURE__*/_jsx(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
+  }, context.contextId))]);
   const manageLabel = t('accountMenu.manage');
   const switchLabel = t('accountMenu.switchAccount');
   return /*#__PURE__*/_jsxs(View, {
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.hero,
-      children: [hero ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsxs(PressableScale, {
+    children: [/*#__PURE__*/_jsxs(GroupedSection, {
+      style: styles.menuGroup,
+      children: [/*#__PURE__*/_jsxs(View, {
+        testID: "account-summary",
+        onPointerEnter: () => setSummaryHovered(true),
+        onPointerLeave: () => setSummaryHovered(false),
+        style: [styles.accountSummary, summaryHovered && !busy && {
+          backgroundColor: theme.colors.contrast50
+        }],
+        children: [hero ? /*#__PURE__*/_jsxs(PressableScale, {
           onPress: handlers.onEditAvatar,
           accessibilityRole: "button",
           accessibilityLabel: t('editProfile.changeAvatar'),
-          style: styles.heroAvatarPressable,
+          style: styles.accountAvatar,
           children: [/*#__PURE__*/_jsx(Avatar, {
             source: hero.avatarUrl ?? undefined,
             name: hero.displayName,
             size: HERO_AVATAR_SIZE
-          }), /*#__PURE__*/_jsx(View, {
-            style: [styles.heroAvatarRing, {
-              borderColor: currentAccent
-            }],
-            pointerEvents: "none"
           }), /*#__PURE__*/_jsx(AvatarCameraBadge, {})]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.heroNameBlock,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: [styles.heroGreeting, {
-              color: theme.colors.text
-            }],
-            numberOfLines: 2,
-            children: t('accountMenu.greeting', {
-              name: hero.displayName
-            })
-          }), hero.addressLine ? /*#__PURE__*/_jsx(Text, {
-            style: [styles.heroAddress, {
-              color: theme.colors.textSecondary
-            }],
-            numberOfLines: 1,
-            children: hero.addressLine
-          }) : null]
-        })]
-      }) : null, /*#__PURE__*/_jsx(Button, {
-        appearance: "subtle",
-        tone: "neutral",
-        size: "sm",
-        onPress: handlers.onManage,
-        accessibilityLabel: manageLabel,
-        children: manageLabel
-      })]
-    }), /*#__PURE__*/_jsx(View, {
-      className: "mb-space-16",
-      children: /*#__PURE__*/_jsx(Animated.View, {
-        style: [{
-          overflow: 'hidden'
-        }, switchCardStyle],
-        children: /*#__PURE__*/_jsxs(View, {
-          className: "bg-fill",
-          children: [/*#__PURE__*/_jsxs(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,
+        }) : null, /*#__PURE__*/_jsxs(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,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.accountIdentity,
             children: [/*#__PURE__*/_jsx(Text, {
-              className: "flex-1 text-body text-text",
+              style: [styles.accountName, {
+                color: theme.colors.text
+              }],
               numberOfLines: 1,
-              children: switchLabel
-            }), expanded ? null : /*#__PURE__*/_jsx(AvatarGroup, {
-              items: facepile,
-              layout: "stack",
-              size: FACEPILE_AVATAR_SIZE,
-              max: FACEPILE_MAX,
-              overlap: FACEPILE_OVERLAP,
-              variant: "thumb",
-              showInitials: true,
-              ringColor: theme.colors.card
-            }), /*#__PURE__*/_jsx(View, {
-              style: [styles.chevronCircle, {
-                backgroundColor: theme.colors.contrast50
+              children: hero?.displayName
+            }), hero?.addressLine ? /*#__PURE__*/_jsx(Text, {
+              style: [styles.accountAddress, {
+                color: theme.colors.textSecondary
               }],
-              children: /*#__PURE__*/_jsx(Animated.View, {
-                style: chevronStyle,
-                children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-                  name: "chevron-down",
-                  size: 20,
-                  color: theme.colors.text
-                })
-              })
-            })]
-          }), /*#__PURE__*/_jsx(Animated.View, {
-            style: [styles.collapse, listStyle],
-            pointerEvents: expanded ? 'auto' : 'none',
-            children: /*#__PURE__*/_jsx(View, {
-              style: styles.collapseMeasure,
-              onLayout: event => setListContentHeight(event.nativeEvent.layout.height),
-              children: /*#__PURE__*/_jsx(View, {
-                children: listItems
+              numberOfLines: 1,
+              children: hero.addressLine
+            }) : null]
+          }), /*#__PURE__*/_jsx(View, {
+            style: [styles.chevronCircle, {
+              backgroundColor: theme.colors.contrast50
+            }],
+            children: /*#__PURE__*/_jsx(Animated.View, {
+              style: chevronStyle,
+              children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+                name: "chevron-down",
+                size: 20,
+                color: theme.colors.text
               })
-            }, switchListKey)
+            })
           })]
-        })
-      })
-    }), /*#__PURE__*/_jsxs(View, {
-      className: "bg-fill rounded-[16px] overflow-hidden mb-space-16 px-space-12 py-[10px] gap-space-12",
-      children: [/*#__PURE__*/_jsxs(View, {
-        className: "flex-row items-center gap-space-12 min-h-[24px]",
-        children: [/*#__PURE__*/_jsx(View, {
-          className: "w-[20px] items-center",
-          children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-            name: "cloud-outline",
-            size: ROW_ICON_SIZE,
-            color: theme.colors.textSecondary
-          })
-        }), /*#__PURE__*/_jsx(Text, {
-          className: "flex-1 text-body font-semibold text-text",
-          numberOfLines: 1,
-          children: t('accountMenu.storage.title')
         })]
-      }), /*#__PURE__*/_jsx(CompositionBar, {
-        categories: storageCategories,
-        selectedKey: storageSegment,
-        onSelect: toggleStorageSegment,
-        hintLabel: usageLabel,
-        formatReadout: (bytes, percent) => `${formatStorageGb(bytes)} · ${percent}%`
-      }), /*#__PURE__*/_jsxs(View, {
-        className: "flex-row gap-space-8",
+      }), /*#__PURE__*/_jsxs(GroupedSectionCollapse, {
+        open: expanded,
+        testID: "account-switcher-content",
+        children: [listItems, /*#__PURE__*/_jsx(AccountAffordanceRow, {
+          icon: "plus",
+          label: t('accountMenu.addAnother'),
+          onPress: handlers.onAdd,
+          disabled: busy,
+          theme: theme
+        }), /*#__PURE__*/_jsx(AccountAffordanceRow, {
+          icon: "logout",
+          label: t('accountMenu.signOut'),
+          onPress: menu.onSignOut,
+          disabled: busy,
+          theme: theme
+        })]
+      }), /*#__PURE__*/_jsx(GroupedSectionItem, {
+        icon: /*#__PURE__*/_jsx(LogoIcon, {
+          height: 22
+        }),
+        title: manageLabel,
+        onPress: handlers.onManage,
+        showChevron: false
+      })]
+    }), /*#__PURE__*/_jsx(UsageCard, {
+      title: t('accountMenu.storage.title'),
+      style: styles.menuGroup,
+      usage: accountStorageUsage(storage, theme.colors, t),
+      formatValue: formatStorageSize,
+      labels: {
+        freeSpace: t('accountMenu.storage.free')
+      },
+      fallback: /*#__PURE__*/_jsx(Text, {
+        className: "text-bodySmall text-text-secondary",
+        children: t('accountMenu.storage.unavailable')
+      }),
+      footer: shouldShowStorageActions(storage) ? /*#__PURE__*/_jsxs(View, {
+        className: "flex-row justify-end gap-space-8",
         children: [/*#__PURE__*/_jsx(StorageChip, {
-          label: t('accountMenu.storage.upgrade'),
+          label: t('accountMenu.storage.getStorage'),
           onPress: menu.onUpgradeStorage
         }), /*#__PURE__*/_jsx(StorageChip, {
-          label: t('accountMenu.storage.manage'),
+          label: t('accountMenu.storage.cleanUp'),
           onPress: menu.onManageStorage
         })]
-      })]
-    }), /*#__PURE__*/_jsxs(SettingsListGroup, {
-      children: [/*#__PURE__*/_jsx(SettingsListItem, {
+      }) : undefined
+    }), /*#__PURE__*/_jsx(GroupedSection, {
+      style: styles.menuGroup,
+      children: /*#__PURE__*/_jsx(GroupedSectionItem, {
+        icon: /*#__PURE__*/_jsx(GroupedSectionIcon, {
+          children: ({
+            color,
+            size
+          }) => /*#__PURE__*/_jsx(RiSparklingFill, {
+            fill: color,
+            width: size,
+            height: size
+          })
+        }),
+        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
+      })
+    }), menu.sections.map(section => /*#__PURE__*/_jsx(GroupedSection, {
+      title: section.title,
+      style: styles.menuGroup,
+      children: section.items.map(item => /*#__PURE__*/_jsx(GroupedSectionItem, {
+        icon: typeof item.icon === 'string' || !item.icon ? /*#__PURE__*/_jsx(MenuIcon, {
+          name: item.icon ?? 'dots-horizontal'
+        }) : item.icon,
+        title: item.label,
+        description: item.description,
+        value: item.badge,
+        disabled: item.disabled,
+        onPress: item.onPress,
+        showChevron: false
+      }, item.key))
+    }, section.key)), /*#__PURE__*/_jsxs(GroupedSection, {
+      style: styles.menuGroup,
+      children: [/*#__PURE__*/_jsx(GroupedSectionItem, {
         icon: /*#__PURE__*/_jsx(MenuIcon, {
-          name: "tray-arrow-down",
-          theme: theme
+          name: "tray-arrow-down"
         }),
         title: t('accountMenu.data'),
-        onPress: menu.onOpenData
-      }), /*#__PURE__*/_jsx(SettingsListItem, {
+        description: t('accountMenu.dataDescription'),
+        onPress: menu.onOpenData,
+        showChevron: false
+      }), /*#__PURE__*/_jsx(GroupedSectionItem, {
         icon: /*#__PURE__*/_jsx(MenuIcon, {
           name: "cog-outline",
-          theme: theme
+          tone: "info"
         }),
         title: t('accountMenu.settings'),
-        onPress: menu.onOpenSettings
-      }), /*#__PURE__*/_jsx(SettingsListItem, {
+        description: t('accountMenu.settingsDescription'),
+        onPress: menu.onOpenSettings,
+        showChevron: false
+      }), /*#__PURE__*/_jsx(GroupedSectionItem, {
         icon: /*#__PURE__*/_jsx(MenuIcon, {
-          name: "help-circle-outline",
-          theme: theme
+          name: "help-circle-outline"
         }),
         title: t('accountMenu.help'),
-        onPress: menu.onHelp
-      }), menu.customItems.map(item => /*#__PURE__*/_jsx(SettingsListItem, {
-        icon: /*#__PURE__*/_jsx(MenuIcon, {
-          name: item.icon ?? 'dots-horizontal',
-          theme: theme
-        }),
-        title: item.label,
-        onPress: item.onPress
-      }, item.key)), /*#__PURE__*/_jsx(SettingsListItem, {
-        icon: /*#__PURE__*/_jsx(MenuIcon, {
-          name: "logout",
-          theme: theme
-        }),
-        title: t('accountMenu.signOut'),
-        onPress: menu.onSignOut,
+        description: t('accountOverview.items.help.subtitle'),
+        onPress: menu.onHelp,
         showChevron: false
       })]
     }), /*#__PURE__*/_jsxs(View, {
-      className: "flex-row items-center justify-center gap-space-12 px-space-12 pb-space-8",
-      children: [/*#__PURE__*/_jsx(Pressable, {
+      className: "flex-row items-center justify-center gap-space-12 px-space-12 pt-space-12 pb-space-8",
+      children: [/*#__PURE__*/_jsx(LinkButton, {
+        size: "sm",
+        linkTone: "secondary",
         onPress: menu.onPrivacy,
-        accessibilityRole: "link",
-        children: /*#__PURE__*/_jsx(Text, {
-          className: "text-bodySmall text-text-secondary",
-          children: t('accountMenu.privacy')
-        })
+        children: t('accountMenu.privacy')
       }), /*#__PURE__*/_jsx(Text, {
         className: "text-bodySmall text-text-tertiary",
         children: "\xB7"
-      }), /*#__PURE__*/_jsx(Pressable, {
+      }), /*#__PURE__*/_jsx(LinkButton, {
+        size: "sm",
+        linkTone: "secondary",
         onPress: menu.onTerms,
-        accessibilityRole: "link",
-        children: /*#__PURE__*/_jsx(Text, {
-          className: "text-bodySmall text-text-secondary",
-          children: t('accountMenu.terms')
-        })
+        children: t('accountMenu.terms')
       })]
     })]
   });
@@ -514,21 +312,15 @@ const PrincipalHeaderRow = ({
         numberOfLines: 1,
         children: `@${principal.handle}`
       }) : null]
-    }), /*#__PURE__*/_jsx(HoverPressable, {
-      baseClassName: `rounded-radius-max px-space-8 py-[4px]${disabled ? ' opacity-60' : ''}`,
-      hoverClassName: "bg-fill-secondary",
+    }), /*#__PURE__*/_jsx(Button, {
+      appearance: "plain",
+      tone: "neutral",
+      size: "sm",
       onPress: onSignOut,
       disabled: disabled,
-      accessibilityRole: "button",
+      loading: removing,
       accessibilityLabel: signOutLabel,
-      children: removing ? /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-        name: "loading",
-        size: 16,
-        color: theme.colors.textSecondary
-      }) : /*#__PURE__*/_jsx(Text, {
-        className: "text-caption text-text-secondary",
-        children: t('accountMenu.signOut')
-      })
+      children: t('accountMenu.signOut')
     })]
   });
 };
@@ -563,66 +355,50 @@ const ContextRow = ({
   });
   return /*#__PURE__*/_jsxs(View, {
     className: "flex-row items-center",
-    children: [/*#__PURE__*/_jsxs(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,
-      children: [/*#__PURE__*/_jsxs(View, {
-        children: [/*#__PURE__*/_jsx(Avatar, {
+    children: [/*#__PURE__*/_jsx(View, {
+      className: "flex-1 min-w-0",
+      children: /*#__PURE__*/_jsx(GroupedSectionItem, {
+        title: context.displayName,
+        description: unavailable ? t('accountSwitcher.context.unavailable') : context.handle ? `@${context.handle}` : undefined,
+        icon: /*#__PURE__*/_jsx(Avatar, {
           source: context.avatarUrl ?? undefined,
           variant: "thumb",
           name: context.displayName,
           size: SWITCH_AVATAR_SIZE
-        }), context.isActive ? /*#__PURE__*/_jsx(View, {
-          style: [styles.currentAvatarRing, {
-            borderColor: accent
-          }],
-          pointerEvents: "none"
-        }) : null]
-      }), /*#__PURE__*/_jsxs(View, {
-        className: "flex-1 min-w-0",
-        children: [/*#__PURE__*/_jsx(Text, {
-          className: "text-body font-semibold text-text",
-          numberOfLines: 1,
-          children: context.displayName
-        }), /*#__PURE__*/_jsx(Text, {
-          className: "text-caption text-text-secondary",
-          numberOfLines: 1,
-          children: unavailable ? t('accountSwitcher.context.unavailable') : context.handle ? `@${context.handle}` : ''
-        })]
-      }), activating ? /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-        name: "loading",
-        size: 20,
-        color: accent
-      }) : null]
-    }), /*#__PURE__*/_jsx(HoverPressable, {
-      baseClassName: `px-space-12 py-[10px]${disabled ? ' opacity-60' : ''}`,
-      hoverClassName: "bg-fill-secondary",
+        }),
+        onPress: onActivate,
+        disabled: rowDisabled,
+        accessibilityState: {
+          selected: context.isActive,
+          disabled: rowDisabled,
+          busy: activating
+        },
+        accessibilityLabel: context.displayName,
+        showChevron: false,
+        rightElement: activating ? /*#__PURE__*/_jsx(SpinnerIcon, {
+          size: 20,
+          color: accent
+        }) : undefined
+      })
+    }), /*#__PURE__*/_jsx(Button, {
+      appearance: "plain",
+      tone: "neutral",
+      size: "sm",
+      iconOnly: true,
       onPress: onRemove,
       disabled: disabled,
-      accessibilityRole: "button",
+      loading: removing,
       accessibilityLabel: removeLabel,
-      children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-        name: removing ? 'loading' : 'close',
-        size: 18,
-        color: theme.colors.textTertiary
+      icon: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+        name: "close",
+        size: 18
       })
     })]
   });
 };
 
 /**
- * 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 = ({
   icon,
@@ -630,54 +406,40 @@ const AccountAffordanceRow = ({
   onPress,
   disabled,
   theme
-}) => /*#__PURE__*/_jsxs(HoverPressable, {
-  baseClassName: `flex-row items-center gap-space-12 px-space-12 py-[10px]${disabled ? ' opacity-60' : ''}`,
-  hoverClassName: "bg-fill-secondary",
+}) => /*#__PURE__*/_jsx(GroupedSectionItem, {
+  title: label,
   onPress: onPress,
   disabled: disabled,
-  accessibilityRole: "button",
-  accessibilityLabel: label,
-  children: [/*#__PURE__*/_jsx(View, {
-    className: "w-[36px] h-[36px] items-center justify-center rounded-radius-max border border-border",
-    children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-      name: icon,
-      size: BADGE_GLYPH_SIZE,
-      color: theme.colors.textSecondary
-    })
-  }), /*#__PURE__*/_jsx(Text, {
-    className: "flex-1 text-body font-semibold text-text",
-    numberOfLines: 1,
-    children: label
-  })]
+  showChevron: false,
+  icon: /*#__PURE__*/_jsx(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 = ({
   name,
-  theme
-}) => /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-  name: name,
-  size: ROW_ICON_SIZE,
-  color: theme.colors.textSecondary
+  tone
+}) => /*#__PURE__*/_jsx(GroupedSectionIcon, {
+  tone: tone,
+  children: ({
+    color,
+    size
+  }) => /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+    name: name,
+    size: size,
+    color: color
+  })
 });
-
-/** A storage action chip — a bordered pill on the sheet background. */
 const StorageChip = ({
   label,
   onPress
-}) => /*#__PURE__*/_jsx(HoverPressable, {
-  baseClassName: "rounded-radius-max border border-border bg-bg py-[9px] px-[14px]",
-  hoverClassName: "bg-fill-secondary",
+}) => /*#__PURE__*/_jsx(Button, {
+  appearance: "plain",
+  size: "sm",
   onPress: onPress,
-  accessibilityRole: "button",
   accessibilityLabel: label,
-  children: /*#__PURE__*/_jsx(Text, {
-    className: "text-bodySmall font-semibold text-text",
-    children: label
-  })
+  children: label
 });
 export default AccountsMenuView;
 //# sourceMappingURL=AccountsMenuView.js.map