refactor(touch_bar): command-driven approach

src/public/app/components/app_context.ts

@@ -22,10 +22,9 @@ import type LoadResults from "../services/load_results.js";
 import type { Attribute } from "../services/attribute_parser.js";
 import type NoteTreeWidget from "../widgets/note_tree.js";
 import type { default as NoteContext, GetTextEditorCallback } from "./note_context.js";
-import type { ContextMenuEvent } from "../menus/context_menu.js";
 import type TypeWidget from "../widgets/type_widgets/type_widget.js";
 import type EditableTextTypeWidget from "../widgets/type_widgets/editable_text.js";
-import TouchBarWidget from "../widgets/touch_bar.js";
+import type { NativeImage } from "electron";
 
 interface Layout {
     getRootWidget: (appContext: AppContext) => RootWidget;
@@ -256,6 +255,11 @@ export type CommandMappings = {
 
     refreshResults: {};
     refreshSearchDefinition: {};
+
+    buildTouchBar: CommandData & {
+        TouchBar: typeof import("electron").TouchBar;
+        buildIcon(name: string): NativeImage;
+    };
 };
 
 type EventMappings = {
@@ -448,10 +452,6 @@ class AppContext extends Component {
 
         this.components = [this.tabManager, new RootCommandExecutor(), new Entrypoints(), new MainTreeExecutors(), new ShortcutComponent()];
 
-        if (utils.isElectron() && utils.isMac()) {
-            this.components.push(new TouchBarWidget());
-        }
-
         if (utils.isMobile()) {
             this.components.push(new MobileScreenSwitcherExecutor());
         }

src/public/app/layouts/desktop_layout.js

@@ -88,6 +88,7 @@ import utils from "../services/utils.js";
 import GeoMapButtons from "../widgets/floating_buttons/geo_map_button.js";
 import ContextualHelpButton from "../widgets/floating_buttons/help_button.js";
 import CloseZenButton from "../widgets/close_zen_button.js";
+import TouchBarWidget from "../widgets/touch_bar.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -153,6 +154,7 @@ export default class DesktopLayout {
                                             .filling()
                                             .collapsible()
                                             .id("center-pane")
+                                            .child(new TouchBarWidget())
                                             .child(
                                                 new SplitNoteContainer(() =>
                                                     new NoteWrapperWidget()

src/public/app/widgets/touch_bar.ts

@@ -1,6 +1,8 @@
 import utils from "../services/utils.js";
 import Component from "../components/component.js";
 import appContext from "../components/app_context.js";
+import NoteContextAwareWidget from "./note_context_aware_widget.js";
+import type FNote from "../entities/fnote.js";
 
 async function triggerTextEditorCommand(command: string, args?: object) {
     const editor = await appContext.tabManager.getActiveContext().getTextEditor();
@@ -12,7 +14,7 @@ async function triggerTextEditorCommand(command: string, args?: object) {
     (editor as any).execute(command, args);
 }
 
-export default class TouchBarWidget extends Component {
+export default class TouchBarWidget extends NoteContextAwareWidget {
 
     nativeImage: typeof import("electron").nativeImage;
     remote: typeof import("@electron/remote");
@@ -21,15 +23,30 @@ export default class TouchBarWidget extends Component {
         super();
         this.nativeImage = utils.dynamicRequire("electron").nativeImage;
         this.remote = utils.dynamicRequire("@electron/remote") as typeof import("@electron/remote");
-        this.#setTouchBar();
+        this.$widget = $("<div>");
+
+        $(window).on("focusin", async (e) => {
+            const target = e.target;
+            const parentComponentEl = $(target).closest(".component");
+            // TODO: Remove typecast once it's no longer necessary.
+            const parentComponent = appContext.getComponentByEl(parentComponentEl[0]) as Component;
+            const { TouchBar } = this.remote;
+            if (!parentComponent) {
+                return;
+            }
+
+            const result = parentComponent.triggerCommand("buildTouchBar", {
+                TouchBar,
+                buildIcon: this.buildIcon.bind(this)
+            });
+
+            if (result) {
+                this.remote.getCurrentWindow().setTouchBar(result);
+            }
+        });
     }
 
-    #setTouchBar() {
-        const touchBarData = this.#buildTouchBar();
-        this.remote.getCurrentWindow().setTouchBar(touchBarData);
-    }
-
-    #buildIcon(name: string) {
+    buildIcon(name: string) {
         const sourceImage = this.nativeImage.createFromNamedImage(name, [-1, 0, 1]);
         const { width, height } = sourceImage.getSize();
         const newImage = this.nativeImage.createEmpty();
@@ -48,58 +65,21 @@ export default class TouchBarWidget extends Component {
         return newImage;
     }
 
-    #buildTouchBar() {
+    #buildTextTouchBar() {
         const { TouchBar } = this.remote;
         const { TouchBarButton, TouchBarSpacer, TouchBarGroup, TouchBarSegmentedControl, TouchBarOtherItemsProxy } = this.remote.TouchBar;
 
         const items = [
             new TouchBarButton({
-                icon: this.#buildIcon("NSTouchBarComposeTemplate"),
+                icon: this.buildIcon("NSTouchBarComposeTemplate"),
                 click: () => this.triggerCommand("createNoteIntoInbox")
             }),
             new TouchBarSpacer({ size: "large" }),
-            new TouchBarSegmentedControl({
-                segments: [
-                    { label: "P" },
-                    { label: "H2" },
-                    { label: "H3" }
-                ],
-                change(selectedIndex, isSelected) {
-                    switch (selectedIndex) {
-                        case 0:
-                            triggerTextEditorCommand("paragraph")
-                            break;
-                        case 1:
-                            triggerTextEditorCommand("heading", { value: "heading2" });
-                            break;
-                        case 2:
-                            triggerTextEditorCommand("heading", { value: "heading3" });
-                            break;
-                    }
-                },
-            }),
-            new TouchBarGroup({
-                items: new TouchBar({
-                    items: [
-                        new TouchBarButton({
-                            icon: this.#buildIcon("NSTouchBarTextBoldTemplate"),
-                            click: () => triggerTextEditorCommand("bold")
-                        }),
-                        new TouchBarButton({
-                            icon: this.#buildIcon("NSTouchBarTextItalicTemplate"),
-                            click: () => triggerTextEditorCommand("italic")
-                        }),
-                        new TouchBarButton({
-                            icon: this.#buildIcon("NSTouchBarTextUnderlineTemplate"),
-                            click: () => triggerTextEditorCommand("underline")
-                        })
-                    ]
-                })
-            }),
+            // data should go here
             new TouchBarOtherItemsProxy(),
             new TouchBarSpacer({ size: "flexible" }),
             new TouchBarButton({
-                icon: this.#buildIcon("NSTouchBarAddDetailTemplate"),
+                icon: this.buildIcon("NSTouchBarAddDetailTemplate"),
                 click: () => this.triggerCommand("jumpToNote")
             })
         ];

src/public/app/widgets/type_widgets/editable_text.js

@@ -507,4 +507,49 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
         await this.reinitialize(data);
     }
 
+    buildTouchBarCommand(data) {
+        const { TouchBar, buildIcon } = data;
+        const { TouchBarSegmentedControl, TouchBarGroup, TouchBarButton } = TouchBar;
+        return [
+            new TouchBarSegmentedControl({
+                segments: [
+                    { label: "P" },
+                    { label: "H2" },
+                    { label: "H3" }
+                ],
+                change(selectedIndex, isSelected) {
+                    switch (selectedIndex) {
+                        case 0:
+                            triggerTextEditorCommand("paragraph")
+                            break;
+                        case 1:
+                            triggerTextEditorCommand("heading", { value: "heading2" });
+                            break;
+                        case 2:
+                            triggerTextEditorCommand("heading", { value: "heading3" });
+                            break;
+                    }
+                },
+            }),
+            new TouchBarGroup({
+                items: new TouchBar({
+                    items: [
+                        new TouchBarButton({
+                            icon: buildIcon("NSTouchBarTextBoldTemplate"),
+                            click: () => triggerTextEditorCommand("bold")
+                        }),
+                        new TouchBarButton({
+                            icon: buildIcon("NSTouchBarTextItalicTemplate"),
+                            click: () => triggerTextEditorCommand("italic")
+                        }),
+                        new TouchBarButton({
+                            icon: buildIcon("NSTouchBarTextUnderlineTemplate"),
+                            click: () => triggerTextEditorCommand("underline")
+                        })
+                    ]
+                })
+            })
+        ];
+    }
+
 }