fix(ui): E31 S2 — the tab names the object, the channel header wraps, the player fits a short window

- The browser tab names the place and the object: PageHeading reports the
  view's own title (lib/documentTitle), so a channel, playlist or any Plex
  view reads "<object> · <module> · Siftlode" however it was opened; the
  Feed is named too; a season adds its show (tabTitle).
- The channel page's tab + action row wraps and lets the tag lane fold into
  "+N": at 1024 it ran past the edge and the page scrolled sideways.
- The YouTube player card's width is capped from the window height less the
  chrome measured under the video: at 133% zoom (685px) it cut its channel row.
- Plex certificate words (Not Rated, Approved, Passed) are named through the
  vocabulary on the info badge, show page, collection, filter and chips.
- DESIGN.md: the zoom target is 125% and 133%, not 200% (decision log).

docs/DESIGN.md

@@ -39,8 +39,8 @@ runs this check before it is called done (E28 S3g):
 4. **Seen.** A screenshot of every changed state, thin edges at 1:1; the tablet widths (1024 × 768, a
    narrow split screen) when the layout can reflow. Phones are the E29 epic's, not this check's.
 5. **Judged as a whole** (E30 S6). For each screenshot, one written line on its composition: where the empty
-   space is, what hugs one side, what the eye lands on first. Then the screen at 200% browser zoom and at
+   space is, what hugs one side, what the eye lands on first. Then the screen at 125% and 133% browser
-   the largest text size. Both are held to [Composition and the reader](#composition-and-the-reader--decided-e30-s6).
+   zoom and at the largest text size. All are held to [Composition and the reader](#composition-and-the-reader--decided-e30-s6).
    A rule that holds is not the same as a screen that works: the person page passed every rule above with
    half its panel empty.
 
@@ -465,8 +465,9 @@ of a full-width panel and nothing on the right.
   (TMDB, YouTube) is fetched ahead of time by a job, not on the click, so a page never waits on it.
   Late content keeps its place (B8). [Nielsen #1, RAIL]
 - **Zoom and text size are first-class.** The owner reads with the browser zoomed and a large text size.
-  Every screen holds at 200% browser zoom on a desktop window and at the largest Settings text size at
+  Every screen holds at 125% and 133% browser zoom on a 1080p desktop window (what the owner uses: the
-  1024 wide: nothing clipped or overlapping, no sideways page scroll, every control reachable and at
+  layout of a 1536 × 729 and a 1444 × 685 viewport) and at the largest Settings text size at 1024 wide:
+  nothing clipped or overlapping, no sideways page scroll, every control reachable and at
   least its rung, text wrapping rather than cut. Measured, not assumed, on every UI change. [WCAG 1.4.4,
   1.4.10, 1.4.12]
 
@@ -688,3 +689,4 @@ of a full-width panel and nothing on the right.
 | 2026-09-27 | Match switch on the panel                        | `ui/MatchToggle` above the picker from two picks, everywhere; one wording (Any / All)                                                                                                                                                                                                                                  | The picker's popover footer (Feed, Plex collection)                                                                                                                                                    | A closed picker hid an active "all"; six pickers had drawn it two ways                                                                                                                        |
 | 2026-09-27 | Missing picture, bare link                       | A glyph of the kind for no picture; a download with no name is titled by its short link, once                                                                                                                                                                                                                          | An empty box; the URL as title, channel and link                                                                                                                                                       | The owner's picks 4A and 3A: an empty box read as loading, the URL showed three times                                                                                                         |
 | 2026-09-27 | Copy on a selection                              | Right-click on selected words keeps the browser's menu; no app Copy row                                                                                                                                                                                                                                                | An app menu with Copy first                                                                                                                                                                            | A real browser's menu has copy, search and translate; only the desktop pane's is thin                                                                                                         |
+| 2026-10-01 | Zoom target 125–133%                             | Screens are held at 125% and 133% browser zoom (1536 × 729, 1444 × 685 on a 1080p window) and the largest text size                                                                                                                                                                                                    | 200% browser zoom                                                                                                                                                                                      | The owner: 200% was a guess; 125–133% is what they read Siftlode and most sites at, so 200% would be an upper bound nobody uses                                                               |

frontend/src/components/ChannelPage.tsx

@@ -414,7 +414,9 @@ export default function ChannelPage({
           {/* Tabs — the channel actions ride along here rather than off in the header's top-right
             corner: there are only ever two tabs, so there's room, and it keeps the things you click
             within a few pixels of each other instead of across the page. */}
-          <div className="flex items-center gap-2 mt-3 border-b border-border pb-2">
+          {/* Wraps rather than overflows: at a tablet width (1024) the actions + tags ran past the edge and
+            the whole page scrolled sideways (E31 S1). The tag lane takes what is left and folds into "+N". */}
+          <div className="flex flex-wrap items-center gap-2 mt-3 border-b border-border pb-2">
             <Tabs
               idBase={panel.idBase}
               className="flex gap-1"
@@ -425,7 +427,7 @@ export default function ChannelPage({
                 { id: "about", label: t("channel.tabAbout") },
               ]}
             />
-            <div className="ml-2 flex items-center gap-2">
+            <div className="ml-2 flex min-w-0 flex-1 items-center gap-2">
               <IconLink
                 href={ytUrl}
                 target="_blank"
@@ -542,14 +544,16 @@ export default function ChannelPage({
                   otherwise), and personal tags are for your subscriptions — so only offer it on a
                   channel you actually follow. */}
               {ch?.subscribed && !me.is_demo && (
-                <ChannelTagsControl
+                <div className="min-w-0 flex-1">
-                  userTags={userTags}
+                  <ChannelTagsControl
-                  attachedIds={ch.tag_ids}
+                    userTags={userTags}
-                  onToggle={(tagId) => toggleTag(channelId, tagId, ch.tag_ids.includes(tagId))}
+                    attachedIds={ch.tag_ids}
-                  onCreate={(name) => createAndAttachTag(channelId, name)}
+                    onToggle={(tagId) => toggleTag(channelId, tagId, ch.tag_ids.includes(tagId))}
-                  // The header row has free width — show tags inline instead of collapsing to "+N".
+                    onCreate={(name) => createAndAttachTag(channelId, name)}
-                  bounded={false}
+                    // The header row's leftover width: tags inline, "+N" only when they do not fit.
-                />
+                    bounded={false}
+                  />
+                </div>
               )}
             </div>
           </div>

frontend/src/components/NavigationProvider.dom.test.tsx

@@ -10,7 +10,7 @@
 // then browser Back — is still checked in a real browser: jsdom reproduces history ordering only as
 // bookkeeping.
 import { describe, it, expect, afterEach, beforeEach, vi } from "vitest";
-import { renderHook, act, cleanup } from "@testing-library/react";
+import { renderHook, render as rtlRender, act, cleanup } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { ReactNode } from "react";
 
@@ -28,6 +28,7 @@ vi.mock("react-i18next", async (importOriginal) => {
 import { NavigationProvider } from "./NavigationProvider";
 import { useNavigation, useNavigationActions } from "./navigationContext";
 import { useBackToClose } from "../lib/history";
+import { PageHeading } from "./ui/Headings";
 
 import { qk } from "../lib/queryKeys";
 
@@ -88,6 +89,41 @@ describe("NavigationProvider · the tab title", () => {
     expect(document.title).not.toBe("Siftlode");
     expect(document.title.endsWith(" · Siftlode")).toBe(true);
   });
+
+  // E31 S1: the Feed's tab read a bare "Siftlode" — the one page that named no place.
+  it("names the Feed like every other page", async () => {
+    window.history.replaceState({ sfPage: "feed" }, "", "/?page=feed");
+    render();
+    await settle();
+    expect(document.title).toBe("header.account.feed · Siftlode");
+  });
+
+  // E31 S1: a channel opened from a link was "Channels · Siftlode", the same channel opened in the
+  // app was named; a Plex title, person or collection only "Plex". The object is the view's heading.
+  it("puts the open view's own heading before the place, and drops it when the view closes", async () => {
+    window.history.replaceState({ sfPage: "plex" }, "", "/?page=plex");
+    function View({ name }: { name: string | null }) {
+      return name === null ? null : <PageHeading>{name}</PageHeading>;
+    }
+    const view = rtlRender(<View name="" />, { wrapper });
+    await settle();
+    expect(document.title).toBe("plex.navLabel · Siftlode"); // no title yet: the place alone
+
+    view.rerender(<View name="Nicolas Cage" />);
+    await settle();
+    expect(document.title).toBe("Nicolas Cage · plex.navLabel · Siftlode");
+
+    view.rerender(<View name={null} />);
+    await settle();
+    expect(document.title).toBe("plex.navLabel · Siftlode");
+  });
+
+  it("takes a heading's tabTitle over its text", async () => {
+    window.history.replaceState({ sfPage: "plex" }, "", "/?page=plex");
+    rtlRender(<PageHeading tabTitle="Voyager · Season 1">Season 1</PageHeading>, { wrapper });
+    await settle();
+    expect(document.title).toBe("Voyager · Season 1 · plex.navLabel · Siftlode");
+  });
 });
 
 describe("NavigationProvider · setPage's same-page guard", () => {

frontend/src/components/NavigationProvider.tsx

@@ -4,6 +4,7 @@ import { useMe } from "../lib/useMe";
 import { urlWithParams, type Page } from "../lib/urlState";
 import { LOGS_KEYS } from "../lib/logsUrlState";
 import { pageTitleKey } from "../lib/pageMeta";
+import { useDocumentObjectTitle } from "../lib/documentTitle";
 import { setAccountRaw } from "../lib/storage";
 import { setNavigator } from "../lib/nav";
 import {
@@ -164,21 +165,17 @@ export function NavigationProvider({ children }: { children: ReactNode }) {
     if (page !== "feed") setYtSearch(null);
   }
 
-  // Reflect the current module in the browser tab title. Feed = brand only; an open channel page
+  // The browser tab names the place and the object in it (DESIGN § Composition, "Where am I"):
-  // shows the channel name. Signed out, the page on screen is the public landing whatever `page`
+  // "<object> · <module> · Siftlode". The object is the open view's own heading (a channel, a Plex
+  // title, a playlist — `PageHeading` reports it), so a channel opened from a link is named the same
+  // as one opened in the app. Signed out, the page on screen is the public landing whatever `page`
   // says — the tab read "What should I watch?" over the sign-in form (prod UAT 2026-09-19).
   const signedIn = useMe() != null;
+  const objectTitle = useDocumentObjectTitle();
   useEffect(() => {
-    const brand = "Siftlode";
+    const parts = signedIn ? [objectTitle, t(pageTitleKey(page))] : [];
-    const label = !signedIn
+    document.title = [...parts.filter(Boolean), "Siftlode"].join(" · ");
-      ? null
+  }, [signedIn, page, objectTitle, i18n.language, t]);
-      : channelView
-        ? channelView.name || t("header.channelManager")
-        : page === "feed"
-          ? null
-          : t(pageTitleKey(page));
-    document.title = label ? `${label} · ${brand}` : brand;
-  }, [signedIn, page, channelView, i18n.language, t]);
 
   // The page this tab LOADED on. Frozen, because the stamp below belongs to the initial history
   // entry: every later page change writes its own entry through setPage.

frontend/src/components/PlayerModal.dom.test.tsx

@@ -443,3 +443,28 @@ describe("PlayerModal — the side arrows", () => {
     expect(arrow.parentElement!.className).toMatch(/sm:px-14/);
   });
 });
+
+// E31 S1: at 133% zoom (a 685px window) a full-width card ran 20px past the bottom and cut its channel
+// row. The card's width is capped from the window height less what sits under the video, measured.
+describe("PlayerModal — fits the window's height", () => {
+  it("caps the card's width by the chrome measured under the video", () => {
+    vi.spyOn(api, "videoDetail").mockReturnValue(new Promise(() => {}));
+    vi.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockImplementation(function (
+      this: HTMLElement,
+    ) {
+      return this.classList.contains("player-stage") ? 470 : 0;
+    });
+    vi.spyOn(HTMLElement.prototype, "scrollHeight", "get").mockImplementation(function (
+      this: HTMLElement,
+    ) {
+      return this.querySelector(":scope > .player-stage") ? 630 : 0;
+    });
+    const A = vid("A", 0);
+    const B = vid("B", 0);
+    renderModal(
+      <PlayerModal video={A} queue={[A, B]} startIndex={0} onClose={() => {}} onState={() => {}} />,
+    );
+    const row = document.querySelector<HTMLElement>(".player-stage")!.parentElement!.parentElement!;
+    expect(row.style.maxWidth).toBe("min(63rem, calc((100dvh - 3rem - 160px) * 16 / 9 + 7rem))");
+  });
+});

frontend/src/components/PlayerModal.tsx

@@ -1,4 +1,12 @@
-import { useCallback, useEffect, useEffectEvent, useId, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useEffectEvent,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
 import { createPortal } from "react-dom";
 import { useNavigationActions } from "./navigationContext";
@@ -181,6 +189,25 @@ export default function PlayerModal({
   // useYtNativeControls, useYtBigView) where a fresh identity each render would spread into their
   // dep lists too.
   const focusModal = useCallback(() => cardRef.current?.focus(), []);
+  // The card fits the window, video AND what sits under it (the queue strip, title, channel row): the
+  // video is 16:9 at the card's width, so on a short window (133% zoom on a 1080p screen: 685px) a
+  // full-width card ran past the bottom and cut its channel row (E31 S1). `below` is that chrome's
+  // height, measured (it wraps with the title and the text size), and caps the card's width below.
+  const [below, setBelow] = useState(0);
+  useLayoutEffect(() => {
+    const card = cardRef.current;
+    const stage = stageRef.current;
+    if (!card || !stage) return;
+    const measure = () => {
+      // A maximised stage is fixed to the viewport, out of the card's flow: keep the last value.
+      if (getComputedStyle(stage).position === "fixed") return;
+      setBelow(card.scrollHeight - stage.offsetHeight);
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    for (const child of card.children) ro.observe(child);
+    return () => ro.disconnect();
+  }, []);
   // The dialog contract every other `aria-modal` shell shares (ui/dialogFocus): the focus goes back
   // to whatever opened the player, and the page lock is the one counted lock. It opens focused on the
   // CARD, not its first button, so Space/F/arrows reach the shortcuts. Until E11 this was the one
@@ -579,7 +606,14 @@ export default function PlayerModal({
           it and a portrait tablet lost it). stopPropagation so a click steps instead of closing.
           Hidden on narrow screens where there's no room beside the card. */}
       <div
-        className={`relative flex w-full max-h-full ${hasQueue ? "max-w-[63rem] sm:px-14" : "max-w-4xl"}`}
+        className={`relative flex w-full max-h-full ${hasQueue ? "sm:px-14" : ""}`}
+        // The design width (63rem with the side strips, else 56rem), narrowed so the 16:9 video plus the
+        // chrome under it fits the window's height less the backdrop's padding (`p-6` = 3rem).
+        style={{
+          maxWidth: `min(${hasQueue ? "63rem" : "56rem"}, calc((100dvh - 3rem - ${below}px) * 16 / 9${
+            hasQueue ? " + 7rem" : ""
+          }))`,
+        }}
       >
         {hasQueue && (
           <Pressable

frontend/src/components/Playlists.tsx

@@ -63,6 +63,7 @@ import { CheckRow } from "./ui/NativeControls";
 import { useReturnFocus } from "./ui/useReturnFocus";
 import { MoreButton } from "./ui/MoreButton";
 import { HiddenFilterCue } from "./ui/HiddenFilterCue";
+import { PageHeading } from "./ui/Headings";
 import { useCopyItems } from "./copyItems";
 
 // The playlist detail is a HYBRID table (E4 S4): real sortable/filterable column headers over a
@@ -875,7 +876,9 @@ export default function Playlists() {
                       aria-label={t("playlists.rename")}
                     />
                   ) : (
-                    <h2 className="text-lg font-semibold truncate">{plName(detail)}</h2>
+                    <PageHeading className="text-lg font-semibold truncate">
+                      {plName(detail)}
+                    </PageHeading>
                   )}
                   <div className="ml-auto flex gap-1.5 items-center shrink-0">
                     {linked && detail.dirty && (

frontend/src/components/PlexCollectionView.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { vocab } from "../lib/vocab";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Play, Shuffle, Pencil, Trash2, Plus, X, Lock, Check, Search } from "lucide-react";
 import { qk } from "../lib/queryKeys";
@@ -262,7 +263,7 @@ export default function PlexCollectionView({
   const meta = [
     d?.year_min != null &&
       (d.year_max && d.year_max !== d.year_min ? `${d.year_min} — ${d.year_max}` : `${d.year_min}`),
-    d?.content_rating,
+    d?.content_rating && vocab(t, "certificate", d.content_rating),
     d && t("plex.browse.items", { count: d.child_count ?? items.length }),
     formatRuntime(d?.total_runtime_s, lang),
   ].filter(Boolean) as string[];

frontend/src/components/PlexInfo.dom.test.tsx

@@ -15,8 +15,13 @@ vi.mock("react-i18next", async (importOriginal) => {
     ...actual,
     useTranslation: () => ({
       i18n: { language: "en" },
+      // A certificate code ("R") is no catalog word: it falls back to itself, as in the real catalog.
       t: (key: string, opts?: Record<string, unknown>) =>
-        opts?.name ? `${key}:${opts.name}` : key,
+        opts?.name
+          ? `${key}:${opts.name}`
+          : key.startsWith("vocab.certificate.") && typeof opts?.defaultValue === "string"
+            ? opts.defaultValue
+            : key,
     }),
   };
 });

frontend/src/components/PlexInfo.tsx

@@ -187,7 +187,7 @@ function FactsPanel({
       label: t("plex.info.facts.cert"),
       node: (
         <Filterable tag onClick={onFilter ? () => onFilter({ contentRatings: [cert] }) : undefined}>
-          {cert}
+          {vocab(t, "certificate", cert)}
         </Filterable>
       ),
     });
@@ -589,7 +589,7 @@ export default function PlexInfo({
                         : undefined
                     }
                   >
-                    {detail.content_rating}
+                    {vocab(t, "certificate", detail.content_rating)}
                   </Filterable>
                 )}
                 {detail.duration_seconds ? (

frontend/src/components/PlexSidebar.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { qk } from "../lib/queryKeys";
 import { usePlexCollectionTitles } from "../lib/usePlexCollectionTitles";
 import { useTranslation } from "react-i18next";
+import { vocab } from "../lib/vocab";
 import { plexLang } from "../i18n";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { ListMusic, Plus, SlidersHorizontal } from "lucide-react";
@@ -247,7 +248,10 @@ export default function PlexSidebar({ layout, setLayout, collapsed, onToggleColl
             body: (
               <Combobox
                 label={t("plex.filter.contentRating")}
-                options={facets.content_ratings}
+                options={facets.content_ratings.map((o) => ({
+                  ...o,
+                  label: vocab(t, "certificate", o.value),
+                }))}
                 selected={filters.contentRatings}
                 onChange={(next) => patch({ contentRatings: next })}
               />

frontend/src/components/plexViews.tsx

@@ -583,7 +583,7 @@ export function PlexShowView({
                       : undefined
                   }
                 >
-                  {show.content_rating}
+                  {vocab(t, "certificate", show.content_rating)}
                 </Filterable>
               )}
               {show.season_count != null && (
@@ -838,7 +838,10 @@ export function PlexSeasonView({
             <Button variant="link-muted" selectable onClick={onBack} className="text-sm">
               {d.show.title}
             </Button>
-            <PageHeading className="text-2xl font-semibold leading-tight">
+            <PageHeading
+              className="text-2xl font-semibold leading-tight"
+              tabTitle={`${d.show.title} · ${seasonTitle(se, t)}`}
+            >
               {seasonTitle(se, t)}
             </PageHeading>
             <p className="text-sm text-muted mt-1">

frontend/src/components/ui/Headings.tsx

@@ -1,4 +1,5 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { type ComponentPropsWithoutRef, type ReactNode, useRef } from "react";
+import { useNameTabAfter } from "../../lib/documentTitle";
 import { useOwnPageHeading } from "./pageHeading";
 
 // The page's heading outline (B4, UX-15): one `h1` per page, then a heading per section. A screen
@@ -6,10 +7,16 @@ import { useOwnPageHeading } from "./pageHeading";
 // structure from exactly the people who navigate by it.
 
 /** A view's own visible title (a channel, a Plex show, a playlist): the page's `h1`, in place of the
- *  shell's hidden page name. */
+ *  shell's hidden page name, and the object the browser tab names (`lib/documentTitle`). `tabTitle`
-export function PageHeading(props: ComponentPropsWithoutRef<"h1">) {
+ *  only when the heading alone does not say what it is (a season: "Season 1" → "Voyager · Season 1"). */
+export function PageHeading({
+  tabTitle,
+  ...props
+}: ComponentPropsWithoutRef<"h1"> & { tabTitle?: string }) {
   useOwnPageHeading();
-  return <h1 {...props} />;
+  const ref = useRef<HTMLHeadingElement>(null);
+  useNameTabAfter(ref, tabTitle);
+  return <h1 ref={ref} {...props} />;
 }
 
 /** A section's caption: the small uppercase muted label, as a heading. `level` 3 inside a dialog or

frontend/src/components/usePlexActiveFilters.dom.test.tsx

@@ -23,6 +23,7 @@ const plexState = {
   filters: {
     ...EMPTY_PLEX_FILTERS,
     genres: ["Action"],
+    contentRatings: ["Not Rated"],
     // "A" was picked in the sidebar (its title came along); "B" arrived from a shared LINK, which
     // carries ids only — the case that used to render a raw rating_key.
     collections: ["A", "B"],
@@ -64,6 +65,13 @@ describe("usePlexActiveFilters", () => {
     expect(result.current.every((c) => !c.key.startsWith("sort"))).toBe(true);
   });
 
+  // E31 S1: the chip read Plex's English word ("Not Rated") under a Hungarian UI.
+  it("names a certificate chip through the vocabulary, keeping Plex's value as the key", () => {
+    const { result } = renderHook(() => usePlexActiveFilters(), { wrapper });
+    const chip = result.current.find((c) => c.key === "contentRating:Not Rated");
+    expect(chip?.label).toBe("vocab.certificate.NotRated");
+  });
+
   it("labels a link-supplied collection with its resolved title, not the bare id", () => {
     // Seed the resolution the hook would fetch, so this asserts the WIRING (hook -> builder -> label)
     // rather than the network.

frontend/src/components/usePlexActiveFilters.ts

@@ -1,4 +1,5 @@
 import { useTranslation } from "react-i18next";
+import { vocabI18nKey } from "../lib/vocab";
 import { type ActiveFilter } from "../lib/useActiveFilters";
 import { EMPTY_PLEX_FILTERS, type PlexFilters } from "../lib/api";
 import { PLEX_SORT_FALLBACK } from "../lib/plexSort";
@@ -53,7 +54,9 @@ export function buildPlexActiveFilters(
   for (const r of filters.contentRatings) {
     out.push({
       key: `contentRating:${r}`,
-      label: r,
+      label: vocabI18nKey("certificate", r)
+        ? t(vocabI18nKey("certificate", r), { defaultValue: r })
+        : r,
       remove: () => patch({ contentRatings: filters.contentRatings.filter((x) => x !== r) }),
     });
   }

frontend/src/i18n/locales/en/vocab.json

@@ -165,5 +165,11 @@
     "mono": "Mono",
     "audioN": "Audio {{n}}",
     "subtitleN": "Subtitle {{n}}"
+  },
+  "certificate": {
+    "NotRated": "Not Rated",
+    "Unrated": "Unrated",
+    "Approved": "Approved",
+    "Passed": "Passed"
   }
 }

frontend/src/i18n/locales/hu/vocab.json

@@ -165,5 +165,11 @@
     "mono": "monó",
     "audioN": "{{n}}. hangsáv",
     "subtitleN": "{{n}}. felirat"
+  },
+  "certificate": {
+    "NotRated": "Nincs besorolva",
+    "Unrated": "Besorolatlan",
+    "Approved": "Jóváhagyva",
+    "Passed": "Engedélyezve"
   }
 }

frontend/src/lib/documentTitle.ts

@@ -0,0 +1,58 @@
+import { type RefObject, useLayoutEffect, useRef, useSyncExternalStore } from "react";
+
+// The browser tab names the place AND the object in it (DESIGN § Composition and the reader, "Where am
+// I"): "Nicolas Cage · Plex · Siftlode". The place is the module (NavigationProvider); the object is the
+// view's own visible title, so it is read from the element that already shows it (`PageHeading`), not
+// handed over a second time by every view — a view with a title on screen names the tab by having it.
+// The latest mounted title wins (a view stacked over another); an empty one (still loading) is skipped.
+
+type Entry = { text: string };
+let entries: Entry[] = [];
+const subs = new Set<() => void>();
+
+function emit(): void {
+  for (const cb of subs) cb();
+}
+
+function snapshot(): string | null {
+  let found: string | null = null;
+  for (const e of entries) if (e.text) found = e.text;
+  return found;
+}
+
+/** The object the screen shows, for the tab title; null when the view has no title of its own. */
+export function useDocumentObjectTitle(): string | null {
+  return useSyncExternalStore(
+    (cb) => {
+      subs.add(cb);
+      return () => subs.delete(cb);
+    },
+    snapshot,
+    snapshot,
+  );
+}
+
+/** Names the tab after what `el` shows (its text), or after `override` when given (a season page's
+ *  heading is "Season 1"; the tab wants the show too). Re-read after every render, so a title that
+ *  arrives with its data, or changes in place, follows. */
+export function useNameTabAfter(el: RefObject<HTMLElement | null>, override?: string): void {
+  const entry = useRef<Entry | null>(null);
+  useLayoutEffect(() => {
+    const e: Entry = { text: "" };
+    entry.current = e;
+    entries = [...entries, e];
+    return () => {
+      entries = entries.filter((x) => x !== e);
+      entry.current = null;
+      emit();
+    };
+  }, []);
+  // No dependency list: the text is the DOM's, read after each render of the heading.
+  useLayoutEffect(() => {
+    const e = entry.current;
+    const text = (override ?? el.current?.textContent ?? "").replace(/\s+/g, " ").trim();
+    if (!e || e.text === text) return;
+    e.text = text;
+    emit();
+  });
+}

frontend/src/lib/vocab.dom.test.ts

@@ -18,6 +18,10 @@ describe("a vocabulary word", () => {
     ["autoTag", "Hungarian", "Magyar"],
     ["profile", "Video only (MP4)", "Csak videó (MP4)"],
     ["topic", "Lifestyle_(sociology)", "Életmód"],
+    // E31 S1: Plex's certificate words came through in English on the info badge and the filter.
+    ["certificate", "Not Rated", "Nincs besorolva"],
+    ["certificate", "Approved", "Jóváhagyva"],
+    ["certificate", "Passed", "Engedélyezve"],
   ] as const)("%s %j reads %j in Hungarian", (group, word, shown) => {
     expect(vocab(hu, group, word)).toBe(shown);
   });
@@ -27,6 +31,11 @@ describe("a vocabulary word", () => {
     expect(vocab(en, "topic", "Pop_music", "Pop music")).toBe("Pop music");
   });
 
+  it("a certificate code reads the same in every language", () => {
+    expect(vocab(hu, "certificate", "PG-13")).toBe("PG-13");
+    expect(vocab(hu, "certificate", "TV-MA")).toBe("TV-MA");
+  });
+
   it("an unknown word is shown, not hidden or keyed", () => {
     expect(vocab(hu, "crewJob", "Gaffer")).toBe("Gaffer");
     expect(vocab(hu, "topic", "Knitting_(craft)", "Knitting (craft)")).toBe("Knitting (craft)");

frontend/src/lib/vocab.ts

@@ -2,23 +2,31 @@ import type { TFunction } from "i18next";
 import type { PlexTrackNaming } from "./api";
 
 // E30: the closed vocabularies the server stores in ENGLISH — a TMDB crew job or department, an
-// auto-tag, a built-in download profile, a YouTube topic — named in the reader's language. The data
+// auto-tag, a built-in download profile, a YouTube topic, a Plex certificate's word ("Not Rated"; a
+// code such as "PG-13" reads the same everywhere and falls through as stored) — named in the reader's language. The data
 // stays language-neutral (it is filtered and matched on); only the NAME is translated, here, from the
 // `vocab` locale area. A word the area does not hold shows as stored, so a new server value is never
 // hidden — and the backend's own lists are held key-for-key to the area by backendIds.contract.
 
-type Group = "crewJob" | "department" | "autoTag" | "profile" | "topic";
+type Group = "crewJob" | "department" | "autoTag" | "profile" | "topic" | "certificate";
 
 /** A vocabulary word's key: its letters and digits ("Health & Fitness" → "HealthFitness"). */
 export function vocabKey(word: string): string {
   return word.replace(/[^A-Za-z0-9]/g, "");
 }
 
+/** The i18n key of one word of `group` ("" when the word has no letters or digits) — for a caller
+ *  whose `t` is not i18next's own (a pure builder handed a narrow `t`). */
+export function vocabI18nKey(group: Group, word: string): string {
+  const key = vocabKey(word);
+  return key ? `vocab.${group}.${key}` : "";
+}
+
 /** One stored English word of `group`, in the reader's language (`fallback`, by default the word
  *  itself, when the area does not hold it). */
 export function vocab(t: TFunction, group: Group, word: string, fallback = word): string {
-  const key = vocabKey(word);
+  const key = vocabI18nKey(group, word);
-  return key ? t(`vocab.${group}.${key}`, { defaultValue: fallback }) : fallback;
+  return key ? t(key, { defaultValue: fallback }) : fallback;
 }
 
 /** A download profile's name: a built-in one is seeded under an English name and named here; a user's