Skip to content

[FEATURE] Add toast notification after copy action #174

@ascender1729

Description

@ascender1729

Description

Show a brief toast/snackbar notification when content is copied to clipboard.

Why Needed

  • Confirms action was successful
  • Standard UX feedback pattern
  • Prevents user uncertainty

Implementation Details

  • Create reusable Toast component
  • Show 'Copied!' message for 2-3 seconds
  • Position at bottom or top of screen
  • Auto-dismiss with fade animation

Files to Create/Modify

  • src/components/shared/Toast.svelte (new)
  • src/lib/toast.ts (toast store)
  • Update copy button components

Code Example

<script>
  import { showToast } from '$lib/toast';
  
  function handleCopy() {
    navigator.clipboard.writeText(url);
    showToast('Copied to clipboard!');
  }
</script>

Acceptance Criteria

  • Toast appears on copy action
  • Auto-dismisses after delay
  • Smooth animation in/out
  • Accessible (aria-live region)

Time Estimates

  • With AI: 100 minutes
  • Without AI: 660 minutes

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type
No fields configured for issues without a type.

Projects

Status
In Progress

Relationships

None yet

Development

No branches or pull requests

Issue actions