From 3224dd974aa0a4906cae5642e8479a3618c49c03 Mon Sep 17 00:00:00 2001
From: DevloperAmanSingh <amansinghneh211205@gmail.com>
Date: Thu, 26 Jun 2025 23:40:50 +0530
Subject: [PATCH 01/12] feat: add clip splitting and audio separation
 functionality to timeline store

---
 apps/web/src/stores/timeline-store.ts | 209 +++++++++++++++++++++++++-
 1 file changed, 202 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index 3b068d7..a6da4e2 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -74,10 +74,28 @@ interface TimelineStore {
   ) => void;
   toggleTrackMute: (trackId: string) => void;
 
+  // Split operations
+  splitClip: (
+    trackId: string,
+    clipId: string,
+    splitTime: number
+  ) => string | null;
+  splitAndKeepLeft: (
+    trackId: string,
+    clipId: string,
+    splitTime: number
+  ) => void;
+  splitAndKeepRight: (
+    trackId: string,
+    clipId: string,
+    splitTime: number
+  ) => void;
+  separateAudio: (trackId: string, clipId: string) => string | null;
+
   // Computed values
   getTotalDuration: () => number;
 
-  // New actions
+  // History actions
   undo: () => void;
   redo: () => void;
   pushHistory: () => void;
@@ -91,10 +109,9 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
 
   pushHistory: () => {
     const { tracks, history, redoStack } = get();
-    // Deep copy tracks
     set({
       history: [...history, JSON.parse(JSON.stringify(tracks))],
-      redoStack: [], // Clear redo stack when new action is performed
+      redoStack: [],
     });
   },
 
@@ -105,7 +122,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
     set({
       tracks: prev,
       history: history.slice(0, -1),
-      redoStack: [...redoStack, JSON.parse(JSON.stringify(tracks))], // Add current state to redo stack
+      redoStack: [...redoStack, JSON.parse(JSON.stringify(tracks))],
     });
   },
 
@@ -115,7 +132,6 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
         (c) => c.trackId === trackId && c.clipId === clipId
       );
       if (multi) {
-        // Toggle selection
         return exists
           ? {
               selectedClips: state.selectedClips.filter(
@@ -128,6 +144,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
       }
     });
   },
+
   deselectClip: (trackId, clipId) => {
     set((state) => ({
       selectedClips: state.selectedClips.filter(
@@ -135,6 +152,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
       ),
     }));
   },
+
   clearSelectedClips: () => {
     set({ selectedClips: [] });
   },
@@ -194,7 +212,6 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
               }
             : track
         )
-        // Remove track if it becomes empty
         .filter((track) => track.clips.length > 0),
     }));
   },
@@ -223,7 +240,6 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
             }
             return track;
           })
-          // Remove track if it becomes empty
           .filter((track) => track.clips.length > 0),
       };
     });
@@ -270,6 +286,185 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
     }));
   },
 
+  splitClip: (trackId, clipId, splitTime) => {
+    const { tracks } = get();
+    const track = tracks.find((t) => t.id === trackId);
+    const clip = track?.clips.find((c) => c.id === clipId);
+
+    if (!clip) return null;
+
+    const effectiveStart = clip.startTime;
+    const effectiveEnd =
+      clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+
+    if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return null;
+
+    get().pushHistory();
+
+    const relativeTime = splitTime - clip.startTime;
+    const firstDuration = relativeTime;
+    const secondDuration =
+      clip.duration - clip.trimStart - clip.trimEnd - relativeTime;
+
+    const secondClipId = crypto.randomUUID();
+
+    set((state) => ({
+      tracks: state.tracks.map((track) =>
+        track.id === trackId
+          ? {
+              ...track,
+              clips: track.clips.flatMap((c) =>
+                c.id === clipId
+                  ? [
+                      {
+                        ...c,
+                        trimEnd: c.trimEnd + secondDuration,
+                        name: c.name + " (left)",
+                      },
+                      {
+                        ...c,
+                        id: secondClipId,
+                        startTime: splitTime,
+                        trimStart: c.trimStart + firstDuration,
+                        name: c.name + " (right)",
+                      },
+                    ]
+                  : [c]
+              ),
+            }
+          : track
+      ),
+    }));
+
+    return secondClipId;
+  },
+
+  splitAndKeepLeft: (trackId, clipId, splitTime) => {
+    const { tracks } = get();
+    const track = tracks.find((t) => t.id === trackId);
+    const clip = track?.clips.find((c) => c.id === clipId);
+
+    if (!clip) return;
+
+    const effectiveStart = clip.startTime;
+    const effectiveEnd =
+      clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+
+    if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return;
+
+    get().pushHistory();
+
+    const relativeTime = splitTime - clip.startTime;
+    const durationToRemove =
+      clip.duration - clip.trimStart - clip.trimEnd - relativeTime;
+
+    set((state) => ({
+      tracks: state.tracks.map((track) =>
+        track.id === trackId
+          ? {
+              ...track,
+              clips: track.clips.map((c) =>
+                c.id === clipId
+                  ? {
+                      ...c,
+                      trimEnd: c.trimEnd + durationToRemove,
+                      name: c.name + " (left)",
+                    }
+                  : c
+              ),
+            }
+          : track
+      ),
+    }));
+  },
+
+  splitAndKeepRight: (trackId, clipId, splitTime) => {
+    const { tracks } = get();
+    const track = tracks.find((t) => t.id === trackId);
+    const clip = track?.clips.find((c) => c.id === clipId);
+
+    if (!clip) return;
+
+    const effectiveStart = clip.startTime;
+    const effectiveEnd =
+      clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+
+    if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return;
+
+    get().pushHistory();
+
+    const relativeTime = splitTime - clip.startTime;
+
+    set((state) => ({
+      tracks: state.tracks.map((track) =>
+        track.id === trackId
+          ? {
+              ...track,
+              clips: track.clips.map((c) =>
+                c.id === clipId
+                  ? {
+                      ...c,
+                      startTime: splitTime,
+                      trimStart: c.trimStart + relativeTime,
+                      name: c.name + " (right)",
+                    }
+                  : c
+              ),
+            }
+          : track
+      ),
+    }));
+  },
+
+  separateAudio: (trackId, clipId) => {
+    const { tracks } = get();
+    const track = tracks.find((t) => t.id === trackId);
+    const clip = track?.clips.find((c) => c.id === clipId);
+
+    if (!clip || track?.type !== "video") return null;
+
+    get().pushHistory();
+
+    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],
+      }));
+    }
+
+    const audioClipId = crypto.randomUUID();
+
+    set((state) => ({
+      tracks: state.tracks.map((track) =>
+        track.id === audioTrackId
+          ? {
+              ...track,
+              clips: [
+                ...track.clips,
+                {
+                  ...clip,
+                  id: audioClipId,
+                  name: clip.name + " (audio)",
+                },
+              ],
+            }
+          : track
+      ),
+    }));
+
+    return audioClipId;
+  },
+
   getTotalDuration: () => {
     const { tracks } = get();
     if (tracks.length === 0) return 0;

From b799615654eb5225365726fd736eeb0fbd5c776e Mon Sep 17 00:00:00 2001
From: DevloperAmanSingh <amansinghneh211205@gmail.com>
Date: Thu, 26 Jun 2025 23:40:56 +0530
Subject: [PATCH 02/12] feat: enhance playback controls with keyboard shortcuts
 for clip manipulation and audio separation

---
 apps/web/src/hooks/use-playback-controls.ts | 176 ++++++++++++++++++--
 1 file changed, 166 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/hooks/use-playback-controls.ts b/apps/web/src/hooks/use-playback-controls.ts
index 5742e27..23bffe1 100644
--- a/apps/web/src/hooks/use-playback-controls.ts
+++ b/apps/web/src/hooks/use-playback-controls.ts
@@ -1,18 +1,174 @@
 import { useEffect } from "react";
 import { usePlaybackStore } from "@/stores/playback-store";
+import { useTimelineStore } from "@/stores/timeline-store";
+import { toast } from "sonner";
 
-export function usePlaybackControls() {
-  const { toggle } = usePlaybackStore();
+export const usePlaybackControls = () => {
+  const { isPlaying, currentTime, play, pause, seek } = usePlaybackStore();
+
+  const {
+    selectedClips,
+    tracks,
+    splitClip,
+    splitAndKeepLeft,
+    splitAndKeepRight,
+    separateAudio,
+  } = useTimelineStore();
 
   useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.code === "Space" && e.target === document.body) {
-        e.preventDefault();
-        toggle();
+    const handleKeyPress = (e: KeyboardEvent) => {
+      if (
+        e.target instanceof HTMLInputElement ||
+        e.target instanceof HTMLTextAreaElement
+      ) {
+        return;
+      }
+
+      switch (e.key) {
+        case " ":
+          e.preventDefault();
+          if (isPlaying) {
+            pause();
+          } else {
+            play();
+          }
+          break;
+
+        case "s":
+          if (e.ctrlKey || e.metaKey) {
+            e.preventDefault();
+            handleSplitSelectedClip();
+          }
+          break;
+
+        case "q":
+          if (e.ctrlKey || e.metaKey) {
+            e.preventDefault();
+            handleSplitAndKeepLeft();
+          }
+          break;
+
+        case "w":
+          if (e.ctrlKey || e.metaKey) {
+            e.preventDefault();
+            handleSplitAndKeepRight();
+          }
+          break;
+
+        case "d":
+          if (e.ctrlKey || e.metaKey) {
+            e.preventDefault();
+            handleSeparateAudio();
+          }
+          break;
       }
     };
 
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [toggle]);
-} 
\ No newline at end of file
+    const handleSplitSelectedClip = () => {
+      if (selectedClips.length !== 1) {
+        toast.error("Select exactly one clip to split");
+        return;
+      }
+
+      const { trackId, clipId } = selectedClips[0];
+      const track = tracks.find((t) => t.id === trackId);
+      const clip = track?.clips.find((c) => c.id === clipId);
+
+      if (!clip) return;
+
+      const effectiveStart = clip.startTime;
+      const effectiveEnd =
+        clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+
+      if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
+        toast.error("Playhead must be within selected clip");
+        return;
+      }
+
+      splitClip(trackId, clipId, currentTime);
+      toast.success("Clip split at playhead");
+    };
+
+    const handleSplitAndKeepLeft = () => {
+      if (selectedClips.length !== 1) {
+        toast.error("Select exactly one clip");
+        return;
+      }
+
+      const { trackId, clipId } = selectedClips[0];
+      const track = tracks.find((t) => t.id === trackId);
+      const clip = track?.clips.find((c) => c.id === clipId);
+
+      if (!clip) return;
+
+      const effectiveStart = clip.startTime;
+      const effectiveEnd =
+        clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+
+      if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
+        toast.error("Playhead must be within selected clip");
+        return;
+      }
+
+      splitAndKeepLeft(trackId, clipId, currentTime);
+      toast.success("Split and kept left portion");
+    };
+
+    const handleSplitAndKeepRight = () => {
+      if (selectedClips.length !== 1) {
+        toast.error("Select exactly one clip");
+        return;
+      }
+
+      const { trackId, clipId } = selectedClips[0];
+      const track = tracks.find((t) => t.id === trackId);
+      const clip = track?.clips.find((c) => c.id === clipId);
+
+      if (!clip) return;
+
+      const effectiveStart = clip.startTime;
+      const effectiveEnd =
+        clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+
+      if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
+        toast.error("Playhead must be within selected clip");
+        return;
+      }
+
+      splitAndKeepRight(trackId, clipId, currentTime);
+      toast.success("Split and kept right portion");
+    };
+
+    const handleSeparateAudio = () => {
+      if (selectedClips.length !== 1) {
+        toast.error("Select exactly one video clip to separate audio");
+        return;
+      }
+
+      const { trackId, clipId } = selectedClips[0];
+      const track = tracks.find((t) => t.id === trackId);
+
+      if (!track || track.type !== "video") {
+        toast.error("Select a video clip to separate audio");
+        return;
+      }
+
+      separateAudio(trackId, clipId);
+      toast.success("Audio separated to audio track");
+    };
+
+    document.addEventListener("keydown", handleKeyPress);
+    return () => document.removeEventListener("keydown", handleKeyPress);
+  }, [
+    isPlaying,
+    currentTime,
+    selectedClips,
+    tracks,
+    play,
+    pause,
+    splitClip,
+    splitAndKeepLeft,
+    splitAndKeepRight,
+    separateAudio,
+  ]);
+};

From 12a2ec59fd4eef9792dcfcf15bc77ea398420c3f Mon Sep 17 00:00:00 2001
From: DevloperAmanSingh <amansinghneh211205@gmail.com>
Date: Thu, 26 Jun 2025 23:41:01 +0530
Subject: [PATCH 03/12] feat: implement clip splitting and audio separation
 features with keyboard shortcuts in timeline component

---
 apps/web/src/components/editor/timeline.tsx | 233 ++++++++++++++------
 1 file changed, 166 insertions(+), 67 deletions(-)

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index ae6b98d..b1eac6f 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -39,7 +39,6 @@ import {
 
 import AudioWaveform from "./audio-waveform";
 
-
 export function Timeline() {
   // Timeline shows all tracks (video, audio, effects) and their clips.
   // You can drag media here to add it to your project.
@@ -58,6 +57,10 @@ export function Timeline() {
     updateClipTrim,
     undo,
     redo,
+    splitClip,
+    splitAndKeepLeft,
+    splitAndKeepRight,
+    separateAudio,
   } = useTimelineStore();
   const { mediaItems, addMediaItem } = useMediaStore();
   const {
@@ -217,7 +220,7 @@ export function Timeline() {
     const bx2 = clamp(x2, 0, rect.width);
     const by1 = clamp(y1, 0, rect.height);
     const by2 = clamp(y2, 0, rect.height);
-    let newSelection: { trackId: string; clipId: string; }[] = [];
+    let newSelection: { trackId: string; clipId: string }[] = [];
     tracks.forEach((track, trackIdx) => {
       track.clips.forEach((clip) => {
         const effectiveDuration = clip.duration - clip.trimStart - clip.trimEnd;
@@ -453,33 +456,28 @@ export function Timeline() {
       toast.error("No clips selected");
       return;
     }
+
+    let splitCount = 0;
     selectedClips.forEach(({ trackId, clipId }) => {
       const track = tracks.find((t) => t.id === trackId);
       const clip = track?.clips.find((c) => c.id === clipId);
       if (clip && track) {
-        const splitTime = currentTime;
         const effectiveStart = clip.startTime;
         const effectiveEnd =
           clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
-        if (splitTime > effectiveStart && splitTime < effectiveEnd) {
-          updateClipTrim(
-            track.id,
-            clip.id,
-            clip.trimStart,
-            clip.trimEnd + (effectiveEnd - splitTime)
-          );
-          addClipToTrack(track.id, {
-            mediaId: clip.mediaId,
-            name: clip.name + " (split)",
-            duration: clip.duration,
-            startTime: splitTime,
-            trimStart: clip.trimStart + (splitTime - effectiveStart),
-            trimEnd: clip.trimEnd,
-          });
+
+        if (currentTime > effectiveStart && currentTime < effectiveEnd) {
+          const newClipId = splitClip(trackId, clipId, currentTime);
+          if (newClipId) splitCount++;
         }
       }
     });
-    toast.success("Split selected clip(s)");
+
+    if (splitCount > 0) {
+      toast.success(`Split ${splitCount} clip(s) at playhead`);
+    } else {
+      toast.error("Playhead must be within selected clips to split");
+    }
   };
 
   const handleDuplicateSelected = () => {
@@ -530,6 +528,94 @@ export function Timeline() {
     toast.success("Freeze frame added for selected clip(s)");
   };
 
+  const handleSplitAndKeepLeft = () => {
+    if (selectedClips.length === 0) {
+      toast.error("No clips selected");
+      return;
+    }
+
+    let splitCount = 0;
+    selectedClips.forEach(({ trackId, clipId }) => {
+      const track = tracks.find((t) => t.id === trackId);
+      const clip = track?.clips.find((c) => c.id === clipId);
+      if (clip && track) {
+        const effectiveStart = clip.startTime;
+        const effectiveEnd =
+          clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+
+        if (currentTime > effectiveStart && currentTime < effectiveEnd) {
+          splitAndKeepLeft(trackId, clipId, currentTime);
+          splitCount++;
+        }
+      }
+    });
+
+    if (splitCount > 0) {
+      toast.success(`Split and kept left portion of ${splitCount} clip(s)`);
+    } else {
+      toast.error("Playhead must be within selected clips");
+    }
+  };
+
+  const handleSplitAndKeepRight = () => {
+    if (selectedClips.length === 0) {
+      toast.error("No clips selected");
+      return;
+    }
+
+    let splitCount = 0;
+    selectedClips.forEach(({ trackId, clipId }) => {
+      const track = tracks.find((t) => t.id === trackId);
+      const clip = track?.clips.find((c) => c.id === clipId);
+      if (clip && track) {
+        const effectiveStart = clip.startTime;
+        const effectiveEnd =
+          clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+
+        if (currentTime > effectiveStart && currentTime < effectiveEnd) {
+          splitAndKeepRight(trackId, clipId, currentTime);
+          splitCount++;
+        }
+      }
+    });
+
+    if (splitCount > 0) {
+      toast.success(`Split and kept right portion of ${splitCount} clip(s)`);
+    } else {
+      toast.error("Playhead must be within selected clips");
+    }
+  };
+
+  const handleSeparateAudio = () => {
+    if (selectedClips.length === 0) {
+      toast.error("No clips selected");
+      return;
+    }
+
+    let separatedCount = 0;
+    selectedClips.forEach(({ trackId, clipId }) => {
+      const track = tracks.find((t) => t.id === trackId);
+      const clip = track?.clips.find((c) => c.id === clipId);
+      const mediaItem = mediaItems.find((item) => item.id === clip?.mediaId);
+
+      if (
+        clip &&
+        track &&
+        mediaItem?.type === "video" &&
+        track.type === "video"
+      ) {
+        const audioClipId = separateAudio(trackId, clipId);
+        if (audioClipId) separatedCount++;
+      }
+    });
+
+    if (separatedCount > 0) {
+      toast.success(`Separated audio from ${separatedCount} video clip(s)`);
+    } else {
+      toast.error("Select video clips to separate audio");
+    }
+  };
+
   const handleDeleteSelected = () => {
     if (selectedClips.length === 0) {
       toast.error("No clips selected");
@@ -597,8 +683,9 @@ export function Timeline() {
           <div className="w-px h-6 bg-border mx-1" />
 
           {/* Time Display */}
-          <div className="text-xs text-muted-foreground font-mono px-2"
-            style={{ minWidth: '18ch', textAlign: 'center' }}
+          <div
+            className="text-xs text-muted-foreground font-mono px-2"
+            style={{ minWidth: "18ch", textAlign: "center" }}
           >
             {currentTime.toFixed(1)}s / {duration.toFixed(1)}s
           </div>
@@ -641,34 +728,42 @@ export function Timeline() {
                 <Scissors className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
-            <TooltipContent>Split clip (S)</TooltipContent>
+            <TooltipContent>Split clip (Ctrl+S)</TooltipContent>
           </Tooltip>
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="text" size="icon">
+              <Button
+                variant="text"
+                size="icon"
+                onClick={handleSplitAndKeepLeft}
+              >
                 <ArrowLeftToLine className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
-            <TooltipContent>Split and keep left (A)</TooltipContent>
+            <TooltipContent>Split and keep left (Ctrl+Q)</TooltipContent>
           </Tooltip>
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="text" size="icon">
+              <Button
+                variant="text"
+                size="icon"
+                onClick={handleSplitAndKeepRight}
+              >
                 <ArrowRightToLine className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
-            <TooltipContent>Split and keep right (D)</TooltipContent>
+            <TooltipContent>Split and keep right (Ctrl+W)</TooltipContent>
           </Tooltip>
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="text" size="icon">
+              <Button variant="text" size="icon" onClick={handleSeparateAudio}>
                 <SplitSquareHorizontal className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
-            <TooltipContent>Separate audio (E)</TooltipContent>
+            <TooltipContent>Separate audio (Ctrl+D)</TooltipContent>
           </Tooltip>
 
           <Tooltip>
@@ -781,17 +876,19 @@ export function Timeline() {
                     return (
                       <div
                         key={i}
-                        className={`absolute top-0 bottom-0 ${isMainMarker
-                          ? "border-l border-muted-foreground/40"
-                          : "border-l border-muted-foreground/20"
-                          }`}
+                        className={`absolute top-0 bottom-0 ${
+                          isMainMarker
+                            ? "border-l border-muted-foreground/40"
+                            : "border-l border-muted-foreground/20"
+                        }`}
                         style={{ left: `${time * 50 * zoomLevel}px` }}
                       >
                         <span
-                          className={`absolute top-1 left-1 text-xs ${isMainMarker
-                            ? "text-muted-foreground font-medium"
-                            : "text-muted-foreground/70"
-                            }`}
+                          className={`absolute top-1 left-1 text-xs ${
+                            isMainMarker
+                              ? "text-muted-foreground font-medium"
+                              : "text-muted-foreground/70"
+                          }`}
                         >
                           {(() => {
                             const formatTime = (seconds: number) => {
@@ -852,12 +949,13 @@ export function Timeline() {
                   >
                     <div className="flex items-center flex-1 min-w-0">
                       <div
-                        className={`w-3 h-3 rounded-full flex-shrink-0 ${track.type === "video"
-                          ? "bg-blue-500"
-                          : track.type === "audio"
-                            ? "bg-green-500"
-                            : "bg-purple-500"
-                          }`}
+                        className={`w-3 h-3 rounded-full flex-shrink-0 ${
+                          track.type === "video"
+                            ? "bg-blue-500"
+                            : track.type === "audio"
+                              ? "bg-green-500"
+                              : "bg-purple-500"
+                        }`}
                       />
                       <span className="ml-2 text-sm font-medium truncate">
                         {track.name}
@@ -1197,7 +1295,7 @@ function TimelineTrackContent({
     });
   };
 
-  const updateTrimFromMouseMove = (e: { clientX: number; }) => {
+  const updateTrimFromMouseMove = (e: { clientX: number }) => {
     if (!resizing) return;
 
     const clip = track.clips.find((c) => c.id === resizing.clipId);
@@ -1632,18 +1730,18 @@ function TimelineTrackContent({
     }
 
     if (mediaItem.type === "audio") {
-    return (
-      <div className="w-full h-full flex items-center gap-2">
-        <div className="flex-1 min-w-0">
-          <AudioWaveform 
-            audioUrl={mediaItem.url} 
-            height={24}
-            className="w-full"
-          />
+      return (
+        <div className="w-full h-full flex items-center gap-2">
+          <div className="flex-1 min-w-0">
+            <AudioWaveform
+              audioUrl={mediaItem.url}
+              height={24}
+              className="w-full"
+            />
+          </div>
         </div>
-      </div>
-    );
-  }
+      );
+    }
 
     // Fallback for videos without thumbnails
     return (
@@ -1681,12 +1779,13 @@ function TimelineTrackContent({
 
   return (
     <div
-      className={`w-full h-full transition-all duration-150 ease-out ${isDraggedOver
-        ? wouldOverlap
-          ? "bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg"
-          : "bg-blue-500/15 border-2 border-dashed border-blue-400 shadow-lg"
-        : "hover:bg-muted/20"
-        }`}
+      className={`w-full h-full transition-all duration-150 ease-out ${
+        isDraggedOver
+          ? wouldOverlap
+            ? "bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg"
+            : "bg-blue-500/15 border-2 border-dashed border-blue-400 shadow-lg"
+          : "hover:bg-muted/20"
+      }`}
       onContextMenu={(e) => {
         e.preventDefault();
         // Only show track menu if we didn't click on a clip
@@ -1710,12 +1809,13 @@ function TimelineTrackContent({
       <div className="h-full relative track-clips-container min-w-full">
         {track.clips.length === 0 ? (
           <div
-            className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${isDropping
-              ? wouldOverlap
-                ? "border-red-500 bg-red-500/10 text-red-600"
-                : "border-blue-500 bg-blue-500/10 text-blue-600"
-              : "border-muted/30"
-              }`}
+            className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${
+              isDropping
+                ? wouldOverlap
+                  ? "border-red-500 bg-red-500/10 text-red-600"
+                  : "border-blue-500 bg-blue-500/10 text-blue-600"
+                : "border-muted/30"
+            }`}
           >
             {isDropping
               ? wouldOverlap
@@ -1860,4 +1960,3 @@ function TimelineTrackContent({
     </div>
   );
 }
-

From efdd2aa6edd092ff81d6d7cf38e57cc5b58df285 Mon Sep 17 00:00:00 2001
From: DevloperAmanSingh <amansinghneh211205@gmail.com>
Date: Thu, 26 Jun 2025 23:41:07 +0530
Subject: [PATCH 04/12] feat: add dropdown menu for clip options including
 split and audio separation in timeline component

---
 .../src/components/editor/timeline-clip.tsx   | 269 ++++++++++++------
 1 file changed, 185 insertions(+), 84 deletions(-)

diff --git a/apps/web/src/components/editor/timeline-clip.tsx b/apps/web/src/components/editor/timeline-clip.tsx
index 4c0d3b7..b5b8d20 100644
--- a/apps/web/src/components/editor/timeline-clip.tsx
+++ b/apps/web/src/components/editor/timeline-clip.tsx
@@ -2,7 +2,15 @@
 
 import { useState } from "react";
 import { Button } from "../ui/button";
-import { MoreVertical, Scissors, Trash2 } from "lucide-react";
+import {
+  MoreVertical,
+  Scissors,
+  Trash2,
+  SplitSquareHorizontal,
+  Music,
+  ChevronRight,
+  ChevronLeft,
+} from "lucide-react";
 import { useMediaStore } from "@/stores/media-store";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { usePlaybackStore } from "@/stores/playback-store";
@@ -10,6 +18,17 @@ import { useDragClip } from "@/hooks/use-drag-clip";
 import AudioWaveform from "./audio-waveform";
 import { toast } from "sonner";
 import { TimelineClipProps, ResizeState } from "@/types/timeline";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from "../ui/dropdown-menu";
+import { isDragging } from "motion/react";
 
 export function TimelineClip({
   clip,
@@ -21,8 +40,16 @@ export function TimelineClip({
   onClipClick,
 }: TimelineClipProps) {
   const { mediaItems } = useMediaStore();
-  const { updateClipTrim, addClipToTrack, removeClipFromTrack, dragState } =
-    useTimelineStore();
+  const {
+    updateClipTrim,
+    addClipToTrack,
+    removeClipFromTrack,
+    dragState,
+    splitClip,
+    splitAndKeepLeft,
+    splitAndKeepRight,
+    separateAudio,
+  } = useTimelineStore();
   const { currentTime } = usePlaybackStore();
 
   const [resizing, setResizing] = useState<ResizeState | null>(null);
@@ -31,7 +58,6 @@ export function TimelineClip({
   const effectiveDuration = clip.duration - clip.trimStart - clip.trimEnd;
   const clipWidth = Math.max(80, effectiveDuration * 50 * zoomLevel);
 
-  // Use real-time position during drag, otherwise use stored position
   const isBeingDragged = dragState.clipId === clip.id;
   const clipStartTime =
     isBeingDragged && dragState.isDragging
@@ -107,44 +133,85 @@ export function TimelineClip({
   const handleDeleteClip = () => {
     removeClipFromTrack(track.id, clip.id);
     setClipMenuOpen(false);
+    toast.success("Clip deleted");
   };
 
   const handleSplitClip = () => {
-    // Use current playback time as split point
-    const splitTime = currentTime;
-    // Only split if splitTime is within the clip's effective range
     const effectiveStart = clip.startTime;
     const effectiveEnd =
       clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
 
-    if (splitTime <= effectiveStart || splitTime >= effectiveEnd) {
+    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
       toast.error("Playhead must be within clip to split");
       return;
     }
 
-    const firstDuration = splitTime - effectiveStart;
-    const secondDuration = effectiveEnd - splitTime;
-
-    // First part: adjust original clip
-    updateClipTrim(
-      track.id,
-      clip.id,
-      clip.trimStart,
-      clip.trimEnd + secondDuration
-    );
-
-    // Second part: add new clip after split
-    addClipToTrack(track.id, {
-      mediaId: clip.mediaId,
-      name: clip.name + " (cut)",
-      duration: clip.duration,
-      startTime: splitTime,
-      trimStart: clip.trimStart + firstDuration,
-      trimEnd: clip.trimEnd,
-    });
-
+    const secondClipId = splitClip(track.id, clip.id, currentTime);
+    if (secondClipId) {
+      toast.success("Clip split successfully");
+    } else {
+      toast.error("Failed to split clip");
+    }
     setClipMenuOpen(false);
-    toast.success("Clip split successfully");
+  };
+
+  const handleSplitAndKeepLeft = () => {
+    const effectiveStart = clip.startTime;
+    const effectiveEnd =
+      clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+
+    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
+      toast.error("Playhead must be within clip");
+      return;
+    }
+
+    splitAndKeepLeft(track.id, clip.id, currentTime);
+    toast.success("Split and kept left portion");
+    setClipMenuOpen(false);
+  };
+
+  const handleSplitAndKeepRight = () => {
+    const effectiveStart = clip.startTime;
+    const effectiveEnd =
+      clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+
+    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
+      toast.error("Playhead must be within clip");
+      return;
+    }
+
+    splitAndKeepRight(track.id, clip.id, currentTime);
+    toast.success("Split and kept right portion");
+    setClipMenuOpen(false);
+  };
+
+  const handleSeparateAudio = () => {
+    const mediaItem = mediaItems.find((item) => item.id === clip.mediaId);
+
+    if (!mediaItem || mediaItem.type !== "video") {
+      toast.error("Audio separation only available for video clips");
+      return;
+    }
+
+    const audioClipId = separateAudio(track.id, clip.id);
+    if (audioClipId) {
+      toast.success("Audio separated to audio track");
+    } else {
+      toast.error("Failed to separate audio");
+    }
+    setClipMenuOpen(false);
+  };
+
+  const canSplitAtPlayhead = () => {
+    const effectiveStart = clip.startTime;
+    const effectiveEnd =
+      clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+    return currentTime > effectiveStart && currentTime < effectiveEnd;
+  };
+
+  const canSeparateAudio = () => {
+    const mediaItem = mediaItems.find((item) => item.id === clip.mediaId);
+    return mediaItem?.type === "video" && track.type === "video";
   };
 
   const renderClipContent = () => {
@@ -201,76 +268,110 @@ export function TimelineClip({
       );
     }
 
-    // Fallback for videos without thumbnails
     return (
       <span className="text-xs text-foreground/80 truncate">{clip.name}</span>
     );
   };
 
+  const handleClipMouseDown = (e: React.MouseEvent) => {
+    if (onClipMouseDown) {
+      onClipMouseDown(e, clip);
+    }
+  };
+
   return (
     <div
-      className={`timeline-clip absolute h-full border ${getTrackColor(track.type)} flex items-center py-3 min-w-[80px] overflow-hidden group hover:shadow-lg ${isSelected ? "ring-2 ring-blue-500 z-10" : ""} ${isBeingDragged ? "shadow-lg z-20" : ""}`}
-      style={{ width: `${clipWidth}px`, left: `${clipLeft}px` }}
-      onMouseDown={(e) => onClipMouseDown(e, clip)}
-      onClick={(e) => onClipClick(e, clip)}
-      onMouseMove={handleResizeMove}
-      onMouseUp={handleResizeEnd}
-      onMouseLeave={handleResizeEnd}
-      tabIndex={0}
-      onContextMenu={(e) => onContextMenu(e, clip.id)}
+      className={`absolute top-0 h-full select-none transition-all duration-75 ${
+        isBeingDragged ? "z-50" : "z-10"
+      } ${isSelected ? "ring-2 ring-primary" : ""}`}
+      style={{
+        left: `${clipLeft}px`,
+        width: `${clipWidth}px`,
+      }}
+      onMouseMove={resizing ? handleResizeMove : undefined}
+      onMouseUp={resizing ? handleResizeEnd : undefined}
+      onMouseLeave={resizing ? handleResizeEnd : undefined}
     >
-      {/* Left trim handle */}
       <div
-        className={`absolute left-0 top-0 bottom-0 w-2 cursor-w-resize transition-opacity bg-blue-500/50 hover:bg-blue-500 ${isSelected ? "opacity-100" : "opacity-0"}`}
-        onMouseDown={(e) => handleResizeStart(e, clip.id, "left")}
-      />
+        className={`relative h-full rounded border cursor-pointer overflow-hidden ${getTrackColor(
+          track.type
+        )} ${isSelected ? "ring-2 ring-primary ring-offset-1" : ""}`}
+        onClick={(e) => onClipClick && onClipClick(e, clip)}
+        onMouseDown={handleClipMouseDown}
+        onContextMenu={(e) => onContextMenu && onContextMenu(e, clip.id)}
+      >
+        <div className="absolute inset-1 flex items-center p-1">
+          {renderClipContent()}
+        </div>
 
-      {/* Clip content */}
-      <div className="flex-1 relative">
-        {renderClipContent()}
+        <div
+          className="absolute left-0 top-0 bottom-0 w-1 cursor-w-resize hover:bg-primary/50 transition-colors"
+          onMouseDown={(e) => handleResizeStart(e, clip.id, "left")}
+        />
+        <div
+          className="absolute right-0 top-0 bottom-0 w-1 cursor-e-resize hover:bg-primary/50 transition-colors"
+          onMouseDown={(e) => handleResizeStart(e, clip.id, "right")}
+        />
 
-        {/* Clip options menu */}
-        <div className="absolute top-1 right-1 z-10">
-          <Button
-            variant="text"
-            size="icon"
-            className="opacity-0 group-hover:opacity-100 transition-opacity"
-            onClick={(e) => {
-              e.stopPropagation();
-              setClipMenuOpen(!clipMenuOpen);
-            }}
-            onMouseDown={(e) => e.stopPropagation()}
-          >
-            <MoreVertical className="h-4 w-4" />
-          </Button>
-
-          {clipMenuOpen && (
-            <div
-              className="absolute right-0 mt-2 w-32 bg-white border rounded shadow z-50"
-              onMouseDown={(e) => e.stopPropagation()}
-            >
-              <button
-                className="flex items-center w-full px-3 py-2 text-sm hover:bg-muted/30"
-                onClick={handleSplitClip}
+        <div className="absolute top-1 right-1">
+          <DropdownMenu open={clipMenuOpen} onOpenChange={setClipMenuOpen}>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-6 w-6 p-0 opacity-0 group-hover:opacity-100 transition-opacity bg-background/80 hover:bg-background"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setClipMenuOpen(true);
+                }}
               >
-                <Scissors className="h-4 w-4 mr-2" /> Split
-              </button>
-              <button
-                className="flex items-center w-full px-3 py-2 text-sm text-red-600 hover:bg-red-50"
+                <MoreVertical className="h-3 w-3" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-56">
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger disabled={!canSplitAtPlayhead()}>
+                  <Scissors className="mr-2 h-4 w-4" />
+                  Split
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuItem onClick={handleSplitClip}>
+                    <SplitSquareHorizontal className="mr-2 h-4 w-4" />
+                    Split at Playhead
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={handleSplitAndKeepLeft}>
+                    <ChevronLeft className="mr-2 h-4 w-4" />
+                    Split and Keep Left
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={handleSplitAndKeepRight}>
+                    <ChevronRight className="mr-2 h-4 w-4" />
+                    Split and Keep Right
+                  </DropdownMenuItem>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+
+              {canSeparateAudio() && (
+                <>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={handleSeparateAudio}>
+                    <Music className="mr-2 h-4 w-4" />
+                    Separate Audio
+                  </DropdownMenuItem>
+                </>
+              )}
+
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
                 onClick={handleDeleteClip}
+                className="text-destructive"
               >
-                <Trash2 className="h-4 w-4 mr-2" /> Delete
-              </button>
-            </div>
-          )}
+                <Trash2 className="mr-2 h-4 w-4" />
+                Delete Clip
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </div>
       </div>
-
-      {/* Right trim handle */}
-      <div
-        className={`absolute right-0 top-0 bottom-0 w-2 cursor-e-resize transition-opacity bg-blue-500/50 hover:bg-blue-500 ${isSelected ? "opacity-100" : "opacity-0"}`}
-        onMouseDown={(e) => handleResizeStart(e, clip.id, "right")}
-      />
     </div>
   );
 }

From 7ca5bcfa50e58e4a661072a5561b1e548f1dfed7 Mon Sep 17 00:00:00 2001
From: DevloperAmanSingh <amansinghneh211205@gmail.com>
Date: Thu, 26 Jun 2025 23:46:33 +0530
Subject: [PATCH 05/12] feat: add comments for drag handling and resizing in
 timeline clip component

---
 apps/web/src/components/editor/timeline-clip.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/web/src/components/editor/timeline-clip.tsx b/apps/web/src/components/editor/timeline-clip.tsx
index b5b8d20..6b97411 100644
--- a/apps/web/src/components/editor/timeline-clip.tsx
+++ b/apps/web/src/components/editor/timeline-clip.tsx
@@ -58,6 +58,7 @@ export function TimelineClip({
   const effectiveDuration = clip.duration - clip.trimStart - clip.trimEnd;
   const clipWidth = Math.max(80, effectiveDuration * 50 * zoomLevel);
 
+  // Use real-time position during drag, otherwise use stored position
   const isBeingDragged = dragState.clipId === clip.id;
   const clipStartTime =
     isBeingDragged && dragState.isDragging
@@ -78,6 +79,7 @@ export function TimelineClip({
     }
   };
 
+  // Resize handles for trimming clips
   const handleResizeStart = (
     e: React.MouseEvent,
     clipId: string,
@@ -329,6 +331,7 @@ export function TimelineClip({
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-56">
+              {/* Split operations - only available when playhead is within clip */}
               <DropdownMenuSub>
                 <DropdownMenuSubTrigger disabled={!canSplitAtPlayhead()}>
                   <Scissors className="mr-2 h-4 w-4" />
@@ -350,6 +353,7 @@ export function TimelineClip({
                 </DropdownMenuSubContent>
               </DropdownMenuSub>
 
+              {/* Audio separation - only available for video clips */}
               {canSeparateAudio() && (
                 <>
                   <DropdownMenuSeparator />

From f74bebeb8b95891a6e0ea0cfe6a67b786dc826de Mon Sep 17 00:00:00 2001
From: DevloperAmanSingh <amansinghneh211205@gmail.com>
Date: Thu, 26 Jun 2025 23:46:38 +0530
Subject: [PATCH 06/12] feat: add comment for clip editing operations in
 timeline component

---
 apps/web/src/components/editor/timeline.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index b1eac6f..b20006d 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -722,6 +722,7 @@ export function Timeline() {
 
           <div className="w-px h-6 bg-border mx-1" />
 
+          {/* Clip editing operations */}
           <Tooltip>
             <TooltipTrigger asChild>
               <Button variant="text" size="icon" onClick={handleSplitSelected}>

From a816cc503f692f43b966b6f166691a18fc3fe76f Mon Sep 17 00:00:00 2001
From: DevloperAmanSingh <amansinghneh211205@gmail.com>
Date: Thu, 26 Jun 2025 23:46:43 +0530
Subject: [PATCH 07/12] feat: add detailed comments for clip splitting and
 audio separation methods in timeline store

---
 apps/web/src/stores/timeline-store.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index a6da4e2..f789548 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -74,7 +74,7 @@ interface TimelineStore {
   ) => void;
   toggleTrackMute: (trackId: string) => void;
 
-  // Split operations
+  // Split operations for clips
   splitClip: (
     trackId: string,
     clipId: string,
@@ -339,6 +339,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
     return secondClipId;
   },
 
+  // Split clip and keep only the left portion
   splitAndKeepLeft: (trackId, clipId, splitTime) => {
     const { tracks } = get();
     const track = tracks.find((t) => t.id === trackId);
@@ -378,6 +379,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
     }));
   },
 
+  // Split clip and keep only the right portion
   splitAndKeepRight: (trackId, clipId, splitTime) => {
     const { tracks } = get();
     const track = tracks.find((t) => t.id === trackId);
@@ -416,6 +418,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
     }));
   },
 
+  // Extract audio from video clip to an audio track
   separateAudio: (trackId, clipId) => {
     const { tracks } = get();
     const track = tracks.find((t) => t.id === trackId);
@@ -425,6 +428,7 @@ 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) {

From 0383000adacc19d582799fd5935916dff7cbf83e Mon Sep 17 00:00:00 2001
From: DevloperAmanSingh <amansinghneh211205@gmail.com>
Date: Fri, 27 Jun 2025 00:07:36 +0530
Subject: [PATCH 08/12] refactor: remove unused drag clip hook import in
 timeline clip component

---
 apps/web/src/components/editor/timeline-clip.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/web/src/components/editor/timeline-clip.tsx b/apps/web/src/components/editor/timeline-clip.tsx
index 6b97411..b9d3b9a 100644
--- a/apps/web/src/components/editor/timeline-clip.tsx
+++ b/apps/web/src/components/editor/timeline-clip.tsx
@@ -14,7 +14,6 @@ import {
 import { useMediaStore } from "@/stores/media-store";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { usePlaybackStore } from "@/stores/playback-store";
-import { useDragClip } from "@/hooks/use-drag-clip";
 import AudioWaveform from "./audio-waveform";
 import { toast } from "sonner";
 import { TimelineClipProps, ResizeState } from "@/types/timeline";

From 3f0fe9d20e85a10e8615fd868e9ff8222dba0c29 Mon Sep 17 00:00:00 2001
From: DevloperAmanSingh <amansinghneh211205@gmail.com>
Date: Fri, 27 Jun 2025 00:07:41 +0530
Subject: [PATCH 09/12] refactor: improve playback controls by replacing inline
 functions with useCallback for clip manipulation and audio separation

---
 apps/web/src/hooks/use-playback-controls.ts | 224 ++++++++++----------
 1 file changed, 112 insertions(+), 112 deletions(-)

diff --git a/apps/web/src/hooks/use-playback-controls.ts b/apps/web/src/hooks/use-playback-controls.ts
index 23bffe1..2c68947 100644
--- a/apps/web/src/hooks/use-playback-controls.ts
+++ b/apps/web/src/hooks/use-playback-controls.ts
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useCallback } from "react";
 import { usePlaybackStore } from "@/stores/playback-store";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { toast } from "sonner";
@@ -15,8 +15,101 @@ export const usePlaybackControls = () => {
     separateAudio,
   } = useTimelineStore();
 
-  useEffect(() => {
-    const handleKeyPress = (e: KeyboardEvent) => {
+  const handleSplitSelectedClip = useCallback(() => {
+    if (selectedClips.length !== 1) {
+      toast.error("Select exactly one clip to split");
+      return;
+    }
+
+    const { trackId, clipId } = selectedClips[0];
+    const track = tracks.find((t) => t.id === trackId);
+    const clip = track?.clips.find((c) => c.id === clipId);
+
+    if (!clip) return;
+
+    const effectiveStart = clip.startTime;
+    const effectiveEnd =
+      clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+
+    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
+      toast.error("Playhead must be within selected clip");
+      return;
+    }
+
+    splitClip(trackId, clipId, currentTime);
+    toast.success("Clip split at playhead");
+  }, [selectedClips, tracks, currentTime, splitClip]);
+
+  const handleSplitAndKeepLeftCallback = useCallback(() => {
+    if (selectedClips.length !== 1) {
+      toast.error("Select exactly one clip");
+      return;
+    }
+
+    const { trackId, clipId } = selectedClips[0];
+    const track = tracks.find((t) => t.id === trackId);
+    const clip = track?.clips.find((c) => c.id === clipId);
+
+    if (!clip) return;
+
+    const effectiveStart = clip.startTime;
+    const effectiveEnd =
+      clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+
+    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
+      toast.error("Playhead must be within selected clip");
+      return;
+    }
+
+    splitAndKeepLeft(trackId, clipId, currentTime);
+    toast.success("Split and kept left portion");
+  }, [selectedClips, tracks, currentTime, splitAndKeepLeft]);
+
+  const handleSplitAndKeepRightCallback = useCallback(() => {
+    if (selectedClips.length !== 1) {
+      toast.error("Select exactly one clip");
+      return;
+    }
+
+    const { trackId, clipId } = selectedClips[0];
+    const track = tracks.find((t) => t.id === trackId);
+    const clip = track?.clips.find((c) => c.id === clipId);
+
+    if (!clip) return;
+
+    const effectiveStart = clip.startTime;
+    const effectiveEnd =
+      clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+
+    if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
+      toast.error("Playhead must be within selected clip");
+      return;
+    }
+
+    splitAndKeepRight(trackId, clipId, currentTime);
+    toast.success("Split and kept right portion");
+  }, [selectedClips, tracks, currentTime, splitAndKeepRight]);
+
+  const handleSeparateAudioCallback = useCallback(() => {
+    if (selectedClips.length !== 1) {
+      toast.error("Select exactly one video clip to separate audio");
+      return;
+    }
+
+    const { trackId, clipId } = selectedClips[0];
+    const track = tracks.find((t) => t.id === trackId);
+
+    if (!track || track.type !== "video") {
+      toast.error("Select a video clip to separate audio");
+      return;
+    }
+
+    separateAudio(trackId, clipId);
+    toast.success("Audio separated to audio track");
+  }, [selectedClips, tracks, separateAudio]);
+
+  const handleKeyPress = useCallback(
+    (e: KeyboardEvent) => {
       if (
         e.target instanceof HTMLInputElement ||
         e.target instanceof HTMLTextAreaElement
@@ -44,131 +137,38 @@ export const usePlaybackControls = () => {
         case "q":
           if (e.ctrlKey || e.metaKey) {
             e.preventDefault();
-            handleSplitAndKeepLeft();
+            handleSplitAndKeepLeftCallback();
           }
           break;
 
         case "w":
           if (e.ctrlKey || e.metaKey) {
             e.preventDefault();
-            handleSplitAndKeepRight();
+            handleSplitAndKeepRightCallback();
           }
           break;
 
         case "d":
           if (e.ctrlKey || e.metaKey) {
             e.preventDefault();
-            handleSeparateAudio();
+            handleSeparateAudioCallback();
           }
           break;
       }
-    };
-
-    const handleSplitSelectedClip = () => {
-      if (selectedClips.length !== 1) {
-        toast.error("Select exactly one clip to split");
-        return;
-      }
-
-      const { trackId, clipId } = selectedClips[0];
-      const track = tracks.find((t) => t.id === trackId);
-      const clip = track?.clips.find((c) => c.id === clipId);
-
-      if (!clip) return;
-
-      const effectiveStart = clip.startTime;
-      const effectiveEnd =
-        clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
-
-      if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
-        toast.error("Playhead must be within selected clip");
-        return;
-      }
-
-      splitClip(trackId, clipId, currentTime);
-      toast.success("Clip split at playhead");
-    };
-
-    const handleSplitAndKeepLeft = () => {
-      if (selectedClips.length !== 1) {
-        toast.error("Select exactly one clip");
-        return;
-      }
-
-      const { trackId, clipId } = selectedClips[0];
-      const track = tracks.find((t) => t.id === trackId);
-      const clip = track?.clips.find((c) => c.id === clipId);
-
-      if (!clip) return;
-
-      const effectiveStart = clip.startTime;
-      const effectiveEnd =
-        clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
-
-      if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
-        toast.error("Playhead must be within selected clip");
-        return;
-      }
-
-      splitAndKeepLeft(trackId, clipId, currentTime);
-      toast.success("Split and kept left portion");
-    };
-
-    const handleSplitAndKeepRight = () => {
-      if (selectedClips.length !== 1) {
-        toast.error("Select exactly one clip");
-        return;
-      }
-
-      const { trackId, clipId } = selectedClips[0];
-      const track = tracks.find((t) => t.id === trackId);
-      const clip = track?.clips.find((c) => c.id === clipId);
-
-      if (!clip) return;
-
-      const effectiveStart = clip.startTime;
-      const effectiveEnd =
-        clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
-
-      if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
-        toast.error("Playhead must be within selected clip");
-        return;
-      }
-
-      splitAndKeepRight(trackId, clipId, currentTime);
-      toast.success("Split and kept right portion");
-    };
-
-    const handleSeparateAudio = () => {
-      if (selectedClips.length !== 1) {
-        toast.error("Select exactly one video clip to separate audio");
-        return;
-      }
-
-      const { trackId, clipId } = selectedClips[0];
-      const track = tracks.find((t) => t.id === trackId);
-
-      if (!track || track.type !== "video") {
-        toast.error("Select a video clip to separate audio");
-        return;
-      }
-
-      separateAudio(trackId, clipId);
-      toast.success("Audio separated to audio track");
-    };
+    },
+    [
+      isPlaying,
+      play,
+      pause,
+      handleSplitSelectedClip,
+      handleSplitAndKeepLeftCallback,
+      handleSplitAndKeepRightCallback,
+      handleSeparateAudioCallback,
+    ]
+  );
 
+  useEffect(() => {
     document.addEventListener("keydown", handleKeyPress);
     return () => document.removeEventListener("keydown", handleKeyPress);
-  }, [
-    isPlaying,
-    currentTime,
-    selectedClips,
-    tracks,
-    play,
-    pause,
-    splitClip,
-    splitAndKeepLeft,
-    splitAndKeepRight,
-    separateAudio,
-  ]);
+  }, [handleKeyPress]);
 };

From 6262f2b3797623cc1b62c82a8e810ad3aaf1d2b1 Mon Sep 17 00:00:00 2001
From: DevloperAmanSingh <amansinghneh211205@gmail.com>
Date: Fri, 27 Jun 2025 00:07:47 +0530
Subject: [PATCH 10/12] refactor: introduce helper function for consistent clip
 naming with suffixes in timeline store

---
 apps/web/src/stores/timeline-store.ts | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index f789548..dd97879 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -1,5 +1,20 @@
 import { create } from "zustand";
 
+// Helper function to manage clip naming with suffixes
+const getClipNameWithSuffix = (
+  originalName: string,
+  suffix: string
+): string => {
+  // Remove existing suffixes to prevent accumulation
+  const baseName = originalName
+    .replace(/ \(left\)$/, "")
+    .replace(/ \(right\)$/, "")
+    .replace(/ \(audio\)$/, "")
+    .replace(/ \(split \d+\)$/, "");
+
+  return `${baseName} (${suffix})`;
+};
+
 export interface TimelineClip {
   id: string;
   mediaId: string;
@@ -319,14 +334,14 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
                       {
                         ...c,
                         trimEnd: c.trimEnd + secondDuration,
-                        name: c.name + " (left)",
+                        name: getClipNameWithSuffix(c.name, "left"),
                       },
                       {
                         ...c,
                         id: secondClipId,
                         startTime: splitTime,
                         trimStart: c.trimStart + firstDuration,
-                        name: c.name + " (right)",
+                        name: getClipNameWithSuffix(c.name, "right"),
                       },
                     ]
                   : [c]
@@ -369,7 +384,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
                   ? {
                       ...c,
                       trimEnd: c.trimEnd + durationToRemove,
-                      name: c.name + " (left)",
+                      name: getClipNameWithSuffix(c.name, "left"),
                     }
                   : c
               ),
@@ -408,7 +423,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
                       ...c,
                       startTime: splitTime,
                       trimStart: c.trimStart + relativeTime,
-                      name: c.name + " (right)",
+                      name: getClipNameWithSuffix(c.name, "right"),
                     }
                   : c
               ),
@@ -458,7 +473,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
                 {
                   ...clip,
                   id: audioClipId,
-                  name: clip.name + " (audio)",
+                  name: getClipNameWithSuffix(clip.name, "audio"),
                 },
               ],
             }

From 0bdbd7e2b3feb698ba35b03ec834dd924d4e21d3 Mon Sep 17 00:00:00 2001
From: DevloperAmanSingh <amansinghneh211205@gmail.com>
Date: Fri, 27 Jun 2025 00:14:29 +0530
Subject: [PATCH 11/12] refactor: streamline audio track handling by
 consolidating clip addition logic in timeline store

---
 apps/web/src/stores/timeline-store.ts | 58 +++++++++++++++------------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index dd97879..04b2f6f 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -443,16 +443,42 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
 
     get().pushHistory();
 
-    // Find or create an audio track
-    let audioTrackId = tracks.find((t) => t.type === "audio")?.id;
+    // Find existing audio track or prepare to create one
+    const existingAudioTrack = tracks.find((t) => t.type === "audio");
+    const audioClipId = crypto.randomUUID();
 
-    if (!audioTrackId) {
-      audioTrackId = crypto.randomUUID();
+    if (existingAudioTrack) {
+      // Add audio clip to existing audio track
+      set((state) => ({
+        tracks: state.tracks.map((track) =>
+          track.id === existingAudioTrack.id
+            ? {
+                ...track,
+                clips: [
+                  ...track.clips,
+                  {
+                    ...clip,
+                    id: audioClipId,
+                    name: getClipNameWithSuffix(clip.name, "audio"),
+                  },
+                ],
+              }
+            : track
+        ),
+      }));
+    } else {
+      // Create new audio track with the audio clip in a single atomic update
       const newAudioTrack: TimelineTrack = {
-        id: audioTrackId,
+        id: crypto.randomUUID(),
         name: "Audio Track",
         type: "audio",
-        clips: [],
+        clips: [
+          {
+            ...clip,
+            id: audioClipId,
+            name: getClipNameWithSuffix(clip.name, "audio"),
+          },
+        ],
         muted: false,
       };
 
@@ -461,26 +487,6 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
       }));
     }
 
-    const audioClipId = crypto.randomUUID();
-
-    set((state) => ({
-      tracks: state.tracks.map((track) =>
-        track.id === audioTrackId
-          ? {
-              ...track,
-              clips: [
-                ...track.clips,
-                {
-                  ...clip,
-                  id: audioClipId,
-                  name: getClipNameWithSuffix(clip.name, "audio"),
-                },
-              ],
-            }
-          : track
-      ),
-    }));
-
     return audioClipId;
   },
 

From c32daa4f2ec967902f2ce12d291f8034ca8bce38 Mon Sep 17 00:00:00 2001
From: DevloperAmanSingh <amansinghneh211205@gmail.com>
Date: Fri, 27 Jun 2025 07:56:18 +0530
Subject: [PATCH 12/12] refactor: enhance timeline component by improving
 drag-and-drop functionality and clip selection handling

---
 apps/web/src/components/editor/timeline.tsx | 708 ++++++++------------
 1 file changed, 275 insertions(+), 433 deletions(-)

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index b20006d..f4c2473 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -1,27 +1,37 @@
 "use client";
 
-import { processMediaFiles } from "@/lib/media-processing";
-import { useMediaStore } from "@/stores/media-store";
-import { usePlaybackStore } from "@/stores/playback-store";
-import { useTimelineStore, type TimelineTrack } from "@/stores/timeline-store";
+import { ScrollArea } from "../ui/scroll-area";
+import { Button } from "../ui/button";
 import {
+  Scissors,
   ArrowLeftToLine,
   ArrowRightToLine,
-  Copy,
-  MoreVertical,
-  Pause,
-  Play,
-  Scissors,
-  Snowflake,
-  SplitSquareHorizontal,
   Trash2,
+  Snowflake,
+  Copy,
+  SplitSquareHorizontal,
   Volume2,
   VolumeX,
+  Pause,
+  Play,
 } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipProvider,
+} from "../ui/tooltip";
+import {
+  useTimelineStore,
+  type TimelineTrack,
+  type TimelineClip as TypeTimelineClip,
+} from "@/stores/timeline-store";
+import { useMediaStore } from "@/stores/media-store";
+import { usePlaybackStore } from "@/stores/playback-store";
+import { useDragClip } from "@/hooks/use-drag-clip";
+import { processMediaFiles } from "@/lib/media-processing";
 import { toast } from "sonner";
-import { Button } from "../ui/button";
-import { ScrollArea } from "../ui/scroll-area";
+import { useState, useRef, useEffect, useCallback } from "react";
 import {
   Select,
   SelectContent,
@@ -29,15 +39,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../ui/select";
-
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "../ui/tooltip";
-
-import AudioWaveform from "./audio-waveform";
+import { TimelineClip } from "./timeline-clip";
+import { ContextMenuState } from "@/types/timeline";
 
 export function Timeline() {
   // Timeline shows all tracks (video, audio, effects) and their clips.
@@ -55,12 +58,12 @@ export function Timeline() {
     clearSelectedClips,
     setSelectedClips,
     updateClipTrim,
-    undo,
-    redo,
     splitClip,
     splitAndKeepLeft,
     splitAndKeepRight,
     separateAudio,
+    undo,
+    redo,
   } = useTimelineStore();
   const { mediaItems, addMediaItem } = useMediaStore();
   const {
@@ -75,19 +78,14 @@ export function Timeline() {
   } = usePlaybackStore();
   const [isDragOver, setIsDragOver] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
+  const [progress, setProgress] = useState(0);
   const [zoomLevel, setZoomLevel] = useState(1);
   const dragCounterRef = useRef(0);
   const timelineRef = useRef<HTMLDivElement>(null);
   const [isInTimeline, setIsInTimeline] = useState(false);
 
   // Unified context menu state
-  const [contextMenu, setContextMenu] = useState<{
-    type: "track" | "clip";
-    trackId: string;
-    clipId?: string;
-    x: number;
-    y: number;
-  } | null>(null);
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
 
   // Marquee selection state
   const [marquee, setMarquee] = useState<{
@@ -340,8 +338,12 @@ export function Timeline() {
     } else if (e.dataTransfer.files?.length > 0) {
       // Handle file drops by creating new tracks
       setIsProcessing(true);
+      setProgress(0);
       try {
-        const processedItems = await processMediaFiles(e.dataTransfer.files);
+        const processedItems = await processMediaFiles(
+          e.dataTransfer.files,
+          (p) => setProgress(p)
+        );
         for (const processedItem of processedItems) {
           addMediaItem(processedItem);
           const currentMediaItems = useMediaStore.getState().mediaItems;
@@ -369,6 +371,7 @@ export function Timeline() {
         toast.error("Failed to process dropped files");
       } finally {
         setIsProcessing(false);
+        setProgress(0);
       }
     }
   };
@@ -456,7 +459,6 @@ export function Timeline() {
       toast.error("No clips selected");
       return;
     }
-
     let splitCount = 0;
     selectedClips.forEach(({ trackId, clipId }) => {
       const track = tracks.find((t) => t.id === trackId);
@@ -472,7 +474,6 @@ export function Timeline() {
         }
       }
     });
-
     if (splitCount > 0) {
       toast.success(`Split ${splitCount} clip(s) at playhead`);
     } else {
@@ -527,29 +528,27 @@ export function Timeline() {
     });
     toast.success("Freeze frame added for selected clip(s)");
   };
-
   const handleSplitAndKeepLeft = () => {
     if (selectedClips.length === 0) {
       toast.error("No clips selected");
       return;
     }
-
+    
     let splitCount = 0;
     selectedClips.forEach(({ trackId, clipId }) => {
       const track = tracks.find((t) => t.id === trackId);
       const clip = track?.clips.find((c) => c.id === clipId);
       if (clip && track) {
         const effectiveStart = clip.startTime;
-        const effectiveEnd =
-          clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
-
+        const effectiveEnd = clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+        
         if (currentTime > effectiveStart && currentTime < effectiveEnd) {
           splitAndKeepLeft(trackId, clipId, currentTime);
           splitCount++;
         }
       }
     });
-
+    
     if (splitCount > 0) {
       toast.success(`Split and kept left portion of ${splitCount} clip(s)`);
     } else {
@@ -562,23 +561,22 @@ export function Timeline() {
       toast.error("No clips selected");
       return;
     }
-
+    
     let splitCount = 0;
     selectedClips.forEach(({ trackId, clipId }) => {
       const track = tracks.find((t) => t.id === trackId);
       const clip = track?.clips.find((c) => c.id === clipId);
       if (clip && track) {
         const effectiveStart = clip.startTime;
-        const effectiveEnd =
-          clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
-
+        const effectiveEnd = clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+        
         if (currentTime > effectiveStart && currentTime < effectiveEnd) {
           splitAndKeepRight(trackId, clipId, currentTime);
           splitCount++;
         }
       }
     });
-
+    
     if (splitCount > 0) {
       toast.success(`Split and kept right portion of ${splitCount} clip(s)`);
     } else {
@@ -591,31 +589,25 @@ export function Timeline() {
       toast.error("No clips selected");
       return;
     }
-
+    
     let separatedCount = 0;
     selectedClips.forEach(({ trackId, clipId }) => {
       const track = tracks.find((t) => t.id === trackId);
       const clip = track?.clips.find((c) => c.id === clipId);
       const mediaItem = mediaItems.find((item) => item.id === clip?.mediaId);
-
-      if (
-        clip &&
-        track &&
-        mediaItem?.type === "video" &&
-        track.type === "video"
-      ) {
+      
+      if (clip && track && mediaItem?.type === "video" && track.type === "video") {
         const audioClipId = separateAudio(trackId, clipId);
         if (audioClipId) separatedCount++;
       }
     });
-
+    
     if (separatedCount > 0) {
       toast.success(`Separated audio from ${separatedCount} video clip(s)`);
     } else {
       toast.error("Select video clips to separate audio");
     }
   };
-
   const handleDeleteSelected = () => {
     if (selectedClips.length === 0) {
       toast.error("No clips selected");
@@ -722,7 +714,6 @@ export function Timeline() {
 
           <div className="w-px h-6 bg-border mx-1" />
 
-          {/* Clip editing operations */}
           <Tooltip>
             <TooltipTrigger asChild>
               <Button variant="text" size="icon" onClick={handleSplitSelected}>
@@ -734,11 +725,7 @@ export function Timeline() {
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button
-                variant="text"
-                size="icon"
-                onClick={handleSplitAndKeepLeft}
-              >
+              <Button variant="text" size="icon" onClick={handleSplitAndKeepLeft}>
                 <ArrowLeftToLine className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -747,11 +734,7 @@ export function Timeline() {
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button
-                variant="text"
-                size="icon"
-                onClick={handleSplitAndKeepRight}
-              >
+              <Button variant="text" size="icon" onClick={handleSplitAndKeepRight}>
                 <ArrowRightToLine className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
@@ -1021,6 +1004,16 @@ export function Timeline() {
                             y: e.clientY,
                           });
                         }}
+                        onClick={(e) => {
+                          // If clicking empty area (not on a clip), deselect all clips
+                          if (
+                            !(e.target as HTMLElement).closest(".timeline-clip")
+                          ) {
+                            const { clearSelectedClips } =
+                              useTimelineStore.getState();
+                            clearSelectedClips();
+                          }
+                        }}
                       >
                         <TimelineTrackContent
                           track={track}
@@ -1045,14 +1038,12 @@ export function Timeline() {
                   </>
                 )}
                 {isDragOver && (
-                  <div
-                    className="absolute left-0 right-0 border-2 border-dashed border-accent flex items-center justify-center text-muted-foreground"
-                    style={{
-                      top: `${tracks.length * 60}px`,
-                      height: "60px",
-                    }}
-                  >
-                    <div>Drop media here to add a new track</div>
+                  <div className="absolute inset-0 z-20 flex items-center justify-center pointer-events-none backdrop-blur-lg">
+                    <div>
+                      {isProcessing
+                        ? `Processing ${progress}%`
+                        : "Drop media here to add to timeline"}
+                    </div>
                   </div>
                 )}
               </div>
@@ -1081,22 +1072,17 @@ export function Timeline() {
                   setContextMenu(null);
                 }}
               >
-                {(() => {
-                  const track = tracks.find(
-                    (t) => t.id === contextMenu.trackId
-                  );
-                  return track?.muted ? (
-                    <>
-                      <Volume2 className="h-4 w-4 mr-2" />
-                      Unmute Track
-                    </>
-                  ) : (
-                    <>
-                      <VolumeX className="h-4 w-4 mr-2" />
-                      Mute Track
-                    </>
-                  );
-                })()}
+                {contextMenu.trackId ? (
+                  <div className="flex items-center w-full px-3 py-2 hover:bg-accent hover:text-accent-foreground transition-colors text-left">
+                    <Volume2 className="h-4 w-4 mr-2" />
+                    Unmute Track
+                  </div>
+                ) : (
+                  <div className="flex items-center w-full px-3 py-2 hover:bg-accent hover:text-accent-foreground transition-colors text-left">
+                    <VolumeX className="h-4 w-4 mr-2" />
+                    Mute Track
+                  </div>
+                )}
               </button>
               <div className="h-px bg-border mx-1 my-1" />
               <button
@@ -1226,134 +1212,191 @@ function TimelineTrackContent({
 }: {
   track: TimelineTrack;
   zoomLevel: number;
-  setContextMenu: (
-    menu: {
-      type: "track" | "clip";
-      trackId: string;
-      clipId?: string;
-      x: number;
-      y: number;
-    } | null
-  ) => void;
-  contextMenu: {
-    type: "track" | "clip";
-    trackId: string;
-    clipId?: string;
-    x: number;
-    y: number;
-  } | null;
+  setContextMenu: (menu: ContextMenuState | null) => void;
+  contextMenu: ContextMenuState | null;
 }) {
   const { mediaItems } = useMediaStore();
   const {
     tracks,
     moveClipToTrack,
-    updateClipTrim,
     updateClipStartTime,
     addClipToTrack,
-    removeClipFromTrack,
-    toggleTrackMute,
     selectedClips,
     selectClip,
     deselectClip,
+    dragState,
+    startDrag: startDragAction,
+    updateDragTime,
+    endDrag: endDragAction,
   } = useTimelineStore();
-  const { currentTime } = usePlaybackStore();
+
+  const timelineRef = useRef<HTMLDivElement>(null);
   const [isDropping, setIsDropping] = useState(false);
   const [dropPosition, setDropPosition] = useState<number | null>(null);
-  const [isDraggedOver, setIsDraggedOver] = useState(false);
   const [wouldOverlap, setWouldOverlap] = useState(false);
-  const [resizing, setResizing] = useState<{
-    clipId: string;
-    side: "left" | "right";
-    startX: number;
-    initialTrimStart: number;
-    initialTrimEnd: number;
-  } | null>(null);
   const dragCounterRef = useRef(0);
-  const [clipMenuOpen, setClipMenuOpen] = useState<string | null>(null);
+  const [mouseDownLocation, setMouseDownLocation] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
 
-  // Handle clip deletion
-  const handleDeleteClip = (clipId: string) => {
-    removeClipFromTrack(track.id, clipId);
+  // Set up mouse event listeners for drag
+  useEffect(() => {
+    if (!dragState.isDragging) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!timelineRef.current) return;
+
+      const timelineRect = timelineRef.current.getBoundingClientRect();
+      const mouseX = e.clientX - timelineRect.left;
+      const mouseTime = Math.max(0, mouseX / (50 * zoomLevel));
+      const adjustedTime = Math.max(0, mouseTime - dragState.clickOffsetTime);
+      const snappedTime = Math.round(adjustedTime * 10) / 10;
+
+      updateDragTime(snappedTime);
+    };
+
+    const handleMouseUp = () => {
+      if (!dragState.clipId || !dragState.trackId) return;
+
+      const finalTime = dragState.currentTime;
+
+      // Check for overlaps and update position
+      const sourceTrack = tracks.find((t) => t.id === dragState.trackId);
+      const movingClip = sourceTrack?.clips.find(
+        (c) => c.id === dragState.clipId
+      );
+
+      if (movingClip) {
+        const movingClipDuration =
+          movingClip.duration - movingClip.trimStart - movingClip.trimEnd;
+        const movingClipEnd = finalTime + movingClipDuration;
+
+        const targetTrack = tracks.find((t) => t.id === track.id);
+        const hasOverlap = targetTrack?.clips.some((existingClip) => {
+          if (
+            dragState.trackId === track.id &&
+            existingClip.id === dragState.clipId
+          ) {
+            return false;
+          }
+          const existingStart = existingClip.startTime;
+          const existingEnd =
+            existingClip.startTime +
+            (existingClip.duration -
+              existingClip.trimStart -
+              existingClip.trimEnd);
+          return finalTime < existingEnd && movingClipEnd > existingStart;
+        });
+
+        if (!hasOverlap) {
+          if (dragState.trackId === track.id) {
+            updateClipStartTime(track.id, dragState.clipId, finalTime);
+          } else {
+            moveClipToTrack(dragState.trackId, track.id, dragState.clipId);
+            requestAnimationFrame(() => {
+              updateClipStartTime(track.id, dragState.clipId!, finalTime);
+            });
+          }
+        }
+      }
+
+      endDragAction();
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [
+    dragState.isDragging,
+    dragState.clickOffsetTime,
+    dragState.clipId,
+    dragState.trackId,
+    dragState.currentTime,
+    zoomLevel,
+    tracks,
+    track.id,
+    updateDragTime,
+    updateClipStartTime,
+    moveClipToTrack,
+    endDragAction,
+  ]);
+
+  const handleClipMouseDown = (e: React.MouseEvent, clip: TypeTimelineClip) => {
+    setMouseDownLocation({ x: e.clientX, y: e.clientY });
+    // Handle multi-selection only in mousedown
+    if (e.metaKey || e.ctrlKey || e.shiftKey) {
+      selectClip(track.id, clip.id, true);
+    }
+
+    // Calculate the offset from the left edge of the clip to where the user clicked
+    const clipElement = e.currentTarget as HTMLElement;
+    const clipRect = clipElement.getBoundingClientRect();
+    const clickOffsetX = e.clientX - clipRect.left;
+    const clickOffsetTime = clickOffsetX / (50 * zoomLevel);
+
+    startDragAction(
+      clip.id,
+      track.id,
+      e.clientX,
+      clip.startTime,
+      clickOffsetTime
+    );
   };
 
-  const handleResizeStart = (
-    e: React.MouseEvent,
-    clipId: string,
-    side: "left" | "right"
-  ) => {
+  const handleClipClick = (e: React.MouseEvent, clip: TypeTimelineClip) => {
     e.stopPropagation();
-    e.preventDefault();
 
-    const clip = track.clips.find((c) => c.id === clipId);
-    if (!clip) return;
+    // Check if mouse moved significantly
+    if (mouseDownLocation) {
+      const deltaX = Math.abs(e.clientX - mouseDownLocation.x);
+      const deltaY = Math.abs(e.clientY - mouseDownLocation.y);
+      // If it moved more than a few pixels, consider it a drag and not a click.
+      if (deltaX > 5 || deltaY > 5) {
+        setMouseDownLocation(null); // Reset for next interaction
+        return;
+      }
+    }
 
-    setResizing({
-      clipId,
-      side,
-      startX: e.clientX,
-      initialTrimStart: clip.trimStart,
-      initialTrimEnd: clip.trimEnd,
-    });
-  };
+    // Close context menu if it's open
+    if (contextMenu) {
+      setContextMenu(null);
+      return; // Don't handle selection when closing context menu
+    }
 
-  const updateTrimFromMouseMove = (e: { clientX: number }) => {
-    if (!resizing) return;
+    // Skip selection logic for multi-selection (handled in mousedown)
+    if (e.metaKey || e.ctrlKey || e.shiftKey) {
+      return;
+    }
 
-    const clip = track.clips.find((c) => c.id === resizing.clipId);
-    if (!clip) return;
+    // Handle single selection/deselection
+    const isSelected = selectedClips.some(
+      (c) => c.trackId === track.id && c.clipId === clip.id
+    );
 
-    const deltaX = e.clientX - resizing.startX;
-    const deltaTime = deltaX / (50 * zoomLevel);
-
-    if (resizing.side === "left") {
-      const newTrimStart = Math.max(
-        0,
-        Math.min(
-          clip.duration - clip.trimEnd - 0.1,
-          resizing.initialTrimStart + deltaTime
-        )
-      );
-      updateClipTrim(track.id, clip.id, newTrimStart, clip.trimEnd);
+    if (isSelected) {
+      // If clip is selected, deselect it
+      deselectClip(track.id, clip.id);
     } else {
-      const newTrimEnd = Math.max(
-        0,
-        Math.min(
-          clip.duration - clip.trimStart - 0.1,
-          resizing.initialTrimEnd - deltaTime
-        )
-      );
-      updateClipTrim(track.id, clip.id, clip.trimStart, newTrimEnd);
+      // If clip is not selected, select it (replacing other selections)
+      selectClip(track.id, clip.id, false);
     }
   };
 
-  const handleResizeMove = (e: React.MouseEvent) => {
-    updateTrimFromMouseMove(e);
-  };
-
-  const handleResizeEnd = () => {
-    setResizing(null);
-  };
-
-  const handleClipDragStart = (e: React.DragEvent, clip: any) => {
-    const dragData = { clipId: clip.id, trackId: track.id, name: clip.name };
-
-    e.dataTransfer.setData(
-      "application/x-timeline-clip",
-      JSON.stringify(dragData)
-    );
-    e.dataTransfer.effectAllowed = "move";
-
-    // Add visual feedback to the dragged element
-    const target = e.currentTarget.parentElement as HTMLElement;
-    target.style.opacity = "0.5";
-    target.style.transform = "scale(0.95)";
-  };
-
-  const handleClipDragEnd = (e: React.DragEvent) => {
-    // Reset visual feedback
-    const target = e.currentTarget.parentElement as HTMLElement;
-    target.style.opacity = "";
-    target.style.transform = "";
+  const handleClipContextMenu = (e: React.MouseEvent, clipId: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setContextMenu({
+      type: "clip",
+      trackId: track.id,
+      clipId: clipId,
+      x: e.clientX,
+      y: e.clientY,
+    });
   };
 
   const handleTrackDragOver = (e: React.DragEvent) => {
@@ -1473,14 +1516,12 @@ function TimelineTrackContent({
 
     if (wouldOverlap) {
       e.dataTransfer.dropEffect = "none";
-      setIsDraggedOver(true);
       setWouldOverlap(true);
       setDropPosition(Math.round(dropTime * 10) / 10);
       return;
     }
 
     e.dataTransfer.dropEffect = hasTimelineClip ? "move" : "copy";
-    setIsDraggedOver(true);
     setWouldOverlap(false);
     setDropPosition(Math.round(dropTime * 10) / 10);
   };
@@ -1499,7 +1540,6 @@ function TimelineTrackContent({
 
     dragCounterRef.current++;
     setIsDropping(true);
-    setIsDraggedOver(true);
   };
 
   const handleTrackDragLeave = (e: React.DragEvent) => {
@@ -1518,7 +1558,6 @@ function TimelineTrackContent({
 
     if (dragCounterRef.current === 0) {
       setIsDropping(false);
-      setIsDraggedOver(false);
       setWouldOverlap(false);
       setDropPosition(null);
     }
@@ -1531,7 +1570,6 @@ function TimelineTrackContent({
     // Reset all drag states
     dragCounterRef.current = 0;
     setIsDropping(false);
-    setIsDraggedOver(false);
     setWouldOverlap(false);
     const currentDropPosition = dropPosition;
     setDropPosition(null);
@@ -1563,23 +1601,36 @@ function TimelineTrackContent({
         );
         if (!timelineClipData) return;
 
-        const { clipId, trackId: fromTrackId } = JSON.parse(timelineClipData);
+        const {
+          clipId,
+          trackId: fromTrackId,
+          clickOffsetTime = 0,
+        } = JSON.parse(timelineClipData);
 
         // Find the clip being moved
         const sourceTrack = tracks.find(
           (t: TimelineTrack) => t.id === fromTrackId
         );
-        const movingClip = sourceTrack?.clips.find((c: any) => c.id === clipId);
+        const movingClip = sourceTrack?.clips.find(
+          (c: TypeTimelineClip) => c.id === clipId
+        );
 
         if (!movingClip) {
           toast.error("Clip not found");
           return;
         }
 
+        // Adjust position based on where user clicked on the clip
+        const adjustedStartTime = snappedTime - clickOffsetTime;
+        const finalStartTime = Math.max(
+          0,
+          Math.round(adjustedStartTime * 10) / 10
+        );
+
         // Check for overlaps with existing clips (excluding the moving clip itself)
         const movingClipDuration =
           movingClip.duration - movingClip.trimStart - movingClip.trimEnd;
-        const movingClipEnd = snappedTime + movingClipDuration;
+        const movingClipEnd = finalStartTime + movingClipDuration;
 
         const hasOverlap = track.clips.some((existingClip) => {
           // Skip the clip being moved if it's on the same track
@@ -1594,7 +1645,7 @@ function TimelineTrackContent({
               existingClip.trimEnd);
 
           // Check if clips overlap
-          return snappedTime < existingEnd && movingClipEnd > existingStart;
+          return finalStartTime < existingEnd && movingClipEnd > existingStart;
         });
 
         if (hasOverlap) {
@@ -1606,12 +1657,12 @@ function TimelineTrackContent({
 
         if (fromTrackId === track.id) {
           // Moving within same track
-          updateClipStartTime(track.id, clipId, snappedTime);
+          updateClipStartTime(track.id, clipId, finalStartTime);
         } else {
           // Moving to different track
           moveClipToTrack(fromTrackId, track.id, clipId);
           requestAnimationFrame(() => {
-            updateClipStartTime(track.id, clipId, snappedTime);
+            updateClipStartTime(track.id, clipId, finalStartTime);
           });
         }
       } else if (hasMediaItem) {
@@ -1679,114 +1730,9 @@ function TimelineTrackContent({
     }
   };
 
-  const getTrackColor = (type: string) => {
-    switch (type) {
-      case "video":
-        return "bg-blue-500/20 border-blue-500/30";
-      case "audio":
-        return "bg-green-500/20 border-green-500/30";
-      case "effects":
-        return "bg-purple-500/20 border-purple-500/30";
-      default:
-        return "bg-gray-500/20 border-gray-500/30";
-    }
-  };
-
-  const renderClipContent = (clip: any) => {
-    const mediaItem = mediaItems.find((item) => item.id === clip.mediaId);
-
-    if (!mediaItem) {
-      return (
-        <span className="text-xs text-foreground/80 truncate">{clip.name}</span>
-      );
-    }
-
-    if (mediaItem.type === "image") {
-      return (
-        <div className="w-full h-full flex items-center justify-center">
-          <img
-            src={mediaItem.url}
-            alt={mediaItem.name}
-            className="w-full h-full object-cover"
-          />
-        </div>
-      );
-    }
-
-    if (mediaItem.type === "video" && mediaItem.thumbnailUrl) {
-      return (
-        <div className="w-full h-full flex items-center gap-2">
-          <div className="w-8 h-8 flex-shrink-0">
-            <img
-              src={mediaItem.thumbnailUrl}
-              alt={mediaItem.name}
-              className="w-full h-full object-cover rounded-sm"
-            />
-          </div>
-          <span className="text-xs text-foreground/80 truncate flex-1">
-            {clip.name}
-          </span>
-        </div>
-      );
-    }
-
-    if (mediaItem.type === "audio") {
-      return (
-        <div className="w-full h-full flex items-center gap-2">
-          <div className="flex-1 min-w-0">
-            <AudioWaveform
-              audioUrl={mediaItem.url}
-              height={24}
-              className="w-full"
-            />
-          </div>
-        </div>
-      );
-    }
-
-    // Fallback for videos without thumbnails
-    return (
-      <span className="text-xs text-foreground/80 truncate">{clip.name}</span>
-    );
-  };
-
-  const handleSplitClip = (clip: any) => {
-    // Use current playback time as split point
-    const splitTime = currentTime;
-    // Only split if splitTime is within the clip's effective range
-    const effectiveStart = clip.startTime;
-    const effectiveEnd =
-      clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
-    if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return;
-    const firstDuration = splitTime - effectiveStart;
-    const secondDuration = effectiveEnd - splitTime;
-    // First part: adjust original clip
-    updateClipTrim(
-      track.id,
-      clip.id,
-      clip.trimStart,
-      clip.trimEnd + secondDuration
-    );
-    // Second part: add new clip after split
-    addClipToTrack(track.id, {
-      mediaId: clip.mediaId,
-      name: clip.name + " (cut)",
-      duration: clip.duration,
-      startTime: splitTime,
-      trimStart: clip.trimStart + firstDuration,
-      trimEnd: clip.trimEnd,
-    });
-  };
-
   return (
     <div
-      className={`w-full h-full transition-all duration-150 ease-out ${
-        isDraggedOver
-          ? wouldOverlap
-            ? "bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg"
-            : "bg-blue-500/15 border-2 border-dashed border-blue-400 shadow-lg"
-          : "hover:bg-muted/20"
-      }`}
+      className="w-full h-full hover:bg-muted/20"
       onContextMenu={(e) => {
         e.preventDefault();
         // Only show track menu if we didn't click on a clip
@@ -1799,15 +1745,22 @@ function TimelineTrackContent({
           });
         }
       }}
+      onClick={(e) => {
+        // If clicking empty area (not on a clip), deselect all clips
+        if (!(e.target as HTMLElement).closest(".timeline-clip")) {
+          const { clearSelectedClips } = useTimelineStore.getState();
+          clearSelectedClips();
+        }
+      }}
       onDragOver={handleTrackDragOver}
       onDragEnter={handleTrackDragEnter}
       onDragLeave={handleTrackDragLeave}
       onDrop={handleTrackDrop}
-      onMouseMove={handleResizeMove}
-      onMouseUp={handleResizeEnd}
-      onMouseLeave={handleResizeEnd}
     >
-      <div className="h-full relative track-clips-container min-w-full">
+      <div
+        ref={timelineRef}
+        className="h-full relative track-clips-container min-w-full"
+      >
         {track.clips.length === 0 ? (
           <div
             className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${
@@ -1827,134 +1780,23 @@ function TimelineTrackContent({
         ) : (
           <>
             {track.clips.map((clip) => {
-              const effectiveDuration =
-                clip.duration - clip.trimStart - clip.trimEnd;
-              const clipWidth = Math.max(
-                80,
-                effectiveDuration * 50 * zoomLevel
-              );
-              const clipLeft = clip.startTime * 50 * zoomLevel;
               const isSelected = selectedClips.some(
                 (c) => c.trackId === track.id && c.clipId === clip.id
               );
+
               return (
-                <div
+                <TimelineClip
                   key={clip.id}
-                  className={`timeline-clip absolute h-full border transition-all-200 ${getTrackColor(track.type)} flex items-center py-3 min-w-[80px] overflow-hidden group hover:shadow-lg ${isSelected ? "ring-2 ring-blue-500 z-10" : ""}`}
-                  style={{ width: `${clipWidth}px`, left: `${clipLeft}px` }}
-                  onClick={(e) => {
-                    e.stopPropagation();
-
-                    // Close context menu if it's open
-                    if (contextMenu) {
-                      setContextMenu(null);
-                      return; // Don't handle selection when closing context menu
-                    }
-
-                    const isSelected = selectedClips.some(
-                      (c) => c.trackId === track.id && c.clipId === clip.id
-                    );
-
-                    if (e.metaKey || e.ctrlKey || e.shiftKey) {
-                      // Multi-selection mode: toggle the clip
-                      selectClip(track.id, clip.id, true);
-                    } else if (isSelected) {
-                      // If clip is already selected, deselect it
-                      deselectClip(track.id, clip.id);
-                    } else {
-                      // If clip is not selected, select it (replacing other selections)
-                      selectClip(track.id, clip.id, false);
-                    }
-                  }}
-                  tabIndex={0}
-                  onContextMenu={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    setContextMenu({
-                      type: "clip",
-                      trackId: track.id,
-                      clipId: clip.id,
-                      x: e.clientX,
-                      y: e.clientY,
-                    });
-                  }}
-                >
-                  {/* Left trim handle */}
-                  <div
-                    className="absolute left-0 top-0 bottom-0 w-2 cursor-w-resize opacity-0 group-hover:opacity-100 transition-opacity bg-blue-500/50 hover:bg-blue-500"
-                    onMouseDown={(e) => handleResizeStart(e, clip.id, "left")}
-                  />
-                  {/* Clip content */}
-                  <div
-                    className="flex-1 cursor-grab active:cursor-grabbing relative"
-                    draggable={true}
-                    onDragStart={(e) => handleClipDragStart(e, clip)}
-                    onDragEnd={handleClipDragEnd}
-                  >
-                    {renderClipContent(clip)}
-                    {/* Clip options menu */}
-                    <div className="absolute top-1 right-1 z-10">
-                      <Button
-                        variant="text"
-                        size="icon"
-                        className="opacity-0 group-hover:opacity-100 transition-opacity"
-                        onClick={() => setClipMenuOpen(clip.id)}
-                      >
-                        <MoreVertical className="h-4 w-4" />
-                      </Button>
-                      {clipMenuOpen === clip.id && (
-                        <div className="absolute right-0 mt-2 w-32 bg-white text-black border rounded shadow z-50">
-                          <button
-                            className="flex items-center w-full px-3 py-2 text-sm hover:bg-muted/30"
-                            onClick={() => {
-                              handleSplitClip(clip);
-                              setClipMenuOpen(null);
-                            }}
-                          >
-                            <Scissors className="h-4 w-4 mr-2" /> Split
-                          </button>
-                          <button
-                            className="flex items-center w-full px-3 py-2 text-sm text-red-600 hover:bg-red-50"
-                            onClick={() => handleDeleteClip(clip.id)}
-                          >
-                            <Trash2 className="h-4 w-4 mr-2" /> Delete
-                          </button>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                  {/* Right trim handle */}
-                  <div
-                    className="absolute right-0 top-0 bottom-0 w-2 cursor-e-resize opacity-0 group-hover:opacity-100 transition-opacity bg-blue-500/50 hover:bg-blue-500"
-                    onMouseDown={(e) => handleResizeStart(e, clip.id, "right")}
-                  />
-                </div>
+                  clip={clip}
+                  track={track}
+                  zoomLevel={zoomLevel}
+                  isSelected={isSelected}
+                  onContextMenu={handleClipContextMenu}
+                  onClipMouseDown={handleClipMouseDown}
+                  onClipClick={handleClipClick}
+                />
               );
             })}
-
-            {/* Drop position indicator */}
-            {isDraggedOver && dropPosition !== null && (
-              <div
-                className={`absolute top-0 bottom-0 w-1 pointer-events-none z-30 transition-all duration-75 ease-out ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`}
-                style={{
-                  left: `${dropPosition * 50 * zoomLevel}px`,
-                  transform: "translateX(-50%)",
-                }}
-              >
-                <div
-                  className={`absolute -top-2 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 border-white shadow-md ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`}
-                />
-                <div
-                  className={`absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 border-white shadow-md ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`}
-                />
-                <div
-                  className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs text-white px-1 py-0.5 rounded whitespace-nowrap ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`}
-                >
-                  {wouldOverlap ? "⚠️" : ""}
-                  {dropPosition.toFixed(1)}s
-                </div>
-              </div>
-            )}
           </>
         )}
       </div>