fix: more alignment

priv/ui/app.css

@@ -146,6 +146,10 @@ button {
   background-color: var(--vscode-toolbar-hoverBackground);
 }
 
+.window-titlebar-menu-button.is-active {
+  background-color: var(--vscode-toolbar-hoverBackground);
+}
+
 .window-titlebar-menu-button:focus,
 .window-titlebar-menu-button:focus-visible,
 .window-titlebar-action-button:focus,
@@ -154,6 +158,61 @@ button {
   box-shadow: none;
 }
 
+.window-titlebar-menu-dropdown {
+  position: absolute;
+  top: 30px;
+  left: 6px;
+  min-width: 210px;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  background-color: var(--vscode-menu-background, var(--vscode-editorWidget-background));
+  border: 1px solid var(--vscode-menu-border, var(--vscode-panel-border));
+  border-radius: 6px;
+  box-shadow: var(--vscode-widget-shadow, 0 8px 24px rgba(0, 0, 0, 0.4));
+  app-region: no-drag;
+  -webkit-app-region: no-drag;
+  z-index: 10;
+}
+
+.window-titlebar-menu-item {
+  border: none;
+  background: transparent;
+  color: var(--vscode-menu-foreground, var(--vscode-foreground));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  text-align: left;
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.window-titlebar-menu-item:focus,
+.window-titlebar-menu-item:focus-visible {
+  outline: none;
+  box-shadow: none;
+  background-color: var(--vscode-toolbar-hoverBackground);
+}
+
+.window-titlebar-menu-item:hover,
+.window-titlebar-menu-item.is-keyboard-active {
+  background-color: var(--vscode-menu-selectionBackground, var(--vscode-toolbar-hoverBackground));
+}
+
+.window-titlebar-menu-item-accelerator {
+  opacity: 0.8;
+}
+
+.window-titlebar-menu-separator {
+  height: 1px;
+  margin: 4px 2px;
+  background-color: var(--vscode-menu-separatorBackground, rgba(255, 255, 255, 0.08));
+}
+
 .window-titlebar-drag-region {
   flex: 1;
   height: 100%;

priv/ui/live.js

@@ -183,6 +183,27 @@ document.addEventListener("DOMContentLoaded", () => {
           }
         };
 
+        this.menuIsOpen = () => {
+          const titlebar = this.el.querySelector("[data-testid='window-titlebar']");
+          return Boolean(titlebar?.dataset.openMenuGroup);
+        };
+
+        this.handleTitlebarPointerDown = (event) => {
+          if (!this.menuIsOpen()) {
+            return;
+          }
+
+          if (event.target.closest("[data-testid='window-titlebar-menu-button']")) {
+            return;
+          }
+
+          if (event.target.closest("[data-testid='window-titlebar-menu-dropdown']")) {
+            return;
+          }
+
+          this.pushEvent("close_titlebar_menu", {});
+        };
+
         this.handleChange = (event) => {
           const select = event.target.closest(".status-bar-language-select");
 
@@ -216,8 +237,16 @@ document.addEventListener("DOMContentLoaded", () => {
           });
         };
 
+        this.handleEscapeKey = (event) => {
+          if (event.key === "Escape" && this.menuIsOpen()) {
+            this.pushEvent("close_titlebar_menu", {});
+          }
+        };
+
         window.addEventListener("bds:native-menu-action", this.handleNativeMenuAction);
         window.addEventListener("keydown", this.handleShortcutKeyDown, true);
+        window.addEventListener("keydown", this.handleEscapeKey, true);
+        window.addEventListener("pointerdown", this.handleTitlebarPointerDown, true);
         this.el.addEventListener("change", this.handleChange);
       },
 
@@ -226,6 +255,8 @@ document.addEventListener("DOMContentLoaded", () => {
         this.el.removeEventListener("change", this.handleChange);
         window.removeEventListener("bds:native-menu-action", this.handleNativeMenuAction);
         window.removeEventListener("keydown", this.handleShortcutKeyDown, true);
+        window.removeEventListener("keydown", this.handleEscapeKey, true);
+        window.removeEventListener("pointerdown", this.handleTitlebarPointerDown, true);
         if (this.destroyOverlaySync) {
           this.destroyOverlaySync();
         }