peter
4fe6f38f1b
The three filter rails — feed Sidebar, PlexSidebar, PlaylistsRail — each rendered the same SidePanel chrome (title bar, customize `editing` state, edit-toggle, reset-to-layout-default, edit hint) around a PanelGroups body, differing only in identity + filter content. Extracted that shell into components/FilterRail.tsx: each rail now supplies only what differs (title/icon, active-filter count + Clear-all action, its `items`, and optional content above/below the groups — `top` for the feed's scope toggle, `children` for its tag manager). FilterRail owns the `editing` state, so all three drop their duplicated useState + SidePanel wiring. MediaSource facade (lib/mediaSource.ts): a thin `MediaSourceKind = "feed" | "plex"` naming the two browsable, filterable sources (a PanelId minus "playlists", which is a rail but not a source). Already unified in practice — one SortControl, the source-agnostic ActiveFilter[] chips, PanelId layouts, now the shared shell — so this is formalization, not new capability: a single named seam for a future third source or a cross-source feature. The two media-source rails annotate their `kind` with it; PlaylistsRail passes the plain PanelId. Per the recon, the playlist-dialog merge was deliberately NOT forced (it proved forced + low value). UX-3 control-vocab sweep deliberately deferred — the rails already use the canonical primitives. Behaviour-preserving. Gate green (tsc, knip, lint 0-err, 247 vitest). Self-E2E (localdev): all three rails render via FilterRail — feed (scope toggle + panel groups + Customize→editing with reset + 56 reorder affordances, exits clean), Plex (filter groups + customize), Playlists (sections + customize); 0 JS console errors.
362 lines
13 KiB
TypeScript
362 lines
13 KiB
TypeScript
import { type ReactNode, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { keepPreviousData, useQuery } from "@tanstack/react-query";
|
|
import { qk } from "../lib/queryKeys";
|
|
import { Library, Pencil, SlidersHorizontal, User } from "lucide-react";
|
|
import { api, type FeedFilters, type Tag } from "../lib/api";
|
|
import { defaultLayout, type PanelLayout } from "../lib/panelLayout";
|
|
import { useDebounced } from "../lib/useDebounced";
|
|
import { clearedFilters, useActiveFilters } from "../lib/useActiveFilters";
|
|
import { applyDateChip, deriveDateKey } from "../lib/dateFilter";
|
|
import TagManager from "./TagManager";
|
|
import SavedViewsWidget from "./SavedViewsWidget";
|
|
import FilterRail from "./FilterRail";
|
|
import { type PanelItem } from "./PanelGroups";
|
|
import { type MediaSourceKind } from "../lib/mediaSource";
|
|
import ChannelPicker from "./ChannelPicker";
|
|
import SegmentedToggle from "./SegmentedToggle";
|
|
import FilterChipGroup, { filterChipClass } from "./FilterChipGroup";
|
|
import { useFeedFilters, useFeedFiltersActions } from "./FeedFiltersProvider";
|
|
import { useChannelsActions } from "./ChannelsProvider";
|
|
import { useMe } from "../lib/useMe";
|
|
|
|
// Filter ids; display labels resolved at render time via t("sidebar.sort.<id>") etc.
|
|
const DATE_PRESETS: { days: number; key: string }[] = [
|
|
{ days: 1, key: "24h" },
|
|
{ days: 7, key: "1week" },
|
|
{ days: 30, key: "1month" },
|
|
{ days: 180, key: "6months" },
|
|
{ days: 365, key: "1year" },
|
|
];
|
|
|
|
function TagChip({
|
|
tag,
|
|
count,
|
|
active,
|
|
onClick,
|
|
}: {
|
|
tag: Tag;
|
|
count: number;
|
|
active: boolean;
|
|
onClick: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<button
|
|
data-testid="filter-tag-chip"
|
|
data-tag={tag.name}
|
|
onClick={onClick}
|
|
title={t("sidebar.channelCount", { count })}
|
|
aria-pressed={active}
|
|
className={filterChipClass}
|
|
>
|
|
<span>{tag.name}</span>
|
|
<span
|
|
className={`tabular-nums text-3xs leading-none px-1 py-0.5 rounded-full ${
|
|
active ? "bg-accent-fg/20 text-accent-fg" : "bg-muted/15 text-muted"
|
|
}`}
|
|
>
|
|
{count}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export default function Sidebar({
|
|
layout,
|
|
setLayout,
|
|
collapsed,
|
|
onToggleCollapse,
|
|
}: {
|
|
layout: PanelLayout;
|
|
setLayout: (l: PanelLayout) => void;
|
|
collapsed: boolean;
|
|
onToggleCollapse: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const isDemo = useMe().is_demo;
|
|
const filters = useFeedFilters();
|
|
const { setFilters } = useFeedFiltersActions();
|
|
// "Focus this channel in the manager" (from the tag manager here) lives in ChannelsProvider.
|
|
const { focusChannel: onFocusChannel } = useChannelsActions();
|
|
const tagsQuery = useQuery({ queryKey: qk.tags(), queryFn: api.tags });
|
|
const tags = tagsQuery.data ?? [];
|
|
|
|
// Live per-tag channel counts for the current filter context. Debounce the search term so
|
|
// typing doesn't refire facets per keystroke, and keep previous counts during a refetch.
|
|
const facetFilters: FeedFilters = { ...filters, q: useDebounced(filters.q, 300) };
|
|
// Shared with the feed's count (same key + filters -> React Query dedupes to one request): the feed
|
|
// reads `.count`, this reads `.facets` (PERF-13, replaces the separate facets query).
|
|
const summaryQuery = useQuery({
|
|
queryKey: qk.feedSummary(facetFilters),
|
|
queryFn: () => api.feedSummary(facetFilters),
|
|
staleTime: 30_000,
|
|
placeholderData: keepPreviousData,
|
|
});
|
|
const facetsReady = !!summaryQuery.data;
|
|
const facetCounts = summaryQuery.data?.facets ?? {};
|
|
const chipCount = (tag: Tag): number =>
|
|
facetsReady ? (facetCounts[String(tag.id)] ?? 0) : tag.channel_count;
|
|
const visibleChips = (list: Tag[]): Tag[] => {
|
|
const shown = facetsReady
|
|
? list.filter((tg) => chipCount(tg) > 0 || filters.tags.includes(tg.id))
|
|
: list;
|
|
return [...shown].sort((a, b) => chipCount(b) - chipCount(a) || a.name.localeCompare(b.name));
|
|
};
|
|
|
|
const languages = tags.filter((t) => t.category === "language");
|
|
const topics = tags.filter((t) => t.category === "topic");
|
|
const userTags = tags.filter((t) => !t.system);
|
|
const [customDates, setCustomDates] = useState(false);
|
|
const [tagManagerOpen, setTagManagerOpen] = useState(false);
|
|
// This rail's media source (the feed). Names the abstraction the feed and Plex rails share; drives
|
|
// the panel layout key. `FilterRail` owns the customize `editing` state now.
|
|
const source: MediaSourceKind = "feed";
|
|
|
|
function toggleTag(id: number) {
|
|
const has = filters.tags.includes(id);
|
|
setFilters({
|
|
...filters,
|
|
tags: has ? filters.tags.filter((t) => t !== id) : [...filters.tags, id],
|
|
});
|
|
}
|
|
|
|
// The badge counts exactly what the chip row above the feed shows — same list, so they can't
|
|
// disagree about what's applied.
|
|
const activeCount = useActiveFilters(filters, setFilters).length;
|
|
const active = activeCount > 0;
|
|
|
|
function clearAll() {
|
|
setCustomDates(false);
|
|
setFilters(clearedFilters(filters));
|
|
}
|
|
|
|
const available: Record<string, boolean> = {
|
|
savedviews: !isDemo,
|
|
date: true,
|
|
channel: true,
|
|
language: languages.length > 0,
|
|
topic: topics.length > 0,
|
|
tags: userTags.length > 0,
|
|
};
|
|
|
|
function widgetBody(id: string): ReactNode {
|
|
switch (id) {
|
|
case "savedviews":
|
|
return <SavedViewsWidget filters={filters} onApply={setFilters} />;
|
|
case "channel":
|
|
return <ChannelPicker filters={filters} setFilters={setFilters} />;
|
|
case "date": {
|
|
// Single-select across the presets + Custom; pure logic lives in lib/dateFilter.
|
|
const dateKey = deriveDateKey(filters, customDates, DATE_PRESETS);
|
|
return (
|
|
<>
|
|
<FilterChipGroup
|
|
ariaLabel={t("sidebar.datePresetLabel")}
|
|
value={dateKey}
|
|
options={[
|
|
...DATE_PRESETS.map((p) => ({
|
|
value: String(p.days),
|
|
label: t("sidebar.datePreset." + p.key),
|
|
})),
|
|
{ value: "custom", label: t("sidebar.custom") },
|
|
]}
|
|
onChange={(key) => {
|
|
const change = applyDateChip(key, filters, customDates);
|
|
if (change.customDates !== undefined) setCustomDates(change.customDates);
|
|
if (change.filters) setFilters(change.filters);
|
|
}}
|
|
/>
|
|
|
|
{(customDates || filters.dateFrom || filters.dateTo) && (
|
|
<div className="flex flex-col gap-1.5 mt-2">
|
|
<label className="flex items-center justify-between gap-2 text-xs">
|
|
<span className="text-muted">{t("sidebar.from")}</span>
|
|
<input
|
|
type="date"
|
|
value={filters.dateFrom ?? ""}
|
|
onChange={(e) =>
|
|
setFilters({
|
|
...filters,
|
|
dateFrom: e.target.value || undefined,
|
|
maxAgeDays: undefined,
|
|
})
|
|
}
|
|
className="bg-surface border border-border rounded-md px-2 py-1 text-xs focus:outline-hidden focus:ring-2 focus:ring-accent/40"
|
|
/>
|
|
</label>
|
|
<label className="flex items-center justify-between gap-2 text-xs">
|
|
<span className="text-muted">{t("sidebar.to")}</span>
|
|
<input
|
|
type="date"
|
|
value={filters.dateTo ?? ""}
|
|
onChange={(e) =>
|
|
setFilters({
|
|
...filters,
|
|
dateTo: e.target.value || undefined,
|
|
maxAgeDays: undefined,
|
|
})
|
|
}
|
|
className="bg-surface border border-border rounded-md px-2 py-1 text-xs focus:outline-hidden focus:ring-2 focus:ring-accent/40"
|
|
/>
|
|
</label>
|
|
{(filters.dateFrom || filters.dateTo) && (
|
|
<button
|
|
onClick={() =>
|
|
setFilters({ ...filters, dateFrom: undefined, dateTo: undefined })
|
|
}
|
|
className="text-2xs text-muted hover:text-accent self-end"
|
|
>
|
|
{t("sidebar.clearDates")}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
case "language": {
|
|
const chips = visibleChips(languages);
|
|
return (
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{chips.map((tg) => (
|
|
<TagChip
|
|
key={tg.id}
|
|
tag={tg}
|
|
count={chipCount(tg)}
|
|
active={filters.tags.includes(tg.id)}
|
|
onClick={() => toggleTag(tg.id)}
|
|
/>
|
|
))}
|
|
{facetsReady && chips.length === 0 && (
|
|
<span className="text-2xs text-muted">{t("sidebar.noMatchingTags")}</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
case "topic": {
|
|
const chips = visibleChips(topics);
|
|
return (
|
|
<>
|
|
<SegmentedToggle
|
|
label={t("sidebar.match")}
|
|
title={t("sidebar.tagModeTooltip")}
|
|
ariaLabel={t("sidebar.match")}
|
|
options={[
|
|
{ value: "or", label: t("sidebar.any") },
|
|
{ value: "and", label: t("sidebar.all") },
|
|
]}
|
|
value={filters.tagMode}
|
|
onChange={(tagMode) => setFilters({ ...filters, tagMode })}
|
|
/>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{chips.map((tg) => (
|
|
<TagChip
|
|
key={tg.id}
|
|
tag={tg}
|
|
count={chipCount(tg)}
|
|
active={filters.tags.includes(tg.id)}
|
|
onClick={() => toggleTag(tg.id)}
|
|
/>
|
|
))}
|
|
{facetsReady && chips.length === 0 && (
|
|
<span className="text-2xs text-muted">{t("sidebar.noMatchingTags")}</span>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
case "tags": {
|
|
const tagChips = visibleChips(userTags);
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-1.5">
|
|
{tagChips.map((tg) => (
|
|
<TagChip
|
|
key={tg.id}
|
|
tag={tg}
|
|
count={chipCount(tg)}
|
|
active={filters.tags.includes(tg.id)}
|
|
onClick={() => toggleTag(tg.id)}
|
|
/>
|
|
))}
|
|
{facetsReady && tagChips.length === 0 && (
|
|
<span className="text-2xs text-muted">{t("sidebar.noMatchingTags")}</span>
|
|
)}
|
|
<button
|
|
onClick={() => setTagManagerOpen(true)}
|
|
title={t("sidebar.manageTags")}
|
|
className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full border border-dashed border-border text-muted hover:text-accent hover:border-accent transition"
|
|
>
|
|
<Pencil className="w-3 h-3" />
|
|
{t("sidebar.manageTags")}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// Group ids come from the shared default order (panelLayout) so there's one source of truth;
|
|
// the actual render order is the user's saved layout (PanelGroups orders by it).
|
|
const items: PanelItem[] = defaultLayout(source)
|
|
.order.filter((id) => available[id])
|
|
.map((id) => ({ id, title: t("sidebar.widget." + id), body: widgetBody(id) }));
|
|
|
|
const actions = (
|
|
<>
|
|
<button
|
|
onClick={clearAll}
|
|
disabled={!active}
|
|
className="text-xs text-muted enabled:hover:text-accent disabled:opacity-40 transition px-1 whitespace-nowrap"
|
|
>
|
|
{t("sidebar.clearAll")}
|
|
</button>
|
|
</>
|
|
);
|
|
|
|
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}
|
|
actions={actions}
|
|
top={
|
|
/* Scope: your own subscriptions (Mine) vs the shared Library. */
|
|
<SegmentedToggle
|
|
ariaLabel={t("header.scope.label")}
|
|
fullWidth
|
|
size="md"
|
|
options={[
|
|
{
|
|
value: "my",
|
|
label: t("header.scope.my"),
|
|
icon: <User className="w-3.5 h-3.5" />,
|
|
title: t("header.scope.myTip"),
|
|
},
|
|
{
|
|
value: "all",
|
|
label: t("header.scope.all"),
|
|
icon: <Library className="w-3.5 h-3.5" />,
|
|
title: t("header.scope.allTip"),
|
|
},
|
|
]}
|
|
value={filters.scope}
|
|
onChange={(scope) => setFilters({ ...filters, scope })}
|
|
/>
|
|
}
|
|
>
|
|
{tagManagerOpen && (
|
|
<TagManager onClose={() => setTagManagerOpen(false)} onFocusChannel={onFocusChannel} />
|
|
)}
|
|
</FilterRail>
|
|
);
|
|
}
|