From 7cee2ff94f79121cc718e4c919bc3d5c3110e788 Mon Sep 17 00:00:00 2001
From: Patrick Balsiger <frupii@gmail.com>
Date: Tue, 30 Sep 2025 22:26:33 +0200
Subject: [PATCH] feat: change drawer behavior

---
 .../components/ClusterMembersComponent.js     |  2 +-
 public/scripts/components/DrawerComponent.js  | 20 ++++++-------------
 .../components/MonitoringViewComponent.js     |  2 +-
 .../components/TopologyGraphComponent.js      |  2 +-
 public/styles/main.css                        | 14 +------------
 5 files changed, 10 insertions(+), 30 deletions(-)

diff --git a/public/scripts/components/ClusterMembersComponent.js b/public/scripts/components/ClusterMembersComponent.js
index 2f3ccc6..ba27dfe 100644
--- a/public/scripts/components/ClusterMembersComponent.js
+++ b/public/scripts/components/ClusterMembersComponent.js
@@ -20,7 +20,7 @@ class ClusterMembersComponent extends Component {
 			}
 		}, 200);
 
-		// Drawer state for desktop
+		// Drawer state for desktop (shared singleton)
 		this.drawer = new DrawerComponent();
 		
 		// Terminal panel container (shared with drawer)
diff --git a/public/scripts/components/DrawerComponent.js b/public/scripts/components/DrawerComponent.js
index cb0d359..4955389 100644
--- a/public/scripts/components/DrawerComponent.js
+++ b/public/scripts/components/DrawerComponent.js
@@ -1,11 +1,16 @@
 // Reusable Drawer Component for desktop slide-in panels
 class DrawerComponent {
     constructor() {
+        if (window.__sharedDrawerInstance) {
+            return window.__sharedDrawerInstance;
+        }
+
         this.detailsDrawer = null;
         this.detailsDrawerContent = null;
-        this.detailsDrawerBackdrop = null;
         this.activeDrawerComponent = null;
         this.onCloseCallback = null;
+
+        window.__sharedDrawerInstance = this;
     }
 
     // Determine if we should use desktop drawer behavior
@@ -20,11 +25,6 @@ class DrawerComponent {
     ensureDrawer() {
         if (this.detailsDrawer) return;
         
-        // Create backdrop
-        this.detailsDrawerBackdrop = document.createElement('div');
-        this.detailsDrawerBackdrop.className = 'details-drawer-backdrop';
-        document.body.appendChild(this.detailsDrawerBackdrop);
-
         // Create drawer
         this.detailsDrawer = document.createElement('div');
         this.detailsDrawer.className = 'details-drawer';
@@ -83,7 +83,6 @@ class DrawerComponent {
                 }
             });
         }
-        this.detailsDrawerBackdrop.addEventListener('click', close);
         document.addEventListener('keydown', (e) => {
             if (e.key === 'Escape') close();
         });
@@ -128,12 +127,10 @@ class DrawerComponent {
 
         // Open drawer
         this.detailsDrawer.classList.add('open');
-        this.detailsDrawerBackdrop.classList.add('visible');
     }
 
     closeDrawer() {
         if (this.detailsDrawer) this.detailsDrawer.classList.remove('open');
-        if (this.detailsDrawerBackdrop) this.detailsDrawerBackdrop.classList.remove('visible');
         
         // Call close callback if provided
         if (this.onCloseCallback) {
@@ -147,13 +144,8 @@ class DrawerComponent {
         if (this.detailsDrawer && this.detailsDrawer.parentNode) {
             this.detailsDrawer.parentNode.removeChild(this.detailsDrawer);
         }
-        if (this.detailsDrawerBackdrop && this.detailsDrawerBackdrop.parentNode) {
-            this.detailsDrawerBackdrop.parentNode.removeChild(this.detailsDrawerBackdrop);
-        }
-        
         this.detailsDrawer = null;
         this.detailsDrawerContent = null;
-        this.detailsDrawerBackdrop = null;
         this.activeDrawerComponent = null;
     }
 
diff --git a/public/scripts/components/MonitoringViewComponent.js b/public/scripts/components/MonitoringViewComponent.js
index d34e120..a829bd0 100644
--- a/public/scripts/components/MonitoringViewComponent.js
+++ b/public/scripts/components/MonitoringViewComponent.js
@@ -10,7 +10,7 @@ class MonitoringViewComponent extends Component {
         // Track if we've already loaded data to prevent unnecessary reloads
         this.dataLoaded = false;
         
-        // Drawer state for desktop
+        // Drawer state for desktop (shared singleton)
         this.drawer = new DrawerComponent();
     }
 
diff --git a/public/scripts/components/TopologyGraphComponent.js b/public/scripts/components/TopologyGraphComponent.js
index 2c29285..48311fc 100644
--- a/public/scripts/components/TopologyGraphComponent.js
+++ b/public/scripts/components/TopologyGraphComponent.js
@@ -10,7 +10,7 @@ class TopologyGraphComponent extends Component {
         this.height = 0;  // Will be set dynamically based on container size
         this.isInitialized = false;
 
-        // Drawer state for desktop reuse (same pattern as ClusterMembersComponent)
+        // Drawer state for desktop reuse (shared singleton)
         this.drawer = new DrawerComponent();
 
         // Tooltip for labels on hover
diff --git a/public/styles/main.css b/public/styles/main.css
index fbf1de7..68b7ba0 100644
--- a/public/styles/main.css
+++ b/public/styles/main.css
@@ -3292,17 +3292,6 @@ select.param-input:focus {
 }
 
 /* Desktop slide-in details drawer */
-.details-drawer-backdrop {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.3);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease;
-    z-index: 999;
-}
-.details-drawer-backdrop.visible { opacity: 1; pointer-events: auto; }
-
 .details-drawer {
     position: fixed;
     top: 0;
@@ -3376,8 +3365,7 @@ select.param-input:focus {
 
 /* Only enable drawer on wider screens; on small keep inline cards */
 @media (max-width: 1023px) {
-    .details-drawer,
-    .details-drawer-backdrop { display: none; }
+    .details-drawer { display: none; }
 }
 
 /* Terminal Panel - bottom-centered modal style */