Merge branch 'main' into linux-launch

13 files changed, 416 insertions, 274 deletions

diff --git a/src/app/css/grid.css b/src/app/css/grid.css
new file mode 100644
index 0000000..5c4019c
--- /dev/null
+++ b/src/app/css/grid.css
@@ -0,0 +1,148 @@
+.grid .el, .popup .misc, .popup .loading {
+	--spacing: calc(var(--padding) / 2);
+	--height: calc(var(--padding) * 3.5);
+	--mischeight: calc(var(--padding) * 1.5);
+
+	animation-duration: 0.15s;
+	animation-iteration-count: 1;
+	animation-name: fadein;
+	animation-fill-mode: forwards;
+	animation-timing-function: ease-in-out;
+
+	opacity: 0.0;
+	transition: 0.15s ease-in-out;
+}
+
+.grid .el, .popup #search,
+.popup #close, .popup .misc button,
+.option .actions select, .option .actions input {
+	color: white;
+	display: flex;
+	align-items: center;
+	height: var(--height);
+	margin: var(--spacing);
+	padding: var(--spacing);
+	background: var(--selbg);
+	border-radius: var(--spacing);
+	width: calc(50% - var(--spacing) * 4);
+}
+
+.popup .misc, .popup #search, .option .actions input {
+	--height: var(--mischeight);
+}
+
+.popup .misc {
+	display: flex;
+}
+
+.popup .misc.vertical {
+	display: block;
+}
+
+.popup .misc.fixed {
+	width: 100%;
+	position: fixed;
+}
+
+.popup #search,
+.option .actions input,
+.option .actions select {
+	border: none;
+	outline: none;
+	transition: filter 0.15s ease-in-out;
+	width: calc(100% - var(--spacing) * 2);
+}
+
+.popup #search:focus, 
+.option .actions input:focus,
+.option .actions button:active {
+	filter: brightness(1.5);
+}
+
+.popup .misc button {
+	--height: calc(var(--padding) * 1.5);
+
+	padding: 0px;
+	margin-left: 0px;
+	padding: 0px !important;
+	width: var(--height) !important;
+}
+
+.popup .misc button img {
+	opacity: 0.6;
+	width: var(--height);
+	transform: scale(0.5);
+	height: var(--height) !important;
+}
+
+.popup .misc button:last-child {
+	margin-left: 0px !important;
+}
+
+.popup#preview #close,
+.popup .misc.vertical button {
+	margin: var(--spacing) var(--spacing) 0 auto !important;
+}
+
+.popup .loading {
+	width: 100%;
+	color: white;
+	display: flex;
+	position: absolute;
+	text-align: center;
+	align-items: center;
+	justify-content: center;
+	height: calc(100% - var(--mischeight) - var(--height));
+}
+
+.popup .message {
+	color: white;
+	text-align: center;
+	margin: var(--padding);
+	width: calc(100% - var(--padding));
+}
+
+.grid .el .image, .grid .el .image img {
+	width: var(--height);
+	height: var(--height);
+	margin-right: var(--spacing);
+	border-radius: var(--spacing);
+}
+
+.grid .el .image img.blur {
+	z-index: -1;
+    position: relative;
+    filter: blur(10px);
+    top: calc(var(--height) * -1 + 5px);
+}
+
+.grid .el .text {
+	overflow: hidden;
+}
+
+.grid .el .title, .grid .el .description {
+	height: 1.2em;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.grid .el .title {
+	font-size: 1.2em;
+	font-weight: 700;
+}
+
+.popup .message #loadmore {
+	background: rgb(var(--blue2));
+}
+
+.grid .el .description {font-size: 0.8em}
+.grid .el button {
+	background: rgb(var(--blue));
+	margin-top: var(--spacing);
+}
+
+.grid .el button.info {
+	background: rgb(var(--blue2));
+}
+
diff --git a/src/app/css/launcher.css b/src/app/css/launcher.css
index ce54ddf..5698179 100644
--- a/src/app/css/launcher.css
+++ b/src/app/css/launcher.css
@@ -151,6 +151,15 @@
 	pointer-events: none;
 }
 
+.section .release-block {
+	margin-top: 0px;
+	border-radius: 5px;
+	background: var(--bg);
+	padding: var(--padding);
+	backdrop-filter: blur(15px);
+	margin-bottom: var(--padding);
+}
+
 .contentBody img {max-width: 100%}
 .contentBody .img {text-align: center}
 
@@ -233,14 +242,6 @@
 	background: rgb(var(--red)) !important;
 }
 
-#installmod {background: rgb(var(--blue))}
-#findmod {background: rgb(var(--blue2))}
-
-#togglemod {background: rgb(var(--orange))}
-#toggleall {background: rgb(var(--orange2))}
-
-#removemod {background: rgb(var(--red))}
-#removeall {background: rgb(var(--red2))}
 button:disabled {
 	opacity: 0.5;
 	pointer-events: none;
@@ -261,13 +262,15 @@ code {
 }
 
 #nsMods .line {
+	width: 100%;
 	display: flex;
 	align-items: center;
+	margin: calc(var(--padding) / 2);
 	margin-top: calc(var(--padding) / 2);
 }
 
 #modsdiv {
-	height: 50vh;
+	height: 80vh;
 	overflow-y: scroll;
 	border-radius: 5px;
 	background: var(--bg);
diff --git a/src/app/css/popups.css b/src/app/css/popups.css
index 826955b..8f47d0a 100644
--- a/src/app/css/popups.css
+++ b/src/app/css/popups.css
@@ -64,11 +64,6 @@
 	100% {opacity: 1.0}
 }
 
-#browserEntries {
-	display: flex;
-	flex-wrap: wrap;
-}
-
 .popup webview {
 	width: 78%;
 	margin: 0 auto;
@@ -82,154 +77,6 @@
 	filter: opacity(0.0);
 	pointer-events: none;
 }
-
-.popup .el, .popup .misc, .popup .loading {
-	--spacing: calc(var(--padding) / 2);
-	--height: calc(var(--padding) * 3.5);
-	--mischeight: calc(var(--padding) * 1.5);
-
-	animation-duration: 0.15s;
-	animation-iteration-count: 1;
-	animation-name: fadein;
-	animation-fill-mode: forwards;
-	animation-timing-function: ease-in-out;
-
-	opacity: 0.0;
-	transition: 0.15s ease-in-out;
-}
-
-.popup .el, .popup #search,
-.popup #close, .popup .misc button,
-.option .actions select, .option .actions input {
-	color: white;
-	display: flex;
-	align-items: center;
-	height: var(--height);
-	margin: var(--spacing);
-	padding: var(--spacing);
-	background: var(--selbg);
-	border-radius: var(--spacing);
-	width: calc(50% - var(--spacing) * 4);
-}
-
-.popup .misc, .popup #search, .option .actions input {
-	--height: var(--mischeight);
-}
-
-.popup .misc {
-	display: flex;
-}
-
-.popup .misc.vertical {
-	display: block;
-}
-
-.popup .misc.fixed {
-	width: 100%;
-	position: fixed;
-}
-
-.popup #search,
-.option .actions input,
-.option .actions select {
-	border: none;
-	outline: none;
-	transition: filter 0.15s ease-in-out;
-	width: calc(100% - var(--spacing) * 2);
-}
-
-.popup #search:focus, 
-.option .actions input:focus,
-.option .actions button:active {
-	filter: brightness(1.5);
-}
-
-.popup .misc button {
-	--height: calc(var(--padding) * 1.5);
-
-	padding: 0px;
-	margin-left: 0px;
-	padding: 0px !important;
-	width: var(--height) !important;
-}
-
-.popup .misc button img {
-	opacity: 0.6;
-	width: var(--height);
-	transform: scale(0.5);
-	height: var(--height) !important;
-}
-
-.popup .misc button:last-child {
-	margin-left: 0px !important;
-}
-
-.popup#preview #close,
-.popup .misc.vertical button {
-	margin: var(--spacing) var(--spacing) 0 auto !important;
-}
-
-.popup .loading {
-	width: 100%;
-	color: white;
-	display: flex;
-	position: absolute;
-	text-align: center;
-	align-items: center;
-	justify-content: center;
-	height: calc(100% - var(--mischeight) - var(--height));
-}
-
-.popup .message {
-	color: white;
-	text-align: center;
-	margin: var(--padding);
-	width: calc(100% - var(--padding));
-}
-
-.popup .el .image, .popup .el .image img {
-	width: var(--height);
-	height: var(--height);
-	margin-right: var(--spacing);
-	border-radius: var(--spacing);
-}
-
-.popup .el .image img.blur {
-	z-index: -1;
-    position: relative;
-    filter: blur(10px);
-    top: calc(var(--height) * -1 + 5px);
-}
-
-.popup .el .text {
-	overflow: hidden;
-}
-
-.popup .el .title, .popup .el .description {
-	height: 1.2em;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-.popup .el .title {
-	font-size: 1.2em;
-	font-weight: 700;
-}
-
-.popup .message #loadmore {
-	background: rgb(var(--blue2));
-}
-
-.popup .el .description {font-size: 0.8em}
-.popup .el button {
-	background: rgb(var(--blue));
-	margin-top: var(--spacing);
-}
-
-.popup .el button.info {
-	background: rgb(var(--blue2));
-}
 /* } */
 
 /* settings popup { */
@@ -356,6 +203,12 @@
 
 .title {
 	display: flex;
+	margin-top: calc(var(--padding) * 2);
+	margin-bottom: calc(var(--padding) / 2);
+}
+
+.title:first-child {
+	margin-top: 0px;
 }
 
 .title img {
@@ -365,6 +218,7 @@
 }
 
 .title h2 {
+	margin: 0px;
 	margin-left: calc(var(--padding) / 3);
 }
 
diff --git a/src/app/css/theming.css b/src/app/css/theming.css
index 2d45b1d..6d7e223 100644
--- a/src/app/css/theming.css
+++ b/src/app/css/theming.css
@@ -60,3 +60,12 @@ a:hover {
 	color: black !important;
 	background: rgb(var(--red)) !important;
 }
+
+.blue {background: rgb(var(--blue)) !important}
+.blue2 {background: rgb(var(--blue2)) !important}
+
+.orange {background: rgb(var(--orange)) !important}
+.orange2 {background: rgb(var(--orange2)) !important}
+
+.red {background: rgb(var(--red)) !important}
+.red2 {background: rgb(var(--red2)) !important}
diff --git a/src/app/index.html b/src/app/index.html
index c32d18f..f073cac 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -179,7 +179,7 @@
 					<img src="icons/close.png">
 				</button>
 			</div>
-			<div id="browserEntries">
+			<div id="browserEntries" class="grid">
 				<div class="loading">%%gui.browser.loading%%</div>
 			</div>
 		</div>
@@ -252,19 +252,18 @@
 						</div>
 					</div>
 					<div id="nsMods" class="hidden section">
-						<div id="modsdiv">
-						</div>
+						<div id="modsdiv" class="grid">
 						<div class="line">
 							<div class="text" id="modcount">%%gui.mods%%</div>
 							<div class="buttons modbtns">
-								<button id="removemod" onclick="selected().remove()">%%gui.mods.remove%%</button>
-								<button id="removeall" onclick="selected(true).remove()">%%gui.mods.removeall%%</button>
-								<button id="togglemod" onclick="selected().toggle()">%%gui.mods.toggle%%</button>
-								<button id="toggleall" onclick="selected(true).toggle(true)">%%gui.mods.toggleall%%</button>
-								<button id="installmod" onclick="installmod()">%%gui.mods.install%%</button>
-								<button id="findmod" onclick="Browser.toggle(true)">%%gui.mods.find%%</button>
+								<button id="removeall" class="red2" onclick="mods.remove('allmods')">%%gui.mods.removeall%%</button>
+								<button id="toggleall" class="orange2" onclick="selected(true).toggle(true)">%%gui.mods.toggleall%%</button>
+								<button id="installmod" class="blue" onclick="installmod()">%%gui.mods.install%%</button>
+								<button id="findmod" class="blue2" onclick="Browser.toggle(true)">%%gui.mods.find%%</button>
 							</div>
 						</div>
+
+						</div>
 					</div>
 					<div id="nsRelease" class="hidden section"></div>
 				</div>
@@ -286,9 +285,11 @@
 
 		<script src="lang.js"></script>
 		<script src="main.js"></script>
-		<script src="toast.js"></script>
-		<script src="browser.js"></script>
-		<script src="settings.js"></script>
-		<script src="launcher.js"></script>
+		<script src="js/misc.js"></script>
+		<script src="js/mods.js"></script>
+		<script src="js/toast.js"></script>
+		<script src="js/browser.js"></script>
+		<script src="js/settings.js"></script>
+		<script src="js/launcher.js"></script>
 	</body>
-<
+</html>
diff --git a/src/app/browser.js b/src/app/js/browser.js
index db68d31..fcb79a2 100644
--- a/src/app/browser.js
+++ b/src/app/js/browser.js
@@ -319,16 +319,17 @@ function BrowserEl(properties) {
 	}
 
 	let installstr = lang("gui.browser.install");
+	let normalized_mods = [];
 
-	if (normalize(modsdiv.innerText.split("\n")).includes(normalize(properties.title))) {
+	for (let i = 0; i < modsobj.all; i++) {
+		normalized_mods.push(normalize(mods_list[i].Name));
+	}
+
+	if (normalized_mods.includes(normalize(properties.title))) {
 		installstr = lang("gui.browser.reinstall");
 
-		for (let i = 0; i < modsobj.all.length; i++) {
-			if (normalize(modsobj.all[i].Name) == normalize(properties.title)
-				&& "v" + modsobj.all[i].Version != properties.version) {
-				
-				installstr = lang("gui.browser.update");
-			}
+		if (version.is_newer(properties.version, modsobj.all[i].Version)) {
+			installstr = lang("gui.browser.update");
 		}
 	} else {
 		for (let i = 0; i < modsobj.all.length; i++) {
@@ -342,9 +343,7 @@ function BrowserEl(properties) {
 			if (title.includes(folder) || title.includes(manifestname)) {
 				installstr = lang("gui.browser.reinstall");
 
-				if (folder == title
-					&& "v" + modsobj.all[i].Version != properties.version) {
-					
+				if (version.is_newer(properties.version, modsobj.all[i].Version)) {
 					installstr = lang("gui.browser.update");
 				}
 			}
@@ -363,16 +362,35 @@ function BrowserEl(properties) {
 		<div class="text">
 			<div class="title">${properties.title}</div>
 			<div class="description">${properties.description}</div>
-			<button class="install" onclick='installFromURL("${properties.download}", ${JSON.stringify(properties.dependencies)}, true)'>${installstr}</button>
+			<button class="install" onclick=''>${installstr}</button>
 			<button class="info" onclick="Preview.set('${properties.url}')">${lang('gui.browser.view')}</button>
 			<button class="visual">${properties.version}</button>
 			<button class="visual">${lang("gui.browser.madeby")} ${properties.author}</button>
 		</div>
 	`
 
+	entry.querySelector("button.install").addEventListener("click", () => {
+		installFromURL(
+			properties.download,
+			JSON.stringify(properties.dependencies),
+			true, properties.author
+		)
+	})
+
 	browserEntries.appendChild(entry);
 }
 
+let recent_toasts = {};
+function add_recent_toast(name, timeout = 3000) {
+	if (recent_toasts[name]) {return}
+
+	recent_toasts[name] = true;
+
+	setTimeout(() => {
+		delete recent_toasts[name];
+	}, timeout)
+}
+
 ipcRenderer.on("removed-mod", (event, mod) => {
 	setButtons(true);
 	Browser.setbutton(mod.name, lang("gui.browser.install"));
@@ -382,6 +400,9 @@ ipcRenderer.on("removed-mod", (event, mod) => {
 })
 
 ipcRenderer.on("failed-mod", (event, modname) => {
+	if (recent_toasts["failed" + modname]) {return}
+	add_recent_toast("failed" + modname);
+
 	setButtons(true);
 	new Toast({
 		timeout: 10000,
@@ -391,6 +412,19 @@ ipcRenderer.on("failed-mod", (event, modname) => {
 	})
 })
 
+ipcRenderer.on("duped-mod", (event, modname) => {
+	if (recent_toasts["duped" + modname]) {return}
+	add_recent_toast("duped" + modname);
+
+	setButtons(true);
+	new Toast({
+		timeout: 10000,
+		scheme: "warning",
+		title: lang("gui.toast.title.duped"),
+		description: modname + " " + lang("gui.toast.desc.duped")
+	})
+})
+
 ipcRenderer.on("no-internet", (event, modname) => {
 	setButtons(true);
 	new Toast({
@@ -402,6 +436,9 @@ ipcRenderer.on("no-internet", (event, modname) => {
 })
 
 ipcRenderer.on("installed-mod", (event, mod) => {
+	if (recent_toasts["installed" + mod.name]) {return}
+	add_recent_toast("installed" + mod.name);
+
 	setButtons(true);
 	Browser.setbutton(mod.name, lang("gui.browser.reinstall"));
 
@@ -421,7 +458,11 @@ ipcRenderer.on("installed-mod", (event, mod) => {
 	})
 
 	if (installqueue.length != 0) {
-		installFromURL("https://thunderstore.io/package/download/" + installqueue[0]);
+		installFromURL(
+			"https://thunderstore.io/package/download/" + installqueue[0].pkg,
+			false, false, installqueue[0].author
+		)
+
 		installqueue.shift();
 	}
 })
diff --git a/src/app/launcher.js b/src/app/js/launcher.js
index e1dbbe0..5330b7a 100644
--- a/src/app/launcher.js
+++ b/src/app/js/launcher.js
@@ -31,7 +31,11 @@ function formatRelease(notes) {
 	} else {
 		for (let release of notes) {
 			if (release.prerelease) {continue}
-			content += "# " + release.name + "\n\n"	+ release.body + "\n\n\n";
+			let new_content = "# " + release.name + "\n\n"	+ release.body + "\n\n\n";
+			content +=
+				"<div class='release-block'>\n"
+					+ markdown(new_content, {breaks: true}) + "\n" +
+				"</div>";
 		}
 	
 		content = content.replaceAll(/\@(\S+)/g, `<a href="https://github.com/$1">@$1</a>`);
diff --git a/src/app/js/misc.js b/src/app/js/misc.js
new file mode 100644
index 0000000..b35f239
--- /dev/null
+++ b/src/app/js/misc.js
@@ -0,0 +1,44 @@
+version = {
+	is_newer: (version1, version2) => {
+		version1 = version.format(version1, true).split(".");
+		version2 = version.format(version2, true).split(".");
+
+		for (let i = 0; i < version1.length; i++) {
+
+
+			let nums = [
+				parseInt(version1[i]) || 0,
+				parseInt(version2[i]) || 0
+			];
+			if (nums[0] > nums[1]) {
+				return true;
+			} else if (nums[0] < nums[1]) {
+				return false;
+			}
+		}
+
+		return false;
+	},
+	format: (version_number, no_leading_v) => {
+		version_number = version_number.trim();
+
+		if (no_leading_v) {
+			if (version_number[0] == "v") {
+				return version_number.slice(1, version_number.length);
+			}
+
+			return version_number;
+			if (no_leading_v) {
+				return version_number
+			}
+
+			return "v" + version_number;
+		} else {
+			if (version_number[0] != "v") {
+				return "v" + version_number;
+			}
+		}
+
+		return version_number;
+	}
+}
diff --git a/src/app/js/mods.js b/src/app/js/mods.js
new file mode 100644
index 0000000..39e904e
--- /dev/null
+++ b/src/app/js/mods.js
@@ -0,0 +1,81 @@
+var mods = {};
+
+mods.load = (mods_obj) => {
+	modcount.innerHTML = `${lang("gui.mods.count")} ${mods_obj.all.length}`;
+
+	let normalized_names = [];
+	
+	let set_mod = (mod) => {
+		let image_url = "";
+		let normalized_name = "mod-list-" + normalize(mod.Name);
+
+		normalized_names.push(normalized_name);
+
+		if (document.getElementById(normalized_name)) {
+			return;
+		}
+
+		let div = document.createElement("div");
+		div.classList.add("el");
+		div.id = normalized_name;
+
+		div.innerHTML += `
+			<div class="image">
+				<img src="${image_url}">
+				<img class="blur" src="${image_url}">
+			</div>
+			<div class="text">
+				<div class="title">${mod.Name}</div>
+				<div class="description">${mod.Description}</div>
+				<button class="red" onclick="mods.remove('${mod.Name}')">Remove</button>
+				<button class="visual">${mod.Version}</button>
+				<button class="visual">by ${mod.Author || "Unknown"}</button>
+			</div>
+		`;
+
+		if (! image_url) {
+			div.querySelector(".image").remove();
+		}
+
+		modsdiv.append(div);
+	}
+
+	for (let i = 0; i < mods_obj.all.length; i++) {
+		set_mod(mods_obj.all[i]);
+	}
+
+	let mod_els = document.querySelectorAll("#modsdiv .el");
+	for (let i = 0; i < mod_els.length; i++) {
+		if (! normalized_names.includes(mod_els[i].id)) {
+			mod_els[i].remove();
+		}
+	}
+}
+
+mods.remove = (mod) => {
+	if (mod.match(/^northstar\./)) {
+		if (! confirm(lang("gui.mods.required.confirm"))) {
+			return;
+		}
+	} else if (mod == "allmods") {
+		if (! confirm(lang("gui.mods.removeall.confirm"))) {
+			return;
+		}
+	}
+
+	ipcRenderer.send("remove-mod", mod);
+}
+
+mods.toggle = (mod) => {
+			if (mod.match(/^Northstar\./)) {
+				if (! confirm(lang("gui.mods.required.confirm"))) {
+					return;
+				}
+			} else if (mod == "allmods") {
+				if (! confirm(lang("gui.mods.toggleall.confirm"))) {
+					return;
+				}
+			}
+
+			ipcRenderer.send("toggle-mod", mod);
+}
diff --git a/src/app/settings.js b/src/app/js/settings.js
index 34975fe..34975fe 100644
--- a/src/app/settings.js
+++ b/src/app/js/settings.js
diff --git a/src/app/toast.js b/src/app/js/toast.js
index 9cb8996..3bc1745 100644
--- a/src/app/toast.js
+++ b/src/app/js/toast.js
@@ -3,6 +3,7 @@ function Toast(properties) {
 		fg: "#000000",
 		bg: "#FFFFFF",
 		timeout: 3000,
+		callback: () => {},
 		title: "Untitled Toast",
 		description: "No description provided for toast",
 		...properties
@@ -34,7 +35,10 @@ function Toast(properties) {
 	el.style.background = toast.bg;
 
 	el.id = id;
-	el.setAttribute("onclick", `dismissToast(${id})`);
+	el.addEventListener("click", () => {
+		dismissToast(id);
+		toast.callback();
+	})
 
 	el.innerHTML = `
 		<div class="title">${toast.title}</div>
diff --git a/src/app/main.css b/src/app/main.css
index f39c5a1..17ed3ee 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -1,3 +1,4 @@
+@import "css/grid.css";
 @import "css/dragui.css";
 @import "css/toasts.css";
 @import "css/popups.css";
@@ -27,7 +28,7 @@ button {
 button:hover {filter: brightness(110%)}
 button:active {filter: brightness(90%)}
 
-.popup, #modsdiv {
+.popup, #modsdiv, .release-block {
 	outline: 1px solid #444444;
 	border: 3px solid var(--bg);
 }
@@ -105,3 +106,11 @@ a, button, #close, #nsRelease, #vpReleaseNotes,
 .mod, #overlay, #modsdiv, #winbtns, .contentMenu {
 	-webkit-app-region: no-drag;
 }
+
+/* grids */
+
+.grid {
+	display: flex;
+	flex-wrap: wrap;
+}
+
diff --git a/src/app/main.js b/src/app/main.js
index ad1a44f..6120428 100644
--- a/src/app/main.js
+++ b/src/app/main.js
@@ -153,68 +153,24 @@ ipcRenderer.on("ns-update-event", (event, key) => {
 	}
 });
 
-let lastselected = "";
-function select(entry) {
-	let entries = document.querySelectorAll("#modsdiv .mod .modtext");
-
-	for (let i = 0; i < entries.length; i++) {
-		if (entries[i].innerHTML == entry) {
-			lastselected = entry;
-			entries[i].parentElement.classList.add("selected");
-		} else {
-			entries[i].parentElement.classList.remove("selected");
-		}
-	}
-}
-
-// Mod selection
-function selected(all) {
-	let selected = "";
-	if (all) {
-		selected = "allmods"
-	} else {
-		selected = document.querySelector(".mod.selected .modtext");
-		if (selected != null) {
-			selected = selected.innerHTML;
-		} else {
-			alert(lang("gui.mods.nothingselected"));
-			return {
-				remove: () => {},
-				toggle: () => {},
-			}
+ipcRenderer.on("unknown-error", (event, err) => {
+	new Toast({
+		timeout: 10000,
+		scheme: "error",
+		title: lang("gui.toast.title.unknown_error"),
+		description: lang("gui.toast.desc.unknown_error"),
+		callback: () => {
+			new Toast({
+				timeout: 15000,
+				scheme: "error",
+				title: "",
+				description: err.stack.replaceAll("\n", "<br>")
+			})
 		}
-	}
-
-	return {
-		remove: () => {
-
-			if (selected.match(/^Northstar\./)) {
-				if (! confirm(lang("gui.mods.required.confirm"))) {
-					return;
-				}
-			} else if (selected == "allmods") {
-				if (! confirm(lang("gui.mods.removeall.confirm"))) {
-					return;
-				}
-			}
+	})
 
-			ipcRenderer.send("remove-mod", selected);
-		},
-		toggle: () => {
-			if (selected.match(/^Northstar\./)) {
-				if (! confirm(lang("gui.mods.required.confirm"))) {
-					return;
-				}
-			} else if (selected == "allmods") {
-				if (! confirm(lang("gui.mods.toggleall.confirm"))) {
-					return;
-				}
-			}
-
-			ipcRenderer.send("toggle-mod", selected);
-		}
-	}
-}
+	console.error(err.stack)
+})
 
 let installqueue = [];
 
@@ -231,7 +187,7 @@ function installFromPath(path) {
 }
 
 // Tells the main process to install a mod from a URL
-function installFromURL(url, dependencies, clearqueue) {
+function installFromURL(url, dependencies, clearqueue, author) {
 	if (clearqueue) {installqueue = []};
 
 	let prettydepends = [];
@@ -244,7 +200,11 @@ function installFromURL(url, dependencies, clearqueue) {
 				depend = dependencies[i].replaceAll("-", "/");
 				let pkg = depend.split("/");
 				if (! isModInstalled(pkg[1])) {
-					newdepends.push(depend);
+					newdepends.push({
+						pkg: depend,
+						author: pkg[0]
+					});
+
 					prettydepends.push(`${pkg[1]} v${pkg[2]} - ${lang("gui.browser.madeby")} ${pkg[0]}`);
 				}
 			}
@@ -261,7 +221,7 @@ function installFromURL(url, dependencies, clearqueue) {
 	}
 
 	setButtons(false);
-	ipcRenderer.send("install-from-url", url, dependencies);
+	ipcRenderer.send("install-from-url", url, author);
 
 	if (dependencies) {
 		installqueue = dependencies;
@@ -294,27 +254,11 @@ ipcRenderer.on("log", (event, msg) => {log(msg)})
 ipcRenderer.on("alert", (event, msg) => {alert(msg)})
 
 // Updates the installed mods
-ipcRenderer.on("mods", (event, mods) => {
-	modsobj = mods;
-	if (! mods) {return}
-
-	modcount.innerHTML = `${lang("gui.mods.count")} ${mods.all.length}`;
-	modsdiv.innerHTML = "";
-	
-	let newmod = (name, disabled) => {
-		if (disabled) {
-			disabled  = `<span class="disabled">${lang("gui.mods.disabledtag")}</span>`
-		} else {
-			disabled  = ""
-		}
-
-		modsdiv.innerHTML += `<div onclick="select('${name}')" class="mod"><span class="modtext">${name}</span>${disabled}</div>`;
-	}
-
-	for (let i = 0; i < mods.enabled.length; i++) {newmod(mods.enabled[i].Name)}
-	for (let i = 0; i < mods.disabled.length; i++) {newmod(mods.disabled[i].Name, " - Disabled")}
+ipcRenderer.on("mods", (event, mods_obj) => {
+	modsobj = mods_obj;
+	if (! mods_obj) {return}
 
-	select(lastselected);
+	mods.load(mods_obj);
 })
 
 // Updates version numbers