Merge branch 'feature/plus-button-timeline' into staging

apps/web/src/components/editor/media-panel/views/media.tsx

@@ -24,6 +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";
 
 export function MediaView() {
   const { mediaItems, addMediaItem, removeMediaItem } = useMediaStore();
@@ -288,6 +289,7 @@ export function MediaView() {
                         name: item.name,
                       }}
                       showPlusOnDrag={false}
+                      onAddToTimeline={(currentTime) => addMediaToTimeline(item, currentTime)}
                       rounded={false}
                     />
                   </ContextMenuTrigger>

apps/web/src/components/editor/media-panel/views/text.tsx

@@ -1,4 +1,30 @@
 import { DraggableMediaItem } from "@/components/ui/draggable-item";
+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
+import { addTextToTimeline } from "@/lib/timeline-utils";
+import { type TextElement } from "@/types/timeline";
+
+let textData: TextElement = {
+  id: "default-text",
+  type: "text",
+  name: "Default text",
+  content: "Default text",
+  fontSize: 48,
+  fontFamily: "Arial",
+  color: "#ffffff",
+  backgroundColor: "transparent",
+  textAlign: "center" as const,
+  fontWeight: "normal" as const,
+  fontStyle: "normal" as const,
+  textDecoration: "none" as const,
+  x: 0,
+  y: 0,
+  rotation: 0,
+  opacity: 1,
+  duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,
+  startTime: 0,
+  trimStart: 0,
+  trimEnd: 0,
+};
 
 export function TextView() {
   return (
@@ -11,12 +37,13 @@ export function TextView() {
           </div>
         }
         dragData={{
-          id: "default-text",
-          type: "text",
-          name: "Default text",
-          content: "Default text",
+          id: textData.id,
+          type: textData.type,
+          name: textData.name,
+          content: textData.content,
         }}
         aspectRatio={1}
+        onAddToTimeline={(currentTime) => addTextToTimeline(textData, currentTime)}
         showLabel={false}
       />
     </div>