dbdiff-app 0.1.0

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/bin/cli.js

@@ -0,0 +1,83 @@
+#!/usr/bin/env node
+
+import { execSync } from "child_process";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const packageDir = path.join(__dirname, "..");
+const command = process.argv[2];
+
+if (command !== "install-from-source") {
+  console.log("Usage: npx dbdiff-app install-from-source");
+  console.log("  Builds dbdiff from source and installs to /Applications/");
+  process.exit(command ? 1 : 0);
+}
+
+if (process.platform !== "darwin") {
+  console.error("install-from-source is currently macOS only.");
+  process.exit(1);
+}
+
+const pkg = JSON.parse(
+  fs.readFileSync(path.join(packageDir, "package.json"), "utf-8"),
+);
+
+console.log(`\nInstalling dbdiff v${pkg.version} from source...\n`);
+
+// Step 1: Install all dependencies (including devDependencies needed for building)
+console.log("Installing dependencies...");
+execSync("npm install --include=dev", { cwd: packageDir, stdio: "inherit" });
+
+// Step 2: Build the Electron app
+console.log("\nBuilding...");
+execSync("npm run build:electron", { cwd: packageDir, stdio: "inherit" });
+
+// Step 3: Find the built .app bundle
+const releaseDir = path.join(packageDir, "release");
+const entries = fs.readdirSync(releaseDir).filter((e) => e.startsWith("mac"));
+let appPath = null;
+
+for (const entry of entries) {
+  const candidate = path.join(releaseDir, entry, "dbdiff.app");
+  if (fs.existsSync(candidate)) {
+    appPath = candidate;
+    break;
+  }
+}
+
+if (!appPath) {
+  console.error("Build failed — could not find dbdiff.app in release/");
+  process.exit(1);
+}
+
+// Step 4: Install to /Applications
+const dest = "/Applications/dbdiff.app";
+
+let wasRunning = false;
+try {
+  execSync("pkill -f '/Applications/dbdiff.app'", { stdio: "pipe" });
+  wasRunning = true;
+  console.log("\nQuit running dbdiff instance.");
+} catch {
+  // Not running — that's fine
+}
+
+if (fs.existsSync(dest)) {
+  console.log("Removing existing /Applications/dbdiff.app...");
+  execSync(`rm -rf "${dest}"`);
+}
+
+console.log(
+  `Copying ${path.basename(path.dirname(appPath))}/dbdiff.app → /Applications/`,
+);
+execSync(`cp -R "${appPath}" "${dest}"`);
+
+console.log("\nInstalled dbdiff to /Applications/dbdiff.app");
+console.log("Launch it from Spotlight or your Applications folder.\n");
+
+if (wasRunning) {
+  console.log("Reopening dbdiff...");
+  execSync("open /Applications/dbdiff.app");
+}

package/bin/install-local.js

@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+
+import fs from "fs";
+import path from "path";
+import { execSync } from "child_process";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const releaseDir = path.join(__dirname, "..", "release");
+
+// Find the .app bundle — electron-builder outputs to release/mac-<arch>/
+const entries = fs.readdirSync(releaseDir).filter((e) => e.startsWith("mac"));
+let appPath = null;
+
+for (const entry of entries) {
+  const candidate = path.join(releaseDir, entry, "dbdiff.app");
+  if (fs.existsSync(candidate)) {
+    appPath = candidate;
+    break;
+  }
+}
+
+if (!appPath) {
+  console.error(
+    "Could not find dbdiff.app in release/. Run `npm run dist:dir` first.",
+  );
+  process.exit(1);
+}
+
+const dest = "/Applications/dbdiff.app";
+
+// Kill dbdiff if it's currently running
+let wasRunning = false;
+try {
+  execSync("pkill -f '/Applications/dbdiff.app'", { stdio: "pipe" });
+  wasRunning = true;
+  console.log("Quit running dbdiff instance.");
+} catch {
+  // pkill exits non-zero when no processes match — that's fine
+}
+
+if (fs.existsSync(dest)) {
+  console.log("Removing existing /Applications/dbdiff.app...");
+  execSync(`rm -rf "${dest}"`);
+}
+
+console.log(
+  `Copying ${path.basename(path.dirname(appPath))}/dbdiff.app → /Applications/`,
+);
+execSync(`cp -R "${appPath}" "${dest}"`);
+
+console.log("Installed!");
+
+if (wasRunning) {
+  console.log("Reopening dbdiff...");
+  execSync("open /Applications/dbdiff.app");
+}

package/electron/generate-icon.mjs

@@ -0,0 +1,54 @@
+import sharp from "sharp";
+import { mkdirSync, readFileSync, rmSync } from "fs";
+import { execSync } from "child_process";
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const svgPath = join(__dirname, "icon.svg");
+const iconsetDir = join(__dirname, "icon.iconset");
+const icnsPath = join(__dirname, "icon.icns");
+
+const svg = readFileSync(svgPath);
+
+// macOS iconset sizes
+const sizes = [
+  { name: "icon_16x16.png", size: 16 },
+  { name: "icon_16x16@2x.png", size: 32 },
+  { name: "icon_32x32.png", size: 32 },
+  { name: "icon_32x32@2x.png", size: 64 },
+  { name: "icon_128x128.png", size: 128 },
+  { name: "icon_128x128@2x.png", size: 256 },
+  { name: "icon_256x256.png", size: 256 },
+  { name: "icon_256x256@2x.png", size: 512 },
+  { name: "icon_512x512.png", size: 512 },
+  { name: "icon_512x512@2x.png", size: 1024 },
+];
+
+// Clean and create iconset directory
+rmSync(iconsetDir, { recursive: true, force: true });
+mkdirSync(iconsetDir, { recursive: true });
+
+// Generate all sizes
+await Promise.all(
+  sizes.map(({ name, size }) =>
+    sharp(svg, { density: Math.round((72 * size) / 1024) * 10 })
+      .resize(size, size)
+      .png()
+      .toFile(join(iconsetDir, name)),
+  ),
+);
+
+// Convert to .icns using macOS iconutil
+execSync(`iconutil -c icns "${iconsetDir}" -o "${icnsPath}"`);
+
+// Also generate a 1024px PNG for Electron's icon option (used on Linux/Windows)
+await sharp(svg, { density: 720 })
+  .resize(1024, 1024)
+  .png()
+  .toFile(join(__dirname, "icon.png"));
+
+// Clean up iconset directory
+rmSync(iconsetDir, { recursive: true, force: true });
+
+console.log("Generated icon.icns and icon.png");

package/electron/icon.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <!-- macOS icon grid: 824x824 content area centered in 1024x1024 (100px padding) -->
+  <!-- Background rect — macOS applies squircle mask automatically -->
+  <rect x="100" y="100" width="824" height="824" rx="185" ry="185" fill="#1e1b4b"/>
+
+  <!-- Database cylinders centered within the 824x824 content area -->
+  <g transform="translate(512, 512) scale(18) translate(-16, -16)">
+    <ellipse cx="11" cy="8" rx="8" ry="3" fill="#6366f1" opacity="0.7"/>
+    <rect x="3" y="8" width="16" height="14" fill="#6366f1" opacity="0.7"/>
+    <ellipse cx="11" cy="22" rx="8" ry="3" fill="#6366f1" opacity="0.7"/>
+
+    <!-- Database cylinder 2 (right, in front) -->
+    <ellipse cx="21" cy="10" rx="8" ry="3" fill="#a5b4fc"/>
+    <rect x="13" y="10" width="16" height="14" fill="#a5b4fc"/>
+    <ellipse cx="21" cy="24" rx="8" ry="3" fill="#a5b4fc"/>
+
+    <!-- Inner lines for database look -->
+    <ellipse cx="21" cy="14" rx="8" ry="3" fill="none" stroke="#6366f1" stroke-width="0.5" opacity="0.5"/>
+    <ellipse cx="21" cy="18" rx="8" ry="3" fill="none" stroke="#6366f1" stroke-width="0.5" opacity="0.5"/>
+  </g>
+</svg>

package/electron/main.js

@@ -0,0 +1,169 @@
+import { app, BrowserWindow, Menu, ipcMain } from "electron";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const isMac = process.platform === "darwin";
+
+let win;
+const devServerURL = process.env.VITE_DEV_SERVER_URL;
+const serverPort = process.env.PORT || "4088";
+
+// Database menu items — kept as references so we can enable/disable them
+let exportSchemaItem;
+let exportSchemaAndDataItem;
+
+function sendMenuAction(action) {
+  win?.webContents.send("menu-action", action);
+}
+
+function buildMenu() {
+  exportSchemaItem = {
+    label: "Export Schema",
+    enabled: false,
+    click: () => sendMenuAction("export-schema"),
+  };
+  exportSchemaAndDataItem = {
+    label: "Export Schema + Data",
+    enabled: false,
+    click: () => sendMenuAction("export-schema-and-data"),
+  };
+
+  const template = [
+    // App menu (macOS only) — includes dbdiff-specific items
+    ...(isMac
+      ? [
+          {
+            label: app.name,
+            submenu: [
+              { role: "about" },
+              { type: "separator" },
+              {
+                label: "Shortcut Settings...",
+                click: () => sendMenuAction("shortcut-settings"),
+              },
+              {
+                label: "Scan Localhost",
+                click: () => sendMenuAction("scan-localhost"),
+              },
+              { type: "separator" },
+              {
+                label: "Reset UI State",
+                click: () => sendMenuAction("reset-ui-state"),
+              },
+              { type: "separator" },
+              { role: "hide" },
+              { role: "hideOthers" },
+              { role: "unhide" },
+              { type: "separator" },
+              { role: "quit" },
+            ],
+          },
+        ]
+      : []),
+    // Database menu (macOS only — on other platforms these stay in the web UI)
+    ...(isMac
+      ? [
+          {
+            label: "Database",
+            submenu: [exportSchemaItem, exportSchemaAndDataItem],
+          },
+        ]
+      : []),
+    {
+      label: "Edit",
+      submenu: [
+        { role: "undo" },
+        { role: "redo" },
+        { type: "separator" },
+        { role: "cut" },
+        { role: "copy" },
+        { role: "paste" },
+        { role: "selectAll" },
+      ],
+    },
+    {
+      label: "View",
+      submenu: [
+        { role: "reload" },
+        { role: "forceReload" },
+        { role: "toggleDevTools" },
+        { type: "separator" },
+        { role: "resetZoom" },
+        { role: "zoomIn" },
+        { role: "zoomOut" },
+        { role: "togglefullscreen" },
+      ],
+    },
+  ];
+
+  Menu.setApplicationMenu(Menu.buildFromTemplate(template));
+}
+
+async function createWindow() {
+  // In dev mode, the Express server is already running externally via tsx watch.
+  // In production, we start it ourselves from the built output.
+  if (!devServerURL) {
+    const { serverReady } = await import("../dist-server/server/index.js");
+    await serverReady;
+  }
+
+  win = new BrowserWindow({
+    width: 1400,
+    height: 900,
+    icon: path.join(__dirname, "icon.png"),
+    titleBarStyle: isMac ? "hiddenInset" : "default",
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+      preload: path.join(__dirname, "preload.cjs"),
+    },
+  });
+
+  buildMenu();
+
+  // Renderer tells us when a database is active so we can enable/disable menu items
+  ipcMain.on("set-database-menu-enabled", (_event, enabled) => {
+    if (exportSchemaItem) exportSchemaItem.enabled = enabled;
+    if (exportSchemaAndDataItem) exportSchemaAndDataItem.enabled = enabled;
+  });
+
+  // In dev mode, load from Vite dev server (HMR). Otherwise use the Express server.
+  // Handle child windows opened via window.open() (e.g. cloud auth popup).
+  // When the auth flow redirects back to localhost with key+state params,
+  // forward them to the main window and close the popup.
+  win.webContents.on("did-create-window", (childWindow) => {
+    childWindow.webContents.on("did-navigate", (_event, url) => {
+      try {
+        const parsed = new URL(url);
+        if (
+          (parsed.hostname === "localhost" ||
+            parsed.hostname === "127.0.0.1") &&
+          parsed.searchParams.has("key") &&
+          parsed.searchParams.has("state")
+        ) {
+          win.webContents.send("cloud-auth-callback", {
+            key: parsed.searchParams.get("key"),
+            state: parsed.searchParams.get("state"),
+          });
+          childWindow.close();
+        }
+      } catch {
+        // ignore malformed URLs
+      }
+    });
+  });
+
+  win.loadURL(devServerURL || `http://localhost:${serverPort}`);
+}
+
+app.whenReady().then(() => {
+  if (isMac) {
+    app.dock.setIcon(path.join(__dirname, "icon.png"));
+  }
+  createWindow();
+});
+
+app.on("window-all-closed", () => {
+  app.quit();
+});

package/electron/patch-dev-plist.js

@@ -0,0 +1,31 @@
+/**
+ * Patches the Electron.app Info.plist so the macOS menu bar shows "dbdiff"
+ * instead of "Electron" during development.
+ */
+import { readFileSync, writeFileSync } from "fs";
+import { dirname, join } from "path";
+import { createRequire } from "module";
+
+const require = createRequire(import.meta.url);
+const electronPath = dirname(require.resolve("electron"));
+const plistPath = join(
+  electronPath,
+  "dist",
+  "Electron.app",
+  "Contents",
+  "Info.plist",
+);
+
+const appName = "dbdiff";
+let plist = readFileSync(plistPath, "utf8");
+
+plist = plist.replace(
+  /(<key>CFBundleDisplayName<\/key>\s*<string>)[^<]*(<\/string>)/,
+  `$1${appName}$2`,
+);
+plist = plist.replace(
+  /(<key>CFBundleName<\/key>\s*<string>)[^<]*(<\/string>)/,
+  `$1${appName}$2`,
+);
+
+writeFileSync(plistPath, plist);

package/electron/preload.cjs

@@ -0,0 +1,18 @@
+const { contextBridge, ipcRenderer } = require("electron");
+
+contextBridge.exposeInMainWorld("electronAPI", {
+  onMenuAction: (callback) => {
+    const handler = (_event, action) => callback(action);
+    ipcRenderer.on("menu-action", handler);
+    return () => ipcRenderer.removeListener("menu-action", handler);
+  },
+  setDatabaseMenuEnabled: (enabled) => {
+    ipcRenderer.send("set-database-menu-enabled", enabled);
+  },
+  onCloudAuthCallback: (callback) => {
+    const handler = (_event, data) => callback(data);
+    ipcRenderer.on("cloud-auth-callback", handler);
+    return () => ipcRenderer.removeListener("cloud-auth-callback", handler);
+  },
+  platform: process.platform,
+});

package/electron/wait-for-vite.js

@@ -0,0 +1,43 @@
+// Waits for the Vite dev server to be ready, then launches Electron.
+import { spawn } from "child_process";
+import { fileURLToPath } from "url";
+import path from "path";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const VITE_URL = "http://localhost:4089";
+
+async function waitForServer(url, timeoutMs = 30000) {
+  const start = Date.now();
+  while (Date.now() - start < timeoutMs) {
+    try {
+      await fetch(url);
+      return;
+    } catch {
+      await new Promise((r) => setTimeout(r, 300));
+    }
+  }
+  throw new Error(`Timed out waiting for ${url}`);
+}
+
+async function main() {
+  console.log("Waiting for Vite dev server...");
+  await waitForServer(VITE_URL);
+  console.log("Vite ready — launching Electron");
+
+  const electronBin = path.resolve(
+    __dirname,
+    "..",
+    "node_modules",
+    ".bin",
+    "electron",
+  );
+  const child = spawn(electronBin, ["."], {
+    cwd: path.resolve(__dirname, ".."),
+    stdio: "inherit",
+    env: { ...process.env, VITE_DEV_SERVER_URL: VITE_URL },
+  });
+
+  child.on("close", (code) => process.exit(code));
+}
+
+main();

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>dbdiff</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "dbdiff-app",
+  "version": "0.1.0",
+  "description": "A database client for PostgreSQL",
+  "author": "Louis Arge",
+  "type": "module",
+  "main": "electron/main.js",
+  "bin": {
+    "dbdiff-app": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "server",
+    "electron",
+    "public",
+    "index.html",
+    "vite.config.ts",
+    "tsconfig.json",
+    "tsconfig.app.json",
+    "tsconfig.server.json",
+    "tsconfig.node.json"
+  ],
+  "scripts": {
+    "dev": "concurrently -k -n vite,server -c blue,green \"vite\" \"tsx watch --clear-screen=false server/index.ts\"",
+    "dev:electron": "node electron/patch-dev-plist.js && concurrently -k -n vite,server,electron -c blue,green,magenta \"vite\" \"tsx watch --clear-screen=false server/index.ts\" \"node electron/wait-for-vite.js\"",
+    "build:vite": "tsc -b && vite build",
+    "build:server": "tsc -p tsconfig.server.json",
+    "build": "npm run build:vite && npm run build:server",
+    "build:electron": "npm run build && electron-builder --mac --dir",
+    "start": "node electron/patch-dev-plist.js && electron .",
+    "typecheck": "tsc -p tsconfig.app.json --noEmit",
+    "lint": "eslint .",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\" \"server/**/*.ts\"",
+    "install-local-production": "npm run build:electron && node bin/install-local.js"
+  },
+  "dependencies": {
+    "@codemirror/lang-sql": "^6.10.0",
+    "@tanstack/react-virtual": "^3.13.18",
+    "@uiw/react-codemirror": "^4.25.4",
+    "express": "^4.21.0",
+    "fuse.js": "^7.1.0",
+    "lucide-react": "^0.563.0",
+    "pg": "^8.13.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "zustand": "^5.0.11"
+  },
+  "build": {
+    "appId": "app.dbdiff.client",
+    "productName": "dbdiff",
+    "asar": false,
+    "files": [
+      "electron/",
+      "dist/",
+      "dist-server/",
+      "package.json"
+    ],
+    "mac": {
+      "icon": "electron/icon.icns",
+      "identity": null,
+      "target": "dir"
+    },
+    "directories": {
+      "output": "release"
+    }
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/express": "^4.17.21",
+    "@types/node": "^24.10.1",
+    "@types/pg": "^8.11.10",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "concurrently": "^9.1.0",
+    "electron": "^35.1.2",
+    "electron-builder": "^26.0.12",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "prettier": "^3.8.1",
+    "tailwindcss": "^4.1.18",
+    "tsx": "^4.19.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

package/public/favicon.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- Database cylinder 1 (left, slightly behind) -->
+  <ellipse cx="11" cy="8" rx="8" ry="3" fill="#6366f1" opacity="0.7"/>
+  <rect x="3" y="8" width="16" height="14" fill="#6366f1" opacity="0.7"/>
+  <ellipse cx="11" cy="22" rx="8" ry="3" fill="#6366f1" opacity="0.7"/>
+
+  <!-- Database cylinder 2 (right, in front) -->
+  <ellipse cx="21" cy="10" rx="8" ry="3" fill="#a5b4fc"/>
+  <rect x="13" y="10" width="16" height="14" fill="#a5b4fc"/>
+  <ellipse cx="21" cy="24" rx="8" ry="3" fill="#a5b4fc"/>
+
+  <!-- Inner lines for database look -->
+  <ellipse cx="21" cy="14" rx="8" ry="3" fill="none" stroke="#6366f1" stroke-width="0.5" opacity="0.5"/>
+  <ellipse cx="21" cy="18" rx="8" ry="3" fill="none" stroke="#6366f1" stroke-width="0.5" opacity="0.5"/>
+</svg>