admin
278 lines
11 KiB
TypeScript
278 lines
11 KiB
TypeScript
"use client";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { Bookmark, ChevronDown, Gem, Star, MinusCircle, Package, Check, Eye, FolderHeart, Tag, Play } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import type { FilterCriteria, FilterStatus, MarkOption, StatusAxisKey } from "@/lib/filters";
|
|
import { totalStatusActive, EMPTY_STATUS } from "@/lib/filters";
|
|
|
|
const MARK_OPTIONS: Array<{
|
|
value: MarkOption;
|
|
label: string;
|
|
Icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
|
|
tint: "cyan" | "amber" | "violet" | "muted";
|
|
}> = [
|
|
{ value: "vip", label: "VIP", Icon: Gem, tint: "cyan" },
|
|
{ value: "favorite", label: "Favorite", Icon: Star, tint: "amber" },
|
|
{ value: "owned", label: "Owned", Icon: Package, tint: "violet" },
|
|
{ value: "unmarked", label: "Unmarked", Icon: MinusCircle, tint: "muted" },
|
|
];
|
|
|
|
type AxisOpt<V extends string> = { value: V; label: string };
|
|
type AxisConfig = {
|
|
key: StatusAxisKey;
|
|
label: string;
|
|
Icon: React.ComponentType<{ className?: string }>;
|
|
options: Array<AxisOpt<string>>;
|
|
};
|
|
|
|
const WATCH_AXES: AxisConfig[] = [
|
|
{ key: "watched", label: "Watched", Icon: Eye, options: [
|
|
{ value: "all", label: "ALL" },
|
|
{ value: "watched", label: "Watched" },
|
|
{ value: "unwatched", label: "Unwatched" },
|
|
]},
|
|
{ key: "rated", label: "Rated", Icon: Star, options: [
|
|
{ value: "all", label: "ALL" },
|
|
{ value: "rated", label: "Rated" },
|
|
{ value: "unrated", label: "No Rating" },
|
|
]},
|
|
];
|
|
|
|
const HAS_AXES: AxisConfig[] = [
|
|
{ key: "collection", label: "Collection", Icon: FolderHeart, options: [
|
|
{ value: "all", label: "ALL" },
|
|
{ value: "has", label: "Has" },
|
|
{ value: "missing", label: "Missing" },
|
|
]},
|
|
{ key: "tags", label: "Tags", Icon: Tag, options: [
|
|
{ value: "all", label: "ALL" },
|
|
{ value: "has", label: "Has" },
|
|
{ value: "missing", label: "Missing" },
|
|
]},
|
|
{ key: "video", label: "Video", Icon: Play, options: [
|
|
{ value: "all", label: "ALL" },
|
|
{ value: "has", label: "Has" },
|
|
{ value: "missing", label: "Missing" },
|
|
]},
|
|
];
|
|
|
|
export function MergedFilterPopover({
|
|
criteria,
|
|
onChange,
|
|
}: {
|
|
criteria: FilterCriteria;
|
|
onChange: (next: FilterCriteria) => void;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
const wrapRef = useRef<HTMLDivElement>(null);
|
|
|
|
const markCount = criteria.marks.length;
|
|
const stateCount = totalStatusActive(criteria);
|
|
const total = markCount + stateCount;
|
|
const active = total > 0;
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const onDoc = (e: MouseEvent) => {
|
|
if (!wrapRef.current?.contains(e.target as Node)) setOpen(false);
|
|
};
|
|
document.addEventListener("mousedown", onDoc);
|
|
return () => document.removeEventListener("mousedown", onDoc);
|
|
}, [open]);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setOpen(false); };
|
|
window.addEventListener("keydown", onKey);
|
|
return () => window.removeEventListener("keydown", onKey);
|
|
}, [open]);
|
|
|
|
function toggleMark(value: MarkOption) {
|
|
const has = criteria.marks.includes(value);
|
|
const next = has ? criteria.marks.filter((m) => m !== value) : [...criteria.marks, value];
|
|
onChange({ ...criteria, marks: next });
|
|
}
|
|
|
|
function setAxis<K extends StatusAxisKey>(key: K, value: FilterStatus[K]) {
|
|
onChange({ ...criteria, status: { ...criteria.status, [key]: value } });
|
|
}
|
|
|
|
function resetAll() {
|
|
onChange({ ...criteria, marks: [], status: { ...EMPTY_STATUS } });
|
|
}
|
|
|
|
// Watch / Has section counts (used for the footer breakdown text only).
|
|
const watchCount = (["watched", "rated"] as StatusAxisKey[]).filter((k) => criteria.status[k] !== "all").length;
|
|
const hasCount = (["collection", "tags", "video"] as StatusAxisKey[]).filter((k) => criteria.status[k] !== "all").length;
|
|
|
|
return (
|
|
<div className="relative" ref={wrapRef}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen((v) => !v)}
|
|
className={cn(
|
|
"flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-sm transition-colors min-w-[140px] justify-between",
|
|
active
|
|
? "bg-[var(--color-cyan)]/10 border-[var(--color-cyan)]/40 text-[var(--color-cyan)]"
|
|
: "glass glass-hover text-[var(--color-fg-dim)]",
|
|
)}
|
|
>
|
|
<span className="inline-flex items-center gap-1.5">
|
|
<Bookmark className="w-3.5 h-3.5" />
|
|
Filter
|
|
</span>
|
|
<span className="inline-flex items-center gap-1.5">
|
|
<span
|
|
className={cn(
|
|
"inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-[var(--color-cyan)] text-black text-[10px] font-mono font-bold tabular-nums",
|
|
!active && "invisible",
|
|
)}
|
|
>
|
|
{total || 0}
|
|
</span>
|
|
<ChevronDown className="w-3 h-3 opacity-70" />
|
|
</span>
|
|
</button>
|
|
|
|
{open && (
|
|
<div
|
|
className="absolute left-0 top-[calc(100%+6px)] z-30 bg-[var(--color-bg-0)] border border-[var(--color-glass-border-strong)] rounded-2xl shadow-2xl overflow-hidden w-[460px]"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{/* Section 1 — Marks (multi-select OR) */}
|
|
<div className="p-3 border-b border-[var(--color-glass-border)]">
|
|
<div className="grid grid-cols-4 gap-1">
|
|
{MARK_OPTIONS.map(({ value, label, Icon, tint }) => {
|
|
const on = criteria.marks.includes(value);
|
|
return (
|
|
<button
|
|
key={value}
|
|
type="button"
|
|
onClick={() => toggleMark(value)}
|
|
className={cn(
|
|
"flex items-center gap-1.5 px-2 py-1.5 rounded-md text-xs text-left transition-colors whitespace-nowrap",
|
|
on
|
|
? tint === "cyan" ? "bg-[var(--color-cyan)]/15 text-[var(--color-cyan)]"
|
|
: tint === "amber" ? "text-amber-200"
|
|
: tint === "violet" ? "bg-[var(--color-violet)]/15 text-[var(--color-violet)]"
|
|
: "bg-[var(--color-glass-strong)] text-[var(--color-fg)]"
|
|
: "text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]",
|
|
)}
|
|
style={on && tint === "amber" ? { background: "rgba(251,191,36,0.15)" } : undefined}
|
|
>
|
|
<span className={cn(
|
|
"w-4 h-4 rounded border flex items-center justify-center shrink-0",
|
|
on
|
|
? tint === "cyan" ? "bg-[var(--color-cyan)]/30 border-[var(--color-cyan)]"
|
|
: tint === "amber" ? "border-amber-400"
|
|
: tint === "violet" ? "bg-[var(--color-violet)]/30 border-[var(--color-violet)]"
|
|
: "bg-[var(--color-fg-dim)]/30 border-[var(--color-fg-dim)]"
|
|
: "border-[var(--color-glass-border-strong)]",
|
|
)}
|
|
style={on && tint === "amber" ? { background: "rgba(251,191,36,0.25)" } : undefined}>
|
|
{on && (
|
|
<Check
|
|
className="w-3 h-3"
|
|
strokeWidth={3}
|
|
style={{
|
|
color: tint === "cyan" ? "var(--color-cyan)"
|
|
: tint === "amber" ? "#fbbf24"
|
|
: tint === "violet" ? "var(--color-violet)"
|
|
: "var(--color-fg)",
|
|
}}
|
|
/>
|
|
)}
|
|
</span>
|
|
<Icon
|
|
className={cn("w-3.5 h-3.5", on && tint === "amber" && "fill-amber-300")}
|
|
style={{
|
|
color: tint === "cyan" ? "var(--color-cyan)"
|
|
: tint === "amber" ? "#fbbf24"
|
|
: tint === "violet" ? "var(--color-violet)"
|
|
: "var(--color-fg-muted)",
|
|
}}
|
|
/>
|
|
<span>{label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Section 2 — Watch State */}
|
|
<AxisSection axes={WATCH_AXES} status={criteria.status} onSet={setAxis} />
|
|
|
|
{/* Section 3 — Has… */}
|
|
<AxisSection axes={HAS_AXES} status={criteria.status} onSet={setAxis} />
|
|
|
|
{/* Footer */}
|
|
<div className="flex items-center justify-between px-4 py-2.5 bg-[var(--color-bg-1)] border-t border-[var(--color-glass-border)] text-[11px] font-mono text-[var(--color-fg-muted)]">
|
|
<span>
|
|
{total === 0
|
|
? "no filters set"
|
|
: `${total} filter${total === 1 ? "" : "s"}` +
|
|
(markCount > 0 ? ` · ${markCount} mark${markCount === 1 ? "" : "s"}` : "") +
|
|
(watchCount > 0 ? ` · ${watchCount} watch` : "") +
|
|
(hasCount > 0 ? ` · ${hasCount} has` : "")}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={resetAll}
|
|
disabled={!active}
|
|
className="text-[var(--color-cyan)] hover:underline disabled:opacity-40 disabled:no-underline"
|
|
>
|
|
Reset All
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AxisSection({
|
|
axes,
|
|
status,
|
|
onSet,
|
|
}: {
|
|
axes: AxisConfig[];
|
|
status: FilterStatus;
|
|
onSet: <K extends StatusAxisKey>(key: K, value: FilterStatus[K]) => void;
|
|
}) {
|
|
return (
|
|
<div className="p-3 border-b border-[var(--color-glass-border)] last:border-b-0 space-y-2.5">
|
|
{axes.map(({ key, label, Icon, options }) => {
|
|
const current = status[key];
|
|
return (
|
|
<div key={key}>
|
|
<div className="flex items-center gap-1.5 text-[10px] uppercase tracking-wider font-mono text-[var(--color-fg-muted)] mb-1">
|
|
<Icon className="w-3 h-3" />
|
|
{label}
|
|
</div>
|
|
<div className="flex border border-[var(--color-glass-border)] rounded-lg overflow-hidden">
|
|
{options.map((o) => {
|
|
const on = current === o.value;
|
|
return (
|
|
<button
|
|
key={o.value}
|
|
type="button"
|
|
onClick={() => onSet(key, o.value as FilterStatus[typeof key])}
|
|
className={cn(
|
|
"flex-1 text-center px-2 py-1.5 text-xs font-mono whitespace-nowrap transition-colors border-r border-[var(--color-glass-border)] last:border-r-0",
|
|
on
|
|
? "bg-[var(--color-cyan)]/20 text-[var(--color-cyan)] font-bold"
|
|
: "text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]",
|
|
)}
|
|
>
|
|
{o.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|