feat: highlight selected node

public/scripts/components/ClusterMembersComponent.js

@@ -22,6 +22,9 @@ class ClusterMembersComponent extends Component {
 
 		// Drawer state for desktop
 		this.drawer = new DrawerComponent();
+		
+		// Selection state for highlighting
+		this.selectedMemberIp = null;
 	}
 
 	// Determine if we should use desktop drawer behavior
@@ -31,6 +34,9 @@ class ClusterMembersComponent extends Component {
 
 
 	openDrawerForMember(memberIp) {
+		// Set selected member and update highlighting
+		this.setSelectedMember(memberIp);
+		
 		// Get display name for drawer title
 		let displayName = memberIp;
 		try {
@@ -68,6 +74,9 @@ class ClusterMembersComponent extends Component {
 					</div>
 				`;
 			});
+		}, null, () => {
+			// Close callback - clear selection when drawer is closed
+			this.clearSelectedMember();
 		});
 	}
 
@@ -687,6 +696,32 @@ class ClusterMembersComponent extends Component {
 		// Don't re-render on resume - maintain current state
 		return false;
 	}
+
+	// Set selected member and update highlighting
+	setSelectedMember(memberIp) {
+		// Clear previous selection
+		this.clearSelectedMember();
+		
+		// Set new selection
+		this.selectedMemberIp = memberIp;
+		
+		// Add selected class to the member card
+		const card = this.findElement(`[data-member-ip="${memberIp}"]`);
+		if (card) {
+			card.classList.add('selected');
+		}
+	}
+
+	// Clear selected member highlighting
+	clearSelectedMember() {
+		if (this.selectedMemberIp) {
+			const card = this.findElement(`[data-member-ip="${this.selectedMemberIp}"]`);
+			if (card) {
+				card.classList.remove('selected');
+			}
+			this.selectedMemberIp = null;
+		}
+	}
 }
 
 window.ClusterMembersComponent = ClusterMembersComponent; 

public/scripts/components/DrawerComponent.js

@@ -5,6 +5,7 @@ class DrawerComponent {
         this.detailsDrawerContent = null;
         this.detailsDrawerBackdrop = null;
         this.activeDrawerComponent = null;
+        this.onCloseCallback = null;
     }
 
     // Determine if we should use desktop drawer behavior
@@ -57,8 +58,9 @@ class DrawerComponent {
         });
     }
 
-    openDrawer(title, contentCallback, errorCallback) {
+    openDrawer(title, contentCallback, errorCallback, onCloseCallback) {
         this.ensureDrawer();
+        this.onCloseCallback = onCloseCallback;
 
         // Set drawer title
         const titleEl = this.detailsDrawer.querySelector('.drawer-title');
@@ -101,6 +103,12 @@ class DrawerComponent {
     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) {
+            this.onCloseCallback();
+            this.onCloseCallback = null;
+        }
     }
 
     // Clean up drawer elements