Trail Table: Allow multi select

.gitignore

@@ -3,11 +3,12 @@
 
 db/pocketbase*
 
-search/meilisearch
+search/meilisearch*
 search/data.ms*
 search/dumps
 
 run.sh
 build*.sh
+start.*
 
-data/
+data*/

db/util/email_templates.go

@@ -56,7 +56,7 @@ func GenerateHTML(appUrl string, recipientName string, authorName string, notifi
 	}
 
 	html, err := registry.LoadFiles(
-		"templates/mail/notification.html",
+		"db/templates/mail/notification.html",
 	).Render(content)
 
 	if err != nil {

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

@@ -2,6 +2,7 @@
     import { type Snippet } from "svelte";
 
     import type { List } from "$lib/models/list";
+    import type { Trail } from "$lib/models/trail";
     import { trail } from "$lib/stores/trail_store";
     import { getFileURL } from "$lib/util/file_util";
     import { _ } from "svelte-i18n";
@@ -12,11 +13,12 @@
 
     interface Props {
         lists: List[];
+        trails?: Set<Trail> | undefined;
         children?: Snippet<[any]>;
         onchange?: (list: List) => void
     }
 
-    let { lists, children, onchange }: Props = $props();
+    let { lists, trails, children, onchange }: Props = $props();
 
     let modal: Modal;
 
@@ -29,6 +31,20 @@
         modal.closeModal!();
     }
 
+    function listContainsAllTrails(list: List) : boolean {
+        if (trails === undefined) {
+            return listContainsCurrentTrail(list) ?? false;
+        } else if (list.trails !== undefined) {
+            for (const lTrail of trails) {
+                if (!list.trails!.includes(lTrail.id!)) return false;
+            }
+
+            return true;
+        }
+
+        return false;
+    }
+
     function listContainsCurrentTrail(list: List) {
         return list.trails?.includes($trail.id!);
     }
@@ -66,7 +82,7 @@
                     <h5 class="text-md font-semibold">{list.name}</h5>
 
                     <i
-                        class="fa fa-{listContainsCurrentTrail(list)
+                        class="fa fa-{listContainsAllTrails(list)
                             ? 'minus'
                             : 'plus'} rounded-full border border-input-border p-2"
                     ></i>

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

@@ -17,17 +17,24 @@
     interface Props {
         trail: Trail;
         fullWidth?: boolean;
+        selected: boolean;
+        hovered: boolean;
         onmouseenter?: MouseEventHandler<HTMLDivElement>;
         onmouseleave?: MouseEventHandler<HTMLDivElement>;
+        onTrailSelect?: () => void;
     }
 
     let {
         trail,
         fullWidth = false,
+        selected = false,
+        hovered = false,
         onmouseenter,
         onmouseleave,
+        onTrailSelect,
     }: Props = $props();
 
+
     let thumbnail = $derived(
         trail.photos.length
             ? getFileURL(trail, trail.photos[trail.thumbnail ?? 0])
@@ -39,6 +46,12 @@
     let trailIsShared = $derived(
         (trail.expand?.trail_share_via_trail?.length ?? 0) > 0,
     );
+
+    function handleInputClick(e: Event) {
+        e.stopPropagation();
+        onTrailSelect?.();
+        hovered = true;
+    }
 </script>
 
 <div
@@ -71,6 +84,17 @@
             />
         {/if}
     </div>
+    {#if hovered || selected}
+    <div class="flex absolute top-4 left-4 w-8 h-8 rounded-full items-center justify-center bg-background text-content">
+        <input
+            id="trail-selected"
+            type="checkbox"
+            class="w-4 h-4 bg-input-background accent-primary border-input-border focus:ring-input-ring focus:ring-2"
+            bind:checked={selected}
+            onclick={(e) => handleInputClick(e)}
+        />
+    </div>
+    {/if}
     {#if (trail.public || trailIsShared) && $currentUser}
         <div
             class="flex absolute top-4 right-4 {trail.public && trailIsShared