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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user