refactor: Migrate documentation content, rebuild UI components, and update core architecture.

components/ScrollToTop.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { ArrowUpIcon } from "lucide-react";
+import { useEffect, useState, useCallback } from "react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+interface ScrollToTopProps {
+  className?: string;
+  showIcon?: boolean;
+  offset?: number; // Optional offset in pixels from the trigger point
+}
+
+export function ScrollToTop({
+  className,
+  showIcon = true,
+  offset = 0
+}: ScrollToTopProps) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const checkScroll = useCallback(() => {
+    // Check local scroll container or document
+    const container = document.getElementById("scroll-container");
+    const scrollY = container ? container.scrollTop : window.scrollY;
+
+    // Calculate 50% of viewport height
+    const halfViewportHeight = window.innerHeight * 0.5;
+    // Check if scrolled past half viewport height (plus any offset)
+    const scrolledPastHalfViewport = scrollY > (halfViewportHeight + offset);
+
+    // Only update state if it changes to prevent unnecessary re-renders
+    if (scrolledPastHalfViewport !== isVisible) {
+      setIsVisible(scrolledPastHalfViewport);
+    }
+  }, [isVisible, offset]);
+
+  useEffect(() => {
+    // Initial check
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    checkScroll();
+
+    // Set up scroll listener with debounce for better performance
+    let timeoutId: NodeJS.Timeout;
+    const handleScroll = () => {
+      if (timeoutId) clearTimeout(timeoutId);
+      timeoutId = setTimeout(checkScroll, 100);
+    };
+
+    const container = document.getElementById("scroll-container") || window;
+    container.addEventListener('scroll', handleScroll, { passive: true });
+
+    // Cleanup
+    return () => {
+      container.removeEventListener('scroll', handleScroll);
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [checkScroll]);
+
+  const scrollToTop = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    const container = document.getElementById("scroll-container");
+    if (container) {
+      container.scrollTo({ top: 0, behavior: 'smooth' });
+    } else {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  }, []);
+
+  if (!isVisible) return null;
+
+  return (
+    <div
+      className={cn(
+        "mt-4 pt-4 border-t border-stone-200 dark:border-stone-800",
+        "transition-opacity duration-300",
+        isVisible ? 'opacity-100' : 'opacity-0',
+        className
+      )}
+    >
+      <Link
+        href="#"
+        onClick={scrollToTop}
+        className={cn(
+          "inline-flex items-center text-sm text-muted-foreground hover:text-foreground",
+          "transition-all duration-200 hover:translate-y-px"
+        )}
+        aria-label="Scroll to top"
+      >
+        {showIcon && <ArrowUpIcon className="mr-1 h-3.5 w-3.5 shrink-0" />}
+        <span>Scroll to Top</span>
+      </Link>
+    </div>
+  );
+}