Hide macOS window controls with sidebar state (#355)

- Add desktop IPC to toggle native window button visibility on macOS
- Sync visibility from the chat sidebar open state and restore it on cleanup
- Remove extra left padding now that the title bar controls are hidden

Author: BunsDev

apps/desktop/src/main.ts

@@ -56,6 +56,7 @@ const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
 const CONFIRM_CHANNEL = "desktop:confirm";
 const SET_THEME_CHANNEL = "desktop:set-theme";
 const SET_SIDEBAR_OPACITY_CHANNEL = "desktop:set-sidebar-opacity";
+const SET_WINDOW_BUTTON_VISIBILITY_CHANNEL = "desktop:set-window-button-visibility";
 const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 const OPEN_EXTERNAL_CHANNEL = "desktop:open-external";
 const MENU_ACTION_CHANNEL = "desktop:menu-action";
@@ -1173,6 +1174,21 @@ function registerIpcHandlers(): void {
     // applies the value through a CSS custom-property.
   });
 
+  ipcMain.removeHandler(SET_WINDOW_BUTTON_VISIBILITY_CHANNEL);
+  ipcMain.handle(SET_WINDOW_BUTTON_VISIBILITY_CHANNEL, async (event, rawVisible: unknown) => {
+    if (process.platform !== "darwin" || typeof rawVisible !== "boolean") {
+      return;
+    }
+
+    const owner =
+      BrowserWindow.fromWebContents(event.sender) ?? BrowserWindow.getFocusedWindow() ?? mainWindow;
+    if (!owner || owner.isDestroyed()) {
+      return;
+    }
+
+    owner.setWindowButtonVisibility(rawVisible);
+  });
+
   ipcMain.removeHandler(CONTEXT_MENU_CHANNEL);
   ipcMain.handle(
     CONTEXT_MENU_CHANNEL,

apps/desktop/src/preload.ts

@@ -5,6 +5,7 @@ const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
 const CONFIRM_CHANNEL = "desktop:confirm";
 const SET_THEME_CHANNEL = "desktop:set-theme";
 const SET_SIDEBAR_OPACITY_CHANNEL = "desktop:set-sidebar-opacity";
+const SET_WINDOW_BUTTON_VISIBILITY_CHANNEL = "desktop:set-window-button-visibility";
 const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 const OPEN_EXTERNAL_CHANNEL = "desktop:open-external";
 const MENU_ACTION_CHANNEL = "desktop:menu-action";
@@ -37,6 +38,8 @@ contextBridge.exposeInMainWorld("desktopBridge", {
   confirm: (message) => ipcRenderer.invoke(CONFIRM_CHANNEL, message),
   setTheme: (theme) => ipcRenderer.invoke(SET_THEME_CHANNEL, theme),
   setSidebarOpacity: (opacity) => ipcRenderer.invoke(SET_SIDEBAR_OPACITY_CHANNEL, opacity),
+  setWindowButtonVisibility: (visible) =>
+    ipcRenderer.invoke(SET_WINDOW_BUTTON_VISIBILITY_CHANNEL, visible),
   showContextMenu: (items, position) => ipcRenderer.invoke(CONTEXT_MENU_CHANNEL, items, position),
   openExternal: (url: string) => ipcRenderer.invoke(OPEN_EXTERNAL_CHANNEL, url),
   onMenuAction: (listener) => {

apps/web/src/components/ChatView.tsx

@@ -4700,9 +4700,7 @@ export default function ChatView({ threadId, onMinimize }: ChatViewProps) {
       <header
         className={cn(
           "border-b border-border px-3 sm:px-5",
-          isElectron
-            ? "drag-region flex h-[52px] items-center pl-[90px] sm:pl-[90px]"
-            : "py-2 sm:py-3",
+          isElectron ? "drag-region flex h-[52px] items-center" : "py-2 sm:py-3",
         )}
       >
         <ChatHeader

apps/web/src/components/home/ChatHomeEmptyState.tsx

@@ -216,7 +216,7 @@ export function ChatHomeEmptyState() {
       )}
 
       {isElectron && (
-        <div className="drag-region flex h-[52px] shrink-0 items-center justify-between gap-3 border-b border-border px-4 pl-[90px] sm:px-5 sm:pl-[90px]">
+        <div className="drag-region flex h-[52px] shrink-0 items-center justify-between gap-3 border-b border-border px-4 sm:px-5">
           <div className="flex min-w-0 items-center gap-2">
             <SidebarTrigger className="size-7 shrink-0" />
             <span className="truncate text-xs font-medium tracking-[0.14em] text-muted-foreground/70 uppercase">

apps/web/src/routes/_chat.tsx

@@ -8,6 +8,7 @@ import { CommandPalette } from "../components/CommandPalette";
 import { ScreenshotTool, ScreenshotButton } from "../components/ScreenshotTool";
 import { WorktreeCleanupDialog } from "../components/WorktreeCleanupDialog";
 import { useHandleNewThread } from "../hooks/useHandleNewThread";
+import { readDesktopBridge } from "../lib/runtimeBridge";
 import { isTerminalFocused } from "../lib/terminalFocus";
 import { isMacPlatform } from "../lib/utils";
 import { serverConfigQueryOptions } from "../lib/serverReactQuery";
@@ -19,7 +20,7 @@ import { useScreenshotStore } from "../screenshotStore";
 import { useStore } from "../store";
 import { resolveSidebarNewThreadEnvMode } from "~/components/Sidebar.logic";
 import { useAppSettings } from "~/appSettings";
-import { Sidebar, SidebarProvider, SidebarRail } from "~/components/ui/sidebar";
+import { Sidebar, SidebarProvider, SidebarRail, useSidebar } from "~/components/ui/sidebar";
 import { useAutoDeleteMergedThreads } from "~/hooks/useAutoDeleteMergedThreads";
 import { useClientMode } from "~/hooks/useClientMode";
 import { isMobileShell } from "../env";
@@ -215,6 +216,40 @@ function ChatRouteGlobalShortcuts() {
   return null;
 }
 
+function ChatDesktopWindowButtonsSync() {
+  const { open } = useSidebar();
+
+  useEffect(() => {
+    if (typeof navigator === "undefined" || !isMacPlatform(navigator.platform)) {
+      return;
+    }
+
+    const bridge = readDesktopBridge();
+    if (!bridge || typeof bridge.setWindowButtonVisibility !== "function") {
+      return;
+    }
+
+    void bridge.setWindowButtonVisibility(open);
+  }, [open]);
+
+  useEffect(() => {
+    if (typeof navigator === "undefined" || !isMacPlatform(navigator.platform)) {
+      return;
+    }
+
+    const bridge = readDesktopBridge();
+    if (!bridge || typeof bridge.setWindowButtonVisibility !== "function") {
+      return;
+    }
+
+    return () => {
+      void bridge.setWindowButtonVisibility(true);
+    };
+  }, []);
+
+  return null;
+}
+
 function ChatRouteLayout() {
   const navigate = useNavigate();
   const { settings } = useAppSettings();
@@ -266,6 +301,7 @@ function ChatRouteLayout() {
       />
       <div className="relative z-10 min-h-dvh">
         <SidebarProvider defaultOpen={clientMode !== "mobile"}>
+          <ChatDesktopWindowButtonsSync />
           <ChatRouteGlobalShortcuts />
           <CommandPalette />
           <WorktreeCleanupDialog />

packages/contracts/src/ipc.ts

@@ -238,6 +238,7 @@ export interface DesktopBridge {
   confirm: (message: string) => Promise<boolean>;
   setTheme: (theme: DesktopTheme) => Promise<void>;
   setSidebarOpacity: (opacity: number) => Promise<void>;
+  setWindowButtonVisibility: (visible: boolean) => Promise<void>;
   showContextMenu: <T extends string>(
     items: readonly ContextMenuItem<T>[],
     position?: { x: number; y: number },