refactor: streamline audio track handling by consolidating clip addition logic in timeline store

apps/web/src/stores/timeline-store.ts

@@ -443,29 +443,15 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
 
     get().pushHistory();
 
-    // Find or create an audio track
-    let audioTrackId = tracks.find((t) => t.type === "audio")?.id;
-
-    if (!audioTrackId) {
-      audioTrackId = crypto.randomUUID();
-      const newAudioTrack: TimelineTrack = {
-        id: audioTrackId,
-        name: "Audio Track",
-        type: "audio",
-        clips: [],
-        muted: false,
-      };
-
-      set((state) => ({
-        tracks: [...state.tracks, newAudioTrack],
-      }));
-    }
-
+    // Find existing audio track or prepare to create one
+    const existingAudioTrack = tracks.find((t) => t.type === "audio");
     const audioClipId = crypto.randomUUID();
 
+    if (existingAudioTrack) {
+      // Add audio clip to existing audio track
       set((state) => ({
         tracks: state.tracks.map((track) =>
-        track.id === audioTrackId
+          track.id === existingAudioTrack.id
             ? {
                 ...track,
                 clips: [
@@ -480,6 +466,26 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
             : track
         ),
       }));
+    } else {
+      // Create new audio track with the audio clip in a single atomic update
+      const newAudioTrack: TimelineTrack = {
+        id: crypto.randomUUID(),
+        name: "Audio Track",
+        type: "audio",
+        clips: [
+          {
+            ...clip,
+            id: audioClipId,
+            name: getClipNameWithSuffix(clip.name, "audio"),
+          },
+        ],
+        muted: false,
+      };
+
+      set((state) => ({
+        tracks: [...state.tracks, newAudioTrack],
+      }));
+    }
 
     return audioClipId;
   },