UI Improvement: Add neon glow effect and auto-scroll to active tab

Author: User

src/components/menulist-tab.ts

@@ -143,6 +143,8 @@ export class MenulistTabElement extends HTMLElement {
 
     if (tab.active) {
       this.tabButton.classList.add("active");
+      // Scroll to center with a small delay to avoid initial render conflicts
+      setTimeout(() => this.scrollIntoViewIfActive(), 100);
     }
 
     // https://qiita.com/piroor/items/44ccbc2ee918bc88c3ea
@@ -161,6 +163,14 @@ export class MenulistTabElement extends HTMLElement {
     this.tabMainElement.style.borderColor = displayedContainer.colorCode;
   }
 
+  private scrollIntoViewIfActive(): void {
+    // Scroll the active tab into view at the center of the sidebar
+    // Using requestAnimationFrame to ensure DOM is ready
+    requestAnimationFrame(() => {
+      this.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    });
+  }
+
   private getShadowElement(id: string): HTMLElement {
     const element = this.shadowRoot?.getElementById(id);
     if (!element) {

static/css/components/menulist-tab.css

@@ -146,6 +146,7 @@ button:focus {
 
 #tab-button.active {
   font-weight: bold;
+  box-shadow: inset 0 0 8px 2px rgba(0, 150, 255, 0.4);
 }
 
 #tab-button:hover, #tab-button:focus {