chore(react/touchbar): react to updates

apps/client/src/widgets/collections/calendar/index.tsx

@@ -3,7 +3,7 @@ import { ViewModeProps } from "../interface";
 import Calendar from "./calendar";
 import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import "./index.css";
-import { useNoteLabel, useNoteLabelBoolean, useResizeObserver, useSpacedUpdate, useTriliumEvent, useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
+import { useNoteLabel, useNoteLabelBoolean, useResizeObserver, useSpacedUpdate, useTouchBar, useTriliumEvent, useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
 import { LOCALE_IDS } from "@triliumnext/commons";
 import { Calendar as FullCalendar } from "@fullcalendar/core";
 import { parseStartEndDateFromEvent, parseStartEndTimeFromEvent } from "./utils";
@@ -304,3 +304,9 @@ function useEventDisplayCustomization() {
     }, []);
     return { eventDidMount };
 }
+
+function useTouchBarCustomization(api: FullCalendar) {
+    useTouchBar(() => {
+
+    }, [ api ]);
+}

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 { hasTouchBar } from "../../../services/utils";
+import TouchBar, { TouchBarLabel } from "../../react/TouchBar";
 
 const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
 const DEFAULT_ZOOM = 2;
@@ -46,6 +46,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
             saveConfig(viewConfig);
         }
     }, 5000);
+    const [ currentZoom, setCurrentZoom ] = useState<number>();
 
     console.log("Got new notes IDs ", noteIds);
     console.log("Got notes ", notes);
@@ -113,32 +114,6 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
         }
     });
 
-    // Touch bar.
-    const [ zoomLevel, setZoomLevel ] = useState<number>();
-    const onZoom = useCallback(() => {
-        if (!apiRef.current) return;
-        setZoomLevel(apiRef.current.getZoom());
-    }, []);
-    useTouchBar(({ TouchBar, parentComponent }) => {
-        const map = apiRef.current;
-        if (!note || !map) return;
-
-        return [
-            new TouchBar.TouchBarSlider({
-                label: "Zoom",
-                value: zoomLevel ?? map.getZoom(),
-                minValue: map.getMinZoom(),
-                maxValue: map.getMaxZoom(),
-                change: (newValue) => map.setZoom(newValue)
-            }),
-            new TouchBar.TouchBarButton({
-                label: "New geo note",
-                click: () => parentComponent?.triggerCommand("geoMapCreateChildNote"),
-                enabled: (state === State.Normal)
-            })
-        ];
-    }, [ zoomLevel, state ]);
-
     return (
         <div className={`geo-view ${state === State.NewNote ? "placing-note" : ""}`}>
             <Map
@@ -153,11 +128,12 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
                 }}
                 onClick={onClick}
                 onContextMenu={onContextMenu}
-                onZoom={hasTouchBar ? onZoom : undefined}
+                onZoom={() => setCurrentZoom(apiRef.current?.getZoom())}
                 scale={hasScale}
             >
                 {notes.map(note => <NoteWrapper note={note} isReadOnly={isReadOnly} />)}
             </Map>
+            <GeoMapTouchBar zoom={currentZoom} />
         </div>
     );
 }
@@ -270,3 +246,11 @@ function buildIcon(bxIconClass: string, colorClass?: string, title?: string, not
         iconAnchor: [12, 41]
     });
 }
+
+function GeoMapTouchBar({ zoom }: { zoom: number | undefined }) {
+    return (
+        <TouchBar>
+            <TouchBarLabel label={String(zoom)} />
+        </TouchBar>
+    )
+}

apps/client/src/widgets/react/TouchBar.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect } from "preact/hooks";
+import { useContext, useEffect, useState } from "preact/hooks";
 import { ParentComponent } from "./react_utils";
 import { ComponentChildren, createContext } from "preact";
 import { TouchBarItem } from "../../components/touch_bar";
@@ -16,6 +16,7 @@ interface TouchBarContextApi {
 const TouchBarContext = createContext<TouchBarContextApi | null>(null);
 
 export default function TouchBar({ children }: TouchBarProps) {
+    const [ isFocused, setIsFocused ] = useState(false);
     const parentComponent = useContext(ParentComponent);
     const remote = dynamicRequire("@electron/remote") as typeof import("@electron/remote");
     const items: TouchBarItem[] = [];
@@ -32,13 +33,27 @@ export default function TouchBar({ children }: TouchBarProps) {
         if (!el) return;
 
         function onFocusGained() {
-            remote.getCurrentWindow().setTouchBar(new remote.TouchBar({ items }));
+            setIsFocused(true);
+        }
+
+        function onFocusLost() {
+            setIsFocused(false);
         }
 
         el.addEventListener("focusin", onFocusGained);
-        return () => el.removeEventListener("focusin", onFocusGained);
+        el.addEventListener("focusout", onFocusLost);
+        return () => {
+            el.removeEventListener("focusin", onFocusGained);
+            el.removeEventListener("focusout", onFocusLost);
+        }
     }, []);
 
+    useEffect(() => {
+        if (isFocused) {
+            remote.getCurrentWindow().setTouchBar(new remote.TouchBar({ items }));
+        }
+    });
+
     return (
         <TouchBarContext.Provider value={api}>
             {children}
@@ -48,7 +63,6 @@ export default function TouchBar({ children }: TouchBarProps) {
 
 export function TouchBarLabel({ label }: { label: string }) {
     const api = useContext(TouchBarContext);
-    console.log("Build label with API ", api);
 
     if (api) {
         const item = new api.TouchBar.TouchBarLabel({