From 62cdb1a797a4b2d4ce38860ad7a57038a41fb989 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 6 Sep 2025 14:00:23 +0300
Subject: [PATCH] chore(react): basic React-like touch bar support

---
 apps/client/src/widgets/react/TouchBar.tsx | 61 ++++++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 apps/client/src/widgets/react/TouchBar.tsx

diff --git a/apps/client/src/widgets/react/TouchBar.tsx b/apps/client/src/widgets/react/TouchBar.tsx
new file mode 100644
index 000000000..806c2da13
--- /dev/null
+++ b/apps/client/src/widgets/react/TouchBar.tsx
@@ -0,0 +1,61 @@
+import { useContext, useEffect } from "preact/hooks";
+import { ParentComponent } from "./react_utils";
+import { ComponentChildren, createContext } from "preact";
+import { TouchBarItem } from "../../components/touch_bar";
+import { dynamicRequire } from "../../services/utils";
+
+interface TouchBarProps {
+    children: ComponentChildren;
+}
+
+interface TouchBarContextApi {
+    addItem(item: TouchBarItem): void;
+    TouchBar: typeof Electron.TouchBar;
+}
+
+const TouchBarContext = createContext<TouchBarContextApi | null>(null);
+
+export default function TouchBar({ children }: TouchBarProps) {
+    const parentComponent = useContext(ParentComponent);
+    const remote = dynamicRequire("@electron/remote") as typeof import("@electron/remote");
+    const items: TouchBarItem[] = [];
+
+    const api: TouchBarContextApi = {
+        TouchBar: remote.TouchBar,
+        addItem: (item) => {
+            items.push(item);
+        }
+    };
+
+    useEffect(() => {
+        const el = parentComponent?.$widget[0];
+        if (!el) return;
+
+        function onFocusGained() {
+            remote.getCurrentWindow().setTouchBar(new remote.TouchBar({ items }));
+        }
+
+        el.addEventListener("focusin", onFocusGained);
+        return () => el.removeEventListener("focusin", onFocusGained);
+    }, []);
+
+    return (
+        <TouchBarContext.Provider value={api}>
+            {children}
+        </TouchBarContext.Provider>
+    );
+}
+
+export function TouchBarLabel({ label }: { label: string }) {
+    const api = useContext(TouchBarContext);
+    console.log("Build label with API ", api);
+
+    if (api) {
+        const item = new api.TouchBar.TouchBarLabel({
+            label
+        });
+        api.addItem(item);
+    }
+
+    return <></>;
+}