feat(touchbar): calendar view

src/public/app/widgets/note_list.ts

@@ -1,7 +1,7 @@
 import NoteContextAwareWidget from "./note_context_aware_widget.js";
 import NoteListRenderer from "../services/note_list_renderer.js";
 import type FNote from "../entities/fnote.js";
-import type { EventData } from "../components/app_context.js";
+import type { CommandListener, CommandListenerData, EventData } from "../components/app_context.js";
 import type ViewMode from "./view_widgets/view_mode.js";
 
 const TPL = /*html*/`
@@ -127,4 +127,11 @@ export default class NoteListWidget extends NoteContextAwareWidget {
             this.checkRenderStatus();
         }
     }
+
+    buildTouchBarCommand(data: CommandListenerData<"buildTouchBar">) {
+        if (this.viewMode && "buildTouchBarCommand" in this.viewMode) {
+            return (this.viewMode as CommandListener<"buildTouchBar">).buildTouchBarCommand(data);
+        }
+    }
+
 }

src/public/app/widgets/view_widgets/calendar_view.ts

@@ -7,12 +7,14 @@ import { t } from "../../services/i18n.js";
 import options from "../../services/options.js";
 import dialogService from "../../services/dialog.js";
 import attributes from "../../services/attributes.js";
-import type { EventData } from "../../components/app_context.js";
+import type { CommandListenerData, EventData } from "../../components/app_context.js";
 import utils from "../../services/utils.js";
 import date_notes from "../../services/date_notes.js";
 import appContext from "../../components/app_context.js";
 import type { EventImpl } from "@fullcalendar/core/internal";
 import debounce, { type DebouncedFunction } from "debounce";
+import type { TouchBarItem } from "../touch_bar.js";
+import type { SegmentedControlSegment } from "electron";
 
 const TPL = /*html*/`
 <div class="calendar-view">
@@ -69,7 +71,7 @@ const TPL = /*html*/`
     }
     </style>
 
-    <div class="calendar-container">
+    <div class="calendar-container" tabindex="100">
     </div>
 </div>
 `;
@@ -595,4 +597,65 @@ export default class CalendarView extends ViewMode {
         return newDate;
     }
 
+    buildTouchBarCommand({ TouchBar, buildIcon }: CommandListenerData<"buildTouchBar">) {
+        if (!this.calendar) {
+            return;
+        }
+
+        const items: TouchBarItem[] = [];
+        const $toolbarItems = this.$calendarContainer.find(".fc-toolbar-chunk .fc-button-group, .fc-toolbar-chunk > button");
+
+        for (const item of $toolbarItems) {
+            // Button groups.
+            if (item.classList.contains("fc-button-group")) {
+                let mode: "single" | "buttons" = "single";
+                const segments: SegmentedControlSegment[] = [];
+                const subItems = item.childNodes as NodeListOf<HTMLElement>;
+                for (const subItem of subItems) {
+                    // Text button.
+                    if (subItem.innerText) {
+                        segments.push({ label: subItem.innerText });
+                        continue;
+                    }
+
+                    // Icon button.
+                    const iconEl = subItem.querySelector("span.fc-icon");
+                    let icon = null;
+                    if (iconEl?.classList.contains("fc-icon-chevron-left")) {
+                        icon = "NSImageNameTouchBarGoBackTemplate";
+                        mode = "buttons";
+                    } else if (iconEl?.classList.contains("fc-icon-chevron-right")) {
+                        icon = "NSImageNameTouchBarGoForwardTemplate";
+                        mode = "buttons";
+                    }
+
+                    if (icon) {
+                        segments.push({
+                            icon: buildIcon(icon)
+                        });
+                    }
+                }
+
+                items.push(new TouchBar.TouchBarSegmentedControl({
+                    mode,
+                    segments,
+                    change(selectedIndex, isSelected) {
+                        subItems[selectedIndex].click();
+                    }
+                }));
+                continue;
+            }
+
+            // Standalone item.
+            if (item.innerText) {
+                items.push(new TouchBar.TouchBarButton({
+                    label: item.innerText,
+                    click: () => item.click()
+                }));
+            }
+        }
+
+        return items;
+    }
+
 }