The unit field had no edit path under the redesign (only name + qty
remain in the row; the double-tap overlay is name-only). Users can encode
the unit inside the name when it matters — e.g. "Milk 1L", "Eggs 1 doz".
Changes
supabase/migrations/011_drop_shopping_items_unit.sql — DROP COLUMN
supabase/seed.sql — unit values folded into names where relevant
supabase/tests/002_item_frequency_trigger.sql — remove unit from INSERT
packages/types — remove unit from ShoppingItem Row/Insert/Update
apps/web/src/lib/stores/lists.ts — addItem/updateItem signatures
apps/web/src/routes/(app)/lists/[id]/+page.svelte — purge newUnit /
editUnit state + inputs + display
apps/web/src/routes/(app)/lists/[id]/session/+page.svelte — simplify
quantity-only render
apps/web/messages/{en,es}.json — remove list_unit_label
Verification
just test-db → 34 pgTAP green
just test-integration → 140 + 2 skipped
just test-unit → 11 green
just test-e2e → 39 + 2 skipped
The generated search tsvector on shopping_items.search already indexes
only `name`, so full-text search coverage is unchanged.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
**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`.**
@@ -102,6 +102,346 @@ Esta fase sigue TDD: **primero los tests, al final la verificación.** Toda la c
- [x]`/notes`: masthead + contador pendiente de meta. Grid responsivo (1 col mobile → 2/3/4 col en md/lg/xl) desde Fase 3.
- [x]`/search`: masthead "Omni-Search / Find Anything.". Badges "{N} MATCHES / MATCH" junto a cada header de grupo ✅
#### 5.8 Crear lista con botón "New list" (alineado con `/notes`)
**Objetivo:** sustituir la barra sticky de creación en `/lists` por el mismo patrón que usa `/notes` — un botón en el masthead que crea directamente el recurso con defaults y navega al detalle, donde el usuario renombra inline.
**Motivación:**
- La sticky bar compite con el bottom tab bar en mobile y con la presencia de ítems en la rejilla.
-`/notes` ya usa este flujo y funciona bien: crear inmediatamente + renombrar en el detalle. Consistencia entre módulos.
- Un botón "big" cumple lo pedido sin ocupar viewport permanente.
**Cambios propuestos:**
- [ ]`/lists` — eliminar el bloque `<!-- Sticky bottom: create new list -->` (`div absolute bottom-0 ... backdrop-blur-[12px]`) y el estado asociado (`newListName`, `creating`, `nameInput`, `handleCreate`, `handleKeydown`).
- [ ]`/lists` — añadir un botón primario `New list` en el `actions` snippet del `<ScreenMasthead>`, idéntico al de `/notes` (fondo `bg-slate-900` en light mode, icono `Plus`):
- [ ] `handleCreate` (nueva versión) — crea la lista con `name = ''` (como hace `createNote`), sin mostrar input. Al resolver la promesa, `goto(`/lists/${created.id}`)`.
- [ ] Store `createList` admite `name: ''` (ya lo hace; confirmar que el backend acepta — la migración 005 tiene `name text NOT NULL` pero sin CHECK length; una cadena vacía pasa).
- [ ] `/lists/[id]` — añadir un row de título editable al inicio del área de contenido (encima de las secciones "To buy" / "Checked"), siguiendo la pauta de `/notes/[id]`:
- [ ] Los tests C-07 / C-11 / C-12 usan este helper → seguirán pasando sin cambios en sus aserciones, solo el flujo interno cambia.
- [ ] Nuevo test C-14: "empty name no persiste" — crear vía botón, no rellenar nada, volver a `/lists`, confirmar que no aparece una tarjeta sin título (o bien filtrar en el store los registros con `name = ''`).
**Criterio de aceptación:**
- No hay sticky bar en `/lists`.
- El botón "New list" del masthead crea la lista y lleva al detalle.
- El nombre se introduce en `/lists/[id]` y se persiste vía autosave.
- La suite completa sigue verde.
---
#### 5.9 Responsive audit + fix de `/lists/[id]`
**Objetivo:** hacer que la pantalla de detalle de una lista funcione bien en viewports pequeños (iPhone 13 390×844), no solo en desktop.
#### 5.9.a Auditoría — revisión previa antes de tocar código
**No-código; producir una lista corta de puntos problemáticos con recomendación de fix.** Buscar:
- [ ] **Padding horizontal**: ¿hay `px-8` genérico? Debe ser `px-4 md:px-8` o `px-4 md:px-6`.
- [ ] **Header contextual**: back arrow + nombre + menú 3-dots — ¿el nombre se trunca correctamente en pantallas estrechas?
- [ ] **Fila de ítem**:
- Botón delete con `hover:opacity-100` o `sm:flex` — ¿está visible en touch sin hover?
- Stepper de qty — ¿ocupa demasiado ancho cuando el nombre es largo?
- Drag handle — ¿está oculto en mobile? ¿se activa con long-press?
- Swipe-to-delete funciona en touch (ya cubierto en 5.4)
**Entregable de 5.9.a:** una sección con 3–6 bullets "problema → fix propuesto" antes de abrir 5.9.b.
#### 5.9.b Implementación de los fixes
La implementación efectiva se hace en **5.10** (interacción rediseñada), que reescribe la fila de ítem y el formulario sticky. Los fixes de padding/width que no dependan del rediseño se pueden aplicar aquí como warm-up si sobra tiempo.
---
#### 5.10 Rediseño de interacción en `/lists/[id]`
**Objetivo:** reemplazar el modelo "checkbox + botones en hover" por un flujo explícito basado en gestos y un overlay de edición. Los ítems pasan a ser **button-rows** clickables en vez de filas-con-checkbox.
##### 5.10.0 Prerequisito — eliminar la columna `unit` del modelo
La decisión de no editar `unit` en el overlay (solo name) deja el campo sin ningún punto de edición en la UI. Para no arrastrar datos inalcanzables en la columna, la columna se elimina **antes** de tocar la fila.
**Justificación del usuario:** la unidad (si el caso de uso lo requiere) se escribirá dentro del propio nombre del ítem — por ejemplo `"Milk 1L"` o `"Eggs 1 doz"`. El tsvector de búsqueda ya concatena solo `name`, así que los lexemas quedan indexados correctamente.
- [ ] `supabase/seed.sql`: retirar el valor de `unit` de cada `INSERT INTO shopping_items`. (Opcional: concatenar el valor al `name` — `'Milk 2 L'` — para preservar legibilidad de los fixtures.)
- [ ] `apps/web/tests/e2e/items.test.ts` y cualquier otro test que referencie unit: limpiar.
**Criterio de aceptación 5.10.0:**
- `just db-reset` aplica la migración sin error.
- `just test-all` sigue verde (los tests se han ajustado).
- La columna `unit` no existe en `information_schema.columns`.
- [ ] Drag handle `GripVertical` **siempre visible** en mobile, **revelado en hover** en desktop (`md:opacity-0 md:group-hover:opacity-100`).
- [ ] Sin checkbox en modo normal.
- [ ] Nombre del ítem como `button` accesible (el elemento clickable de la fila). Si el usuario quiere una unidad, la incluye en el nombre ("Milk 1L"). Ver 5.10.0.
- [ ] Stepper `− N +` a la derecha, siempre visible, tanto mobile como desktop.
- [ ] Estado checked: strikethrough + `text-text-secondary`.
##### 5.10.b Gestos en la fila
| Estado del ítem | Swipe → (right) | Swipe ← (left) |
Racional: el swipe es una toggle "simétrico" (toda la fila se "voltea" de un lado a otro). **Nunca borra**. El delete vive solo en el overlay de doble-tap y en selection mode.
- [ ] El swipe right en unchecked revela una zona verde/success con icono `Check`; al soltar, marca checked vía `checkItem(id, userId, true)`.
- [ ] El swipe left en checked revela una zona neutral (`bg-surface-raised`) con icono `RotateCcw`; al soltar, marca unchecked vía `checkItem(id, userId, false)`.
- [ ] Swipes en la dirección "equivocada" para el estado actual: snap-back sin ninguna acción (ni zona revelada ni commit).
- [ ] Ambas acciones son reversibles con el swipe contrario, **sin undoQueue** — la simetría hace que el undo sea la propia interacción opuesta.
- [ ] Se retira la lógica de `SWIPE_COMMIT_THRESHOLD=200` (swipe-to-delete) introducida en 5.4. Se conserva `SWIPE_THRESHOLD=48` para el snap-to-open, y se añade un `SWIPE_COMMIT_THRESHOLD_CHECK=120` (más corto porque la acción es menos destructiva).
- [ ] Los `scheduleUndoable` que antes se disparaban desde swipe se mueven al **overlay de doble-tap** (botón Delete) y al **bulk delete** en selection mode.
- [ ] Renombrar `mobile-swipe-delete.test.ts` → `mobile-swipe-toggle.test.ts` y reescribir los casos (los actuales están `.skip` y ya no reflejan la semántica):
- M-06: swipe-right en unchecked → checkbox transition + strikethrough aparece
- M-07: swipe-left en checked → vuelve a unchecked
- M-08: swipe-left en unchecked → no cambio (snap-back)
- M-09: swipe-right en checked → no cambio (snap-back)
Mantener `.skip` hasta que se añada WebKit install a CI.
##### 5.10.c Double-tap → overlay de edición
Doble tap corto (≤ 300 ms entre toques) en una fila (en modo normal) abre un overlay:
```
┌───────────────────────────┐
│ Edit item × │
│ │
│ [ milk ] │
│ │
│ [Delete] [Confirm] │
└───────────────────────────┘
```
- [ ] Overlay como `Dialog` (o bottom sheet en mobile ≤ md; `shadcn-svelte` Sheet / Dialog). Centrado en desktop.
- [ ] Input de **solo nombre** prellenado con el valor actual.
- [ ] Botón Confirm: guarda el nuevo nombre (optimista + UPDATE) y cierra.
- [ ] Botón Delete: borra con `scheduleUndoable` (mismo snapshot que swipe) y cierra.
- [ ] Botón X en la esquina + tap fuera del overlay: cierra sin guardar.
- [ ] Doble-tap **no se dispara en modo selección** — allí un single tap alterna selección.
- [ ] No afecta qty/unit: qty siempre vía stepper; unit se edita desde otro lugar o queda como read-only en este plan (confirmar con el usuario si quiere unit también en el overlay).
##### 5.10.d Drag handle → reorder
- [ ] El handle es el ÚNICO drag target (no la fila entera), para no competir con swipes y double-tap.
- [ ] Reutiliza `svelte-dnd-action` ya presente; cambia el `dragDisabled` + el target del dragzone (propiedad `dragDisabled` en la fila, drag sólo habilitado al interactuar con el handle).
- [ ] Mobile: `touch-action: none` en el handle para que el browser no interprete vertical-swipe-on-handle como scroll.
- [ ] Solo aplica a items unchecked (los checked ya quedan al fondo con flip).
**Criterio de aceptación 5.10:**
- Single tap no hace nada en modo normal.
- Double tap abre el overlay y permite rename/delete.
- Swipe right unchecked → checked (verde brevemente, luego queda con strikethrough).
- Swipe right checked → delete con undo toast.
- Swipe left checked → unchecked.
- Drag handle reordena pendientes, handle sólo visible al tocar/hover.
- Qty stepper intacto, unit visible debajo del nombre si hay.
- Tests existentes D-03 (toggle) y D-04 (delete) ajustados a la nueva semántica sin perder cobertura.
---
#### 5.11 Selection mode + bulk actions
**Objetivo:** permitir acciones masivas (delete / move / mark-all-checked) mediante un modo selección activado por long-press en mobile o botón toggle en desktop.
##### 5.11.a Entrada y salida
- [ ] **Mobile — entrada**: long-press (≥ 500 ms) sobre cualquier fila entra en modo selección con esa fila **preseleccionada**.
- [ ] **Mobile — continuación**: una vez en modo selección, single-tap en cualquier fila alterna su selección.
- [ ] **Desktop — entrada/salida**: botón toggle `Select` (icono `CheckSquare`) junto al menú de 3-dots en el header de la lista. Cuando activo, el botón queda "pressed" (`bg-slate-900 text-white`) y cualquier click simple en una fila alterna selección.
- [ ] **Salida**:
- Tap en "Cancel" del top-mode bar (mobile) o toggle del botón (desktop).
- Navegación fuera de la ruta.
- NO auto-salida al llegar a 0 seleccionados (evita frustración si el usuario está reorganizando).
##### 5.11.b Chrome durante selection mode (mobile)
- [ ] **Top bar contextual** (reemplaza el header `back + title + 3-dots`):
```
[ Cancel ] 3 selected [ ⋯ ]
```
Sticky top-0, fondo `bg-slate-900 text-white` para diferenciar visualmente del modo normal.
- [ ] **Bottom action bar** (reemplaza el `BottomTabBar`, sticky al mismo `bottom` con glassmorphism, misma altura 56 px):
```
[ Trash ] [ Move ] [ Check ]
```
Iconos Lucide: `Trash2`, `FolderInput`, `CheckSquare`. Cada botón con label sr-only + tooltip desktop.
- [ ] Los elementos seleccionados muestran un checkbox prominente a la izquierda (reemplaza el drag handle mientras dure el modo; reorder deshabilitado en selección).
- [ ] El stepper de qty se oculta en selection mode para simplificar la fila.
##### 5.11.c Chrome durante selection mode (desktop)
- [ ] El header de la lista (back + título + 3-dots) se transforma en una barra de selección inline:
```
← Back 3 selected · Trash · Move · Mark checked · Cancel
```
- [ ] Los checkboxes aparecen en el lado izquierdo de cada fila, a la derecha del drag handle oculto.
- [ ] No existe bottom bar en desktop: todas las acciones caben en el header.
##### 5.11.d Bulk actions
- [ ] **Delete**: borra las filas seleccionadas con un único `scheduleUndoable`:
- `label`: "Deleted N items"
- `restore`: reinserta las filas (snapshot del array completo)
- `commit`: DELETE por IDs
- Mantiene la misma UI de `UndoToast`.
- [ ] **Move to other list**: abre un bottom sheet / dialog con:
- Lista de colectivos activos (`status = 'active'`, excluyendo la actual), cargadas via `loadLists` si hace falta.
- Botón "+ Create new list" al final; crea una lista vacía y mueve.
- Al confirmar: `UPDATE shopping_items SET list_id = $new WHERE id IN (...)`. Checked state se preserva.
- Toast de confirmación "Moved N items to {list name}" (sin undo; el usuario puede volver a mover si quiere).
- [ ] **Mark selected as checked**: `UPDATE shopping_items SET is_checked = true, checked_by = auth.uid(), checked_at = now() WHERE id IN (...) AND is_checked = false`. Solo marca; no toggle. Si todos ya estaban checked, no-op silencioso.
- SEL-D-02 move-to-other-list con dialog de destino
**Criterio de aceptación 5.11:**
- Long-press entra en selection mode, single-tap alterna selección.
- Botón "Select" en desktop (toggle).
- Bulk delete con single undo toast.
- Bulk move con dialog que muestra listas activas + crear.
- Bulk mark-checked solo sobre los seleccionados.
---
#### 5.12 Chrome de detail views (top bar oculto, sticky bars)
**Objetivo:** en las vistas de detalle (`/lists/[id]`, `/tasks/[id]`, `/notes/[id]`, más `/lists/[id]/session` que ya lo hace) el `MobileTopBar` global desaparece y se reemplaza por una barra contextual local con `back + title` pegada al top. El `BottomTabBar` permanece siempre visible.
**Cambios:**
- [ ] `apps/web/src/routes/(app)/+layout.svelte` — detectar si la ruta es una detail view y condicionalmente ocultar `<MobileTopBar>`:
- [ ] Para cada detail view, su header local (back arrow + título) debe ser `sticky top-0 z-30 bg-surface/80 backdrop-blur-xl` para igualar el estilo del `MobileTopBar` que sustituye.
- `/lists/[id]/+page.svelte` — actualmente el header está dentro del scroll; mover a sticky.
- `/tasks/[id]/+page.svelte` — igual.
- `/notes/[id]/+page.svelte` — igual (ya tiene glassmorphism implícito por el color de fondo).
- [ ] `BottomTabBar` sigue presente en todas las detail views salvo `/lists/[id]/session` (que ya se oculta explícitamente al ser un overlay full-screen con z-50).
- [ ] El título contextual se trunca con ellipsis si es largo (`truncate`).
- [ ] Regla general: cualquier barra que una vista renderice debe ser sticky (o fixed si replace-nav), nunca inline scrolling.
**Scope explícito de 5.12:** solo las rutas de detalle de listas/tareas/notas. `/collective/manage`, `/settings`, `/invitation/[token]`, `/notes/archive`, `/notes/trash` mantienen el chrome actual (fuera de este sprint).
**Tests:**
- [ ] Actualizar `mobile-shell.test.ts`:
- M-01: en una detail view (e.g. `/lists/[id]`), el `MobileTopBar` NO está presente.
- M-02: en la misma ruta, existe un header local con `back + title` sticky.
- M-03: el `BottomTabBar` sigue visible.
**Criterio de aceptación 5.12:**
- En mobile, navegar a `/lists/seed-id`:
- `MobileTopBar` (hamburger + collective + avatar) no aparece.
- Un header local "← Weekly shop" pegado al top, sticky al hacer scroll.
- `BottomTabBar` visible.
- En desktop, sin cambios (los detail headers actuales ya se ven arriba del main).
---
#### 5.Z Verificación final — todos los tests verdes
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
