refactor: style tweaks and bug fixes

- italic and bold for rundown metadata entries
- allow deleting groups
- make groups in order
- correct style for milestones
- open playing groups
- style tweaks

apps/client/src/features/app-settings/panel/automations-panel/AutomationSettingsForm.tsx

@@ -107,7 +107,9 @@ export default function AutomationSettingsForm(props: AutomationSettingsProps) {
             <Switch
               size='large'
               checked={watch('enabledAutomations')}
-              onCheckedChange={(value: boolean) => setValue('enabledAutomations', value, { shouldDirty: true })}
+              onCheckedChange={(value: boolean) =>
+                setValue('enabledAutomations', value, { shouldDirty: true, shouldValidate: true })
+              }
             />
           </Panel.ListItem>
         </Panel.ListGroup>
@@ -125,7 +127,9 @@ export default function AutomationSettingsForm(props: AutomationSettingsProps) {
             <Switch
               size='large'
               checked={watch('enabledOscIn')}
-              onCheckedChange={(value: boolean) => setValue('enabledOscIn', value, { shouldDirty: true })}
+              onCheckedChange={(value: boolean) =>
+                setValue('enabledOscIn', value, { shouldDirty: true, shouldValidate: true })
+              }
             />
           </Panel.ListItem>
           <Panel.ListItem>

apps/client/src/features/app-settings/panel/automations-panel/TriggerForm.tsx

@@ -22,8 +22,15 @@ interface TriggerFormProps {
   postSubmit: () => void;
 }
 
-export default function TriggerForm(props: TriggerFormProps) {
-  const { automations, initialId, initialTitle, initialAutomationId, initialTrigger, onCancel, postSubmit } = props;
+export default function TriggerForm({
+  automations,
+  initialId,
+  initialTitle,
+  initialAutomationId,
+  initialTrigger,
+  onCancel,
+  postSubmit,
+}: TriggerFormProps) {
   const {
     handleSubmit,
     register,
@@ -35,8 +42,8 @@ export default function TriggerForm(props: TriggerFormProps) {
   } = useForm<TriggerDTO>({
     defaultValues: {
       title: initialTitle,
-      trigger: initialTrigger,
-      automationId: initialAutomationId,
+      trigger: initialTrigger ?? (cycles[0].value as TimerLifeCycle | undefined),
+      automationId: initialAutomationId ?? automations?.[Object.keys(automations)[0]]?.id,
     },
     resetOptions: {
       keepDirtyValues: true,

apps/client/src/features/app-settings/panel/automations-panel/automationUtils.ts

@@ -36,9 +36,9 @@ const staticSelectProperties = [
 ];
 
 const staticNextSelectProperties = [
-  { value: 'eventNow.id', label: 'Next ID' },
-  { value: 'eventNow.title', label: 'Next Title' },
-  { value: 'eventNow.cue', label: 'Next Cue' },
+  { value: 'eventNext.id', label: 'Next ID' },
+  { value: 'eventNext.title', label: 'Next Title' },
+  { value: 'eventNext.cue', label: 'Next Cue' },
 ];
 
 type SelectableField = {

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/preview/PreviewRundown.tsx

@@ -28,7 +28,7 @@ export default function PreviewRundown(props: PreviewRundownProps) {
   const fieldLabels = fieldKeys.map((key) => customFields[key].label);
 
   return (
-    <Panel.Table>
+    <Panel.Table className={style.nowrap}>
       <thead>
         <tr>
           <th>#</th>