Michael Mainguy
1008bd4bca
## 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>
83 lines
1.9 KiB
TypeScript
83 lines
1.9 KiB
TypeScript
import React from 'react';
|
||
import type { Slide } from '../../../types/presentation.ts';
|
||
import './SlideThumbnail.css';
|
||
|
||
interface SlideThumbnailProps {
|
||
slide: Slide;
|
||
index: number;
|
||
isActive: boolean;
|
||
isDisabled?: boolean;
|
||
onClick: () => void;
|
||
onDoubleClick?: () => void;
|
||
onEdit: () => void;
|
||
onDuplicate: () => void;
|
||
onDelete: () => void;
|
||
}
|
||
|
||
export const SlideThumbnail: React.FC<SlideThumbnailProps> = ({
|
||
slide,
|
||
index,
|
||
isActive,
|
||
isDisabled = false,
|
||
onClick,
|
||
onDoubleClick,
|
||
onEdit,
|
||
onDuplicate,
|
||
onDelete
|
||
}) => {
|
||
return (
|
||
<div
|
||
className={`slide-thumbnail ${isActive ? 'active' : ''}`}
|
||
onClick={onClick}
|
||
onDoubleClick={onDoubleClick}
|
||
>
|
||
<div className="thumbnail-number">{index + 1}</div>
|
||
<div className="thumbnail-preview">
|
||
<div className="thumbnail-content">
|
||
<span className="layout-name">{slide.layoutId}</span>
|
||
<span className="content-count">
|
||
{Object.keys(slide.content).length} items
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="thumbnail-actions">
|
||
<button
|
||
type="button"
|
||
className="thumbnail-action edit"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onEdit();
|
||
}}
|
||
title="Edit slide content"
|
||
disabled={isDisabled}
|
||
>
|
||
✏️
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="thumbnail-action"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onDuplicate();
|
||
}}
|
||
title="Duplicate slide"
|
||
disabled={isDisabled}
|
||
>
|
||
⧉
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="thumbnail-action delete"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onDelete();
|
||
}}
|
||
title="Delete slide"
|
||
disabled={isDisabled}
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}; |