forgejo_admin/westside-app

Fork 0

Westside playground complete overhaul — unified HTML/CSS mock of entire site #84

New issue

Closed

opened 2026-03-26 14:36:27 +00:00 by forgejo_admin · 1 comment

forgejo_admin commented

2026-03-26 14:36:27 +00:00

Owner

Type

Feature

Lineage

Standalone — complete playground overhaul as source of truth for all westside pages before Svelte promotion.

Repo

forgejo_admin/westside-playground

User Story

As a superuser, I want every page/route of the westside site mocked as plain HTML/CSS in the playground with a single unified design system so that I can review and iterate on the full site experience before any Svelte or SvelteKit work begins.

story:WS-S26, story:prototype-iterate

Context

The westside-playground was built incrementally during Phase 10 and is now a mess: two different CSS files (app.css for authenticated pages, style.css for public pages), 6 missing routes, stale tryout content, no auth flow mock, no component documentation. The playground is supposed to be the source of truth — the first stage in the pipeline (playground → svelte → app) — but it can't serve that role in its current state.

This is a complete overhaul. One CSS file. One JS file. One HTML file per route. Every user flow represented. Component docs before Svelte wiring.

File Targets

Single CSS file: shared/style.css — unified design system (red/black westside brand for public + authenticated views). Merge the best of current app.css (2621 lines, authenticated layouts) and style.css (804 lines, public brand) into one coherent system.

Single JS file: shared/app.js — mobile nav toggle + any light interactivity. No frameworks.

HTML pages (one per production route):

Public (no auth):

index.html — landing page (no tryout CTA when tryouts inactive)
staff.html — coaching staff with cards
sponsors.html — sponsors + partners
schedule.html — travel/local team schedules (NEW)
login.html — mock of Keycloak-themed login page (redirect representation)
forgot-password.html — mock of Keycloak forgot password flow
reset-password.html — mock of Keycloak reset password flow
register.html — registration flow (updated, no stale tryout refs)

Authenticated (admin):

admin.html — admin dashboard
admin-players.html — player management
admin-teams.html — team management

Authenticated (coach):

coach.html — coach dashboard
coach-profile.html — individual coach view

Authenticated (parent):

parent.html — parent dashboard / my-players
player-profile.html — player detail view
billing.html — billing / payment status

Authenticated (checkout):

checkout.html — Stripe checkout flow
checkout-success.html — payment confirmation
checkout-cancel.html — payment cancelled
jersey.html — jersey selection
jersey-success.html — jersey payment confirmation

Component docs: Each HTML page should have an HTML comment block at the top documenting:

Route this mocks (e.g. /admin/players)
Auth requirement (public / admin / coach / parent)
Data contracts (what API data this page consumes, as comments)
Nav state (which nav item is active)

Cleanup:

Remove tryouts.html (cancelled, no current tryout)
Remove westside-index.html and original-index.html (stale copies)
Remove shared/westside-style.css (dead file)
Remove css/ directory (merged into shared/style.css)

Acceptance Criteria

Single shared/style.css — one unified design system
Single shared/app.js — one JS file
One HTML file per production route (21 pages)
Every page has component doc comment at top
Consistent nav across all pages (public nav vs authenticated nav)
Auth flow mocked: login → Keycloak themed page → redirect to dashboard
No stale tryout references anywhere
All pages viewable on phone at playground URL
All nav links work across all pages

Test Expectations

Visual: every page renders correctly on 390px mobile viewport
Every nav link resolves to an existing HTML file
grep for "tryout" returns zero hits (except schedule TBD references)
No automated tests (static HTML)

Constraints

Plain HTML/CSS/JS only — no build tools, no frameworks
Mobile-first (90%+ of users on phone)
This is the source of truth — Svelte promotion happens AFTER Lucas approves every page on phone
Red/black westside brand for public AND authenticated views (unified)
Keycloak login page is a mock — HTML that represents what the themed Keycloak page looks like

Checklist

CSS unified
All 21 pages created
Component docs on every page
Stale files removed
Lucas reviews full flow on phone
Approved for Svelte promotion

project-westside-basketball — project page
arch-auth-westside-basketball — auth architecture (Keycloak OIDC flow)
project-svelte-playground — next stage after playground approval

### Type Feature ### Lineage Standalone — complete playground overhaul as source of truth for all westside pages before Svelte promotion. ### Repo `forgejo_admin/westside-playground` ### User Story As a superuser, I want every page/route of the westside site mocked as plain HTML/CSS in the playground with a single unified design system so that I can review and iterate on the full site experience before any Svelte or SvelteKit work begins. story:WS-S26, story:prototype-iterate ### Context The westside-playground was built incrementally during Phase 10 and is now a mess: two different CSS files (app.css for authenticated pages, style.css for public pages), 6 missing routes, stale tryout content, no auth flow mock, no component documentation. The playground is supposed to be the source of truth — the first stage in the pipeline (playground → svelte → app) — but it can't serve that role in its current state. This is a complete overhaul. One CSS file. One JS file. One HTML file per route. Every user flow represented. Component docs before Svelte wiring. ### File Targets **Single CSS file:** `shared/style.css` — unified design system (red/black westside brand for public + authenticated views). Merge the best of current `app.css` (2621 lines, authenticated layouts) and `style.css` (804 lines, public brand) into one coherent system. **Single JS file:** `shared/app.js` — mobile nav toggle + any light interactivity. No frameworks. **HTML pages (one per production route):** Public (no auth): - `index.html` — landing page (no tryout CTA when tryouts inactive) - `staff.html` — coaching staff with cards - `sponsors.html` — sponsors + partners - `schedule.html` — travel/local team schedules (NEW) - `login.html` — mock of Keycloak-themed login page (redirect representation) - `forgot-password.html` — mock of Keycloak forgot password flow - `reset-password.html` — mock of Keycloak reset password flow - `register.html` — registration flow (updated, no stale tryout refs) Authenticated (admin): - `admin.html` — admin dashboard - `admin-players.html` — player management - `admin-teams.html` — team management Authenticated (coach): - `coach.html` — coach dashboard - `coach-profile.html` — individual coach view Authenticated (parent): - `parent.html` — parent dashboard / my-players - `player-profile.html` — player detail view - `billing.html` — billing / payment status Authenticated (checkout): - `checkout.html` — Stripe checkout flow - `checkout-success.html` — payment confirmation - `checkout-cancel.html` — payment cancelled - `jersey.html` — jersey selection - `jersey-success.html` — jersey payment confirmation **Component docs:** Each HTML page should have an HTML comment block at the top documenting: - Route this mocks (e.g. `/admin/players`) - Auth requirement (public / admin / coach / parent) - Data contracts (what API data this page consumes, as comments) - Nav state (which nav item is active) **Cleanup:** - Remove `tryouts.html` (cancelled, no current tryout) - Remove `westside-index.html` and `original-index.html` (stale copies) - Remove `shared/westside-style.css` (dead file) - Remove `css/` directory (merged into shared/style.css) ### Acceptance Criteria - [ ] Single `shared/style.css` — one unified design system - [ ] Single `shared/app.js` — one JS file - [ ] One HTML file per production route (21 pages) - [ ] Every page has component doc comment at top - [ ] Consistent nav across all pages (public nav vs authenticated nav) - [ ] Auth flow mocked: login → Keycloak themed page → redirect to dashboard - [ ] No stale tryout references anywhere - [ ] All pages viewable on phone at playground URL - [ ] All nav links work across all pages ### Test Expectations - [ ] Visual: every page renders correctly on 390px mobile viewport - [ ] Every nav link resolves to an existing HTML file - [ ] grep for "tryout" returns zero hits (except schedule TBD references) - No automated tests (static HTML) ### Constraints - Plain HTML/CSS/JS only — no build tools, no frameworks - Mobile-first (90%+ of users on phone) - This is the source of truth — Svelte promotion happens AFTER Lucas approves every page on phone - Red/black westside brand for public AND authenticated views (unified) - Keycloak login page is a mock — HTML that represents what the themed Keycloak page looks like ### Checklist - [ ] CSS unified - [ ] All 21 pages created - [ ] Component docs on every page - [ ] Stale files removed - [ ] Lucas reviews full flow on phone - [ ] Approved for Svelte promotion ### Related - `project-westside-basketball` — project page - `arch-auth-westside-basketball` — auth architecture (Keycloak OIDC flow) - `project-svelte-playground` — next stage after playground approval

forgejo_admin commented

2026-03-26 14:40:42 +00:00

Author

Owner

Scope Review: NEEDS_REFINEMENT

Review note: review-380-2026-03-25

Ticket has thorough scope but 7 issues must be resolved before agent execution:

CRITICAL: Wrong repo -- issue filed on westside-app but all work targets westside-playground (which exists on Forgejo, repo id 40). Agent will clone wrong repo.
3 unmapped existing files -- signin.html, success.html, team.html exist but are not in the 21-page list. No instructions on keep/remove/rename.
JS strategy undefined -- shared/app.js is 409 lines; ticket says "single light interactivity JS" without specifying what happens to it. Also missing cleanup targets for shared/westside-main.js and js/main.js (duplicates).
Undocumented dependencies -- Board #355 (Coach Manny on staff page) and #356 (travel schedule page) directly modify pages this ticket rebuilds. Phase 15 (in_progress) consumes playground as source.
Decomposition recommended -- 4 workstreams (CSS merge, public pages, checkout pages, cleanup) in one 8pt ticket. CSS merge needs phone review before new pages build on it.
Auth mock mechanism unspecified -- How do static HTML pages represent Keycloak redirects?
Component docs partially exist -- 13/18 pages already have @route/@auth docs; ticket could mislead agent into rewriting them.

## Scope Review: NEEDS_REFINEMENT Review note: `review-380-2026-03-25` Ticket has thorough scope but 7 issues must be resolved before agent execution: - **CRITICAL: Wrong repo** -- issue filed on `westside-app` but all work targets `westside-playground` (which exists on Forgejo, repo id 40). Agent will clone wrong repo. - **3 unmapped existing files** -- `signin.html`, `success.html`, `team.html` exist but are not in the 21-page list. No instructions on keep/remove/rename. - **JS strategy undefined** -- `shared/app.js` is 409 lines; ticket says "single light interactivity JS" without specifying what happens to it. Also missing cleanup targets for `shared/westside-main.js` and `js/main.js` (duplicates). - **Undocumented dependencies** -- Board #355 (Coach Manny on staff page) and #356 (travel schedule page) directly modify pages this ticket rebuilds. Phase 15 (in_progress) consumes playground as source. - **Decomposition recommended** -- 4 workstreams (CSS merge, public pages, checkout pages, cleanup) in one 8pt ticket. CSS merge needs phone review before new pages build on it. - **Auth mock mechanism unspecified** -- How do static HTML pages represent Keycloak redirects? - **Component docs partially exist** -- 13/18 pages already have @route/@auth docs; ticket could mislead agent into rewriting them.