From 00682bac4fe6c865b9edb4a325c80406997c905e Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 8 May 2026 10:04:38 +0200
Subject: [PATCH] refactor(documents): extract TimelineBars from density filter
 (#385)

Splits the bar row + drag-window overlay + bar styling out of the
377-line orchestrator into a single-purpose component. The pointer
choreography (handle{PointerDown,DocumentMove,DocumentUp},
indexFromClientX, cleanupDragListeners) stays in the orchestrator
per Felix's note. Closes part 1 of Felix's component-split concern.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/lib/document/TimelineBars.svelte | 131 ++++++++++++++++++
 .../lib/document/TimelineDensityFilter.svelte | 108 ++-------------
 2 files changed, 146 insertions(+), 93 deletions(-)
 create mode 100644 frontend/src/lib/document/TimelineBars.svelte

diff --git a/frontend/src/lib/document/TimelineBars.svelte b/frontend/src/lib/document/TimelineBars.svelte
new file mode 100644
index 00000000..6e288820
--- /dev/null
+++ b/frontend/src/lib/document/TimelineBars.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+import { formatTickLabel } from '$lib/document/timeline';
+import { getLocale } from '$lib/paraglide/runtime';
+import type { components } from '$lib/generated/api';
+
+type MonthBucket = components['schemas']['MonthBucket'];
+
+const ZERO_COUNT_BAR_HEIGHT = 2; // px — minimum visible signal for empty months
+
+let {
+	filled,
+	maxCount,
+	barAreaHeight,
+	isSelected,
+	isInDragPreview,
+	isDragging,
+	dragWindowLeftPct,
+	dragWindowRightPct,
+	rowEl = $bindable(),
+	onbarpointerdown,
+	onbarpointerenter,
+	onbarclick
+}: {
+	filled: MonthBucket[];
+	maxCount: number;
+	barAreaHeight: number;
+	isSelected: (label: string) => boolean;
+	isInDragPreview: (index: number) => boolean;
+	isDragging: boolean;
+	dragWindowLeftPct: number;
+	dragWindowRightPct: number;
+	rowEl?: HTMLDivElement;
+	onbarpointerdown: (event: PointerEvent, index: number) => void;
+	onbarpointerenter: (index: number) => void;
+	onbarclick: (index: number) => void;
+} = $props();
+
+function barHeight(count: number): number {
+	if (count === 0) return ZERO_COUNT_BAR_HEIGHT;
+	return Math.max(ZERO_COUNT_BAR_HEIGHT, (count / maxCount) * barAreaHeight);
+}
+</script>
+
+<div
+	bind:this={rowEl}
+	class="relative flex items-end border-b border-line"
+	style="height: {barAreaHeight}px;"
+>
+	{#each filled as bucket, i (bucket.month)}
+		<button
+			type="button"
+			data-testid="timeline-bar"
+			aria-label={m.timeline_bar_aria({
+				when: formatTickLabel(bucket.month, getLocale()),
+				count: bucket.count
+			})}
+			aria-pressed={isSelected(bucket.month)}
+			onpointerdown={(e) => onbarpointerdown(e, i)}
+			onpointerenter={() => onbarpointerenter(i)}
+			onclick={() => onbarclick(i)}
+			class="bar group flex h-full min-w-px flex-1 cursor-pointer items-end justify-center bg-transparent p-0 transition-colors"
+			class:selected={isSelected(bucket.month)}
+			class:in-drag-preview={isInDragPreview(i)}
+		>
+			<span
+				class="bar-fill block w-full rounded-t-[2px]"
+				style="height: {barHeight(bucket.count)}px;"
+			></span>
+		</button>
+	{/each}
+	{#if isDragging}
+		<div
+			class="drag-window"
+			data-testid="timeline-drag-window"
+			style="left: {dragWindowLeftPct}%; right: {dragWindowRightPct}%;"
+		></div>
+	{/if}
+</div>
+
+<style>
+:root {
+	--timeline-bar-idle: rgba(161, 220, 216, 0.35);
+	--timeline-bar-outside: var(--c-line);
+}
+
+:global(.dark) {
+	/* 3.33:1 against --c-surface (#011526) — clears WCAG 1.4.11 non-text contrast
+	   for large UI elements; previous #0d3358 measured 1.44:1. */
+	--timeline-bar-idle: #3a6e8c;
+	--timeline-bar-outside: #1a2735;
+}
+
+.bar .bar-fill {
+	background-color: var(--timeline-bar-idle);
+	transition: background-color 100ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.bar .bar-fill {
+		transition: none;
+	}
+}
+
+.bar.selected .bar-fill,
+.bar.in-drag-preview .bar-fill {
+	background-color: var(--palette-mint, #a1dcd8);
+}
+
+.bar.in-drag-preview .bar-fill {
+	opacity: 0.7;
+}
+
+.bar:hover .bar-fill {
+	background-color: var(--palette-mint, #a1dcd8);
+	opacity: 0.85;
+}
+
+/* Graylog-style range selector window: left/right borders mark the dragged
+   range, tinted body fills the area. pointer-events:none keeps the bars below
+   reachable so pointermove still fires their pointerenter. */
+.drag-window {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	background-color: rgba(161, 220, 216, 0.22);
+	border-left: 2px solid var(--palette-mint, #a1dcd8);
+	border-right: 2px solid var(--palette-mint, #a1dcd8);
+	pointer-events: none;
+}
+</style>
diff --git a/frontend/src/lib/document/TimelineDensityFilter.svelte b/frontend/src/lib/document/TimelineDensityFilter.svelte
index 5d5e4554..906aab86 100644
--- a/frontend/src/lib/document/TimelineDensityFilter.svelte
+++ b/frontend/src/lib/document/TimelineDensityFilter.svelte
@@ -10,6 +10,7 @@ import {
 	formatTickLabel
 } from '$lib/document/timeline';
 import { getLocale } from '$lib/paraglide/runtime';
+import TimelineBars from '$lib/document/TimelineBars.svelte';
 import type { components } from '$lib/generated/api';
 
 type MonthBucket = components['schemas']['MonthBucket'];
@@ -24,7 +25,6 @@ type SelectionEvent = {
 type ZoomEvent = { zoomFrom: string; zoomTo: string };
 
 const BAR_AREA_HEIGHT = 80; // px — Leonie spec h-20
-const ZERO_COUNT_BAR_HEIGHT = 2; // px — minimum visible signal for empty months
 // Above this threshold, month bars compress to sub-pixel widths in the flex
 // row; we collapse to year granularity so each bar stays clickable.
 const MONTH_GRANULARITY_LIMIT = 240;
@@ -91,11 +91,6 @@ const dragHighIndex = $derived(
 		: dragStartIndex
 );
 
-function barHeight(count: number): number {
-	if (count === 0) return ZERO_COUNT_BAR_HEIGHT;
-	return Math.max(ZERO_COUNT_BAR_HEIGHT, (count / maxCount) * BAR_AREA_HEIGHT);
-}
-
 function clearSelection() {
 	onchange({ from: '', to: '' });
 }
@@ -264,41 +259,20 @@ const omitTickYear = $derived.by(() => {
 			</div>
 
 			<div class="flex-1">
-				<div
-					bind:this={rowEl}
-					class="relative flex items-end border-b border-line"
-					style="height: {BAR_AREA_HEIGHT}px;"
-				>
-					{#each filled as bucket, i (bucket.month)}
-						<button
-							type="button"
-							data-testid="timeline-bar"
-							aria-label={m.timeline_bar_aria({
-								when: formatTickLabel(bucket.month, getLocale()),
-								count: bucket.count
-							})}
-							aria-pressed={isSelected(bucket.month)}
-							onpointerdown={(e) => handlePointerDown(e, i)}
-							onpointerenter={() => handlePointerEnter(i)}
-							onclick={() => handleClick(i)}
-							class="bar group flex h-full min-w-px flex-1 cursor-pointer items-end justify-center bg-transparent p-0 transition-colors"
-							class:selected={isSelected(bucket.month)}
-							class:in-drag-preview={isInDragPreview(i)}
-						>
-							<span
-								class="bar-fill block w-full rounded-t-[2px]"
-								style="height: {barHeight(bucket.count)}px;"
-							></span>
-						</button>
-					{/each}
-					{#if isDragging}
-						<div
-							class="drag-window"
-							data-testid="timeline-drag-window"
-							style="left: {dragWindowLeftPct}%; right: {dragWindowRightPct}%;"
-						></div>
-					{/if}
-				</div>
+				<TimelineBars
+					filled={filled}
+					maxCount={maxCount}
+					barAreaHeight={BAR_AREA_HEIGHT}
+					isSelected={isSelected}
+					isInDragPreview={isInDragPreview}
+					isDragging={isDragging}
+					dragWindowLeftPct={dragWindowLeftPct}
+					dragWindowRightPct={dragWindowRightPct}
+					bind:rowEl={rowEl}
+					onbarpointerdown={handlePointerDown}
+					onbarpointerenter={handlePointerEnter}
+					onbarclick={handleClick}
+				/>
 
 				<div
 					class="relative mt-1 h-4 font-sans text-xs leading-none text-ink-3"
@@ -350,55 +324,3 @@ const omitTickYear = $derived.by(() => {
 		</div>
 	</div>
 {/if}
-
-<style>
-:root {
-	--timeline-bar-idle: rgba(161, 220, 216, 0.35);
-	--timeline-bar-outside: var(--c-line);
-}
-
-:global(.dark) {
-	/* 3.33:1 against --c-surface (#011526) — clears WCAG 1.4.11 non-text contrast
-	   for large UI elements; previous #0d3358 measured 1.44:1. */
-	--timeline-bar-idle: #3a6e8c;
-	--timeline-bar-outside: #1a2735;
-}
-
-.bar .bar-fill {
-	background-color: var(--timeline-bar-idle);
-	transition: background-color 100ms ease;
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.bar .bar-fill {
-		transition: none;
-	}
-}
-
-.bar.selected .bar-fill,
-.bar.in-drag-preview .bar-fill {
-	background-color: var(--palette-mint, #a1dcd8);
-}
-
-.bar.in-drag-preview .bar-fill {
-	opacity: 0.7;
-}
-
-.bar:hover .bar-fill {
-	background-color: var(--palette-mint, #a1dcd8);
-	opacity: 0.85;
-}
-
-/* Graylog-style range selector window: left/right borders mark the dragged
-   range, tinted body fills the area. pointer-events:none keeps the bars below
-   reachable so pointermove still fires their pointerenter. */
-.drag-window {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	background-color: rgba(161, 220, 216, 0.22);
-	border-left: 2px solid var(--palette-mint, #a1dcd8);
-	border-right: 2px solid var(--palette-mint, #a1dcd8);
-	pointer-events: none;
-}
-</style>