feat(blog): refresh post detail layout

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

@@ -1,20 +1,23 @@
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
+import { CalendarDays, Clock3, Hash, ListTree } from "lucide-react";
 import BlogPostActions from "@/components/BlogPostActions";
 import BlogPostInteractions from "@/components/BlogPostInteractions";
+import BlogTableOfContents from "@/components/BlogTableOfContents";
 import BlogThumbnail from "@/components/BlogThumbnail";
 import Markdown from "@/components/Markdown";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { Link } from "@/lib/router";
 import { blogPostPath, blogPostUrl, normalizeBlogSlugParam } from "@/lib/blog-routes";
-import { extractMarkdownHeadings, type MarkdownHeading } from "@/lib/markdown-headings";
+import { extractMarkdownHeadings } 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";
+import { formatJalaliDate, getBlogCardImageUrl, getBlogHeroImageUrl, toPersianDigits } from "@/lib/utils";
 
 type Params = Promise<{ slug: string }>;
+type Writer = NonNullable<Types.PostListSchema["writers"]>[number];
 
 export const dynamic = "force-dynamic";
 
@@ -23,8 +26,8 @@ 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;
+function personName(person: { first_name: string; last_name: string; username: string }) {
+  return [person.first_name, person.last_name].filter(Boolean).join(" ") || person.username;
 }
 
 async function loadPost(slug: string) {
@@ -46,40 +49,79 @@ async function loadRecommended(slug: string) {
   }
 }
 
-function TableOfContents({ headings }: { headings: MarkdownHeading[] }) {
-  if (!headings.length) {
-    return <p className="text-sm leading-7 text-muted-foreground">برای این نوشته فهرست تیترها ثبت نشده است.</p>;
+function Topics({ tags }: { tags: Types.PostListSchema["tags"] }) {
+  if (!tags.length) {
+    return null;
   }
 
   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>
+    <div className="flex flex-wrap items-center justify-start gap-2" aria-label="موضوعات نوشته">
+      
+      {tags.map((tag) => (
+        <Link key={tag.id} to={`/blog?tag=${encodeURIComponent(tag.slug)}`}>
+          <Badge variant="outline" className="rounded-full px-3 py-1 transition bg-slate-200 dark:bg-slate-600 hover:border-primary hover:text-primary">
+            <Hash className="h-3 w-3 text-primary" />
+            {tag.name}
+          </Badge>
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+function Breadcrumbs({ post }: { post: Types.PostDetailSchema }) {
+  const crumbs = post.category_path || [];
+
+  return (
+    <nav className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground" aria-label="مسیر نوشته">
+      <Link to="/blog" className="transition hover:text-primary">
+        بلاگ
+      </Link>
+      {crumbs.map((category) => (
+        <span key={category.id} className="flex items-center gap-2">
+          <span>/</span>
+          <Link to={`/blog?category=${encodeURIComponent(category.slug)}`} className="transition hover:text-primary">
+            {category.name}
+          </Link>
+        </span>
       ))}
     </nav>
   );
 }
 
-function HashTags({ tags }: { tags: Types.PostListSchema["tags"] }) {
-  if (!tags.length) {
-    return <p className="text-sm text-muted-foreground">هشتگی برای این نوشته ثبت نشده است.</p>;
-  }
+function WriterCards({ post }: { post: Types.PostDetailSchema }) {
+  const writers = post.writers?.length ? post.writers : [post.author];
 
   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>
-      ))}
+    <section className="mt-8 rounded-[2rem] border border-border/70 bg-card/90 p-5 shadow-sm">
+      {/* <div className="mb-4 text-right">
+        <p className="text-sm font-medium text-primary">نویسندگان</p>
+      </div> */}
+        <h2 className="mb-4 text-2xl font-bold">درباره نویسندگان این مقاله</h2>
+      <div className="grid gap-4 md:grid-cols-2">
+        {writers.map((writer: Writer) => {
+          const image = writer.profile_picture_preview_url || writer.profile_picture_thumbnail_url || writer.profile_picture;
+          return (
+            <Link
+              key={writer.id}
+              to={`/blog?author=${encodeURIComponent(writer.username)}`}
+              className="flex items-start gap-4 rounded-3xl border border-border/70 bg-background/80 p-4 text-right transition hover:-translate-y-0.5 hover:border-primary/50 hover:shadow-lg"
+            >
+              <Avatar className="h-14 w-14">
+                <AvatarImage src={image || undefined} alt={personName(writer)} />
+                <AvatarFallback>{personName(writer)[0] || "ن"}</AvatarFallback>
+              </Avatar>
+              <div className="min-w-0 flex-1">
+                <h3 className="font-bold">{personName(writer)}</h3>
+                <p className="mt-2 line-clamp-4 text-sm leading-7 text-muted-foreground">
+                  {writer.bio || "توضیحی برای این نویسنده ثبت نشده است."}
+                </p>
               </div>
+            </Link>
+          );
+        })}
+      </div>
+    </section>
   );
 }
 
@@ -88,10 +130,7 @@ function RecommendedPosts({ posts }: { posts: Types.PostListSchema[] }) {
 
   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>
+        <h2 className="mb-4 text-2xl font-bold">مقالات پیشنهادی</h2>
       <div className="grid gap-4 md:grid-cols-3">
         {posts.map((post) => (
           <Link
@@ -171,6 +210,7 @@ export default async function BlogDetailPage({
   const metaDescription = post.seo_description || post.og_description || description;
   const coverImage = toAbsoluteUrl(getBlogHeroImageUrl(post), apiBaseUrl);
   const seoImage = toAbsoluteUrl(post.og_image_url || getBlogHeroImageUrl(post), apiBaseUrl) ?? `${siteUrl}/favicon.ico`;
+  const writers = post.writers?.length ? post.writers : [post.author];
 
   const structuredData = {
     "@context": "https://schema.org",
@@ -181,10 +221,10 @@ export default async function BlogDetailPage({
     datePublished: post.published_at || post.created_at,
     dateModified: post.updated_at,
     url: blogPostUrl(siteUrl, post.slug),
-    author: {
+    author: writers.map((writer) => ({
       "@type": "Person",
-      name: authorName(post),
-    },
+      name: personName(writer),
+    })),
     publisher: {
       "@type": "Organization",
       name: "انجمن علمی مهندسی کامپیوتر شرق گیلان",
@@ -203,48 +243,44 @@ export default async function BlogDetailPage({
         dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
       />
       <div className="container mx-auto px-4 py-8">
-        <div className="mb-6 flex justify-start">
-          <Button variant="outline" asChild className="rounded-full">
-            <Link to="/blog">بازگشت به بلاگ</Link>
-          </Button>
-        </div>
-
         <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">
+          <aside className="sticky top-24 max-h-[calc(100vh-7rem)] space-y-4 overflow-y-auto pr-1 hidden w-72 shrink-0 xl:block">
             <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} />
+              <h2 className="mb-3 flex items-center justify-start gap-2 text-right font-bold">
+                <ListTree className="h-4 w-4 text-primary" />
+                فهرست محتوا
+              </h2>
+              <BlogTableOfContents 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>
           </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">
+            <article className="overflow-hidden rounded-[2.5rem] border border-border/70 bg-card/95">
               <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">
+                <Breadcrumbs post={post} />
+                <div className="space-y-4">
+                  <h1 className="text-3xl font-black leading-[2.15] tracking-tight md:text-5xl md:leading-[1.55]">
                     {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">
+                    <p className="text-base leading-8 text-muted-foreground md:text-lg">
                       {post.excerpt}
                     </p>
                   ) : null}
                 </div>
+                <div className="flex flex-wrap gap-3 text-sm text-muted-foreground">
+                  <span className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/70 px-3 py-1">
+                    <Clock3 className="h-4 w-4 text-primary" />
+                    {toPersianDigits(post.reading_time ?? 1)} دقیقه مطالعه
+                  </span>
+                  <time
+                    className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/70 px-3 py-1"
+                    dateTime={post.published_at || post.created_at}
+                  >
+                    <CalendarDays className="h-4 w-4 text-primary" />
+                    {formatJalaliDate(post.published_at || post.created_at)}
+                  </time>
+                </div>
               </header>
 
               <div className="px-5 md:px-8">
@@ -254,30 +290,32 @@ export default async function BlogDetailPage({
                   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} />
+                  <h2 className="mb-3 flex items-center justify-start gap-2 text-right font-bold">
+                    <ListTree className="h-4 w-4 text-primary" />
+                    فهرست محتوا
+                  </h2>
+                  <BlogTableOfContents headings={headings} />
                 </section>
               </div>
 
-              <div className="px-5 pb-8 pt-4 md:px-8 md:pb-10">
+              <div className="space-y-8 px-5 pb-8 pt-6 md:px-8 md:pb-10">
                 <Markdown content={post.content} justify size="base" className="mx-auto max-w-4xl" />
+                <div className="mx-auto max-w-4xl">
+                  <Topics tags={post.tags} />
+                </div>
+                <BlogPostActions
+                  slug={post.slug}
+                  initialLikes={post.likes_count ?? 0}
+                  initialSaves={post.saves_count ?? 0}
+                />
               </div>
             </article>
 
+            <WriterCards post={post} />
             <RecommendedPosts posts={recommendedPosts} />
             <BlogPostInteractions
               slug={post.slug}

src/components/BlogPostActions.tsx

@@ -12,14 +12,12 @@ 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);
@@ -28,7 +26,7 @@ export default function BlogPostActions({
     saved: false,
     likes_count: initialLikes,
     saves_count: initialSaves,
-    comments_count: initialComments,
+    comments_count: 0,
   });
 
   useEffect(() => {
@@ -67,7 +65,7 @@ export default function BlogPostActions({
   };
 
   return (
-    <div className="flex flex-wrap items-center justify-center gap-3 pt-4" dir="rtl">
+    <div className="flex flex-wrap items-center justify-center gap-3 border-t border-border/70 pt-6" dir="rtl">
       <Button
         type="button"
         variant="ghost"
@@ -92,10 +90,10 @@ export default function BlogPostActions({
       <Button
         type="button"
         variant="ghost"
-        size="lg"
+        size="icon"
         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"
+        className="rounded-full border border-border/60 bg-background/80 shadow-sm backdrop-blur hover:bg-amber-50 hover:text-amber-600 dark:hover:bg-amber-950/30"
         aria-label="ذخیره نوشته"
       >
         {loadingAction === "save" ? (
@@ -108,7 +106,6 @@ export default function BlogPostActions({
             )}
           />
         )}
-        <span>ذخیره</span>
       </Button>
       {!isAuthenticated ? (
         <span className="basis-full text-center text-xs text-muted-foreground">

src/components/BlogTableOfContents.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { MarkdownHeading } from "@/lib/markdown-headings";
+import { cn } from "@/lib/utils";
+
+type Props = {
+  headings: MarkdownHeading[];
+};
+
+export default function BlogTableOfContents({ headings }: Props) {
+  const [activeId, setActiveId] = useState(headings[0]?.id ?? "");
+
+  useEffect(() => {
+    if (!headings.length) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter((entry) => entry.isIntersecting)
+          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0];
+        if (visible?.target.id) {
+          setActiveId(visible.target.id);
+        }
+      },
+      {
+        rootMargin: "-20% 0px -65% 0px",
+        threshold: [0, 1],
+      },
+    );
+
+    headings.forEach((heading) => {
+      const element = document.getElementById(heading.id);
+      if (element) observer.observe(element);
+    });
+
+    return () => observer.disconnect();
+  }, [headings]);
+
+  if (!headings.length) {
+    return <p className="text-sm leading-7 text-muted-foreground">برای این نوشته فهرست محتوا ثبت نشده است.</p>;
+  }
+
+  const scrollToHeading = (id: string) => {
+    const element = document.getElementById(id);
+    if (!element) return;
+    element.scrollIntoView({ behavior: "smooth", block: "start" });
+    window.history.replaceState(null, "", `#${id}`);
+    setActiveId(id);
+  };
+
+  return (
+    <nav className="space-y-1 text-sm">
+      {headings.map((heading) => {
+        const active = activeId === heading.id;
+        return (
+          <button
+            key={heading.id}
+            type="button"
+            onClick={() => scrollToHeading(heading.id)}
+            className={cn(
+              "block w-full rounded-2xl px-3 py-2 text-right leading-6 transition",
+              active
+                ? "bg-primary text-primary-foreground shadow-sm"
+                : "text-muted-foreground hover:bg-primary/10 hover:text-primary",
+            )}
+            style={{ paddingRight: `${(heading.level - 1) * 0.85 + 0.75}rem` }}
+          >
+            {heading.text}
+          </button>
+        );
+      })}
+    </nav>
+  );
+}