Replace logo with platform-dependent button to open app menu (#239)

Replace the logo in the tab bar with an ellipsis icon that shows on
Linux and Windows and, when clicked, opens up the system menus. This
also fixes an issue I noticed where the context menus were set to the
wrong coordinates when a window was zoomed in.


![image](https://github.com/user-attachments/assets/1be77cad-73a6-4cb8-b545-08ec908f1d9a)

![image](https://github.com/user-attachments/assets/0beef938-15f8-4084-b7bd-7d9f995187ef)

emain/emain.ts

@@ -587,12 +587,16 @@ async function createNewWaveWindow() {
 
 electron.ipcMain.on("openNewWindow", () => fireAndForget(createNewWaveWindow));
 
-electron.ipcMain.on("contextmenu-show", (event, menuDefArr: ElectronContextMenuItem[], { x, y }) => {
-    if (menuDefArr == null || menuDefArr.length == 0) {
+electron.ipcMain.on("contextmenu-show", (event, menuDefArr?: ElectronContextMenuItem[]) => {
+    const window = electron.BrowserWindow.fromWebContents(event.sender);
+    if (menuDefArr?.length === 0) {
         return;
     }
-    const menu = convertMenuDefArrToMenu(menuDefArr);
-    menu.popup({ x, y });
+    const menu = menuDefArr ? convertMenuDefArrToMenu(menuDefArr) : getAppMenu();
+    const { x, y } = electron.screen.getCursorScreenPoint();
+    const windowPos = window.getPosition();
+
+    menu.popup({ window, x: x - windowPos[0], y: y - windowPos[1] });
     event.returnValue = true;
 });
 
@@ -640,7 +644,7 @@ function convertMenuDefArrToMenu(menuDefArr: ElectronContextMenuItem[]): electro
     return electron.Menu.buildFromTemplate(menuItems);
 }
 
-function makeAppMenu() {
+function getAppMenu() {
     const fileMenu: Electron.MenuItemConstructorOptions[] = [
         {
             label: "New Window",
@@ -668,32 +672,29 @@ function makeAppMenu() {
         {
             type: "separator",
         },
-        {
-            role: "services",
-        },
-        {
-            type: "separator",
-        },
-        {
-            label: "Toggle Menu Bar Visibility",
-            visible: unamePlatform != "darwin",
-            click: (_, window) => {
-                window.autoHideMenuBar = !window.autoHideMenuBar;
-            },
-        },
-        {
-            role: "hide",
-        },
-        {
-            role: "hideOthers",
-        },
-        {
-            type: "separator",
-        },
-        {
-            role: "quit",
-        },
     ];
+    if (unamePlatform === "darwin") {
+        appMenu.push(
+            {
+                role: "services",
+            },
+            {
+                type: "separator",
+            },
+            {
+                role: "hide",
+            },
+            {
+                role: "hideOthers",
+            },
+            {
+                type: "separator",
+            }
+        );
+    }
+    appMenu.push({
+        role: "quit",
+    });
     const viewMenu: Electron.MenuItemConstructorOptions[] = [
         {
             role: "forceReload",
@@ -776,8 +777,11 @@ function makeAppMenu() {
             submenu: windowMenu,
         },
     ];
-    const menu = electron.Menu.buildFromTemplate(menuTemplate);
-    electron.Menu.setApplicationMenu(menu);
+    return electron.Menu.buildFromTemplate(menuTemplate);
+}
+
+function makeAppMenu() {
+    electron.Menu.setApplicationMenu(getAppMenu());
 }
 
 electronApp.on("window-all-closed", () => {

frontend/app/tab/tabbar.less

@@ -28,30 +28,19 @@
         height: 33px;
     }
 
-    .dev-label {
+    .dev-label,
+    .app-menu-button {
         height: 100%;
         font-size: 26px;
         user-select: none;
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-top: 2px;
-        color: var(--accent-color);
+        margin: 2px 2px 0 0;
     }
 
-    .prod-label {
-        font-size: 26px;
-        width: 1.25em;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        img {
-            height: 26px;
-            width: 26px;
-            margin-top: 4px;
-        }
+    .dev-label {
+        color: var(--accent-color);
     }
 
     .add-tab-btn {

frontend/app/tab/tabbar.tsx

@@ -3,13 +3,12 @@
 
 import { WindowDrag } from "@/element/windowdrag";
 import { deleteLayoutModelForTab } from "@/layout/index";
-import { atoms, getApi, isDev } from "@/store/global";
+import { atoms, getApi, isDev, PLATFORM } from "@/store/global";
 import * as services from "@/store/services";
 import { useAtomValue } from "jotai";
 import { OverlayScrollbars } from "overlayscrollbars";
 import React, { createRef, useCallback, useEffect, useRef, useState } from "react";
 import { debounce } from "throttle-debounce";
-import logoPng from "../../../public/logos/wave-logo.png";
 import { Button } from "../element/button";
 import { Tab } from "./tab";
 import "./tabbar.less";
@@ -482,22 +481,23 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
         return tabIds.indexOf(tabId) === tabIds.indexOf(activetabid) - 1;
     };
 
-    const tabsWrapperWidth = tabIds.length * tabWidthRef.current;
-    let waveLabel: React.ReactNode = null;
-    if (isDev()) {
-        waveLabel = (
-            <div className="dev-label">
-                <i className="fa fa-brands fa-dev fa-fw" />
-            </div>
-        );
-    } else {
-        waveLabel = (
-            <div className="prod-label">
-                <img src={logoPng} />
-            </div>
-        );
+    function onEllipsisClick() {
+        getApi().showContextMenu();
     }
 
+    const tabsWrapperWidth = tabIds.length * tabWidthRef.current;
+    const devLabel = isDev() ? (
+        <div className="dev-label">
+            <i className="fa fa-brands fa-dev fa-fw" />
+        </div>
+    ) : undefined;
+    const appMenuButton =
+        PLATFORM !== "darwin" ? (
+            <div className="app-menu-button" onClick={onEllipsisClick}>
+                <i className="fa fa-ellipsis" />
+            </div>
+        ) : undefined;
+
     function onUpdateAvailableClick() {
         getApi().installAppUpdate();
     }
@@ -519,7 +519,8 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
     return (
         <div ref={tabbarWrapperRef} className="tab-bar-wrapper">
             <WindowDrag ref={draggerLeftRef} className="left" />
-            {waveLabel}
+            {appMenuButton}
+            {devLabel}
             <div className="tab-bar" ref={tabBarRef} data-overlayscrollbars-initialize>
                 <div className="tabs-wrapper" ref={tabsWrapperRef} style={{ width: `${tabsWrapperWidth}px` }}>
                     {tabIds.map((tabId, index) => {

frontend/types/custom.d.ts

@@ -58,7 +58,7 @@ declare global {
         getPlatform: () => NodeJS.Platform;
         getEnv: (varName: string) => string;
 
-        showContextMenu: (menu: ElectronContextMenuItem[], position: { x: number; y: number }) => void;
+        showContextMenu: (menu?: ElectronContextMenuItem[]) => void;
         onContextMenuClick: (callback: (id: string) => void) => void;
         onNavigate: (callback: (url: string) => void) => void;
         onIframeNavigate: (callback: (url: string) => void) => void;