feat: enhance JSDoc cheatsheet with quick reference section and improve layout

Add a dedicated quick reference section to the JSDoc cheatsheet, streamline the layout for better readability, and adjust sidebar and table of contents styles for consistency.

components/TableOfContents.tsx

@@ -21,6 +21,27 @@ export default function TableOfContents({ items, className = "" }: TableOfConten
   const [activeId, setActiveId] = useState<string>("")
   const [isVisible, setIsVisible] = useState(false)
 
+  // Read initial hash from URL on mount
+  useEffect(() => {
+    const hash = window.location.hash.slice(1) // Remove the # symbol
+    if (hash && items.some(item => item.id === hash)) {
+      setActiveId(hash)
+    }
+  }, [items])
+
+  // Listen for hash changes
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1) // Remove the # symbol
+      if (hash && items.some(item => item.id === hash)) {
+        setActiveId(hash)
+      }
+    }
+
+    window.addEventListener('hashchange', handleHashChange)
+    return () => window.removeEventListener('hashchange', handleHashChange)
+  }, [items])
+
   useEffect(() => {
     if (items.length === 0) return
 
@@ -34,6 +55,10 @@ export default function TableOfContents({ items, className = "" }: TableOfConten
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
             setActiveId(entry.target.id)
+            // Update URL hash when scrolling to a section
+            if (window.location.hash !== `#${entry.target.id}`) {
+              window.history.replaceState(null, '', `#${entry.target.id}`)
+            }
           }
         })
       },
@@ -69,6 +94,10 @@ export default function TableOfContents({ items, className = "" }: TableOfConten
   const scrollToSection = (id: string) => {
     const element = document.getElementById(id)
     if (element) {
+      // Update URL hash immediately
+      window.history.pushState(null, '', `#${id}`)
+      setActiveId(id)
+      
       // Get the actual header height dynamically
       const header = document.querySelector('header')
       const headerHeight = header ? header.offsetHeight + 20 : 100 // 20px buffer
@@ -87,8 +116,8 @@ export default function TableOfContents({ items, className = "" }: TableOfConten
   if (!isVisible) return null
 
   return (
-    <aside className={`w-72 bg-gradient-to-b from-card/95 to-card/90 backdrop-blur-sm border-l border-border/50 fixed right-0 top-16 h-[calc(100vh-4rem)] z-40 overflow-y-auto hidden xl:block shadow-2xl ${className}`}>
-      <div className="p-6">
+    <aside className={`w-72 fixed right-0 top-16 h-[calc(100vh-4rem)] z-40 overflow-y-auto hidden xl:block ${className}`}>
+      <div className="p-2">
         <Card className="bg-card/80 border-border/30 shadow-lg backdrop-blur-sm">
           <CardHeader className="pb-4 border-b border-border/20">
             <CardTitle className="text-base text-foreground flex items-center gap-3 font-semibold">