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" > - {filters.channelName ?? "This channel"} + {channelChipLabel}