michellepace · michellepace · Jan 2, 2026 · Jan 2, 2026 · Jan 2, 2026 · Jan 2, 2026
diff --git a/.claude/settings.json b/.claude/settings.json
@@ -71,7 +71,7 @@
       "WebFetch(domain:vercel.com)",
       "WebFetch(domain:vitest.dev)"
     ],
-    "deny": ["Read(**/.env)", "Read(**/.envrc)"],
+    "deny": ["Read(**/.env)", "Read(**/.envrc)", "Read(x_docs/OLD/**)"],
     "ask": []
   },
   "enabledPlugins": {

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
@@ -1,32 +1,9 @@
+import { TagLink } from "@/components/tag-link";
+
 const HomePage = () => (
   <>
-    <h1 className="text-heading-2xl">Hello Root page with heading H1</h1>
-
-    {/* Demo: top overflow test */}
-    <div className="mt-8 bg-primary/30 p-4">{"words ".repeat(50)}</div>
-
-    {/* Flexbox demo: grow vs flex-none */}
-    <div className="my-8 flex gap-4 border-2 border-dashed border-primary p-4">
-      {/* Fixed width - won't grow */}
-      <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
-        flex-none
-      </div>
-
-      {/* Grows to fill available space */}
-      <div className="flex h-24 grow items-center justify-center rounded-lg border-2 border-dashed border-primary bg-indigo-500/30 text-sm font-medium">
-        grow
-      </div>
-
-      {/* Fixed width - won't grow */}
-      <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
-        flex-none
-      </div>
-    </div>
-
-    {/* Demo: bottom overflow test */}
-    <div className="bg-primary/30 p-4">{"words ".repeat(50)}</div>
+    <h1 className="text-heading-2xl">All Questions</h1>
 
-    {/* Question boxes for testing sticky sidebar scroll */}
     <div className="mt-8 space-y-6">
       {[1, 2, 3, 4].map((questionIndex) => (
         <article
@@ -56,13 +33,8 @@ const HomePage = () => (
 
           {/* Tags */}
           <div className="mb-4 flex flex-wrap gap-2">
-            {["next.js", "tailwindcss", "react", "css"].map((tag) => (
-              <span
-                key={tag}
-                className="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground"
-              >
-                {tag}
-              </span>
+            {["tailwind", "nextjs"].map((tag) => (
+              <TagLink key={tag} name={tag} />
             ))}
           </div>
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -27,6 +27,12 @@ export default function RootLayout({
           className={`${inter.variable} ${spaceGrotesk.variable} ${jetbrainsMono.variable} h-full`}
           suppressHydrationWarning
         >
+          <head>
+            <link
+              rel="stylesheet"
+              href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
+            />
+          </head>
           <body className="flex min-h-full flex-col antialiased">
             <ThemeProvider
               attribute="class"

diff --git a/components/right-sidebar/right-sidebar.tsx b/components/right-sidebar/right-sidebar.tsx
@@ -1,5 +1,5 @@
 import { QuestionLink } from "@/components/right-sidebar/question-link";
-import { TagLink } from "@/components/right-sidebar/tag-link";
+import { TagLink } from "@/components/tag-link";
 import {
   Sidebar,
   SidebarContent,
@@ -59,6 +59,8 @@ export async function RightSidebar() {
                     key={tag.name}
                     name={tag.name}
                     questionCount={tag.questions}
+                    showIcon
+                    colored
                   />
                 ))}
               </div>

diff --git a/components/right-sidebar/tag-link.tsx b/components/right-sidebar/tag-link.tsx
diff --git a/components/tag-link.tsx b/components/tag-link.tsx
@@ -0,0 +1,40 @@
+import { Tag } from "lucide-react";
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { getDeviconClassName } from "@/lib/devicon";
+
+type TagLinkProps = {
+  name: string;
+  questionCount?: number;
+  colored?: boolean;
+  showIcon?: boolean;
+};
+
+export function TagLink({
+  name,
+  questionCount,
+  colored = false,
+  showIcon = false,
+}: TagLinkProps) {
+  const iconClass = getDeviconClassName(name, colored);
+
+  return (
+    <Link
+      href={`/tags/${name}`}
+      className="group flex items-center justify-between gap-2 rounded-md p-1 transition-transform duration-150 hover:-translate-y-0.5 hover:scale-[1.005]"
+    >
+      <Badge className="flex items-center gap-1.5 rounded-md border-transparent bg-(--tag-bg) px-4 py-1.5 uppercase text-(--tag-text)">
+        {showIcon &&
+          (iconClass ? (
+            <i className={iconClass} aria-hidden="true" />
+          ) : (
+            <Tag className="size-3.5" aria-hidden="true" />
+          ))}
+        {name}
+      </Badge>
+      {questionCount !== undefined && (
+        <span className="text-xs text-muted-foreground">{questionCount}</span>
+      )}
+    </Link>
+  );
+}
diff --git a/lib/data/tags.test.ts b/lib/data/tags.test.ts
@@ -16,4 +16,11 @@ describe("getPopularTags", () => {
     expect(tags[0]).toHaveProperty("name");
     expect(tags[0]).toHaveProperty("questions");
   });
+
+  it("returns tags sorted by question count (descending)", async () => {
+    const tags = await getPopularTags(5);
+    for (let i = 0; i < tags.length - 1; i++) {
+      expect(tags[i].questions).toBeGreaterThanOrEqual(tags[i + 1].questions);
+    }
+  });
 });
diff --git a/lib/data/tags.ts b/lib/data/tags.ts
@@ -6,9 +6,14 @@ export type Tag = {
 const MOCK_TAGS: Tag[] = [
   { name: "nextjs", questions: 320 },
   { name: "reactjs", questions: 244 },
+  { name: "typescript", questions: 203 },
+  { name: "css", questions: 156 },
+  { name: "tailwind", questions: 94 },
+  { name: "postgres", questions: 89 },
   { name: "javascript", questions: 83 },
+  { name: "nodejs", questions: 67 },
+  { name: "html", questions: 45 },
   { name: "react", questions: 30 },
-  { name: "postgres", questions: 89 },
 ];
 
 /**