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:
2026-08-15 05:28:59 +02:00
parent ea7bf593cb
commit 7ee0e9cd02
11 changed files with 114 additions and 129 deletions
+16 -9
View File
@@ -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")}
/>
) : (