@hadoku/task-ui-components 4.23.4 → 4.23.6

package/src/components/AvatarDialog.tsx

@@ -0,0 +1,118 @@
+/**
+ * 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
+ * underneath: closing the dialog returns to it, and focus goes back to Change.
+ *
+ * Styles are inline for the reason AvatarPicker's are: apps compile this
+ * package's CSS at their own build, so a new stylesheet rule reaches an app only
+ * when it rebuilds. Tokens only.
+ */
+import React, { useEffect, useId, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { AvatarBuilder } from './AvatarBuilder'
+
+const S: Record<string, React.CSSProperties> = {
+  overlay: {
+    position: 'fixed',
+    inset: 0,
+    // Above the popout's panel (100) and its click-catcher (99).
+    zIndex: 1000,
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    padding: '6vh 16px',
+    background: 'var(--color-bg-overlay)'
+  },
+  card: {
+    boxSizing: 'border-box',
+    width: 'min(720px, 100%)',
+    maxHeight: '88vh',
+    overflowY: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 14,
+    padding: 20,
+    borderRadius: 12,
+    background: 'var(--color-bg-card)',
+    border: '1px solid var(--color-border)',
+    boxShadow: '0 8px 28px rgba(0, 0, 0, 0.18)',
+    color: 'var(--color-text)',
+    // Outside the app's root, so nothing passes the app's font down to it.
+    fontFamily: 'var(--font-family)',
+    outline: 'none'
+  },
+  head: { display: 'flex', alignItems: 'center', gap: 10 },
+  title: { margin: 0, flex: 1, fontSize: '1.05rem', fontWeight: 600 }
+}
+
+export interface AvatarDialogProps {
+  open: boolean
+  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, name = null }: AvatarDialogProps) {
+  const titleId = useId()
+  const cardRef = useRef<HTMLDivElement>(null)
+  const onCloseRef = useRef(onClose)
+  onCloseRef.current = onClose
+
+  useEffect(() => {
+    if (!open) return
+    cardRef.current?.focus()
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return
+      e.preventDefault()
+      // Stop it here: closing re-arms the popout's own Escape listener on window
+      // (React flushes a keypress's effects at once), and this same keypress
+      // would reach it next and close the popout too.
+      e.stopPropagation()
+      onCloseRef.current()
+    }
+    document.addEventListener('keydown', onKey)
+    const back = returnFocus?.current
+    return () => {
+      document.removeEventListener('keydown', onKey)
+      back?.focus()
+    }
+  }, [open, returnFocus])
+
+  if (!open || typeof document === 'undefined') return null
+
+  return createPortal(
+    <div style={S.overlay} onClick={onClose}>
+      <div
+        ref={cardRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        tabIndex={-1}
+        style={S.card}
+        onClick={e => e.stopPropagation()}
+      >
+        <div style={S.head}>
+          <h2 id={titleId} style={S.title}>
+            Avatar
+          </h2>
+          <button
+            type="button"
+            className="settings-popout__btn settings-popout__btn--primary"
+            onClick={onClose}
+          >
+            Done
+          </button>
+        </div>
+        <AvatarBuilder name={name} />
+      </div>
+    </div>,
+    document.body
+  )
+}

package/src/components/AvatarPicker.tsx

@@ -1,19 +1,19 @@
 /**
- * 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).
+ * 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.
  *
- * 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).
+ * 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.
  *
  * COMPLIANCE (Steam Web API terms; Discord developer terms), carried over from
  * hadoku.me/account: nothing is fetched from a provider until the person reads
@@ -24,33 +24,13 @@
  * 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 React, { useEffect, useState } from 'react'
 import {
-  createAvatarClient,
-  AvatarError,
   type AvatarSettings,
   type AvatarSource,
-  type LinkProvider,
-  type ResolvedAvatar
+  type LinkProvider
 } 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 { avatarClient, portraitUrl, type CharacterSet } from '../lib/avatarData'
 
 const LABEL: Record<AvatarSource, string> = {
   sprite: 'Character',
@@ -82,16 +62,6 @@ const CONSENT: Record<LinkProvider, { points: string[]; go: string }> = {
 
 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: {
@@ -119,7 +89,7 @@ const S = {
     background: 'var(--color-bg-alt)'
   },
   sets: { display: 'flex', gap: 4, flexWrap: 'wrap' },
-  grid: { display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 4 },
+  grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(64px, 1fr))', gap: 6 },
   cell: {
     padding: 0,
     aspectRatio: '1',
@@ -134,10 +104,6 @@ const S = {
   list: { margin: 0, paddingLeft: 18, fontSize: '0.75rem', lineHeight: 1.45 }
 } 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 +122,30 @@ 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)
+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)
-  const [busy, setBusy] = useState(false)
-  const [error, setError] = useState<string | null>(null)
   const [consent, setConsent] = useState<LinkProvider | null>(null)
-
+  // 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,
@@ -234,23 +167,19 @@ export function AvatarPicker() {
   const link = (provider: LinkProvider) => {
     setConsent(null)
     run(async () => {
-      const next = await client.linkInPopup(provider)
+      const next = await avatarClient.linkInPopup(provider)
       // Linking is choosing, when the account came back with a picture.
-      return next.linked[provider]?.avatarUrl ? client.choose(provider) : next
+      return next.linked[provider]?.avatarUrl ? avatarClient.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 => (
@@ -267,7 +196,7 @@ export function AvatarPicker() {
               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 +237,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} />
@@ -350,7 +279,7 @@ export function AvatarPicker() {
                 className="settings-popout__btn"
                 disabled={busy}
                 onClick={() => {
-                  run(() => client.unlink(p)).catch(reportErr)
+                  run(() => avatarClient.unlink(p)).catch(reportErr)
                 }}
               >
                 Unlink
@@ -397,7 +326,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 +336,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

@@ -4,7 +4,7 @@
  * property of the PERSON (not the app):
  *   - current access tier (read-only, friendly label)
  *   - display name (inline edit → POST /session/name)
- *   - avatar: picture and character, chosen in place (AvatarPicker)
+ *   - avatar: picture and character, chosen in a dialog (AvatarDialog)
  *   - 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)
  *
@@ -32,7 +32,7 @@
 import React, { useCallback, useEffect, useId, useRef, useState } from 'react'
 import { useSettingsTab } from '@wolffm/themes'
 import { SettingsIcon } from './ThemeIcons'
-import { AvatarPicker } from './AvatarPicker'
+import { AvatarDialog } from './AvatarDialog'
 
 // A grantee's own service credentials, with a QR encoder for TOTP enrolment:
 // its own chunk, fetched only when a grantee opens it.
@@ -265,8 +265,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).
+  // Avatar: the dialog's picker loads only when opened, never at mount (AvatarPicker).
   const [avatarOpen, setAvatarOpen] = useState(false)
+  const avatarBtn = useRef<HTMLButtonElement>(null)
   // Service identities this person may mint for (whoami.serviceGrants).
   const [serviceGrants, setServiceGrants] = useState(0)
   const [serviceOpen, setServiceOpen] = useState(false)
@@ -414,15 +415,15 @@ export function ConnectedSettings({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  // Escape closes.
+  // Escape closes — unless the avatar dialog is open: that Escape is the dialog's.
   useEffect(() => {
-    if (!open) return
+    if (!open || avatarOpen) return
     const onKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') setOpen(false)
     }
     window.addEventListener('keydown', onKey)
     return () => window.removeEventListener('keydown', onKey)
-  }, [open])
+  }, [open, avatarOpen])
 
   const saveName = useCallback(async () => {
     const trimmed = nameDraft.trim()
@@ -708,9 +709,9 @@ export function ConnectedSettings({
                   )}
                 </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
+                {/* Avatar: picture and character, chosen in a dialog (AvatarDialog).
+              Nothing loads 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">
@@ -719,20 +720,27 @@ export function ConnectedSettings({
                         Avatar
                       </span>
                       <button
+                        ref={avatarBtn}
                         type="button"
                         className="settings-popout__btn"
+                        aria-haspopup="dialog"
                         aria-expanded={avatarOpen}
-                        onClick={() => setAvatarOpen(v => !v)}
+                        onClick={() => setAvatarOpen(true)}
                       >
-                        {avatarOpen ? 'Done' : 'Change'}
+                        Change
                       </button>
                     </span>
-                    {avatarOpen && <AvatarPicker />}
+                    <AvatarDialog
+                      open={avatarOpen}
+                      onClose={() => setAvatarOpen(false)}
+                      returnFocus={avatarBtn}
+                      name={displayName}
+                    />
                   </section>
                 )}
 
                 {/* Service access: only for someone the operator granted a
-              service identity. Collapsed until Open, like Avatar. */}
+              service identity. Collapsed until Open. */}
                 {!resolving && serviceGrants > 0 && (
                   <section className="settings-popout__row settings-popout__row--stack">
                     <span className="settings-popout__inline">

package/src/lib/avatarData.ts

@@ -0,0 +1,40 @@
+/**
+ * What the avatar dialog reads: the person's avatar settings (prefs-api, through
+ * `@wolffm/prefs-client/avatar`) and watchparty's public character table, which
+ * gives each character its portrait and the colour every name cosmetic derives
+ * from.
+ */
+import { createAvatarClient, AvatarError } from '@wolffm/prefs-client/avatar'
+
+export const avatarClient = createAvatarClient({ baseUrl: '/prefs' })
+
+/** watchparty's public character table: GET /watchparty/api/characters. */
+const CHARACTERS_URL = '/watchparty/api/characters'
+const WATCHPARTY_BASE = '/watchparty'
+
+export interface Character {
+  id: string
+  name: string
+  color: string
+  portrait: string
+}
+export interface CharacterSet {
+  id: string
+  characters: Character[]
+}
+
+export async function fetchCharacters(): Promise<CharacterSet[]> {
+  const r = await fetch(CHARACTERS_URL)
+  if (!r.ok) throw new Error(`Could not load the characters (HTTP ${r.status})`)
+  return ((await r.json()) as { sets: CharacterSet[] }).sets
+}
+
+export function portraitUrl(c: Character): string {
+  return c.portrait.startsWith('/') ? `${WATCHPARTY_BASE}${c.portrait}` : c.portrait
+}
+
+/** A failure as the dialog shows it. */
+export function avatarErrorText(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)
+}