feat(hikes): clickable tag chips + tag filter on the overview

Detail-page tag chips become anchor links to `/hikes?tag=<name>`.
HikesFilterBar grows a tags fieldset (sorted by frequency, with the
hash prefix the chips use) so the user can keep narrowing from there.

Multi-tag filtering is OR — a hike matching any selected tag stays
visible. AND would shrink the listing fast given how few tags most
hikes carry; OR matches what "show me more like this" feels like.

The overview page reads `tag` query params on mount and pre-fills the
filter — supports repeated params (`?tag=winter&tag=easy`).
This commit is contained in:
2026-05-19 10:13:26 +02:00
parent 3331536ddd
commit 2a8721fde0
4 changed files with 110 additions and 4 deletions
+21 -2
View File
@@ -424,10 +424,14 @@
{#if hike.tags.length > 0}
<!-- Tag chips sit between the metric tiles (facts) and the
elevation profile (data viz) so they read as framing context —
"what kind of hike is this" — before the data takes over. -->
"what kind of hike is this" — before the data takes over.
Each chip is an anchor link to the /hikes overview with that
tag pre-selected in the filter bar. -->
<section class="tags" aria-label="Schlagwörter">
{#each hike.tags as tag (tag)}
<span class="tag-chip"><span class="tag-hash" aria-hidden="true">#</span>{tag}</span>
<a class="tag-chip" href="/hikes?tag={encodeURIComponent(tag)}">
<span class="tag-hash" aria-hidden="true">#</span>{tag}
</a>
{/each}
</section>
{/if}
@@ -768,6 +772,17 @@
background: var(--color-bg-tertiary);
border-radius: var(--radius-pill);
letter-spacing: 0.005em;
text-decoration: none;
transition:
color var(--transition-fast),
background-color var(--transition-fast),
scale var(--transition-fast);
}
.tag-chip:hover {
color: var(--color-primary);
background: var(--color-bg-elevated);
scale: 1.05;
}
.tag-hash {
@@ -775,6 +790,10 @@
font-weight: 600;
}
.tag-chip:hover .tag-hash {
color: color-mix(in oklab, var(--color-primary) 60%, currentColor);
}
.elev-area {
padding: 0 1rem;
margin-top: 0.25rem;