From 4ce24a4145872cf0794bb72b9fde93937dad25e8 Mon Sep 17 00:00:00 2001
From: Oier Bravo Urtasun <oierbravo@gmail.com>
Date: Tue, 19 May 2026 02:29:17 +0200
Subject: [PATCH] feat(fase-18): CreateListModal replaces
 empty-create-then-rename flow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`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/messages/en.json                     |  21 +-
 apps/web/messages/es.json                     |  21 +-
 .../src/lib/components/CreateListModal.svelte | 283 ++++++++++++++++++
 apps/web/src/routes/(app)/lists/+page.svelte  |  53 +++-
 apps/web/tests/e2e/list-title-flow.test.ts    | 116 +++++++
 apps/web/tests/e2e/lists.test.ts              |  47 +--
 apps/web/tests/e2e/session.test.ts            |  14 +-
 7 files changed, 515 insertions(+), 40 deletions(-)
 create mode 100644 apps/web/src/lib/components/CreateListModal.svelte
 create mode 100644 apps/web/tests/e2e/list-title-flow.test.ts

diff --git a/apps/web/messages/en.json b/apps/web/messages/en.json
index f9f11fb..a4516a1 100644
--- a/apps/web/messages/en.json
+++ b/apps/web/messages/en.json
@@ -342,5 +342,24 @@
 	"common_items_add_name_label": "Item name",
 	"common_items_add_name_placeholder": "e.g. olive oil",
 	"common_items_add_visibility_label": "Visibility",
-	"common_items_add_save": "Add"
+	"common_items_add_save": "Add",
+	"create_list_modal_title": "New shopping list",
+	"create_list_input_label": "List name",
+	"create_list_input_placeholder": "e.g. Weekly shop",
+	"create_list_submit": "Create",
+	"create_list_suggestion_chip": "Suggestion: {title}",
+	"create_list_auto_numbered_toast": "Created as “{title}”",
+	"manage_list_titles_section_title": "Suggested titles",
+	"manage_list_titles_blurb": "Pre-set a default title for new lists and curate suggestions admins want to surface.",
+	"manage_default_list_title_label": "Default new-list title",
+	"manage_default_list_title_placeholder": "e.g. Weekly shop",
+	"manage_default_list_title_clear": "Clear",
+	"manage_list_titles_empty": "No curated titles yet.",
+	"manage_list_titles_add_button": "Add title",
+	"manage_list_titles_add_modal_title": "Add suggested title",
+	"manage_list_titles_add_name_label": "Title",
+	"manage_list_titles_add_name_placeholder": "e.g. Compra",
+	"manage_list_titles_add_save": "Add",
+	"manage_list_titles_remove": "Remove",
+	"manage_list_titles_readonly": "Only admins can curate these titles."
 }
diff --git a/apps/web/messages/es.json b/apps/web/messages/es.json
index d279f27..1f71d3f 100644
--- a/apps/web/messages/es.json
+++ b/apps/web/messages/es.json
@@ -342,5 +342,24 @@
 	"common_items_add_name_label": "Nombre del item",
 	"common_items_add_name_placeholder": "p. ej. aceite de oliva",
 	"common_items_add_visibility_label": "Visibilidad",
-	"common_items_add_save": "Añadir"
+	"common_items_add_save": "Añadir",
+	"create_list_modal_title": "Nueva lista de la compra",
+	"create_list_input_label": "Nombre de la lista",
+	"create_list_input_placeholder": "p. ej. Compra semanal",
+	"create_list_submit": "Crear",
+	"create_list_suggestion_chip": "Sugerencia: {title}",
+	"create_list_auto_numbered_toast": "Creada como «{title}»",
+	"manage_list_titles_section_title": "Títulos sugeridos",
+	"manage_list_titles_blurb": "Preconfigura un título por defecto para las nuevas listas y mantén una lista de sugerencias.",
+	"manage_default_list_title_label": "Título por defecto",
+	"manage_default_list_title_placeholder": "p. ej. Compra semanal",
+	"manage_default_list_title_clear": "Borrar",
+	"manage_list_titles_empty": "No hay títulos sugeridos todavía.",
+	"manage_list_titles_add_button": "Añadir título",
+	"manage_list_titles_add_modal_title": "Añadir título sugerido",
+	"manage_list_titles_add_name_label": "Título",
+	"manage_list_titles_add_name_placeholder": "p. ej. Compra",
+	"manage_list_titles_add_save": "Añadir",
+	"manage_list_titles_remove": "Borrar",
+	"manage_list_titles_readonly": "Solo los admins pueden gestionar estos títulos."
 }
diff --git a/apps/web/src/lib/components/CreateListModal.svelte b/apps/web/src/lib/components/CreateListModal.svelte
new file mode 100644
index 0000000..adc86f9
--- /dev/null
+++ b/apps/web/src/lib/components/CreateListModal.svelte
@@ -0,0 +1,283 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { currentCollective } from '$lib/stores/collective';
+	import { currentUser } from '$lib/stores/auth';
+	import { createList } from '$lib/stores/lists';
+	import {
+		listTitleCatalog,
+		loadTitleCatalog,
+		fetchTitleSuggestions,
+		computeNextNumber
+	} from '$lib/stores/listTitles';
+	import { parseTitle } from '$lib/utils/list-title';
+	import * as m from '$lib/paraglide/messages';
+	import Spinner from '$lib/components/Spinner.svelte';
+
+	interface Props {
+		open: boolean;
+		onClose: () => void;
+		onCreated?: (id: string, finalName: string, wasAutoNumbered: boolean) => void;
+	}
+
+	const { open, onClose, onCreated }: Props = $props();
+
+	let value = $state('');
+	let suggestions = $state<string[]>([]);
+	let suggestionsTimer: ReturnType<typeof setTimeout> | null = null;
+	let creating = $state(false);
+	let error = $state<string | null>(null);
+
+	// Track open transitions so we only prefill on the false→true edge.
+	// A naive `$effect(() => { if (open) value = default })` re-runs whenever
+	// `$currentCollective` updates (e.g. realtime UPDATE after the user types
+	// something), clobbering the typed value. Mirroring `open` into a local
+	// state and comparing isolates the trigger to the actual open edge.
+	let wasOpen = $state(false);
+
+	$effect(() => {
+		if (open && !wasOpen) {
+			value = $currentCollective?.default_list_title ?? '';
+			error = null;
+			if ($currentCollective) {
+				void loadTitleCatalog($currentCollective.id);
+			}
+			wasOpen = true;
+		} else if (!open && wasOpen) {
+			// Reset on close so reopening starts fresh.
+			value = '';
+			suggestions = [];
+			error = null;
+			wasOpen = false;
+		}
+	});
+
+	// ── Suggestions (debounced) ─────────────────────────────────────────────
+
+	function refreshSuggestions(prefix: string) {
+		if (suggestionsTimer) clearTimeout(suggestionsTimer);
+		const cid = $currentCollective?.id;
+		if (!cid) {
+			suggestions = [];
+			return;
+		}
+		suggestionsTimer = setTimeout(async () => {
+			suggestions = await fetchTitleSuggestions(cid, prefix);
+		}, 150);
+	}
+
+	// Drive suggestions reactively off `value` (which is `bind:value`d below).
+	// Using `$effect` instead of an explicit onInput keeps the click-on-chip /
+	// click-on-suggestion paths consistent — they assign `value` and the
+	// effect re-fires automatically.
+	$effect(() => {
+		// Read `value` so this effect depends on it.
+		const v = value;
+		refreshSuggestions(v);
+	});
+
+	// ── Catalog match (drives the suggestion chip + auto-suffix) ────────────
+
+	const catalogTitles = $derived($listTitleCatalog.map((r) => r.title));
+
+	const trimmed = $derived(value.trim());
+	const parsed = $derived(parseTitle(trimmed));
+
+	/**
+	 * True when the typed value exactly matches a catalog entry
+	 * case-insensitively AND has no `#N` suffix yet. That's the only state
+	 * where auto-suffix fires (rule 9 from the orchestrating prompt).
+	 */
+	const catalogMatch = $derived.by(() => {
+		if (!parsed.prefix || parsed.number !== null) return null;
+		const norm = parsed.prefix.toLowerCase();
+		return catalogTitles.find((t) => t.toLowerCase() === norm) ?? null;
+	});
+
+	// Suggestion chip — `Sugerencia: Compra #6`. We compute the proposed
+	// number lazily when the catalog match changes.
+	let proposedNumber = $state<number | null>(null);
+
+	$effect(() => {
+		const cm = catalogMatch;
+		const cid = $currentCollective?.id;
+		if (!cm || !cid) {
+			proposedNumber = null;
+			return;
+		}
+		void computeNextNumber(cid, cm).then((n) => {
+			// Only update if the inputs haven't drifted while we awaited.
+			if (catalogMatch === cm && $currentCollective?.id === cid) {
+				proposedNumber = n;
+			}
+		});
+	});
+
+	const suggestionChipLabel = $derived.by(() => {
+		if (!catalogMatch || proposedNumber === null) return null;
+		return `${catalogMatch} #${proposedNumber}`;
+	});
+
+	function applyChip() {
+		if (!suggestionChipLabel) return;
+		value = suggestionChipLabel;
+		void refreshSuggestions(value);
+	}
+
+	function applySuggestion(s: string) {
+		value = s;
+		void refreshSuggestions(value);
+	}
+
+	// ── Submit ──────────────────────────────────────────────────────────────
+
+	const submitDisabled = $derived(trimmed.length === 0 || creating);
+
+	async function submit() {
+		if (submitDisabled || !$currentCollective || !$currentUser) return;
+		creating = true;
+		error = null;
+
+		let finalName = trimmed;
+		let wasAutoNumbered = false;
+
+		// Auto-suffix only if (a) value exactly matches a catalog entry and
+		// (b) `computeNextNumber` returns a value. Otherwise insert as-is.
+		if (catalogMatch) {
+			const n = await computeNextNumber($currentCollective.id, catalogMatch);
+			finalName = `${catalogMatch} #${n}`;
+			wasAutoNumbered = true;
+		}
+
+		const created = await createList($currentCollective.id, finalName, $currentUser.id);
+		creating = false;
+		if (!created) {
+			error = 'Failed to create list.';
+			return;
+		}
+		onClose();
+		onCreated?.(created.id, finalName, wasAutoNumbered);
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			onClose();
+		} else if (e.key === 'Enter') {
+			// Always-prevent default to keep the form behaviour identical
+			// whether the input or the submit button has focus; we drive the
+			// submit explicitly so the disabled check applies uniformly.
+			e.preventDefault();
+			void submit();
+		}
+	}
+</script>
+
+{#if open}
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+		data-testid="create-list-modal"
+		role="dialog"
+		aria-modal="true"
+		onclick={(e) => {
+			if (e.target === e.currentTarget) onClose();
+		}}
+		onkeydown={onKeydown}
+		tabindex="-1"
+	>
+		<div
+			class="w-full max-w-md rounded-lg bg-surface p-5 shadow-[0px_20px_40px_rgba(15,23,42,0.2)] dark:bg-surface-raised"
+		>
+			<h2 class="mb-4 text-base font-semibold text-slate-900 dark:text-slate-50">
+				{m.create_list_modal_title()}
+			</h2>
+
+			<form
+				onsubmit={(e) => {
+					e.preventDefault();
+					void submit();
+				}}
+				class="space-y-3"
+			>
+				<div>
+					<label
+						for="create-list-modal-name"
+						class="mb-1 block text-xs font-medium text-text-secondary"
+					>
+						{m.create_list_input_label()}
+					</label>
+					<!-- svelte-ignore a11y_autofocus -->
+					<input
+						id="create-list-modal-name"
+						data-testid="create-list-modal-name"
+						type="text"
+						bind:value
+						autofocus
+						placeholder={m.create_list_input_placeholder()}
+						maxlength="120"
+						class="w-full rounded-lg border border-slate-300 bg-surface px-3 py-2 text-sm focus:border-slate-500 focus:outline-none dark:border-slate-600 dark:bg-slate-800"
+					/>
+				</div>
+
+				{#if suggestionChipLabel}
+					<button
+						type="button"
+						data-testid="create-list-suggestion-chip"
+						onclick={applyChip}
+						class="inline-flex items-center rounded-md bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
+					>
+						{m.create_list_suggestion_chip({ title: suggestionChipLabel })}
+					</button>
+				{/if}
+
+				{#if suggestions.length > 0}
+					<ul
+						data-testid="create-list-suggestion-list"
+						class="max-h-40 overflow-y-auto rounded-md border border-slate-200 bg-surface text-sm dark:border-slate-700"
+					>
+						{#each suggestions as s (s)}
+							<li>
+								<button
+									type="button"
+									data-testid={`create-list-suggestion-${s}`}
+									onclick={() => applySuggestion(s)}
+									class="block w-full px-3 py-1.5 text-left text-slate-700 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700"
+								>
+									{s}
+								</button>
+							</li>
+						{/each}
+					</ul>
+				{/if}
+
+				{#if error}
+					<p class="text-sm text-destructive" data-testid="create-list-modal-error">
+						{error}
+					</p>
+				{/if}
+
+				<div class="flex justify-end gap-2 pt-1">
+					<button
+						type="button"
+						onclick={onClose}
+						class="rounded-md px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
+					>
+						{m.common_cancel()}
+					</button>
+					<button
+						type="submit"
+						data-testid="create-list-modal-submit"
+						disabled={submitDisabled}
+						class="inline-flex items-center gap-2 rounded-md bg-slate-900 px-4 py-1.5 text-sm font-semibold text-white hover:opacity-90 disabled:opacity-50 dark:bg-slate-50 dark:text-slate-900"
+					>
+						{#if creating}
+							<Spinner size="sm" />
+							<span>{m.loading()}</span>
+						{:else}
+							{m.create_list_submit()}
+						{/if}
+					</button>
+				</div>
+			</form>
+		</div>
+	</div>
+{/if}
diff --git a/apps/web/src/routes/(app)/lists/+page.svelte b/apps/web/src/routes/(app)/lists/+page.svelte
index dab8f30..194edf8 100644
--- a/apps/web/src/routes/(app)/lists/+page.svelte
+++ b/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}
diff --git a/apps/web/tests/e2e/list-title-flow.test.ts b/apps/web/tests/e2e/list-title-flow.test.ts
new file mode 100644
index 0000000..4e12ce4
--- /dev/null
+++ b/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();
+	});
+});
diff --git a/apps/web/tests/e2e/lists.test.ts b/apps/web/tests/e2e/lists.test.ts
index 6baecf0..f124013 100644
--- a/apps/web/tests/e2e/lists.test.ts
+++ b/apps/web/tests/e2e/lists.test.ts
@@ -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 });
+			}
 		}
 	});
 });
diff --git a/apps/web/tests/e2e/session.test.ts b/apps/web/tests/e2e/session.test.ts
index 90f802d..4c6dde6 100644
--- a/apps/web/tests/e2e/session.test.ts
+++ b/apps/web/tests/e2e/session.test.ts
@@ -59,20 +59,16 @@ test.describe('Shopping session — full-screen mode', () => {
 		page
 	}) => {
 		// Need a fresh list so completing it doesn't affect shared seed state.
-		// Use the new big-button create flow: masthead "New list" → lands on
-		// /lists/[id] → fill inline title → autosave → we're already on the
-		// detail view, no need to navigate back.
+		// Fase 18: masthead "New list" → modal opens → fill + submit → lands
+		// on the detail view at /lists/[id].
 		await page.goto('/lists');
 		await page
 			.getByRole('button', { name: /new list|nueva lista/i })
 			.click();
-		await expect(page).toHaveURL(/\/lists\/[0-9a-f-]+$/, { timeout: 10_000 });
 		const listName = `S-03-list-${Date.now()}`;
-		const titleInput = page.getByPlaceholder(/weekly shop|compra semanal/i);
-		await expect(titleInput).toBeVisible({ timeout: 10_000 });
-		await titleInput.fill(listName);
-		await titleInput.blur();
-		await page.waitForTimeout(900); // autosave debounce
+		await page.getByTestId('create-list-modal-name').fill(listName);
+		await page.getByTestId('create-list-modal-submit').click();
+		await expect(page).toHaveURL(/\/lists\/[0-9a-f-]+$/, { timeout: 10_000 });
 
 		// Open session mode
 		await page.getByTestId('start-session').click();