From e5739d7f8e59681cff55f69388550bf245051b62 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 8 May 2026 10:07:45 +0200
Subject: [PATCH] refactor(documents): extract TimelineControls (#385)

Splits the reset-zoom and clear buttons out of the orchestrator into
their own component. Closes part 3 (final) of Felix's component-split
concern. Orchestrator now composes four single-purpose children
(TimelineBars, TimelineYAxis, TimelineXAxis, TimelineControls) and
keeps only the pointer choreography that links them.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../src/lib/document/TimelineControls.svelte  | 41 +++++++++++++++++++
 .../lib/document/TimelineDensityFilter.svelte | 32 ++++-----------
 2 files changed, 48 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/lib/document/TimelineControls.svelte

diff --git a/frontend/src/lib/document/TimelineControls.svelte b/frontend/src/lib/document/TimelineControls.svelte
new file mode 100644
index 00000000..f33f69f5
--- /dev/null
+++ b/frontend/src/lib/document/TimelineControls.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+
+let {
+	isZoomed,
+	hasSelection,
+	onresetzoom,
+	onclearselection
+}: {
+	isZoomed: boolean;
+	hasSelection: boolean;
+	onresetzoom: () => void;
+	onclearselection: () => void;
+} = $props();
+</script>
+
+<div class="absolute top-2 right-2 flex items-center gap-1">
+	{#if isZoomed}
+		<button
+			type="button"
+			data-testid="timeline-zoom-reset"
+			aria-label={m.timeline_zoom_reset()}
+			title={m.timeline_zoom_reset()}
+			onclick={onresetzoom}
+			class="hover:text-ink-1 inline-flex h-6 items-center justify-center gap-1 rounded-sm px-2 text-xs text-ink-3 hover:bg-canvas"
+		>
+			↩
+		</button>
+	{/if}
+	{#if hasSelection}
+		<button
+			type="button"
+			data-testid="timeline-clear"
+			aria-label={m.timeline_clear_selection()}
+			onclick={onclearselection}
+			class="hover:text-ink-1 inline-flex h-6 w-6 items-center justify-center rounded-full text-ink-3 hover:bg-canvas"
+		>
+			×
+		</button>
+	{/if}
+</div>
diff --git a/frontend/src/lib/document/TimelineDensityFilter.svelte b/frontend/src/lib/document/TimelineDensityFilter.svelte
index 62d7f4d5..322dd3c3 100644
--- a/frontend/src/lib/document/TimelineDensityFilter.svelte
+++ b/frontend/src/lib/document/TimelineDensityFilter.svelte
@@ -12,6 +12,7 @@ import { getLocale } from '$lib/paraglide/runtime';
 import TimelineBars from '$lib/document/TimelineBars.svelte';
 import TimelineYAxis from '$lib/document/TimelineYAxis.svelte';
 import TimelineXAxis from '$lib/document/TimelineXAxis.svelte';
+import TimelineControls from '$lib/document/TimelineControls.svelte';
 import type { components } from '$lib/generated/api';
 
 type MonthBucket = components['schemas']['MonthBucket'];
@@ -268,30 +269,11 @@ const dragLiveMessage = $derived.by(() => {
 			{dragLiveMessage}
 		</div>
 
-		<div class="absolute top-2 right-2 flex items-center gap-1">
-			{#if isZoomed}
-				<button
-					type="button"
-					data-testid="timeline-zoom-reset"
-					aria-label={m.timeline_zoom_reset()}
-					title={m.timeline_zoom_reset()}
-					onclick={resetZoom}
-					class="hover:text-ink-1 inline-flex h-6 items-center justify-center gap-1 rounded-sm px-2 text-xs text-ink-3 hover:bg-canvas"
-				>
-					↩
-				</button>
-			{/if}
-			{#if hasSelection}
-				<button
-					type="button"
-					data-testid="timeline-clear"
-					aria-label={m.timeline_clear_selection()}
-					onclick={clearSelection}
-					class="hover:text-ink-1 inline-flex h-6 w-6 items-center justify-center rounded-full text-ink-3 hover:bg-canvas"
-				>
-					×
-				</button>
-			{/if}
-		</div>
+		<TimelineControls
+			isZoomed={isZoomed}
+			hasSelection={hasSelection}
+			onresetzoom={resetZoom}
+			onclearselection={clearSelection}
+		/>
 	</div>
 {/if}