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:
parent
b4b61ad761
commit
98f8c649fe
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user