Initial commit
This commit is contained in:
admin
@@ -0,0 +1,379 @@
|
||||
"use client";
|
||||
import { useEffect, useState, useTransition } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Check, FolderHeart, Pencil, Type, X } from "lucide-react";
|
||||
import { reorderCollection, renameCollection } from "@/app/actions/collections";
|
||||
import { thumbUrl, collectionCoverUrl } from "@/lib/assetUrls";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { CollectionSelectionProvider, useCollectionSelection } from "./CollectionSelectionProvider";
|
||||
import { CollectionCoverEditor } from "./CollectionCoverEditor";
|
||||
|
||||
interface CollectionListItem {
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string | null;
|
||||
cover_thumb: string | null;
|
||||
first_thumb: string | null;
|
||||
count: number;
|
||||
coverPortraitPath: string | null;
|
||||
coverPortraitZoom: number;
|
||||
coverPortraitOffsetX: number;
|
||||
coverPortraitOffsetY: number;
|
||||
coverLandscapePath: string | null;
|
||||
coverLandscapeZoom: number;
|
||||
coverLandscapeOffsetX: number;
|
||||
coverLandscapeOffsetY: number;
|
||||
}
|
||||
|
||||
const PHI = 1.618;
|
||||
// Canonical frame widths used by the cover editor preview. The card
|
||||
// reproduces editor offsets via `cqw` so a 50px offset on a 583px-wide
|
||||
// editor preview scales correctly on a 430px-wide grid card.
|
||||
const FRAME_H = 360;
|
||||
const CANONICAL_PORTRAIT_W = Math.round(FRAME_H / PHI);
|
||||
const CANONICAL_LANDSCAPE_W = Math.round(FRAME_H * PHI);
|
||||
|
||||
export function ReorderableCollectionsIndex({
|
||||
items,
|
||||
view = "landscape",
|
||||
}: {
|
||||
items: CollectionListItem[];
|
||||
view?: "portrait" | "landscape";
|
||||
}) {
|
||||
return (
|
||||
<CollectionSelectionProvider>
|
||||
<Inner items={items} view={view} />
|
||||
</CollectionSelectionProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function Inner({ items: initial, view }: { items: CollectionListItem[]; view: "portrait" | "landscape" }) {
|
||||
const sel = useCollectionSelection();
|
||||
const [items, setItems] = useState(initial);
|
||||
const [draggingId, setDraggingId] = useState<number | null>(null);
|
||||
const [dropBeforeId, setDropBeforeId] = useState<number | "end" | null>(null);
|
||||
const [editing, setEditing] = useState<CollectionListItem | null>(null);
|
||||
const [renamingId, setRenamingId] = useState<number | null>(null);
|
||||
const [draftName, setDraftName] = useState("");
|
||||
const [renamePending, setRenamePending] = useState(false);
|
||||
const [, start] = useTransition();
|
||||
const router = useRouter();
|
||||
|
||||
function startRename(c: CollectionListItem) {
|
||||
setRenamingId(c.id);
|
||||
setDraftName(c.name);
|
||||
}
|
||||
function cancelRename() {
|
||||
setRenamingId(null);
|
||||
setDraftName("");
|
||||
}
|
||||
async function commitRename(c: CollectionListItem) {
|
||||
const next = draftName.trim();
|
||||
if (!next || next === c.name) { cancelRename(); return; }
|
||||
setRenamePending(true);
|
||||
await renameCollection(c.id, next);
|
||||
setRenamePending(false);
|
||||
setRenamingId(null);
|
||||
setDraftName("");
|
||||
router.refresh();
|
||||
}
|
||||
|
||||
// Reconcile when the prop changes (after server refresh). Includes
|
||||
// cover-art fields so save-and-router.refresh() picks up new
|
||||
// transforms even when the row order is unchanged. Runs in an effect
|
||||
// (not during render) so we never call setState mid-render.
|
||||
useEffect(() => {
|
||||
setItems(initial);
|
||||
}, [initial]);
|
||||
|
||||
function onDragStart(id: number, e: React.DragEvent) {
|
||||
setDraggingId(id);
|
||||
e.dataTransfer.effectAllowed = "move";
|
||||
e.dataTransfer.setData("text/plain", String(id));
|
||||
}
|
||||
|
||||
function onDragOverCard(id: number, e: React.DragEvent) {
|
||||
if (draggingId == null) return;
|
||||
e.preventDefault();
|
||||
setDropBeforeId(id);
|
||||
}
|
||||
|
||||
function onDragOverEnd(e: React.DragEvent) {
|
||||
if (draggingId == null) return;
|
||||
e.preventDefault();
|
||||
setDropBeforeId("end");
|
||||
}
|
||||
|
||||
function commitDrop() {
|
||||
if (draggingId == null || dropBeforeId == null) {
|
||||
setDraggingId(null);
|
||||
setDropBeforeId(null);
|
||||
return;
|
||||
}
|
||||
const movedId = draggingId;
|
||||
const beforeId = dropBeforeId === "end" ? null : dropBeforeId;
|
||||
if (movedId === beforeId) {
|
||||
setDraggingId(null);
|
||||
setDropBeforeId(null);
|
||||
return;
|
||||
}
|
||||
setItems((cur) => {
|
||||
const fromIdx = cur.findIndex((x) => x.id === movedId);
|
||||
if (fromIdx === -1) return cur;
|
||||
const moved = cur[fromIdx];
|
||||
const without = [...cur.slice(0, fromIdx), ...cur.slice(fromIdx + 1)];
|
||||
let toIdx = beforeId == null ? without.length : without.findIndex((x) => x.id === beforeId);
|
||||
if (toIdx === -1) toIdx = without.length;
|
||||
return [...without.slice(0, toIdx), moved, ...without.slice(toIdx)];
|
||||
});
|
||||
setDraggingId(null);
|
||||
setDropBeforeId(null);
|
||||
start(async () => {
|
||||
try {
|
||||
await reorderCollection(movedId, beforeId);
|
||||
router.refresh();
|
||||
} catch (err) {
|
||||
// Revert the optimistic reorder so the UI doesn't lie about
|
||||
// the persisted order.
|
||||
console.error("[reorderCollection] failed:", err);
|
||||
setItems(initial);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onDragEnd() {
|
||||
setDraggingId(null);
|
||||
setDropBeforeId(null);
|
||||
}
|
||||
|
||||
const isLandscape = view === "landscape";
|
||||
const gridCls = isLandscape
|
||||
? "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
|
||||
: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4";
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
key={view}
|
||||
className={cn("fade-in", gridCls)}
|
||||
onDragOver={(e) => { if (draggingId != null) e.preventDefault(); }}
|
||||
onDrop={commitDrop}
|
||||
onDragEnd={onDragEnd}
|
||||
>
|
||||
{items.map((c) => {
|
||||
const customPath = isLandscape ? c.coverLandscapePath : c.coverPortraitPath;
|
||||
const customZoom = isLandscape ? c.coverLandscapeZoom : c.coverPortraitZoom;
|
||||
const customOffsetX = isLandscape ? c.coverLandscapeOffsetX : c.coverPortraitOffsetX;
|
||||
const customOffsetY = isLandscape ? c.coverLandscapeOffsetY : c.coverPortraitOffsetY;
|
||||
const fallbackThumb = c.cover_thumb ?? c.first_thumb;
|
||||
const selected = sel.has(c.id);
|
||||
const anySelected = sel.ids.size > 0;
|
||||
return (
|
||||
<div
|
||||
key={c.id}
|
||||
draggable={renamingId !== c.id}
|
||||
onDragStart={(e) => onDragStart(c.id, e)}
|
||||
onDragOver={(e) => onDragOverCard(c.id, e)}
|
||||
onDragEnd={onDragEnd}
|
||||
className={cn(
|
||||
"relative group/drag",
|
||||
draggingId === c.id && "opacity-40",
|
||||
dropBeforeId === c.id && "ring-2 ring-[var(--color-cyan)] ring-offset-2 ring-offset-[var(--color-bg-0)] rounded-2xl",
|
||||
selected && "ring-2 ring-[var(--color-cyan)] shadow-[var(--shadow-glow-cyan)] rounded-2xl",
|
||||
anySelected && !selected && "opacity-70 hover:opacity-100",
|
||||
)}
|
||||
>
|
||||
<Link
|
||||
href={`/collection/${c.slug}`}
|
||||
draggable={false}
|
||||
onClick={(e) => {
|
||||
if (anySelected) {
|
||||
e.preventDefault();
|
||||
sel.toggle(c.id);
|
||||
}
|
||||
}}
|
||||
className="group glass glass-hover rounded-2xl overflow-hidden block"
|
||||
>
|
||||
<div
|
||||
className="relative bg-[var(--color-bg-1)] overflow-hidden"
|
||||
style={{
|
||||
aspectRatio: isLandscape ? `${PHI} / 1` : `1 / ${PHI}`,
|
||||
containerType: "inline-size",
|
||||
}}
|
||||
>
|
||||
{customPath ? (
|
||||
/* eslint-disable-next-line @next/next/no-img-element */
|
||||
<img
|
||||
src={collectionCoverUrl(customPath)}
|
||||
alt=""
|
||||
draggable={false}
|
||||
className="absolute top-1/2 left-1/2 max-w-none origin-center pointer-events-none"
|
||||
style={{
|
||||
transform: `translate(-50%, -50%) translate(${customOffsetX / (isLandscape ? CANONICAL_LANDSCAPE_W : CANONICAL_PORTRAIT_W) * 100}cqw, ${customOffsetY / (isLandscape ? CANONICAL_LANDSCAPE_W : CANONICAL_PORTRAIT_W) * 100}cqw) scale(${customZoom})`,
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
}}
|
||||
/>
|
||||
) : fallbackThumb ? (
|
||||
/* eslint-disable-next-line @next/next/no-img-element */
|
||||
<img
|
||||
src={thumbUrl({ thumbPath: fallbackThumb, code: c.name })}
|
||||
alt=""
|
||||
draggable={false}
|
||||
className="absolute inset-0 w-full h-full object-cover group-hover:scale-[1.02] transition-transform"
|
||||
/>
|
||||
) : (
|
||||
<div className="absolute inset-0 grid place-items-center">
|
||||
<FolderHeart className="w-10 h-10 text-[var(--color-fg-muted)]" />
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="absolute top-3 left-3 text-[10px] uppercase tracking-wider font-mono font-semibold px-2 py-0.5 rounded-full bg-black/80 backdrop-blur-md text-[var(--color-cyan)] shadow-md"
|
||||
style={{
|
||||
border: "1px solid rgba(34,211,238,0.4)",
|
||||
textShadow: "0 1px 2px rgba(0,0,0,0.9)",
|
||||
}}
|
||||
>
|
||||
{c.count} Item{c.count === 1 ? "" : "s"}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
draggable={false}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
sel.toggle(c.id);
|
||||
}}
|
||||
aria-label={selected ? "Deselect" : "Select"}
|
||||
className={cn(
|
||||
"absolute top-3 right-3 w-8 h-8 rounded-md grid place-items-center transition-all backdrop-blur-md border-2",
|
||||
selected
|
||||
? "bg-[var(--color-cyan)] border-[var(--color-cyan)] text-black shadow-[var(--shadow-glow-cyan)]"
|
||||
: "bg-black/40 border-white/50 text-transparent",
|
||||
!selected && !anySelected && "opacity-0 group-hover/drag:opacity-100",
|
||||
)}
|
||||
>
|
||||
<Check className="w-4 h-4" strokeWidth={3} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
draggable={false}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setEditing(c);
|
||||
}}
|
||||
aria-label="Edit cover"
|
||||
title="Edit cover"
|
||||
className={cn(
|
||||
"absolute bottom-3 right-3 w-8 h-8 rounded-md grid place-items-center transition-all backdrop-blur-md border-2",
|
||||
"bg-black/60 border-white/30 text-white hover:bg-[var(--color-cyan)]/30 hover:border-[var(--color-cyan)] hover:text-[var(--color-cyan)]",
|
||||
"opacity-0 group-hover/drag:opacity-100",
|
||||
)}
|
||||
>
|
||||
<Pencil className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-3">
|
||||
{renamingId === c.id ? (
|
||||
<div
|
||||
className="flex items-center gap-1 h-7"
|
||||
onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<input
|
||||
autoFocus
|
||||
value={draftName}
|
||||
onChange={(e) => setDraftName(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") { e.preventDefault(); commitRename(c); }
|
||||
if (e.key === "Escape") { e.preventDefault(); cancelRename(); }
|
||||
}}
|
||||
disabled={renamePending}
|
||||
maxLength={120}
|
||||
className="flex-1 min-w-0 h-full glass rounded-md px-2 text-sm outline-none focus:border-[var(--color-cyan)]"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => { e.preventDefault(); e.stopPropagation(); commitRename(c); }}
|
||||
disabled={renamePending || !draftName.trim() || draftName.trim() === c.name}
|
||||
className="flex items-center justify-center w-6 h-6 rounded bg-[var(--color-cyan)] text-black disabled:opacity-40"
|
||||
title="Save"
|
||||
>
|
||||
<Check className="w-3 h-3" strokeWidth={3} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => { e.preventDefault(); e.stopPropagation(); cancelRename(); }}
|
||||
disabled={renamePending}
|
||||
className="flex items-center justify-center w-6 h-6 rounded glass text-[var(--color-fg-muted)] hover:text-[var(--color-fg)]"
|
||||
title="Cancel"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5 h-7 min-w-0">
|
||||
<div className="font-medium truncate flex-1 min-w-0">{c.name}</div>
|
||||
<button
|
||||
type="button"
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
onClick={(e) => { e.preventDefault(); e.stopPropagation(); startRename(c); }}
|
||||
title="Rename"
|
||||
aria-label="Rename collection"
|
||||
className="flex-shrink-0 w-6 h-6 grid place-items-center rounded text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)] opacity-0 group-hover/drag:opacity-100 transition-opacity"
|
||||
>
|
||||
<Type className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{c.description && (
|
||||
<div className="text-xs text-[var(--color-fg-muted)] truncate mt-0.5">{c.description}</div>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div
|
||||
onDragOver={onDragOverEnd}
|
||||
className={cn(
|
||||
"min-h-[120px] rounded-2xl border-2 border-dashed flex items-center justify-center text-xs text-[var(--color-fg-muted)] transition-colors",
|
||||
dropBeforeId === "end"
|
||||
? "border-[var(--color-cyan)] bg-[var(--color-cyan)]/5 text-[var(--color-cyan)]"
|
||||
: "border-[var(--color-glass-border)]",
|
||||
)}
|
||||
>
|
||||
{draggingId != null ? "Drop here for end of list" : ""}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{editing && (
|
||||
<CollectionCoverEditor
|
||||
collectionId={editing.id}
|
||||
collectionName={editing.name}
|
||||
initialSlot={view}
|
||||
initial={{
|
||||
portrait: {
|
||||
path: editing.coverPortraitPath,
|
||||
zoom: editing.coverPortraitZoom,
|
||||
offsetX: editing.coverPortraitOffsetX,
|
||||
offsetY: editing.coverPortraitOffsetY,
|
||||
},
|
||||
landscape: {
|
||||
path: editing.coverLandscapePath,
|
||||
zoom: editing.coverLandscapeZoom,
|
||||
offsetX: editing.coverLandscapeOffsetX,
|
||||
offsetY: editing.coverLandscapeOffsetY,
|
||||
},
|
||||
}}
|
||||
onClose={() => setEditing(null)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user