refactor(frontend): the flat components/ folder moves into shell/, modules/<page>/ and features/<name>/
A pure move (git mv, history kept): 333 files leave components/, which now holds only the platform layer (ui/) and the legal pages. The shell is the frame (App, header, nav rail, palette, boot); each page lives in modules/<page>/ with its rail, store and tests; what several pages share sits in features/<name>/; the shared-link page is watch/. Domain-free helpers went straight to ui/ (ViewSwitcher, FilterRail, the confirm dialog, the language switcher, the copy rows). Every relative specifier was rewritten (imports, dynamic imports, vi.mock, new URL), and the contract tests that scan sources now scan the whole app source, not only components/ — each glob was counted before and after so none went green over fewer files. The locale-format rule matched `/src/components/` only, so the move would have taken ~300 files out from under its i18n-singleton check; it now covers every folder that holds components, with a test per folder.
This commit is contained in:
@@ -0,0 +1,514 @@
|
||||
import { useState } from "react";
|
||||
import { qk } from "../../lib/queryKeys";
|
||||
import { usePlexCollectionTitles } from "../../lib/usePlexCollectionTitles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { vocab } from "../../lib/vocab";
|
||||
import { plexLang } from "../../i18n";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { ListMusic, Plus, SlidersHorizontal } from "lucide-react";
|
||||
import { api, plexFilterCount, type PlexFilters } from "../../lib/api";
|
||||
import { notifyActionError } from "../../lib/actionErrors";
|
||||
import { type PanelLayout } from "../../lib/panelLayout";
|
||||
import { type MediaSourceKind } from "../../lib/mediaSource";
|
||||
import { useDebounced } from "../../lib/useDebounced";
|
||||
import FilterRail from "../../components/ui/FilterRail";
|
||||
import { type PanelItem } from "../../components/ui/PanelGroups";
|
||||
import MatchToggle from "../../components/ui/MatchToggle";
|
||||
import FilterChipGroup from "../../components/ui/FilterChipGroup";
|
||||
import Combobox, { type ComboboxOption } from "../../components/ui/Combobox";
|
||||
import SavedViewsPopover from "../../features/filters/SavedViewsPopover";
|
||||
import PersonalViewsModal from "../../features/filters/PersonalViewsModal";
|
||||
import { useSavedViews } from "../feed/savedViewsContext";
|
||||
import { usePlex, usePlexActions } from "./plexContext";
|
||||
import { DismissibleChip } from "../../components/ui/Chip";
|
||||
import { Input } from "../../components/ui/Input";
|
||||
|
||||
// The Plex module's left filter column — now the shared floating SidePanel with its filter groups
|
||||
// as reorderable "islands" (same system as the feed rail). Movie libraries get the full metadata
|
||||
// set; shows keep library + sort. State is owned by App (per-account persisted); facets come from
|
||||
// the backend so the panel only offers what the library actually contains.
|
||||
|
||||
type Props = {
|
||||
layout: PanelLayout;
|
||||
setLayout: (l: PanelLayout) => void;
|
||||
collapsed: boolean;
|
||||
onToggleCollapse: () => void;
|
||||
};
|
||||
|
||||
const RATING_STEPS = [5, 6, 7, 8, 9];
|
||||
const ADDED_OPTS = ["24h", "1w", "1m", "6m", "1y"] as const;
|
||||
const DURATION_BUCKETS: { key: string; min: number | null; max: number | null }[] = [
|
||||
{ key: "short", min: null, max: 90 * 60 },
|
||||
{ key: "mid", min: 90 * 60, max: 120 * 60 },
|
||||
{ key: "long", min: 120 * 60, max: null },
|
||||
];
|
||||
|
||||
export default function PlexSidebar({ layout, setLayout, collapsed, onToggleCollapse }: Props) {
|
||||
const { t, i18n } = useTranslation();
|
||||
// Scope / watch-state / sort / expanded filters live in PlexProvider (shared with PlexBrowse and
|
||||
// the header search box); this rail is the primary editor of them. Opening a playlist is a
|
||||
// hand-off to PlexBrowse via the shared `playlistOpen` slot.
|
||||
const { scope, show, filters } = usePlex();
|
||||
const { setFilters } = usePlexActions();
|
||||
// Personal ("saved") views for the Plex module: the rail header icon opens a quick-pick popover, the
|
||||
// title opens the full manager modal (same shared components as the feed).
|
||||
const { openModal, modalOpen } = useSavedViews();
|
||||
// This rail's media source (the Plex library) — names the abstraction the feed and Plex rails
|
||||
// share; drives the panel layout key. `FilterRail` owns the customize `editing` state now.
|
||||
const source: MediaSourceKind = "plex";
|
||||
// Titles are display-only (chip labels) — keep them OUT of the facet query key so renaming/relabelling
|
||||
// never refetches. collectionMode stays IN the key: any/all changes the result set.
|
||||
const { collectionTitles: _cts, ...facetKey } = filters;
|
||||
const lang = plexLang(i18n.language); // HU/EN genre vocabulary — refetch facets on a language switch
|
||||
const facetsQ = useQuery({
|
||||
queryKey: qk.plexFacets(scope, show, facetKey, lang),
|
||||
queryFn: () => api.plexFacets(scope, filters, show, lang),
|
||||
enabled: !!scope,
|
||||
placeholderData: (prev) => prev,
|
||||
});
|
||||
const facets = facetsQ.data;
|
||||
|
||||
const fCount = plexFilterCount(filters);
|
||||
// Scope and sort moved to the header / above-the-grid toolbar; 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 patch = (p: Partial<PlexFilters>) => setFilters({ ...filters, ...p });
|
||||
|
||||
const durBucketKey = DURATION_BUCKETS.find(
|
||||
(b) => (filters.durationMin ?? null) === b.min && (filters.durationMax ?? null) === b.max,
|
||||
)?.key;
|
||||
// Directors + actors have no picker (they're added from the detail/cast surfaces) — this section
|
||||
// just lists them as removable chips. Studios now have their own picker section (below).
|
||||
const peopleActive = filters.directors.length + filters.actors.length > 0;
|
||||
|
||||
// Group bodies (no title — the PanelGroup card supplies it). Only available groups are pushed,
|
||||
// so facet-gated / scope-gated sections drop out cleanly; PanelGroups orders them by the saved
|
||||
// layout and lets the user reorder / hide / collapse them.
|
||||
const items: PanelItem[] = [
|
||||
{
|
||||
id: "playlists",
|
||||
title: t("plex.playlist.section"),
|
||||
body: <PlaylistPicker />,
|
||||
},
|
||||
...(peopleActive
|
||||
? [
|
||||
{
|
||||
id: "people",
|
||||
title: t("plex.filter.active"),
|
||||
body: (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{filters.directors.map((d) => (
|
||||
<RemovableChip
|
||||
key={`d:${d}`}
|
||||
label={d}
|
||||
onRemove={() => patch({ directors: filters.directors.filter((x) => x !== d) })}
|
||||
/>
|
||||
))}
|
||||
<MatchToggle
|
||||
picked={filters.actors.length}
|
||||
className="w-full"
|
||||
value={filters.actorMode ?? "any"}
|
||||
onChange={(m) => patch({ actorMode: m })}
|
||||
/>
|
||||
{filters.actors.map((a) => (
|
||||
<RemovableChip
|
||||
key={`a:${a}`}
|
||||
label={a}
|
||||
onRemove={() => patch({ actors: filters.actors.filter((x) => x !== a) })}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
{
|
||||
id: "collection",
|
||||
title: t("plex.filter.collection"),
|
||||
body: (
|
||||
<CollectionPicker
|
||||
values={filters.collections}
|
||||
titles={filters.collectionTitles}
|
||||
mode={filters.collectionMode ?? "any"}
|
||||
onChange={(collections, collectionTitles) => patch({ collections, collectionTitles })}
|
||||
onModeChange={(m) => patch({ collectionMode: m })}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "rating",
|
||||
title: t("plex.filter.rating"),
|
||||
body: (
|
||||
<FilterChipGroup
|
||||
ariaLabel={t("plex.filter.rating")}
|
||||
value={filters.ratingMin == null ? "" : String(filters.ratingMin)}
|
||||
options={[
|
||||
{ value: "", label: t("plex.filter.any") },
|
||||
...RATING_STEPS.map((r) => ({ value: String(r), label: `${r}+` })),
|
||||
]}
|
||||
onChange={(v) => patch({ ratingMin: v === "" ? null : Number(v) })}
|
||||
/>
|
||||
),
|
||||
},
|
||||
...(facets && facets.genres.length > 0
|
||||
? [
|
||||
{
|
||||
id: "genre",
|
||||
title: t("plex.filter.genre"),
|
||||
body: (
|
||||
<>
|
||||
<MatchToggle
|
||||
picked={filters.genres.length}
|
||||
value={filters.genreMode ?? "any"}
|
||||
onChange={(m) => patch({ genreMode: m })}
|
||||
/>
|
||||
<Combobox
|
||||
label={t("plex.filter.genre")}
|
||||
options={facets.genres}
|
||||
selected={filters.genres}
|
||||
onChange={(next) => patch({ genres: next })}
|
||||
/>
|
||||
</>
|
||||
),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
{
|
||||
id: "year",
|
||||
title: t("plex.filter.year"),
|
||||
body: (
|
||||
<div className="flex items-center gap-2">
|
||||
<NumberInput
|
||||
value={filters.yearMin ?? null}
|
||||
placeholder={facets?.year_min ?? undefined}
|
||||
onChange={(v) => patch({ yearMin: v })}
|
||||
/>
|
||||
<span className="text-muted text-xs">–</span>
|
||||
<NumberInput
|
||||
value={filters.yearMax ?? null}
|
||||
placeholder={facets?.year_max ?? undefined}
|
||||
onChange={(v) => patch({ yearMax: v })}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
...(scope === "movie"
|
||||
? [
|
||||
{
|
||||
id: "duration",
|
||||
title: t("plex.filter.duration"),
|
||||
body: (
|
||||
<FilterChipGroup
|
||||
ariaLabel={t("plex.filter.duration")}
|
||||
// "Any" is selected only when there is genuinely no duration filter; a set-but-off-bucket
|
||||
// duration (e.g. stale state after a bucket-boundary change) selects nothing, not "Any".
|
||||
value={
|
||||
durBucketKey ??
|
||||
(filters.durationMin == null && filters.durationMax == null ? "" : " ")
|
||||
}
|
||||
options={[
|
||||
{ value: "", label: t("plex.filter.any") },
|
||||
...DURATION_BUCKETS.map((b) => ({
|
||||
value: b.key,
|
||||
label: t(`plex.filter.durationOpt.${b.key}`),
|
||||
})),
|
||||
]}
|
||||
onChange={(key) => {
|
||||
const b = DURATION_BUCKETS.find((x) => x.key === key);
|
||||
patch({ durationMin: b?.min ?? null, durationMax: b?.max ?? null });
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
{
|
||||
id: "added",
|
||||
title: t("plex.filter.added"),
|
||||
body: (
|
||||
<FilterChipGroup
|
||||
ariaLabel={t("plex.filter.added")}
|
||||
value={filters.addedWithin || ""}
|
||||
options={[
|
||||
{ value: "", label: t("plex.filter.any") },
|
||||
...ADDED_OPTS.map((a) => ({ value: a, label: t(`plex.filter.addedOpt.${a}`) })),
|
||||
]}
|
||||
onChange={(v) => patch({ addedWithin: v })}
|
||||
/>
|
||||
),
|
||||
},
|
||||
...(facets && facets.content_ratings.length > 0
|
||||
? [
|
||||
{
|
||||
id: "contentrating",
|
||||
title: t("plex.filter.contentRating"),
|
||||
body: (
|
||||
<Combobox
|
||||
label={t("plex.filter.contentRating")}
|
||||
options={facets.content_ratings.map((o) => ({
|
||||
...o,
|
||||
label: vocab(t, "certificate", o.value),
|
||||
}))}
|
||||
selected={filters.contentRatings}
|
||||
onChange={(next) => patch({ contentRatings: next })}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...(facets && facets.studios.length > 0
|
||||
? [
|
||||
{
|
||||
id: "studio",
|
||||
title: t("plex.filter.studio"),
|
||||
body: (
|
||||
<Combobox
|
||||
label={t("plex.filter.studio")}
|
||||
options={facets.studios}
|
||||
selected={filters.studios}
|
||||
onChange={(next) => patch({ studios: next })}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
// Playback class (Direct Play / Direct Stream / Transcode HW/SW) — movie-only (shows have no
|
||||
// class), and dropped when the facet is empty. Labels are localized (the facet ships class keys).
|
||||
...(scope === "movie" && facets && facets.playable.length > 0
|
||||
? [
|
||||
{
|
||||
id: "playable",
|
||||
title: t("plex.filter.playable"),
|
||||
body: (
|
||||
<Combobox
|
||||
label={t("plex.filter.playable")}
|
||||
options={facets.playable.map((p) => ({
|
||||
value: p.value,
|
||||
label: t(`plex.filter.playableOpt.${p.value}`),
|
||||
count: p.count,
|
||||
}))}
|
||||
selected={filters.playable}
|
||||
onChange={(next) => patch({ playable: next })}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<FilterRail
|
||||
kind={source}
|
||||
title={t("sidebar.filters")}
|
||||
icon={<SlidersHorizontal className="w-4 h-4" />}
|
||||
count={activeCount}
|
||||
collapsed={collapsed}
|
||||
onToggleCollapse={onToggleCollapse}
|
||||
layout={layout}
|
||||
setLayout={setLayout}
|
||||
items={items}
|
||||
// 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}
|
||||
// Saved ("personal") views: header icon → quick-pick popover, title → the manager modal.
|
||||
// Same shared components as the feed rail (SavedViewsProvider switches source).
|
||||
iconExpanded={<SavedViewsPopover trigger={<SlidersHorizontal className="w-4 h-4" />} />}
|
||||
onTitleClick={openModal}
|
||||
titleActionLabel={t("views.manageTitle")}
|
||||
/>
|
||||
{/* The manager modal lives here (rail is always mounted on plex); Modal portals to <body>. */}
|
||||
{modalOpen && <PersonalViewsModal />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// The playlists section: a combobox that stays compact (just a field + chevron) until opened, instead
|
||||
// of an always-expanded list that grew the rail with every playlist. Picking a playlist opens it (the
|
||||
// PlexBrowse `playlistOpen` hand-off); typing a name that doesn't exist yet offers a "Create …" row so
|
||||
// you can still add one — the same reuse-the-Combobox idea as the feed's "Your tags" widget. `selected`
|
||||
// stays empty: this picks an action (open / create), it doesn't hold a persistent selection.
|
||||
const CREATE_PLAYLIST = "__create__";
|
||||
export function PlaylistPicker() {
|
||||
const { t } = useTranslation();
|
||||
const { setPlaylistOpen: onOpenPlaylist } = usePlexActions();
|
||||
const qc = useQueryClient();
|
||||
const [query, setQuery] = useState("");
|
||||
const playlistsQ = useQuery({ queryKey: qk.plexPlaylists(), queryFn: () => api.plexPlaylists() });
|
||||
const playlists = playlistsQ.data?.playlists ?? [];
|
||||
|
||||
const q = query.trim();
|
||||
const ql = q.toLowerCase();
|
||||
const matches = ql ? playlists.filter((p) => p.title.toLowerCase().includes(ql)) : playlists;
|
||||
const exact = playlists.some((p) => p.title.toLowerCase() === ql);
|
||||
const options: ComboboxOption[] = [
|
||||
...matches.map((p) => ({ value: `pl:${p.id}`, label: p.title, count: p.item_count })),
|
||||
// Offer to create only when the typed name isn't already a playlist — which is unknown until the
|
||||
// lists load: over a failed load the row pushed out the error and its Retry.
|
||||
...(q && !exact && playlistsQ.data ? [{ value: CREATE_PLAYLIST, label: q }] : []),
|
||||
];
|
||||
|
||||
async function createPlaylist(title: string) {
|
||||
try {
|
||||
const pl = await api.plexCreatePlaylist(title);
|
||||
qc.invalidateQueries({ queryKey: qk.plexPlaylists() });
|
||||
onOpenPlaylist(pl.id);
|
||||
} catch (e) {
|
||||
// Called without an await from the picker, so a refusal was an unhandled rejection.
|
||||
notifyActionError(e, t("plex.playlistAdd.createFailed"));
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Combobox
|
||||
label={t("plex.playlist.section")}
|
||||
multiple={false}
|
||||
clientFilter={false} // we build `options` (incl. the create row) against the query ourselves
|
||||
options={options}
|
||||
selected={[]}
|
||||
query={query}
|
||||
onQueryChange={setQuery}
|
||||
placeholder={t("plex.playlist.pickerPlaceholder")}
|
||||
loading={playlistsQ.isLoading}
|
||||
error={playlistsQ.isError && !playlistsQ.data ? t("common.loadError") : undefined}
|
||||
onRetry={() => void playlistsQ.refetch()}
|
||||
emptyText={t("plex.playlist.none")}
|
||||
renderOption={(o) =>
|
||||
o.value === CREATE_PLAYLIST ? (
|
||||
<>
|
||||
<Plus className="h-3.5 w-3.5 shrink-0 text-accent" />
|
||||
<span className="flex-1 truncate">
|
||||
{t("plex.playlist.createNamed", { name: o.label })}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ListMusic className="h-3.5 w-3.5 shrink-0 text-muted" />
|
||||
<span className="flex-1 truncate">{o.label}</span>
|
||||
{o.count != null && (
|
||||
<span className="shrink-0 text-2xs tabular-nums text-muted">{o.count}</span>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
onChange={(next) => {
|
||||
const v = next[0];
|
||||
if (!v) return;
|
||||
if (v === CREATE_PLAYLIST)
|
||||
void createPlaylist(q); // reports its own failure
|
||||
else onOpenPlaylist(Number(v.slice(3)));
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// The collection filter (a multi-select combobox): a combi-input matching the genre/studio
|
||||
// pickers, its vocabulary searched SERVER-side (the union can run to hundreds). The generic <Combobox>
|
||||
// owns the field/keyboard/ARIA + the any/all match footer; this wrapper owns the query→fetch (gated on
|
||||
// `open`) and maps collections to options. A title can belong to several collections, so multiple can
|
||||
// be picked and combined with Any/All. Titles are carried alongside the ids for the active-filter chips.
|
||||
function CollectionPicker({
|
||||
values,
|
||||
titles,
|
||||
mode,
|
||||
onChange,
|
||||
onModeChange,
|
||||
}: {
|
||||
values: string[];
|
||||
titles: Record<string, string> | undefined;
|
||||
mode: "any" | "all";
|
||||
onChange: (values: string[], titles: Record<string, string> | undefined) => void;
|
||||
onModeChange: (mode: "any" | "all") => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
const searchDeb = useDebounced(search.trim(), 300);
|
||||
const q = useQuery({
|
||||
queryKey: qk.plexCollections("union", searchDeb),
|
||||
queryFn: () => api.plexCollections(undefined, searchDeb || undefined),
|
||||
enabled: open, // only fetch while the picker is open
|
||||
});
|
||||
// …but a selection restored from a LINK has ids and no titles, and the list above is only fetched
|
||||
// once the picker is opened — so the token rendered the raw rating_key until then. Resolve just the
|
||||
// selected ids (see usePlexCollectionTitles).
|
||||
const { titles: resolved, pending } = usePlexCollectionTitles(values, titles);
|
||||
const options: ComboboxOption[] = (q.data?.collections ?? []).map((c) => ({
|
||||
value: c.id,
|
||||
label: c.title,
|
||||
count: c.child_count ?? undefined,
|
||||
}));
|
||||
// Combine the fetched labels with the ones already stored so the trip through onChange keeps every
|
||||
// selected collection's title (the fetched list is narrowed by the current search).
|
||||
const labelMap: Record<string, string> = { ...resolved };
|
||||
for (const o of options) if (o.label) labelMap[o.value] = o.label;
|
||||
|
||||
return (
|
||||
<>
|
||||
<MatchToggle picked={values.length} value={mode} onChange={onModeChange} />
|
||||
<Combobox
|
||||
label={t("plex.filter.collection")}
|
||||
clientFilter={false} // the server already narrows to `search`
|
||||
options={options}
|
||||
selected={values}
|
||||
selectedLabels={resolved}
|
||||
labelsPending={pending}
|
||||
query={search}
|
||||
onQueryChange={setSearch}
|
||||
onOpenChange={setOpen}
|
||||
loading={q.isFetching}
|
||||
error={q.isError ? t("common.loadError") : undefined}
|
||||
onRetry={() => void q.refetch()}
|
||||
placeholder={t("plex.filter.collectionSearch")}
|
||||
emptyText={t("plex.filter.collectionEmpty")}
|
||||
onChange={(next) => {
|
||||
// Carry only the selected ids' titles forward (drop titles for de-selected ones). Collapse an
|
||||
// empty map to undefined so a clear-all key-matches the pristine state (an empty {} still hashes
|
||||
// differently from an absent key), mirroring the chip-row remove handler.
|
||||
const nextTitles: Record<string, string> = {};
|
||||
for (const id of next) nextTitles[id] = labelMap[id] ?? titles?.[id] ?? id;
|
||||
onChange(next, next.length ? nextTitles : undefined);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function RemovableChip({ label, onRemove }: { label: string; onRemove: () => void }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<DismissibleChip
|
||||
onDismiss={onRemove}
|
||||
dismissLabel={t("common.removeNamed", { name: label })}
|
||||
className="max-w-40"
|
||||
>
|
||||
{label}
|
||||
</DismissibleChip>
|
||||
);
|
||||
}
|
||||
|
||||
function NumberInput({
|
||||
value,
|
||||
placeholder,
|
||||
onChange,
|
||||
}: {
|
||||
value: number | null;
|
||||
placeholder?: number;
|
||||
onChange: (v: number | null) => void;
|
||||
}) {
|
||||
return (
|
||||
<Input
|
||||
className="w-20 tabular-nums"
|
||||
size="sm"
|
||||
type="number"
|
||||
inputMode="numeric"
|
||||
value={value ?? ""}
|
||||
placeholder={placeholder != null ? String(placeholder) : ""}
|
||||
onChange={(e) => {
|
||||
const n = e.target.value === "" ? null : Number(e.target.value);
|
||||
onChange(n != null && Number.isFinite(n) ? n : null);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user