Optimize Overflow Menu

web_src/css/base.css

@@ -747,6 +747,14 @@ overflow-menu .overflow-menu-button {
   padding: 0;
 }
 
+overflow-menu .overflow-menu-button.active {
+  padding: 2px 0 0;
+  border-bottom: 2px solid transparent;
+  background-color: transparent;
+  border-color: currentcolor;
+  font-weight: var(--font-weight-medium);
+}
+
 overflow-menu .overflow-menu-button:hover {
   color: var(--color-text-dark);
 }

web_src/js/webcomponents/overflow-menu.ts

@@ -1,6 +1,6 @@
 import {throttle} from 'throttle-debounce';
 import {createTippy} from '../modules/tippy.ts';
-import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';
+import {isDocumentFragmentOrElementNode, toggleClass} from '../utils/dom.ts';
 import octiconKebabHorizontal from '../../../public/assets/img/svg/octicon-kebab-horizontal.svg';
 
 window.customElements.define('overflow-menu', class extends HTMLElement {
@@ -12,6 +12,11 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
   mutationObserver: MutationObserver;
   lastWidth: number;
 
+  updateButtonActivationState() {
+    if (!this.button || !this.tippyContent) return;
+    toggleClass(this.button, 'active', Boolean(this.tippyContent.querySelector('.item.active')));
+  }
+
   updateItems = throttle(100, () => {
     if (!this.tippyContent) {
       const div = document.createElement('div');
@@ -97,6 +102,21 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
       const itemRight = item.offsetLeft + item.offsetWidth;
       if (menuRight - itemRight < 38) { // roughly the width of .overflow-menu-button with some extra space
         this.tippyItems.push(item);
+
+        // close tippy when clicking item of tippy
+        if (!item.hasAttribute('data-tippy-click-added')) {
+          item.addEventListener('click', () => {
+            this.button?._tippy.hide();
+          });
+          item.setAttribute('data-tippy-click-added', 'true');
+        }
+      }
+      // refresh overflow-button active state
+      if (!item.hasAttribute('data-button-update-click-added')) {
+        item.addEventListener('click', () => {
+          this.updateButtonActivationState();
+        });
+        item.setAttribute('data-button-update-click-added', 'true');
       }
     }
     itemFlexSpace?.style.removeProperty('display');
@@ -126,6 +146,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
     // update existing tippy
     if (this.button?._tippy) {
       this.button._tippy.setContent(this.tippyContent);
+      this.updateButtonActivationState();
       return;
     }
 
@@ -136,6 +157,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
     btn.innerHTML = octiconKebabHorizontal;
     this.append(btn);
     this.button = btn;
+    this.updateButtonActivationState();
 
     createTippy(btn, {
       trigger: 'click',