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}

web/src/lib/components/photo_card.svelte

@@ -26,7 +26,7 @@
         ></i>
     {/if}
     <div
-        class="flex opacity-0 group-hover:opacity-100 absolute top-0 w-full h-full bg-white bg-opacity-75 items-center justify-center gap-6 transition-all"
+        class="flex opacity-0 group-hover:opacity-100 absolute top-0 w-full h-full bg-white/75 rounded-xl items-center justify-center gap-6 transition-all"
     >
         <button
             type="button"

web/src/lib/components/trail/trail_card.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
     import type { Trail } from "$lib/models/trail";
     import { getFileURL } from "$lib/util/file_util";
-    import { formatDistance, formatElevation, formatTimeHHMM } from "$lib/util/format_util";
+    import {
+        formatDistance,
+        formatElevation,
+        formatTimeHHMM,
+    } from "$lib/util/format_util";
 
     export let trail: Trail;
-
 </script>
 
 <div
@@ -14,7 +17,7 @@
     role="listitem"
 >
     <div class="w-full min-h-40 max-h-48 overflow-hidden rounded-t-2xl">
-        <img src={getFileURL(trail, trail.thumbnail)} alt="" />
+        <img src={getFileURL(trail, trail.photos[trail.thumbnail])} alt="" />
     </div>
     <div class="p-4">
         <div>

web/src/lib/components/trail/trail_list_item.svelte

@@ -12,7 +12,7 @@
     <div class="shrink-0">
         <img
             class="h-28 w-28 object-cover rounded-xl"
-            src={getFileURL(trail, trail.thumbnail)}
+            src={getFileURL(trail, trail.photos[trail.thumbnail])}
             alt=""
         />
     </div>