Ability to connect database multiple window

electron/connection-pool.ts

@@ -5,13 +5,18 @@ import TursoDriver from "./drivers/sqlite";
 import PostgresDriver from "./drivers/postgres";
 import StarbaseDriver from "./drivers/starbase";
 import CloudflareDriver from "./drivers/cloudflare";
+import { windowMap } from "./window/create-database";
 import { ConnectionPoolType } from "./type";
 
 export class ConnectionPool {
   static connections: Record<string, BaseDriver> = {};
 
   protected static createDBPool(conn: ConnectionStoreItem) {
     if (ConnectionPool.connections[conn.id]) {
+      const focusWindow = windowMap.get(conn.id);
+      if (focusWindow && !focusWindow.isDestroyed()) {
+        focusWindow.focus();
+      }
       throw new Error(`Connection already exists: ${conn.id}`);
     }
     let connectionPool: ConnectionPoolType;

electron/constants/index.ts

@@ -0,0 +1,6 @@
+export const STUDIO_ENDPOINT = "https://studio.outerbase.com/embed";
+// const STUDIO_ENDPOINT = "http://localhost:3008/embed";
+
+export const OUTERBASE_WEBSITE = "https://outerbase.com";
+export const OUTERBASE_GITHUB =
+  "https://github.com/outerbase/studio-desktop/issues";

electron/ipc/docker.ts

@@ -3,7 +3,7 @@ import { ipcMain, shell } from "electron";
 import Docker, { ContainerInspectInfo } from "dockerode";
 import { getUserDataPath } from "./../file-helper";
 import { type DatabaseInstanceStoreItem } from "@/lib/db-manager-store";
-import { OuterbaseApplication } from "../type";
+import { MainWindow } from "../window/main-window";
 
 export interface PullImageProgress {
   status: string;
@@ -12,7 +12,8 @@ export interface PullImageProgress {
   id: string;
 }
 
-export function bindDockerIpc(app: OuterbaseApplication) {
+export function bindDockerIpc(main: MainWindow) {
+  const win = main.getWindow();
   const docker = new Docker();
   let eventStream: NodeJS.ReadableStream | undefined;
   let dockerIniting = false;
@@ -90,11 +91,11 @@ export function bindDockerIpc(app: OuterbaseApplication) {
 
       eventStream.on("data", (data) => {
         try {
-          if (app.win) {
-            app.win?.webContents.send("docker-event", data.toString());
+          if (win) {
+            win?.webContents.send("docker-event", data.toString());
           }
         } catch (e) {
-          console.error(e)
+          console.error(e);
         }
       });
 

electron/ipc/index.ts

@@ -0,0 +1,2 @@
+export { bindMenuIpc } from "./menu";
+export { bindDockerIpc } from "./docker";

electron/ipc/menu.ts

@@ -0,0 +1,196 @@
+import { isMac } from "../utils";
+import { Setting } from "../setting";
+import { MainWindow } from "../window/main-window";
+import { OUTERBASE_GITHUB, OUTERBASE_WEBSITE } from "../constants";
+import { ConnectionStoreItem } from "@/lib/conn-manager-store";
+import {
+  app,
+  ipcMain,
+  Menu,
+  MenuItemConstructorOptions,
+  shell,
+} from "electron";
+import { createDatabaseWindow, windowMap } from "../window/create-database";
+
+export function bindMenuIpc(main: MainWindow, settings: Setting) {
+  const mainWindow = main.getWindow();
+
+  function createMenu(connections: ConnectionStoreItem[]) {
+    function onOpenConnectionWindow(type: ConnectionStoreItem["type"]) {
+      main.navigate(`/connection/create/${type}`);
+    }
+
+    function generateSubMenu() {
+      const MAX_VISIBLE_CONNECTIONS = 10;
+
+      const visibleConn = connections.slice(-MAX_VISIBLE_CONNECTIONS);
+      const remainConn = connections.slice(MAX_VISIBLE_CONNECTIONS);
+
+      const connMenu: MenuItemConstructorOptions["submenu"] = visibleConn.map(
+        (conn) => {
+          return {
+            label: conn.name,
+            click: () => {
+              const existingWindow = windowMap.get(conn.id);
+              if (existingWindow && !existingWindow.isDestroyed()) {
+                existingWindow.focus();
+              } else {
+                if (!mainWindow?.isDestroyed()) {
+                  if (mainWindow?.isVisible()) {
+                    main.hide();
+                  }
+                  createDatabaseWindow({ main, conn, settings });
+                }
+              }
+            },
+          };
+        },
+      );
+
+      if (remainConn.length > 0) {
+        connMenu.push({
+          type: "separator",
+        });
+        connMenu.push({
+          label: "See more connection...",
+          click: () => {
+            main.show();
+            main.navigate("/connection");
+          },
+        });
+      }
+
+      return connMenu;
+    }
+
+    const connSubMenu = generateSubMenu();
+    const customTemplate = [
+      ...(isMac
+        ? [
+            {
+              label: app.name,
+              submenu: [
+                { role: "about" },
+                { type: "separator" },
+                { role: "services" },
+                { type: "separator" },
+                { role: "hide" },
+                { role: "hideOthers" },
+                { role: "unhide" },
+                { type: "separator" },
+                { role: "quit" },
+              ],
+            },
+          ]
+        : []),
+      {
+        label: "File",
+        submenu: [
+          {
+            label: "New Connection",
+            submenu: [
+              {
+                label: "MySQL",
+                click: () => onOpenConnectionWindow("mysql"),
+              },
+              {
+                label: "PostgreSQL",
+                click: () => onOpenConnectionWindow("postgres"),
+              },
+              {
+                label: "SQLite",
+                click: () => onOpenConnectionWindow("sqlite"),
+              },
+              {
+                label: "Turso",
+                click: () => onOpenConnectionWindow("turso"),
+              },
+              {
+                label: "Cloudflare",
+                click: () => onOpenConnectionWindow("cloudflare"),
+              },
+              {
+                label: "Starbase",
+                click: () => onOpenConnectionWindow("starbase"),
+              },
+            ],
+          },
+          {
+            type: "separator",
+          },
+          {
+            label: "Open Recent",
+            enabled: connSubMenu.length > 0,
+            submenu: connSubMenu,
+          },
+          {
+            type: "separator",
+          },
+          { role: "close" },
+          ...(isMac ? [] : [{ label: "Exit", role: "quit" }]),
+        ],
+      },
+      {
+        label: "Edit",
+        submenu: [
+          { role: "undo" },
+          { role: "redo" },
+          { type: "separator" },
+          { role: "cut" },
+          { role: "copy" },
+          { role: "paste" },
+          { role: "delete" },
+          { role: "selectAll" },
+        ],
+      },
+      {
+        label: "View",
+        submenu: [
+          { role: "reload" },
+          { role: "forceReload" },
+          { role: "toggleDevTools" },
+          { type: "separator" },
+          { role: "resetZoom" },
+          { role: "zoomIn" },
+          { role: "zoomOut" },
+          { type: "separator" },
+          { role: "togglefullscreen" },
+        ],
+      },
+      {
+        label: "Window",
+        submenu: [
+          { role: "minimize" },
+          { role: "zoom" },
+          ...(isMac
+            ? [{ type: "separator" }, { role: "front" }]
+            : [{ role: "close" }]),
+        ],
+      },
+      {
+        label: "Help",
+        submenu: [
+          {
+            label: "About Us",
+            click: async () => {
+              await shell.openExternal(OUTERBASE_WEBSITE);
+            },
+          },
+          {
+            label: "Report issues",
+            click: async () => {
+              await shell.openExternal(OUTERBASE_GITHUB);
+            },
+          },
+        ],
+      },
+    ] as MenuItemConstructorOptions[];
+
+    const menu = Menu.buildFromTemplate(customTemplate);
+    Menu.setApplicationMenu(menu);
+  }
+
+  ipcMain.on("connections", (_, connections: ConnectionStoreItem[]) => {
+    createMenu(connections);
+  });
+}