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>

apps/client/src/common/components/tag/Tag.module.scss

@@ -1,9 +1,17 @@
 .tag {
   font-size: calc(1rem - 3px);
   letter-spacing: 0.5px;
-  background-color: $gray-900;
-  color: $ui-white;
   border-radius: 2px;
   padding: 0 0.25rem;
   white-space: nowrap;
 }
+
+.default {
+  background-color: $gray-900;
+  color: $ui-white;
+}
+
+.warning {
+  background-color: $orange-1300;
+  color: $orange-300;
+}

apps/client/src/common/components/tag/Tag.tsx

@@ -1,11 +1,14 @@
 import { PropsWithChildren } from 'react';
 
+import { cx } from '../../utils/styleUtils';
+
 import style from './Tag.module.scss';
 
 interface TagProps {
   className?: string;
+  variant?: 'default' | 'warning';
 }
 
-export default function Tag({ className, children }: PropsWithChildren<TagProps>) {
-  return <span className={`${style.tag} ${className || ''}`}>{children}</span>;
+export default function Tag({ className, variant = 'default', children }: PropsWithChildren<TagProps>) {
+  return <span className={cx([style.tag, style[variant], className])}>{children}</span>;
 }