feat(plex): port the filter bar to the YT-feed pattern
Bring the Plex module's filter surface in line with the feed's final shape:
- Flatten the rail: PlexSidebar passes `collapsible={false}` to FilterRail so
the widgets become plain always-open label + control rows (no collapse
chevrons; reorder/hide in edit mode stay). Drop the rail's own "Clear all" —
the chip row above the grid already owns it.
- Move Sort + the Discover/Browse toggle into the applied-filter chip row,
pinned right directly above the grid (a `sortView` fragment, like the feed's),
and give ActiveFilterChips `flex-1` so it gets the shared responsive overflow
(wide: fit + "+N" pill; narrow: single "N filters" count pill) — the chips can
no longer crowd the controls off-screen.
ItemCount leads its own toolbar row, matching the feed. No behaviour change to
Discover, which keeps its standalone view toggle.
This commit is contained in:
@@ -369,6 +369,24 @@ export default function PlexBrowse() {
|
||||
/>
|
||||
);
|
||||
|
||||
// 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`.
|
||||
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}
|
||||
</>
|
||||
);
|
||||
|
||||
if (sub.view.kind === "discover") {
|
||||
return (
|
||||
<div className="p-4 max-w-[1600px] mx-auto">
|
||||
@@ -389,25 +407,22 @@ export default function PlexBrowse() {
|
||||
{/* The title count is fixed chrome — it portals into the shell's fixed band so it stays put
|
||||
while only the poster grid scrolls. */}
|
||||
<PageToolbar>
|
||||
<div className="px-4 pt-2 pb-1 max-w-[1600px] mx-auto flex items-center gap-1.5">
|
||||
<div className="px-4 pt-2 pb-1 max-w-[1600px] mx-auto">
|
||||
<ItemCount count={browseQ.isLoading ? undefined : total} />
|
||||
{viewToggle}
|
||||
{/* Sort moved out of the filter sidebar to the row above the cards (S3), like the Feed. */}
|
||||
<div className="ml-auto flex items-center gap-1.5">
|
||||
<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")}
|
||||
{/* The controls row sits directly above the grid: the applied-filter chips flow from the
|
||||
left (overflowing to a "+N"/count pill so they never crowd the controls), while Sort +
|
||||
the Discover/Browse toggle stay pinned to the right — the same layout as the Feed. */}
|
||||
<div className="mt-1 flex items-center gap-2">
|
||||
<ActiveFilterChips
|
||||
filters={plexChips}
|
||||
onClearAll={clearAllFilters}
|
||||
className="flex-1"
|
||||
/>
|
||||
<div className="ml-auto flex shrink-0 items-center gap-1.5">{sortView}</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageToolbar>
|
||||
|
||||
<ActiveFilterChips filters={plexChips} onClearAll={clearAllFilters} />
|
||||
|
||||
{personCards.length > 0 && (
|
||||
<div className="mb-4 flex flex-wrap gap-3">
|
||||
{personCards.map((p) => (
|
||||
|
||||
@@ -13,7 +13,6 @@ import { type PanelItem } from "./PanelGroups";
|
||||
import SegmentedToggle from "./SegmentedToggle";
|
||||
import FilterChipGroup from "./FilterChipGroup";
|
||||
import Combobox, { type ComboboxOption } from "./Combobox";
|
||||
import { usePlexClearFilters } from "./usePlexActiveFilters";
|
||||
import { usePlex, usePlexActions } from "./PlexProvider";
|
||||
|
||||
// The Plex module's left filter column — now the shared floating SidePanel with its filter groups
|
||||
@@ -96,10 +95,8 @@ export default function PlexSidebar({ layout, setLayout, collapsed, onToggleColl
|
||||
// Scope and sort moved to the header / above-the-grid toolbar (S3); the panel badge now counts only
|
||||
// the filters that still live in this panel (expanded filters + watch-state).
|
||||
const activeCount = fCount + (show !== "all" ? 1 : 0);
|
||||
const anyActive = activeCount > 0;
|
||||
|
||||
const patch = (p: Partial<PlexFilters>) => setFilters({ ...filters, ...p });
|
||||
const clearAll = usePlexClearFilters();
|
||||
|
||||
const durBucketKey = DURATION_BUCKETS.find(
|
||||
(b) => (filters.durationMin ?? null) === b.min && (filters.durationMax ?? null) === b.max,
|
||||
@@ -361,17 +358,9 @@ export default function PlexSidebar({ layout, setLayout, collapsed, onToggleColl
|
||||
layout={layout}
|
||||
setLayout={setLayout}
|
||||
items={items}
|
||||
actions={
|
||||
anyActive ? (
|
||||
<button
|
||||
onClick={clearAll}
|
||||
className="inline-flex items-center gap-1 text-xs text-muted hover:text-accent transition px-1 whitespace-nowrap"
|
||||
>
|
||||
<X className="w-3.5 h-3.5" />
|
||||
{t("plex.filter.clearAll")}
|
||||
</button>
|
||||
) : undefined
|
||||
}
|
||||
// The Plex widgets are simple label + control rows now, not collapsible islands (matches the
|
||||
// feed rail). The rail's own "Clear all" is dropped too — the chip row above the grid owns it.
|
||||
collapsible={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user