web: add success/failure toast for copy button on profile pages

[ShantKhatri]

Summary

Extend the copy button task to provide user feedback with accessible toast state.

Tasks

• implement let toastMessage = '' state at top of +page.svelte.
• show a visible message for 3 seconds after copy.
• include an accessible aria-live='polite' region.

Acceptance Criteria

• feedback appears for success/failure.
• no console errors.

[parthpatidar03]

Hi @ShantKhatri ,

I am a GSSoC contributor and would like to work on this issue. I have gone through the issue details and would be happy to contribute.

Could you please assign this issue to me?

Thank you!

[ShantKhatri]

Hi @ShantKhatri ,

I am a GSSoC contributor and would like to work on this issue. I have gone through the issue details and would be happy to contribute.

Could you please assign this issue to me?

Thank you!

Have assigned you another issue for now. Thanks for your interest, but once you can have PR for the assigned issue, and if it's from good first issue, then after that you can pick the non-good first too, and that's recommended.

Happy to assist further.

[Dhrupad-05]

Hi @ShantKhatri , I’d like to work on this issue under GSSoC’26.

Proposed Implementation:

• Add a local toastMessage state in apps/web/src/routes/u/[username]/+page.svelte.
• Display a visible success/failure feedback message after the copy action and automatically clear it after 3 seconds using setTimeout.
• Include an accessible aria-live="polite" region so screen readers can announce the feedback message properly.
• Ensure graceful handling for Clipboard API failures and avoid any console errors during execution.

I’ll make sure the implementation integrates cleanly with the existing UI and maintains accessibility standards. Kindly assign this issue to me.

[ShantKhatri]

Hi @ShantKhatri , I’d like to work on this issue under GSSoC’26.

Proposed Implementation:

• Add a local toastMessage state in apps/web/src/routes/u/[username]/+page.svelte.
• Display a visible success/failure feedback message after the copy action and automatically clear it after 3 seconds using setTimeout.
• Include an accessible aria-live="polite" region so screen readers can announce the feedback message properly.
• Ensure graceful handling for Clipboard API failures and avoid any console errors during execution.

I’ll make sure the implementation integrates cleanly with the existing UI and maintains accessibility standards. Kindly assign this issue to me.

Have assigned you another issue for now. Thanks for your interest, but once you can have PR for the assigned issue, and if it's from good first issue, then after that you can pick the non-good first too, and that's recommended.

Happy to assist further.

[Dipti45sktech]

Hi @ShantKhatri I'd like to work on this, if you could assign it to me.
I'll add a toastMessage state variable at the top of +page.svelte, trigger it on copy success/failure with an auto-clear timeout of 3 seconds, and wrap it in an aria-live="polite" region for screen reader accessibility. No console errors and clean dismiss behavior included.
Thankyou.

[Mehak2513kaur]

Hi, I would like to work on this issue under GSSoC'26.