From 3e7f0ad0a8d5bbff118fb196ad60272556f1f3a9 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 6 Sep 2025 14:18:32 +0300
Subject: [PATCH] chore(react/touchbar): add slider

---
 .../src/widgets/collections/geomap/index.tsx  | 18 +++++++++------
 apps/client/src/widgets/react/TouchBar.tsx    | 23 +++++++++++++++++++
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/widgets/collections/geomap/index.tsx b/apps/client/src/widgets/collections/geomap/index.tsx
index df2b94075..7cce43ecd 100644
--- a/apps/client/src/widgets/collections/geomap/index.tsx
+++ b/apps/client/src/widgets/collections/geomap/index.tsx
@@ -17,7 +17,7 @@ import toast from "../../../services/toast";
 import { t } from "../../../services/i18n";
 import server from "../../../services/server";
 import branches from "../../../services/branches";
-import TouchBar, { TouchBarLabel } from "../../react/TouchBar";
+import TouchBar, { TouchBarLabel, TouchBarSlider } from "../../react/TouchBar";
 
 const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
 const DEFAULT_ZOOM = 2;
@@ -48,8 +48,6 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
     }, 5000);
     const [ currentZoom, setCurrentZoom ] = useState<number>();
 
-    console.log("Got new notes IDs ", noteIds);
-    console.log("Got notes ", notes);
     useEffect(() => { froca.getNotes(noteIds).then(setNotes) }, [ noteIds ]);
 
     // Note creation.
@@ -133,7 +131,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
             >
                 {notes.map(note => <NoteWrapper note={note} isReadOnly={isReadOnly} />)}
             </Map>
-            <GeoMapTouchBar zoom={currentZoom} />
+            <GeoMapTouchBar zoom={currentZoom} map={apiRef.current} />
         </div>
     );
 }
@@ -247,10 +245,16 @@ function buildIcon(bxIconClass: string, colorClass?: string, title?: string, not
     });
 }
 
-function GeoMapTouchBar({ zoom }: { zoom: number | undefined }) {
-    return (
+function GeoMapTouchBar({ zoom, map }: { zoom: number | undefined, map: L.Map | null | undefined }) {
+    return map && (
         <TouchBar>
-            <TouchBarLabel label={String(zoom)} />
+            <TouchBarSlider
+                label="Zoom"
+                value={zoom ?? map.getZoom()}
+                minValue={map.getMinZoom()}
+                maxValue={map.getMaxZoom()}
+                onChange={(newValue) => map.setZoom(newValue)}
+            />
         </TouchBar>
     )
 }
diff --git a/apps/client/src/widgets/react/TouchBar.tsx b/apps/client/src/widgets/react/TouchBar.tsx
index 2ed5ee1c9..d0a7b9d65 100644
--- a/apps/client/src/widgets/react/TouchBar.tsx
+++ b/apps/client/src/widgets/react/TouchBar.tsx
@@ -73,3 +73,26 @@ export function TouchBarLabel({ label }: { label: string }) {
 
     return <></>;
 }
+
+interface SliderProps {
+    label: string;
+    value: number;
+    minValue: number;
+    maxValue: number;
+    onChange: (newValue: number) => void;
+}
+
+export function TouchBarSlider({ label, value, minValue, maxValue, onChange }: SliderProps) {
+    const api = useContext(TouchBarContext);
+
+    if (api) {
+        const item = new api.TouchBar.TouchBarSlider({
+            label,
+            value, minValue, maxValue,
+            change: onChange
+        });
+        api.addItem(item);
+    }
+
+    return <></>;
+}