feat: add scroll-to-top button on dashboard

src/app/dashboard/layout.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import type { ReactNode } from "react";
+import { ScrollToTop } from "@/components/ScrollToTop";
 
 async function hasActiveSession(fetcher: typeof window.fetch) {
   try {
@@ -122,6 +123,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
     <>
       {showTokenBanner && <TokenRevokedBanner onReauthenticate={handleReauthenticate} />}
       {children}
+      <ScrollToTop />
     </>
   );
-}
+}

src/components/ScrollToTop.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { ArrowUp } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export function ScrollToTop() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      setIsVisible(window.scrollY > 400);
+    };
+
+    window.addEventListener("scroll", toggleVisibility);
+    return () => window.removeEventListener("scroll", toggleVisibility);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <button
+      onClick={scrollToTop}
+      aria-label="Scroll to top"
+      className={cn(
+        "fixed bottom-6 right-6 z-50 p-3 rounded-full",
+        "bg-primary text-primary-foreground shadow-lg",
+        "hover:scale-105 active:scale-95",
+        "transition-all duration-300 ease-in-out",
+        "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+        isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4 pointer-events-none"
+      )}
+    >
+      <ArrowUp className="h-5 w-5" />
+    </button>
+  );
+}