feat(#71): add notification bell + preferences UI

- NotificationBell.svelte: bell icon in header with unread badge, dropdown showing last 10 notifications, mark-all-read, click-outside close, keyboard Escape support, polls every PUBLIC_NOTIFICATION_POLL_MS ms
- Wire NotificationBell into +layout.svelte between ThemeToggle and UserMenu (authenticated users only)
- Profile page: add notification preferences card with notifyOnReply / notifyOnMention toggles, loaded via GET and saved via PUT /api/users/me/notification-preferences
- i18n: de/en/es message keys for bell, notifications list, and preference labels

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

frontend/src/routes/+layout.svelte

@@ -4,6 +4,7 @@ import { page } from '$app/state';
 import { onMount } from 'svelte';
 import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
 import ThemeToggle from '$lib/components/ThemeToggle.svelte';
+import NotificationBell from '$lib/components/NotificationBell.svelte';
 import AppNav from './AppNav.svelte';
 import UserMenu from './UserMenu.svelte';
 
@@ -52,6 +53,11 @@ const userInitials = $derived.by(() => {
 						<!-- Theme toggle -->
 						<ThemeToggle />
 
+						<!-- Notification bell (authenticated users only) -->
+						{#if data?.user}
+							<NotificationBell />
+						{/if}
+
 						<!-- User menu -->
 						<UserMenu userInitials={userInitials} />
 					</div>

frontend/src/routes/profile/+page.server.ts

@@ -1,10 +1,15 @@
 import { fail } from '@sveltejs/kit';
+import { env } from '$env/dynamic/private';
 import type { PageServerLoad, Actions } from './$types';
 import { createApiClient } from '$lib/api.server';
 import { getErrorMessage } from '$lib/errors';
 
-export const load: PageServerLoad = async ({ locals }) => {
-	return { user: locals.user };
+const apiBase = () => env.API_INTERNAL_URL || 'http://localhost:8080';
+
+export const load: PageServerLoad = async ({ locals, fetch }) => {
+	const res = await fetch(`${apiBase()}/api/users/me/notification-preferences`);
+	const notificationPrefs = res.ok ? await res.json() : null;
+	return { user: locals.user, notificationPrefs };
 };
 
 export const actions: Actions = {
@@ -50,5 +55,26 @@ export const actions: Actions = {
 		}
 
 		return { passwordSuccess: true };
+	},
+
+	updateNotificationPrefs: async ({ request, fetch }) => {
+		const formData = await request.formData();
+		const body = {
+			notifyOnReply: formData.get('notifyOnReply') === 'true',
+			notifyOnMention: formData.get('notifyOnMention') === 'true'
+		};
+
+		const res = await fetch(`${apiBase()}/api/users/me/notification-preferences`, {
+			method: 'PUT',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(body)
+		});
+
+		if (!res.ok) {
+			const data = await res.json().catch(() => ({}));
+			return fail(res.status, { prefsError: getErrorMessage(data?.code) });
+		}
+
+		return { prefsSuccess: true };
 	}
 };

frontend/src/routes/profile/+page.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
+import { enhance } from '$app/forms';
+import { untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
 import PersonalInfoForm from './PersonalInfoForm.svelte';
 import PasswordChangeForm from './PasswordChangeForm.svelte';
 
 let { data, form } = $props();
+
+let notifyOnReply = $state(untrack(() => data.notificationPrefs?.notifyOnReply ?? false));
+let notifyOnMention = $state(untrack(() => data.notificationPrefs?.notifyOnMention ?? false));
 </script>
 
 <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
@@ -30,4 +35,54 @@ let { data, form } = $props();
 		<PersonalInfoForm user={data.user} form={form} />
 		<PasswordChangeForm form={form} />
 	</div>
+
+	<!-- Notification preferences -->
+	<div class="mt-6 rounded-sm border border-line bg-surface p-6 shadow-sm">
+		<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
+			{m.notification_prefs_heading()}
+		</h2>
+
+		{#if form?.prefsSuccess}
+			<div class="mb-5 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700">
+				{m.profile_saved()}
+			</div>
+		{/if}
+		{#if form?.prefsError}
+			<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+				{form.prefsError}
+			</div>
+		{/if}
+
+		<form method="POST" action="?/updateNotificationPrefs" use:enhance>
+			<input type="hidden" name="notifyOnReply" value={notifyOnReply} />
+			<input type="hidden" name="notifyOnMention" value={notifyOnMention} />
+
+			<div class="space-y-4">
+				<label class="flex cursor-pointer items-start gap-3">
+					<input
+						type="checkbox"
+						bind:checked={notifyOnReply}
+						class="mt-0.5 h-4 w-4 rounded border-line accent-primary"
+					/>
+					<span class="text-sm text-ink">{m.notification_pref_reply()}</span>
+				</label>
+
+				<label class="flex cursor-pointer items-start gap-3">
+					<input
+						type="checkbox"
+						bind:checked={notifyOnMention}
+						class="mt-0.5 h-4 w-4 rounded border-line accent-primary"
+					/>
+					<span class="text-sm text-ink">{m.notification_pref_mention()}</span>
+				</label>
+			</div>
+
+			<button
+				type="submit"
+				class="mt-5 rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
+			>
+				{m.btn_save()}
+			</button>
+		</form>
+	</div>
 </div>