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 @@
+
+
+{#if open}
+
{
+ if (e.target === e.currentTarget) onClose();
+ }}
+ onkeydown={onKeydown}
+ tabindex="-1"
+ >
+
+
+ {m.create_list_modal_title()}
+
+
+
+
+
+{/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(null);
let showTrash = $state(false);
let trashedLists = $state([]);
@@ -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 @@
@@ -392,3 +412,18 @@
+
+
+
+{#if autoNumberedToast}
+
+ {m.create_list_auto_numbered_toast({ title: autoNumberedToast })}
+
+{/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 ` ` 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();