add visual highlight to matching search query substrings,

add missing aria-label for search input,
fix missing network add icon

scripts/index.js

@@ -38,9 +38,9 @@ async function getInstances () {
 }
 
 async function populateInstances () {
-	const searchQuery = document.querySelector("#search").value;
+	const searchQuery = document.querySelector("#search").value || null;
 	let criteria;
-	if (searchQuery === "") {
+	if (!searchQuery) {
 		criteria = (a, b) => {
 			return (a.vmid > b.vmid) ? 1 : -1;
 		};
@@ -64,11 +64,11 @@ async function populateInstances () {
 		};
 	}
 	instances.sort(criteria);
-	// console.log(instances)
 	const instanceContainer = document.querySelector("#instance-container");
 	instanceContainer.innerHTML = "";
 	for (let i = 0; i < instances.length; i++) {
 		const newInstance = document.createElement("instance-card");
+		instances[i].searchQuery = searchQuery;
 		newInstance.data = instances[i];
 		instanceContainer.append(newInstance);
 	}

scripts/instance.js

@@ -53,7 +53,8 @@ class InstanceCard extends HTMLElement {
 			status: this.status,
 			vmid: this.status,
 			name: this.name,
-			node: this.node
+			node: this.node,
+			searchQuery: this.searchQuery
 		};
 	}
 
@@ -66,6 +67,7 @@ class InstanceCard extends HTMLElement {
 		this.vmid = data.vmid;
 		this.name = data.name;
 		this.node = data.node;
+		this.searchQuery = data.searchQuery;
 		this.update();
 	}
 
@@ -74,7 +76,16 @@ class InstanceCard extends HTMLElement {
 		vmidParagraph.innerText = this.vmid;
 
 		const nameParagraph = this.shadowRoot.querySelector("#instance-name");
-		nameParagraph.innerText = this.name ? this.name : "";
+		if (this.searchQuery) {
+			const nameParts = this.name.split(this.searchQuery);
+			nameParagraph.innerHTML += `<span>${nameParts[0]}</span>`;
+			for (let i = 1; i < nameParts.length; i++) {
+				nameParagraph.innerHTML += `<span style="color: var(--lightbg-text-color); background-color: var(--highlight-color);">${this.searchQuery}</span><span>${nameParts[i]}</span>`;
+			}
+		}
+		else {
+			nameParagraph.innerText = this.name ? this.name : "";
+		}
 
 		const typeParagraph = this.shadowRoot.querySelector("#instance-type");
 		typeParagraph.innerText = this.type;