From 5b4c134c05432ef5feaa0863a7045c1c727cfdab Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Fri, 12 Jun 2026 14:08:49 +0200
Subject: [PATCH] fix(sidebar): resolve channel filter name from channel list
 after refresh
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The channel filter chip stored only the channel id in the URL, so after a
page refresh the human name was lost and it fell back to "This channel".
Resolve the title from the cached channels list keyed by id, and show a
"Loading…" label instead of the misleading fallback while it resolves.
---
 frontend/src/components/Sidebar.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index af58adb..9a7074b 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -109,6 +109,25 @@ export default function Sidebar({
 }) {
   const tagsQuery = useQuery({ queryKey: ["tags"], queryFn: api.tags });
   const tags = tagsQuery.data ?? [];
+
+  // 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".
+  // Resolve the title from the (cached) channel list keyed by id. Only fetch when a
+  // channel filter is active but its name is missing.
+  const needChannelName = !!filters.channelId && !filters.channelName;
+  const channelsQuery = useQuery({
+    queryKey: ["channels"],
+    queryFn: api.channels,
+    enabled: needChannelName,
+    staleTime: 5 * 60_000,
+  });
+  const resolvedChannelName =
+    filters.channelName ??
+    channelsQuery.data?.find((c) => c.id === filters.channelId)?.title ??
+    undefined;
+  // Don't flash the misleading "This channel" fallback while the name is still resolving.
+  const channelChipLabel =
+    resolvedChannelName ?? (needChannelName && channelsQuery.isLoading ? "Loading…" : "This channel");
   const languages = tags.filter((t) => t.category === "language");
   const topics = tags.filter((t) => t.category === "topic");
   const [customDates, setCustomDates] = useState(false);
@@ -411,7 +430,7 @@ export default function Sidebar({
               }
               className="w-full flex items-center justify-between gap-2 text-sm px-3 py-2 rounded-lg bg-accent text-accent-fg shadow-sm hover:opacity-90 transition"
             >
-              <span className="truncate">{filters.channelName ?? "This channel"}</span>
+              <span className="truncate">{channelChipLabel}</span>
               <X className="w-4 h-4 shrink-0" />
             </button>
           </div>