WIP

ui/src/App.svelte

@@ -3,38 +3,28 @@
 </svelte:head>
 
 <script lang="ts">
-    import PackageList from "./PackageList.svelte"
-	export let name: string;
+    import PackageLists from "./routes/PackageLists.svelte";
 
-    async function getUsers() {
-        let response = await fetch("http://localhost:9000/v1/lists", {
-            method: "GET",
-            headers: {
-                "Accept": "application/json"
-            },
-            cache: "no-store",
-        });
-        let users = await response.json();
-        return users;
+    $: {
+        const path = window.location.pathname;
+        console.log(`Routing ${path}`);
+
+        let component;
+
+        if (path == "/") {
+            window.location.replace("/lists/");
+        } else if (path == "/lists/") {
+            console.log("Routing to package lists");
+            component = PackageLists;
+        } else if (path.startswith("/lists/")) {
+            console.log("hm");
+        } else {
+            console.log("No matching route found");
+        }
     }
 
-    const promise = getUsers()
 </script>
 
 <main>
-    <div>
-        {#await promise}
-            <p>Loading</p>
-        {:then lists}
-            <div class="m-2 grid grid-cols-3 gap-5 items-start grid-flow-row">
-                {#each lists as list}
-                    <div class="p-3 border rounded-lg border-gray-300 shadow hover:shadow-xl bg-gradient-to-br bg-blue-300 bg-opacity-50 hover:bg-opacity-100">
-                        <PackageList data={list} />
-                    </div>
-                {/each}
-            </div>
-        {:catch error}
-            <p>Something went wrong</p>
-        {/await}
-    </div>
+    <svelte:component this={component} />
 </main>