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)

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;