peter
9454717f47
- Person page: a bio ask that fails says so with a retry instead of reading as 'no biography'. - Show page: the summary is a ClampedText (5 lines + More), like the person and collection pages; one More/Less pair (plex.textMore/textLess) for all three. - Channels: a re-slotted row is placed in the language the server orders by (the stored preference, else English), not the UI's guess. - A skipped run's body is only the reason (its title already says skipped). - HU: Behúzási kvótatartalék; Eseménynapló ürítve / az eseménynaplót; indok; közvetlenül játszható / közvetlen közvetítés in the Plex hints. - Tests: ClampedText re-measures on a resize, the show summary clamp, serverOrderLang.
798 lines
37 KiB
TypeScript
798 lines
37 KiB
TypeScript
import { useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { qk } from "../lib/queryKeys";
|
|
import { Ban, Eye, EyeOff, History, LayoutGrid, Pencil, RefreshCw, Table, X } from "lucide-react";
|
|
import ExcludedChannelList from "./ExcludedChannelList";
|
|
import { api, NO_TAG_SENTINEL, type ManagedChannel } from "../lib/api";
|
|
import { Sparkles } from "lucide-react";
|
|
import { notifyYouTubeActionError } from "../lib/youtubeErrors";
|
|
import { accountKey, LS } from "../lib/storage";
|
|
import { buildChannelColumns, applySyncFilter } from "./channelColumns";
|
|
import { notify } from "../lib/notifications";
|
|
import { Badge } from "./ui/Badge";
|
|
import { Button } from "./ui/Button";
|
|
import Tooltip from "./ui/Tooltip";
|
|
import DataTable from "./ui/DataTable";
|
|
import Tabs, { type TabDef } from "./ui/Tabs";
|
|
import { useTabPanel } from "./ui/tabPanel";
|
|
import ChannelLayoutGrid from "./ChannelLayoutGrid";
|
|
import { pinChannel, useComfortPin } from "./comfortPin";
|
|
import { ContextMenu } from "./ui/ContextMenu";
|
|
import { MoreButton } from "./ui/MoreButton";
|
|
import { useChannelActions } from "./useChannelActions";
|
|
import { useContextMenu } from "./ui/useContextMenu";
|
|
import { LoadingState, StateMessage } from "./ui/QueryState";
|
|
import { useChannelTagActions } from "../lib/useChannelTagActions";
|
|
import { useTagSuggestions } from "./useTagSuggestions";
|
|
import { useChannelPriority } from "../lib/useChannelPriority";
|
|
import { placeByPriority } from "../lib/channelOrder";
|
|
import { serverOrderLang } from "../lib/saveLanguage";
|
|
import { focusNavItem } from "../lib/listNav";
|
|
import ViewSwitcher, { type ViewOption } from "./ViewSwitcher";
|
|
import ColumnSortControl from "./ui/ColumnSortControl";
|
|
import FilterChipGroup from "./ui/FilterChipGroup";
|
|
import TagFilterChips, { type FilterChip } from "./TagFilterChips";
|
|
import ActionMenu, { type ActionMenuItem } from "./ui/ActionMenu";
|
|
import ChannelStatsPopover from "./ChannelStatsPopover";
|
|
import Pager from "./ui/Pager";
|
|
import { CHANNEL_LAYOUTS, type ChannelLayout } from "../lib/channelLayout";
|
|
import { sortRows } from "../lib/columnSort";
|
|
import { filterRows, isActive } from "../lib/tableColumns";
|
|
import { useFilterFold } from "../lib/useFilterFold";
|
|
import { FilterFoldButton } from "./ui/FilterFold";
|
|
import { HiddenFilterCue } from "./ui/HiddenFilterCue";
|
|
import { useCardPager } from "../lib/useCardPager";
|
|
import { PageToolbar } from "./ui/PageShell";
|
|
import { PageMenu } from "./ui/PageMenu";
|
|
import { menuGroups } from "./ui/menuGroups";
|
|
import { choiceSubmenu, sortSubmenu } from "./ui/pageMenuItems";
|
|
import { optionsFromColumns } from "../lib/sortOptions";
|
|
import ChannelDiscovery from "./ChannelDiscovery";
|
|
import TagManager from "./TagManager";
|
|
import { useChannelLayout, useChannels, useChannelsActions } from "./channelsContext";
|
|
import { useNavigationActions } from "./navigationContext";
|
|
import { useFeedFilters, useFeedFiltersActions } from "./feedFiltersContext";
|
|
import { useWizard } from "./wizardContext";
|
|
import { useMe } from "../lib/useMe";
|
|
import { useTags } from "../lib/useTags";
|
|
|
|
export type ChannelsView = "subscribed" | "discovery" | "hidden" | "blocked";
|
|
|
|
// The tag filter has its own chip row above the list, so the hidden-filter cue does not name it again.
|
|
const SURFACED_FILTERS = ["tags"];
|
|
|
|
// The top sync chips are a controlled view over the subscribed table's `sync` column filter (shared
|
|
// via ChannelsProvider): each chip writes `filters.sync`, using the SAME vocab + predicate as the
|
|
// Sync column funnel (channelColumns.tsx) so the two can't drift. "" = all (isActive treats it as
|
|
// off). fullySynced = recent_synced && backfill_done (matches the cell's own "fully synced" badge).
|
|
const SYNC_CHIPS: { value: string; labelKey: string }[] = [
|
|
{ value: "", labelKey: "channels.filters.all" },
|
|
{ value: "needsFull", labelKey: "channels.filters.needsFull" },
|
|
{ value: "fully", labelKey: "channels.filters.fullySynced" },
|
|
];
|
|
|
|
const LAYOUT_ICON: Record<ChannelLayout, typeof Table> = {
|
|
table: Table,
|
|
cards: LayoutGrid,
|
|
};
|
|
|
|
export default function Channels() {
|
|
const me = useMe();
|
|
const panel = useTabPanel();
|
|
const canWrite = me.can_write;
|
|
// "Connect YouTube" onboarding lives in WizardProvider (a notify action / a mutation-error CTA).
|
|
const { openWizard: onOpenWizard } = useWizard();
|
|
// The manager's name filter, status chip, active tab, reset token, and focus-channel intent live
|
|
// in ChannelsProvider (shared with the header search box + the cross-module "focus this channel"
|
|
// callers); this page is their primary editor.
|
|
const {
|
|
search,
|
|
filters,
|
|
view,
|
|
sort,
|
|
filtersResetToken,
|
|
focusName: focusChannelName,
|
|
focusToken: focusChannelToken,
|
|
} = useChannels();
|
|
const layout = useChannelLayout();
|
|
const {
|
|
setSearch,
|
|
setFilters,
|
|
setView,
|
|
setLayout,
|
|
setSort,
|
|
focusChannel: onFocusChannel,
|
|
consumeFocus,
|
|
} = useChannelsActions();
|
|
const { openChannel: onViewChannel, setPage } = useNavigationActions();
|
|
const feedFilters = useFeedFilters();
|
|
const { setFilters: setFeedFilters } = useFeedFiltersActions();
|
|
const { t, i18n } = useTranslation();
|
|
const lang = i18n.language;
|
|
const qc = useQueryClient();
|
|
|
|
// Clicking a tag chip filters the feed by that tag and jumps there. Internalised (was an App
|
|
// callback) now that Channels reads the feed filters + navigation straight from their providers.
|
|
const onFilterByTag = (tagId: number, name: string) => {
|
|
setFeedFilters({ ...feedFilters, tags: [tagId], channelIds: [] });
|
|
setPage("feed");
|
|
notify({ level: "info", message: t("channels.notify.filteredByTag", { name }) });
|
|
};
|
|
|
|
const channelsQuery = useQuery({ queryKey: qk.channels(), queryFn: api.channels });
|
|
const tagsQuery = useTags();
|
|
const statusQuery = useQuery({ queryKey: qk.myStatus(), queryFn: api.myStatus });
|
|
const blockedQuery = useQuery({ queryKey: qk.blockedChannels(), queryFn: api.blockedChannels });
|
|
const [tagManagerOpen, setTagManagerOpen] = useState(false);
|
|
const unblock = useMutation({
|
|
mutationFn: (id: string) => api.unblockChannel(id),
|
|
meta: { failTitle: "errors.writeFailed.unblockChannel" },
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({ queryKey: qk.blockedChannels() });
|
|
qc.invalidateQueries({ queryKey: qk.feed() });
|
|
},
|
|
});
|
|
|
|
const invalidate = () => {
|
|
qc.invalidateQueries({ queryKey: qk.channels() });
|
|
qc.invalidateQueries({ queryKey: qk.tags() });
|
|
qc.invalidateQueries({ queryKey: qk.myStatus() });
|
|
// FB2: syncing subscriptions can change the feed immediately — newly-followed channels may
|
|
// already have videos in the shared catalog, so refresh the feed too (not just the manager).
|
|
qc.invalidateQueries({ queryKey: qk.feed() });
|
|
qc.invalidateQueries({ queryKey: qk.feedSummary() });
|
|
};
|
|
|
|
const userTags = (tagsQuery.data ?? []).filter((t) => !t.system);
|
|
|
|
// The row's stepper updates priority optimistically in place and does NOT re-sort/refetch, so the
|
|
// list doesn't jump under a press-and-hold (the server list is priority-sorted; refetching would
|
|
// reorder rows and lose your scroll position) — its new order shows next time the page loads. A
|
|
// pick from the row's menu DOES re-sort (`pickPriority` below). Press-and-hold is debounced +
|
|
// flushed on unmount by the shared hook (same flow the channel detail page uses).
|
|
const { setPriority, bumpPriority } = useChannelPriority({
|
|
read: (id) =>
|
|
qc.getQueryData<ManagedChannel[]>(qk.channels())?.find((c) => c.id === id)?.priority,
|
|
optimistic: (id, next) =>
|
|
qc.setQueryData<ManagedChannel[]>(qk.channels(), (old) =>
|
|
(old ?? []).map((ch) => (ch.id === id ? { ...ch, priority: next } : ch)),
|
|
),
|
|
onError: () => qc.invalidateQueries({ queryKey: qk.channels() }),
|
|
});
|
|
|
|
// A priority step picked from the row's menu (E28 S3e3b, owner): the one thing a pick is FOR is
|
|
// to move the channel up (or down) the list, so the list re-sorts at once — only that row moves
|
|
// (`placeByPriority`, the server's order) — and the page and the focus follow it (`follow`): the
|
|
// table/card pager turns to its page, and the effect below hands the focus to its "…" (its node
|
|
// may have been re-inserted, which drops the focus to <body>, or be a virtualized card not yet
|
|
// mounted). Picked again from there, the next step is one Enter away.
|
|
const [follow, setFollow] = useState<{ key: string; seq: number } | null>(null);
|
|
const moreRefs = useRef(new Map<string, HTMLButtonElement>());
|
|
const listRef = useRef<HTMLDivElement>(null);
|
|
const pickPriority = (c: ManagedChannel, next: number) => {
|
|
setPriority(c.id, next);
|
|
qc.setQueryData<ManagedChannel[]>(
|
|
qk.channels(),
|
|
(old) => old && placeByPriority(old, c.id, serverOrderLang(me.preferences)),
|
|
);
|
|
setFollow((f) => ({ key: c.id, seq: (f?.seq ?? 0) + 1 }));
|
|
};
|
|
|
|
// Tagging is updated optimistically in place (no refetch of the whole channel list, which
|
|
// made the toggle feel ~2s slow); only revert by refetching if the server call fails. The
|
|
// attach/detach + create-and-attach flow is shared with the channel detail page.
|
|
const { toggleTag, createAndAttachTag } = useChannelTagActions({
|
|
optimisticToggle: (id, tagId, attach) =>
|
|
qc.setQueryData<ManagedChannel[]>(qk.channels(), (old) =>
|
|
(old ?? []).map((ch) =>
|
|
ch.id === id
|
|
? {
|
|
...ch,
|
|
tag_ids: attach ? [...ch.tag_ids, tagId] : ch.tag_ids.filter((x) => x !== tagId),
|
|
}
|
|
: ch,
|
|
),
|
|
),
|
|
// Keep the channel DETAIL cache in step with the manager list (the detail page reads its tags
|
|
// from qk.channel(id)); mirrors the detail page invalidating the manager list on its side. Also
|
|
// recompute suggestions: a channel that just gained/lost a user tag changes the untagged set and
|
|
// the learned pattern (E8·S4).
|
|
onSuccess: (id) => {
|
|
qc.invalidateQueries({ queryKey: qk.channel(id) });
|
|
qc.invalidateQueries({ queryKey: qk.tagSuggestions() });
|
|
},
|
|
// A failed attach/detach reverts the optimistic change by refetching the list. Also refetch
|
|
// suggestions: acceptSuggestion optimistically dropped the channel from that cache, and on
|
|
// failure the tag never actually attached — so the server still suggests it and the ghost chips
|
|
// must come back rather than leaving an empty cell (honest states). The hook reports the failure.
|
|
onError: () => {
|
|
qc.invalidateQueries({ queryKey: qk.channels() });
|
|
qc.invalidateQueries({ queryKey: qk.tagSuggestions() });
|
|
},
|
|
});
|
|
// --- Suggested tags (E8·S4): learned from the user's own manual-tag pattern, shown as accept/dismiss
|
|
// ghost chips on untagged channels. Dismissal is session-only (an accepted suggestion self-clears —
|
|
// the channel becomes tagged and the server drops it; a dismissed one just hides until reload). The
|
|
// /tags/suggestions query, the session dismiss set, and the optimistic accept/dismiss/bulk logic all
|
|
// live in useTagSuggestions so they can be unit-tested apart from this component.
|
|
const {
|
|
suggestionsFor,
|
|
dismissSuggestion,
|
|
acceptSuggestion,
|
|
visibleSuggestions,
|
|
highConfidence,
|
|
acceptAllHighConfidence,
|
|
} = useTagSuggestions({ tags: tagsQuery.data ?? [], toggleTag });
|
|
|
|
const syncSubs = useMutation({
|
|
mutationFn: () => api.syncSubscriptions(),
|
|
onSuccess: (r: { subscriptions?: number }) => {
|
|
invalidate();
|
|
notify({
|
|
level: "success",
|
|
message: t("channels.notify.synced", { count: r.subscriptions ?? 0 }),
|
|
});
|
|
},
|
|
onError: (e) => notifyYouTubeActionError(e, t("channels.notify.syncFailed"), onOpenWizard),
|
|
});
|
|
const deepAll = useMutation({
|
|
mutationFn: () => api.deepAll(true),
|
|
onSuccess: (r: { updated?: number }) => {
|
|
qc.invalidateQueries({ queryKey: qk.channels() });
|
|
qc.invalidateQueries({ queryKey: qk.myStatus() });
|
|
notify({
|
|
level: "success",
|
|
message: t("channels.notify.fullHistoryRequested", { count: r.updated ?? 0 }),
|
|
});
|
|
},
|
|
onError: (e) =>
|
|
notifyYouTubeActionError(e, t("channels.notify.fullHistoryFailed"), onOpenWizard),
|
|
});
|
|
|
|
// The tag-chip row is a controlled view over the Tags COLUMN filter (`filters.tags`, a string[] of
|
|
// tag ids), the same way the sync chips drive `filters.sync` — so the top chips and the Tags column
|
|
// funnel share ONE state and stay in sync (bidirectional). Toggling a chip rewrites `filters.tags`;
|
|
// filterRows / DataTable then applies it. Channel-name search stays separate (the shared top box).
|
|
const tagFilter = Array.isArray(filters.tags) ? filters.tags : [];
|
|
// B4 (E28 review L7): on a short window the band's filters — the tag chip lane and the status /
|
|
// pager row — fold behind one "Filters · n"; the tabs and the TAGS editor stay. n = each picked tag,
|
|
// plus every other active column filter (the status chips are the Sync column's).
|
|
const fold = useFilterFold();
|
|
const foldCount =
|
|
tagFilter.length +
|
|
Object.entries(filters).filter(([k, v]) => k !== "tags" && isActive(v)).length;
|
|
// Picking a real tag drops the "No tag" sentinel (item B) — they're mutually exclusive, as in the feed.
|
|
const toggleTagFilter = (tagId: number) => {
|
|
const id = String(tagId);
|
|
const base = tagFilter.filter((x) => x !== NO_TAG_SENTINEL);
|
|
const next = base.includes(id) ? base.filter((x) => x !== id) : [...base, id];
|
|
setFilters({ ...filters, tags: next });
|
|
};
|
|
// The "No tag" chip: filter the table to channels you haven't personally tagged yet. Exclusive with
|
|
// real tag chips (clicking it drops them); the Tags column's test reads the sentinel (channelColumns).
|
|
const noTagOn = tagFilter.includes(NO_TAG_SENTINEL);
|
|
const toggleNoTagFilter = () =>
|
|
setFilters({ ...filters, tags: noTagOn ? [] : [NO_TAG_SENTINEL] });
|
|
// The tag-filter chips (user tags + the "No tag" sentinel), fed to TagFilterChips which folds any
|
|
// overflow into a "+N" pill so the row stays one line and the trailing "…" actions can't wrap.
|
|
const tagFilterChips: FilterChip[] = [
|
|
...userTags.map((tg) => ({
|
|
key: `t${tg.id}`,
|
|
label: tg.name,
|
|
active: tagFilter.includes(String(tg.id)),
|
|
onToggle: () => toggleTagFilter(tg.id),
|
|
})),
|
|
{
|
|
key: NO_TAG_SENTINEL,
|
|
label: t("channels.tags.noTag"),
|
|
active: noTagOn,
|
|
onToggle: toggleNoTagFilter,
|
|
},
|
|
];
|
|
// A focus-channel intent (header "without full history" / tag manager) seeds the search box.
|
|
// The TOKEN is the intent (it advances even when the same channel is re-focused); the name is the
|
|
// payload, so it rides a ref. Naming it would re-seed the box on any render that changed it,
|
|
// overwriting whatever the user had since typed.
|
|
//
|
|
// `consumeFocus` is what stops this page's OWN remounts from re-applying it: this effect runs on
|
|
// every mount, and this page unmounts on every navigation away — and on opening a channel page,
|
|
// which does not even change `page`. The provider then reports `focusName` as null, so a later
|
|
// visit leaves the box exactly as the user left it.
|
|
const focusChannelNameRef = useRef(focusChannelName);
|
|
focusChannelNameRef.current = focusChannelName;
|
|
useEffect(() => {
|
|
const name = focusChannelNameRef.current;
|
|
if (!name) return;
|
|
setSearch(name);
|
|
consumeFocus();
|
|
}, [focusChannelToken, setSearch, consumeFocus]);
|
|
// The header's reset intent clears the search box (skip the initial mount); the tag chips ride in
|
|
// `filters.tags`, which goToFullHistory already clears by setting a fresh map.
|
|
const resetRef = useRef(filtersResetToken);
|
|
useEffect(() => {
|
|
if (filtersResetToken === resetRef.current) return;
|
|
resetRef.current = filtersResetToken;
|
|
setSearch("");
|
|
}, [filtersResetToken, setSearch]);
|
|
|
|
// Tag/priority/text filters stay controlled COLUMN filters (`filters.tags` etc.) shared by the top
|
|
// chips, the column funnels and the cards. The sync-status filter (`filters.sync`) is no longer a
|
|
// column — R14 retired the Sync column and folded its status into a ✓ charm on Stored — so it's
|
|
// applied as a pre-filter (`applySyncFilter`) over the rows fed to BOTH the table and the cards,
|
|
// still driven by the same top chips. Hidden channels have their own tab (excluded here). Only the
|
|
// name search filters at this step; the remaining column funnels run in DataTable / filterRows below.
|
|
const hiddenChannels = (channelsQuery.data ?? []).filter((c) => c.hidden);
|
|
const channels = (channelsQuery.data ?? []).filter((c) => !c.hidden);
|
|
const q = search.trim().toLowerCase();
|
|
const visibleChannels = channels.filter(
|
|
(c) => !q || `${c.title ?? ""} ${c.handle ?? ""}`.toLowerCase().includes(q),
|
|
);
|
|
// Sync-status pre-filter (top chips → `filters.sync`), applied before the table/cards see the rows.
|
|
// (Inline, not memoised: `visibleChannels` is a fresh array each render, so a useMemo keyed on it
|
|
// could never hit its cache — and applySyncFilter is a cheap single pass anyway.)
|
|
const syncedChannels = applySyncFilter(visibleChannels, filters.sync);
|
|
const s = statusQuery.data;
|
|
|
|
const onView = (c: ManagedChannel) =>
|
|
onViewChannel(c.id, c.title ?? t("channels.row.thisChannel"));
|
|
// The channel's ONE action list (E28 C1) — ONE menu for the list, shared by the table and the card
|
|
// layout: they are two paints of the same rows, so a right-click, a long-press and the row's "…"
|
|
// must mean the same thing in both. Only mounted under the SUBSCRIBED branch below: a discovery
|
|
// result is not a `Channel` row yet, so pinning or hiding one could only 404.
|
|
// Keyed by id: a tag toggled in the menu, a priority picked, a poll — each rebuilds the row object
|
|
// under the open menu, and its "…" must still know the menu is its own.
|
|
const rowMenu = useContextMenu<ManagedChannel>({ keyOf: (c) => c.id });
|
|
const rowPin = useComfortPin(rowMenu.open);
|
|
const channelActions = useChannelActions({
|
|
onView,
|
|
onOpenWizard,
|
|
tags: userTags,
|
|
tagsState: tagsQuery.isPending ? "loading" : tagsQuery.isError ? "error" : "ready",
|
|
onToggleTag: (c, tagId) => toggleTag(c.id, tagId, c.tag_ids.includes(tagId)),
|
|
onPickPriority: pickPriority,
|
|
});
|
|
// The row as the cache holds it NOW, not as it was when the menu opened: the Tags submenu stays
|
|
// open across toggles, and each tick (and the next toggle's attach-or-detach) reads this.
|
|
const menuRow =
|
|
rowMenu.target &&
|
|
((channelsQuery.data ?? []).find((c) => c.id === rowMenu.target!.id) ?? rowMenu.target);
|
|
const menuItems = menuRow
|
|
? channelActions.items(menuRow, {
|
|
pin: rowPin.item(pinChannel(menuRow.id), menuRow.title ?? t("channels.row.thisChannel")),
|
|
})
|
|
: [];
|
|
// Distinct priority levels present in the catalog → the priority column's filter options.
|
|
const prioOptions = [...new Set((channelsQuery.data ?? []).map((c) => c.priority))]
|
|
.sort((a, b) => b - a)
|
|
.map((p) => ({ value: String(p), label: String(p) }));
|
|
|
|
const columns = buildChannelColumns({
|
|
t,
|
|
lang: i18n.language,
|
|
prioOptions,
|
|
userTags,
|
|
bumpPriority,
|
|
setPriority,
|
|
more: (c) => {
|
|
const mine = rowMenu.open && rowMenu.target?.id === c.id;
|
|
return (
|
|
<MoreButton
|
|
ref={(el) => {
|
|
if (el) moreRefs.current.set(c.id, el);
|
|
else moreRefs.current.delete(c.id);
|
|
}}
|
|
label={t("channels.row.menu")}
|
|
expanded={mine}
|
|
menuProps={rowMenu.buttonProps(c)}
|
|
className={mine ? undefined : "reveal"}
|
|
/>
|
|
);
|
|
},
|
|
onView,
|
|
toggleTag,
|
|
createAndAttachTag,
|
|
onFilterByTag,
|
|
suggestionsFor,
|
|
onAcceptSuggestion: acceptSuggestion,
|
|
onDismissSuggestion: dismissSuggestion,
|
|
});
|
|
|
|
// Status chips sit in the table's controls row (next to paging) — compact and close to
|
|
// where they act.
|
|
const syncFilter = typeof filters.sync === "string" ? filters.sync : "";
|
|
const statusChips = (
|
|
<FilterChipGroup
|
|
ariaLabel={t("channels.filters.syncLabel")}
|
|
className="flex flex-wrap items-center gap-1.5"
|
|
options={SYNC_CHIPS.map((c) => ({ value: c.value, label: t(c.labelKey) }))}
|
|
value={syncFilter}
|
|
onChange={(sync) => setFilters({ ...filters, sync })}
|
|
/>
|
|
);
|
|
|
|
// The catalog-wide stats collapse into a compact "Stats" hover chip (right of the tab row, subscribed
|
|
// only) instead of a crowded inline row.
|
|
const statsBlock = s ? <ChannelStatsPopover status={s} /> : null;
|
|
|
|
// Catalog-wide, occasional actions — tucked into a shared ⋯ overflow menu so they stop crowding the
|
|
// tags row. Pending mutations keep the item visible but disabled, with a spinning icon.
|
|
const catalogActions: ActionMenuItem[] = [
|
|
{
|
|
id: "sync",
|
|
label: t("channels.syncSubscriptions"),
|
|
title: t("channels.syncSubscriptionsHint"),
|
|
icon: <RefreshCw className={`h-4 w-4 ${syncSubs.isPending ? "animate-spin" : ""}`} />,
|
|
onSelect: () => syncSubs.mutate(),
|
|
disabled: syncSubs.isPending,
|
|
},
|
|
{
|
|
id: "backfill",
|
|
label: t("channels.backfillEverything"),
|
|
title: t("channels.backfillEverythingHint"),
|
|
icon: <History className={`h-4 w-4 ${deepAll.isPending ? "animate-pulse" : ""}`} />,
|
|
onSelect: () => deepAll.mutate(),
|
|
disabled: deepAll.isPending,
|
|
},
|
|
];
|
|
const actionButtons = (
|
|
<ActionMenu ariaLabel={t("channels.actionsLabel")} items={catalogActions} />
|
|
);
|
|
|
|
// Table / cards density — shared by the subscribed + discovery tables (blocked is a chip list, no
|
|
// layout to switch). Rides the same generic ViewSwitcher the feed uses.
|
|
const layoutOptions: ViewOption<ChannelLayout>[] = CHANNEL_LAYOUTS.map((id) => ({
|
|
id,
|
|
label: t("channels.layout." + id),
|
|
icon: LAYOUT_ICON[id],
|
|
}));
|
|
const layoutSwitcher = (
|
|
<ViewSwitcher
|
|
value={layout}
|
|
options={layoutOptions}
|
|
onChange={setLayout}
|
|
label={t("channels.layoutLabel")}
|
|
labelClassName="hidden lg:inline"
|
|
/>
|
|
);
|
|
const hasLayout = view === "subscribed" || view === "discovery";
|
|
// In cards there are no column headers to sort by, so a dropdown drives the SAME shared sort state
|
|
// the table header uses (table ↔ cards stay in sync). Table mode keeps the header clicks.
|
|
const sortControl = (
|
|
<ColumnSortControl
|
|
columns={columns}
|
|
sort={sort}
|
|
onChange={setSort}
|
|
label={t("channels.sort.label")}
|
|
defaultLabel={t("channels.sort.default")}
|
|
ascLabel={t("channels.sort.asc")}
|
|
descLabel={t("channels.sort.desc")}
|
|
/>
|
|
);
|
|
// The card layout paginates like the table (a page of cards + a pager), rather than one long
|
|
// infinite scroll. Slice the sorted rows; the Pager reports page/size changes.
|
|
// Only computed for cards: in table mode DataTable sorts and slices internally, so doing it here
|
|
// too would copy+sort the whole ~300-row array on every render for a result nothing reads.
|
|
const isCards = layout === "cards";
|
|
// Cards have no column headers, so apply the shared column filters (sync + any funnel set in table
|
|
// mode) here via the exported predicate — the same filterRows DataTable runs internally — then sort.
|
|
const sortedChannels = isCards
|
|
? sortRows(filterRows(syncedChannels, columns, filters), columns, sort, lang)
|
|
: syncedChannels;
|
|
const {
|
|
paged: pagedCards,
|
|
pagerProps,
|
|
resetPage,
|
|
} = useCardPager(
|
|
sortedChannels,
|
|
LS.channelCardSize,
|
|
isCards,
|
|
follow && { seq: follow.seq, match: (c) => c.id === follow.key },
|
|
);
|
|
// The focus half of `follow` (the pagers took the page half during render). A mounted row names
|
|
// its own place; a card the virtualized grid has not mounted yet is found by its place on the page.
|
|
const focusFollowed = useEffectEvent((key: string) => {
|
|
const wrap = listRef.current;
|
|
if (!wrap) return;
|
|
const button = () => moreRefs.current.get(key) ?? null;
|
|
const item = button()?.closest("[data-nav-index]");
|
|
const at = item
|
|
? Number(item.getAttribute("data-nav-index"))
|
|
: isCards
|
|
? sortedChannels.findIndex((c) => c.id === key) -
|
|
pagerProps.page * Math.max(0, pagerProps.size)
|
|
: -1;
|
|
// Filtered out by its new priority (a Prio column filter): nothing to follow — honest, not a
|
|
// jump to some other row.
|
|
if (at >= 0) focusNavItem(wrap, at, button);
|
|
});
|
|
useEffect(() => {
|
|
if (follow) focusFollowed(follow.key);
|
|
}, [follow]);
|
|
// Changing what you're looking at starts over at the first page, the way DataTable resets its own
|
|
// page on a filter/sort change. Deliberately NOT keyed on the row count: the qk.channels() query
|
|
// refetches on window focus and after every sync, so a catalogue that merely gained a channel would
|
|
// otherwise yank you off page 7 for something you didn't do — a list that shrank past your page is
|
|
// handled by the hook's clamp instead.
|
|
useEffect(() => {
|
|
resetPage();
|
|
}, [filters, search, sort, resetPage]);
|
|
const cardPager = <Pager {...pagerProps} />;
|
|
|
|
const viewTabs: TabDef[] = useMemo(
|
|
() =>
|
|
(["subscribed", "discovery", "hidden", "blocked"] as ChannelsView[]).map((v) => ({
|
|
id: v,
|
|
label: t(`channels.tabs.${v}`),
|
|
})),
|
|
[t],
|
|
);
|
|
const tabs = (
|
|
<div className="px-4 pt-2 max-w-384 mx-auto flex items-center justify-between gap-4 flex-wrap">
|
|
<Tabs
|
|
idBase={panel.idBase}
|
|
tabs={viewTabs}
|
|
active={view}
|
|
onChange={(id) => setView(id as ChannelsView)}
|
|
className="flex flex-wrap items-center gap-1"
|
|
/>
|
|
<div className="flex items-center gap-3">
|
|
{view === "subscribed" && statsBlock}
|
|
{view === "subscribed" && layout === "cards" && sortControl}
|
|
{hasLayout && layoutSwitcher}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// The page's background menu (DESIGN "Background menu"): the toolbar's own controls, no more — the
|
|
// layout, the cards' sort, the status and tag filters, the tag editor and the catalog sync. Backfill
|
|
// stays in the "…" only: a long quota-heavy run is not a thing to start from a stray right-click.
|
|
const syncOptions = SYNC_CHIPS.map((c) => ({ value: c.value, label: t(c.labelKey) }));
|
|
const pageMenuItems = menuGroups(
|
|
hasLayout
|
|
? [
|
|
choiceSubmenu({
|
|
id: "layout",
|
|
label: t("channels.layoutLabel"),
|
|
options: layoutOptions.map((o) => ({ value: o.id, label: o.label })),
|
|
selected: layout,
|
|
onPick: setLayout,
|
|
}),
|
|
]
|
|
: [],
|
|
view === "subscribed" && isCards
|
|
? [
|
|
sortSubmenu({
|
|
id: "sort",
|
|
label: t("channels.sort.label"),
|
|
options: optionsFromColumns(columns),
|
|
sort,
|
|
onChange: setSort,
|
|
ascLabel: t("channels.sort.asc"),
|
|
descLabel: t("channels.sort.desc"),
|
|
defaultLabel: t("channels.sort.default"),
|
|
}),
|
|
]
|
|
: [],
|
|
view === "subscribed"
|
|
? [
|
|
choiceSubmenu({
|
|
id: "status",
|
|
label: t("channels.filters.syncLabel"),
|
|
options: syncOptions,
|
|
selected: syncFilter,
|
|
onPick: (sync) => setFilters({ ...filters, sync }),
|
|
}),
|
|
{ id: "tags", label: t("channels.tags.edit"), onSelect: () => setTagManagerOpen(true) },
|
|
...(tagFilter.length > 0
|
|
? [
|
|
{
|
|
id: "clearTags",
|
|
label: t("channels.tags.clearFilter"),
|
|
onSelect: () => setFilters({ ...filters, tags: [] }),
|
|
},
|
|
]
|
|
: []),
|
|
]
|
|
: [],
|
|
view === "subscribed" ? catalogActions.filter((a) => a.id === "sync") : [],
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{pageMenuItems.length > 0 && (
|
|
<PageMenu ariaLabel={t("common.pageMenu")} items={pageMenuItems} />
|
|
)}
|
|
{/* The tab bar is always fixed chrome (it portals into the shell's fixed band, so it never
|
|
scrolls and doesn't jump between tabs). On Subscriptions the stats/description/tags ride
|
|
with it, and the status-chip + pager row lands just below (DataTable's controlsInBand). */}
|
|
<PageToolbar>
|
|
{tabs}
|
|
{view === "subscribed" && (
|
|
<div className="@container/tagrow px-4 pt-2 pb-2 max-w-384 mx-auto">
|
|
{/* One row: the TAGS editor trigger (left) + the tag-filter chip lane (folds overflow into
|
|
"+N") + Clear, then the catalog "…" actions pinned right, so the "…" menu always stays on the
|
|
first line. Only the suggestions block wraps: below 40rem it takes a line of its own under
|
|
the row (E28 S3f3, the owner's pick A) — at 375 it had squeezed the chip lane to 0 px and
|
|
pushed the "…" off the screen. Channel-name search lives in the shared top SearchBar. */}
|
|
<div className="flex flex-wrap items-center gap-2 min-w-0">
|
|
{/* The "TAGS" label IS the tags-editor trigger (pencil), replacing the separate
|
|
"Manage tags" button; the tooltip explains what tags are + that it's clickable. */}
|
|
<Tooltip hint={t("channels.tags.yourTagsHint")}>
|
|
<Button
|
|
variant="outline"
|
|
size="xs"
|
|
className="shrink-0 uppercase tracking-wide"
|
|
onClick={() => setTagManagerOpen(true)}
|
|
icon={<Pencil className="h-3 w-3" />}
|
|
>
|
|
{t("channels.tags.label")}
|
|
</Button>
|
|
</Tooltip>
|
|
<FilterFoldButton fold={fold} label={t("sidebar.filters")} count={foldCount} />
|
|
{!fold.folded && <TagFilterChips chips={tagFilterChips} className="flex-1" />}
|
|
{!fold.folded && tagFilter.length > 0 && (
|
|
<Button
|
|
variant="link-muted"
|
|
onClick={() => setFilters({ ...filters, tags: [] })}
|
|
className="text-xs px-2"
|
|
>
|
|
{t("datatable.clear")}
|
|
</Button>
|
|
)}
|
|
{/* Suggested-tags affordance (E8·S4): a sparkle count of the visible suggestions, with a
|
|
one-click bulk-accept for the high-confidence ones. The per-row ghost chips handle the
|
|
rest. Hidden when there's nothing to suggest. */}
|
|
{visibleSuggestions.length > 0 && (
|
|
<div
|
|
data-tag-suggestions
|
|
className="shrink-0 flex items-center gap-1.5 @max-[40rem]/tagrow:order-last @max-[40rem]/tagrow:basis-full"
|
|
>
|
|
<Tooltip hint={t("channels.tags.suggestionsHint")}>
|
|
<Badge tone="accent">
|
|
<Sparkles />
|
|
{t("channels.tags.suggestionsCount", { count: visibleSuggestions.length })}
|
|
</Badge>
|
|
</Tooltip>
|
|
{highConfidence.length > 0 && (
|
|
<Button variant="outline" size="xs" onClick={acceptAllHighConfidence}>
|
|
{t("channels.tags.acceptAllHigh", { count: highConfidence.length })}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="shrink-0">{actionButtons}</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* In table mode the status chips + pager ride in DataTable's own in-band controls row. The card
|
|
layout has no such row, so surface the same status chips (left) and its pager (right) here. */}
|
|
{view === "subscribed" && layout === "cards" && !fold.folded && (
|
|
<div className="px-4 pb-2 max-w-384 mx-auto flex items-center justify-between gap-3 flex-wrap">
|
|
{statusChips}
|
|
{cardPager}
|
|
</div>
|
|
)}
|
|
</PageToolbar>
|
|
{tagManagerOpen && (
|
|
<TagManager onClose={() => setTagManagerOpen(false)} onFocusChannel={onFocusChannel} />
|
|
)}
|
|
|
|
<div {...panel.panelProps(view)}>
|
|
{view === "discovery" ? (
|
|
<ChannelDiscovery
|
|
canWrite={canWrite}
|
|
search={search}
|
|
onOpenWizard={onOpenWizard}
|
|
onViewChannel={onViewChannel}
|
|
/>
|
|
) : view === "blocked" ? (
|
|
/* Blocked channels — videos from these are hidden everywhere and dropped from live search. */
|
|
<div className="px-4 pb-4 pt-3 max-w-384 mx-auto">
|
|
<ExcludedChannelList
|
|
channels={blockedQuery.data ?? []}
|
|
icon={<Ban className="w-4 h-4 text-muted" />}
|
|
title={t("channels.blocked.title")}
|
|
hint={t("channels.blocked.hint")}
|
|
emptyText={t("channels.blocked.empty")}
|
|
actionLabel={t("channel.unblock")}
|
|
actionIcon={<X className="w-3.5 h-3.5" />}
|
|
onAction={(id) => unblock.mutate(id)}
|
|
onView={(c) => onViewChannel(c.id, c.title ?? t("channels.row.thisChannel"))}
|
|
/>
|
|
</div>
|
|
) : view === "hidden" ? (
|
|
/* Hidden channels — kept out of the Mine feed but still in the shared Library; managed here
|
|
instead of dimmed in the subscribed table. Same card grid as Blocked (ExcludedChannelList). */
|
|
<div className="px-4 pb-4 pt-3 max-w-384 mx-auto">
|
|
<ExcludedChannelList
|
|
channels={hiddenChannels}
|
|
icon={<EyeOff className="w-4 h-4 text-muted" />}
|
|
title={t("channels.hidden.title")}
|
|
hint={t("channels.hidden.hint")}
|
|
emptyText={t("channels.hidden.empty")}
|
|
actionLabel={t("channels.hidden.unhide")}
|
|
actionIcon={<Eye className="w-3.5 h-3.5" />}
|
|
onAction={channelActions.unhide}
|
|
onView={(c) => onViewChannel(c.id, c.title ?? t("channels.row.thisChannel"))}
|
|
/>
|
|
</div>
|
|
) : (
|
|
/* No top padding: the sticky header sits flush at the scroller top so it doesn't shift when
|
|
`position: sticky` engages on the first scroll (the band's controls row above gives the
|
|
visual gap). */
|
|
<div ref={listRef} className="px-4 pb-4 max-w-384 mx-auto">
|
|
{/* Channel table — only the rows scroll; the header row is sticky, and the controls row
|
|
(status chips + pager) rides in the fixed band right above it (controlsInBand). The
|
|
card layout swaps the table for a virtualized grid over the same rows (its pager and
|
|
status chips ride in the fixed band above instead). */}
|
|
{channelsQuery.isError && !channelsQuery.data ? (
|
|
<StateMessage tone="error" onRetry={() => channelsQuery.refetch()}>
|
|
{t("common.loadError")}
|
|
</StateMessage>
|
|
) : channelsQuery.isLoading ? (
|
|
<LoadingState shape="table" label={t("channels.loading")} />
|
|
) : layout === "table" ? (
|
|
<DataTable
|
|
rows={syncedChannels}
|
|
columns={columns}
|
|
rowKey={(c) => c.id}
|
|
persistKey={accountKey(LS.channelsTable) ?? undefined}
|
|
// Folded, the status / pager row leaves the band; the list's own end keeps it.
|
|
controlsPosition={fold.folded ? "bottom" : "both"}
|
|
controlsLeading={statusChips}
|
|
controlsInBand
|
|
controlsBandClassName="px-4 max-w-384 mx-auto"
|
|
sort={sort}
|
|
onSortChange={setSort}
|
|
filters={filters}
|
|
onFiltersChange={setFilters}
|
|
fixedLayout
|
|
emptyText={t("channels.empty")}
|
|
rowProps={rowMenu.triggerProps}
|
|
// `group`: the row's "…" reveals on its hover or focus (`.reveal`), and stays on touch.
|
|
rowClassName={() => "group"}
|
|
keyboardNav
|
|
reveal={follow}
|
|
surfacedFilters={SURFACED_FILTERS}
|
|
/>
|
|
) : (
|
|
<>
|
|
{/* Cards have no funnels: a Priority or name filter set in the table would narrow them
|
|
unseen. The tags have their own chip row. */}
|
|
<HiddenFilterCue
|
|
columns={columns}
|
|
filters={filters}
|
|
by="cards"
|
|
surfaced={SURFACED_FILTERS}
|
|
onFilter={(key, value) => setFilters({ ...filters, [key]: value })}
|
|
/>
|
|
<ChannelLayoutGrid
|
|
rows={pagedCards}
|
|
columns={columns}
|
|
rowKey={(c) => c.id}
|
|
leadKey="priority"
|
|
aboutKey="about"
|
|
moreKey="actions"
|
|
emptyText={t("channels.empty")}
|
|
rowProps={rowMenu.triggerProps}
|
|
rowClassName={() => "group"}
|
|
/>
|
|
{/* Folded, the status / pager row leaves the band, as the table's does — and the
|
|
list's own end keeps it here too (round 2, F2: the cards had lost their pager). */}
|
|
{fold.folded && (
|
|
<div className="pt-3 flex items-center justify-between gap-3 flex-wrap">
|
|
{statusChips}
|
|
{cardPager}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
<ContextMenu menu={rowMenu} ariaLabel={t("channels.row.menu")} items={menuItems} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|