fix(feed): a channel filter's chips name their channels from the first paint

After a reload the chips (filter panel and the row above the feed) read as
raw UC… ids until the subscription list landed. The names seen last time
are now kept per account (useChannelNames) and name the chips at once; the
list then replaces the copy, so a renamed or dropped channel heals. A
channel never named on this browser draws a placeholder bone while the
list loads; a failed list still falls back to the id.

frontend/src/components/ui/Combobox.tsx

@@ -11,6 +11,7 @@ import { InnerInput } from "./Input";
 import { DismissibleChip } from "./Chip";
 import { fieldClass } from "./fieldStyles";
 import { SURFACE } from "./surfaces";
+import { ChipLabelPending } from "./Skeleton";
 
 // The universal combobox: a react-select / Overseerr-style "combi input" — selected values are
 // removable chips that live INSIDE a text field you type into, and a checklist of options opens below.
@@ -72,6 +73,9 @@ export interface ComboboxProps {
   /** Chip/label text for a selected value whose option is not in the current (e.g. server-narrowed)
    *  list — the collection picker passes the stored title here so a reloaded filter still names itself. */
   selectedLabels?: Record<string, string>;
+  /** The labels are still on their way: a selected value with none yet draws a placeholder chip
+   *  instead of its raw value (a channel filter's UC… id after a reload). */
+  labelsPending?: boolean;
 }
 
 export default function Combobox({
@@ -93,6 +97,7 @@ export default function Combobox({
   maxVisible = 50,
   renderOption,
   selectedLabels,
+  labelsPending = false,
 }: ComboboxProps) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
@@ -113,7 +118,8 @@ export default function Combobox({
   useEffect(() => {
     for (const o of options) if (o.label != null) labelCache.current[o.value] = o.label;
   }, [options]);
-  const labelFor = (v: string) => selectedLabels?.[v] ?? labelCache.current[v] ?? v;
+  const knownLabel = (v: string) => selectedLabels?.[v] ?? labelCache.current[v];
+  const labelFor = (v: string) => knownLabel(v) ?? v;
 
   const setOpenAnd = (next: boolean) => {
     if (next && disabled) return;
@@ -210,7 +216,11 @@ export default function Combobox({
             onDismiss={() => !disabled && onChange(selected.filter((x) => x !== v))}
             dismissLabel={t("common.removeNamed", { name: labelFor(v) })}
           >
-            {labelFor(v)}
+            {labelsPending && knownLabel(v) === undefined ? (
+              <ChipLabelPending value={v} />
+            ) : (
+              labelFor(v)
+            )}
           </DismissibleChip>
         ))}
         <InnerInput

frontend/src/components/ui/Skeleton.tsx

@@ -7,15 +7,32 @@ import { SURFACE } from "./surfaces";
 // paragraph's, for prose that arrives after its page). The
 // shapes are shown through `LoadingState shape=…`, which owns the 300 ms reveal and the status role.
 
-export function Skeleton({ className }: { className?: string }) {
+export function Skeleton({ className, inline = false }: { className?: string; inline?: boolean }) {
+  // Inline: a span, for a bone inside phrasing content (a chip is a button, which may not hold a div).
+  const Tag = inline ? "span" : "div";
   return (
-    <div
+    <Tag
       aria-hidden="true"
-      className={clsx("rounded-lg bg-fg/8 animate-pulse motion-reduce:animate-none", className)}
+      className={clsx(
+        "rounded-lg bg-fg/8 animate-pulse motion-reduce:animate-none",
+        inline && "inline-block align-middle",
+        className,
+      )}
     />
   );
 }
 
+/** A chip whose name is still on its way: a name-sized bone, not the raw value (a channel's UC… id).
+ *  A screen reader still gets the value, so two such chips stay told apart. */
+export function ChipLabelPending({ value }: { value: string }) {
+  return (
+    <>
+      <Skeleton inline className="h-3 w-20" />
+      <span className="sr-only">{value}</span>
+    </>
+  );
+}
+
 export type SkeletonShape = "grid" | "poster" | "list" | "table" | "text";
 
 const COUNT: Record<SkeletonShape, number> = { grid: 8, poster: 12, list: 6, table: 8, text: 5 };