fixes trail update

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: "Favorites", value: "/" },
+        { text: "Lists", value: "/lists" },
     ];
 
     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="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">
+        <div class="hidden md: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>
-                {#if $currentUser && $currentUser.id == trail.author && mode == "edit"}
-                    <Dropdown
-                        on:change={(e) => handleDropdownClick(trail, e.detail)}
-                        items={dropdownItems}
-                    ></Dropdown>
-                {/if}
-            </div>
+            <h4 class="font-semibold text-lg">{trail.name}</h4>
             <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>
-
-            {#if $currentUser && $currentUser.id == trail.author}
-                <Dropdown
-                    on:change={(e) => handleDropdownClick(trail, e.detail)}
-                    items={dropdownItems}
-                ></Dropdown>
-            {/if}
-        </div>
+        <h4 class="font-semibold text-lg">{trail.name}</h4>
         <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