feat(plex): poster collages on the genre + collection browse tiles

The Browse-by-genre tiles and the Collections browse tiles were flat color-hash
gradients. Give each a 2×2 collage of its top films' poster art, with the color hash
kept as the fallback so a group with no matching art (a show-only or empty collection)
never renders blank.

Backend: a shared `top_art_keys` windowed query returns, per key (a genre value or a
collection rating_key), the top few items' rating_keys — best-rated then newest, in one
query. Wired into the Discover genre tiles and the collections union endpoint; the client
renders the posters from the existing /api/plex/image/{key} endpoint, so no new image
plumbing. Frontend: a shared PosterTile component (collage + scrim + label, color-hash
fallback) replaces the two ad-hoc colored-tile implementations.

Verified live on localdev: genre tiles and collection tiles render real poster collages,
with the color fallback correctly kicking in for groups without art.

Gate: tsc/lint/knip/prettier clean, 423 vitest; backend ruff clean, 11 discover tests
(incl. a new genre-art assertion).

frontend/src/components/PlexDiscover.tsx

@@ -4,7 +4,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { RotateCcw } from "lucide-react";
 import { qk } from "../lib/queryKeys";
 import { api, type PlexCard, type PlexDiscover as PlexDiscoverData } from "../lib/api";
-import { hueOf, hueTileGradient } from "../lib/hueTile";
+import PosterTile from "./PosterTile";
 import { plexLang } from "../i18n";
 import { toggleWatchState } from "../lib/plexWatch";
 import { usePlex } from "./PlexProvider";
@@ -199,21 +199,16 @@ export default function PlexDiscover({
         <section className="mb-5">
           <h2 className="mb-3 text-sm font-semibold">{t("plex.discover.byGenre")}</h2>
           <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
-            {d.genres.map((g) => {
-              const hue = hueOf(g.value);
-              return (
-                <button
-                  key={g.value}
-                  type="button"
-                  onClick={() => onGenre(g.value)}
-                  className="glass-hover relative flex h-20 items-end overflow-hidden rounded-xl p-3 text-left transition"
-                  style={{ background: hueTileGradient(hue) }}
-                >
-                  <span className="text-sm font-semibold text-white drop-shadow">{g.value}</span>
-                  <span className="absolute right-2 top-2 text-2xs text-white/70">{g.count}</span>
-                </button>
-              );
-            })}
+            {d.genres.map((g) => (
+              <PosterTile
+                key={g.value}
+                title={g.value}
+                art={g.art}
+                topRight={<span className="text-2xs text-white/80 drop-shadow">{g.count}</span>}
+                onClick={() => onGenre(g.value)}
+                className="h-20"
+              />
+            ))}
           </div>
         </section>
       )}