From 1ee3cbbe5aa05c7d96b50e3ab4b13a10532e90d3 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 18 Aug 2026 15:32:03 +0000 Subject: [PATCH] =?UTF-8?q?Fix=20blank=20bind=20button=20=E2=80=94=20fa-ma?= =?UTF-8?q?sks=20does=20not=20exist=20in=20Font=20Awesome=206=20Free?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The "auto-start for characters" button on each queue card rendered as an empty outline: correct size, correct hover, no glyph. Reported with a screenshot showing the gap between the edit and duplicate buttons. Cause: v1.3.0 used `fa-masks`. SillyTavern bundles Font Awesome 6 Free, and FA6 renamed that icon to `fa-masks-theater` — the bare `fa-masks` alias only exists in FA6 Pro. A missing icon produces no console error and no visible fallback, so it fails completely silently. Verified against ST's own public/css/fontawesome.min.css: `.fa-masks:before` is absent, `.fa-masks-theater:before` is present. Replaced with icons that resolve, chosen per context rather than uniformly: queue-card button fa-users opens a multi-character picker queue-card chip fa-users shows a count of bound characters Chamber tab row fa-user refers to one specific character `fa-masks-theater` would have preserved the original look, but a plain person glyph reads better at 14px in a row of single-concept icons, and the user asked for a character icon. Audited every icon the extension references (25 across js/css) against the bundled stylesheet — `fa-masks` was the only broken one, and it was introduced by v1.3.0. Everything predating it is fine. Added an "Icons — Font Awesome 6 Free only" section to CLAUDE.md with the grep to check a name before using it, since nothing in the toolchain catches this class of mistake. Noted the specific trap that `fa-theater-masks` DOES resolve while `fa-masks` does not, so "the FA5 name works" is not a usable rule. Docs referring to "the masks icon" updated to "the characters icon". Patch bump to 1.3.1 — 1.3.0 shipped with a visibly broken control. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01J5wRPLqtW32eqWY9hi9uFt --- CLAUDE.md | 37 +++++++++++++++++++++++++++++++++---- README.md | 6 +++--- TESTING.md | 2 +- manifest.json | 2 +- package.json | 2 +- src/ui/tabs/chamber.js | 2 +- src/ui/tabs/queues.js | 4 ++-- 7 files changed, 42 insertions(+), 13 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 8dcbfb0..79da8d2 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -2,7 +2,7 @@ A SillyTavern extension that rotates between connection profiles during roleplay — sequentially or by weighted random — so the user can mix models, parameters, and providers throughout a chat without manually switching. -**Version:** 1.3.0 +**Version:** 1.3.1 **License:** AGPL-3.0 (matches SillyTavern) **Target:** SillyTavern 1.12+ (uses Connection Manager / connection profiles API) **Repo name:** `SillyTavern-Roulette` @@ -260,8 +260,8 @@ the removed queue (done inline in `state.js` — routing it through `state.js`). **UI.** Two surfaces, one map: a contextual `Auto-start for ` select -in the Chamber tab, and a masks-icon character multi-select on each queue card -in the Queues tab (`src/ui/bindingPicker.js`). A character has at most one +in the Chamber tab, and a characters-icon multi-select on each queue card in +the Queues tab (`src/ui/bindingPicker.js`). A character has at most one queue, so the picker calls out characters already bound elsewhere rather than silently rebinding them. @@ -356,7 +356,7 @@ dependencies — `node --test` is built into Node. "js": "index.js", "css": "style.css", "author": "Hyperion Blackthorne", - "version": "1.3.0", + "version": "1.3.1", "homePage": "https://github.com/hype-hosting/SillyTavern-Roulette", "auto_update": true, "hooks": { "activate": "init" } @@ -415,6 +415,35 @@ Before firing `/profile `, verify the profile still exists. If it doesn't, ### Persistence timing Persist `chat_metadata.roulette` after every state mutation (post-decrement, post-switch). Persist `extension_settings.roulette` on queue create/edit/delete. Use the debounced helpers; don't write synchronously on every message. +### Icons — Font Awesome 6 Free only + +ST bundles **Font Awesome 6 Free** (`public/css/fontawesome.min.css`). Only +names present in that file render; anything else produces a correctly-sized +but **completely empty** button, with no console error to point at it. + +Two traps: + +- **FA5 names that FA6 renamed.** `fa-masks` shipped blank in v1.3 for exactly + this reason — FA6 renamed it `fa-masks-theater`, and the bare alias only + exists in FA6 *Pro*. (Confusingly `fa-theater-masks` *does* resolve, so + "the FA5 name works" is not a reliable rule.) +- **Pro-only icons.** Plenty of names in Font Awesome's search UI are Pro; the + free build is a subset. + +Before using an icon, grep the bundled stylesheet for it: + +``` +grep -c '\.fa-users:before' public/css/fontawesome.min.css +``` + +To audit every icon the extension references at once: + +``` +grep -rhoE 'fa-[a-z0-9-]+' --include=*.js --include=*.css . | sort -u +``` + +then check each against that stylesheet. + ### Style scoping All CSS rules under a single root class (e.g. `.roulette-extension`) to avoid bleeding into ST's UI. The drawer + pill use ST CSS variables (`--SmartThemeBodyColor` etc.) so they blend with chat chrome. The modal owns its own `--roulette-*` token set scoped to `.roulette-extension`, so its identity is stable regardless of ST theme. The user can override `--roulette-accent`, `--roulette-glow`, and `--roulette-glow-strong` via the Settings tab; `applyUiSettings()` (in `state.js`) writes them into a single `