feat(portfolio): add rendition management controls

apps/admin/src/app/portfolio/page.tsx

@@ -5,6 +5,7 @@ import {
   createCategory,
   createGallery,
   createTag,
+  deleteArtworkRendition,
   deleteGrouping,
   linkArtworkToGrouping,
   listArtworks,
@@ -316,6 +317,21 @@ async function attachRenditionAction(formData: FormData) {
   redirectWithState({ notice: "Rendition attached." })
 }
 
+async function deleteRenditionAction(formData: FormData) {
+  "use server"
+
+  await requireWritePermission()
+
+  try {
+    await deleteArtworkRendition(readField(formData, "renditionId"))
+  } catch {
+    redirectWithState({ error: "Failed to delete rendition." })
+  }
+
+  revalidatePath("/portfolio")
+  redirectWithState({ notice: "Rendition deleted." })
+}
+
 export default async function PortfolioPage({
   searchParams,
 }: {
@@ -641,6 +657,7 @@ export default async function PortfolioPage({
             <option value="thumbnail">thumbnail</option>
             <option value="card">card</option>
             <option value="full">full</option>
+            <option value="retina">retina</option>
             <option value="custom">custom</option>
           </select>
           <input
@@ -719,7 +736,40 @@ export default async function PortfolioPage({
                         ? `price: ${(artwork.priceAmountCents / 100).toFixed(2)} ${artwork.priceCurrency} (${artwork.isPriceVisible ? "visible" : "hidden"})`
                         : "price: -"}
                     </td>
-                    <td className="py-3 pr-4">{artwork.renditions.length}</td>
+                    <td className="py-3 pr-4">
+                      <div className="space-y-1">
+                        {artwork.renditions.length === 0 ? (
+                          <span className="text-xs text-neutral-500">0</span>
+                        ) : (
+                          artwork.renditions.map((rendition) => (
+                            <form
+                              key={rendition.id}
+                              action={deleteRenditionAction}
+                              className="flex items-center gap-2 text-xs"
+                            >
+                              <input type="hidden" name="renditionId" value={rendition.id} />
+                              <span className="rounded bg-neutral-100 px-2 py-1 font-mono">
+                                {rendition.slot}
+                              </span>
+                              <span className="text-neutral-500">
+                                {rendition.width ?? "-"}x{rendition.height ?? "-"}
+                              </span>
+                              {rendition.isPrimary ? (
+                                <span className="rounded bg-emerald-100 px-2 py-1 text-emerald-700">
+                                  primary
+                                </span>
+                              ) : null}
+                              <button
+                                type="submit"
+                                className="rounded border border-red-300 px-2 py-1 text-red-700 hover:bg-red-50"
+                              >
+                                delete
+                              </button>
+                            </form>
+                          ))
+                        )}
+                      </div>
+                    </td>
                     <td className="py-3 pr-4 text-neutral-600">
                       g:{artwork.galleryLinks.length} a:{artwork.albumLinks.length} c:
                       {artwork.categoryLinks.length} t:{artwork.tagLinks.length}