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

feat(fase-18): CreateListModal replaces empty-create-then-rename flow

Browse Source 
`CreateListModal.svelte` is the new entry point for "New list" — opens
on the masthead button click, prefills the input with
`currentCollective.default_list_title` (Fase 18.3.1), shows an inline
autocomplete dropdown via `fetchTitleSuggestions`, and renders a
"Sugerencia: Compra #6" chip when (a) the typed value exactly matches a
catalog-curated prefix case-insensitively and (b) `computeNextNumber`
resolves a value (Fase 18.3.2). Submit is disabled while the trimmed
value is empty or creation is in flight (Fase 18.3.3). On submit, if the
catalog match still holds, the modal auto-suffixes "#N" before
inserting and the lists page shows a transient toast confirming the
final name (Fase 18.3.4).

The prefill effect is gated by a `wasOpen` edge-tracker — a naive
`$effect(() => { if (open) value = default })` re-runs whenever
`$currentCollective` updates (e.g. a realtime UPDATE landing after the
user typed something), which clobbered the typed value and froze the
submit button as disabled. The edge guard limits the prefill to the
false→true transition.

`/lists/+page.svelte`: the masthead "New list" button now opens the
modal instead of calling `createList(collective, '', user)` and goto-ing
to the detail page for inline rename. The legacy flow was nice for
quick creates but couldn't enforce a required title or surface the
catalog. Existing per-list actions are unchanged.

15 new i18n strings (en + es) for the modal, the suggestion chip, the
auto-numbered toast, and the manage-page subsection that ships in the
next commit.

Updated existing e2e specs: `lists.test.ts`'s `createList()` helper +
the C-13 guest path now drive the modal instead of the legacy
placeholder input; `session.test.ts` S-03 uses the modal for the
fresh-list setup. New `tests/e2e/list-title-flow.test.ts` adds LTF-01
(default prefill end-to-end with a Supabase-driven setDefaultListTitle
since the manage UI lands in the next commit) and LTF-03 (empty input
keeps submit disabled, even with whitespace).

Tests: 4 lists + 3 session + 2 new LTF specs all green (9/9).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Oier Bravo
2026-05-19 02:29:17 +02:00
parent 3c4551acd9
commit 4ce24a4145
7 changed files with 515 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
apps/web/tests/e2e/lists.test.ts
View File

@@ -9,8 +9,6 @@ import { test, expect, type Page } from '@playwright/test';
import { USERS } from '../fixtures/users.js';
import { loginAs } from '../fixtures/login.js';
const PLACEHOLDER_NEW_LIST = /weekly shop|compra semanal/i;
/** Heading for a list — may render as h2 (featured card) or h3 (grid item). */
function listHeading(page: Page, name: string) {
return page.getByRole('heading', { name: new RegExp(`^${name}$`) });
@@ -44,16 +42,15 @@ async function gotoListsClean(page: Page) {
}
async function createList(page: Page, name: string) {
// Fase 18: "New list" now opens a create modal instead of jumping straight
// to the detail page with an empty name. Type the name, submit, then
// bounce back to /lists so callers see the new card in the grid.
await page.getByRole('button', { name: /new list|nueva lista/i }).click();
// Lands on /lists/[id]; the editable title input carries the placeholder.
await expect(page.getByTestId('create-list-modal')).toBeVisible({ timeout: 5_000 });
const input = page.getByTestId('create-list-modal-name');
await input.fill(name);
await page.getByTestId('create-list-modal-submit').click();
await expect(page).toHaveURL(/\/lists\/[0-9a-f-]+$/, { timeout: 10_000 });
const titleInput = page.getByPlaceholder(PLACEHOLDER_NEW_LIST);
await expect(titleInput).toBeVisible({ timeout: 10_000 });
await titleInput.fill(name);
// Blur + wait for the 500 ms autosave debounce + buffer.
await titleInput.blur();
await page.waitForTimeout(900);
// Navigate back to /lists to give callers a consistent starting state.
await page.goto('/lists');
await expect(listHeading(page, name)).toBeVisible({ timeout: 10_000 });
}
@@ -119,16 +116,26 @@ test.describe('Shopping lists — guest (David, read-only)', () => {
await expect(listHeading(page, 'Weekly shop')).toBeVisible({ timeout: 15_000 });
// If the create-list input is even rendered for guests, typing into it
// and pressing Enter must NOT create a committed list (RLS blocks the
// insert; the optimistic row rolls back).
const input = page.getByPlaceholder(PLACEHOLDER_NEW_LIST);
if (await input.isVisible({ timeout: 2_000 }).catch(() => false)) {
const name = `David sneaky ${Date.now()}`;
await input.fill(name);
await input.press('Enter');
await page.waitForTimeout(1_500);
await expect(listHeading(page, name)).not.toBeVisible({ timeout: 2_000 });
// Fase 18: the entry point is the masthead "New list" button which opens
// a modal. Guests CAN open the modal (we don't gate it client-side),
// but the actual INSERT is blocked by RLS — `shopping_lists_insert`
// requires `is_active_member(collective_id)` which excludes role=guest.
// Try to drive the modal and confirm no committed row appears.
const newListBtn = page.getByRole('button', { name: /new list|nueva lista/i });
if (await newListBtn.isVisible({ timeout: 2_000 }).catch(() => false)) {
await newListBtn.click();
const modalVisible = await page
.getByTestId('create-list-modal')
.isVisible({ timeout: 2_000 })
.catch(() => false);
if (modalVisible) {
const name = `David sneaky ${Date.now()}`;
await page.getByTestId('create-list-modal-name').fill(name);
await page.getByTestId('create-list-modal-submit').click();
await page.waitForTimeout(1_500);
await page.goto('/lists');
await expect(listHeading(page, name)).not.toBeVisible({ timeout: 2_000 });
}
}
});
});