adds list

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import type { List } from "$lib/models/list";
+    import Dropdown, { type DropdownItem } from "../base/dropdown.svelte";
+    export let list: List;
+    export let active: boolean = false;
+
+    const dropdownItems: DropdownItem[] = [
+        { text: "Edit", value: "edit" },
+        { text: "Delete", value: "delete" },
+    ];
+</script>
+
+<div
+    class="flex items-center gap-6 p-4 hover:bg-menu-item-background-hover rounded-xl transition-colors cursor-pointer"
+    class:bg-menu-item-background-hover={active}
+>
+    <img
+        class="w-24 aspect-square rounded-full"
+        src={list.avatar}
+        alt="avatar"
+    />
+    <div class="basis-full self-start">
+        <div class="flex justify-between items-center">
+            <h5 class="text-xl font-semibold">{list.name}</h5>
+            <Dropdown items={dropdownItems} on:change></Dropdown>
+        </div>
+        <p class="text-gray-500 text-sm mr-8">{list.description}</p>
+    </div>
+</div>

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

@@ -0,0 +1,114 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+
+    import { browser } from "$app/environment";
+    import { listSchema, type List } from "$lib/models/list";
+    import { list } from "$lib/stores/list_store";
+    import { createForm } from "$lib/vendor/svelte-form-lib/index";
+    import { util } from "$lib/vendor/svelte-form-lib/util";
+    import Modal from "../base/modal.svelte";
+    import TextField from "../base/text_field.svelte";
+    import Textarea from "../base/textarea.svelte";
+
+    export let openModal: (() => void) | undefined = undefined;
+    export let closeModal: (() => void) | undefined = undefined;
+
+    const dispatch = createEventDispatcher();
+
+    let previewURL = "";
+
+    const { form, errors, handleChange, handleSubmit } = createForm<List>({
+        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 });
+            (document.getElementById("avatar") as HTMLInputElement).value = "";
+            closeModal!();
+        },
+    });
+
+    function openAvatarBrowser() {
+        document.getElementById("avatar")!.click();
+    }
+
+    function handleAvatarSelection() {
+        const files = (
+            document.getElementById("avatar") as HTMLInputElement
+        ).files;
+
+        if (!files) {
+            return;
+        }
+
+        previewURL = URL.createObjectURL(files[0]);
+    }
+    $: if (browser) {
+        form.set(util.cloneDeep($list));
+        previewURL = $list.avatar ?? "";
+    }
+</script>
+
+<Modal
+    id="list-modal"
+    title="New List"
+    let:openModal
+    bind:openModal
+    bind:closeModal
+>
+    <slot {openModal} />
+    <form
+        id="list-form"
+        slot="content"
+        class="modal-content space-y-4"
+        on:submit={handleSubmit}
+    >
+        <label for="avatar" class="text-sm font-medium block"> Avatar </label>
+        <input
+            name="avatar"
+            type="file"
+            id="avatar"
+            accept="image/*"
+            style="display: none;"
+            on:change={handleAvatarSelection}
+        />
+        <div class="flex items-center gap-4">
+            {#if previewURL.length > 0}
+                <img
+                    class="w-32 aspect-square rounded-full"
+                    alt="avatar"
+                    src={previewURL}
+                />
+            {/if}
+            <button
+                class="btn-secondary"
+                type="button"
+                on:click={openAvatarBrowser}>Change...</button
+            >
+        </div>
+
+        <TextField
+            name="name"
+            label="Name"
+            bind:value={$form.name}
+            error={$errors.name}
+            on:change={handleChange}
+        ></TextField>
+
+        <Textarea
+            name="description"
+            label="Description"
+            bind:value={$form.description}
+            error={$errors.description}
+            on:change={handleChange}
+        ></Textarea>
+    </form>
+    <div slot="footer" class="flex items-center gap-4">
+        <button class="btn-secondary" on:click={closeModal}>Cancel</button>
+        <button class="btn-primary" type="submit" form="list-form">Save</button>
+    </div>
+</Modal>

web/src/lib/components/nav_bar.svelte

@@ -52,6 +52,9 @@
             case "/map":
                 childPosition = 3;
                 break;
+            case "/lists":
+                childPosition = 4;
+                break;
             default:
                 break;
         }

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

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

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

@@ -0,0 +1,112 @@
+<script lang="ts">
+    import type { Trail, TrailFilter } from "$lib/models/trail";
+    import { createEventDispatcher, onMount } from "svelte";
+    import Select, { type SelectItem } from "../base/select.svelte";
+    import EmptyStateSearch from "../empty_states/empty_state_search.svelte";
+    import TrailCard from "./trail_card.svelte";
+    import TrailListItem from "./trail_list_item.svelte";
+
+    export let filter: TrailFilter;
+    export let trails: Trail[];
+
+    const displayOptions: SelectItem[] = [
+        { text: "Cards", value: "cards" },
+        { text: "List", value: "list" },
+    ];
+
+    let selectedDisplayOption = displayOptions[0].value;
+
+    let dispatch = createEventDispatcher();
+
+    const sortOptions: SelectItem[] = [
+        { text: "Alphabetical", value: "name" },
+        { text: "Creation date", value: "created" },
+        { text: "Distance", value: "distance" },
+        { text: "Elevation gain", value: "elevation_gain" },
+    ];
+
+    onMount(() => {
+        const storedDisplayOption = localStorage.getItem("displayOption");
+        if (storedDisplayOption) {
+            selectedDisplayOption = storedDisplayOption;
+        }
+    });
+
+    function setDisplayOption() {
+        localStorage.setItem("displayOption", selectedDisplayOption);
+    }
+
+    async function setSort() {
+        dispatch("update", filter);
+    }
+
+    async function setSortOrder() {
+        if (filter.sortOrder === "+") {
+            filter.sortOrder = "-";
+        } else {
+            filter.sortOrder = "+";
+        }
+        dispatch("update", filter);
+    }
+</script>
+
+<div class="min-w-0">
+    <div class="flex items-start gap-8 justify-end mx-4">
+        <div>
+            <p class="text-sm text-gray-500 pb-2">Sort</p>
+            <div class="flex items-center gap-2">
+                <Select
+                    bind:value={filter.sort}
+                    items={sortOptions}
+                    on:change={setSort}
+                ></Select>
+                <button
+                    id="sort-order-btn"
+                    class="btn-icon"
+                    class:rotated={filter.sortOrder == "-"}
+                    on:click={() => setSortOrder()}
+                    ><i class="fa fa-arrow-up"></i></button
+                >
+            </div>
+        </div>
+        <div>
+            <p class="text-sm text-gray-500 pb-2">Display as</p>
+
+            <Select
+                bind:value={selectedDisplayOption}
+                items={displayOptions}
+                on:change={() => setDisplayOption()}
+            ></Select>
+        </div>
+    </div>
+
+    <div id="trails" class="flex items-start flex-wrap gap-8 py-8 max-w-full">
+        {#if trails.length == 0}
+            <div class="flex flex-col basis-full items-center">
+                <EmptyStateSearch></EmptyStateSearch>
+            </div>
+        {/if}
+        {#each trails as trail}
+            <a
+                class="max-w-full"
+                class:basis-full={selectedDisplayOption === "list"}
+                href="/trail/view/{trail.id}"
+            >
+                {#if selectedDisplayOption === "cards"}
+                    <TrailCard {trail}></TrailCard>
+                {:else}
+                    <TrailListItem {trail}></TrailListItem>
+                {/if}
+            </a>
+        {/each}
+    </div>
+</div>
+
+<style>
+    #sort-order-btn {
+        transition: transform 0.5s ease;
+    }
+    :global(.rotated) {
+        transform: rotate(180deg);
+    }
+</style>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { Trail } from "$lib/models/trail";
+    import { getFileURL } from "$lib/util/file_util";
     import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
 
     export let trail: Trail;
@@ -11,7 +12,7 @@
     <div class="shrink-0">
         <img
             class="h-28 w-28 object-cover rounded-xl"
-            src={trail.thumbnail}
+            src={getFileURL(trail, trail.thumbnail)}
             alt=""
         />
     </div>