refactor: small fixes and style tweaks

fix: prevent reflow on editing images

fix: schedule overview

fix: report on all events

refactor: over-under time colours

fix: prevent edit on delete

apps/client/src/views/common/schedule/Schedule.scss

@@ -50,12 +50,12 @@ $indeterminate-width: clamp(32px, 3vw, 48px);
       color: $ontime-delay-text;
     }
 
-    &--ahead {
-      color: $green-500;
+    &--over {
+      color: $playback-over;
     }
 
-    &--behind {
-      color: $orange-500;
+    &--under {
+      color: $playback-under;
     }
   }
 

apps/client/src/views/common/schedule/ScheduleItem.tsx

@@ -1,4 +1,5 @@
 import { useRuntimeOffset } from '../../../common/hooks/useSocket';
+import { getOffsetState } from '../../../common/utils/offset';
 import { cx } from '../../../common/utils/styleUtils';
 import { formatTime } from '../../../common/utils/time';
 import SuperscriptTime from '../../../features/viewers/common/superscript-time/SuperscriptTime';
@@ -121,11 +122,7 @@ function ProjectedTime(props: OffsetTimeProps) {
 
   const projectedOffset = offset - delay;
   const projectedTime = formatTime(time - offset, formatOptions);
+  const projectedState = getOffsetState(projectedOffset);
 
-  return (
-    <SuperscriptTime
-      className={cx([projectedOffset > 0 && 'entry-times--ahead', projectedOffset < 0 && 'entry-times--behind'])}
-      time={projectedTime}
-    />
-  );
+  return <SuperscriptTime className={`entry-times--${projectedState}`} time={projectedTime} />;
 }

apps/client/src/views/countdown/Countdown.scss

@@ -141,12 +141,12 @@ $item-height: 3.5rem;
     color: $delay-color;
   }
 
-  .sub__schedule--ahead {
-    color: $green-500;
+  .sub__schedule--over {
+    color: $playback-over
   }
 
-  .sub__schedule--behind {
-    color: $orange-500;
+  .sub__schedule--under {
+    color: $playback-under
   }
 
   .sub__title {

apps/client/src/views/countdown/CountdownSubscriptions.tsx

@@ -7,6 +7,7 @@ import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivit
 import useFollowComponent from '../../common/hooks/useFollowComponent';
 import { useCurrentDay, useRuntimeOffset } from '../../common/hooks/useSocket';
 import { ViewExtendedTimer } from '../../common/models/TimeManager.type';
+import { getOffsetState } from '../../common/utils/offset';
 import { cx } from '../../common/utils/styleUtils';
 import { throttle } from '../../common/utils/throttle';
 import FollowButton from '../../features/operator/follow-button/FollowButton';
@@ -134,14 +135,13 @@ function ProjectedSchedule(props: ProjectedScheduleProps) {
 
   // offset is negative if we are ahead
   const projectedOffset = offset - delay;
-
-  const classes = cx([projectedOffset > 0 && 'sub__schedule--ahead', projectedOffset < 0 && 'sub__schedule--behind']);
+  const projectState = getOffsetState(projectedOffset);
 
   return (
     <>
       <ClockTime
         value={timeStart - projectedOffset}
-        className={classes}
+        className={`sub__schedule--${projectState}`}
         preferredFormat12='h:mm'
         preferredFormat24='HH:mm'
       />

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

@@ -103,7 +103,7 @@ function DurationInput({
       onClick={handleFakeFocus}
       onFocus={handleFakeFocus}
       muted={!lockedValue}
-      offset={delayed ? 'behind' : undefined}
+      offset={delayed ? 'over' : undefined}
       ref={textRef}
     >
       {children}

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

@@ -14,12 +14,12 @@
 
   overflow: hidden;
 
-  &.ahead {
-    color: $playback-ahead;
+  &.under {
+    color: $playback-under;
   }
 
-  &.behind {
-    color: $ontime-delay-text;
+  &.over {
+    color: $playback-over;
   }
 
   &.muted {

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

@@ -5,7 +5,7 @@ import { cx } from '../../../../common/utils/styleUtils';
 import style from './TextLikeInput.module.scss';
 
 interface TextLikeInputProps extends HTMLAttributes<HTMLSpanElement> {
-  offset?: 'ahead' | 'behind';
+  offset?: 'over' | 'under' | 'muted' | null;
   muted?: boolean;
 }
 

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

@@ -105,7 +105,7 @@ function TimeInputDuration({
       onClick={handleFakeFocus}
       onFocus={handleFakeFocus}
       muted={!lockedValue}
-      offset={delayed ? 'behind' : undefined}
+      offset={delayed ? 'over' : undefined}
       ref={textRef}
     >
       {children}

apps/client/src/views/studio/StudioTimers.scss

@@ -63,12 +63,12 @@
     }
   }
 
-  .ahead {
-    color: $playback-ahead;
+  .over {
+    color: $playback-over;
   }
 
-  .behind {
-    color: $ontime-delay-text;
+  .under {
+    color: $playback-under;
   }
 
   .muted {