admin
96 lines
3.1 KiB
TypeScript
96 lines
3.1 KiB
TypeScript
"use client";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { Eye, EyeOff, Gem, Star, MinusCircle, ChevronDown, Tag } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Action = "watched" | "unwatched" | "vip" | "favorite" | "unmark";
|
|
|
|
export function MarkAsMenu({
|
|
onAction,
|
|
disabled,
|
|
}: {
|
|
onAction: (action: Action) => void;
|
|
disabled?: boolean;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
const wrapRef = useRef<HTMLDivElement>(null);
|
|
|
|
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 pick(action: Action) {
|
|
setOpen(false);
|
|
onAction(action);
|
|
}
|
|
|
|
return (
|
|
<div className="relative" ref={wrapRef}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen((v) => !v)}
|
|
disabled={disabled}
|
|
className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg glass hover:text-[var(--color-fg)] disabled:opacity-40"
|
|
>
|
|
<Tag className="w-3.5 h-3.5" />
|
|
Mark As
|
|
<ChevronDown className="w-3 h-3 opacity-70" />
|
|
</button>
|
|
|
|
{open && (
|
|
<div
|
|
className="absolute right-0 bottom-[calc(100%+6px)] z-30 bg-[var(--color-bg-0)] border border-[var(--color-glass-border-strong)] rounded-xl shadow-2xl p-1 w-52"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<Row icon={Eye} label="Watched" colorClass="text-[var(--color-mint)]" onClick={() => pick("watched")} />
|
|
<Row icon={EyeOff} label="Unwatched" onClick={() => pick("unwatched")} />
|
|
<div className="h-px bg-[var(--color-glass-border)] my-1" />
|
|
<Row icon={Gem} label="VIP" colorClass="text-[var(--color-cyan)]" onClick={() => pick("vip")} />
|
|
<Row icon={Star} label="Favorite" colorClass="text-amber-300" iconStyle={{ fill: "#fbbf24" }} onClick={() => pick("favorite")} />
|
|
<Row icon={MinusCircle} label="Unmark" colorClass="text-[var(--color-fg-muted)]" onClick={() => pick("unmark")} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Row({
|
|
icon: Icon,
|
|
label,
|
|
onClick,
|
|
colorClass,
|
|
iconStyle,
|
|
}: {
|
|
icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
|
|
label: string;
|
|
onClick: () => void;
|
|
colorClass?: string;
|
|
iconStyle?: React.CSSProperties;
|
|
}) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
className={cn(
|
|
"w-full flex items-center gap-2.5 px-2 py-1.5 rounded-md text-sm text-left transition-colors hover:bg-[var(--color-glass)]",
|
|
colorClass ?? "text-[var(--color-fg-dim)]",
|
|
)}
|
|
>
|
|
<Icon className="w-3.5 h-3.5" style={iconStyle} />
|
|
<span className="flex-1">{label}</span>
|
|
</button>
|
|
);
|
|
}
|