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]);
|
}, [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(() => {
|
React.useEffect(() => {
|
||||||
if (tracks.length === 0) return;
|
if (tracks.length === 0) return;
|
||||||
|
|
||||||
const autoSaveTimer = setTimeout(() => {
|
const autoSaveTimer = setTimeout(() => {
|
||||||
handleSaveProject();
|
handleSaveProject();
|
||||||
}, 30000); // Auto-save every 30 seconds
|
}, 3000); // Auto-save after 3 seconds of no changes
|
||||||
|
|
||||||
return () => clearTimeout(autoSaveTimer);
|
return () => clearTimeout(autoSaveTimer);
|
||||||
}, [tracks, handleSaveProject]);
|
}, [tracks, currentProjectName, handleSaveProject]);
|
||||||
|
|
||||||
// Create new project
|
// Create new project
|
||||||
const handleNewProject = React.useCallback(() => {
|
const handleNewProject = React.useCallback(() => {
|
||||||
@@ -1252,9 +1252,9 @@ export function AudioEditor() {
|
|||||||
type="text"
|
type="text"
|
||||||
value={currentProjectName}
|
value={currentProjectName}
|
||||||
onChange={(e) => setCurrentProjectName(e.target.value)}
|
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"
|
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"
|
placeholder="Untitled Project"
|
||||||
|
title="Click to edit project name"
|
||||||
style={{ width: `${Math.max(12, currentProjectName.length)}ch` }}
|
style={{ width: `${Math.max(12, currentProjectName.length)}ch` }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user