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.

frontend/src/modules/feed/FeedHeader.searchTip.dom.test.tsx

@@ -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");
+  });
+});

frontend/src/modules/feed/FeedHeader.tsx

@@ -0,0 +1,51 @@
+import { useTranslation } from "react-i18next";
+import { YouTubeIcon } from "../../lib/brandIcons";
+import { useMe } from "../../lib/useMe";
+import { PageHeader } from "../../components/ui/PageShell";
+import SearchBar from "../../features/header/SearchBar";
+import { useNavigationActions } from "../../features/navigation/navigationContext";
+import { SyncStatus, useChannelsActions } from "../channels";
+import { useFeedFilters, useFeedFiltersActions } from "./feedFiltersContext";
+import FeedScopeToggle from "./FeedScopeToggle";
+
+// The feed's pills in the floating header: the search box (whose Go runs a live YouTube search for
+// the term), the Mine/Library scope, and the per-user sync chip.
+export default function FeedHeader() {
+  const { t } = useTranslation();
+  const me = useMe();
+  const filters = useFeedFilters();
+  const { setFilters } = useFeedFiltersActions();
+  const { enterYtSearch } = useNavigationActions();
+  const { goToFullHistory } = useChannelsActions();
+  const trimmed = filters.q.trim();
+  return (
+    <PageHeader>
+      <SearchBar
+        value={filters.q}
+        placeholder={t("header.searchPlaceholder")}
+        onChange={(q) => {
+          // When a search first appears, rank the feed by relevance — set atomically with the
+          // query (race-free vs. per-keystroke updates). Only overrides the default "newest"
+          // sort; a custom sort the user chose is left alone. Cleared in Feed.
+          const startSearch = !filters.q.trim() && !!q.trim() && filters.sort === "newest";
+          setFilters({ ...filters, q, ...(startSearch ? { sort: "relevance" } : {}) });
+        }}
+        onGo={() => enterYtSearch(trimmed)}
+        goLabel={t("header.searchYoutube")}
+        goTitle={t(
+          me.search_source === "api" ? "header.searchYoutubeTipApi" : "header.searchYoutubeTip",
+        )}
+        goIcon={<YouTubeIcon className="w-4 h-4" />}
+        goDisabled={!trimmed}
+      />
+      {/* Mine/Library scope sits right of the search box — relocated here from the filter sidebar so
+          the primary "what am I browsing" control is always in reach (mirrors Plex's scope toggle). */}
+      <FeedScopeToggle />
+      {/* Per-user sync status — it used to cost the nav rail a whole block. It sits with the other
+          pills rather than pinned to the far right: on a wide window that just strands it. Only on
+          the two pages it says anything about: the feed those subscriptions fill, and the manager
+          where you curate them. */}
+      <SyncStatus isAdmin={me.role === "admin"} onGoToFullHistory={goToFullHistory} />
+    </PageHeader>
+  );
+}

frontend/src/modules/feed/modulePages.tsx

@@ -5,13 +5,15 @@ import { useFeedView, useFeedViewActions } from "./feedViewContext";
 import { useNavigation, useNavigationActions } from "../../features/navigation/navigationContext";
 import PersonalViewsModal from "../../features/filters/PersonalViewsModal";
 import { useSavedViews } from "../../features/filters/savedViewsContext";
+import FeedHeader from "./FeedHeader";
 
 // The two module-registry pages that need per-render wiring (see moduleRegistry), split out of it so
 // that file exports only data and this one only components (Fast Refresh). Their lazy chunks are
 // exported alongside so the registry can attach each chunk's preload to the wrapper that renders it.
 export const Feed = lazyWithPreload(() => import("./Feed"));
 
-// The GLOBAL feed page: wires <Feed> to the app-wide feed filters / view / live-search. (The channel
+// The GLOBAL feed page: wires <Feed> to the app-wide feed filters / view / live-search, and fills the
+// header (the channel page's feed has no header). (The channel
 // page renders <Feed> itself with its own channel-scoped filters, so those two never share state.)
 export function FeedPage() {
   const me = useMe();
@@ -27,6 +29,7 @@ export function FeedPage() {
   const { modalOpen } = useSavedViews();
   return (
     <>
+      <FeedHeader />
       <Feed
         filters={filters}
         setFilters={setFilters}