@hadoku/task-ui-components 4.22.0 → 4.22.3

package/dist/vendor/wolffm/prefs-client/avatar.js

@@ -0,0 +1,112 @@
+var PREFS_API_BASE = "https://hadoku.me/prefs";
+var LINK_MESSAGE_TYPE = "hadoku-avatar-link";
+var LINK_WINDOW_NAME = "hadoku-avatar-link";
+var LINK_POPUP_MARK = "hadoku-avatar-link-popup";
+function markPopup(on) {
+  try {
+    if (on) sessionStorage.setItem(LINK_POPUP_MARK, "1");
+    else sessionStorage.removeItem(LINK_POPUP_MARK);
+  } catch {
+  }
+}
+var AvatarError = class extends Error {
+  constructor(status, message) {
+    super(message);
+    this.status = status;
+    this.name = "AvatarError";
+  }
+  status;
+};
+async function readJson(res) {
+  if (!res.ok) {
+    const body = await res.json().catch(() => null);
+    throw new AvatarError(res.status, body?.message ?? `HTTP ${res.status}`);
+  }
+  return await res.json();
+}
+function createAvatarClient(opts = {}) {
+  const base = `${opts.baseUrl ?? PREFS_API_BASE}/api/v1/_avatar`;
+  const f = opts.fetch ?? fetch;
+  const call = (path, init = {}) => f(`${base}${path}`, { credentials: "include", ...init }).then(readJson);
+  const send = (path, method, body) => call(path, {
+    method,
+    ...body === void 0 ? {} : { headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }
+  });
+  const getSettings = () => call("");
+  async function linkInPopup(provider) {
+    markPopup(true);
+    const popup = window.open("about:blank", LINK_WINDOW_NAME, "popup,width=520,height=760");
+    markPopup(false);
+    if (!popup)
+      throw new AvatarError(0, "The sign-in window was blocked: allow pop-ups for hadoku.me");
+    let authorizeUrl;
+    try {
+      ({ authorizeUrl } = await send(`/link/${provider}`, "POST", {}));
+    } catch (err) {
+      popup.close();
+      throw err;
+    }
+    popup.location.href = authorizeUrl;
+    return new Promise((resolve, reject) => {
+      const channel = new BroadcastChannel(LINK_MESSAGE_TYPE);
+      let settled = false;
+      const finish = (failure) => {
+        if (settled) return;
+        settled = true;
+        channel.close();
+        clearInterval(closedPoll);
+        clearTimeout(giveUp);
+        if (failure) reject(new AvatarError(400, failure));
+        else getSettings().then(resolve, reject);
+      };
+      channel.onmessage = (e) => {
+        if (e.data?.type !== LINK_MESSAGE_TYPE) return;
+        finish(e.data.ok ? void 0 : e.data.error);
+      };
+      const closedPoll = setInterval(() => {
+        if (!popup.closed) return;
+        clearInterval(closedPoll);
+        setTimeout(() => finish(), 1500);
+      }, 500);
+      const giveUp = setTimeout(() => finish(), 10 * 60 * 1e3);
+    });
+  }
+  return {
+    /** The caller's settings, including the resolved avatar. */
+    get: getSettings,
+    /** Pick a source. 409 when it is not available (not linked, nothing uploaded). */
+    choose: (source) => send("", "PUT", { source }),
+    /** Set the source, the character, or both in one write. */
+    update: (u) => send("", "PUT", u),
+    /**
+     * Begin linking. Navigate the browser to the returned URL; the provider
+     * returns it to hadoku.me/account/link/callback, which completes the link.
+     * Call this only from the user's own click: nothing is fetched from
+     * Discord or Steam before they ask.
+     */
+    startLink: (provider) => send(`/link/${provider}`, "POST", {}),
+    /**
+     * Link in a popup, so the page never navigates. Call it straight from the
+     * click handler: the window is opened before the first await, which is
+     * what popup blockers allow. Resolves with fresh settings once the popup
+     * reports back or is closed (closing is not an error: the settings say
+     * whether the link landed). Rejects only when the popup could not open
+     * or the link could not start.
+     */
+    linkInPopup: (provider) => linkInPopup(provider),
+    /** Finish a link from the callback page's query string (`location.search`). */
+    completeLink: (query) => send("/link/complete", "POST", { query: query.replace(/^\?/, "") }),
+    /** Delete the linked id and its cached avatar URL. */
+    unlink: (provider) => send(`/link/${provider}`, "DELETE"),
+    /** Upload an image (PNG, JPEG, WebP or GIF). It is re-encoded and becomes the chosen source. */
+    upload: (image) => call("/upload", { method: "POST", body: image }),
+    removeUpload: () => send("/upload", "DELETE")
+  };
+}
+export {
+  AvatarError,
+  LINK_MESSAGE_TYPE,
+  LINK_POPUP_MARK,
+  createAvatarClient
+};
+//# sourceMappingURL=avatar.js.map

package/dist/vendor/wolffm/prefs-client/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sources":["../../../../../node_modules/.pnpm/@wolffm+prefs-client@1.1.6_react@19.2.8_zod@4.1.12/node_modules/@wolffm/prefs-client/dist/avatar.js"],"sourcesContent":["// src/constants.ts\nvar PREFS_API_BASE = \"https://hadoku.me/prefs\";\n\n// src/avatar-contract.ts\nvar AVATAR_SOURCES = [\"sprite\", \"discord\", \"steam\", \"upload\"];\nvar LINK_PROVIDERS = [\"discord\", \"steam\"];\nvar LINK_MESSAGE_TYPE = \"hadoku-avatar-link\";\nvar RESOLVE_MAX_IDS = 100;\nvar SPRITE_ID_PATTERN = /^[a-z][a-z0-9-]{0,31}$/;\nvar LINK_CALLBACK_PATH = \"/account/link/callback\";\n\n// src/avatar.ts\nvar LINK_WINDOW_NAME = \"hadoku-avatar-link\";\nvar LINK_POPUP_MARK = \"hadoku-avatar-link-popup\";\nfunction markPopup(on) {\n  try {\n    if (on) sessionStorage.setItem(LINK_POPUP_MARK, \"1\");\n    else sessionStorage.removeItem(LINK_POPUP_MARK);\n  } catch {\n  }\n}\nvar AvatarError = class extends Error {\n  constructor(status, message) {\n    super(message);\n    this.status = status;\n    this.name = \"AvatarError\";\n  }\n  status;\n};\nasync function readJson(res) {\n  if (!res.ok) {\n    const body = await res.json().catch(() => null);\n    throw new AvatarError(res.status, body?.message ?? `HTTP ${res.status}`);\n  }\n  return await res.json();\n}\nfunction createAvatarClient(opts = {}) {\n  const base = `${opts.baseUrl ?? PREFS_API_BASE}/api/v1/_avatar`;\n  const f = opts.fetch ?? fetch;\n  const call = (path, init = {}) => f(`${base}${path}`, { credentials: \"include\", ...init }).then(readJson);\n  const send = (path, method, body) => call(path, {\n    method,\n    ...body === void 0 ? {} : { headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(body) }\n  });\n  const getSettings = () => call(\"\");\n  async function linkInPopup(provider) {\n    markPopup(true);\n    const popup = window.open(\"about:blank\", LINK_WINDOW_NAME, \"popup,width=520,height=760\");\n    markPopup(false);\n    if (!popup)\n      throw new AvatarError(0, \"The sign-in window was blocked: allow pop-ups for hadoku.me\");\n    let authorizeUrl;\n    try {\n      ({ authorizeUrl } = await send(`/link/${provider}`, \"POST\", {}));\n    } catch (err) {\n      popup.close();\n      throw err;\n    }\n    popup.location.href = authorizeUrl;\n    return new Promise((resolve, reject) => {\n      const channel = new BroadcastChannel(LINK_MESSAGE_TYPE);\n      let settled = false;\n      const finish = (failure) => {\n        if (settled) return;\n        settled = true;\n        channel.close();\n        clearInterval(closedPoll);\n        clearTimeout(giveUp);\n        if (failure) reject(new AvatarError(400, failure));\n        else getSettings().then(resolve, reject);\n      };\n      channel.onmessage = (e) => {\n        if (e.data?.type !== LINK_MESSAGE_TYPE) return;\n        finish(e.data.ok ? void 0 : e.data.error);\n      };\n      const closedPoll = setInterval(() => {\n        if (!popup.closed) return;\n        clearInterval(closedPoll);\n        setTimeout(() => finish(), 1500);\n      }, 500);\n      const giveUp = setTimeout(() => finish(), 10 * 60 * 1e3);\n    });\n  }\n  return {\n    /** The caller's settings, including the resolved avatar. */\n    get: getSettings,\n    /** Pick a source. 409 when it is not available (not linked, nothing uploaded). */\n    choose: (source) => send(\"\", \"PUT\", { source }),\n    /** Set the source, the character, or both in one write. */\n    update: (u) => send(\"\", \"PUT\", u),\n    /**\n     * Begin linking. Navigate the browser to the returned URL; the provider\n     * returns it to hadoku.me/account/link/callback, which completes the link.\n     * Call this only from the user's own click: nothing is fetched from\n     * Discord or Steam before they ask.\n     */\n    startLink: (provider) => send(`/link/${provider}`, \"POST\", {}),\n    /**\n     * Link in a popup, so the page never navigates. Call it straight from the\n     * click handler: the window is opened before the first await, which is\n     * what popup blockers allow. Resolves with fresh settings once the popup\n     * reports back or is closed (closing is not an error: the settings say\n     * whether the link landed). Rejects only when the popup could not open\n     * or the link could not start.\n     */\n    linkInPopup: (provider) => linkInPopup(provider),\n    /** Finish a link from the callback page's query string (`location.search`). */\n    completeLink: (query) => send(\"/link/complete\", \"POST\", { query: query.replace(/^\\?/, \"\") }),\n    /** Delete the linked id and its cached avatar URL. */\n    unlink: (provider) => send(`/link/${provider}`, \"DELETE\"),\n    /** Upload an image (PNG, JPEG, WebP or GIF). It is re-encoded and becomes the chosen source. */\n    upload: (image) => call(\"/upload\", { method: \"POST\", body: image }),\n    removeUpload: () => send(\"/upload\", \"DELETE\")\n  };\n}\nasync function resolveAvatars(opts, userIds) {\n  const f = opts.fetch ?? fetch;\n  const url = `${opts.baseUrl ?? PREFS_API_BASE}/api/v1/_avatar/resolve`;\n  const unique = [...new Set(userIds)];\n  const out = {};\n  for (let i = 0; i < unique.length; i += RESOLVE_MAX_IDS) {\n    const res = await f(url, {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\", \"X-User-Key\": opts.serviceKey },\n      body: JSON.stringify({ userIds: unique.slice(i, i + RESOLVE_MAX_IDS) })\n    });\n    Object.assign(out, (await readJson(res)).avatars);\n  }\n  return out;\n}\nexport {\n  AVATAR_SOURCES,\n  AvatarError,\n  LINK_CALLBACK_PATH,\n  LINK_MESSAGE_TYPE,\n  LINK_POPUP_MARK,\n  LINK_PROVIDERS,\n  RESOLVE_MAX_IDS,\n  SPRITE_ID_PATTERN,\n  createAvatarClient,\n  resolveAvatars\n};\n"],"names":[],"mappings":"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","x_google_ignoreList":[0]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hadoku/task-ui-components",
-  "version": "4.22.0",
+  "version": "4.22.3",
   "description": "Reusable UI components with Bento grid and metallic gradient support",
   "type": "module",
   "main": "dist/index.js",

package/src/app-header.css

@@ -183,6 +183,11 @@
    * has something to grow into now that its basis is 0. */
   flex: 1 1 auto;
   min-width: 0;
+  flex-wrap: wrap;
+}
+/* A refused rename's reason, on its own line under the input. */
+.settings-popout__inline > .settings-popout__error {
+  flex-basis: 100%;
 }
 
 .settings-popout__tier {

package/src/components/AvatarPicker.tsx

@@ -0,0 +1,443 @@
+/**
+ * AvatarPicker — the avatar section of ConnectedSettings: the picture people
+ * see (character, Discord, Steam or an upload) and the character games use as
+ * the piece. One resolved avatar per person, stored in hadoku_site's prefs-api
+ * and rendered by every app (`@wolffm/prefs-client/avatar`, bundled into this
+ * package at build so the link protocol cannot drift from the callback page).
+ *
+ * Everything happens in place: picking, uploading and removing are requests
+ * from here, and linking Discord or Steam signs in through a popup
+ * (`linkInPopup`), so the page under the popout never navigates and a game
+ * keeps running.
+ *
+ * Loaded only when the person opens it ("Change"), never at mount: the avatar
+ * read can refresh a linked picture from Discord or Steam, which no page load
+ * should cost, and opening the gear itself must stay free (settings-prefetch
+ * e2e).
+ *
+ * COMPLIANCE (Steam Web API terms; Discord developer terms), carried over from
+ * hadoku.me/account: nothing is fetched from a provider until the person reads
+ * what is read and kept and presses Continue; Steam attribution and a privacy
+ * link sit under the controls; no provider logos, and no implied endorsement.
+ *
+ * Styles are inline for the reason PASSKEY_DOT's are (ConnectedSettings.tsx):
+ * apps compile app-header.css at their own build, so a new rule there reaches
+ * an app only when it rebuilds.
+ */
+import React, { useCallback, useEffect, useState } from 'react'
+import {
+  createAvatarClient,
+  AvatarError,
+  type AvatarSettings,
+  type AvatarSource,
+  type LinkProvider,
+  type ResolvedAvatar
+} from '@wolffm/prefs-client/avatar'
+import { AVATAR_EVENT } from '../lib/avatarEvent'
+
+const client = createAvatarClient({ baseUrl: '/prefs' })
+
+/** watchparty's public character table: GET /watchparty/api/characters. */
+const CHARACTERS_URL = '/watchparty/api/characters'
+const WATCHPARTY_BASE = '/watchparty'
+
+interface Character {
+  id: string
+  name: string
+  color: string
+  portrait: string
+}
+interface CharacterSet {
+  id: string
+  characters: Character[]
+}
+
+const LABEL: Record<AvatarSource, string> = {
+  sprite: 'Character',
+  discord: 'Discord',
+  steam: 'Steam',
+  upload: 'Upload'
+}
+
+const CONSENT: Record<LinkProvider, { points: string[]; go: string }> = {
+  discord: {
+    points: [
+      'Discord asks you to share your basic profile ("identify").',
+      'Kept: your Discord user ID and the address of your profile picture, refreshed while linked.',
+      'Not kept: your username, email, servers or any token.',
+      'Unlink deletes both.'
+    ],
+    go: 'Continue to Discord'
+  },
+  steam: {
+    points: [
+      'You sign in on steamcommunity.com; your password never reaches hadoku.me.',
+      'Your public Steam profile picture is then read through the Steam Web API, now and periodically while linked.',
+      'Kept: your Steam ID and the address of that picture.',
+      'Unlink deletes both and stops the reads.'
+    ],
+    go: 'Continue to Steam'
+  }
+}
+
+const S = {
+  stack: { display: 'flex', flexDirection: 'column', gap: 10, width: '100%' },
+  current: { display: 'flex', alignItems: 'center', gap: 10 },
+  preview: {
+    width: 48,
+    height: 48,
+    borderRadius: '50%',
+    overflow: 'hidden',
+    flex: 'none',
+    background: 'var(--color-bg-alt)',
+    border: '1px solid var(--color-border)'
+  },
+  img: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' },
+  sources: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 },
+  source: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 4,
+    padding: 6,
+    borderRadius: 8,
+    border: '1px solid var(--color-border)',
+    background: 'var(--color-bg)',
+    color: 'var(--color-text)',
+    fontSize: '0.72rem',
+    cursor: 'pointer'
+  },
+  sourceOn: {
+    borderColor: 'var(--color-primary)',
+    boxShadow: 'inset 0 0 0 1px var(--color-primary)'
+  },
+  thumb: {
+    width: 32,
+    height: 32,
+    borderRadius: '50%',
+    overflow: 'hidden',
+    background: 'var(--color-bg-alt)'
+  },
+  sets: { display: 'flex', gap: 4, flexWrap: 'wrap' },
+  grid: { display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 4 },
+  cell: {
+    padding: 0,
+    aspectRatio: '1',
+    borderRadius: 6,
+    overflow: 'hidden',
+    border: '2px solid transparent',
+    background: 'var(--color-bg-alt)',
+    cursor: 'pointer'
+  },
+  line: { display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' },
+  grow: { flex: 1, minWidth: 0 },
+  list: { margin: 0, paddingLeft: 18, fontSize: '0.75rem', lineHeight: 1.45 },
+  fine: { fontSize: '0.7rem', color: 'var(--color-text-secondary)', lineHeight: 1.4, margin: 0 }
+} satisfies Record<string, React.CSSProperties>
+
+function portraitUrl(c: Character): string {
+  return c.portrait.startsWith('/') ? `${WATCHPARTY_BASE}${c.portrait}` : c.portrait
+}
+
+function Picture({ src, style }: { src: string | null; style: React.CSSProperties }) {
+  const [failed, setFailed] = useState(false)
+  useEffect(() => setFailed(false), [src])
+  return (
+    <span style={style}>
+      {src && !failed && (
+        <img
+          src={src}
+          alt=""
+          referrerPolicy="no-referrer"
+          style={S.img}
+          onError={() => setFailed(true)}
+        />
+      )}
+    </span>
+  )
+}
+
+export function AvatarPicker() {
+  const [settings, setSettings] = useState<AvatarSettings | null>(null)
+  const [sets, setSets] = useState<CharacterSet[] | null>(null)
+  const [setIdx, setSetIdx] = useState(0)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [consent, setConsent] = useState<LinkProvider | null>(null)
+
+  useEffect(() => {
+    let live = true
+    client
+      .get()
+      .then(s => live && setSettings(s))
+      .catch((err: unknown) => live && setError(message(err)))
+    fetch(CHARACTERS_URL)
+      .then(r =>
+        r.ok
+          ? (r.json() as Promise<{ sets: CharacterSet[] }>)
+          : Promise.reject(new Error(`characters ${r.status}`))
+      )
+      .then(d => live && setSets(d.sets))
+      .catch((err: unknown) => live && setError(message(err)))
+    return () => {
+      live = false
+    }
+  }, [])
+
+  const run = useCallback(async (work: () => Promise<AvatarSettings>) => {
+    setBusy(true)
+    setError(null)
+    try {
+      const next = await work()
+      setSettings(next)
+      // The page under the popout (a watchparty room, a game) re-reads the
+      // avatar from this instead of waiting for its next join.
+      window.dispatchEvent(new window.CustomEvent<AvatarSettings>(AVATAR_EVENT, { detail: next }))
+    } catch (err) {
+      setError(message(err))
+    } finally {
+      setBusy(false)
+    }
+  }, [])
+
+  const characters = new Map((sets ?? []).flatMap(s => s.characters).map(c => [c.id, c]))
+  const spriteSrc = (id: string | null | undefined) => {
+    const c = id ? characters.get(id) : undefined
+    return c ? portraitUrl(c) : null
+  }
+  const srcOf = (a: ResolvedAvatar) => a.url ?? spriteSrc(a.sprite)
+
+  if (!settings) {
+    return (
+      <span className="settings-popout__hint" role={error ? 'alert' : undefined}>
+        {error ?? '…'}
+      </span>
+    )
+  }
+
+  const available: Record<AvatarSource, boolean> = {
+    sprite: true,
+    discord: Boolean(settings.linked.discord?.avatarUrl),
+    steam: Boolean(settings.linked.steam?.avatarUrl),
+    upload: settings.upload !== null
+  }
+  const thumbOf: Record<AvatarSource, string | null> = {
+    sprite: spriteSrc(settings.sprite),
+    discord: settings.linked.discord?.avatarUrl ?? null,
+    steam: settings.linked.steam?.avatarUrl ?? null,
+    upload: settings.upload?.url ?? null
+  }
+  const shown = settings.avatar
+  const current = sets?.[setIdx]
+
+  // Must stay synchronous up to linkInPopup: the popup opens before its first
+  // await, inside this click, which is what popup blockers allow.
+  const link = (provider: LinkProvider) => {
+    setConsent(null)
+    run(async () => {
+      const next = await client.linkInPopup(provider)
+      // Linking is choosing, when the account came back with a picture.
+      return next.linked[provider]?.avatarUrl ? client.choose(provider) : next
+    }).catch(reportErr)
+  }
+
+  return (
+    <div style={S.stack}>
+      <div style={S.current}>
+        <Picture src={srcOf(shown)} style={S.preview} />
+        <span className="settings-popout__value">
+          {LABEL[shown.source]}
+          {settings.choice && settings.choice !== shown.source
+            ? ` (${LABEL[settings.choice]} unavailable)`
+            : ''}
+        </span>
+      </div>
+
+      <div style={S.sources} role="radiogroup" aria-label="Picture">
+        {(Object.keys(LABEL) as AvatarSource[]).map(src => (
+          <button
+            key={src}
+            type="button"
+            role="radio"
+            aria-checked={shown.source === src}
+            disabled={busy || !available[src]}
+            title={available[src] ? undefined : 'Link or upload one first'}
+            style={{
+              ...S.source,
+              ...(shown.source === src ? S.sourceOn : {}),
+              opacity: available[src] ? 1 : 0.5
+            }}
+            onClick={() => {
+              run(() => client.choose(src)).catch(reportErr)
+            }}
+          >
+            <Picture src={thumbOf[src]} style={S.thumb} />
+            {LABEL[src]}
+          </button>
+        ))}
+      </div>
+
+      <span className="settings-popout__label">Character</span>
+      {sets ? (
+        <>
+          {sets.length > 1 && (
+            <div style={S.sets}>
+              {sets.map((s, i) => (
+                <button
+                  key={s.id}
+                  type="button"
+                  className={`settings-popout__btn${i === setIdx ? ' settings-popout__btn--primary' : ''}`}
+                  onClick={() => setSetIdx(i)}
+                >
+                  {s.id}
+                </button>
+              ))}
+            </div>
+          )}
+          <div style={S.grid} role="radiogroup" aria-label="Character">
+            {current?.characters.map(c => (
+              <button
+                key={c.id}
+                type="button"
+                role="radio"
+                aria-checked={settings.sprite === c.id}
+                aria-label={c.name}
+                title={c.name}
+                disabled={busy}
+                style={{
+                  ...S.cell,
+                  borderColor: settings.sprite === c.id ? c.color : 'transparent'
+                }}
+                onClick={() => {
+                  run(() => client.update({ sprite: c.id })).catch(reportErr)
+                }}
+              >
+                <img src={portraitUrl(c)} alt="" style={S.img} />
+              </button>
+            ))}
+          </div>
+        </>
+      ) : (
+        <span className="settings-popout__hint">…</span>
+      )}
+
+      {(['discord', 'steam'] as const).map(p => {
+        const linked = settings.linked[p]
+        return (
+          <div key={p} style={S.line}>
+            <span className="settings-popout__label" style={S.grow}>
+              {LABEL[p]}
+              {!settings.providers[p]
+                ? ' · not available yet'
+                : linked
+                  ? linked.avatarUrl
+                    ? ' · linked'
+                    : ' · linked, no picture'
+                  : ''}
+            </span>
+            {settings.providers[p] && !linked && (
+              <button
+                type="button"
+                className="settings-popout__btn"
+                disabled={busy}
+                onClick={() => setConsent(consent === p ? null : p)}
+              >
+                Link
+              </button>
+            )}
+            {linked && (
+              <button
+                type="button"
+                className="settings-popout__btn"
+                disabled={busy}
+                onClick={() => {
+                  run(() => client.unlink(p)).catch(reportErr)
+                }}
+              >
+                Unlink
+              </button>
+            )}
+          </div>
+        )
+      })}
+
+      {consent && (
+        <div style={S.stack}>
+          <ul style={S.list}>
+            {CONSENT[consent].points.map(t => (
+              <li key={t}>{t}</li>
+            ))}
+          </ul>
+          <span style={S.line}>
+            <button
+              type="button"
+              className="settings-popout__btn settings-popout__btn--primary"
+              disabled={busy}
+              onClick={() => link(consent)}
+            >
+              {CONSENT[consent].go}
+            </button>
+            <button type="button" className="settings-popout__btn" onClick={() => setConsent(null)}>
+              Cancel
+            </button>
+          </span>
+        </div>
+      )}
+
+      <div style={S.line}>
+        <span className="settings-popout__label" style={S.grow}>
+          Upload
+        </span>
+        <label className="settings-popout__btn" style={{ opacity: busy ? 0.5 : 1 }}>
+          {settings.upload ? 'Replace' : 'Choose image'}
+          <input
+            type="file"
+            accept={settings.limits.acceptedTypes.join(',')}
+            hidden
+            disabled={busy}
+            onChange={e => {
+              const file = e.currentTarget.files?.[0]
+              e.currentTarget.value = ''
+              if (file) run(() => client.upload(file)).catch(reportErr)
+            }}
+          />
+        </label>
+        {settings.upload && (
+          <button
+            type="button"
+            className="settings-popout__btn"
+            disabled={busy}
+            onClick={() => {
+              run(() => client.removeUpload()).catch(reportErr)
+            }}
+          >
+            Remove
+          </button>
+        )}
+      </div>
+
+      {error && (
+        <span className="settings-popout__error" role="alert">
+          {error}
+        </span>
+      )}
+
+      <p style={S.fine}>
+        Steam avatars via the Steam Web API. Steam is a trademark of Valve; hadoku.me is not
+        affiliated with Valve, Steam or Discord.{' '}
+        <a href="/privacy#avatars" target="_blank" rel="noopener">
+          What is kept
+        </a>
+      </p>
+    </div>
+  )
+}
+
+function message(err: unknown): string {
+  if (err instanceof AvatarError && err.status === 401) return 'Sign in to set an avatar.'
+  return err instanceof Error ? err.message : String(err)
+}
+
+function reportErr(err: unknown) {
+  console.error('[AvatarPicker] action failed', (err as Error)?.message ?? err)
+}