peter
e5b155ada9
E32 review round 1 (F3–F6). - Channels' open-row store and the chat dock use lib/store's createStore instead of a hand-rolled listener set (the chat dock gets a test of its own). - The Plex backdrop reads prefers-reduced-motion through useMediaQuery; the query string is one constant (REDUCED_MOTION) for the hook and the carousel's one-off read. - A link-restored collection filter showed its raw rating_key in the picker while the titles loaded: usePlexCollectionTitles now says it is pending, the picker draws a placeholder (labelsPending, as the channel picker does) and so does the chip row. - The "deleted tag" rule was written twice with two i18n keys and had drifted: the channel manager showed NO chip for a pick while the tag list loaded, or ever after a failed load, while the pick still narrowed the table. One rule now (lib/tagPicks), one key (common.deletedTag); the manager's row shows every pick, as a placeholder while loading and as its id after a failure.
884 lines
40 KiB
TypeScript
884 lines
40 KiB
TypeScript
import {
|
|
useCallback,
|
|
useEffect,
|
|
useEffectEvent,
|
|
useMemo,
|
|
useRef,
|
|
useState,
|
|
useSyncExternalStore,
|
|
} from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { createStore, type Store } from "../lib/store";
|
|
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, tagFilterChips } 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 { focusNavItem } from "../lib/listNav";
|
|
import ViewSwitcher, { type ViewOption } from "./ViewSwitcher";
|
|
import ColumnSortControl from "./ui/ColumnSortControl";
|
|
import FilterChipGroup from "./ui/FilterChipGroup";
|
|
import TagFilterChips 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,
|
|
};
|
|
|
|
// The row menu's identity for a channel. Module scope, as useContextMenu asks: a fresh function per
|
|
// render rebuilt its `buttonProps` on every render, and with them every column.
|
|
const channelKey = (c: ManagedChannel) => c.id;
|
|
|
|
// Which channel's row menu is open, for its "…" (`aria-expanded`, and staying shown while open). A
|
|
// tiny store rather than a context: a context change walks the whole table to find its readers (~20
|
|
// ms on 400 rows, each open and close), while a store calls its subscribers and re-renders only the
|
|
// two buttons whose answer changed (each reads a boolean, so a change elsewhere renders nothing).
|
|
type OpenRowStore = Store<string | null>;
|
|
|
|
function RowMoreButton({
|
|
id,
|
|
label,
|
|
menuProps,
|
|
register,
|
|
openRow,
|
|
}: {
|
|
id: string;
|
|
label: string;
|
|
menuProps: Record<string, unknown>;
|
|
register: (id: string, el: HTMLButtonElement | null) => void;
|
|
openRow: OpenRowStore;
|
|
}) {
|
|
const mine = useSyncExternalStore(openRow.subscribe, () => openRow.get() === id);
|
|
return (
|
|
<MoreButton
|
|
ref={(el) => register(id, el)}
|
|
label={label}
|
|
expanded={mine}
|
|
menuProps={menuProps}
|
|
className={mine ? undefined : "reveal"}
|
|
/>
|
|
);
|
|
}
|
|
|
|
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.
|
|
// useCallback (like `onView`): the column memo below names it, and the hook lint cannot see the
|
|
// compiler's memo of a plain closure.
|
|
const onFilterByTag = useCallback(
|
|
(tagId: number, name: string) => {
|
|
setFeedFilters({ ...feedFilters, tags: [tagId], channelIds: [] });
|
|
setPage("feed");
|
|
notify({ level: "info", message: t("channels.notify.filteredByTag", { name }) });
|
|
},
|
|
[setFeedFilters, feedFilters, setPage, t],
|
|
);
|
|
|
|
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() });
|
|
};
|
|
|
|
// A memo for the same reason as the tag actions below: the column memo names it.
|
|
const allTags = tagsQuery.data;
|
|
const userTags = useMemo(() => (allTags ?? []).filter((t) => !t.system), [allTags]);
|
|
|
|
// 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, 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 tagActionOpts = useMemo<Parameters<typeof useChannelTagActions>[0]>(
|
|
() => ({
|
|
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() });
|
|
},
|
|
}),
|
|
[qc],
|
|
);
|
|
// The options are a memo so the hook's toggleTag/createAndAttachTag stay the same functions: the
|
|
// column memo below names them (see `columns`).
|
|
const { toggleTag, createAndAttachTag } = useChannelTagActions(tagActionOpts);
|
|
// --- 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, 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 tagChips = tagFilterChips({
|
|
userTags,
|
|
tags: tagsQuery,
|
|
picked: tagFilter,
|
|
noTagOn,
|
|
toggle: toggleTagFilter,
|
|
toggleNoTag: toggleNoTagFilter,
|
|
t,
|
|
});
|
|
// 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 is read through an effect event. 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 applyFocus = useEffectEvent(() => {
|
|
if (!focusChannelName) return;
|
|
setSearch(focusChannelName);
|
|
consumeFocus();
|
|
});
|
|
useEffect(() => applyFocus(), [focusChannelToken]);
|
|
// 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]);
|
|
|
|
const onView = useCallback(
|
|
(c: ManagedChannel) => onViewChannel(c.id, c.title ?? t("channels.row.thisChannel")),
|
|
[onViewChannel, t],
|
|
);
|
|
// 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: channelKey });
|
|
const rowPin = useComfortPin(rowMenu.open);
|
|
// The columns read only the menu's STABLE handles. Which row's menu is open reaches each "…" through
|
|
// the open-row store instead: read in the columns, it rebuilt every column on each open, close and
|
|
// reposition, and so re-rendered the whole table — ~0.8 s to open the menu on 400 rows.
|
|
const { buttonProps: rowButtonProps, triggerProps: rowTriggerProps } = rowMenu;
|
|
const openRowId = rowMenu.open ? (rowMenu.target?.id ?? null) : null;
|
|
const [openRow] = useState(() => createStore<string | null>(null));
|
|
useEffect(() => openRow.set(openRowId), [openRow, openRowId]);
|
|
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")),
|
|
})
|
|
: [];
|
|
|
|
// 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.
|
|
//
|
|
// The table's rows and columns are explicit memos, not inline. Both later reach calls the React
|
|
// Compiler must assume may mutate them (`filterRows`, `sortRows`, `optionsFromColumns`) past this
|
|
// page's hooks, and a compiler memo cannot span a hook call — so inline, the compiler dropped their
|
|
// memo without a word, and every render (each open, close and reposition of the row menu) handed
|
|
// DataTable new rows and columns: ~0.9 s to open the menu on 400 rows. A useMemo result is frozen.
|
|
const hiddenChannels = (channelsQuery.data ?? []).filter((c) => c.hidden);
|
|
const allChannels = channelsQuery.data;
|
|
const q = search.trim().toLowerCase();
|
|
const syncFilterValue = filters.sync;
|
|
const syncedChannels = useMemo(
|
|
() =>
|
|
// Sync-status pre-filter (top chips → `filters.sync`), applied before the table/cards see the rows.
|
|
applySyncFilter(
|
|
(allChannels ?? []).filter(
|
|
(c) =>
|
|
!c.hidden && (!q || `${c.title ?? ""} ${c.handle ?? ""}`.toLowerCase().includes(q)),
|
|
),
|
|
syncFilterValue,
|
|
),
|
|
[allChannels, q, syncFilterValue],
|
|
);
|
|
const s = statusQuery.data;
|
|
|
|
const columns = useMemo(() => {
|
|
const registerMore = (id: string, el: HTMLButtonElement | null) => {
|
|
if (el) moreRefs.current.set(id, el);
|
|
else moreRefs.current.delete(id);
|
|
};
|
|
return buildChannelColumns({
|
|
t,
|
|
lang,
|
|
// Distinct priority levels present in the catalog → the priority column's filter options.
|
|
prioOptions: [...new Set((allChannels ?? []).map((c) => c.priority))]
|
|
.sort((a, b) => b - a)
|
|
.map((p) => ({ value: String(p), label: String(p) })),
|
|
userTags,
|
|
bumpPriority,
|
|
setPriority,
|
|
more: (c) => (
|
|
<RowMoreButton
|
|
id={c.id}
|
|
label={t("channels.row.menu")}
|
|
menuProps={rowButtonProps(c)}
|
|
register={registerMore}
|
|
openRow={openRow}
|
|
/>
|
|
),
|
|
onView,
|
|
toggleTag,
|
|
createAndAttachTag,
|
|
onFilterByTag,
|
|
suggestionsFor,
|
|
onAcceptSuggestion: acceptSuggestion,
|
|
onDismissSuggestion: dismissSuggestion,
|
|
});
|
|
}, [
|
|
t,
|
|
lang,
|
|
allChannels,
|
|
userTags,
|
|
bumpPriority,
|
|
setPriority,
|
|
rowButtonProps,
|
|
openRow,
|
|
onView,
|
|
toggleTag,
|
|
createAndAttachTag,
|
|
onFilterByTag,
|
|
suggestionsFor,
|
|
acceptSuggestion,
|
|
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={tagChips} 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={rowTriggerProps}
|
|
// `group`: the row's "…" reveals on its hover or focus (`.reveal`), and stays on touch.
|
|
rowClassName={() => "group"}
|
|
keyboardNav
|
|
reveal={follow}
|
|
surfacedFilters={SURFACED_FILTERS}
|
|
narrowedBy={q}
|
|
/>
|
|
) : (
|
|
<>
|
|
{/* 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={rowTriggerProps}
|
|
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>
|
|
</>
|
|
);
|
|
}
|