marcel/familienarchiv
1
0
Fork 0
Code Issues 125 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(documents): extract TimelineControls (#385)
Some checks failed
CI / Unit & Component Tests (pull_request) Failing after 4m10s
Details
CI / OCR Service Tests (pull_request) Successful in 36s
Details
CI / Backend Unit Tests (pull_request) Failing after 3m16s
Details
CI / Unit & Component Tests (push) Failing after 3m54s
Details
CI / OCR Service Tests (push) Successful in 39s
Details
CI / Backend Unit Tests (push) Failing after 3m34s
Details

Browse Source 
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>
This commit is contained in:
Marcel
2026-05-08 10:07:45 +02:00
parent 219d9a816e
commit e5739d7f8e
2 changed files with 48 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/lib/document/TimelineControls.svelte Normal file
View File

@@ -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>

32
frontend/src/lib/document/TimelineDensityFilter.svelte
View File

@@ -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}