feat(blog): add rich listing filters

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>
   );