@hadoku/task-ui-components 4.22.1 → 4.22.4

package/src/components/ConnectedSettings.tsx

@@ -4,10 +4,14 @@
  * property of the PERSON (not the app):
  *   - current access tier (read-only, friendly label)
  *   - display name (inline edit → POST /session/name)
- *   - avatar (a link to hadoku.me/account, where it is managed)
+ *   - avatar: picture and character, chosen in place (AvatarPicker)
  *   - global content-visibility level (tiered pill → PUT /prefs/api/v1/content-level)
  *   - switch key (an inline sign-in form, on the site's own sign-in client)
  *
+ * Those are grouped into tabs (Profile, Content, Account), followed by the
+ * app's own: `children` as one "App" tab, `appTabs` as one tab each. The open
+ * tab is remembered per user and per app (useSettingsTab, @wolffm/themes).
+ *
  * "Connected" (parallel to ConnectedThemePicker): it self-wires to the
  * hadoku.me edge-router via same-origin fetches (see lib/settingsClient), so
  * dropping `<ConnectedSettings />` into any app under hadoku.me needs zero
@@ -25,8 +29,10 @@
  * maxLevel comes from the server so the tier ceiling is never trusted from the
  * client.
  */
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react'
+import { useSettingsTab } from '@wolffm/themes'
 import { SettingsIcon } from './ThemeIcons'
+import { AvatarPicker } from './AvatarPicker'
 import {
   deleteOwnAccount,
   prefetchSettings,
@@ -55,14 +61,24 @@ export interface ConnectedSettingsProps {
   name?: string | null
   /** Notify the host (e.g. a "Signed in as …" label) of a rename. */
   onNameChange?: (name: string | null) => void
-  /** App-specific settings rendered as a final section in the same popout, so
-   *  an app with its own preferences keeps ONE unified gear instead of a second
-   *  control. Shown under an "App preferences" divider.
+  /** App-specific settings as ONE tab, labelled "App", after the site's own
+   *  tabs — so an app with its own preferences keeps one unified gear instead
+   *  of a second control. For more than one section, use `appTabs`.
    *
    *  This slot is deliberately unconstrained — put whatever the app needs in
-   *  it. The constraint is only that it lands AFTER the four canonical rows and
-   *  cannot change them. */
+   *  it. The constraint is only that it cannot change the site's tabs. */
   children?: React.ReactNode
+  /** App-specific settings as tabs of their own, after `children`'s "App" tab
+   *  if both are given. `id` is stable and unique within the app: the last-open
+   *  tab is remembered by it. `render` runs only while its tab is open. */
+  appTabs?: AppSettingsTab[]
+}
+
+/** One app-contributed tab in the settings popout. */
+export interface AppSettingsTab {
+  id: string
+  label: string
+  render: () => React.ReactNode
 }
 
 /** Rejects once `signal` aborts, so a call that ignores the signal (an older
@@ -104,7 +120,6 @@ const PASSKEY_DOT: React.CSSProperties = {
  *  inline, so the rule is injected once into the document instead, for the
  *  same reason PASSKEY_DOT is inline. */
 const PASSKEY_PULSE_CLASS = 'settings-popout__btn--pulse'
-const PASSKEY_PULSE_STYLE_ID = 'settings-passkey-pulse'
 const PASSKEY_PULSE_CSS = `
 @keyframes settings-passkey-pulse {
   0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 70%, transparent); }
@@ -118,14 +133,72 @@ const PASSKEY_PULSE_CSS = `
 }
 `
 
-function usePasskeyPulseStyle(active: boolean) {
+/** The tab strip and its panels. Injected for the same reason as the pulse:
+ *  an app's copy of app-header.css predates the tabs until it rebuilds. The
+ *  strip stays pinned while a long tab scrolls, and scrolls sideways itself
+ *  when the tabs outgrow a phone-width panel. */
+const TABS_CSS = `
+.settings-popout__top {
+  position: sticky;
+  top: -16px;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: -16px -16px 0;
+  padding: 16px 16px 0;
+  background: var(--color-bg-card);
+  border-bottom: 1px solid var(--color-border);
+}
+.settings-popout__tabs {
+  display: flex;
+  gap: 2px;
+  margin: 0 -16px -1px;
+  padding: 0 16px;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+.settings-popout__tab {
+  position: relative;
+  flex: none;
+  padding: 6px 10px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font: inherit;
+  font-size: 0.8rem;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.settings-popout__tab:hover {
+  color: var(--color-text);
+}
+.settings-popout__tab[aria-selected='true'] {
+  color: var(--color-text);
+  border-bottom-color: var(--color-primary);
+}
+.settings-popout__tab:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+  border-radius: 6px 6px 0 0;
+}
+.settings-popout__tabpanel {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+`
+
+function useInjectedStyle(id: string, css: string, active: boolean) {
   useEffect(() => {
-    if (!active || document.getElementById(PASSKEY_PULSE_STYLE_ID)) return
+    if (!active || document.getElementById(id)) return
     const el = document.createElement('style')
-    el.id = PASSKEY_PULSE_STYLE_ID
-    el.textContent = PASSKEY_PULSE_CSS
+    el.id = id
+    el.textContent = css
     document.head.appendChild(el)
-  }, [active])
+  }, [id, css, active])
 }
 
 const TIER_LABEL: Record<Tier, string> = {
@@ -141,10 +214,16 @@ export function ConnectedSettings({
   userType: userTypeProp,
   name: nameProp,
   onNameChange,
-  children
+  children,
+  appTabs
 }: ConnectedSettingsProps) {
   const [open, setOpen] = useState(false)
   const rootRef = useRef<HTMLDivElement>(null)
+  const tabIdBase = useId()
+  const tabRefs = useRef(new Map<string, HTMLButtonElement>())
+  const [savedTab, saveTab] = useSettingsTab()
+  // This visit's pick; wins over the saved one while it is still offered.
+  const [pickedTab, setPickedTab] = useState<string | null>(null)
 
   // Identity — from props if supplied, else resolved lazily via whoami().
   const [userType, setUserType] = useState<Tier>(userTypeProp ?? 'public')
@@ -180,6 +259,9 @@ export function ConnectedSettings({
   const passkeyCtl = useRef<AbortController | null>(null)
   const cancelPasskey = useCallback((reason?: string) => passkeyCtl.current?.abort(reason), [])
 
+  // Avatar: the picker loads only when opened, never at mount (AvatarPicker).
+  const [avatarOpen, setAvatarOpen] = useState(false)
+
   // Content level
   const [content, setContent] = useState<ContentLevelState | null>(null)
   const [levelSaving, setLevelSaving] = useState(false)
@@ -206,7 +288,64 @@ export function ConnectedSettings({
     passkeyCount === 0 &&
     !passkeySaved &&
     passkeysSupported()
-  usePasskeyPulseStyle(needsPasskey)
+  useInjectedStyle('settings-passkey-pulse', PASSKEY_PULSE_CSS, needsPasskey)
+  useInjectedStyle('settings-tabs', TABS_CSS, open)
+
+  // The site's own groups first, then the app's. App ids are namespaced so an
+  // app tab called "account" can never collide with the site's.
+  const tabs: { id: string; label: string; dot?: boolean }[] = [
+    { id: 'profile', label: 'Profile' },
+    ...(!resolving && showContentPill ? [{ id: 'content', label: 'Content' }] : []),
+    // The gear's dot asks for a passkey; this one says where Save passkey is.
+    { id: 'account', label: 'Account', dot: needsPasskey },
+    ...(children ? [{ id: 'app:', label: 'App' }] : []),
+    ...(appTabs ?? []).map(t => ({ id: `app:${t.id}`, label: t.label }))
+  ]
+  const tabIds = tabs.map(t => t.id)
+  // Nothing remembered: open on the app's first tab, which is usually why the
+  // gear was clicked inside an app.
+  const defaultTab = tabIds.find(id => id.startsWith('app:')) ?? 'profile'
+  const activeTab =
+    [pickedTab, savedTab].find((id): id is string => id !== null && tabIds.includes(id)) ??
+    defaultTab
+  const appTab = appTabs?.find(t => `app:${t.id}` === activeTab)
+  const tabDomId = (id: string) => `${tabIdBase}tab-${id}`
+  const panelDomId = `${tabIdBase}panel`
+
+  const selectTab = useCallback(
+    (id: string) => {
+      setPickedTab(id)
+      saveTab(id)
+    },
+    [saveTab]
+  )
+
+  // Arrow keys, Home and End move between tabs and open the one they land on
+  // (the ARIA tablist pattern with automatic activation).
+  const onTabKey = (e: React.KeyboardEvent) => {
+    const i = tabIds.indexOf(activeTab)
+    const n = tabIds.length
+    const next =
+      e.key === 'ArrowRight'
+        ? tabIds[(i + 1) % n]
+        : e.key === 'ArrowLeft'
+          ? tabIds[(i - 1 + n) % n]
+          : e.key === 'Home'
+            ? tabIds[0]
+            : e.key === 'End'
+              ? tabIds[n - 1]
+              : undefined
+    if (next === undefined) return
+    e.preventDefault()
+    selectTab(next)
+    tabRefs.current.get(next)?.focus()
+  }
+
+  // A remembered tab past the edge of a narrow strip is scrolled into sight.
+  useEffect(() => {
+    if (open)
+      tabRefs.current.get(activeTab)?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+  }, [open, activeTab])
 
   // Keep local identity in sync when the host controls it via props.
   useEffect(() => {
@@ -415,7 +554,7 @@ export function ConnectedSettings({
   // No caller-supplied class on the root. The four rows below are the
   // platform's, not the app's, and a className here is enough to restyle or
   // hide any of them — which is the drift this component exists to prevent.
-  // Apps extend via `children`, never by reaching into this markup.
+  // Apps extend via `children` and `appTabs`, never by reaching into this markup.
   return (
     <div className="settings-popout" ref={rootRef}>
       <button
@@ -436,357 +575,417 @@ export function ConnectedSettings({
 
       {open && (
         <div className="settings-popout__panel" role="dialog" aria-label="User settings">
-          <div className="settings-popout__header">Settings</div>
-
-          {/* Access tier. While resolving, the state still says 'public' —
-              rendering "Guest" there would be a wrong answer that corrects
-              itself a moment later, which reads exactly like the lag this
-              placeholder exists to remove. */}
-          <section className="settings-popout__row">
-            <span className="settings-popout__label">Access tier</span>
-            {resolving ? (
-              <span className="settings-popout__value">…</span>
-            ) : (
-              <span className={`settings-popout__tier settings-popout__tier--${userType}`}>
-                {TIER_LABEL[userType]}
-              </span>
-            )}
-          </section>
-
-          {/* Display name */}
-          <section className="settings-popout__row">
-            <span className="settings-popout__label">Display name</span>
-            {resolving ? (
-              <span className="settings-popout__value">…</span>
-            ) : editingName ? (
-              <span className="settings-popout__inline">
-                <input
-                  className="settings-popout__input"
-                  value={nameDraft}
-                  maxLength={64}
-                  autoFocus
-                  disabled={nameSaving}
-                  aria-invalid={nameError !== null}
-                  aria-describedby={nameError ? 'settings-popout-name-error' : undefined}
-                  onChange={e => {
-                    setNameDraft(e.target.value)
-                    setNameError(null)
-                  }}
-                  onKeyDown={e => {
-                    if (e.key === 'Enter') {
-                      saveName().catch(reportErr)
-                    }
-                    if (e.key === 'Escape') {
-                      // The edit's Escape, not the popout's (window listener).
-                      e.stopPropagation()
-                      setEditingName(false)
-                      setNameError(null)
-                      setNameDraft(displayName ?? '')
-                    }
-                  }}
-                />
+          <div className="settings-popout__top">
+            <div className="settings-popout__header">Settings</div>
+            <div
+              className="settings-popout__tabs"
+              role="tablist"
+              aria-label="Settings sections"
+              onKeyDown={onTabKey}
+            >
+              {tabs.map(t => (
                 <button
-                  type="button"
-                  className="settings-popout__btn settings-popout__btn--primary"
-                  disabled={nameSaving}
-                  onClick={() => {
-                    saveName().catch(reportErr)
+                  key={t.id}
+                  ref={el => {
+                    if (el) tabRefs.current.set(t.id, el)
+                    else tabRefs.current.delete(t.id)
                   }}
+                  type="button"
+                  role="tab"
+                  id={tabDomId(t.id)}
+                  className="settings-popout__tab"
+                  aria-selected={t.id === activeTab}
+                  aria-controls={panelDomId}
+                  tabIndex={t.id === activeTab ? 0 : -1}
+                  onClick={() => selectTab(t.id)}
                 >
-                  {nameSaving ? '…' : 'Save'}
+                  {t.label}
+                  {t.dot && <span style={PASSKEY_DOT} aria-hidden="true" />}
                 </button>
-                {nameError && (
-                  <span
-                    id="settings-popout-name-error"
-                    className="settings-popout__error"
-                    role="alert"
-                  >
-                    {nameError}
-                  </span>
-                )}
-              </span>
-            ) : (
-              <button
-                type="button"
-                className="settings-popout__value settings-popout__value--editable"
-                aria-label="Edit display name"
-                onClick={() => {
-                  setNameDraft(displayName ?? '')
-                  setEditingName(true)
-                }}
-              >
-                {displayName || 'Unnamed'}
-              </button>
-            )}
-          </section>
-
-          {/* Avatar. Managed on /account (character, Discord, Steam, upload),
-              so this is only the way there: no thumbnail, because drawing one
-              would cost every app a request at mount. A new tab, so following
-              it never takes anyone out of a game mid-match. Hidden for public
-              callers, like the content pill: /account needs a session. */}
-          {!resolving && userType !== 'public' && (
-            <section className="settings-popout__row">
-              <span className="settings-popout__label">Avatar</span>
-              <a className="settings-popout__btn" href="/account" target="_blank" rel="noopener">
-                Change
-              </a>
-            </section>
-          )}
-
-          {/* Content visibility level. Held back until the first-open fetch
-              settles, so it lands in the same paint as the tier and name
-              rather than a round trip behind them. `content` is fetched
-              concurrently with whoami(), so by then it is already here. */}
-          {!resolving && showContentPill && (
-            <section className="settings-popout__row settings-popout__row--stack">
-              <span className="settings-popout__label">Content visibility</span>
-              {content ? (
-                <>
-                  <div
-                    className="settings-popout__pill"
-                    role="radiogroup"
-                    aria-label="Content visibility level"
-                  >
-                    {Array.from({ length: content.maxLevel }, (_, i) => i + 1).map(lvl => (
+              ))}
+            </div>
+          </div>
+
+          <div
+            className="settings-popout__tabpanel"
+            role="tabpanel"
+            id={panelDomId}
+            aria-labelledby={tabDomId(activeTab)}
+          >
+            {activeTab === 'profile' && (
+              <>
+                {/* Access tier. While resolving, the state still says 'public' —
+              rendering "Guest" there would be a wrong answer that corrects
+              itself a moment later, which reads exactly like the lag this
+              placeholder exists to remove. */}
+                <section className="settings-popout__row">
+                  <span className="settings-popout__label">Access tier</span>
+                  {resolving ? (
+                    <span className="settings-popout__value">…</span>
+                  ) : (
+                    <span className={`settings-popout__tier settings-popout__tier--${userType}`}>
+                      {TIER_LABEL[userType]}
+                    </span>
+                  )}
+                </section>
+
+                {/* Display name */}
+                <section className="settings-popout__row">
+                  <span className="settings-popout__label">Display name</span>
+                  {resolving ? (
+                    <span className="settings-popout__value">…</span>
+                  ) : editingName ? (
+                    <span className="settings-popout__inline">
+                      <input
+                        className="settings-popout__input"
+                        value={nameDraft}
+                        maxLength={64}
+                        autoFocus
+                        disabled={nameSaving}
+                        aria-invalid={nameError !== null}
+                        aria-describedby={nameError ? 'settings-popout-name-error' : undefined}
+                        onChange={e => {
+                          setNameDraft(e.target.value)
+                          setNameError(null)
+                        }}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter') {
+                            saveName().catch(reportErr)
+                          }
+                          if (e.key === 'Escape') {
+                            // The edit's Escape, not the popout's (window listener).
+                            e.stopPropagation()
+                            setEditingName(false)
+                            setNameError(null)
+                            setNameDraft(displayName ?? '')
+                          }
+                        }}
+                      />
                       <button
-                        key={lvl}
                         type="button"
-                        role="radio"
-                        aria-checked={lvl === content.level}
-                        aria-label={`Level ${lvl}`}
-                        className={`settings-popout__seg${
-                          lvl <= content.level ? ' settings-popout__seg--filled' : ''
-                        }`}
-                        disabled={levelSaving}
+                        className="settings-popout__btn settings-popout__btn--primary"
+                        disabled={nameSaving}
                         onClick={() => {
-                          pickLevel(lvl).catch(reportErr)
+                          saveName().catch(reportErr)
                         }}
                       >
-                        {lvl}
+                        {nameSaving ? '…' : 'Save'}
                       </button>
-                    ))}
-                  </div>
-                  <span className="settings-popout__hint">
-                    Higher levels reveal more mature content across apps. Level 1 is
-                    safe-for-everyone.
-                  </span>
-                </>
-              ) : (
-                // Not "Loading…" — the fetch has already settled by the time
-                // this section renders at all, so a null here means it failed.
-                <span className="settings-popout__hint">Currently unavailable.</span>
-              )}
-            </section>
-          )}
-
-          {/* Switch key. Signs in inline through the SITE's sign-in client
-              (the /auth page's own code path), never a post of ours. A real
-              <form> with a username + current-password pair, so password
-              managers offer and save the key. */}
-          {keyFormOpen ? (
-            <section className="settings-popout__row settings-popout__row--stack">
-              <form
-                className="settings-popout__key-form"
-                onSubmit={e => {
-                  e.preventDefault()
-                  submitKey().catch(reportErr)
-                }}
-              >
-                <input
-                  type="text"
-                  name="username"
-                  autoComplete="username"
-                  value="hadoku"
-                  readOnly
-                  hidden
-                />
-                <label className="settings-popout__label" htmlFor="settings-popout-key">
-                  Access key
-                </label>
-                <span className="settings-popout__inline">
-                  <input
-                    id="settings-popout-key"
-                    className="settings-popout__input"
-                    type="password"
-                    name="password"
-                    autoComplete="current-password"
-                    autoCapitalize="none"
-                    spellCheck={false}
-                    autoFocus
-                    value={keyDraft}
-                    disabled={keyBusy}
-                    aria-invalid={keyError !== null}
-                    aria-describedby={keyError ? 'settings-popout-key-error' : undefined}
-                    onChange={e => setKeyDraft(e.target.value)}
-                  />
-                  <button
-                    type="submit"
-                    className="settings-popout__btn settings-popout__btn--primary"
-                    disabled={keyBusy}
-                  >
-                    {keyBusy ? 'Signing in…' : 'Sign in'}
-                  </button>
-                </span>
-                {passkeysSupported() && (
-                  <span className="settings-popout__inline">
+                      {nameError && (
+                        <span
+                          id="settings-popout-name-error"
+                          className="settings-popout__error"
+                          role="alert"
+                        >
+                          {nameError}
+                        </span>
+                      )}
+                    </span>
+                  ) : (
                     <button
                       type="button"
-                      className="settings-popout__btn"
-                      disabled={keyBusy}
+                      className="settings-popout__value settings-popout__value--editable"
+                      aria-label="Edit display name"
                       onClick={() => {
-                        signInWithPasskey().catch(reportErr)
+                        setNameDraft(displayName ?? '')
+                        setEditingName(true)
                       }}
                     >
-                      {passkeyMode === 'signin' ? 'Waiting for passkey…' : 'Use a passkey'}
+                      {displayName || 'Unnamed'}
                     </button>
-                  </span>
+                  )}
+                </section>
+
+                {/* Avatar: picture and character, chosen in place (AvatarPicker).
+              Collapsed until Change, so opening the gear costs no request and no
+              page load reads the avatar. Hidden for public callers, like the
+              content pill: an avatar needs a session. */}
+                {!resolving && userType !== 'public' && (
+                  <section className="settings-popout__row settings-popout__row--stack">
+                    <span className="settings-popout__inline">
+                      <span className="settings-popout__label settings-popout__label--grow">
+                        Avatar
+                      </span>
+                      <button
+                        type="button"
+                        className="settings-popout__btn"
+                        aria-expanded={avatarOpen}
+                        onClick={() => setAvatarOpen(v => !v)}
+                      >
+                        {avatarOpen ? 'Done' : 'Change'}
+                      </button>
+                    </span>
+                    {avatarOpen && <AvatarPicker />}
+                  </section>
                 )}
-                {/* Cancel on a line of its own: in the row it would slide under
-                    the pointer, and a double click would cancel what it started. */}
-                {passkeyMode === 'signin' && (
-                  <span className="settings-popout__inline">
-                    <button
-                      type="button"
-                      className="settings-popout__btn"
-                      onClick={() => cancelPasskey()}
+              </>
+            )}
+
+            {/* Content visibility level. Held back until the first-open fetch
+              settles, so it lands in the same paint as the tier and name
+              rather than a round trip behind them. `content` is fetched
+              concurrently with whoami(), so by then it is already here. */}
+            {activeTab === 'content' && (
+              <section className="settings-popout__row settings-popout__row--stack">
+                <span className="settings-popout__label">Content visibility</span>
+                {content ? (
+                  <>
+                    <div
+                      className="settings-popout__pill"
+                      role="radiogroup"
+                      aria-label="Content visibility level"
                     >
-                      Cancel
-                    </button>
-                  </span>
-                )}
-                {keyError && (
-                  <span
-                    id="settings-popout-key-error"
-                    className="settings-popout__error"
-                    role="alert"
-                  >
-                    {keyError}
-                  </span>
+                      {Array.from({ length: content.maxLevel }, (_, i) => i + 1).map(lvl => (
+                        <button
+                          key={lvl}
+                          type="button"
+                          role="radio"
+                          aria-checked={lvl === content.level}
+                          aria-label={`Level ${lvl}`}
+                          className={`settings-popout__seg${
+                            lvl <= content.level ? ' settings-popout__seg--filled' : ''
+                          }`}
+                          disabled={levelSaving}
+                          onClick={() => {
+                            pickLevel(lvl).catch(reportErr)
+                          }}
+                        >
+                          {lvl}
+                        </button>
+                      ))}
+                    </div>
+                    <span className="settings-popout__hint">
+                      Higher levels reveal more mature content across apps. Level 1 is
+                      safe-for-everyone.
+                    </span>
+                  </>
+                ) : (
+                  // Not "Loading…" — the fetch has already settled by the time
+                  // this section renders at all, so a null here means it failed.
+                  <span className="settings-popout__hint">Currently unavailable.</span>
                 )}
-              </form>
-            </section>
-          ) : (
-            <section className="settings-popout__row settings-popout__row--stack">
-              <span className="settings-popout__inline">
-                <span className="settings-popout__label settings-popout__label--grow">
-                  Access key
-                </span>
-                {/* Signed-in people only: the site refuses to save one for anyone else. */}
-                {!resolving && userType !== 'public' && passkeysSupported() && (
-                  <button
-                    type="button"
-                    className={`settings-popout__btn${needsPasskey ? ` settings-popout__btn--primary ${PASSKEY_PULSE_CLASS}` : ''}`}
-                    disabled={passkeyMode !== null || passkeySaved}
-                    onClick={() => {
-                      savePasskey().catch(reportErr)
-                    }}
-                  >
-                    {passkeySaved
-                      ? 'Passkey saved'
-                      : passkeyMode === 'save'
-                        ? 'Saving…'
-                        : 'Save passkey'}
-                  </button>
+              </section>
+            )}
+
+            {/* Switch key. Signs in inline through the SITE's sign-in client
+              (the /auth page's own code path), never a post of ours. A real
+              <form> with a username + current-password pair, so password
+              managers offer and save the key. */}
+            {activeTab === 'account' && (
+              <>
+                {keyFormOpen ? (
+                  <section className="settings-popout__row settings-popout__row--stack">
+                    <form
+                      className="settings-popout__key-form"
+                      onSubmit={e => {
+                        e.preventDefault()
+                        submitKey().catch(reportErr)
+                      }}
+                    >
+                      <input
+                        type="text"
+                        name="username"
+                        autoComplete="username"
+                        value="hadoku"
+                        readOnly
+                        hidden
+                      />
+                      <label className="settings-popout__label" htmlFor="settings-popout-key">
+                        Access key
+                      </label>
+                      <span className="settings-popout__inline">
+                        <input
+                          id="settings-popout-key"
+                          className="settings-popout__input"
+                          type="password"
+                          name="password"
+                          autoComplete="current-password"
+                          autoCapitalize="none"
+                          spellCheck={false}
+                          autoFocus
+                          value={keyDraft}
+                          disabled={keyBusy}
+                          aria-invalid={keyError !== null}
+                          aria-describedby={keyError ? 'settings-popout-key-error' : undefined}
+                          onChange={e => setKeyDraft(e.target.value)}
+                        />
+                        <button
+                          type="submit"
+                          className="settings-popout__btn settings-popout__btn--primary"
+                          disabled={keyBusy}
+                        >
+                          {keyBusy ? 'Signing in…' : 'Sign in'}
+                        </button>
+                      </span>
+                      {passkeysSupported() && (
+                        <span className="settings-popout__inline">
+                          <button
+                            type="button"
+                            className="settings-popout__btn"
+                            disabled={keyBusy}
+                            onClick={() => {
+                              signInWithPasskey().catch(reportErr)
+                            }}
+                          >
+                            {passkeyMode === 'signin' ? 'Waiting for passkey…' : 'Use a passkey'}
+                          </button>
+                        </span>
+                      )}
+                      {/* Cancel on a line of its own: in the row it would slide under
+                    the pointer, and a double click would cancel what it started. */}
+                      {passkeyMode === 'signin' && (
+                        <span className="settings-popout__inline">
+                          <button
+                            type="button"
+                            className="settings-popout__btn"
+                            onClick={() => cancelPasskey()}
+                          >
+                            Cancel
+                          </button>
+                        </span>
+                      )}
+                      {keyError && (
+                        <span
+                          id="settings-popout-key-error"
+                          className="settings-popout__error"
+                          role="alert"
+                        >
+                          {keyError}
+                        </span>
+                      )}
+                    </form>
+                  </section>
+                ) : (
+                  <section className="settings-popout__row settings-popout__row--stack">
+                    <span className="settings-popout__inline">
+                      <span className="settings-popout__label settings-popout__label--grow">
+                        Access key
+                      </span>
+                      {/* Signed-in people only: the site refuses to save one for anyone else. */}
+                      {!resolving && userType !== 'public' && passkeysSupported() && (
+                        <button
+                          type="button"
+                          className={`settings-popout__btn${needsPasskey ? ` settings-popout__btn--primary ${PASSKEY_PULSE_CLASS}` : ''}`}
+                          disabled={passkeyMode !== null || passkeySaved}
+                          onClick={() => {
+                            savePasskey().catch(reportErr)
+                          }}
+                        >
+                          {passkeySaved
+                            ? 'Passkey saved'
+                            : passkeyMode === 'save'
+                              ? 'Saving…'
+                              : 'Save passkey'}
+                        </button>
+                      )}
+                      <button
+                        type="button"
+                        className="settings-popout__btn"
+                        disabled={passkeyMode === 'save'}
+                        onClick={openKeyForm}
+                      >
+                        Switch key
+                      </button>
+                    </span>
+                    {/* Its own line, so nothing moves under a double click. */}
+                    {passkeyMode === 'save' && (
+                      <span className="settings-popout__inline">
+                        <button
+                          type="button"
+                          className="settings-popout__btn"
+                          onClick={() => cancelPasskey()}
+                        >
+                          Cancel
+                        </button>
+                      </span>
+                    )}
+                    {passkeyError && (
+                      <span className="settings-popout__error" role="alert">
+                        {passkeyError}
+                      </span>
+                    )}
+                  </section>
                 )}
-                <button
-                  type="button"
-                  className="settings-popout__btn"
-                  disabled={passkeyMode === 'save'}
-                  onClick={openKeyForm}
-                >
-                  Switch key
-                </button>
-              </span>
-              {/* Its own line, so nothing moves under a double click. */}
-              {passkeyMode === 'save' && (
-                <span className="settings-popout__inline">
-                  <button
-                    type="button"
-                    className="settings-popout__btn"
-                    onClick={() => cancelPasskey()}
-                  >
-                    Cancel
-                  </button>
-                </span>
-              )}
-              {passkeyError && (
-                <span className="settings-popout__error" role="alert">
-                  {passkeyError}
-                </span>
-              )}
-            </section>
-          )}
-
-          {/* A self-made account (member) can delete itself. The confirm is a
+
+                {/* A self-made account (member) can delete itself. The confirm is a
               separate button on its own line, so a double click on Delete
               never confirms. */}
-          {!resolving && userType === 'member' && (
-            <section className="settings-popout__row settings-popout__row--stack">
-              <span className="settings-popout__inline">
-                <span className="settings-popout__label settings-popout__label--grow">Account</span>
-                {deleteStage === 'idle' ? (
-                  <button
-                    type="button"
-                    className="settings-popout__btn"
-                    onClick={() => {
-                      setDeleteError(null)
-                      setDeleteStage('confirm')
-                    }}
-                  >
-                    Delete account
-                  </button>
-                ) : (
-                  <button
-                    type="button"
-                    className="settings-popout__btn"
-                    disabled={deleteStage === 'busy'}
-                    onClick={() => setDeleteStage('idle')}
-                  >
-                    Keep
-                  </button>
-                )}
-              </span>
-              {deleteStage !== 'idle' && (
-                <span className="settings-popout__inline">
-                  <button
-                    type="button"
-                    className="settings-popout__btn settings-popout__btn--primary"
-                    disabled={deleteStage === 'busy'}
-                    onClick={() => {
-                      setDeleteStage('busy')
-                      deleteOwnAccount()
-                        .then(deleted => {
-                          if (!deleted) {
-                            setDeleteError('Account not deleted')
+                {!resolving && userType === 'member' && (
+                  <section className="settings-popout__row settings-popout__row--stack">
+                    <span className="settings-popout__inline">
+                      <span className="settings-popout__label settings-popout__label--grow">
+                        Account
+                      </span>
+                      {deleteStage === 'idle' ? (
+                        <button
+                          type="button"
+                          className="settings-popout__btn"
+                          onClick={() => {
+                            setDeleteError(null)
                             setDeleteStage('confirm')
-                            return
-                          }
-                          localStorage.removeItem('hadoku_session_id')
-                          localStorage.removeItem('hadoku_user_type')
-                          window.location.assign('/')
-                        })
-                        .catch(reportErr)
-                    }}
-                  >
-                    {deleteStage === 'busy' ? 'Deleting…' : 'Delete for good'}
-                  </button>
-                </span>
-              )}
-              {deleteError && (
-                <span className="settings-popout__error" role="alert">
-                  {deleteError}
-                </span>
-              )}
-            </section>
-          )}
-
-          {/* App-specific settings (optional) — same popout, one gear. */}
-          {children && (
-            <section className="settings-popout__row settings-popout__row--stack settings-popout__app">
-              {children}
-            </section>
-          )}
+                          }}
+                        >
+                          Delete account
+                        </button>
+                      ) : (
+                        <button
+                          type="button"
+                          className="settings-popout__btn"
+                          disabled={deleteStage === 'busy'}
+                          onClick={() => setDeleteStage('idle')}
+                        >
+                          Keep
+                        </button>
+                      )}
+                    </span>
+                    {deleteStage !== 'idle' && (
+                      <span className="settings-popout__inline">
+                        <button
+                          type="button"
+                          className="settings-popout__btn settings-popout__btn--primary"
+                          disabled={deleteStage === 'busy'}
+                          onClick={() => {
+                            setDeleteStage('busy')
+                            deleteOwnAccount()
+                              .then(deleted => {
+                                if (!deleted) {
+                                  setDeleteError('Account not deleted')
+                                  setDeleteStage('confirm')
+                                  return
+                                }
+                                localStorage.removeItem('hadoku_session_id')
+                                localStorage.removeItem('hadoku_user_type')
+                                window.location.assign('/')
+                              })
+                              .catch(reportErr)
+                          }}
+                        >
+                          {deleteStage === 'busy' ? 'Deleting…' : 'Delete for good'}
+                        </button>
+                      </span>
+                    )}
+                    {deleteError && (
+                      <span className="settings-popout__error" role="alert">
+                        {deleteError}
+                      </span>
+                    )}
+                  </section>
+                )}
+              </>
+            )}
+
+            {/* App-specific settings (optional) — same popout, one gear. */}
+            {activeTab === 'app:' && (
+              <section className="settings-popout__row settings-popout__row--stack">
+                {children}
+              </section>
+            )}
+            {appTab && (
+              <section className="settings-popout__row settings-popout__row--stack">
+                {appTab.render()}
+              </section>
+            )}
+          </div>
         </div>
       )}
     </div>