peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge chore/code-hygiene: Plex filter-sidebar collapse button

Browse source 
Add the missing collapse trigger to the expanded PlexSidebar (state + collapsed rail
already wired via the shared filterCollapsed); mirrors the feed Sidebar. E2E-verified.
This commit is contained in:
npeter83 2026-07-12 01:55:25 +02:00
commit 6a1001b7fa
1 changed files with 23 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

24
frontend/src/components/PlexSidebar.tsx
View file

@ -1,7 +1,7 @@
import { useState, type ReactNode } from "react"; import { useState, type ReactNode } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useQuery, useQueryClient } from "@tanstack/react-query"; import { useQuery, useQueryClient } from "@tanstack/react-query";
import { Film, Layers, ListMusic, Plus, Tv2, X } from "lucide-react"; import { ChevronLeft, Film, Layers, ListMusic, Plus, Tv2, X } from "lucide-react";
import CollapsedFilterRail from "./CollapsedFilterRail"; import CollapsedFilterRail from "./CollapsedFilterRail";
import { api, EMPTY_PLEX_FILTERS, plexFilterCount, type PlexFilters } from "../lib/api"; import { api, EMPTY_PLEX_FILTERS, plexFilterCount, type PlexFilters } from "../lib/api";
import { useDebounced } from "../lib/useDebounced"; import { useDebounced } from "../lib/useDebounced";
@ -121,6 +121,28 @@ export default function PlexSidebar({
return ( return (
<aside className="hidden md:block w-64 shrink-0 border-r border-border bg-surface/40 overflow-y-auto p-4 space-y-4"> <aside className="hidden md:block w-64 shrink-0 border-r border-border bg-surface/40 overflow-y-auto p-4 space-y-4">
{/* Collapse control + active-filter count — mirrors the feed Sidebar so the Plex filter panel
can be collapsed from the Plex page too (the collapsed rail + shared state already existed). */}
<div className="flex items-center gap-1.5 min-w-0">
<button
onClick={onToggleCollapse}
title={t("sidebar.collapsePanel")}
aria-label={t("sidebar.collapsePanel")}
className="shrink-0 -ml-1 p-1 rounded-md text-muted hover:text-fg hover:bg-card transition"
>
<ChevronLeft className="w-4 h-4" />
</button>
<span className="text-sm font-semibold shrink-0">{t("sidebar.filters")}</span>
{activeCount > 0 && (
<span
title={t("sidebar.activeCount", { count: activeCount })}
className="shrink-0 min-w-[18px] h-[18px] px-1.5 rounded-full bg-accent/15 text-accent text-[11px] font-semibold inline-flex items-center justify-center tabular-nums"
>
{activeCount}
</span>
)}
</div>
{/* Scope — one unified library, filtered to movies, shows, or both. */} {/* Scope — one unified library, filtered to movies, shows, or both. */}
<Section label={t("plex.filter.scope")}> <Section label={t("plex.filter.scope")}>
<div className="flex gap-1"> <div className="flex gap-1">