From af40db3386b5f55321850ff405e550ade82132ba Mon Sep 17 00:00:00 2001
From: Max Richter <max@max-richter.dev>
Date: Thu, 7 May 2026 17:00:21 +0200
Subject: [PATCH] feat: add ZoomIndicator to graph

---
 .../lib/graph-interface/graph/Graph.svelte    |  3 ++
 .../graph/ZoomIndicator.svelte                | 50 +++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 app/src/lib/graph-interface/graph/ZoomIndicator.svelte

diff --git a/app/src/lib/graph-interface/graph/Graph.svelte b/app/src/lib/graph-interface/graph/Graph.svelte
index 3d96928..89e2fab 100644
--- a/app/src/lib/graph-interface/graph/Graph.svelte
+++ b/app/src/lib/graph-interface/graph/Graph.svelte
@@ -16,6 +16,7 @@
   import { maxZoom, minZoom } from './constants';
   import { FileDropEventManager } from './drop.events';
   import { MouseEventManager } from './mouse.events';
+  import ZoomIndicator from './ZoomIndicator.svelte';
 
   const {
     keymap,
@@ -247,6 +248,8 @@
   <HelpView registry={graph.registry} />
 {/if}
 
+<ZoomIndicator {safePadding} />
+
 <style>
   .graph-wrapper {
     position: relative;
diff --git a/app/src/lib/graph-interface/graph/ZoomIndicator.svelte b/app/src/lib/graph-interface/graph/ZoomIndicator.svelte
new file mode 100644
index 0000000..71ee753
--- /dev/null
+++ b/app/src/lib/graph-interface/graph/ZoomIndicator.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { getGraphState } from '../graph-state.svelte';
+
+  const { safePadding }: {
+    safePadding?: { left?: number; right?: number; bottom?: number; top?: number };
+  } = $props();
+
+  const graphState = getGraphState();
+</script>
+
+<div class="zoom-indicator" style:right="calc({safePadding?.right ?? 0}px + 10px)">
+  <button
+    class="fit-btn"
+    title="Fit to view (.)"
+    onclick={() => graphState.centerNode()}
+    aria-label="Fit nodes to view"
+  >⊡</button>
+  <span>{Math.round(graphState.cameraPosition[2] * 10)}%</span>
+</div>
+
+<style>
+  .zoom-indicator {
+    position: absolute;
+    bottom: 10px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-family: var(--font-family);
+    font-size: 0.75em;
+    color: var(--color-text);
+    opacity: 0.35;
+    z-index: 10;
+    transition: opacity 0.15s, right 0.2s;
+    pointer-events: auto;
+  }
+
+  .zoom-indicator:hover {
+    opacity: 0.9;
+  }
+
+  .fit-btn {
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    font-size: 1.1em;
+    line-height: 1;
+    padding: 0;
+  }
+</style>