From 102c67dc8d956a573937df574f8bc6fe89d1c109 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 09:41:39 +0100
Subject: [PATCH] fix: improve auto-save to trigger on project name changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed auto-save from 30s interval to 3s debounce, and added
currentProjectName to dependencies so it saves when name changes.

**Changes:**
- Auto-save now triggers 3 seconds after ANY change (tracks or name)
- Added `currentProjectName` to auto-save effect dependencies
- Removed `onBlur` handler from input (auto-save handles it)
- Added tooltip "Click to edit project name"
- Faster feedback - saves 3s after typing stops instead of 30s

**User Experience:**
- Edit project name → auto-saves after 3s
- Add/modify tracks → auto-saves after 3s
- No need to manually save or wait 30 seconds
- Toast notification confirms save

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/editor/AudioEditor.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/editor/AudioEditor.tsx b/components/editor/AudioEditor.tsx
index 7e05266..57ed974 100644
--- a/components/editor/AudioEditor.tsx
+++ b/components/editor/AudioEditor.tsx
@@ -916,16 +916,16 @@ export function AudioEditor() {
     }
   }, [tracks, currentProjectId, currentProjectName, zoom, currentTime, addToast]);
 
-  // Auto-save effect
+  // Auto-save effect (saves on track or name changes after 3 seconds of no changes)
   React.useEffect(() => {
     if (tracks.length === 0) return;
 
     const autoSaveTimer = setTimeout(() => {
       handleSaveProject();
-    }, 30000); // Auto-save every 30 seconds
+    }, 3000); // Auto-save after 3 seconds of no changes
 
     return () => clearTimeout(autoSaveTimer);
-  }, [tracks, handleSaveProject]);
+  }, [tracks, currentProjectName, handleSaveProject]);
 
   // Create new project
   const handleNewProject = React.useCallback(() => {
@@ -1252,9 +1252,9 @@ export function AudioEditor() {
               type="text"
               value={currentProjectName}
               onChange={(e) => setCurrentProjectName(e.target.value)}
-              onBlur={handleSaveProject}
               className="bg-transparent border-none outline-none text-sm font-medium text-muted-foreground hover:text-foreground focus:text-foreground transition-colors px-2 py-1 rounded hover:bg-accent/50 focus:bg-accent"
               placeholder="Untitled Project"
+              title="Click to edit project name"
               style={{ width: `${Math.max(12, currentProjectName.length)}ch` }}
             />
           </div>