Feat: Login localization, design, märchenzauber feature complete webapp

manacore/apps/web/src/app.d.ts

@@ -3,13 +3,14 @@ import type { Session, SupabaseClient, User } from '@supabase/supabase-js';
 declare global {
 	namespace App {
 		interface Locals {
-			supabase: SupabaseClient<any, 'public', 'public', any, any>;
+			supabase: SupabaseClient;
 			safeGetSession: () => Promise<{ session: Session | null; user: User | null }>;
 			session: Session | null;
 			user: User | null;
 		}
 		interface PageData {
 			session: Session | null;
+			supabase?: SupabaseClient;
 		}
 		// interface Error {}
 		// interface Platform {}

manacore/apps/web/src/lib/i18n/index.ts

@@ -4,9 +4,12 @@ import { init, register, locale, waitLocale } from 'svelte-i18n';
 // Register all available locales
 register('de', () => import('./locales/de.json'));
 register('en', () => import('./locales/en.json'));
+register('it', () => import('./locales/it.json'));
+register('fr', () => import('./locales/fr.json'));
+register('es', () => import('./locales/es.json'));
 
 // List of supported locales
-export const supportedLocales = ['de', 'en'] as const;
+export const supportedLocales = ['de', 'en', 'it', 'fr', 'es'] as const;
 export type SupportedLocale = (typeof supportedLocales)[number];
 
 // Default locale

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

@@ -29,7 +29,7 @@
 	<div class="mb-8">
 		<h1 class="text-2xl font-bold text-gray-900 dark:text-white">Dashboard</h1>
 		<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-			Welcome back, {data.profile?.first_name || data.user?.email}
+			Welcome back, {data.profile?.first_name || data.session?.user?.email}
 		</p>
 	</div>
 

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

@@ -50,7 +50,7 @@
 						<Input
 							type="email"
 							id="email"
-							value={data.user?.email || ''}
+							value={data.session?.user?.email || ''}
 							disabled
 							class="bg-gray-50 dark:bg-gray-900"
 						/>

manacore/apps/web/src/routes/(auth)/login/+page.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { locale } from 'svelte-i18n';
 	import { LoginPage } from '@manacore/shared-auth-ui';
 	import { ManaCoreLogo } from '@manacore/shared-branding';
+	import { getLoginTranslations } from '@manacore/shared-i18n';
 	import AppSlider from '$lib/components/AppSlider.svelte';
 	import LanguageSelector from '$lib/components/LanguageSelector.svelte';
 	import { authStore } from '$lib/stores/authStore.svelte';
 
+	// Get translations based on current locale
+	const translations = $derived(getLoginTranslations($locale || 'de'));
+
 	async function handleSignIn(email: string, password: string) {
 		return authStore.signIn(email, password);
 	}
@@ -24,6 +29,7 @@
 	forgotPasswordPath="/forgot-password"
 	lightBackground="#f3f4f6"
 	darkBackground="#121212"
+	{translations}
 >
 	{#snippet headerControls()}
 		<LanguageSelector />

manacore/apps/web/src/routes/+layout.ts

@@ -1,7 +1,40 @@
 import { waitLocale } from '$lib/i18n';
 import '$lib/i18n'; // This triggers the init() call at module scope
+import { createBrowserClient } from '@supabase/ssr';
+import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public';
+import type { LayoutLoad } from './$types';
 
-export const load = async () => {
+export const load: LayoutLoad = async ({ data, depends }) => {
 	await waitLocale();
-	return {};
+
+	/**
+	 * Declare a dependency so the layout will be invalidated when `invalidate('supabase:auth')` is called.
+	 */
+	depends('supabase:auth');
+
+	const supabase = createBrowserClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
+		global: {
+			fetch
+		},
+		cookies: {
+			getAll() {
+				return data.cookies;
+			},
+			setAll(cookiesToSet) {
+				// Browser client handles cookies automatically through the browser
+				// This is a no-op as cookies are managed via document.cookie in the browser
+			}
+		}
+	});
+
+	/**
+	 * It's fine to use `getSession` here, because on the client, `getSession` is
+	 * safe, and on the server, it reads `session` from the `LayoutData`, which
+	 * safely checked the session using `safeGetSession`.
+	 */
+	const {
+		data: { session }
+	} = await supabase.auth.getSession();
+
+	return { session, supabase };
 };