npm - @hadoku/task-ui-components - Versions diffs - 4.23.12 → 4.23.14 - Mend

@hadoku/task-ui-components 4.23.12 → 4.23.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/dist/components/AvatarBuilder.d.ts.map +1 -1
package/dist/components/AvatarBuilder.js +65 -76
package/dist/components/AvatarBuilder.js.map +1 -1
package/dist/components/AvatarPicker.d.ts +3 -2
package/dist/components/AvatarPicker.d.ts.map +1 -1
package/dist/components/AvatarPicker.js +27 -9
package/dist/components/AvatarPicker.js.map +1 -1
package/dist/components/LinkedAccounts.d.ts +19 -0
package/dist/components/LinkedAccounts.d.ts.map +1 -1
package/dist/components/LinkedAccounts.js +41 -24
package/dist/components/LinkedAccounts.js.map +1 -1
package/dist/vendor/wolffm/prefs-client/avatar.js.map +1 -1
package/dist/vendor/wolffm/prefs-client/cosmetics.js.map +1 -1
package/package.json +2 -2
package/src/components/AvatarBuilder.tsx +57 -74
package/src/components/AvatarPicker.tsx +31 -13
package/src/components/LinkedAccounts.tsx +63 -31

package/src/components/AvatarBuilder.tsx CHANGED Viewed

@@ -201,7 +201,12 @@ const S = {
     gap: 5,
     padding: 6,
     borderRadius: 8,
-    border: '1px solid var(--color-border)',
+    // Longhands, not the `border` shorthand: the selected styles override
+    // borderColor, and when one comes off React clears borderColor to '', which
+    // would reset it to currentColor and leave a text-coloured ring behind.
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: 'var(--color-border)',
     background: 'var(--color-bg)',
     color: 'var(--color-text)',
     cursor: 'pointer',
@@ -225,16 +230,7 @@ const S = {
     fontSize: '0.8rem'
   },
   tileName: { fontSize: '0.8rem', fontWeight: 500, display: 'flex', alignItems: 'center', gap: 5 },
-  tileEarn: { fontSize: '0.7rem', lineHeight: 1.3, color: 'var(--color-text-muted)' },
-  foot: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    gap: 8,
-    flexWrap: 'wrap',
-    fontSize: '0.75rem',
-    color: 'var(--color-text-muted)'
-  }
+  tileEarn: { fontSize: '0.7rem', lineHeight: 1.3, color: 'var(--color-text-muted)' }
 } satisfies Record<string, React.CSSProperties>
 /**
@@ -867,77 +863,64 @@ function SlotGrid({
   onTry
 }: SlotGridProps) {
   const items = COSMETICS.filter(i => i.slot === slot && (!i.hidden || isAdmin))
-  const locked = items.filter(i => !i.hidden && !owned.has(i.id))
   return (
-    <>
-      <div style={S.grid}>
-        <button
-          type="button"
-          aria-pressed={equipped === null}
-          style={{ ...S.tile, ...(equipped === null ? S.tileOn : {}) }}
-          onClick={() => onEquip(null)}
-        >
-          <Html html={preview(null)} style={{ ...S.tilePv, ...colour }} />
-          <span style={S.tileName}>None</span>
-        </button>
-        {items.map(item => {
-          if (item.hidden) {
-            return (
-              <button
-                key={item.id}
-                type="button"
-                disabled
-                aria-label={`${item.label}, archived`}
-                style={{ ...S.tile, cursor: 'not-allowed', opacity: 0.45 }}
-              >
-                <Html html={preview(item.id)} style={{ ...S.tilePv, ...colour }} />
-                <span style={S.tileName}>{item.label}</span>
-                <span style={S.tileEarn}>Archived</span>
-              </button>
-            )
-          }
-          const own = owned.has(item.id)
-          const on = equipped === item.id
-          const trying = tryOn?.slot === slot && tryOn.id === item.id
+    <div style={S.grid}>
+      <button
+        type="button"
+        aria-pressed={equipped === null}
+        style={{ ...S.tile, ...(equipped === null ? S.tileOn : {}) }}
+        onClick={() => onEquip(null)}
+      >
+        <Html html={preview(null)} style={{ ...S.tilePv, ...colour }} />
+        <span style={S.tileName}>None</span>
+      </button>
+      {items.map(item => {
+        if (item.hidden) {
           return (
             <button
               key={item.id}
               type="button"
-              aria-pressed={own ? on : trying}
-              aria-label={
-                own ? item.label : `${item.label}, locked. ${item.earn ?? ''}. Try it on.`
-              }
-              style={{
-                ...S.tile,
-                ...(on ? S.tileOn : {}),
-                ...(trying ? S.tileTrying : {})
-              }}
-              onClick={() => (own ? onEquip(item.id) : onTry(item.id))}
-              // A message reveal plays once; hovering its tile plays it again.
-              onMouseEnter={e => slot === 'message' && replayPreview(e.currentTarget)}
+              disabled
+              aria-label={`${item.label}, archived`}
+              style={{ ...S.tile, cursor: 'not-allowed', opacity: 0.45 }}
             >
-              <Html
-                html={preview(item.id)}
-                style={{ ...S.tilePv, ...colour, opacity: own ? 1 : 0.55 }}
-              />
-              <span style={{ ...S.tileName, color: own ? undefined : 'var(--color-text-muted)' }}>
-                {!own && <Icon name="lock" size={12} />}
-                {item.label}
-              </span>
-              {!own && <span style={S.tileEarn}>{item.earn}</span>}
+              <Html html={preview(item.id)} style={{ ...S.tilePv, ...colour }} />
+              <span style={S.tileName}>{item.label}</span>
+              <span style={S.tileEarn}>Archived</span>
             </button>
           )
-        })}
-      </div>
-      {locked.length > 0 && (
-        <div style={S.foot}>
-          <span>
-            {locked.length === 1 ? 'One to earn.' : `${locked.length} to earn.`} Pick one to try it
-            on.
-          </span>
-        </div>
-      )}
-    </>
+        }
+        const own = owned.has(item.id)
+        const on = equipped === item.id
+        const trying = tryOn?.slot === slot && tryOn.id === item.id
+        return (
+          <button
+            key={item.id}
+            type="button"
+            aria-pressed={own ? on : trying}
+            aria-label={own ? item.label : `${item.label}, locked. ${item.earn ?? ''}. Try it on.`}
+            style={{
+              ...S.tile,
+              ...(on ? S.tileOn : {}),
+              ...(trying ? S.tileTrying : {})
+            }}
+            onClick={() => (own ? onEquip(item.id) : onTry(item.id))}
+            // A message reveal plays once; hovering its tile plays it again.
+            onMouseEnter={e => slot === 'message' && replayPreview(e.currentTarget)}
+          >
+            <Html
+              html={preview(item.id)}
+              style={{ ...S.tilePv, ...colour, opacity: own ? 1 : 0.55 }}
+            />
+            <span style={{ ...S.tileName, color: own ? undefined : 'var(--color-text-muted)' }}>
+              {!own && <Icon name="lock" size={12} />}
+              {item.label}
+            </span>
+            {!own && <span style={S.tileEarn}>{item.earn}</span>}
+          </button>
+        )
+      })}
+    </div>
   )
 }

package/src/components/AvatarPicker.tsx CHANGED Viewed

@@ -7,8 +7,9 @@
  * protocol cannot drift from the callback page).
  *
  * Everything happens in place: picking, uploading and removing are requests
- * from here. Linking Discord or Steam lives in the popout's Account tab
- * (LinkedAccounts); a linked account's picture is a choice here.
+ * from here. Discord and Steam are managed in the popout's Account tab
+ * (LinkedAccounts); one not linked yet can also be linked from its tile here,
+ * with the same consent step, and its picture is then worn.
  *
  * AvatarBuilder owns the settings and the character table and loads them only
  * when the dialog opens; this component draws them and sends changes through
@@ -21,6 +22,7 @@
 import React, { useEffect, useState } from 'react'
 import { type AvatarSettings, type AvatarSource } from '@wolffm/prefs-client/avatar'
 import { avatarClient, portraitUrl, type CharacterSet } from '../lib/avatarData'
+import { LinkConsent, linkAndWear } from './LinkedAccounts'
 const LABEL: Record<AvatarSource, string> = {
   sprite: 'Character',
@@ -40,7 +42,12 @@ const S = {
     gap: 4,
     padding: 6,
     borderRadius: 8,
-    border: '1px solid var(--color-border)',
+    // Longhands, not the `border` shorthand: the selected styles override
+    // borderColor, and when one comes off React clears borderColor to '', which
+    // would reset it to currentColor and leave a text-coloured ring behind.
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: 'var(--color-border)',
     background: 'var(--color-bg)',
     color: 'var(--color-text)',
     fontSize: '0.72rem',
@@ -128,11 +135,10 @@ export function AvatarPicker({ settings, sets, busy, run }: AvatarPickerProps) {
   }
   const shown = settings.avatar
   const current = sets?.[setIdx]
-  // The tab on show. Picking an available source also wears it; Upload opens
-  // with nothing uploaded yet, to choose a file.
+  // The tab on show. Picking an available source also wears it; one that is
+  // not yet opens to get it: Upload to choose a file, Discord or Steam to link.
   const [view, setView] = useState<AvatarSource>(shown.source)
   useEffect(() => setView(shown.source), [shown.source])
-  const openable = (src: AvatarSource) => src === 'upload' || available[src]
   return (
     <div style={S.stack}>
@@ -149,13 +155,8 @@ export function AvatarPicker({ settings, sets, busy, run }: AvatarPickerProps) {
             type="button"
             role="radio"
             aria-checked={view === src}
-            disabled={busy || !openable(src)}
-            title={openable(src) ? undefined : `Link ${LABEL[src]} under Settings › Account first`}
-            style={{
-              ...S.source,
-              ...(view === src ? S.sourceOn : {}),
-              opacity: openable(src) ? 1 : 0.5
-            }}
+            disabled={busy}
+            style={{ ...S.source, ...(view === src ? S.sourceOn : {}) }}
             onClick={() => {
               setView(src)
               if (available[src] && shown.source !== src) {
@@ -213,6 +214,23 @@ export function AvatarPicker({ settings, sets, busy, run }: AvatarPickerProps) {
           <span className="settings-popout__hint">…</span>
         ))}
+      {(view === 'discord' || view === 'steam') &&
+        !available[view] &&
+        (!settings.providers[view] ? (
+          <span className="settings-popout__hint">{LABEL[view]} is not available yet.</span>
+        ) : settings.linked[view] ? (
+          <span className="settings-popout__hint">Your {LABEL[view]} account has no picture.</span>
+        ) : (
+          <LinkConsent
+            key={view}
+            provider={view}
+            busy={busy}
+            onLink={() => {
+              run(() => linkAndWear(view)).catch(reportErr)
+            }}
+          />
+        ))}
       {view === 'upload' && (
         <div style={S.line}>
           <span className="settings-popout__label" style={S.grow}>

package/src/components/LinkedAccounts.tsx CHANGED Viewed

@@ -51,6 +51,60 @@ const S = {
   list: { margin: 0, paddingLeft: 18, fontSize: '0.75rem', lineHeight: 1.45 }
 } satisfies Record<string, React.CSSProperties>
+/**
+ * Link `provider` in a popup, and wear its picture when it came back with one:
+ * linking from either place means "use this". Call it inside the click, with
+ * nothing awaited first — the popup opens before its first await, which is
+ * what popup blockers allow.
+ */
+export function linkAndWear(provider: LinkProvider): Promise<AvatarSettings> {
+  return avatarClient
+    .linkInPopup(provider)
+    .then(next => (next.linked[provider]?.avatarUrl ? avatarClient.choose(provider) : next))
+}
+/**
+ * What linking reads and keeps, then Continue. Shared by Account → Linked
+ * accounts and the avatar dialog's Picture tab, so the consent is one text.
+ */
+export function LinkConsent({
+  provider,
+  busy,
+  onLink,
+  onCancel
+}: {
+  provider: LinkProvider
+  busy: boolean
+  /** Must open the popup synchronously: call {@link linkAndWear} directly. */
+  onLink: () => void
+  onCancel?: () => void
+}) {
+  return (
+    <div style={S.stack}>
+      <ul style={S.list}>
+        {CONSENT[provider].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={onLink}
+        >
+          {CONSENT[provider].go}
+        </button>
+        {onCancel && (
+          <button type="button" className="settings-popout__btn" onClick={onCancel}>
+            Cancel
+          </button>
+        )}
+      </span>
+    </div>
+  )
+}
 export function LinkedAccounts() {
   const [settings, setSettings] = useState<AvatarSettings | null>(null)
   const [busy, setBusy] = useState(false)
@@ -92,17 +146,6 @@ export function LinkedAccounts() {
     )
   }
-  // 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 => {
@@ -144,26 +187,15 @@ export function LinkedAccounts() {
       })}
       {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>
+        <LinkConsent
+          provider={consent}
+          busy={busy}
+          onLink={() => {
+            setConsent(null)
+            void run(() => linkAndWear(consent))
+          }}
+          onCancel={() => setConsent(null)}
+        />
       )}
       {error && (