@hadoku/task-ui-components 4.22.0 → 4.22.3

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 (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)
  *
@@ -27,6 +27,7 @@
  */
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { SettingsIcon } from './ThemeIcons'
+import { AvatarPicker } from './AvatarPicker'
 import {
   deleteOwnAccount,
   prefetchSettings,
@@ -154,6 +155,7 @@ export function ConnectedSettings({
   const [nameDraft, setNameDraft] = useState(resolvedName ?? '')
   const [editingName, setEditingName] = useState(false)
   const [nameSaving, setNameSaving] = useState(false)
+  const [nameError, setNameError] = useState<string | null>(null)
   const [displayName, setLocalName] = useState<string | null>(resolvedName)
 
   // Key swap. The draft lives only in this state and the input: it is never
@@ -179,6 +181,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)
@@ -279,13 +284,17 @@ export function ConnectedSettings({
       return
     }
     setNameSaving(true)
-    const stored = await setDisplayName(trimmed)
+    const result = await setDisplayName(trimmed)
     setNameSaving(false)
-    if (stored !== null) {
-      setLocalName(stored)
-      setNameDraft(stored)
-      onNameChange?.(stored)
+    // A refusal keeps the editor open on the draft, saying why.
+    if (!result.ok) {
+      setNameError(result.error)
+      return
     }
+    setNameError(null)
+    setLocalName(result.name)
+    setNameDraft(result.name ?? '')
+    if (result.name !== null) onNameChange?.(result.name)
     setEditingName(false)
   }, [nameDraft, displayName, onNameChange])
 
@@ -461,7 +470,12 @@ export function ConnectedSettings({
                   maxLength={64}
                   autoFocus
                   disabled={nameSaving}
-                  onChange={e => setNameDraft(e.target.value)}
+                  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)
@@ -470,6 +484,7 @@ export function ConnectedSettings({
                       // The edit's Escape, not the popout's (window listener).
                       e.stopPropagation()
                       setEditingName(false)
+                      setNameError(null)
                       setNameDraft(displayName ?? '')
                     }
                   }}
@@ -484,6 +499,15 @@ export function ConnectedSettings({
                 >
                   {nameSaving ? '…' : 'Save'}
                 </button>
+                {nameError && (
+                  <span
+                    id="settings-popout-name-error"
+                    className="settings-popout__error"
+                    role="alert"
+                  >
+                    {nameError}
+                  </span>
+                )}
               </span>
             ) : (
               <button
@@ -500,17 +524,24 @@ export function ConnectedSettings({
             )}
           </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. */}
+          {/* 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">
-              <span className="settings-popout__label">Avatar</span>
-              <a className="settings-popout__btn" href="/account" target="_blank" rel="noopener">
-                Change
-              </a>
+            <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>
           )}
 

package/src/index.ts

@@ -20,6 +20,7 @@
 export { HadokuThemePicker } from './components/HadokuThemePicker'
 export { AppHeader } from './components/AppHeader'
 export { ConnectedSettings } from './components/ConnectedSettings'
+export { AVATAR_EVENT } from './lib/avatarEvent'
 // Re-exported from @wolffm/themes, which now owns the context AND the provider
 // that fills it. These are RE-EXPORTS, not re-declarations: every consumer gets
 // the one context object from themes, which is what makes a duplicated copy of

package/src/lib/avatarEvent.ts

@@ -0,0 +1,11 @@
+/**
+ * Fired on `window` after every avatar change made in the settings popout
+ * (AvatarPicker), with the new avatar settings as `detail` (hadoku_site's
+ * `AvatarSettings`, @wolffm/prefs-client/avatar). A host page listens to update
+ * what it shows (watchparty sends the new character to its room) without
+ * polling prefs-api.
+ *
+ * Its own module, free of imports, so exporting it from the package entry adds
+ * no type dependency on prefs-client for consumers.
+ */
+export const AVATAR_EVENT = 'hadoku:avatar'

package/src/lib/settingsClient.ts

@@ -140,9 +140,15 @@ export async function deleteOwnAccount(): Promise<boolean> {
   }
 }
 
-/** POST a new display name for the signed-in user. Returns the stored name
- *  (may differ from the request for wp-* protected keys) or null on failure. */
-export async function setDisplayName(name: string): Promise<string | null> {
+/**
+ * POST a new display name for the signed-in user. Answers the stored name (may
+ * differ from the request for wp-* protected keys), or why it was refused: the
+ * server's own words where it gave any ("That display name is already taken"),
+ * so the editor can say them.
+ */
+export type RenameResult = { ok: true; name: string | null } | { ok: false; error: string }
+
+export async function setDisplayName(name: string): Promise<RenameResult> {
   try {
     const res = await fetch(SESSION_NAME, {
       method: 'POST',
@@ -151,12 +157,16 @@ export async function setDisplayName(name: string): Promise<string | null> {
       body: JSON.stringify({ name }),
       signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS)
     })
-    if (!res.ok) return null
+    if (!res.ok) {
+      const body = (await res.json().catch(() => null)) as { error?: unknown } | null
+      const said = typeof body?.error === 'string' ? body.error : null
+      return { ok: false, error: said ?? `Not saved (${res.status})` }
+    }
     const body = (await res.json()) as { ok: boolean; name: string | null }
     patchSnapshot(prev => ({ ...prev, identity: { ...prev.identity, name: body.name } }))
-    return body.name
+    return { ok: true, name: body.name }
   } catch {
-    return null
+    return { ok: false, error: 'Not saved: no connection' }
   }
 }