feat(table-of-contents): implement scrollable TOC with radix-ui

- Add @radix-ui/react-scroll-area dependency
- Create scroll-area component with custom styling
- Refactor TOC layout to use scroll-area component
- Improve TOC styling and active state transitions
- Apply consistent TOC styling across blog and about layouts

src/components/layout/TableOfContents.astro

@@ -1,5 +1,6 @@
 ---
 import { type Lang } from '@/types';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 interface Props {
   lang: Lang;
@@ -10,18 +11,20 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents';
 ---
 
 <div>
-  <div id="nav-content" class="sticky xl:w-72 w-full top-14 max-h-[calc(100svh-3.5rem)] overflow-x-hidden">
+  <div id="nav-content" class="sticky xl:w-72 w-full top-14">
     <div class="flex flex-col gap-3 p-4">
-      <h3 class="dark:text-zinc-400 text-blacktext/90 font-bold tracking-wide text-sm sm:text-base uppercase flex items-center mb-4">
+      <h3 class="dark:text-zinc-200 text-blacktext font-bold tracking-wide text-sm sm:text-base uppercase flex items-center">
         <svg class="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
         </svg>
         {title}
       </h3>
-      <div class="text-neutral-500 dark:text-neutral-300">
-        <ul id="toc-list" class="leading-relaxed text-sm sm:text-base border-l dark:border-neutral-500/20 border-blacktext/20">
-        </ul>
-      </div>
+      <ScrollArea className="w-full" client:load>
+        <div class="text-neutral-500 dark:text-neutral-300 pr-4">
+          <ul id="toc-list" class="leading-relaxed text-sm sm:text-base border-l dark:border-neutral-500/20 border-blacktext/20 mt-4">
+          </ul>
+        </div>
+      </ScrollArea>
     </div>
   </div>
 </div>
@@ -58,20 +61,20 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents';
       // Apply styling based on heading level
       const level = parseInt(header.tagName.charAt(1));
       link.classList.add(
-        "block", "w-full", "text-left", "py-2", "px-3", "rounded-lg", "text-sm", 
-        "transition-all", "duration-200", "border-l", "border-transparent", 
-        "text-muted-foreground", "hover:text-foreground", "hover:bg-muted/50"
+        "block", "w-full", "text-left", "py-1.5", "px-3", "text-sm", 
+        "transition-all", "duration-200", "border-l-2", "border-transparent", 
+        "text-muted-foreground", "hover:text-foreground", "hover:bg-muted/30"
       );
 
       // Add indentation based on heading level
       if (level === 1) {
         link.classList.add("font-semibold");
       } else if (level === 2) {
-        link.classList.add("ml-3");
+        link.classList.add("ml-2");
       } else if (level === 3) {
-        link.classList.add("ml-6");
+        link.classList.add("ml-4");
       } else if (level === 4) {
-        link.classList.add("ml-9");
+        link.classList.add("ml-6");
       }
 
       li.appendChild(link);
@@ -91,6 +94,7 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents';
 
     /**
      * Set up intersection observer for active section tracking
+     * Only highlights the active section without auto-scrolling
      */
     const observer = new IntersectionObserver(
       (entries) => {
@@ -102,16 +106,16 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents';
             // Remove active state from all links
             document.querySelectorAll("#toc-list a").forEach((el) => {
               el.classList.remove(
-                "bg-purple-500/10", "text-purple-500", "border-l-2", "border-purple-500"
+                "bg-purple-500/10", "text-purple-500", "border-l-purple-500", "font-medium"
               );
-              el.classList.add("text-muted-foreground");
+              el.classList.add("text-muted-foreground", "border-transparent");
             });
 
             // Add active state to current link
             if (link) {
-              link.classList.remove("text-muted-foreground");
+              link.classList.remove("text-muted-foreground", "border-transparent");
               link.classList.add(
-                "bg-purple-500/10", "text-purple-500", "border-l-2", "border-purple-500"
+                "bg-purple-500/10", "text-purple-500", "border-l-purple-500", "font-medium"
               );
             }
           }
@@ -132,10 +136,17 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents';
   /* Additional styling for smooth transitions */
   #toc-list a:hover {
     transform: translateX(2px);
+    background-color: rgba(168, 85, 247, 0.05);
   }
   
   #toc-list a:focus {
-    outline: 2px solid rgba(168, 85, 247, 0.5);
-    outline-offset: 2px;
+    outline: 2px solid rgba(168, 85, 247, 0.3);
+    outline-offset: 1px;
+  }
+
+  /* Smooth transition for active state */
+  #toc-list a {
+    position: relative;
+    transition: all 0.2s ease;
   }
 </style>

src/components/ui/scroll-area.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }