feat(blog): show review feedback in admin

src/lib/types.ts

@@ -309,6 +309,7 @@ export interface PostListSchema {
 export interface PostDetailSchema extends PostListSchema {
   content: string;
   content_html?: string;
+  review_note?: string;
   og_image_url?: string | null;
   views_count?: number;
   assets?: PostAssetSchema[];

src/views/AdminBlog.tsx

@@ -9,9 +9,11 @@ import { api } from "@/lib/api";
 import type * as Types from "@/lib/types";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useToast } from "@/hooks/use-toast";
 import { formatJalali, resolveErrorMessage } from "@/lib/utils";
@@ -32,6 +34,8 @@ export default function AdminBlog() {
   const [search, setSearch] = useState("");
   const [loading, setLoading] = useState(true);
   const [actingId, setActingId] = useState<number | null>(null);
+  const [changesPost, setChangesPost] = useState<Types.PostListSchema | null>(null);
+  const [changesNote, setChangesNote] = useState("");
 
   const canReview = Boolean(user?.is_staff || user?.is_superuser || user?.can_review_blog_posts);
 
@@ -79,10 +83,10 @@ export default function AdminBlog() {
     }
   };
 
-  const reviewPost = async (postId: number, action: Types.PostReviewSchema["action"]) => {
+  const reviewPost = async (postId: number, action: Types.PostReviewSchema["action"], note?: string) => {
     setActingId(postId);
     try {
-      await api.reviewBlogPost(postId, { action });
+      await api.reviewBlogPost(postId, { action, note });
       await loadPosts();
       toast({ title: action === "publish" ? "نوشته منتشر شد" : "درخواست اصلاح ثبت شد", variant: "success" });
     } catch (error) {
@@ -92,6 +96,24 @@ export default function AdminBlog() {
     }
   };
 
+  const openChangesDialog = (post: Types.PostListSchema) => {
+    setChangesPost(post);
+    setChangesNote("");
+  };
+
+  const closeChangesDialog = () => {
+    if (actingId) return;
+    setChangesPost(null);
+    setChangesNote("");
+  };
+
+  const requestChanges = async () => {
+    if (!changesPost) return;
+    await reviewPost(changesPost.id, "request_changes", changesNote.trim() || undefined);
+    setChangesPost(null);
+    setChangesNote("");
+  };
+
   return (
     <div className="space-y-6" dir="rtl">
       <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
@@ -241,7 +263,7 @@ export default function AdminBlog() {
                             <Button
                               size="sm"
                               variant="outline"
-                              onClick={() => reviewPost(post.id, "request_changes")}
+                              onClick={() => openChangesDialog(post)}
                               disabled={actingId === post.id}
                               aria-label="درخواست اصلاح"
                               className="w-full"
@@ -264,6 +286,45 @@ export default function AdminBlog() {
           )}
         </CardContent>
       </Card>
+
+      <Dialog open={Boolean(changesPost)} onOpenChange={(open) => (open ? undefined : closeChangesDialog())}>
+        <DialogContent className="max-w-xl rounded-3xl" dir="rtl">
+          <DialogHeader className="mt-6 text-right md:text-right">
+            <DialogTitle>درخواست اصلاح نوشته</DialogTitle>
+            <DialogDescription>
+              توضیح کوتاهی بنویسید تا نویسنده بداند چه چیزی باید در نوشته اصلاح شود.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="rounded-2xl border bg-muted/30 p-3 text-right">
+            <p className="text-xs text-muted-foreground">نوشته</p>
+            <p className="mt-1 font-semibold">{changesPost?.title}</p>
+          </div>
+          <form
+            className="space-y-4"
+            onSubmit={(event) => {
+              event.preventDefault();
+              void requestChanges();
+            }}
+          >
+            <Textarea
+              value={changesNote}
+              onChange={(event) => setChangesNote(event.target.value)}
+              placeholder="مثلاً: بخش مقدمه نیاز به منبع دارد، تیترها را واضح‌تر کنید، یا نمونه کد را اصلاح کنید..."
+              className="min-h-36 text-right leading-7"
+              autoFocus
+            />
+            <div className="flex flex-wrap justify-start gap-2">
+              <Button type="submit" disabled={!changesPost || actingId === changesPost.id}>
+                {actingId === changesPost?.id ? <Loader2 className="ml-2 h-4 w-4 animate-spin" /> : null}
+                ثبت درخواست اصلاح
+              </Button>
+              <Button type="button" variant="outline" onClick={closeChangesDialog} disabled={Boolean(actingId)}>
+                انصراف
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

src/views/AdminBlogEditor.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useMemo, useRef, useState } from "react";
-import { ArrowLeft, ArrowRight, FolderUp, ImageUp, Loader2, Save, Send, Trash2 } from "lucide-react";
+import { AlertTriangle, ArrowLeft, ArrowRight, FolderUp, ImageUp, Loader2, Save, Send, Trash2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import Markdown from "@/components/Markdown";
 import MarkdownEditor, { type MarkdownDirectionMode } from "@/components/MarkdownEditor";
@@ -62,6 +62,7 @@ export default function AdminBlogEditor({ postId }: Props) {
   const featuredImage = post?.absolute_featured_image_preview_url || post?.absolute_featured_image_url || post?.featured_image;
   const canPersistPost = form.title.trim() && form.content.trim();
   const canAssignWriters = Boolean(user?.is_staff || user?.is_superuser || user?.can_review_blog_posts);
+  const reviewNote = post?.status === "changes_requested" ? post.review_note?.trim() : "";
 
   useEffect(() => {
     Promise.all([api.getCategories(), api.getTags()])
@@ -253,6 +254,18 @@ export default function AdminBlogEditor({ postId }: Props) {
         </div>
       </div>
 
+      {reviewNote ? (
+        <div className="rounded-3xl border border-amber-300/70 bg-amber-50 p-5 text-amber-950 shadow-sm dark:border-amber-500/40 dark:bg-amber-950/30 dark:text-amber-100">
+          <div className="flex items-start gap-3 text-right">
+            <AlertTriangle className="mt-1 h-5 w-5 shrink-0 text-amber-600 dark:text-amber-300" />
+            <div className="space-y-2">
+              <p className="font-bold">این نوشته نیازمند اصلاح است</p>
+              <p className="text-sm leading-7">{reviewNote}</p>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
       <Card>
         <CardHeader className="text-right">
           <CardTitle>مشخصات نوشته</CardTitle>