WIP

ui/src/App.svelte

@@ -0,0 +1,40 @@
+<svelte:head>
+    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
+</svelte:head>
+
+<script lang="ts">
+    import PackageList from "./PackageList.svelte"
+	export let name: string;
+
+    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 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>
+</main>

ui/src/PackageItem.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    export let data;
+</script>
+
+<main>
+    {data.name}
+</main>
+
+<style>
+</style>

ui/src/PackageList.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import PackageItem from "./PackageItem.svelte"
+    import { fade, fly, draw } from 'svelte/transition';
+
+    export let data;
+
+    let active = false;
+    let shown_items = [];
+    let ellipsed = false;
+
+    const enter = () => {
+        active = true
+    }
+    const leave = () => {
+        active = false
+    }
+
+    $: if (data.items.length <= 4) {
+        shown_items = data.items
+        ellipsed = false
+    } else {
+        shown_items = data.items.slice(0, !active && 3 || data.items.length)
+        ellipsed = true
+    }
+</script>
+
+<main on:mouseenter={enter} on:mouseleave={leave}>
+    <h2 class="text-lg font-semibold text-center mb-5 mt-3">{data.name}</h2>
+    <ul class="list-disc ml-5">
+    {#each shown_items as item}
+        <li in:fade|local={{duration: 200}} out:fade|local={{duration: 100, delay: 100}}><PackageItem data={item} /></li>
+    {/each}
+    {#if !active && ellipsed}
+        ...
+    {/if}
+    </ul>
+</main>
+
+<style>
+</style>

ui/src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="svelte" />

ui/src/main.ts

@@ -0,0 +1,10 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body,
+	props: {
+		name: 'world'
+	}
+});
+
+export default app;