feat(stammbaum): bottom-right zoom + fit-to-screen control cluster (#692)

Move zoom controls out of the page header into a docked bottom-right cluster
inside the canvas (one-handed phone reach, Leonie) and add a fit-to-screen
button (data-testid=fit-to-screen). Add the 5 new i18n keys to de/en/es.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-29 16:52:32 +02:00
parent ffc14dd2ff
commit 7a6c2e877f
5 changed files with 59 additions and 21 deletions

View File

@@ -0,0 +1,38 @@
<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
interface Props {
onZoomIn: () => void;
onZoomOut: () => void;
onFit: () => void;
}
let { onZoomIn, onZoomOut, onFit }: Props = $props();
// Docked bottom-right inside the canvas — the primary one-handed reach zone on a
// phone (Leonie). The container ignores pointer events so canvas gestures pass
// through the gaps; only the buttons capture taps.
const buttonClass =
'pointer-events-auto inline-flex h-11 w-11 items-center justify-center rounded-sm border border-line bg-surface text-lg text-ink-2 shadow-sm transition hover:bg-muted focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none';
</script>
<div
class="pointer-events-none absolute right-4 z-30 flex flex-col gap-1"
style="bottom: max(calc(env(safe-area-inset-bottom, 0px) + 1rem), 1rem);"
>
<button type="button" onclick={onZoomIn} aria-label={m.stammbaum_zoom_in()} class={buttonClass}>
+
</button>
<button type="button" onclick={onZoomOut} aria-label={m.stammbaum_zoom_out()} class={buttonClass}>
</button>
<button
type="button"
data-testid="fit-to-screen"
onclick={onFit}
aria-label={m.stammbaum_fit_to_screen()}
class={buttonClass}
>
</button>
</div>