Initial commit

2026-05-26 22:46:00 +02:00
commit 7e2c2ff89c
256 changed files with 51523 additions and 0 deletions
@@ -0,0 +1,133 @@
+"use client";
+import { useEffect, useRef, useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { Tag, ChevronDown, Eye, EyeOff, Gem, Star, Package, MinusCircle } from "lucide-react";
+import { useSelection } from "@/components/select/SelectionProvider";
+import { bulkSetMark, bulkSetWatched, bulkSetOwned } from "@/app/actions/bulk";
+import { dispatchQueueRemove } from "@/components/queue/watchQueueEvents";
+import { cn } from "@/lib/utils";
+
+type Action = "watched" | "unwatched" | "vip" | "favorite" | "owned" | "unmark";
+
+export function MarkActionPopover() {
+  const sel = useSelection();
+  const count = sel.ids.size;
+  const enabled = count > 0;
+
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const [pending, start] = useTransition();
+  const router = useRouter();
+
+  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]);
+
+  // If selection drains while menu is open, close it.
+  useEffect(() => {
+    if (!enabled && open) setOpen(false);
+  }, [enabled, open]);
+
+  function pick(action: Action) {
+    setOpen(false);
+    const ids = Array.from(sel.ids);
+    if (ids.length === 0) return;
+    start(async () => {
+      if (action === "watched") { await bulkSetWatched(ids, true); dispatchQueueRemove(ids); }
+      else if (action === "unwatched") await bulkSetWatched(ids, false);
+      else if (action === "vip") await bulkSetMark(ids, "vip");
+      else if (action === "favorite") await bulkSetMark(ids, "favorite");
+      else if (action === "owned") await bulkSetOwned(ids, true);
+      else if (action === "unmark") await bulkSetMark(ids, "unmarked");
+      router.refresh();
+    });
+  }
+
+  return (
+    <div className="relative" ref={wrapRef}>
+      <button
+        type="button"
+        onClick={() => enabled && setOpen((v) => !v)}
+        disabled={!enabled || pending}
+        title={enabled ? `Mark ${count} selected cover${count === 1 ? "" : "s"}` : "Select covers first"}
+        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",
+          enabled
+            ? "bg-[var(--color-cyan)]/10 border-[var(--color-cyan)]/40 text-[var(--color-cyan)] hover:bg-[var(--color-cyan)]/20"
+            : "glass text-[var(--color-fg-muted)] opacity-50 cursor-not-allowed",
+        )}
+      >
+        <Tag className="w-3.5 h-3.5" />
+        Mark As
+        <span
+          className={cn(
+            "inline-flex items-center justify-center min-w-[22px] h-4 px-1 rounded-full text-black text-[10px] font-mono font-bold tabular-nums bg-[var(--color-cyan)]",
+            !enabled && "invisible",
+          )}
+        >
+          {count}
+        </span>
+        <ChevronDown className="w-3 h-3 opacity-70" />
+      </button>
+
+      {open && enabled && (
+        <div
+          className="absolute left-0 top-[calc(100%+6px)] z-30 bg-[var(--color-bg-0)] border border-[var(--color-glass-border-strong)] rounded-xl shadow-2xl p-1 w-56"
+          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")} />
+          <Divider />
+          <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={Package} label="Owned" colorClass="text-[var(--color-violet)]" onClick={() => pick("owned")} />
+          <Row icon={MinusCircle} label="Unmark VIP/Fav" colorClass="text-[var(--color-fg-muted)]" onClick={() => pick("unmark")} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Divider() {
+  return <div className="h-px bg-[var(--color-glass-border)] my-1" />;
+}
+
+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>
+  );
+}