Add the account area and account-synced Appearance preferences

Stage 1 PR 6 (ADR 0062). /account shows who is signed in; /account/appearance
chooses System, Light, or Dark and reduced motion (System, Reduce, Allow).

- Core: ekklesia_core_user_preference, one typed, CHECK-constrained,
  nullable column per preference (null = never chosen), migration
  0008_user_preferences (additive), @ekklesia/core/account store, and the
  authenticated-baseline permission core.account.self.manage.
- API: GET /api/v1/account (name, email, preferences) and partial
  PATCH /api/v1/account/preferences, self-only by construction: no user id
  is accepted anywhere; trusted Origin and body limit on the mutation.
- Shell: the account control shows name, email, and initials (never the
  unvetted image URL) and offers Account, Appearance, Sign out; native
  radio groups apply a choice at once through the ADR 0060 controller and
  save it; the server's answer wins and a failed save reverts.
- First paint: a classic, same-origin, render-blocking appearance.js in
  <head> applies a two-word localStorage cache before paint (no inline
  script, CSP unchanged). The account replaces the cache on every load,
  sign-out clears it, and other tabs follow via the storage event.
- Deploy smoke: real-Chromium checks for light/dark, OS emulation,
  overrides, reload persistence, pre-paint, Shadow DOM modules, reduced
  motion, the display staying light, and phone width; the browser
  container gets a 512 MiB /dev/shm so a long session no longer fails
  requests with ERR_INSUFFICIENT_RESOURCES.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

surfaces/shell/src/browser/AccountMenu.tsx

@@ -7,22 +7,43 @@ import {
   useRef,
   useState,
 } from "react";
+import type { DashboardDestination } from "../dashboard-routes.js";
+import type { HostAccount } from "../host-protocol.js";
+import { AccountAvatar, accountDisplayName } from "./AccountAvatar.js";
+import { DashboardLink } from "./DashboardLink.js";
+import type { HostHistory } from "./host-history.js";
 import { useNavTooltip } from "./NavTooltip.js";
 import { controlHeight, type NavigationPresentation } from "./ShellNavigation.js";
 import { ShellIcon, type ShellIconName } from "./shell-icons.js";
 
 export interface AccountMenuProps {
   readonly presentation: NavigationPresentation;
+  readonly history: HostHistory;
+  /** Who is signed in, or `"unavailable"` when their account could not be loaded: the control then
+   * names the area rather than the person, and still offers every destination. */
+  readonly account: HostAccount | "unavailable";
   readonly onSignOut: () => void;
+  /** Called after choosing a destination, so a drawer around the menu can close. */
+  readonly onNavigate?: () => void;
 }
 
-interface AccountAction {
-  readonly id: string;
-  readonly label: string;
-  readonly icon: ShellIconName;
-  readonly testId: string;
-  readonly run: () => void;
-}
+type AccountAction =
+  | {
+      readonly kind: "link";
+      readonly id: string;
+      readonly label: string;
+      readonly icon: ShellIconName;
+      readonly testId: string;
+      readonly to: DashboardDestination;
+    }
+  | {
+      readonly kind: "button";
+      readonly id: string;
+      readonly label: string;
+      readonly icon: ShellIconName;
+      readonly testId: string;
+      readonly run: () => void;
+    };
 
 /**
  * The signed-in person's account control, at the bottom of the navigation (DESIGN.md §4.5).
@@ -33,21 +54,23 @@ interface AccountAction {
  * returns focus to the trigger; Tab or a pointer press outside closes it and leaves focus where it
  * went.
  *
- * It offers **only actions that work today** — Sign out. Profile, personal preferences, and
- * appearance belong here (DESIGN.md §4.5, §9.2) and arrive with the account pages; until then there
- * is no dead link to `/account`. The shell knows the person only by an opaque user id
- * (`/api/v1/principal`), which is never shown, so the control names the area rather than the person.
+ * It shows **who is signed in** — their name and email beside their initials (ADR 0062) — and
+ * offers only destinations that work: Account (`/account`), Appearance (`/account/appearance`), and
+ * Sign out. Account and Appearance are real links, so they open in a new tab like any other. When
+ * the account cannot be loaded, the control names the area ("Your account") rather than the person.
  */
 export function AccountMenu(props: AccountMenuProps): ReactElement {
   const [open, setOpen] = useState(false);
   const [initialFocus, setInitialFocus] = useState<"first" | "last">("first");
   const wrapperRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
-  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const itemRefs = useRef<(HTMLElement | null)[]>([]);
   const menuId = useId();
   const triggerId = useId();
   const { collapsed } = props.presentation;
-  const { tooltip, triggerProps } = useNavTooltip("Your account", collapsed && !open);
+  const account = props.account === "unavailable" ? undefined : props.account;
+  const name = account ? accountDisplayName(account) : "Your account";
+  const { tooltip, triggerProps } = useNavTooltip(name, collapsed && !open);
 
   const close = useCallback((returnFocus: boolean) => {
     setOpen(false);
@@ -57,9 +80,26 @@ export function AccountMenu(props: AccountMenuProps): ReactElement {
   }, []);
 
   const actions: readonly AccountAction[] = [
+    {
+      icon: "account",
+      id: "account",
+      kind: "link",
+      label: "Account",
+      testId: "host-account-link",
+      to: { kind: "account" },
+    },
+    {
+      icon: "appearance",
+      id: "appearance",
+      kind: "link",
+      label: "Appearance",
+      testId: "host-appearance-link",
+      to: { kind: "account-section", section: "appearance" },
+    },
     {
       icon: "signOut",
       id: "sign-out",
+      kind: "button",
       label: "Sign out",
       run: () => {
         setOpen(false);
@@ -78,7 +118,7 @@ export function AccountMenu(props: AccountMenuProps): ReactElement {
     if (!open) {
       return;
     }
-    const items = itemRefs.current.filter((item): item is HTMLButtonElement => item !== null);
+    const items = itemRefs.current.filter((item): item is HTMLElement => item !== null);
     (initialFocus === "last" ? items.at(-1) : items[0])?.focus();
   }, [initialFocus, open]);
 
@@ -98,8 +138,8 @@ export function AccountMenu(props: AccountMenuProps): ReactElement {
   }, [open]);
 
   const onMenuKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
-    const items = itemRefs.current.filter((item): item is HTMLButtonElement => item !== null);
-    const index = items.indexOf(event.target as HTMLButtonElement);
+    const items = itemRefs.current.filter((item): item is HTMLElement => item !== null);
+    const index = items.indexOf(event.target as HTMLElement);
     const focusAt = (next: number): void => {
       event.preventDefault();
       items[(next + items.length) % items.length]?.focus();
@@ -125,32 +165,68 @@ export function AccountMenu(props: AccountMenuProps): ReactElement {
   return (
     <div ref={wrapperRef}>
       {open ? (
-        <div
-          aria-labelledby={triggerId}
-          className="ek-shell-menu"
-          data-testid="host-account-menu-list"
-          id={menuId}
-          onKeyDown={onMenuKeyDown}
-          role="menu"
-        >
-          {actions.map((action, index) => (
-            <button
-              className="ek-button ek-focusable ek-button--quiet ek-shell-menu__item"
-              data-testid={action.testId}
-              key={action.id}
-              onClick={action.run}
-              ref={(element) => {
+        <div className="ek-shell-menu" data-testid="host-account-menu-popover">
+          {account ? (
+            <div className="ek-shell-menu__identity" data-testid="host-account-identity">
+              <span className="ek-shell-menu__identity-name">{accountDisplayName(account)}</span>
+              {account.name.trim().length > 0 ? (
+                <span className="ek-shell-menu__identity-email">{account.email}</span>
+              ) : undefined}
+            </div>
+          ) : undefined}
+          <div
+            aria-labelledby={triggerId}
+            className="ek-shell-menu__items"
+            data-testid="host-account-menu-list"
+            id={menuId}
+            onKeyDown={onMenuKeyDown}
+            role="menu"
+          >
+            {actions.map((action, index) => {
+              const ref = (element: HTMLElement | null): void => {
                 itemRefs.current[index] = element;
-              }}
-              role="menuitem"
-              style={{ minHeight: controlHeight(props.presentation) }}
-              tabIndex={-1}
-              type="button"
-            >
-              <ShellIcon name={action.icon} />
-              {action.label}
-            </button>
-          ))}
+              };
+              const content = (
+                <>
+                  <ShellIcon name={action.icon} />
+                  {action.label}
+                </>
+              );
+              return action.kind === "link" ? (
+                <DashboardLink
+                  className="ek-shell-menu__item"
+                  data-testid={action.testId}
+                  history={props.history}
+                  key={action.id}
+                  onNavigate={() => {
+                    setOpen(false);
+                    props.onNavigate?.();
+                  }}
+                  ref={ref}
+                  role="menuitem"
+                  style={{ minHeight: controlHeight(props.presentation) }}
+                  tabIndex={-1}
+                  to={action.to}
+                >
+                  {content}
+                </DashboardLink>
+              ) : (
+                <button
+                  className="ek-button ek-focusable ek-button--quiet ek-shell-menu__item"
+                  data-testid={action.testId}
+                  key={action.id}
+                  onClick={action.run}
+                  ref={ref}
+                  role="menuitem"
+                  style={{ minHeight: controlHeight(props.presentation) }}
+                  tabIndex={-1}
+                  type="button"
+                >
+                  {content}
+                </button>
+              );
+            })}
+          </div>
         </div>
       ) : undefined}
       <button
@@ -176,9 +252,14 @@ export function AccountMenu(props: AccountMenuProps): ReactElement {
           }
         }}
       >
-        <ShellIcon name="account" />
-        <span className={collapsed ? "ek-shell-visually-hidden" : "ek-shell-nav-item__label"}>
-          Your account
+        {account ? <AccountAvatar account={account} /> : <ShellIcon name="account" />}
+        <span className={collapsed ? "ek-shell-visually-hidden" : "ek-shell-account-trigger__copy"}>
+          <span className="ek-shell-nav-item__label">{name}</span>
+          {account && !collapsed && account.name.trim().length > 0 ? (
+            <span className="ek-shell-nav-item__label ek-shell-account-trigger__email">
+              {account.email}
+            </span>
+          ) : undefined}
         </span>
       </button>
       {tooltip}