Add another attempt with python

rust_warp_svelte/ui/src/components/PackageItem.svelte

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

rust_warp_svelte/ui/src/components/PackageList.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import PackageItem from "./PackageItem.svelte"
+    import { createEventDispatcher } from 'svelte';
+    import { fade } from 'svelte/transition';
+
+    export let name;
+    export let items;
+    export let id;
+
+    const dispatch = createEventDispatcher();
+
+    let active = false;
+    let shown_items = [];
+    let ellipsed = false;
+
+    const enter = () => {
+        active = true
+    }
+    const leave = () => {
+        active = false
+    }
+
+    $: if (items.length <= 4) {
+        shown_items = items
+        ellipsed = false
+    } else {
+        shown_items = items.slice(0, !active && 3 || items.length)
+        ellipsed = true
+    }
+
+    function onClick(id) {
+        dispatch('select', {
+            id: id
+        });
+    }
+</script>
+
+<main on:mouseenter={enter} on:mouseleave={leave} on:click={onClick(id)}>
+    <h2 class="text-lg font-semibold text-center mb-5 mt-3">{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>

rust_warp_svelte/ui/src/components/PackageListTable.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+    export let id;
+    export let items;
+    export let redirect;
+
+    $: has_counts = items.some(l => l.count > 1);
+    $: has_preparations = items.some(l => l.preparation.steps.length > 0);
+    //has_sizes = items.some(l => l.size.type != "None");
+
+    let has_sizes = false;
+    let has_preparations = false;
+    let has_counts = false;
+
+    const navigateToPreparation = (item_id) => {
+        redirect(`/lists/${id}/items/${item_id}/preparation`);
+    }
+</script>
+
+<div>
+    <table class="table-auto w-full">
+        <thead>
+            <tr class="font-semibold tracking-wider text-left bg-gray-100 uppercase border-b border-gray-400">
+                <th class="p-3">Name</th>
+                {#if has_sizes }
+                    <th class="p-3">Size</th>
+                {/if}
+                {#if has_counts}
+                    <th class="p-3">Count</th>
+                {/if}
+                {#if has_preparations}
+                    <th class="p-3">Preparation Steps</th>
+                {/if}
+            </tr>
+        </thead>
+        <tbody>
+            {#each items as item}
+            <tr class="border">
+                <td class="p-3">{item.name}</td>
+                {#if has_sizes }
+                    <td class="p-3">
+                        {#if item.size.type == "None"}
+                        {:else if item.size.type == "Gram"}
+                            {#if item.size.value == 1}
+                                {item.size.value} Gram
+                            {:else}
+                                {item.size.value} Grams
+                            {/if}
+                        {:else if item.size.type == "Pack"}
+                            {#if item.size.value == 1}
+                                {item.size.value} Pack
+                            {:else}
+                                {item.size.value} Packs
+                            {/if}
+                        {:else}
+                            {item.size.value} {item.size.type}
+                        {/if}
+                    </td>
+                {/if}
+                {#if has_counts}
+                    <td class="p-3">
+                        {#if item.count > 1}
+                            {item.count}
+                        {/if}
+                    </td>
+                {/if}
+                {#if has_preparations}
+                    <td class="p-3">
+                        {#if item.preparation.steps.length > 0}
+                            {item.preparation.steps.length} steps
+                            <button on:click={() => navigateToPreparation(item.id)}>Show preparation steps</button>
+                        {/if}
+                    </td>
+                {/if}
+            </tr>
+            {/each}
+        </tbody>
+    </table>
+</div>