feat(filters): make the topic Any/All match toggle prominent

The AND/OR ("Any"/"All") control for topic chips was a single faint corner link
that was easy to miss. Replace it with a labelled segmented control ("Match:
[Any][All]") so the AND option is discoverable. New trilingual 'match' label.
This commit is contained in:
npeter83 2026-06-15 12:20:17 +02:00
parent 64911e3c4d
commit aa4b069567
4 changed files with 29 additions and 9 deletions

View file

@ -412,16 +412,33 @@ export default function Sidebar({
const chips = visibleChips(topics); const chips = visibleChips(topics);
return ( return (
<> <>
<div className="flex justify-end mb-1.5"> <div
<button className="flex items-center justify-between mb-1.5"
onClick={() =>
setFilters({ ...filters, tagMode: filters.tagMode === "or" ? "and" : "or" })
}
className="text-[10px] uppercase tracking-wide text-muted hover:text-accent"
title={t("sidebar.tagModeTooltip")} title={t("sidebar.tagModeTooltip")}
> >
{filters.tagMode === "or" ? t("sidebar.any") : t("sidebar.all")} <span className="text-[10px] uppercase tracking-wide text-muted">
{t("sidebar.match")}
</span>
<div
className="flex items-center rounded-full border border-border bg-card p-0.5 text-[10px]"
role="group"
aria-label={t("sidebar.match")}
>
{(["or", "and"] as const).map((m) => (
<button
key={m}
onClick={() => setFilters({ ...filters, tagMode: m })}
aria-pressed={filters.tagMode === m}
className={`px-2 py-0.5 rounded-full transition ${
filters.tagMode === m
? "bg-accent text-accent-fg"
: "text-muted hover:text-fg"
}`}
>
{m === "or" ? t("sidebar.any") : t("sidebar.all")}
</button> </button>
))}
</div>
</div> </div>
<div className="flex flex-wrap gap-1.5"> <div className="flex flex-wrap gap-1.5">
{chips.map((tg) => ( {chips.map((tg) => (

View file

@ -19,6 +19,7 @@
"any": "Beliebig", "any": "Beliebig",
"all": "Alle", "all": "Alle",
"tagModeTooltip": "Beliebige vs. alle ausgewählten Tags treffen", "tagModeTooltip": "Beliebige vs. alle ausgewählten Tags treffen",
"match": "Treffer",
"custom": "Benutzerdefiniert", "custom": "Benutzerdefiniert",
"from": "Von", "from": "Von",
"to": "Bis", "to": "Bis",

View file

@ -19,6 +19,7 @@
"any": "Any", "any": "Any",
"all": "All", "all": "All",
"tagModeTooltip": "Match any vs all selected tags", "tagModeTooltip": "Match any vs all selected tags",
"match": "Match",
"custom": "Custom", "custom": "Custom",
"from": "From", "from": "From",
"to": "To", "to": "To",

View file

@ -19,6 +19,7 @@
"any": "Bármelyik", "any": "Bármelyik",
"all": "Összes", "all": "Összes",
"tagModeTooltip": "Bármelyik vagy az összes kijelölt címke illeszkedjen", "tagModeTooltip": "Bármelyik vagy az összes kijelölt címke illeszkedjen",
"match": "Egyezés",
"custom": "Egyéni", "custom": "Egyéni",
"from": "Ettől", "from": "Ettől",
"to": "Eddig", "to": "Eddig",