fixes icon picker

web/src/lib/components/base/combobox.svelte

@@ -28,10 +28,11 @@
         await tick();
         const dropdownMenu = document.querySelector(".menu");
         if (dropdownMenu) {
-            let dropdownHTML = dropdownMenu.innerHTML;
-
-            for (const li of dropdownMenu.children) {
+            for (let i = 0; i < dropdownMenu.children.length; i++) {
+                const li = dropdownMenu.children[i];
                 const textNode = li.getElementsByTagName("p")[0];
+                textNode.innerHTML = items[i].text;
+
                 const text = textNode.innerText.replace(
                     new RegExp(value, "gi"),
                     (match) => `<strong>${match}</strong>`,

web/src/lib/components/base/text_field.svelte

@@ -22,7 +22,9 @@
     {/if}
     <div class="flex items-center gap-2">
         {#if icon.length > 0}
+            <div class="w-6">
                 <i class="fa fa-{icon}"></i>
+            </div>
         {/if}
         <input
             {name}

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

@@ -256,7 +256,7 @@
                 ? getFileURL(trail, trail.photos[trail.thumbnail])
                 : "/imgs/default_thumbnail.webp";
             route.bindPopup(
-                `<a href="/trail/view/${trail.id}" data-sveltekit-preload-data="false">
+                `<a href="/trail/view/${trail.id}" data-sveltekit-preload-data="off">
     <li class="flex items-center gap-4 cursor-pointer text-black max-w-80">
         <div class="shrink-0"><img class="h-14 w-14 object-cover rounded-xl" src="${thumbnail}" alt="">
         </div>

web/src/lib/stores/trail_store.ts

@@ -120,7 +120,9 @@ export async function trails_search_bounding_box(northEast: LatLng, southWest: L
 
         const comparison = compareObjectArrays<Trail>(get(trails), response.items)
 
+        if (comparison.added.length || comparison.deleted.length || comparison.updated.length) {
             trails.set(response.items);
+        }
 
         return comparison;
     } else {

web/src/lib/vendor/leaflet-elevation/libs/leaflet-gpxgroup.js

@@ -362,6 +362,7 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
       }
       await elevation._initHotLine(route, this._hotline)
 
+      
       this._map.flyToBounds(route.getBounds(), { duration: 0.25, easeLinearity: 0.25, noMoveStart: true });
 
 

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

@@ -93,7 +93,7 @@
     }
 
     function handleSearchClick(item: SearchItem) {
-        map.setView([item.value._geo.lat, item.value._geo.lng], 12);
+        map.setView([item.value._geo.lat, item.value._geo.lng], 14);
     }
 
     async function searchTrails(northEast: LatLng, southWest: LatLng) {
@@ -130,7 +130,18 @@
     }
 
     function handleMapInit() {
-        if (settings && settings.mapFocus == "trails") {
+        if (
+            $page.url.searchParams.has("tl_lat") &&
+            $page.url.searchParams.has("tl_lon") &&
+            $page.url.searchParams.has("br_lat") &&
+            $page.url.searchParams.has("br_lon")
+        ) {
+            const boundingBox: LatLngBoundsExpression = [
+                [parseFloat($page.url.searchParams.get("br_lat")!), parseFloat($page.url.searchParams.get("tl_lon")!)],
+                [parseFloat($page.url.searchParams.get("tl_lat")!), parseFloat($page.url.searchParams.get("br_lon")!)],
+            ];
+            map.fitBounds(boundingBox);
+        } else if (settings && settings.mapFocus == "trails") {
             const boundingBox: LatLngBoundsExpression = [
                 [maxBoundingBox.max_lat, maxBoundingBox.min_lon],
                 [maxBoundingBox.min_lat, maxBoundingBox.max_lon],
@@ -207,7 +218,10 @@
                 <EmptyStateSearch></EmptyStateSearch>
             {/if}
             {#each $trails as trail, i}
-                <a href="map/trail/{trail.id}">
+                <a
+                    data-sveltekit-preload-data="off"
+                    href="map/trail/{trail.id}"
+                >
                     <TrailCard
                         {trail}
                         on:mouseenter={() => handleTrailCardMouseEnter(trail)}
@@ -217,7 +231,10 @@
             {/each}
         {/if}
     </div>
-    <div id="trail-map" 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}