From 2bfbf45eba45ea9b627e79d576310d6d92a98398 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 26 Mar 2026 12:47:08 +0100
Subject: [PATCH] refactor(types): extract shared types to \$lib/types.ts

Eliminates type duplication across 6 files by introducing a single
shared types module:

- Comment + CommentReply: were identically defined in CommentThread,
  PanelDiscussion, and DocumentBottomPanel
- DocumentPanelTab: was identically defined in DocumentBottomPanel
  and documents/[id]/+page.svelte
- Annotation: was defined in both AnnotationLayer and PdfViewer
  (PdfViewer's variant with fileHash? is now the canonical definition)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/AnnotationLayer.svelte | 12 +------
 .../src/lib/components/CommentThread.svelte   | 20 +----------
 .../lib/components/DocumentBottomPanel.svelte | 28 +++-------------
 .../src/lib/components/PanelDiscussion.svelte | 20 +----------
 frontend/src/lib/components/PdfViewer.svelte  | 14 +-------
 frontend/src/lib/types.ts                     | 33 +++++++++++++++++++
 .../src/routes/documents/[id]/+page.svelte    |  7 ++--
 7 files changed, 44 insertions(+), 90 deletions(-)
 create mode 100644 frontend/src/lib/types.ts

diff --git a/frontend/src/lib/components/AnnotationLayer.svelte b/frontend/src/lib/components/AnnotationLayer.svelte
index f2e3a993..34ca26d2 100644
--- a/frontend/src/lib/components/AnnotationLayer.svelte
+++ b/frontend/src/lib/components/AnnotationLayer.svelte
@@ -1,15 +1,5 @@
 <script lang="ts">
-type Annotation = {
-	id: string;
-	documentId: string;
-	pageNumber: number;
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-	color: string;
-	createdAt: string;
-};
+import type { Annotation } from '$lib/types';
 
 type DrawRect = {
 	x: number;
diff --git a/frontend/src/lib/components/CommentThread.svelte b/frontend/src/lib/components/CommentThread.svelte
index 3e6f6218..12975503 100644
--- a/frontend/src/lib/components/CommentThread.svelte
+++ b/frontend/src/lib/components/CommentThread.svelte
@@ -1,25 +1,7 @@
 <script lang="ts">
 import { onMount, untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
-
-type CommentReply = {
-	id: string;
-	authorId: string | null;
-	authorName: string;
-	content: string;
-	createdAt: string;
-	updatedAt: string;
-};
-
-type Comment = {
-	id: string;
-	authorId: string | null;
-	authorName: string;
-	content: string;
-	createdAt: string;
-	updatedAt: string;
-	replies: CommentReply[];
-};
+import type { Comment, CommentReply } from '$lib/types';
 
 type Props = {
 	documentId: string;
diff --git a/frontend/src/lib/components/DocumentBottomPanel.svelte b/frontend/src/lib/components/DocumentBottomPanel.svelte
index eb9a21af..94acb09d 100644
--- a/frontend/src/lib/components/DocumentBottomPanel.svelte
+++ b/frontend/src/lib/components/DocumentBottomPanel.svelte
@@ -4,27 +4,7 @@ import PanelMetadata from './PanelMetadata.svelte';
 import PanelTranscription from './PanelTranscription.svelte';
 import PanelDiscussion from './PanelDiscussion.svelte';
 import PanelHistory from './PanelHistory.svelte';
-
-type Tab = 'metadata' | 'transcription' | 'discussion' | 'history';
-
-type CommentReply = {
-	id: string;
-	authorId: string | null;
-	authorName: string;
-	content: string;
-	createdAt: string;
-	updatedAt: string;
-};
-
-type Comment = {
-	id: string;
-	authorId: string | null;
-	authorName: string;
-	content: string;
-	createdAt: string;
-	updatedAt: string;
-	replies: CommentReply[];
-};
+import type { Comment, DocumentPanelTab } from '$lib/types';
 
 type Doc = {
 	id: string;
@@ -47,7 +27,7 @@ type Props = {
 	canAdmin: boolean;
 	open: boolean;
 	height: number;
-	activeTab: Tab;
+	activeTab: DocumentPanelTab;
 };
 
 let {
@@ -72,7 +52,7 @@ function fullHeight() {
 	return window.innerHeight - (topbar?.getBoundingClientRect().bottom ?? 0);
 }
 
-function openTab(tab: Tab) {
+function openTab(tab: DocumentPanelTab) {
 	activeTab = tab;
 	if (!open) {
 		open = true;
@@ -110,7 +90,7 @@ function onDragEnd() {
 	isDragging = false;
 }
 
-const tabs: { id: Tab; label: () => string }[] = [
+const tabs: { id: DocumentPanelTab; label: () => string }[] = [
 	{ id: 'metadata', label: m.doc_panel_tab_metadata },
 	{ id: 'transcription', label: m.doc_panel_tab_transcription },
 	{ id: 'discussion', label: m.doc_panel_tab_discussion },
diff --git a/frontend/src/lib/components/PanelDiscussion.svelte b/frontend/src/lib/components/PanelDiscussion.svelte
index 22fb9d6b..bbed758a 100644
--- a/frontend/src/lib/components/PanelDiscussion.svelte
+++ b/frontend/src/lib/components/PanelDiscussion.svelte
@@ -1,24 +1,6 @@
 <script lang="ts">
 import CommentThread from './CommentThread.svelte';
-
-type CommentReply = {
-	id: string;
-	authorId: string | null;
-	authorName: string;
-	content: string;
-	createdAt: string;
-	updatedAt: string;
-};
-
-type Comment = {
-	id: string;
-	authorId: string | null;
-	authorName: string;
-	content: string;
-	createdAt: string;
-	updatedAt: string;
-	replies: CommentReply[];
-};
+import type { Comment } from '$lib/types';
 
 type Props = {
 	documentId: string;
diff --git a/frontend/src/lib/components/PdfViewer.svelte b/frontend/src/lib/components/PdfViewer.svelte
index 0df93095..429b7fa8 100644
--- a/frontend/src/lib/components/PdfViewer.svelte
+++ b/frontend/src/lib/components/PdfViewer.svelte
@@ -3,6 +3,7 @@ import { onMount } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
 import type { PDFDocumentProxy, PDFPageProxy, RenderTask } from 'pdfjs-dist';
 import AnnotationLayer from './AnnotationLayer.svelte';
+import type { Annotation } from '$lib/types';
 import { m } from '$lib/paraglide/messages.js';
 
 let {
@@ -43,19 +44,6 @@ let textLayerInstance: { cancel: () => void } | null = null;
 let pdfjsLib: typeof import('pdfjs-dist') | null = null;
 let pdfjsReady = $state(false);
 
-type Annotation = {
-	id: string;
-	documentId: string;
-	pageNumber: number;
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-	color: string;
-	createdAt: string;
-	fileHash?: string | null;
-};
-
 let annotations = $state<Annotation[]>([]);
 let annotateColor = $state('#ffff00');
 let commentCounts = new SvelteMap<string, number>();
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
new file mode 100644
index 00000000..28e9da0b
--- /dev/null
+++ b/frontend/src/lib/types.ts
@@ -0,0 +1,33 @@
+export type CommentReply = {
+	id: string;
+	authorId: string | null;
+	authorName: string;
+	content: string;
+	createdAt: string;
+	updatedAt: string;
+};
+
+export type Comment = {
+	id: string;
+	authorId: string | null;
+	authorName: string;
+	content: string;
+	createdAt: string;
+	updatedAt: string;
+	replies: CommentReply[];
+};
+
+export type DocumentPanelTab = 'metadata' | 'transcription' | 'discussion' | 'history';
+
+export type Annotation = {
+	id: string;
+	documentId: string;
+	pageNumber: number;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	color: string;
+	createdAt: string;
+	fileHash?: string | null;
+};
diff --git a/frontend/src/routes/documents/[id]/+page.svelte b/frontend/src/routes/documents/[id]/+page.svelte
index 543634f7..dbfdf827 100644
--- a/frontend/src/routes/documents/[id]/+page.svelte
+++ b/frontend/src/routes/documents/[id]/+page.svelte
@@ -4,8 +4,7 @@ import DocumentTopBar from '$lib/components/DocumentTopBar.svelte';
 import DocumentViewer from '$lib/components/DocumentViewer.svelte';
 import DocumentBottomPanel from '$lib/components/DocumentBottomPanel.svelte';
 import AnnotationSidePanel from '$lib/components/AnnotationSidePanel.svelte';
-
-type Tab = 'metadata' | 'transcription' | 'discussion' | 'history';
+import type { DocumentPanelTab } from '$lib/types';
 
 let { data } = $props();
 
@@ -72,7 +71,7 @@ const LS_KEY_TAB = 'doc-panel-tab';
 let panelOpen = $state(false);
 let panelHeight = $state(0); // set to full height on mount
 let navHeight = $state(0);
-let activeTab = $state<Tab>('metadata');
+let activeTab = $state<DocumentPanelTab>('metadata');
 let localStorageRestored = $state(false);
 
 onMount(() => {
@@ -82,7 +81,7 @@ onMount(() => {
 	const savedTab = localStorage.getItem(LS_KEY_TAB);
 
 	if (savedTab && ['metadata', 'transcription', 'discussion', 'history'].includes(savedTab)) {
-		activeTab = savedTab as Tab;
+		activeTab = savedTab as DocumentPanelTab;
 	}
 	const topbar = document.querySelector('[data-topbar]');
 	panelHeight = window.innerHeight - navHeight - (topbar?.getBoundingClientRect().height ?? 0);