From 8dcef5ea9f5c9cce5a360b8fa881fd6fa55309dd Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 6 Sep 2025 15:40:47 +0300
Subject: [PATCH] chore(react/collections): add spacer for calendar touch bar

---
 .../src/widgets/collections/calendar/index.tsx  |  8 ++++++--
 apps/client/src/widgets/react/TouchBar.tsx      | 17 +++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/collections/calendar/index.tsx b/apps/client/src/widgets/collections/calendar/index.tsx
index acae174e5..8126c2808 100644
--- a/apps/client/src/widgets/collections/calendar/index.tsx
+++ b/apps/client/src/widgets/collections/calendar/index.tsx
@@ -19,7 +19,7 @@ import FNote from "../../../entities/fnote";
 import Button, { ButtonGroup } from "../../react/Button";
 import ActionButton from "../../react/ActionButton";
 import { RefObject } from "preact";
-import TouchBar, { TouchBarButton, TouchBarLabel, TouchBarSegmentedControl } from "../../react/TouchBar";
+import TouchBar, { TouchBarButton, TouchBarLabel, TouchBarSegmentedControl, TouchBarSpacer } from "../../react/TouchBar";
 
 interface CalendarViewData {
 
@@ -327,7 +327,6 @@ function CalendarTouchBar({ calendarRef }: { calendarRef: RefObject<FullCalendar
 
     return ready && (
         <TouchBar>
-            <TouchBarLabel label={calendarRef.current?.view.title ?? ""} />
             <TouchBarSegmentedControl
                 mode="single"
                 segments={CALENDAR_VIEWS.map(({ name }) => ({
@@ -336,6 +335,11 @@ function CalendarTouchBar({ calendarRef }: { calendarRef: RefObject<FullCalendar
                 selectedIndex={CALENDAR_VIEWS.findIndex(v => v.type === viewType) ?? 0}
                 onChange={(selectedIndex) => calendarRef.current?.changeView(CALENDAR_VIEWS[selectedIndex].type)}
             />
+
+            <TouchBarSpacer size="flexible" />
+            <TouchBarLabel label={calendarRef.current?.view.title ?? ""} />
+            <TouchBarSpacer size="flexible" />
+
             <TouchBarButton
                 label={t("calendar.today")}
                 click={() => calendarRef.current?.today()}
diff --git a/apps/client/src/widgets/react/TouchBar.tsx b/apps/client/src/widgets/react/TouchBar.tsx
index c16e8a74f..d948e32a8 100644
--- a/apps/client/src/widgets/react/TouchBar.tsx
+++ b/apps/client/src/widgets/react/TouchBar.tsx
@@ -27,6 +27,10 @@ interface ButtonProps {
     enabled?: boolean;
 }
 
+interface SpacerProps {
+    size: "flexible" | "large" | "small";
+}
+
 interface SegmentedControlProps {
     mode: "single" | "buttons";
     segments: {
@@ -169,6 +173,19 @@ export function TouchBarSegmentedControl({ mode, segments, selectedIndex, onChan
     return <></>;
 }
 
+export function TouchBarSpacer({ size }: SpacerProps) {
+    const api = useContext(TouchBarContext);
+
+    if (api) {
+        const item = new api.TouchBar.TouchBarSpacer({
+            size
+        });
+        api.addItem(item);
+    }
+
+    return <></>;
+}
+
 function buildIcon(nativeImage: typeof Electron.nativeImage, name: string) {
     const sourceImage = nativeImage.createFromNamedImage(name, [-1, 0, 1]);
     const { width, height } = sourceImage.getSize();