2 files changed, 27 insertions, 3 deletions
diff --git a/src/app/main.css b/src/app/main.css
index c6c9bb9..8776ec9 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -47,11 +47,19 @@ nobr {white-space: nowrap}
 }
 
 #modsdiv {
+	padding: 1px;
 	border-radius: var(--padding);
 	background: var(--boxbackground);
 	margin: calc(var(--padding) / 3) var(--padding);
 }
 
+.mod {
+	margin: calc(var(--padding) / 3);
+	border-radius: calc(var(--padding) / 2) !important;
+}
+
+.mod.selected {background: var(--background)}
+
 .buttons {
 	text-align: right;
 	margin-left: auto;
diff --git a/src/app/main.js b/src/app/main.js
index ab80ba9..c500ba3 100644
--- a/src/app/main.js
+++ b/src/app/main.js
@@ -45,6 +45,18 @@ function setButtons(state) {
 	}
 }
 
+function select(entry) {
+	let entries = document.querySelectorAll("#modsdiv .mod");
+
+	for (let i = 0; i < entries.length; i++) {
+		if (entries[i].innerHTML == entry) {
+			entries[i].classList.add("selected");
+		} else {
+			entries[i].classList.remove("selected");
+		}
+	}
+}
+
 ipcRenderer.on("ns-updated", () => {setButtons(true)})
 ipcRenderer.on("ns-updating", () => {setButtons(false)})
 
@@ -55,10 +67,14 @@ ipcRenderer.on("newpath", (event, newpath) => {
 ipcRenderer.on("log", (event, msg) => {log(msg)})
 
 ipcRenderer.on("mods", (event, mods) => {
-	modcount.innerHTML = `${lang("gui.mods.count")} ${mods.length}`;
+	modcount.innerHTML = `${lang("gui.mods.count")} ${mods.all.length}`;
 	modsdiv.innerHTML = "";
-	for (let i = 0; i < mods.length; i++) {
-		modsdiv.innerHTML += `<div class="mod">${mods[i].Name}</div>`;
+	for (let i = 0; i < mods.enabled.length; i++) {
+		modsdiv.innerHTML += `<div onclick="select('${mods.enabled[i].Name}')" class="mod">${mods.enabled[i].Name}</div>`;
+	}
+
+	for (let i = 0; i < mods.disabled.length; i++) {
+		modsdiv.innerHTML += `<div onclick="select('${mods.disabled[i].Name} - Disabled')" class="mod">${mods.disabled[i].Name} - Disabled</div>`;
 	}
 })