adds profile page

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

@@ -14,11 +14,17 @@
     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"
-    />
+    {#if list.avatar}
+        <img
+            class="w-16 md:w-24 aspect-square rounded-full"
+            src={list.avatar}
+            alt="avatar"
+        />
+    {:else}
+        <div class="flex w-16 md:w-24 aspect-square shrink-0 items-center justify-center">
+            <i class="fa fa-table-list text-5xl"></i>
+        </div>
+    {/if}
     <div class="basis-full self-start">
         <div class="flex justify-between items-center">
             <h5 class="text-xl font-semibold">{list.name}</h5>

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

@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { createEventDispatcher, onMount } from "svelte";
+
+    import { lists, lists_index } from "$lib/stores/list_store";
+    import Modal from "../base/modal.svelte";
+    import type { List } from "$lib/models/list";
+    import { trail } from "$lib/stores/trail_store";
+
+    export let openModal: (() => void) | undefined = undefined;
+    export let closeModal: (() => void) | undefined = undefined;
+
+    const dispatch = createEventDispatcher();
+
+    function handleSelect(list: List) {
+        dispatch("change", list);
+        closeModal!();
+    }
+
+    function listContainsCurrentTrail(list: List) {
+        return list.trails?.includes($trail.id!);
+    }
+</script>
+
+<Modal
+    id="list-modal"
+    title="Select List"
+    size="md"
+    let:openModal
+    bind:openModal
+    bind:closeModal
+>
+    <slot {openModal} />
+
+    <ul slot="content">
+        {#each $lists as list}
+            <li
+                class="flex gap-4 items-center p-4 hover:bg-menu-item-background-hover rounded-xl transition-colors cursor-pointer"
+                on:click={() => handleSelect(list)}
+                role="presentation"
+            >
+                {#if list.avatar}
+                    <img
+                        class="w-12 aspect-square rounded-full"
+                        src={list.avatar}
+                        alt="avatar"
+                    />
+                {:else}
+                    <div
+                        class="flex w-12 aspect-square shrink-0 items-center justify-center"
+                    >
+                        <i class="fa fa-table-list text-5xl"></i>
+                    </div>
+                {/if}
+                <h5 class="text-md font-semibold">{list.name}</h5>
+
+                <i
+                    class="fa fa-{listContainsCurrentTrail(list)
+                        ? 'minus'
+                        : 'plus'} rounded-full border border-input-border p-2"
+                ></i>
+            </li>
+        {/each}
+    </ul>
+</Modal>