fix electron titlebar context menu freeze

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>