From 1ab044347ea38e9b27565c056da70021449db9f5 Mon Sep 17 00:00:00 2001
From: Rashi Bajpai <bajpairashi1404@gmail.com>
Date: Wed, 17 Jun 2026 02:43:58 +0530
Subject: [PATCH] feat: add scroll-to-top button on dashboard

---
 src/app/dashboard/layout.tsx   |  4 +++-
 src/components/ScrollToTop.tsx | 42 ++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ScrollToTop.tsx

diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index 541e7459e..315c9e7f0 100644
--- a/src/app/dashboard/layout.tsx
+++ b/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 />
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx
new file mode 100644
index 000000000..8d30fe41b
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file