adds svelte API

web/src/lib/components/list/list_card.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { List } from "$lib/models/list";
+    import { getFileURL } from "$lib/util/file_util";
     import Dropdown, { type DropdownItem } from "../base/dropdown.svelte";
     import { _ } from "svelte-i18n";
     export let list: List;
@@ -17,8 +18,8 @@
 >
     {#if list.avatar}
         <img
-            class="w-16 md:w-24 aspect-square rounded-full"
-            src={list.avatar}
+            class="w-16 md:w-24 aspect-square rounded-full object-cover"
+            src={getFileURL(list, list.avatar)}
             alt="avatar"
         />
     {:else}

web/src/lib/components/list/list_modal.svelte

@@ -10,6 +10,7 @@
     import Modal from "../base/modal.svelte";
     import TextField from "../base/text_field.svelte";
     import Textarea from "../base/textarea.svelte";
+    import { getFileURL } from "$lib/util/file_util";
     export let openModal: (() => void) | undefined = undefined;
     export let closeModal: (() => void) | undefined = undefined;
 
@@ -21,12 +22,7 @@
         initialValues: $list,
         validationSchema: listSchema,
         onSubmit: async (submittedList) => {
-            const htmlForm = document.getElementById(
-                "list-form",
-            ) as HTMLFormElement;
-            const formData = new FormData(htmlForm);
-
-            dispatch("save", { list: submittedList, formData: formData });
+            dispatch("save", { list: submittedList, avatar: (document.getElementById("avatar") as HTMLInputElement).files![0] });
             (document.getElementById("avatar") as HTMLInputElement).value = "";
             closeModal!();
         },
@@ -48,7 +44,7 @@
     }
     $: if (browser) {
         form.set(util.cloneDeep($list));
-        previewURL = $list.avatar ?? "";
+        previewURL = getFileURL($list, $list.avatar) ?? "";
     }
 </script>
 
@@ -78,7 +74,7 @@
         <div class="flex items-center gap-4">
             {#if previewURL.length > 0}
                 <img
-                    class="w-32 aspect-square rounded-full"
+                    class="w-32 aspect-square rounded-full object-cover"
                     alt="avatar"
                     src={previewURL}
                 />

web/src/lib/components/list/list_select_modal.svelte

@@ -6,6 +6,7 @@
     import { trail } from "$lib/stores/trail_store";
     import { _ } from "svelte-i18n";
     import Modal from "../base/modal.svelte";
+    import { getFileURL } from "$lib/util/file_util";
 
     export let openModal: (() => void) | undefined = undefined;
     export let closeModal: (() => void) | undefined = undefined;
@@ -42,7 +43,7 @@
                 {#if list.avatar}
                     <img
                         class="w-12 aspect-square rounded-full"
-                        src={list.avatar}
+                        src={getFileURL(list, list.avatar)}
                         alt="avatar"
                     />
                 {:else}