feat: ensure text tracks are always created above media tracks

2 files changed, 13 insertions, 6 deletions

diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index 01ad1635..20e80253 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -1317,8 +1317,9 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
 
     findOrCreateTrack: (trackType) => {
       // Always create new text track to allow multiple text elements
+      // Insert text tracks at the top
       if (trackType === "text") {
-        return get().addTrack(trackType);
+        return get().insertTrackAt(trackType, 0);
       }
 
       const existingTrack = get()._tracks.find((t) => t.type === trackType);
@@ -1356,7 +1357,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
     },
 
     addTextAtTime: (item, currentTime = 0) => {
-      const targetTrackId = get().addTrack("text"); // Always create new text track to allow multiple text elements
+      const targetTrackId = get().insertTrackAt("text", 0); // Always create new text track at the top
 
       get().addElementToTrack(targetTrackId, {
         type: "text",
@@ -1399,7 +1400,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
     },
 
     addTextToNewTrack: (item) => {
-      const targetTrackId = get().addTrack("text"); // Always create new text track to allow multiple text elements
+      const targetTrackId = get().insertTrackAt("text", 0); // Always create new text track at the top
 
       get().addElementToTrack(targetTrackId, {
         type: "text",
diff --git a/apps/web/src/types/timeline.ts b/apps/web/src/types/timeline.ts
index 17dbb5d1..f8a79d03 100644
--- a/apps/web/src/types/timeline.ts
+++ b/apps/web/src/types/timeline.ts
@@ -89,13 +89,19 @@ export interface TimelineTrack {
 
 export function sortTracksByOrder(tracks: TimelineTrack[]): TimelineTrack[] {
   return [...tracks].sort((a, b) => {
+    // Text tracks always go to the top
+    if (a.type === "text" && b.type !== "text") return -1;
+    if (b.type === "text" && a.type !== "text") return 1;
+
     // Audio tracks always go to bottom
     if (a.type === "audio" && b.type !== "audio") return 1;
     if (b.type === "audio" && a.type !== "audio") return -1;
 
-    // Main track goes above audio but below other tracks
-    if (a.isMain && !b.isMain && b.type !== "audio") return 1;
-    if (b.isMain && !a.isMain && a.type !== "audio") return -1;
+    // Main track goes above audio but below text tracks
+    if (a.isMain && !b.isMain && b.type !== "audio" && b.type !== "text")
+      return 1;
+    if (b.isMain && !a.isMain && a.type !== "audio" && a.type !== "text")
+      return -1;
 
     // Within same category, maintain creation order
     return 0;