feat: Improve automation flow and add ontime playback actions (#2025) (#2024)

* fix: prevent add filter from submitting form

* refactor: event clarifies whether automations exist but are disabled

* refactor: improve readability of automation form

* refactor: add affordance for field warnings

* refactor: improve visibility of automation off state

* refactor: apply warning styles to other feature toggles

* Adding playback actions to automations (#2024)

* adding intial automation actions

* cleaning up

* fixing formatting

* ran oxfmt

* switching action names to playback- to match the dropdown strings

* fixing flicker that was caused by scroll arrows gettting unmounted

---------

Co-authored-by: Cameron Slipp <cdslipp@gmail.com>

apps/client/src/features/rundown/rundown-event/RundownEventInner.tsx

@@ -38,6 +38,7 @@ interface RundownEventInnerProps {
   title: string;
   note: string;
   delay: number;
+  automationsEnabled?: boolean;
   isNext: boolean;
   skip: boolean;
   loaded: boolean;
@@ -64,6 +65,7 @@ function RundownEventInner({
   title,
   note,
   delay,
+  automationsEnabled,
   isNext,
   skip = false,
   loaded,
@@ -79,6 +81,21 @@ function RundownEventInner({
 
   const eventIsPlaying = playback === Playback.Play;
   const eventIsPaused = playback === Playback.Pause;
+  const automationTooltip = (() => {
+    if (!hasTriggers) {
+      return 'Event has no triggers';
+    }
+
+    if (automationsEnabled !== false) {
+      return 'Event has triggers';
+    }
+
+    return 'Event has triggers, but automations are disabled';
+  })();
+  const automationIconClasses = cx([
+    style.statusIcon,
+    hasTriggers ? (automationsEnabled === false ? style.warning : style.active) : style.disabled,
+  ]);
 
   const playBtnStyles = { _hover: {} };
   if (!skip && eventIsPlaying) {
@@ -142,8 +159,8 @@ function RundownEventInner({
           <Tooltip text={`${countToEnd ? 'Count to End' : 'Count duration'}`} render={<span />}>
             <LuArrowDownToLine className={`${style.statusIcon} ${countToEnd ? style.active : style.disabled}`} />
           </Tooltip>
-          <Tooltip text='Event has Triggers' render={<span />}>
-            <IoFlash className={`${style.statusIcon} ${hasTriggers ? style.active : style.disabled}`} />
+          <Tooltip text={automationTooltip} render={<span />}>
+            <IoFlash className={automationIconClasses} />
           </Tooltip>
         </div>
       </div>