adds tags

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

@@ -16,6 +16,7 @@
     import { _ } from "svelte-i18n";
     import ShareInfo from "../share_info.svelte";
     import type { MouseEventHandler } from "svelte/elements";
+    import Chip from "../base/chip.svelte";
 
     interface Props {
         trail: Trail;
@@ -124,6 +125,13 @@
                     {trail.expand.author.username}
                 </p>
             {/if}
+            {#if trail.tags?.length}
+                <div class="flex flex-wrap gap-1 mb-3">
+                    {#each trail.tags ?? [] as t}
+                        <Chip text={t} closable={false} primary={false}></Chip>
+                    {/each}
+                </div>
+            {/if}
             <div class="flex gap-x-4">
                 {#if trail.location}
                     <h5>

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

@@ -17,6 +17,9 @@
     import { pb } from "$lib/pocketbase";
     import { searchLocations } from "$lib/stores/search_store";
     import { getIconForLocation } from "$lib/util/icon_util";
+    import { tags_index } from "$lib/stores/tag_store";
+    import Combobox, { type ComboboxItem } from "../base/combobox.svelte";
+    import { T } from "@threlte/core";
 
     interface Props {
         categories: Category[];
@@ -59,6 +62,8 @@
 
     let citySearchQuery: string = $state("");
 
+    let tagItems: ComboboxItem[] = $state([]);
+
     async function update() {
         onupdate?.(filter);
     }
@@ -133,6 +138,20 @@
 
         update();
     }
+
+    async function searchTags(q: string) {
+        const result = await tags_index(q);
+        tagItems = result.items.map((t) => ({ text: t.name, value: t }));
+    }
+
+    function getFilterTags(): ComboboxItem[] {
+        return filter.tags.map((t) => ({ text: t, value: t }));
+    }
+
+    function setFilterTags(tags: ComboboxItem[]) {
+        filter.tags = tags.map((t) => t.text);
+        update();
+    }
 </script>
 
 <div class="trail-filter p-8 border border-input-border rounded-xl">
@@ -169,6 +188,17 @@
                 placeholder={`${$_("filter-categories")}...`}
             ></MultiSelect>
             <hr class="my-4 border-separator" />
+            <Combobox
+                bind:value={getFilterTags, setFilterTags}
+                onupdate={searchTags}
+                placeholder={`${$_("filter-tags")}...`}
+                items={tagItems}
+                label={$_("tags")}
+                multiple
+                chips
+            ></Combobox>
+            <hr class="my-4 border-separator" />
+
             {#if pb.authStore.record}
                 <UserSearch
                     onclick={(item) => setAuthorFilter(item)}

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

@@ -42,6 +42,7 @@
     import SummitLogTable from "../summit_log/summit_log_table.svelte";
     import MapWithElevationMaplibre from "./map_with_elevation_maplibre.svelte";
     import TrailTimeline from "./trail_timeline.svelte";
+    import Chip from "../base/chip.svelte";
 
     interface Props {
         initTrail: Trail;
@@ -246,7 +247,7 @@
                         </h5>
                     {/if}
                     {#if trail.expand?.author}
-                        <p class="my-3">
+                        <p class="mt-2 mb-3">
                             {$_("by")}
                             <img
                                 class="rounded-full w-8 aspect-square mx-1 inline"
@@ -268,7 +269,14 @@
                             {/if}
                         </p>
                     {/if}
-                    <div class="flex flex-wrap gap-x-8 gap-y-2 mt-4 mr-8">
+                    {#if trail.expand?.tags && trail.expand.tags.length > 0}
+                        <div class="flex flex-wrap gap-2 text-gray-600">
+                            {#each trail.expand.tags as tag}
+                                <Chip text={tag.name}></Chip>
+                            {/each}
+                        </div>
+                    {/if}
+                    <div class="flex flex-wrap gap-x-8 gap-y-2 mt-2 mr-8">
                         {#if trail.location}
                             <h3 class="text-lg">
                                 <i class="fa fa-location-dot mr-2"></i>
@@ -342,15 +350,6 @@
                 </div>
             {/if}
         </section>
-        {#if trail.tags && trail.tags.length > 0}
-            <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" />
-        {/if}
     </div>
     <section class="trail-info-panel-content px-8">
         <div

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

@@ -12,6 +12,7 @@
     } from "$lib/util/format_util";
     import { _ } from "svelte-i18n";
     import ShareInfo from "../share_info.svelte";
+    import Chip from "../base/chip.svelte";
 
     interface Props {
         trail: Trail;
@@ -88,6 +89,13 @@
                 {trail.expand.author.username}
             </p>
         {/if}
+        {#if trail.tags?.length}
+            <div class="flex gap-1 mb-3">
+                {#each trail.tags ?? [] as t}
+                    <Chip text={t} closable={false} primary={false}></Chip>
+                {/each}
+            </div>
+        {/if}
         <div class="flex flex-wrap gap-x-8">
             {#if trail.location}
                 <h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>