coding-friend-cli 1.1.1 → 1.2.1

package/lib/learn-host/package.json

@@ -1,31 +1,46 @@
 {
   "name": "coding-friend-learn-host",
-  "version": "1.0.0",
+  "version": "0.0.2",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 3333",
     "build": "next build",
     "postbuild": "pagefind --site .next/server/app --output-path public/_pagefind",
-    "start": "next start"
+    "start": "next start",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\""
   },
   "dependencies": {
-    "next": "^15.1.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "cmdk": "^1.1.1",
+    "gray-matter": "^4.0.3",
+    "next": "^16.1.6",
+    "next-themes": "^0.4.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "react-markdown": "^9.0.0",
-    "remark-gfm": "^4.0.0",
     "rehype-highlight": "^7.0.0",
-    "gray-matter": "^4.0.3",
-    "next-themes": "^0.4.0"
+    "rehype-slug": "^6.0.0",
+    "remark-gfm": "^4.0.0"
   },
   "devDependencies": {
-    "typescript": "^5.7.0",
-    "@types/node": "^22.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "tailwindcss": "^4.0.0",
+    "@eslint/js": "^9.39.3",
     "@tailwindcss/postcss": "^4.0.0",
     "@tailwindcss/typography": "^0.5.0",
-    "pagefind": "^1.3.0"
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "eslint": "^9.39.3",
+    "eslint-config-next": "^16.1.6",
+    "eslint-config-prettier": "^10.1.8",
+    "pagefind": "^1.3.0",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.0"
   }
 }

package/lib/learn-host/public/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" x="0" y="0" viewBox="0 0 64 64" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><linearGradient id="a" x1="78.644" x2="25.425" y1="74.123" y2="11.863" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#b45309"></stop><stop offset="1" stop-color="#f59e0b"></stop></linearGradient><path fill="url(#a)" fill-rule="evenodd" d="M2 14C2 7.373 7.373 2 14 2h36c6.627 0 12 5.373 12 12v28c0 6.627-5.373 12-12 12H39.908l-6.403 7.317a2 2 0 0 1-3.01 0L24.093 54H14C7.373 54 2 48.627 2 42z" clip-rule="evenodd" opacity="1" data-original="url(#a)" class=""></path><path fill="#ffffff" d="M32 14a2 2 0 0 1 1.95 1.556l1.107 4.867a6 6 0 0 0 4.52 4.52l4.867 1.107a2 2 0 0 1 0 3.9l-4.867 1.107a6 6 0 0 0-4.52 4.52l-1.107 4.866a2 2 0 0 1-3.9 0l-1.107-4.866a6 6 0 0 0-4.52-4.52l-4.866-1.107a2 2 0 0 1 0-3.9l4.866-1.107a6 6 0 0 0 4.52-4.52l1.107-4.866A2 2 0 0 1 32 14z"></path></g></svg>

package/lib/learn-host/src/app/[category]/[slug]/page.tsx

@@ -1,6 +1,7 @@
-import { getAllDocs, getDocBySlug } from "@/lib/docs";
+import { getAllDocs, getDocBySlug, extractHeadings } from "@/lib/docs";
 import Breadcrumbs from "@/components/Breadcrumbs";
 import MarkdownRenderer from "@/components/MarkdownRenderer";
+import TableOfContents from "@/components/TableOfContents";
 import TagBadge from "@/components/TagBadge";
 import { notFound } from "next/navigation";
 
@@ -12,7 +13,6 @@ export async function generateStaticParams() {
 }
 
 export const dynamicParams = true;
-export const revalidate = 10;
 
 export default async function DocPage({
   params,
@@ -24,39 +24,43 @@ export default async function DocPage({
   if (!doc) notFound();
 
   const categoryDisplay = category.replace(/[_-]/g, " ");
+  const headings = extractHeadings(doc.content);
 
   return (
-    <article data-pagefind-body>
-      <Breadcrumbs
-        crumbs={[
-          { label: categoryDisplay, href: `/${category}/` },
-          { label: doc.frontmatter.title },
-        ]}
-      />
-
-      <header className="mb-8">
-        <h1 className="text-3xl font-bold mb-2">{doc.frontmatter.title}</h1>
-        <div className="flex flex-wrap items-center gap-3 text-sm text-gray-500 dark:text-gray-400">
-          <span className="capitalize px-2 py-0.5 bg-gray-100 dark:bg-gray-800 rounded">
-            {categoryDisplay}
-          </span>
-          {doc.frontmatter.created && (
-            <span>Created: {doc.frontmatter.created}</span>
+    <div className="flex w-full">
+      <article className="min-w-0 flex-1" data-pagefind-body>
+        <Breadcrumbs
+          crumbs={[
+            { label: categoryDisplay, href: `/${category}/` },
+            { label: doc.frontmatter.title },
+          ]}
+        />
+
+        <header className="mb-8">
+          <h1 className="mb-2 text-3xl font-bold">{doc.frontmatter.title}</h1>
+          {(doc.frontmatter.created || doc.frontmatter.updated) && (
+            <div className="flex flex-wrap items-center gap-3 text-sm text-slate-500 dark:text-slate-400">
+              {doc.frontmatter.created && (
+                <span>Created: {doc.frontmatter.created}</span>
+              )}
+              {doc.frontmatter.updated && (
+                <span>Updated: {doc.frontmatter.updated}</span>
+              )}
+            </div>
           )}
-          {doc.frontmatter.updated && (
-            <span>Updated: {doc.frontmatter.updated}</span>
+          {doc.frontmatter.tags.length > 0 && (
+            <div className="mt-3 flex flex-wrap gap-1.5">
+              {doc.frontmatter.tags.map((tag) => (
+                <TagBadge key={tag} tag={tag} />
+              ))}
+            </div>
           )}
-        </div>
-        {doc.frontmatter.tags.length > 0 && (
-          <div className="flex flex-wrap gap-1.5 mt-3">
-            {doc.frontmatter.tags.map((tag) => (
-              <TagBadge key={tag} tag={tag} />
-            ))}
-          </div>
-        )}
-      </header>
-
-      <MarkdownRenderer content={doc.content} />
-    </article>
+        </header>
+
+        <MarkdownRenderer content={doc.content} />
+      </article>
+
+      <TableOfContents headings={headings} />
+    </div>
   );
 }

package/lib/learn-host/src/app/[category]/page.tsx

@@ -7,7 +7,6 @@ export async function generateStaticParams() {
 }
 
 export const dynamicParams = true;
-export const revalidate = 10;
 
 export default async function CategoryPage({
   params,
@@ -21,8 +20,8 @@ export default async function CategoryPage({
   return (
     <div>
       <Breadcrumbs crumbs={[{ label: displayName }]} />
-      <h1 className="text-2xl font-bold capitalize mb-1">{displayName}</h1>
-      <p className="text-gray-500 dark:text-gray-400 mb-6">
+      <h1 className="mb-1 text-2xl font-bold capitalize">{displayName}</h1>
+      <p className="mb-6 text-slate-500 dark:text-slate-400">
         {docs.length} {docs.length === 1 ? "doc" : "docs"}
       </p>
 

package/lib/learn-host/src/app/apple-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" x="0" y="0" viewBox="0 0 64 64" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><linearGradient id="a" x1="78.644" x2="25.425" y1="74.123" y2="11.863" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#b45309"></stop><stop offset="1" stop-color="#f59e0b"></stop></linearGradient><path fill="url(#a)" fill-rule="evenodd" d="M2 14C2 7.373 7.373 2 14 2h36c6.627 0 12 5.373 12 12v28c0 6.627-5.373 12-12 12H39.908l-6.403 7.317a2 2 0 0 1-3.01 0L24.093 54H14C7.373 54 2 48.627 2 42z" clip-rule="evenodd" opacity="1" data-original="url(#a)" class=""></path><path fill="#ffffff" d="M32 14a2 2 0 0 1 1.95 1.556l1.107 4.867a6 6 0 0 0 4.52 4.52l4.867 1.107a2 2 0 0 1 0 3.9l-4.867 1.107a6 6 0 0 0-4.52 4.52l-1.107 4.866a2 2 0 0 1-3.9 0l-1.107-4.866a6 6 0 0 0-4.52-4.52l-4.866-1.107a2 2 0 0 1 0-3.9l4.866-1.107a6 6 0 0 0 4.52-4.52l1.107-4.866A2 2 0 0 1 32 14z"></path></g></svg>

package/lib/learn-host/src/app/globals.css

@@ -4,28 +4,88 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-  --color-primary: #3b82f6;
-  --color-primary-dark: #60a5fa;
-  --color-surface: #ffffff;
-  --color-surface-dark: #111827;
-  --color-surface-secondary: #f9fafb;
-  --color-surface-secondary-dark: #1f2937;
-  --color-border: #e5e7eb;
-  --color-border-dark: #374151;
-  --color-text: #111827;
-  --color-text-dark: #f9fafb;
-  --color-text-muted: #6b7280;
-  --color-text-muted-dark: #9ca3af;
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+
+  /* Warm slate scale (dark palette — from website) */
+  --color-navy-800: #31353f;
+  --color-navy-900: #2a2d38;
+  --color-navy-950: #23262e;
+
+  /* Violet accent (from website) */
+  --color-accent: #7c3aed;
+  --color-accent-light: #a78bfa;
+  --color-accent-dark: #6d28d9;
+
+  --color-surface: #2a2d38;
+  --color-surface-secondary: #31353f;
+  --color-border: rgba(160, 160, 160, 0.11);
+  --color-text: #f8fafc;
+  --color-text-muted: #94a3b8;
+  --color-link: #58adfb;
 }
 
 html {
   scroll-behavior: smooth;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Scrollbar */
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+*::-webkit-scrollbar-thumb {
+  background: #d1d5db4c;
+  border-radius: 10px;
+}
+*::-webkit-scrollbar-thumb:hover {
+  background: #d1d5dbce;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Hide scrollbar utility */
+.scrollbar-none::-webkit-scrollbar {
+  display: none;
+}
+
 /* Syntax highlighting */
-pre code.hljs {
-  padding: 1rem;
+pre code {
   border-radius: 0.5rem;
   font-size: 0.875rem;
   line-height: 1.7;
+
+  &.hljs {
+    padding: 0 !important;
+  }
+}
+
+pre {
+  padding: 1rem;
+  background: #0d1117;
+}
+
+:where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  font-weight: 500;
+}
+
+:not(pre) > code {
+  background: none !important;
+  border: 1px solid #a0a0a06b;
+  font-size: 85%;
+  padding: 1px 5px;
+  border-radius: 4px;
 }

package/lib/learn-host/src/app/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" x="0" y="0" viewBox="0 0 64 64" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><linearGradient id="a" x1="78.644" x2="25.425" y1="74.123" y2="11.863" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#b45309"></stop><stop offset="1" stop-color="#f59e0b"></stop></linearGradient><path fill="url(#a)" fill-rule="evenodd" d="M2 14C2 7.373 7.373 2 14 2h36c6.627 0 12 5.373 12 12v28c0 6.627-5.373 12-12 12H39.908l-6.403 7.317a2 2 0 0 1-3.01 0L24.093 54H14C7.373 54 2 48.627 2 42z" clip-rule="evenodd" opacity="1" data-original="url(#a)" class=""></path><path fill="#ffffff" d="M32 14a2 2 0 0 1 1.95 1.556l1.107 4.867a6 6 0 0 0 4.52 4.52l4.867 1.107a2 2 0 0 1 0 3.9l-4.867 1.107a6 6 0 0 0-4.52 4.52l-1.107 4.866a2 2 0 0 1-3.9 0l-1.107-4.866a6 6 0 0 0-4.52-4.52l-4.866-1.107a2 2 0 0 1 0-3.9l4.866-1.107a6 6 0 0 0 4.52-4.52l1.107-4.866A2 2 0 0 1 32 14z"></path></g></svg>

package/lib/learn-host/src/app/layout.tsx

@@ -1,36 +1,56 @@
 import type { Metadata } from "next";
 import { ThemeProvider } from "next-themes";
 import { getAllCategories } from "@/lib/docs";
+import Header from "@/components/layout/Header";
+import Footer from "@/components/layout/Footer";
 import Sidebar from "@/components/Sidebar";
 import MobileNav from "@/components/MobileNav";
 import "./globals.css";
 import "highlight.js/styles/github-dark.css";
 
-export const revalidate = 10;
-
 export const metadata: Metadata = {
   title: "Learning Notes",
   description: "Personal learning knowledge base",
 };
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   const categories = getAllCategories();
 
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+    <html lang="en" data-scroll-behavior="smooth" suppressHydrationWarning>
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin="anonymous"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body className="dark:bg-navy-900 bg-white text-slate-900 antialiased dark:text-slate-50">
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <div data-pagefind-ignore>
+          <Header categories={categories} />
+          <div data-pagefind-ignore className="md:hidden">
             <MobileNav categories={categories} />
           </div>
           <div className="flex">
             <div data-pagefind-ignore>
               <Sidebar categories={categories} />
             </div>
-            <main className="flex-1 min-h-screen p-6 md:p-8 max-w-4xl">
-              {children}
-            </main>
+            <div className="flex min-w-0 flex-1 justify-center md:pl-64 lg:pl-[300px]">
+              <main className="min-h-screen w-full max-w-5xl p-6 pb-24 md:p-8 md:pb-24">
+                {children}
+              </main>
+            </div>
           </div>
+          <Footer />
         </ThemeProvider>
       </body>
     </html>

package/lib/learn-host/src/app/page.tsx

@@ -3,8 +3,6 @@ import DocCard from "@/components/DocCard";
 import TagBadge from "@/components/TagBadge";
 import Link from "next/link";
 
-export const revalidate = 10;
-
 export default function HomePage() {
   const categories = getAllCategories();
   const docs = getAllDocs();
@@ -13,25 +11,25 @@ export default function HomePage() {
 
   return (
     <div>
-      <h1 className="text-3xl font-bold mb-2">Learning Notes</h1>
-      <p className="text-gray-500 dark:text-gray-400 mb-8">
+      <h1 className="mb-2 text-3xl font-bold">Learning Notes</h1>
+      <p className="mb-8 text-slate-500 dark:text-slate-400">
         {docs.length} docs across {categories.length} categories
       </p>
 
       {/* Categories */}
       <section className="mb-8">
-        <h2 className="text-lg font-semibold mb-3">Categories</h2>
-        <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+        <h2 className="mb-3 text-lg font-semibold">Categories</h2>
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
           {categories.map((cat) => (
             <Link
               key={cat.name}
               href={`/${cat.name}/`}
-              className="p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-600 transition-colors"
+              className="rounded-lg border border-slate-200 p-3 transition-colors hover:border-violet-400/50 dark:border-[#a0a0a01c] dark:hover:border-violet-400/50"
             >
-              <div className="font-medium capitalize text-gray-900 dark:text-gray-100">
+              <div className="font-medium text-slate-900 capitalize dark:text-slate-100">
                 {cat.name.replace(/[_-]/g, " ")}
               </div>
-              <div className="text-sm text-gray-500 dark:text-gray-400">
+              <div className="text-sm text-slate-500 dark:text-slate-400">
                 {cat.docCount} {cat.docCount === 1 ? "doc" : "docs"}
               </div>
             </Link>
@@ -42,7 +40,7 @@ export default function HomePage() {
       {/* Tags */}
       {tags.length > 0 && (
         <section className="mb-8">
-          <h2 className="text-lg font-semibold mb-3">Tags</h2>
+          <h2 className="mb-3 text-lg font-semibold">Tags</h2>
           <div className="flex flex-wrap gap-2">
             {tags.slice(0, 20).map(({ tag }) => (
               <TagBadge key={tag} tag={tag} />
@@ -53,7 +51,7 @@ export default function HomePage() {
 
       {/* Recent Docs */}
       <section>
-        <h2 className="text-lg font-semibold mb-3">Recently Updated</h2>
+        <h2 className="mb-3 text-lg font-semibold">Recently Updated</h2>
         <div className="grid gap-3">
           {recentDocs.map((doc) => (
             <DocCard key={`${doc.category}/${doc.slug}`} doc={doc} />

package/lib/learn-host/src/components/Breadcrumbs.tsx

@@ -7,19 +7,27 @@ interface Crumb {
 
 export default function Breadcrumbs({ crumbs }: { crumbs: Crumb[] }) {
   return (
-    <nav className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-4">
-      <Link href="/" className="hover:text-blue-600 dark:hover:text-blue-400">
+    <nav className="mb-4 flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
+      <Link
+        href="/"
+        className="hover:text-violet-600 dark:hover:text-violet-400"
+      >
         Home
       </Link>
       {crumbs.map((crumb, i) => (
         <span key={i} className="flex items-center gap-2">
           <span>/</span>
           {crumb.href ? (
-            <Link href={crumb.href} className="hover:text-blue-600 dark:hover:text-blue-400 capitalize">
+            <Link
+              href={crumb.href}
+              className="capitalize hover:text-violet-600 dark:hover:text-violet-400"
+            >
               {crumb.label}
             </Link>
           ) : (
-            <span className="text-gray-700 dark:text-gray-300">{crumb.label}</span>
+            <span className="text-slate-700 dark:text-slate-300">
+              {crumb.label}
+            </span>
           )}
         </span>
       ))}

package/lib/learn-host/src/components/DocCard.tsx

@@ -1,32 +1,50 @@
+"use client";
+
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import TagBadge from "./TagBadge";
 import type { DocMeta } from "@/lib/types";
 
 export default function DocCard({ doc }: { doc: DocMeta }) {
+  const router = useRouter();
+  const href = `/${doc.category}/${doc.slug}/`;
+
   return (
-    <Link
-      href={`/${doc.category}/${doc.slug}/`}
-      className="block p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-600 hover:shadow-sm transition-all bg-white dark:bg-gray-800/50"
+    <div
+      role="link"
+      tabIndex={0}
+      onClick={() => router.push(href)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") router.push(href);
+      }}
+      className="dark:bg-navy-800/50 block cursor-pointer rounded-lg border border-slate-200 bg-white p-4 transition-all hover:border-violet-400/50 dark:border-[#a0a0a01c] dark:hover:border-violet-400/50"
     >
-      <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">
-        {doc.frontmatter.title}
+      <h3 className="mb-1 font-semibold text-slate-900 dark:text-slate-100">
+        <Link href={href} className="hover:underline">
+          {doc.frontmatter.title}
+        </Link>
       </h3>
-      <p className="text-sm text-gray-500 dark:text-gray-400 mb-2 line-clamp-2">
+      <p className="mb-2 line-clamp-2 text-sm text-slate-500 dark:text-slate-400">
         {doc.excerpt}
       </p>
       <div className="flex items-center justify-between">
-        <div className="flex gap-1 flex-wrap">
+        <div
+          className="flex flex-wrap items-center gap-2"
+          onClick={(e) => e.stopPropagation()}
+        >
           {doc.frontmatter.tags.slice(0, 3).map((tag) => (
             <TagBadge key={tag} tag={tag} />
           ))}
           {doc.frontmatter.tags.length > 3 && (
-            <span className="text-xs text-gray-400">+{doc.frontmatter.tags.length - 3}</span>
+            <span className="text-xs text-slate-400">
+              +{doc.frontmatter.tags.length - 3}
+            </span>
           )}
         </div>
-        <span className="text-xs text-gray-400">
+        <span className="text-xs text-slate-400">
           {doc.frontmatter.updated || doc.frontmatter.created}
         </span>
       </div>
-    </Link>
+    </div>
   );
 }

package/lib/learn-host/src/components/MarkdownRenderer.tsx

@@ -1,11 +1,15 @@
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
+import rehypeSlug from "rehype-slug";
 
 export default function MarkdownRenderer({ content }: { content: string }) {
   return (
-    <div className="prose prose-gray dark:prose-invert max-w-none prose-headings:scroll-mt-20 prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-code:before:content-none prose-code:after:content-none">
-      <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>
+    <div className="prose prose-slate prose-headings:scroll-mt-20 prose-a:text-link prose-code:before:content-none prose-code:after:content-none dark:prose-invert dark:prose-a:text-link max-w-none">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeHighlight, rehypeSlug]}
+      >
         {content}
       </ReactMarkdown>
     </div>

package/lib/learn-host/src/components/MobileNav.tsx

@@ -1,55 +1,63 @@
 "use client";
 
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { useState } from "react";
 import type { CategoryInfo } from "@/lib/types";
-import SearchBar from "./SearchBar";
-import ThemeToggle from "./ThemeToggle";
 
-export default function MobileNav({ categories }: { categories: CategoryInfo[] }) {
+export default function MobileNav({
+  categories,
+}: {
+  categories: CategoryInfo[];
+}) {
+  const pathname = usePathname();
   const [open, setOpen] = useState(false);
 
   return (
-    <div className="md:hidden">
-      <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-        <Link href="/" className="font-bold text-gray-900 dark:text-gray-100">
-          Learning Notes
-        </Link>
-        <div className="flex items-center gap-2">
-          <ThemeToggle />
-          <button
-            onClick={() => setOpen(!open)}
-            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
-            aria-label="Toggle menu"
-          >
-            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              {open ? (
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              ) : (
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-              )}
-            </svg>
-          </button>
-        </div>
-      </div>
+    <div className="dark:bg-navy-950 border-b border-slate-200 bg-slate-50 dark:border-[#a0a0a01c]">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex w-full cursor-pointer items-center justify-between px-4 py-3 text-sm font-medium text-slate-700 dark:text-slate-300"
+      >
+        <span>Navigation</span>
+        <svg
+          className={`h-4 w-4 transition-transform ${open ? "rotate-180" : ""}`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
 
       {open && (
-        <div className="p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
-          <SearchBar />
-          <nav className="mt-4 space-y-1">
-            {categories.map((cat) => (
+        <nav className="max-h-[60vh] space-y-0.5 overflow-y-auto px-4 pb-4">
+          {categories.map((cat) => {
+            const isActive = pathname === `/${cat.name}/`;
+            return (
               <Link
                 key={cat.name}
                 href={`/${cat.name}/`}
                 onClick={() => setOpen(false)}
-                className="flex items-center justify-between px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300"
+                className={`flex items-center justify-between rounded-md px-3 py-1.5 text-sm capitalize ${
+                  isActive
+                    ? "font-medium text-violet-600 dark:text-violet-400"
+                    : "text-slate-600 dark:text-slate-400"
+                }`}
               >
-                <span className="capitalize">{cat.name.replace(/[_-]/g, " ")}</span>
-                <span className="text-xs text-gray-400">{cat.docCount}</span>
+                <span>{cat.name.replace(/[_-]/g, " ")}</span>
+                <span className="text-xs text-slate-400 dark:text-slate-500">
+                  {cat.docCount}
+                </span>
               </Link>
-            ))}
-          </nav>
-        </div>
+            );
+          })}
+        </nav>
       )}
     </div>
   );