fix: improve auto-save to trigger on project name changes

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>
This commit is contained in:
2025-11-19 09:41:39 +01:00
parent b743f97276
commit 102c67dc8d

View File

@@ -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>