import { useAtomValue } from "@effect/atom-react";import * as Schema from "effect/Schema";import { useEffect, useState, type CSSProperties, type ReactNode } from "react";import { useLocation, useNavigate } from "@tanstack/react-router"; import { isElectron } from "../env";import { getLocalStorageItem } from "../hooks/useLocalStorage";import { resolveShortcutCommand, shortcutLabelForCommand } from "../keybindings";import { requestCloseActiveRightPanelSurface } from "../lib/rightPanelCloseRequest";import { cn, isMacPlatform } from "../lib/utils";import { primaryServerKeybindingsAtom } from "../state/server";import ThreadSidebar from "./Sidebar";import { useSidebarStageBackdropVariant } from "./SidebarStageBackdrop";import {  resolveInitialThreadSidebarWidth,  resolveThreadSidebarMaximumWidth,  THREAD_MAIN_CONTENT_MIN_WIDTH,  THREAD_SIDEBAR_MIN_WIDTH,  THREAD_SIDEBAR_WIDTH_STORAGE_KEY,} from "./threadSidebarWidth";import {  Sidebar,  SidebarProvider,  SidebarRail,  SidebarTrigger,  useSidebar,  useSidebarVisibility,} from "./ui/sidebar";import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip"; const MACOS_TRAFFIC_LIGHTS_LEFT_INSET = "90px"; function readInitialThreadSidebarWidth(): number {  try {    return resolveInitialThreadSidebarWidth(      getLocalStorageItem(THREAD_SIDEBAR_WIDTH_STORAGE_KEY, Schema.Finite),      window.innerWidth,    );  } catch (error) {    console.error("Could not read persisted thread sidebar width.", error);    return resolveInitialThreadSidebarWidth(null, window.innerWidth);  }} function SidebarControl() {  const keybindings = useAtomValue(primaryServerKeybindingsAtom);  const { toggleSidebar } = useSidebar();  const isSidebarVisible = useSidebarVisibility();  const stageBackdropVariant = useSidebarStageBackdropVariant();  const shortcutLabel = shortcutLabelForCommand(keybindings, "sidebar.toggle");   useEffect(() => {    const onKeyDown = (event: KeyboardEvent) => {      if (event.defaultPrevented) return;      if (        event.target instanceof HTMLElement &&        event.target.closest("[data-keybinding-capture]")      ) {        return;      }      if (resolveShortcutCommand(event, keybindings) !== "sidebar.toggle") return;       event.preventDefault();      event.stopPropagation();      toggleSidebar();    };     // Capture before focused editors consume commands such as Mod+B for rich-text formatting.    window.addEventListener("keydown", onKeyDown, true);    return () => window.removeEventListener("keydown", onKeyDown, true);  }, [keybindings, toggleSidebar]);   return (    <div      className="pointer-events-none fixed left-[var(--workspace-controls-left)] top-[var(--workspace-controls-top)] z-50 flex h-[var(--workspace-topbar-height)] items-center"      data-sidebar-control=""    >      <Tooltip>        <TooltipTrigger          render={            <SidebarTrigger              className={cn(                "pointer-events-auto",                isSidebarVisible &&                  stageBackdropVariant &&                  "hover:bg-white/15 [&_svg]:text-white/85! [&_svg]:hover:text-white!",              )}              aria-label="Toggle main sidebar"            />          }        />        <TooltipPopup side="bottom">          Toggle main sidebar{shortcutLabel ? ` (${shortcutLabel})` : ""}        </TooltipPopup>      </Tooltip>    </div>  );} export function AppSidebarLayout({ children }: { children: ReactNode }) {  const navigate = useNavigate();  const pathname = useLocation({ select: (location) => location.pathname });  const isMacosDesktop = isElectron && isMacPlatform(navigator.platform);  const [sidebarWidth, setSidebarWidth] = useState(readInitialThreadSidebarWidth);  const sidebarMaximumWidth = resolveThreadSidebarMaximumWidth(window.innerWidth);  const [isWindowFullscreen, setIsWindowFullscreen] = useState(() => {    const getWindowFullscreenState = window.desktopBridge?.getWindowFullscreenState;    return isMacosDesktop && typeof getWindowFullscreenState === "function"      ? getWindowFullscreenState()      : false;  });  const sidebarProviderStyle = {    "--sidebar-width": `${sidebarWidth}px`,    ...(isMacosDesktop && !isWindowFullscreen      ? { "--workspace-controls-left": MACOS_TRAFFIC_LIGHTS_LEFT_INSET }      : {}),  } as CSSProperties;   useEffect(() => {    if (!isMacosDesktop) return;    const bridge = window.desktopBridge;    if (!bridge) return;    const { getWindowFullscreenState, onWindowFullscreenStateChange } = bridge;    if (      typeof getWindowFullscreenState !== "function" ||      typeof onWindowFullscreenStateChange !== "function"    ) {      return;    }     const unsubscribe = onWindowFullscreenStateChange(setIsWindowFullscreen);    setIsWindowFullscreen(getWindowFullscreenState());    return unsubscribe;  }, [isMacosDesktop]);   useEffect(() => {    const onMenuAction = window.desktopBridge?.onMenuAction;    if (typeof onMenuAction !== "function") {      return;    }     const unsubscribe = onMenuAction((action) => {      if (action === "open-settings") {        const isSettingsRoute = /^\/settings(\/|$)/.test(pathname);        if (!isSettingsRoute) {          void navigate({ to: "/settings" });        }        return;      }       if (action === "close-window-or-right-panel") {        if (!requestCloseActiveRightPanelSurface()) {          window.close();        }      }    });     return () => {      unsubscribe?.();    };  }, [navigate, pathname]);   return (    <SidebarProvider className="h-dvh! min-h-0!" defaultOpen style={sidebarProviderStyle}>      <Sidebar        side="left"        collapsible="offcanvas"        className="border-r border-border bg-card text-foreground"        resizable={{          maxWidth: sidebarMaximumWidth,          minWidth: THREAD_SIDEBAR_MIN_WIDTH,          shouldAcceptWidth: ({ currentWidth, nextWidth, wrapper }) =>            nextWidth <= currentWidth ||            wrapper.clientWidth - nextWidth >= THREAD_MAIN_CONTENT_MIN_WIDTH,          storageKey: THREAD_SIDEBAR_WIDTH_STORAGE_KEY,          onResize: setSidebarWidth,        }}      >        <ThreadSidebar />        <SidebarRail />      </Sidebar>      {children}      <SidebarControl />    </SidebarProvider>  );}