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>
This commit is contained in:
Marcel
2026-03-27 20:20:58 +01:00
parent 1615a4ffa5
commit e455efa670
7 changed files with 429 additions and 5 deletions

View File

@@ -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 };
}
};