updates trail panel view

web/src/routes/api/v1/trail/+server.ts

@@ -16,6 +16,7 @@ export async function GET(event: RequestEvent) {
                 t.expand = {} as any
             }
             t.expand!.author = await pb.collection("users_anonymous").getOne(t.author);
+            t.expand?.waypoints?.sort((a, b) => (a.distance_from_start ?? 0) - (b.distance_from_start ?? 0))
         }
         return json(r)
     } catch (e: any) {

web/src/routes/api/v1/trail/[id]/+server.ts

@@ -27,6 +27,9 @@ export async function GET(event: RequestEvent) {
                 log.expand!.author = await pb.collection("users_anonymous").getOne(log.author);
             }
         }
+
+        // sort waypoints by distance
+        r.expand?.waypoints?.sort((a, b) => (a.distance_from_start ?? 0) - (b.distance_from_start ?? 0))
         return json(r)
     } catch (e: any) {
         throw handleError(e)

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

@@ -73,7 +73,7 @@
         const trailItems = r[0].hits.map((t: TrailSearchResult) => ({
             text: t.name,
             description: `Trail ${t.location.length ? ", " + t.location : ""}`,
-            value: t,
+            value: t.id,
             icon: "route",
         }));
         const listItems = r[1].hits.map((t: ListSearchResult) => ({
@@ -93,7 +93,9 @@
     }
 
     function handleSearchClick(item: SearchItem) {
-        if (item.icon === "layer-group") {
+        if (item.icon == "route") {
+            goto(`/trail/view/${item.value}`);
+        } else if (item.icon == "layer-group") {
             goto(`/lists?list=${item.value}`);
         } else {
             map?.setCenter([item.value.lon, item.value.lat]);
@@ -220,7 +222,7 @@
 <main class="grid grid-cols-1 md:grid-cols-[400px_1fr]">
     <div
         id="trail-list"
-        class="md:overflow-y-auto md:overflow-x-hidden flex flex-col items-stretch gap-4 px-3 md:px-8"
+        class="flex flex-col items-stretch gap-4 px-3 md:px-8"
     >
         <div class="sticky top-0 z-10 bg-background pb-4 space-y-4">
             <div class="flex items-center gap-2 md:gap-4">

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

@@ -13,10 +13,10 @@
     <title>{$trail.name} | {$_("map")} | wanderer</title>
 </svelte:head>
 <main class="grid grid-cols-1 md:grid-cols-[458px_1fr] gap-x-1 gap-y-4">
-    <div class="hidden md:block">
+    <div id="panel" class="hidden md:block">
         <TrailInfoPanel trail={$trail} {markers}></TrailInfoPanel>
     </div>
-    <div id="trail-details" class="sticky top-[62px]">
+    <div id="trail-details">
         <MapWithElevationMaplibre
             trails={[$trail]}
             waypoints={$trail.expand?.waypoints}
@@ -28,11 +28,11 @@
 </main>
 
 <style>
-    #trail-details {
+    #trail-details, #panel {
         height: calc(100vh);
     }
     @media only screen and (min-width: 768px) {
-        #trail-details {
+        #trail-details, #panel {
             height: calc(100vh - 124px);
         }
     }