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}