From 5803806295c29cf278b67a4156a585238217055e Mon Sep 17 00:00:00 2001 From: Oier Bravo Urtasun Date: Tue, 14 Apr 2026 03:25:28 +0200 Subject: [PATCH] docs(fase-5.15): title chrome cleanup on detail views MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Recorded in plan/fase-5-mobile-ux.md (new §5.15 right next to the existing 5.13 / 5.14 sections) and CLAUDE.md "Fase 5 — what has been built" with the list.status → visual signal table. Code change landed in 73bc51e. Co-Authored-By: Claude Opus 4.6 (1M context) --- CLAUDE.md | 5 +++++ plan/fase-5-mobile-ux.md | 20 ++++++++++++++++++++ 2 files changed, 25 insertions(+) diff --git a/CLAUDE.md b/CLAUDE.md index b7d389b..1a6e24e 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -98,6 +98,11 @@ just test-e2e-headed # Playwright with visible browser (debugging) - On `/lists/[id]`, `/tasks/[id]`, `/notes/[id]`, `/lists/[id]/session` the global `MobileTopBar` is hidden via an `isDetailRoute` regex check in `(app)/+layout.svelte`. The route's own contextual header (back + title + actions) becomes the only top chrome and is now `sticky top-0 z-30 bg-surface/80 backdrop-blur-xl`. - `BottomTabBar` stays visible so users can hop between sections. +**5.15 detail-view title chrome cleanup** +- `/lists/[id]` and `/tasks/[id]` dropped the uppercase eyebrow label ("ACTIVE LIST" / "TASK MANAGER") that used to sit above the editable title. Title moved up into that space. +- `/lists/[id]` status signal replaces the hardcoded "ACTIVE LIST": `completed` → title with `text-text-secondary line-through`; `archived` → muted pill next to title (`data-testid="list-status-pill"`); `active` → plain title. +- `/tasks/[id]` has no status on `task_lists`; just the label drop. + **5.14 inline add-form (last element of the list)** - `/lists/[id]` + `/tasks/[id]` no longer have a bottom-sticky add form. The form renders **inline as the last child of the unchecked / pending section** (just above Checked / Completed). Empty-state branch shows message + form beneath it. - On `/lists/[id]` the frequency chips (`ItemSuggestions`) moved below the input (input row on top, chips on second line). Mobile: horizontal scroll; desktop: wrap. diff --git a/plan/fase-5-mobile-ux.md b/plan/fase-5-mobile-ux.md index b419610..ab2ae47 100644 --- a/plan/fase-5-mobile-ux.md +++ b/plan/fase-5-mobile-ux.md @@ -480,6 +480,26 @@ Doble tap corto (≤ 300 ms entre toques) en una fila (en modo normal) abre un o --- +#### 5.15 Título limpio en detail views (sin eyebrow) + señal de estado + +**Cambio de UX:** el "eyebrow" uppercase ("ACTIVE LIST" / "TASK MANAGER") que vivía sobre el título editable en `/lists/[id]` y `/tasks/[id]` se retira. El título sube para ocupar ese espacio. + +Como la eyebrow anterior mezclaba "masthead label" + "status", el estado de la lista de la compra ahora se comunica de forma más directa: + +| `list.status` | Señal visual | +|---------------|--------------| +| `active` | sin chrome — solo el título | +| `completed` | título con `text-text-secondary` + `line-through` | +| `archived` | pill muted (`bg-slate-200` / slate-800 en dark) junto al título, `data-testid="list-status-pill"` | + +`/tasks/[id]` no tiene concepto de estado en `task_lists`, así que ahí es simplemente el título sin eyebrow. + +**Archivos tocados:** `apps/web/src/routes/(app)/lists/[id]/+page.svelte`, `apps/web/src/routes/(app)/tasks/[id]/+page.svelte`. + +**Criterio de aceptación:** la detail view ya no muestra la eyebrow; una lista completada se ve con strikethrough en el título; una archivada muestra el pill muted. + +--- + #### 5.13 Resistencia a contextos no-seguros (HTTP LAN) **Problema descubierto tras deploy de la preview mobile:** el usuario abrió `http://192.168.1.167:5173` en el móvil (origen no-seguro) y `handleAdd` lanzó `TypeError: crypto.randomUUID is not a function`. `crypto.randomUUID` solo está expuesto en HTTPS, localhost, 127.0.0.1 o file:// — fuera de eso queda `undefined`.