feat(plex): add Playlist/Collection browse modes to the header pill

The header library-scope pill gains two entry points — Playlist and Collection —
next to All/Movies/Shows, a second way into each area (the rail filter is the
other). Picking Playlist shows a grid of the user's playlists (a tile opens that
playlist's view); Collection shows a searchable grid of collections (a tile
filters the title grid by that collection). Pure front-end — reuses the existing
plexPlaylists / plexCollections(union) list endpoints.

Two new top-level sub-views (`playlists` / `collections`, bookmarkable as
?v=playlists / ?v=collections) rendered by PlexBrowse via the new plexBrowseLists
surfaces (hue-tiled like the Discover genre tiles). The PlexViewBridge now carries
the view `kind`; PlexScopeToggle is a 5-way that derives its active segment from
it (browse-mode when in one, else scope) and drives the two views through the
bridge — picking a scope from a browse mode returns to the title grid. The
Discover/Browse toggle hides in these modes; Backspace + the search→grid flip
cover them.

Tests: PlexScopeToggle (5-way + browse-mode drive/active), plexSubUrl round-trip
for the two new views. Gate: tsc/lint/knip/prettier + 402 vitest.

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

@@ -1,9 +1,10 @@
 // @vitest-environment jsdom
 //
-// Contract of the header library-scope toggle (S3 relocation): it renders the three scopes, marks
-// the current one, and writes the picked scope back to the provider. i18n is key-passthrough and the
-// provider is mocked so the test drives scope directly; SegmentedToggle is a plain button group (no
-// floating-ui), so no observer stubs are needed.
+// Contract of the header library-scope pill (S3 relocation + Piece 2 browse modes): it renders the
+// three library scopes PLUS the Playlist/Collection browse-mode entries, marks the active one, writes a
+// picked scope to the provider, and drives the playlists/collections views through the PlexViewBridge.
+// i18n is key-passthrough and both the provider and the bridge are mocked; SegmentedToggle is a plain
+// button group (no floating-ui), so no observer stubs are needed.
 import { describe, it, expect, afterEach, beforeEach, vi } from "vitest";
 import { render, screen, fireEvent, cleanup } from "@testing-library/react";
 
@@ -19,32 +20,70 @@ vi.mock("./PlexProvider", () => ({
   usePlexActions: () => ({ setScope }),
 }));
 
+// The bridge: a controllable current view kind + an open spy.
+const controls = { kind: "discover" as string, open: vi.fn() };
+vi.mock("./PlexViewBridge", () => ({
+  usePlexViewControls: () => controls,
+}));
+
 import PlexScopeToggle from "./PlexScopeToggle";
 
 beforeEach(() => {
   plexState.scope = "both";
+  controls.kind = "discover";
   setScope.mockReset();
+  controls.open.mockReset();
 });
 afterEach(cleanup);
 
+const buttons = () => [
+  ...screen.getByRole("group", { name: "plex.filter.scope" }).querySelectorAll("button"),
+];
+const labels = () => buttons().map((b) => b.textContent);
+const pressed = () =>
+  buttons()
+    .filter((b) => b.getAttribute("aria-pressed") === "true")
+    .map((b) => b.textContent);
+
 describe("PlexScopeToggle", () => {
-  it("renders the three library scopes, current one pressed", () => {
+  it("renders the three scopes plus the two browse modes, the current scope pressed", () => {
     plexState.scope = "movie";
     render(<PlexScopeToggle />);
-    const group = screen.getByRole("group", { name: "plex.filter.scope" });
-    const btns = [...group.querySelectorAll("button")];
-    expect(btns.map((b) => b.textContent)).toEqual([
+    expect(labels()).toEqual([
       "plex.filter.scopeOpt.both",
       "plex.filter.scopeOpt.movie",
       "plex.filter.scopeOpt.show",
+      "plex.filter.scopeOpt.playlists",
+      "plex.filter.scopeOpt.collections",
     ]);
-    const pressed = btns.filter((b) => b.getAttribute("aria-pressed") === "true");
-    expect(pressed.map((b) => b.textContent)).toEqual(["plex.filter.scopeOpt.movie"]);
+    expect(pressed()).toEqual(["plex.filter.scopeOpt.movie"]);
   });
 
-  it("writes the picked scope back to the provider", () => {
+  it("writes a picked scope back to the provider (no view switch when already on a title view)", () => {
     render(<PlexScopeToggle />);
     fireEvent.click(screen.getByRole("button", { name: "plex.filter.scopeOpt.show" }));
     expect(setScope).toHaveBeenCalledWith("show");
+    expect(controls.open).not.toHaveBeenCalled();
+  });
+
+  it("opens the playlists view (not a scope change) for the Playlist mode", () => {
+    render(<PlexScopeToggle />);
+    fireEvent.click(screen.getByRole("button", { name: "plex.filter.scopeOpt.playlists" }));
+    expect(controls.open).toHaveBeenCalledWith({ kind: "playlists" });
+    expect(setScope).not.toHaveBeenCalled();
+  });
+
+  it("marks the Collection mode active when the current view is collections", () => {
+    controls.kind = "collections";
+    render(<PlexScopeToggle />);
+    expect(pressed()).toEqual(["plex.filter.scopeOpt.collections"]);
+  });
+
+  it("returns to the title grid when a scope is picked from a browse mode", () => {
+    controls.kind = "playlists";
+    render(<PlexScopeToggle />);
+    fireEvent.click(screen.getByRole("button", { name: "plex.filter.scopeOpt.movie" }));
+    expect(setScope).toHaveBeenCalledWith("movie");
+    expect(controls.open).toHaveBeenCalledWith({ kind: "grid" });
   });
 });