@hadoku/task-ui-components 4.23.6 → 4.23.7

package/src/components/AvatarPicker.tsx

@@ -7,29 +7,19 @@
  * 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.
  *
  * 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
- * 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, { useEffect, useState } from 'react'
-import {
-  type AvatarSettings,
-  type AvatarSource,
-  type LinkProvider
-} from '@wolffm/prefs-client/avatar'
+import { type AvatarSettings, type AvatarSource } from '@wolffm/prefs-client/avatar'
 import { avatarClient, portraitUrl, type CharacterSet } from '../lib/avatarData'
 
 const LABEL: Record<AvatarSource, string> = {
@@ -39,27 +29,6 @@ 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%' },
   img: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' },
@@ -100,8 +69,7 @@ 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 Picture({ src, style }: { src: string | null; style: React.CSSProperties }) {
@@ -132,7 +100,6 @@ export interface AvatarPickerProps {
 
 export function AvatarPicker({ settings, sets, busy, run }: AvatarPickerProps) {
   const [setIdx, setSetIdx] = useState(0)
-  const [consent, setConsent] = useState<LinkProvider | null>(null)
   // Open on the set holding the person's character.
   useEffect(() => {
     const at = sets?.findIndex(s => s.characters.some(c => c.id === settings.sprite)) ?? -1
@@ -162,17 +129,6 @@ export function AvatarPicker({ settings, sets, busy, run }: AvatarPickerProps) {
   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 avatarClient.linkInPopup(provider)
-      // Linking is choosing, when the account came back with a picture.
-      return next.linked[provider]?.avatarUrl ? avatarClient.choose(provider) : next
-    }).catch(reportErr)
-  }
-
   return (
     <div style={S.stack}>
       {settings.choice && settings.choice !== shown.source && (
@@ -189,7 +145,13 @@ export function AvatarPicker({ settings, sets, busy, run }: AvatarPickerProps) {
             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 : {}),
@@ -249,69 +211,6 @@ export function AvatarPicker({ settings, sets, busy, run }: AvatarPickerProps) {
           <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(() => avatarClient.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

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)
@@ -952,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>
+  )
+}