Add some sort of display

frontend/src/lib/components/AddonCard.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { GetAddonLocalVersion, GetAddonRemoteVersion } from "$wails/main/App";
+	import { type main } from "$wails/models";
+	export let addon: main.Addon;
+	let localVersion = "0.0.0";
+	let remoteVersion = "0.0.0";
+	let upToDate = true;
+	GetAddonLocalVersion(addon.name).then((res) => {
+		localVersion = res.data;
+	});
+	GetAddonRemoteVersion(addon.name).then((res) => {
+		remoteVersion = res.data;
+	});
+	$: upToDate = localVersion === remoteVersion;
+</script>
+
+<div class="bg-gray-900 text-white p-4 m-3 mx-2 rounded-lg">
+	<h2 class="text-2xl font-bold">{addon.name}</h2>
+	<p class="text-gray-300">Local Version: {localVersion}</p>
+	<p class="text-gray-300">Remote Version: {remoteVersion}</p>
+	{#if upToDate}
+		<button class="bg-green-500 disabled text-white p-2 my-2 cursor-default rounded-lg">Up to date</button>
+	{:else}
+		<button class="bg-blue-500 text-white p-2 my-2 rounded-lg">Update</button>
+	{/if}
+</div>

frontend/src/lib/router/routes/Home.svelte

@@ -1,11 +1,22 @@
 <script lang="ts">
+	import AddonCard from "$lib/components/AddonCard.svelte";
 	import { GetAddons } from "$wails/main/App";
+	import { type main } from "$wails/models";
 
-	const addons = GetAddons().then(addons => {
-		console.log(addons);
+	let addons: { [key: string]: main.Addon } = {};
+	GetAddons().then((res) => {
+		if (res.error) {
+			console.error(res.error);
+		} else {
+			addons = res.data;
+		}
 	});
 </script>
 
 <template>
-	Hello, world
-</template>
+	<div class="grid grid-cols-3 gap-4">
+		{#each Object.values(addons) as addon}
+			<AddonCard {addon} />
+		{/each}
+	</div>
+</template>