breaking: convert offset > over-under

change offset direction and relabel to over-under

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

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

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

@@ -14,7 +14,11 @@
 
   overflow: hidden;
 
-  &.delayed {
+  &.ahead {
+    color: $playback-ahead;
+  }
+
+  &.behind {
     color: $ontime-delay-text;
   }
 

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

@@ -5,29 +5,30 @@ import { cx } from '../../../../common/utils/styleUtils';
 import style from './TextLikeInput.module.scss';
 
 interface TextLikeInputProps extends HTMLAttributes<HTMLSpanElement> {
-  delayed?: boolean;
+  offset?: 'ahead' | 'behind';
   muted?: boolean;
 }
 
-const TextLikeInput = forwardRef((props: PropsWithChildren<TextLikeInputProps>, textRef) => {
-  const { delayed, muted, children, className, ...elementProps } = props;
-  const ref = useRef<HTMLDivElement | null>(null);
-  const classes = cx([style.textInput, delayed && style.delayed, muted && style.muted, className]);
+const TextLikeInput = forwardRef(
+  ({ offset, muted, children, className, ...elementProps }: PropsWithChildren<TextLikeInputProps>, textRef) => {
+    const ref = useRef<HTMLDivElement | null>(null);
+    const classes = cx([style.textInput, offset && style[offset], muted && style.muted, className]);
 
-  useImperativeHandle(textRef, () => {
-    return {
-      focusParentElement() {
-        ref.current?.parentElement?.focus();
-      },
-    };
-  });
+    useImperativeHandle(textRef, () => {
+      return {
+        focusParentElement() {
+          ref.current?.parentElement?.focus();
+        },
+      };
+    });
 
-  return (
-    <div className={classes} {...elementProps} tabIndex={0} ref={ref}>
-      {children}
-    </div>
-  );
-});
+    return (
+      <div className={classes} tabIndex={0} {...elementProps} ref={ref}>
+        {children}
+      </div>
+    );
+  },
+);
 
 TextLikeInput.displayName = 'TextLikeInput';
 

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

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