feat: add copy-to-clipboard toast feedback on profile pages#64
Open
SdSarthak wants to merge 2 commits into
Open
feat: add copy-to-clipboard toast feedback on profile pages#64SdSarthak wants to merge 2 commits into
SdSarthak wants to merge 2 commits into
Conversation
- 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 Dev-Card#20
There was a problem hiding this comment.
Pull request overview
Adds user feedback (success/failure) for “copy to clipboard” platform actions on public profile and devcard pages, including an accessible announcement channel and a visible toast.
Changes:
- Added toast state + 3s auto-dismiss logic and clipboard-copy handlers.
- Updated public profile platform tiles to render a
<button>forfollowStrategy === 'copy'platforms (e.g., Discord). - Updated devcard platform click handling to respect
followStrategy(copy→ clipboard + toast; otherwise open URL).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| apps/web/src/routes/u/[username]/+page.svelte | Renders copy-only platform tiles as buttons; adds clipboard copy + toast UI and styles. |
| apps/web/src/routes/devcard/[id]/+page.svelte | Adds followStrategy handling for platform clicks; adds toast UI and styles. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+349
to
+357
| /* 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%; | ||
| } |
Comment on lines
+135
to
+137
| <!-- Accessible live region for copy feedback --> | ||
| <div aria-live="polite" aria-atomic="true" class="sr-only">{toastMessage}</div> | ||
|
|
Comment on lines
+16
to
+23
| let toastMessage = $state(''); | ||
| let toastTimer: ReturnType<typeof setTimeout> | null = null; | ||
|
|
||
| function showToast(message: string) { | ||
| toastMessage = message; | ||
| if (toastTimer) clearTimeout(toastTimer); | ||
| toastTimer = setTimeout(() => { toastMessage = ''; }, 3000); | ||
| } |
Comment on lines
7
to
+28
| @@ -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); | |||
| } | |||
Comment on lines
+126
to
+130
| <!-- 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> |
| showToast('Failed to copy. Please copy manually.'); | ||
| } | ||
| } else { | ||
| window.open(link.url, '_blank'); |
…und, noopener on window.open
Author
|
All fixed in the follow-up commit:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds success/failure toast feedback for copy-to-clipboard actions on both public profile pages.
Changes
apps/web/src/routes/u/[username]/+page.sveltefollowStrategy === 'copy'(e.g. Discord, which has no profile URL) and renders a<button>tile instead of an<a>linknavigator.clipboard.writeText(username)and shows a toastapps/web/src/routes/devcard/[id]/+page.sveltePLATFORMSfrom@devcard/sharedand checksfollowStrategyinhandlePlatformClick'copy'strategy → clipboard copy + toast; all others →window.open(unchanged)Both pages include:
<div aria-live="polite" aria-atomic="true" class="sr-only">— announces the message to screen readers<div role="status" class="toast">— visible 3-second popup at bottom-center.sr-onlyutility classCloses #20
Test plan