refactor(fe): migrate plex/messaging/admin/downloads/notifications to qk (R7 S2b)

Extend lib/queryKeys.ts to the remaining ~34 key roots and migrate every
remaining literal (queryKey: [...] AND the positional useLiveQuery keys) in
36 files. All ~200 React Query keys across the app now route through the
factory; zero raw key literals remain outside queryKeys.ts.

The heterogeneous composite plex keys (plex-library/facets/collections/
playlists carry a filters object, a ratingKeys array, or a union/group
discriminator) take a variadic pass-through — the factory centralizes the
ROOT string; single-id keys stay precisely typed. Nullable keys (thread,
playlist, ytSearch) accept null so a null segment is preserved.

Pure substitution — byte-identical key arrays, so TanStack prefix matching
is unchanged. Gate green: typecheck (app+node+e2e), eslint (0 err),
prettier, 68 vitest. Runtime-verified on a fresh dev server: Feed + Plex
modules load, feed/facets/tags/my-status/plex-library/plex-facets/
plex-collections/plex-playlists all 200, full UI renders.

frontend/src/components/PlexBrowse.tsx

@@ -7,6 +7,7 @@ import {
   useState,
   type CSSProperties,
 } from "react";
+import { qk } from "../lib/queryKeys";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 import {
@@ -138,7 +139,7 @@ export default function PlexBrowse() {
   }, [sub]);
 
   const browseQ = useInfiniteQuery({
-    queryKey: ["plex-library", scope, dq, sort, show, filters],
+    queryKey: qk.plexLibrary(scope, dq, sort, show, filters),
     enabled: !!scope && sub.view.kind === "grid",
     initialPageParam: 0,
     queryFn: ({ pageParam }) =>
@@ -162,7 +163,7 @@ export default function PlexBrowse() {
   // Cards for the actors currently in the filter (name + headshot + in-scope count) — shown above the
   // grid so you SEE who you're exploring, not just chips in the rail.
   const peopleCardsQ = useQuery({
-    queryKey: ["plex-people-cards", scope, filters.actors],
+    queryKey: qk.plexPeopleCards(scope, filters.actors),
     queryFn: () => api.plexPeopleCards(filters.actors, scope),
     enabled: sub.view.kind === "grid" && filters.actors.length > 0,
     staleTime: 60_000,
@@ -206,7 +207,7 @@ export default function PlexBrowse() {
   // and the search "Episodes" section (`episodes`) — so the quick toggle reacts instantly and reliably
   // BOTH ways (mark and un-mark). An id matches in only one array, so touching both is safe.
   function optimisticStatus(id: string, next: string) {
-    qc.setQueriesData<InfiniteData<PlexUnifiedResult>>({ queryKey: ["plex-library"] }, (old) =>
+    qc.setQueriesData<InfiniteData<PlexUnifiedResult>>({ queryKey: qk.plexLibrary() }, (old) =>
       old
         ? {
             ...old,
@@ -223,7 +224,7 @@ export default function PlexBrowse() {
     const next = card.status === "watched" ? "new" : "watched";
     optimisticStatus(card.id, next);
     await api.plexSetState(card.id, next).catch(() => {});
-    qc.invalidateQueries({ queryKey: ["plex-library"] });
+    qc.invalidateQueries({ queryKey: qk.plexLibrary() });
   }
   // Apply a metadata filter (clicked on an info page / show hero / cast) then show the unified grid.
   // Array filters (genres/people/studios) UNION with what's set; scalars replace. Clicking a person
@@ -587,7 +588,7 @@ function PlexInfoView({
   onFilter: (patch: Partial<PlexFilters>) => void;
 }) {
   const { t } = useTranslation();
-  const q = useQuery({ queryKey: ["plex-item", id], queryFn: () => api.plexItem(id) });
+  const q = useQuery({ queryKey: qk.plexItem(id), queryFn: () => api.plexItem(id) });
   return (
     <div className="w-[90%] max-w-[1600px] mx-auto">
       <div className="p-4 pb-0">
@@ -614,7 +615,7 @@ function PlexInfoView({
             onPlay={onPlay}
             onPlayItem={onPlayItem}
             onFilter={onFilter}
-            // No onStateChange: PlexInfo.setState already invalidates ["plex-item", id] (this very
+            // No onStateChange: PlexInfo.setState already invalidates qk.plexItem(id) (this very
             // query), so q refetches automatically — a manual refetch here just double-fetched.
           />
         </Suspense>
@@ -624,7 +625,7 @@ function PlexInfoView({
 }
 
 // --- Series drill-down: show detail page → season subpage → player -------------------------------
-// Both the show page and the season page read the SAME cached ["plex-show", showId] payload (the
+// Both the show page and the season page read the SAME cached qk.plexShow(showId) payload (the
 // season page just picks its season out of it), so opening a season is instant and PlexPlaylistAdd's
 // whole-show/season gather keeps working. Actions: Resume (on-deck episode), Play (from the start),
 // Mark whole show/season watched/unwatched, Add to playlist (show/season/episode), and — admin only —
@@ -989,8 +990,8 @@ function PlexShowView({
 }) {
   const { t } = useTranslation();
   const qc = useQueryClient();
-  const isAdmin = qc.getQueryData<{ role?: string }>(["me"])?.role === "admin";
-  const q = useQuery({ queryKey: ["plex-show", showId], queryFn: () => api.plexShow(showId) });
+  const isAdmin = qc.getQueryData<{ role?: string }>(qk.me())?.role === "admin";
+  const q = useQuery({ queryKey: qk.plexShow(showId), queryFn: () => api.plexShow(showId) });
   const d = q.data;
   const [addTarget, setAddTarget] = useState<PlexAddTarget | null>(null);
   const [collOpen, setCollOpen] = useState(false);
@@ -1009,13 +1010,13 @@ function PlexShowView({
     } finally {
       setBusy(false);
     }
-    qc.invalidateQueries({ queryKey: ["plex-show", showId] });
-    qc.invalidateQueries({ queryKey: ["plex-library"] });
+    qc.invalidateQueries({ queryKey: qk.plexShow(showId) });
+    qc.invalidateQueries({ queryKey: qk.plexLibrary() });
   }
   async function markSeason(seasonRk: string, w: boolean) {
     await api.plexSeasonState(seasonRk, w).catch(() => {});
-    qc.invalidateQueries({ queryKey: ["plex-show", showId] });
-    qc.invalidateQueries({ queryKey: ["plex-library"] });
+    qc.invalidateQueries({ queryKey: qk.plexShow(showId) });
+    qc.invalidateQueries({ queryKey: qk.plexLibrary() });
   }
 
   return (
@@ -1208,7 +1209,7 @@ function PlexShowView({
           library={showLib}
           memberOf={show.collection_keys}
           onClose={() => setCollOpen(false)}
-          onChanged={() => qc.invalidateQueries({ queryKey: ["plex-show", showId] })}
+          onChanged={() => qc.invalidateQueries({ queryKey: qk.plexShow(showId) })}
         />
       )}
     </div>
@@ -1228,7 +1229,7 @@ function PlexSeasonView({
 }) {
   const { t } = useTranslation();
   const qc = useQueryClient();
-  const q = useQuery({ queryKey: ["plex-show", showId], queryFn: () => api.plexShow(showId) });
+  const q = useQuery({ queryKey: qk.plexShow(showId), queryFn: () => api.plexShow(showId) });
   const d = q.data;
   const se = d?.seasons.find((s) => s.id === seasonId);
   const [addTarget, setAddTarget] = useState<PlexAddTarget | null>(null);
@@ -1245,13 +1246,13 @@ function PlexSeasonView({
     } finally {
       setBusy(false);
     }
-    qc.invalidateQueries({ queryKey: ["plex-show", showId] });
-    qc.invalidateQueries({ queryKey: ["plex-library"] });
+    qc.invalidateQueries({ queryKey: qk.plexShow(showId) });
+    qc.invalidateQueries({ queryKey: qk.plexLibrary() });
   }
   async function markEpisode(ep: PlexCard) {
     await api.plexSetState(ep.id, ep.status === "watched" ? "new" : "watched").catch(() => {});
-    qc.invalidateQueries({ queryKey: ["plex-show", showId] });
-    qc.invalidateQueries({ queryKey: ["plex-library"] });
+    qc.invalidateQueries({ queryKey: qk.plexShow(showId) });
+    qc.invalidateQueries({ queryKey: qk.plexLibrary() });
   }
 
   return (