Initial commit

2026-05-26 22:46:00 +02:00
commit 7e2c2ff89c
256 changed files with 51523 additions and 0 deletions
@@ -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>
+  );
+}