Deps migration (#1988)

* chore: migrate eslint to oxlint

* chore: migrate prettier to oxfmt

* chore: migrate typescript

* chore: toThrow should have a expected value

* chore: cast test value as Day

* chore: small title fix

* chore: mocks should be hoisted

* chore: incorrect async useage

* chore: test should be inside description

* chore: test sohuld include an expeced

* chore: oxfmt

---------

Co-authored-by: alex-Arc <omnivox@LAPTOP-RC5SNBVV.localdomain>

apps/client/src/views/timeline/TimelineEntry.tsx

@@ -1,12 +1,11 @@
-import { RefObject } from 'react';
 import { Day } from 'ontime-types';
+import { CSSProperties, RefObject } from 'react';
 
 import { useExpectedStartData, useTimer } from '../../common/hooks/useSocket';
 import { getProgress } from '../../common/utils/getProgress';
 import { alpha, cx } from '../../common/utils/styleUtils';
 import { formatDuration, formatTime, getExpectedTimesFromExtendedEvent } from '../../common/utils/time';
 import { useTranslation } from '../../translation/TranslationProvider';
-
 import { getStatusLabel } from './timeline.utils';
 
 import style from './Timeline.module.scss';
@@ -64,21 +63,25 @@ export function TimelineEntry({
     <div
       ref={ref}
       className={cx([style.column, smallArea && style.smallArea])}
-      style={{
-        '--color': colour,
-        '--lighter': lighterColour ?? '',
-        left: `${left}px`,
-        width: `${width}px`,
-      }}
+      style={
+        {
+          '--color': colour,
+          '--lighter': lighterColour ?? '',
+          left: `${left}px`,
+          width: `${width}px`,
+        } as CSSProperties
+      }
       data-testid={cue}
     >
       {status === 'live' ? <ActiveBlock /> : <div data-status={status} className={style.timelineBlock} />}
       <div
         className={cx([style.content, width < 20 && style.hide, !hasLink && style.separeLeft])}
         data-status={status}
-        style={{
-          '--color': colour,
-        }}
+        style={
+          {
+            '--color': colour,
+          } as CSSProperties
+        }
       >
         <div className={style.maybeInline}>
           <div className={cx([hasDelay && style.cross])}>{formattedStartTime}</div>
@@ -160,5 +163,7 @@ function TimelineEntryStatus({
 function ActiveBlock() {
   const { current, duration } = useTimer();
   const progress = getProgress(current, duration);
-  return <div data-status='live' className={style.timelineBlock} style={{ '--progress': `${progress}%` }} />;
+  return (
+    <div data-status='live' className={style.timelineBlock} style={{ '--progress': `${progress}%` } as CSSProperties} />
+  );
 }