fix electron titlebar context menu freeze

src/main/index.ts

@@ -617,6 +617,16 @@ function attachDevToolsShortcut(window: BrowserWindow): void {
   })
 }
 
+function suppressSystemContextMenu(window: BrowserWindow): void {
+  type SystemContextMenuWindow = BrowserWindow & {
+    on(event: 'system-context-menu', listener: (event: { preventDefault: () => void }) => void): BrowserWindow
+  }
+
+  ;(window as SystemContextMenuWindow).on('system-context-menu', (event) => {
+    event.preventDefault()
+  })
+}
+
 function createWindow(): void {
   const appWindows = new Map<string, BrowserWindow>()
   const appProcesses = new Map<string, ChildProcess>()
@@ -634,6 +644,7 @@ function createWindow(): void {
     }
   })
   attachDevToolsShortcut(mainWindow)
+  suppressSystemContextMenu(mainWindow)
 
   mainWindow.on('ready-to-show', () => {
     setTimeout(() => {
@@ -822,7 +833,7 @@ function createWindow(): void {
     }
     const existingProc = appProcesses.get(appName)
     if (existingProc) {
-      if (is.dev && handoffCode && audienceApp !== 'ADS IDE') {
+      if (handoffCode) {
         existingProc.kill()
         appProcesses.delete(appName)
       } else {
@@ -928,6 +939,7 @@ function createWindow(): void {
     })
     appWindows.set(appName, appWin)
     attachDevToolsShortcut(appWin)
+    suppressSystemContextMenu(appWin)
 
     if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
       appWin.loadURL(process.env['ELECTRON_RENDERER_URL'])

src/renderer/src/components/TitleBar.tsx

@@ -16,17 +16,27 @@ function TitleBar({ appName }: TitleBarProps): React.JSX.Element {
     event.preventDefault()
     event.stopPropagation()
   }
-
+  const handleWindowControlMouseDown = (event: React.MouseEvent<HTMLButtonElement>): void => {
+    if (event.button !== 0) suppressTitlebarContextMenu(event)
+  }
+  const releaseWindowControlFocus = (event: React.SyntheticEvent<HTMLButtonElement>): void => {
+    event.currentTarget.blur()
+  }
+  const windowControlStyle = { WebkitAppRegion: 'no-drag' } as React.CSSProperties
 
   const winBtn =
-    'flex h-[20px] w-[20px] items-center justify-center text-white/50 hover:text-white transition cursor-pointer'
+    'flex h-[20px] w-[20px] items-center justify-center text-white/50 hover:text-white transition cursor-pointer focus:outline-none'
 
   return (
     <>
       <div
         className="flex h-[38px] shrink-0 items-center justify-between border-b border-white/10 bg-[#111520] px-4 pl-5 select-none"
         style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
+        onContextMenuCapture={suppressTitlebarContextMenu}
         onContextMenu={suppressTitlebarContextMenu}
+        onMouseDownCapture={(event) => {
+          if (event.button === 2) suppressTitlebarContextMenu(event)
+        }}
         onMouseDown={(event) => {
           if (event.button === 2) suppressTitlebarContextMenu(event)
         }}
@@ -48,17 +58,50 @@ function TitleBar({ appName }: TitleBarProps): React.JSX.Element {
           className="flex items-center gap-3"
           style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
         >
-          <button onClick={handleMinimize} className={winBtn}>
+          <button
+            type="button"
+            tabIndex={-1}
+            onClick={handleMinimize}
+            onPointerDownCapture={handleWindowControlMouseDown}
+            onMouseDown={handleWindowControlMouseDown}
+            onMouseUp={releaseWindowControlFocus}
+            onAuxClick={suppressTitlebarContextMenu}
+            onContextMenuCapture={suppressTitlebarContextMenu}
+            onContextMenu={suppressTitlebarContextMenu}
+            className={winBtn}
+            style={windowControlStyle}
+          >
             <Minus size={12} strokeWidth={2.5} />
           </button>
 
-          <button onClick={handleMaximize} className={winBtn}>
+          <button
+            type="button"
+            tabIndex={-1}
+            onClick={handleMaximize}
+            onPointerDownCapture={handleWindowControlMouseDown}
+            onMouseDown={handleWindowControlMouseDown}
+            onMouseUp={releaseWindowControlFocus}
+            onAuxClick={suppressTitlebarContextMenu}
+            onContextMenuCapture={suppressTitlebarContextMenu}
+            onContextMenu={suppressTitlebarContextMenu}
+            className={winBtn}
+            style={windowControlStyle}
+          >
             <Square size={11} strokeWidth={2.5} />
           </button>
 
           <button
+            type="button"
+            tabIndex={-1}
             onClick={handleClose}
+            onPointerDownCapture={handleWindowControlMouseDown}
+            onMouseDown={handleWindowControlMouseDown}
+            onMouseUp={releaseWindowControlFocus}
+            onAuxClick={suppressTitlebarContextMenu}
+            onContextMenuCapture={suppressTitlebarContextMenu}
+            onContextMenu={suppressTitlebarContextMenu}
             className={`${winBtn} hover:text-red-400`}
+            style={windowControlStyle}
           >
             <X size={12} strokeWidth={2.5} />
           </button>