Pull Request: Enhanced Modularity and Customizable Shortcuts

README.md

@@ -3,6 +3,7 @@
 This is a simple app that makes ChatGPT live in your menubar.
 
 You can use Cmd+Shift+G (Mac) or Ctrl+Shift+G (Win) to quickly open it from anywhere.
+- (or using setting window to customize the shortcut in the way you like)
 
 Download:
 

index.js

@@ -1,126 +1,19 @@
 require("update-electron-app")();
 
-const { menubar } = require("menubar");
 const Nucleus = require("nucleus-analytics");
 
-const path = require("path");
 const {
   app,
-  nativeImage,
-  Tray,
-  Menu,
-  globalShortcut,
   shell,
 } = require("electron");
 const contextMenu = require("electron-context-menu");
 
-const image = nativeImage.createFromPath(
-  path.join(__dirname, `images/newiconTemplate.png`)
-);
+const { createMenubar } = require('./src/menubar')
 
 app.on("ready", () => {
   Nucleus.init("638d9ccf4a5ed2dae43ce122");
 
-  const tray = new Tray(image);
-
-  const mb = menubar({
-    browserWindow: {
-      icon: image,
-      transparent: path.join(__dirname, `images/iconApp.png`),
-      webPreferences: {
-        webviewTag: true,
-        // nativeWindowOpen: true,
-      },
-      width: 450,
-      height: 550,
-    },
-    tray,
-    showOnAllWorkspaces: true,
-    preloadWindow: true,
-    showDockIcon: false,
-    icon: image,
-  });
-
-  mb.on("ready", () => {
-    const { window } = mb;
-
-
-    if (process.platform !== "darwin") {
-      window.setSkipTaskbar(true);
-    } else {
-      app.dock.hide();
-    }
-
-    const contextMenuTemplate = [
-      // add links to github repo and vince's twitter
-      {
-        label: "Quit",
-        accelerator: "Command+Q",
-        click: () => {
-          app.quit();
-        },
-      },
-      {
-        label: "Reload",
-        accelerator: "Command+R",
-        click: () => {
-          window.reload();
-        },
-      },
-      {
-        label: "Open in browser",
-        click: () => {
-          shell.openExternal("https://chat.openai.com/chat");
-        },
-      },
-      {
-        type: "separator",
-      },
-      {
-        label: "View on GitHub",
-        click: () => {
-          shell.openExternal("https://github.com/vincelwt/chatgpt-mac");
-        },
-      },
-      {
-        label: "Author on Twitter",
-        click: () => {
-          shell.openExternal("https://twitter.com/vincelwt");
-        },
-      },
-    ];
-
-    tray.on("right-click", () => {
-      mb.tray.popUpContextMenu(Menu.buildFromTemplate(contextMenuTemplate));
-    });
-
-    tray.on("click", (e) => {
-      //check if ctrl or meta key is pressed while clicking
-      e.ctrlKey || e.metaKey
-        ? mb.tray.popUpContextMenu(Menu.buildFromTemplate(contextMenuTemplate))
-        : null;
-    });
-    const menu = new Menu();
-
-    globalShortcut.register("CommandOrControl+Shift+g", () => {
-      if (window.isVisible()) {
-        mb.hideWindow();
-      } else {
-        mb.showWindow();
-        if (process.platform == "darwin") {
-          mb.app.show();
-        }
-        mb.app.focus();
-      }
-    });
-
-    Menu.setApplicationMenu(menu);
-
-    // open devtools
-    // window.webContents.openDevTools();
-
-    console.log("Menubar app is ready.");
-  });
+  const mb = createMenubar()
 
   app.on("web-contents-created", (e, contents) => {
     if (contents.getType() == "webview") {
@@ -150,13 +43,6 @@ app.on("ready", () => {
     }
   });
 
-  if (process.platform == "darwin") {
-    // restore focus to previous app on hiding
-    mb.on("after-hide", () => {
-      mb.app.hide();
-    });
-  }
-
   // open links in new window
   // app.on("web-contents-created", (event, contents) => {
   //   contents.on("will-navigate", (event, navigationUrl) => {

package.json

@@ -23,6 +23,7 @@
   "license": "MIT",
   "dependencies": {
     "electron-context-menu": "^3.6.0",
+    "electron-settings": "^4.0.2",
     "menubar": "^9.2.3",
     "nucleus-analytics": "^4.0.3",
     "update-electron-app": "^2.0.1"

pages/settings.js

@@ -0,0 +1,67 @@
+const { 
+    app,
+    BrowserWindow,
+    ipcMain,
+    globalShortcut
+} = require('electron');
+
+const settings = require('electron-settings');
+
+// for first time turn on the app or removed shortcut by accident
+const initializeShortcut = () => {
+    settings.setSync('shortcut', 'CommandOrControl+Shift+g')
+}
+
+const hasShortcutInSettings = () => {
+    return settings.hasSync('shortcut')
+}
+
+const getShortcutFromSettings = () => {
+    if (hasShortcutInSettings()) {
+        return settings.getSync('shortcut')
+    } else {
+        return ''
+    }
+}
+
+// set shortcut into local storge and unregister the old one
+const setShortcutInSettings = (newShortcut) => {
+    const oldShortcut = settings.getSync('shortcut')
+    if (settings.hasSync('shortcut')) {
+        globalShortcut.unregister(oldShortcut)
+        settings.unsetSync('shortcut')
+    }
+
+    if (newShortcut != '') {
+        settings.setSync('shortcut', newShortcut)
+        console.log('Shortcut set successful, old: ' + oldShortcut + ' - new: ' + newShortcut + '. Make sure the shortcut has been reloaded.')
+    } else {
+        console.log('empty shortcut!')
+    }
+}
+
+const openSettingsWindow = () => {
+    app.whenReady().then(() => {
+        settingsWindow = new BrowserWindow({
+            width: 400,
+            height: 300,
+            webPreferences: {
+                nodeIntegration: true,
+                contextIsolation: false
+            },
+        });
+
+        // keep it for turn on devtools
+        // settingsWindow.webContents.openDevTools();
+
+        settingsWindow.loadFile('./pages/settings/index.html'); 
+    });
+}
+
+module.exports = {
+    initializeShortcut,
+    hasShortcutInSettings,
+    getShortcutFromSettings,
+    setShortcutInSettings,
+    openSettingsWindow,
+}

pages/settings/index.css

@@ -0,0 +1,47 @@
+/* style.css */
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f2f2f2;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+h1 {
+    color: #333;
+    margin-bottom: 20px;
+}
+
+label {
+    display: block;
+    margin-bottom: 10px;
+    font-weight: bold;
+    color: #666;
+}
+
+input[type="text"] {
+    width: 50%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin-bottom: 20px;
+}
+
+button {
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #0056b3;
+}

pages/settings/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>App Settings</title>
+    <script defer src="index.js"></script>
+    <link rel="stylesheet" href="index.css">
+</head>
+<body>
+    <h1>App Settings</h1>
+    <label for="shortcutInput">Enter Shortcut:</label>
+    <input type="text" id="shortcutInput">
+    <button id="saveButton">Save</button>
+</body>
+</html>

pages/settings/index.js

@@ -0,0 +1,19 @@
+
+const { ipcRenderer } = require('electron');
+
+const shortcutInput = document.getElementById('shortcutInput');
+const saveButton = document.getElementById('saveButton');
+
+const displayShortcut = async () => {
+    await ipcRenderer.send('get-shortcut')
+    await ipcRenderer.on('shortcut-data', (event, currentShortcut) => {
+        shortcutInput.value = currentShortcut
+    });
+}
+
+displayShortcut()
+
+saveButton.addEventListener('click', () => {
+    const newShortcut = shortcutInput.value;
+    ipcRenderer.send('update-shortcut', newShortcut)
+});