feat(fase-5.10): /lists/[id] row redesign — buttons + swipe-toggle + overlay
Replaces the checkbox/hover-delete model with an explicit gesture+overlay
flow on /lists/[id].
Row anatomy (new)
[drag-handle] [name as button] [qty stepper − N +]
- No checkbox in normal mode.
- Checked items render with strikethrough + muted text.
- Drag handle always visible on mobile; revealed on hover on desktop
(md:opacity-0 md:group-hover:opacity-100). The handle owns the drag
(pointerdown → dragEnabled=true), so row swipes + taps keep working.
Swipe gestures (symmetric toggle, no delete)
unchecked + swipe RIGHT → mark checked (green success reveal)
checked + swipe LEFT → mark unchecked (neutral reveal)
opposite direction for each state is a no-op (snaps back).
SWIPE_COMMIT_THRESHOLD=120 (was 200 for delete); REVEAL_WIDTH=96.
Symmetry means undo is the inverse swipe — no undoQueue on toggles.
Double-tap overlay (name + delete + confirm)
Short tap: no-op. Two taps within DOUBLE_TAP_WINDOW_MS (300 ms) open a
full-screen dialog (bottom sheet on mobile) with:
- X close button (top-right)
- name input
- Delete button (red) → scheduleUndoable → UndoToast
- Confirm button (primary) → updateItem({ name })
Click outside / Escape / X all dismiss without saving.
Tests
items.test.ts
D-03 rewritten: double-tap opens overlay, value matches, X closes.
D-04 rewritten: overlay Delete removes the row; toast locator scoped
out of itemRow so it doesn't shadow the assertion.
realtime.test.ts
R-E-02 updated: Ana renames via overlay → Borja sees new name over
Realtime UPDATE. (The check/uncheck path is now gestural only and
chromium touch emulation is too flaky to drive it in E2E; Vitest
integration R-02 still covers the UPDATE-row-payload invariant.)
mobile-swipe-delete.test.ts stays describe.skip — will be renamed and
rewritten for the new semantics once WebKit install lands in CI.
i18n
list_qty_decrease, list_qty_increase, list_reorder_handle,
list_edit_item, list_confirm, list_close — en/es.
Verification
just test-e2e → 40 passed, 2 skipped (same as pre-change).
Type-check clean.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -164,5 +164,11 @@
|
||||
"sync_syncing": "Syncing…",
|
||||
"undo": "Undo",
|
||||
"undo_deleted_item": "Deleted {name}",
|
||||
"list_item_delete_aria": "Delete item"
|
||||
"list_item_delete_aria": "Delete item",
|
||||
"list_qty_decrease": "Decrease quantity",
|
||||
"list_qty_increase": "Increase quantity",
|
||||
"list_reorder_handle": "Reorder",
|
||||
"list_edit_item": "Edit item",
|
||||
"list_confirm": "Confirm",
|
||||
"list_close": "Close"
|
||||
}
|
||||
|
||||
@@ -164,5 +164,11 @@
|
||||
"sync_syncing": "Sincronizando…",
|
||||
"undo": "Deshacer",
|
||||
"undo_deleted_item": "{name} eliminado",
|
||||
"list_item_delete_aria": "Eliminar producto"
|
||||
"list_item_delete_aria": "Eliminar producto",
|
||||
"list_qty_decrease": "Reducir cantidad",
|
||||
"list_qty_increase": "Aumentar cantidad",
|
||||
"list_reorder_handle": "Reordenar",
|
||||
"list_edit_item": "Editar producto",
|
||||
"list_confirm": "Confirmar",
|
||||
"list_close": "Cerrar"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user