peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(sidebar): resolve channel filter name from channel list after refresh

Browse source 
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.
This commit is contained in:
npeter83 2026-06-12 14:08:49 +02:00
parent af6513b1fb
commit 5b4c134c05
1 changed files with 20 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

21
frontend/src/components/Sidebar.tsx
View file

@ -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>