feat(fase-5): mobile UX shell + masthead + swipe-delete undo (224 tests green)

5.0 Tests primero
  Playwright: mobile-shell.test.ts (4 — sidebar hidden on mobile, bottom tab
    bar visible with aria-current, hamburger opens drawer, desktop shows
    sidebar), mobile-masthead.test.ts (4 — every top-level route pairs
    masthead-label + masthead-title), mobile-swipe-delete.test.ts (M-06/M-07
    describe.skip — Chromium touch emulation flaky; needs `playwright install
    webkit`)
  Vitest: undoQueue.test.ts (5 — schedule+commit, undo+restore, TTL expiry,
    double-undo no-op, custom ttlMs)

5.1 Responsive shell
  DesktopSidebar.svelte (hidden md:flex)
  MobileTopBar.svelte (md:hidden sticky backdrop-blur-xl)
  BottomTabBar.svelte (md:hidden glassmorphism, safe-area-inset-bottom)
  MobileDrawer.svelte (backdrop + collective switcher + settings + logout)
  (app)/+layout.svelte — CRITICAL FIX: flex flex-col md:flex-row. Was
    horizontal-only, which pushed masthead off-screen on mobile. UndoToast
    mounted globally here.

5.2 Masthead + responsive padding
  ScreenMasthead.svelte — label (13px uppercase) + title (26px/32px).
  Applied to /lists, /tasks, /notes, /search. px-8 → px-4 md:px-6 everywhere.
  messages/{en,es}.json: masthead_{lists,tasks,notes,search}_label +
    masthead_search_title, undo, undo_deleted_item, list_item_delete_aria.

5.4 Red-zone swipe-delete on /lists/[id]
  SWIPE_MAX=96 (red zone rest width), SWIPE_THRESHOLD=48 (latch-open),
  SWIPE_COMMIT_THRESHOLD=200 (full-swipe commit). Red zone button exposes
  aria-label="Delete item"/"Eliminar producto". handleDelete uses
  scheduleUndoable — optimistic local removal, 4-s TTL, commit to Supabase
  on timeout or restore from snapshot on Undo.

5.5 UndoQueue + UndoToast
  src/lib/sync/undoQueue.ts — writable store + Map-backed actions with TTL.
    __flushUndoQueueForTests + __pendingUndoCount for Vitest.
  src/lib/components/UndoToast.svelte — renders latest undoable, offset
    above bottom tab bar (bottom: calc(env(safe-area-inset-bottom) + 4.5rem)),
    Undo button.

5.6 Scrollable frequency chips
  ItemSuggestions.svelte — mobile: flex overflow-x-auto with
    [scrollbar-width:none] [&::-webkit-scrollbar]:hidden; desktop: wraps.
    Chips shrink-0 so they don't compress.

5.7 Shell polish on tasks/notes/search
  Search group headers now carry "{n} MATCH / MATCHES" badges.
  Grid in /lists goes 2-col → 3-col at md+.
  Sticky create input offset for the bottom tab bar on mobile.

5.Z Verification
  just test-all → 224 verdes, 4 skipped
    34 pgTAP (unchanged)
    140 Vitest integration + 2 skipped presence (unchanged)
    11 Vitest unit (was 6, +5 undoQueue)
    39 Playwright + 2 skipped swipe-touch (was 31, +8 new mobile tests)

Deferred (explicitly):
  - Presence avatars + item counts on list cards (needs per-list count RPC)
  - Integrate undoQueue in task delete + note trash (trivial when needed)
  - WebKit install to unskip M-06/M-07 swipe gesture tests
  - max-w-2xl reading-width constraint on notes/search
  - Manual visual QA in DevTools iPhone/Pixel/Desktop viewports

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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

@@ -11,12 +11,19 @@
 </script>
 
 {#if suggestions.length > 0}
-	<div class="flex flex-wrap gap-1.5 px-4 pb-2 pt-1">
+	<!--
+		Mobile: horizontal scroll row (no wrapping) — keeps the sticky input
+		compact; users can swipe to see more chips.
+		Desktop (md+): wraps to two lines as before.
+	-->
+	<div
+		class="flex gap-1.5 overflow-x-auto px-4 pb-2 pt-1 md:flex-wrap md:overflow-visible [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+	>
 		{#each suggestions as item (item.name)}
 			<button
 				type="button"
 				onclick={() => onselect(item.name)}
-				class="rounded-full px-3 py-1 text-[13px] font-medium transition-colors
+				class="shrink-0 rounded-full px-3 py-1 text-[13px] font-medium transition-colors
 					{activePrefix && item.name.startsWith(activePrefix.toLowerCase().trim())
 					? 'bg-slate-900 text-white dark:bg-white dark:text-slate-900'
 					: 'bg-slate-100 text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700'}"

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		label,
+		title,
+		meta,
+		actions
+	}: {
+		label: string;
+		title: string;
+		meta?: Snippet;
+		actions?: Snippet;
+	} = $props();
+</script>
+
+<header class="flex items-start gap-4 px-4 pb-4 pt-6 md:px-6 md:pb-6 md:pt-8">
+	<div class="min-w-0 flex-1">
+		<p
+			data-testid="masthead-label"
+			class="mb-1 text-[13px] font-semibold uppercase tracking-[0.05em] text-text-secondary"
+		>
+			{label}
+		</p>
+		<h1
+			data-testid="masthead-title"
+			class="text-[26px] md:text-[32px] font-semibold leading-tight tracking-[-0.02em] text-text-primary"
+		>
+			{title}
+		</h1>
+		{#if meta}
+			<div class="mt-1.5 text-[13px] text-text-secondary">{@render meta()}</div>
+		{/if}
+	</div>
+	{#if actions}
+		<div class="flex flex-shrink-0 items-center gap-1.5">{@render actions()}</div>
+	{/if}
+</header>

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { undoQueue, undo } from '$lib/sync/undoQueue';
+	import * as m from '$lib/paraglide/messages';
+
+	// Show the most recent undoable (if any)
+	const latest = $derived($undoQueue[$undoQueue.length - 1] ?? null);
+
+	async function handleUndo() {
+		if (latest) await undo(latest.id);
+	}
+</script>
+
+{#if latest}
+	<div
+		data-testid="undo-toast"
+		role="status"
+		aria-live="polite"
+		class="pointer-events-none fixed inset-x-0 z-50 flex justify-center px-4 md:bottom-8"
+		style="bottom: calc(env(safe-area-inset-bottom) + 4.5rem)"
+	>
+		<div class="pointer-events-auto flex min-w-[16rem] items-center gap-3 rounded-md bg-slate-900 px-4 py-2.5 text-sm text-white shadow-[0px_20px_40px_rgba(15,23,42,0.25)] dark:bg-slate-100 dark:text-slate-900">
+			<span class="truncate">{latest.label}</span>
+			<button
+				type="button"
+				onclick={handleUndo}
+				class="ml-auto rounded px-2 py-0.5 text-xs font-semibold uppercase tracking-wide text-white/80 hover:text-white dark:text-slate-900/80 dark:hover:text-slate-900"
+			>
+				{m.undo()}
+			</button>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import * as m from '$lib/paraglide/messages';
+	import { ShoppingCart, CheckSquare, FileText, Search } from 'lucide-svelte';
+
+	const items = [
+		{ href: '/lists',  label: () => m.nav_lists(),  icon: ShoppingCart },
+		{ href: '/tasks',  label: () => m.nav_tasks(),  icon: CheckSquare },
+		{ href: '/notes',  label: () => m.nav_notes(),  icon: FileText },
+		{ href: '/search', label: () => m.nav_search(), icon: Search }
+	];
+
+	const activePath = $derived($page.url.pathname);
+
+	function isActive(href: string): boolean {
+		return activePath === href || activePath.startsWith(`${href}/`);
+	}
+</script>
+
+<nav
+	data-testid="bottom-tab-bar"
+	class="md:hidden fixed inset-x-0 bottom-0 z-40 border-t border-black/5 bg-surface/80 backdrop-blur-xl pb-[env(safe-area-inset-bottom)] dark:border-white/5"
+>
+	<ul class="flex items-stretch justify-around">
+		{#each items as { href, label, icon: Icon }}
+			{@const active = isActive(href)}
+			<li class="flex-1">
+				<a
+					{href}
+					aria-current={active ? 'page' : undefined}
+					aria-label={label()}
+					class="flex h-14 flex-col items-center justify-center gap-0.5 text-xs transition-colors {active ? 'text-slate-900 dark:text-slate-50' : 'text-slate-400 dark:text-slate-500'}"
+				>
+					<Icon size={22} strokeWidth={1.5} />
+					<span class="sr-only">{label()}</span>
+				</a>
+			</li>
+		{/each}
+	</ul>
+</nav>

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

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { displayName } from '$lib/stores/auth';
+	import { currentCollective, userCollectives } from '$lib/stores/collective';
+	import Avatar from '$lib/components/Avatar.svelte';
+	import * as m from '$lib/paraglide/messages';
+	import { ShoppingCart, CheckSquare, FileText, Search, Settings } from 'lucide-svelte';
+
+	const navItems = [
+		{ href: '/lists',  label: () => m.nav_lists(),  icon: ShoppingCart },
+		{ href: '/tasks',  label: () => m.nav_tasks(),  icon: CheckSquare },
+		{ href: '/notes',  label: () => m.nav_notes(),  icon: FileText },
+		{ href: '/search', label: () => m.nav_search(), icon: Search }
+	];
+
+	let switcherOpen = $state(false);
+
+	const activePath = $derived($page.url.pathname);
+
+	function switchCollective(id: string) {
+		const c = $userCollectives.find((col) => col.id === id);
+		if (c) {
+			currentCollective.set(c);
+			localStorage.setItem('activeCollectiveId', c.id);
+			switcherOpen = false;
+		}
+	}
+</script>
+
+<aside
+	data-testid="desktop-sidebar"
+	class="hidden md:flex w-56 flex-shrink-0 flex-col bg-surface-raised"
+>
+	<div class="relative">
+		<button
+			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}
+		>
+			<span class="text-xl">{$currentCollective?.emoji ?? '🏠'}</span>
+			<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}
+		</button>
+		{#if switcherOpen && $userCollectives.length > 1}
+			<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
+						class="flex w-full items-center gap-2 px-4 py-2.5 text-left text-sm hover:bg-black/5 dark:hover:bg-white/5 {c.id === $currentCollective?.id ? 'font-semibold text-slate-900 dark:text-slate-50' : 'text-slate-600 dark:text-slate-400'}"
+						onclick={() => switchCollective(c.id)}
+					>
+						<span class="text-base">{c.emoji}</span>
+						<span class="truncate">{c.name}</span>
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
+
+	<nav class="flex-1 overflow-y-auto px-2 py-3">
+		{#each navItems as { href, label, icon: Icon }}
+			<a
+				{href}
+				class="mb-0.5 flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors {activePath.startsWith(href) ? 'bg-black/10 text-slate-900 dark:bg-white/10 dark:text-slate-50' : 'text-slate-500 hover:bg-black/5 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-white/5 dark:hover:text-slate-50'}"
+			>
+				<Icon size={16} strokeWidth={1.5} />
+				{label()}
+			</a>
+		{/each}
+	</nav>
+
+	<div class="p-3 pt-2">
+		<div class="flex items-center justify-between gap-2">
+			<div class="flex min-w-0 items-center gap-2">
+				<Avatar name={$displayName} size={32} />
+				<span class="truncate text-sm font-medium text-slate-700 dark:text-slate-300">
+					{$displayName}
+				</span>
+			</div>
+			<a
+				href="/settings"
+				class="rounded-md p-1.5 text-slate-400 hover:bg-black/5 hover:text-slate-600 dark:hover:bg-white/5 dark:hover:text-slate-300"
+				aria-label={m.nav_settings()}
+			>
+				<Settings size={16} strokeWidth={1.5} />
+			</a>
+		</div>
+	</div>
+</aside>

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

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { currentCollective, userCollectives } from '$lib/stores/collective';
+	import { displayName } from '$lib/stores/auth';
+	import Avatar from '$lib/components/Avatar.svelte';
+	import { logout } from '$lib/auth';
+	import * as m from '$lib/paraglide/messages';
+	import { Settings, Users, LogOut, X } from 'lucide-svelte';
+
+	let { open = $bindable(false) }: { open?: boolean } = $props();
+
+	function close() {
+		open = false;
+	}
+
+	function switchCollective(id: string) {
+		const c = $userCollectives.find((col) => col.id === id);
+		if (c) {
+			currentCollective.set(c);
+			localStorage.setItem('activeCollectiveId', c.id);
+		}
+		close();
+	}
+</script>
+
+{#if open}
+	<!-- Backdrop -->
+	<button
+		type="button"
+		aria-label="Close menu"
+		onclick={close}
+		class="fixed inset-0 z-40 bg-black/30 backdrop-blur-sm md:hidden"
+	></button>
+
+	<!-- Drawer -->
+	<aside
+		data-testid="mobile-drawer"
+		class="fixed inset-y-0 left-0 z-50 flex w-72 max-w-[85vw] flex-col bg-surface-raised shadow-[0px_20px_40px_rgba(15,23,42,0.06)] md:hidden"
+	>
+		<div class="flex h-14 items-center justify-between px-4">
+			<span class="text-sm font-semibold text-text-primary">{m.app_name()}</span>
+			<button
+				type="button"
+				onclick={close}
+				aria-label="Close"
+				class="rounded p-1 text-slate-500 hover:bg-black/5 dark:hover:bg-white/5"
+			>
+				<X size={18} strokeWidth={1.5} />
+			</button>
+		</div>
+
+		<!-- Collective switcher -->
+		<div class="px-2 py-2">
+			<p class="px-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-text-secondary">
+				{m.nav_collective()}
+			</p>
+			<div class="flex flex-col gap-0.5">
+				{#each $userCollectives as c}
+					<button
+						type="button"
+						onclick={() => switchCollective(c.id)}
+						class="flex items-center gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-black/5 dark:hover:bg-white/5 {c.id === $currentCollective?.id ? 'font-semibold text-slate-900 dark:text-slate-50' : 'text-slate-600 dark:text-slate-400'}"
+					>
+						<span class="text-base">{c.emoji}</span>
+						<span class="truncate">{c.name}</span>
+					</button>
+				{/each}
+			</div>
+			<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"
+			>
+				<Users size={14} strokeWidth={1.5} />
+				{m.manage_title()}
+			</a>
+		</div>
+
+		<!-- Spacer -->
+		<div class="flex-1"></div>
+
+		<!-- Footer: user, settings, sign out -->
+		<div class="border-t-0 px-2 py-3">
+			<div class="flex items-center gap-2 px-2 pb-2">
+				<Avatar name={$displayName} size={28} />
+				<span class="truncate text-sm font-medium text-text-primary">{$displayName}</span>
+			</div>
+			<a
+				href="/settings"
+				onclick={close}
+				class="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"
+			>
+				<Settings size={14} strokeWidth={1.5} />
+				{m.nav_settings()}
+			</a>
+			<button
+				type="button"
+				onclick={() => {
+					close();
+					void logout();
+				}}
+				class="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"
+			>
+				<LogOut size={14} strokeWidth={1.5} />
+				{m.settings_logout()}
+			</button>
+		</div>
+	</aside>
+{/if}

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { displayName } from '$lib/stores/auth';
+	import { currentCollective } from '$lib/stores/collective';
+	import Avatar from '$lib/components/Avatar.svelte';
+	import { Menu } from 'lucide-svelte';
+	import * as m from '$lib/paraglide/messages';
+
+	let { onMenu }: { onMenu: () => void } = $props();
+</script>
+
+<header class="md:hidden sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-black/5 bg-surface/80 px-4 backdrop-blur-xl dark:border-white/5">
+	<button
+		type="button"
+		data-testid="mobile-hamburger"
+		aria-label={m.app_name()}
+		onclick={onMenu}
+		class="-ml-1 rounded p-1.5 text-slate-700 hover:bg-black/5 dark:text-slate-300 dark:hover:bg-white/5"
+	>
+		<Menu size={20} strokeWidth={1.5} />
+	</button>
+
+	<div class="flex min-w-0 flex-1 items-center gap-2">
+		<span class="text-base">{$currentCollective?.emoji ?? '🏠'}</span>
+		<span class="truncate text-sm font-semibold text-text-primary">
+			{$currentCollective?.name ?? m.app_name()}
+		</span>
+	</div>
+
+	<a href="/settings" aria-label={m.nav_settings()} class="rounded-full">
+		<Avatar name={$displayName} size={28} />
+	</a>
+</header>