fix: small style tweaks and bug fixes

fix: remove interactive styles from display elements

fix: automation form reset on submit

fix: prevent empty image src

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

@@ -42,7 +42,6 @@ interface AutomationFormProps {
 }
 
 export default function AutomationForm({ automation, onClose }: AutomationFormProps) {
-  'no memo'; // RHF and react-compiler dont seem to get along
   const isEdit = isAutomation(automation);
   const { data } = useCustomFields();
   const { refetch } = useAutomationSettings();

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

@@ -25,8 +25,6 @@ export default function AutomationSettingsForm({
   enabledOscIn,
   oscPortIn,
 }: AutomationSettingsProps) {
-  'no memo'; // RHF and react-compiler dont seem to get along
-
   const {
     handleSubmit,
     reset,
@@ -38,15 +36,15 @@ export default function AutomationSettingsForm({
   } = useForm<AutomationSettingsProps>({
     mode: 'onChange',
     defaultValues: { enabledAutomations, enabledOscIn, oscPortIn },
-    values: { enabledAutomations, enabledOscIn, oscPortIn },
     resetOptions: {
-      keepDirtyValues: true,
+      keepDirtyValues: false,
     },
   });
 
   const onSubmit = async (formData: AutomationSettingsProps) => {
     try {
       await editAutomationSettings(formData);
+      reset(formData);
     } catch (error) {
       const message = maybeAxiosError(error);
       setError('root', { message });

apps/client/src/features/app-settings/panel/settings-panel/ProjectData.tsx

@@ -248,7 +248,9 @@ export default function ProjectData() {
                           {...register(`custom.${idx}.url`)}
                         />
                         <div className={style.imageContainer}>
-                          <img src={watch(`custom.${idx}.url`)} alt='' loading='lazy' className='info__image' />
+                          {watch(`custom.${idx}.url`) && (
+                            <img src={watch(`custom.${idx}.url`)} alt='' loading='lazy' className='info__image' />
+                          )}
                         </div>
                       </div>
                     </label>

apps/client/src/features/rundown/entry-editor/EntryEditor.module.scss

@@ -99,10 +99,6 @@
   width: 7.5em;
   border: 1px solid transparent;
   border-bottom: 1px solid $gray-1100;
-
-  &:hover {
-    background: transparent;
-  }
 }
 
 .inactive {

apps/client/src/features/rundown/entry-editor/GroupEditor.tsx

@@ -63,19 +63,19 @@ export default function GroupEditor({ group }: GroupEditorProps) {
               // TODO: format with user time settings
             }
             <Editor.Label>First event start</Editor.Label>
-            <TextLikeInput className={style.textLikeInput}>
+            <TextLikeInput className={style.textLikeInput} disabled>
               {millisToString(group.timeStart, { fallback: timerPlaceholder })}
             </TextLikeInput>
           </div>
           <div>
             <Editor.Label>Last event end</Editor.Label>
-            <TextLikeInput className={style.textLikeInput}>
+            <TextLikeInput className={style.textLikeInput} disabled>
               {millisToString(group.timeEnd, { fallback: timerPlaceholder })}
             </TextLikeInput>
           </div>
           <div>
             <Editor.Label htmlFor='duration'>Scheduled duration</Editor.Label>
-            <TextLikeInput className={style.textLikeInput}>
+            <TextLikeInput className={style.textLikeInput} disabled>
               {millisToString(group.duration, { fallback: enDash })}
             </TextLikeInput>
           </div>
@@ -86,7 +86,7 @@ export default function GroupEditor({ group }: GroupEditorProps) {
             <TextLikeInput
               offset={planOffsetLabel}
               className={cx([style.textLikeInput, planOffset === null && style.inactive])}
-              tabIndex={-1}
+              disabled
             >
               {planOffset !== null && planOffset > 0 ? '+' : ''}
               {millisToString(planOffset, { fallback: enDash })}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.module.scss

@@ -27,7 +27,7 @@
     opacity: 0.4;
   }
 
-  &:hover {
+  &:hover:not(.disabled) {
     background-color: $gray-1100;
     cursor: text;
   }

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.tsx

@@ -7,12 +7,22 @@ import style from './TextLikeInput.module.scss';
 interface TextLikeInputProps extends HTMLAttributes<HTMLSpanElement> {
   offset?: 'over' | 'under' | 'muted' | null;
   muted?: boolean;
+  disabled?: boolean;
 }
 
 const TextLikeInput = forwardRef(
-  ({ offset, muted, children, className, ...elementProps }: PropsWithChildren<TextLikeInputProps>, textRef) => {
+  (
+    { offset, muted, disabled, children, className, ...elementProps }: PropsWithChildren<TextLikeInputProps>,
+    textRef,
+  ) => {
     const ref = useRef<HTMLDivElement | null>(null);
-    const classes = cx([style.textInput, offset && style[offset], muted && style.muted, className]);
+    const classes = cx([
+      style.textInput,
+      offset && style[offset],
+      muted && style.muted,
+      disabled && style.disabled,
+      className,
+    ]);
 
     useImperativeHandle(textRef, () => {
       return {
@@ -23,7 +33,7 @@ const TextLikeInput = forwardRef(
     });
 
     return (
-      <div className={classes} tabIndex={0} {...elementProps} ref={ref}>
+      <div className={classes} tabIndex={disabled ? -1 : 0} {...elementProps} ref={ref}>
         {children}
       </div>
     );