From bd591aab93dabb31aba6c3cc4e7e95c5f79fbe85 Mon Sep 17 00:00:00 2001
From: KGFCH2 <babinbid05@gmail.com>
Date: Fri, 15 May 2026 17:06:38 +0530
Subject: [PATCH] feat: add smooth scroll-to-top component

---
 apps/web/package.json                         |  3 +-
 .../web/src/lib/components/ScrollToTop.svelte | 67 +++++++++++++++++++
 apps/web/src/routes/+layout.svelte            |  2 +
 pnpm-lock.yaml                                | 13 ++++
 4 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/lib/components/ScrollToTop.svelte

diff --git a/apps/web/package.json b/apps/web/package.json
index 3601215..bbc0f02 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,7 +12,8 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"dependencies": {
-		"@devcard/shared": "workspace:*"
+		"@devcard/shared": "workspace:*",
+		"lucide-svelte": "^1.0.1"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^7.0.0",
diff --git a/apps/web/src/lib/components/ScrollToTop.svelte b/apps/web/src/lib/components/ScrollToTop.svelte
new file mode 100644
index 0000000..f795f99
--- /dev/null
+++ b/apps/web/src/lib/components/ScrollToTop.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { ArrowUp } from 'lucide-svelte';
+
+  let visible = $state(false);
+
+  function handleScroll() {
+    visible = window.scrollY > 400;
+  }
+
+  function scrollToTop() {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+
+  onMount(() => {
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  });
+</script>
+
+{#if visible}
+  <button
+    class="scroll-to-top"
+    onclick={scrollToTop}
+    aria-label="Scroll to top"
+    title="Scroll to top"
+  >
+    <ArrowUp size={24} />
+  </button>
+{/if}
+
+<style>
+  .scroll-to-top {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    background: var(--bg-card);
+    color: var(--primary);
+    border: 1px solid var(--border);
+    border-radius: 50%;
+    width: 3.5rem;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    z-index: 50;
+    transition: all 0.3s ease;
+  }
+
+  .scroll-to-top:hover {
+    transform: translateY(-4px);
+    background: var(--primary);
+    color: white;
+    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3);
+  }
+
+  @media (max-width: 600px) {
+    .scroll-to-top {
+      bottom: 1.5rem;
+      right: 1.5rem;
+      width: 3rem;
+      height: 3rem;
+    }
+  }
+</style>
diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
index ac6dd12..0b666d0 100644
--- a/apps/web/src/routes/+layout.svelte
+++ b/apps/web/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script>
   import '../app.css';
+  import ScrollToTop from '$lib/components/ScrollToTop.svelte';
   let { children } = $props();
 </script>
 
@@ -9,3 +10,4 @@
 </svelte:head>
 
 {@render children()}
+<ScrollToTop />
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2637abe..6c366d6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -193,6 +193,9 @@ importers:
       '@devcard/shared':
         specifier: workspace:*
         version: link:../../packages/shared
+      lucide-svelte:
+        specifier: ^1.0.1
+        version: 1.0.1(svelte@5.53.10)
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^7.0.0
@@ -1925,6 +1928,7 @@ packages:
 
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+    deprecated: Potential CWE-502 - Update to 1.3.1 or higher
 
   '@vitest/expect@2.1.9':
     resolution: {integrity: sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==}
@@ -3701,6 +3705,11 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucide-svelte@1.0.1:
+    resolution: {integrity: sha512-WvzZgk0pqzgda+AErLvgWxHkfg/+GgUwqKMRHvzt0IqyMdmyEDzDCk3Z+Wo/3y753oIgx8u9Q4eUbWkghFa8Jg==}
+    peerDependencies:
+      svelte: ^3 || ^4 || ^5.0.0-next.42
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -9449,6 +9458,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucide-svelte@1.0.1(svelte@5.53.10):
+    dependencies:
+      svelte: 5.53.10
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5