feat(plex): move the Discover/Browse toggle into the header

The Discover ⟷ Browse switch now sits in the header next to the library-scope
pill (All / Movies / Shows), instead of on the chip row / atop the Discover
surface.

It's driven through a small one-way PlexViewBridge: PlexBrowse still OWNS the
sub-view (useHistorySubview) and publishes its top-level view + opener to the
bridge; the always-mounted Header reads it to render PlexViewToggle. A global
sub-view provider was deliberately avoided — PlexBrowse's hook remounts on every
plex entry and re-seeds from history (a page switch clears ?v + drops _sub), so
each entry starts at the Discover root; lifting it out would let the view go
stale across navigation. The toggle hides on deeper views (show/info/person/…)
and on non-plex pages (bridge cleared on unmount). sortView is just SortControl
now; the grid toolbar no longer carries the toggle.

Verified: toggle in the header, switches discover⟷grid, hides on info + on Feed,
and Feed→Plex resets to Discover (no stale view); no console errors.
This commit is contained in:
2026-08-22 18:02:55 +02:00
parent 9798e506cf
commit f85dc12819
5 changed files with 99 additions and 41 deletions
+26 -31
View File
@@ -25,7 +25,6 @@ import { useHistorySubview } from "../lib/history";
import { PLEX_SUB_URL, type Sub } from "./plexSubUrl";
import { toggleWatchState } from "../lib/plexWatch";
import SortControl from "./SortControl";
import SegmentedToggle from "./SegmentedToggle";
import FilterSelect from "./FilterSelect";
import PlexDiscover from "./PlexDiscover";
import { PageToolbar } from "./PageShell";
@@ -34,6 +33,7 @@ import ItemCount from "./ItemCount";
import { StateMessage } from "./QueryState";
import { usePlexActiveFilters, usePlexClearFilters } from "./usePlexActiveFilters";
import { usePlex, usePlexActions } from "./PlexProvider";
import { usePublishPlexView } from "./PlexViewBridge";
import { EpisodeCard, PlexPosterCard } from "./plexCards";
import { PlexInfoView, PlexPersonView, PlexSeasonView, PlexShowView } from "./plexViews";
@@ -82,6 +82,20 @@ export default function PlexBrowse() {
// or an added filter is a browse intent → flip to the grid (below); an explicit toggle returns.
const sub = useHistorySubview<Sub>({ kind: "discover" }, PLEX_SUB_URL);
// Publish the top-level view (discover vs grid) + opener to the header's Discover/Browse toggle via
// the bridge; clear it on unmount so the toggle disappears when you leave the plex page. Keyed on the
// view KIND (open is behaviourally stable — it takes the next view as an arg, closing over nothing).
const publishView = usePublishPlexView();
useLayoutEffect(() => {
publishView({
isDiscover: sub.view.kind === "discover",
toggleable: sub.view.kind === "discover" || sub.view.kind === "grid",
open: sub.open,
});
return () => publishView(null);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [sub.view.kind]);
// Sidebar asked to open a playlist → push it as a subview (browser Back returns to the grid), then
// clear the signal so it doesn't re-open.
useEffect(() => {
@@ -366,42 +380,23 @@ export default function PlexBrowse() {
);
}
// Discover ⟷ Browse switch, shown on both surfaces so either can return to the other.
const viewToggle = (
<SegmentedToggle
size="md"
ariaLabel={t("plex.view.label")}
options={[
{ value: "discover", label: t("plex.discover.tab") },
{ value: "grid", label: t("plex.view.browse") },
]}
value={sub.view.kind === "discover" ? "discover" : "grid"}
onChange={(v) => sub.open(v === "discover" ? { kind: "discover" } : { kind: "grid" })}
/>
);
// Sort + the Discover/Browse toggle are tightly bound to the grid below, so on the grid view they
// live pinned to the right of the applied-filter chip row (directly above the cards), not on their
// own toolbar line — the same idiom as the Feed's `sortView`.
// Sort is tightly bound to the grid below, so on the grid view it lives pinned to the right of the
// applied-filter chip row (directly above the cards), not on its own toolbar line — the same idiom as
// the Feed's `sortView`. The Discover/Browse toggle moved up to the header (next to the scope pill).
const sortView = (
<>
<SortControl
options={sortOptions}
sort={sortState}
onChange={(next) => setSort(next ?? PLEX_SORT_FALLBACK)}
label={t("plex.filter.sort")}
ascLabel={t("plex.filter.dir.asc")}
descLabel={t("plex.filter.dir.desc")}
/>
<span className="mx-0.5 h-5 w-px bg-border" aria-hidden="true" />
{viewToggle}
</>
<SortControl
options={sortOptions}
sort={sortState}
onChange={(next) => setSort(next ?? PLEX_SORT_FALLBACK)}
label={t("plex.filter.sort")}
ascLabel={t("plex.filter.dir.asc")}
descLabel={t("plex.filter.dir.desc")}
/>
);
if (sub.view.kind === "discover") {
return (
<div className="p-4 max-w-[1600px] mx-auto">
<div className="mb-4 flex items-center">{viewToggle}</div>
<PlexDiscover
scope={scope}
onOpenCard={onCard}