feat: add media_detail

app/dashboard/media/page.tsx

@@ -41,6 +41,9 @@ interface Media {
   is_premium?: boolean;
   external_url?: string | null;
   image_id?: number | null;
+  image?: unknown;
+  detail_image_id?: number | null;
+  detail_image?: unknown;
 }
 
 // Compact multi-select rendered as toggle chips.
@@ -101,6 +104,8 @@ export default function MediaPage() {
   const [externalUrl, setExternalUrl] = useState("");
   const [imageId, setImageId] = useState<number | null>(null);
   const [imageFile, setImageFile] = useState<File | null>(null);
+  const [detailImageId, setDetailImageId] = useState<number | null>(null);
+  const [detailImageFile, setDetailImageFile] = useState<File | null>(null);
 
   const [deleting, setDeleting] = useState<Media | null>(null);
   const [removing, setRemoving] = useState(false);
@@ -118,6 +123,8 @@ export default function MediaPage() {
     setExternalUrl("");
     setImageId(null);
     setImageFile(null);
+    setDetailImageId(null);
+    setDetailImageFile(null);
   }
 
   function openCreate() {
@@ -142,6 +149,8 @@ export default function MediaPage() {
     setExternalUrl(row.external_url ?? "");
     setImageId(row.image_id ?? null);
     setImageFile(null);
+    setDetailImageId(row.detail_image_id ?? null);
+    setDetailImageFile(null);
     setOpen(true);
   }
 
@@ -166,6 +175,8 @@ export default function MediaPage() {
         external_url: externalUrl,
         image_id: imageId,
         image: imageFile,
+        detail_image_id: detailImageId,
+        detail_image: detailImageFile,
       });
       if (editing) {
         // File-bearing update: POST /media/:id (multipart, file optional)
@@ -335,7 +346,7 @@ export default function MediaPage() {
             />
           </Field>
 
-          <Field label="تصویر شاخص" hint="انتخاب از کتابخانه یا بارگذاری تصویر جدید">
+          <Field label="تصویر لیست" hint="در فهرست نمایش داده می‌شود">
             <ImagePicker
               imageId={imageId}
               onPickId={setImageId}
@@ -345,6 +356,16 @@ export default function MediaPage() {
             />
           </Field>
 
+          <Field label="تصویر جزئیات" hint="در صفحه جزئیات نمایش داده می‌شود">
+            <ImagePicker
+              imageId={detailImageId}
+              onPickId={setDetailImageId}
+              file={detailImageFile}
+              onPickFile={setDetailImageFile}
+              existingUrl={editing ? pickUrl(editing, ["detail_image"]) : null}
+            />
+          </Field>
+
           <Field label="دسته‌بندی‌ها">
             <ChipMultiSelect
               options={categories}

app/dashboard/music/playlists/page.tsx

@@ -15,12 +15,19 @@ import {
   PageHeader,
 } from "@/components/ui";
 import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
+import { ImagePicker } from "@/components/ImagePicker";
+import { MediaPreview } from "@/components/MediaPreview";
+import { pickUrl, IMAGE_KEYS } from "@/lib/media";
 import { toFa } from "@/lib/utils";
 
 interface Playlist {
   id: number;
   name?: string;
   description?: string;
+  image_id?: number | null;
+  image?: unknown;
+  detail_image_id?: number | null;
+  detail_image?: unknown;
 }
 
 interface MusicCategory {
@@ -42,6 +49,10 @@ export default function MusicPlaylistsPage() {
   const [description, setDescription] = useState("");
   const [categoryIds, setCategoryIds] = useState<number[]>([]);
   const [subcategoryIds, setSubcategoryIds] = useState<number[]>([]);
+  const [imageId, setImageId] = useState<number | null>(null);
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [detailImageId, setDetailImageId] = useState<number | null>(null);
+  const [detailImageFile, setDetailImageFile] = useState<File | null>(null);
 
   const [deleting, setDeleting] = useState<Playlist | null>(null);
   const [removing, setRemoving] = useState(false);
@@ -56,6 +67,10 @@ export default function MusicPlaylistsPage() {
     setDescription("");
     setCategoryIds([]);
     setSubcategoryIds([]);
+    setImageId(null);
+    setImageFile(null);
+    setDetailImageId(null);
+    setDetailImageFile(null);
     setOpen(true);
   }
   function openEdit(row: Playlist) {
@@ -64,6 +79,10 @@ export default function MusicPlaylistsPage() {
     setDescription(row.description ?? "");
     setCategoryIds([]);
     setSubcategoryIds([]);
+    setImageId(row.image_id ?? null);
+    setImageFile(null);
+    setDetailImageId(row.detail_image_id ?? null);
+    setDetailImageFile(null);
     setOpen(true);
   }
 
@@ -72,10 +91,17 @@ export default function MusicPlaylistsPage() {
     setSaving(true);
     try {
       if (editing) {
-        // Update is JSON on /music-playlists/:id
+        // Update is multipart (POST) so an image file can be uploaded.
         await apiFetch(`/music-playlists/${editing.id}`, {
-          method: "PUT",
-          body: { name, description },
+          method: "POST",
+          body: toFormData({
+            name,
+            description,
+            image_id: imageId,
+            image: imageFile,
+            detail_image_id: detailImageId,
+            detail_image: detailImageFile,
+          }),
         });
         toast.success("پلی‌لیست ویرایش شد.");
       } else {
@@ -87,6 +113,10 @@ export default function MusicPlaylistsPage() {
             description,
             category_ids: categoryIds,
             subcategory_ids: subcategoryIds,
+            image_id: imageId,
+            image: imageFile,
+            detail_image_id: detailImageId,
+            detail_image: detailImageFile,
           }),
         });
         toast.success("پلی‌لیست افزوده شد.");
@@ -117,6 +147,14 @@ export default function MusicPlaylistsPage() {
 
   const columns: Column<Playlist>[] = [
     { key: "id", header: "شناسه", render: (r) => toFa(r.id), className: "w-24" },
+    {
+      key: "image",
+      header: "تصویر",
+      className: "w-20",
+      render: (r) => (
+        <MediaPreview kind="image" src={pickUrl(r, IMAGE_KEYS)} label={r.name} />
+      ),
+    },
     { key: "name", header: "نام" },
     {
       key: "description",
@@ -199,6 +237,26 @@ export default function MusicPlaylistsPage() {
             />
           </Field>
 
+          <Field label="تصویر لیست">
+            <ImagePicker
+              imageId={imageId}
+              onPickId={setImageId}
+              file={imageFile}
+              onPickFile={setImageFile}
+              existingUrl={editing ? pickUrl(editing, IMAGE_KEYS) : null}
+            />
+          </Field>
+
+          <Field label="تصویر جزئیات">
+            <ImagePicker
+              imageId={detailImageId}
+              onPickId={setDetailImageId}
+              file={detailImageFile}
+              onPickFile={setDetailImageFile}
+              existingUrl={editing ? pickUrl(editing, ["detail_image"]) : null}
+            />
+          </Field>
+
           {!editing && (
             <>
               <Field label="دسته‌بندی‌ها">