feat(web): add scroll position restoration for changelog sidebar (#2166)

* feat(web): add scroll position restoration for changelog sidebar

- Create useScrollRestoration hook for nested scrollable containers
- Apply hook to changelog sidebar to restore scroll position when navigating between versions
- TanStack Router's scrollRestoration only handles window scroll, this hook handles nested containers

Co-Authored-By: yujonglee <[email protected]>

* refactor(web): use resetScroll: false pattern for changelog navigation

- Replace custom useScrollRestoration hook with useNavigate resetScroll: false
- Follow the same pattern used in about.tsx and brand.tsx
- Remove unused useScrollRestoration hook file
- Convert Link to button with navigate for proper scroll handling

Co-Authored-By: yujonglee <[email protected]>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: yujonglee <[email protected]>

Author: devin-ai-integration[bot]

apps/web/src/routes/_view/changelog/$slug.tsx

@@ -1,6 +1,6 @@
 import { MDXContent } from "@content-collections/mdx/react";
 import { Icon } from "@iconify-icon/react";
-import { createFileRoute, Link, notFound } from "@tanstack/react-router";
+import { createFileRoute, notFound, useNavigate } from "@tanstack/react-router";
 import { ChevronDown, ChevronLeft, ChevronRight, Menu, X } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useState } from "react";
@@ -402,6 +402,7 @@ function ChangelogSidebar({
   allChangelogs: ChangelogWithMeta[];
   onNavigate?: () => void;
 }) {
+  const navigate = useNavigate({ from: Route.fullPath });
   const [currentPage, setCurrentPage] = useState(0);
 
   const versionGroups = groupVersions(allChangelogs);
@@ -422,6 +423,15 @@ function ChangelogSidebar({
     }
   };
 
+  const handleVersionClick = (slug: string) => {
+    navigate({
+      to: "/changelog/$slug",
+      params: { slug },
+      resetScroll: false,
+    });
+    onNavigate?.();
+  };
+
   return (
     <div className="h-full flex flex-col">
       <div className="flex-1 p-4 overflow-y-auto">
@@ -440,13 +450,11 @@ function ChangelogSidebar({
                     : "/api/images/icons/stable-icon.png";
 
                   return (
-                    <Link
+                    <button
                       key={version.slug}
-                      to="/changelog/$slug"
-                      params={{ slug: version.slug }}
-                      onClick={onNavigate}
+                      onClick={() => handleVersionClick(version.slug)}
                       className={cn([
-                        "bg-stone-50 border rounded-lg p-3 hover:border-stone-400 hover:bg-stone-100 transition-colors flex items-center gap-3",
+                        "w-full bg-stone-50 border rounded-lg p-3 hover:border-stone-400 hover:bg-stone-100 transition-colors flex items-center gap-3 cursor-pointer",
                         version.slug === changelog.slug
                           ? "border-stone-600 bg-stone-100"
                           : "border-neutral-200",
@@ -461,15 +469,15 @@ function ChangelogSidebar({
                           className="w-10 h-10"
                         />
                       </div>
-                      <div className="flex-1 min-w-0">
+                      <div className="flex-1 min-w-0 text-left">
                         <p className="text-sm font-medium text-stone-600 truncate">
                           v{version.version}
                         </p>
                         <p className="text-xs text-neutral-500">
                           {isPrerelease ? "Nightly" : "Stable"}
                         </p>
                       </div>
-                    </Link>
+                    </button>
                   );
                 })}
               </div>