Fase 0: scaffold monorepo, SvelteKit skeleton, and dev infrastructure

- Turborepo + pnpm workspaces with apps/web and packages/types
- SvelteKit app: Tailwind, Paraglide i18n (en/es), keycloak-js, Supabase client,
  auth/collective stores, PWA service worker skeleton, all route placeholders
- packages/types: domain types (User, Collective, ShoppingList, etc.) and
  database.ts placeholder for generated types
- Justfile with dev, db-*, kc-*, build, backup, restore, deploy recipes
- infra/docker-compose.dev.yml: Postgres 15, GoTrue, PostgREST, Realtime v2.83,
  Storage, Kong (port 8001), Studio, Keycloak 24
- infra/docker-compose.prod.yml, kong.yml, db-init scripts, backup/deploy scripts
- keycloak/realm-export.json with colectivo realm and 5 dev test users
- supabase/config.toml and seed.sql with sample collective and items
- GitHub Actions: ci.yml (lint+typecheck+build) and deploy.yml (GHCR + SSH)
- .env.example documenting all required variables
- Fixed docker-compose issues: Studio image tag, Kong port conflict (8001),
  internal role passwords init script, Realtime METRICS_JWT_SECRET/APP_NAME

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/src/routes/(app)/+layout.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { isAuthenticated, currentUser, authLoading } from '$lib/stores/auth';
+	import { currentCollective } from '$lib/stores/collective';
+	import { logout } from '$lib/auth';
+	import * as m from '$lib/paraglide/messages';
+
+	const navItems = [
+		{ href: '/lists', label: () => m.nav_lists(), icon: '🛒' },
+		{ href: '/tasks', label: () => m.nav_tasks(), icon: '✓' },
+		{ href: '/notes', label: () => m.nav_notes(), icon: '📄' },
+		{ href: '/search', label: () => m.nav_search(), icon: '🔍' }
+	];
+
+	$: activePath = $page.url.pathname;
+</script>
+
+{#if $authLoading}
+	<div class="flex h-screen items-center justify-center bg-background">
+		<span class="text-text-secondary text-sm">{m.loading()}</span>
+	</div>
+{:else if !$isAuthenticated}
+	<!-- Keycloak redirect is triggered in root layout; show nothing -->
+{:else}
+	<div class="flex h-screen overflow-hidden bg-background">
+		<!-- Sidebar -->
+		<aside class="flex w-56 flex-shrink-0 flex-col border-r border-slate-200 bg-surface dark:border-slate-700">
+			<!-- Collective name -->
+			<div class="flex h-14 items-center gap-2 border-b border-slate-200 px-4 dark:border-slate-700">
+				<span class="text-xl">{$currentCollective?.emoji ?? '🏠'}</span>
+				<span class="truncate text-sm font-semibold text-slate-900 dark:text-slate-50">
+					{$currentCollective?.name ?? m.app_name()}
+				</span>
+			</div>
+
+			<!-- Navigation -->
+			<nav class="flex-1 overflow-y-auto px-2 py-3">
+				{#each navItems as item}
+					<a
+						href={item.href}
+						class="mb-0.5 flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors
+							{activePath.startsWith(item.href)
+							? 'bg-slate-100 text-slate-900 dark:bg-slate-700 dark:text-slate-50'
+							: 'text-slate-600 hover:bg-slate-50 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-50'}"
+					>
+						<span class="text-base">{item.icon}</span>
+						{item.label()}
+					</a>
+				{/each}
+			</nav>
+
+			<!-- User + settings -->
+			<div class="border-t border-slate-200 p-3 dark:border-slate-700">
+				<div class="flex items-center justify-between">
+					<div class="flex min-w-0 items-center gap-2">
+						<!-- Avatar -->
+						<div
+							class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-slate-200 text-xs font-semibold text-slate-700 dark:bg-slate-600 dark:text-slate-200"
+						>
+							{$currentUser?.displayName?.slice(0, 2).toUpperCase() ?? '?'}
+						</div>
+						<span class="truncate text-sm font-medium text-slate-700 dark:text-slate-300">
+							{$currentUser?.displayName ?? ''}
+						</span>
+					</div>
+					<a
+						href="/settings"
+						class="rounded-md p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-slate-700 dark:hover:text-slate-300"
+						aria-label={m.nav_settings()}
+					>
+						⚙
+					</a>
+				</div>
+			</div>
+		</aside>
+
+		<!-- Main content -->
+		<main class="flex flex-1 flex-col overflow-hidden">
+			<slot />
+		</main>
+	</div>
+{/if}

apps/web/src/routes/(app)/lists/+page.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import * as m from '$lib/paraglide/messages';
+</script>
+
+<div class="flex flex-1 flex-col overflow-hidden">
+	<header class="flex h-14 items-center border-b border-slate-200 px-6 dark:border-slate-700">
+		<h1 class="text-base font-semibold text-slate-900 dark:text-slate-50">{m.lists_title()}</h1>
+	</header>
+	<div class="flex-1 overflow-y-auto p-6">
+		<!-- Fase 2a: shopping lists content -->
+	</div>
+</div>

apps/web/src/routes/(app)/notes/+page.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import * as m from '$lib/paraglide/messages';
+</script>
+
+<div class="flex flex-1 flex-col overflow-hidden">
+	<header class="flex h-14 items-center border-b border-slate-200 px-6 dark:border-slate-700">
+		<h1 class="text-base font-semibold text-slate-900 dark:text-slate-50">{m.notes_title()}</h1>
+	</header>
+	<div class="flex-1 overflow-y-auto p-6">
+		<!-- Fase 3: notes content -->
+	</div>
+</div>

apps/web/src/routes/(app)/search/+page.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import * as m from '$lib/paraglide/messages';
+</script>
+
+<div class="flex flex-1 flex-col overflow-hidden">
+	<header class="flex h-14 items-center border-b border-slate-200 px-6 dark:border-slate-700">
+		<h1 class="text-base font-semibold text-slate-900 dark:text-slate-50">{m.search_title()}</h1>
+	</header>
+	<div class="flex-1 overflow-y-auto p-6">
+		<!-- Fase 4: search content -->
+	</div>
+</div>

apps/web/src/routes/(app)/settings/+page.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import * as m from '$lib/paraglide/messages';
+</script>
+
+<div class="flex flex-1 flex-col overflow-hidden">
+	<header class="flex h-14 items-center border-b border-slate-200 px-6 dark:border-slate-700">
+		<h1 class="text-base font-semibold text-slate-900 dark:text-slate-50">{m.settings_title()}</h1>
+	</header>
+	<div class="flex-1 overflow-y-auto p-6">
+		<!-- Fase 1: settings content (display name, avatar, language) -->
+	</div>
+</div>

apps/web/src/routes/(app)/tasks/+page.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import * as m from '$lib/paraglide/messages';
+</script>
+
+<div class="flex flex-1 flex-col overflow-hidden">
+	<header class="flex h-14 items-center border-b border-slate-200 px-6 dark:border-slate-700">
+		<h1 class="text-base font-semibold text-slate-900 dark:text-slate-50">{m.tasks_title()}</h1>
+	</header>
+	<div class="flex-1 overflow-y-auto p-6">
+		<!-- Fase 3: tasks content -->
+	</div>
+</div>

apps/web/src/routes/+layout.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import '../app.css';
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { initAuth, getKeycloak, getUser } from '$lib/auth';
+	import { setSupabaseToken, clearSupabaseToken } from '$lib/supabase';
+	import { keycloak, isAuthenticated, currentUser, authLoading } from '$lib/stores/auth';
+	import { ParaglideJS } from '@inlang/paraglide-sveltekit';
+	import { i18n } from '$lib/i18n';
+
+	const PUBLIC_ROUTES = ['/invitation'];
+
+	onMount(async () => {
+		const kc = getKeycloak();
+		keycloak.set(kc);
+
+		const authenticated = await initAuth();
+		isAuthenticated.set(authenticated);
+
+		if (authenticated) {
+			const user = getUser(kc);
+			currentUser.set(user);
+			if (kc.token) setSupabaseToken(kc.token);
+
+			// Keep token in sync with Supabase client
+			kc.onTokenRefreshed = () => {
+				if (kc.token) setSupabaseToken(kc.token);
+			};
+			kc.onAuthLogout = () => {
+				clearSupabaseToken();
+				isAuthenticated.set(false);
+				currentUser.set(null);
+			};
+		}
+
+		authLoading.set(false);
+
+		// Redirect unauthenticated users unless on a public route
+		if (!authenticated) {
+			const isPublic = PUBLIC_ROUTES.some((r) => $page.url.pathname.startsWith(r));
+			if (!isPublic) {
+				kc.login();
+			}
+		}
+	});
+</script>
+
+<ParaglideJS {i18n}>
+	<slot />
+</ParaglideJS>

apps/web/src/routes/+page.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
+	import { isAuthenticated, authLoading } from '$lib/stores/auth';
+
+	onMount(() => {
+		const unsubLoading = authLoading.subscribe((loading) => {
+			if (!loading) {
+				unsubLoading();
+				goto('/lists', { replaceState: true });
+			}
+		});
+	});
+</script>
+
+<!-- Redirect root to /lists — handled in onMount after auth resolves -->

apps/web/src/routes/onboarding/+page.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import * as m from '$lib/paraglide/messages';
+</script>
+
+<div class="flex min-h-screen flex-col items-center justify-center bg-background p-6">
+	<div class="w-full max-w-sm space-y-6">
+		<div class="text-center">
+			<h1 class="text-2xl font-bold text-slate-900 dark:text-slate-50">{m.onboarding_title()}</h1>
+		</div>
+
+		<!-- Fase 1: collective creation / join form -->
+		<div class="space-y-3">
+			<button
+				class="w-full rounded-md bg-slate-900 px-4 py-3 text-sm font-medium text-white hover:bg-slate-700 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-200"
+			>
+				{m.onboarding_create_collective()}
+			</button>
+			<button
+				class="w-full rounded-md border border-slate-200 bg-surface px-4 py-3 text-sm font-medium text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
+			>
+				{m.onboarding_join_collective()}
+			</button>
+		</div>
+	</div>
+</div>