@gigamusic/links 0.1.0

package/src/components/admin/DeleteLinkPageButton.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+interface Props {
+  pageId: number;
+  pageTitle: string;
+  redirectOnDelete?: boolean;
+}
+
+/**
+ * Confirm-then-delete control for a single link page. POSTs DELETE to the
+ * admin route the consumer mounted from `createAdminLinkPageByIdHandlers`.
+ * Set `redirectOnDelete` when used from the edit page so the user lands back
+ * on the index after a successful delete.
+ */
+export function DeleteLinkPageButton({
+  pageId,
+  pageTitle,
+  redirectOnDelete,
+}: Props) {
+  const router = useRouter();
+  const [deleting, setDeleting] = useState(false);
+
+  async function handleDelete() {
+    if (!confirm(`Delete "${pageTitle}"? Its public URL will return 404.`)) return;
+    setDeleting(true);
+    const res = await fetch(`/api/admin/link-pages/${pageId}`, { method: "DELETE" });
+    if (!res.ok) {
+      setDeleting(false);
+      alert("Failed to delete link page");
+      return;
+    }
+    if (redirectOnDelete) {
+      router.push("/admin/link-pages");
+    } else {
+      router.refresh();
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleDelete}
+      disabled={deleting}
+      className="text-sm rounded-md px-2.5 py-1 text-destructive hover:bg-destructive/10 disabled:opacity-50"
+    >
+      {deleting ? "Deleting..." : "Delete"}
+    </button>
+  );
+}

package/src/components/admin/LinkPageForm.tsx

@@ -0,0 +1,490 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { detectLinkPlatform } from "../../platforms/detect";
+import { LinkPlatformIcon } from "../../platforms/icon";
+
+export interface LinkPageFormItem {
+  id: number;
+  title: string;
+  url: string;
+  position: number;
+  isVisible: boolean;
+}
+
+export interface LinkPageFormReleaseOption {
+  id: number;
+  name: string;
+  slug: string;
+  coverImageUrl: string | null;
+  isPublished: boolean;
+}
+
+export interface LinkPageFormPage {
+  id: number;
+  slug: string;
+  title: string;
+  description: string | null;
+  coverImageUrl: string | null;
+  releaseId: number | null;
+  isPublished: boolean;
+  items: LinkPageFormItem[];
+  release: LinkPageFormReleaseOption | null;
+}
+
+interface Props {
+  page: LinkPageFormPage;
+  releases: LinkPageFormReleaseOption[];
+  baseUrl: string;
+  /**
+   * Optional cover upload hook. When provided, the file picker calls this and
+   * expects back a public URL. Returning `null` cancels the upload silently.
+   * Consumers typically wire this to a `/api/admin/upload/presign` route from
+   * `@gigamusic/admin`.
+   */
+  onUploadCover?: (file: File, pageId: number) => Promise<string | null>;
+}
+
+const DEBOUNCE_MS = 500;
+
+/**
+ * Inline editor for a single link page. Every input debounces a PUT to the
+ * admin route mounted from `createAdminLinkPageByIdHandlers`; the item list
+ * uses `createAdminLinkPageItemsHandlers`. Drag-and-drop reorder is out of
+ * scope (per the plan) — up/down arrow buttons swap positions in place.
+ */
+export function LinkPageForm({ page, releases, baseUrl, onUploadCover }: Props) {
+  const router = useRouter();
+
+  const [title, setTitle] = useState(page.title);
+  const [slug, setSlug] = useState(page.slug);
+  const [description, setDescription] = useState(page.description ?? "");
+  const [releaseId, setReleaseId] = useState<string>(
+    page.releaseId != null ? String(page.releaseId) : "",
+  );
+  const [coverImageUrl, setCoverImageUrl] = useState<string | null>(
+    page.coverImageUrl,
+  );
+  const [isPublished, setIsPublished] = useState(page.isPublished);
+  const [pageSaving, setPageSaving] = useState(false);
+  const [pageError, setPageError] = useState("");
+  const pageDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const [items, setItems] = useState<LinkPageFormItem[]>(page.items);
+  const [savingItemIds, setSavingItemIds] = useState<Set<number>>(new Set());
+  const itemDebounceTimers = useRef<Map<number, ReturnType<typeof setTimeout>>>(
+    new Map(),
+  );
+  const [newTitle, setNewTitle] = useState("");
+  const [newUrl, setNewUrl] = useState("");
+  const [uploadingCover, setUploadingCover] = useState(false);
+
+  const selectedRelease = releaseId
+    ? releases.find((r) => String(r.id) === releaseId) ?? null
+    : null;
+  const resolvedCover = coverImageUrl ?? selectedRelease?.coverImageUrl ?? null;
+
+  async function savePage(updates: Record<string, unknown>) {
+    setPageSaving(true);
+    setPageError("");
+    const res = await fetch(`/api/admin/link-pages/${page.id}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(updates),
+    });
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      setPageError(data.error ?? "Failed to save");
+    }
+    setPageSaving(false);
+    router.refresh();
+  }
+
+  function debouncedSavePage(updates: Record<string, unknown>) {
+    if (pageDebounceRef.current) clearTimeout(pageDebounceRef.current);
+    pageDebounceRef.current = setTimeout(() => savePage(updates), DEBOUNCE_MS);
+  }
+
+  async function handleUploadCover(file: File) {
+    if (!onUploadCover) {
+      setPageError("Cover upload not configured");
+      return;
+    }
+    setUploadingCover(true);
+    try {
+      const publicUrl = await onUploadCover(file, page.id);
+      if (publicUrl) {
+        setCoverImageUrl(publicUrl);
+        await savePage({ coverImageUrl: publicUrl });
+      }
+    } catch (err) {
+      setPageError(err instanceof Error ? err.message : "Upload failed");
+    } finally {
+      setUploadingCover(false);
+    }
+  }
+
+  async function clearCoverOverride() {
+    setCoverImageUrl(null);
+    await savePage({ coverImageUrl: null });
+  }
+
+  async function copyPublicUrl() {
+    await navigator.clipboard.writeText(`${baseUrl}/links/${slug}`);
+  }
+
+  async function addItem() {
+    if (!newTitle || !newUrl) return;
+    const res = await fetch(`/api/admin/link-pages/${page.id}/items`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ title: newTitle, url: newUrl }),
+    });
+    if (!res.ok) return;
+    const item = (await res.json()) as LinkPageFormItem;
+    setItems([...items, item]);
+    setNewTitle("");
+    setNewUrl("");
+  }
+
+  async function saveItem(item: LinkPageFormItem) {
+    setSavingItemIds((prev) => new Set(prev).add(item.id));
+    await fetch(`/api/admin/link-pages/${page.id}/items`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        itemId: item.id,
+        title: item.title,
+        url: item.url,
+        position: item.position,
+        isVisible: item.isVisible,
+      }),
+    });
+    setSavingItemIds((prev) => {
+      const next = new Set(prev);
+      next.delete(item.id);
+      return next;
+    });
+  }
+
+  async function deleteItem(id: number) {
+    await fetch(
+      `/api/admin/link-pages/${page.id}/items?itemId=${encodeURIComponent(String(id))}`,
+      { method: "DELETE" },
+    );
+    setItems(items.filter((i) => i.id !== id));
+  }
+
+  function updateItemField(
+    id: number,
+    field: keyof LinkPageFormItem,
+    value: string | number | boolean,
+  ) {
+    const updated = items.map((i) =>
+      i.id === id ? { ...i, [field]: value } : i,
+    );
+    setItems(updated);
+
+    const existing = itemDebounceTimers.current.get(id);
+    if (existing) clearTimeout(existing);
+
+    const item = updated.find((i) => i.id === id);
+    if (!item) return;
+    itemDebounceTimers.current.set(
+      id,
+      setTimeout(() => {
+        itemDebounceTimers.current.delete(id);
+        saveItem(item);
+      }, DEBOUNCE_MS),
+    );
+  }
+
+  async function moveItem(index: number, direction: "up" | "down") {
+    const swap = direction === "up" ? index - 1 : index + 1;
+    if (swap < 0 || swap >= items.length) return;
+
+    const next = [...items];
+    const a = next[index];
+    const b = next[swap];
+    if (!a || !b) return;
+    const tempPos = a.position;
+    next[index] = { ...a, position: b.position };
+    next[swap] = { ...b, position: tempPos };
+    [next[index], next[swap]] = [next[swap], next[index]];
+    setItems(next);
+
+    await Promise.all([
+      fetch(`/api/admin/link-pages/${page.id}/items`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          itemId: next[index]!.id,
+          position: next[index]!.position,
+        }),
+      }),
+      fetch(`/api/admin/link-pages/${page.id}/items`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          itemId: next[swap]!.id,
+          position: next[swap]!.position,
+        }),
+      }),
+    ]);
+  }
+
+  return (
+    <div className="space-y-8 mt-4">
+      <div className="flex items-center justify-between rounded-lg border border-white/10 p-3">
+        <div className="text-sm">
+          <span className="text-muted-foreground">Public URL: </span>
+          <code className="text-foreground">/links/{slug}</code>
+          {pageSaving && (
+            <span className="ml-3 text-xs text-muted-foreground">Saving...</span>
+          )}
+          {pageError && (
+            <span className="ml-3 text-xs text-destructive">{pageError}</span>
+          )}
+        </div>
+        <div className="flex gap-2">
+          <button
+            type="button"
+            onClick={copyPublicUrl}
+            className="text-sm rounded-md px-2.5 py-1 border border-white/20"
+          >
+            Copy URL
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              const next = !isPublished;
+              setIsPublished(next);
+              savePage({ isPublished: next });
+            }}
+            className="text-sm rounded-md px-2.5 py-1"
+          >
+            {isPublished ? "Published" : "Draft"}
+          </button>
+        </div>
+      </div>
+
+      <div className="space-y-4 rounded-lg border border-white/10 p-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <label className="block space-y-1.5">
+            <span className="text-sm font-medium">Title</span>
+            <input
+              value={title}
+              onChange={(e) => {
+                setTitle(e.target.value);
+                debouncedSavePage({ title: e.target.value });
+              }}
+              className="block w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+            />
+          </label>
+          <label className="block space-y-1.5">
+            <span className="text-sm font-medium">Slug</span>
+            <input
+              value={slug}
+              onChange={(e) => {
+                setSlug(e.target.value);
+                debouncedSavePage({ slug: e.target.value });
+              }}
+              pattern="^[a-z0-9]+(?:-[a-z0-9]+)*$"
+              className="block w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+            />
+          </label>
+        </div>
+
+        <label className="block space-y-1.5">
+          <span className="text-sm font-medium">Description</span>
+          <textarea
+            value={description}
+            onChange={(e) => {
+              setDescription(e.target.value);
+              debouncedSavePage({ description: e.target.value || null });
+            }}
+            rows={3}
+            className="block w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+          />
+        </label>
+
+        <label className="block space-y-1.5">
+          <span className="text-sm font-medium">Release</span>
+          <select
+            value={releaseId}
+            onChange={(e) => {
+              setReleaseId(e.target.value);
+              savePage({
+                releaseId: e.target.value ? Number(e.target.value) : null,
+              });
+            }}
+            className="block w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+          >
+            <option value="">— None —</option>
+            {releases.map((r) => (
+              <option key={r.id} value={r.id}>
+                {r.name}
+                {!r.isPublished && " (draft)"}
+              </option>
+            ))}
+          </select>
+          {selectedRelease && !selectedRelease.isPublished && (
+            <span className="block text-xs text-destructive">
+              This release is a draft and is hidden from the storefront. Publish
+              it before sharing this link page.
+            </span>
+          )}
+        </label>
+
+        <div className="space-y-1.5">
+          <span className="block text-sm font-medium">Cover image</span>
+          <div className="flex items-start gap-4">
+            {resolvedCover ? (
+              <div className="w-24 h-24 rounded-md overflow-hidden ring-1 ring-white/20 shrink-0">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={resolvedCover}
+                  alt="Cover"
+                  width={200}
+                  height={200}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            ) : (
+              <div className="w-24 h-24 rounded-md border border-dashed border-white/20 flex items-center justify-center text-xs text-muted-foreground shrink-0">
+                No cover
+              </div>
+            )}
+            <div className="flex flex-col gap-2 text-sm">
+              <input
+                type="file"
+                accept="image/*"
+                onChange={(e) => {
+                  const file = e.target.files?.[0];
+                  if (file) handleUploadCover(file);
+                }}
+                disabled={uploadingCover || !onUploadCover}
+              />
+              {coverImageUrl && (
+                <button
+                  type="button"
+                  onClick={clearCoverOverride}
+                  className="text-sm self-start text-muted-foreground hover:underline"
+                >
+                  Clear override
+                </button>
+              )}
+              <p className="text-xs text-muted-foreground">
+                {coverImageUrl
+                  ? "Custom override active."
+                  : selectedRelease?.coverImageUrl
+                    ? "Using release cover. Upload to override."
+                    : "Upload a cover or link a release."}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+          Links on this page
+        </h2>
+        {items.map((item, index) => {
+          const platform = detectLinkPlatform(item.url);
+          return (
+            <div
+              key={item.id}
+              className="flex items-start gap-3 rounded-lg border border-white/10 p-3"
+            >
+              <div className="flex flex-col gap-0.5 shrink-0">
+                <button
+                  type="button"
+                  className="h-6 w-6 text-xs"
+                  disabled={index === 0}
+                  onClick={() => moveItem(index, "up")}
+                >
+                  ▲
+                </button>
+                <button
+                  type="button"
+                  className="h-6 w-6 text-xs"
+                  disabled={index === items.length - 1}
+                  onClick={() => moveItem(index, "down")}
+                >
+                  ▼
+                </button>
+              </div>
+              <div className="w-6 h-6 flex items-center justify-center text-muted-foreground shrink-0 mt-1">
+                {platform ? <LinkPlatformIcon platform={platform} size={20} /> : "—"}
+              </div>
+              <div className="flex-1 min-w-0 flex flex-col sm:flex-row sm:items-center gap-2">
+                <input
+                  value={item.title}
+                  onChange={(e) =>
+                    updateItemField(item.id, "title", e.target.value)
+                  }
+                  placeholder="Title"
+                  className="w-full sm:flex-1 min-w-0 rounded-md border border-input bg-background px-3 py-2 text-sm"
+                />
+                <input
+                  value={item.url}
+                  onChange={(e) =>
+                    updateItemField(item.id, "url", e.target.value)
+                  }
+                  placeholder="https://..."
+                  className="w-full sm:flex-1 min-w-0 rounded-md border border-input bg-background px-3 py-2 text-sm"
+                />
+                <div className="flex flex-wrap items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={() =>
+                      updateItemField(item.id, "isVisible", !item.isVisible)
+                    }
+                    className="text-sm rounded-md px-2 py-1"
+                  >
+                    {item.isVisible ? "Visible" : "Hidden"}
+                  </button>
+                  {savingItemIds.has(item.id) && (
+                    <span className="text-xs text-muted-foreground">Saving...</span>
+                  )}
+                  <button
+                    type="button"
+                    onClick={() => deleteItem(item.id)}
+                    className="text-sm rounded-md px-2 py-1 text-destructive"
+                  >
+                    Delete
+                  </button>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+
+        <div className="flex flex-col sm:flex-row sm:items-center gap-2 rounded-lg border border-dashed border-white/20 p-3">
+          <input
+            value={newTitle}
+            onChange={(e) => setNewTitle(e.target.value)}
+            placeholder="Spotify, Apple Music, etc."
+            className="w-full sm:flex-1 min-w-0 rounded-md border border-input bg-background px-3 py-2 text-sm"
+          />
+          <input
+            value={newUrl}
+            onChange={(e) => setNewUrl(e.target.value)}
+            placeholder="https://..."
+            className="w-full sm:flex-1 min-w-0 rounded-md border border-input bg-background px-3 py-2 text-sm"
+          />
+          <button
+            type="button"
+            onClick={addItem}
+            disabled={!newTitle || !newUrl}
+            className="rounded-md px-3 py-2 bg-[var(--gm-color-primary)]/90 text-black text-sm disabled:opacity-50"
+          >
+            Add Link
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/admin/NewLinkPageForm.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { slugify } from "@gigamusic/core";
+
+export interface NewLinkPageReleaseOption {
+  id: number;
+  name: string;
+  slug: string;
+  isPublished: boolean;
+}
+
+interface Props {
+  releases: NewLinkPageReleaseOption[];
+  initialRelease?: NewLinkPageReleaseOption;
+}
+
+/**
+ * Minimal "create new link page" form. POSTs to the route mounted from
+ * `createAdminLinkPagesHandlers`. On success, redirects to the edit page so
+ * the user can flesh out the items.
+ *
+ * The slug field auto-fills from the title until the user touches it.
+ */
+export function NewLinkPageForm({ releases, initialRelease }: Props) {
+  const router = useRouter();
+  const [title, setTitle] = useState(initialRelease?.name ?? "");
+  const [slug, setSlug] = useState(initialRelease?.slug ?? "");
+  const [slugTouched, setSlugTouched] = useState(Boolean(initialRelease));
+  const [description, setDescription] = useState("");
+  const [releaseId, setReleaseId] = useState<string>(
+    initialRelease ? String(initialRelease.id) : "",
+  );
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+
+  function onTitleChange(value: string) {
+    setTitle(value);
+    if (!slugTouched) setSlug(slugify(value));
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setSaving(true);
+    setError("");
+    const res = await fetch("/api/admin/link-pages", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        title,
+        slug,
+        description: description || null,
+        releaseId: releaseId ? Number(releaseId) : null,
+      }),
+    });
+    const data = await res.json();
+    if (!res.ok) {
+      setError(data.error ?? "Failed to create link page");
+      setSaving(false);
+      return;
+    }
+    router.push(`/admin/link-pages/${data.id}/edit`);
+  }
+
+  const picked = releaseId ? releases.find((r) => String(r.id) === releaseId) : null;
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4 mt-4">
+      <label className="block space-y-1.5">
+        <span className="text-sm font-medium">Title</span>
+        <input
+          value={title}
+          onChange={(e) => onTitleChange(e.target.value)}
+          placeholder="Summer Release"
+          required
+          className="block w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+        />
+      </label>
+
+      <label className="block space-y-1.5">
+        <span className="text-sm font-medium">Slug</span>
+        <input
+          value={slug}
+          onChange={(e) => {
+            setSlug(e.target.value);
+            setSlugTouched(true);
+          }}
+          placeholder="summer-release"
+          required
+          pattern="^[a-z0-9]+(?:-[a-z0-9]+)*$"
+          className="block w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+        />
+        <span className="block text-xs text-muted-foreground">
+          Public URL: <code>/links/{slug || "your-slug"}</code>
+        </span>
+      </label>
+
+      <label className="block space-y-1.5">
+        <span className="text-sm font-medium">Release (optional)</span>
+        <select
+          value={releaseId}
+          onChange={(e) => setReleaseId(e.target.value)}
+          className="block w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+        >
+          <option value="">— None —</option>
+          {releases.map((r) => (
+            <option key={r.id} value={r.id}>
+              {r.name}
+              {!r.isPublished && " (draft)"}
+            </option>
+          ))}
+        </select>
+        {picked && !picked.isPublished && (
+          <span className="block text-xs text-destructive">
+            This release is a draft and is hidden from the storefront. Publish
+            it before sharing this link page.
+          </span>
+        )}
+      </label>
+
+      <label className="block space-y-1.5">
+        <span className="text-sm font-medium">Description (optional)</span>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          rows={3}
+          className="block w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+        />
+      </label>
+
+      {error && <p className="text-sm text-destructive">{error}</p>}
+
+      <div className="flex gap-2">
+        <button
+          type="submit"
+          disabled={saving || !title || !slug}
+          className="rounded-md px-3 py-2 bg-[var(--gm-color-primary)]/90 text-black text-sm disabled:opacity-50"
+        >
+          {saving ? "Creating..." : "Create"}
+        </button>
+        <button
+          type="button"
+          onClick={() => router.push("/admin/link-pages")}
+          className="rounded-md px-3 py-2 border border-white/20 text-sm"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  );
+}