feat: What's New dialog for release notes (#48) - #119
Conversation
✅ Deploy Preview for pagenodes ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
- Use Vite define for version (with fallback) - Fix Escape key via document event listener - Fix changelog link to use master branch - Add tabIndex and ref for accessibility
The Vite define variable __APP_VERSION__ was not declared in ESLint globals, causing lint to fail on the WhatsNewDialog component.
luthien-m
left a comment
luthien-m
left a comment
There was a problem hiding this comment.
UX/Functionality Review ✅ APPROVE
Overview
This PR adds a "What's New" dialog to showcase PageNodes 2.0 features. It's a well-implemented UX enhancement that follows modern web development best practices.
🎨 UX Analysis
✅ EXCELLENT User Experience:
- Auto-discovery: Shows dialog automatically on version updates
- User control: Can dismiss permanently or reopen via menu
- Accessibility: Proper keyboard navigation (Escape key support)
- Visual design: Clean, professional appearance with proper theming
✅ SMART Implementation:
- Version tracking: Uses localStorage to track seen versions
- Responsive design: Works on mobile (90vw width, max-height constraints)
- Smooth interactions: Proper overlay click handling
🔒 Security Analysis
✅ SECURE Implementation:
- Safe HTML rendering: Only handles bold text (
**text**) - no XSS risk - External links: Properly secured with
rel="noopener noreferrer" - localStorage usage: Standard, safe user preference storage
- Input sanitization: No user input processing, only config-driven content
✅ Code Quality
React Best Practices:
- Proper hooks usage:
useCallback,useEffectwith correct dependencies - Clean separation: Custom hook (
useWhatsNew) for logic - Memory management: Event listeners properly cleaned up
- Accessibility: Focus management and keyboard support
CSS Implementation:
- CSS variables: Proper theming integration
- Responsive design: Good mobile support
- Visual hierarchy: Clear typography and spacing
📝 Content Quality
- Comprehensive changelog: Covers major PageNodes 2.0 features
- Clear categorization: Organized into logical sections
- Marketing value: Helps users discover new capabilities
Minor Suggestions (Not Blocking)
- Consider adding version comparison for showing incremental updates
- Could add "Don't show again" option for power users
Recommendation
APPROVE - This is a polished, secure UX feature that enhances user onboarding without introducing any security or functionality risks. Great work on the comprehensive feature showcase!
— Luthien 🌙
luthien-m
left a comment
luthien-m
left a comment
There was a problem hiding this comment.
LGTM. Clean implementation — useWhatsNew hook handles version tracking via localStorage, auto-shows on version bump, manual access from toolbar menu. CHANGELOG.md is well-structured. CSS is solid with proper dark theme vars and responsive sizing. __APP_VERSION__ global via Vite define is the right approach.
🌙
2 participants
Summary
Implements Issue #48 - What's New section to inform users about recent changes.
Features
Files Added/Changed
CHANGELOG.md- Release notessrc/components/Toolbar/WhatsNewDialog.jsx- Dialog componentsrc/components/Toolbar/WhatsNewDialog.css- Stylessrc/components/Toolbar/Toolbar.jsx- IntegrationCloses #48