From 42e8a513abc7b1769f1da76949a3c62353dc8b07 Mon Sep 17 00:00:00 2001
From: stabldev <114811070+stabldev@users.noreply.github.com>
Date: Fri, 20 Mar 2026 11:54:14 +0530
Subject: [PATCH] feat: setup popular quiblets section

---
 backend/api/views/quiblet.py             | 11 +++++
 frontend/app/page.tsx                    |  2 +
 frontend/components/popular-quiblets.tsx | 61 ++++++++++++++++++++++++
 frontend/constants/api-endpoints.ts      |  1 +
 frontend/services/quiblet.ts             |  5 ++
 5 files changed, 80 insertions(+)
 create mode 100644 frontend/components/popular-quiblets.tsx

diff --git a/backend/api/views/quiblet.py b/backend/api/views/quiblet.py
index 012128e9..f98bc328 100644
--- a/backend/api/views/quiblet.py
+++ b/backend/api/views/quiblet.py
@@ -46,6 +46,17 @@ def search_quiblets(request: HttpRequest, q: str):  # pyright: ignore[reportUnus
     )[:10]
 
 
+@router.get("/popular", response=list[QuibletBasicSchema])
+def get_popular_quiblets(request: HttpRequest):
+    def fetch():
+        return Quiblet.objects.filter(type="PUBLIC").annotate(
+            members_count=Count("members")
+        ).order_by("-members_count")[:5]
+
+    cache_key = "quiblets:popular"
+    return cache_response(cache_key, fetch)
+
+
 @router.get(
     "/{name}",
     response=QuibletSchema,
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index ea885515..b7e03613 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -1,5 +1,6 @@
 import Feed from "@/components/feed";
 import LegalLinks from "@/components/legal-links";
+import PopularQuiblets from "@/components/popular-quiblets";
 import RecentQuibs from "@/components/recent-quibs";
 
 export default function Home() {
@@ -9,6 +10,7 @@ export default function Home() {
       <div>
         <div className="scrollbar-track-rounded-full scrollbar-thin scrollbar-track-transparent scrollbar-thumb-accent scrollbar scrollbar-thumb-rounded-full sticky top-14 flex h-[calc(100vh-var(--spacing)*14)] w-75 flex-col gap-4 overflow-y-auto p-4 pl-2">
           <RecentQuibs />
+          <PopularQuiblets />
           <LegalLinks />
         </div>
       </div>
diff --git a/frontend/components/popular-quiblets.tsx b/frontend/components/popular-quiblets.tsx
new file mode 100644
index 00000000..2519ebf3
--- /dev/null
+++ b/frontend/components/popular-quiblets.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import Link from "next/link";
+import { getPopularQuiblets } from "@/services/quiblet";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
+import { Skeleton } from "./ui/skeleton";
+
+export default function PopularQuiblets() {
+  const { data: popularQuiblets, isLoading } = useQuery({
+    queryKey: ["popular-quiblets"],
+    queryFn: getPopularQuiblets,
+  });
+
+  return (
+    <aside className="flex flex-col gap-4">
+      <h4 className="font-medium text-secondary">Popular Quiblets</h4>
+      {isLoading ? (
+        <div className="flex flex-col gap-4">
+          {Array.from({ length: 5 }).map((_, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: skeleton
+            <div key={i} className="flex items-center gap-3">
+              <Skeleton className="size-8 shrink-0 rounded-full" />
+              <div className="flex flex-1 flex-col gap-1.5">
+                <Skeleton className="h-3 w-24" />
+                <Skeleton className="h-3 w-16" />
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : popularQuiblets?.length === 0 ? (
+        <div className="text-muted-foreground text-sm">
+          No popular quiblets found.
+        </div>
+      ) : (
+        <div className="flex flex-col gap-4">
+          {popularQuiblets?.map((quiblet) => (
+            <Link
+              key={quiblet.name}
+              href={`/q/${quiblet.name}`}
+              className="group flex items-center gap-3 transition-colors hover:text-primary"
+            >
+              <Avatar className="size-8 shrink-0">
+                <AvatarImage src={quiblet.avatar_url || undefined} />
+                <AvatarFallback seed={quiblet.name} />
+              </Avatar>
+              <div className="flex flex-col">
+                <span className="font-semibold text-sm group-hover:underline">
+                  q/{quiblet.name}
+                </span>
+                <span className="text-secondary text-xs">
+                  {quiblet.members_count} members
+                </span>
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </aside>
+  );
+}
diff --git a/frontend/constants/api-endpoints.ts b/frontend/constants/api-endpoints.ts
index 314c8176..43bf291f 100644
--- a/frontend/constants/api-endpoints.ts
+++ b/frontend/constants/api-endpoints.ts
@@ -16,6 +16,7 @@ export const API_ENDPOINTS = {
   SEARCH: (query: string) => `api/v1/search?q=${query}`,
   // quiblet
   QUIBLET_SEARCH: (query: string) => `api/v1/quiblet/search?q=${query}`,
+  POPULAR_QUIBLETS: "api/v1/quiblet/popular",
   QUIBLET: (name?: string) => `api/v1/quiblet/${name || ""}`,
   QUIBLET_IS_UNIQUE_NAME: (name: string) =>
     `api/v1/quiblet/is-unique?name=${name}`,
diff --git a/frontend/services/quiblet.ts b/frontend/services/quiblet.ts
index 5c750e3a..8e5e9695 100644
--- a/frontend/services/quiblet.ts
+++ b/frontend/services/quiblet.ts
@@ -66,3 +66,8 @@ export async function getUserQuibs(userId: string) {
 export async function toggleQuibletFavorite(name: string) {
   await api.post(API_ENDPOINTS.TOGGLE_FAVORITE(name));
 }
+
+export async function getPopularQuiblets() {
+  const res = await api.get<Array<QuibletBasic>>(API_ENDPOINTS.POPULAR_QUIBLETS);
+  return res.data;
+}