refactor: type-safety & separate concerns

1 files changed, 12 insertions, 30 deletions

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 49eacbc7..5d522c84 100644
--- a/apps/web/src/components/editor/media-panel/views/text.tsx
+++ b/apps/web/src/components/editor/media-panel/views/text.tsx
@@ -1,31 +1,7 @@
 import { DraggableMediaItem } from "@/components/ui/draggable-item";
 import { BaseView } from "./base-view";
-import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 import { useTimelineStore } from "@/stores/timeline-store";
-import { type TextElement } from "@/types/timeline";
-
-const 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,
-};
+import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants";
 
 export function TextView() {
   return (
@@ -38,14 +14,20 @@ export function TextView() {
           </div>
         }
         dragData={{
-          id: textData.id,
-          type: textData.type,
-          name: textData.name,
-          content: textData.content,
+          id: "temp-text-id",
+          type: DEFAULT_TEXT_ELEMENT.type,
+          name: DEFAULT_TEXT_ELEMENT.name,
+          content: DEFAULT_TEXT_ELEMENT.content,
         }}
         aspectRatio={1}
         onAddToTimeline={(currentTime) =>
-          useTimelineStore.getState().addTextAtTime(textData, currentTime)
+          useTimelineStore.getState().addElementAtTime(
+            {
+              ...DEFAULT_TEXT_ELEMENT,
+              id: "temp-text-id",
+            },
+            currentTime
+          )
         }
         showLabel={false}
       />