feat(media): add admin media CRUD preview and storage cleanup

apps/admin/src/app/media/[id]/page.tsx

@@ -0,0 +1,423 @@
+import { deleteMediaAsset, getMediaAssetById, updateMediaAsset } from "@cms/db"
+import { Button } from "@cms/ui/button"
+import Link from "next/link"
+import { redirect } from "next/navigation"
+
+import { AdminShell } from "@/components/admin-shell"
+import { deleteStoredMediaObject } from "@/lib/media/storage"
+import { requirePermissionForRoute } from "@/lib/route-guards"
+
+export const dynamic = "force-dynamic"
+
+type SearchParamsInput = Record<string, string | string[] | undefined>
+
+type PageProps = {
+  params: Promise<{ id: string }>
+  searchParams: Promise<SearchParamsInput>
+}
+
+function readFirstValue(value: string | string[] | undefined): string | null {
+  if (Array.isArray(value)) {
+    return value[0] ?? null
+  }
+
+  return value ?? null
+}
+
+function readInputString(formData: FormData, field: string): string {
+  const value = formData.get(field)
+  return typeof value === "string" ? value.trim() : ""
+}
+
+function readNullableString(formData: FormData, field: string): string | null {
+  const value = readInputString(formData, field)
+  return value.length > 0 ? value : null
+}
+
+function readNullableInt(formData: FormData, field: string): number | null {
+  const value = readInputString(formData, field)
+
+  if (!value) {
+    return null
+  }
+
+  const parsed = Number.parseInt(value, 10)
+
+  if (!Number.isFinite(parsed)) {
+    return null
+  }
+
+  return parsed
+}
+
+function readTags(formData: FormData): string[] {
+  const raw = readInputString(formData, "tags")
+
+  if (!raw) {
+    return []
+  }
+
+  return raw
+    .split(",")
+    .map((item) => item.trim())
+    .filter((item) => item.length > 0)
+}
+
+function redirectWithState(mediaAssetId: string, params: { notice?: string; error?: string }) {
+  const query = new URLSearchParams()
+
+  if (params.notice) {
+    query.set("notice", params.notice)
+  }
+
+  if (params.error) {
+    query.set("error", params.error)
+  }
+
+  const value = query.toString()
+  redirect(value ? `/media/${mediaAssetId}?${value}` : `/media/${mediaAssetId}`)
+}
+
+function toLocalDateTimeInputValue(date: Date): string {
+  const offset = date.getTimezoneOffset() * 60_000
+  return new Date(date.getTime() - offset).toISOString().slice(0, 16)
+}
+
+export default async function MediaAssetEditorPage({ params, searchParams }: PageProps) {
+  const role = await requirePermissionForRoute({
+    nextPath: "/media",
+    permission: "media:read",
+    scope: "team",
+  })
+  const resolvedParams = await params
+  const mediaAssetId = resolvedParams.id
+
+  const [resolvedSearchParams, asset] = await Promise.all([
+    searchParams,
+    getMediaAssetById(mediaAssetId),
+  ])
+
+  if (!asset) {
+    redirect("/media?error=Media+asset+not+found")
+  }
+  const mediaAsset = asset
+
+  const notice = readFirstValue(resolvedSearchParams.notice)
+  const error = readFirstValue(resolvedSearchParams.error)
+  const previewUrl = mediaAsset.storageKey ? `/api/media/file/${mediaAsset.id}` : null
+  const isImage = Boolean(mediaAsset.mimeType?.startsWith("image/"))
+  const isVideo = Boolean(mediaAsset.mimeType?.startsWith("video/"))
+
+  async function updateMediaAssetAction(formData: FormData) {
+    "use server"
+
+    await requirePermissionForRoute({
+      nextPath: "/media",
+      permission: "media:write",
+      scope: "team",
+    })
+
+    try {
+      await updateMediaAsset({
+        id: mediaAssetId,
+        title: readInputString(formData, "title"),
+        type: readInputString(formData, "type"),
+        description: readNullableString(formData, "description"),
+        altText: readNullableString(formData, "altText"),
+        source: readNullableString(formData, "source"),
+        copyright: readNullableString(formData, "copyright"),
+        author: readNullableString(formData, "author"),
+        tags: readTags(formData),
+        mimeType: readNullableString(formData, "mimeType"),
+        width: readNullableInt(formData, "width"),
+        height: readNullableInt(formData, "height"),
+        sizeBytes: readNullableInt(formData, "sizeBytes"),
+        isPublished: readInputString(formData, "isPublished") === "true",
+      })
+    } catch {
+      redirectWithState(mediaAssetId, {
+        error: "Failed to update media asset. Validate values and try again.",
+      })
+    }
+
+    redirectWithState(mediaAssetId, { notice: "Media asset updated." })
+  }
+
+  async function deleteMediaAssetAction() {
+    "use server"
+
+    await requirePermissionForRoute({
+      nextPath: "/media",
+      permission: "media:write",
+      scope: "team",
+    })
+
+    try {
+      if (mediaAsset.storageKey) {
+        await deleteStoredMediaObject(mediaAsset.storageKey)
+      }
+
+      await deleteMediaAsset(mediaAssetId)
+    } catch {
+      redirectWithState(mediaAssetId, {
+        error:
+          "Failed to delete media asset and file from storage. Check storage config and links.",
+      })
+    }
+
+    redirect("/media?notice=Media+asset+deleted")
+  }
+
+  return (
+    <AdminShell
+      role={role}
+      activePath="/media"
+      badge="Admin App"
+      title="Media Asset"
+      description="View, edit, and delete uploaded media metadata."
+    >
+      {notice ? (
+        <section className="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
+          {notice}
+        </section>
+      ) : null}
+
+      {error ? (
+        <section className="rounded-xl border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-800">
+          {error}
+        </section>
+      ) : null}
+
+      <section className="rounded-xl border border-neutral-200 p-6">
+        <h3 className="text-lg font-medium">Preview</h3>
+        <p className="mt-1 text-sm text-neutral-600">
+          {mediaAsset.mimeType ? `MIME: ${mediaAsset.mimeType}` : "MIME: unknown"}
+        </p>
+
+        <div className="mt-4 rounded-lg border border-neutral-200 bg-neutral-50 p-3">
+          {!previewUrl ? (
+            <p className="text-sm text-neutral-600">
+              No stored file is linked for this media asset.
+            </p>
+          ) : isImage ? (
+            // biome-ignore lint/performance/noImgElement: Auth-protected media preview requires direct browser request with session cookies.
+            <img
+              src={previewUrl}
+              alt={mediaAsset.altText || mediaAsset.title}
+              className="max-h-[26rem] w-auto rounded border border-neutral-200 bg-white"
+            />
+          ) : isVideo ? (
+            // biome-ignore lint/a11y/useMediaCaption: Preview uses source assets without guaranteed caption tracks.
+            <video
+              src={previewUrl}
+              controls
+              preload="metadata"
+              className="max-h-[26rem] w-full rounded border border-neutral-200 bg-black"
+            />
+          ) : (
+            <p className="text-sm text-neutral-700">
+              Inline preview is not available for this media type.
+            </p>
+          )}
+        </div>
+
+        {previewUrl ? (
+          <a
+            href={previewUrl}
+            target="_blank"
+            rel="noreferrer"
+            className="mt-3 inline-block text-sm text-neutral-700 underline underline-offset-2"
+          >
+            Open raw media file
+          </a>
+        ) : null}
+      </section>
+
+      <section className="rounded-xl border border-neutral-200 p-6">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div>
+            <h2 className="text-xl font-medium">{mediaAsset.title}</h2>
+            <p className="mt-1 text-xs text-neutral-600">ID: {mediaAsset.id}</p>
+          </div>
+          <Link href="/media" className="text-sm text-neutral-700 underline underline-offset-2">
+            Back to media list
+          </Link>
+        </div>
+
+        <form action={updateMediaAssetAction} className="mt-6 space-y-3">
+          <div className="grid gap-3 md:grid-cols-2">
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Title</span>
+              <input
+                name="title"
+                defaultValue={mediaAsset.title}
+                required
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Type</span>
+              <select
+                name="type"
+                defaultValue={mediaAsset.type}
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              >
+                <option value="artwork">artwork</option>
+                <option value="banner">banner</option>
+                <option value="promotion">promotion</option>
+                <option value="video">video</option>
+                <option value="gif">gif</option>
+                <option value="generic">generic</option>
+              </select>
+            </label>
+          </div>
+
+          <label className="space-y-1">
+            <span className="text-xs text-neutral-600">Description</span>
+            <textarea
+              name="description"
+              rows={3}
+              defaultValue={mediaAsset.description ?? ""}
+              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+          </label>
+
+          <div className="grid gap-3 md:grid-cols-2">
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Alt text</span>
+              <input
+                name="altText"
+                defaultValue={mediaAsset.altText ?? ""}
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Author</span>
+              <input
+                name="author"
+                defaultValue={mediaAsset.author ?? ""}
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+          </div>
+
+          <div className="grid gap-3 md:grid-cols-2">
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Source</span>
+              <input
+                name="source"
+                defaultValue={mediaAsset.source ?? ""}
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Copyright</span>
+              <input
+                name="copyright"
+                defaultValue={mediaAsset.copyright ?? ""}
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+          </div>
+
+          <div className="grid gap-3 md:grid-cols-3">
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">MIME type</span>
+              <input
+                name="mimeType"
+                defaultValue={mediaAsset.mimeType ?? ""}
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Width</span>
+              <input
+                name="width"
+                type="number"
+                min={1}
+                defaultValue={mediaAsset.width ?? ""}
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Height</span>
+              <input
+                name="height"
+                type="number"
+                min={1}
+                defaultValue={mediaAsset.height ?? ""}
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+          </div>
+
+          <div className="grid gap-3 md:grid-cols-2">
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Size (bytes)</span>
+              <input
+                name="sizeBytes"
+                type="number"
+                min={0}
+                defaultValue={mediaAsset.sizeBytes ?? ""}
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Tags (comma-separated)</span>
+              <input
+                name="tags"
+                defaultValue={mediaAsset.tags.join(", ")}
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+          </div>
+
+          <label className="inline-flex items-center gap-2 text-sm text-neutral-700">
+            <input
+              type="checkbox"
+              name="isPublished"
+              value="true"
+              defaultChecked={mediaAsset.isPublished}
+              className="size-4"
+            />
+            Published
+          </label>
+
+          <div className="grid gap-3 md:grid-cols-2">
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Storage key</span>
+              <input
+                value={mediaAsset.storageKey ?? "-"}
+                readOnly
+                className="w-full rounded border border-neutral-200 bg-neutral-50 px-3 py-2 text-xs text-neutral-600"
+              />
+            </label>
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Last updated</span>
+              <input
+                value={toLocalDateTimeInputValue(mediaAsset.updatedAt)}
+                readOnly
+                className="w-full rounded border border-neutral-200 bg-neutral-50 px-3 py-2 text-xs text-neutral-600"
+              />
+            </label>
+          </div>
+
+          <Button type="submit">Save changes</Button>
+        </form>
+      </section>
+
+      <section className="rounded-xl border border-red-300 bg-red-50 p-6">
+        <h3 className="text-lg font-medium text-red-800">Danger Zone</h3>
+        <p className="mt-1 text-sm text-red-700">
+          Deleting this media asset is permanent. Any linked artwork rendition references will also
+          be removed.
+        </p>
+        <form action={deleteMediaAssetAction} className="mt-4">
+          <Button type="submit" variant="secondary" className="border border-red-300 text-red-800">
+            Delete media asset
+          </Button>
+        </form>
+      </section>
+    </AdminShell>
+  )
+}