Initial commit
This commit is contained in:
admin
@@ -0,0 +1,277 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user