adds komoot integration

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

@@ -55,7 +55,7 @@
     <div
         class="relative w-full min-h-40 max-h-48 overflow-hidden rounded-t-2xl"
     >
-        <img width="100%" id="header-img" src={thumbnail} alt="" />
+        <img class="min-h-40" id="header-img" src={thumbnail} alt="" />
     </div>
     {#if (trail.public || trailIsShared) && pb.authStore.model}
         <div

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

@@ -44,13 +44,20 @@
     import TrailTimeline from "./trail_timeline.svelte";
 
     interface Props {
-        trail: Trail;
+        initTrail: Trail;
         mode?: "overview" | "map" | "list";
         markers?: M.Marker[];
         activeTab?: number;
     }
 
-    let { trail, mode = "map", markers = [], activeTab = 0 }: Props = $props();
+    let {
+        initTrail,
+        mode = "map",
+        markers = [],
+        activeTab = 0,
+    }: Props = $props();
+
+    let trail = $state(initTrail);
 
     const tabs = [
         $_("summit-book"),
@@ -362,7 +369,9 @@
                 {:else}
                     <EmptyStateDescription></EmptyStateDescription>
                 {/if}
-                <h4 class="text-2xl font-semibold mb-6 mt-12">{$_("route", { values: { n: 2 } })}</h4>
+                <h4 class="text-2xl font-semibold mb-6 mt-12">
+                    {$_("route", { values: { n: 2 } })}
+                </h4>
                 {#if mode === "overview"}
                     <div
                         class="relative border border-input-border rounded-xl p-2 mb-6 text-xs"

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

@@ -42,23 +42,26 @@
 
         <div class="border border-input-border rounded-xl overflow-hidden">
             {#if wp.photos.length}
-                <PhotoGallery photos={wp.photos.map((p) => getFileURL(wp, p))} bind:this={gallery[i]}
+                <PhotoGallery
+                    photos={wp.photos.map((p) => getFileURL(wp, p))}
+                    bind:this={gallery[i]}
                 ></PhotoGallery>
                 <div
-                    class="grid {wp.photos.length > 1
+                    class="grid gap-[1px] {wp.photos.length > 1
                         ? 'grid-cols-[8fr_5fr]'
                         : 'grid-cols-1'} cursor-pointer"
                 >
                     {#each wp.photos as photo, j}
-                        <button onclick={() => gallery[i].openGallery(j)}>
-                            <img
-                                class="object-cover h-full max-h-80 w-full"
-                                class:row-span-2={i == 0 &&
-                                    wp.photos.length > 2}
-                                src={getFileURL(wp, photo)}
-                                alt=""
-                            />
-                        </button>
+                        <img
+                            onclick={() => gallery[i].openGallery(j)}
+                            role="presentation"
+                            class="w-full object-cover {j == 0 &&
+                            wp.photos.length > 2
+                                ? 'row-span-2 h-80'
+                                : 'h-[159.5px]'}"
+                            src={getFileURL(wp, photo)}
+                            alt=""
+                        />
                     {/each}
                 </div>
             {/if}