Simplify presentation creation flow

- Hide aspect ratio selector and theme selector on NewPresentationPage while keeping them in DOM
- Auto-select default theme (or first available theme) on page load
- Default to 16:9 aspect ratio (already set)
- Enable create button when title has at least 3 characters (instead of just non-empty)
- Update validation message to specify 3-character minimum requirement
- Streamline Welcome page to single "Get started" action button

Users can now create presentations with just a title, using sensible defaults for theme and aspect ratio.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Michael Mainguy 2025-08-21 11:48:24 -05:00
parent b4b61ad761
commit 98f8c649fe
3 changed files with 20 additions and 18 deletions

View File

@ -11,10 +11,7 @@ export const Welcome: React.FC = () => {
</p> </p>
<div className="hero-actions"> <div className="hero-actions">
<Link to="/presentations/new" className="primary-button"> <Link to="/presentations/new" className="primary-button">
Create Presentation Get started with a new presentation
</Link>
<Link to="/themes" className="secondary-button">
Browse Themes
</Link> </Link>
</div> </div>
</section> </section>

View File

@ -53,7 +53,7 @@ export const CreationActions: React.FC<CreationActionsProps> = ({
onClick={onCreate} onClick={onCreate}
className="button primary" className="button primary"
type="button" type="button"
disabled={!selectedTheme || !presentationTitle.trim() || creating} disabled={!selectedTheme || presentationTitle.trim().length < 3 || creating}
> >
{creating ? 'Creating...' : 'Create Presentation'} {creating ? 'Creating...' : 'Create Presentation'}
</button> </button>

View File

@ -34,9 +34,10 @@ export const NewPresentationPage: React.FC = () => {
const discoveredThemes = await getThemes(); const discoveredThemes = await getThemes();
setThemes(discoveredThemes); setThemes(discoveredThemes);
// Auto-select first theme if available // Auto-select default theme or first theme if available
if (discoveredThemes.length > 0) { if (discoveredThemes.length > 0) {
setSelectedTheme(discoveredThemes[0]); const defaultTheme = discoveredThemes.find(theme => theme.id === 'default') || discoveredThemes[0];
setSelectedTheme(defaultTheme);
} }
} catch (err) { } catch (err) {
setError(err instanceof Error ? err.message : 'Failed to load themes'); setError(err instanceof Error ? err.message : 'Failed to load themes');
@ -58,10 +59,10 @@ export const NewPresentationPage: React.FC = () => {
return; return;
} }
if (!presentationTitle.trim()) { if (presentationTitle.trim().length < 3) {
setAlertDialog({ setAlertDialog({
isOpen: true, isOpen: true,
message: 'Please enter a title for your presentation', message: 'Please enter a title with at least 3 characters',
type: 'warning' type: 'warning'
}); });
return; return;
@ -139,16 +140,20 @@ export const NewPresentationPage: React.FC = () => {
onDescriptionChange={setPresentationDescription} onDescriptionChange={setPresentationDescription}
/> />
<div style={{ display: 'none' }}>
<AspectRatioSelector <AspectRatioSelector
selectedAspectRatio={selectedAspectRatio} selectedAspectRatio={selectedAspectRatio}
onAspectRatioChange={setSelectedAspectRatio} onAspectRatioChange={setSelectedAspectRatio}
/> />
</div>
<div style={{ display: 'none' }}>
<ThemeSelectionSection <ThemeSelectionSection
themes={themes} themes={themes}
selectedTheme={selectedTheme} selectedTheme={selectedTheme}
onThemeSelect={setSelectedTheme} onThemeSelect={setSelectedTheme}
/> />
</div>
<CreationActions <CreationActions
selectedTheme={selectedTheme} selectedTheme={selectedTheme}