desktop: fix title bar for macos

apps/desktop/src/api/os-integration.ts

@@ -181,9 +181,10 @@ export const osIntegrationRouter = t.router({
       ({ input: { theme, windowControlsIconColor, backgroundColor } }) => {
         if (windowControlsIconColor) {
           config.windowControlsIconColor = windowControlsIconColor;
-          globalThis.window?.setTitleBarOverlay({
-            symbolColor: windowControlsIconColor
-          });
+          if (process.platform === "win32")
+            globalThis.window?.setTitleBarOverlay({
+              symbolColor: windowControlsIconColor
+            });
         }
 
         if (backgroundColor) {

apps/desktop/src/main.ts

@@ -89,6 +89,10 @@ async function createWindow() {
       color: "#00000000",
       symbolColor: config.windowControlsIconColor
     },
+    trafficLightPosition: {
+      x: 16,
+      y: 12
+    },
 
     webPreferences: {
       zoomFactor: config.zoomFactor,

apps/web/src/components/editor/action-bar.tsx

@@ -183,11 +183,20 @@ export function EditorActionBar() {
 
   return (
     <ScopedThemeProvider scope="titleBar" injectCssVars>
-      <Flex sx={{ gap: 2, borderBottom: "1px solid var(--border)", pl: 2 }}>
+      <Flex
+        sx={{
+          gap: 2,
+          borderBottom: "1px solid var(--border)",
+          px: 2,
+          ...(IS_DESKTOP_APP && !isFullscreen && !hasNativeWindowControls
+            ? getPlatform() === "darwin"
+              ? { pl: "calc(100vw - env(titlebar-area-width))" }
+              : { pr: "calc(100vw - env(titlebar-area-width))" }
+            : {})
+        }}
+      >
         {IS_DESKTOP_APP ? (
-          getPlatform() === "darwin" && !isFullscreen ? (
-            <></>
-          ) : (
+          getPlatform() === "darwin" && !isFullscreen ? null : (
             <svg
               className="titlebarLogo"
               style={{
@@ -207,8 +216,8 @@ export function EditorActionBar() {
             // borderRadius: "default",
             // overflow: "hidden",
             alignItems: "center",
-            justifyContent: "flex-end",
-            mr: IS_DESKTOP_APP ? `calc(100vw - env(titlebar-area-width))` : 2
+            justifyContent: "flex-end"
+            // mr: IS_DESKTOP_APP ? `calc(100vw - env(titlebar-area-width))` : 2
           }}
         >
           {tools.map((tool) => (