From 3fd5a847019e1ab3ed34c7979c5654deb4628564 Mon Sep 17 00:00:00 2001
From: Wild Karl-Heinz <kh.wild@wicom.li>
Date: Wed, 2 Sep 2026 22:46:25 +0200
Subject: [PATCH] Move zoom control into the status bar, right end
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Was a floating pill pinned to the bottom-right corner of the canvas
(SheetCanvas.vue's .zoom-ctl); now lives as the last element of the
status bar (StatusBar.vue), after a thin divider, in the same combined
bottom row as the sheet tabs. Same three actions (−, current % as a
button that resets to 100%, +), same store.activeZoom/setZoom.
Ctrl/Cmd+scroll-to-zoom on the canvas is unaffected.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/SheetCanvas.vue | 35 -----------------------------
 src/components/StatusBar.vue   | 40 ++++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/src/components/SheetCanvas.vue b/src/components/SheetCanvas.vue
index 4c90d41..92292df 100644
--- a/src/components/SheetCanvas.vue
+++ b/src/components/SheetCanvas.vue
@@ -109,13 +109,6 @@ function selectObj(id: string) {
       </div>
     </div>
 
-    <div class="zoom-ctl">
-      <button @click="setZoom(zoom - 0.1)">−</button>
-      <span>{{ Math.round(zoom * 100) }}%</span>
-      <button @click="setZoom(zoom + 0.1)">＋</button>
-      <button class="fit" @click="setZoom(1)">100%</button>
-    </div>
-
     <div v-if="dropActive" class="drop">Datei ablegen (.json .csv .xlsx)</div>
   </div>
 </template>
@@ -170,34 +163,6 @@ function selectObj(id: string) {
   height: 62px;
   opacity: 0.9;
 }
-.zoom-ctl {
-  position: absolute;
-  right: 16px;
-  bottom: 16px;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  box-shadow: var(--shadow);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-  z-index: 15;
-}
-.zoom-ctl button {
-  border: 1px solid var(--border);
-  background: var(--surface);
-  border-radius: 6px;
-  width: 22px;
-  height: 22px;
-  cursor: pointer;
-}
-.zoom-ctl button.fit {
-  width: auto;
-  padding: 0 8px;
-}
 .drop {
   position: absolute;
   right: 24px;
diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
index 44d2941..0b5acaf 100644
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@@ -7,6 +7,9 @@ const store = useDocument();
 const agg = computed(() => store.selectionAggregate.value);
 const fmt = (n: number) =>
   formatValue(Math.round(n * 1e6) / 1e6, store.activeLocale.value);
+
+const zoom = computed(() => store.activeZoom.value);
+const setZoom = store.setZoom;
 </script>
 
 <template>
@@ -16,6 +19,12 @@ const fmt = (n: number) =>
     <span v-if="agg.count > 0" class="metric">Mittel <b>{{ fmt(agg.avg) }}</b></span>
     <span class="metric">Anzahl <b>{{ agg.count }}</b></span>
     <span class="metric dim">Zellen {{ agg.cells }}</span>
+    <span class="divider" />
+    <div class="zoom-ctl" title="Zoom (dieses Blatt)">
+      <button @click="setZoom(zoom - 0.1)">−</button>
+      <button class="fit" @click="setZoom(1)">{{ Math.round(zoom * 100) }}%</button>
+      <button @click="setZoom(zoom + 0.1)">＋</button>
+    </div>
   </div>
 </template>
 
@@ -47,4 +56,35 @@ const fmt = (n: number) =>
   font-weight: 600;
   color: var(--text);
 }
+.divider {
+  width: 1px;
+  align-self: stretch;
+  background: var(--border);
+  flex: none;
+}
+.zoom-ctl {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+}
+.zoom-ctl button {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  border-radius: 6px;
+  width: 20px;
+  height: 20px;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--text-dim);
+}
+.zoom-ctl button:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+.zoom-ctl button.fit {
+  width: auto;
+  padding: 0 7px;
+  font-variant-numeric: tabular-nums;
+}
 </style>