peter
5280949667
Sweep the rounded-lg solid/ghost/outline action-button family onto the shared primitive: ConfirmProvider, ErrorDialog, DownloadDialog, DownloadCenter, downloadModals, downloadAdmin, ProfileEditor, PersonalViewsModal, SettingsPanel, WatchPage, DraftSaveBar. Deliberately left on their own styles per the agreed scope: login/onboarding rounded-xl CTAs (Welcome/Onboarding/ Setup/KeyGate), glass Plex surfaces, segmented pills/toggles/switches/chips, dropdown triggers, data-driven Banner/tone maps, text-xs dense buttons, and tiny inline p-1/p-1.5 icon controls — none map 1:1 to a variant+size without a visual change, and the repo has no tailwind-merge.
338 lines
14 KiB
TypeScript
338 lines
14 KiB
TypeScript
import { useEffect, useState } from "react";
|
||
import { useTranslation } from "react-i18next";
|
||
import { BookmarkPlus, Check, GripVertical, Play, Save, Star, Trash2, X } from "lucide-react";
|
||
import {
|
||
closestCenter,
|
||
DndContext,
|
||
PointerSensor,
|
||
useSensor,
|
||
useSensors,
|
||
type DragEndEvent,
|
||
} from "@dnd-kit/core";
|
||
import {
|
||
arrayMove,
|
||
SortableContext,
|
||
useSortable,
|
||
verticalListSortingStrategy,
|
||
} from "@dnd-kit/sortable";
|
||
import { CSS } from "@dnd-kit/utilities";
|
||
import { coercePlexFilters, type FeedFilters, type PlexFilters, type SavedView } from "../lib/api";
|
||
import Modal from "./Modal";
|
||
import { Button } from "./ui/Button";
|
||
import { useSavedViews, asFilters } from "./SavedViewsProvider";
|
||
import { useActiveFilters } from "../lib/useActiveFilters";
|
||
import { buildPlexActiveFilters } from "./usePlexActiveFilters";
|
||
import { useUndoable } from "../lib/useUndoable";
|
||
import UndoToolbar from "./UndoToolbar";
|
||
|
||
// Master–detail manager for saved ("personal") views: the left column lists the views (drag to
|
||
// reorder) plus a "save the current filters" input; the right column shows the selected view's name
|
||
// (renamable), its captured filters as REMOVABLE chips (pruning writes back to the stored view,
|
||
// undoable), its default flag, apply, save-current, and delete. Opened from the filter panel's title
|
||
// or the saved-views popover; all mutations flow through SavedViewsProvider.
|
||
function ViewRow({
|
||
view,
|
||
selected,
|
||
active,
|
||
onSelect,
|
||
}: {
|
||
view: SavedView;
|
||
selected: boolean;
|
||
active: boolean;
|
||
onSelect: () => void;
|
||
}) {
|
||
const { t } = useTranslation();
|
||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||
id: view.id,
|
||
});
|
||
return (
|
||
<div
|
||
ref={setNodeRef}
|
||
style={{ transform: CSS.Transform.toString(transform), transition }}
|
||
className={`flex items-center gap-1.5 rounded-lg pr-1.5 ${isDragging ? "opacity-60" : ""} ${
|
||
selected ? "bg-accent/15" : "hover:bg-card"
|
||
}`}
|
||
>
|
||
<button
|
||
{...attributes}
|
||
{...listeners}
|
||
aria-label={t("views.reorder")}
|
||
className="cursor-grab p-1.5 text-muted hover:text-fg"
|
||
>
|
||
<GripVertical className="h-3.5 w-3.5" />
|
||
</button>
|
||
<button
|
||
onClick={onSelect}
|
||
className={`flex-1 min-w-0 truncate py-1.5 text-left text-sm ${
|
||
selected ? "text-accent" : "text-fg"
|
||
}`}
|
||
>
|
||
{view.name}
|
||
</button>
|
||
{view.is_default && <Star className="h-3 w-3 shrink-0 fill-current text-accent" />}
|
||
{active && <span className="mr-1 h-1.5 w-1.5 shrink-0 rounded-full bg-accent" />}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function PersonalViewsModal() {
|
||
const { t } = useTranslation();
|
||
const {
|
||
source,
|
||
views,
|
||
activeViewId,
|
||
apply,
|
||
create,
|
||
rename,
|
||
updateFilters,
|
||
saveCurrent,
|
||
toggleDefault,
|
||
remove,
|
||
reorder,
|
||
closeModal,
|
||
} = useSavedViews();
|
||
const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }));
|
||
|
||
const [selectedId, setSelectedId] = useState<number | null>(activeViewId ?? views[0]?.id ?? null);
|
||
const selected = views.find((v) => v.id === selectedId) ?? null;
|
||
// Two independent name fields: the left one names a NEW view; the right one renames the selected one.
|
||
const [createName, setCreateName] = useState("");
|
||
const [nameDraft, setNameDraft] = useState("");
|
||
|
||
// A local, undoable draft of the SELECTED view's captured filters. Removing a chip prunes the draft
|
||
// and — via onApply — writes the pruned set straight back to the stored view; Undo/Redo re-persist
|
||
// the same way. The draft is the single source of truth for the chip row, so a chip-prune refetch
|
||
// (which returns the value we just wrote) never clobbers the undo history. We only re-seed it on an
|
||
// external change of the visible filters: switching the selection, or Save-current below.
|
||
const filtersDraft = useUndoable<Record<string, unknown>>(selected?.filters ?? {}, {
|
||
onApply: (f) => {
|
||
if (selected) void updateFilters(selected.id, f);
|
||
},
|
||
});
|
||
const resetDraft = filtersDraft.reset;
|
||
useEffect(() => {
|
||
resetDraft(selected?.filters ?? {});
|
||
setNameDraft(selected?.name ?? "");
|
||
// Re-seed only when the selection changes (not on every same-view refetch), so pruning keeps its
|
||
// undo history. Save-current re-seeds explicitly in its own handler.
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [selectedId]);
|
||
|
||
// The selected view's captured filters, as the same human labels its module's chip row shows, read
|
||
// from the undoable draft. The feed hook runs unconditionally (fed empty filters off-feed); Plex
|
||
// uses the pure builder. A plex view captures its rail filters, not the watch-state (show="all").
|
||
const noop = () => {};
|
||
const setDraftFeed = (f: FeedFilters) =>
|
||
filtersDraft.set(f as unknown as Record<string, unknown>);
|
||
const feedCaptured = useActiveFilters(
|
||
source === "feed" && selected
|
||
? asFilters(filtersDraft.value as unknown as FeedFilters)
|
||
: ({ tags: [], channelIds: [] } as never),
|
||
source === "feed" && selected ? setDraftFeed : noop,
|
||
);
|
||
const patchDraftPlex = (p: Partial<PlexFilters>) =>
|
||
filtersDraft.set({
|
||
...coercePlexFilters(filtersDraft.value),
|
||
...p,
|
||
} as unknown as Record<string, unknown>);
|
||
const captured =
|
||
source === "plex" && selected
|
||
? buildPlexActiveFilters(
|
||
coercePlexFilters(filtersDraft.value),
|
||
"all",
|
||
patchDraftPlex,
|
||
noop,
|
||
t,
|
||
)
|
||
: feedCaptured;
|
||
|
||
async function onDragEnd(e: DragEndEvent) {
|
||
const { active, over } = e;
|
||
if (!over || active.id === over.id) return;
|
||
const ids = views.map((v) => v.id);
|
||
const next = arrayMove(ids, ids.indexOf(active.id as number), ids.indexOf(over.id as number));
|
||
await reorder(next);
|
||
}
|
||
|
||
async function onCreate() {
|
||
const name = createName.trim();
|
||
if (!name) return;
|
||
if (await create(name)) setCreateName("");
|
||
}
|
||
|
||
const nameChanged = !!selected && nameDraft.trim() !== "" && nameDraft.trim() !== selected.name;
|
||
async function onRename() {
|
||
if (!selected || !nameChanged) return;
|
||
await rename(selected.id, nameDraft.trim());
|
||
}
|
||
|
||
// Save-current is a no-op when the live filters already equal this exact view (it's the active one).
|
||
const saveCurrentDisabled = selected != null && selected.id === activeViewId;
|
||
|
||
return (
|
||
<Modal title={t("views.manageTitle")} onClose={closeModal} maxWidth="max-w-2xl">
|
||
<div className="grid min-h-[20rem] grid-cols-[minmax(0,14rem)_1fr] gap-4">
|
||
{/* Left: the list + create */}
|
||
<div className="flex flex-col border-r border-border/60 pr-4">
|
||
<div className="flex-1 space-y-1 overflow-y-auto">
|
||
{views.length === 0 && (
|
||
<p className="px-1 py-2 text-2xs leading-snug text-muted">{t("views.empty")}</p>
|
||
)}
|
||
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
|
||
<SortableContext
|
||
items={views.map((v) => v.id)}
|
||
strategy={verticalListSortingStrategy}
|
||
>
|
||
{views.map((v) => (
|
||
<ViewRow
|
||
key={v.id}
|
||
view={v}
|
||
selected={v.id === selectedId}
|
||
active={v.id === activeViewId}
|
||
onSelect={() => setSelectedId(v.id)}
|
||
/>
|
||
))}
|
||
</SortableContext>
|
||
</DndContext>
|
||
</div>
|
||
<div className="mt-2 flex items-center gap-1.5 border-t border-border/60 pt-2">
|
||
<input
|
||
value={createName}
|
||
onChange={(e) => setCreateName(e.target.value)}
|
||
onKeyDown={(e) => e.key === "Enter" && onCreate()}
|
||
placeholder={t("views.namePlaceholder")}
|
||
className="min-w-0 flex-1 rounded-lg border border-border bg-surface px-2 py-1.5 text-sm focus:border-accent focus:outline-hidden focus:ring-2 focus:ring-accent/30"
|
||
/>
|
||
<Button
|
||
variant="primary"
|
||
size="sm"
|
||
iconOnly
|
||
icon={<BookmarkPlus className="h-4 w-4" />}
|
||
label={t("views.save")}
|
||
onClick={onCreate}
|
||
disabled={!createName.trim()}
|
||
className="shrink-0"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right: the selected view's detail */}
|
||
{selected ? (
|
||
<div className="flex flex-col gap-3">
|
||
<div className="flex items-center gap-1.5">
|
||
<input
|
||
value={nameDraft}
|
||
onChange={(e) => setNameDraft(e.target.value)}
|
||
onKeyDown={(e) => e.key === "Enter" && void onRename()}
|
||
onBlur={() => void onRename()}
|
||
className="min-w-0 flex-1 rounded-lg border border-border bg-surface px-3 py-2 text-sm font-medium focus:border-accent focus:outline-hidden focus:ring-2 focus:ring-accent/30"
|
||
/>
|
||
<button
|
||
onClick={() => void onRename()}
|
||
disabled={!nameChanged}
|
||
title={t("views.rename")}
|
||
aria-label={t("views.rename")}
|
||
className="inline-flex shrink-0 items-center rounded-lg border border-border p-2 text-muted transition enabled:hover:border-accent enabled:hover:text-accent disabled:opacity-30"
|
||
>
|
||
<Check className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
<div>
|
||
<div className="mb-1.5 flex items-center justify-between gap-2">
|
||
<span className="text-2xs font-semibold uppercase tracking-wider text-muted">
|
||
{t("views.capturedFilters")}
|
||
</span>
|
||
{(filtersDraft.canUndo || filtersDraft.canRedo) && (
|
||
<UndoToolbar
|
||
canUndo={filtersDraft.canUndo}
|
||
canRedo={filtersDraft.canRedo}
|
||
onUndo={filtersDraft.undo}
|
||
onRedo={filtersDraft.redo}
|
||
/>
|
||
)}
|
||
</div>
|
||
{captured.length === 0 ? (
|
||
<p className="text-xs text-muted">{t("views.capturedNone")}</p>
|
||
) : (
|
||
<div className="flex flex-wrap gap-1.5">
|
||
{captured.map((f) => (
|
||
<span
|
||
key={f.key}
|
||
className="group inline-flex items-center gap-1 rounded-full bg-accent/10 py-0.5 pl-2 pr-1 text-2xs text-accent"
|
||
>
|
||
{f.label}
|
||
<button
|
||
onClick={f.remove}
|
||
title={t("feed.chips.remove", { name: f.label })}
|
||
aria-label={t("feed.chips.remove", { name: f.label })}
|
||
className="rounded-full p-0.5 opacity-60 transition hover:bg-accent/20 hover:opacity-100"
|
||
>
|
||
<X className="h-3 w-3" />
|
||
</button>
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="mt-auto flex flex-wrap items-center gap-2 border-t border-border/60 pt-3">
|
||
<Button
|
||
variant="primary"
|
||
size="sm"
|
||
icon={<Play className="h-3.5 w-3.5" />}
|
||
onClick={() => apply(selected)}
|
||
>
|
||
{t("views.apply")}
|
||
</Button>
|
||
<button
|
||
onClick={async () => {
|
||
const saved = await saveCurrent(selected.id);
|
||
// Re-seed the draft to what we just stored (the live filters) so the chip row
|
||
// reflects the save; clears the now-stale undo history.
|
||
if (saved) resetDraft(saved);
|
||
}}
|
||
disabled={saveCurrentDisabled}
|
||
title={
|
||
saveCurrentDisabled ? t("views.saveCurrentUpToDate") : t("views.saveCurrentHint")
|
||
}
|
||
className="inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm text-muted transition enabled:hover:border-accent enabled:hover:text-accent disabled:opacity-40"
|
||
>
|
||
<Save className="h-3.5 w-3.5" />
|
||
{t("views.saveCurrent")}
|
||
</button>
|
||
<button
|
||
onClick={() => void toggleDefault(selected)}
|
||
title={t("views.default")}
|
||
className={`inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm transition ${
|
||
selected.is_default
|
||
? "border-accent text-accent"
|
||
: "border-border text-muted hover:text-fg"
|
||
}`}
|
||
>
|
||
<Star className={`h-3.5 w-3.5 ${selected.is_default ? "fill-current" : ""}`} />
|
||
{t("views.default")}
|
||
</button>
|
||
<button
|
||
onClick={async () => {
|
||
const next = views.find((v) => v.id !== selected.id);
|
||
// Only move the selection if the delete actually happened (remove awaits a confirm
|
||
// and resolves false on cancel) — otherwise cancelling would still switch the pane.
|
||
if (await remove(selected)) setSelectedId(next?.id ?? null);
|
||
}}
|
||
title={t("views.delete")}
|
||
className="ml-auto inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm text-danger transition hover:border-danger"
|
||
>
|
||
<Trash2 className="h-3.5 w-3.5" />
|
||
{t("views.delete")}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="flex items-center justify-center text-sm text-muted">
|
||
{t("views.selectPrompt")}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</Modal>
|
||
);
|
||
}
|