Feat: Add Copy Story Button for Easy Content Sharing (#168)

[Sumitsutharss]

🏷️ PR Type

• ✨ Feature

🔗 Related Issue

Closes #168

---

📝 Rationale / Motivation

Currently, users can view, edit, delete, and fix grammar for their stories, but there is no quick way to copy story content for reuse, sharing, or backup purposes.

This enhancement adds a Copy Story button that allows users to instantly copy story content to their clipboard with a single click.

---

✨ Description of Changes

Frontend

• Added a Copy button alongside existing story action buttons
• Added Clipboard API integration using navigator.clipboard.writeText()
• Added success toast notification when content is copied successfully
• Added error toast notification when copy fails
• Added Clipboard API availability check
• Improved responsive layout by replacing space-x-3 with flex-wrap gap-3 to prevent overflow on smaller screens

Files Modified

• src/pages/ShareStory.tsx

---

🧪 Testing Instructions

1. Login and navigate to the Share Story page.
2. Scroll to the "Your Stories" section.
3. Click the Copy button on any story.
4. Verify that a success toast appears.
5. Paste the copied content into a text editor using Ctrl + V.
6. Verify the story content is copied correctly.
7. Test on smaller screen sizes and ensure action buttons wrap correctly.

---

👀 Impact Assessment

• Improves user experience and accessibility
• No backend changes
• No database schema changes
• No breaking changes
• Mobile responsive

---

🖼️ Screenshots

---

⚡ Checklist

• Code follows project guidelines
• Changes tested locally
• Related issue linked
• User-facing changes documented
• No new warnings/errors introduced
• Production build passes successfully

[netlify]

✅ Deploy Preview for safevoiceforwomen ready!

Name	Link
🔨 Latest commit	62e4342
🔍 Latest deploy log	https://app.netlify.com/projects/safevoiceforwomen/deploys/6a2492fc2b2c230008fa7000
😎 Deploy Preview	https://deploy-preview-175--safevoiceforwomen.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.