feat(blog): redesign post detail experience

src/components/BlogPostActions.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Bookmark, Heart, Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useAuth } from "@/contexts/AuthContext";
+import { api } from "@/lib/api";
+import type * as Types from "@/lib/types";
+import { cn, toPersianDigits } from "@/lib/utils";
+
+type BlogPostActionsProps = {
+  slug: string;
+  initialLikes: number;
+  initialSaves: number;
+  initialComments: number;
+};
+
+export default function BlogPostActions({
+  slug,
+  initialLikes,
+  initialSaves,
+  initialComments,
+}: BlogPostActionsProps) {
+  const { isAuthenticated } = useAuth();
+  const [loadingAction, setLoadingAction] = useState<"like" | "save" | null>(null);
+  const [interaction, setInteraction] = useState<Types.BlogInteractionSchema>({
+    liked: false,
+    saved: false,
+    likes_count: initialLikes,
+    saves_count: initialSaves,
+    comments_count: initialComments,
+  });
+
+  useEffect(() => {
+    let mounted = true;
+    if (!isAuthenticated) return;
+
+    api.getBlogInteraction(slug)
+      .then((data) => {
+        if (mounted) setInteraction(data);
+      })
+      .catch(() => undefined);
+
+    return () => {
+      mounted = false;
+    };
+  }, [isAuthenticated, slug]);
+
+  const toggleLike = async () => {
+    if (!isAuthenticated || loadingAction) return;
+    setLoadingAction("like");
+    try {
+      setInteraction(await api.toggleLike(slug));
+    } finally {
+      setLoadingAction(null);
+    }
+  };
+
+  const toggleSave = async () => {
+    if (!isAuthenticated || loadingAction) return;
+    setLoadingAction("save");
+    try {
+      setInteraction(await api.toggleSave(slug));
+    } finally {
+      setLoadingAction(null);
+    }
+  };
+
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-3 pt-4" dir="rtl">
+      <Button
+        type="button"
+        variant="ghost"
+        size="lg"
+        onClick={toggleLike}
+        disabled={!isAuthenticated || Boolean(loadingAction)}
+        className="gap-2 rounded-full border border-border/60 bg-background/80 px-5 shadow-sm backdrop-blur hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-950/30"
+        aria-label="پسندیدن نوشته"
+      >
+        {loadingAction === "like" ? (
+          <Loader2 className="h-5 w-5 animate-spin" />
+        ) : (
+          <Heart
+            className={cn(
+              "h-5 w-5",
+              interaction.liked && "fill-rose-500 text-rose-500",
+            )}
+          />
+        )}
+        <span>{toPersianDigits(interaction.likes_count)}</span>
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        size="lg"
+        onClick={toggleSave}
+        disabled={!isAuthenticated || Boolean(loadingAction)}
+        className="gap-2 rounded-full border border-border/60 bg-background/80 px-5 shadow-sm backdrop-blur hover:bg-amber-50 hover:text-amber-600 dark:hover:bg-amber-950/30"
+        aria-label="ذخیره نوشته"
+      >
+        {loadingAction === "save" ? (
+          <Loader2 className="h-5 w-5 animate-spin" />
+        ) : (
+          <Bookmark
+            className={cn(
+              "h-5 w-5",
+              interaction.saved && "fill-amber-500 text-amber-500",
+            )}
+          />
+        )}
+        <span>ذخیره</span>
+      </Button>
+      {!isAuthenticated ? (
+        <span className="basis-full text-center text-xs text-muted-foreground">
+          برای پسندیدن یا ذخیره کردن وارد حساب کاربری شوید.
+        </span>
+      ) : null}
+    </div>
+  );
+}

src/components/BlogPostInteractions.tsx

@@ -1,22 +1,19 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import { Bookmark, Heart, Loader2, MessageSquare, Send, Trash2 } from "lucide-react";
+import { Loader2, MessageSquare, Reply, Send, Trash2 } from "lucide-react";
 import { useAuth } from "@/contexts/AuthContext";
 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 { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
 import { Link } from "@/lib/router";
-import { formatJalali, resolveErrorMessage } from "@/lib/utils";
+import { formatJalaliDate, resolveErrorMessage, toPersianDigits } from "@/lib/utils";
 import { useToast } from "@/hooks/use-toast";
 
 type Props = {
   slug: string;
-  initialLikes: number;
-  initialSaves: number;
   initialComments: number;
 };
 
@@ -24,22 +21,35 @@ function displayName(author: Types.CommentSchema["author"]) {
   return [author.first_name, author.last_name].filter(Boolean).join(" ") || author.username;
 }
 
+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 findComment(comments: Types.CommentSchema[], id: number | null): Types.CommentSchema | undefined {
+  if (!id) return undefined;
+  for (const comment of comments) {
+    if (comment.id === id) return comment;
+    const reply = findComment(comment.replies || [], id);
+    if (reply) return reply;
+  }
+  return undefined;
+}
+
 export default function BlogPostInteractions({
   slug,
-  initialLikes,
-  initialSaves,
   initialComments,
 }: Props) {
   const { user, isAuthenticated } = useAuth();
   const { toast } = useToast();
   const [comments, setComments] = useState<Types.CommentSchema[]>([]);
-  const [interaction, setInteraction] = useState<Types.BlogInteractionSchema>({
-    liked: false,
-    saved: false,
-    likes_count: initialLikes,
-    saves_count: initialSaves,
-    comments_count: initialComments,
-  });
+  const [commentCount, setCommentCount] = useState(initialComments);
   const [content, setContent] = useState("");
   const [replyTo, setReplyTo] = useState<number | null>(null);
   const [loading, setLoading] = useState(true);
@@ -48,30 +58,23 @@ export default function BlogPostInteractions({
   const canModerate = Boolean(user?.is_staff || user?.is_superuser || user?.can_review_blog_posts);
 
   const replyTarget = useMemo(
-    () => comments.find((comment) => comment.id === replyTo),
+    () => findComment(comments, replyTo),
     [comments, replyTo],
   );
 
   const loadComments = async () => {
     const data = await api.getComments(slug);
     setComments(data);
-    setInteraction((prev) => ({ ...prev, comments_count: data.length }));
+    setCommentCount(countComments(data));
   };
 
   useEffect(() => {
     let mounted = true;
-    Promise.all([
-      api.getComments(slug),
-      isAuthenticated ? api.getBlogInteraction(slug).catch(() => null) : Promise.resolve(null),
-    ])
-      .then(([commentData, interactionData]) => {
+    api.getComments(slug)
+      .then((data) => {
         if (!mounted) return;
-        setComments(commentData);
-        if (interactionData) {
-          setInteraction(interactionData);
-        } else {
-          setInteraction((prev) => ({ ...prev, comments_count: commentData.length }));
-        }
+        setComments(data);
+        setCommentCount(countComments(data));
       })
       .finally(() => {
         if (mounted) setLoading(false);
@@ -79,17 +82,7 @@ export default function BlogPostInteractions({
     return () => {
       mounted = false;
     };
-  }, [isAuthenticated, slug]);
-
-  const toggleLike = async () => {
-    if (!isAuthenticated) return;
-    setInteraction(await api.toggleLike(slug));
-  };
-
-  const toggleSave = async () => {
-    if (!isAuthenticated) return;
-    setInteraction(await api.toggleSave(slug));
-  };
+  }, [slug]);
 
   const submitComment = async () => {
     const trimmed = content.trim();
@@ -100,10 +93,10 @@ export default function BlogPostInteractions({
       setContent("");
       setReplyTo(null);
       await loadComments();
-      toast({ title: "نظر ثبت شد", variant: "success" });
+      toast({ title: "کامنت ثبت شد", variant: "success" });
     } catch (error) {
       toast({
-        title: "ثبت نظر ناموفق بود",
+        title: "ثبت کامنت ناموفق بود",
         description: resolveErrorMessage(error, "دوباره تلاش کنید"),
         variant: "destructive",
       });
@@ -116,10 +109,10 @@ export default function BlogPostInteractions({
     try {
       await api.hideComment(commentId);
       await loadComments();
-      toast({ title: "نظر مخفی شد", variant: "success" });
+      toast({ title: "کامنت مخفی شد", variant: "success" });
     } catch (error) {
       toast({
-        title: "حذف نظر ناموفق بود",
+        title: "حذف کامنت ناموفق بود",
         description: resolveErrorMessage(error, "دوباره تلاش کنید"),
         variant: "destructive",
       });
@@ -127,30 +120,50 @@ export default function BlogPostInteractions({
   };
 
   const renderComment = (comment: Types.CommentSchema, nested = false) => (
-    <div key={comment.id} className={nested ? "mr-6 border-r pr-4" : ""}>
-      <div className="rounded-2xl border border-border/70 bg-background/80 p-4 text-right">
-        <div className="flex flex-wrap items-center justify-between gap-3">
-          <div className="flex items-center gap-2">
-            {canModerate ? (
-              <Button variant="ghost" size="sm" onClick={() => hideComment(comment.id)}>
-                <Trash2 className="h-4 w-4" />
-              </Button>
-            ) : null}
+    <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" onClick={() => setReplyTo(comment.id)}>
+              <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}
-          </div>
-          <div>
-            <p className="font-medium">{displayName(comment.author)}</p>
-            <p className="text-xs text-muted-foreground">{formatJalali(comment.created_at, false)}</p>
+            {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>
-        <p className="mt-3 whitespace-pre-wrap leading-7 text-sm">{comment.content}</p>
       </div>
       {comment.replies?.length ? (
-        <div className="mt-3 space-y-3">
+        <div className="mt-4 space-y-4">
           {comment.replies.map((reply) => renderComment(reply, true))}
         </div>
       ) : null}
@@ -158,52 +171,28 @@ export default function BlogPostInteractions({
   );
 
   return (
-    <Card className="mt-8 rounded-[1.75rem] border border-border/70 shadow-sm" dir="rtl">
+    <Card className="mt-10 rounded-[2rem] border border-border/70 bg-card/90 shadow-sm" dir="rtl">
       <CardHeader className="text-right">
-        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-          <div className="flex items-center gap-2">
-            <Button
-              variant={interaction.saved ? "default" : "outline"}
-              onClick={toggleSave}
-              disabled={!isAuthenticated}
-            >
-              <Bookmark className="ml-2 h-4 w-4" />
-              ذخیره
-              <Badge className="mr-2" variant="secondary">{interaction.saves_count}</Badge>
-            </Button>
-            <Button
-              variant={interaction.liked ? "default" : "outline"}
-              onClick={toggleLike}
-              disabled={!isAuthenticated}
-            >
-              <Heart className="ml-2 h-4 w-4" />
-              پسندیدن
-              <Badge className="mr-2" variant="secondary">{interaction.likes_count}</Badge>
-            </Button>
-          </div>
-          <div>
-            <CardTitle className="flex items-center justify-end gap-2">
-              دیدگاه‌ها
-              <MessageSquare className="h-5 w-5 text-primary" />
-            </CardTitle>
-            <CardDescription className="mt-2">
-              {interaction.comments_count} نظر برای این نوشته ثبت شده است.
-            </CardDescription>
-          </div>
-        </div>
+        <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-5">
+      <CardContent className="space-y-6">
         {!isAuthenticated ? (
-          <div className="rounded-2xl border border-dashed border-border/70 bg-muted/20 p-5 text-center text-sm text-muted-foreground">
-            برای پسندیدن، ذخیره‌کردن یا ثبت نظر باید وارد حساب شوید.
+          <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 className="rounded-2xl border border-border/70 bg-muted/20 p-4">
+          <div className="rounded-3xl border border-border/70 bg-muted/20 p-4">
             {replyTarget ? (
-              <div className="mb-3 flex items-center justify-between rounded-xl bg-background px-3 py-2 text-sm">
+              <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>
@@ -213,13 +202,13 @@ export default function BlogPostInteractions({
             <Textarea
               value={content}
               onChange={(event) => setContent(event.target.value)}
-              placeholder="نظر خود را بنویسید..."
-              className="min-h-28 text-right"
+              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()}>
-                {submitting ? <Loader2 className="ml-2 h-4 w-4 animate-spin" /> : <Send className="ml-2 h-4 w-4" />}
-                ثبت نظر
+              <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>
@@ -230,10 +219,10 @@ export default function BlogPostInteractions({
             <Loader2 className="h-5 w-5 animate-spin" />
           </div>
         ) : comments.length ? (
-          <div className="space-y-4">{comments.map((comment) => renderComment(comment))}</div>
+          <div className="space-y-5">{comments.map((comment) => renderComment(comment))}</div>
         ) : (
-          <div className="rounded-2xl border border-dashed border-border/70 p-8 text-center text-sm text-muted-foreground">
-            هنوز نظری ثبت نشده است.
+          <div className="rounded-3xl border border-dashed border-border/70 p-8 text-center text-sm text-muted-foreground">
+            هنوز کامنتی ثبت نشده است.
           </div>
         )}
       </CardContent>