fixes trail update

web/src/css/components.css

@@ -27,19 +27,15 @@
 }
 
 .tab {
-    @apply p-4 rounded-t-lg
+    @apply p-4 rounded-t-lg border border-transparent
 }
 
 .tab:hover {
-    @apply bg-menu-item-background-hover
+    @apply border-menu-item-background-hover
-}
-
-.tab-active {
-    @apply bg-primary text-white
 }
 
 .tab-active:hover {
-    @apply bg-primary
+    @apply bg-transparent
 }
 
 .tooltip {

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

@@ -29,7 +29,7 @@
             type="radio"
             checked={i == selected}
             value={item.value}
-            class="w-4 h-4 accent-input-background border-input-border focus:ring-input-ring focus:ring-2"
+            class="w-4 h-4 accent-primary border-input-border focus:ring-input-ring focus:ring-2"
             on:change={() => handleRadioChange(i)}
         />
         <label for="{name}-radio-{i}" class="ms-2 text-sm">{item.text}</label>

web/src/lib/components/nav_bar.svelte

@@ -12,8 +12,7 @@
         { text: "Home", value: "/" },
         { text: "Trails", value: "/trails" },
         { text: "Map", value: "/map" },
-        { text: "Category", value: "/" },
+        { text: "Lists", value: "/lists" },
-        { text: "Favorites", value: "/" },
     ];
 
     const dropdownItems = [
@@ -72,7 +71,7 @@
     function handleDropdownClick(item: { text: string; value: any }) {
         if (item.value == "logout") {
             logout();
-            goto("/login");
+            goto("/");
         }
     }
 </script>
@@ -85,21 +84,24 @@
             <LogoTextLight></LogoTextLight>
         {/if}
     </a>
+    <menu
+        id="nav-bar-links"
+        class="hidden md:flex gap-8 relative py-1 px-2 "
+    >
+        <div
+            class="absolute h-full w-16 bg-menu-item-background-hover rounded-xl top-0 z-0"
+            style="width: {$indicatorWidth}px; left: {$indicatorPosition}px; scale: {$indicatorScale}"
+        ></div>
+        {#each navBarItems as item}
+            <a
+                class="font-semibold z-10"
+                href={item.value}
+                data-sveltekit-preload-data="tap">{item.text}</a
+            >
+        {/each}
+    </menu>
     {#if $currentUser}
-        <menu id="nav-bar-links" class="flex gap-8 relative py-1 px-2">
+        <div class="hidden md:flex gap-6 items-center">
-            <div
-                class="absolute h-full w-16 bg-menu-item-background-hover rounded-xl top-0 z-0"
-                style="width: {$indicatorWidth}px; left: {$indicatorPosition}px; scale: {$indicatorScale}"
-            ></div>
-            {#each navBarItems as item}
-                <a
-                    class="font-semibold z-10"
-                    href={item.value}
-                    data-sveltekit-preload-data="tap">{item.text}</a
-                >
-            {/each}
-        </menu>
-        <div class="flex gap-6 items-center">
             <button
                 class="btn-icon fa-regular fa-{$theme === 'light'
                     ? 'sun'
@@ -121,6 +123,14 @@
             </Dropdown>
         </div>
     {:else}
-        <a class="btn-primary btn-large" href="/login">Login</a>
+        <div class="hidden md:flex items-center gap-8">
+            <button
+                class="btn-icon fa-regular fa-{$theme === 'light'
+                    ? 'sun'
+                    : 'moon'}"
+                on:click={() => toggleTheme()}
+            ></button>
+            <a class="btn-primary btn-large" href="/login">Login</a>
+        </div>
     {/if}
 </nav>

web/src/lib/components/scene.svelte

@@ -44,7 +44,7 @@
     makeDefault
     position={[5, 2, 0]}
     on:create={({ ref }) => {
-        ref.lookAt(0, 0, -0.5);
+        ref.lookAt(0, 0, 0);
     }}
 />
 

web/src/lib/components/tabs.svelte

@@ -1,10 +1,48 @@
 <script lang="ts">
+    import { onMount } from "svelte";
+    import { cubicOut } from "svelte/easing";
+    import { tweened } from "svelte/motion";
+
     export let tabs: string[];
     export let activeTab: number;
+
+    const indicatorPosition = tweened(0, {
+        duration: 300,
+        easing: cubicOut,
+    });
+
+    const indicatorWidth = tweened(0, {
+        duration: 300,
+        easing: cubicOut,
+    });
+
+    onMount(() => {
+        switchTabs(0);
+    });
+
+    function switchTabs(index: number) {
+        const tabs = document.getElementById("tabs");
+
+        const childElement = tabs?.children[index + 1] as HTMLElement;
+        const newWidth = childElement?.getBoundingClientRect().width ?? 0;
+        const newPosition = childElement.offsetLeft;
+        indicatorWidth.set(newWidth);
+        indicatorPosition.set(newPosition);
+
+        activeTab = index;
+    }
 </script>
 
-<div class="flex gap-2 overflow-x-auto">
+<div id="tabs" class="flex gap-2 overflow-x-auto relative">
+    <div
+        class="absolute h-full bg-menu-item-background-hover rounded-t-lg top-0 z-0"
+        style="width: {$indicatorWidth}px; left: {$indicatorPosition}px;"
+    ></div>
     {#each tabs as tab, i}
-        <button class="tab" class:tab-active={activeTab == i} on:click={() => activeTab = i}>{tab}</button>
+        <button
+            class="tab z-10"
+            class:tab-active={activeTab == i}
+            on:click={() => switchTabs(i)}>{tab}</button
+        >
     {/each}
 </div>

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

@@ -1,37 +1,9 @@
 <script lang="ts">
-    import { goto } from "$app/navigation";
     import type { Trail } from "$lib/models/trail";
-    import { trails_delete, trails_index } from "$lib/stores/trail_store";
-    import { currentUser } from "$lib/stores/user_store";
     import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
-    import Dropdown, { type DropdownItem } from "../base/dropdown.svelte";
 
     export let trail: Trail;
-    export let mode: "show" | "edit" = "show";
 
-    const dropdownItems: DropdownItem[] = [
-        { text: "Open", value: "open", icon: "up-right-from-square" },
-        { text: "Show on map", value: "map", icon: "map" },
-        { text: "Edit", value: "edit", icon: "pen" },
-    ];
-
-    async function handleDropdownClick(
-        currentTrail: Trail,
-        item: { text: string; value: any },
-    ) {
-        if (item.value == "open") {
-            goto(`/trail/view/${currentTrail.id}`);
-        } else if (item.value == "map") {
-            goto(`/map/?lat=${currentTrail.lat}&lon=${currentTrail.lon}`);
-        } else if (item.value == "edit") {
-            goto(`/trail/edit/${currentTrail.id}`);
-        }
-    }
-
-    async function deleteTrail() {
-        await trails_delete(trail);
-        await trails_index();
-    }
 </script>
 
 <div
@@ -45,18 +17,10 @@
     </div>
     <div class="p-4">
         <div>
-            <div class="flex justify-between items-center">
+            <h4 class="font-semibold text-lg">{trail.name}</h4>
-                <h4 class="font-semibold text-lg">{trail.name}</h4>
-                {#if $currentUser && $currentUser.id == trail.author && mode == "edit"}
-                    <Dropdown
-                        on:change={(e) => handleDropdownClick(trail, e.detail)}
-                        items={dropdownItems}
-                    ></Dropdown>
-                {/if}
-            </div>
             <h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
         </div>
-        <div class="flex mt-2 gap-4 text-sm text-gray-500">
+        <div class="flex mt-2 gap-4 text-sm text-gray-500 whitespace-nowrap">
             <span
                 ><i class="fa fa-left-right mr-2"></i>{formatMeters(
                     trail.distance,

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

@@ -0,0 +1,204 @@
+<script lang="ts">
+    import { ms } from "$lib/meilisearch";
+    import type { Category } from "$lib/models/category";
+    import type { TrailFilter } from "$lib/models/trail";
+    import { country_codes } from "$lib/util/country_code_util";
+    import { formatMeters } from "$lib/util/format_util";
+    import { createEventDispatcher } from "svelte";
+    import DoubleSlider from "../base/double_slider.svelte";
+    import type { RadioItem } from "../base/radio_group.svelte";
+    import RadioGroup from "../base/radio_group.svelte";
+    import Search, { type SearchItem } from "../base/search.svelte";
+    import Slider from "../base/slider.svelte";
+    import { slide } from "svelte/transition";
+
+    export let categories: Category[];
+    export let filterExpanded: boolean = true;
+    export let filter: TrailFilter = {
+        q: "",
+        category: [],
+        near: {
+            radius: 2000,
+        },
+        distanceMin: 0,
+        distanceMax: 20000,
+        elevationGainMin: 0,
+        elevationGainMax: 4000,
+        sort: "created",
+        sortOrder: "+",
+    };
+    export let showTrailSearch: boolean = true;
+    export let showCitySearch: boolean = true;
+
+    const dispatch = createEventDispatcher();
+
+    const radioGroupItems: RadioItem[] = [
+        { text: "Completed", value: "completed" },
+        { text: "Not completed", value: "not_completed" },
+        { text: "No preference", value: "no_preference" },
+    ];
+
+    let searchDropdownItems: SearchItem[] = [];
+
+    let citySearchQuery: string = "";
+
+    async function update() {
+        dispatch("update", filter);
+    }
+
+    function setCategoryFilter(category: Category) {
+        const categoryIndex = filter.category.findIndex(
+            (c) => c == category.id,
+        );
+        if (categoryIndex !== -1) {
+            filter.category.splice(categoryIndex, 1);
+        } else {
+            filter.category.push(category.id);
+        }
+
+        update();
+    }
+
+    function setCompletedFilter(item: RadioItem) {
+        switch (item.value) {
+            case "no_preference":
+                filter.completed = undefined;
+                break;
+            case "completed":
+                filter.completed = true;
+                break;
+            case "not_completed":
+                filter.completed = false;
+                break;
+            default:
+                filter.completed = undefined;
+                break;
+        }
+
+        update();
+    }
+
+    async function searchCities(q: string) {
+        if (q.length == 0) {
+            filter.near.lat = undefined;
+            filter.near.lon = undefined;
+            update();
+
+            return;
+        }
+        const result = await ms.index("cities500").search(q, { limit: 5 });
+        searchDropdownItems = result.hits.map((h) => ({
+            text: h.name,
+            description:
+                country_codes[h["country code"] as keyof typeof country_codes],
+            value: h,
+            icon: "city",
+        }));
+    }
+
+    function handleSearchClick(item: SearchItem) {
+        citySearchQuery = item.text;
+        filter.near.lat = item.value.lat;
+        filter.near.lon = item.value.lon;
+
+        update();
+    }
+</script>
+
+<div class="trail-filter p-8 border border-input-border rounded-xl">
+    {#if showTrailSearch}
+        <div class="flex gap-2 items-center">
+            <div class="basis-full">
+                <Search
+                    bind:value={filter.q}
+                    on:update={update}
+                    placeholder="Search trails..."
+                ></Search>
+            </div>
+            <button
+                class="btn-icon md:hidden"
+                on:click={() => (filterExpanded = !filterExpanded)}
+                ><i class="fa fa-sliders"></i></button
+            >
+        </div>
+    {/if}
+
+    {#if filterExpanded}
+        <div in:slide out:slide>
+            {#if showTrailSearch}
+                <hr class="my-4 border-separator" />
+            {/if}
+            <p class="text-sm font-medium pb-4">Category</p>
+            {#each categories as category, i}
+                <div class="flex items-center mb-4">
+                    <input
+                        id="{category.name}-checkbox"
+                        type="checkbox"
+                        value={category.id}
+                        class="w-4 h-4 bg-input-background accent-primary border-input-border focus:ring-input-ring focus:ring-2"
+                        on:change={() => setCategoryFilter(category)}
+                    />
+                    <label for="{category.name}-checkbox" class="ms-2 text-sm"
+                        >{category.name}</label
+                    >
+                </div>
+            {/each}
+            <hr class="my-4 border-separator" />
+            {#if showCitySearch}
+                <p class="text-sm font-medium pb-4">Near</p>
+                <div class="mb-8">
+                    <Search
+                        items={searchDropdownItems}
+                        placeholder="Search cities..."
+                        bind:value={citySearchQuery}
+                        on:update={(e) => searchCities(e.detail)}
+                        on:click={(e) => handleSearchClick(e.detail)}
+                    ></Search>
+                </div>
+                <Slider
+                    maxValue={10000}
+                    bind:currentValue={filter.near.radius}
+                    on:set={() => update()}
+                ></Slider>
+                <p>
+                    <span class="text-gray-500 text-sm">Radius:</span>
+                    {formatMeters(filter.near.radius)}
+                </p>
+                <hr class="my-4 border-separator" />
+            {/if}
+            <p class="text-sm font-medium pb-4">Distance</p>
+            <DoubleSlider
+                minValue={filter.distanceMin}
+                maxValue={filter.distanceMax}
+                bind:currentMin={filter.distanceMin}
+                bind:currentMax={filter.distanceMax}
+                on:set={() => update()}
+            ></DoubleSlider>
+            <div class="flex justify-between">
+                <span>{formatMeters(filter.distanceMin)}</span>
+                <span>{formatMeters(filter.distanceMax)}</span>
+            </div>
+            <hr class="my-4 border-separator" />
+            <p class="text-sm font-medium pb-4">Elevation Gain</p>
+            <DoubleSlider
+                minValue={filter.elevationGainMin}
+                maxValue={filter.elevationGainMax}
+                bind:currentMin={filter.elevationGainMin}
+                bind:currentMax={filter.elevationGainMax}
+                on:set={() => update()}
+            ></DoubleSlider>
+            <div class="flex justify-between">
+                <span>{formatMeters(filter.elevationGainMin)}</span>
+                <span>{formatMeters(filter.elevationGainMax)}</span>
+            </div>
+            <hr class="my-4 border-separator" />
+            <p class="text-sm font-medium pb-4">Completed</p>
+            <RadioGroup
+                name="completed"
+                items={radioGroupItems}
+                selected={2}
+                on:change={(e) => setCompletedFilter(e.detail)}
+            ></RadioGroup>
+        </div>
+    {/if}
+</div>

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

@@ -1,30 +1,8 @@
 <script lang="ts">
-    import { goto } from "$app/navigation";
     import type { Trail } from "$lib/models/trail";
-    import { currentUser } from "$lib/stores/user_store";
     import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
-    import Dropdown, { type DropdownItem } from "../base/dropdown.svelte";
 
     export let trail: Trail;
-
-    const dropdownItems: DropdownItem[] = [
-        { text: "Open", value: "open", icon: "up-right-from-square" },
-        { text: "Show on map", value: "map", icon: "map" },
-        { text: "Edit", value: "edit", icon: "pen" },
-    ];
-
-    async function handleDropdownClick(
-        currentTrail: Trail,
-        item: { text: string; value: any },
-    ) {
-        if (item.value == "open") {
-            goto(`/trail/view/${currentTrail.id}`);
-        } else if (item.value == "map") {
-            goto(`/map/?lat=${currentTrail.lat}&lon=${currentTrail.lon}`);
-        } else if (item.value == "edit") {
-            goto(`/trail/edit/${currentTrail.id}`);
-        }
-    }
 </script>
 
 <li
@@ -38,16 +16,7 @@
         />
     </div>
     <div class="min-w-0 basis-full">
-        <div class="flex items-center justify-between">
+        <h4 class="font-semibold text-lg">{trail.name}</h4>
-            <h4 class="font-semibold text-lg">{trail.name}</h4>
-
-            {#if $currentUser && $currentUser.id == trail.author}
-                <Dropdown
-                    on:change={(e) => handleDropdownClick(trail, e.detail)}
-                    items={dropdownItems}
-                ></Dropdown>
-            {/if}
-        </div>
         <h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
         <div class="flex mt-2 gap-4 text-sm text-gray-500">
             <span

web/src/lib/models/trail.ts

@@ -98,7 +98,7 @@ interface TrailFilter {
     }
     distanceMin: number,
     distanceMax: number,
-    eleavationGainMin: number;
+    elevationGainMin: number;
     elevationGainMax: number;
     completed?: boolean;
     sort: "name" | "distance" | "elevation_gain" | "created";

web/src/lib/stores/trail_store.ts

@@ -15,8 +15,8 @@ export const trail: Writable<Trail> = writable(new Trail(""));
 
 export const editTrail: Writable<Trail> = writable(new Trail(""));
 
-export async function trails_index() {
+export async function trails_index(data: { perPage: number } = { perPage: 5 }) {
-    const response: Trail[] = (await pb.collection('trails').getList<Trail>(1, 5, { expand: "category,waypoints,summit_logs" })).items
+    const response: Trail[] = (await pb.collection('trails').getList<Trail>(1, data.perPage, { expand: "category,waypoints,summit_logs" })).items
 
     for (const trail of response) {
         setFileURLs(trail);
@@ -28,7 +28,7 @@ export async function trails_index() {
 }
 
 export async function trails_search_filter(filter: TrailFilter) {
-    let filterText: string = `distance >= ${filter.distanceMin} AND distance <= ${filter.distanceMax} AND elevation_gain >= ${filter.eleavationGainMin} AND elevation_gain <= ${filter.elevationGainMax}`;
+    let filterText: string = `distance >= ${filter.distanceMin} AND distance <= ${filter.distanceMax} AND elevation_gain >= ${filter.elevationGainMin} AND elevation_gain <= ${filter.elevationGainMax}`;
 
     if (filter.category.length > 0) {
         filterText += ` AND category IN [${filter.category.join(",")}]`;
@@ -63,17 +63,33 @@ export async function trails_search_filter(filter: TrailFilter) {
     return dbResponse;
 }
 
-export async function trails_search_bounding_box(northEast: LatLng, southWest: LatLng) {
+export async function trails_search_bounding_box(northEast: LatLng, southWest: LatLng, filter?: TrailFilter) {
+
+    let filterText: string = "";
+
+    if (filter) {
+        filterText += `distance >= ${filter.distanceMin} AND distance <= ${filter.distanceMax} AND elevation_gain >= ${filter.elevationGainMin} AND elevation_gain <= ${filter.elevationGainMax}`;
+
+        if (filter.category.length > 0) {
+            filterText += ` AND category IN [${filter.category.join(",")}]`;
+        }
+        if (filter.completed !== undefined) {
+            filterText += ` AND completed = ${filter.completed}`;
+        }
+    }
+
     const response = await ms.index("trails").search("", {
         filter: [
             `_geoBoundingBox([${northEast.lat}, ${northEast.lng}], [${southWest.lat}, ${southWest.lng}])`,
+            filterText
         ],
     });
     const trailIds = response.hits.map((h) => h.id);
 
     if (trailIds.length == 0) {
+        const currentTrails : Trail[] = get(trails);
         trails.set([]);
-        return compareObjectArrays<Trail>(get(trails), []);
+        return compareObjectArrays<Trail>(currentTrails, []);
     }
 
     const dbResponse: Trail[] = (
@@ -89,7 +105,7 @@ export async function trails_search_bounding_box(northEast: LatLng, southWest: L
         const gpxData: string = await fetchGPX(trail);
         trail.expand.gpx_data = gpxData;
     }
-    
+
     const comparison = compareObjectArrays<Trail>(get(trails), dbResponse)
 
     trails.set(dbResponse);
@@ -175,7 +191,7 @@ export async function trails_update(oldTrail: Trail, newTrail: Trail, formData:
             ...addedWaypoint,
             marker: undefined,
         });
-        formData.append("waypoints+", model.id!);
+        formData.append("waypoints", model.id!);
     }
 
     for (const updatedWaypoint of waypointUpdates.updated) {
@@ -183,27 +199,37 @@ export async function trails_update(oldTrail: Trail, newTrail: Trail, formData:
             ...updatedWaypoint,
             marker: undefined,
         });
+        formData.append("waypoints", model.id!);
     }
 
     for (const deletedWaypoint of waypointUpdates.deleted) {
         const success = await waypoints_delete(deletedWaypoint.id!);
     }
 
-    const summitLogUpdates = compareObjectArrays<SummitLog>(oldTrail.expand.summit_logs ?? [], newTrail.expand.summit_logs ?? []);
+    for (const unchangedWaypoint of waypointUpdates.unchanged) {
+        formData.append("waypoints", unchangedWaypoint.id!);
+    }
+
+    const summitLogUpdates = compareObjectArrays<SummitLog>(oldTrail.expand.summit_logs ?? [], newTrail.expand.summit_logs ?? []);    
 
     for (const summitLog of summitLogUpdates.added) {
         const model = await summit_logs_create(summitLog);
-        formData.append("summit_logs+", model.id!);
+        formData.append("summit_logs", model.id!);
     }
 
     for (const updatedSummitLog of summitLogUpdates.updated) {
         const model = await summit_logs_update(updatedSummitLog);
+        formData.append("summit_logs", model.id!);
     }
 
     for (const deletedSummitLog of summitLogUpdates.deleted) {
         const success = await summit_logs_delete(deletedSummitLog.id!);
     }
 
+    for (const unchangedSummitLog of summitLogUpdates.unchanged) {
+        formData.append("summit_logs", unchangedSummitLog.id!);
+    }
+
     for (const file of newTrail._photoFiles) {
         formData.append("photos", file);
     }
@@ -283,15 +309,18 @@ function setFileURLs(trail: Trail) {
     }
 }
 
-function compareObjectArrays<T extends { id?: string }>(oldArray: T[], newArray: T[]) {
+function compareObjectArrays<T extends { id?: string }>(oldArray: T[], newArray: T[]) {    
     const newObjects = [];
     const updatedObjects = [];
+    const unchangedObjects = [];
     for (const newObj of newArray) {
         const oldObj = oldArray.find(oldObj => oldObj.id === newObj.id)
         if (!oldObj) {
             newObjects.push(newObj);
         } else if (!util.deepEqual(newObj, oldObj)) {
             updatedObjects.push(newObj);
+        } else {
+            unchangedObjects.push(newObj);
         }
     }
     const deletedObjects = oldArray.filter(oldObj => !newArray.find(newObj => newObj.id === oldObj.id));
@@ -299,29 +328,7 @@ function compareObjectArrays<T extends { id?: string }>(oldArray: T[], newArray:
     return {
         added: newObjects,
         deleted: deletedObjects,
-        updated: updatedObjects
+        updated: updatedObjects,
+        unchanged: unchangedObjects,
     };
 }
-
-function index_trail(trail: Trail) {
-    ms.index('trails').addDocuments([
-        {
-            "id": trail.id,
-            "author": trail.author,
-            "name": trail.name,
-            "description": trail.description,
-            "location": trail.location,
-            "distance": trail.distance,
-            "elevation_gain": trail.elevation_gain,
-            "duration": trail.duration,
-            "category": trail.expand.category?.id,
-            "completed": trail.expand.summit_logs?.length > 0,
-            "created": trail.created,
-            "public": trail.public,
-            "_geo": {
-                "lat": trail.lat,
-                "lng": trail.lon,
-            }
-        }]);
-}
-

web/src/lib/util/format_util.ts

@@ -7,7 +7,7 @@ export function formatTimeHHMM(minutes?: number) {
 
     const h = (minutes - m) / 60;
 
-    return (h < 10 ? "0" : "") + h.toString() + "h " + (m < 10 ? "0" : "") + m.toString() + "m";
+    return (h < 10 ? "0" : "") + h.toString() + "h " + (m < 10 ? "0" : "") + Math.round(m).toString() + "m";
 }
 
 export function formatMeters(meters?: number) {
@@ -15,9 +15,9 @@ export function formatMeters(meters?: number) {
         return "-";
     }
     if (meters % 1 === 0) {
-        return meters >= 1000 ? `${(meters / 1000).toFixed(2)} km` : `${meters} m`;
+        return meters >= 1000 ? `${(meters / 1000)} km` : `${meters} m`;
     } else {
-        return meters >= 1000 ? `${(meters / 1000).toFixed(2)} km` : `${meters.toFixed(2)} m`
+        return meters >= 1000 ? `${(meters / 1000).toFixed(2)} km` : `${Math.round(meters)} m`
     }
 
 }

web/src/routes/+page.svelte

@@ -60,7 +60,7 @@
 </script>
 
 <section
-    class="hero grid grid-cols-1 md:grid-cols-2"
+    class="hero grid grid-cols-1 md:grid-cols-2 md:px-8 md:gap-8"
     style="height: calc(100vh - 112px)"
 >
     <div
@@ -90,10 +90,10 @@
 <section
     class="max-w-7xl mx-auto mt-8 px-8 xl:px-0 grid grid-cols-1 md:grid-cols-2 items-center"
 >
-    <div id="trails" class="flex flex-wrap justify-items-center gap-8 py-8">
+    <div id="trails" class="flex flex-wrap justify-items-center gap-8 py-8 order-1 md:order-none">
         {#each $trails as trail}
             <a href="/trail/view/{trail.id}">
-                <TrailCard {trail} mode="edit"></TrailCard></a
+                <TrailCard {trail}></TrailCard></a
             >
         {/each}
     </div>

web/src/routes/+page.ts

@@ -3,6 +3,6 @@ import { trails_index } from "$lib/stores/trail_store";
 import type { ServerLoad } from "@sveltejs/kit";
 
 export const load: ServerLoad = async ({ params, locals }) => {
-    await trails_index()
+    await trails_index({perPage: 4})
     await categories_index()
 };

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

@@ -2,12 +2,15 @@
     import { goto } from "$app/navigation";
     import Button from "$lib/components/base/button.svelte";
     import TextField from "$lib/components/base/text_field.svelte";
-    import LogoTextTwoLine from "$lib/components/logo/logo_text_two_line.svelte";
+    import LogoTextTwoLineDark from "$lib/components/logo/logo_text_two_line_dark.svelte";
+    import LogoTextTwoLineLight from "$lib/components/logo/logo_text_two_line_light.svelte";
     import { show_toast } from "$lib/stores/toast_store";
     import { login, type User } from "$lib/stores/user_store";
     import { createForm } from "$lib/vendor/svelte-form-lib";
     import { ClientResponseError } from "pocketbase";
     import { object, string } from "yup";
+    import { theme } from "$lib/stores/theme_store";
+
 
     let loading: boolean = false;
     const { form, errors, handleChange, handleSubmit } = createForm<User>({
@@ -50,10 +53,14 @@
 
 <main class="flex justify-center">
     <form
-        class="login-panel max-w-md shadow-lg rounded-xl p-8 flex flex-col justify-center items-center gap-8 w-[28rem] mt-8"
+        class="login-panel max-w-md border border-input-border rounded-xl p-8 flex flex-col justify-center items-center gap-8 w-[28rem] mt-8"
         on:submit={handleSubmit}
     >
-        <LogoTextTwoLine></LogoTextTwoLine>
+        {#if $theme == "light"}
+            <LogoTextTwoLineDark></LogoTextTwoLineDark>
+        {:else}
+            <LogoTextTwoLineLight></LogoTextTwoLineLight>
+        {/if}
         <h4 class="text-xl font-semibold">Save your adventures!</h4>
         <div class="space-y-6 w-80">
             <TextField

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

@@ -7,7 +7,7 @@
     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 type { Trail, TrailFilter } from "$lib/models/trail";
     import {
         trails,
         trails_search_bounding_box,
@@ -26,6 +26,9 @@
     import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
     import "leaflet/dist/leaflet.css";
     import { onMount } from "svelte";
+    import TrailFilterPanel from "$lib/components/trail/trail_filter_panel.svelte";
+    import { categories } from "$lib/stores/category_store";
+    import { slide } from "svelte/transition";
 
     let L: any;
     let map: Map;
@@ -34,6 +37,10 @@
 
     let searchDropdownItems: SearchItem[] = [];
 
+    let showFilter: boolean = false;
+
+    let filter: TrailFilter;
+
     onMount(async () => {
         L = (await import("leaflet")).default;
         await import("leaflet-gpx");
@@ -128,7 +135,11 @@
     }
 
     async function searchTrails(northEast: LatLng, southWest: LatLng) {
-        const changes = await trails_search_bounding_box(northEast, southWest);
+        const changes = await trails_search_bounding_box(
+            northEast,
+            southWest,
+            filter,
+        );
 
         for (const newTrail of changes.added) {
             const gpxLayer = await addGPXLayer(newTrail);
@@ -212,19 +223,46 @@
         const marker: Marker = startMarkers[trail.id!];
         marker?.closePopup();
     }
+
+    async function handleFilterUpdate(filter: TrailFilter) {
+        const bounds = map.getBounds();
+        await searchTrails(bounds.getNorthEast(), bounds.getSouthWest());
+    }
 </script>
 
-<main class="grid grid-cols-[400px_1fr]">
+<main class="grid grid-cols-1 md:grid-cols-[400px_1fr]">
     <div
-        class="overflow-y-auto overflow-x-hidden flex flex-col items-center gap-4 px-8"
+        class="overflow-y-auto overflow-x-hidden flex flex-col items-stretch gap-4 px-8"
+        style="height: calc(100vh - 124px)"
     >
-        <Search
+        <div class="sticky top-0 z-10 bg-background pb-4 space-y-4">
-            extraClasses="w-full"
+            <div class="flex items-center gap-4">
-            on:update={(e) => search(e.detail)}
+                <Search
-            on:click={(e) => handleSearchClick(e.detail)}
+                    extraClasses="w-full"
-            placeholder="Search for trails, places..."
+                    on:update={(e) => search(e.detail)}
-            items={searchDropdownItems}
+                    on:click={(e) => handleSearchClick(e.detail)}
-        ></Search>
+                    placeholder="Search for trails, places..."
+                    items={searchDropdownItems}
+                ></Search>
+                <button
+                    class="btn-icon"
+                    on:click={() => (showFilter = !showFilter)}
+                    ><i class="fa fa-sliders"></i></button
+                >
+            </div>
+            {#if showFilter}
+                <div in:slide out:slide>
+                    <TrailFilterPanel
+                        categories={$categories}
+                        showTrailSearch={false}
+                        showCitySearch={false}
+                        bind:filter
+                        on:update={(e) => handleFilterUpdate(e.detail)}
+                    ></TrailFilterPanel>
+                </div>
+            {/if}
+        </div>
+
         {#if $trails.length == 0}
             <EmptyStateSearch></EmptyStateSearch>
         {/if}
@@ -232,7 +270,6 @@
             <a href="/trail/view/{trail.id}">
                 <TrailCard
                     {trail}
-                    mode="edit"
                     on:mouseenter={() => handleTrailCardMouseEnter(trail)}
                     on:mouseleave={() => handleTrailCardMouseLeave(trail)}
                 ></TrailCard>

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

@@ -1,6 +1,9 @@
+import { categories_index } from "$lib/stores/category_store";
 import { trails } from "$lib/stores/trail_store";
 import type { ServerLoad } from "@sveltejs/kit";
 
 export const load: ServerLoad = async ({ params, locals }) => {
+    await categories_index()
+
     trails.set([])
 };

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

@@ -2,7 +2,9 @@
     import { goto } from "$app/navigation";
     import Button from "$lib/components/base/button.svelte";
     import TextField from "$lib/components/base/text_field.svelte";
-    import LogoTextTwoLine from "$lib/components/logo/logo_text_two_line.svelte";
+    import LogoTextTwoLineDark from "$lib/components/logo/logo_text_two_line_dark.svelte";
+    import LogoTextTwoLineLight from "$lib/components/logo/logo_text_two_line_light.svelte";
+    import { theme } from "$lib/stores/theme_store";
     import { show_toast } from "$lib/stores/toast_store";
     import { users_create, type User, login } from "$lib/stores/user_store";
     import { createForm } from "$lib/vendor/svelte-form-lib";
@@ -53,10 +55,14 @@
 
 <main class="flex justify-center">
     <form
-        class="login-panel max-w-md shadow-lg rounded-xl p-8 flex flex-col justify-center items-center gap-8 w-[28rem] mt-8"
+        class="login-panel max-w-md border border-input-border rounded-xl p-8 flex flex-col justify-center items-center gap-8 w-[28rem] mt-8"
         on:submit={handleSubmit}
     >
-        <LogoTextTwoLine></LogoTextTwoLine>
+        {#if $theme == "light"}
+            <LogoTextTwoLineDark></LogoTextTwoLineDark>
+        {:else}
+            <LogoTextTwoLineLight></LogoTextTwoLineLight>
+        {/if}
         <h4 class="text-xl font-semibold">Save your adventures!</h4>
         <div class="space-y-6 w-80">
             <TextField

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

@@ -193,7 +193,6 @@
         reader.readAsText(selectedFile);
 
         reader.onload = async function (e) {
-            trail.set(new Trail(""));
             await addGPXLayer(e.target?.result as string);
             const closestCity = (await ms.index("cities500").search("", {
                 filter: [`_geoRadius(${$form.lat}, ${$form.lon}, 10000)`],
@@ -450,7 +449,7 @@
                 on:change={handlePhotoSelection}
             />
             {#each $form.photos ?? [] as photo, i}
-                <div class="shrink-0 grow-0 basis-auto">
+                <div class="shrink-0 grow-0 basis-auto m-2">
                     <PhotoCard
                         src={photo}
                         on:delete={() => handlePhotoDelete(i)}

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

@@ -9,16 +9,18 @@
     import { currentUser } from "$lib/stores/user_store";
     import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
     import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
-    import type { Icon, Marker } from "leaflet";
+    import type { Icon, Map, Marker } from "leaflet";
     import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
     import "leaflet/dist/leaflet.css";
     import type { DataSource } from "photoswipe";
     import PhotoSwipeLightbox from "photoswipe/lightbox";
     import "photoswipe/style.css";
-    import { onMount } from "svelte";
+    import { onMount, tick } from "svelte";
 
     const tabs = ["Description", "Waypoints", "Photos", "Summit book"];
 
+    let map: Map;
+
     let activeTab = 0;
 
     let markers: Marker[] = [];
@@ -28,6 +30,8 @@
 
     let openConfirmModal: () => void;
 
+    let mapFullScreen: boolean = false;
+
     const dropdownItems: DropdownItem[] = [
         { text: "Show on map", value: "map", icon: "map" },
         { text: "Edit", value: "edit", icon: "pen" },
@@ -39,7 +43,7 @@
         await import("leaflet-gpx");
         await import("leaflet.awesome-markers");
 
-        const map = L.map("map").setView([0, 0], 2);
+        map = L.map("map").setView([0, 0], 2);
 
         L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
             attribution: "© OpenStreetMap contributors",
@@ -135,10 +139,16 @@
     async function deleteTrail() {
         trails_delete($trail).then(() => history.back());
     }
+
+    async function toggleMapFullScreen() {
+        mapFullScreen = !mapFullScreen;
+        await tick();
+        map.invalidateSize();
+    }
 </script>
 
 <div
-    class="trail-panel max-w-5xl mx-auto shadow-2xl rounded-3xl overflow-hidden"
+    class="trail-panel max-w-5xl mx-auto border border-input-border rounded-3xl overflow-hidden"
 >
     <section class="relative h-80">
         <img class="w-full h-80" src={$trail.thumbnail} alt="" />
@@ -158,7 +168,9 @@
                 </h3>
             </div>
             {#if $currentUser && $currentUser.id == $trail.author}
-                <div class="px-4 py-2 bg-menu-background rounded-full space-x-2">
+                <div
+                    class="px-4 py-2 bg-menu-background rounded-full space-x-2"
+                >
                     {#each dropdownItems as item}
                         <button
                             data-title={item.text}
@@ -172,7 +184,7 @@
         </div>
     </section>
     <section
-        class="grid grid-cols-2 sm:grid-cols-4 gap-y-4 justify-around py-8"
+        class="grid grid-cols-2 sm:grid-cols-4 gap-y-4 justify-around py-8 border-b border-input-border"
     >
         <div class="flex flex-col items-center">
             <span>Distance</span>
@@ -202,18 +214,21 @@
         {/if}
     </section>
     {#if $trail.tags && $trail.tags.length > 0}
-        <hr class="border-separator"/>
+        <hr class="border-separator" />
         <section class="flex p-8 gap-4 text-gray-600">
             {#each $trail.tags as tag}
                 <span class="py-2 px-4 border rounded-full">{tag}</span>
             {/each}
         </section>
-        <hr class="border-separator"/>
+        <hr class="border-separator" />
     {/if}
     <section class="p-8">
         <Tabs {tabs} bind:activeTab></Tabs>
-        <div class="flex flex-wrap md:flex-nowrap mt-6 gap-8">
+        <div
-            <div class="basis-full">
+            class="grid grid-cols-1 mt-6 gap-8"
+            class:md:grid-cols-[1fr_18rem]={!mapFullScreen}
+        >
+            <div>
                 {#if activeTab == 0}
                     <article class="text-justify whitespace-pre-line text-sm">
                         {$trail.description}
@@ -253,10 +268,19 @@
                     </ul>
                 {/if}
             </div>
-            <div
+            <div class="relative" class:-order-1={mapFullScreen}>
-                class="rounded-xl h-72 basis-full md:basis-72 shrink-0"
+                <div class="rounded-xl h-72" id="map">
-                id="map"
+                    <div class="leaflet-top leaflet-right">
-            ></div>
+                        <button
+                            class="leaflet-control fa fa-{mapFullScreen
+                                ? 'minimize'
+                                : 'maximize'} rounded-full text-lg bg-white px-[14px] py-2 hover:bg-gray-100"
+                            style="cursor: pointer !important"
+                            on:click={() => toggleMapFullScreen()}
+                        ></button>
+                    </div>
+                </div>
+            </div>
         </div>
     </section>
     <ConfirmModal

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

@@ -1,60 +1,16 @@
 <script lang="ts">
-    import DoubleSlider from "$lib/components/base/double_slider.svelte";
-    import RadioGroup, {
-        type RadioItem,
-    } from "$lib/components/base/radio_group.svelte";
-    import Search, {
-        type SearchItem,
-    } from "$lib/components/base/search.svelte";
     import Select, {
         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 TrailFilterPanel from "$lib/components/trail/trail_filter_panel.svelte";
     import TrailListItem from "$lib/components/trail/trail_list_item.svelte";
-    import { ms } from "$lib/meilisearch";
-    import type { Category } from "$lib/models/category";
     import type { TrailFilter } from "$lib/models/trail";
     import { categories } from "$lib/stores/category_store";
     import { trails, trails_search_filter } from "$lib/stores/trail_store";
-    import { country_codes } from "$lib/util/country_code_util";
-    import { formatMeters } from "$lib/util/format_util";
     import { onMount } from "svelte";
 
-    $: minDistance = Math.floor(
-        Math.min(...$trails.map((t) => t.distance ?? 0)),
-    );
-    $: maxDistance = Math.ceil(
-        Math.max(...$trails.map((t) => t.distance ?? 0)),
-    );
-    $: minElevationGain = Math.floor(
-        Math.min(...$trails.map((t) => t.elevation_gain ?? 0)),
-    );
-    $: maxElevationGain = Math.ceil(
-        Math.max(...$trails.map((t) => t.elevation_gain ?? 0)),
-    );
-
-    const filter: TrailFilter = {
-        q: "",
-        category: [],
-        near: {
-            radius: 2000,
-        },
-        distanceMin: minDistance,
-        distanceMax: maxDistance,
-        eleavationGainMin: minElevationGain,
-        elevationGainMax: maxElevationGain,
-        sort: "created",
-        sortOrder: "+",
-    };
-
-    const radioGroupItems: RadioItem[] = [
-        { text: "Completed", value: "completed" },
-        { text: "Not completed", value: "not_completed" },
-        { text: "No preference", value: "no_preference" },
-    ];
-
     const displayOptions: SelectItem[] = [
         { text: "Cards", value: "cards" },
         { text: "List", value: "list" },
@@ -68,12 +24,22 @@
         { text: "Elevation gain", value: "elevation_gain" },
     ];
 
-    let searchDropdownItems: SearchItem[] = [];
-
-    let citySearchQuery: string = "";
-
     let filterExpanded: boolean = true;
 
+    export const filter: TrailFilter = {
+        q: "",
+        category: [],
+        near: {
+            radius: 2000,
+        },
+        distanceMin: 0,
+        distanceMax: 20000,
+        elevationGainMin: 0,
+        elevationGainMax: 4000,
+        sort: "created",
+        sortOrder: "+",
+    };
+
     onMount(() => {
         const storedDisplayOption = localStorage.getItem("displayOption");
         if (storedDisplayOption) {
@@ -85,182 +51,38 @@
         }
     });
 
-    async function searchTrails() {
+    function setDisplayOption() {
+        localStorage.setItem("displayOption", selectedDisplayOption);
+    }
+
+    async function setSort() {
         await trails_search_filter(filter);
     }
 
-    function setCategoryFilter(category: Category) {
+    async function setSortOrder() {
-        const categoryIndex = filter.category.findIndex(
-            (c) => c == category.id,
-        );
-        if (categoryIndex !== -1) {
-            filter.category.splice(categoryIndex, 1);
-        } else {
-            filter.category.push(category.id);
-        }
-
-        searchTrails();
-    }
-
-    function setCompletedFilter(item: RadioItem) {
-        switch (item.value) {
-            case "no_preference":
-                filter.completed = undefined;
-                break;
-            case "completed":
-                filter.completed = true;
-                break;
-            case "not_completed":
-                filter.completed = false;
-                break;
-            default:
-                filter.completed = undefined;
-                break;
-        }
-
-        searchTrails();
-    }
-
-    async function searchCities(q: string) {
-        if (q.length == 0) {
-            filter.near.lat = undefined;
-            filter.near.lon = undefined;
-            searchTrails();
-
-            return;
-        }
-        const result = await ms.index("cities500").search(q, { limit: 5 });
-        searchDropdownItems = result.hits.map((h) => ({
-            text: h.name,
-            description:
-                country_codes[h["country code"] as keyof typeof country_codes],
-            value: h,
-            icon: "city",
-        }));
-    }
-
-    function handleSearchClick(item: SearchItem) {
-        citySearchQuery = item.text;
-        filter.near.lat = item.value.lat;
-        filter.near.lon = item.value.lon;
-
-        searchTrails();
-    }
-
-    function setSort() {
-        searchTrails();
-    }
-
-    function setSortOrder() {
         if (filter.sortOrder === "+") {
             filter.sortOrder = "-";
         } else {
             filter.sortOrder = "+";
         }
 
-        searchTrails();
+        await trails_search_filter(filter);
     }
 
-    function setDisplayOption() {
+    async function handleFilterUpdate() {
-        localStorage.setItem("displayOption", selectedDisplayOption);
+        await trails_search_filter(filter);
     }
 </script>
 
 <main
     class="grid grid-cols-1 md:grid-cols-[300px_1fr] gap-8 max-w-7xl mx-6 md:mx-auto"
 >
-    <div class="trail-filters p-8 border border-input-border rounded-xl">
+    <TrailFilterPanel
-        <div class="flex gap-2 items-center">
+        categories={$categories}
-            <div class="basis-full">
+        {filter}
-                <Search
+        {filterExpanded}
-                    bind:value={filter.q}
+        on:update={() => handleFilterUpdate()}
-                    on:update={searchTrails}
+    ></TrailFilterPanel>
-                    placeholder="Search trails..."
-                ></Search>
-            </div>
-            <button
-                id="sort-order-btn"
-                class="btn-icon md:hidden"
-                on:click={() => (filterExpanded = !filterExpanded)}
-                ><i class="fa fa-sliders"></i></button
-            >
-        </div>
-
-        {#if filterExpanded}
-            <hr class="my-4 border-separator" />
-            <p class="text-sm font-medium pb-4">Category</p>
-            {#each $categories as category, i}
-                <div class="flex items-center mb-4">
-                    <input
-                        id="{category.name}-checkbox"
-                        type="checkbox"
-                        value={category.id}
-                        class="w-4 h-4 accent-input-background border-input-border focus:ring-input-ring focus:ring-2"
-                        on:change={() => setCategoryFilter(category)}
-                    />
-                    <label
-                        for="{category.name}-checkbox"
-                        class="ms-2 text-sm"
-                        >{category.name}</label
-                    >
-                </div>
-            {/each}
-            <hr class="my-4 border-separator" />
-            <p class="text-sm font-medium pb-4">Near</p>
-            <div class="mb-8">
-                <Search
-                    items={searchDropdownItems}
-                    placeholder="Search cities..."
-                    bind:value={citySearchQuery}
-                    on:update={(e) => searchCities(e.detail)}
-                    on:click={(e) => handleSearchClick(e.detail)}
-                ></Search>
-            </div>
-            <Slider
-                maxValue={10000}
-                bind:currentValue={filter.near.radius}
-                on:set={() => searchTrails()}
-            ></Slider>
-            <p>
-                <span class="text-gray-500 text-sm">Radius:</span>
-                {formatMeters(filter.near.radius)}
-            </p>
-            <hr class="my-4 border-separator" />
-            <p class="text-sm font-medium pb-4">Distance</p>
-            <DoubleSlider
-                minValue={minDistance}
-                maxValue={maxDistance}
-                bind:currentMin={filter.distanceMin}
-                bind:currentMax={filter.distanceMax}
-                on:set={() => searchTrails()}
-            ></DoubleSlider>
-            <div class="flex justify-between">
-                <span>{formatMeters(filter.distanceMin)}</span>
-                <span>{formatMeters(filter.distanceMax)}</span>
-            </div>
-            <hr class="my-4 border-separator" />
-            <p class="text-sm font-medium pb-4">Elevation Gain</p>
-            <DoubleSlider
-                minValue={minElevationGain}
-                maxValue={maxElevationGain}
-                bind:currentMin={filter.eleavationGainMin}
-                bind:currentMax={filter.elevationGainMax}
-                on:set={() => searchTrails()}
-            ></DoubleSlider>
-            <div class="flex justify-between">
-                <span>{formatMeters(filter.eleavationGainMin)}</span>
-                <span>{formatMeters(filter.elevationGainMax)}</span>
-            </div>
-            <hr class="my-4 border-separator" />
-            <p class="text-sm font-medium pb-4">Completed</p>
-            <RadioGroup
-                name="completed"
-                items={radioGroupItems}
-                selected={2}
-                on:change={(e) => setCompletedFilter(e.detail)}
-            ></RadioGroup>
-        {/if}
-    </div>
     <div class="min-w-0">
         <div class="flex items-start gap-8 justify-end mx-4">
             <div>
@@ -297,8 +119,7 @@
         >
             {#if $trails.length == 0}
                 <div class="flex flex-col basis-full items-center">
-                        <EmptyStateSearch></EmptyStateSearch>
+                    <EmptyStateSearch></EmptyStateSearch>
-                    
                 </div>
             {/if}
             {#each $trails as trail}
@@ -308,7 +129,7 @@
                     href="/trail/view/{trail.id}"
                 >
                     {#if selectedDisplayOption === "cards"}
-                        <TrailCard {trail} mode="edit"></TrailCard>
+                        <TrailCard {trail}></TrailCard>
                     {:else}
                         <TrailListItem {trail}></TrailListItem>
                     {/if}