refactor(frontend): the long tail — and eslint-suppressions.json is gone (E27 S2)

Closes the burn-down. Hook suppressions 113 -> 34, `exhaustive-deps` 45 -> 2 (the target was
<10), and every one of the 34 survivors is an inline directive NAMING the invariant it
protects. The suppressions file is deleted, because a bulk file hides the next violation
instead of answering it — and it cannot hold a warning-level rule at all.

The sprint plan's three verdicts missed the answer that turned out to be the most common one:
adjust the state DURING RENDER. React re-runs the component and discards that pass rather than
committing it, so the stale frame an effect-based reset paints does not exist. Applied to the
Plex player's up-next card, the playlist view reset, the feed's optimistic overrides, the
channel banner's retry count, the download center's tab guard, the Plex search highlight, the
comfort-pin latch, Welcome's per-view outcome and the card pager's page clamp. It is legal only
for a component's own state — PlexBrowse's language commit resets PlexProvider's filters, so
that one stays an effect and says why.

Mirrors of a prop or query became derived values or `draft ?? server`:
- `downloadRow` had ui/Avatar's defect exactly — a boolean "poster failed" that an effect reset,
  in rows recycled down a virtualized list, so one job's missing poster painted over the next
  one's for a frame. Keyed by URL now.
- Scheduler's two number editors held a mirror an effect re-synced, on a page that POLLS — the
  shape a poll can overwrite mid-edit. A draft while editing, the server's value otherwise; six
  tests where there were none, the one behavioural change (the save button stops being dirty at
  commit rather than at the echo) mutation-checked.
- SetupWizard's "no token" and WatchPage's "gone" are facts about the URL, so they are seeded and
  derived rather than pushed into state by an effect that had to commit first.

Elsewhere: PlexInfo's rating chip was a component declared during render — a new component type
every render, so React remounted the subtree and dropped the focus on its filter button. Hoisted.
Feed's undo action and PlexPlayer's session reclaim both re-entered their own useCallback, which
the checker reads as a forward reference; both go through the ref idiom this file already uses.
BootGate's dep list was load-bearing for correctness — a re-run meant `location.reload()` — so
the "already adopted THIS identity" comparison now enforces it in code, with a test that fails
without it (the existing reload tests all install their spy too late to catch it).

One correction to the batch before this: keying ChatThread's and Messages' decrypt passes on
`q.data` instead of `q.dataUpdatedAt` was wrong. react-query's structural sharing makes it safe
in production, but the component must not melt down when something hands back a fresh object per
render — and Messages.keyboard.dom.test does exactly that, so the effect span the suite. Both are
back on the fetch as the trigger with the payload behind a ref, which is honest AND loop-proof;
the replaced comment had warned about precisely this.

CLAUDE.md gains four canonical-patterns rows for the above, and its "React 18" line is now true.

frontend/src/components/PlaylistsRail.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { qk } from "../lib/queryKeys";
@@ -91,7 +91,9 @@ export default function PlaylistsRail({
     queryFn: () => api.playlists(),
     refetchOnWindowFocus: true,
   });
-  const playlists = listQuery.data ?? [];
+  // Memoised so the effect and the sort below depend on a value that only changes with the query —
+  // `?? []` would otherwise mint a new empty array on every render while the list is loading.
+  const playlists = useMemo(() => listQuery.data ?? [], [listQuery.data]);
 
   // Keep the selection valid: default to the first playlist, and if the selected one disappears
   // drop to the next available (or clear when none remain). Waits for the first load.
@@ -104,10 +106,12 @@ export default function PlaylistsRail({
     if (selectedId == null || !playlists.some((p) => p.id === selectedId)) {
       setSelectedId(playlists[0]!.id); // playlists is non-empty (the length guard above returns)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [playlists, selectedId, listQuery.data]);
+  }, [playlists, selectedId, listQuery.data, setSelectedId]);
 
-  const plName = (p: { kind: string; name: string }) => playlistName(p, t);
+  // useCallback because the two memos below sort by it: as a fresh closure each render it could not
+  // be named in their dep lists, and `t` — which is what actually changes it, on a language switch —
+  // was therefore invisible to them. A rename in the other language now re-sorts.
+  const plName = useCallback((p: { kind: string; name: string }) => playlistName(p, t), [t]);
 
   const sortedPlaylists = useMemo(() => {
     const sign = plSort.dir === "asc" ? 1 : -1;
@@ -126,15 +130,13 @@ export default function PlaylistsRail({
           return 0;
       }
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [playlists, plSort]);
+  }, [playlists, plSort, plName]);
 
   const q = search.trim().toLowerCase();
   const visiblePlaylists = useMemo(
     () =>
       q ? sortedPlaylists.filter((p) => plName(p).toLowerCase().includes(q)) : sortedPlaylists,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [sortedPlaylists, q],
+    [sortedPlaylists, q, plName],
   );
 
   useEffect(() => {