adds multiple qol changes

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

@@ -1,9 +1,11 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
+    import { page } from "$app/stores";
     import Search, {
         type SearchItem,
     } from "$lib/components/base/search.svelte";
     import TrailCard from "$lib/components/trail/trail_card.svelte";
+    import EmptyStateSearch from "$lib/components/empty_states/empty_state_search.svelte";
     import { ms } from "$lib/meilisearch";
     import type { Trail } from "$lib/models/trail";
     import {
@@ -12,7 +14,15 @@
     } from "$lib/stores/trail_store";
     import { country_codes } from "$lib/util/country_code_util";
     import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
-    import type { GPX, Icon, LatLng, LeafletEvent, Map, Marker } from "leaflet";
+    import type {
+        GPX,
+        Icon,
+        LatLng,
+        LatLngBoundsExpression,
+        LeafletEvent,
+        Map,
+        Marker,
+    } from "leaflet";
     import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
     import "leaflet/dist/leaflet.css";
     import { onMount } from "svelte";
@@ -38,19 +48,45 @@
         map.on("moveend", async (e) => {
             const bounds = map.getBounds();
             await searchTrails(bounds.getNorthEast(), bounds.getSouthWest());
+
+            $page.url.searchParams.set("tl_lat", bounds.getNorth().toString());
+            $page.url.searchParams.set("tl_lon", bounds.getEast().toString());
+            $page.url.searchParams.set("br_lat", bounds.getSouth().toString());
+            $page.url.searchParams.set("br_lon", bounds.getWest().toString());
+
+            goto(`?${$page.url.searchParams.toString()}`);
         });
 
-        navigator.geolocation.getCurrentPosition(
-            (position) => {
-                const lat = position.coords.latitude;
-                const lon = position.coords.longitude;
+        const lat = $page.url.searchParams.get("lat");
+        const lon = $page.url.searchParams.get("lon");
 
-                // map.setView([lat, lon], 15);
-            },
-            (error) => {
-                console.error("Error getting user location:", error);
-            },
-        );
+        const tl_lat = $page.url.searchParams.get("tl_lat");
+        const tl_lon = $page.url.searchParams.get("tl_lon");
+        const br_lat = $page.url.searchParams.get("br_lat");
+        const br_lon = $page.url.searchParams.get("br_lon");
+
+        if (lat && lon) {
+            map.setView([parseFloat(lat), parseFloat(lon)], 12);
+        } else if (tl_lat && tl_lon && br_lat && br_lon) {
+            const boundingBox: LatLngBoundsExpression = [
+                [parseFloat(tl_lat), parseFloat(tl_lon)],
+                [parseFloat(br_lat), parseFloat(br_lon)],
+            ];
+
+            map.fitBounds(boundingBox);
+        } else {
+            navigator.geolocation.getCurrentPosition(
+                (position) => {
+                    const lat = position.coords.latitude;
+                    const lon = position.coords.longitude;
+
+                    map.setView([lat, lon], 13);
+                },
+                (error) => {
+                    console.error("Error getting user location:", error);
+                },
+            );
+        }
     });
 
     async function search(q: string) {
@@ -189,13 +225,25 @@
             placeholder="Search for trails, places..."
             items={searchDropdownItems}
         ></Search>
+        {#if $trails.length == 0}
+            <div>
+                <div class="w-56 my-4">
+                    <EmptyStateSearch></EmptyStateSearch>
+                </div>
+                <h3 class="text-xl font-semibold text-center">
+                    No results found
+                </h3>
+            </div>
+        {/if}
         {#each $trails as trail}
-            <TrailCard
-                {trail}
-                mode="edit"
-                on:mouseenter={() => handleTrailCardMouseEnter(trail)}
-                on:mouseleave={() => handleTrailCardMouseLeave(trail)}
-            ></TrailCard>
+            <a href="/trail/view/{trail.id}">
+                <TrailCard
+                    {trail}
+                    mode="edit"
+                    on:mouseenter={() => handleTrailCardMouseEnter(trail)}
+                    on:mouseleave={() => handleTrailCardMouseLeave(trail)}
+                ></TrailCard>
+            </a>
         {/each}
     </div>
     <div class="rounded-xl" id="map"></div>

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

@@ -76,12 +76,13 @@
         onSubmit: async (submittedTrail) => {
             loading = true;
             try {
-                const form = document.getElementById(
+                const htmlForm = document.getElementById(
                     "trail-form",
                 ) as HTMLFormElement;
-                const formData = new FormData(form);
+                const formData = new FormData(htmlForm);
                 if (!submittedTrail.id) {
-                    await trails_create(submittedTrail, formData);
+                    const createdTrail = await trails_create(submittedTrail, formData);
+                    $form.id = createdTrail.id;
                 } else {
                     await trails_update($trail, submittedTrail, formData);
                 }

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

@@ -1,14 +1,11 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
-    import Dropdown from "$lib/components/base/dropdown.svelte";
+    import type { DropdownItem } from "$lib/components/base/dropdown.svelte";
+    import ConfirmModal from "$lib/components/confirm_modal.svelte";
     import SummitLogCard from "$lib/components/summit_log/summit_log_card.svelte";
     import Tabs from "$lib/components/tabs.svelte";
     import WaypointCard from "$lib/components/waypoint/waypoint_card.svelte";
-    import {
-        trail,
-        trails_delete,
-        trails_index,
-    } from "$lib/stores/trail_store";
+    import { trail, trails_delete } from "$lib/stores/trail_store";
     import { currentUser } from "$lib/stores/user_store";
     import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
     import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
@@ -19,7 +16,6 @@
     import PhotoSwipeLightbox from "photoswipe/lightbox";
     import "photoswipe/style.css";
     import { onMount } from "svelte";
-    import { fade } from "svelte/transition";
 
     const tabs = ["Description", "Waypoints", "Photos", "Summit book"];
 
@@ -30,9 +26,12 @@
     let lightbox: PhotoSwipeLightbox;
     let lightboxDataSource: DataSource;
 
-    const dropdownItems = [
-        { text: "Edit", value: "edit" },
-        { text: "Delete", value: "delete" },
+    let openConfirmModal: () => void;
+
+    const dropdownItems: DropdownItem[] = [
+        { text: "Show on map", value: "map", icon: "map" },
+        { text: "Edit", value: "edit", icon: "pen" },
+        { text: "Delete", value: "delete", icon: "trash" },
     ];
 
     onMount(async () => {
@@ -124,14 +123,18 @@
     }
 
     async function handleDropdownClick(item: { text: string; value: any }) {
-        if (item.value == "edit") {
+        if (item.value == "map") {
+            goto(`/map/?lat=${$trail.lat}&lon=${$trail.lon}`);
+        } else if (item.value == "edit") {
             goto(`/trail/edit/${$trail.id}`);
         } else if (item.value == "delete") {
-            await trails_delete($trail);
-            await trails_index();
-            goto(`/`);
+            openConfirmModal();
         }
     }
+
+    async function deleteTrail() {
+        trails_delete($trail).then(() => history.back());
+    }
 </script>
 
 <div
@@ -142,24 +145,30 @@
         <div
             class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"
         ></div>
-        <div class="absolute text-white bottom-8 left-8">
-            <h4 class="text-4xl font-bold">
-                {$trail.name}
-            </h4>
-            <h3 class="text-xl mt-4">
-                <i class="fa fa-location-dot mr-3"></i>
-                {$trail.location}
-            </h3>
-        </div>
-        {#if $currentUser && $currentUser.id == $trail.author}
-            <div class="absolute text-white bottom-8 right-8">
-                <Dropdown
-                    size="2xl"
-                    items={dropdownItems}
-                    on:change={(e) => handleDropdownClick(e.detail)}
-                ></Dropdown>
+        <div
+            class="flex absolute flex-wrap 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>
+                <h3 class="text-xl mt-4">
+                    <i class="fa fa-location-dot mr-3"></i>
+                    {$trail.location}
+                </h3>
             </div>
-        {/if}
+            {#if $currentUser && $currentUser.id == $trail.author}
+                <div class="px-4 py-2 bg-white rounded-full space-x-2">
+                    {#each dropdownItems as item}
+                        <button
+                            class="rounded-full py-1 px-[10px] hover:bg-gray-100 focus:ring-4 ring-gray-200 transition-colors"
+                            on:click={() => handleDropdownClick(item)}
+                            ><i class="fa fa-{item.icon}"></i></button
+                        >
+                    {/each}
+                </div>
+            {/if}
+        </div>
     </section>
     <section
         class="grid grid-cols-2 sm:grid-cols-4 gap-y-4 justify-around py-8"
@@ -249,6 +258,11 @@
             ></div>
         </div>
     </section>
+    <ConfirmModal
+        text="Do you really want to delete this trail? This action cannot be undone."
+        bind:openModal={openConfirmModal}
+        on:confirm={deleteTrail}
+    ></ConfirmModal>
 </div>
 
 <style>

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

@@ -10,6 +10,7 @@
         type SelectItem,
     } from "$lib/components/base/select.svelte";
     import Slider from "$lib/components/base/slider.svelte";
+    import EmptyStateSearch from "$lib/components/empty_states/empty_state_search.svelte";
     import TrailCard from "$lib/components/trail/trail_card.svelte";
     import TrailListItem from "$lib/components/trail/trail_list_item.svelte";
     import { ms } from "$lib/meilisearch";
@@ -156,8 +157,6 @@
         } else {
             filter.sortOrder = "+";
         }
-        const sortOrderButton = document.getElementById("sort-order-btn");
-        sortOrderButton?.classList.toggle("rotated");
 
         searchTrails();
     }
@@ -196,7 +195,7 @@
                         id="{category.name}-checkbox"
                         type="checkbox"
                         value={category.id}
-                        class="w-4 h-4 text-primary bg-gray-100 border-gray-300 focus:ring-gray-400 focus:ring-2"
+                        class="w-4 h-4 text-primary accent-primary bg-gray-100 border-gray-300 focus:ring-gray-400 focus:ring-2"
                         on:change={() => setCategoryFilter(category)}
                     />
                     <label
@@ -275,6 +274,7 @@
                     <button
                         id="sort-order-btn"
                         class="rounded-full py-1 px-[10px] hover:bg-gray-100 focus:ring-4 ring-gray-200 transition-colors"
+                        class:rotated={filter.sortOrder == "-"}
                         on:click={() => setSortOrder()}
                         ><i class="fa fa-arrow-up"></i></button
                     >
@@ -295,8 +295,22 @@
             id="trails"
             class="flex items-start flex-wrap gap-8 py-8 max-w-full"
         >
+            {#if $trails.length == 0}
+                <div class="flex flex-col basis-full items-center">
+                    <div class="w-72 md:w-96 my-4">
+                        <EmptyStateSearch></EmptyStateSearch>
+                    </div>
+                    <h3 class="text-xl md:text-3xl font-semibold text-center">
+                        No results found
+                    </h3>
+                </div>
+            {/if}
             {#each $trails as trail}
-                <a class="max-w-full" class:basis-full={selectedDisplayOption === "list"} href="/trail/view/{trail.id}">
+                <a
+                    class="max-w-full"
+                    class:basis-full={selectedDisplayOption === "list"}
+                    href="/trail/view/{trail.id}"
+                >
                     {#if selectedDisplayOption === "cards"}
                         <TrailCard {trail} mode="edit"></TrailCard>
                     {:else}