fix(profile): improve styling of profile page

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

@@ -1,5 +1,5 @@
-import { DetailPageLoading } from "@/components/page-loading";
+import { BlogDetailPageLoading } from "@/components/page-loading";
 
 export default function Loading() {
-  return <DetailPageLoading />;
+  return <BlogDetailPageLoading />;
 }

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>
-      ))}
-    </div>
+    <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">
-              <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>
+          <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 flex items-center justify-start gap-2 text-right font-bold">
+                <ListTree className="h-4 w-4 text-primary" />
+                فهرست محتوا
+              </h2>
+              <BlogTableOfContents headings={headings} />
+            </section>
           </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-[1.35] tracking-tight md:text-5xl md:leading-[1.45]">
                     {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/app/blog/loading.tsx

@@ -1,5 +1,5 @@
-import { ListingPageLoading } from "@/components/page-loading";
+import { BlogListingPageLoading } from "@/components/page-loading";
 
 export default function Loading() {
-  return <ListingPageLoading />;
+  return <BlogListingPageLoading />;
 }

src/app/blog/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import Blog from "@/views/Blog";
-import { getPublicPosts } from "@/lib/public-api";
+import { getBlogBanners, getBlogFilters, getPublicPosts } from "@/lib/public-api";
 import { siteUrl } from "@/lib/site";
 
 type SearchParams = Promise<Record<string, string | string[] | undefined>>;
@@ -9,6 +9,11 @@ function firstString(value?: string | string[]) {
   return Array.isArray(value) ? (value[0] ?? "") : (value ?? "");
 }
 
+function stringList(value?: string | string[]) {
+  const values = Array.isArray(value) ? value : value ? [value] : [];
+  return values.flatMap((item) => item.split(",")).map((item) => item.trim()).filter(Boolean);
+}
+
 export async function generateMetadata({
   searchParams,
 }: {
@@ -45,7 +50,24 @@ export default async function BlogPage({
 }) {
   const resolved = await searchParams;
   const search = firstString(resolved.search).trim();
-  const posts = await getPublicPosts({ search: search || undefined });
+  const category = firstString(resolved.category).trim();
+  const tags = stringList(resolved.tag);
+  const authors = stringList(resolved.author);
+  const [posts, banners, filters] = await Promise.all([
+    getPublicPosts({ search: search || undefined, category: category || undefined, tag: tags, author: authors }),
+    getBlogBanners().catch(() => []),
+    getBlogFilters().catch(() => ({ categories: [], tags: [], authors: [] })),
+  ]);
 
-  return <Blog initialPosts={posts} initialSearch={search} />;
+  return (
+    <Blog
+      initialPosts={posts}
+      initialSearch={search}
+      initialCategory={category}
+      initialTags={tags}
+      initialAuthors={authors}
+      banners={banners}
+      filters={filters}
+    />
+  );
 }

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/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/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>
+  );
+}

src/components/Markdown.tsx

@@ -127,10 +127,10 @@ export default function Markdown({
         remarkPlugins={[remarkGfm]}
         rehypePlugins={rehypePlugins}
         components={{
-          h1: (p) => <h1 id={nextHeadingId(1)} className={cn("scroll-mt-28 pt-2 font-bold", hScale.h1)} {...p} />,
-          h2: (p) => <h2 id={nextHeadingId(2)} className={cn("scroll-mt-28 pt-2 font-bold", hScale.h2)} {...p} />,
-          h3: (p) => <h3 id={nextHeadingId(3)} className={cn("scroll-mt-28 pt-2 font-semibold", hScale.h3)} {...p} />,
-          h4: (p) => <h4 className={cn("mt-4 font-semibold", hScale.h4)} {...p} />,
+          h1: (p) => <h1 {...p} id={nextHeadingId(1)} className={cn("scroll-mt-28 pt-2 text-right font-bold", hScale.h1)} style={{ ...p.style, textAlign: "right" }} />,
+          h2: (p) => <h2 {...p} id={nextHeadingId(2)} className={cn("scroll-mt-28 pt-2 text-right font-bold", hScale.h2)} style={{ ...p.style, textAlign: "right" }} />,
+          h3: (p) => <h3 {...p} id={nextHeadingId(3)} className={cn("scroll-mt-28 pt-2 text-right font-semibold", hScale.h3)} style={{ ...p.style, textAlign: "right" }} />,
+          h4: (p) => <h4 {...p} className={cn("mt-4 text-right font-semibold", hScale.h4)} style={{ ...p.style, textAlign: "right" }} />,
           p: (p) => <p className="my-4" {...p} />,
           a: (p) => <a className="break-all underline decoration-primary hover:opacity-90" target="_blank" rel="noopener noreferrer" {...p} />,
           ul: (p) => <ul className="my-4 list-disc space-y-1.5 pe-0 ps-6" {...p} />,

src/components/ModeToggle.tsx

@@ -29,7 +29,7 @@ export default function ModeToggle({ className }: { className?: string }) {
       variant="ghost"
       size="icon"
       className={cn(
-        "rounded-full border-0 bg-transparent shadow-none backdrop-blur transition hover:bg-background/45 hover:shadow-sm",
+        "rounded-full border-0 bg-transparent shadow-none transition hover:bg-background/45 hover:shadow-sm",
         className,
       )}
       aria-label={`تغییر تم به حالت ${nextThemeLabel}`}

src/components/Navbar.tsx

@@ -83,37 +83,37 @@ function ProfileAvatarMenu() {
           {[user?.first_name, user?.last_name].filter(Boolean).join(" ") || user?.username || "حساب کاربری"}
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
-        <DropdownMenuItem asChild className="flex-row-reverse justify-start gap-2 rounded-xl">
+        <DropdownMenuItem asChild className="flex-row-reverse justify-end gap-2 rounded-xl">
           <Link to="/profile">
-            <UserRound className="h-4 w-4" />
             مشاهده پروفایل
+            <UserRound className="h-4 w-4" />
           </Link>
         </DropdownMenuItem>
-        <DropdownMenuItem asChild className="flex-row-reverse justify-start gap-2 rounded-xl">
+        <DropdownMenuItem asChild className="flex-row-reverse justify-end gap-2 rounded-xl">
           <Link to="/profile?edit=1">
-            <PencilLine className="h-4 w-4" />
             ویرایش پروفایل
+            <PencilLine className="h-4 w-4" />
           </Link>
         </DropdownMenuItem>
-        <DropdownMenuItem asChild className="flex-row-reverse justify-start gap-2 rounded-xl">
+        <DropdownMenuItem asChild className="flex-row-reverse justify-end gap-2 rounded-xl">
           <Link to="/reset-password">
-            <RotateCcw className="h-4 w-4" />
             تغییر یا بازیابی رمز
+            <RotateCcw className="h-4 w-4" />
           </Link>
         </DropdownMenuItem>
         {isAdminUser ? (
-          <DropdownMenuItem asChild className="flex-row-reverse justify-start gap-2 rounded-xl">
+          <DropdownMenuItem asChild className="flex-row-reverse justify-end gap-2 rounded-xl">
             <Link to="/admin">
-              <LayoutDashboard className="h-4 w-4" />
               داشبورد مدیریت
+              <LayoutDashboard className="h-4 w-4" />
             </Link>
           </DropdownMenuItem>
         ) : null}
         <DropdownMenuSeparator />
-        <DropdownMenuItem asChild className="flex-row-reverse justify-start gap-2 rounded-xl text-destructive focus:text-destructive">
+        <DropdownMenuItem asChild className="flex-row-reverse justify-end gap-2 rounded-xl text-destructive focus:text-destructive">
           <Link to="/logout">
-            <LogOut className="h-4 w-4" />
             خروج از حساب
+            <LogOut className="h-4 w-4" />
           </Link>
         </DropdownMenuItem>
       </DropdownMenuContent>
@@ -132,8 +132,8 @@ export default function Navbar() {
       <div className="container mx-auto px-4 py-3">
         <div className="flex items-center justify-between gap-4">
           <Link to="/" className="flex min-w-0 items-center gap-3">
-            <div className="hidden h-10 w-10 items-center justify-center rounded-2xl border border-border/70 bg-background/90 shadow-sm sm:flex">
-              <span className="text-lg font-bold text-primary">گ</span>
+            <div className="hidden rounded-2xl sm:flex">
+              <img src="/favicon.ico" alt="لوگوی انجمن" className="h-10 w-10 object-contain" />
             </div>
             <div className="min-w-0 text-right">
               <p className="truncate text-sm font-semibold text-foreground sm:text-base">

src/components/NotificationsBell.tsx

@@ -87,7 +87,7 @@ export default function NotificationsBell() {
           type="button"
           variant="ghost"
           size="icon"
-          className="relative h-10 w-10 rounded-full border-0 bg-transparent shadow-none backdrop-blur transition hover:bg-background/45 hover:shadow-sm"
+          className="relative h-10 w-10 rounded-full border-0 bg-transparent shadow-none transition hover:bg-background/45 hover:shadow-sm"
           aria-label="اعلان‌ها"
         >
           <Bell className="h-4 w-4" />

src/components/page-loading.tsx

@@ -1,5 +1,136 @@
 import { Skeleton } from "@/components/ui/skeleton";
 
+export function BlogCardsSkeleton({ count = 6 }: { count?: number }) {
+  return (
+    <div className="grid gap-6 md:grid-cols-2 2xl:grid-cols-3" aria-hidden="true">
+      {Array.from({ length: count }).map((_, index) => (
+        <div
+          key={index}
+          className="overflow-hidden rounded-[2rem] border border-border/70 bg-card/85 shadow-sm"
+        >
+          <Skeleton className="aspect-[16/10] w-full rounded-t-[2rem] rounded-b-none" />
+          <div className="space-y-4 p-5">
+            <Skeleton className="h-7 w-11/12" />
+            <Skeleton className="h-7 w-3/4" />
+            <div className="space-y-2 pt-1">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-10/12" />
+              <Skeleton className="h-4 w-8/12" />
+            </div>
+            <Skeleton className="h-4 w-28" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function BlogListingPageLoading() {
+  return (
+    <div className="min-h-screen bg-[linear-gradient(180deg,hsl(var(--background)),hsl(var(--muted)/0.32))]" dir="rtl">
+      <div className="container mx-auto px-4 py-10">
+        <Skeleton className="mb-8 aspect-[5/1.25] w-full rounded-[2rem] md:aspect-[6/1.25]" />
+
+        <div className="mb-8 flex flex-col gap-5 md:flex-row md:items-end md:justify-between">
+          <div className="space-y-3 text-right">
+            <Skeleton className="h-5 w-36" />
+            <Skeleton className="h-11 w-28" />
+            <Skeleton className="h-5 w-full max-w-xl" />
+            <Skeleton className="h-5 w-10/12 max-w-lg" />
+          </div>
+          <div className="flex w-full max-w-md items-center gap-2">
+            <Skeleton className="h-12 flex-1 rounded-2xl" />
+            <Skeleton className="h-12 w-12 rounded-2xl xl:hidden" />
+          </div>
+        </div>
+
+        <div className="grid gap-8 xl:grid-cols-[18rem_minmax(0,1fr)] xl:items-start">
+          <aside className="hidden xl:block">
+            <div className="sticky top-24 space-y-4 rounded-[2rem] border border-border/70 bg-card/80 p-4 shadow-sm">
+              <Skeleton className="h-7 w-32" />
+              <Skeleton className="h-32 w-full rounded-3xl" />
+              <Skeleton className="h-28 w-full rounded-3xl" />
+              <Skeleton className="h-40 w-full rounded-3xl" />
+            </div>
+          </aside>
+          <BlogCardsSkeleton />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function BlogDetailPageLoading() {
+  return (
+    <div className="min-h-screen bg-[linear-gradient(180deg,hsl(var(--background)),hsl(var(--muted)/0.28))]" dir="rtl">
+      <div className="container mx-auto px-4 py-8">
+        <div className="gap-8 xl:flex xl:items-start">
+          <aside className="sticky top-24 hidden w-72 shrink-0 xl:block">
+            <div className="rounded-[1.75rem] border border-border/70 bg-card/90 p-4 shadow-sm">
+              <Skeleton className="mb-4 h-6 w-36" />
+              <div className="space-y-3">
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-10/12" />
+                <Skeleton className="h-4 w-8/12" />
+                <Skeleton className="h-4 w-9/12" />
+              </div>
+            </div>
+          </aside>
+
+          <main className="min-w-0 flex-1">
+            <article className="overflow-hidden rounded-[2.5rem] border border-border/70 bg-card/95">
+              <header className="space-y-6 p-5 md:p-8">
+                <Skeleton className="h-5 w-64" />
+                <div className="space-y-4">
+                  <Skeleton className="h-12 w-11/12" />
+                  <Skeleton className="h-12 w-8/12" />
+                  <Skeleton className="h-5 w-full max-w-3xl" />
+                  <Skeleton className="h-5 w-10/12 max-w-2xl" />
+                </div>
+                <div className="flex flex-wrap gap-3">
+                  <Skeleton className="h-8 w-28 rounded-full" />
+                  <Skeleton className="h-8 w-36 rounded-full" />
+                </div>
+              </header>
+
+              <div className="px-5 md:px-8">
+                <Skeleton className="aspect-[16/9] w-full rounded-[2rem]" />
+              </div>
+
+              <div className="space-y-5 p-5 md:p-8 xl:hidden">
+                <Skeleton className="h-32 w-full rounded-[1.5rem]" />
+              </div>
+
+              <div className="space-y-8 px-5 pb-8 pt-6 md:px-8 md:pb-10">
+                <div className="mx-auto max-w-4xl space-y-4">
+                  <Skeleton className="h-8 w-7/12" />
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-11/12" />
+                  <Skeleton className="h-4 w-9/12" />
+                  <Skeleton className="mt-8 h-8 w-6/12" />
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-10/12" />
+                </div>
+                <div className="mx-auto flex max-w-4xl flex-wrap gap-2">
+                  <Skeleton className="h-8 w-20 rounded-full" />
+                  <Skeleton className="h-8 w-24 rounded-full" />
+                  <Skeleton className="h-8 w-16 rounded-full" />
+                </div>
+                <Skeleton className="mx-auto h-12 w-full max-w-4xl rounded-2xl" />
+              </div>
+            </article>
+
+            <Skeleton className="mt-8 h-48 w-full rounded-[2rem]" />
+            <Skeleton className="mt-10 h-56 w-full rounded-[2rem]" />
+            <Skeleton className="mt-10 h-72 w-full rounded-[2rem]" />
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function ListingPageLoading() {
   return (
     <div className="min-h-screen bg-background" dir="rtl">

src/index.css

@@ -97,6 +97,10 @@ All colors MUST be HSL.
 }
 
 @layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
   * {
     @apply border-border;
   }

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/lib/public-api.ts

@@ -71,15 +71,39 @@ async function requestJson<T>(
   return (await response.json()) as T;
 }
 
-export async function getPublicPosts(options?: { search?: string; limit?: number }) {
+export async function getPublicPosts(options?: {
+  search?: string;
+  category?: string;
+  tag?: string[];
+  author?: string[];
+  limit?: number;
+}) {
   const search = options?.search?.trim();
+  const category = options?.category?.trim();
+  const tag = options?.tag?.filter(Boolean) ?? [];
+  const author = options?.author?.filter(Boolean) ?? [];
 
   return requestJson<Types.PostListSchema[]>("/api/blog/posts", {
     params: {
       limit: options?.limit ?? 50,
       ...(search ? { search } : {}),
+      ...(category ? { category } : {}),
+      ...(tag.length ? { tag } : {}),
+      ...(author.length ? { author } : {}),
     },
-    revalidate: search ? 60 : DEFAULT_REVALIDATE_SECONDS,
+    revalidate: search || category || tag.length || author.length ? 60 : DEFAULT_REVALIDATE_SECONDS,
+  });
+}
+
+export async function getBlogFilters() {
+  return requestJson<Types.BlogFiltersSchema>("/api/blog/filters", {
+    revalidate: DEFAULT_REVALIDATE_SECONDS,
+  });
+}
+
+export async function getBlogBanners() {
+  return requestJson<Types.BlogBannerSchema[]>("/api/blog/banners", {
+    revalidate: DEFAULT_REVALIDATE_SECONDS,
   });
 }
 

src/lib/types.ts

@@ -229,6 +229,7 @@ export interface PostListSchema {
     username: string;
     first_name: string;
     last_name: string;
+    bio?: string | null;
     profile_picture?: string;
     profile_picture_thumbnail_url?: string | null;
     profile_picture_preview_url?: string | null;
@@ -238,7 +239,23 @@ export interface PostListSchema {
     name: string;
     slug: string;
     description?: string;
+    parent_id?: number | null;
   };
+  category_path?: Array<{
+    id: number;
+    name: string;
+    slug: string;
+  }>;
+  writers?: Array<{
+    id: number;
+    username: string;
+    first_name: string;
+    last_name: string;
+    bio?: string | null;
+    profile_picture?: string;
+    profile_picture_thumbnail_url?: string | null;
+    profile_picture_preview_url?: string | null;
+  }>;
   tags: Array<{
     id: number;
     name: string;
@@ -276,6 +293,7 @@ export interface PostCreateSchema {
   excerpt?: string;
   category_id?: number | null;
   tag_ids?: number[];
+  writer_ids?: number[];
   is_featured?: boolean;
   status?: 'draft' | 'submitted' | 'changes_requested' | 'published' | 'archived';
   seo_title?: string;
@@ -323,14 +341,23 @@ export interface CommentSchema {
     username: string;
     first_name: string;
     last_name: string;
+    bio?: string | null;
+    profile_picture?: string | null;
+    profile_picture_thumbnail_url?: string | null;
+    profile_picture_preview_url?: string | null;
   };
   post_id: number;
   post_title: string;
   post_slug: string;
   parent_id?: number;
   created_at: string;
+  updated_at?: string;
   is_approved: boolean;
+  is_hidden?: boolean;
+  is_deleted?: boolean;
   hidden_at?: string | null;
+  deleted_at?: string | null;
+  hidden_replies_count?: number;
   replies?: CommentSchema[];
 }
 
@@ -339,6 +366,19 @@ export interface CommentCreateSchema {
   parent_id?: number;
 }
 
+export interface CommentUpdateSchema {
+  content: string;
+}
+
+export interface BlogBannerSchema {
+  id: number;
+  title?: string;
+  alt_text?: string;
+  image_url: string;
+  url: string;
+  sort_order: number;
+}
+
 export interface BlogInteractionSchema {
   liked: boolean;
   saved: boolean;
@@ -359,6 +399,7 @@ export interface CategorySchema {
   name: string;
   slug: string;
   description?: string;
+  parent_id?: number | null;
   created_at: string;
 }
 
@@ -369,6 +410,36 @@ export interface TagSchema {
   created_at: string;
 }
 
+export interface BlogFilterCategory {
+  id: number;
+  name: string;
+  slug: string;
+  parent_id?: number | null;
+  post_count: number;
+  children: BlogFilterCategory[];
+}
+
+export interface BlogFilterTag {
+  id: number;
+  name: string;
+  slug: string;
+  post_count: number;
+}
+
+export interface BlogFilterAuthor {
+  id: number;
+  username: string;
+  first_name: string;
+  last_name: string;
+  post_count: number;
+}
+
+export interface BlogFiltersSchema {
+  categories: BlogFilterCategory[];
+  tags: BlogFilterTag[];
+  authors: BlogFilterAuthor[];
+}
+
 // Events Types
 export interface EventListItemSchema {
   id: number;

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>
 

src/views/Blog.tsx

@@ -1,69 +1,350 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+import { ChevronDown, ChevronLeft, ChevronRight, Filter, UserRound, X } from "lucide-react";
 import BlogThumbnail from "@/components/BlogThumbnail";
+import { BlogCardsSkeleton } from "@/components/page-loading";
+import { Button } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
 import { Input } from "@/components/ui/input";
 import { Link, useLocation, useNavigate } from "@/lib/router";
-import { api } from "@/lib/api";
 import { blogPostPath } from "@/lib/blog-routes";
 import { apiBaseUrl, toAbsoluteUrl } from "@/lib/site";
 import type * as Types from "@/lib/types";
-import { formatJalaliDate, getBlogCardImageUrl } from "@/lib/utils";
+import { cn, formatJalaliDate, getBlogCardImageUrl } from "@/lib/utils";
 
 type BlogProps = {
   initialPosts?: Types.PostListSchema[];
   initialSearch?: string;
+  initialCategory?: string;
+  initialTags?: string[];
+  initialAuthors?: string[];
+  banners?: Types.BlogBannerSchema[];
+  filters?: Types.BlogFiltersSchema;
 };
 
+function buildBlogPath(
+  pathname: string,
+  search: string,
+  category: string,
+  tags: string[],
+  authors: string[],
+) {
+  const params = new URLSearchParams();
+  if (category.trim()) params.set("category", category.trim());
+  tags.forEach((tag) => params.append("tag", tag));
+  authors.forEach((author) => params.append("author", author));
+  if (search.trim()) params.set("search", search.trim());
+  return params.size ? `${pathname}?${params.toString()}` : pathname;
+}
+
+function BlogBannerSlider({ banners }: { banners: Types.BlogBannerSchema[] }) {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  useEffect(() => {
+    if (banners.length <= 1) return;
+    const timer = window.setInterval(() => {
+      setActiveIndex((index) => (index + 1) % banners.length);
+    }, 6000);
+    return () => window.clearInterval(timer);
+  }, [banners.length]);
+
+  if (!banners.length) return null;
+
+  const activeBanner = banners[activeIndex] ?? banners[0];
+  const goToPrevious = () => setActiveIndex((index) => (index - 1 + banners.length) % banners.length);
+  const goToNext = () => setActiveIndex((index) => (index + 1) % banners.length);
+
+  return (
+    <section className="mb-8 overflow-hidden rounded-[2rem] border border-border/70 bg-card">
+      <a href={activeBanner.url} target="_blank" rel="noopener noreferrer" className="block">
+        <img
+          src={activeBanner.image_url}
+          alt={activeBanner.alt_text || activeBanner.title || "بنر بلاگ"}
+          className="aspect-[5/1.25] w-full object-cover md:aspect-[6/1.25]"
+        />
+      </a>
+      {banners.length > 1 ? (
+        <div className="flex items-center justify-between gap-3 bg-background/80 px-4 py-3 backdrop-blur">
+          <div className="flex gap-1.5">
+            {banners.map((banner, index) => (
+              <button
+                key={banner.id}
+                type="button"
+                onClick={() => setActiveIndex(index)}
+                className={cn(
+                  "h-2.5 rounded-full transition-all",
+                  index === activeIndex ? "w-8 bg-primary" : "w-2.5 bg-muted-foreground/30",
+                )}
+                aria-label={`نمایش بنر ${index + 1}`}
+              />
+            ))}
+          </div>
+          <div className="flex gap-2">
+            <Button type="button" size="icon" variant="ghost" className="rounded-full" onClick={goToNext}>
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+            <Button type="button" size="icon" variant="ghost" className="rounded-full" onClick={goToPrevious}>
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
 export default function Blog({
   initialPosts = [],
   initialSearch = "",
+  initialCategory = "",
+  initialTags = [],
+  initialAuthors = [],
+  banners = [],
+  filters = { categories: [], tags: [], authors: [] },
 }: BlogProps) {
   const navigate = useNavigate();
   const location = useLocation();
-  const [posts, setPosts] = useState<Types.PostListSchema[]>(initialPosts);
-  const [search, setSearch] = useState(initialSearch);
-  const [loading, setLoading] = useState(!initialPosts.length && !initialSearch);
+  const pathname = location.pathname || "/blog";
+  const posts = initialPosts;
+  const [searchDraft, setSearchDraft] = useState(initialSearch);
+  const [selectedCategory, setSelectedCategory] = useState(initialCategory);
+  const [selectedTags, setSelectedTags] = useState<string[]>(initialTags);
+  const [selectedAuthors, setSelectedAuthors] = useState<string[]>(initialAuthors);
+  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(
+    () => new Set(initialCategory ? [initialCategory] : []),
+  );
+  const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
+  const [listPending, setListPending] = useState(false);
 
   useEffect(() => {
-    setPosts(initialPosts);
-  }, [initialPosts]);
-
-  useEffect(() => {
-    setSearch(initialSearch);
+    setSearchDraft(initialSearch);
+    setListPending(false);
   }, [initialSearch]);
 
-  const loadPosts = useCallback(async () => {
-    try {
-      setLoading(true);
-      const data = await api.getPosts({ search: search || undefined });
-      setPosts(data);
-    } catch (error) {
-      console.error("Error loading posts:", error);
-    } finally {
-      setLoading(false);
+  useEffect(() => {
+    setSelectedCategory(initialCategory);
+    if (initialCategory) {
+      setExpandedCategories((current) => new Set([...current, initialCategory]));
     }
-  }, [search]);
+    setListPending(false);
+  }, [initialCategory]);
 
   useEffect(() => {
-    loadPosts();
-  }, [loadPosts]);
+    setSelectedTags(initialTags);
+    setListPending(false);
+  }, [initialTags]);
 
   useEffect(() => {
-    const params = new URLSearchParams();
-    if (search.trim()) {
-      params.set("search", search.trim());
-    }
-    const basePath = location.pathname || "/blog";
-    const nextPath = params.size
-      ? `${basePath}?${params.toString()}`
-      : basePath;
-    navigate(nextPath, { replace: true });
-  }, [location.pathname, navigate, search]);
+    setSelectedAuthors(initialAuthors);
+    setListPending(false);
+  }, [initialAuthors]);
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      if (searchDraft.trim() !== initialSearch.trim()) {
+        setListPending(true);
+        navigate(
+          buildBlogPath(pathname, searchDraft, selectedCategory, selectedTags, selectedAuthors),
+          { replace: true },
+        );
+      }
+    }, 400);
+
+    return () => window.clearTimeout(timer);
+  }, [initialSearch, navigate, pathname, searchDraft, selectedAuthors, selectedCategory, selectedTags]);
+
+  const navigateFilters = (next: {
+    search?: string;
+    category?: string;
+    tags?: string[];
+    authors?: string[];
+  }) => {
+    setListPending(true);
+    navigate(
+      buildBlogPath(
+        pathname,
+        next.search ?? searchDraft,
+        next.category ?? selectedCategory,
+        next.tags ?? selectedTags,
+        next.authors ?? selectedAuthors,
+      ),
+      { replace: true },
+    );
+  };
+
+  const selectCategory = (slug: string) => {
+    const nextCategory = selectedCategory === slug ? "" : slug;
+    setSelectedCategory(nextCategory);
+    navigateFilters({ category: nextCategory });
+  };
+
+  const toggleCategoryExpanded = (slug: string) => {
+    setExpandedCategories((current) => {
+      const next = new Set(current);
+      if (next.has(slug)) {
+        next.delete(slug);
+      } else {
+        next.add(slug);
+      }
+      return next;
+    });
+  };
+
+  const toggleTag = (slug: string) => {
+    const nextTags = selectedTags.includes(slug)
+      ? selectedTags.filter((item) => item !== slug)
+      : [...selectedTags, slug];
+    setSelectedTags(nextTags);
+    navigateFilters({ tags: nextTags });
+  };
+
+  const toggleAuthor = (username: string) => {
+    const nextAuthors = selectedAuthors.includes(username)
+      ? selectedAuthors.filter((item) => item !== username)
+      : [...selectedAuthors, username];
+    setSelectedAuthors(nextAuthors);
+    navigateFilters({ authors: nextAuthors });
+  };
+
+  const clearFilters = () => {
+    setSearchDraft("");
+    setSelectedCategory("");
+    setSelectedTags([]);
+    setSelectedAuthors([]);
+    setListPending(true);
+    navigate(pathname, { replace: true });
+  };
+
+  const renderCategoryTree = (categories: Types.BlogFilterCategory[], level = 0) => (
+    <div className={level === 0 ? "space-y-2" : "mt-2 space-y-2"}>
+      {categories.map((category) => {
+        const active = selectedCategory === category.slug;
+        const hasChildren = Boolean(category.children?.length);
+        const expanded = expandedCategories.has(category.slug);
+        return (
+          <div key={category.id} style={{ paddingRight: `${level * 0.75}rem` }}>
+            <div
+              className={cn(
+                "flex w-full items-center gap-1 rounded-2xl text-sm transition",
+                active ? "bg-primary text-primary-foreground shadow-sm" : "bg-background/70 text-muted-foreground hover:bg-primary/10 hover:text-primary",
+              )}
+            >
+              {hasChildren ? (
+                <button
+                  type="button"
+                  onClick={() => toggleCategoryExpanded(category.slug)}
+                  className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition hover:bg-current/10"
+                  aria-label={expanded ? "بستن زیر دسته‌ها" : "نمایش زیر دسته‌ها"}
+                >
+                  <ChevronDown className={cn("h-4 w-4 transition", expanded && "rotate-180")} />
+                </button>
+              ) : (
+                <span className="h-8 w-8 shrink-0" />
+              )}
+              <button
+                type="button"
+                onClick={() => selectCategory(category.slug)}
+                className="min-w-0 flex-1 px-2 py-2 text-right"
+              >
+                <span className="line-clamp-1">{category.name}</span>
+              </button>
+            </div>
+            {hasChildren && expanded ? renderCategoryTree(category.children, level + 1) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  const hasActiveFilters = Boolean(searchDraft || selectedCategory || selectedTags.length || selectedAuthors.length);
+
+  const filtersPanel = (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3 text-right">
+        <div className="flex items-center justify-start gap-2">
+          <Filter className="h-5 w-5 text-primary" />
+          <div>
+            <h2 className="font-bold">فیلترهای بلاگ</h2>
+          </div>
+        </div>
+        {hasActiveFilters ? (
+          <Button type="button" variant="ghost" size="sm" className="gap-2 rounded-full" onClick={clearFilters}>
+            <X className="h-4 w-4" />
+            پاک کردن
+          </Button>
+        ) : null}
+      </div>
+      <div className="space-y-4">
+        <div className="rounded-3xl border border-border/60 bg-muted/20 p-3">
+          <h3 className="mb-3 text-right text-sm font-semibold">دسته‌بندی‌ها</h3>
+          {filters.categories.length ? renderCategoryTree(filters.categories) : (
+            <p className="text-right text-xs text-muted-foreground">دسته‌ای برای فیلتر وجود ندارد.</p>
+          )}
+        </div>
+        <div className="rounded-3xl border border-border/60 bg-muted/20 p-3">
+          <h3 className="mb-3 text-right text-sm font-semibold">موضوعات</h3>
+          <div className="flex flex-wrap gap-2">
+            {filters.tags.map((tag) => {
+              const active = selectedTags.includes(tag.slug);
+              return (
+                <button
+                  key={tag.id}
+                  type="button"
+                  onClick={() => toggleTag(tag.slug)}
+                  className={cn(
+                    "rounded-full px-3 py-1.5 text-xs transition",
+                    active ? "bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-primary/10 hover:text-primary",
+                  )}
+                >
+                  {tag.name}
+                </button>
+              );
+            })}
+            {!filters.tags.length ? <p className="text-xs text-muted-foreground">موضوعی برای فیلتر وجود ندارد.</p> : null}
+          </div>
+        </div>
+        <div className="rounded-3xl border border-border/60 bg-muted/20 p-3">
+          <h3 className="mb-3 text-right text-sm font-semibold">نویسندگان</h3>
+          <div className="space-y-2">
+            {filters.authors.map((author) => {
+              const active = selectedAuthors.includes(author.username);
+              const name = [author.first_name, author.last_name].filter(Boolean).join(" ") || author.username;
+              return (
+                <button
+                  key={author.id}
+                  type="button"
+                  onClick={() => toggleAuthor(author.username)}
+                  className={cn(
+                    "flex w-full items-center justify-start gap-2 rounded-2xl px-3 py-2 text-right text-sm transition",
+                    active ? "bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-primary/10 hover:text-primary",
+                  )}
+                >
+                  <UserRound className="h-4 w-4" />
+                  <span className="min-w-0 flex-1 truncate">{name}</span>
+                  <span className="rounded-full bg-current/10 px-2 py-0.5 text-xs">{author.post_count}</span>
+                </button>
+              );
+            })}
+            {!filters.authors.length ? <p className="text-right text-xs text-muted-foreground">نویسنده‌ای برای فیلتر وجود ندارد.</p> : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 
   return (
     <div className="min-h-screen bg-[linear-gradient(180deg,hsl(var(--background)),hsl(var(--muted)/0.32))]" dir="rtl">
       <div className="container mx-auto px-4 py-10">
+        <BlogBannerSlider banners={banners} />
+
         <div className="mb-8 flex flex-col gap-5 md:flex-row md:items-end md:justify-between">
           <div className="text-right">
             <p className="mb-2 text-sm font-medium text-primary">خواندنی‌های انجمن</p>
@@ -72,49 +353,101 @@ export default function Blog({
               نوشته‌های آموزشی، تجربه‌های دانشجویی و یادداشت‌های تخصصی اعضای انجمن علمی.
             </p>
           </div>
+          <div className="flex w-full max-w-md items-center gap-2">
           <Input
             type="text"
             placeholder="جستجو در نوشته‌ها..."
-            value={search}
-            onChange={(event) => setSearch(event.target.value)}
-            className="max-w-md rounded-full bg-background/80 text-right shadow-sm backdrop-blur"
+            value={searchDraft}
+            onChange={(event) => setSearchDraft(event.target.value)}
+            className="h-12 flex-1 rounded-2xl bg-background/80 text-right shadow-sm backdrop-blur"
           />
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            aria-label="باز کردن فیلترهای بلاگ"
+            onClick={() => setMobileFiltersOpen(true)}
+            className="h-12 w-12 shrink-0 rounded-2xl border-border/70 bg-card/80 shadow-sm backdrop-blur xl:hidden"
+          >
+            <Filter className="h-5 w-5 text-primary" />
+          </Button>
+          </div>
         </div>
 
-        {loading ? (
-          <p className="text-center text-muted-foreground">در حال بارگذاری...</p>
-        ) : posts.length === 0 ? (
-          <p className="rounded-3xl border border-dashed bg-background/70 p-10 text-center text-muted-foreground">
-            نوشته‌ای پیدا نشد.
-          </p>
-        ) : (
-          <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
-            {posts.map((post) => (
-              <Link
-                key={post.id}
-                to={blogPostPath(post.slug)}
-                className="group overflow-hidden rounded-[2rem] border border-border/70 bg-card/85 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-primary/10"
+        <div className="xl:hidden">
+          <Drawer open={mobileFiltersOpen} onOpenChange={setMobileFiltersOpen}>
+            <DrawerTrigger asChild>
+              <Button
+                type="button"
+                variant="outline"
+                className="hidden h-12 w-full justify-between rounded-[1.5rem] border-border/70 bg-card/80 px-4 shadow-sm backdrop-blur"
               >
-                <BlogThumbnail
-                  post={post}
-                  imageUrl={toAbsoluteUrl(getBlogCardImageUrl(post), apiBaseUrl)}
-                  className="aspect-[16/10] rounded-t-[2rem]"
-                />
-                <article className="space-y-4 p-5 text-right">
-                  <h2 className="line-clamp-2 text-xl font-bold leading-9 transition group-hover:text-primary">
-                    {post.title}
-                  </h2>
-                  <p className="line-clamp-3 min-h-[5.25rem] text-sm leading-7 text-muted-foreground">
-                    {post.excerpt || post.seo_description || "خلاصه‌ای برای این نوشته ثبت نشده است."}
-                  </p>
-                  <time className="block text-xs font-medium text-primary/80" dateTime={post.published_at || post.created_at}>
-                    {formatJalaliDate(post.published_at || post.created_at)}
-                  </time>
-                </article>
-              </Link>
-            ))}
-          </div>
-        )}
+                <span className="flex items-center justify-start gap-2 font-bold">
+                  <Filter className="h-5 w-5 text-primary" />
+                  فیلترهای بلاگ
+                </span>
+                <ChevronDown className={cn("h-4 w-4 transition", mobileFiltersOpen && "rotate-180")} />
+              </Button>
+            </DrawerTrigger>
+            <DrawerContent className="max-h-[85vh] rounded-t-[2rem]" dir="rtl">
+              <DrawerTitle className="sr-only">فیلترهای بلاگ</DrawerTitle>
+              <DrawerDescription className="sr-only">
+                انتخاب دسته‌بندی، موضوع و نویسنده برای فیلتر کردن نوشته‌های بلاگ
+              </DrawerDescription>
+              <div className="overflow-y-auto px-4 pb-4 pt-2">
+                {filtersPanel}
+                <DrawerClose asChild>
+                  <Button type="button" variant="outline" className="mt-4 w-full rounded-full">
+                    بستن
+                  </Button>
+                </DrawerClose>
+              </div>
+            </DrawerContent>
+          </Drawer>
+        </div>
+
+        <div className="grid gap-8 xl:grid-cols-[18rem_minmax(0,1fr)] xl:items-start">
+          <aside className="hidden xl:block">
+            <div className="sticky top-24 max-h-[calc(100vh-7rem)] overflow-y-auto rounded-[2rem] border border-border/70 bg-card/80 p-4 shadow-sm backdrop-blur">
+              {filtersPanel}
+            </div>
+          </aside>
+
+          {listPending ? (
+            <BlogCardsSkeleton />
+          ) : posts.length === 0 ? (
+            <p className="rounded-3xl border border-dashed bg-background/70 p-10 text-center text-muted-foreground">
+              نوشته‌ای پیدا نشد.
+            </p>
+          ) : (
+            <div className="grid gap-6 md:grid-cols-2 2xl:grid-cols-3">
+              {posts.map((post) => (
+                <Link
+                  key={post.id}
+                  to={blogPostPath(post.slug)}
+                  className="group overflow-hidden rounded-[2rem] border border-border/70 bg-card/85 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-primary/10"
+                >
+                  <BlogThumbnail
+                    post={post}
+                    imageUrl={toAbsoluteUrl(getBlogCardImageUrl(post), apiBaseUrl)}
+                    className="aspect-[16/10] rounded-t-[2rem]"
+                  />
+                  <article className="space-y-4 p-5 text-right">
+                    <h2 className="line-clamp-2 text-xl font-bold leading-9 transition group-hover:text-primary">
+                      {post.title}
+                    </h2>
+                    <p className="line-clamp-3 min-h-[5.25rem] text-sm leading-7 text-muted-foreground">
+                      {post.excerpt || post.seo_description || "خلاصه‌ای برای این نوشته ثبت نشده است."}
+                    </p>
+                    <time className="block text-xs font-medium text-primary/80" dateTime={post.published_at || post.created_at}>
+                      {formatJalaliDate(post.published_at || post.created_at)}
+                    </time>
+                  </article>
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );

src/views/Profile.tsx

@@ -63,11 +63,11 @@ function SectionTitle({
 }) {
   return (
     <div className="text-right">
-      <div className="flex items-center justify-end gap-2">
-        <CardTitle>{title}</CardTitle>
+      <div className="flex items-center gap-2">
         <div className="rounded-2xl border border-border/70 bg-muted/35 p-3">
           <Icon className="h-5 w-5 text-primary" />
         </div>
+        <CardTitle>{title}</CardTitle>
       </div>
       {description ? <CardDescription className="mt-2">{description}</CardDescription> : null}
     </div>
@@ -98,10 +98,10 @@ function TabButton<T extends string>({
           : "border-border/70 bg-background/70 text-muted-foreground hover:bg-muted/50 hover:text-foreground",
       ].join(" ")}
     >
+      <span className="font-medium">{label}</span>
       <span className="rounded-full bg-background/25 px-2 py-0.5 text-xs">
         {formatNumberPersian(count)}
       </span>
-      <span className="font-medium">{label}</span>
     </button>
   );
 }
@@ -553,7 +553,6 @@ export default function Profile() {
                   <SectionTitle
                     icon={UserRound}
                     title="اطلاعات شخصی و حساب"
-                    description="اطلاعات اصلی حساب بدون فیلدهای اضافی و با چینش مناسب فارسی."
                   />
                 </CardHeader>
                 <CardContent className="grid gap-6 md:grid-cols-2">
@@ -589,7 +588,6 @@ export default function Profile() {
                   <SectionTitle
                     icon={CalendarClock}
                     title="فعالیت‌های رویدادی"
-                    description="ثبت‌نام‌های شما با تفکیک وضعیت در نمای تب‌بندی‌شده."
                   />
                 </CardHeader>
                 <CardContent className="space-y-5">
@@ -624,20 +622,20 @@ export default function Profile() {
                   </div>
 
                   <div className="flex flex-col gap-4 lg:flex-row-reverse">
-                    <div className="flex gap-2 overflow-x-auto pb-1 lg:w-60 lg:flex-col lg:overflow-visible lg:pb-0">
-                      <TabButton value="confirmed" active={eventTab} label="تأیید شده" count={confirmedRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
-                      <TabButton value="pending" active={eventTab} label="در انتظار" count={pendingRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
-                      <TabButton value="cancelled" active={eventTab} label="لغو شده" count={canceledRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
-                    </div>
                     <div className="min-w-0 flex-1 space-y-3">
                       {regsLoading ? <p className="text-sm text-muted-foreground">در حال بارگذاری فعالیت‌های رویدادی...</p> : null}
                       {regsError ? <p className="text-sm text-destructive">خطا در دریافت ثبت‌نام‌های رویدادی</p> : null}
                       {activeEventItems.length ? activeEventItems.map(renderRegistrationRow) : (
-                        <div className="rounded-2xl border border-dashed p-8 text-center text-sm text-muted-foreground">
+                        <div className="rounded-2xl flex flex-col justify-center h-full border border-dashed p-8 text-center text-sm text-muted-foreground">
                           موردی در این بخش ثبت نشده است.
                         </div>
                       )}
                     </div>
+                    <div className="flex gap-2 overflow-x-auto pb-1 lg:w-60 lg:flex-col lg:overflow-visible lg:pb-0">
+                      <TabButton value="confirmed" active={eventTab} label="تأیید شده" count={confirmedRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
+                      <TabButton value="pending" active={eventTab} label="در انتظار" count={pendingRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
+                      <TabButton value="cancelled" active={eventTab} label="لغو شده" count={canceledRegistrations.length} onClick={(value) => setEventTab(value as EventTab)} />
+                    </div>
                   </div>
                 </CardContent>
               </Card>
@@ -647,17 +645,10 @@ export default function Profile() {
                   <SectionTitle
                     icon={MessageSquareText}
                     title="فعالیت‌های بلاگ"
-                    description="لایک‌ها، ذخیره‌ها، نظرها و پاسخ‌های شما در نمای تب‌بندی‌شده."
                   />
                 </CardHeader>
                 <CardContent>
                   <div className="flex flex-col gap-4 lg:flex-row-reverse">
-                    <div className="flex gap-2 overflow-x-auto pb-1 lg:w-60 lg:flex-col lg:overflow-visible lg:pb-0">
-                      <TabButton value="liked" active={blogTab} label="پسندیده‌ها" count={blogCounts.liked} onClick={(value) => setBlogTab(value as BlogTab)} />
-                      <TabButton value="saved" active={blogTab} label="ذخیره‌شده‌ها" count={blogCounts.saved} onClick={(value) => setBlogTab(value as BlogTab)} />
-                      <TabButton value="comments" active={blogTab} label="نظرها" count={blogCounts.comments} onClick={(value) => setBlogTab(value as BlogTab)} />
-                      <TabButton value="replies" active={blogTab} label="پاسخ‌ها" count={blogCounts.replies} onClick={(value) => setBlogTab(value as BlogTab)} />
-                    </div>
                     <div className="min-w-0 flex-1 space-y-3">
                       {blogTab === "liked" ? (
                         blogActivity?.liked_posts.length ? blogActivity.liked_posts.map(renderPostRow) : (
@@ -680,6 +671,12 @@ export default function Profile() {
                         )
                       ) : null}
                     </div>
+                    <div className="flex gap-2 overflow-x-auto pb-1 lg:w-60 lg:flex-col lg:overflow-visible lg:pb-0">
+                      <TabButton value="liked" active={blogTab} label="پسندیده‌ها" count={blogCounts.liked} onClick={(value) => setBlogTab(value as BlogTab)} />
+                      <TabButton value="saved" active={blogTab} label="ذخیره‌شده‌ها" count={blogCounts.saved} onClick={(value) => setBlogTab(value as BlogTab)} />
+                      <TabButton value="comments" active={blogTab} label="نظرها" count={blogCounts.comments} onClick={(value) => setBlogTab(value as BlogTab)} />
+                      <TabButton value="replies" active={blogTab} label="پاسخ‌ها" count={blogCounts.replies} onClick={(value) => setBlogTab(value as BlogTab)} />
+                    </div>
                   </div>
                 </CardContent>
               </Card>
@@ -699,7 +696,7 @@ function EmptyBlogActivity({
   text: string;
 }) {
   return (
-    <div className="rounded-2xl border border-dashed p-8 text-center text-sm text-muted-foreground">
+    <div className="rounded-2xl border border-dashed p-8 text-center text-sm text-muted-foreground flex flex-col justify-center h-full">
       <Icon className="mx-auto mb-3 h-5 w-5 text-primary" />
       {text}
     </div>