## 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>
2.4 KiB
2.4 KiB
User Flows I want the solution to support
Flow #1 - Presentation Management
Adding, removing, and editing existing presentations
Create New Presentation
- User navigates to create new presentation
- User enters presentation details (title, description)
- User selects aspect ratio (16:9, 4:3, 16:10) for presentation
- User selects a theme from available options
- User creates presentation and is taken to editor
View All Presentations
- User can view list of all saved presentations
- User can see presentation metadata (name, description, theme, slide count)
- User can access presentations from navigation
Edit Existing Presentation
- User can open existing presentation for editing
- User can navigate between slides in editor
- User can access presentation settings and metadata
Delete Presentation
- User can delete presentation from list view
- User gets confirmation dialog before deletion
- Presentation is removed from storage
Flow #2 - Slide Management
Adding, removing, and editing individual slides within presentations
Add New Slide
- User clicks "Add Slide" from presentation editor
- User can select layout for new slide (with themed previews)
- User can add content to slide slots (text, images)
- User can add presentation notes to slide
- User can see miniature preview of slide live while editing
- User can save slide (auto-saves presentation)
- User can duplicate an existing slide copying it's layout and content.
Edit Existing Slide
- User can click on existing slide to edit
- User can modify slide content in all slots
- User cannot change slide layout once saved
- User can exit slide editing mode without saving changes in an obvious way
- User can edit presentation notes
- Changes auto-save to presentation
- User can edit slide content without preview if desired by clicking inside content slot areas
Remove Slide
- User can delete slides from presentation
- User gets confirmation before slide deletion
- Slide order adjusts automatically
Preview Slides
- User can preview individual slides
- User can view slides in presentation mode
- User can navigate between slides in preview
Slide Order Management
- User can reorder slides via drag-and-drop
- User can see slide order visually in editor
- Slide order automatically saves when changed