chore(react/collections): reintroduce calendar title & type touch bar

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

@@ -4,10 +4,9 @@ import { RefObject } from "preact";
 
 interface CalendarProps extends CalendarOptions {
     calendarRef?: RefObject<FullCalendar>;
-    tabIndex?: number;
 }
 
-export default function Calendar({ tabIndex, calendarRef, ...options }: CalendarProps) {
+export default function Calendar({ calendarRef, ...options }: CalendarProps) {
     const containerRef = useRef<HTMLDivElement>(null);
 
     useLayoutEffect(() => {
@@ -24,6 +23,6 @@ export default function Calendar({ tabIndex, calendarRef, ...options }: Calendar
     }, [ containerRef, options ]);
 
     return (
-        <div ref={containerRef} className="calendar-container" tabIndex={tabIndex} />
+        <div ref={containerRef} className="calendar-container" />
     );
 }

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

@@ -19,6 +19,7 @@ import FNote from "../../../entities/fnote";
 import Button, { ButtonGroup } from "../../react/Button";
 import ActionButton from "../../react/ActionButton";
 import { RefObject } from "preact";
+import TouchBar, { TouchBarLabel, TouchBarSegmentedControl } from "../../react/TouchBar";
 
 interface CalendarViewData {
 
@@ -114,13 +115,12 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi
     });
 
     return (plugins &&
-        <div className="calendar-view" ref={containerRef}>
+        <div className="calendar-view" ref={containerRef} tabIndex={100}>
             <CalendarHeader calendarRef={calendarRef} />
             <Calendar
                 events={eventBuilder}
                 calendarRef={calendarRef}
                 plugins={plugins}
-                tabIndex={100}
                 initialView={initialView.current && SUPPORTED_CALENDAR_VIEW_TYPE.includes(initialView.current) ? initialView.current : "dayGridMonth"}
                 headerToolbar={false}
                 firstDay={firstDayOfWeek ?? 0}
@@ -139,6 +139,7 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi
                     }
                 }}
             />
+            <CalendarTouchBar calendarRef={calendarRef} />
         </div>
     );
 }
@@ -305,8 +306,36 @@ function useEventDisplayCustomization() {
     return { eventDidMount };
 }
 
-function useTouchBarCustomization(api: FullCalendar) {
+function CalendarTouchBar({ calendarRef }: { calendarRef: RefObject<FullCalendar> }) {
-    useTouchBar(() => {
+    // Wait for the calendar ref to become available.
+    const [ ready, setReady ] = useState(false);
+    useEffect(() => setReady(true), []);
+    const [ , setTitle ] = useState<string>();
+    const viewType = calendarRef.current?.view.type;
 
-    }, [ api ]);
+    useEffect(() => {
+        const api = calendarRef.current;
+
+        function onDatesSet() {
+            setTitle(calendarRef.current?.view.title);
+        }
+
+        onDatesSet();
+        api?.on("datesSet", onDatesSet);
+        return () => api?.off("datesSet", onDatesSet)
+    }, [ calendarRef ]);
+
+    return ready && (
+        <TouchBar>
+            <TouchBarLabel label={calendarRef.current?.view.title ?? ""} />
+            <TouchBarSegmentedControl
+                mode="single"
+                segments={CALENDAR_VIEWS.map(({ name }) => ({
+                    label: name,
+                }))}
+                selectedIndex={CALENDAR_VIEWS.findIndex(v => v.type === viewType) ?? 0}
+                onChange={(selectedIndex) => calendarRef.current?.changeView(CALENDAR_VIEWS[selectedIndex].type)}
+            />
+        </TouchBar>
+    );
 }

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

@@ -26,6 +26,15 @@ interface ButtonProps {
     enabled?: boolean;
 }
 
+interface SegmentedControlProps {
+    mode: "single" | "buttons";
+    segments: {
+        label: string;
+    }[];
+    selectedIndex?: number;
+    onChange?: (selectedIndex: number, isSelected: boolean) => void;
+}
+
 interface TouchBarContextApi {
     addItem(item: TouchBarItem): void;
     TouchBar: typeof Electron.TouchBar;
@@ -72,6 +81,8 @@ export default function TouchBar({ children }: TouchBarProps) {
         }
     });
 
+    console.log("Touch bar state", isFocused, items);
+
     return (
         <TouchBarContext.Provider value={api}>
             {children}
@@ -119,3 +130,17 @@ export function TouchBarButton({ label, click, enabled }: ButtonProps) {
 
     return <></>;
 }
+
+export function TouchBarSegmentedControl({ mode, segments, selectedIndex, onChange }: SegmentedControlProps) {
+    const api = useContext(TouchBarContext);
+
+    if (api) {
+        const item = new api.TouchBar.TouchBarSegmentedControl({
+            mode, segments, selectedIndex,
+            change: onChange
+        });
+        api.addItem(item);
+    }
+
+    return <></>;
+}

apps/client/src/widgets/view_widgets/calendar_view.ts

@@ -61,11 +61,6 @@ export default class CalendarView extends ViewMode<{}> {
                     }
                     index++;
 
-                    // Text button.
-                    if (subItem.innerText) {
-                        segments.push({ label: subItem.innerText });
-                        continue;
-                    }
 
                     // Icon button.
                     const iconEl = subItem.querySelector("span.fc-icon");