Merge pull request #2 from hamster1963/main

sync

package.json

@@ -12,7 +12,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@fontsource/inter": "^5.1.0",
+    "@fontsource/inter": "^5.1.1",
     "@heroicons/react": "^2.2.0",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-checkbox": "^1.1.3",
@@ -42,7 +42,7 @@
     "prettier-plugin-tailwindcss": "^0.6.9",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-i18next": "^15.2.0",
+    "react-i18next": "^15.4.0",
     "react-router-dom": "^7.1.1",
     "recharts": "^2.15.0",
     "sonner": "^1.7.1",
@@ -51,7 +51,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.10.3",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react-swc": "^3.7.2",
@@ -63,7 +63,7 @@
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.6.3",
-    "typescript-eslint": "^8.18.2",
+    "typescript-eslint": "^8.19.0",
     "vite": "^6.0.6"
   }
 }

src/components/GroupSwitch.tsx

@@ -1,5 +1,6 @@
 import { cn } from "@/lib/utils"
 import { m } from "framer-motion"
+import { createRef, useEffect, useRef } from "react"
 
 export default function GroupSwitch({
   tabs,
@@ -13,16 +14,52 @@ export default function GroupSwitch({
   const customBackgroundImage =
     // @ts-expect-error CustomBackgroundImage is a global variable
     (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
+
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const tagRefs = useRef(tabs.map(() => createRef<HTMLDivElement>()))
+
+  useEffect(() => {
+    const container = scrollRef.current
+    if (!container) return
+
+    const isOverflowing = container.scrollWidth > container.clientWidth
+    if (!isOverflowing) return
+
+    const onWheel = (e: WheelEvent) => {
+      e.preventDefault()
+      container.scrollLeft += e.deltaY
+    }
+
+    container.addEventListener("wheel", onWheel, { passive: false })
+
+    return () => {
+      container.removeEventListener("wheel", onWheel)
+    }
+  }, [])
+
+  useEffect(() => {
+    const currentTagRef = tagRefs.current[tabs.indexOf(currentTab)]
+
+    if (currentTagRef && currentTagRef.current) {
+      currentTagRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      })
+    }
+  }, [currentTab])
+
   return (
-    <div className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]">
+    <div ref={scrollRef} className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]">
       <div
         className={cn("flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800", {
           "bg-stone-100/70 dark:bg-stone-800/70": customBackgroundImage,
         })}
       >
-        {tabs.map((tab: string) => (
+        {tabs.map((tab: string, index: number) => (
           <div
             key={tab}
+            ref={tagRefs.current[index]}
             onClick={() => setCurrentTab(tab)}
             className={cn(
               "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",