Add "Copy to Clipboard" Button for Prompts

[protocolus]

Problem Statement

Currently, users need to manually select and copy prompt content when they want to use it in Claude, Claude Code, or other LLMs. This creates unnecessary friction in the workflow, especially when working with longer prompts or when frequently switching between prompts.

Proposed Solution

Implement a one-click copy functionality that allows users to quickly copy prompt content to their clipboard with visual feedback confirming the action.

Feature Specification

Core Functionality

• Add a "Copy" button to each prompt in both list and detail views
• Copy the prompt's main content (excluding metadata) to clipboard on click
• Provide visual feedback when content is successfully copied
• Handle errors gracefully if clipboard access fails

Implementation Details

1. UI Components

• Add a copy icon button (suggested: clipboard icon from existing icon set or inline SVG)
• Position: top-right corner of prompt cards in list view, and near the title in detail view
• Style: Subtle by default, more prominent on hover
• Accessibility: Include proper ARIA labels and keyboard support

2. Technical Implementation

// Example implementation
const copyToClipboard = async (promptContent) => {
  try {
    await navigator.clipboard.writeText(promptContent);
    showToast('Copied to clipboard!');
  } catch (err) {
    // Fallback for older browsers
    const textArea = document.createElement('textarea');
    textArea.value = promptContent;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
    showToast('Copied to clipboard!');
  }
};

3. User Feedback

• Show "Copied!" confirmation for 2 seconds
• Use a toast notification or tooltip near the button
• Consider adding a subtle animation (e.g., checkmark replacing the copy icon briefly)

Acceptance Criteria

• Copy button appears on all prompt views
• Clicking the button copies the prompt content to clipboard
• Visual confirmation appears after successful copy
• Feature works across modern browsers (Chrome, Firefox, Safari, Edge)
• Keyboard shortcut implemented (Ctrl/Cmd + K when prompt is focused)
• Graceful fallback for browsers without Clipboard API support
• WCAG 2.1 AA accessibility compliance

Benefits

• Improved UX: Reduces friction in the primary use case of copying prompts
• Time-saving: Eliminates manual selection, especially for long prompts
• Professional feel: Standard feature expected in modern web applications
• Accessibility: Helps users with motor difficulties who find precise text selection challenging

Resources

• [MDN Clipboard API Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)
• [React Copy to Clipboard examples](https://www.npmjs.com/package/react-copy-to-clipboard)

[protocolus]

🤖 Automated Issue Analysis

Hi! I've automatically analyzed this issue using Claude Code. Here's my assessment:

---

Based on my codebase analysis, here's the complete implementation plan:

Prerequisites

1. No existing toast system - will need to create simple notification component
2. No icon library - will use SVG or Unicode symbols

Step-by-step Approach

1. Create Toast Notification Component

   • Create client/src/components/Toast.js for visual feedback
   • Add CSS animations in App.css

2. Add Copy Function to PromptEditor

   • Modify client/src/components/PromptEditor.js:50-80 (action buttons area)
   • Add copy button next to Save/Delete buttons
   • Implement clipboard API with fallback

3. Add Copy Button to List View (Optional)

   • Modify client/src/components/PromptList.js:20-40 (prompt item rendering)
   • Add small copy icon on hover for quick access

4. Style Copy Buttons

   • Update client/src/App.css
   • Add .copy-button and .toast styles
   • Include hover states and animations

5. Implement Keyboard Shortcut

   • Add event listener in PromptEditor.js
   • Handle Ctrl/Cmd + K for copying current prompt

6. Test Implementation

   • Test in Chrome, Firefox, Safari, Edge
   • Verify fallback for older browsers
   • Check keyboard navigation and screen reader support

Files to Modify

1. client/src/components/PromptEditor.js - Main copy functionality
2. client/src/components/PromptList.js - Optional list view copy buttons
3. client/src/App.css - Styling for buttons and toast
4. client/src/components/Toast.js - New notification component (create)

Testing Strategy

1. Functional Testing

   • Copy works with content containing special characters
   • Copy works with very long prompts
   • Keyboard shortcut functions correctly
   • Toast appears and disappears properly

2. Browser Testing

   • Modern browsers: Clipboard API
   • Older browsers: execCommand fallback
   • Mobile browsers: Touch interaction

3. Accessibility Testing

   • Screen reader announces copy action
   • Keyboard navigation works
   • Focus management is correct

Potential Risks

1. Browser Permissions: Some browsers may block clipboard access without user interaction
2. Mobile Compatibility: Touch events may need special handling
3. Performance: Avoid re-renders when showing toast notifications
4. Security: Clipboard API requires HTTPS in some browsers (not an issue for localhost development)

STEP 5: Questions and Clarifications

1. Copy Content Scope: Should the copy button include YAML frontmatter or just the prompt content? The issue mentions "excluding metadata" but frontmatter could be considered part of the prompt.

2. Multiple Copy Options: Would you prefer separate buttons for:

   • Copy prompt content only
   • Copy with frontmatter
   • Copy as markdown

3. List View Implementation: Should copy buttons appear in the prompt list sidebar, or only in the editor view?

4. Toast Position: Where should the "Copied!" notification appear? (top-right, bottom-center, near button?)

5. Icon Preference: Since no icon library is installed, would you prefer:

   • SVG inline icon
   • Unicode symbol (📋)
   • Text-only button ("Copy")

6. Keyboard Shortcut: The issue suggests Ctrl/Cmd + K, but should this work globally or only when a prompt is focused/selected?

---

This analysis was generated automatically by the PromptForge issue watcher. The suggestions above are AI-generated and should be reviewed by a human maintainer.

Issue analyzed at: 2025-06-16 00:25:50 UTC

[protocolus]

Thanks for the detailed analysis! Here are my answers to your questions:

1. Copy Content Scope: Just the prompt content (the markdown body after the frontmatter). Users typically want to paste the prompt directly into Claude or other LLMs without the metadata.

2. Multiple Copy Options: Let's keep it simple for now - just one copy button that copies the prompt content only. We can always add more options later if users request them.

3. List View Implementation: Let's start with just the editor view for now. The list view can be a future enhancement if needed.

4. Toast Position: Bottom-center would be ideal - it's non-intrusive but still noticeable.

5. Icon Preference: An inline SVG would be best for consistency and scalability. Here's a simple clipboard icon you can use:

<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
  <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
</svg>

6. Keyboard Shortcut: Only when the prompt editor is focused/active. Global shortcuts could interfere with browser functionality.

Feel free to proceed with the implementation based on these specifications. The step-by-step approach you outlined looks great!