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;