Westside Playground Overhaul — Work Decomposition

westside-playground-overhaul Doc

active

Project

Complete HTML/CSS mock of the entire westside site in westside-playground. Single CSS file, single JS file, one HTML page per production route, component docs on every page. This is the source of truth — nothing promotes to Svelte until Lucas approves every page on phone.

Pipeline Stage

Stage 1: westside-playground (HTML/CSS) → Stage 2: svelte-playground/westside/ (Svelte) → Stage 3: westside-app (SvelteKit)

Parent Issue

westside-app #84 — decomposed into 4 sub-tickets below.

#	Ticket	Scope	arch:	story:	Depends On
1	CSS/JS unification	Merge app.css + style.css into single file. Single app.js. Cleanup dead files. Phone review gate.	landing-site	WS-S26	None (foundation)
2	Public pages	index, staff, sponsors, schedule, login mock, forgot-password mock, reset-password mock, register	landing-site	WS-S26, WS-S27	Sub-ticket 1
3	Authenticated pages	admin (3), coach (2), parent (2), billing, team, checkout flow (3), jersey flow (3)	westside-app	WS-S5, WS-S12, WS-S13, WS-S19	Sub-ticket 1
4	Cleanup + component docs	Remove stale files, add/verify component doc comments on all 24 pages, verify nav consistency	landing-site	WS-S26	Sub-tickets 2 + 3

Sequencing

Sub-ticket 1 must land and be phone-approved before 2 and 3 start. The unified CSS is the foundation — if it's wrong, everything built on it is wrong. Sub-tickets 2 and 3 can run in parallel after 1 is approved. Sub-ticket 4 runs last.

Auth Flow Mock

Keycloak login is a redirect. In the playground mock:

login.html — represents the Keycloak-themed login page (already branded in PR #130). Static HTML showing the login form UI. "Submit" links to the appropriate dashboard (admin.html, coach.html, or parent.html).
forgot-password.html — Keycloak's forgot password form. "Submit" links to a "check your email" confirmation.
reset-password.html — Keycloak's reset password form. "Submit" links to login.html.

These are UI mocks, not functional auth. The point is to verify the visual flow and page transitions.

Existing Work to Preserve

13 of 18 existing playground pages already have @route/@auth/@api doc comments. Don't overwrite — verify and update as needed.