oier/collective-lists
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(fase-5): close-out — plan, CLAUDE.md, README status

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Oier Bravo
2026-04-13 19:37:11 +02:00
parent f3e8234b70
commit 4532c24e1a
3 changed files with 34 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
CLAUDE.md
View File

@@ -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`

4
README.md
View File

@@ -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` |
---

11
plan/fase-5-mobile-ux.md
View File

@@ -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.
---