feat(blog): wire comment moderation and writers

src/components/BlogPostInteractions.tsx

@@ -1,15 +1,36 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import { Loader2, MessageSquare, Reply, Send, Trash2 } from "lucide-react";
+import {
+  Check,
+  Edit3,
+  Eye,
+  EyeOff,
+  Loader2,
+  MessageSquare,
+  Reply,
+  Send,
+  Trash2,
+  X,
+} from "lucide-react";
 import { useAuth } from "@/contexts/AuthContext";
 import { api } from "@/lib/api";
 import type * as Types from "@/lib/types";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Textarea } from "@/components/ui/textarea";
 import { Link } from "@/lib/router";
-import { formatJalaliDate, resolveErrorMessage, toPersianDigits } from "@/lib/utils";
+import { cn, formatJalaliDate, resolveErrorMessage, toPersianDigits } from "@/lib/utils";
 import { useToast } from "@/hooks/use-toast";
 
 type Props = {
@@ -25,11 +46,15 @@ function avatarInitial(author: Types.CommentSchema["author"]) {
   return displayName(author).trim()[0] || "ک";
 }
 
-function countComments(comments: Types.CommentSchema[]) {
-  return comments.reduce(
-    (total, comment) => total + 1 + countComments(comment.replies || []),
-    0,
-  );
+function visibleCommentCount(comments: Types.CommentSchema[]) {
+  return comments.reduce((total, comment) => {
+    if (comment.is_deleted || comment.is_hidden) return total;
+    return total + 1 + visibleCommentCount(comment.replies || []);
+  }, 0);
+}
+
+function allDescendants(comment: Types.CommentSchema): Types.CommentSchema[] {
+  return (comment.replies || []).flatMap((reply) => [reply, ...allDescendants(reply)]);
 }
 
 function findComment(comments: Types.CommentSchema[], id: number | null): Types.CommentSchema | undefined {
@@ -52,8 +77,14 @@ export default function BlogPostInteractions({
   const [commentCount, setCommentCount] = useState(initialComments);
   const [content, setContent] = useState("");
   const [replyTo, setReplyTo] = useState<number | null>(null);
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [editContent, setEditContent] = useState("");
+  const [expandedReplies, setExpandedReplies] = useState<Set<number>>(new Set());
+  const [deleteTarget, setDeleteTarget] = useState<Types.CommentSchema | null>(null);
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
+  const [savingEdit, setSavingEdit] = useState(false);
+  const [moderatingId, setModeratingId] = useState<number | null>(null);
 
   const canModerate = Boolean(user?.is_staff || user?.is_superuser || user?.can_review_blog_posts);
 
@@ -65,7 +96,7 @@ export default function BlogPostInteractions({
   const loadComments = async () => {
     const data = await api.getComments(slug);
     setComments(data);
-    setCommentCount(countComments(data));
+    setCommentCount(visibleCommentCount(data));
   };
 
   useEffect(() => {
@@ -74,7 +105,7 @@ export default function BlogPostInteractions({
       .then((data) => {
         if (!mounted) return;
         setComments(data);
-        setCommentCount(countComments(data));
+        setCommentCount(visibleCommentCount(data));
       })
       .finally(() => {
         if (mounted) setLoading(false);
@@ -107,125 +138,331 @@ export default function BlogPostInteractions({
 
   const hideComment = async (commentId: number) => {
     try {
+      setModeratingId(commentId);
       await api.hideComment(commentId);
       await loadComments();
       toast({ title: "کامنت مخفی شد", variant: "success" });
+    } catch (error) {
+      toast({
+        title: "مخفی کردن کامنت ناموفق بود",
+        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
+        variant: "destructive",
+      });
+    } finally {
+      setModeratingId(null);
+    }
+  };
+
+  const unhideComment = async (commentId: number) => {
+    try {
+      setModeratingId(commentId);
+      await api.unhideComment(commentId);
+      await loadComments();
+      toast({ title: "کامنت دوباره نمایش داده شد", variant: "success" });
+    } catch (error) {
+      toast({
+        title: "نمایش دوباره کامنت ناموفق بود",
+        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
+        variant: "destructive",
+      });
+    } finally {
+      setModeratingId(null);
+    }
+  };
+
+  const deleteComment = async () => {
+    if (!deleteTarget) return;
+    try {
+      setModeratingId(deleteTarget.id);
+      await api.deleteComment(deleteTarget.id);
+      setDeleteTarget(null);
+      await loadComments();
+      toast({ title: "کامنت حذف شد", variant: "success" });
     } catch (error) {
       toast({
         title: "حذف کامنت ناموفق بود",
         description: resolveErrorMessage(error, "دوباره تلاش کنید"),
         variant: "destructive",
       });
+    } finally {
+      setModeratingId(null);
     }
   };
 
-  const renderComment = (comment: Types.CommentSchema, nested = false) => (
-    <div
-      key={comment.id}
-      className={nested ? "relative mr-7 border-r-2 border-primary/20 pr-5" : ""}
-    >
-      <div className="flex items-start gap-3 text-right">
-        <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-primary/12 text-lg font-black text-primary shadow-inner">
-          {avatarInitial(comment.author)}
-        </div>
-        <div className="min-w-0 flex-1">
-          <div className="mb-1 flex flex-wrap items-center gap-2 text-sm">
-            <span className="font-semibold">{displayName(comment.author)}</span>
-            <span className="text-xs text-muted-foreground">{formatJalaliDate(comment.created_at)}</span>
-          </div>
-          <div className="rounded-bl-3xl rounded-br-md rounded-tl-3xl rounded-tr-3xl border border-border/70 bg-muted/35 px-4 py-3 shadow-sm">
-            <p className="whitespace-pre-wrap text-sm leading-7">{comment.content}</p>
-          </div>
-          <div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-            {isAuthenticated ? (
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-8 gap-1 rounded-full px-3 text-xs"
-                onClick={() => setReplyTo(comment.id)}
-              >
-                <Reply className="h-3.5 w-3.5" />
-                پاسخ
-              </Button>
-            ) : null}
-            {canModerate ? (
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-8 gap-1 rounded-full px-3 text-xs text-destructive hover:text-destructive"
-                onClick={() => hideComment(comment.id)}
-              >
-                <Trash2 className="h-3.5 w-3.5" />
-                مخفی‌کردن
-              </Button>
-            ) : null}
-          </div>
-        </div>
-      </div>
-      {comment.replies?.length ? (
-        <div className="mt-4 space-y-4">
-          {comment.replies.map((reply) => renderComment(reply, true))}
-        </div>
-      ) : null}
-    </div>
-  );
+  const startEdit = (comment: Types.CommentSchema) => {
+    setEditingId(comment.id);
+    setEditContent(comment.content);
+    setReplyTo(null);
+  };
 
-  return (
-    <Card className="mt-10 rounded-[2rem] border border-border/70 bg-card/90 shadow-sm" dir="rtl">
-      <CardHeader className="text-right">
-        <CardTitle className="flex items-center justify-end gap-2 text-2xl">
-          کامنت‌ها
-          <MessageSquare className="h-5 w-5 text-primary" />
-        </CardTitle>
-        <CardDescription>
-          {toPersianDigits(commentCount)} کامنت برای این نوشته ثبت شده است.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-6">
-        {!isAuthenticated ? (
-          <div className="rounded-3xl border border-dashed border-border/70 bg-muted/20 p-5 text-center text-sm leading-7 text-muted-foreground">
-            برای ثبت کامنت باید وارد حساب کاربری شوید.
-            <Button asChild className="mr-3" size="sm">
-              <Link to="/auth">ورود / ثبت‌نام</Link>
-            </Button>
+  const cancelEdit = () => {
+    setEditingId(null);
+    setEditContent("");
+  };
+
+  const saveEdit = async () => {
+    const trimmed = editContent.trim();
+    if (!editingId || !trimmed) return;
+    try {
+      setSavingEdit(true);
+      await api.updateComment(editingId, { content: trimmed });
+      await loadComments();
+      cancelEdit();
+      toast({ title: "کامنت ویرایش شد", variant: "success" });
+    } catch (error) {
+      toast({
+        title: "ویرایش کامنت ناموفق بود",
+        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
+        variant: "destructive",
+      });
+    } finally {
+      setSavingEdit(false);
+    }
+  };
+
+  const toggleExpandedReplies = (commentId: number) => {
+    setExpandedReplies((current) => {
+      const next = new Set(current);
+      if (next.has(commentId)) {
+        next.delete(commentId);
+      } else {
+        next.add(commentId);
+      }
+      return next;
+    });
+  };
+
+  const renderComment = (comment: Types.CommentSchema, nested = false, compact = false, parentHidden = false) => {
+    const isOwnComment = Boolean(user?.id === comment.author.id);
+    const isEditing = editingId === comment.id;
+    const hidden = parentHidden || Boolean(comment.is_hidden);
+    const deeperReplies = nested ? allDescendants(comment) : [];
+    const showDeeperReplies = expandedReplies.has(comment.id);
+
+    return (
+      <div
+        key={comment.id}
+        className={cn(
+          "relative",
+          nested && "mr-6 border-r border-primary/20 pr-4",
+          compact && "rounded-2xl bg-muted/25 p-3",
+        )}
+      >
+        <div className={cn("flex items-start gap-3 text-right", hidden && "opacity-75")}>
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/12 text-base font-black text-primary shadow-inner">
+            {avatarInitial(comment.author)}
           </div>
-        ) : (
-          <div className="rounded-3xl border border-border/70 bg-muted/20 p-4">
-            {replyTarget ? (
-              <div className="mb-3 flex items-center justify-between rounded-2xl bg-background px-3 py-2 text-sm">
-                <Button variant="ghost" size="sm" onClick={() => setReplyTo(null)}>
-                  لغو پاسخ
-                </Button>
-                <span>پاسخ به {displayName(replyTarget.author)}</span>
+          <div className="min-w-0 flex-1">
+            <div className="mb-2 flex flex-wrap items-center justify-start gap-2 text-sm">
+              <span className="font-semibold">{displayName(comment.author)}</span>
+              <time className="text-xs text-muted-foreground" dateTime={comment.created_at}>
+                {formatJalaliDate(comment.created_at)}
+              </time>
+              {hidden ? (
+                <span className="rounded-full bg-amber-500/10 px-2 py-0.5 text-xs text-amber-600 dark:text-amber-300">
+                  مخفی شده
+                </span>
+              ) : null}
+            </div>
+            <div>
+              {isEditing ? (
+                <div className="space-y-3">
+                  <Textarea
+                    value={editContent}
+                    onChange={(event) => setEditContent(event.target.value)}
+                    className="min-h-24 rounded-2xl bg-background text-right"
+                  />
+                  <div className="flex flex-wrap justify-start gap-2">
+                    <Button type="button" size="sm" variant="ghost" className="gap-1 rounded-full" onClick={cancelEdit}>
+                      <X className="h-3.5 w-3.5" />
+                      لغو
+                    </Button>
+                    <Button type="button" size="sm" className="gap-1 rounded-full" onClick={saveEdit} disabled={savingEdit || !editContent.trim()}>
+                      {savingEdit ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Check className="h-3.5 w-3.5" />}
+                      ذخیره
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                <p className="whitespace-pre-wrap text-sm leading-7">{comment.content}</p>
+              )}
+            </div>
+            {!isEditing ? (
+              <div className="mt-2 flex flex-wrap items-center justify-start gap-2 text-xs text-muted-foreground">
+                {isAuthenticated && !hidden && !compact ? (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 gap-1 rounded-full px-3 text-xs"
+                    onClick={() => setReplyTo(comment.id)}
+                  >
+                    <Reply className="h-3.5 w-3.5" />
+                    پاسخ
+                  </Button>
+                ) : null}
+                {isOwnComment && !hidden ? (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 gap-1 rounded-full px-3 text-xs"
+                    onClick={() => startEdit(comment)}
+                  >
+                    <Edit3 className="h-3.5 w-3.5" />
+                    ویرایش
+                  </Button>
+                ) : null}
+                {canModerate ? (
+                  <>
+                    {hidden ? (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 gap-1 rounded-full px-3 text-xs text-primary"
+                        onClick={() => unhideComment(comment.id)}
+                        disabled={moderatingId === comment.id}
+                      >
+                        {moderatingId === comment.id ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Eye className="h-3.5 w-3.5" />}
+                        نمایش مجدد
+                      </Button>
+                    ) : (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 gap-1 rounded-full px-3 text-xs"
+                        onClick={() => hideComment(comment.id)}
+                        disabled={moderatingId === comment.id}
+                      >
+                        {moderatingId === comment.id ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <EyeOff className="h-3.5 w-3.5" />}
+                        مخفی کردن
+                      </Button>
+                    )}
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 gap-1 rounded-full px-3 text-xs text-destructive hover:text-destructive"
+                      onClick={() => setDeleteTarget(comment)}
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                      حذف
+                    </Button>
+                  </>
+                ) : null}
               </div>
             ) : null}
-            <Textarea
-              value={content}
-              onChange={(event) => setContent(event.target.value)}
-              placeholder="کامنت خود را بنویسید..."
-              className="min-h-28 rounded-2xl bg-background text-right"
-            />
-            <div className="mt-3 flex justify-end">
-              <Button onClick={submitComment} disabled={submitting || !content.trim()} className="gap-2 rounded-full">
-                {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
-                ثبت کامنت
+          </div>
+        </div>
+        {!compact && !nested && comment.replies?.length ? (
+          <div className="mt-4 space-y-4">
+                {comment.replies.map((reply) => renderComment(reply, true, false, hidden))}
+          </div>
+        ) : null}
+        {!compact && nested && deeperReplies.length ? (
+          <div className="mt-3 mr-6">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="rounded-full text-xs"
+              onClick={() => toggleExpandedReplies(comment.id)}
+            >
+              {showDeeperReplies ? "بستن پاسخ‌های بیشتر" : `نمایش ${toPersianDigits(deeperReplies.length)} پاسخ بیشتر`}
+            </Button>
+            {showDeeperReplies ? (
+              <div className="mt-3 space-y-3">
+                {deeperReplies.map((reply) => renderComment(reply, false, true, hidden))}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    );
+  };
+
+  const deleteReplyCount = deleteTarget ? allDescendants(deleteTarget).length : 0;
+
+  return (
+    <>
+      <Card className="mt-10 overflow-hidden rounded-[2rem] border border-border/70 bg-card/90 shadow-sm" dir="rtl">
+        <CardHeader className="border-b border-border/60 bg-muted/20 text-right">
+          <CardTitle className="flex items-center justify-start gap-2 text-2xl">
+            <MessageSquare className="h-5 w-5 text-primary" />
+            کامنت‌ها
+          </CardTitle>
+          <CardDescription>
+            {toPersianDigits(commentCount)} کامنت برای این نوشته ثبت شده است.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6 p-4 md:p-6">
+          {!isAuthenticated ? (
+            <div className="rounded-3xl border border-dashed border-border/70 bg-muted/20 p-5 text-center text-sm leading-7 text-muted-foreground">
+              برای ثبت کامنت باید وارد حساب کاربری شوید.
+              <Button asChild className="mr-3" size="sm">
+                <Link to="/auth">ورود / ثبت‌نام</Link>
               </Button>
             </div>
-          </div>
-        )}
+          ) : (
+            <div className="rounded-3xl border border-border/70 bg-muted/20 p-4">
+              {replyTarget ? (
+                <div className="mb-3 flex items-center justify-between rounded-2xl bg-background px-3 py-2 text-sm">
+                  <Button variant="ghost" size="sm" onClick={() => setReplyTo(null)}>
+                    لغو پاسخ
+                  </Button>
+                  <span>پاسخ به {displayName(replyTarget.author)}</span>
+                </div>
+              ) : null}
+              <Textarea
+                value={content}
+                onChange={(event) => setContent(event.target.value)}
+                placeholder="کامنت خود را بنویسید..."
+                className="min-h-32 rounded-2xl bg-background text-right"
+              />
+              <div className="mt-3 flex justify-start">
+                <Button onClick={submitComment} disabled={submitting || !content.trim()} className="gap-2 rounded-full">
+                  {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
+                  ثبت کامنت
+                </Button>
+              </div>
+            </div>
+          )}
 
-        {loading ? (
-          <div className="flex justify-center py-8 text-muted-foreground">
-            <Loader2 className="h-5 w-5 animate-spin" />
-          </div>
-        ) : comments.length ? (
-          <div className="space-y-5">{comments.map((comment) => renderComment(comment))}</div>
-        ) : (
-          <div className="rounded-3xl border border-dashed border-border/70 p-8 text-center text-sm text-muted-foreground">
-            هنوز کامنتی ثبت نشده است.
-          </div>
-        )}
-      </CardContent>
-    </Card>
+          {loading ? (
+            <div className="flex justify-center py-8 text-muted-foreground">
+              <Loader2 className="h-5 w-5 animate-spin" />
+            </div>
+          ) : comments.length ? (
+            <div className="space-y-5">{comments.map((comment) => renderComment(comment))}</div>
+          ) : (
+            <div className="rounded-3xl border border-dashed border-border/70 p-8 text-center text-sm text-muted-foreground">
+              هنوز کامنتی ثبت نشده است.
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <AlertDialog open={Boolean(deleteTarget)} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+        <AlertDialogContent dir="rtl" className="text-right">
+          <AlertDialogHeader>
+            <AlertDialogTitle>حذف کامنت</AlertDialogTitle>
+            <AlertDialogDescription className="leading-7">
+              این عملیات کامنت را به‌صورت نرم حذف می‌کند و دیگر در سایت نمایش داده نمی‌شود.
+              {deleteReplyCount ? (
+                <span className="mt-2 block font-medium text-destructive">
+                  {toPersianDigits(deleteReplyCount)} پاسخ وابسته به این کامنت هم حذف می‌شود.
+                </span>
+              ) : null}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter className="gap-2 sm:justify-start">
+            <AlertDialogCancel>انصراف</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={deleteComment}
+            >
+              حذف کامنت
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
 }

src/lib/api.ts

@@ -403,23 +403,35 @@ class ApiClient {
     page?: number;
     limit?: number;
     category?: string;
-    tag?: string;
+    tag?: string | string[];
     search?: string;
     featured?: boolean;
-    author?: string;
+    author?: string | string[];
   }) {
     const queryParams = new URLSearchParams();
     if (params?.page) queryParams.append('page', params.page.toString());
     if (params?.limit) queryParams.append('limit', params.limit.toString());
     if (params?.category) queryParams.append('category', params.category);
-    if (params?.tag) queryParams.append('tag', params.tag);
+    if (Array.isArray(params?.tag)) {
+      params.tag.forEach((tag) => queryParams.append('tag', tag));
+    } else if (params?.tag) {
+      queryParams.append('tag', params.tag);
+    }
     if (params?.search) queryParams.append('search', params.search);
     if (params?.featured !== undefined) queryParams.append('featured', params.featured.toString());
-    if (params?.author) queryParams.append('author', params.author);
+    if (Array.isArray(params?.author)) {
+      params.author.forEach((author) => queryParams.append('author', author));
+    } else if (params?.author) {
+      queryParams.append('author', params.author);
+    }
 
     const query = queryParams.toString();
     return this.request<Types.PostListSchema[]>(`/api/blog/posts${query ? `?${query}` : ''}`);
     }
+
+  async getBlogFilters() {
+    return this.request<Types.BlogFiltersSchema>('/api/blog/filters');
+  }
   
   async getPost(slug: string) {
     return this.request<Types.PostDetailSchema>(`/api/blog/posts/${encodeURIComponent(slug)}`);
@@ -455,6 +467,10 @@ class ApiClient {
     return this.request<Types.PostListSchema[]>(`/api/blog/admin/posts${query.toString() ? `?${query.toString()}` : ''}`);
   }
 
+  async listBlogWriters() {
+    return this.request<NonNullable<Types.PostListSchema['writers']>>('/api/blog/admin/writers');
+  }
+
   async getAdminBlogPost(postId: number) {
     return this.request<Types.PostDetailSchema>(`/api/blog/admin/posts/${postId}`);
   }
@@ -565,6 +581,13 @@ class ApiClient {
     });
   }
 
+  async updateComment(commentId: number, data: Types.CommentUpdateSchema) {
+    return this.request<Types.CommentSchema>(`/api/blog/comments/${commentId}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
   async hideComment(commentId: number, note?: string) {
     return this.request<Types.MessageSchema>(`/api/blog/comments/${commentId}/hide`, {
       method: 'POST',
@@ -572,6 +595,19 @@ class ApiClient {
     });
   }
 
+  async unhideComment(commentId: number) {
+    return this.request<Types.MessageSchema>(`/api/blog/comments/${commentId}/unhide`, {
+      method: 'POST',
+    });
+  }
+
+  async deleteComment(commentId: number, note?: string) {
+    return this.request<Types.MessageSchema>(`/api/blog/comments/${commentId}/delete`, {
+      method: 'POST',
+      body: JSON.stringify({ note: note ?? '' }),
+    });
+  }
+
   async listDeletedComments() {
     return this.request<Types.CommentSchema[]>('/api/blog/deleted/comments');
   }

src/views/AdminBlogEditor.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { ArrowLeft, ArrowRight, FolderUp, ImageUp, Loader2, Save, Send, Trash2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import Markdown from "@/components/Markdown";
+import { useAuth } from "@/contexts/AuthContext";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -27,6 +28,7 @@ const emptyForm: Types.PostCreateSchema = {
   excerpt: "",
   category_id: null,
   tag_ids: [],
+  writer_ids: [],
   status: "draft",
   is_featured: false,
   seo_title: "",
@@ -40,12 +42,14 @@ const emptyForm: Types.PostCreateSchema = {
 
 export default function AdminBlogEditor({ postId }: Props) {
   const router = useRouter();
+  const { user } = useAuth();
   const { toast } = useToast();
   const featuredInputRef = useRef<HTMLInputElement | null>(null);
   const [form, setForm] = useState<Types.PostCreateSchema>(emptyForm);
   const [post, setPost] = useState<Types.PostDetailSchema | null>(null);
   const [categories, setCategories] = useState<Types.CategorySchema[]>([]);
   const [tags, setTags] = useState<Types.TagSchema[]>([]);
+  const [users, setUsers] = useState<NonNullable<Types.PostListSchema["writers"]>>([]);
   const [loading, setLoading] = useState(Boolean(postId));
   const [saving, setSaving] = useState(false);
   const [uploadingFeatured, setUploadingFeatured] = useState(false);
@@ -53,6 +57,7 @@ export default function AdminBlogEditor({ postId }: Props) {
   const isNew = postId == null;
   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);
 
   useEffect(() => {
     Promise.all([api.getCategories(), api.getTags()])
@@ -63,6 +68,13 @@ export default function AdminBlogEditor({ postId }: Props) {
       .catch(() => undefined);
   }, []);
 
+  useEffect(() => {
+    if (!canAssignWriters) return;
+    api.listBlogWriters()
+      .then((data) => setUsers(data))
+      .catch(() => undefined);
+  }, [canAssignWriters]);
+
   useEffect(() => {
     if (!postId) return;
     setLoading(true);
@@ -75,6 +87,7 @@ export default function AdminBlogEditor({ postId }: Props) {
           excerpt: data.excerpt ?? "",
           category_id: data.category?.id ?? null,
           tag_ids: data.tags.map((tag) => tag.id),
+          writer_ids: data.writers?.map((writer) => writer.id) ?? [data.author.id],
           status: data.status as Types.PostCreateSchema["status"],
           is_featured: data.is_featured,
           seo_title: data.seo_title ?? "",
@@ -97,6 +110,7 @@ export default function AdminBlogEditor({ postId }: Props) {
   }, [postId, toast]);
 
   const selectedTagIds = useMemo(() => form.tag_ids ?? [], [form.tag_ids]);
+  const selectedWriterIds = useMemo(() => form.writer_ids ?? [], [form.writer_ids]);
 
   const updateForm = <K extends keyof Types.PostCreateSchema>(key: K, value: Types.PostCreateSchema[K]) => {
     setForm((prev) => ({ ...prev, [key]: value }));
@@ -322,6 +336,37 @@ export default function AdminBlogEditor({ postId }: Props) {
                 })}
               </div>
             </div>
+
+            {canAssignWriters ? (
+              <div>
+                <Label className="mb-2 block text-right">نویسندگان</Label>
+                <div className="flex flex-wrap justify-end gap-2">
+                  {users.map((writer) => {
+                    const selected = selectedWriterIds.includes(writer.id);
+                    const fullName = [writer.first_name, writer.last_name].filter(Boolean).join(" ") || writer.username;
+                    return (
+                      <Button
+                        key={writer.id}
+                        type="button"
+                        size="sm"
+                        variant={selected ? "default" : "outline"}
+                        onClick={() => {
+                          updateForm(
+                            "writer_ids",
+                            selected ? selectedWriterIds.filter((id) => id !== writer.id) : [...selectedWriterIds, writer.id],
+                          );
+                        }}
+                      >
+                        {fullName}
+                      </Button>
+                    );
+                  })}
+                </div>
+                <p className="mt-2 text-right text-xs text-muted-foreground">
+                  مالک اصلی نوشته تغییر نمی‌کند؛ این گزینه فقط لیست نویسندگان عمومی را تنظیم می‌کند.
+                </p>
+              </div>
+            ) : null}
           </CardContent>
         </Card>