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

import { useContext, useEffect, useState } 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 LabelProps {
    label: string;
}

interface SliderProps {
    label: string;
    value: number;
    minValue: number;
    maxValue: number;
    onChange: (newValue: number) => void;
}

interface ButtonProps {
    label: string;
    click: () => void;
    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;
}

const TouchBarContext = createContext<TouchBarContextApi | null>(null);

export default function TouchBar({ children }: TouchBarProps) {
    const [ isFocused, setIsFocused ] = useState(false);
    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() {
            setIsFocused(true);
        }

        function onFocusLost() {
            setIsFocused(false);
        }

        el.addEventListener("focusin", onFocusGained);
        el.addEventListener("focusout", onFocusLost);
        return () => {
            el.removeEventListener("focusin", onFocusGained);
            el.removeEventListener("focusout", onFocusLost);
        }
    }, []);

    useEffect(() => {
        if (isFocused) {
            remote.getCurrentWindow().setTouchBar(new remote.TouchBar({ items }));
        }
    });

    console.log("Touch bar state", isFocused, items);

    return (
        <TouchBarContext.Provider value={api}>
            {children}
        </TouchBarContext.Provider>
    );
}

export function TouchBarLabel({ label }: LabelProps) {
    const api = useContext(TouchBarContext);

    if (api) {
        const item = new api.TouchBar.TouchBarLabel({
            label
        });
        api.addItem(item);
    }

    return <></>;
}

export function TouchBarSlider({ label, value, minValue, maxValue, onChange }: SliderProps) {
    const api = useContext(TouchBarContext);

    if (api) {
        const item = new api.TouchBar.TouchBarSlider({
            label,
            value, minValue, maxValue,
            change: onChange
        });
        api.addItem(item);
    }

    return <></>;
}

export function TouchBarButton({ label, click, enabled }: ButtonProps) {
    const api = useContext(TouchBarContext);

    if (api) {
        const item = new api.TouchBar.TouchBarButton({
            label, click, enabled
        });
        api.addItem(item);
    }

    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 <></>;
}