peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

35
frontend/src/components/Sidebar.tsx
View file

@ -412,16 +412,33 @@ export default function Sidebar({
const chips = visibleChips(topics);
return (
<>
<div className="flex justify-end mb-1.5">
<button
onClick={() =>
setFilters({ ...filters, tagMode: filters.tagMode === "or" ? "and" : "or" })
}
className="text-[10px] uppercase tracking-wide text-muted hover:text-accent"
title={t("sidebar.tagModeTooltip")}
<div
className="flex items-center justify-between mb-1.5"
title={t("sidebar.tagModeTooltip")}
>
<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")}
>
{filters.tagMode === "or" ? t("sidebar.any") : t("sidebar.all")}
</button>
{(["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>
))}
</div>
</div>
<div className="flex flex-wrap gap-1.5">
{chips.map((tg) => (