adds trail difficulty property

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

@@ -11,22 +11,11 @@
     import RadioGroup from "../base/radio_group.svelte";
     import Search, { type SearchItem } from "../base/search.svelte";
     import Slider from "../base/slider.svelte";
+    import type { SelectItem } from "../base/select.svelte";
 
     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 filter: TrailFilter;
     export let showTrailSearch: boolean = true;
     export let showCitySearch: boolean = true;
 
@@ -38,6 +27,12 @@
         { text: $_("no-preference"), value: "no_preference" },
     ];
 
+    const difficultyItems: SelectItem[] = [
+        { text: $_("easy"), value: "easy" },
+        { text: $_("moderate"), value: "moderate" },
+        { text: $_("difficult"), value: "difficult" },
+    ];
+
     let searchDropdownItems: SearchItem[] = [];
 
     let citySearchQuery: string = "";
@@ -59,6 +54,19 @@
         update();
     }
 
+    function setDifficultyFilter(difficulty: "easy" | "moderate" | "difficult") {
+        const difficultyIndex = filter.difficulty.findIndex(
+            (d) => d == difficulty,
+        );        
+        if (difficultyIndex !== -1) {
+            filter.difficulty.splice(difficultyIndex, 1);
+        } else {
+            filter.difficulty.push(difficulty);
+        }
+
+        update();
+    }
+
     function setCompletedFilter(item: RadioItem) {
         switch (item.value) {
             case "no_preference":
@@ -150,6 +158,24 @@
                 </div>
             {/each}
             <hr class="my-4 border-separator" />
+            <p class="text-sm font-medium pb-4">{$_("difficulty")}</p>
+            {#each difficultyItems as difficulty, i}
+                <div class="flex items-center mb-4">
+                    <input
+                        id="{difficulty.value}-checkbox"
+                        type="checkbox"
+                        checked={filter.difficulty.includes(difficulty.value)}
+                        value={difficulty.value}
+                        class="w-4 h-4 bg-input-background accent-primary border-input-border focus:ring-input-ring focus:ring-2"
+                        on:change={() => setDifficultyFilter(difficulty.value)}
+                    />
+                    <label
+                        for="{difficulty.value}-checkbox"
+                        class="ms-2 text-sm">{difficulty.text}</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">

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

@@ -1,13 +1,12 @@
 <script lang="ts">
     import type { Trail, TrailFilter } from "$lib/models/trail";
     import { createEventDispatcher, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Pagination from "../base/pagination.svelte";
     import Select, { type SelectItem } from "../base/select.svelte";
     import EmptyStateSearch from "../empty_states/empty_state_search.svelte";
     import TrailCard from "./trail_card.svelte";
     import TrailListItem from "./trail_list_item.svelte";
-    import { _ } from "svelte-i18n";
-    import Pagination from "../base/pagination.svelte";
-    import TextField from "../base/text_field.svelte";
 
     export let filter: TrailFilter;
     export let trails: Trail[];
@@ -28,6 +27,7 @@
     const sortOptions: SelectItem[] = [
         { text: $_("alphabetical"), value: "name" },
         { text: $_("creation-date"), value: "created" },
+        { text: $_("difficulty"), value: "difficulty" },
         { text: $_("distance"), value: "distance" },
         { text: $_("elevation-gain"), value: "elevation_gain" },
     ];