Function TabBarPreviewInner

frontend/preview/previews/tabbar.preview.tsx:38–160

({ platform, setPlatform }: TabBarPreviewInnerProps)

};

function TabBarPreviewInner({ platform, setPlatform }: TabBarPreviewInnerProps) {
    const env = useWaveEnv<TabBarEnv>();
    const loadBadgesEnv = useWaveEnv<LoadBadgesEnv>();
    const [showConfigErrors, setShowConfigErrors] = useState(false);
    const [hideAiButton, setHideAiButton] = useState(false);
    const [showMenuBar, setShowMenuBar] = useState(false);
    const [isFullScreen, setIsFullScreen] = useAtom(env.atoms.isFullScreen);
    const [zoomFactor, setZoomFactor] = useAtom(env.atoms.zoomFactorAtom);
    const [fullConfig, setFullConfig] = useAtom(env.atoms.fullConfigAtom);
    const [updaterStatus, setUpdaterStatus] = useAtom(env.atoms.updaterStatusAtom);
    const workspace = useAtomValue(env.wos.getWaveObjectAtom<Workspace>(`workspace:${TabBarMockWorkspaceId}`));

    useEffect(() => {
        loadBadges(loadBadgesEnv);
    }, []);

    useEffect(() => {
        setFullConfig((prev) => ({
            ...(prev ?? ({} as FullConfigType)),
            settings: {
                ...(prev?.settings ?? {}),
                "app:hideaibutton": hideAiButton,
                "window:showmenubar": showMenuBar,
            },
            configerrors: showConfigErrors ? MockConfigErrors : [],
        }));
    }, [hideAiButton, showMenuBar, setFullConfig, showConfigErrors]);

    return (
        <div className="flex w-full flex-col gap-6">
            <div className="grid gap-4 rounded-md border border-border bg-panel p-4 md:grid-cols-3 mx-6 mt-6">
                <label className="flex flex-col gap-2 text-xs text-muted">
                    <span>Platform</span>
                    <select
                        value={platform}
                        onChange={(event) => setPlatform(event.target.value as NodeJS.Platform)}
                        className="rounded border border-border bg-background px-2 py-1 text-foreground cursor-pointer"
                    >
                        <option value={PlatformMacOS}>macOS</option>
                        <option value={PlatformWindows}>Windows</option>
                        <option value={PlatformLinux}>Linux</option>
                    </select>
                </label>
                <label className="flex flex-col gap-2 text-xs text-muted">
                    <span>Updater banner</span>
                    <select
                        value={updaterStatus}
                        onChange={(event) => setUpdaterStatus(event.target.value as UpdaterStatus)}
                        className="rounded border border-border bg-background px-2 py-1 text-foreground"
                    >
                        <option value="up-to-date">Hidden</option>
                        <option value="ready">Update Available</option>
                        <option value="downloading">Downloading</option>
                        <option value="installing">Installing</option>
                        <option value="error">Error</option>
                    </select>
                </label>
                <label className="flex items-center gap-2 text-xs text-muted">