From 2866baa3e8f1815224f02be71986f257e7f9e595 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Mon, 15 Jun 2026 12:20:17 +0200
Subject: [PATCH] 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.
---
 frontend/src/components/Sidebar.tsx       | 35 +++++++++++++++++------
 frontend/src/i18n/locales/de/sidebar.json |  1 +
 frontend/src/i18n/locales/en/sidebar.json |  1 +
 frontend/src/i18n/locales/hu/sidebar.json |  1 +
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 48a67b5..260134b 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -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) => (
diff --git a/frontend/src/i18n/locales/de/sidebar.json b/frontend/src/i18n/locales/de/sidebar.json
index 11ccab4..6fa35b8 100644
--- a/frontend/src/i18n/locales/de/sidebar.json
+++ b/frontend/src/i18n/locales/de/sidebar.json
@@ -19,6 +19,7 @@
   "any": "Beliebig",
   "all": "Alle",
   "tagModeTooltip": "Beliebige vs. alle ausgewählten Tags treffen",
+  "match": "Treffer",
   "custom": "Benutzerdefiniert",
   "from": "Von",
   "to": "Bis",
diff --git a/frontend/src/i18n/locales/en/sidebar.json b/frontend/src/i18n/locales/en/sidebar.json
index 23b21be..5d8a473 100644
--- a/frontend/src/i18n/locales/en/sidebar.json
+++ b/frontend/src/i18n/locales/en/sidebar.json
@@ -19,6 +19,7 @@
   "any": "Any",
   "all": "All",
   "tagModeTooltip": "Match any vs all selected tags",
+  "match": "Match",
   "custom": "Custom",
   "from": "From",
   "to": "To",
diff --git a/frontend/src/i18n/locales/hu/sidebar.json b/frontend/src/i18n/locales/hu/sidebar.json
index 0c4cbab..72780a2 100644
--- a/frontend/src/i18n/locales/hu/sidebar.json
+++ b/frontend/src/i18n/locales/hu/sidebar.json
@@ -19,6 +19,7 @@
   "any": "Bármelyik",
   "all": "Összes",
   "tagModeTooltip": "Bármelyik vagy az összes kijelölt címke illeszkedjen",
+  "match": "Egyezés",
   "custom": "Egyéni",
   "from": "Ettől",
   "to": "Eddig",