fix(copy-code): improve error handling and button feedback

[javatcoding1]

---

name: Pull Request
about: Submit changes to the Sugar Labs website for review

📝 Description

Fixed the copy-code utility that was logging unnecessary console errors and showing two buttons side by side when copying code blocks. The solution replaces console error logging with user-friendly visual feedback and transforms the copy button UI to show success/error states within the same button element instead of creating separate message elements.

Key improvements:

• Removed console.error logs that created unnecessary noise during normal usage
• Implemented single button design that transforms from gray "Copy" to green "Copied!" state
• Added proper error handling with visual feedback (red state for failures)
• Cleaned up redundant code and improved performance
• Button now shows clear visual transitions with appropriate icons and colors

🔗 Related Issue

Fixes #493

🔄 Type of Change

• 📱 New Feature (new page, component, or functionality)
• 🎨 UI/UX Update (visual changes, styling improvements)
• 📖 Content Update (text changes, documentation)
• 🐛 Bug Fix
• ⚡ Performance Improvement
• ♿ Accessibility Enhancement
• 🔒 Security Update
• 📦 Dependency Update
• 🧹 Code Refactoring
• 🧪 Test Updates

📷 Visual Changes

Screenshots / GIFs

Before: Two buttons appeared side by side (Copy button + Copied! message)

After: Single button that transforms from gray "Copy" to green "Copied!" state

🧪 Testing Performed

📱 Browser Compatibility

• Chrome (Version: Latest)
• Firefox (Version: Latest)
• Safari (Version: Latest)
• Edge (Version: Latest)
• Mobile Chrome (Device: iPhone/Android)
• Mobile Safari (Device: iPhone)

🖥️ Responsive Design

• Desktop (1200px+)
• Tablet (768px - 1199px)
• Mobile (320px - 767px)

✅ Test Cases

1. Click copy button on code blocks - button transforms to green "Copied!" state
2. Test copy functionality with clipboard API and fallback methods
3. Verify no console errors appear during normal copy operations
4. Test error handling when clipboard access fails
5. Confirm button returns to original state after 2 seconds
6. Test multiple code blocks on same page
7. Verify button disable/enable states work correctly

♿ Accessibility

• Proper heading hierarchy maintained
• ARIA labels added where needed (copy button has proper accessibility attributes)
• Color contrast requirements met (green/red states meet WCAG standards)
• Keyboard navigation works correctly
• Screen reader testing performed (button state changes announced)

📋 PR Checklist

• My code follows the project's coding style guidelines
• I have tested these changes locally
• I have updated the documentation accordingly
• My changes generate no new warnings or console errors
• I have added tests that prove my fix/feature works
• All existing tests pass successfully
• I have checked for and resolved any merge conflicts
• I have optimized images/assets (if applicable)
• I have validated all links are working correctly

💭 Additional Notes

• The solution follows TypeScript conventions with proper camelCase naming
• Used conventional commit message format: fix(copy-code): replace console errors with visual feedback
• Removed approximately 50% of unnecessary code while maintaining all functionality
• Implementation uses proper error handling without polluting the console
• Button transitions use CSS classes for smooth visual feedback
• Code is more maintainable and performant than the previous implementation

Testing URLs:

• http://localhost:5173/news/template/markdown-guide (comprehensive test page)
• Any blog post with code blocks will show the improved copy button behavior

---

📚 Reviewer Resources

• Contributing Guide
• Style Guide
• Community Chat

Thank you for contributing to the Sugar Labs website! 🎉

[github-actions]

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• Code formatting issues detected

How to fix:

Platform	Command	Description
🐧 Unix/macOS/Linux	npm run format	Auto-fix all formatting issues
🪟 Windows	npm run format:file <filename>	Fix specific files
🔍 Check Only	npm run format:check	Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

---

🛠️ Next Steps

1. Fix the issues mentioned above
2. Test locally to ensure everything works
3. Push your fixes to this branch
4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

[github-actions]

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

---

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

[javatcoding1]

@pikurasa please review it

[javatcoding1]

@sa-fw-an please review it