@gigamusic/links 0.3.0 → 2.0.0

package/src/components/LinkPageView.tsx

@@ -1,64 +0,0 @@
-"use client";
-
-import { detectLinkPlatform } from "../platforms/detect";
-import { isInternalUrl } from "./url-helpers";
-import { useLinksSlot } from "../slots-context";
-import type { LinkPageWithItems } from "../types";
-import type { LinksSlots } from "../slots";
-
-interface LinkPageViewProps {
-  page: LinkPageWithItems;
-  /**
-   * Per-call slot overrides. Most consumers register slots once on
-   * `<LinksSlotsProvider>` and omit this prop. Keys not present here fall
-   * back to the provider, then to the package defaults.
-   */
-  slots?: Partial<LinksSlots>;
-}
-
-/**
- * Public-facing render of a `LinkPage`. Renders the resolved cover, header,
- * and a vertical list of link buttons. Slots:
- *  - `LinkButton` — the rendered pill for each item.
- *  - `LinkPageHeader` — the title block above the buttons.
- *
- * Cover image resolution: explicit `page.coverImageUrl` override → linked
- * release's `coverImageUrl` (only when the release is published, to avoid
- * leaking a draft's art) → `null`.
- */
-export function LinkPageView({ page, slots }: LinkPageViewProps) {
-  const providerHeader = useLinksSlot("LinkPageHeader");
-  const providerButton = useLinksSlot("LinkButton");
-  const Header = slots?.LinkPageHeader ?? providerHeader;
-  const LinkButton = slots?.LinkButton ?? providerButton;
-
-  const releaseCover = page.release?.isPublished
-    ? page.release.coverImageUrl
-    : null;
-  const coverSrc = page.coverImageUrl ?? releaseCover ?? null;
-  const cover = coverSrc ? { src: coverSrc, alt: page.title } : null;
-
-  return (
-    <div className="min-h-dvh flex items-start justify-center px-4 py-10">
-      <div className="w-full max-w-md flex flex-col items-center gap-5">
-        <Header title={page.title} description={page.description} cover={cover} />
-
-        <div className="w-full flex flex-col gap-3 mt-2">
-          {page.items.map((item) => {
-            const platform = detectLinkPlatform(item.url);
-            const internal = isInternalUrl(item.url);
-            return (
-              <LinkButton
-                key={item.id}
-                href={item.url}
-                title={item.title}
-                platform={platform}
-                internal={internal}
-              />
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/admin/DeleteLinkPageButton.tsx

@@ -1,52 +0,0 @@
-"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

@@ -1,490 +0,0 @@
-"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>
-  );
-}