feat(blog): redesign post detail experience

src/app/blog/[slug]/page.tsx

@@ -1,15 +1,18 @@
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
-import Markdown from "@/components/Markdown";
+import BlogPostActions from "@/components/BlogPostActions";
 import BlogPostInteractions from "@/components/BlogPostInteractions";
+import BlogThumbnail from "@/components/BlogThumbnail";
+import Markdown from "@/components/Markdown";
 import { Badge } from "@/components/ui/badge";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Link } from "@/lib/router";
-import { PublicApiError, getPublicPost } from "@/lib/public-api";
-import { apiBaseUrl, siteUrl, toAbsoluteUrl } from "@/lib/site";
 import { blogPostPath, blogPostUrl, normalizeBlogSlugParam } from "@/lib/blog-routes";
-import { formatJalali } from "@/lib/utils";
+import { extractMarkdownHeadings, type MarkdownHeading } from "@/lib/markdown-headings";
+import { PublicApiError, getPublicPost, getRecommendedPosts } from "@/lib/public-api";
+import { apiBaseUrl, siteUrl, toAbsoluteUrl } from "@/lib/site";
+import type * as Types from "@/lib/types";
+import { formatJalaliDate, getBlogCardImageUrl, getBlogHeroImageUrl } from "@/lib/utils";
 
 type Params = Promise<{ slug: string }>;
 
@@ -20,6 +23,10 @@ function cleanText(value?: string | null) {
   return value.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
 }
 
+function authorName(post: Types.PostListSchema) {
+  return [post.author.first_name, post.author.last_name].filter(Boolean).join(" ") || post.author.username;
+}
+
 async function loadPost(slug: string) {
   try {
     return await getPublicPost(slug);
@@ -31,6 +38,85 @@ async function loadPost(slug: string) {
   }
 }
 
+async function loadRecommended(slug: string) {
+  try {
+    return await getRecommendedPosts(slug, 3);
+  } catch {
+    return [];
+  }
+}
+
+function TableOfContents({ headings }: { headings: MarkdownHeading[] }) {
+  if (!headings.length) {
+    return <p className="text-sm leading-7 text-muted-foreground">برای این نوشته فهرست تیترها ثبت نشده است.</p>;
+  }
+
+  return (
+    <nav className="space-y-1 text-sm">
+      {headings.map((heading) => (
+        <a
+          key={heading.id}
+          href={`#${heading.id}`}
+          className="block rounded-2xl px-3 py-2 leading-6 text-muted-foreground transition hover:bg-primary/10 hover:text-primary"
+          style={{ paddingRight: `${(heading.level - 1) * 0.85 + 0.75}rem` }}
+        >
+          {heading.text}
+        </a>
+      ))}
+    </nav>
+  );
+}
+
+function HashTags({ tags }: { tags: Types.PostListSchema["tags"] }) {
+  if (!tags.length) {
+    return <p className="text-sm text-muted-foreground">هشتگی برای این نوشته ثبت نشده است.</p>;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {tags.map((tag) => (
+        <Badge key={tag.id} variant="outline" className="rounded-full px-3 py-1">
+          #{tag.name}
+        </Badge>
+      ))}
+    </div>
+  );
+}
+
+function RecommendedPosts({ posts }: { posts: Types.PostListSchema[] }) {
+  if (!posts.length) return null;
+
+  return (
+    <section className="mt-10 rounded-[2rem] border border-border/70 bg-card/90 p-5 shadow-sm">
+      <div className="mb-5 text-right">
+        <p className="text-sm font-medium text-primary">ادامه مطالعه</p>
+        <h2 className="mt-1 text-2xl font-bold">نوشته‌های پیشنهادی</h2>
+      </div>
+      <div className="grid gap-4 md:grid-cols-3">
+        {posts.map((post) => (
+          <Link
+            key={post.id}
+            to={blogPostPath(post.slug)}
+            className="group overflow-hidden rounded-3xl border border-border/70 bg-background transition hover:-translate-y-1 hover:shadow-lg"
+          >
+            <BlogThumbnail
+              post={post}
+              imageUrl={toAbsoluteUrl(getBlogCardImageUrl(post), apiBaseUrl)}
+              className="aspect-[16/10]"
+            />
+            <div className="space-y-2 p-4 text-right">
+              <h3 className="line-clamp-2 font-semibold leading-7 group-hover:text-primary">{post.title}</h3>
+              <time className="text-xs text-muted-foreground" dateTime={post.published_at || post.created_at}>
+                {formatJalaliDate(post.published_at || post.created_at)}
+              </time>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}
+
 export async function generateMetadata({
   params,
 }: {
@@ -43,7 +129,7 @@ export async function generateMetadata({
   const metaDescription = post.seo_description || post.og_description || description;
   const canonical = post.canonical_url || blogPostPath(post.slug);
   const image = toAbsoluteUrl(
-    post.og_image_url || post.absolute_featured_image_url || post.featured_image,
+    post.og_image_url || getBlogHeroImageUrl(post),
     apiBaseUrl,
   ) ?? `${siteUrl}/favicon.ico`;
 
@@ -56,7 +142,7 @@ export async function generateMetadata({
       title: post.og_title || metaTitle,
       description: post.og_description || metaDescription,
       url: blogPostUrl(siteUrl, post.slug),
-      siteName: "انجمن علمی کامپیوتر شرق گیلان",
+      siteName: "انجمن علمی مهندسی کامپیوتر شرق گیلان",
       type: "article",
       images: [image],
       locale: "fa_IR",
@@ -79,92 +165,126 @@ export default async function BlogDetailPage({
 }) {
   const { slug } = await params;
   const post = await loadPost(normalizeBlogSlugParam(slug));
+  const recommendedPosts = await loadRecommended(post.slug);
+  const headings = extractMarkdownHeadings(post.content);
   const description = cleanText(post.excerpt || post.content).slice(0, 160);
   const metaDescription = post.seo_description || post.og_description || description;
-  const image = toAbsoluteUrl(
-    post.og_image_url || post.absolute_featured_image_url || post.featured_image,
-    apiBaseUrl,
-  ) ?? `${siteUrl}/favicon.ico`;
+  const coverImage = toAbsoluteUrl(getBlogHeroImageUrl(post), apiBaseUrl);
+  const seoImage = toAbsoluteUrl(post.og_image_url || getBlogHeroImageUrl(post), apiBaseUrl) ?? `${siteUrl}/favicon.ico`;
 
   const structuredData = {
     "@context": "https://schema.org",
     "@type": "BlogPosting",
     headline: post.title,
     description: metaDescription,
-    image: [image],
+    image: [seoImage],
     datePublished: post.published_at || post.created_at,
     dateModified: post.updated_at,
     url: blogPostUrl(siteUrl, post.slug),
     author: {
       "@type": "Person",
-      name: [post.author.first_name, post.author.last_name].filter(Boolean).join(" ") || post.author.username,
+      name: authorName(post),
     },
     publisher: {
       "@type": "Organization",
-      name: "انجمن علمی کامپیوتر شرق گیلان",
+      name: "انجمن علمی مهندسی کامپیوتر شرق گیلان",
       logo: {
         "@type": "ImageObject",
         url: `${siteUrl}/favicon.ico`,
       },
     },
+    keywords: post.tags.map((tag) => tag.name).join(", "),
   };
 
   return (
-    <div className="min-h-screen bg-background" dir="rtl">
+    <div className="min-h-screen bg-[linear-gradient(180deg,hsl(var(--background)),hsl(var(--muted)/0.28))]" dir="rtl">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
       />
       <div className="container mx-auto px-4 py-8">
-        <div className="mb-6 flex items-center justify-between gap-3">
-          <Button variant="outline" asChild>
-            <Link to="/blog">بازگشت به وبلاگ</Link>
+        <div className="mb-6 flex justify-start">
+          <Button variant="outline" asChild className="rounded-full">
+            <Link to="/blog">بازگشت به بلاگ</Link>
           </Button>
-          <div className="text-sm text-muted-foreground">
-            {formatJalali(post.published_at || post.created_at, false)}
-          </div>
         </div>
 
-        <Card>
-          {image && (
-            <div className="w-full aspect-video overflow-hidden rounded-t-lg bg-muted">
-              <img
-                src={image}
-                alt={post.title}
-                className="h-full w-full object-cover"
-                loading="eager"
-              />
+        <div className="gap-8 xl:flex xl:items-start">
+          <aside className="hidden w-72 shrink-0 xl:block">
+            <div className="sticky top-24 space-y-4">
+              <section className="rounded-[1.75rem] border border-border/70 bg-card/90 p-4 shadow-sm backdrop-blur">
+                <h2 className="mb-3 text-right font-bold">فهرست نوشته</h2>
+                <TableOfContents headings={headings} />
+              </section>
+              <section className="rounded-[1.75rem] border border-border/70 bg-card/90 p-4 shadow-sm backdrop-blur">
+                <h2 className="mb-3 text-right font-bold">هشتگ‌ها</h2>
+                <HashTags tags={post.tags} />
+              </section>
             </div>
-          )}
-          <CardHeader>
-            <div className="flex flex-wrap gap-2">
-              {post.category?.name ? <Badge variant="secondary">{post.category.name}</Badge> : null}
-              {post.tags.map((tag) => (
-                <Badge key={tag.id} variant="outline">
-                  {tag.name}
-                </Badge>
-              ))}
-            </div>
-            <CardTitle className="text-3xl leading-relaxed">{post.title}</CardTitle>
-            <CardDescription className="text-sm">
-              نویسنده: {[post.author.first_name, post.author.last_name].filter(Boolean).join(" ") || post.author.username}
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            {post.excerpt ? (
-              <p className="rounded-lg border bg-muted/30 p-4 text-sm leading-7 text-muted-foreground">
-                {post.excerpt}
-              </p>
-            ) : null}
-            <Markdown content={post.content} justify size="base" />
-          </CardContent>
-        </Card>
-        <BlogPostInteractions
-          slug={post.slug}
-          initialLikes={post.likes_count ?? 0}
-          initialSaves={post.saves_count ?? 0}
-          initialComments={post.comments_count ?? 0}
-        />
+          </aside>
+
+          <main className="min-w-0 flex-1">
+            <article className="overflow-hidden rounded-[2.5rem] border border-border/70 bg-card/95 shadow-xl shadow-primary/5">
+              <header className="space-y-6 p-5 text-right md:p-8">
+                <div className="flex flex-wrap gap-2">
+                  {post.category?.name ? <Badge className="rounded-full">{post.category.name}</Badge> : null}
+                  <Badge variant="outline" className="rounded-full">
+                    {formatJalaliDate(post.published_at || post.created_at)}
+                  </Badge>
+                </div>
+                <div className="max-w-4xl space-y-4">
+                  <h1 className="text-3xl font-black leading-[1.7] tracking-tight md:text-5xl">
+                    {post.title}
+                  </h1>
+                  <p className="text-sm text-muted-foreground">
+                    نوشته {authorName(post)}
+                  </p>
+                  {post.excerpt ? (
+                    <p className="max-w-3xl text-base leading-8 text-muted-foreground md:text-lg">
+                      {post.excerpt}
+                    </p>
+                  ) : null}
+                </div>
+              </header>
+
+              <div className="px-5 md:px-8">
+                <BlogThumbnail
+                  post={post}
+                  imageUrl={coverImage}
+                  className="aspect-[16/9] rounded-[2rem]"
+                  priority
+                />
+                <BlogPostActions
+                  slug={post.slug}
+                  initialLikes={post.likes_count ?? 0}
+                  initialSaves={post.saves_count ?? 0}
+                  initialComments={post.comments_count ?? 0}
+                />
+              </div>
+
+              <div className="space-y-5 p-5 md:p-8 xl:hidden">
+                <section className="rounded-[1.5rem] border border-border/70 bg-muted/20 p-4">
+                  <h2 className="mb-3 text-right font-bold">فهرست نوشته</h2>
+                  <TableOfContents headings={headings} />
+                </section>
+                <section className="rounded-[1.5rem] border border-border/70 bg-muted/20 p-4">
+                  <h2 className="mb-3 text-right font-bold">هشتگ‌ها</h2>
+                  <HashTags tags={post.tags} />
+                </section>
+              </div>
+
+              <div className="px-5 pb-8 pt-4 md:px-8 md:pb-10">
+                <Markdown content={post.content} justify size="base" className="mx-auto max-w-4xl" />
+              </div>
+            </article>
+
+            <RecommendedPosts posts={recommendedPosts} />
+            <BlogPostInteractions
+              slug={post.slug}
+              initialComments={post.comments_count ?? 0}
+            />
+          </main>
+        </div>
       </div>
     </div>
   );

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>

src/lib/public-api.ts

@@ -89,6 +89,16 @@ export async function getPublicPost(slug: string) {
   });
 }
 
+export async function getRecommendedPosts(slug: string, limit = 3) {
+  return requestJson<Types.PostListSchema[]>(
+    `/api/blog/posts/${encodeURIComponent(slug)}/recommended`,
+    {
+      params: { limit },
+      revalidate: DEFAULT_REVALIDATE_SECONDS,
+    },
+  );
+}
+
 export async function getPublicEvents(options?: { search?: string; limit?: number }) {
   const search = options?.search?.trim();