feat: enhance JSDoc cheatsheet with syntax highlighting and smoother navigation

Add syntax highlighting and improve navigation with smooth scrolling and hover effects.

Co-authored-by: Luke Hagar <5702154+LukeHagar@users.noreply.github.com>

app/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -8,6 +8,43 @@ import { ScrollArea } from "@/components/ui/scroll-area"
 import { Separator } from "@/components/ui/separator"
 import { BookOpen, Code, FileText, Hash, Info, Settings, Tag, Users, ChevronRight } from "lucide-react"
 
+const SyntaxHighlighter = ({ code, language = "javascript" }: { code: string; language?: string }) => {
+  const [highlightedCode, setHighlightedCode] = useState(code)
+
+  useEffect(() => {
+    // Simple syntax highlighting for JavaScript/JSDoc
+    const highlight = (text: string) => {
+      return (
+        text
+          // JSDoc tags
+          .replace(/(@\w+)/g, '<span class="text-blue-400 font-semibold">$1</span>')
+          // Comments
+          .replace(/(\/\*\*[\s\S]*?\*\/)/g, '<span class="text-green-400">$1</span>')
+          .replace(/(\/\/.*$)/gm, '<span class="text-green-400">$1</span>')
+          // Strings
+          .replace(/(['"`])((?:(?!\1)[^\\]|\\.)*)(\1)/g, '<span class="text-yellow-300">$1$2$3</span>')
+          // Keywords
+          .replace(
+            /\b(function|class|const|let|var|if|else|for|while|return|new|this|typeof|instanceof)\b/g,
+            '<span class="text-purple-400 font-medium">$1</span>',
+          )
+          // Types in curly braces
+          .replace(/\{([^}]+)\}/g, '<span class="text-cyan-300">{$1}</span>')
+          // Numbers
+          .replace(/\b(\d+\.?\d*)\b/g, '<span class="text-orange-400">$1</span>')
+      )
+    }
+
+    setHighlightedCode(highlight(code))
+  }, [code])
+
+  return (
+    <pre className="bg-slate-900 text-slate-100 p-4 rounded-lg text-sm font-mono overflow-x-auto border border-slate-700 leading-relaxed">
+      <code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
+    </pre>
+  )
+}
+
 const sections = [
   {
     id: "basic",
@@ -499,6 +536,7 @@ module.exports = {
 export default function JSDocCheatsheet() {
   const [activeSection, setActiveSection] = useState("basic")
   const [expandedSections, setExpandedSections] = useState<string[]>(["basic"])
+  const [isScrolling, setIsScrolling] = useState(false)
 
   const toggleSection = (sectionId: string) => {
     setExpandedSections((prev) =>
@@ -509,10 +547,43 @@ export default function JSDocCheatsheet() {
   const scrollToTag = (tag: string) => {
     const element = document.getElementById(tag.replace("@", "").replace(/[^a-zA-Z0-9]/g, "-"))
     if (element) {
+      setIsScrolling(true)
       element.scrollIntoView({ behavior: "smooth", block: "start" })
+
+      // Reset scrolling state after animation
+      setTimeout(() => setIsScrolling(false), 1000)
+
+      // Highlight the element briefly
+      element.classList.add("ring-2", "ring-primary", "ring-opacity-50")
+      setTimeout(() => {
+        element.classList.remove("ring-2", "ring-primary", "ring-opacity-50")
+      }, 2000)
     }
   }
 
+  useEffect(() => {
+    const handleScroll = () => {
+      if (isScrolling) return // Don't update during programmatic scrolling
+
+      const sections = Object.keys(jsdocData)
+      const scrollPosition = window.scrollY + 200
+
+      for (const sectionId of sections) {
+        const element = document.getElementById(`section-${sectionId}`)
+        if (element) {
+          const { offsetTop, offsetHeight } = element
+          if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
+            setActiveSection(sectionId)
+            break
+          }
+        }
+      }
+    }
+
+    window.addEventListener("scroll", handleScroll)
+    return () => window.removeEventListener("scroll", handleScroll)
+  }, [isScrolling])
+
   return (
     <div className="min-h-screen bg-background">
       {/* Header */}
@@ -530,7 +601,7 @@ export default function JSDocCheatsheet() {
           {/* Sidebar Navigation */}
           <aside className="w-80 shrink-0">
             <div className="sticky top-32">
-              <Card className="bg-sidebar border-sidebar-border">
+              <Card className="bg-sidebar border-sidebar-border shadow-lg">
                 <CardHeader className="pb-3">
                   <CardTitle className="text-sidebar-foreground text-lg">Navigation</CardTitle>
                 </CardHeader>
@@ -546,14 +617,20 @@ export default function JSDocCheatsheet() {
                           <div key={section.id} className="space-y-1">
                             <Button
                               variant={isActive ? "secondary" : "ghost"}
-                              className={`w-full justify-between gap-2 ${
+                              className={`w-full justify-between gap-2 transition-all duration-200 ${
                                 isActive
-                                  ? "bg-sidebar-primary text-sidebar-primary-foreground hover:bg-sidebar-primary/90"
+                                  ? "bg-sidebar-primary text-sidebar-primary-foreground hover:bg-sidebar-primary/90 shadow-sm"
-                                  : "text-sidebar-foreground hover:bg-sidebar-accent/10"
+                                  : "text-sidebar-foreground hover:bg-sidebar-accent/10 hover:text-foreground"
                               }`}
                               onClick={() => {
                                 setActiveSection(section.id)
                                 toggleSection(section.id)
+                                const element = document.getElementById(`section-${section.id}`)
+                                if (element) {
+                                  setIsScrolling(true)
+                                  element.scrollIntoView({ behavior: "smooth", block: "start" })
+                                  setTimeout(() => setIsScrolling(false), 1000)
+                                }
                               }}
                             >
                               <div className="flex items-center gap-2">
@@ -561,21 +638,21 @@ export default function JSDocCheatsheet() {
                                 {section.title}
                               </div>
                               <ChevronRight
-                                className={`h-4 w-4 transition-transform ${isExpanded ? "rotate-90" : ""}`}
+                                className={`h-4 w-4 transition-transform duration-200 ${isExpanded ? "rotate-90" : ""}`}
                               />
                             </Button>
 
                             {isExpanded && section.subsections && (
-                              <div className="ml-6 space-y-1">
+                              <div className="ml-6 space-y-1 animate-in slide-in-from-left-2 duration-200">
                                 {section.subsections.map((subsection) => (
                                   <Button
                                     key={subsection}
                                     variant="ghost"
                                     size="sm"
-                                    className="w-full justify-start text-xs text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/5"
+                                    className="w-full justify-start text-xs text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/10 transition-all duration-150 hover:translate-x-1"
                                     onClick={() => scrollToTag(subsection)}
                                   >
-                                    {subsection}
+                                    <span className="truncate">{subsection}</span>
                                   </Button>
                                 ))}
                               </div>
@@ -604,17 +681,17 @@ export default function JSDocCheatsheet() {
               </div>
 
               {/* Content Cards */}
-              <div className="grid gap-6">
+              <div className="grid gap-6" id={`section-${activeSection}`}>
                 {jsdocData[activeSection as keyof typeof jsdocData]?.items.map((item, index) => (
                   <Card
                     key={index}
                     id={item.tag.replace("@", "").replace(/[^a-zA-Z0-9]/g, "-")}
-                    className="border-border hover:shadow-lg transition-shadow hover:border-primary/50"
+                    className="border-border hover:shadow-lg transition-all duration-300 hover:border-primary/50 hover:shadow-primary/5"
                   >
                     <CardHeader className="pb-3">
                       <div className="flex items-center justify-between">
                         <CardTitle className="text-xl text-foreground flex items-center gap-2">
-                          <Badge variant="secondary" className="bg-primary text-primary-foreground">
+                          <Badge variant="secondary" className="bg-primary text-primary-foreground font-mono">
                             {item.tag}
                           </Badge>
                         </CardTitle>
@@ -625,19 +702,17 @@ export default function JSDocCheatsheet() {
                       {/* Syntax */}
                       <div>
                         <h4 className="font-semibold text-foreground mb-2">Syntax:</h4>
-                        <code className="block bg-muted text-muted-foreground p-3 rounded-md text-sm font-mono">
+                        <code className="block bg-muted text-muted-foreground p-3 rounded-md text-sm font-mono border border-border">
                           {item.syntax}
                         </code>
                       </div>
 
                       <Separator />
 
-                      {/* Example */}
+                      {/* Example with Syntax Highlighting */}
                       <div>
                         <h4 className="font-semibold text-foreground mb-2">Example:</h4>
-                        <pre className="bg-card text-card-foreground p-4 rounded-md text-sm font-mono overflow-x-auto border border-border">
+                        <SyntaxHighlighter code={item.example} />
-                          <code>{item.example}</code>
-                        </pre>
                       </div>
                     </CardContent>
                   </Card>