marcel/familienarchiv
1
0
Fork 0
Code Issues 103 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/src/routes/profile/+page.svelte
View File

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