feat(channels): R14 zoom-fit table — fluid columns + column fogyókúra
- DataTable: opt-in `fixedLayout` (colgroup + table-layout:fixed) so the table fits its container at any zoom/text-size; only the channel manager opts in — playlists/discovery/Plex keep auto-sizing. - Remove the N/S/L and Sync columns from the manager table. Fully-synced status becomes a ✓ charm on the Stored count; the sync filter moves to an `applySyncFilter` pre-filter still driven by the top chips. - Channel column is now fluid: ChannelLink truncates with the full name on hover (title). Data columns get fixed widths so only Channel/About flex. - N/S/L (normal/short/live) breakdown moves to the channel page: add the three counts to the channelDetail endpoint (one grouped query, same filters as the list) + the ChannelDetail type + a meta-line entry. - Drop the now-dead sync/types i18n keys (en+hu).
This commit is contained in:
@@ -7,7 +7,7 @@ import ExcludedChannelList from "./ExcludedChannelList";
|
||||
import { api, type ManagedChannel } from "../lib/api";
|
||||
import { notifyYouTubeActionError } from "../lib/youtubeErrors";
|
||||
import { accountKey, LS } from "../lib/storage";
|
||||
import { buildChannelColumns } from "./channelColumns";
|
||||
import { buildChannelColumns, applySyncFilter } from "./channelColumns";
|
||||
import { notify } from "../lib/notifications";
|
||||
import Tooltip from "./Tooltip";
|
||||
import DataTable from "./DataTable";
|
||||
@@ -236,17 +236,23 @@ export default function Channels() {
|
||||
setSearch("");
|
||||
}, [filtersResetToken]);
|
||||
|
||||
// The sync-status AND tag filters are now controlled column filters (`filters.sync` / `filters.tags`)
|
||||
// shared by the top chips, the column funnels, and the card layout — no separate pre-filter. Hidden
|
||||
// channels have their own tab, so they're excluded from the subscribed table (no more dimmed rows).
|
||||
// Only the name search filters here; the column filters (sync/tags/priority/text funnels) are applied
|
||||
// by DataTable in table mode and by filterRows below in card mode, over the same `columns`.
|
||||
// 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.
|
||||
const syncedChannels = useMemo(
|
||||
() => applySyncFilter(visibleChannels, filters.sync),
|
||||
[visibleChannels, filters.sync],
|
||||
);
|
||||
const s = statusQuery.data;
|
||||
|
||||
const onView = (c: ManagedChannel) =>
|
||||
@@ -371,8 +377,8 @@ export default function Channels() {
|
||||
// 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(visibleChannels, columns, filters), columns, sort)
|
||||
: visibleChannels;
|
||||
? sortRows(filterRows(syncedChannels, columns, filters), columns, sort)
|
||||
: syncedChannels;
|
||||
const {
|
||||
paged: pagedCards,
|
||||
pagerProps,
|
||||
@@ -527,7 +533,7 @@ export default function Channels() {
|
||||
<LoadingState label={t("channels.loading")} />
|
||||
) : layout === "table" ? (
|
||||
<DataTable
|
||||
rows={visibleChannels}
|
||||
rows={syncedChannels}
|
||||
columns={columns}
|
||||
rowKey={(c) => c.id}
|
||||
persistKey={accountKey(LS.channelsTable) ?? undefined}
|
||||
@@ -539,6 +545,7 @@ export default function Channels() {
|
||||
onSortChange={setSort}
|
||||
filters={filters}
|
||||
onFiltersChange={setFilters}
|
||||
fixedLayout
|
||||
emptyText={t("channels.empty")}
|
||||
/>
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user