3 files changed, 20 insertions, 13 deletions

diff --git a/apps/web/src/components/editor/media-panel/views/media.tsx b/apps/web/src/components/editor/media-panel/views/media.tsx
index 17893156..393d72db 100644
--- a/apps/web/src/components/editor/media-panel/views/media.tsx
+++ b/apps/web/src/components/editor/media-panel/views/media.tsx
@@ -24,7 +24,7 @@ import {
 } from "@/components/ui/select";

 import { DraggableMediaItem } from "@/components/ui/draggable-item";

 import { useProjectStore } from "@/stores/project-store";

-import { addMediaToTimeline } from "@/lib/timeline-utils";

+import { useTimelineStore } from "@/stores/timeline-store";

 

 export function MediaView() {

   const { mediaItems, addMediaItem, removeMediaItem } = useMediaStore();

@@ -289,7 +289,11 @@ export function MediaView() {
                         name: item.name,

                       }}

                       showPlusOnDrag={false}

-                      onAddToTimeline={(currentTime) => addMediaToTimeline(item, currentTime)}

+                      onAddToTimeline={(currentTime) =>

+                        useTimelineStore

+                          .getState()

+                          .addMediaAtTime(item, currentTime)

+                      }

                       rounded={false}

                     />

                   </ContextMenuTrigger>

diff --git a/apps/web/src/components/editor/media-panel/views/text.tsx b/apps/web/src/components/editor/media-panel/views/text.tsx
index fad79343..6d0d310b 100644
--- a/apps/web/src/components/editor/media-panel/views/text.tsx
+++ b/apps/web/src/components/editor/media-panel/views/text.tsx
@@ -1,6 +1,6 @@
 import { DraggableMediaItem } from "@/components/ui/draggable-item";

 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";

-import { addTextToTimeline } from "@/lib/timeline-utils";

+import { useTimelineStore } from "@/stores/timeline-store";

 import { type TextElement } from "@/types/timeline";

 

 let textData: TextElement = {

@@ -43,7 +43,9 @@ export function TextView() {
           content: textData.content,

         }}

         aspectRatio={1}

-        onAddToTimeline={(currentTime) => addTextToTimeline(textData, currentTime)}

+        onAddToTimeline={(currentTime) =>

+          useTimelineStore.getState().addTextAtTime(textData, currentTime)

+        }

         showLabel={false}

       />

     </div>

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index ff9e0694..c1603542 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -48,7 +48,6 @@ import { useSelectionBox } from "@/hooks/use-selection-box";
 import { SnapIndicator } from "./snap-indicator";
 import { SnapPoint } from "@/hooks/use-timeline-snapping";
 import type { DragData, TimelineTrack } from "@/types/timeline";
-import { addTextToNewTrack, addMediaToNewTrack } from "@/lib/timeline-utils";
 import {
   getTrackHeight,
   getCumulativeHeightBefore,
@@ -229,7 +228,7 @@ export function Timeline() {
         Math.min(
           duration,
           (mouseX + scrollLeft) /
-          (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel)
+            (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel)
         )
       );
 
@@ -377,7 +376,7 @@ export function Timeline() {
 
         if (dragData.type === "text") {
           // Always create new text track to avoid overlaps
-          addTextToNewTrack(dragData);
+          useTimelineStore.getState().addTextToNewTrack(dragData);
         } else {
           // Handle media items
           const mediaItem = mediaItems.find((item) => item.id === dragData.id);
@@ -386,7 +385,7 @@ export function Timeline() {
             return;
           }
 
-          addMediaToNewTrack(mediaItem);
+          useTimelineStore.getState().addMediaToNewTrack(mediaItem);
         }
       } catch (error) {
         console.error("Error parsing dropped item data:", error);
@@ -414,7 +413,7 @@ export function Timeline() {
               item.name === processedItem.name && item.url === processedItem.url
           );
           if (addedItem) {
-            addMediaToNewTrack(addedItem);
+            useTimelineStore.getState().addMediaToNewTrack(addedItem);
           }
         }
       } catch (error) {
@@ -902,19 +901,21 @@ export function Timeline() {
                     return (
                       <div
                         key={i}
-                        className={`absolute top-0 bottom-0 ${isMainMarker
+                        className={`absolute top-0 bottom-0 ${
+                          isMainMarker
                             ? "border-l border-muted-foreground/40"
                             : "border-l border-muted-foreground/20"
-                          }`}
+                        }`}
                         style={{
                           left: `${time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,
                         }}
                       >
                         <span
-                          className={`absolute top-1 left-1 text-[0.6rem] ${isMainMarker
+                          className={`absolute top-1 left-1 text-[0.6rem] ${
+                            isMainMarker
                               ? "text-muted-foreground font-medium"
                               : "text-muted-foreground/70"
-                            }`}
+                          }`}
                         >
                           {(() => {
                             const formatTime = (seconds: number) => {