Optimized the overflow-menu:

1. Close the tippy when a menu item inside the tippy is clicked.
2. When a menu item inside the tippy is selected, move the active state of the menu to the tippy's button.

Author: kerwin612

web_src/css/base.css

@@ -747,6 +747,14 @@ overflow-menu .overflow-menu-button {
   padding: 0;
 }
 
+overflow-menu .overflow-menu-button.active {
+  margin: 0 0 -2px;
+  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/components/DashboardRepoList.vue

@@ -391,7 +391,7 @@ export default defineComponent({
             </div>
           </div>
         </div>
-        <overflow-menu class="ui secondary pointing tabular borderless menu repos-filter">
+        <overflow-menu class="ui secondary pointing tabular borderless menu repos-filter" :active="reposFilter">
           <div class="overflow-menu-items tw-justify-center">
             <a class="item" tabindex="0" :class="{active: reposFilter === 'all'}" @click="changeReposFilter('all')">
               {{ textAll }}

web_src/js/webcomponents/overflow-menu.ts

@@ -1,9 +1,11 @@
 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 {
+  static observedAttributes = ['active'];
+
   tippyContent: HTMLDivElement;
   tippyItems: Array<HTMLElement>;
   button: HTMLButtonElement;
@@ -151,6 +153,10 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
         }, 0);
       },
     });
+
+    this.tippyContent.querySelector('.item').addEventListener('click', () => {
+      this.button._tippy.hide();
+    });
   });
 
   init() {
@@ -218,6 +224,12 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
     }
   }
 
+  attributeChangedCallback() {
+    if (!this.button || !this.tippyContent) return;
+    const containActiveInTippy = this.tippyContent.querySelector('.item.active');
+    toggleClass(this.button, 'active', Boolean(containActiveInTippy));
+  }
+
   disconnectedCallback() {
     this.mutationObserver?.disconnect();
     this.resizeObserver?.disconnect();