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/app-settings/panel-utils/PanelUtils.module.scss

@@ -140,11 +140,21 @@ $inner-padding: 1rem;
   font-size: 1rem;
 }
 
+.fieldHeading {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .fieldDescription {
   font-size: calc(1rem - 2px);
   color: $gray-400;
 }
 
+.warningText {
+  color: $orange-500;
+}
+
 .fieldError {
   font-size: calc(1rem - 2px);
   color: $red-500;

apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx

@@ -85,18 +85,34 @@ export function ListItem({ children }: { children: ReactNode }) {
   return <li className={style.listItem}>{children}</li>;
 }
 
-export function Field({ title, description, error }: { title: string; description: string; error?: string }) {
+export function Field({
+  title,
+  description,
+  error,
+  descriptionTone = 'default',
+}: {
+  title: ReactNode;
+  description: ReactNode;
+  error?: string;
+  descriptionTone?: 'default' | 'warning';
+}) {
   return (
     <div className={style.fieldTitle}>
-      {title}
+      <div className={style.fieldHeading}>{title}</div>
       {error && <Error>{error}</Error>}
-      {!error && description && <Description>{description}</Description>}
+      {!error && description && <Description tone={descriptionTone}>{description}</Description>}
     </div>
   );
 }
 
-export function Description({ children }: { children: ReactNode }) {
-  return <div className={style.fieldDescription}>{children}</div>;
+export function Description({
+  children,
+  tone = 'default',
+}: {
+  children: ReactNode;
+  tone?: 'default' | 'warning';
+}) {
+  return <div className={cx([style.fieldDescription, tone === 'warning' && style.warningText])}>{children}</div>;
 }
 
 export function Highlight({ children }: { children: ReactNode }) {