Commit Graph

9 Commits

Author SHA1 Message Date
d88ae6dcc3 Fix all ESLint errors and improve code quality
- Fix unused variable errors by removing unused parameters or using proper destructuring
- Fix 'prefer-const' violations by replacing 'let' with 'const' where appropriate
- Fix lexical declaration errors in switch cases by adding proper block scoping
- Replace explicit 'any' type with proper TypeScript interface for DOMPurify config
- Fix React hooks dependency warnings in useDialog hook
- Remove unused imports and variables throughout codebase

Specific fixes:
- Replace '_' parameters with proper destructuring syntax ([, value])
- Add block scopes to switch case statements in templateRenderer.ts
- Improve type safety in htmlSanitizer.ts with explicit DOMPurify interface
- Fix useCallback dependencies in useDialog hook
- Remove unused 'placeholder' parameter in generateSampleDataForSlot

All 15 ESLint errors have been resolved, improving code maintainability and consistency.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 17:50:23 -05:00
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