From f33a4d13f794729433efbb9c8b0d6ae11ad880ce Mon Sep 17 00:00:00 2001
From: Christian Beutel <>
Date: Fri, 15 Mar 2024 13:42:27 +0100
Subject: [PATCH] scroll to required fields in trail edit

Former-commit-id: 4d4c11bd86760b9ee98b7db188df279cf71e82d1
---
 .../components/trail/trail_info_panel.svelte  | 279 ++++++++++++++++++
 .../lib/vendor/svelte-form-lib/create-form.js |   4 +-
 web/src/lib/vendor/svelte-form-lib/index.d.ts |   1 +
 web/src/routes/map/trail/[id]/+page.svelte    | 167 +----------
 web/src/routes/trail/edit/[id]/+page.svelte   |  20 ++
 web/src/routes/trail/view/[id]/+page.svelte   | 263 +----------------
 6 files changed, 309 insertions(+), 425 deletions(-)
 create mode 100644 web/src/lib/components/trail/trail_info_panel.svelte

diff --git a/web/src/lib/components/trail/trail_info_panel.svelte b/web/src/lib/components/trail/trail_info_panel.svelte
new file mode 100644
index 00000000..2f7b1372
--- /dev/null
+++ b/web/src/lib/components/trail/trail_info_panel.svelte
@@ -0,0 +1,279 @@
+<script lang="ts">
+    import { goto } from "$app/navigation";
+    import SummitLogCard from "$lib/components/summit_log/summit_log_card.svelte";
+    import Tabs from "$lib/components/tabs.svelte";
+    import TrailDropdown from "$lib/components/trail/trail_dropdown.svelte";
+    import WaypointCard from "$lib/components/waypoint/waypoint_card.svelte";
+    import type { Trail } from "$lib/models/trail";
+    import { currentUser } from "$lib/stores/user_store";
+    import { getFileURL } from "$lib/util/file_util";
+    import {
+        formatDistance,
+        formatElevation,
+        formatTimeHHMM,
+    } from "$lib/util/format_util";
+    import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
+    import "$lib/vendor/leaflet-elevation/src/index.css";
+    import type { Icon, Map, Marker } from "leaflet";
+    import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
+    import "leaflet/dist/leaflet.css";
+    import type { DataSource } from "photoswipe";
+    import PhotoSwipeLightbox from "photoswipe/lightbox";
+    import "photoswipe/style.css";
+    import { onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+
+    export let trail: Trail;
+    export let showMap: boolean = false;
+    export let markers: Marker[] = [];
+
+    const tabs = [
+        $_("description"),
+        $_("waypoints"),
+        $_("photos"),
+        $_("summit-book"),
+    ];
+
+    let map: Map;
+
+    let activeTab = 0;
+
+    let lightbox: PhotoSwipeLightbox;
+    let lightboxDataSource: DataSource;
+
+    let thumbnail = trail.photos.length
+        ? getFileURL(trail, trail.photos[trail.thumbnail])
+        : "/imgs/default_thumbnail.webp";
+
+    onMount(async () => {
+        if (showMap) {
+            const L = (await import("leaflet")).default;
+            await import("leaflet-gpx");
+            await import("leaflet.awesome-markers");
+
+            map = L.map("map").setView([0, 0], 2);
+
+            L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+                attribution: "© OpenStreetMap contributors",
+            }).addTo(map);
+
+            const gpxLayer = new L.GPX(trail.expand.gpx_data!, {
+                async: true,
+                polyline_options: {
+                    className: "lightblue-theme elevation-polyline",
+                    opacity: 0.75,
+                    weight: 5,
+                },
+                gpx_options: {
+                    parseElements: ["track"] as any,
+                },
+                marker_options: {
+                    startIcon: L.AwesomeMarkers.icon({
+                        icon: "circle-half-stroke",
+                        prefix: "fa",
+                        markerColor: "cadetblue",
+                        iconColor: "white",
+                    }) as Icon,
+                    startIconUrl: "",
+                    endIconUrl: "",
+                    shadowUrl: "",
+                },
+            })
+                .on("loaded", function (e) {
+                    map.fitBounds(e.target.getBounds());
+                })
+                .addTo(map);
+
+            for (const waypoint of trail.expand.waypoints) {
+                const marker = createMarkerFromWaypoint(L, waypoint);
+                marker.addTo(map);
+                markers.push(marker);
+            }
+        }
+
+        lightboxDataSource = trail.photos.map((p) => ({
+            src: getFileURL(trail, p),
+        }));
+        lightbox = new PhotoSwipeLightbox({
+            dataSource: lightboxDataSource,
+            pswpModule: async () => await import("photoswipe"),
+        });
+        lightbox.init();
+
+        lightbox.on("beforeOpen", () => {
+            const pswp = lightbox.pswp;
+            const ds = pswp?.options?.dataSource;
+            if (Array.isArray(ds)) {
+                for (let idx = 0, len = ds.length; idx < len; idx++) {
+                    const item = ds[idx];
+                    const img = new Image();
+                    img.onload = () => {
+                        item.width = img.naturalWidth;
+                        item.height = img.naturalHeight;
+                        pswp?.refreshSlideContent(idx);
+                    };
+                    img.src = item.src as string;
+                }
+            }
+        });
+    });
+
+    function openMarkerPopup(i: number) {
+        markers[i].openPopup();
+    }
+
+    function openGallery(idx: number) {
+        lightbox?.loadAndOpen(idx, lightboxDataSource);
+    }
+
+    async function toggleMapFullScreen() {
+        goto(`/map/trail/${trail.id!}`);
+    }
+</script>
+
+<div
+    class="trail-info-panel max-w-5xl mx-auto border border-input-border rounded-3xl overflow-x-hidden h-full"
+>
+    <div class="trail-info-panel-header sticky -top-44 z-10">
+        <section class="relative h-80">
+            <img class="w-full h-80" src={thumbnail} alt="" />
+            <div
+                class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"
+            ></div>
+            <div
+                class="flex absolute justify-between items-end w-full bottom-8 left-0 px-8 gap-y-4"
+            >
+                <div class="text-white">
+                    <h4 class="text-4xl font-bold">
+                        {trail.name}
+                    </h4>
+                    <div class="flex flex-wrap gap-x-8 gap-y-2 mt-4 mr-8">
+                        {#if trail.location}
+                            <h3 class="text-lg">
+                                <i class="fa fa-location-dot mr-3"></i>
+                                {trail.location}
+                            </h3>
+                        {/if}
+                        <h3 class="text-lg">
+                            <i class="fa fa-person-hiking mr-3"></i>
+                            {$_(trail.difficulty ?? "?")}
+                        </h3>
+                    </div>
+                </div>
+                {#if $currentUser && $currentUser.id == trail.author}
+                    <TrailDropdown {trail} mode="overview"></TrailDropdown>
+                {/if}
+            </div>
+        </section>
+        {#if showMap}
+            <section
+                class="grid grid-cols-2 sm:grid-cols-4 gap-y-4 justify-around py-8 border-b border-input-border"
+            >
+                <div class="flex flex-col items-center">
+                    <span>{$_("distance")}</span>
+                    <span class="font-semibold text-lg"
+                        >{formatDistance(trail.distance)}</span
+                    >
+                </div>
+                <div class="flex flex-col items-center">
+                    <span>{$_("elevation-gain")}</span>
+                    <span class="font-semibold text-lg"
+                        >{formatElevation(trail.elevation_gain)}</span
+                    >
+                </div>
+                <div class="flex flex-col items-center">
+                    <span>{$_("est-duration")}</span>
+                    <span class="font-semibold text-lg"
+                        >{formatTimeHHMM(trail.duration)}</span
+                    >
+                </div>
+                {#if trail.expand.category}
+                    <div class="flex flex-col items-center">
+                        <span>{$_("category")}</span>
+                        <span class="font-semibold text-lg"
+                            >{trail.expand.category.name}</span
+                        >
+                    </div>
+                {/if}
+            </section>
+        {/if}
+        {#if trail.tags && trail.tags.length > 0}
+            <hr class="border-separator" />
+            <section class="flex p-8 gap-4 text-gray-600">
+                {#each trail.tags as tag}
+                    <span class="py-2 px-4 border rounded-full">{tag}</span>
+                {/each}
+            </section>
+            <hr class="border-separator" />
+        {/if}
+        <section class="trail-info-panel-tabs px-4 py-2 bg-white">
+            <Tabs {tabs} bind:activeTab></Tabs>
+        </section>
+    </div>
+    <section class="trail-info-panel-content px-8">
+        <div
+            class="grid grid-cols-1 mt-4 gap-8 overflow-scroll"
+            class:md:grid-cols-[1fr_18rem]={showMap}
+        >
+            {#if activeTab == 0}
+                <article class="text-justify whitespace-pre-line text-sm">
+                    {trail.description}
+                </article>
+            {/if}
+            {#if activeTab == 1}
+                <ul>
+                    {#each trail.expand.waypoints ?? [] as waypoint, i}
+                        <li on:mouseenter={() => openMarkerPopup(i)}>
+                            <WaypointCard {waypoint}></WaypointCard>
+                        </li>
+                    {/each}
+                </ul>
+            {/if}
+            {#if activeTab == 2}
+                <div
+                    id="photo-gallery"
+                    class="grid grid-cols-1 {showMap
+                        ? 'sm:grid-cols-2 md:grid-cols-3'
+                        : ''} gap-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={getFileURL(trail, photo)}
+                            alt=""
+                        />
+                    {/each}
+                </div>
+            {/if}
+            {#if activeTab == 3}
+                <ul>
+                    {#each trail.expand.summit_logs ?? [] as log}
+                        <li><SummitLogCard {log}></SummitLogCard></li>
+                    {/each}
+                </ul>
+            {/if}
+            {#if showMap}
+                <div class="relative">
+                    <div class="rounded-xl h-72" id="map">
+                        <div class="leaflet-top leaflet-right">
+                            <button
+                                class="leaflet-control fa fa-maximize rounded-full text-lg bg-white text-black px-[14px] py-2 hover:bg-gray-100"
+                                style="cursor: pointer !important"
+                                on:click={() => toggleMapFullScreen()}
+                            ></button>
+                        </div>
+                    </div>
+                </div>
+            {/if}
+        </div>
+    </section>
+</div>
+
+<style>
+    .trail-info-panel img {
+        object-fit: cover;
+    }
+</style>
diff --git a/web/src/lib/vendor/svelte-form-lib/create-form.js b/web/src/lib/vendor/svelte-form-lib/create-form.js
index b88c0691..bd25a95c 100644
--- a/web/src/lib/vendor/svelte-form-lib/create-form.js
+++ b/web/src/lib/vendor/svelte-form-lib/create-form.js
@@ -28,6 +28,7 @@ export const createForm = (config) => {
   const validationSchema = config.validationSchema;
   const validateFunction = config.validate;
   const onSubmit = config.onSubmit;
+  const onError = config.onError;
 
   const getInitial = {
     values: () => util.cloneDeep(initialValues),
@@ -133,6 +134,7 @@ export const createForm = (config) => {
               return clearErrorsAndSubmit(values);
             } else {
               errors.set(error);
+              onError(error)
               isSubmitting.set(false);
             }
           })
@@ -154,7 +156,7 @@ export const createForm = (config) => {
                 yupErrors.inner.map((error) =>
                   util.set(updatedErrors, error.path, error.message),
                 );
-
+                onError(updatedErrors)
                 errors.set(updatedErrors);
               }
               isSubmitting.set(false);
diff --git a/web/src/lib/vendor/svelte-form-lib/index.d.ts b/web/src/lib/vendor/svelte-form-lib/index.d.ts
index 83a75f6a..2fb3a423 100644
--- a/web/src/lib/vendor/svelte-form-lib/index.d.ts
+++ b/web/src/lib/vendor/svelte-form-lib/index.d.ts
@@ -61,6 +61,7 @@ type FormState<Inf = Record<string, any>> = {
 declare function createForm<Inf = Record<string, any>>(formProperties: {
   initialValues: Inf;
   onSubmit: (values: Inf) => any | Promise<any>;
+  onError?: (errors: Record<string, any>) => any | Promise<any>;
   validate?: (values: Inf) => any | undefined;
   validationSchema?: ObjectSchema<any>;
 }): FormState<Inf>;
diff --git a/web/src/routes/map/trail/[id]/+page.svelte b/web/src/routes/map/trail/[id]/+page.svelte
index 39fa3a74..6df874c4 100644
--- a/web/src/routes/map/trail/[id]/+page.svelte
+++ b/web/src/routes/map/trail/[id]/+page.svelte
@@ -1,79 +1,15 @@
 <script lang="ts">
-    import SummitLogCard from "$lib/components/summit_log/summit_log_card.svelte";
-    import Tabs from "$lib/components/tabs.svelte";
     import MapWithElevation from "$lib/components/trail/map_with_elevation.svelte";
-    import TrailDropdown from "$lib/components/trail/trail_dropdown.svelte";
-    import WaypointCard from "$lib/components/waypoint/waypoint_card.svelte";
+    import TrailInfoPanel from "$lib/components/trail/trail_info_panel.svelte";
     import { trail } from "$lib/stores/trail_store";
-    import { currentUser } from "$lib/stores/user_store";
-    import { getFileURL } from "$lib/util/file_util";
-    import {
-        formatDistance,
-        formatElevation,
-        formatTimeHHMM,
-    } from "$lib/util/format_util";
     import "$lib/vendor/leaflet-elevation/src/index.css";
     import type { Marker } from "leaflet";
     import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
     import "leaflet/dist/leaflet.css";
-    import type { DataSource } from "photoswipe/lightbox";
-    import PhotoSwipeLightbox from "photoswipe/lightbox";
     import "photoswipe/style.css";
-    import { onMount } from "svelte";
     import { _ } from "svelte-i18n";
 
     let markers: Marker[];
-
-    let lightbox: PhotoSwipeLightbox;
-    let lightboxDataSource: DataSource;
-
-    const tabs = [
-        $_("description"),
-        $_("waypoints"),
-        $_("photos"),
-        $_("summit-book"),
-    ];
-    let activeTab = 0;
-
-    const thumbnail = $trail.photos.length
-        ? getFileURL($trail, $trail.photos[$trail.thumbnail])
-        : "/imgs/default_thumbnail.webp";
-
-    onMount(() => {
-        lightboxDataSource = $trail.photos.map((p) => ({
-            src: getFileURL($trail, p),
-        }));
-        lightbox = new PhotoSwipeLightbox({
-            dataSource: lightboxDataSource,
-            pswpModule: async () => await import("photoswipe"),
-        });
-        lightbox.init();
-
-        lightbox.on("beforeOpen", () => {
-            const pswp = lightbox.pswp;
-            const ds = pswp?.options?.dataSource;
-            if (Array.isArray(ds)) {
-                for (let idx = 0, len = ds.length; idx < len; idx++) {
-                    const item = ds[idx];
-                    const img = new Image();
-                    img.onload = () => {
-                        item.width = img.naturalWidth;
-                        item.height = img.naturalHeight;
-                        pswp?.refreshSlideContent(idx);
-                    };
-                    img.src = item.src as string;
-                }
-            }
-        });
-    });
-
-    function openMarkerPopup(i: number) {
-        markers[i].openPopup();
-    }
-
-    function openGallery(idx: number) {
-        lightbox?.loadAndOpen(idx, lightboxDataSource);
-    }
 </script>
 
 <svelte:head>
@@ -82,107 +18,8 @@
 <main class="grid grid-cols-1 md:grid-cols-[458px_1fr] gap-x-1 gap-y-4">
     <div
         id="trail-details"
-        class="md:overflow-y-auto md:overflow-x-hidden flex flex-col items-stretch gap-4 rounded-xl"
     >
-        <section class="relative h-80">
-            <img
-                class="w-full h-80 object-cover"
-                src={thumbnail}
-                alt=""
-            />
-            <div
-                class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"
-            ></div>
-            <div
-                class="flex absolute justify-between items-end w-full bottom-8 left-0 px-8 gap-y-4"
-            >
-                <div class="text-white">
-                    <h4 class="text-4xl font-bold">
-                        {$trail.name}
-                    </h4>
-                    <div class="flex flex-wrap gap-x-8 gap-y-2  mt-4 mr-8">
-                        <h3 class="text-lg">
-                            <i class="fa fa-location-dot mr-3"></i>
-                            {$trail.location}
-                        </h3>
-                        <h3 class="text-lg">
-                            <i class="fa fa-person-hiking mr-3"></i>
-                            {$_($trail.difficulty ?? "?")}
-                        </h3>
-                    </div>
-                </div>
-                {#if $currentUser && $currentUser.id == $trail.author}
-                    <TrailDropdown trail={$trail} mode="map"></TrailDropdown>
-                {/if}
-            </div>
-        </section>
-        <section class="grid grid-cols-2 sm:grid-cols-4 gap-y-4 justify-around">
-            <div class="flex flex-col items-center text-sm">
-                <span class="text-gray-500">{$_('distance')}</span>
-                <span class="font-semibold"
-                    >{formatDistance($trail.distance)}</span
-                >
-            </div>
-            <div class="flex flex-col items-center text-sm">
-                <span class="text-gray-500">{$_('elevation-gain')}</span>
-                <span class="font-semibold"
-                    >{formatElevation($trail.elevation_gain)}</span
-                >
-            </div>
-            <div class="flex flex-col items-center text-sm">
-                <span class="text-gray-500">{$_('est-duration')}</span>
-                <span class="font-semibold"
-                    >{formatTimeHHMM($trail.duration)}</span
-                >
-            </div>
-            {#if $trail.expand.category}
-                <div class="flex flex-col items-center text-sm">
-                    <span class="text-gray-500">{$_('category')}</span>
-                    <span class="font-semibold"
-                        >{$trail.expand.category.name}</span
-                    >
-                </div>
-            {/if}
-        </section>
-        <hr class=" border-input-border" />
-        <section class="mx-4">
-            <Tabs extraClasses="text-sm mb-4" {tabs} bind:activeTab></Tabs>
-            {#if activeTab == 0}
-                <article class="text-justify whitespace-pre-line text-sm">
-                    {$trail.description}
-                </article>
-            {/if}
-            {#if activeTab == 1}
-                <ul>
-                    {#each $trail.expand.waypoints ?? [] as waypoint, i}
-                        <li on:mouseenter={() => openMarkerPopup(i)}>
-                            <WaypointCard {waypoint}></WaypointCard>
-                        </li>
-                    {/each}
-                </ul>
-            {/if}
-            {#if activeTab == 2}
-                <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={getFileURL($trail, photo)}
-                            alt=""
-                        />
-                    {/each}
-                </div>
-            {/if}
-            {#if activeTab == 3}
-                <ul>
-                    {#each $trail.expand.summit_logs ?? [] as log}
-                        <li><SummitLogCard {log}></SummitLogCard></li>
-                    {/each}
-                </ul>
-            {/if}
-        </section>
+        <TrailInfoPanel trail={$trail} {markers}></TrailInfoPanel>
     </div>
     <MapWithElevation trail={$trail} bind:markers></MapWithElevation>
 </main>
diff --git a/web/src/routes/trail/edit/[id]/+page.svelte b/web/src/routes/trail/edit/[id]/+page.svelte
index a5ac8ee2..6350b24b 100644
--- a/web/src/routes/trail/edit/[id]/+page.svelte
+++ b/web/src/routes/trail/edit/[id]/+page.svelte
@@ -101,6 +101,26 @@
     const { form, errors, handleChange, handleSubmit } = createForm<Trail>({
         initialValues: data.trail,
         validationSchema: trailSchema,
+        onError: (errors) => {
+            if (errors.name) {
+                const nameInput = document.querySelector(
+                    "input[name=name]",
+                ) as HTMLElement;
+
+                if (window.innerWidth < 768) {
+                    window?.scroll({
+                        top: nameInput.offsetTop - 24,
+                        behavior: "smooth",
+                    });
+                } else {
+                    const form = document.getElementById("trail-form");
+                    form?.scroll({
+                        top: nameInput.offsetTop - 130,
+                        behavior: "smooth",
+                    });
+                }
+            }
+        },
         onSubmit: async (submittedTrail) => {
             loading = true;
             try {
diff --git a/web/src/routes/trail/view/[id]/+page.svelte b/web/src/routes/trail/view/[id]/+page.svelte
index 855127a3..4a6bb196 100644
--- a/web/src/routes/trail/view/[id]/+page.svelte
+++ b/web/src/routes/trail/view/[id]/+page.svelte
@@ -1,267 +1,12 @@
-<script lang="ts">
-    import { goto } from "$app/navigation";
-    import SummitLogCard from "$lib/components/summit_log/summit_log_card.svelte";
-    import Tabs from "$lib/components/tabs.svelte";
-    import TrailDropdown from "$lib/components/trail/trail_dropdown.svelte";
-    import WaypointCard from "$lib/components/waypoint/waypoint_card.svelte";
+<script>
+    import TrailInfoPanel from "$lib/components/trail/trail_info_panel.svelte";
     import { trail } from "$lib/stores/trail_store";
-    import { currentUser } from "$lib/stores/user_store";
-    import { getFileURL } from "$lib/util/file_util";
-    import {
-        formatDistance,
-        formatElevation,
-        formatTimeHHMM,
-    } from "$lib/util/format_util";
-    import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
-    import "$lib/vendor/leaflet-elevation/src/index.css";
-    import type { Icon, Map, Marker } from "leaflet";
-    import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
-    import "leaflet/dist/leaflet.css";
-    import type { DataSource } from "photoswipe";
-    import PhotoSwipeLightbox from "photoswipe/lightbox";
-    import "photoswipe/style.css";
-    import { onMount } from "svelte";
     import { _ } from "svelte-i18n";
-
-    const tabs = [
-        $_("description"),
-        $_("waypoints"),
-        $_("photos"),
-        $_("summit-book"),
-    ];
-
-    let map: Map;
-
-    let activeTab = 0;
-
-    let markers: Marker[] = [];
-
-    let lightbox: PhotoSwipeLightbox;
-    let lightboxDataSource: DataSource;
-
-    const thumbnail = $trail.photos.length
-        ? getFileURL($trail, $trail.photos[$trail.thumbnail])
-        : "/imgs/default_thumbnail.webp";
-
-    onMount(async () => {
-        const L = (await import("leaflet")).default;
-        await import("leaflet-gpx");
-        await import("leaflet.awesome-markers");
-
-        map = L.map("map").setView([0, 0], 2);
-
-        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
-            attribution: "© OpenStreetMap contributors",
-        }).addTo(map);
-
-        const gpxLayer = new L.GPX($trail.expand.gpx_data!, {
-            async: true,
-            polyline_options: {
-                className: "lightblue-theme elevation-polyline",
-                opacity: 0.75,
-                weight: 5,
-            },
-            gpx_options: {
-                parseElements: ["track"] as any,
-            },
-            marker_options: {
-                startIcon: L.AwesomeMarkers.icon({
-                    icon: "circle-half-stroke",
-                    prefix: "fa",
-                    markerColor: "cadetblue",
-                    iconColor: "white",
-                }) as Icon,
-                startIconUrl: "",
-                endIconUrl: "",
-                shadowUrl: "",
-            },
-        })
-            .on("loaded", function (e) {
-                map.fitBounds(e.target.getBounds());
-            })
-            .addTo(map);
-
-        for (const waypoint of $trail.expand.waypoints) {
-            const marker = createMarkerFromWaypoint(L, waypoint);
-            marker.addTo(map);
-            markers.push(marker);
-        }
-
-        lightboxDataSource = $trail.photos.map((p) => ({
-            src: getFileURL($trail, p),
-        }));
-        lightbox = new PhotoSwipeLightbox({
-            dataSource: lightboxDataSource,
-            pswpModule: async () => await import("photoswipe"),
-        });
-        lightbox.init();
-
-        lightbox.on("beforeOpen", () => {
-            const pswp = lightbox.pswp;
-            const ds = pswp?.options?.dataSource;
-            if (Array.isArray(ds)) {
-                for (let idx = 0, len = ds.length; idx < len; idx++) {
-                    const item = ds[idx];
-                    const img = new Image();
-                    img.onload = () => {
-                        item.width = img.naturalWidth;
-                        item.height = img.naturalHeight;
-                        pswp?.refreshSlideContent(idx);
-                    };
-                    img.src = item.src as string;
-                }
-            }
-        });
-    });
-
-    function openMarkerPopup(i: number) {
-        markers[i].openPopup();
-    }
-
-    function openGallery(idx: number) {
-        lightbox?.loadAndOpen(idx, lightboxDataSource);
-    }
-
-    async function toggleMapFullScreen() {
-        goto(`/map/trail/${$trail.id!}`);
-    }
 </script>
 
+<TrailInfoPanel trail={$trail} showMap={true}></TrailInfoPanel>
+
 <svelte:head>
     <title>{$trail.name} | {$_("trail", { values: { n: 1 } })} | wanderer</title
     >
 </svelte:head>
-
-<div
-    class="trail-panel max-w-5xl mx-auto border border-input-border rounded-3xl overflow-hidden"
->
-    <section class="relative h-80">
-        <img class="w-full h-80" src={thumbnail} alt="" />
-        <div
-            class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"
-        ></div>
-        <div
-            class="flex absolute justify-between items-end w-full bottom-8 left-0 px-8 gap-y-4"
-        >
-            <div class="text-white">
-                <h4 class="text-4xl font-bold">
-                    {$trail.name}
-                </h4>
-                <div class="flex flex-wrap gap-x-8 gap-y-2  mt-4 mr-8">
-                    <h3 class="text-lg">
-                        <i class="fa fa-location-dot mr-3"></i>
-                        {$trail.location}
-                    </h3>
-                    <h3 class="text-lg">
-                        <i class="fa fa-person-hiking mr-3"></i>
-                        {$_($trail.difficulty ?? "?")}
-                    </h3>
-                </div>
-            </div>
-            {#if $currentUser && $currentUser.id == $trail.author}
-                <TrailDropdown trail={$trail} mode="overview"></TrailDropdown>
-            {/if}
-        </div>
-    </section>
-    <section
-        class="grid grid-cols-2 sm:grid-cols-4 gap-y-4 justify-around py-8 border-b border-input-border"
-    >
-        <div class="flex flex-col items-center">
-            <span>{$_("distance")}</span>
-            <span class="font-semibold text-lg"
-                >{formatDistance($trail.distance)}</span
-            >
-        </div>
-        <div class="flex flex-col items-center">
-            <span>{$_("elevation-gain")}</span>
-            <span class="font-semibold text-lg"
-                >{formatElevation($trail.elevation_gain)}</span
-            >
-        </div>
-        <div class="flex flex-col items-center">
-            <span>{$_("est-duration")}</span>
-            <span class="font-semibold text-lg"
-                >{formatTimeHHMM($trail.duration)}</span
-            >
-        </div>
-        {#if $trail.expand.category}
-            <div class="flex flex-col items-center">
-                <span>{$_("category")}</span>
-                <span class="font-semibold text-lg"
-                    >{$trail.expand.category.name}</span
-                >
-            </div>
-        {/if}
-    </section>
-    {#if $trail.tags && $trail.tags.length > 0}
-        <hr class="border-separator" />
-        <section class="flex p-8 gap-4 text-gray-600">
-            {#each $trail.tags as tag}
-                <span class="py-2 px-4 border rounded-full">{tag}</span>
-            {/each}
-        </section>
-        <hr class="border-separator" />
-    {/if}
-    <section class="p-8">
-        <Tabs {tabs} bind:activeTab></Tabs>
-        <div class="grid grid-cols-1 md:grid-cols-[1fr_18rem] mt-6 gap-8">
-            <div>
-                {#if activeTab == 0}
-                    <article class="text-justify whitespace-pre-line text-sm">
-                        {$trail.description}
-                    </article>
-                {/if}
-                {#if activeTab == 1}
-                    <ul>
-                        {#each $trail.expand.waypoints ?? [] as waypoint, i}
-                            <li on:mouseenter={() => openMarkerPopup(i)}>
-                                <WaypointCard {waypoint}></WaypointCard>
-                            </li>
-                        {/each}
-                    </ul>
-                {/if}
-                {#if activeTab == 2}
-                    <div
-                        id="photo-gallery"
-                        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-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={getFileURL($trail, photo)}
-                                alt=""
-                            />
-                        {/each}
-                    </div>
-                {/if}
-                {#if activeTab == 3}
-                    <ul>
-                        {#each $trail.expand.summit_logs ?? [] as log}
-                            <li><SummitLogCard {log}></SummitLogCard></li>
-                        {/each}
-                    </ul>
-                {/if}
-            </div>
-            <div class="relative">
-                <div class="rounded-xl h-72" id="map">
-                    <div class="leaflet-top leaflet-right">
-                        <button
-                            class="leaflet-control fa fa-maximize rounded-full text-lg bg-white text-black px-[14px] py-2 hover:bg-gray-100"
-                            style="cursor: pointer !important"
-                            on:click={() => toggleMapFullScreen()}
-                        ></button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-</div>
-
-<style>
-    .trail-panel img {
-        object-fit: cover;
-    }
-</style>