feat: improve styling

public/scripts/components/MonitoringViewComponent.js

@@ -9,6 +9,9 @@ class MonitoringViewComponent extends Component {
         
         // Track if we've already loaded data to prevent unnecessary reloads
         this.dataLoaded = false;
+        
+        // Drawer state for desktop
+        this.drawer = new DrawerComponent();
     }
 
     mount() {
@@ -75,6 +78,82 @@ class MonitoringViewComponent extends Component {
         await this.viewModel.refresh();
     }
 
+    // Determine if we should use desktop drawer behavior
+    isDesktop() {
+        return this.drawer.isDesktop();
+    }
+
+    // Open drawer for a specific node
+    openDrawerForNode(nodeData) {
+        const { ip, hostname } = nodeData;
+        
+        // Get display name for drawer title
+        let displayName = ip;
+        if (hostname && ip) {
+            displayName = `${hostname} - ${ip}`;
+        } else if (hostname) {
+            displayName = hostname;
+        } else if (ip) {
+            displayName = ip;
+        }
+
+        // Open drawer with content callback
+        this.drawer.openDrawer(displayName, (contentContainer, setActiveComponent) => {
+            // Load and mount NodeDetails into drawer
+            const nodeDetailsVM = new NodeDetailsViewModel();
+            const nodeDetailsComponent = new NodeDetailsComponent(contentContainer, nodeDetailsVM, this.eventBus);
+            setActiveComponent(nodeDetailsComponent);
+
+            nodeDetailsVM.loadNodeDetails(ip).then(() => {
+                nodeDetailsComponent.mount();
+            }).catch((error) => {
+                logger.error('Failed to load node details for drawer:', error);
+                contentContainer.innerHTML = `
+                    <div class="error">
+                        <strong>Error loading node details:</strong><br>
+                        ${this.escapeHtml(error.message)}
+                    </div>
+                `;
+            });
+        });
+    }
+
+    closeDrawer() {
+        this.drawer.closeDrawer();
+    }
+
+    // Clean up resources
+    cleanup() {
+        if (this.drawer) {
+            this.drawer.cleanup();
+        }
+        super.cleanup();
+    }
+
+    // Setup click event listeners for node cards
+    setupNodeCardClickListeners(container) {
+        const nodeCards = container.querySelectorAll('.node-card');
+        nodeCards.forEach(card => {
+            const nodeIp = card.dataset.nodeIp;
+            if (nodeIp) {
+                // Find the node data
+                const nodeResources = this.viewModel.get('nodeResources');
+                const nodeData = nodeResources.get(nodeIp);
+                
+                if (nodeData) {
+                    this.addEventListener(card, 'click', (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        this.openDrawerForNode(nodeData);
+                    });
+                    
+                    // Add hover cursor style
+                    card.style.cursor = 'pointer';
+                }
+            }
+        });
+    }
+
     render() {
         logger.debug('MonitoringViewComponent: Rendering...');
         
@@ -226,6 +305,9 @@ class MonitoringViewComponent extends Component {
                 </div>
             </div>
         `;
+        
+        // Add click event listeners to node cards
+        this.setupNodeCardClickListeners(container);
     }
 
     renderNodeCard(nodeData) {
@@ -233,7 +315,7 @@ class MonitoringViewComponent extends Component {
         
         if (!hasResources) {
             return `
-                <div class="node-card error">
+                <div class="node-card error" data-node-ip="${ip}">
                     <div class="node-header">
                         <div class="node-title">${hostname || ip}</div>
                         <div class="node-ip">${ip}</div>
@@ -297,7 +379,7 @@ class MonitoringViewComponent extends Component {
                                   resourceSource === 'basic' ? '📋 Basic Data' : '❓ Unknown';
         
         return `
-            <div class="node-card">
+            <div class="node-card" data-node-ip="${ip}">
                 <div class="node-header">
                     <div class="node-title">${hostname || ip}</div>
                     <div class="node-ip">${ip}</div>