Bug: Queens color switch not working — accent stays red instead of pink #116

New issue

Closed

opened 2026-03-27 07:26:26 +00:00 by forgejo_admin · 0 comments

forgejo_admin commented

2026-03-27 07:26:26 +00:00

Owner

Type

Bug

Lineage

Regression from PR #99 — playground has .queens-active CSS class that swaps --color-red to pink, but the JS to toggle this class wasn't promoted to SvelteKit.

Repo

forgejo_admin/westside-app

What Broke

When clicking the Queens tab on /schedule, /gear, /tryouts, or /teams, the accent color stays red (Kings color). Should switch to pink (#e91e8c) per the playground CSS .queens-active class.

Repro Steps

Navigate to https://westsidekingsandqueens.tail5b443a.ts.net/schedule
Click "Queens" tab
Observe: accent color remains red
Compare to https://playground.tail5b443a.ts.net/westside/schedule.html — playground correctly switches to pink

Expected Behavior

Queens tab active → accent color switches to pink. The CSS rule exists in app.css (line ~2905, .queens-active class). The missing piece is JS that adds/removes this class when the toggle is clicked.

Environment

All pages with Kings/Queens toggle: /schedule, /gear, /tryouts, /teams

File Targets

Files the agent should modify:

SvelteKit program store or layout component — add queens-active class to body/container when Queens is selected

Files the agent should NOT touch:

src/app.css — the CSS rule already exists, no changes needed
Playground — already works correctly

Acceptance Criteria

Queens tab → pink accent on all toggled pages
Kings tab → red accent (default, unchanged)
Color persists across page navigation (localStorage program store)

project-westside-basketball

### Type Bug ### Lineage Regression from PR #99 — playground has `.queens-active` CSS class that swaps `--color-red` to pink, but the JS to toggle this class wasn't promoted to SvelteKit. ### Repo `forgejo_admin/westside-app` ### What Broke When clicking the Queens tab on /schedule, /gear, /tryouts, or /teams, the accent color stays red (Kings color). Should switch to pink (`#e91e8c`) per the playground CSS `.queens-active` class. ### Repro Steps 1. Navigate to https://westsidekingsandqueens.tail5b443a.ts.net/schedule 2. Click "Queens" tab 3. Observe: accent color remains red 4. Compare to https://playground.tail5b443a.ts.net/westside/schedule.html — playground correctly switches to pink ### Expected Behavior Queens tab active → accent color switches to pink. The CSS rule exists in `app.css` (line ~2905, `.queens-active` class). The missing piece is JS that adds/removes this class when the toggle is clicked. ### Environment - All pages with Kings/Queens toggle: /schedule, /gear, /tryouts, /teams ### File Targets Files the agent should modify: - SvelteKit program store or layout component — add `queens-active` class to body/container when Queens is selected Files the agent should NOT touch: - `src/app.css` — the CSS rule already exists, no changes needed - Playground — already works correctly ### Acceptance Criteria - [ ] Queens tab → pink accent on all toggled pages - [ ] Kings tab → red accent (default, unchanged) - [ ] Color persists across page navigation (localStorage program store) ### Related - `project-westside-basketball`