From 4532c24e1a9449a354367a1c962d7df78dff53cc Mon Sep 17 00:00:00 2001 From: Oier Bravo Urtasun Date: Mon, 13 Apr 2026 19:37:11 +0200 Subject: [PATCH] =?UTF-8?q?docs(fase-5):=20close-out=20=E2=80=94=20plan,?= =?UTF-8?q?=20CLAUDE.md,=20README=20status?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fase 5 is ✅ complete in automatable scope after the last five feature commits (d6cea51, 4cc5f69, d14d6cd, 1cb408a, f3e8234). 228 tests green, 4 skipped. Deferred: WebKit-dependent swipe/long-press E2E, card presence avatars, max-w-2xl reading width. Co-Authored-By: Claude Opus 4.6 (1M context) --- CLAUDE.md | 28 ++++++++++++++++++++++++++-- README.md | 4 ++-- plan/fase-5-mobile-ux.md | 11 ++++++----- 3 files changed, 34 insertions(+), 9 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 68d0644..dfdfa36 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -8,7 +8,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co ## Project Status -**Fase 0 complete. Fase 1 complete. Fase 2a complete. Fase 2b complete (Realtime + offline queue + Modo Compra). Fase 3 complete (Tareas + Notas). Fase 4 partially complete (global search + RLS audit). Fase 5 partially complete (responsive shell + masthead + swipe-delete red zone + undoQueue; see `plan/fase-5-mobile-ux.md`). 224 tests green: 34 pgTAP + 140 Vitest integration + 11 Vitest unit + 39 Playwright. 4 skipped (2 Realtime presence — upstream `handle_out/3` bug; 2 mobile-swipe touch gestures — needs WebKit install). PWA install/push/rate-limit/JWT rotation deferred to a prod-deploy sprint. ✅** +**Fase 0 complete. Fase 1 complete. Fase 2a complete. Fase 2b complete (Realtime + offline queue + Modo Compra). Fase 3 complete (Tareas + Notas). Fase 4 partially complete (global search + RLS audit). Fase 5 complete for the automatable scope (mobile UX: responsive shell + masthead + row redesign + selection mode; see `plan/fase-5-mobile-ux.md`). 228 tests green: 34 pgTAP + 140 Vitest integration + 11 Vitest unit + 43 Playwright. 4 skipped (2 Realtime presence — upstream `handle_out/3` bug; 2 mobile-swipe touch gestures — needs WebKit install). PWA install/push/rate-limit/JWT rotation deferred to a prod-deploy sprint. ✅** - `README.md` — full development plan, confirmed tech stack, Justfile reference, and technical warnings - `analysis/analisis-funcional.md` — complete functional specification (domain model, use cases, data models, business rules) @@ -74,7 +74,31 @@ just test-e2e # Playwright E2E tests (requires just dev running) just test-e2e-headed # Playwright with visible browser (debugging) ``` -### Fase 5 — what has been built (partial) +### Fase 5 — what has been built (complete in scope) + +**5.8 big-button create (match /notes)** +- `/lists` sticky bottom create bar removed; masthead gains a primary "New list" button next to the Trash ghost icon +- `handleCreate` creates with empty name + `goto(/lists/[id])`; detail view shows a prominent editable title input (26–32px) with 500 ms autosave (`renameList`) +- Matches `/notes` pattern end-to-end + +**5.10 row redesign (button-row + gesture toggle + overlay + drag handles)** +- Shopping items have **no checkbox** in normal mode. Row is `drag-handle | name-button | qty stepper`. Checked items render strikethrough + muted. +- **Swipe right on unchecked → mark checked** (green reveal), **swipe left on checked → uncheck** (neutral reveal). Opposite direction is a no-op snap-back. `SWIPE_COMMIT_THRESHOLD=120`, `SWIPE_REVEAL_WIDTH=96`. No undo toast — the gesture is symmetric and the inverse swipe reverses. +- **Double-tap opens an overlay** (Dialog / bottom sheet) with: name input + Delete (red) + Confirm + X close. 300 ms tap-window. Delete still routes through `scheduleUndoable` → `UndoToast`. +- **Drag handle** on the left, always visible on mobile, `md:opacity-0 md:group-hover:opacity-100` on desktop. Handle's `onpointerdown` flips a `dragEnabled` flag so dnd only kicks in from the handle, leaving row swipes untouched. +- `unit` column **dropped** (migration `011_drop_shopping_items_unit.sql`). The double-tap overlay only edits name, so an unreachable `unit` would be stranded data. Users encode units inside the name (e.g. "Milk 1L"); seed updated accordingly. + +**5.11 selection mode + bulk actions** +- **Entry**: long-press 500 ms on mobile or `data-testid="selection-toggle"` button in the desktop header. Preselects the row you pressed (mobile). +- Inside selection mode: single-tap toggles selection, swipe + double-tap disabled, stepper + drag handle hidden. Row gains a checkbox on the left. +- **Chrome**: header turns into `data-testid="selection-bar"` (dark slate-900 with "N selected" + Cancel + desktop-inline actions). Mobile bottom action bar (`data-testid="selection-action-bar"`) above BottomTabBar with Delete / Move / Mark-checked. +- **Bulk actions** (one Supabase call each): `bulkDeleteItems` + single UndoToast with batch snapshot, `bulkMoveItems` via a list picker sheet (`data-testid="move-picker"`) listing the collective's other active lists + a "Create new list" row, `bulkCheckItems` filters `is_checked=false` so it only marks, never toggles. + +**5.12 detail-view chrome (hide MobileTopBar, sticky contextual bars)** +- 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. + +### Fase 5 — earlier sub-phases (still relevant) - `apps/web/src/lib/components/layout/DesktopSidebar.svelte` — desktop sidebar extracted from `(app)/+layout.svelte`, `data-testid="desktop-sidebar"`, `hidden md:flex` - `apps/web/src/lib/components/layout/MobileTopBar.svelte` — hamburger + collective name + avatar link; `md:hidden sticky top-0 z-30 backdrop-blur-xl` diff --git a/README.md b/README.md index d6bfc1e..29442dd 100644 --- a/README.md +++ b/README.md @@ -15,8 +15,8 @@ | Fase 2b — Realtime y Modo Compra | ✅ Completa (presence bloqueado por bug upstream de `supabase/realtime`) | | Fase 3 — Tareas y Notas | ✅ Completa | | Fase 4 — Búsqueda y Pulido | 🟡 Búsqueda + RLS audit completos; PWA install/push/rate-limit/JWT rotation diferidos a sprint de deploy | -| Fase 5 — Rediseño UX Mobile | 🟡 Shell responsive + masthead + swipe-delete red zone + undoQueue shipped; presence avatars en cards + touch-gesture E2E diferidos | -| Suite de tests (pgTAP + Vitest + Playwright) | ✅ 224 tests verdes (34 pgTAP + 140 integración + 11 unit + 39 E2E), 4 skipped, ejecutables con `just test-all` | +| Fase 5 — Rediseño UX Mobile | ✅ Completa en scope automatizable (shell + masthead + big-button create + row redesign + selection mode + sticky detail chrome); presence avatars en cards + M-swipe/SEL-long-press touch E2E diferidos a WebKit install | +| Suite de tests (pgTAP + Vitest + Playwright) | ✅ 228 tests verdes (34 pgTAP + 140 integración + 11 unit + 43 E2E), 4 skipped, ejecutables con `just test-all` | --- diff --git a/plan/fase-5-mobile-ux.md b/plan/fase-5-mobile-ux.md index 7e493dd..f95225d 100644 --- a/plan/fase-5-mobile-ux.md +++ b/plan/fase-5-mobile-ux.md @@ -1,5 +1,5 @@ ### Fase 5 — Rediseño UX Mobile ("Monolith Editorial") -**Estado: 🟡 Shell + masthead + undoQueue + swipe-delete shipped. Pendientes: 5.8 (big-button create), 5.9 (audit responsive `/lists/[id]`), 5.10 (interacción rediseñada: buttons + swipes + drag handles), 5.11 (selection mode + bulk actions), 5.12 (chrome de detail views). Avatars en cards + touch-gesture E2E aún diferidos.** +**Estado: ✅ Completa en scope automatizable. 228 tests verdes (34 pgTAP + 140 integration + 11 unit + 43 Playwright), 4 skipped. Diferido: M-series swipe gesture tests (WebKit install), SEL mobile long-press tests, card presence avatars, `max-w-2xl` reading-width.** **Duración estimada: 1–2 semanas** **Objetivo: reescribir la capa de presentación para que el app sea mobile-first, siguiendo las mockups de Stitch en `design/*/screen.png` y la dirección "Monolith Editorial" de `design/slate_collective/DESIGN.md`.** @@ -444,13 +444,14 @@ Doble tap corto (≤ 300 ms entre toques) en una fila (en modo normal) abre un o #### 5.Z Verificación final — todos los tests verdes -- [x] `just test-all` → **224 verdes, 4 skipped**: +- [x] `just test-all` → **228 verdes, 4 skipped**: - 34 pgTAP (sin cambios) - 140 Vitest integration + 2 skipped presence (sin cambios) - - 11 Vitest unit (was 6, +5 undoQueue) - - 39 Playwright + 2 skipped swipe-delete touch (was 31, +4 mobile-shell +4 masthead) -- [ ] Validación visual en DevTools iPhone 13 (390×844) + Pixel 7 (412×915) + Desktop (1280×800) — pendiente (manual). + - 11 Vitest unit (sin cambios) + - 43 Playwright + 2 skipped swipe-touch (was 39, +1 mobile-shell M-08, +3 selection SEL-01/02/03; D-03 y D-04 reescritos para el nuevo overlay) +- [ ] Validación visual en DevTools iPhone 13 (390×844) + Pixel 7 (412×915) + Desktop (1280×800) — pendiente (manual, post-deploy). - [x] `loginAs(USERS.borja)` con `page.setViewportSize(MOBILE)` activa el shell mobile automáticamente (verificado en M-01..M-04). +- [x] Seis commits incrementales (5.10.0 → 5.12 → 5.8 → 5.10 → 5.11) para facilitar revert o review por pasos. ---