From 1d6c5f051eafaf39ca4065d892fab5d4aed1a925 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sun, 16 Aug 2026 19:02:02 +0200
Subject: [PATCH] =?UTF-8?q?fix(plex):=20address=20S3=20review=20nits=20?=
 =?UTF-8?q?=E2=80=94=20tests=20+=20narrow-header=20wrap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add PlexScopeToggle.dom.test.tsx (renders the three scopes, current one
  pressed, click writes scope back to the provider) and
  usePlexActiveFilters.dom.test.tsx (emits filter + watch-state chips but never
  a sort chip, even with a non-default sort active) — the S3 relocation was
  untested.
- Narrow-width header: make the header row flex-wrap so the scope toggle drops
  to a second line instead of crowding the flex-1 search box to zero width, and
  let the field-scope pill shrink/truncate. Desktop stays a single line
  (verified: 1280px header unchanged, search 237px, no wrap).

The removed one-click sort-reset chip is intended (sort is an always-visible
control now, like the Feed) — no change. FE suite 174 green; typecheck + eslint
clean.
---
 frontend/src/components/Header.tsx            |  2 +-
 .../components/PlexScopeToggle.dom.test.tsx   | 50 +++++++++++++++++++
 frontend/src/components/PlexSearchBox.tsx     |  4 +-
 .../usePlexActiveFilters.dom.test.tsx         | 43 ++++++++++++++++
 4 files changed, 96 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/PlexScopeToggle.dom.test.tsx
 create mode 100644 frontend/src/components/usePlexActiveFilters.dom.test.tsx

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index bfa6fbca..3d2498a1 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -94,7 +94,7 @@ export default function Header({
     // Absolutely positioned within the (relative) content column, so its left edge tracks the
     // actual left zone: it sits just inside the content, reclaiming the space when the nav rail is
     // slim and/or no filter sidebar is present — no hard-coded offset.
-    <div className="pointer-events-none absolute top-3 left-3 right-[10%] z-chrome flex items-center gap-3">
+    <div className="pointer-events-none absolute top-3 left-3 right-[10%] z-chrome flex flex-wrap items-center gap-x-3 gap-y-2">
       <ModuleName
         label={t(moduleLabelKey[page])}
         labels={moduleLabels}
diff --git a/frontend/src/components/PlexScopeToggle.dom.test.tsx b/frontend/src/components/PlexScopeToggle.dom.test.tsx
new file mode 100644
index 00000000..7ba75aec
--- /dev/null
+++ b/frontend/src/components/PlexScopeToggle.dom.test.tsx
@@ -0,0 +1,50 @@
+// @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.
+import { describe, it, expect, afterEach, beforeEach, vi } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+
+vi.mock("react-i18next", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-i18next")>();
+  return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
+});
+
+const plexState = { scope: "both" } as { scope: string };
+const setScope = vi.fn();
+vi.mock("./PlexProvider", () => ({
+  usePlex: () => plexState,
+  usePlexActions: () => ({ setScope }),
+}));
+
+import PlexScopeToggle from "./PlexScopeToggle";
+
+beforeEach(() => {
+  plexState.scope = "both";
+  setScope.mockReset();
+});
+afterEach(cleanup);
+
+describe("PlexScopeToggle", () => {
+  it("renders the three library scopes, current one 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([
+      "plex.filter.scopeOpt.both",
+      "plex.filter.scopeOpt.movie",
+      "plex.filter.scopeOpt.show",
+    ]);
+    const pressed = btns.filter((b) => b.getAttribute("aria-pressed") === "true");
+    expect(pressed.map((b) => b.textContent)).toEqual(["plex.filter.scopeOpt.movie"]);
+  });
+
+  it("writes the picked scope back to the provider", () => {
+    render(<PlexScopeToggle />);
+    fireEvent.click(screen.getByRole("button", { name: "plex.filter.scopeOpt.show" }));
+    expect(setScope).toHaveBeenCalledWith("show");
+  });
+});
diff --git a/frontend/src/components/PlexSearchBox.tsx b/frontend/src/components/PlexSearchBox.tsx
index 69311b42..c6fc3e8f 100644
--- a/frontend/src/components/PlexSearchBox.tsx
+++ b/frontend/src/components/PlexSearchBox.tsx
@@ -117,10 +117,10 @@ export default function PlexSearchBox() {
       leading={
         <ActionMenu
           ariaLabel={t("plex.searchField.aria")}
-          className="shrink-0 inline-flex items-center gap-1 rounded-lg px-2 h-7 text-xs font-medium text-muted transition hover:text-fg hover:bg-border/50"
+          className="min-w-0 shrink inline-flex items-center gap-1 rounded-lg px-2 h-7 text-xs font-medium text-muted transition hover:text-fg hover:bg-border/50"
           trigger={
             <>
-              <span className="max-w-28 truncate">{pillLabel}</span>
+              <span className="min-w-0 max-w-28 truncate">{pillLabel}</span>
               <ChevronDown className="w-3 h-3 shrink-0" aria-hidden="true" />
             </>
           }
diff --git a/frontend/src/components/usePlexActiveFilters.dom.test.tsx b/frontend/src/components/usePlexActiveFilters.dom.test.tsx
new file mode 100644
index 00000000..d141f4bd
--- /dev/null
+++ b/frontend/src/components/usePlexActiveFilters.dom.test.tsx
@@ -0,0 +1,43 @@
+// @vitest-environment jsdom
+//
+// Guards the S3 behavior change: the active-filter chip row (usePlexActiveFilters) still emits chips
+// for the in-panel narrowings (expanded filters + watch-state) but NO LONGER emits a sort chip —
+// sort is an always-visible control above the grid now, like the Feed. i18n is key-passthrough and
+// the provider is mocked so the hook can be driven with a non-default sort present.
+import { describe, it, expect, vi } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { EMPTY_PLEX_FILTERS } from "../lib/api";
+
+vi.mock("react-i18next", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-i18next")>();
+  return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
+});
+
+const plexState = {
+  scope: "both",
+  show: "watched",
+  // A non-default sort is present in the shared state — the hook must IGNORE it (no sort chip).
+  sort: { key: "year", dir: "asc" },
+  filters: { ...EMPTY_PLEX_FILTERS, genres: ["Action"] },
+};
+const setShow = vi.fn();
+const setFilters = vi.fn();
+vi.mock("./PlexProvider", () => ({
+  usePlex: () => plexState,
+  usePlexActions: () => ({ setShow, setFilters }),
+}));
+
+import { usePlexActiveFilters } from "./usePlexActiveFilters";
+
+describe("usePlexActiveFilters", () => {
+  it("emits filter + watch-state chips but never a sort chip", () => {
+    const { result } = renderHook(() => usePlexActiveFilters());
+    const keys = result.current.map((c) => c.key);
+    // The in-panel narrowings still surface...
+    expect(keys).toContain("genre:Action");
+    expect(keys).toContain("show");
+    // ...but sort does not, even though a non-default sort is active in the shared state.
+    expect(keys).not.toContain("sort");
+    expect(result.current.every((c) => !c.key.startsWith("sort"))).toBe(true);
+  });
+});