4 files changed, 64 insertions, 1 deletions

diff --git a/src/app/css/grid.css b/src/app/css/grid.css
index 188f32a..be405e0 100644
--- a/src/app/css/grid.css
+++ b/src/app/css/grid.css
@@ -77,6 +77,24 @@
 	width: var(--height) !important;
 }
 
+.popup .misc button.long {
+	width: max-content !important;
+	padding-right: var(--spacing) !important;
+}
+
+.popup .misc button select {
+	color: white;
+	border: none;
+	opacity: 0.6;
+	outline: none;
+	background: transparent;
+}
+
+.popup .misc button select option {
+	color: white;
+	background: var(--selbg);
+}
+
 .popup .misc button img {
 	margin: 0px;
 	opacity: 0.6;
diff --git a/src/app/icons/sort.png b/src/app/icons/sort.png
new file mode 100644
index 0000000..3dd80d6
--- /dev/null
+++ b/src/app/icons/sort.png
diff --git a/src/app/index.html b/src/app/index.html
index 9e97810..98c59d4 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -254,6 +254,15 @@
 
 			<div class="misc">
 				<input class="search default-selection" placeholder="%%gui.search%%">
+				<button class="long" id="sort">
+					<img src="icons/sort.png" value="unix_created">
+					<select>
+						<option value="unix_created">%%gui.browser.sort.newest%%</option>
+						<option value="unix_updated">%%gui.browser.sort.last_updated%%</option>
+						<option value="rating_score">%%gui.browser.sort.highest_rating%%</option>
+						<option value="downloads">%%gui.browser.sort.most_downloads%%</option>
+					</select>
+				</button>
 				<button id="filter" onclick="browser.filters.toggle()">
 					<img src="icons/filter.png">
 				</button>
diff --git a/src/app/js/browser.js b/src/app/js/browser.js
index aaca6a8..88e8017 100644
--- a/src/app/js/browser.js
+++ b/src/app/js/browser.js
@@ -153,10 +153,19 @@ var browser = {
 				return browser.install({...properties});
 			}
 
+			packages[i].unix_created = new Date(packages[i].date_created).getTime();
+			packages[i].unix_updated = new Date(packages[i].date_updated).getTime();
+
 			packages[i].install = install;
 			packages[i].has_update = has_update;
 			packages[i].local_version = local_version;
 
+			packages[i].downloads = 0;
+
+			for (let version of packages[i].versions) {
+				packages[i].downloads += version.downloads || 0;
+			}
+
 			if (local_version) {
 				browser.mod_versions[normalized] = {
 					install: install,
@@ -169,6 +178,28 @@ var browser = {
 			}
 		}
 	},
+	// sorts `pkgs` based on `property` in package object
+	sort: (pkgs, property) => {
+		// get property from sort selector, if not specified
+		if (! property) {
+			property = sort.querySelector("select").value;
+
+			// if we somehow still don't have a property, just return
+			if (! property) {
+				return pkgs;
+			}
+		}
+
+		// if `property` doesn't even exist, just return
+		if (typeof pkgs[0][property] == "undefined") {
+			return pkgs;
+		}
+
+		// sort in descending order
+		return pkgs.sort((a, b) => {
+			return b[property] - a[property];
+		})
+	},
 	loadfront: async () => {
 		browser.loading();
 
@@ -198,7 +229,8 @@ var browser = {
 			})
 		}
 		
-		let pkgs = browser.filters.getpkgs();
+		let pkgs = browser.sort(browser.filters.getpkgs());
+
 		for (let i in pkgs) {
 			if (packagecount >= browser.maxentries) {
 				browser.endoflist();
@@ -349,6 +381,10 @@ var browser = {
 	}
 }
 
+sort.querySelector("select").addEventListener("change", () => {
+	browser.loadfront();
+})
+
 setInterval(browser.add_pkg_properties, 1500);
 
 if (navigator.onLine) {