refactor(frontend): each page fills the floating header itself; the header knows no page

The header used to pick its pills by `page === …` and import five module controls, and Plex's Discover/Browse toggle needed a context bridge to reach the sub-view that lives in PlexBrowse. Now the header is an empty band: PageShell hands its root box out as a slot, a page portals its own pills into it (PageHeader), and the palette's Jump-to pill shows where no page does (PageHeaderDefault, rendered inside the page's Suspense so a loading page shows no stand-in). Plex's toggles take the sub-view as a prop; PlexViewBridge and its context are gone, and with them the header's five layer suppressions. No visible change: every header pill's box measured identical against the previous build on eight pages, in Hungarian and English.
2026-10-23 00:23:38 +02:00
parent 0b24f2d8fa
commit 4ef963b005
36 changed files with 530 additions and 316 deletions
@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+//
+// The live-search button's tooltip says what a search costs under the search source the instance
+// actually runs. It used to say "uses shared API quota" always, while the default source (the
+// website's own endpoint) spends none — so the owner avoided a free search for months.
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import type { Me } from "../../lib/api";
+
+vi.mock("react-i18next", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-i18next")>()),
+  useTranslation: () => ({ t: (k: string) => k, i18n: { language: "en" } }),
+}));
+let me = {} as Me;
+vi.mock("../../lib/useMe", () => ({ useMe: () => me }));
+vi.mock("../../features/navigation/navigationContext", () => ({
+  useNavigationActions: () => ({ enterYtSearch: vi.fn() }),
+}));
+vi.mock("./feedFiltersContext", () => ({
+  useFeedFilters: () => ({ q: "cats", sort: "newest" }),
+  useFeedFiltersActions: () => ({ setFilters: vi.fn() }),
+}));
+vi.mock("../channels", () => ({
+  useChannelsActions: () => ({ goToFullHistory: vi.fn() }),
+  SyncStatus: () => null,
+}));
+vi.mock("./FeedScopeToggle", () => ({ default: () => null }));
+vi.mock("../../components/ui/PageScroller", () => ({
+  default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+import FeedHeader from "./FeedHeader";
+import PageShell from "../../components/ui/PageShell";
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+function tipFor(source: Me["search_source"]): string | null {
+  vi.stubGlobal(
+    "ResizeObserver",
+    class {
+      observe() {}
+      disconnect() {}
+    },
+  );
+  me = { search_source: source, role: "user" } as Me;
+  render(
+    <PageShell header={<div />}>
+      <FeedHeader />
+    </PageShell>,
+  );
+  return screen.getByRole("button", { name: /header\.searchYoutube$/ }).getAttribute("title");
+}
+
+describe("the live-search tooltip", () => {
+  it("does not claim a quota cost under the free website source", () => {
+    expect(tipFor("scrape")).toBe("header.searchYoutubeTip");
+  });
+
+  it("names the quota cost when the instance searches through the official API", () => {
+    expect(tipFor("api")).toBe("header.searchYoutubeTipApi");
+  });
+});