chore(react/collections): reintroduce geomap touch bar buttons

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

@@ -4,7 +4,7 @@ import { ViewModeProps } from "../interface";
 import { useNoteBlob, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useNoteTreeDrag, useSpacedUpdate, useTouchBar, useTriliumEvent } from "../../react/hooks";
 import { DEFAULT_MAP_LAYER_NAME } from "./map_layer";
 import { divIcon, GPXOptions, LatLng, LeafletMouseEvent } from "leaflet";
-import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import Marker, { GpxTrack } from "./marker";
 import froca from "../../../services/froca";
 import FNote from "../../../entities/fnote";
@@ -17,7 +17,8 @@ import toast from "../../../services/toast";
 import { t } from "../../../services/i18n";
 import server from "../../../services/server";
 import branches from "../../../services/branches";
-import TouchBar, { TouchBarLabel, TouchBarSlider } from "../../react/TouchBar";
+import TouchBar, { TouchBarButton, TouchBarLabel, TouchBarSlider } from "../../react/TouchBar";
+import { ParentComponent } from "../../react/react_utils";
 
 const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
 const DEFAULT_ZOOM = 2;
@@ -130,7 +131,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
             >
                 {notes.map(note => <NoteWrapper note={note} isReadOnly={isReadOnly} />)}
             </Map>
-            <GeoMapTouchBar map={apiRef.current} />
+            <GeoMapTouchBar state={state} map={apiRef.current} />
         </div>
     );
 }
@@ -244,8 +245,9 @@ function buildIcon(bxIconClass: string, colorClass?: string, title?: string, not
     });
 }
 
-function GeoMapTouchBar({ map }: { map: L.Map | null | undefined }) {
+function GeoMapTouchBar({ state, map }: { state: State, map: L.Map | null | undefined }) {
     const [ currentZoom, setCurrentZoom ] = useState<number>();
+    const parentComponent = useContext(ParentComponent);
 
     useEffect(() => {
         if (!map) return;
@@ -270,6 +272,11 @@ function GeoMapTouchBar({ map }: { map: L.Map | null | undefined }) {
                     map.setZoom(newValue);
                 }}
             />
+            <TouchBarButton
+                label="New geo note"
+                click={() => parentComponent?.triggerCommand("geoMapCreateChildNote")}
+                enabled={state === State.Normal}
+            />
         </TouchBar>
     )
 }

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

@@ -8,6 +8,24 @@ interface TouchBarProps {
     children: ComponentChildren;
 }
 
+interface LabelProps {
+    label: string;
+}
+
+interface SliderProps {
+    label: string;
+    value: number;
+    minValue: number;
+    maxValue: number;
+    onChange: (newValue: number) => void;
+}
+
+interface ButtonProps {
+    label: string;
+    click: () => void;
+    enabled?: boolean;
+}
+
 interface TouchBarContextApi {
     addItem(item: TouchBarItem): void;
     TouchBar: typeof Electron.TouchBar;
@@ -61,7 +79,7 @@ export default function TouchBar({ children }: TouchBarProps) {
     );
 }
 
-export function TouchBarLabel({ label }: { label: string }) {
+export function TouchBarLabel({ label }: LabelProps) {
     const api = useContext(TouchBarContext);
 
     if (api) {
@@ -74,14 +92,6 @@ 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);
 
@@ -96,3 +106,16 @@ export function TouchBarSlider({ label, value, minValue, maxValue, onChange }: S
 
     return <></>;
 }
+
+export function TouchBarButton({ label, click, enabled }: ButtonProps) {
+    const api = useContext(TouchBarContext);
+
+    if (api) {
+        const item = new api.TouchBar.TouchBarButton({
+            label, click, enabled
+        });
+        api.addItem(item);
+    }
+
+    return <></>;
+}