From 6e42e010ddcc02e7230bc74c6501f94fe6c1bcbd Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Mon, 15 Jun 2026 12:10:09 +0200
Subject: [PATCH] feat(filters): sort facet chips by count, then name

Order topic/language chips by their (contextual) count descending, name as the
tiebreaker, so the most-populated tags sit at the top and the smallest counts
fall to the bottom as you scan down.
---
 frontend/src/components/Sidebar.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 1e5a452..48a67b5 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -135,11 +135,16 @@ export default function Sidebar({
   const chipCount = (tag: Tag): number =>
     facetsReady ? facetCounts[String(tag.id)] ?? 0 : tag.channel_count;
   // Visible chips: hide zero-count ones once facets are in, but always keep selected ones
-  // so an active filter can still be cleared.
-  const visibleChips = (list: Tag[]): Tag[] =>
-    facetsReady
+  // so an active filter can still be cleared. Sorted by count (largest first), then name —
+  // so scanning top→bottom the smallest counts end up at the very bottom.
+  const visibleChips = (list: Tag[]): Tag[] => {
+    const shown = facetsReady
       ? list.filter((tg) => chipCount(tg) > 0 || filters.tags.includes(tg.id))
       : list;
+    return [...shown].sort(
+      (a, b) => chipCount(b) - chipCount(a) || a.name.localeCompare(b.name)
+    );
+  };
 
   // After a page refresh the channel name isn't in the URL (only the id is), so
   // filters.channelName is undefined and the chip would fall back to "This channel".