@gigamusic/admin 0.3.0 → 1.0.0

package/src/components/ReleaseForm.tsx

@@ -1,556 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { useRouter } from "next/navigation";
-import { useSlot } from "@gigamusic/ui/client";
-import { slugify } from "@gigamusic/core";
-import { combinedName, deriveTrackArtistTitle } from "@gigamusic/audio/track-name";
-
-interface ExistingTrack {
-  id: number;
-  name: string;
-  artist: string | null;
-  genre: string | null;
-  slug: string;
-  price: number;
-  trackNumber: number;
-  inRadio: boolean;
-  files: {
-    format: string;
-    fileName: string;
-    storageKey: string;
-    fileSize: number | null;
-  }[];
-}
-
-export interface ReleaseFormProps {
-  release?: {
-    id: number;
-    name: string;
-    slug: string;
-    description: string | null;
-    price: number;
-    type: "album" | "single";
-    coverImageUrl: string | null;
-    releasedAt: Date | string | null;
-    isPublished: boolean;
-    inRadio: boolean;
-    tracks?: ExistingTrack[];
-  };
-}
-
-interface TrackInput {
-  existingId?: number;
-  artist: string;
-  title: string;
-  genre: string;
-  slug: string;
-  priceStr: string;
-  trackNumber: number;
-  inRadio: boolean;
-  wavFile: File | null;
-  existingWavName?: string;
-  existingWavStorageKey?: string;
-  existingMp3Name?: string;
-  existingMp3StorageKey?: string;
-}
-
-/**
- * The release create/edit form. Talks to the admin API surface the consumer
- * wires up — every fetch hits a stable `/api/admin/...` path so the only
- * binding between this form and the backend is the network shape.
- *
- * Uploads happen client-side via presigned URLs from `/api/admin/upload/presign`;
- * server-side transcoding + tagging is triggered by `/api/admin/upload/process`.
- */
-export function ReleaseForm({ release }: ReleaseFormProps) {
-  const Button = useSlot("Button");
-  const router = useRouter();
-  const [loading, setLoading] = useState(false);
-  const [status, setStatus] = useState("");
-  const [error, setError] = useState("");
-  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
-
-  const [name, setName] = useState(release?.name ?? "");
-  const [slug, setSlug] = useState(release?.slug ?? "");
-  const [description, setDescription] = useState(release?.description ?? "");
-  const [priceStr, setPriceStr] = useState(
-    release ? (release.price / 100).toFixed(2) : "",
-  );
-  const [type, setType] = useState<"album" | "single">(release?.type ?? "single");
-  const [releasedAt, setReleasedAt] = useState(() => {
-    if (!release?.releasedAt) return "";
-    const d = new Date(release.releasedAt);
-    return d.toISOString().slice(0, 10);
-  });
-  const [isPublished, setIsPublished] = useState(release?.isPublished ?? false);
-  const [coverImage, setCoverImage] = useState<File | null>(null);
-  const [tracks, setTracks] = useState<TrackInput[]>(() => {
-    if (release?.tracks?.length) {
-      return release.tracks.map((t) => {
-        const wav = t.files.find((f) => f.format === "wav");
-        const mp3 = t.files.find((f) => f.format === "mp3");
-        const split = deriveTrackArtistTitle(t.name, t.artist);
-        return {
-          existingId: t.id,
-          artist: split.artist,
-          title: split.title,
-          genre: t.genre ?? "",
-          slug: t.slug,
-          priceStr: (t.price / 100).toFixed(2),
-          trackNumber: t.trackNumber,
-          inRadio: t.inRadio,
-          wavFile: null,
-          existingWavName: wav?.fileName,
-          existingWavStorageKey: wav?.storageKey,
-          existingMp3Name: mp3?.fileName,
-          existingMp3StorageKey: mp3?.storageKey,
-        };
-      });
-    }
-    return [
-      {
-        artist: "",
-        title: "",
-        genre: "",
-        slug: "",
-        priceStr: "1.99",
-        trackNumber: 1,
-        inRadio: true,
-        wavFile: null,
-      },
-    ];
-  });
-
-  function updateTrack(index: number, patch: Partial<TrackInput>) {
-    setTracks((prev) => prev.map((t, i) => (i === index ? { ...t, ...patch } : t)));
-  }
-
-  function addTrack() {
-    setTracks((prev) => [
-      ...prev,
-      {
-        artist: "",
-        title: "",
-        genre: "",
-        slug: "",
-        priceStr: "1.99",
-        trackNumber: prev.length + 1,
-        inRadio: true,
-        wavFile: null,
-      },
-    ]);
-  }
-
-  function removeTrack(index: number) {
-    setTracks((prev) =>
-      prev
-        .filter((_, i) => i !== index)
-        .map((t, i) => ({ ...t, trackNumber: i + 1 })),
-    );
-  }
-
-  async function presignAndUpload(file: File, key: string): Promise<string> {
-    const contentType = file.type || "application/octet-stream";
-    const presignRes = await fetch("/api/admin/upload/presign", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ key, contentType }),
-    });
-    if (!presignRes.ok) {
-      throw new Error(`Failed to get upload URL (${presignRes.status})`);
-    }
-    const { url, publicUrl } = (await presignRes.json()) as {
-      url: string;
-      publicUrl: string;
-    };
-    const uploadRes = await fetch(url, {
-      method: "PUT",
-      headers: { "Content-Type": contentType },
-      body: file,
-    });
-    if (!uploadRes.ok) throw new Error("Upload failed");
-    return publicUrl;
-  }
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setLoading(true);
-    setError("");
-    setFieldErrors({});
-    setStatus("");
-
-    try {
-      const parsedPrice = parseFloat(priceStr);
-      const price = isNaN(parsedPrice) ? 0 : Math.round(parsedPrice * 100);
-      if (isPublished && price <= 0) {
-        setError("Please enter a valid release price.");
-        setLoading(false);
-        return;
-      }
-
-      let coverImageUrl: string | null = release?.coverImageUrl ?? null;
-      if (coverImage) {
-        setStatus("Uploading cover image...");
-        coverImageUrl = await presignAndUpload(
-          coverImage,
-          `images/covers/${coverImage.name}`,
-        );
-      }
-
-      const trackData = [];
-      for (const track of tracks) {
-        const trackName = combinedName(track.artist, track.title);
-        const parsedTrackPrice = parseFloat(track.priceStr);
-        const trackPrice = isNaN(parsedTrackPrice)
-          ? 0
-          : Math.round(parsedTrackPrice * 100);
-
-        let wavUrl = track.existingWavStorageKey ?? null;
-        let mp3Url = track.existingMp3StorageKey ?? null;
-        let wavName = track.existingWavName ?? "";
-
-        if (track.wavFile) {
-          setStatus(`Uploading & transcoding "${trackName || track.wavFile.name}"...`);
-          const key = `audio/${slug}/${track.trackNumber}/${track.wavFile.name}`;
-          await presignAndUpload(track.wavFile, key);
-
-          const processRes = await fetch("/api/admin/upload/process", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-              key,
-              trackId: track.existingId ?? null,
-              metadata: {
-                title: track.title || undefined,
-                artist: track.artist || undefined,
-                album: name || undefined,
-                genre: track.genre || undefined,
-                trackNumber: track.trackNumber,
-                trackTotal: tracks.length,
-                year: releasedAt
-                  ? new Date(releasedAt + "T00:00:00Z").getUTCFullYear()
-                  : undefined,
-              },
-              coverImageUrl,
-            }),
-          });
-          const processBody = (await processRes.json()) as {
-            wavUrl?: string;
-            mp3Url?: string;
-            error?: string;
-          };
-          if (!processRes.ok) {
-            throw new Error(processBody.error ?? "Transcoding failed");
-          }
-          wavUrl = processBody.wavUrl ?? null;
-          mp3Url = processBody.mp3Url ?? null;
-          wavName = track.wavFile.name;
-        }
-
-        const files: Array<{
-          format: string;
-          fileName: string;
-          storageKey: string;
-          fileSize: number;
-        }> = [];
-        if (wavUrl) {
-          files.push({
-            format: "wav",
-            fileName: wavName || "track.wav",
-            storageKey: wavUrl,
-            fileSize: 0,
-          });
-        }
-        if (mp3Url) {
-          files.push({
-            format: "mp3",
-            fileName: (wavName || "track.wav").replace(/\.wav$/i, ".mp3"),
-            storageKey: mp3Url,
-            fileSize: 0,
-          });
-        }
-
-        trackData.push({
-          id: track.existingId,
-          name: trackName,
-          artist: track.artist || null,
-          genre: track.genre || null,
-          slug: track.slug || slugify(trackName) || `track-${track.trackNumber}`,
-          price: trackPrice,
-          trackNumber: track.trackNumber,
-          inRadio: track.inRadio,
-          files,
-        });
-      }
-
-      setStatus("Saving release...");
-      const url = release
-        ? `/api/admin/releases/${release.id}`
-        : "/api/admin/releases";
-      const res = await fetch(url, {
-        method: release ? "PUT" : "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          name,
-          slug,
-          description: description || null,
-          price,
-          type,
-          coverImageUrl,
-          releasedAt: releasedAt
-            ? new Date(releasedAt + "T00:00:00Z").toISOString()
-            : null,
-          isPublished,
-          tracks: trackData,
-        }),
-      });
-
-      if (!res.ok) {
-        const data = (await res.json().catch(() => ({}))) as {
-          error?: string;
-          fieldErrors?: Record<string, string[]>;
-        };
-        setError(data.error ?? "Something went wrong");
-        if (data.fieldErrors) {
-          const flat: Record<string, string> = {};
-          for (const [k, msgs] of Object.entries(data.fieldErrors)) {
-            if (Array.isArray(msgs) && msgs[0]) flat[k] = msgs[0];
-          }
-          setFieldErrors(flat);
-        }
-        setLoading(false);
-        setStatus("");
-        return;
-      }
-
-      const saved = (await res.json()) as { id: number };
-      setLoading(false);
-      setStatus("");
-      router.push(`/admin/releases/${saved.id}/edit`);
-      router.refresh();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Something went wrong");
-      setLoading(false);
-      setStatus("");
-    }
-  }
-
-  return (
-    <form onSubmit={handleSubmit} className="gm-admin-form space-y-6 rounded-lg border border-border p-6">
-      <Field label="Release Name" id="name" error={fieldErrors.name}>
-        <input
-          id="name"
-          value={name}
-          onChange={(e) => {
-            setName(e.target.value);
-            if (!release) setSlug(slugify(e.target.value));
-          }}
-          required
-          className="block w-full rounded border border-border bg-background px-3 py-2 text-sm"
-        />
-      </Field>
-
-      <Field label="Slug" id="slug" error={fieldErrors.slug}>
-        <input
-          id="slug"
-          value={slug}
-          onChange={(e) => setSlug(e.target.value)}
-          required
-          className="block w-full rounded border border-border bg-background px-3 py-2 text-sm"
-        />
-      </Field>
-
-      <Field label="Description" id="description">
-        <textarea
-          id="description"
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-          rows={3}
-          className="block w-full rounded border border-border bg-background px-3 py-2 text-sm"
-        />
-      </Field>
-
-      <div className="grid grid-cols-2 gap-4">
-        <Field label="Release Price (USD)" id="price" error={fieldErrors.price}>
-          <input
-            id="price"
-            type="number"
-            step="0.01"
-            min="0"
-            value={priceStr}
-            onChange={(e) => setPriceStr(e.target.value)}
-            className="block w-full rounded border border-border bg-background px-3 py-2 text-sm"
-          />
-        </Field>
-        <Field label="Type" id="type">
-          <select
-            id="type"
-            value={type}
-            onChange={(e) => setType(e.target.value as "album" | "single")}
-            className="block w-full rounded border border-border bg-background px-3 py-2 text-sm"
-          >
-            <option value="single">Single</option>
-            <option value="album">Album</option>
-          </select>
-        </Field>
-      </div>
-
-      <Field label="Release Date" id="releasedAt">
-        <input
-          id="releasedAt"
-          type="date"
-          value={releasedAt}
-          onChange={(e) => setReleasedAt(e.target.value)}
-          className="block w-full rounded border border-border bg-background px-3 py-2 text-sm"
-        />
-      </Field>
-
-      <Field label="Cover Image" id="cover">
-        <input
-          id="cover"
-          type="file"
-          accept="image/*"
-          onChange={(e) => setCoverImage(e.target.files?.[0] ?? null)}
-          className="block text-sm"
-        />
-      </Field>
-
-      <div className="space-y-3">
-        <p className="text-sm font-medium">Tracks</p>
-        {tracks.map((track, index) => (
-          <div key={index} className="space-y-3 rounded border border-border p-4">
-            <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">Track {track.trackNumber}</span>
-              {tracks.length > 1 && (
-                <Button variant="ghost" size="sm" onClick={() => removeTrack(index)}>
-                  Remove
-                </Button>
-              )}
-            </div>
-            <div className="grid grid-cols-2 gap-3">
-              <Field label="Artist" id={`artist-${index}`} error={fieldErrors[`tracks[${index}].artist`]}>
-                <input
-                  value={track.artist}
-                  onChange={(e) => {
-                    const value = e.target.value;
-                    updateTrack(index, {
-                      artist: value,
-                      slug:
-                        track.existingId == null
-                          ? slugify(combinedName(value, track.title))
-                          : track.slug,
-                    });
-                  }}
-                  className="block w-full rounded border border-border bg-background px-3 py-2 text-sm"
-                />
-              </Field>
-              <Field label="Track Title" id={`title-${index}`} error={fieldErrors[`tracks[${index}].name`]}>
-                <input
-                  value={track.title}
-                  onChange={(e) => {
-                    const value = e.target.value;
-                    updateTrack(index, {
-                      title: value,
-                      slug:
-                        track.existingId == null
-                          ? slugify(combinedName(track.artist, value))
-                          : track.slug,
-                    });
-                  }}
-                  className="block w-full rounded border border-border bg-background px-3 py-2 text-sm"
-                />
-              </Field>
-            </div>
-            <div className="grid grid-cols-2 gap-3">
-              <Field label="Price (USD)" id={`price-${index}`} error={fieldErrors[`tracks[${index}].price`]}>
-                <input
-                  type="number"
-                  step="0.01"
-                  min="0"
-                  value={track.priceStr}
-                  onChange={(e) => updateTrack(index, { priceStr: e.target.value })}
-                  className="block w-full rounded border border-border bg-background px-3 py-2 text-sm"
-                />
-              </Field>
-              <Field label="Slug" id={`slug-${index}`}>
-                <input
-                  value={track.slug}
-                  onChange={(e) => updateTrack(index, { slug: e.target.value })}
-                  className="block w-full rounded border border-border bg-background px-3 py-2 text-sm"
-                />
-              </Field>
-            </div>
-            <Field label="WAV File" id={`wav-${index}`} error={fieldErrors[`tracks[${index}].files`]}>
-              <input
-                type="file"
-                accept=".wav"
-                onChange={(e) => updateTrack(index, { wavFile: e.target.files?.[0] ?? null })}
-                className="block text-sm"
-              />
-              {track.existingWavName && !track.wavFile && (
-                <p className="text-xs text-muted-foreground">
-                  Current: {track.existingWavName}
-                  {track.existingMp3StorageKey && " (320k mp3 generated)"}
-                </p>
-              )}
-            </Field>
-          </div>
-        ))}
-        <Button variant="outline" size="sm" onClick={addTrack}>
-          Add Track
-        </Button>
-      </div>
-
-      <label className="flex items-center gap-2 text-sm">
-        <input
-          type="checkbox"
-          checked={isPublished}
-          onChange={(e) => setIsPublished(e.target.checked)}
-        />
-        Published
-      </label>
-
-      {loading && status && (
-        <p className="text-sm text-muted-foreground">{status}</p>
-      )}
-      {error && <p className="text-sm text-destructive">{error}</p>}
-
-      <div className="flex gap-3">
-        <Button type="submit" disabled={loading}>
-          {loading ? "Saving..." : release ? "Update Release" : "Save Release"}
-        </Button>
-        <Button variant="outline" onClick={() => router.back()}>
-          Cancel
-        </Button>
-      </div>
-    </form>
-  );
-}
-
-function Field({
-  label,
-  id,
-  error,
-  children,
-}: {
-  label: string;
-  id: string;
-  error?: string;
-  children: React.ReactNode;
-}) {
-  // Clone the single form control child so callers don't have to repeat
-  // `id={...}` on the input — the label's htmlFor stays the source of truth.
-  const child = React.isValidElement(children)
-    ? React.cloneElement(children as React.ReactElement<{ id?: string }>, { id })
-    : children;
-  return (
-    <div className="space-y-1">
-      <label htmlFor={id} className="text-sm font-medium">
-        {label}
-      </label>
-      {child}
-      {error && <p className="text-xs text-destructive">{error}</p>}
-    </div>
-  );
-}

package/src/index.ts

@@ -1,22 +0,0 @@
-// Default entry — page components + shared form components. Server-only
-// handler factories live in `./server`; the consumer imports them separately
-// to keep "use client" boundaries clean.
-
-export { AdminLayout } from "./pages/AdminLayout";
-export { AdminHomePage } from "./pages/AdminHomePage";
-export { AdminReleasesPage } from "./pages/AdminReleasesPage";
-export { AdminNewReleasePage } from "./pages/AdminNewReleasePage";
-export { AdminEditReleasePage } from "./pages/AdminEditReleasePage";
-export { AdminLinksPage } from "./pages/AdminLinksPage";
-export { AdminSettingsPage } from "./pages/AdminSettingsPage";
-export { AdminOrdersPage } from "./pages/AdminOrdersPage";
-
-export { ReleaseForm } from "./components/ReleaseForm";
-export type { ReleaseFormProps } from "./components/ReleaseForm";
-export { AdminNav } from "./components/AdminNav";
-
-export type {
-  AdminDeps,
-  AdminLogger,
-  RouteHandler,
-} from "./lib/types";

package/src/pages/AdminEditReleasePage.tsx

@@ -1,39 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { ReleaseForm, type ReleaseFormProps } from "../components/ReleaseForm";
-
-/**
- * Edit-release page. The consumer's route handler hands us the `id` from
- * `params`; we fetch the full record from `/api/admin/releases/{id}` and
- * mount `<ReleaseForm>` once it's loaded.
- */
-export function AdminEditReleasePage({ id }: { id: string }) {
-  const [release, setRelease] = useState<ReleaseFormProps["release"] | null>(
-    null,
-  );
-  const [error, setError] = useState("");
-
-  useEffect(() => {
-    let cancelled = false;
-    fetch(`/api/admin/releases/${id}`)
-      .then((r) => (r.ok ? r.json() : Promise.reject(new Error("Load failed"))))
-      .then((data) => {
-        if (!cancelled) setRelease(data as ReleaseFormProps["release"]);
-      })
-      .catch((err) => !cancelled && setError(String(err)));
-    return () => {
-      cancelled = true;
-    };
-  }, [id]);
-
-  if (error) return <p className="text-sm text-destructive">{error}</p>;
-  if (!release) return <p className="text-sm text-muted-foreground">Loading…</p>;
-
-  return (
-    <div className="max-w-2xl">
-      <h1 className="mb-6 text-2xl font-semibold">{release.name}</h1>
-      <ReleaseForm release={release} />
-    </div>
-  );
-}

package/src/pages/AdminHomePage.tsx

@@ -1,38 +0,0 @@
-"use client";
-
-import Link from "next/link";
-
-/**
- * Default admin landing page. Just links into the major sections. Consumers
- * who want to drop directly to releases can simply re-export
- * `AdminReleasesPage` from `/admin/page.tsx` instead.
- */
-export function AdminHomePage() {
-  return (
-    <div className="space-y-6">
-      <h1 className="text-2xl font-semibold">Admin</h1>
-      <ul className="space-y-2 text-sm">
-        <li>
-          <Link href="/admin/releases" className="hover:underline">
-            Releases
-          </Link>
-        </li>
-        <li>
-          <Link href="/admin/orders" className="hover:underline">
-            Orders
-          </Link>
-        </li>
-        <li>
-          <Link href="/admin/links" className="hover:underline">
-            Links
-          </Link>
-        </li>
-        <li>
-          <Link href="/admin/settings" className="hover:underline">
-            Settings
-          </Link>
-        </li>
-      </ul>
-    </div>
-  );
-}

package/src/pages/AdminLayout.tsx

@@ -1,20 +0,0 @@
-import type { ReactNode } from "react";
-import { AdminNav } from "../components/AdminNav";
-
-/**
- * Visual chrome for the admin section: nav bar + content container. This
- * component does **not** auth-gate by itself — consumers protect the route
- * via a `proxy.ts` that calls `verifyAdminSession` and redirects to
- * `/admin/login` on failure.
- *
- * Keeping the layout free of auth state lets it stay synchronous and
- * matches the locked contract (`children`-only).
- */
-export function AdminLayout({ children }: { children: ReactNode }) {
-  return (
-    <div className="gm-admin-shell mx-auto max-w-5xl px-4 py-6">
-      <AdminNav />
-      {children}
-    </div>
-  );
-}