3 files changed, 40 insertions, 16 deletions

diff --git a/src/app/browser.js b/src/app/browser.js
index ae3e453..50cabfe 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -1,22 +1,39 @@
-function Browser(state) {
-	if (state) {
-		overlay.classList.add("shown")
-		browser.classList.add("shown")
-		return
-	} else if (! state) {
-		if (state != undefined) {
-			overlay.classList.remove("shown")
-			browser.classList.remove("shown")
+var Browser = {
+	toggle: (state) => {
+		if (state) {
+			overlay.classList.add("shown")
+			browser.classList.add("shown")
 			return
+		} else if (! state) {
+			if (state != undefined) {
+				overlay.classList.remove("shown")
+				browser.classList.remove("shown")
+				return
+			}
 		}
-	}
 
-	overlay.classList.toggle("shown")
-	browser.classList.toggle("shown")
-};Browser()
+		overlay.classList.toggle("shown")
+		browser.classList.toggle("shown")
+	},
+	loadfront: async () => {
+		let packages = await (await fetch("https://northstar.thunderstore.io/api/v1/package/")).json();
+		
+		for (let i in packages) {
+			let pkg = {...packages[i], ...packages[i].versions[0]};
+
+			new BrowserEl({
+				title: pkg.name,
+				image: pkg.icon,
+				author: pkg.owner,
+				description: pkg.description
+			})
+		}
+	}
+}; Browser.toggle()
+Browser.loadfront()
 
 document.body.addEventListener("keyup", (e) => {
-	if (e.key == "Escape") {Browser(false)}
+	if (e.key == "Escape") {Browser.toggle(false)}
 })
 
 function BrowserEl(properties) {
@@ -36,6 +53,8 @@ function BrowserEl(properties) {
 			<div class="text">
 				<div class="title">${properties.title}</div>
 				<div class="description">${properties.description} - by ${properties.author}</div>
+				<button>Install</button>
+				<button>Info</button>
 			</div>
 		</div>
 	`
diff --git a/src/app/index.html b/src/app/index.html
index 0866816..131ec38 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -13,7 +13,7 @@
 			<div id="close" onclick="ipcRenderer.send('exit')"></div>
 		</div>
 
-		<div id="overlay" onclick="Browser()"></div>
+		<div id="overlay" onclick="Browser.toggle(false)"></div>
 		<div id="browser">
 			<input id="search" placeholder="Search...">
 		</div>
diff --git a/src/app/main.css b/src/app/main.css
index d3d3b72..3c406ee 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -75,7 +75,7 @@
 
 #browser .el, #browser #search {
 	--spacing: calc(var(--padding) / 2);
-	--height: calc(var(--padding) * 2.5);
+	--height: calc(var(--padding) * 3);
 
 	color: white;
 	display: flex;
@@ -100,10 +100,15 @@
 	width: var(--height);
 	height: var(--height);
 	margin-right: var(--spacing);
+	border-radius: var(--spacing);
 }
 
 #browser .el .title {font-size: 1.2em}
 #browser .el .description {font-size: 0.8em}
+#browser .el button {
+	background: var(--blue);
+	margin-top: var(--spacing);
+}
 
 #winbtns {
 	z-index: 2;