fix(#71-#73): address all review findings from Markus and Sara

BLOCKERs:
- Remove direct AppUserRepository/CommentRepository access from CommentService and
  NotificationService — replaced with UserService.findAllById() and UserService
  (fixes layering contract from CLAUDE.md)
- Switch Optional<JavaMailSender> constructor injection — removes @Autowired(required=false)
  field and ReflectionTestUtils hack in tests
- Add @RequirePermission(READ_ALL) to UserSearchController — prevents user enumeration
  without read access

Data bug:
- Promote actorName from @Transient to persisted VARCHAR column (V18 migration)
- Set actorName in notifyReply and notifyMentions from comment.getAuthorName()

Architecture:
- Add @RequirePermission(READ_ALL) to NotificationController
- Introduce NotificationDTO — controller returns DTO instead of Notification entity,
  eliminating lazy-load N+1 and AppUser field leakage
- Change mentions FetchType to EAGER — fixes LazyInitializationException outside transaction
- Add @Transactional(propagation=REQUIRES_NEW) to notifyReply/notifyMentions so a
  notification failure cannot roll back the parent comment
- N+1 fix: replace per-ID findById loops with single findAllById bulk fetch
- Move collectParticipantIds to CommentService; notifyReply accepts Set<UUID> directly

Security:
- Escape displayName before injecting into renderBody HTML span
- Replace <a href="#"> with <span class="mention"> — no profile page to link to, and
  the anchor's scroll-to-top behaviour is harmful

Tests added/fixed:
- markRead_throwsNotFound, markAllRead_delegatesToRepository, countUnread_delegatesToRepository
- markOneRead_returns401, @RequirePermission 403 coverage for both controllers
- postComment/replyToComment_triggersNotifyMentions_whenMentionedUserIdsProvided
- search_returnsAtMostTenResults now asserts $.length() <= 10
- XSS regression test for escaped displayName in mention.spec.ts

Frontend minors:
- relativeTime() uses Intl.RelativeTimeFormat (locale-aware, not German-hardcoded)
- aria-label uses m.notification_unread() Paraglide key (de/en/es added)
- <div role="button"> replaced with <button> (native Enter+Space handling)
- onDestroy clears debounceTimer in MentionEditor
- setTimeout(100) replaced with await tick() + requestAnimationFrame in CommentThread
- Notification prefs form uses checkbox name attributes + formData.has() pattern

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

frontend/src/lib/components/CommentThread.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { onMount, untrack } from 'svelte';
+import { onMount, tick, untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
 import type { Comment, CommentReply } from '$lib/types';
 import MentionEditor from '$lib/components/MentionEditor.svelte';
@@ -180,7 +180,7 @@ function cancelReply() {
 	replyText = '';
 }
 
-onMount(() => {
+onMount(async () => {
 	if (loadOnMount) {
 		reload();
 	} else {
@@ -189,11 +189,11 @@ onMount(() => {
 	}
 
 	if (targetCommentId) {
-		// Scroll to target after a tick so the DOM is settled
-		setTimeout(() => {
+		await tick();
+		requestAnimationFrame(() => {
 			const el = document.querySelector(`[data-comment-id="${targetCommentId}"]`);
 			el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-		}, 100);
+		});
 
 		// Remove highlight on first user interaction
 		const clearHighlight = () => {

frontend/src/lib/components/MentionEditor.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { onDestroy } from 'svelte';
 import { detectMention } from '$lib/utils/mention';
 import type { MentionDTO } from '$lib/types';
 import { m } from '$lib/paraglide/messages.js';
@@ -180,6 +181,8 @@ function handleAtButtonClick() {
 	}, 0);
 }
 
+onDestroy(() => clearTimeout(debounceTimer));
+
 const popupOpen = $derived(query !== null);
 </script>
 

frontend/src/lib/components/NotificationBell.svelte

@@ -117,16 +117,15 @@ function attachClickOutside(node: HTMLElement) {
 }
 
 function relativeTime(isoString: string): string {
-	const now = Date.now();
-	const then = new Date(isoString).getTime();
-	const diffMs = now - then;
+	const diffMs = Date.now() - new Date(isoString).getTime();
 	const diffMin = Math.floor(diffMs / 60000);
-	if (diffMin < 1) return 'gerade eben';
-	if (diffMin < 60) return `vor ${diffMin} Min.`;
+	const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
+	if (diffMin < 1) return rtf.format(0, 'minute');
+	if (diffMin < 60) return rtf.format(-diffMin, 'minute');
 	const diffH = Math.floor(diffMin / 60);
-	if (diffH < 24) return `vor ${diffH} Std.`;
+	if (diffH < 24) return rtf.format(-diffH, 'hour');
 	const diffD = Math.floor(diffH / 24);
-	return `vor ${diffD} Tag${diffD !== 1 ? 'en' : ''}`;
+	return rtf.format(-diffD, 'day');
 }
 
 onMount(() => {
@@ -232,12 +231,10 @@ onDestroy(() => {
 				<ul role="list">
 					{#each notifications as notification (notification.id)}
 						<li>
-							<div
-								role="button"
-								tabindex="0"
+							<button
+								type="button"
 								onclick={() => markRead(notification)}
-								onkeydown={(e) => e.key === 'Enter' && markRead(notification)}
-								class="flex cursor-pointer items-start gap-3 border-b border-line px-4 py-3 last:border-b-0 hover:bg-canvas
+								class="flex w-full cursor-pointer items-start gap-3 border-b border-line px-4 py-3 text-left last:border-b-0 hover:bg-canvas
 									{!notification.read ? 'bg-accent-bg/20' : ''}"
 							>
 								<!-- Type icon -->
@@ -291,10 +288,10 @@ onDestroy(() => {
 								{#if !notification.read}
 									<span
 										class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-primary"
-										aria-label="ungelesen"
+										aria-label={m.notification_unread()}
 									></span>
 								{/if}
-							</div>
+							</button>
 						</li>
 					{/each}
 				</ul>