Commit Graph

8 Commits

Author SHA1 Message Date
d0e70f81e7 Major code quality improvements: Fix XSS vulnerabilities and replace browser dialogs
Security Fixes:
- Add DOMPurify HTML sanitization for all dangerouslySetInnerHTML usage
- Create comprehensive HTML sanitization utility with configurable security levels
- Implement safe template rendering for slide content and layouts
- Add input validation for image sources and dangerous attributes

UI/UX Improvements:
- Replace browser alert() and confirm() with proper React modal components
- Create reusable Modal, AlertDialog, and ConfirmDialog components
- Add useDialog hook for easy dialog state management
- Implement proper accessibility with keyboard navigation and focus management
- Add smooth animations and responsive design for dialogs

Components Added:
- src/utils/htmlSanitizer.ts - Comprehensive HTML sanitization
- src/components/ui/Modal.tsx - Base modal component
- src/components/ui/AlertDialog.tsx - Alert dialog component
- src/components/ui/ConfirmDialog.tsx - Confirmation dialog component
- src/hooks/useDialog.ts - Dialog state management hook

Updated Components:
- SlideEditor.tsx - Now uses sanitized HTML rendering
- LayoutPreviewPage.tsx - Now uses sanitized HTML rendering
- PresentationEditor.tsx - Now uses React dialogs instead of browser dialogs

Benefits:
✅ Eliminates XSS vulnerabilities from unsafe HTML rendering
✅ Provides consistent, accessible user interface
✅ Improves user experience with proper modal dialogs
✅ Maintains security while preserving slide formatting capabilities
✅ Follows React best practices for component composition

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 17:41:15 -05:00
4ce9f225a6 Implement slide deletion and duplication functionality
- Add complete slide deletion with smart confirmation messages
- Implement slide duplication that copies layout, content, and notes
- Handle edge cases for navigation after deletion/duplication
- Add proper slide order management and renumbering
- Include comprehensive error handling and user feedback
- Support deleting last slide, only slide, and middle slides
- Navigate intelligently after operations (to duplicated slide, adjusted position after deletion)
- Add improved confirmation dialogs with context-aware messaging
- Integrate with existing presentation storage and state management
- Replace placeholder TODO implementations with full functionality

Features completed:
✅ User can delete slides from presentation
✅ User gets confirmation before slide deletion
✅ Slide order adjusts automatically
✅ User can duplicate existing slides copying layout and content
✅ Smart navigation maintains user context after operations
✅ Robust error handling with proper user feedback

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 17:32:06 -05:00
7b262f398c Simplify slide editor by removing layout change feature and add obvious edit buttons
- Remove "Change Layout" buttons from slide editor header and content actions
- Simplify user flow: layout selection only happens once when creating new slides
- Existing slides go directly to content editing, skipping layout selection
- Add prominent edit buttons to slide thumbnails and main slide view
- Style edit buttons with blue theme to make them obvious primary actions
- Add "Cancel editing" link styled as underlined text link for clear visual distinction
- Improve responsive design for mobile with proper button spacing
- Lock in layout choice after selection to prevent confusion and content loss

Benefits:
- Cleaner, more focused editing interface
- Prevents accidental layout changes that could break content formatting
- Clear visual hierarchy with obvious edit and cancel options
- Faster editing workflow for existing slides

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 17:25:33 -05:00
92672f77e3 feat: implement absolute positioning for slide editor with viewport-aware layout
## Major Improvements:

### Absolute Positioning System
- Implemented fixed positioning for slide editor to break out of DOM flow
- Editor uses full viewport (top: 80px; left: 0; right: 0; bottom: 0)
- Fixed header at top with z-index layering for proper overlap
- Background overlay to separate from underlying content

### Viewport-Optimized Layout
- True 50/50 split using full available viewport width
- Height calculations based on actual viewport (100vh) not container constraints
- Responsive top positioning (80px desktop, 60px tablet, 50px mobile)
- No scrolling issues - content always fits within viewport boundaries

### Enhanced Live Preview
- Applied presentation aspect ratio classes to preview container
- Dynamic aspect ratio detection (16:9, 4:3, 16:10)
- Viewport-aware sizing with proper aspect ratio preservation
- Added aspect ratio indicator in preview meta information

### Improved User Experience
- Compact header design with reduced padding and font sizes
- Internal scrolling for content fields while keeping actions visible
- Better space utilization with reduced margins and gaps
- Consistent behavior across all screen sizes and orientations

### Technical Enhancements
- Z-index management for proper layering (header: 20, content: 10)
- Flexbox structure for optimal space distribution
- Overflow handling for different content types
- Mobile-responsive design with appropriate scaling

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 16:54:27 -05:00
9b0b16969f feat: implement complete presentation management system with aspect ratio support
## Major Features Added:

### Presentation Management
- Complete CRUD operations for presentations (create, read, update, delete)
- IndexedDB storage for offline presentation data
- Comprehensive presentation list view with metadata
- Navigation integration with header menu

### Slide Management
- Full slide editor with layout selection and content editing
- Live preview with theme styling applied
- Speaker notes functionality
- Enhanced layout previews with realistic sample content
- Themed layout selection with proper CSS inheritance

### Aspect Ratio System
- Support for 3 common presentation formats: 16:9, 4:3, 16:10
- Global CSS system baked into theme engine
- Visual aspect ratio selection in presentation creation
- Responsive scaling for different viewing contexts
- Print-optimized styling with proper dimensions

### User Experience Improvements
- Enhanced sample content generation for realistic previews
- Improved navigation with presentation management
- Better form styling and user interaction
- Comprehensive error handling and loading states
- Mobile-responsive design throughout

### Technical Infrastructure
- Complete TypeScript type system for presentations
- Modular component architecture
- CSS aspect ratio classes for theme consistency
- Enhanced template rendering with live updates
- Robust storage utilities with proper error handling

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 16:34:00 -05:00
98958b2cb3 Remove iframe previews and improve theme hot reload with SVG demo content
- Remove iframe previews from theme detail and layout detail pages for cleaner UI
- Replace with informative layout cards showing descriptions and slot type badges
- Fix theme hot reload by switching from custom HMR to full page reload
- Update template renderer to use slot names as demo content
- Add SVG pattern generation for image slots with grid background and slot labels
- Improve demo content for all slot types (code, lists, tables, etc.)
- Clean up HMR listeners and simplify theme change detection

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 14:11:51 -05:00
15d3789bb4 Add full-screen layout preview route and fix iframe sandbox issue
- Create LayoutPreviewPage component for full-screen layout previews
- Add preview route /themes/:themeId/layouts/:layoutId/preview to App routing
- Update theme components with preview links and improved navigation
- Fix iframe sandbox error by adding allow-scripts permission
- Enhance template renderer with layout metadata support
- Replace PostCSS with regex-only CSS parsing for browser compatibility
- Add comprehensive standards documentation for code quality
- Clean up CSS slot indicators to be always visible with descriptions

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 13:48:13 -05:00
6e6c09b5ba Add comprehensive theme routing and browsing system
- Add React Router with theme browser, theme detail, and layout detail pages
- Implement manifest-based theme discovery for better performance
- Add Welcome component as home page with feature overview
- Fix layout and styling issues with proper CSS centering
- Implement introspective theme browsing (dynamically discover colors/variables)
- Add layout preview system with iframe scaling
- Create comprehensive theme detail page with color palette display
- Fix TypeScript errors and build issues
- Remove hardcoded theme assumptions in favor of dynamic discovery

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 10:17:55 -05:00