fix(managers): address the E4 S3 code-review findings

- DataTable: keep `pagerNode` NULLABLE. Extracting Pager made it an always-truthy
  element, so the `controls` / `bottomControls` guards always fired and a table with
  nothing to page rendered empty `my-3` bands (plus an empty in-band PageToolbar).
- ChannelsProvider: `setView` bails when the tab is unchanged (re-selecting the
  active tab, or goToFullHistory forcing "subscribed", stacked dead Back entries),
  and pushes a FRESH state like setPage does instead of spreading `_chan`/`_yt`
  markers into the tab entry.
- Lift the layout into its own narrow context (`useChannelLayout`): App read the
  whole ChannelsState for the fade, so every keystroke in the manager's search box
  re-rendered the app root.
- Reset the card page when the row set or sort changes (both tabs) — the clamp only
  hid a stale page, which came back when the filter was cleared.
- Sort + slice the card rows only in cards mode; table mode was copy-sorting ~300
  rows per render for a result nothing read.
- Validate persisted `cardSize` / `sort` (`parseCardSize`, `parseSortState`), matching
  the clamp-on-read convention the module's other persisted values already follow;
  a corrupt size made the page count NaN and emptied the grid.
- Pager: page-size changes scroll to the top too (they re-slice from a new first item).
- ColumnSortControl: a stored sort naming a column this table no longer offers is
  treated as no sort, instead of showing a direction arrow for a sort that isn't applied.
- Drop the stale "rows" layout comments (that variant was retired this sprint).

frontend/src/components/ChannelsProvider.tsx

@@ -4,12 +4,13 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
   type ReactNode,
 } from "react";
 import { getAccountRaw, LS, readAccount, setAccountRaw, writeAccount } from "../lib/storage";
 import { parseChannelLayout, type ChannelLayout } from "../lib/channelLayout";
-import { type SortState } from "../lib/columnSort";
+import { parseSortState, type SortState } from "../lib/columnSort";
 import { useNavigation, useNavigationActions } from "./NavigationProvider";
 import type { ChannelStatusFilter, ChannelsView } from "./Channels";
 
@@ -43,8 +44,6 @@ type ChannelsState = {
   search: string;
   statusFilter: ChannelStatusFilter;
   view: ChannelsView;
-  // The table/cards density (shared by the subscribed + discovery tabs).
-  layout: ChannelLayout;
   // The subscribed table's sort, lifted out of DataTable so the card layout shares it.
   sort: SortState;
   // Bumped to tell the manager to drop a stale column filter when an intent sends the user to a
@@ -73,12 +72,15 @@ const StateContext = createContext<ChannelsState>({
   search: "",
   statusFilter: "all",
   view: "subscribed",
-  layout: "table",
   sort: null,
   filtersResetToken: 0,
   focusName: null,
   focusToken: 0,
 });
+// The table/cards density gets its OWN context, deliberately narrow: App reads it (to decide the
+// shell's top fade) and would otherwise re-render the whole app on every keystroke in the manager's
+// search box, since the state context above changes with it.
+const LayoutContext = createContext<ChannelLayout>("table");
 const ActionsContext = createContext<ChannelsActions>({
   setSearch: () => {},
   setStatusFilter: () => {},
@@ -92,6 +94,11 @@ const ActionsContext = createContext<ChannelsActions>({
 export function useChannels(): ChannelsState {
   return useContext(StateContext);
 }
+/** The manager's table/cards density on its own — subscribe to this instead of the whole state when
+ * the layout is all you need (App does, for the shell's top fade). */
+export function useChannelLayout(): ChannelLayout {
+  return useContext(LayoutContext);
+}
 export function useChannelsActions(): ChannelsActions {
   return useContext(ActionsContext);
 }
@@ -110,11 +117,19 @@ export function ChannelsProvider({ children }: { children: ReactNode }) {
   const [layout, setLayoutState] = useState<ChannelLayout>(() =>
     parseChannelLayout(getAccountRaw(LS.channelLayout)),
   );
-  const [sort, setSortState] = useState<SortState>(() => readAccount<SortState>(LS.channelSort, null));
+  const [sort, setSortState] = useState<SortState>(() =>
+    parseSortState(readAccount(LS.channelSort, null)),
+  );
   const [filtersResetToken, setFiltersResetToken] = useState(0);
   const [focusName, setFocusName] = useState<string | null>(null);
   const [focusToken, setFocusToken] = useState(0);
 
+  // Latest-value ref so the STABLE setView can compare against the current tab without depending on
+  // it (a dep would recreate the action on every switch and re-render every actions consumer).
+  // Written during render — the sanctioned pattern NavigationProvider uses for `pageRef`.
+  const viewRef = useRef(view);
+  viewRef.current = view;
+
   const setSearch = useCallback((q: string) => setSearchState(q), []);
   const setStatusFilter = useCallback((f: ChannelStatusFilter) => {
     setStatusFilterState(f);
@@ -124,14 +139,18 @@ export function ChannelsProvider({ children }: { children: ReactNode }) {
   // live YouTube search (`_yt`) do — so Back steps back through the tabs you actually visited instead
   // of jumping straight out to the previous module.
   const setView = useCallback((v: ChannelsView) => {
+    // Re-selecting the tab you are already on is not a navigation — bail before pushing, or clicking
+    // the active tab (and goToFullHistory forcing "subscribed") stacks Back entries that do nothing.
+    if (v === viewRef.current) return;
     setViewState(v);
     setAccountRaw(LS.channelsView, v);
-    const st = window.history.state || {};
     // Only own an entry while the manager is already on screen. Arriving from elsewhere
     // (focusChannel / goToFullHistory) lets setPage push the entry — the stamp effect labels it — so
     // one navigation never costs two Back presses.
-    if (st.sfPage === "channels") {
-      window.history.pushState({ ...st, sfPage: "channels", _chTab: v }, "");
+    if (window.history.state?.sfPage === "channels") {
+      // A FRESH state, like setPage's: carrying the old entry's `_chan`/`_yt` markers over would make
+      // Back re-open the channel overlay or a spent search on top of the tab.
+      window.history.pushState({ sfPage: "channels", _chTab: v }, "");
     }
   }, []);
   const setLayout = useCallback((l: ChannelLayout) => {
@@ -186,8 +205,8 @@ export function ChannelsProvider({ children }: { children: ReactNode }) {
   }, []);
 
   const state = useMemo<ChannelsState>(
-    () => ({ search, statusFilter, view, layout, sort, filtersResetToken, focusName, focusToken }),
-    [search, statusFilter, view, layout, sort, filtersResetToken, focusName, focusToken],
+    () => ({ search, statusFilter, view, sort, filtersResetToken, focusName, focusToken }),
+    [search, statusFilter, view, sort, filtersResetToken, focusName, focusToken],
   );
   const actions = useMemo<ChannelsActions>(
     () => ({ setSearch, setStatusFilter, setView, setLayout, setSort, focusChannel, goToFullHistory }),
@@ -196,7 +215,9 @@ export function ChannelsProvider({ children }: { children: ReactNode }) {
 
   return (
     <ActionsContext.Provider value={actions}>
-      <StateContext.Provider value={state}>{children}</StateContext.Provider>
+      <LayoutContext.Provider value={layout}>
+        <StateContext.Provider value={state}>{children}</StateContext.Provider>
+      </LayoutContext.Provider>
     </ActionsContext.Provider>
   );
 }