2 Commits

Author	SHA1	Message	Date
Michael Mainguy	1008bd4bca	Implement slide preview and fix import standards project-wide ... ## New Feature: Full Screen Slide Preview - Add SlidePreviewModal component for full screen slide preview in SlideEditor - ESC key support and temporary hint for user guidance - Proper aspect ratio handling with theme CSS inheritance - Modal follows existing UI patterns for consistency ## Import Standards Compliance (31 files updated) - Fix all imports to use explicit .tsx/.ts extensions per IMPORT_STANDARDS.md - Eliminate barrel imports in App.tsx for better Vite tree shaking - Add direct imports with explicit paths across entire codebase - Preserve CSS imports and external library imports unchanged ## Code Architecture Improvements - Add comprehensive CSS & Component Architecture Guidelines to CLAUDE.md - Document modal patterns, aspect ratio handling, and CSS reuse principles - Reference all coding standards files for consistent development workflow - Prevent future CSS overcomplication and component duplication ## Performance Optimizations - Enable Vite tree shaking with proper import structure - Improve module resolution speed with explicit extensions - Optimize build performance through direct imports ## Files Changed - 31 TypeScript/React files with import fixes - 2 new SlidePreviewModal files (component + CSS) - Updated project documentation and coding guidelines - Fixed aspect ratio CSS patterns across components 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-08-21 06:52:56 -05:00
Michael Mainguy	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