feat: add theme update

app/dashboard/sliders/page.tsx

@@ -17,6 +17,9 @@ import {
 } from "@/components/ui";
 import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
 import { toFa } from "@/lib/utils";
+import { MediaPreview } from "@/components/MediaPreview";
+import { ImagePicker } from "@/components/ImagePicker";
+import { pickUrl, IMAGE_KEYS } from "@/lib/media";
 
 interface SliderAction {
   path?: string;
@@ -29,6 +32,8 @@ interface Slider {
   description?: string;
   url?: string;
   action?: SliderAction;
+  image_id?: number | null;
+  image?: unknown;
 }
 
 const ACTION_TYPES = [
@@ -47,6 +52,8 @@ export default function SlidersPage() {
   const [url, setUrl] = useState("");
   const [actionPath, setActionPath] = useState("");
   const [actionType, setActionType] = useState("screen");
+  const [imageId, setImageId] = useState<number | null>(null);
+  const [imageFile, setImageFile] = useState<File | null>(null);
   const [saving, setSaving] = useState(false);
 
   const [deleting, setDeleting] = useState<Slider | null>(null);
@@ -59,6 +66,8 @@ export default function SlidersPage() {
     setUrl("");
     setActionPath("");
     setActionType("screen");
+    setImageId(null);
+    setImageFile(null);
     setOpen(true);
   }
   function openEdit(row: Slider) {
@@ -68,6 +77,8 @@ export default function SlidersPage() {
     setUrl(row.url ?? "");
     setActionPath(row.action?.path ?? "");
     setActionType(row.action?.type ?? "screen");
+    setImageId(row.image_id ?? null);
+    setImageFile(null);
     setOpen(true);
   }
 
@@ -75,30 +86,23 @@ export default function SlidersPage() {
     e.preventDefault();
     setSaving(true);
     try {
+      // Both create and edit go through multipart (the image is a file). The
+      // nested action uses literal bracket keys; edit posts to /slider/:id,
+      // which the backend also accepts as a multipart update.
+      const body = toFormData({
+        title,
+        description,
+        url,
+        "action[path]": actionPath,
+        "action[type]": actionType,
+        image_id: imageId,
+        image: imageFile,
+      });
       if (editing) {
-        // Update is JSON on /slider/:id with a nested action object.
-        await apiFetch(`/slider/${editing.id}`, {
-          method: "PUT",
-          body: {
-            title,
-            description,
-            url,
-            action: { path: actionPath, type: actionType },
-          },
-        });
+        await apiFetch(`/slider/${editing.id}`, { method: "POST", body });
         toast.success("اسلایدر ویرایش شد.");
       } else {
-        // Create is multipart with literal bracket keys for the nested action.
-        await apiFetch("/slider", {
-          method: "POST",
-          body: toFormData({
-            title,
-            description,
-            "action[path]": actionPath,
-            "action[type]": actionType,
-            url,
-          }),
-        });
+        await apiFetch("/slider", { method: "POST", body });
         toast.success("اسلایدر افزوده شد.");
       }
       setOpen(false);
@@ -127,6 +131,14 @@ export default function SlidersPage() {
 
   const columns: Column<Slider>[] = [
     { key: "id", header: "شناسه", render: (r) => toFa(r.id), className: "w-24" },
+    {
+      key: "thumbnail",
+      header: "تصویر",
+      className: "w-20",
+      render: (r) => (
+        <MediaPreview kind="image" src={pickUrl(r, IMAGE_KEYS)} label={r.title} />
+      ),
+    },
     { key: "title", header: "عنوان", render: (r) => r.title ?? "—" },
     {
       key: "description",
@@ -232,6 +244,16 @@ export default function SlidersPage() {
             />
           </Field>
 
+          <Field label="تصویر" hint="انتخاب از کتابخانه یا بارگذاری تصویر جدید">
+            <ImagePicker
+              imageId={imageId}
+              onPickId={setImageId}
+              file={imageFile}
+              onPickFile={setImageFile}
+              existingUrl={editing ? pickUrl(editing, IMAGE_KEYS) : null}
+            />
+          </Field>
+
           <Field label="آدرس (URL)">
             <Input
               value={url}