adds svelte API

web/src/routes/map/+page.svelte

@@ -205,7 +205,7 @@
     <li class="flex items-center gap-4 cursor-pointer text-black">
         <div class="shrink-0"><img class="h-14 w-14 object-cover rounded-xl" src="${getFileURL(
             trail,
-            trail.thumbnail,
+            trail.photos[trail.thumbnail],
         )}" alt="">
         </div>
         <div>
@@ -263,7 +263,7 @@
                     extraClasses="w-full"
                     on:update={(e) => search(e.detail)}
                     on:click={(e) => handleSearchClick(e.detail)}
-                    placeholder="{$_("search-for-trails-places")}..."
+                    placeholder="{$_('search-for-trails-places')}..."
                     items={searchDropdownItems}
                 ></Search>
                 <button

web/src/routes/map/trail/[id]/+page.svelte

@@ -37,7 +37,7 @@
 
     onMount(() => {
         lightboxDataSource = $trail.photos.map((p) => ({
-            src: p,
+            src: getFileURL($trail, p),
         }));
         lightbox = new PhotoSwipeLightbox({
             dataSource: lightboxDataSource,
@@ -83,7 +83,7 @@
         <section class="relative h-80">
             <img
                 class="w-full h-80 object-cover"
-                src={getFileURL($trail, $trail.thumbnail)}
+                src={getFileURL($trail, $trail.photos[$trail.thumbnail])}
                 alt=""
             />
             <div
@@ -152,14 +152,14 @@
                 </ul>
             {/if}
             {#if activeTab == 2}
-                <div id="photo-gallery" class="space-y-4">
+                <div id="photo-gallery" class="space-y-4 mx-4">
                     {#each $trail.photos ?? [] as photo, i}
                         <!-- svelte-ignore a11y-click-events-have-key-events -->
                         <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
                         <img
                             class="rounded-xl cursor-pointer hover:scale-105 transition-transform"
                             on:click={() => openGallery(i)}
-                            src={photo}
+                            src={getFileURL($trail, photo)}
                             alt=""
                         />
                     {/each}

web/src/routes/map/trail/[id]/+page.ts

@@ -1,10 +1,11 @@
-import { trails, trails_show } from "$lib/stores/trail_store";
+import { lists_index } from "$lib/stores/list_store";
+import { trails_show } from "$lib/stores/trail_store";
 import { error, type ServerLoad } from "@sveltejs/kit";
 import { ClientResponseError } from "pocketbase";
 
-export const load: ServerLoad = async ({ params, locals }) => {
+export const load: ServerLoad = async ({ params, locals, fetch }) => {
     try {
-        await trails_show(params.id!, true)
+        await trails_show(params.id!, true, fetch)
     } catch (e) {
         if (e instanceof ClientResponseError && e.status == 404) {
             error(404, {
@@ -13,4 +14,5 @@ export const load: ServerLoad = async ({ params, locals }) => {
         }
 
     }
+    await lists_index(undefined, fetch);
 };