peter
fca989c098
Rework the feed filter rail into simpler label + control rows: - Remove the rail's own "Clear all" (the chip row above the cards already surfaces one whenever any filter is active). - Replace the Upload date chip group with a single-select dropdown (DateFilterSelect): an "Any time" clear, more presets (2 weeks / 3 months / 2 years / 5 years) and a "Custom range" that reveals from/to on select; the trigger then reads the chosen range. Selection logic is the pure lib/dateFilter (applyDateChip -> selectDateChip, no toggle-off; tests updated). - Widgets are no longer collapsible: PanelGroup gains `collapsible` (feed passes false) so groups render as always-open label + control rows; reorder + hide in edit mode stay. Other rails (Plex/Playlists) keep the collapsible islands. - A non-collapsible group's title can act as its own trigger (PanelItem onTitleClick): "Your tags" opens the tag manager, replacing the inline Manage button.
108 lines
4.0 KiB
TypeScript
108 lines
4.0 KiB
TypeScript
import { type ReactNode } from "react";
|
|
import {
|
|
closestCenter,
|
|
DndContext,
|
|
KeyboardSensor,
|
|
PointerSensor,
|
|
useSensor,
|
|
useSensors,
|
|
type DragEndEvent,
|
|
} from "@dnd-kit/core";
|
|
import {
|
|
arrayMove,
|
|
SortableContext,
|
|
sortableKeyboardCoordinates,
|
|
verticalListSortingStrategy,
|
|
} from "@dnd-kit/sortable";
|
|
import type { PanelLayout } from "../lib/panelLayout";
|
|
import PanelGroup from "./PanelGroup";
|
|
|
|
export type PanelItem = {
|
|
id: string;
|
|
title: string;
|
|
body: ReactNode;
|
|
/** When set (and the panel is non-collapsible), the group's title becomes a button firing this —
|
|
* e.g. the feed's "Your tags" opens the tag manager. */
|
|
onTitleClick?: () => void;
|
|
/** Accessible name / tooltip for the title action (what onTitleClick does). */
|
|
titleActionLabel?: string;
|
|
};
|
|
|
|
// Renders a panel's islands in the user's saved order, with drag-to-reorder + hide + per-group
|
|
// collapse driven by `layout` (see lib/panelLayout). `items` holds only the currently AVAILABLE
|
|
// groups (a caller drops facet-gated / empty ones); the layout order is filtered to them so a
|
|
// stored order that references a now-absent group is tolerated. Reordering/hiding is active only
|
|
// in `editing` mode. Shared by all three side panels.
|
|
export default function PanelGroups({
|
|
items,
|
|
layout,
|
|
setLayout,
|
|
editing,
|
|
collapsible = true,
|
|
}: {
|
|
items: PanelItem[];
|
|
layout: PanelLayout;
|
|
setLayout: (l: PanelLayout) => void;
|
|
editing: boolean;
|
|
/** When false, groups render as plain (always-open) label + control rows — no collapse chevron.
|
|
* Reorder + hide (in edit mode) stay. Default true (the collapsible-island look). */
|
|
collapsible?: boolean;
|
|
}) {
|
|
const sensors = useSensors(
|
|
useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
|
|
// The group grips are focusable and call themselves reorderable; without this only a pointer
|
|
// could actually move them (keyboard drag matched the other sortable lists).
|
|
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
|
|
);
|
|
const byId = new Map(items.map((it) => [it.id, it]));
|
|
|
|
const orderedAvailable = layout.order.filter((id) => byId.has(id));
|
|
// Append any available id missing from the stored order (e.g. a group that became available
|
|
// after the layout was saved) so it never silently disappears.
|
|
for (const it of items) if (!orderedAvailable.includes(it.id)) orderedAvailable.push(it.id);
|
|
const renderedIds = editing
|
|
? orderedAvailable
|
|
: orderedAvailable.filter((id) => !layout.hidden[id]);
|
|
|
|
function toggleCollapse(id: string) {
|
|
setLayout({ ...layout, collapsed: { ...layout.collapsed, [id]: !layout.collapsed[id] } });
|
|
}
|
|
function toggleHidden(id: string) {
|
|
setLayout({ ...layout, hidden: { ...layout.hidden, [id]: !layout.hidden[id] } });
|
|
}
|
|
function onDragEnd(e: DragEndEvent) {
|
|
const { active, over } = e;
|
|
if (!over || active.id === over.id) return;
|
|
const from = layout.order.indexOf(active.id as string);
|
|
const to = layout.order.indexOf(over.id as string);
|
|
if (from < 0 || to < 0) return;
|
|
setLayout({ ...layout, order: arrayMove(layout.order, from, to) });
|
|
}
|
|
|
|
return (
|
|
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
|
|
<SortableContext items={renderedIds} strategy={verticalListSortingStrategy}>
|
|
<div className="space-y-3">
|
|
{renderedIds.map((id) => (
|
|
<PanelGroup
|
|
key={id}
|
|
id={id}
|
|
title={byId.get(id)!.title}
|
|
editing={editing}
|
|
collapsible={collapsible}
|
|
collapsed={!!layout.collapsed[id]}
|
|
hidden={!!layout.hidden[id]}
|
|
onToggleCollapse={() => toggleCollapse(id)}
|
|
onToggleHidden={() => toggleHidden(id)}
|
|
onTitleClick={byId.get(id)!.onTitleClick}
|
|
titleActionLabel={byId.get(id)!.titleActionLabel}
|
|
>
|
|
{byId.get(id)!.body}
|
|
</PanelGroup>
|
|
))}
|
|
</div>
|
|
</SortableContext>
|
|
</DndContext>
|
|
);
|
|
}
|