From 98f8c649fe819bfde2decc246236f4ce1e880dfc Mon Sep 17 00:00:00 2001
From: Michael Mainguy <mike.mainguy@gmail.com>
Date: Thu, 21 Aug 2025 11:48:24 -0500
Subject: [PATCH] Simplify presentation creation flow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 src/components/Welcome.tsx                    |  5 +--
 .../presentations/CreationActions.tsx         |  2 +-
 .../presentations/NewPresentationPage.tsx     | 31 +++++++++++--------
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/Welcome.tsx b/src/components/Welcome.tsx
index ec6b3bc..49b4d30 100644
--- a/src/components/Welcome.tsx
+++ b/src/components/Welcome.tsx
@@ -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>
diff --git a/src/components/presentations/CreationActions.tsx b/src/components/presentations/CreationActions.tsx
index f68b8dc..aae581f 100644
--- a/src/components/presentations/CreationActions.tsx
+++ b/src/components/presentations/CreationActions.tsx
@@ -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>
diff --git a/src/components/presentations/NewPresentationPage.tsx b/src/components/presentations/NewPresentationPage.tsx
index 275c82f..d8719b9 100644
--- a/src/components/presentations/NewPresentationPage.tsx
+++ b/src/components/presentations/NewPresentationPage.tsx
@@ -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}