feat: Kings/Queens toggle on Schedule page (#95)

forgejo_admin commented

2026-03-27 00:37:59 +00:00

Owner

Summary

Adds Kings/Queens program toggle to the Schedule page, matching the pattern from Tryouts
Wraps existing 5 Kings team cards in toggle; adds Queens placeholder section
No JS changes needed — initKQToggle() in app.js auto-initializes

Changes

schedule.html: Added .kq-toggle button group after hero. Wrapped Travel Teams (3 cards) and Local Teams (2 cards) in data-program-content="kings". Added Queens placeholder in data-program-content="queens". Practice Info stays shared outside toggle. Added @toggle annotation to component doc comment.

Test Plan

Open schedule.html — Kings toggle active by default, all 5 team cards visible
Click "Queens" — Kings cards hide, Queens placeholder appears
Click "Kings" — Kings cards return
Navigate to Tryouts and back — toggle state persists via localStorage
Practice Info section and footer visible regardless of toggle state

Review Checklist

Passed automated review-fix loop
No secrets committed
No unnecessary file changes
Commit messages are descriptive

Closes forgejo_admin/westside-app#95
westside-app — the project this work belongs to

## Summary - Adds Kings/Queens program toggle to the Schedule page, matching the pattern from Tryouts - Wraps existing 5 Kings team cards in toggle; adds Queens placeholder section - No JS changes needed — initKQToggle() in app.js auto-initializes ## Changes - `schedule.html`: Added `.kq-toggle` button group after hero. Wrapped Travel Teams (3 cards) and Local Teams (2 cards) in `data-program-content="kings"`. Added Queens placeholder in `data-program-content="queens"`. Practice Info stays shared outside toggle. Added `@toggle` annotation to component doc comment. ## Test Plan - [ ] Open schedule.html — Kings toggle active by default, all 5 team cards visible - [ ] Click "Queens" — Kings cards hide, Queens placeholder appears - [ ] Click "Kings" — Kings cards return - [ ] Navigate to Tryouts and back — toggle state persists via localStorage - [ ] Practice Info section and footer visible regardless of toggle state ## Review Checklist - [ ] Passed automated review-fix loop - [ ] No secrets committed - [ ] No unnecessary file changes - [ ] Commit messages are descriptive ## Related Notes - Closes forgejo_admin/westside-app#95 - `westside-app` — the project this work belongs to

forgejo_admin added 1 commit

2026-03-27 00:37:59 +00:00

feat: add Kings/Queens toggle to Schedule page d1b5bfd5e8

Wraps existing 5 Kings teams (Travel + Local) in data-program-content="kings"
and adds Queens placeholder in data-program-content="queens". Reuses the same
toggle pattern from tryouts.html — initKQToggle() auto-initializes via app.js.
Practice Info section stays shared outside the toggle.

Closes forgejo_admin/westside-app#95

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin commented

2026-03-27 00:38:20 +00:00

Author

Owner

Review: PASS

Files reviewed: schedule.html (1 file, +105/-75)

Findings: None. Clean implementation.

Toggle markup matches established pattern from tryouts.html
initKQToggle() in shared/app.js auto-initializes on DOMContentLoaded -- no JS changes needed
localStorage persistence shared across pages (intended behavior)
Practice Info and Footer remain outside toggle (shared content)
No secrets, no unnecessary file changes
Component doc comment updated with @toggle annotation

## Review: PASS **Files reviewed:** `schedule.html` (1 file, +105/-75) **Findings:** None. Clean implementation. - Toggle markup matches established pattern from `tryouts.html` - `initKQToggle()` in `shared/app.js` auto-initializes on DOMContentLoaded -- no JS changes needed - localStorage persistence shared across pages (intended behavior) - Practice Info and Footer remain outside toggle (shared content) - No secrets, no unnecessary file changes - Component doc comment updated with `@toggle` annotation

forgejo_admin commented

2026-03-27 00:49:33 +00:00

Author

Owner

PR #42 Review

DOMAIN REVIEW

Tech stack: Static HTML playground page (vanilla HTML/CSS/JS). The toggle functionality relies on initKQToggle() in shared/app.js, which auto-initializes on DOMContentLoaded by querying .kq-toggle-btn elements. No JS changes required -- correct.

Toggle markup: The kq-toggle button group and data-program-content attribute pattern exactly match the established pattern from tryouts.html (PR #41). The toggle HTML is identical:

<div class="kq-toggle">
  <button class="kq-toggle-btn active" data-program="kings">Kings</button>
  <button class="kq-toggle-btn" data-program="queens">Queens</button>
</div>

Structural choice: In tryouts.html, the toggle and content divs are siblings inside one <section> container. In schedule.html, the toggle gets its own section and the data-program-content wrappers span entire <section> elements (including the section-dark local teams block). This is the correct approach here -- wrapping at the section level preserves the alternating light/dark styling that schedule.html uses. The initKQToggle() function queries [data-program-content] globally, so placement relative to the toggle element does not matter.

Content integrity: All 5 Kings team cards (3 travel, 2 local) are preserved with identical content. Practice Info section and footer remain outside both toggle wrappers -- shared content is correctly scoped.

Queens placeholder: Minimal but present. Contains a section header with "Queens Schedule" and "coming soon" text. Appropriate for a first pass.

@toggle annotation: Added to the component doc comment at the top of the file. Good documentation practice, consistent with how @route, @auth, @nav, and @api are used.

Accessibility: The toggle buttons lack ARIA attributes (role="tablist", aria-pressed, etc.). This is pre-existing from the tryouts.html pattern, not a regression introduced by this PR. Flagged as a nit for a future accessibility pass.

BLOCKERS

None.

This is a static HTML playground page. No user input handling, no auth paths, no secrets, no backend interaction. The generic blocker criteria (unvalidated input, secrets, duplicated auth logic, zero test coverage for new functionality) do not apply to static HTML prototyping pages.

NITS

Accessibility (pre-existing, not a regression): The Kings/Queens toggle buttons across all pages (tryouts, schedule) have no ARIA semantics. Consider adding role="tablist" on the container, role="tab" + aria-selected on buttons, and role="tabpanel" on content divs in a future pass. This would be a change to initKQToggle() in app.js, not to individual pages.
Empty <div class="container"> wrapper: The toggle section has <section class="section"><div class="container"> wrapping just the toggle div, then closes with an empty line before </div></section>. The extra whitespace is cosmetic only but could be tightened.

SOP COMPLIANCE

Branch named after issue: 95-schedule-toggle references westside-app#95
PR body follows template: Summary, Changes, Test Plan, Review Checklist, Related sections present
Related references parent issue: "Closes forgejo_admin/westside-app#95"
No plan slug expected (context confirms none)
No secrets committed
No unnecessary file changes: 1 file changed (schedule.html), exactly as scoped
Commit messages: PR title is descriptive ("feat: Kings/Queens toggle on Schedule page (#95)")

PROCESS OBSERVATIONS

Scope discipline: Exactly 1 file changed. No nav changes (Schedule already in nav). No JS changes (reuses existing initKQToggle). Clean scope.
Pattern consistency: Reuses the toggle foundation from PR #41 without duplication. The HTML markup is copy-paste identical for the toggle controls, and initKQToggle() handles all wiring. This is the right pattern for playground prototyping.
Deployment risk: Low. Static HTML change with no backend dependencies.

VERDICT: APPROVED

## PR #42 Review ### DOMAIN REVIEW **Tech stack**: Static HTML playground page (vanilla HTML/CSS/JS). The toggle functionality relies on `initKQToggle()` in `shared/app.js`, which auto-initializes on DOMContentLoaded by querying `.kq-toggle-btn` elements. No JS changes required -- correct. **Toggle markup**: The `kq-toggle` button group and `data-program-content` attribute pattern exactly match the established pattern from tryouts.html (PR #41). The toggle HTML is identical: ```html <div class="kq-toggle"> <button class="kq-toggle-btn active" data-program="kings">Kings</button> <button class="kq-toggle-btn" data-program="queens">Queens</button> </div> ``` **Structural choice**: In tryouts.html, the toggle and content divs are siblings inside one `<section>` container. In schedule.html, the toggle gets its own section and the `data-program-content` wrappers span entire `<section>` elements (including the `section-dark` local teams block). This is the correct approach here -- wrapping at the section level preserves the alternating light/dark styling that schedule.html uses. The `initKQToggle()` function queries `[data-program-content]` globally, so placement relative to the toggle element does not matter. **Content integrity**: All 5 Kings team cards (3 travel, 2 local) are preserved with identical content. Practice Info section and footer remain outside both toggle wrappers -- shared content is correctly scoped. **Queens placeholder**: Minimal but present. Contains a section header with "Queens Schedule" and "coming soon" text. Appropriate for a first pass. **`@toggle` annotation**: Added to the component doc comment at the top of the file. Good documentation practice, consistent with how `@route`, `@auth`, `@nav`, and `@api` are used. **Accessibility**: The toggle buttons lack ARIA attributes (`role="tablist"`, `aria-pressed`, etc.). This is pre-existing from the tryouts.html pattern, not a regression introduced by this PR. Flagged as a nit for a future accessibility pass. ### BLOCKERS None. This is a static HTML playground page. No user input handling, no auth paths, no secrets, no backend interaction. The generic blocker criteria (unvalidated input, secrets, duplicated auth logic, zero test coverage for new functionality) do not apply to static HTML prototyping pages. ### NITS 1. **Accessibility (pre-existing, not a regression)**: The Kings/Queens toggle buttons across all pages (tryouts, schedule) have no ARIA semantics. Consider adding `role="tablist"` on the container, `role="tab"` + `aria-selected` on buttons, and `role="tabpanel"` on content divs in a future pass. This would be a change to `initKQToggle()` in app.js, not to individual pages. 2. **Empty `<div class="container">` wrapper**: The toggle section has `<section class="section"><div class="container">` wrapping just the toggle div, then closes with an empty line before `</div></section>`. The extra whitespace is cosmetic only but could be tightened. ### SOP COMPLIANCE - [x] Branch named after issue: `95-schedule-toggle` references westside-app#95 - [x] PR body follows template: Summary, Changes, Test Plan, Review Checklist, Related sections present - [x] Related references parent issue: "Closes forgejo_admin/westside-app#95" - [x] No plan slug expected (context confirms none) - [x] No secrets committed - [x] No unnecessary file changes: 1 file changed (`schedule.html`), exactly as scoped - [x] Commit messages: PR title is descriptive ("feat: Kings/Queens toggle on Schedule page (#95)") ### PROCESS OBSERVATIONS - **Scope discipline**: Exactly 1 file changed. No nav changes (Schedule already in nav). No JS changes (reuses existing `initKQToggle`). Clean scope. - **Pattern consistency**: Reuses the toggle foundation from PR #41 without duplication. The HTML markup is copy-paste identical for the toggle controls, and `initKQToggle()` handles all wiring. This is the right pattern for playground prototyping. - **Deployment risk**: Low. Static HTML change with no backend dependencies. ### VERDICT: APPROVED