@hadoku/task-ui-components 4.23.5 → 4.23.7

package/src/components/AvatarDialog.tsx

@@ -1,7 +1,7 @@
 /**
- * AvatarDialog — the avatar picker in its own dialog, opened from the settings
- * popout's "Change". The popout is 300px wide; the picker (and the cosmetics
- * that will join it) needs the room.
+ * AvatarDialog — the avatar builder (picture, character and cosmetics, with a
+ * live preview) in its own dialog, opened from the settings popout's "Change".
+ * The popout is 300px wide; the builder needs the room.
  *
  * Rendered into document.body, so no ancestor of the popout (a transform, an
  * overflow, a stacking context) can clip or trap it. The popout stays open
@@ -13,7 +13,7 @@
  */
 import React, { useEffect, useId, useRef } from 'react'
 import { createPortal } from 'react-dom'
-import { AvatarPicker } from './AvatarPicker'
+import { AvatarBuilder } from './AvatarBuilder'
 
 const S: Record<string, React.CSSProperties> = {
   overlay: {
@@ -55,9 +55,11 @@ export interface AvatarDialogProps {
   onClose: () => void
   /** Where focus goes when the dialog closes (the Change button). */
   returnFocus?: React.RefObject<HTMLElement | null>
+  /** The person's display name, shown in the preview. */
+  name?: string | null
 }
 
-export function AvatarDialog({ open, onClose, returnFocus }: AvatarDialogProps) {
+export function AvatarDialog({ open, onClose, returnFocus, name = null }: AvatarDialogProps) {
   const titleId = useId()
   const cardRef = useRef<HTMLDivElement>(null)
   const onCloseRef = useRef(onClose)
@@ -108,7 +110,7 @@ export function AvatarDialog({ open, onClose, returnFocus }: AvatarDialogProps)
             Done
           </button>
         </div>
-        <AvatarPicker />
+        <AvatarBuilder name={name} />
       </div>
     </div>,
     document.body

package/src/components/AvatarPicker.tsx

@@ -1,56 +1,26 @@
 /**
- * AvatarPicker — the body of AvatarDialog (opened from 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).
+ * AvatarPicker — the Picture tab of AvatarBuilder (inside AvatarDialog, opened
+ * from 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.
+ * from here. Linking Discord or Steam lives in the popout's Account tab
+ * (LinkedAccounts); a linked account's picture is a choice here.
  *
- * Loaded only when the person opens the dialog ("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.
+ * AvatarBuilder owns the settings and the character table and loads them only
+ * when the dialog opens; this component draws them and sends changes through
+ * `run`, which applies the answer everywhere in the dialog.
  *
  * 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[]
-}
+import React, { useEffect, useState } from 'react'
+import { type AvatarSettings, type AvatarSource } from '@wolffm/prefs-client/avatar'
+import { avatarClient, portraitUrl, type CharacterSet } from '../lib/avatarData'
 
 const LABEL: Record<AvatarSource, string> = {
   sprite: 'Character',
@@ -59,39 +29,8 @@ const LABEL: Record<AvatarSource, string> = {
   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: 64,
-    height: 64,
-    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: {
@@ -130,14 +69,9 @@ const S = {
     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 }
+  grow: { flex: 1, minWidth: 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])
@@ -156,63 +90,29 @@ function Picture({ src, style }: { src: string | null; style: React.CSSPropertie
   )
 }
 
-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)
+export interface AvatarPickerProps {
+  settings: AvatarSettings
+  sets: CharacterSet[] | null
+  busy: boolean
+  /** Send a change; the builder applies the answer and reports failures. */
+  run: (work: () => Promise<AvatarSettings>) => Promise<void>
+}
 
+export function AvatarPicker({ settings, sets, busy, run }: AvatarPickerProps) {
+  const [setIdx, setSetIdx] = useState(0)
+  // Open on the set holding the person's character.
   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 at = sets?.findIndex(s => s.characters.some(c => c.id === settings.sprite)) ?? -1
+    if (at > 0) setSetIdx(at)
+    // Only when the table arrives: afterwards the person moves between sets.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sets])
 
   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,
@@ -229,28 +129,13 @@ export function AvatarPicker() {
   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)`
-            : ''}
+      {settings.choice && settings.choice !== shown.source && (
+        <span className="settings-popout__hint">
+          {LABEL[settings.choice]} is unavailable, so your character shows instead.
         </span>
-      </div>
+      )}
 
       <div style={S.sources} role="radiogroup" aria-label="Picture">
         {(Object.keys(LABEL) as AvatarSource[]).map(src => (
@@ -260,14 +145,20 @@ export function AvatarPicker() {
             role="radio"
             aria-checked={shown.source === src}
             disabled={busy || !available[src]}
-            title={available[src] ? undefined : 'Link or upload one first'}
+            title={
+              available[src]
+                ? undefined
+                : src === 'upload'
+                  ? 'Upload a picture below first'
+                  : `Link ${LABEL[src]} under Settings › Account first`
+            }
             style={{
               ...S.source,
               ...(shown.source === src ? S.sourceOn : {}),
               opacity: available[src] ? 1 : 0.5
             }}
             onClick={() => {
-              run(() => client.choose(src)).catch(reportErr)
+              run(() => avatarClient.choose(src)).catch(reportErr)
             }}
           >
             <Picture src={thumbOf[src]} style={S.thumb} />
@@ -308,7 +199,7 @@ export function AvatarPicker() {
                     borderColor: settings.sprite === c.id ? c.color : 'transparent'
                   }}
                   onClick={() => {
-                    run(() => client.update({ sprite: c.id })).catch(reportErr)
+                    run(() => avatarClient.update({ sprite: c.id })).catch(reportErr)
                   }}
                 >
                   <img src={portraitUrl(c)} alt="" style={S.img} />
@@ -320,69 +211,6 @@ export function AvatarPicker() {
           <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
@@ -397,7 +225,7 @@ export function AvatarPicker() {
             onChange={e => {
               const file = e.currentTarget.files?.[0]
               e.currentTarget.value = ''
-              if (file) run(() => client.upload(file)).catch(reportErr)
+              if (file) run(() => avatarClient.upload(file)).catch(reportErr)
             }}
           />
         </label>
@@ -407,28 +235,17 @@ export function AvatarPicker() {
             className="settings-popout__btn"
             disabled={busy}
             onClick={() => {
-              run(() => client.removeUpload()).catch(reportErr)
+              run(() => avatarClient.removeUpload()).catch(reportErr)
             }}
           >
             Remove
           </button>
         )}
       </div>
-
-      {error && (
-        <span className="settings-popout__error" role="alert">
-          {error}
-        </span>
-      )}
     </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)
 }

package/src/components/ConnectedSettings.tsx

@@ -33,6 +33,7 @@ import React, { useCallback, useEffect, useId, useRef, useState } from 'react'
 import { useSettingsTab } from '@wolffm/themes'
 import { SettingsIcon } from './ThemeIcons'
 import { AvatarDialog } from './AvatarDialog'
+import { LinkedAccounts } from './LinkedAccounts'
 
 // A grantee's own service credentials, with a QR encoder for TOTP enrolment:
 // its own chunk, fetched only when a grantee opens it.
@@ -267,6 +268,8 @@ export function ConnectedSettings({
 
   // Avatar: the dialog's picker loads only when opened, never at mount (AvatarPicker).
   const [avatarOpen, setAvatarOpen] = useState(false)
+  // Linked accounts: loaded only when the row is opened (LinkedAccounts).
+  const [linksOpen, setLinksOpen] = useState(false)
   const avatarBtn = useRef<HTMLButtonElement>(null)
   // Service identities this person may mint for (whoami.serviceGrants).
   const [serviceGrants, setServiceGrants] = useState(0)
@@ -734,6 +737,7 @@ export function ConnectedSettings({
                       open={avatarOpen}
                       onClose={() => setAvatarOpen(false)}
                       returnFocus={avatarBtn}
+                      name={displayName}
                     />
                   </section>
                 )}
@@ -951,6 +955,28 @@ export function ConnectedSettings({
                   </section>
                 )}
 
+                {/* Discord and Steam: linked here, so their pictures can be chosen in
+              the avatar dialog. Collapsed until Open: the read can refresh a
+              linked picture, which opening the gear must not cost. */}
+                {!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">
+                        Linked accounts
+                      </span>
+                      <button
+                        type="button"
+                        className="settings-popout__btn"
+                        aria-expanded={linksOpen}
+                        onClick={() => setLinksOpen(v => !v)}
+                      >
+                        {linksOpen ? 'Done' : 'Open'}
+                      </button>
+                    </span>
+                    {linksOpen && <LinkedAccounts />}
+                  </section>
+                )}
+
                 {/* 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. */}

package/src/components/LinkedAccounts.tsx

@@ -0,0 +1,176 @@
+/**
+ * LinkedAccounts — Discord and Steam, linked and unlinked from the settings
+ * popout's Account tab (operator, 2026-11-02: linking is an account matter, not
+ * part of changing the avatar). A linked account's picture then shows up as a
+ * choice in the avatar dialog's Picture tab.
+ *
+ * Loaded only when the person opens the row, never at mount: the read can
+ * refresh a linked picture from Discord or Steam, which opening the gear must
+ * not cost (settings-prefetch e2e).
+ *
+ * Linking signs in through a popup (`linkInPopup`), so the page under the
+ * popout never navigates and a game keeps running.
+ *
+ * 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; no provider logos, and no implied
+ * endorsement.
+ */
+import React, { useEffect, useState } from 'react'
+import type { AvatarSettings, LinkProvider } from '@wolffm/prefs-client/avatar'
+import { AVATAR_EVENT } from '../lib/avatarEvent'
+import { avatarClient, avatarErrorText } from '../lib/avatarData'
+
+const LABEL: Record<LinkProvider, string> = { discord: 'Discord', steam: 'Steam' }
+
+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: 8, width: '100%' },
+  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 }
+} satisfies Record<string, React.CSSProperties>
+
+export function LinkedAccounts() {
+  const [settings, setSettings] = useState<AvatarSettings | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [consent, setConsent] = useState<LinkProvider | null>(null)
+
+  useEffect(() => {
+    let live = true
+    avatarClient
+      .get()
+      .then(s => live && setSettings(s))
+      .catch((err: unknown) => live && setError(avatarErrorText(err)))
+    return () => {
+      live = false
+    }
+  }, [])
+
+  const run = 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, as it does after a change in the avatar dialog.
+      window.dispatchEvent(new window.CustomEvent<AvatarSettings>(AVATAR_EVENT, { detail: next }))
+    } catch (err) {
+      setError(avatarErrorText(err))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  if (!settings) {
+    return (
+      <span className="settings-popout__hint" role={error ? 'alert' : undefined}>
+        {error ?? '…'}
+      </span>
+    )
+  }
+
+  // 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)
+    void run(async () => {
+      const next = await avatarClient.linkInPopup(provider)
+      // Linking is choosing, when the account came back with a picture.
+      return next.linked[provider]?.avatarUrl ? avatarClient.choose(provider) : next
+    })
+  }
+
+  return (
+    <div style={S.stack}>
+      {(['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={() => void run(() => avatarClient.unlink(p))}
+              >
+                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>
+      )}
+
+      {error && (
+        <span className="settings-popout__error" role="alert">
+          {error}
+        </span>
+      )}
+    </div>
+  )
+}