From 3b756cd718d235c1ae6730f07c70ba34bcdb3c63 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 14 Apr 2026 10:55:13 +0200
Subject: [PATCH] feat(annotations): add isResizable prop to AnnotationShape to
 render edit overlay

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/AnnotationShape.svelte |  6 +++
 .../components/AnnotationShape.svelte.test.ts | 50 +++++++++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 frontend/src/lib/components/AnnotationShape.svelte.test.ts

diff --git a/frontend/src/lib/components/AnnotationShape.svelte b/frontend/src/lib/components/AnnotationShape.svelte
index 69c41223..a7c667f2 100644
--- a/frontend/src/lib/components/AnnotationShape.svelte
+++ b/frontend/src/lib/components/AnnotationShape.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { Annotation } from '$lib/types';
+import AnnotationEditOverlay from './AnnotationEditOverlay.svelte';
 
 let {
 	annotation,
@@ -9,6 +10,7 @@ let {
 	dimmed = false,
 	blockNumber = undefined,
 	isFlashing = false,
+	isResizable = false,
 	onclick,
 	onpointerenter,
 	onpointerleave
@@ -20,6 +22,7 @@ let {
 	dimmed?: boolean;
 	blockNumber?: number | undefined;
 	isFlashing?: boolean;
+	isResizable?: boolean;
 	onclick: () => void;
 	onpointerenter: () => void;
 	onpointerleave: () => void;
@@ -109,6 +112,9 @@ let shapeStyle = $derived(
 			{blockNumber}
 		</div>
 	{/if}
+	{#if isResizable}
+		<AnnotationEditOverlay annotation={annotation} />
+	{/if}
 </div>
 
 <style>
diff --git a/frontend/src/lib/components/AnnotationShape.svelte.test.ts b/frontend/src/lib/components/AnnotationShape.svelte.test.ts
new file mode 100644
index 00000000..f5ad754e
--- /dev/null
+++ b/frontend/src/lib/components/AnnotationShape.svelte.test.ts
@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import AnnotationShape from './AnnotationShape.svelte';
+import type { Annotation } from '$lib/types';
+
+const annotation: Annotation = {
+	id: 'ann-1',
+	documentId: 'doc-1',
+	pageNumber: 1,
+	x: 0.1,
+	y: 0.2,
+	width: 0.3,
+	height: 0.4,
+	color: '#00c7b1',
+	createdAt: '2026-01-01T00:00:00Z'
+};
+
+describe('AnnotationShape', () => {
+	describe('isResizable prop', () => {
+		it('does not render AnnotationEditOverlay when isResizable is false', async () => {
+			render(AnnotationShape, {
+				annotation,
+				isHovered: false,
+				isActive: false,
+				isResizable: false,
+				onclick: () => {},
+				onpointerenter: () => {},
+				onpointerleave: () => {}
+			});
+
+			const handles = document.querySelectorAll('[data-handle]');
+			expect(handles).toHaveLength(0);
+		});
+
+		it('renders AnnotationEditOverlay when isResizable is true', async () => {
+			render(AnnotationShape, {
+				annotation,
+				isHovered: false,
+				isActive: true,
+				isResizable: true,
+				onclick: () => {},
+				onpointerenter: () => {},
+				onpointerleave: () => {}
+			});
+
+			const handles = document.querySelectorAll('[data-handle]');
+			expect(handles).toHaveLength(8);
+		});
+	});
+});