Files
siftlode/frontend/src/components/PlexViewToggle.tsx
T
peter c3d88d9b20 refactor: component files export only components; lint fails on a warning
The 43 react-refresh/only-export-components warnings the gate let through meant an edit to a
provider (or AnchoredPopover, Toaster, plexDetailUi, …) could not be hot-swapped: Fast Refresh
reloads a module that also exports hooks or helpers.

- Each provider's contexts, the types its hooks return and the hooks themselves live in a sibling
  context module (navigationContext.ts, channelsContext.ts, …); the provider file keeps the
  component. loadAccountFilters moved next to the feed filters' defaults (feedFiltersInit.ts),
  following navigationInit/playlistsInit.
- Helpers that sat in component files have their own modules: welcomeMode, downloadTitle,
  plexPlayable, channelSync, ui/anchoredPopoverHooks, ui/pageToolbarSlot, ui/pagerContent,
  ui/toastLevels, ui/overlayOrder, ui/tableAlign, lib/plexDetail; the cells of the channel columns
  and the registry's page wrappers are components files of their own (channelCells, modulePages).
- usePersistedTab, an alias of useAccountPersistedState, is gone; its callers use the original.

npm run lint is now eslint --max-warnings 0, so a warning fails the gate like an error does.
2026-09-17 02:59:09 +02:00

31 lines
1.5 KiB
TypeScript

import { useTranslation } from "react-i18next";
import SegmentedToggle from "./ui/SegmentedToggle";
import { usePlexViewControls } from "./plexViewContext";
// The Discover ⟷ Browse switch, hosted in the header next to the library-scope pill (All/Movies/Shows).
// It reflects + drives PlexBrowse's top-level sub-view through the PlexViewBridge, and hides itself on
// the deeper views (a show/info/person page has no Discover/Browse choice).
export default function PlexViewToggle() {
const { t } = useTranslation();
const ctl = usePlexViewControls();
// Only the two title-browse views host the Discover/Browse choice; deeper views (show/info/person/…)
// and the playlists/collections browse surfaces hide it.
if (!ctl || (ctl.kind !== "discover" && ctl.kind !== "grid")) return null;
// The floating header wrapper is pointer-events-none (so clicks fall through its empty area to the
// content below); every interactive child must re-enable pointer events or it is click-dead — the
// sibling PlexScopeToggle does the same.
return (
<SegmentedToggle
size="md"
className="pointer-events-auto shrink-0"
ariaLabel={t("plex.view.label")}
options={[
{ value: "discover", label: t("plex.discover.tab") },
{ value: "grid", label: t("plex.view.browse") },
]}
value={ctl.kind === "discover" ? "discover" : "grid"}
onChange={(v) => ctl.open(v === "discover" ? { kind: "discover" } : { kind: "grid" })}
/>
);
}