505 lines
18 KiB
TypeScript
505 lines
18 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* EditCollectionDrawer — single-stop editor for a collection.
|
|
*
|
|
* • Title, description, public/private toggle
|
|
* • Cover image upload (signed-URL PUT to R2)
|
|
* • Reorder posts via drag-and-drop, toggle posts in/out of the collection
|
|
* • Delete button at the bottom (with confirm modal)
|
|
*
|
|
* Right-side panel on `md+`, bottom drawer on mobile. The body scrolls;
|
|
* header and footer stay pinned so action buttons are always reachable.
|
|
*
|
|
* Drag-and-drop is powered by framer-motion's Reorder primitives so we
|
|
* get touch + mouse support without an extra dependency. Each row has a
|
|
* dedicated grip handle (Reorder.Item with `dragListener={false}` plus
|
|
* `dragControls`) so the rest of the row stays clickable for toggling.
|
|
*/
|
|
|
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
import Image from "next/image";
|
|
import { Reorder, useDragControls } from "framer-motion";
|
|
import {
|
|
Globe,
|
|
GripVertical,
|
|
ImagePlus,
|
|
Loader2,
|
|
Lock,
|
|
Trash2,
|
|
X,
|
|
} from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import {
|
|
Drawer,
|
|
DrawerClose,
|
|
DrawerContent,
|
|
DrawerHeader,
|
|
DrawerTitle,
|
|
} from "@/components/ui/drawer";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { ConfirmModal } from "@/components/ui/confirm-modal";
|
|
import { useMediaQuery } from "@/components/selection-toolbar/shared";
|
|
import {
|
|
collections,
|
|
posts as postsApi,
|
|
SocialError,
|
|
type Collection,
|
|
type Post,
|
|
} from "@/lib/social";
|
|
|
|
type SavedShape = {
|
|
collection: Collection;
|
|
posts: Post[];
|
|
};
|
|
|
|
export function EditCollectionDrawer({
|
|
open,
|
|
onClose,
|
|
collection,
|
|
currentPostIds,
|
|
onSaved,
|
|
onDeleted,
|
|
}: {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
collection: Collection;
|
|
/** Post ids currently in the collection, in display order. Used to
|
|
* seed the drag-sortable list and to diff against the user's
|
|
* selection + new ordering on save. */
|
|
currentPostIds: string[];
|
|
onSaved: (next: SavedShape) => void;
|
|
onDeleted: () => void;
|
|
}) {
|
|
const isMobile = useMediaQuery("(max-width: 767px)");
|
|
const direction: "bottom" | "right" = isMobile ? "bottom" : "right";
|
|
|
|
const fileInput = useRef<HTMLInputElement>(null);
|
|
const [title, setTitle] = useState(collection.title);
|
|
const [description, setDescription] = useState(collection.description ?? "");
|
|
const [isPublic, setIsPublic] = useState(collection.is_public);
|
|
const [coverURL, setCoverURL] = useState<string | null>(collection.cover_url);
|
|
|
|
// Source of truth for the in-collection set + order: a plain array of
|
|
// post ids. We push/pull from this when toggling, and reorder it on
|
|
// drag. On save we diff against `currentPostIds` to find adds/removes
|
|
// and push the final order to /items/order.
|
|
const [orderedIds, setOrderedIds] = useState<string[]>(currentPostIds);
|
|
|
|
const [allPosts, setAllPosts] = useState<Post[] | null>(null);
|
|
const [loadingPosts, setLoadingPosts] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
const [uploadingCover, setUploadingCover] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [confirmDelete, setConfirmDelete] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
setTitle(collection.title);
|
|
setDescription(collection.description ?? "");
|
|
setIsPublic(collection.is_public);
|
|
setCoverURL(collection.cover_url);
|
|
setOrderedIds(currentPostIds);
|
|
setError(null);
|
|
}, [open, collection, currentPostIds]);
|
|
|
|
useEffect(() => {
|
|
if (!open || allPosts !== null) return;
|
|
setLoadingPosts(true);
|
|
postsApi
|
|
.mine()
|
|
.then((rows) => setAllPosts(rows ?? []))
|
|
.catch((err) =>
|
|
setError(err instanceof SocialError ? err.message : "Could not load posts."),
|
|
)
|
|
.finally(() => setLoadingPosts(false));
|
|
}, [open, allPosts]);
|
|
|
|
// Partition the user's posts into "in the collection" (ordered by
|
|
// `orderedIds`) and "available to add" (everything else, stable).
|
|
const { inCollection, available } = useMemo(() => {
|
|
if (!allPosts) return { inCollection: [] as Post[], available: [] as Post[] };
|
|
const byId = new Map(allPosts.map((p) => [p.id, p]));
|
|
const selected = new Set(orderedIds);
|
|
const inCollection = orderedIds
|
|
.map((id) => byId.get(id))
|
|
.filter((p): p is Post => !!p);
|
|
const available = allPosts.filter((p) => !selected.has(p.id));
|
|
return { inCollection, available };
|
|
}, [allPosts, orderedIds]);
|
|
|
|
function addToCollection(id: string) {
|
|
setOrderedIds((prev) => (prev.includes(id) ? prev : [...prev, id]));
|
|
}
|
|
|
|
function removeFromCollection(id: string) {
|
|
setOrderedIds((prev) => prev.filter((x) => x !== id));
|
|
}
|
|
|
|
async function onCoverChange(e: React.ChangeEvent<HTMLInputElement>) {
|
|
const f = e.target.files?.[0];
|
|
if (fileInput.current) fileInput.current.value = "";
|
|
if (!f) return;
|
|
setUploadingCover(true);
|
|
try {
|
|
const url = await collections.uploadCover(f);
|
|
setCoverURL(url);
|
|
} catch (err) {
|
|
toast.error(
|
|
err instanceof SocialError ? err.message : "Cover upload failed.",
|
|
);
|
|
} finally {
|
|
setUploadingCover(false);
|
|
}
|
|
}
|
|
|
|
function removeCover() {
|
|
setCoverURL(null);
|
|
}
|
|
|
|
async function save() {
|
|
setSaving(true);
|
|
setError(null);
|
|
try {
|
|
const before = new Set(currentPostIds);
|
|
const after = new Set(orderedIds);
|
|
const toAdd = orderedIds.filter((id) => !before.has(id));
|
|
const toRemove = currentPostIds.filter((id) => !after.has(id));
|
|
|
|
await collections.update(collection.id, {
|
|
title,
|
|
description,
|
|
is_public: isPublic,
|
|
cover_url: coverURL ?? "",
|
|
});
|
|
// Sequential mutations — the count trigger races on parallel calls.
|
|
for (const id of toAdd) await collections.addItem(collection.id, id);
|
|
for (const id of toRemove)
|
|
await collections.removeItem(collection.id, id);
|
|
// Final position pass — overwrites whatever positions addItem
|
|
// assigned (MAX+1) so the user's drag order wins.
|
|
if (orderedIds.length > 0) {
|
|
await collections.reorderItems(collection.id, orderedIds);
|
|
}
|
|
|
|
const fresh = await collections.get(collection.id);
|
|
onSaved({ collection: fresh.collection, posts: fresh.posts ?? [] });
|
|
toast.success("Collection updated");
|
|
onClose();
|
|
} catch (err) {
|
|
setError(err instanceof SocialError ? err.message : "Save failed.");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
async function performDelete() {
|
|
try {
|
|
await collections.delete(collection.id);
|
|
onDeleted();
|
|
} catch (err) {
|
|
throw new Error(
|
|
err instanceof SocialError ? err.message : "Could not delete.",
|
|
);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Drawer
|
|
open={open}
|
|
onOpenChange={(o) => !o && !saving && onClose()}
|
|
direction={direction}
|
|
shouldScaleBackground={direction === "bottom"}
|
|
>
|
|
<DrawerContent
|
|
direction={direction}
|
|
className={
|
|
direction === "bottom"
|
|
? "max-h-[90vh]"
|
|
: "max-w-md sm:max-w-lg"
|
|
}
|
|
>
|
|
<DrawerHeader className="shrink-0 text-left flex items-center justify-between pb-2">
|
|
<DrawerTitle>Edit collection</DrawerTitle>
|
|
<DrawerClose asChild>
|
|
<button
|
|
type="button"
|
|
aria-label="Close"
|
|
disabled={saving}
|
|
className="size-8 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted inline-flex items-center justify-center disabled:opacity-50"
|
|
>
|
|
<X className="size-4" />
|
|
</button>
|
|
</DrawerClose>
|
|
</DrawerHeader>
|
|
|
|
<div className="flex-1 min-h-0 overflow-y-auto px-4 pb-4 space-y-5">
|
|
{/* Cover */}
|
|
<section className="flex items-start gap-4">
|
|
<div className="relative size-24 rounded-lg overflow-hidden bg-muted ring-1 ring-foreground/10 shrink-0">
|
|
{coverURL ? (
|
|
<Image
|
|
src={coverURL}
|
|
alt=""
|
|
fill
|
|
sizes="96px"
|
|
className="object-cover"
|
|
unoptimized
|
|
/>
|
|
) : (
|
|
<span className="absolute inset-0 flex items-center justify-center text-[0.6rem] uppercase tracking-[0.2em] text-muted-foreground text-center px-2">
|
|
No cover
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex-1 flex flex-col gap-2 min-w-0">
|
|
<input
|
|
ref={fileInput}
|
|
type="file"
|
|
accept="image/png,image/jpeg,image/webp,image/gif"
|
|
hidden
|
|
onChange={onCoverChange}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => fileInput.current?.click()}
|
|
disabled={uploadingCover}
|
|
className="inline-flex items-center gap-1.5 rounded-md px-3 h-9 text-sm text-foreground hover:bg-muted border border-border w-fit disabled:opacity-50"
|
|
>
|
|
{uploadingCover ? (
|
|
<Loader2 className="size-4 animate-spin" />
|
|
) : (
|
|
<ImagePlus className="size-4" />
|
|
)}
|
|
{coverURL ? "Change cover" : "Add cover"}
|
|
</button>
|
|
{coverURL ? (
|
|
<button
|
|
type="button"
|
|
onClick={removeCover}
|
|
className="text-xs text-muted-foreground hover:text-destructive w-fit"
|
|
>
|
|
Remove cover
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Title */}
|
|
<section className="space-y-1">
|
|
<label className="text-xs uppercase tracking-[0.18em] font-semibold text-muted-foreground">
|
|
Title
|
|
</label>
|
|
<input
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
maxLength={120}
|
|
className="w-full bg-background text-foreground text-base rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
|
|
/>
|
|
</section>
|
|
|
|
{/* Description */}
|
|
<section className="space-y-1">
|
|
<label className="text-xs uppercase tracking-[0.18em] font-semibold text-muted-foreground">
|
|
Description
|
|
</label>
|
|
<textarea
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
rows={3}
|
|
placeholder="Optional"
|
|
className="w-full bg-background text-foreground text-sm rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40 resize-none"
|
|
/>
|
|
</section>
|
|
|
|
{/* Visibility */}
|
|
<section>
|
|
<label className="flex items-center gap-2.5 text-sm cursor-pointer text-foreground">
|
|
<Checkbox
|
|
checked={isPublic}
|
|
onCheckedChange={setIsPublic}
|
|
ariaLabel="Public collection"
|
|
/>
|
|
{isPublic ? (
|
|
<Globe className="size-4 text-muted-foreground" />
|
|
) : (
|
|
<Lock className="size-4 text-muted-foreground" />
|
|
)}
|
|
Public — anyone with the link can view
|
|
</label>
|
|
</section>
|
|
|
|
{/* Posts in this collection (drag-sortable) */}
|
|
<section className="space-y-2 pt-2">
|
|
<div className="flex items-baseline justify-between">
|
|
<label className="text-xs uppercase tracking-[0.18em] font-semibold text-muted-foreground">
|
|
In this collection
|
|
</label>
|
|
<span className="text-xs text-muted-foreground tabular-nums">
|
|
{orderedIds.length}
|
|
</span>
|
|
</div>
|
|
{loadingPosts ? (
|
|
<p className="text-sm text-muted-foreground">Loading…</p>
|
|
) : inCollection.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
No posts in this collection yet — pick one from below.
|
|
</p>
|
|
) : (
|
|
<Reorder.Group
|
|
axis="y"
|
|
values={orderedIds}
|
|
onReorder={setOrderedIds}
|
|
className="rounded-lg border border-border divide-y divide-border bg-background"
|
|
as="ul"
|
|
>
|
|
{inCollection.map((p) => (
|
|
<SortableRow
|
|
key={p.id}
|
|
post={p}
|
|
onRemove={() => removeFromCollection(p.id)}
|
|
/>
|
|
))}
|
|
</Reorder.Group>
|
|
)}
|
|
</section>
|
|
|
|
{/* Available posts */}
|
|
{available.length > 0 ? (
|
|
<section className="space-y-2">
|
|
<label className="text-xs uppercase tracking-[0.18em] font-semibold text-muted-foreground">
|
|
Add posts
|
|
</label>
|
|
<ul className="rounded-lg border border-border divide-y divide-border bg-background">
|
|
{available.map((p) => (
|
|
<AvailableRow
|
|
key={p.id}
|
|
post={p}
|
|
onAdd={() => addToCollection(p.id)}
|
|
/>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
) : null}
|
|
|
|
{error ? (
|
|
<p className="text-sm text-destructive">{error}</p>
|
|
) : null}
|
|
</div>
|
|
|
|
{/* Footer actions */}
|
|
<div className="shrink-0 border-t border-border p-4 flex items-center justify-between gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setConfirmDelete(true)}
|
|
disabled={saving}
|
|
className="inline-flex items-center gap-1.5 rounded-md px-3 h-10 text-sm text-destructive hover:bg-destructive/10 disabled:opacity-50"
|
|
>
|
|
<Trash2 className="size-4" />
|
|
Delete
|
|
</button>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
disabled={saving}
|
|
className="inline-flex items-center rounded-md px-4 h-10 text-sm text-foreground hover:bg-muted disabled:opacity-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={save}
|
|
disabled={saving || uploadingCover || title.trim().length === 0}
|
|
className="inline-flex items-center gap-1.5 rounded-md px-4 h-10 bg-primary text-primary-foreground text-sm hover:bg-primary/90 disabled:opacity-60"
|
|
>
|
|
{saving ? "Saving…" : "Save"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
|
|
<ConfirmModal
|
|
open={confirmDelete}
|
|
onClose={() => setConfirmDelete(false)}
|
|
title={`Delete "${collection.title}"?`}
|
|
message="The collection will be removed permanently. The posts inside stay on your feed."
|
|
confirmLabel="Delete collection"
|
|
onConfirm={performDelete}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// ─── Row pieces ──────────────────────────────────────────────────────────
|
|
|
|
function SortableRow({
|
|
post,
|
|
onRemove,
|
|
}: {
|
|
post: Post;
|
|
onRemove: () => void;
|
|
}) {
|
|
// dragListener={false} disables the default whole-item drag — only the
|
|
// grip handle starts a drag via dragControls.start.
|
|
const controls = useDragControls();
|
|
return (
|
|
<Reorder.Item
|
|
value={post.id}
|
|
dragListener={false}
|
|
dragControls={controls}
|
|
className="flex items-start gap-3 p-3 hover:bg-muted/40 transition-colors bg-background select-none"
|
|
>
|
|
<button
|
|
type="button"
|
|
onPointerDown={(e) => controls.start(e)}
|
|
aria-label="Drag to reorder"
|
|
title="Drag to reorder"
|
|
className="mt-0.5 text-muted-foreground hover:text-foreground cursor-grab active:cursor-grabbing touch-none"
|
|
>
|
|
<GripVertical className="size-4" />
|
|
</button>
|
|
<Checkbox
|
|
checked
|
|
onCheckedChange={() => onRemove()}
|
|
ariaLabel="Remove from collection"
|
|
className="mt-0.5"
|
|
/>
|
|
<PostSummary post={post} />
|
|
</Reorder.Item>
|
|
);
|
|
}
|
|
|
|
function AvailableRow({ post, onAdd }: { post: Post; onAdd: () => void }) {
|
|
return (
|
|
<li>
|
|
<label className="flex items-start gap-3 p-3 hover:bg-muted/40 transition-colors cursor-pointer">
|
|
<Checkbox
|
|
checked={false}
|
|
onCheckedChange={() => onAdd()}
|
|
ariaLabel="Add to collection"
|
|
className="mt-0.5"
|
|
/>
|
|
<PostSummary post={post} />
|
|
</label>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
function PostSummary({ post }: { post: Post }) {
|
|
return (
|
|
<span className="min-w-0 flex-1">
|
|
<span className="block text-sm text-foreground line-clamp-2 break-words">
|
|
{post.caption}
|
|
</span>
|
|
{post.source_title ? (
|
|
<span className="block text-[0.65rem] uppercase tracking-[0.18em] text-muted-foreground mt-1 truncate">
|
|
{post.source_title}
|
|
</span>
|
|
) : null}
|
|
</span>
|
|
);
|
|
}
|