Allow to show public routes only (#262)

* speedup loading some pages (reduce data amount of trail lists)

* optimize code

* fix save bio, if no tileset defined

* improve/fix visibility filter

* radio buttons -> checkboxes

---------

Co-authored-by: Christian Beutel <>

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

@@ -3,6 +3,7 @@
     import type { TrailFilter } from "$lib/models/trail";
     import { searchLocations } from "$lib/stores/search_store";
     import { tags_index } from "$lib/stores/tag_store";
+    import { currentUser } from "$lib/stores/user_store";
     import { formatDistance, formatElevation } from "$lib/util/format_util";
     import { getIconForLocation } from "$lib/util/icon_util";
     import { _ } from "svelte-i18n";
@@ -17,7 +18,6 @@
     import type { SelectItem } from "../base/select.svelte";
     import Slider from "../base/slider.svelte";
     import UserSearch from "../user_search.svelte";
-    import { currentUser } from "$lib/stores/user_store";
 
     interface Props {
         categories: Category[];
@@ -44,7 +44,7 @@
         })),
     );
 
-    const radioGroupItems: RadioItem[] = [
+    const radioGroupCompletenessItems: RadioItem[] = [
         { text: $_("completed"), value: "completed" },
         { text: $_("not-completed"), value: "not_completed" },
         { text: $_("no-preference"), value: "no_preference" },
@@ -82,11 +82,6 @@
         update();
     }
 
-    function setPublicFilter(e: Event) {
-        filter.public = (e.target as HTMLInputElement).checked;
-        update();
-    }
-
     function setSharedFilter(e: Event) {
         filter.shared = (e.target as HTMLInputElement).checked;
         update();
@@ -111,6 +106,16 @@
         update();
     }
 
+    function setPrivateFilter(e: Event) {
+        filter.private = (e.target as HTMLInputElement).checked;
+        update();
+    }
+
+    function setPublicFilter(e: Event) {
+        filter.public = (e.target as HTMLInputElement).checked;
+        update();
+    }
+
     async function searchCities(q: string) {
         if (q.length == 0) {
             filter.near.lat = undefined;
@@ -150,6 +155,20 @@
         filter.tags = tags.map((t) => t.text);
         update();
     }
+
+    function getVisibiltyStatus(): number {
+        const isPublic = filter.public !== undefined && filter.public === true;
+        const isPrivate =
+            filter.private !== undefined && filter.private === true;
+
+        if (isPublic === true && isPrivate === true) {
+            return 2;
+        } else if (isPublic === true) {
+            return 1;
+        } else {
+            return 0;
+        }
+    }
 </script>
 
 <div class="trail-filter p-8 border border-input-border rounded-xl">
@@ -207,6 +226,22 @@
                     clearAfterSelect={false}
                     label={$_("author")}
                 ></UserSearch>
+
+                <hr class="my-4 border-separator" />
+
+                <p class="text-sm font-medium">{$_("visibilty-status")}</p>
+                <div class="flex items-center mt-2 mb-4">
+                    <input
+                        id="private-checkbox"
+                        type="checkbox"
+                        checked={filter.private}
+                        class="w-4 h-4 bg-input-background accent-primary border-input-border focus:ring-input-ring focus:ring-2"
+                        onchange={setPrivateFilter}
+                    />
+                    <label for="private-checkbox" class="ms-2 text-sm"
+                        >{$_("private")}</label
+                    >
+                </div>
                 <div class="flex items-center my-4">
                     <input
                         id="public-checkbox"
@@ -231,6 +266,7 @@
                         >{$_("shared")}</label
                     >
                 </div>
+
                 <hr class="my-4 border-separator" />
             {/if}
             <MultiSelect
@@ -339,8 +375,12 @@
             <p class="text-sm font-medium pb-4">{$_("completion-status")}</p>
             <RadioGroup
                 name="completed"
-                items={radioGroupItems}
-                selected={2}
+                items={radioGroupCompletenessItems}
+                selected={filter.completed === undefined
+                    ? 2
+                    : filter.completed === true
+                      ? 0
+                      : 1}
                 onchange={(item) => setCompletedFilter(item)}
             ></RadioGroup>
         </div>