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>
<div className="hero-actions">
<Link to="/presentations/new" className="primary-button">
Create Presentation
</Link>
<Link to="/themes" className="secondary-button">
Browse Themes
Get started with a new presentation
</Link>
</div>
</section>

View File

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

View File

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