From 57a31c92d778b11bb551a4c409b3a5b2d891c387 Mon Sep 17 00:00:00 2001
From: KGFCH2 <babinbid05@gmail.com>
Date: Fri, 15 May 2026 17:03:52 +0530
Subject: [PATCH] feat: add copy profile link functionality with visual
 feedback

---
 apps/web/package.json                         |  3 +-
 apps/web/src/routes/u/[username]/+page.svelte | 55 +++++++++++++++++++
 pnpm-lock.yaml                                | 13 +++++
 3 files changed, 70 insertions(+), 1 deletion(-)

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/routes/u/[username]/+page.svelte b/apps/web/src/routes/u/[username]/+page.svelte
index f7750ec..099a59e 100644
--- a/apps/web/src/routes/u/[username]/+page.svelte
+++ b/apps/web/src/routes/u/[username]/+page.svelte
@@ -1,10 +1,25 @@
 <script lang="ts">
   import { PLATFORMS, getProfileUrl } from '@devcard/shared';
+  import { Copy, Check } from 'lucide-svelte';
 
   let { data } = $props();
   const profile = data.profile;
   const error = data.error;
 
+  let copied = $state(false);
+
+  async function copyLink() {
+    try {
+      await navigator.clipboard.writeText(window.location.href);
+      copied = true;
+      setTimeout(() => {
+        copied = false;
+      }, 2000);
+    } catch (err) {
+      console.error('Failed to copy link:', err);
+    }
+  }
+
   const platformColors: Record<string, string> = {
     github: '#181717', linkedin: '#0A66C2', twitter: '#000000',
     gitlab: '#FC6D26', devfolio: '#3770FF', npm: '#CB3837',
@@ -39,6 +54,18 @@
     <div class="profile-card" style="--accent: {profile.accentColor}">
       <!-- Avatar & Header -->
       <div class="profile-header">
+        <button 
+          class="copy-btn" 
+          onclick={copyLink} 
+          aria-label="Copy profile link"
+          title="Copy profile link"
+        >
+          {#if copied}
+            <Check size={18} class="text-success" />
+          {:else}
+            <Copy size={18} />
+          {/if}
+        </button>
         {#if profile.avatarUrl}
           <img src={profile.avatarUrl} alt={profile.displayName} class="avatar" />
         {:else}
@@ -149,6 +176,34 @@
   .profile-header {
     text-align: center;
     padding: 2.5rem 2rem 1.5rem;
+    position: relative;
+  }
+
+  .copy-btn {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--text-secondary);
+    transition: all 0.2s;
+  }
+
+  .copy-btn:hover {
+    background: var(--bg-card);
+    border-color: var(--primary);
+    color: var(--primary);
+  }
+
+  .text-success {
+    color: #10b981 !important;
   }
 
   .avatar {
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