feat(fase-10): sidebar "+ New collective" entry + modal (10.6)

Adds a new "+ New collective" entry at the bottom of the sidebar
collective-switcher dropdown (and the mobile drawer for parity).
Clicking it opens a CreateCollectiveModal that reuses the same
onboarding form — name + emoji grid — and calls the existing
create_collective() RPC (migration 012). On success, the new
collective is appended to $userCollectives, set active in
$currentCollective, persisted to localStorage, and the user is sent
to /lists.

Side effects:
- Switcher now opens even with a single collective (previously gated
  on >1) so the entry is always reachable; the chevron is always
  shown.
- DesktopSidebar gets a data-testid on the switcher button so the
  Playwright suite can target it without text matching.

O-04 (rescued from Fase 7): Eva creates her first collective via
onboarding, then opens the switcher and creates a second one without
leaving /lists; both collectives end up in the switcher and the DB.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

apps/web/src/lib/components/CreateCollectiveModal.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { getSupabase } from '$lib/supabase';
+	import { currentCollective, userCollectives } from '$lib/stores/collective';
+	import * as m from '$lib/paraglide/messages';
+
+	let { onClose }: { onClose: () => void } = $props();
+
+	const EMOJI_OPTIONS = [
+		'🏠', '🏡', '🏢', '🏣', '🏤', '🏥', '🏦', '🏨',
+		'🏩', '🏪', '🏫', '🏬', '🏭', '🏯', '🏰', '🗼',
+		'🌆', '🌇', '🌃', '🌉', '🏙️', '⛺', '🌴', '🌵'
+	];
+
+	let name = $state('');
+	let emoji = $state('🏠');
+	let creating = $state(false);
+	let error = $state<string | null>(null);
+
+	async function submit() {
+		if (!name.trim() || creating) return;
+		creating = true;
+		error = null;
+		const { data, error: rpcErr } = await getSupabase().rpc('create_collective', {
+			p_name: name.trim(),
+			p_emoji: emoji
+		});
+		if (rpcErr || !data) {
+			creating = false;
+			error = rpcErr?.message ?? 'Failed to create collective.';
+			return;
+		}
+		const created = data as { id: string; name: string; emoji: string; created_at: string };
+		userCollectives.update((list) => [...list, created]);
+		currentCollective.set(created);
+		localStorage.setItem('activeCollectiveId', created.id);
+		creating = false;
+		onClose();
+		await goto('/lists');
+	}
+</script>
+
+<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" data-testid="create-collective-modal">
+	<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_collective_modal_title()}
+		</h2>
+		<form onsubmit={(e) => { e.preventDefault(); void submit(); }} class="space-y-4">
+			<div>
+				<label for="cc-modal-name" class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">
+					{m.onboarding_collective_name()}
+				</label>
+				<input
+					id="cc-modal-name"
+					data-testid="create-collective-modal-name"
+					type="text"
+					bind:value={name}
+					placeholder={m.onboarding_collective_name_placeholder()}
+					maxlength="60"
+					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>
+
+			<div>
+				<p class="mb-2 text-sm font-medium text-slate-700 dark:text-slate-300">
+					{m.onboarding_collective_emoji()}
+				</p>
+				<div class="grid grid-cols-8 gap-1">
+					{#each EMOJI_OPTIONS as e}
+						<button
+							type="button"
+							class="flex h-9 w-9 items-center justify-center rounded-md text-xl transition-colors
+								{emoji === e
+								? 'bg-slate-900 dark:bg-slate-100'
+								: 'hover:bg-slate-100 dark:hover:bg-slate-700'}"
+							onclick={() => (emoji = e)}
+							aria-label={e}
+						>{e}</button>
+					{/each}
+				</div>
+			</div>
+
+			{#if error}
+				<p class="text-sm text-red-600">{error}</p>
+			{/if}
+
+			<div class="flex justify-end gap-2">
+				<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-collective-modal-submit"
+					disabled={!name.trim() || creating}
+					class="rounded-lg bg-slate-900 px-4 py-1.5 text-sm font-semibold text-white
+						transition-opacity hover:opacity-90 disabled:opacity-50
+						dark:bg-slate-50 dark:text-slate-900"
+				>
+					{creating ? m.loading() : m.create_collective_modal_button()}
+				</button>
+			</div>
+		</form>
+	</div>
+</div>

apps/web/src/lib/components/layout/DesktopSidebar.svelte

@@ -3,8 +3,9 @@
 	import { displayName } from '$lib/stores/auth';
 	import { currentCollective, userCollectives } from '$lib/stores/collective';
 	import Avatar from '$lib/components/Avatar.svelte';
+	import CreateCollectiveModal from '$lib/components/CreateCollectiveModal.svelte';
 	import * as m from '$lib/paraglide/messages';
-	import { ShoppingCart, CheckSquare, FileText, Search, Settings } from 'lucide-svelte';
+	import { ShoppingCart, CheckSquare, FileText, Search, Settings, Plus } from 'lucide-svelte';
 
 	const navItems = [
 		{ href: '/lists',  label: () => m.nav_lists(),  icon: ShoppingCart },
@@ -14,6 +15,7 @@
 	];
 
 	let switcherOpen = $state(false);
+	let showCreate = $state(false);
 
 	const activePath = $derived($page.url.pathname);
 
@@ -25,6 +27,11 @@
 			switcherOpen = false;
 		}
 	}
+
+	function openCreateCollective() {
+		switcherOpen = false;
+		showCreate = true;
+	}
 </script>
 
 <aside
@@ -33,6 +40,7 @@
 >
 	<div class="relative">
 		<button
+			data-testid="sidebar-collective-switcher"
 			class="flex h-14 w-full items-center gap-2 px-4 text-left hover:bg-black/5 dark:hover:bg-white/5"
 			onclick={() => (switcherOpen = !switcherOpen)}
 			aria-expanded={switcherOpen}
@@ -41,11 +49,9 @@
 			<span class="min-w-0 flex-1 truncate text-sm font-semibold text-slate-900 dark:text-slate-50">
 				{$currentCollective?.name ?? m.app_name()}
 			</span>
-			{#if $userCollectives.length > 1}
-				<span class="text-xs text-slate-400">⌄</span>
-			{/if}
+			<span class="text-xs text-slate-400">⌄</span>
 		</button>
-		{#if switcherOpen && $userCollectives.length > 1}
+		{#if switcherOpen}
 			<div class="absolute left-0 right-0 top-full z-50 bg-surface-raised shadow-[0px_20px_40px_rgba(15,23,42,0.06)]">
 				{#each $userCollectives as c}
 					<button
@@ -56,6 +62,15 @@
 						<span class="truncate">{c.name}</span>
 					</button>
 				{/each}
+				<button
+					data-testid="sidebar-create-collective"
+					class="flex w-full items-center gap-2 border-t border-black/5 px-4 py-2.5 text-left text-sm font-medium text-slate-700
+						hover:bg-black/5 dark:border-white/5 dark:text-slate-300 dark:hover:bg-white/5"
+					onclick={openCreateCollective}
+				>
+					<Plus size={14} strokeWidth={1.5} />
+					{m.sidebar_create_collective()}
+				</button>
 			</div>
 		{/if}
 	</div>
@@ -90,3 +105,7 @@
 		</div>
 	</div>
 </aside>
+
+{#if showCreate}
+	<CreateCollectiveModal onClose={() => (showCreate = false)} />
+{/if}

apps/web/src/lib/components/layout/MobileDrawer.svelte

@@ -2,9 +2,12 @@
 	import { currentCollective, userCollectives } from '$lib/stores/collective';
 	import { displayName } from '$lib/stores/auth';
 	import Avatar from '$lib/components/Avatar.svelte';
+	import CreateCollectiveModal from '$lib/components/CreateCollectiveModal.svelte';
 	import { logout } from '$lib/auth';
 	import * as m from '$lib/paraglide/messages';
-	import { Settings, Users, LogOut, X } from 'lucide-svelte';
+	import { Settings, Users, LogOut, X, Plus } from 'lucide-svelte';
+
+	let showCreate = $state(false);
 
 	let { open = $bindable(false) }: { open?: boolean } = $props();
 
@@ -65,10 +68,21 @@
 					</button>
 				{/each}
 			</div>
+			<button
+				type="button"
+				onclick={() => {
+					close();
+					showCreate = true;
+				}}
+				class="mt-2 flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm text-text-secondary hover:bg-black/5 dark:hover:bg-white/5"
+			>
+				<Plus size={14} strokeWidth={1.5} />
+				{m.sidebar_create_collective()}
+			</button>
 			<a
 				href="/collective/manage"
 				onclick={close}
-				class="mt-2 flex items-center gap-2 rounded-md px-2 py-2 text-sm text-text-secondary hover:bg-black/5 dark:hover:bg-white/5"
+				class="mt-1 flex items-center gap-2 rounded-md px-2 py-2 text-sm text-text-secondary hover:bg-black/5 dark:hover:bg-white/5"
 			>
 				<Users size={14} strokeWidth={1.5} />
 				{m.manage_title()}
@@ -106,3 +120,7 @@
 		</div>
 	</aside>
 {/if}
+
+{#if showCreate}
+	<CreateCollectiveModal onClose={() => (showCreate = false)} />
+{/if}

apps/web/tests/e2e/sidebar-create-collective.test.ts

@@ -0,0 +1,65 @@
+/**
+ * O-04 (rescued from Fase 7) — sidebar "+ New collective" entry (Fase 10.6).
+ *
+ * Eva starts onboarded with one collective; she opens the sidebar switcher,
+ * clicks "+ New collective", fills the modal, and ends up on /lists with
+ * both collectives visible in the switcher.
+ */
+import { test, expect } from '@playwright/test';
+import { USERS } from '../fixtures/users.js';
+import { loginAs } from '../fixtures/login.js';
+import { resetEva } from '../fixtures/db.js';
+import { closePool, sql } from '@colectivo/test-utils';
+
+test.describe.configure({ mode: 'serial' });
+
+test.describe('Sidebar create collective (CU-H02 follow-up)', () => {
+	test.beforeEach(async () => {
+		await resetEva();
+	});
+
+	test.afterAll(async () => {
+		await resetEva();
+		await closePool();
+	});
+
+	test('O-04: Eva with one collective creates a second from the sidebar', async ({ page }) => {
+		// Onboard Eva with a first collective so the switcher renders.
+		const firstName = `Eva First ${Date.now()}`;
+		await loginAs(page, USERS.eva, { waitForCollective: false });
+		await expect(page).toHaveURL(/\/onboarding$/, { timeout: 15_000 });
+		await page.getByTestId('collective-name-input').fill(firstName);
+		await page.getByTestId('collective-submit').click();
+		await expect(page).toHaveURL(/\/lists$/, { timeout: 15_000 });
+
+		// Open the sidebar switcher and pick "+ New collective".
+		await page.getByTestId('sidebar-collective-switcher').click();
+		const newEntry = page.getByTestId('sidebar-create-collective');
+		await expect(newEntry).toBeVisible({ timeout: 5_000 });
+		await newEntry.click();
+
+		const secondName = `Eva Second ${Date.now()}`;
+		await page.getByTestId('create-collective-modal-name').fill(secondName);
+		await page.getByTestId('create-collective-modal-submit').click();
+
+		// Landed on /lists with the second collective active.
+		await expect(page).toHaveURL(/\/lists$/, { timeout: 15_000 });
+
+		// Both collectives in the switcher. Use .first() because the switcher
+		// header also renders the active collective name.
+		await page.getByTestId('sidebar-collective-switcher').click();
+		await expect(
+			page.getByTestId('desktop-sidebar').getByText(firstName).first()
+		).toBeVisible({ timeout: 5_000 });
+		await expect(
+			page.getByTestId('desktop-sidebar').getByText(secondName).first()
+		).toBeVisible();
+
+		// DB-side: Eva has two collectives.
+		const r = await sql(
+			'SELECT count(*)::int AS n FROM public.collectives WHERE created_by = $1',
+			[USERS.eva.id]
+		);
+		expect(r.rows[0].n).toBe(2);
+	});
+});