From 4b03480a16dd413f01fa638c91a34cc4e7bae14e Mon Sep 17 00:00:00 2001
From: Sarthak Doshi <sarthak.doshi@greenstory.io>
Date: Sun, 10 May 2026 23:47:39 +0530
Subject: [PATCH 1/2] feat: add copy toast feedback on profile pages (issue
 #20)

- u/[username]/+page.svelte: detect platforms with followStrategy='copy'
  (Discord, etc.) and render a <button> instead of <a>; clicking copies
  the username to clipboard and shows a 3-second toast
- devcard/[id]/+page.svelte: update handlePlatformClick to check
  followStrategy and copy to clipboard for 'copy' platforms instead of
  window.open
- Both pages include:
  - aria-live="polite" + aria-atomic="true" hidden region for screen readers
  - Visible toast with role="status" rendered for 3 seconds on success/failure
  - Failure path shows "Failed to copy" message when Clipboard API is unavailable

Closes #20
---
 apps/web/src/routes/devcard/[id]/+page.svelte |  64 +++++++++-
 apps/web/src/routes/u/[username]/+page.svelte | 114 +++++++++++++++---
 2 files changed, 160 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/routes/devcard/[id]/+page.svelte b/apps/web/src/routes/devcard/[id]/+page.svelte
index a38073f..1bfd3e0 100644
--- a/apps/web/src/routes/devcard/[id]/+page.svelte
+++ b/apps/web/src/routes/devcard/[id]/+page.svelte
@@ -1,7 +1,12 @@
 <script lang="ts">
+	import { PLATFORMS } from '@devcard/shared';
+
 	let { data } = $props();
 	const card = $derived(data.card);
 
+	let toastMessage = $state('');
+	let toastTimer: ReturnType<typeof setTimeout> | null = null;
+
 	function getPlatformColor(platform: string) {
 		const colors: Record<string, string> = {
 			github: '#181717',
@@ -10,13 +15,30 @@
 			instagram: '#E4405F',
 			youtube: '#FF0000',
 			devto: '#0A0A0A',
-			hashnode: '#2962FF'
+			hashnode: '#2962FF',
+			discord: '#5865F2',
 		};
 		return colors[platform.toLowerCase()] || '#6366F1';
 	}
 
-	function handlePlatformClick(link: any) {
-		window.open(link.url, '_blank');
+	function showToast(message: string) {
+		toastMessage = message;
+		if (toastTimer) clearTimeout(toastTimer);
+		toastTimer = setTimeout(() => { toastMessage = ''; }, 3000);
+	}
+
+	async function handlePlatformClick(link: any) {
+		const platform = PLATFORMS[link.platform];
+		if (platform?.followStrategy === 'copy') {
+			try {
+				await navigator.clipboard.writeText(link.username);
+				showToast('Copied to clipboard!');
+			} catch {
+				showToast('Failed to copy. Please copy manually.');
+			}
+		} else {
+			window.open(link.url, '_blank');
+		}
 	}
 </script>
 
@@ -101,6 +123,13 @@
 	</div>
 </div>
 
+<!-- Accessible live region for copy feedback -->
+<div aria-live="polite" aria-atomic="true" class="sr-only">{toastMessage}</div>
+
+{#if toastMessage}
+	<div class="toast" role="status">{toastMessage}</div>
+{/if}
+
 <style>
 	:global(body) {
 		margin: 0;
@@ -334,4 +363,33 @@
 		text-decoration: none;
 		font-weight: 600;
 	}
+
+	.toast {
+		position: fixed;
+		bottom: 1.5rem;
+		left: 50%;
+		transform: translateX(-50%);
+		background: #1e293b;
+		color: #f8fafc;
+		border: 1px solid #334155;
+		border-radius: 8px;
+		padding: 0.625rem 1.25rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+		z-index: 1000;
+		pointer-events: none;
+	}
+
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
 </style>
diff --git a/apps/web/src/routes/u/[username]/+page.svelte b/apps/web/src/routes/u/[username]/+page.svelte
index f7750ec..43bceab 100644
--- a/apps/web/src/routes/u/[username]/+page.svelte
+++ b/apps/web/src/routes/u/[username]/+page.svelte
@@ -12,6 +12,24 @@
     leetcode: '#FFA116', hackerrank: '#00EA64', discord: '#5865F2',
     telegram: '#26A5E4', email: '#EA4335', portfolio: '#6366F1', custom: '#8B5CF6',
   };
+
+  let toastMessage = $state('');
+  let toastTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function showToast(message: string) {
+    toastMessage = message;
+    if (toastTimer) clearTimeout(toastTimer);
+    toastTimer = setTimeout(() => { toastMessage = ''; }, 3000);
+  }
+
+  async function handleCopy(text: string) {
+    try {
+      await navigator.clipboard.writeText(text);
+      showToast('Copied to clipboard!');
+    } catch {
+      showToast('Failed to copy. Please copy manually.');
+    }
+  }
 </script>
 
 <svelte:head>
@@ -66,21 +84,39 @@
         {#each profile.links as link}
           {@const platform = PLATFORMS[link.platform]}
           {@const color = platformColors[link.platform] || '#6366f1'}
-          <a
-            href={link.url || getProfileUrl(link.platform, link.username)}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="platform-tile"
-          >
-            <div class="tile-icon" style="background: {color}">
-              {platform?.name.charAt(0) || '?'}
-            </div>
-            <div class="tile-info">
-              <span class="tile-name">{platform?.name || link.platform}</span>
-              <span class="tile-username">{link.username}</span>
-            </div>
-            <span class="tile-arrow">→</span>
-          </a>
+          {@const isCopy = platform?.followStrategy === 'copy'}
+          {#if isCopy}
+            <button
+              class="platform-tile"
+              onclick={() => handleCopy(link.username)}
+              aria-label="Copy {platform?.name || link.platform} username to clipboard"
+            >
+              <div class="tile-icon" style="background: {color}">
+                {platform?.name.charAt(0) || '?'}
+              </div>
+              <div class="tile-info">
+                <span class="tile-name">{platform?.name || link.platform}</span>
+                <span class="tile-username">{link.username}</span>
+              </div>
+              <span class="tile-arrow">⎘</span>
+            </button>
+          {:else}
+            <a
+              href={link.url || getProfileUrl(link.platform, link.username)}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="platform-tile"
+            >
+              <div class="tile-icon" style="background: {color}">
+                {platform?.name.charAt(0) || '?'}
+              </div>
+              <div class="tile-info">
+                <span class="tile-name">{platform?.name || link.platform}</span>
+                <span class="tile-username">{link.username}</span>
+              </div>
+              <span class="tile-arrow">→</span>
+            </a>
+          {/if}
         {/each}
       </div>
     </div>
@@ -95,6 +131,13 @@
       Powered by <a href="/">DevCard</a> — Open Source Developer Profiles
     </footer>
   </main>
+
+  <!-- Accessible live region for copy feedback -->
+  <div aria-live="polite" aria-atomic="true" class="sr-only">{toastMessage}</div>
+
+  {#if toastMessage}
+    <div class="toast" role="status">{toastMessage}</div>
+  {/if}
 {/if}
 
 <style>
@@ -302,4 +345,45 @@
     .profile-page { padding: 1rem 0.75rem; }
     .display-name { font-size: 1.5rem; }
   }
+
+  /* Copy button — matches anchor tile styles */
+  button.platform-tile {
+    background: none;
+    border: 1px solid var(--border);
+    cursor: pointer;
+    font: inherit;
+    text-align: left;
+    width: 100%;
+  }
+
+  /* Toast notification */
+  .toast {
+    position: fixed;
+    bottom: 1.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #1e293b;
+    color: #f8fafc;
+    border: 1px solid #334155;
+    border-radius: 8px;
+    padding: 0.625rem 1.25rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    pointer-events: none;
+  }
+
+  /* Visually hidden but available to screen readers */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
 </style>

From c5454423835b37cd071cb635f3a35fa65298c443 Mon Sep 17 00:00:00 2001
From: Sarthak Doshi <sarthak.doshi@greenstory.io>
Date: Mon, 11 May 2026 00:13:47 +0530
Subject: [PATCH 2/2] fix: onDestroy timer cleanup, single aria-live region,
 button background, noopener on window.open

---
 apps/web/src/routes/devcard/[id]/+page.svelte | 22 +++++-------------
 apps/web/src/routes/u/[username]/+page.svelte | 23 +++++--------------
 2 files changed, 12 insertions(+), 33 deletions(-)

diff --git a/apps/web/src/routes/devcard/[id]/+page.svelte b/apps/web/src/routes/devcard/[id]/+page.svelte
index 1bfd3e0..d86f9d2 100644
--- a/apps/web/src/routes/devcard/[id]/+page.svelte
+++ b/apps/web/src/routes/devcard/[id]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import { PLATFORMS } from '@devcard/shared';
 
 	let { data } = $props();
@@ -37,9 +38,11 @@
 				showToast('Failed to copy. Please copy manually.');
 			}
 		} else {
-			window.open(link.url, '_blank');
+			window.open(link.url, '_blank', 'noopener,noreferrer');
 		}
 	}
+
+	onDestroy(() => { if (toastTimer) clearTimeout(toastTimer); });
 </script>
 
 <svelte:head>
@@ -123,11 +126,8 @@
 	</div>
 </div>
 
-<!-- Accessible live region for copy feedback -->
-<div aria-live="polite" aria-atomic="true" class="sr-only">{toastMessage}</div>
-
 {#if toastMessage}
-	<div class="toast" role="status">{toastMessage}</div>
+	<div class="toast" role="status" aria-live="polite" aria-atomic="true">{toastMessage}</div>
 {/if}
 
 <style>
@@ -381,15 +381,5 @@
 		pointer-events: none;
 	}
 
-	.sr-only {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		padding: 0;
-		margin: -1px;
-		overflow: hidden;
-		clip: rect(0, 0, 0, 0);
-		white-space: nowrap;
-		border: 0;
-	}
+
 </style>
diff --git a/apps/web/src/routes/u/[username]/+page.svelte b/apps/web/src/routes/u/[username]/+page.svelte
index 43bceab..85756e7 100644
--- a/apps/web/src/routes/u/[username]/+page.svelte
+++ b/apps/web/src/routes/u/[username]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onDestroy } from 'svelte';
   import { PLATFORMS, getProfileUrl } from '@devcard/shared';
 
   let { data } = $props();
@@ -30,6 +31,8 @@
       showToast('Failed to copy. Please copy manually.');
     }
   }
+
+  onDestroy(() => { if (toastTimer) clearTimeout(toastTimer); });
 </script>
 
 <svelte:head>
@@ -132,11 +135,8 @@
     </footer>
   </main>
 
-  <!-- Accessible live region for copy feedback -->
-  <div aria-live="polite" aria-atomic="true" class="sr-only">{toastMessage}</div>
-
   {#if toastMessage}
-    <div class="toast" role="status">{toastMessage}</div>
+    <div class="toast" role="status" aria-live="polite" aria-atomic="true">{toastMessage}</div>
   {/if}
 {/if}
 
@@ -348,7 +348,7 @@
 
   /* Copy button — matches anchor tile styles */
   button.platform-tile {
-    background: none;
+    background: var(--bg-elevated);
     border: 1px solid var(--border);
     cursor: pointer;
     font: inherit;
@@ -374,16 +374,5 @@
     pointer-events: none;
   }
 
-  /* Visually hidden but available to screen readers */
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
+
 </style>