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

feat(fase-5.10): /lists/[id] row redesign — buttons + swipe-toggle + overlay

Browse Source 
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:
Oier Bravo
2026-04-13 19:20:55 +02:00
parent d14d6cd5ab
commit 1cb408acc2
5 changed files with 319 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
apps/web/tests/e2e/realtime.test.ts
View File

@@ -43,7 +43,12 @@ test.describe('Realtime sync — two sessions on the same list', () => {
}
});
test('R-E-02: Ana checks an item → Borja sees it checked', async ({ browser }) => {
test('R-E-02: Ana renames an item → Borja sees the new name via Realtime UPDATE', async ({ browser }) => {
// Fase 5.10 removed the checkbox/toggle button from the list detail
// view. Check/uncheck is a swipe gesture (unreliable under Chromium
// touch emulation). Renaming an item via the double-tap overlay fires
// the same realtime UPDATE path — this test still covers Ana → Borja
// sync; Vitest integration R-02 covers the UPDATE-row-payload invariant.
const ana = await loggedInListPage(browser, USERS.ana);
const borja = await loggedInListPage(browser, USERS.borja);
@@ -52,36 +57,34 @@ test.describe('Realtime sync — two sessions on the same list', () => {
});
try {
const itemName = `R-E-02-${Date.now()}`;
const originalName = `R-E-02-orig-${Date.now()}`;
const renamedName = `R-E-02-new-${Date.now()}`;
const anaInput = ana.page.getByPlaceholder(ADD_ITEM_PLACEHOLDER);
await anaInput.fill(itemName);
await anaInput.fill(originalName);
await anaInput.press('Enter');
await expect(ana.page.getByText(itemName)).toBeVisible({ timeout: 5_000 });
await expect(borja.page.getByText(itemName)).toBeVisible({ timeout: 5_000 });
await expect(ana.page.getByText(originalName)).toBeVisible({ timeout: 5_000 });
await expect(borja.page.getByText(originalName)).toBeVisible({ timeout: 5_000 });
// Ana checks the item. Wait 500ms after add to give the realtime
// echo + dedupe time to settle; otherwise the row might still have
// the temp UUID in the DOM and the button id changes under us.
// Wait a beat so the optimistic tempId is swapped for the real one.
await ana.page.waitForTimeout(500);
const anaRow = ana.page.locator('[role="listitem"]').filter({ hasText: itemName }).first();
await anaRow.getByRole('button', { name: /toggle item/i }).click();
// Verify Ana's own UI flipped (she checked it locally)
await expect(
ana.page
.locator('[role="listitem"]')
.filter({ hasText: itemName })
.getByRole('button', { name: /uncheck item/i })
).toBeVisible({ timeout: 5_000 });
// Open the overlay via the row's name button (double-click = double-tap).
const anaRowNameBtn = ana.page
.locator('[role="listitem"]')
.filter({ hasText: originalName })
.getByRole('button', { name: originalName })
.first();
await anaRowNameBtn.dblclick();
const overlay = ana.page.getByTestId('edit-overlay');
await expect(overlay).toBeVisible({ timeout: 3_000 });
const overlayInput = overlay.getByPlaceholder(/add item|añadir producto/i);
await overlayInput.fill(renamedName);
await overlay.getByRole('button', { name: /^confirm$|^confirmar$/i }).click();
// And Borja should see it checked too via Realtime UPDATE
await expect(
borja.page
.locator('[role="listitem"]')
.filter({ hasText: itemName })
.getByRole('button', { name: /uncheck item/i })
).toBeVisible({ timeout: 10_000 });
// Ana's UI shows the new name, and Borja's catches up via Realtime.
await expect(ana.page.getByText(renamedName)).toBeVisible({ timeout: 5_000 });
await expect(borja.page.getByText(renamedName)).toBeVisible({ timeout: 10_000 });
} finally {
await ana.context.close();
await borja.context.close();