From 5ca5ffac8dfe65b7e48c703483eaddb7da593f2b Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sun, 19 Jan 2025 20:00:26 +0000
Subject: [PATCH] tmp

---
 .../dockview/components/titlebar/tabs.scss    | 31 +++++++++++++++++++
 .../src/dockview/components/titlebar/tabs.tsx | 30 +++++++++---------
 2 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabs.scss b/packages/dockview-core/src/dockview/components/titlebar/tabs.scss
index 01b715404..62f600047 100644
--- a/packages/dockview-core/src/dockview/components/titlebar/tabs.scss
+++ b/packages/dockview-core/src/dockview/components/titlebar/tabs.scss
@@ -39,4 +39,35 @@
             height: 100%;
         }
     }
+
+    &.dv-tabs-overflow-container {
+        flex-direction: column;
+        height: unset;
+
+        .dv-tab {
+            height: var(--dv-tabs-and-actions-container-height);
+        }
+
+        .dv-active-tab {
+            background-color: var(
+                --dv-activegroup-visiblepanel-tab-background-color
+            );
+            color: var(--dv-activegroup-visiblepanel-tab-color);
+        }
+        .dv-inactive-tab {
+            background-color: var(
+                --dv-activegroup-hiddenpanel-tab-background-color
+            );
+            color: var(--dv-activegroup-hiddenpanel-tab-color);
+        }
+    }
+}
+
+.dv-tabs-panel {
+    .dv-tabs-overflow-handle {
+        height: 100%;
+        width: 15px;
+        flex-shrink: 0;
+        background-color: red;
+    }
 }
diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabs.tsx b/packages/dockview-core/src/dockview/components/titlebar/tabs.tsx
index 0a86dd54b..a477531a4 100644
--- a/packages/dockview-core/src/dockview/components/titlebar/tabs.tsx
+++ b/packages/dockview-core/src/dockview/components/titlebar/tabs.tsx
@@ -220,6 +220,7 @@ export class Tabs extends CompositeDisposable {
 
     private toggleDropdown(show: boolean): void {
         this._hasOverflow = show;
+
         if (this._dropdownAnchor) {
             this._dropdownAnchor.remove();
             this._dropdownAnchor = null;
@@ -230,28 +231,29 @@ export class Tabs extends CompositeDisposable {
         }
 
         this._dropdownAnchor = document.createElement('div');
-        this._dropdownAnchor.style.width = '10px';
-        this._dropdownAnchor.style.height = '100%';
-        this._dropdownAnchor.style.flexShrink = '0';
-        this._dropdownAnchor.style.backgroundColor = 'red';
+        this._dropdownAnchor.className = 'dv-tabs-overflow-handle';
 
         this.element.appendChild(this._dropdownAnchor);
 
         addDisposableListener(this._dropdownAnchor, 'click', (event) => {
             const el = document.createElement('div');
-            el.style.width = '200px';
-            el.style.maxHeight = '600px';
             el.style.overflow = 'auto';
-            el.style.backgroundColor = 'lightgreen';
+            el.className =
+                'dv-tabs-and-actions-container dv-tabs-container dv-tabs-overflow-container';
 
             this.tabs.map((tab) => {
-                const tab2 = new Tab(
-                    tab.value.panel,
-                    this.accessor,
-                    this.group
-                );
-                tab2.setContent(tab.value.panel.view.newTab);
-                el.appendChild(tab2.element);
+                const child = tab.value.element.cloneNode(true);
+
+                const wrapper = document.createElement('div');
+
+                wrapper.addEventListener('mousedown', () => {
+                    this.accessor.popupService.close();
+                    tab.value.element.scrollIntoView();
+                    tab.value.panel.api.setActive();
+                });
+                wrapper.appendChild(child);
+
+                el.appendChild(wrapper);
             });
 
             this.accessor.popupService.openPopover(el, {