3 files changed, 50 insertions, 5 deletions
diff --git a/src/app/css/grid.css b/src/app/css/grid.css
index be405e0..2096b9b 100644
--- a/src/app/css/grid.css
+++ b/src/app/css/grid.css
@@ -1,6 +1,6 @@
 @import "theming.css";
 
-.grid .el, .popup .misc, .popup .loading {
+.grid, .grid .el, .popup .misc, .popup .loading {
 	--spacing: calc(var(--padding) / 2);
 	--height: calc(var(--padding) * 3.5);
 	--mischeight: calc(var(--padding) * 1.5);
@@ -22,7 +22,7 @@
 	animation-name: none;
 }
 
-.grid .el, .popup .search,
+.grid .el, input.search,
 .popup #close, .popup .misc button,
 .option .actions select, .option .actions input {
 	color: white;
@@ -36,7 +36,7 @@
 	width: calc(50% - var(--spacing) * 4);
 }
 
-.popup .misc, .popup .search, .option .actions input {
+.popup .misc, input.search, .option .actions input {
 	--height: var(--mischeight);
 }
 
@@ -53,7 +53,7 @@
 	position: fixed;
 }
 
-.popup .search,
+input.search,
 .option .actions input,
 .option .actions select {
 	border: none;
@@ -62,7 +62,7 @@
 	width: calc(100% - var(--spacing) * 2);
 }
 
-.popup .search:focus, 
+input.search:focus, 
 .option .actions input:focus,
 .option .actions button:active {
 	filter: brightness(1.5);
@@ -138,6 +138,11 @@
 	border-radius: var(--spacing);
 }
 
+.grid input {
+	margin: 0;
+	width: 100%;
+}
+
 #modsdiv .el:has(.switch:not(.on)) .image img {
 	opacity: 0.5;
 }
diff --git a/src/app/index.html b/src/app/index.html
index 5421a3f..17e5cf6 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -369,6 +369,9 @@
 									</button>
 								</div>
 							</div>
+							<div class="line">
+								<input id="mods-search" class="search default-selection" placeholder="%%gui.search%%">
+							</div>
 						</div>
 					</div>
 					<div id="nsRelease" class="scroll-selection hidden section"></div>
diff --git a/src/app/js/mods.js b/src/app/js/mods.js
index 9eb528b..511c338 100644
--- a/src/app/js/mods.js
+++ b/src/app/js/mods.js
@@ -203,6 +203,43 @@ mods.load = (mods_obj) => {
 	}
 }
 
+// attempts to filter `#modsdiv` with `query`
+mods.search = (query) => {
+	// if no `query` is given, use the search input's value
+	if (! query) {
+		query = mods.search.el.value;
+	}
+
+	// normalizes `string`
+	let normalize = (string) => {
+		return string
+			.trim().toLowerCase()
+			.replaceAll(" ", "").replaceAll(".", "");
+	}
+
+	// normalize `query`
+	query = normalize(query);
+
+	// get all mod elements
+	let mod_els = document.querySelectorAll("#modsdiv .el");
+
+	// run through all the mod elements
+	for (let mod_el of mod_els) {
+		// get the normalized name of the mod
+		let name = normalize(mod_el.querySelector(".title").innerText);
+
+		// if the name has `query` in it, show it
+		if (name.match(query)) {
+			mod_el.style.display = null;
+		} else { // hide if it doesn't match
+			mod_el.style.display = "none";
+		}
+	}
+}
+
+mods.search.el = document.getElementById("mods-search");
+mods.search.el.addEventListener("keyup", () => {mods.search()})
+
 mods.remove = (mod) => {
 	if (mod.toLowerCase().match(/^northstar\./)) {
 		if (! confirm(lang("gui.mods.required_confirm"))) {