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/settings-panel/ViewSettings.tsx

@@ -9,6 +9,7 @@ import Info from '../../../../common/components/info/Info';
 import { SwatchPickerRHF } from '../../../../common/components/input/colour-input/SwatchPicker';
 import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
 import Switch from '../../../../common/components/switch/Switch';
+import Tag from '../../../../common/components/tag/Tag';
 import useViewSettings from '../../../../common/hooks-query/useViewSettings';
 import { preventEscape } from '../../../../common/utils/keyEvent';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -55,6 +56,8 @@ export default function ViewSettings() {
     reset(data);
   };
 
+  const overrideStylesEnabled = watch('overrideStyles');
+
   if (!control) {
     return null;
   }
@@ -91,12 +94,22 @@ export default function ViewSettings() {
             <CodeEditorModal isOpen={isCodeEditorOpen} onClose={codeEditorHandler.close} />
             <Panel.ListItem>
               <Panel.Field
-                title='Override CSS styles'
-                description='Enables overriding view styles with custom stylesheet'
+                title={
+                  <>
+                    <span>Override CSS styles</span>
+                    {overrideStylesEnabled && <Tag variant='warning'>ON</Tag>}
+                  </>
+                }
+                description={
+                  overrideStylesEnabled
+                    ? 'CSS override is ON. Ontime views will use the custom override stylesheet.'
+                    : 'Enables overriding view styles with custom stylesheet'
+                }
+                descriptionTone={overrideStylesEnabled ? 'warning' : 'default'}
               />
               <Switch
                 size='large'
-                checked={watch('overrideStyles')}
+                checked={overrideStylesEnabled}
                 onCheckedChange={(value: boolean) => setValue('overrideStyles', value, { shouldDirty: true })}
               />
               <Button onClick={codeEditorHandler.open} disabled={isSubmitting}>