Skip to content

feat: Phase 2 backlog — premium budget, tech-level mode, history, compare bars, dark mode - #6

Merged
FranGuh merged 6 commits into
mainfrom
feat/phase2-backlog
Jun 14, 2026
Merged

FranGuh merged 6 commits into
mainfrom
feat/phase2-backlog

Conversation

@FranGuh

@FranGuh FranGuh commented Jun 14, 2026

Copy link
Copy Markdown
Owner

Resumen

Implementa el backlog de Fase 2 en 5 lotes, con TDD estricto en la lógica y un review adversarial multi-agente al final.

Tests: 71 → 118 (117 passed + 1 todo) · lint limpio · build OK.

Cambios por lote

Lote 1 — base

  • SEO: agrega /compare al sitemap.xml
  • chore: renombra convertToSpecs/matchLaptopClass .jsx → .js (módulos JS puros)
  • a11y/SEO: arquitectura de un h1 descriptivo por página — el brand global pasa a ser un link (no heading); Landing, Compare, NotFound y quiz/resultados tienen su propio h1; nueva utilidad .sr-only

Lote 2 — motor de inferencia (TDD)

  • INF-02: bucket de presupuesto premium (>$25k MXN); high queda acotado a $12k–$25k y el matching deja de filtrar modelos premium hacia high; relaxed premium con piso de $18k
  • INF-01: pregunta de nivel técnico; usuarios técnicos ven la justificación expandida y todos los warnings, no-técnicos solo los críticos (⚠️) y la justificación colapsada

Lote 3 — features

  • F-02: persiste los últimos 3 quizzes en localStorage (historyStore); Landing muestra tarjetas que reabren la recomendación vía ?plan=, con botón de limpiar (el historial NO se borra al resetear el quiz)
  • compare: cap del deep-link a 3 modelos en el origen

Lote 4 — visual

  • compare-viz: componente SpecBar + getBarWidth; barras proporcionales pure-CSS (sin dependencias de charting) para RAM/almacenamiento/GPU
  • dark mode: hook useTheme (detección de sistema + toggle manual, persistido) + ThemeToggle accesible + paleta :root[data-theme="dark"] y overrides por componente, sin tocar el modo claro

Review adversarial

5 reviewers por dimensión + verificación escéptica por hallazgo: 37 hallazgos, 19 confirmados. Corregidos los reales:

  • a11y: salto de headings h1→h4 en resultados → renumerado a h1→h2→h3 + título de resultados visible
  • el default de la justificación técnica ya no pisa el toggle manual del usuario
  • script inline anti-FOUC de dark mode en index.html
  • contraste del × del chip en dark, coverage/ ignorado en eslint, y 3 gaps de tests cerrados

Verificación manual pendiente

El aspecto visual del dark mode conviene revisarlo a ojo (pnpm dev → toggle del header en las 4 vistas).

Incluye el commit d53c86d (chore .gitignore del .atl) que aún no estaba en main.

FranGuh added 6 commits June 14, 2026 14:00
- seo: add /compare route to sitemap.xml
- chore: rename convertToSpecs/matchLaptopClass .jsx -> .js (pure JS modules)
- a11y/seo: demote global brand h1 to a home link so each page owns a
  descriptive h1 (Landing hero, Compare, NotFound, quiz + results views);
  add .sr-only utility and section heading for Landing features
- INF-02: add premium budget bucket (>$25k MXN); bound high to $12k-$25k
  and cap matching so premium models no longer leak into the high bucket;
  relaxed premium enforces an $18k floor
- INF-01: add technical-level quiz question; technical users get the
  rationale expanded and all warnings, non-technical users see only
  critical (warning-prefixed) warnings and a collapsed rationale
- tests: +11 (premium/high boundaries, relaxed floor, isTechnical flag,
  technical vs simple rendering); refactor Recommendation quiz-completion
  helper to be question-count agnostic
- F-02: persist the last 3 completed quizzes to localStorage via a new
  historyStore util; Landing shows recent-result cards that reopen the
  recommendation through ?plan=, plus a clear button. History persists
  across resets and is only wiped via the explicit clear action.
- compare: cap the handleCompare deep-link at 3 model ids at the source
- tests: +13 (historyStore unit coverage, Landing history UI)
- compare-viz: add SpecBar component + getBarWidth helper; render pure-CSS
  proportional bars for the RAM, storage and GPU rows (no charting dep)
- tests: +8 (getBarWidth boundaries, SpecBar rendering and a11y)
- add useTheme hook (csh-theme localStorage key, prefers-color-scheme
  fallback, follows the system until the user toggles manually) and an
  accessible ThemeToggle button in the header
- add :root[data-theme="dark"] token palette in index.css; make
  App/Landing/Recommendation/Compare/SpecBar/Quiz theme-aware via dark
  overrides while keeping light mode visually unchanged
- tests: +13 (useTheme behaviour, ThemeToggle)
- a11y: fix the h1->h4 heading-level jump in the results view; renumber to
  a clean h1->h2->h3 outline and make the results h1 visible; update the
  matching CSS selectors (NoResults/Fallback/Approximate/ActionCard)
- fix(rationale): set the technical-user rationale default when the result
  is created (handleNext + shared-plan load) instead of in a [result]
  effect, so the user's manual toggle is no longer overwritten
- ux: add an inline pre-paint theme script in index.html to prevent a
  dark-mode flash (FOUC) on cold load
- dark: brighten the compare chip remove glyph for clearer contrast
- chore: ignore coverage/ in the eslint config
- tests: cover the compare deep-link 3-model cap and generic exclusion;
  assert real localStorage clearing and full summary fields on Landing
@vercel

vercel Bot commented Jun 14, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
computer-selector-helper Ready Ready Preview, Comment Jun 14, 2026 9:05pm

@FranGuh
FranGuh merged commit 15894c0 into main Jun 14, 2026
3 checks passed

This branch was successfully deployed

1 active deployment
Preview — 6937274f Deployed Jun 14, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant