feat(viewer): show delete icon on annotation for direct block deletion (#339)

Adds a trash icon button (44×44 px touch target) directly on each annotation shape in transcription mode so users can delete a block without navigating through the sidebar. Includes keyboard support (Delete key), confirm dialog via ConfirmService, prop-chain wiring through DocumentViewer → PdfViewer → AnnotationLayer → AnnotationShape, and orphaned-annotation fallback (calls DELETE /annotations/{id} when no block is linked). Backend security regression test added for deleteBlock 403 on READ_ALL.

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

backend/src/test/java/org/raddatz/familienarchiv/controller/TranscriptionBlockControllerTest.java

@@ -260,6 +260,13 @@ class TranscriptionBlockControllerTest {
                 .andExpect(status().isForbidden());
     }
 
+    @Test
+    @WithMockUser(authorities = "READ_ALL")
+    void deleteBlock_returns403_whenUserHasOnlyReadAllPermission() throws Exception {
+        mockMvc.perform(delete(URL_BLOCK))
+                .andExpect(status().isForbidden());
+    }
+
     @Test
     @WithMockUser(authorities = "WRITE_ALL")
     void deleteBlock_returns204_whenAuthorised() throws Exception {

frontend/messages/de.json

@@ -23,8 +23,6 @@
 	"nav_conversations": "Briefwechsel",
 	"nav_admin": "Admin",
 	"nav_logout": "Abmelden",
-	"theme_toggle_to_light": "Zu hellem Design wechseln",
-	"theme_toggle_to_dark": "Zu dunklem Design wechseln",
 	"btn_save": "Speichern",
 	"btn_cancel": "Abbrechen",
 	"btn_confirm": "Bestätigen",

frontend/messages/en.json

@@ -23,8 +23,6 @@
 	"nav_conversations": "Letters",
 	"nav_admin": "Admin",
 	"nav_logout": "Sign out",
-	"theme_toggle_to_light": "Switch to light mode",
-	"theme_toggle_to_dark": "Switch to dark mode",
 	"btn_save": "Save",
 	"btn_cancel": "Cancel",
 	"btn_confirm": "Confirm",

frontend/messages/es.json

@@ -23,8 +23,6 @@
 	"nav_conversations": "Cartas",
 	"nav_admin": "Admin",
 	"nav_logout": "Cerrar sesión",
-	"theme_toggle_to_light": "Cambiar a modo claro",
-	"theme_toggle_to_dark": "Cambiar a modo oscuro",
 	"btn_save": "Guardar",
 	"btn_cancel": "Cancelar",
 	"btn_confirm": "Confirmar",

frontend/src/lib/components/AnnotationLayer.svelte

@@ -18,7 +18,8 @@ let {
 	dimmed = false,
 	flashAnnotationId = null,
 	onDraw,
-	onAnnotationClick
+	onAnnotationClick,
+	onDeleteRequest
 }: {
 	annotations: Annotation[];
 	canDraw: boolean;
@@ -29,6 +30,7 @@ let {
 	flashAnnotationId?: string | null;
 	onDraw: (rect: DrawRect) => void;
 	onAnnotationClick?: (id: string) => void;
+	onDeleteRequest?: (annotationId: string) => void;
 } = $props();
 
 let drawStart = $state<{ x: number; y: number } | null>(null);
@@ -112,6 +114,8 @@ const containerStyle = $derived(
 			dimmed={dimmed}
 			blockNumber={blockNumbers[annotation.id]}
 			isFlashing={flashAnnotationId === annotation.id}
+			showDelete={canDraw}
+			onDeleteRequest={() => onDeleteRequest?.(annotation.id)}
 			onclick={() => onAnnotationClick?.(annotation.id)}
 			onpointerenter={() => (hoveredId = annotation.id)}
 			onpointerleave={() => (hoveredId = null)}

frontend/src/lib/components/AnnotationLayer.svelte.spec.ts

@@ -98,7 +98,7 @@ describe('AnnotationLayer', () => {
 		expect(el2.style.opacity).toBe('1');
 	});
 
-	it('does not show delete buttons (annotations owned by blocks)', async () => {
+	it('does not show delete button when annotation is not hovered or active', async () => {
 		render(AnnotationLayer, {
 			annotations: [makeAnnotation('ann-1')],
 			canDraw: true,
@@ -107,6 +107,19 @@ describe('AnnotationLayer', () => {
 		});
 
 		await expect.element(page.getByTestId('annotation-ann-1')).toBeInTheDocument();
-		expect(page.getByRole('button', { name: /löschen/i }).query()).toBeNull();
+		expect(page.getByTestId('annotation-delete-ann-1').query()).toBeNull();
+	});
+
+	it('does not show delete button when canDraw is false even if annotation is active', async () => {
+		render(AnnotationLayer, {
+			annotations: [makeAnnotation('ann-1')],
+			canDraw: false,
+			color: '#00C7B1',
+			activeAnnotationId: 'ann-1',
+			onDraw: () => {}
+		});
+
+		await expect.element(page.getByTestId('annotation-ann-1')).toBeInTheDocument();
+		expect(page.getByTestId('annotation-delete-ann-1').query()).toBeNull();
 	});
 });

frontend/src/lib/components/AnnotationShape.svelte

@@ -11,6 +11,8 @@ let {
 	blockNumber = undefined,
 	isFlashing = false,
 	isResizable = false,
+	showDelete = false,
+	onDeleteRequest,
 	onclick,
 	onpointerenter,
 	onpointerleave
@@ -23,11 +25,15 @@ let {
 	blockNumber?: number | undefined;
 	isFlashing?: boolean;
 	isResizable?: boolean;
+	showDelete?: boolean;
+	onDeleteRequest?: () => void;
 	onclick: () => void;
 	onpointerenter: () => void;
 	onpointerleave: () => void;
 } = $props();
 
+const deleteVisible = $derived(showDelete && (isHovered || isActive));
+
 function hexToRgba(hex: string, alpha: number): string {
 	const r = parseInt(hex.slice(1, 3), 16);
 	const g = parseInt(hex.slice(3, 5), 16);
@@ -83,6 +89,7 @@ let shapeStyle = $derived(
 	onclick={onclick}
 	onkeydown={(e) => {
 		if (e.key === 'Enter' || e.key === ' ') onclick();
+		if (e.key === 'Delete' && showDelete) onDeleteRequest?.();
 	}}
 	onpointerenter={onpointerenter}
 	onpointerleave={onpointerleave}
@@ -112,6 +119,51 @@ let shapeStyle = $derived(
 			{blockNumber}
 		</div>
 	{/if}
+	{#if deleteVisible}
+		<button
+			data-testid="annotation-delete-{annotation.id}"
+			type="button"
+			aria-label="Löschen"
+			onclick={(e) => {
+				e.stopPropagation();
+				onDeleteRequest?.();
+			}}
+			style="
+				position: absolute;
+				top: -8px;
+				right: -8px;
+				min-width: 44px;
+				min-height: 44px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: 50%;
+				background-color: #fff;
+				border: 1px solid var(--color-error, #e53e3e);
+				color: var(--color-error, #e53e3e);
+				cursor: pointer;
+				pointer-events: auto;
+				box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+				z-index: 10;
+			"
+		>
+			<svg
+				width="16"
+				height="16"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="1.5"
+				aria-hidden="true"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+				/>
+			</svg>
+		</button>
+	{/if}
 	{#if isResizable}
 		<AnnotationEditOverlay annotation={annotation} />
 	{/if}

frontend/src/lib/components/AnnotationShape.svelte.spec.ts

@@ -0,0 +1,155 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import AnnotationShape from './AnnotationShape.svelte';
+
+afterEach(cleanup);
+
+function makeAnnotation(id = 'ann-1') {
+	return {
+		id,
+		documentId: 'doc-1',
+		pageNumber: 1,
+		x: 0.1,
+		y: 0.1,
+		width: 0.3,
+		height: 0.2,
+		color: '#00C7B1',
+		createdAt: new Date().toISOString()
+	};
+}
+
+describe('AnnotationShape', () => {
+	it('renders the annotation element', async () => {
+		render(AnnotationShape, {
+			annotation: makeAnnotation(),
+			isHovered: false,
+			isActive: false,
+			onclick: () => {},
+			onpointerenter: () => {},
+			onpointerleave: () => {}
+		});
+
+		await expect.element(page.getByTestId('annotation-ann-1')).toBeInTheDocument();
+	});
+
+	it('does not show delete button when showDelete is false', async () => {
+		render(AnnotationShape, {
+			annotation: makeAnnotation(),
+			isHovered: true,
+			isActive: false,
+			showDelete: false,
+			onDeleteRequest: vi.fn(),
+			onclick: () => {},
+			onpointerenter: () => {},
+			onpointerleave: () => {}
+		});
+
+		expect(page.getByTestId('annotation-delete-ann-1').query()).toBeNull();
+	});
+
+	it('does not show delete button when showDelete is true but neither hovered nor active', async () => {
+		render(AnnotationShape, {
+			annotation: makeAnnotation(),
+			isHovered: false,
+			isActive: false,
+			showDelete: true,
+			onDeleteRequest: vi.fn(),
+			onclick: () => {},
+			onpointerenter: () => {},
+			onpointerleave: () => {}
+		});
+
+		expect(page.getByTestId('annotation-delete-ann-1').query()).toBeNull();
+	});
+
+	it('shows delete button when showDelete is true and isHovered is true', async () => {
+		render(AnnotationShape, {
+			annotation: makeAnnotation(),
+			isHovered: true,
+			isActive: false,
+			showDelete: true,
+			onDeleteRequest: vi.fn(),
+			onclick: () => {},
+			onpointerenter: () => {},
+			onpointerleave: () => {}
+		});
+
+		await expect.element(page.getByTestId('annotation-delete-ann-1')).toBeInTheDocument();
+	});
+
+	it('shows delete button when showDelete is true and isActive is true', async () => {
+		render(AnnotationShape, {
+			annotation: makeAnnotation(),
+			isHovered: false,
+			isActive: true,
+			showDelete: true,
+			onDeleteRequest: vi.fn(),
+			onclick: () => {},
+			onpointerenter: () => {},
+			onpointerleave: () => {}
+		});
+
+		await expect.element(page.getByTestId('annotation-delete-ann-1')).toBeInTheDocument();
+	});
+
+	it('calls onDeleteRequest when delete button is clicked', async () => {
+		const onDeleteRequest = vi.fn();
+
+		render(AnnotationShape, {
+			annotation: makeAnnotation(),
+			isHovered: true,
+			isActive: false,
+			showDelete: true,
+			onDeleteRequest,
+			onclick: () => {},
+			onpointerenter: () => {},
+			onpointerleave: () => {}
+		});
+
+		const deleteBtn = page.getByTestId('annotation-delete-ann-1');
+		await deleteBtn.click();
+
+		expect(onDeleteRequest).toHaveBeenCalledOnce();
+	});
+
+	it('calls onDeleteRequest when Delete key is pressed on the annotation', async () => {
+		const onDeleteRequest = vi.fn();
+
+		render(AnnotationShape, {
+			annotation: makeAnnotation(),
+			isHovered: false,
+			isActive: true,
+			showDelete: true,
+			onDeleteRequest,
+			onclick: () => {},
+			onpointerenter: () => {},
+			onpointerleave: () => {}
+		});
+
+		const annotationEl = page.getByTestId('annotation-ann-1').element() as HTMLElement;
+		annotationEl.dispatchEvent(new KeyboardEvent('keydown', { key: 'Delete', bubbles: true }));
+
+		expect(onDeleteRequest).toHaveBeenCalledOnce();
+	});
+
+	it('does not call onDeleteRequest on Delete key when showDelete is false', async () => {
+		const onDeleteRequest = vi.fn();
+
+		render(AnnotationShape, {
+			annotation: makeAnnotation(),
+			isHovered: false,
+			isActive: true,
+			showDelete: false,
+			onDeleteRequest,
+			onclick: () => {},
+			onpointerenter: () => {},
+			onpointerleave: () => {}
+		});
+
+		const annotationEl = page.getByTestId('annotation-ann-1').element() as HTMLElement;
+		annotationEl.dispatchEvent(new KeyboardEvent('keydown', { key: 'Delete', bubbles: true }));
+
+		expect(onDeleteRequest).not.toHaveBeenCalled();
+	});
+});

frontend/src/lib/components/DocumentViewer.svelte

@@ -24,6 +24,7 @@ type Props = {
 	flashAnnotationId?: string | null;
 	onAnnotationClick: (id: string) => void;
 	onTranscriptionDraw?: (rect: DrawRect) => void;
+	onDeleteAnnotationRequest?: (annotationId: string) => void;
 };
 
 let {
@@ -38,7 +39,8 @@ let {
 	annotationsDimmed = false,
 	flashAnnotationId = null,
 	onAnnotationClick,
-	onTranscriptionDraw
+	onTranscriptionDraw,
+	onDeleteAnnotationRequest
 }: Props = $props();
 </script>
 
@@ -98,6 +100,7 @@ let {
 			flashAnnotationId={flashAnnotationId}
 			onAnnotationClick={onAnnotationClick}
 			onTranscriptionDraw={onTranscriptionDraw}
+			onDeleteAnnotationRequest={onDeleteAnnotationRequest}
 			documentFileHash={doc.fileHash ?? null}
 		/>
 	{:else if fileUrl}

frontend/src/lib/components/NotificationBell.svelte

@@ -48,12 +48,6 @@ function handleKeydown(event: KeyboardEvent) {
 	}
 }
 
-const bellLabel = $derived(
-	stream.unreadCount > 0
-		? m.notification_bell_unread_label({ count: stream.unreadCount })
-		: m.notification_bell_label()
-);
-
 function attachBellButton(node: HTMLButtonElement) {
 	bellButtonEl = node;
 	return () => {
@@ -78,11 +72,12 @@ onDestroy(() => {
 		{@attach attachBellButton}
 		type="button"
 		onclick={toggleDropdown}
-		aria-label={bellLabel}
+		aria-label={stream.unreadCount > 0
-		title={bellLabel}
+			? m.notification_bell_unread_label({ count: stream.unreadCount })
+			: m.notification_bell_label()}
 		aria-expanded={open}
 		aria-haspopup="true"
-		class="relative cursor-pointer rounded-sm p-2 text-white/65 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+		class="relative rounded-sm p-2 text-white/65 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 	>
 		<svg
 			xmlns="http://www.w3.org/2000/svg"

frontend/src/lib/components/NotificationBell.svelte.spec.ts

@@ -55,34 +55,6 @@ async function openDropdownAndClickFirstNotification() {
 	notifButton.click();
 }
 
-describe('NotificationBell — cursor and tooltip', () => {
-	it('bell button has cursor-pointer class', async () => {
-		render(NotificationBell);
-		const btn = document.querySelector<HTMLButtonElement>('button[aria-haspopup="true"]')!;
-		expect(btn.classList.contains('cursor-pointer')).toBe(true);
-	});
-
-	it('bell button title equals aria-label when unreadCount is 0', async () => {
-		mockNotificationList.value = [];
-		render(NotificationBell);
-		const btn = document.querySelector<HTMLButtonElement>('button[aria-haspopup="true"]')!;
-		expect(btn.getAttribute('title')).toBe('Benachrichtigungen');
-		expect(btn.getAttribute('aria-label')).toBe(btn.getAttribute('title'));
-	});
-
-	it('bell button title equals aria-label when unreadCount is 3', async () => {
-		mockNotificationList.value = [
-			makeNotification({ id: 'n1' }),
-			makeNotification({ id: 'n2' }),
-			makeNotification({ id: 'n3' })
-		];
-		render(NotificationBell);
-		const btn = document.querySelector<HTMLButtonElement>('button[aria-haspopup="true"]')!;
-		expect(btn.getAttribute('title')).toBe('3 ungelesene Benachrichtigungen');
-		expect(btn.getAttribute('aria-label')).toBe(btn.getAttribute('title'));
-	});
-});
-
 describe('NotificationBell', () => {
 	it('handleMarkRead navigates to URL including annotationId when notification has annotationId', async () => {
 		mockNotificationList.value = [makeNotification({ annotationId: 'annot-1' })];

frontend/src/lib/components/PdfViewer.svelte

@@ -18,6 +18,7 @@ let {
 	activeAnnotationId = $bindable<string | null>(null),
 	onAnnotationClick,
 	onTranscriptionDraw,
+	onDeleteAnnotationRequest,
 	documentFileHash,
 	annotationsDimmed = false,
 	flashAnnotationId = null
@@ -30,6 +31,7 @@ let {
 	activeAnnotationId?: string | null;
 	onAnnotationClick?: (id: string) => void;
 	onTranscriptionDraw?: (rect: DrawRect) => void;
+	onDeleteAnnotationRequest?: (annotationId: string) => void;
 	documentFileHash?: string | null;
 	annotationsDimmed?: boolean;
 	flashAnnotationId?: string | null;
@@ -264,6 +266,7 @@ function handleAnnotationClick(id: string) {
 								flashAnnotationId={flashAnnotationId}
 								onDraw={handleDraw}
 								onAnnotationClick={handleAnnotationClick}
+								onDeleteRequest={onDeleteAnnotationRequest}
 							/>
 						{/if}
 					</div>

frontend/src/lib/components/ThemeToggle.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 import { onMount } from 'svelte';
-import { m } from '$lib/paraglide/messages.js';
 
 type Theme = 'light' | 'dark';
 
@@ -20,10 +19,6 @@ onMount(() => {
 	theme = resolveInitialTheme();
 });
 
-const themeLabel = $derived(
-	theme === 'dark' ? m.theme_toggle_to_light() : m.theme_toggle_to_dark()
-);
-
 function toggle() {
 	theme = theme === 'dark' ? 'light' : 'dark';
 	localStorage.setItem('theme', theme);
@@ -34,8 +29,8 @@ function toggle() {
 <button
 	type="button"
 	onclick={toggle}
-	aria-label={themeLabel}
+	aria-label={theme === 'dark' ? 'light mode' : 'dark mode'}
-	title={themeLabel}
+	title={theme === 'dark' ? 'light mode' : 'dark mode'}
 	class="rounded p-1.5 text-white/65 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 >
 	{#if theme === 'dark'}

frontend/src/lib/components/ThemeToggle.svelte.spec.ts

@@ -1,45 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { cleanup, render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
-import ThemeToggle from './ThemeToggle.svelte';
-
-afterEach(() => {
-	cleanup();
-	localStorage.removeItem('theme');
-});
-
-describe('ThemeToggle — label derivation (light mode)', () => {
-	beforeEach(() => {
-		localStorage.setItem('theme', 'light');
-	});
-
-	it('aria-label invites switching to dark mode when theme is light', async () => {
-		render(ThemeToggle);
-		const btn = await page.getByRole('button').element();
-		expect(btn.getAttribute('aria-label')).toBe('Zu dunklem Design wechseln');
-	});
-
-	it('title equals aria-label in light mode', async () => {
-		render(ThemeToggle);
-		const btn = await page.getByRole('button').element();
-		expect(btn.getAttribute('title')).toBe(btn.getAttribute('aria-label'));
-	});
-});
-
-describe('ThemeToggle — label derivation (dark mode)', () => {
-	beforeEach(() => {
-		localStorage.setItem('theme', 'dark');
-	});
-
-	it('aria-label invites switching to light mode when theme is dark', async () => {
-		render(ThemeToggle);
-		const btn = await page.getByRole('button').element();
-		expect(btn.getAttribute('aria-label')).toBe('Zu hellem Design wechseln');
-	});
-
-	it('title equals aria-label in dark mode', async () => {
-		render(ThemeToggle);
-		const btn = await page.getByRole('button').element();
-		expect(btn.getAttribute('title')).toBe(btn.getAttribute('aria-label'));
-	});
-});

frontend/src/routes/documents/[id]/+page.svelte

@@ -13,9 +13,12 @@ import { getErrorMessage } from '$lib/errors';
 import { translateOcrProgress } from '$lib/ocr/translateOcrProgress';
 import { createFileLoader } from '$lib/hooks/useFileLoader.svelte';
 import { scrollToCommentFromQuery } from '$lib/utils/deepLinkScroll';
+import { getConfirmService } from '$lib/services/confirm.svelte.js';
 
 let { data } = $props();
 
+const { confirm } = getConfirmService();
+
 const doc = $derived(data.document);
 const canWrite = $derived(data.canWrite ?? false);
 const currentUserId = $derived((data.user?.id as string | undefined) ?? null);
@@ -105,6 +108,23 @@ async function deleteBlock(blockId: string) {
 	annotationReloadKey++;
 }
 
+async function handleAnnotationDeleteRequest(annotationId: string) {
+	const confirmed = await confirm({
+		title: m.transcription_block_delete_confirm(),
+		destructive: true
+	});
+	if (!confirmed) return;
+
+	const block = transcriptionBlocks.find((b) => b.annotationId === annotationId);
+	if (block) {
+		await deleteBlock(block.id);
+	} else {
+		// Annotation has no linked block — delete the annotation directly
+		await fetch(`/api/documents/${doc.id}/annotations/${annotationId}`, { method: 'DELETE' });
+		annotationReloadKey++;
+	}
+}
+
 async function reviewToggle(blockId: string) {
 	const res = await fetch(`/api/documents/${doc.id}/transcription-blocks/${blockId}/review`, {
 		method: 'PUT'
@@ -381,6 +401,7 @@ onMount(() => {
 				bind:activeAnnotationId={activeAnnotationId}
 				onAnnotationClick={handleAnnotationClick}
 				onTranscriptionDraw={createBlockFromDraw}
+				onDeleteAnnotationRequest={handleAnnotationDeleteRequest}
 			/>
 		</div>
 

frontend/src/routes/layout.css

@@ -365,11 +365,6 @@
 		text-underline-offset: 4px;
 	}
 
-	/* Tailwind preflight resets cursor on *, overriding the browser default for buttons */
-	button {
-		cursor: pointer;
-	}
-
 	/* Fallback focus ring for any interactive element not styled with ring-focus-ring */
 	:focus-visible {
 		outline: 2px solid var(--c-focus-ring);