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/common/components/select/Select.module.scss

@@ -125,6 +125,11 @@
   font-size: 0.5rem;
   display: grid;
   place-content: center;
+  visibility: hidden;
+
+  &[data-visible] {
+    visibility: visible;
+  }
 
   &::before {
     content: '';

apps/client/src/common/components/select/Select.tsx

@@ -29,7 +29,7 @@ export default function Select<T>({ options, fluid, size = 'medium', ...selectRo
       </BaseSelect.Trigger>
       <BaseSelect.Portal>
         <BaseSelect.Positioner side='bottom' align='start'>
-          <BaseSelect.ScrollUpArrow className={styles.scrollArrow} />
+          <BaseSelect.ScrollUpArrow className={styles.scrollArrow} keepMounted />
           <BaseSelect.Popup className={styles.popup}>
             <BaseSelect.Arrow />
             <BaseSelect.List className={styles.list}>
@@ -43,7 +43,7 @@ export default function Select<T>({ options, fluid, size = 'medium', ...selectRo
               ))}
             </BaseSelect.List>
           </BaseSelect.Popup>
-          <BaseSelect.ScrollDownArrow className={styles.scrollArrow} />
+          <BaseSelect.ScrollDownArrow className={styles.scrollArrow} keepMounted />
         </BaseSelect.Positioner>
       </BaseSelect.Portal>
     </BaseSelect.Root>