feat(phase3): add code snippet copy buttons and collapsible TOC
SUMMARY:
Implemented Phase 3 Tasks 3.6.1 and 3.6.2: Enhanced documentation
with interactive code copy buttons and collapsible table of contents.
CHANGES:
1. Created code-copy-button.js (new):
- Auto-detects all <pre> code blocks
- Adds "Copy" button to top-right of each block
- Clipboard API with fallback for older browsers
- Visual feedback: "✓ Copied!" on success
- Styled to work on dark code backgrounds
- Listens for 'documentLoaded' event for dynamic content
- Accessible with aria-label
2. Created toc.js (new):
- Automatically builds TOC from h1, h2, h3 headings
- Sticky sidebar on desktop (lg:block)
- Collapsible on mobile with toggle button
- Scroll spy with Intersection Observer
- Highlights current section
- Smooth scroll to sections
- Updates URL hash on navigation
- Auto-collapses on mobile after clicking link
3. Updated docs-viewer.html:
- Added TOC sidebar (sticky, desktop-only)
- Improved layout with flex containers
- Added both components to script imports
- Maintained existing document viewer functionality
FEATURES:
Code Copy Buttons:
- Button text: "Copy" → "✓ Copied!" → "Copy"
- 2-second success/error feedback
- Works on all <pre><code> blocks
- Respects code indentation
Table of Contents:
- Auto-generated from headings with IDs
- 3-level hierarchy (h1, h2, h3)
- Visual active indicator (blue border + bold)
- Mobile toggle with chevron icon
- Sticky positioning on desktop
- Smooth scroll behavior
ACCESSIBILITY:
✓ Zero CSP violations maintained
✓ Keyboard navigation supported
✓ ARIA labels on interactive elements
✓ Semantic HTML (nav, aside)
✓ Focus indicators
PERFORMANCE:
- Intersection Observer for scroll spy (better than scroll listeners)
- Minimal DOM manipulation
- CSS transitions for smooth UX
- Lazy initialization
UI_TRANSFORMATION_PROJECT_PLAN.md:
✓ Phase 3 Task 3.6.1: Code snippet copy buttons
✓ Phase 3 Task 3.6.2: Collapsible table of contents
NEXT STEPS:
- Deploy to production for testing
- Phase 3 Task 3.2: Interactive architecture diagram (complex, deferred)
🤖 Generated with Claude Code (https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
0ef138f6ab