feature: Sort tags by usage and show usage numbers

1 files changed, 25 insertions, 8 deletions

diff --git a/packages/web/app/dashboard/tags/page.tsx b/packages/web/app/dashboard/tags/page.tsx
index ad5c99b8..dc0d2ef7 100644
--- a/packages/web/app/dashboard/tags/page.tsx
+++ b/packages/web/app/dashboard/tags/page.tsx
@@ -1,9 +1,22 @@
-import { Button } from "@/components/ui/button";
 import { getServerAuthSession } from "@/server/auth";
 import { prisma } from "@remember/db";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 
+function TagPill({ name, count }: { name: string; count: number }) {
+  return (
+    <Link
+      className="mx-1.5 my-1 flex rounded-lg bg-gray-600 hover:bg-gray-700"
+      href={`/dashboard/tags/${name}`}
+    >
+      <span className="p-1.5 text-gray-200">{name}</span>
+      <span className="rounded-r-lg bg-gray-300 p-1.5 text-gray-600">
+        {count}
+      </span>
+    </Link>
+  );
+}
+
 export default async function TagsPage() {
   const session = await getServerAuthSession();
   if (!session) {
@@ -14,21 +27,25 @@ export default async function TagsPage() {
     where: {
       userId: session.user.id,
     },
+    include: {
+      _count: {
+        select: {
+          bookmarks: true,
+        },
+      },
+    },
   });
 
+  // Sort tags by usage desc
+  tags.sort((a, b) => b._count.bookmarks - a._count.bookmarks);
+
   return (
     <div className="container mt-2 space-y-3">
       <span className="text-2xl">All Tags</span>
       <hr />
       <div className="flex flex-wrap">
         {tags.map((t) => (
-          <Link
-            className="m-1 block min-w-16 rounded-xl bg-black p-2 text-center text-white"
-            key={t.id}
-            href={`/dashboard/tags/${t.name}`}
-          >
-            {t.name}
-          </Link>
+          <TagPill key={t.id} name={t.name} count={t._count.bookmarks} />
         ))}
       </div>
     </div>