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/src/routes/(app)/lists/+page.svelte

@@ -19,10 +19,15 @@
 	import { ShoppingCart, Plus, MoreHorizontal, Trash2, Archive, RotateCcw } from 'lucide-svelte';
 	import * as m from '$lib/paraglide/messages';
 	import ScreenMasthead from '$lib/components/ScreenMasthead.svelte';
+	import CreateListModal from '$lib/components/CreateListModal.svelte';
 
 	// ── State ──────────────────────────────────────────────────────────────────
 
 	let creating = $state(false);
+	let createModalOpen = $state(false);
+	// Fase 18.3.4: when the modal auto-suffixes "#N", surface the final name in
+	// a transient toast so the user sees what was actually created.
+	let autoNumberedToast = $state<string | null>(null);
 
 	let showTrash = $state(false);
 	let trashedLists = $state<ShoppingList[]>([]);
@@ -55,15 +60,29 @@
 	}
 
 	// ── Create ─────────────────────────────────────────────────────────────────
-	// Matches the /notes flow: click the masthead button → create with an empty
-	// name → navigate to /lists/[id] where the user renames inline.
+	// Fase 18: replaces the old "create with empty name + navigate to detail to
+	// rename inline" flow with an explicit modal. The modal prefills the input
+	// with `currentCollective.default_list_title`, suggests `#N` autocomplete
+	// for catalog-curated prefixes, and gates submit on non-empty trim.
 
-	async function handleCreate() {
-		if (!$currentCollective || !$currentUser || creating) return;
-		creating = true;
-		const created = await createList($currentCollective.id, '', $currentUser.id);
-		creating = false;
-		if (created) await goto(`/lists/${created.id}`);
+	function openCreateModal() {
+		// Open eagerly — the modal itself handles missing collective/user
+		// (the submit button is disabled until both are set). Letting the
+		// modal open on click avoids a UX trap where the button looks broken
+		// because the auth state hasn't propagated yet.
+		createModalOpen = true;
+	}
+
+	function closeCreateModal() {
+		createModalOpen = false;
+	}
+
+	async function handleCreated(id: string, finalName: string, wasAutoNumbered: boolean) {
+		if (wasAutoNumbered) {
+			autoNumberedToast = finalName;
+			setTimeout(() => (autoNumberedToast = null), 3000);
+		}
+		await goto(`/lists/${id}`);
 	}
 
 	// ── Actions ────────────────────────────────────────────────────────────────
@@ -132,8 +151,9 @@
 			</button>
 			<button
 				type="button"
-				onclick={handleCreate}
+				onclick={openCreateModal}
 				disabled={creating || !$currentCollective}
+				data-testid="lists-new-list-button"
 				class="ml-1 inline-flex items-center gap-1 rounded-md bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-60 dark:bg-slate-100 dark:text-slate-900"
 			>
 				<Plus size={14} strokeWidth={2} />
@@ -392,3 +412,18 @@
 	</div>
 
 </div>
+
+<CreateListModal
+	open={createModalOpen}
+	onClose={closeCreateModal}
+	onCreated={handleCreated}
+/>
+
+{#if autoNumberedToast}
+	<div
+		data-testid="auto-numbered-toast"
+		class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-md bg-slate-900 px-4 py-2 text-sm text-white shadow-lg dark:bg-slate-100 dark:text-slate-900"
+	>
+		{m.create_list_auto_numbered_toast({ title: autoNumberedToast })}
+	</div>
+{/if}