web: add custom title bar to desktop app

web/main/background.ts

@@ -7,6 +7,8 @@ import {
   shell,
   utilityProcess,
   UtilityProcess,
+  IpcMainEvent,
+  systemPreferences,
 } from "electron";
 import serve from "electron-serve";
 import { createWindow } from "./helpers";
@@ -21,6 +23,9 @@ process.env.SCHEMA_PATH = schemaPath;
 process.env.NEXT_PUBLIC_FOR_ELECTRON = "true";
 process.env.NEXT_PUBLIC_USER_DATA_PATH = userDataPath;
 
+const HEADER_HEIGHT = 48;
+const MACOS_TRAFFIC_LIGHTS_HEIGHT = 16;
+
 if (isProd) {
   serve({ directory: "app" });
 } else {
@@ -91,19 +96,55 @@ async function waitForGraphQLServer(
   throw new Error("Timed out starting GraphQL server");
 }
 
+function setupTitleBarClickMac() {
+  if (process.platform !== "darwin") {
+    return;
+  }
+
+  ipcMain.on("mac-title-bar-clicked", (event: IpcMainEvent) => {
+    const doubleClickAction = systemPreferences.getUserDefault(
+      "AppleActionOnDoubleClick",
+      "string",
+    );
+    const win = BrowserWindow.fromWebContents(event.sender);
+    if (win) {
+      if (doubleClickAction === "Minimize") {
+        win.minimize();
+      } else if (doubleClickAction === "Maximize") {
+        if (!win.isMaximized()) {
+          win.maximize();
+        } else {
+          win.unmaximize();
+        }
+      }
+    }
+  });
+}
+
 app.on("ready", async () => {
   mainWindow = createWindow("main", {
-    width: 1280,
-    height: 680,
+    width: 1400,
+    height: 900,
+    minHeight: 600,
+    minWidth: 600,
+    titleBarStyle: process.platform === "darwin" ? "hiddenInset" : undefined,
+    titleBarOverlay: process.platform === "darwin",
+    trafficLightPosition: {
+      x: 20,
+      y: HEADER_HEIGHT / 2 - MACOS_TRAFFIC_LIGHTS_HEIGHT / 2,
+    },
+    acceptFirstMouse: true,
     webPreferences: {
       preload: path.join(__dirname, "preload.js"),
     },
   });
 
   Menu.setApplicationMenu(initMenu(mainWindow, isProd));
-
+  setupTitleBarClickMac();
   createGraphqlSeverProcess();
-
+  mainWindow?.webContents.executeJavaScript(
+    ` console.error('for mac nav:', ${process.env.NEXT_PUBLIC_FOR_MAC_NAV})`,
+  );
   await waitForGraphQLServer("http://localhost:9002/graphql");
 
   if (isProd) {
@@ -170,3 +211,7 @@ ipcMain.handle("api-config", async () => {
   };
   return cfg;
 });
+
+ipcMain.handle("toggle-left-sidebar", () => {
+  mainWindow.webContents.send("toggle-left-sidebar");
+});

web/main/helpers/menu.ts

@@ -1,3 +1,4 @@
+import { workbenchGithubRepo } from "@lib/constants";
 import {
   shell,
   BrowserWindow,
@@ -170,11 +171,17 @@ export function initMenu(
       role: "help",
       submenu: [
         {
-          label: "Learn More",
+          label: "Documentation",
           click() {
             shell.openExternal("https://docs.dolthub.com/");
           },
         },
+        {
+          label: "View on GitHub",
+          click() {
+            shell.openExternal(workbenchGithubRepo);
+          },
+        },
       ],
     },
   ];

web/main/preload.ts

@@ -9,6 +9,11 @@ const handler = {
   updateAppMenu: (databaseName?: string) => {
     ipcRenderer.send("update-menu", databaseName);
   },
+  macTitlebarClicked() {
+    ipcRenderer.send("mac-title-bar-clicked");
+  },
+  toggleLeftSidebar: (callback: () => {}) =>
+    ipcRenderer.on("toggle-left-sidebar", _event => callback()),
 };
 
 contextBridge.exposeInMainWorld("ipc", handler);

web/nextron.config.js

@@ -1,4 +1,6 @@
 process.env.NEXT_PUBLIC_FOR_ELECTRON = "true";
+process.env.NEXT_PUBLIC_FOR_MAC_NAV =
+  process.platform === "darwin" ? "true" : "false";
 
 module.exports = {
   mainSrcDir: "main",

web/renderer/components/DatabaseHeaderAndNav/ResetConnectionButton.tsx

@@ -37,7 +37,7 @@ export default function ResetConnectionButton() {
           <IoReloadSharp />
         </SmallLoader>
       </Button.Link>
-      <Tooltip id="reset-connection" />
+      <Tooltip id="reset-connection" className={css.tooltip} />
       <Modal
         isOpen={errorModalOpen}
         onRequestClose={onClose}

web/renderer/components/DatabaseHeaderAndNav/index.module.css

@@ -94,3 +94,7 @@
 .resetButton {
   @apply mr-5 text-xl text-white hover:text-stone-50 hidden lg:block;
 }
+
+.tooltip {
+  @apply z-10;
+}

web/renderer/components/Navbar/DesktopAppNavbar.tsx

@@ -0,0 +1,36 @@
+import Link from "@components/links/Link";
+import { Navbar } from "@dolthub/react-components";
+import css from "./index.module.css";
+
+const handleDoubleClick = () => {
+  window.ipc.macTitlebarClicked();
+};
+
+export default function DesktopAppNavbar() {
+  return (
+    <div className={css.titlebar} onDoubleClick={handleDoubleClick}>
+      <Navbar
+        logo={<Logo />}
+        leftLinks={<LeftLinks />}
+        rightLinks={<div />}
+        bgColor="bg-storm-600"
+      />
+    </div>
+  );
+}
+
+function LeftLinks() {
+  return (
+    <div className={css.leftLinks}>
+      <Link href="/connections">Connections</Link>
+    </div>
+  );
+}
+
+function Logo() {
+  return (
+    <Link href="/">
+      <img src="/images/d-logo.png" alt="Dolt Workbench" />
+    </Link>
+  );
+}

web/renderer/components/Navbar/index.module.css

@@ -0,0 +1,12 @@
+.leftLinks {
+  @apply ml-20 flex items-center;
+}
+
+.titlebar {
+  -webkit-app-region: drag;
+  a,
+  button {
+    @apply cursor-pointer;
+    -webkit-app-region: no-drag;
+  }
+}

web/renderer/components/Navbar/index.tsx

@@ -4,9 +4,15 @@ import { ExternalLink, Navbar } from "@dolthub/react-components";
 import { dockerHubRepo, workbenchGithubRepo } from "@lib/constants";
 import { FaDocker } from "@react-icons/all-files/fa/FaDocker";
 import { FaGithub } from "@react-icons/all-files/fa/FaGithub";
+import DesktopAppNavbar from "./DesktopAppNavbar";
+
+// TODO: Support desktop app nav bar on windows
+const forMacNav = process.env.NEXT_PUBLIC_FOR_MAC_NAV === "true";
 
 export default function Nav() {
-  return (
+  return forMacNav ? (
+    <DesktopAppNavbar />
+  ) : (
     <Navbar
       logo={<Logo />}
       leftLinks={<LeftLinks />}