feat: indicate if relativeStartTime is not in order

src/components/AContentSequenceBuilder.vue

@@ -17,6 +17,7 @@
             :item="item"
             :top-offset="top"
             :calculated-start-time="calculateStartTime(index)"
+            :class="{ '!tw-text-rose-600': !!sequenceItemWithInvalidTimesMap[item.id] }"
             @update:relative-start-time="updateSequenceItem(item.id, 'relativeStartTime', $event)"
           />
         </template>
@@ -121,6 +122,19 @@ const { batch, clear, pause, resume, commit, undo, undoStack, redo, redoStack }
   })
 const sequenceItemElements = useTemplateRefsList<typeof AContentSequenceItem>()
 const uniqueSequenceItemElements = computed(() => sequenceItemElements.value.filter(unique))
+const sequenceItemWithInvalidTimesMap = computed(() => {
+  const itemsWithInvalidTime = []
+  let lastTime = 0
+  for (const item of sequenceItems.value) {
+    if (item.relativeStartTime === null) continue
+    const itemTime = parseTime(item.relativeStartTime)
+    if (itemTime < lastTime) {
+      itemsWithInvalidTime.push(item)
+    }
+    lastTime = itemTime
+  }
+  return Object.fromEntries(itemsWithInvalidTime.map((item) => [item.id, item]))
+})
 
 function calculateStartTime(index: number): string {
   const items = uniqueSequenceItemElements.value.slice(0, index)

src/components/ATimelineItem.vue

 <template>
   <li
-    class="tw-absolute tw-max-w-full tw-left-0 tw-z-10 tw-group"
+    class="tw-absolute tw-max-w-full tw-left-0 tw-z-10 tw-group tw-text-gray-700"
     :class="{ 'tw-transition-transform': isReady }"
     :style="{ transform: `translateY(${item.position.top - topOffset}px)` }"
   >
@@ -28,9 +28,9 @@
           @edit="isEditingStartTime = true"
         >
           <template #not-editing-pre>
-            <span class="tw-text-sm tw-font-bold tw-text-gray-700">{{
-              item.relativeStartTime ?? calculatedStartTime
-            }}</span>
+            <span class="tw-text-sm tw-font-bold">
+              {{ item.relativeStartTime ?? calculatedStartTime }}
+            </span>
           </template>
           <input
             ref="relativeStartTimeInput"