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

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

apps/web/tests/e2e/list-title-flow.test.ts

@@ -0,0 +1,116 @@
+/**
+ * LTF-series (UI): Shopping list title flow — required title, default prefill,
+ * auto-numbered `#N`, admin catalog CRUD. Fase 18.
+ *
+ * Live Keycloak login per test (no cached storageState). The admin specs run
+ * as Ana; the read-only spec runs as Borja (member). All specs land on a
+ * fresh modal each time, so we don't need to reset DB state between cases —
+ * we tag created rows with a unique timestamp suffix.
+ */
+import { test, expect, type Page } from '@playwright/test';
+import { USERS } from '../fixtures/users.js';
+import { loginAs } from '../fixtures/login.js';
+
+/** Click "New list" on the masthead and wait for the modal to mount. */
+async function openCreateListModal(page: Page) {
+	await page.getByRole('button', { name: /new list|nueva lista/i }).click();
+	await expect(page.getByTestId('create-list-modal')).toBeVisible({ timeout: 5_000 });
+}
+
+
+/**
+ * Set `collectives.default_list_title` by driving the in-page Supabase
+ * client directly. Faster + more deterministic than driving the manage UI,
+ * which lives in a separate spec (LTF-02 / LTF-04).
+ */
+async function setDefaultListTitle(page: Page, title: string) {
+	// Land on any auth-gated route so __sb is exposed and the active
+	// collective is loaded.
+	await page.goto('/lists');
+	await page.waitForFunction(
+		() => Boolean((window as unknown as { __sb?: unknown }).__sb),
+		null,
+		{ timeout: 10_000 }
+	);
+	await page.evaluate(async (value) => {
+		const sb = (
+			window as unknown as { __sb: import('@supabase/supabase-js').SupabaseClient }
+		).__sb;
+		await sb
+			.from('collectives')
+			.update({ default_list_title: value && value.length > 0 ? value : null })
+			.eq('id', 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa');
+	}, title);
+	// Force a reload so the root layout's `loadUserCollectives` hydrates
+	// `$currentCollective.default_list_title` with the updated value before
+	// the modal opens.
+	await page.reload();
+	await expect(
+		page.getByRole('button', { name: /new list|nueva lista/i })
+	).toBeVisible({ timeout: 15_000 });
+}
+
+test.describe('Shopping list title flow — admin (Ana)', () => {
+	test.beforeEach(async ({ page }) => {
+		await loginAs(page, USERS.ana);
+	});
+
+	test('LTF-01: default_list_title prefills the create modal and submits as-is', async ({
+		page
+	}) => {
+		const defaultTitle = `LTF01 ${Date.now()}`;
+		await setDefaultListTitle(page, defaultTitle);
+
+		// `setDefaultListTitle` already navigates to /lists after the reload.
+		await openCreateListModal(page);
+
+		// Input is prefilled with the configured default.
+		const input = page.getByTestId('create-list-modal-name');
+		await expect(input).toHaveValue(defaultTitle);
+
+		// Submit creates a list with the prefilled name — no `#1` suffix
+		// because the default was never added to the catalog (auto-suffix is
+		// catalog-gated).
+		await page.getByTestId('create-list-modal-submit').click();
+		await expect(page).toHaveURL(/\/lists\/[0-9a-f-]+$/, { timeout: 10_000 });
+		// List name lives in an `<input>` on the detail page (inline rename).
+		const titleInput = page.locator('input[aria-label]').filter({
+			has: page.locator(':scope[aria-label*="list name" i], :scope[aria-label*="nombre" i]')
+		});
+		// Fallback assertion that's robust to label changes: assert the input
+		// value directly via locator.inputValue() once the input is mounted.
+		await expect.poll(async () => {
+			const inputs = await page.locator('input').all();
+			for (const inp of inputs) {
+				const v = await inp.inputValue().catch(() => '');
+				if (v === defaultTitle) return v;
+			}
+			return '';
+		}, { timeout: 5_000 }).toBe(defaultTitle);
+		// Silence the unused locator warning — we keep titleInput so the
+		// intent is clear if the inputValue poll is ever rewritten.
+		void titleInput;
+	});
+
+	test('LTF-03: empty input keeps the submit button disabled', async ({ page }) => {
+		// Make sure no default is set so the input opens blank.
+		await setDefaultListTitle(page, '');
+
+		// `setDefaultListTitle` already navigates to /lists after the reload.
+		await openCreateListModal(page);
+
+		const input = page.getByTestId('create-list-modal-name');
+		const submit = page.getByTestId('create-list-modal-submit');
+
+		await expect(input).toHaveValue('');
+		await expect(submit).toBeDisabled();
+
+		// Typing then erasing should keep the disabled state when only spaces
+		// remain (trim-then-check).
+		await input.fill('   ');
+		await expect(submit).toBeDisabled();
+
+		await input.fill('something');
+		await expect(submit).toBeEnabled();
+	});
+});