Commit Graph

8 Commits

Author SHA1 Message Date
b4b61ad761 Consolidate button components and eliminate barrel exports
## Button Component System
- Create dedicated components/ui/buttons directory with 6 specialized button components:
  - Button.tsx: Universal button with variants (primary, secondary, danger, link) and sizes
  - ActionButton.tsx: Action buttons matching existing patterns
  - BackButton.tsx: Navigation back buttons
  - CancelLink.tsx: Cancel/link style buttons
  - CloseButton.tsx: Modal/preview close buttons with variants
  - NavigationButton.tsx: Presentation navigation buttons
- Update key components to use new button system (SlideEditor, ContentEditor, Modal, AlertDialog, ConfirmDialog)
- Replace inline styled-jsx with proper CSS files for AlertDialog and ConfirmDialog

## Barrel Export Elimination
- Remove all barrel export files violating IMPORT_STANDARDS.md:
  - src/themes/index.ts
  - src/components/themes/index.ts
  - src/components/presentations/index.ts
  - src/components/slide-editor/index.ts
- Update 15+ files to use direct imports from themeLoader.ts instead of barrel exports
- Fix function naming conflict in ThemeDetailPage.tsx (loadTheme shadowing)
- Follow project standards: direct imports with .tsx extensions for better Vite performance

## Benefits
- Improved Vite tree shaking and module resolution performance
- Consistent, reusable button system across application
- Adherence to project coding standards and import conventions
- Reduced bundle size through elimination of barrel export overhead

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-21 11:42:42 -05:00
127b0fe96a Refactor SlideEditor component and consolidate CSS
- Move SlideEditor to dedicated slide-editor directory structure
- Break down monolithic 471-line component into smaller, focused modules:
  - SlideEditor.tsx (127 lines) - main component using composition
  - useSlideEditor.ts (235 lines) - custom hook for state management
  - ContentEditor.tsx - focused content editing component
  - SlidePreviewModal.tsx - modal for fullscreen preview
- Consolidate CSS from 838+132 lines to 731 lines with:
  - Comprehensive CSS variables system for consistent theming
  - Remove duplicate .slide-preview-wrapper rules and conflicts
  - Clean aspect ratio handling with clear separation of contexts
- Follow project standards: direct imports, error boundaries, under 200 lines per component
- Maintain all existing functionality while improving code organization

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-21 11:25:59 -05:00
7c7c8235f3 Add slide number to presentation mode route
- Update route to /presentations/:presentationId/present/:slideNumber
- Add URL-synced navigation with goToSlide function
- Update keyboard navigation to maintain URL state
- Enable deep linking and browser navigation for slides
- Start presentation from slide 1 in presentations list
- Present button in viewer uses current slide number

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-21 09:29:24 -05:00
3864de28e7 Implement fullscreen presentation mode with keyboard navigation
- Add PresentationMode component for fullscreen slide viewing
- Support keyboard navigation: arrows/space for slides, escape to exit
- Integrate with existing theme rendering and CSS loading system
- Update PresentationsList Present button to use fullscreen mode
- Add new route /presentations/:presentationId/present
- Fix TypeScript errors in presentation components

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-21 09:21:38 -05:00
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
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
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