adds list link sharing

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

@@ -24,19 +24,27 @@
     import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
     import "leaflet/dist/leaflet.css";
 
-    import { tick } from "svelte";
+    import { onMount, tick } from "svelte";
     import { _ } from "svelte-i18n";
 
     let openListModal: () => void;
     let openConfirmModal: () => void;
     let openShareModal: () => void;
 
-    let filter: TrailFilter = $page.data.filter;
     let listToBeDeleted: List | null = null;
 
     let map: Map;
     let showMap: boolean = true;
 
+    onMount(() => {
+        if ($page.url.searchParams.get("list")) {
+            const listToFocus = $lists.find((l) => l.id == $page.url.searchParams.get("list"));
+            if(listToFocus) {
+                setCurrentList(listToFocus);
+            }
+        }
+    });
+
     async function toggleMap() {
         showMap = !showMap;
         if (showMap) {
@@ -99,7 +107,7 @@
 </svelte:head>
 <main class="grid grid-cols-1 md:grid-cols-[430px_1fr] gap-4 lg:gap-4 mx-4">
     <ul
-        class="list-list mx-4 md:mx-auto rounded-xl border border-input-border max-h-full"
+        class="list-list md:mx-auto rounded-xl border border-input-border max-h-full"
     >
         <div
             class="flex gap-x-4 items-center justify-between p-4 bg-background z-50 rounded-xl"
@@ -139,11 +147,7 @@
         ></MapWithElevationMultiple>
     </div>
     <div class="min-w-0" class:hidden={showMap}>
-        <TrailList
-            bind:filter
-            trails={$list.expand?.trails ?? []}
-            on:update={async () => await lists_index()}
-        ></TrailList>
+        <TrailList trails={$list.expand?.trails ?? []}></TrailList>
     </div>
 
     <ListModal bind:openModal={openListModal} on:save={saveList}></ListModal>

web/src/routes/lists/+page.ts

@@ -1,25 +1,6 @@
-import type { TrailFilter } from "$lib/models/trail";
 import { lists_index } from "$lib/stores/list_store";
 import type { Load } from "@sveltejs/kit";
 
-export const load: Load = async ({ params, fetch }) => {
-    const filter: TrailFilter = {
-        q: "",
-        category: [],
-        difficulty: ["easy", "moderate", "difficult"],
-        near: {
-            radius: 2000,
-        },
-        distanceMin: 0,
-        distanceMax: 20000,
-        distanceLimit: 20000,
-        elevationGainMin: 0,
-        elevationGainMax: 4000,
-        elevationGainLimit: 4000,
-        sort: "created",
-        sortOrder: "+",
-    };
+export const load: Load = async ({ params, fetch, url }) => {
     await lists_index(undefined, fetch);
-
-    return {filter};
 };

web/src/routes/lists/edit/[id]/+page.svelte

@@ -130,10 +130,10 @@
     }
 
     function deleteTrail(trail: Trail) {
-        $form.trails?.filter((id) => id !== trail.id);
+        $form.trails = $form.trails?.filter((id) => id !== trail.id);
         $form.expand!.trails = $form.expand!.trails.filter(
             (t) => t.id !== trail.id,
-        );
+        );        
     }
 
     async function findNewTrailShares() {
@@ -185,7 +185,6 @@
     <form
         id="list-form"
         class="flex flex-col gap-4 px-8 order-1 md:order-none mt-8 md:mt-0 overflow-y-scroll"
-        style="max-height: calc(100vh - 124px)"
         on:submit={handleSubmit}
     >
         <h2 class="text-2xl font-semibold">
@@ -338,7 +337,7 @@
 
 <style>
     @media only screen and (min-width: 768px) {
-        #trail-map {
+        #trail-map, #list-form  {
             height: calc(100vh - 124px);
         }
     }

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

@@ -217,7 +217,7 @@
             {/each}
         {/if}
     </div>
-    <div class:hidden={!showMap && browser && window.innerWidth < 768}>
+    <div id="trail-map" class:hidden={!showMap && browser && window.innerWidth < 768}>
         <MapWithElevationMultiple
             on:moveend={handleMapMove}
             on:init={handleMapInit}
@@ -230,11 +230,11 @@
 </main>
 
 <style>
-    #map {
+    #trail-map {
         height: calc(100vh - 180px);
     }
     @media only screen and (min-width: 768px) {
-        #map,
+        #trail-map,
         #trail-list {
             height: calc(100vh - 124px);
         }