adds list link sharing

web/src/lib/components/list/list_card.svelte

@@ -76,7 +76,7 @@
                 <Dropdown items={dropdownItems} on:change></Dropdown>
             {/if}
         </div>
-        <div class="flex mt-1 gap-4 text-sm text-gray-500 whitespace-nowrap">
+        <div class="flex mt-1 gap-x-4 text-sm text-gray-500 whitespace-nowrap flex-wrap">
             <span
                 ><i class="fa fa-left-right mr-2"></i>{formatDistance(
                     cumulativeDistance,

web/src/lib/components/list/list_share_modal.svelte

@@ -5,12 +5,13 @@
     import { TrailShare } from "$lib/models/trail_share";
     import type { User } from "$lib/models/user";
     import {
-        list_share_create,
+    list_share_create,
         list_share_delete,
         list_share_index,
         list_share_update,
-        shares,
+        shares
     } from "$lib/stores/list_share_store";
+    import { lists } from "$lib/stores/list_store";
     import { show_toast } from "$lib/stores/toast_store";
     import {
         trail_share_create,
@@ -25,8 +26,6 @@
     import Search, { type SearchItem } from "../base/search.svelte";
     import type { SelectItem } from "../base/select.svelte";
     import Select from "../base/select.svelte";
-    import { useFBO } from "@threlte/extras";
-    import { lists } from "$lib/stores/list_store";
 
     let openModal: (() => void) | undefined = undefined;
     export let closeModal: (() => void) | undefined = undefined;
@@ -72,7 +71,7 @@
     }
 
     function copyURLToClipboard() {
-        navigator.clipboard.writeText(window.location.href);
+        navigator.clipboard.writeText(window.location.href.split('?')[0] + '?list=' + list.id);
 
         copyButtonText = $_("link-copied");
         setTimeout(() => (copyButtonText = $_("copy-link")), 3000);
@@ -135,6 +134,7 @@
             trails: list.expand?.trails ?? [],
             list_share_via_list: fetchedShares,
         };
+        lists.set($lists)
         sharesLoading = false;
     }
 </script>

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

@@ -36,9 +36,9 @@
         (gpxData.length != gpxGroup._tracks.length ||
             gpxGroup?._tracks[0] !== gpxData[0])
     ) {
-        if (gpxData.length == 0) {
-            map?.setView([0, 0], 4);
-        }
+        // if (gpxData.length == 0) {
+        //     map?.setView([0, 0], 4);
+        // }
         gpxGroup._elevation.updateOptions({
             autofitBounds: options.autofitBounds ?? true,
         });
@@ -162,7 +162,7 @@
             closeBtn: false,
             followMarker: true,
             autofitBounds: true,
-            imperial: $page.data.settings?.unit == "imperial" ?? false,
+            imperial: $page.data.settings?.unit == "imperial",
             reverseCoords: false,
             acceleration: false,
             slope: true,

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

@@ -8,7 +8,7 @@
     import TrailCard from "./trail_card.svelte";
     import TrailListItem from "./trail_list_item.svelte";
 
-    export let filter: TrailFilter;
+    export let filter: TrailFilter | null = null;
     export let trails: Trail[];
     export let pagination: { page: number; totalPages: number } = {
         page: 1,
@@ -41,10 +41,10 @@
         if (storedDisplayOption) {
             selectedDisplayOption = storedDisplayOption;
         }
-        if (storedSort) {
+        if (filter && storedSort) {
             filter.sort = storedSort as typeof filter.sort;
         }
-        if (storedSortOrder) {
+        if (filter && storedSortOrder) {
             filter.sortOrder = storedSortOrder as typeof filter.sortOrder;
         }
         if (storedSort || storedSortOrder) {
@@ -57,11 +57,17 @@
     }
 
     function setSort() {
+        if(!filter) {
+            return;
+        }
         localStorage.setItem("sort", filter.sort);
         dispatch("update", filter);
     }
 
     function setSortOrder() {
+        if(!filter) {
+            return;
+        }
         if (filter.sortOrder === "+") {
             filter.sortOrder = "-";
         } else {
@@ -81,23 +87,25 @@
                 on:pagination
             ></Pagination>
         </div>
-        <div class="shrink-0">
-            <p class="text-sm text-gray-500 pb-2">{$_("sort")}</p>
-            <div class="flex items-center gap-2">
-                <Select
-                    bind:value={filter.sort}
-                    items={sortOptions}
-                    on:change={setSort}
-                ></Select>
-                <button
-                    id="sort-order-btn"
-                    class="btn-icon"
-                    class:rotated={filter.sortOrder == "-"}
-                    on:click={() => setSortOrder()}
-                    ><i class="fa fa-arrow-up"></i></button
-                >
+        {#if filter}
+            <div class="shrink-0">
+                <p class="text-sm text-gray-500 pb-2">{$_("sort")}</p>
+                <div class="flex items-center gap-2">
+                    <Select
+                        bind:value={filter.sort}
+                        items={sortOptions}
+                        on:change={setSort}
+                    ></Select>
+                    <button
+                        id="sort-order-btn"
+                        class="btn-icon"
+                        class:rotated={filter.sortOrder == "-"}
+                        on:click={() => setSortOrder()}
+                        ><i class="fa fa-arrow-up"></i></button
+                    >
+                </div>
             </div>
-        </div>
+        {/if}
         <div class="shrink-0">
             <p class="text-sm text-gray-500 pb-2">{$_("display-as")}</p>
 

web/src/lib/util/leaflet_util.ts

@@ -12,7 +12,7 @@ export const endIcon = () => L.divIcon({
 
 export function createMarkerFromWaypoint(L: any, waypoint: Waypoint, onDragEnd?: (event: LeafletEvent) => void): Marker {
     const icon = L.divIcon({
-        html: `<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-${waypoint.icon}"></i>`,
+        html: `<i class="px-2 py-2 text-white bg-gray-500 rounded-full fa fa-${waypoint.icon}"></i>`,
         className: 'waypoint-icon'
     });
 

web/src/lib/vendor/leaflet-elevation/src/control.js

@@ -30,7 +30,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		Object.assign(this.options, options)
 		if (!this.options.showStartEnd) {
 			this._circleMarkers.remove();
-		} else if (this._data.length) {
+		} else if (this._data.length && this._map) {
 			this._circleMarkers.addTo(this._map);
 		}
 	},