refactor(frontend): the flat components/ folder moves into shell/, modules/<page>/ and features/<name>/

A pure move (git mv, history kept): 333 files leave components/, which now holds only the platform layer (ui/) and the legal pages. The shell is the frame (App, header, nav rail, palette, boot); each page lives in modules/<page>/ with its rail, store and tests; what several pages share sits in features/<name>/; the shared-link page is watch/. Domain-free helpers went straight to ui/ (ViewSwitcher, FilterRail, the confirm dialog, the language switcher, the copy rows). Every relative specifier was rewritten (imports, dynamic imports, vi.mock, new URL), and the contract tests that scan sources now scan the whole app source, not only components/ — each glob was counted before and after so none went green over fewer files. The locale-format rule matched `/src/components/` only, so the move would have taken ~300 files out from under its i18n-singleton check; it now covers every folder that holds components, with a test per folder.
2026-10-22 23:12:45 +02:00
parent fdf8076013
commit 63a0fecc8b
356 changed files with 2433 additions and 2332 deletions
@@ -0,0 +1,89 @@
+// @vitest-environment jsdom
+//
+// Contract of the header library-scope pill (scopes + 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";
+
+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("./plexContext", () => ({
+  usePlex: () => plexState,
+  usePlexActions: () => ({ setScope }),
+}));
+
+// The bridge: a controllable current view kind + an open spy.
+const controls = { kind: "discover" as string, open: vi.fn() };
+vi.mock("./plexViewContext", () => ({
+  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 scopes plus the two browse modes, the current scope pressed", () => {
+    plexState.scope = "movie";
+    render(<PlexScopeToggle />);
+    expect(labels()).toEqual([
+      "plex.filter.scopeOpt.both",
+      "plex.filter.scopeOpt.movie",
+      "plex.filter.scopeOpt.show",
+      "plex.filter.scopeOpt.playlists",
+      "plex.filter.scopeOpt.collections",
+    ]);
+    expect(pressed()).toEqual(["plex.filter.scopeOpt.movie"]);
+  });
+
+  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" });
+  });
+});