@eifi1/ui-kit 0.40.1 → 0.42.0

package/src/settings/settings-layout.tsx

@@ -40,6 +40,9 @@ export type SettingsLayoutWidth = "6xl" | "7xl";
  *  about twelve, keksdose 26; a page of six needs none. */
 export const SETTINGS_SEARCH_THRESHOLD = 8;
 
+/** The desktop sidebar's column: sticky beside a long group (§3.2). */
+const SIDEBAR_COLUMN = "mb-4 md:sticky md:top-6 md:mb-0 md:self-start";
+
 export interface SettingsLayoutProps<G extends string> {
   /** The page's `h1`: "Settings", "Administration". Default: `labels.title`. */
   title?: ReactNode;
@@ -72,6 +75,12 @@ export interface SettingsLayoutProps<G extends string> {
    * own navigation carries them.
    */
   phoneFooter?: ReactNode;
+  /**
+   * 0.42.0 (docs/admin-harmonization.md §2.5 decision 16): content under the section
+   * list on a desktop, in the same sticky column — the admin area's Tools list
+   * (`AdminToolLinks`). Not shown on a phone, where `phoneFooter` carries the same links.
+   */
+  sidebarFooter?: ReactNode;
   /** Prop > `<UiKitProvider labels={{ settings }}>` > English. */
   labels?: LabelOverride<SettingsLabels>;
   /** See {@link SettingsLayoutMode}. Default `"auto"`: the screen decides. */
@@ -151,6 +160,7 @@ export function SettingsLayout<G extends string>({
   width = "6xl",
   renderGroup,
   phoneFooter,
+  sidebarFooter,
   labels: labelsProp,
   layout = "auto",
   appName,
@@ -376,45 +386,59 @@ export function SettingsLayout<G extends string>({
     );
   } else {
     const open = group === null ? undefined : groupById.get(group);
+    // The section list alone, or (0.42) with the app's `sidebarFooter` under it in one
+    // sticky column.
+    const withSidebarFooter = (tabs: ReactNode) =>
+      sidebarFooter == null ? (
+        tabs
+      ) : (
+        <div className={cn(SIDEBAR_COLUMN, "space-y-6")}>
+          {tabs}
+          <div data-slot="settings-sidebar-footer">{sidebarFooter}</div>
+        </div>
+      );
     body = (
       <div className={pageClass} data-settings-view="desktop">
         <PageHeader size="compact" title={pageTitle} />
         {searchField}
         <div className="md:grid md:grid-cols-[14rem_minmax(0,1fr)] md:gap-6">
-          <Tabs<G>
-            orientation="vertical"
-            aria-label={labels.sections}
-            // Sticky (new in the harmonisation, §3.2): keksdose's notifications group
-            // scrolls for screens, and the list should stay in view beside it.
-            className="mb-4 md:sticky md:top-6 md:mb-0 md:self-start"
-            panelId={open && !searching ? panelId : undefined}
-            tabs={route.groups.map((g) => {
-              const count = hitsByGroup.get(g.id) ?? 0;
-              // While searching, the groups with nothing to show step back (keksdose).
-              const dim = searching && count === 0;
-              return {
-                id: g.id,
-                href: `${root}${settingsHref(base, g.id)}`,
-                name: g.title,
-                label: <span className={cn(dim && "opacity-40")}>{g.title}</span>,
-                icon: <span className={cn("inline-flex [&_svg]:size-4", dim && "opacity-40")}>{g.icon}</span>,
-                badge:
-                  searching && count > 0 ? (
-                    <Chip size="sm" tone="brand">
-                      <span aria-hidden>{count}</span>
-                      <span className="sr-only-fixed">{labels.matchCount(count)}</span>
-                    </Chip>
-                  ) : undefined,
-              };
-            })}
-            active={(open?.id ?? route.groups[0]?.id) as G}
-            onChange={(id) => {
-              // While searching the hits stand where the group would; a click on a group
-              // means "go there", so the search makes way (keksdose).
-              setQuery("");
-              select(id);
-            }}
-          />
+          {withSidebarFooter(
+            <Tabs<G>
+              orientation="vertical"
+              aria-label={labels.sections}
+              // Sticky (new in the harmonisation, §3.2): keksdose's notifications group
+              // scrolls for screens, and the list should stay in view beside it. With a
+              // `sidebarFooter` the column round both is the sticky one.
+              className={sidebarFooter == null ? SIDEBAR_COLUMN : undefined}
+              panelId={open && !searching ? panelId : undefined}
+              tabs={route.groups.map((g) => {
+                const count = hitsByGroup.get(g.id) ?? 0;
+                // While searching, the groups with nothing to show step back (keksdose).
+                const dim = searching && count === 0;
+                return {
+                  id: g.id,
+                  href: `${root}${settingsHref(base, g.id)}`,
+                  name: g.title,
+                  label: <span className={cn(dim && "opacity-40")}>{g.title}</span>,
+                  icon: <span className={cn("inline-flex [&_svg]:size-4", dim && "opacity-40")}>{g.icon}</span>,
+                  badge:
+                    searching && count > 0 ? (
+                      <Chip size="sm" tone="brand">
+                        <span aria-hidden>{count}</span>
+                        <span className="sr-only-fixed">{labels.matchCount(count)}</span>
+                      </Chip>
+                    ) : undefined,
+                };
+              })}
+              active={(open?.id ?? route.groups[0]?.id) as G}
+              onChange={(id) => {
+                // While searching the hits stand where the group would; a click on a group
+                // means "go there", so the search makes way (keksdose).
+                setQuery("");
+                select(id);
+              }}
+            />,
+          )}
           <div className="min-w-0 space-y-4">
             {searching ? (
               results

package/src/shell/account-menu-language.tsx

@@ -0,0 +1,116 @@
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Globe } from "lucide-react";
+import { Disclosure } from "../components/disclosure";
+import { MenuItem } from "../components/menu-item";
+import { DEFAULT_TOP_BAR_LABELS, useKitLabels } from "../i18n/kit-labels";
+
+/** One offered language in the account menu's sub-list. */
+export interface AccountMenuLanguageOption {
+  code: string;
+  /** Its name, in its own language ("Deutsch", "Français"). */
+  label: ReactNode;
+  /**
+   * A flag before the name, as the app draws it — keksdose's flag-icons span
+   * (`<span aria-hidden className="fi fi-ch …" />`). A node rather than a country code, so
+   * the kit ships no flag set; decorative, so give it `aria-hidden`.
+   */
+  flag?: ReactNode;
+  /**
+   * Or the ISO 3166-1 alpha-2 country (lowercase) whose flag-icons flag to draw, as
+   * `LanguageMenu`'s `LanguageOption` takes it — so one language list feeds both
+   * (Kurvenschmiede's `LANGUAGES`). Needs the app's flag-icons CSS, as `LanguageMenu`
+   * does. `flag` wins when both are given.
+   */
+  country?: string;
+}
+
+/** The option's flag: its own node, else the flag-icons flag of its country. */
+function flagOf(lang: AccountMenuLanguageOption): ReactNode {
+  if (lang.flag !== undefined) return lang.flag;
+  if (!lang.country) return undefined;
+  return (
+    <span
+      aria-hidden
+      data-country={lang.country}
+      className={`fi fi-${lang.country} inline-block h-[0.9375rem] w-5 shrink-0 rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)]`}
+    />
+  );
+}
+
+export interface AccountMenuLanguageProps {
+  languages: readonly AccountMenuLanguageOption[];
+  /** The active language's code. */
+  value: string | undefined;
+  /** A pick: the app sets the device's language and, signed in, the account's
+   *  (settings §6.2). */
+  onPick: (code: string) => void;
+  /** The account menu's `close` (from `TopBarActionMenu`'s `children`): a pick shuts it. */
+  close?: () => void;
+  /** The row's name. Default: `topBar.language` ("Language"). */
+  label?: string;
+  /** Open the sub-list at first. Default `false`. */
+  defaultOpen?: boolean;
+}
+
+/**
+ * The language choice INSIDE the account menu (docs/top-bar-harmonization.md §2.3),
+ * keksdose's sub-list: a `Disclosure variant="menu"` row — the globe, "Language", the
+ * active language's flag and the chevron — that opens in place onto one checked
+ * `MenuItem` per language. Inline rather than a nested popover: a popover inside a
+ * popover fights the outside click and has nowhere to go on a phone (keksdose #140).
+ *
+ * It renders its own `<li>`: drop it into `TopBarActionMenu`'s `children` first after the
+ * app's context rows (§6.5). Signed out there is no account menu; `LanguageMenu` stays
+ * the bar's button (§2.3).
+ */
+export function AccountMenuLanguage({
+  languages,
+  value,
+  onPick,
+  close,
+  label,
+  defaultOpen = false,
+}: AccountMenuLanguageProps) {
+  const words = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS);
+  const [open, setOpen] = useState(defaultOpen);
+  const active = languages.find((l) => l.code === value);
+  return (
+    <li>
+      <Disclosure
+        variant="menu"
+        open={open}
+        onOpenChange={setOpen}
+        title={
+          <span className="flex items-center justify-between gap-3">
+            <span className="flex items-center gap-2">
+              <Globe aria-hidden className="size-4" />
+              {label ?? words.language}
+            </span>
+            {active && flagOf(active)}
+          </span>
+        }
+      >
+        <ul>
+          {languages.map((lang) => (
+            <li key={lang.code}>
+              <MenuItem
+                checked={lang.code === value}
+                onClick={() => {
+                  onPick(lang.code);
+                  setOpen(false);
+                  close?.();
+                }}
+                leading={flagOf(lang)}
+                // Under the row's own text, past the globe.
+                className="ps-9"
+              >
+                {lang.label}
+              </MenuItem>
+            </li>
+          ))}
+        </ul>
+      </Disclosure>
+    </li>
+  );
+}

package/src/shell/admin-menu.tsx

@@ -0,0 +1,117 @@
+import { Link } from "react-router";
+import { ShieldCheck } from "lucide-react";
+import { Chip } from "../components/chip";
+import { MenuItem } from "../components/menu-item";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
+import { DEFAULT_ADMIN_AREA_LABELS } from "../admin/admin-area-labels";
+import type { AdminAreaLabels } from "../admin/admin-area-labels";
+import type { TopBarMenuEntry } from "./topbar-action-menu";
+
+/**
+ * The account menu's "Administration" row (0.42.0, docs/admin-harmonization.md §2.1, §6.6,
+ * §7): the way into the admin area everyone finds, in every app, for an admin only. Two
+ * forms of one row — {@link adminMenuEntry} for `TopBarActionMenu`'s `entries`, and
+ * {@link AdminMenuRow} for a menu built from `HoverMenu` children (Kurvenschmiede's).
+ */
+
+/** The badge's text: nothing for none or 0, "99+" past 99. */
+function badgeText(badge: number | null | undefined): string | null {
+  if (typeof badge !== "number" || !(badge > 0)) return null;
+  return badge > 99 ? "99+" : String(Math.floor(badge));
+}
+
+/**
+ * The waiting count at the row's end: the `solid` count pill of {@link Chip}, in the
+ * pending count's tone, with the number for the eye and `adminArea.waiting` for a reader
+ * ("Administration, 3 waiting"). `null` for no count.
+ */
+function WaitingBadge({ badge, labels }: { badge: number | null | undefined; labels: AdminAreaLabels }) {
+  const text = badgeText(badge);
+  if (text === null) return null;
+  return (
+    <Chip size="sm" variant="solid" tone="warning" data-slot="admin-badge">
+      <span aria-hidden>{text}</span>
+      {/* The comma parts it from the row's label in the name: "Administration, 3 waiting". */}
+      <span className="sr-only-fixed">, {labels.waiting(badge as number)}</span>
+    </Chip>
+  );
+}
+
+export interface AdminMenuEntryOptions {
+  /** The admin area. Default `/admin`. */
+  href?: string;
+  /**
+   * The waiting count (§2.4 decision 15, §6.3): only work that waits on this admin —
+   * `adminWaitingCount(attention, […])`. `0`, `null` or none shows no badge.
+   */
+  badge?: number | null;
+  /** The resolved `adminArea` words (`useAdminAreaLabels()`); default English. Builds no
+   *  hook, so the entry can be made in the list of entries. */
+  labels?: AdminAreaLabels;
+  /** The entry's `key`. Default `"administration"`. */
+  key?: string;
+  /** The page already open: `aria-current` and a check mark. */
+  current?: boolean;
+}
+
+/**
+ * The "Administration" {@link TopBarMenuEntry}: a link row with the `ShieldCheck` icon,
+ * the kit's word and the waiting count as its badge. Put it in the entries for an admin
+ * only — the menu closes on the way, as any link row:
+ *
+ *     entries={[…, ...(isAdmin ? [adminMenuEntry({ badge: waiting, labels })] : []), …]}
+ */
+export function adminMenuEntry({
+  href = "/admin",
+  badge,
+  labels = DEFAULT_ADMIN_AREA_LABELS,
+  key = "administration",
+  current,
+}: AdminMenuEntryOptions = {}): TopBarMenuEntry {
+  return {
+    kind: "link",
+    key,
+    to: href,
+    icon: <ShieldCheck className="size-4" aria-hidden />,
+    label: labels.title,
+    trailing: badgeText(badge) === null ? undefined : <WaitingBadge badge={badge} labels={labels} />,
+    current,
+  };
+}
+
+export interface AdminMenuRowProps {
+  /** The admin area. Default `/admin`. */
+  href?: string;
+  /** As {@link AdminMenuEntryOptions.badge}. */
+  badge?: number | null;
+  /** Runs on the way — `HoverMenu`'s `close`. */
+  onNavigate?: () => void;
+  current?: boolean;
+  /** Prop > `<UiKitProvider labels={{ adminArea }}>` > English. */
+  labels?: LabelOverride<AdminAreaLabels>;
+}
+
+/**
+ * The same row as {@link adminMenuEntry} for a menu drawn from `HoverMenu` children: the
+ * `<li>` holding the router-link {@link MenuItem} `TopBarActionMenu` draws for a link
+ * entry, so the two menus look alike.
+ *
+ *     {(close) => <ul>… {isAdmin && <AdminMenuRow badge={waiting} onNavigate={close} />} …</ul>}
+ */
+export function AdminMenuRow({ href = "/admin", badge, onNavigate, current, labels: labelsProp }: AdminMenuRowProps) {
+  const labels = useKitLabels("adminArea", DEFAULT_ADMIN_AREA_LABELS, labelsProp);
+  return (
+    <li>
+      <MenuItem
+        href={href}
+        renderLink={({ href: to, ...p }) => <Link to={to} {...p} />}
+        onClick={onNavigate ? () => onNavigate() : undefined}
+        leading={<ShieldCheck className="size-4" aria-hidden />}
+        trailing={badgeText(badge) === null ? undefined : <WaitingBadge badge={badge} labels={labels} />}
+        current={current}
+      >
+        {labels.title}
+      </MenuItem>
+    </li>
+  );
+}

package/src/shell/app-shell.tsx

@@ -91,6 +91,16 @@ export type AppShellSidebarFooterItem =
       hint?: string;
       /** Leaves the app: a plain `<a target="_blank" rel="noopener noreferrer">`. */
       external?: boolean;
+      /**
+       * 0.42.0 (docs/admin-harmonization.md §6.9): a count of what waits behind the link —
+       * kastlan's "Administration" with its To-triage count. A pill at the end of the
+       * expanded link, a corner dot on the collapsed icon; `0`, `null` or none shows
+       * nothing, and above 99 it reads "99+". The count joins the link's name, in
+       * `badgeLabel`'s words when given ("Administration, 3 waiting").
+       */
+      badge?: number | null;
+      /** The badge's words for a reader — `adminArea.waiting(count)`. Default: the number. */
+      badgeLabel?: string;
     }
   | {
       kind: "links";
@@ -589,6 +599,17 @@ const plainLink: KitLinkComponent = ({ children, ...p }) => <a {...p}>{children}
 const FOOTER_ICON_LINK =
   "flex min-h-8 items-center justify-center rounded-md text-muted hover:bg-hover hover:text-secondary";
 
+/** A footer link's count as drawn: nothing for none, "99+" past 99. */
+function footerBadgeText(badge: number | null | undefined): string | null {
+  if (typeof badge !== "number" || !(badge > 0)) return null;
+  return badge > 99 ? "99+" : String(Math.floor(badge));
+}
+
+/** The count's pill — the solid "count" look of `Chip` (warning, the pending count's
+ *  tone, as `FloatingActionGroup`'s badge), sized for the footer's small text. */
+const FOOTER_BADGE =
+  "inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-warning px-1 text-micro font-semibold leading-4 tabular-nums text-warning-contrast";
+
 /** Calls the link renderer as a component, so a router link's hooks are its own. */
 function RenderedLink({ render, ...props }: KitLinkProps & { render: KitLinkComponent }) {
   return render(props);
@@ -627,12 +648,23 @@ function SidebarFooterItems({
           const to = item.kind === "links" ? (item.to ?? item.links[0]?.to) : item.to;
           if (!to) return null;
           const external = item.kind === "links" ? item.links.find((l) => l.to === to)?.external : item.external;
+          const count = item.kind === "links" ? null : footerBadgeText(item.badge);
+          const spoken = count === null || item.kind === "links" ? null : (item.badgeLabel ?? count);
           return (
             <Tooltip key={item.key} label={item.label} side="end" portal className="block">
               {linkTo(to, external, {
-                "aria-label": item.label,
-                className: FOOTER_ICON_LINK,
-                children: <item.icon className="size-4" aria-hidden />,
+                "aria-label": spoken === null ? item.label : `${item.label}, ${spoken}`,
+                className: cn(FOOTER_ICON_LINK, count !== null && "relative"),
+                children: (
+                  <>
+                    <item.icon className="size-4" aria-hidden />
+                    {count !== null && (
+                      <span aria-hidden data-badge="" className={cn(FOOTER_BADGE, "absolute -top-0.5 end-0.5")}>
+                        {count}
+                      </span>
+                    )}
+                  </>
+                ),
               })}
             </Tooltip>
           );
@@ -655,6 +687,7 @@ function SidebarFooterItems({
             </nav>
           );
         }
+        const count = footerBadgeText(item.badge);
         const link = linkTo(item.to, item.external, {
           className: cn(FOOTER_ICON_LINK, "gap-1.5 text-xs font-medium"),
           children: (
@@ -663,6 +696,14 @@ function SidebarFooterItems({
               {/* Wraps from Large up (text size §10.17, round 0.34 T1): the link is
                   `min-h-8`, so it grows a line rather than cut "Feedb…". */}
               <span className="min-w-0 truncate-until-large">{item.text ?? item.label}</span>
+              {count !== null && (
+                <>
+                  <span aria-hidden data-badge="" className={FOOTER_BADGE}>
+                    {count}
+                  </span>
+                  <span className="sr-only">, {item.badgeLabel ?? count}</span>
+                </>
+              )}
             </>
           ),
         });

package/src/shell/dev-switchers.tsx

@@ -0,0 +1,171 @@
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { FlaskConical, Undo2 } from "lucide-react";
+import { DEFAULT_TOP_BAR_LABELS, useKitLabels, type LabelOverride } from "../i18n/kit-labels";
+import { TopBarActionMenu, type TopBarMenuEntry } from "./topbar-action-menu";
+import { useTopBarPartsLabels, type DevSwitchersLabels } from "./top-bar-parts-labels";
+
+/** Where the role the session started with is kept, unless the app names its own key. */
+export const DEV_ORIGINAL_ROLE_KEY = "ui-kit:dev-original-role";
+
+function readKey(key: string): string | null {
+  try {
+    return sessionStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+
+function writeKey(key: string, value: string | null): void {
+  try {
+    if (value === null) sessionStorage.removeItem(key);
+    else sessionStorage.setItem(key, value);
+  } catch {
+    /* storage blocked: "Back to" lasts as long as this page */
+  }
+}
+
+export interface DevSwitchersProps<R extends string, P extends string> {
+  /** Draw anything at all: the app passes `import.meta.env.DEV`, so a production build
+   *  tree-shakes the switchers with the constant. */
+  enabled: boolean;
+  roles?: readonly R[];
+  /** The role the server enforces now. Named `currentRole`, not `role`, because `role` on
+   *  a JSX element is the ARIA role (as `RoleChip`'s `value`). */
+  currentRole?: R;
+  /** Apply a role — the app calls server-kit's `POST /dev/switch {role}` and re-reads
+   *  `/auth/me` (§2.7, §6.2). */
+  onRole?: (role: R) => void;
+  plans?: readonly P[];
+  /** The plan the server enforces now. Left out (not known yet — kastlan's overview is a
+   *  404 while billing is off), the plan menu still renders, with no row checked; a
+   *  `GET /dev/switch` answers it. */
+  currentPlan?: P;
+  /** Apply a plan — `POST /dev/switch {plan}`, then the overview (§6.3). */
+  onPlan?: (plan: P) => void;
+  /**
+   * The role to offer "Back to {role}" for. Left out, the kit keeps it itself: the role
+   * before the first switch of this browser session, in `sessionStorage` under
+   * `storageKey` — the server answers with the NEW role after a switch, so only the
+   * browser still knows the old one.
+   */
+  originalRole?: R;
+  /** The `sessionStorage` key for the kept role. Default {@link DEV_ORIGINAL_ROLE_KEY};
+   *  an app with several accounts on one browser may scope it per user. */
+  storageKey?: string;
+  /** Billing is off locally: the plan menu says plans change nothing, and stays usable
+   *  (§6.3). */
+  billingOff?: boolean;
+  /** A role's or a plan's words in the menu. Default: the value itself. */
+  roleLabel?: (role: R) => ReactNode;
+  planLabel?: (plan: P) => ReactNode;
+  /** Prop > `<UiKitProvider labels={{ topBarParts: { dev } }}>` > English. */
+  labels?: LabelOverride<DevSwitchersLabels>;
+}
+
+const flask = <FlaskConical className="size-5 text-warning" />;
+
+/** A label's text for a sentence, or the raw value when the label is not text. */
+const textOf = (label: ReactNode, value: string) =>
+  typeof label === "string" || typeof label === "number" ? String(label) : value;
+
+/**
+ * The top bar's local-dev switchers (docs/top-bar-harmonization.md §2.7, §6.2, §6.3): the
+ * role, then the plan, each a menu behind `RoleSwitcher`'s amber flask. Nothing renders
+ * unless `enabled`; either menu renders only with its list and handler.
+ *
+ * The role menu ends in "Back to {role}" once the role differs from the one the session
+ * started with: the dev route needs only a signed-in user, so a switch to a lesser role
+ * can always switch back. With `billingOff` the plan menu notes that plans change nothing
+ * while billing is off.
+ */
+export function DevSwitchers<R extends string, P extends string>({
+  enabled,
+  roles,
+  currentRole: role,
+  onRole,
+  plans,
+  currentPlan: plan,
+  onPlan,
+  originalRole,
+  storageKey = DEV_ORIGINAL_ROLE_KEY,
+  billingOff = false,
+  roleLabel = (r) => r,
+  planLabel = (p) => p,
+  labels: labelsProp,
+}: DevSwitchersProps<R, P>) {
+  const bar = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS);
+  const words = useTopBarPartsLabels(labelsProp ? { dev: labelsProp } : undefined).dev;
+  const [kept, setKept] = useState<string | null>(() => (enabled ? readKey(storageKey) : null));
+  if (!enabled) return null;
+
+  const original = (originalRole ?? kept ?? undefined) as R | undefined;
+
+  const pickRole = (next: R) => {
+    if (originalRole === undefined) {
+      if (next === original) {
+        // Back where the session began: nothing left to go back to.
+        writeKey(storageKey, null);
+        setKept(null);
+      } else if (kept === null && role !== undefined && next !== role) {
+        writeKey(storageKey, role);
+        setKept(role);
+      }
+    }
+    onRole?.(next);
+  };
+
+  const roleMenu =
+    roles && roles.length > 0 && role !== undefined && onRole ? (
+      <TopBarActionMenu
+        icon={flask}
+        aria-label={`${bar.switchRole} · ${bar.role(role)}`}
+        entries={[
+          { kind: "heading", key: "head-role", label: words.roleHeading },
+          ...roles.map(
+            (r): TopBarMenuEntry => ({ key: `role-${r}`, label: roleLabel(r), checked: r === role, onSelect: () => pickRole(r) }),
+          ),
+          ...(original !== undefined && original !== role
+            ? ([
+                { kind: "divider", key: "sep-back" },
+                {
+                  key: "back",
+                  icon: <Undo2 className="size-4" />,
+                  label: words.backTo(textOf(roleLabel(original), original)),
+                  onSelect: () => pickRole(original),
+                },
+              ] satisfies TopBarMenuEntry[])
+            : []),
+        ]}
+      />
+    ) : null;
+
+  const planMenu =
+    plans && plans.length > 0 && onPlan ? (
+      <TopBarActionMenu
+        icon={flask}
+        aria-label={plan !== undefined ? `${words.switchPlan} · ${words.plan(plan)}` : words.switchPlan}
+        entries={[
+          { kind: "heading", key: "head-plan", label: words.planHeading },
+          ...plans.map(
+            (p): TopBarMenuEntry => ({ key: `plan-${p}`, label: planLabel(p), checked: p === plan, onSelect: () => onPlan(p) }),
+          ),
+        ]}
+      >
+        {billingOff
+          ? () => (
+              <li data-dev-billing-off="" className="mt-1 max-w-64 border-t border-subtle px-3 py-2 text-xs text-muted">
+                {words.billingOff}
+              </li>
+            )
+          : undefined}
+      </TopBarActionMenu>
+    ) : null;
+
+  return (
+    <>
+      {roleMenu}
+      {planMenu}
+    </>
+  );
+}