Initial commit

2026-05-26 22:46:00 +02:00
commit 7e2c2ff89c
256 changed files with 51523 additions and 0 deletions
@@ -0,0 +1,28 @@
+"use client";
+import { useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { Trash2 } from "lucide-react";
+import { emptyTrash } from "@/app/actions/trash";
+
+export function EmptyTrashButton({ count }: { count: number }) {
+  const [pending, start] = useTransition();
+  const router = useRouter();
+  if (count === 0) return null;
+  const onClick = () => {
+    if (!confirm(`Permanently delete ${count} image${count === 1 ? "" : "s"}? Cannot be undone.`)) return;
+    start(async () => {
+      await emptyTrash();
+      router.refresh();
+    });
+  };
+  return (
+    <button
+      onClick={onClick}
+      disabled={pending}
+      className="flex items-center gap-1.5 text-sm px-3 py-1.5 rounded-lg bg-[var(--color-coral)]/15 text-[var(--color-coral)] border border-[var(--color-coral)]/40 hover:bg-[var(--color-coral)]/25 disabled:opacity-50"
+    >
+      <Trash2 className="w-4 h-4" />
+      {pending ? "Emptying…" : "Empty trash"}
+    </button>
+  );
+}
@@ -0,0 +1,80 @@
+"use client";
+import { useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { RotateCcw, Trash2 } from "lucide-react";
+import { restoreImages, purgeFromTrash } from "@/app/actions/trash";
+import { relativeTime } from "@/lib/utils";
+import { thumbUrl } from "@/lib/assetUrls";
+
+export interface TrashCardImage {
+  id: number;
+  thumbPath: string;
+  width: number;
+  height: number;
+  code: string | null;
+  title: string | null;
+  rating: number | null;
+  watched: boolean;
+  studioName: string | null;
+  deletedAt: number;
+}
+
+export function TrashCard({ image }: { image: TrashCardImage }) {
+  const [pending, start] = useTransition();
+  const router = useRouter();
+
+  const onRestore = () => {
+    start(async () => {
+      await restoreImages([image.id]);
+      router.refresh();
+    });
+  };
+  const onPurge = () => {
+    if (!confirm("Permanently delete this cover? Cannot be undone.")) return;
+    start(async () => {
+      await purgeFromTrash([image.id]);
+      router.refresh();
+    });
+  };
+
+  return (
+    <div className="group relative block rounded-2xl overflow-hidden glass" style={{ breakInside: "avoid" }}>
+      <div className="relative">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={thumbUrl({ thumbPath: image.thumbPath, code: image.code, id: image.id })}
+          alt={image.title ?? image.code ?? ""}
+          loading="lazy"
+          width={image.width}
+          height={image.height}
+          className="w-full h-auto block opacity-70"
+        />
+        {image.code && (
+          <span className="absolute top-3 left-3 text-[10px] uppercase tracking-wider font-mono px-2 py-0.5 rounded-full glass-strong text-[var(--color-cyan)]">
+            {image.code}
+          </span>
+        )}
+        <span className="absolute top-3 right-3 text-[10px] uppercase tracking-wider font-mono px-2 py-0.5 rounded-full backdrop-blur-md border border-[var(--color-coral)]/30 text-[var(--color-coral)] bg-[var(--color-coral)]/10">
+          deleted {relativeTime(image.deletedAt)}
+        </span>
+
+        <div className="absolute inset-x-0 bottom-0 p-3 bg-gradient-to-t from-black/85 via-black/55 to-transparent flex items-center gap-2">
+          <button
+            onClick={onRestore}
+            disabled={pending}
+            className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg bg-[var(--color-cyan)]/20 text-[var(--color-cyan)] border border-[var(--color-cyan)]/40 hover:bg-[var(--color-cyan)]/30 disabled:opacity-50"
+          >
+            <RotateCcw className="w-3.5 h-3.5" /> Restore
+          </button>
+          <button
+            onClick={onPurge}
+            disabled={pending}
+            className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg bg-[var(--color-coral)]/15 text-[var(--color-coral)] border border-[var(--color-coral)]/40 hover:bg-[var(--color-coral)]/25 disabled:opacity-50"
+          >
+            <Trash2 className="w-3.5 h-3.5" /> Delete forever
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,14 @@
+import { TrashCard, type TrashCardImage } from "./TrashCard";
+
+export function TrashGrid({ images }: { images: TrashCardImage[] }) {
+  if (images.length === 0) return null;
+  return (
+    <div className="columns-2 sm:columns-3 md:columns-4 xl:columns-5 gap-4 [column-fill:_balance]">
+      {images.map((img) => (
+        <div key={img.id} className="mb-4">
+          <TrashCard image={img} />
+        </div>
+      ))}
+    </div>
+  );
+}
@@ -0,0 +1,86 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { Trash2, X } from "lucide-react";
+import { useTrashPanel } from "./TrashPanelProvider";
+import { TrashGrid } from "./TrashGrid";
+import { EmptyTrashButton } from "./EmptyTrashButton";
+import { useClickOutside } from "@/lib/hooks/useClickOutside";
+import type { TrashCardImage } from "./TrashCard";
+
+interface PanelData {
+  images: TrashCardImage[];
+  retentionDays: number;
+}
+
+export function TrashPanel({ data }: { data: PanelData }) {
+  const { open, close } = useTrashPanel();
+  const ref = useRef<HTMLDivElement>(null);
+  useClickOutside(ref, close, open);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") close(); };
+    window.addEventListener("keydown", onKey);
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.body.style.overflow = "";
+    };
+  }, [open, close]);
+
+  if (!open) return null;
+
+  const { images, retentionDays } = data;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 backdrop-blur-sm grid place-items-center p-4 sm:p-8"
+      style={{ background: "color-mix(in oklch, var(--color-bg-0) 65%, transparent)" }}
+    >
+      <div
+        ref={ref}
+        className="w-full max-w-[1400px] h-[min(900px,calc(100vh-4rem))] flex flex-col rounded-2xl border border-[var(--color-glass-border-strong)] backdrop-blur-2xl overflow-hidden shadow-2xl"
+        style={{ background: "color-mix(in oklch, var(--color-bg-0) 96%, transparent)" }}
+      >
+        <header className="flex items-center justify-between px-6 py-4 border-b border-[var(--color-glass-border)]">
+          <div>
+            <div className="flex items-center gap-2">
+              <Trash2 className="w-5 h-5 text-[var(--color-coral)]" />
+              <h2 className="text-xl font-semibold tracking-tight">Recycle Bin</h2>
+            </div>
+            <p className="text-xs text-[var(--color-fg-dim)] mt-1">
+              {images.length} image{images.length === 1 ? "" : "s"}
+              {retentionDays > 0 && images.length > 0 && (
+                <span className="text-[var(--color-fg-muted)]"> · auto-purged after {retentionDays} day{retentionDays === 1 ? "" : "s"}</span>
+              )}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <EmptyTrashButton count={images.length} />
+            <button
+              onClick={close}
+              aria-label="Close trash"
+              className="w-8 h-8 grid place-items-center rounded-lg text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+        </header>
+
+        <div className="flex-1 overflow-y-auto p-6">
+          {images.length === 0 ? (
+            <div className="glass rounded-2xl p-card text-center max-w-md mx-auto">
+              <Trash2 className="w-10 h-10 mx-auto text-[var(--color-fg-dim)] mb-label" />
+              <h3 className="text-xl font-medium">Trash Is Empty</h3>
+              <p className="text-[var(--color-fg-dim)] mt-1 text-sm">
+                Deleted images appear here for {retentionDays > 0 ? `${retentionDays} day${retentionDays === 1 ? "" : "s"}` : "as long as you keep them"} before they&rsquo;re gone for good.
+              </p>
+            </div>
+          ) : (
+            <TrashGrid images={images} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,19 @@
+"use client";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+
+type Ctx = { open: boolean; toggle: () => void; close: () => void };
+const C = createContext<Ctx | null>(null);
+
+export function TrashPanelProvider({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const toggle = useCallback(() => setOpen((o) => !o), []);
+  const close = useCallback(() => setOpen(false), []);
+  const value = useMemo<Ctx>(() => ({ open, toggle, close }), [open, toggle, close]);
+  return <C.Provider value={value}>{children}</C.Provider>;
+}
+
+export function useTrashPanel() {
+  const ctx = useContext(C);
+  if (!ctx) throw new Error("useTrashPanel must be used within TrashPanelProvider");
+  return ctx;
+}