feat: commerce page spec header, shared CSS/JS, DB schema gaps

forgejo_admin commented

2026-04-06 23:14:06 +00:00

Author

Contributor

PR #51 Review

DOMAIN REVIEW

Tech stack: Static HTML/CSS/JS playground prototype. No framework, no backend, no build step.

HTML structure: Well-organized with clear section comments. Three tabbed panels (jerseys, subscriptions, contracts) each with summary stats, filter buttons, and data tables. The data-label attributes on all <td> elements correctly support the mobile CSS ::before stacking pattern.

CSS quality: New styles appended to shared/style.css use design tokens consistently (--space-*, --font-size-*, --color-*, --radius, --transition-fast). New badge classes (badge-shipped, badge-past-due, badge-canceled) follow the existing badge pattern. Mobile responsive stacking at 600px breakpoint is solid.

JS quality: Tab switching and per-panel filtering logic is clean. Guarded by .tab-bar presence check so it only initializes on the commerce page. The btn.closest('.filter-tabs') scoping ensures filter clicks only affect their own panel. No global state leaks.

PII concern: The prototype contains what appear to be real player names, parent names, and phone numbers (e.g., 385-558-1043, 801-633-2851, 760-885-5818). This is a playground repo served on a Tailscale funnel, so exposure is limited, but real PII in committed source code is a risk vector. If these are real contact numbers, they should be replaced with synthetic data. If they are already synthetic, disregard.

BLOCKERS

None -- with the caveat below on PII.

This is a static HTML playground prototype. The BLOCKER criteria (test coverage, unvalidated user input, secrets, DRY auth violations) do not apply to a read-only prototype with no backend, no user input processing, and no auth logic. The "test plan" is manual visual verification, which is appropriate for this domain.

Conditional BLOCKER -- PII: If the phone numbers and parent names in the HTML are real personal data, they must be replaced with synthetic values before merge. Real PII in source control is a data handling violation. If they are already fabricated, this is not a blocker.

NITS

Semantic badge mismatch in Contracts tab: Signed contracts use class="badge badge-paid" (e.g., <span class="badge badge-paid">Signed</span>). This reuses the jersey payment badge for contract signing status. A badge-signed class would be semantically clearer and prevent confusion when these patterns promote to SvelteKit components.
Missing ARIA attributes on tabs: Tab buttons lack role="tab", aria-selected, and aria-controls. Tab panels lack role="tabpanel" and aria-labelledby. Filter buttons similarly lack ARIA semantics. Acceptable for a prototype but should be addressed before promotion to westside-app.
Hardcoded 2px in mobile responsive: padding: 2px var(--space-sm); in the @media (max-width: 600px) block uses a magic number instead of a design token.
CSS token existence unverified: The new badge classes reference --color-blue-bg, --color-blue-border, --color-yellow-bg, --color-yellow-border, --color-danger-bg, --color-danger-border. I cannot verify these exist in the CSS variable definitions without a local checkout of the repo. If any are undefined, the badges will render without background/border colors.
Opt-Out player marked as "Paid": Ayvah Apaisa has Option: Opt-Out but Status: Paid. This may be intentionally reflecting the data (opt-out fee was paid), but it reads ambiguously in the UI. Worth confirming the data model intent.

SOP COMPLIANCE

Branch named after issue (50-commerce-spec-refactor)
PR body follows template (Summary, Changes, Test Plan, Related)
Related references parent issue (Closes #50)
Related references plan slug -- N/A, no plan slug provided (user confirmed none)
No secrets committed
No unnecessary file changes (only commerce.html, shared/style.css, shared/app.js)
Commit scope matches issue scope

PROCESS OBSERVATIONS

The @-comment spec header at the top of commerce.html is thorough -- documents route, auth, complexity, API contract, state, interactivity, and known gaps. This is a strong pattern for playground-to-production promotion.
The PR body review checklist (zero inline styles, zero inline scripts, append-only shared files) demonstrates disciplined scope control.
Hardcoded summary counts and truncated row sets (19 jersey rows vs. "59" All count) are expected for a prototype. The spec header @gaps section correctly documents missing features.

VERDICT: APPROVED

Approved with the conditional PII check: confirm the phone numbers and parent names are synthetic before merging. If real, replace with fabricated data first. All nits are non-blocking and appropriate to address during SvelteKit promotion.

## PR #51 Review ### DOMAIN REVIEW **Tech stack**: Static HTML/CSS/JS playground prototype. No framework, no backend, no build step. **HTML structure**: Well-organized with clear section comments. Three tabbed panels (jerseys, subscriptions, contracts) each with summary stats, filter buttons, and data tables. The `data-label` attributes on all `<td>` elements correctly support the mobile CSS `::before` stacking pattern. **CSS quality**: New styles appended to `shared/style.css` use design tokens consistently (`--space-*`, `--font-size-*`, `--color-*`, `--radius`, `--transition-fast`). New badge classes (`badge-shipped`, `badge-past-due`, `badge-canceled`) follow the existing badge pattern. Mobile responsive stacking at 600px breakpoint is solid. **JS quality**: Tab switching and per-panel filtering logic is clean. Guarded by `.tab-bar` presence check so it only initializes on the commerce page. The `btn.closest('.filter-tabs')` scoping ensures filter clicks only affect their own panel. No global state leaks. **PII concern**: The prototype contains what appear to be real player names, parent names, and phone numbers (e.g., `385-558-1043`, `801-633-2851`, `760-885-5818`). This is a playground repo served on a Tailscale funnel, so exposure is limited, but real PII in committed source code is a risk vector. If these are real contact numbers, they should be replaced with synthetic data. If they are already synthetic, disregard. ### BLOCKERS **None** -- with the caveat below on PII. This is a static HTML playground prototype. The BLOCKER criteria (test coverage, unvalidated user input, secrets, DRY auth violations) do not apply to a read-only prototype with no backend, no user input processing, and no auth logic. The "test plan" is manual visual verification, which is appropriate for this domain. **Conditional BLOCKER -- PII**: If the phone numbers and parent names in the HTML are real personal data, they must be replaced with synthetic values before merge. Real PII in source control is a data handling violation. If they are already fabricated, this is not a blocker. ### NITS 1. **Semantic badge mismatch in Contracts tab**: Signed contracts use `class="badge badge-paid"` (e.g., `<span class="badge badge-paid">Signed</span>`). This reuses the jersey payment badge for contract signing status. A `badge-signed` class would be semantically clearer and prevent confusion when these patterns promote to SvelteKit components. 2. **Missing ARIA attributes on tabs**: Tab buttons lack `role="tab"`, `aria-selected`, and `aria-controls`. Tab panels lack `role="tabpanel"` and `aria-labelledby`. Filter buttons similarly lack ARIA semantics. Acceptable for a prototype but should be addressed before promotion to westside-app. 3. **Hardcoded 2px in mobile responsive**: `padding: 2px var(--space-sm);` in the `@media (max-width: 600px)` block uses a magic number instead of a design token. 4. **CSS token existence unverified**: The new badge classes reference `--color-blue-bg`, `--color-blue-border`, `--color-yellow-bg`, `--color-yellow-border`, `--color-danger-bg`, `--color-danger-border`. I cannot verify these exist in the CSS variable definitions without a local checkout of the repo. If any are undefined, the badges will render without background/border colors. 5. **Opt-Out player marked as "Paid"**: Ayvah Apaisa has `Option: Opt-Out` but `Status: Paid`. This may be intentionally reflecting the data (opt-out fee was paid), but it reads ambiguously in the UI. Worth confirming the data model intent. ### SOP COMPLIANCE - [x] Branch named after issue (`50-commerce-spec-refactor`) - [x] PR body follows template (Summary, Changes, Test Plan, Related) - [x] Related references parent issue (`Closes #50`) - [ ] Related references plan slug -- N/A, no plan slug provided (user confirmed none) - [x] No secrets committed - [x] No unnecessary file changes (only commerce.html, shared/style.css, shared/app.js) - [x] Commit scope matches issue scope ### PROCESS OBSERVATIONS - The @-comment spec header at the top of commerce.html is thorough -- documents route, auth, complexity, API contract, state, interactivity, and known gaps. This is a strong pattern for playground-to-production promotion. - The PR body review checklist (zero inline styles, zero inline scripts, append-only shared files) demonstrates disciplined scope control. - Hardcoded summary counts and truncated row sets (19 jersey rows vs. "59" All count) are expected for a prototype. The spec header `@gaps` section correctly documents missing features. ### VERDICT: APPROVED Approved with the conditional PII check: confirm the phone numbers and parent names are synthetic before merging. If real, replace with fabricated data first. All nits are non-blocking and appropriate to address during SvelteKit promotion.

2026-04-06 22:37:55 +00:00

Summary

Rewrites commerce.html with a full @-comment spec header, moves inline styles and scripts to shared files, and fixes DB schema gaps across all three commerce tabs (jerseys, subscriptions, contracts).

Changes

commerce.html -- Full @-comment spec header (route, auth, complexity, api, state, interactivity, gaps, notes). Removed all inline <style> and <script> blocks. Added Shipped jersey rows, Past Due/Canceled subscription split, Monthly Fee column, Signed Date/Signed By contract columns.
shared/style.css -- Appended commerce-specific styles: tab-bar, summary-row, data-table, responsive mobile stacking, plus new badge classes (badge-shipped, badge-past-due, badge-canceled).
shared/app.js -- Appended commerce page init (tab switching + per-panel filter), guarded by .tab-bar presence check.

Test Plan

Verify page loads at https://playground.tail5b443a.ts.net/westside/commerce.html with no console errors
Verify tab switching between Jerseys / Subscriptions / Contracts works
Verify filter buttons within each tab narrow rows correctly
Verify Shipped filter on Jerseys tab shows 2 rows
Verify Past Due and Canceled filters on Subscriptions tab work independently
Verify Monthly Fee column shows $160 or $200
Verify Signed Date and Signed By columns appear on Contracts tab
Verify mobile responsive stacking at 375px viewport
Verify no other HTML pages were modified

Review Checklist

Zero inline <style> blocks in commerce.html
Zero inline <script> blocks (only external app.js reference)
Only appended to shared/style.css and shared/app.js
No other HTML pages modified
Uses existing CSS design tokens
New badge classes match existing pattern
Page returns HTTP 200

None.

Closes #50

## Summary Rewrites commerce.html with a full @-comment spec header, moves inline styles and scripts to shared files, and fixes DB schema gaps across all three commerce tabs (jerseys, subscriptions, contracts). ## Changes - **commerce.html** -- Full @-comment spec header (route, auth, complexity, api, state, interactivity, gaps, notes). Removed all inline `<style>` and `<script>` blocks. Added Shipped jersey rows, Past Due/Canceled subscription split, Monthly Fee column, Signed Date/Signed By contract columns. - **shared/style.css** -- Appended commerce-specific styles: tab-bar, summary-row, data-table, responsive mobile stacking, plus new badge classes (badge-shipped, badge-past-due, badge-canceled). - **shared/app.js** -- Appended commerce page init (tab switching + per-panel filter), guarded by `.tab-bar` presence check. ## Test Plan - Verify page loads at https://playground.tail5b443a.ts.net/westside/commerce.html with no console errors - Verify tab switching between Jerseys / Subscriptions / Contracts works - Verify filter buttons within each tab narrow rows correctly - Verify Shipped filter on Jerseys tab shows 2 rows - Verify Past Due and Canceled filters on Subscriptions tab work independently - Verify Monthly Fee column shows $160 or $200 - Verify Signed Date and Signed By columns appear on Contracts tab - Verify mobile responsive stacking at 375px viewport - Verify no other HTML pages were modified ## Review Checklist - [x] Zero inline `<style>` blocks in commerce.html - [x] Zero inline `<script>` blocks (only external app.js reference) - [x] Only appended to shared/style.css and shared/app.js - [x] No other HTML pages modified - [x] Uses existing CSS design tokens - [x] New badge classes match existing pattern - [x] Page returns HTTP 200 ## Related Notes None. ## Related Closes #50

forgejo_admin added 1 commit

feat: commerce page full spec header, shared CSS/JS, DB schema gaps 80e14f8416

Move inline styles and scripts from commerce.html into shared/style.css
and shared/app.js. Add full @-comment spec header. Fix DB schema gaps:
shipped jersey status, past_due/canceled subscription split, monthly fee
column, signed date/signed by contract columns.

Closes #50

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