fix(filters): a pick that hides More… keeps the focus, counts read alike, Plex facets say they failed

Picking in the year dialog the one year the chips hid took More… away with the dialog, and the
focus fell to <body>: it now goes to the picked year's chip. A count badge is compact in the UI
language everywhere (a chip read "17200" beside its cell's "17.2K"). While the Plex facets load
or fail, the sections they fill say so instead of vanishing as if the library had none.

frontend/src/components/ui/YearPicker.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Chip } from "./Chip";
 import CountBadge from "./CountBadge";
@@ -52,10 +52,22 @@ export default function YearPicker({
   // only if it is one of them.
   const more = years.some((y) => !quick.some((q) => q.year === y.year));
 
+  const chipsRef = useRef<HTMLDivElement>(null);
   const toggle = (year: number) => onPick(selected === year ? undefined : year);
   const pickAndClose = (year: number) => {
     toggle(year);
     setOpen(false);
+    // A pick that leaves the dialog nothing to show takes More… away with it, and the dialog then has
+    // nowhere to give the focus back: it fell to <body>, which also folded an unpinned rail. So it
+    // goes to the picked year's chip (the first chip if the pick cleared it). A timer, not a frame: a
+    // page the browser is not painting runs no requestAnimationFrame.
+    window.setTimeout(() => {
+      const now = document.activeElement;
+      const row = chipsRef.current;
+      if ((now && now !== document.body && now.isConnected) || !row) return;
+      const chip = row.querySelector<HTMLElement>(`[data-year="${year}"]`);
+      (chip ?? row.querySelector<HTMLElement>("button"))?.focus({ preventScroll: true });
+    }, 0);
   };
 
   const cell = (y: YearCount, index: number) => {
@@ -79,7 +91,7 @@ export default function YearPicker({
   };
 
   return (
-    <div className="flex flex-wrap gap-1.5">
+    <div ref={chipsRef} className="flex flex-wrap gap-1.5">
       {quick.map((y) => {
         const on = selected === y.year;
         // The chip kept only for the selection leaves with it: from the keyboard, the focus goes to
@@ -89,6 +101,7 @@ export default function YearPicker({
           <Chip
             key={y.year}
             pressed={on}
+            data-year={y.year}
             onClick={(e) => {
               if (leaves && e.currentTarget === document.activeElement)
                 handOffFocus(e.currentTarget, () => toggle(y.year));