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>
2026-08-16 12:53:32 +00:00 · 2026-03-08 16:22:12 +01:00
parent 9516ac21bb
commit 1849b4d39f
501 changed files with 2678 additions and 4654 deletions
@@ -1,9 +1,8 @@
 import { PropsWithChildren } from 'react';

 import { overrideStylesURL } from '../common/api/constants';
-import { useRuntimeStylesheet } from '../common/hooks/useRuntimeStylesheet';
 import useViewSettings from '../common/hooks-query/useViewSettings';
-
+import { useRuntimeStylesheet } from '../common/hooks/useRuntimeStylesheet';
 import Loader from './common/loader/Loader';

 export default function ViewLoader({ children }: PropsWithChildren) {
@@ -1,8 +1,8 @@
-import { useEffect, useMemo, useState } from 'react';
-import QRCode from 'react-qr-code';
 import { useViewportSize } from '@mantine/hooks';
 import { OntimeView, ProjectData } from 'ontime-types';
 import { millisToString, removeLeadingZero } from 'ontime-utils';
+import { useEffect, useMemo, useState } from 'react';
+import QRCode from 'react-qr-code';

 import ProgressBar from '../../common/components/progress-bar/ProgressBar';
 import Empty from '../../common/components/state/Empty';
@@ -18,7 +18,6 @@ import { useTranslation } from '../../translation/TranslationProvider';
 import Loader from '../common/loader/Loader';
 import ScheduleExport from '../common/schedule/ScheduleExport';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
-
 import { getBackstageOptions, useBackstageOptions } from './backstage.options';
 import { getCardData, getIsPendingStart, getShowProgressBar, isOvertime } from './backstage.utils';
 import { BackstageData, useBackstageData } from './useBackstageData';
@@ -1,6 +1,6 @@
+import { CustomFields, OntimeEvent, ProjectData } from 'ontime-types';
 import { use, useMemo } from 'react';
 import { useSearchParams } from 'react-router';
-import { CustomFields, OntimeEvent, ProjectData } from 'ontime-types';

 import { getTimeOption } from '../../common/components/view-params-editor/common.options';
 import { OptionTitle } from '../../common/components/view-params-editor/constants';
@@ -5,7 +5,7 @@ import useProjectData from '../../common/hooks-query/useProjectData';
 import { useFlatRundown } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
-import { aggregateQueryStatus, ViewData } from '../utils/viewLoader.utils';
+import { ViewData, aggregateQueryStatus } from '../utils/viewLoader.utils';

 export interface BackstageData {
  events: OntimeEntry[];
@@ -1,5 +1,4 @@
 import { cx } from '../../../common/utils/styleUtils';
-
 import { useSchedule } from './ScheduleContext';
 import ScheduleItem from './ScheduleItem';

@@ -1,7 +1,8 @@
+import { EntryId, OntimeEntry, OntimeEvent, isOntimeEvent } from 'ontime-types';
 import {
-  createContext,
  PropsWithChildren,
  RefObject,
+  createContext,
  use,
  useCallback,
  useEffect,
@@ -9,11 +10,9 @@ import {
  useRef,
  useState,
 } from 'react';
-import { EntryId, isOntimeEvent, OntimeEntry, OntimeEvent } from 'ontime-types';

 import { usePartialRundown } from '../../../common/hooks-query/useRundown';
 import { ExtendedEntry } from '../../../common/utils/rundownMetadata';
-
 import { useScheduleOptions } from './schedule.options';

 interface ScheduleContextState {
@@ -1,5 +1,5 @@
-import { memo } from 'react';
 import { MaybeString } from 'ontime-types';
+import { memo } from 'react';

 import Schedule from './Schedule';
 import { ScheduleProvider } from './ScheduleContext';
@@ -6,7 +6,6 @@ import { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { cx } from '../../../common/utils/styleUtils';
 import { formatTime, getExpectedTimesFromExtendedEvent } from '../../../common/utils/time';
 import SuperscriptPeriod from '../superscript-time/SuperscriptPeriod';
-
 import { useScheduleOptions } from './schedule.options';

 import './Schedule.scss';
@@ -1,5 +1,4 @@
 import { cx } from '../../../common/utils/styleUtils';
-
 import { useSchedule } from './ScheduleContext';

 import './Schedule.scss';
@@ -1,6 +1,6 @@
+import { EntryId, OntimeEvent, OntimeView, PlayableEvent, isOntimeEvent, isPlayableEvent } from 'ontime-types';
 import { useMemo, useState } from 'react';
 import { IoAdd } from 'react-icons/io5';
-import { EntryId, isOntimeEvent, isPlayableEvent, OntimeEvent, OntimeView, PlayableEvent } from 'ontime-types';

 import Button from '../../common/components/buttons/Button';
 import Empty from '../../common/components/state/Empty';
@@ -14,7 +14,6 @@ import { formatTime, getDefaultFormat } from '../../common/utils/time';
 import { useTranslation } from '../../translation/TranslationProvider';
 import Loader from '../common/loader/Loader';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
-
 import { getCountdownOptions, useCountdownOptions } from './countdown.options';
 import { getOrderedSubscriptions } from './countdown.utils';
 import CountdownSelect from './CountdownSelect';
@@ -1,13 +1,12 @@
+import { EntryId, PlayableEvent } from 'ontime-types';
 import { useState } from 'react';
 import { IoArrowBack, IoClose, IoSaveOutline } from 'react-icons/io5';
 import { useNavigate } from 'react-router';
-import { EntryId, PlayableEvent } from 'ontime-types';

 import Button from '../../common/components/buttons/Button';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { cx } from '../../common/utils/styleUtils';
 import ClockTime from '../common/clock-time/ClockTime';
-
 import { makeSubscriptionsUrl } from './countdown.utils';

 import './Countdown.scss';
@@ -1,13 +1,13 @@
-import { useEffect, useRef, useState } from 'react';
-import { IoPencil } from 'react-icons/io5';
 import { MaybeNumber, OntimeEvent } from 'ontime-types';
 import { dayInMs } from 'ontime-utils';
+import { useEffect, useRef, useState } from 'react';
+import { IoPencil } from 'react-icons/io5';

 import Button from '../../common/components/buttons/Button';
+import useReport from '../../common/hooks-query/useReport';
 import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivity';
 import useFollowComponent from '../../common/hooks/useFollowComponent';
 import { useExpectedStartData, usePlayback, useSelectedEventId } from '../../common/hooks/useSocket';
-import useReport from '../../common/hooks-query/useReport';
 import { getOffsetState } from '../../common/utils/offset';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { cx } from '../../common/utils/styleUtils';
@@ -16,7 +16,6 @@ import FollowButton from '../../features/operator/follow-button/FollowButton';
 import ClockTime from '../common/clock-time/ClockTime';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
 import { getPropertyValue } from '../common/viewUtils';
-
 import { useCountdownOptions } from './countdown.options';
 import {
  CountdownEvent,
@@ -1,16 +1,15 @@
-import { IoPencil } from 'react-icons/io5';
 import { MaybeNumber, OntimeEvent } from 'ontime-types';
 import { getExpectedStart } from 'ontime-utils';
+import { IoPencil } from 'react-icons/io5';

 import Button from '../../common/components/buttons/Button';
+import useReport from '../../common/hooks-query/useReport';
 import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivity';
 import { useExpectedStartData } from '../../common/hooks/useSocket';
-import useReport from '../../common/hooks-query/useReport';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { cx } from '../../common/utils/styleUtils';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
 import { getPropertyValue } from '../common/viewUtils';
-
 import { useCountdownOptions } from './countdown.options';
 import { useSubscriptionDisplayData } from './countdown.utils';
 import { ScheduleTime } from './CountdownSubscriptions';
@@ -1,6 +1,6 @@
+import { CustomFields, EntryId, OntimeEvent } from 'ontime-types';
 import { use, useMemo } from 'react';
 import { useSearchParams } from 'react-router';
-import { CustomFields, EntryId, OntimeEvent } from 'ontime-types';

 import { getTimeOption } from '../../common/components/view-params-editor/common.options';
 import { OptionTitle } from '../../common/components/view-params-editor/constants';
@@ -1,5 +1,5 @@
 import { EntryId, MaybeNumber, OffsetMode, OntimeEntry, OntimeEvent, OntimeReport, Playback } from 'ontime-types';
-import { getExpectedStart, MILLIS_PER_MINUTE, millisToString, removeLeadingZero } from 'ontime-utils';
+import { MILLIS_PER_MINUTE, getExpectedStart, millisToString, removeLeadingZero } from 'ontime-utils';

 import { useCountdownSocket } from '../../common/hooks/useSocket';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
@@ -6,7 +6,7 @@ import { useFlatRundownWithMetadata } from '../../common/hooks-query/useRundown'
 import useSettings from '../../common/hooks-query/useSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
-import { aggregateQueryStatus, ViewData } from '../utils/viewLoader.utils';
+import { ViewData, aggregateQueryStatus } from '../utils/viewLoader.utils';

 export interface CountdownData {
  customFields: CustomFields;
@@ -8,9 +8,9 @@
  display: grid;
  grid-template-rows: 3.5rem auto auto 1fr;
  grid-template-areas:
-          'overview'
-          'progress'
-          'settings'
-          'table';
+    'overview'
+    'progress'
+    'settings'
+    'table';
  color: $ui-white;
 }
@@ -1,5 +1,5 @@
-import { IoApps } from 'react-icons/io5';
 import { useDisclosure } from '@mantine/hooks';
+import { IoApps } from 'react-icons/io5';

 import IconButton from '../../common/components/buttons/IconButton';
 import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
@@ -8,7 +8,6 @@ import { useEntryActions } from '../../common/hooks/useEntryAction';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { getIsNavigationLocked } from '../../externals';
 import CuesheetOverview from '../../features/overview/CuesheetOverview';
-
 import EntryEditModal from './cuesheet-edit-modal/EntryEditModal';
 import CuesheetProgress from './cuesheet-progress/CuesheetProgress';
 import CuesheetTableWrapper from './CuesheetTableWrapper';
@@ -3,7 +3,6 @@ import { memo, use, useMemo } from 'react';
 import EmptyPage from '../../common/components/state/EmptyPage';
 import { PresetContext } from '../../common/context/PresetContext';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
-
 import CuesheetDnd from './cuesheet-dnd/CuesheetDnd';
 import { makeCuesheetColumns } from './cuesheet-table/cuesheet-table-elements/cuesheetColsFactory';
 import CuesheetTable from './cuesheet-table/CuesheetTable';
@@ -1,5 +1,4 @@
 import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
-
 import CuesheetPage from './CuesheetPage';

 export default function ProtectedCuesheet() {
@@ -1,14 +1,14 @@
-import { PropsWithChildren } from 'react';
 import {
-  closestCorners,
  DndContext,
  DragEndEvent,
  PointerSensor,
  TouchSensor,
+  closestCorners,
  useSensor,
  useSensors,
 } from '@dnd-kit/core';
 import { ColumnDef } from '@tanstack/react-table';
+import { PropsWithChildren } from 'react';

 import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { useColumnOrder } from '../cuesheet-table/useColumnManager';
@@ -2,7 +2,6 @@ import { memo } from 'react';

 import Modal from '../../../common/components/modal/Modal';
 import CuesheetEntryEditor from '../../../features/rundown/entry-editor/CuesheetEventEditor';
-
 import { useEditModal } from './useEditModal';

 export default memo(EntryEditModal);
@@ -1,6 +1,6 @@
 import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
-import { useProgressData } from '../../../common/hooks/useSocket';
 import useViewSettings from '../../../common/hooks-query/useViewSettings';
+import { useProgressData } from '../../../common/hooks/useSocket';

 import styles from './CuesheetProgress.module.scss';

@@ -1,3 +1,6 @@
+import { useTableNav } from '@table-nav/react';
+import { ColumnDef, Table, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { OntimeEntry, TimeField, isOntimeDelay, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
 import { ComponentProps, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
  ContextProp,
@@ -7,22 +10,18 @@ import {
  TableVirtuoso,
  TableVirtuosoHandle,
 } from 'react-virtuoso';
-import { useTableNav } from '@table-nav/react';
-import { ColumnDef, getCoreRowModel, Table, useReactTable } from '@tanstack/react-table';
-import { isOntimeDelay, isOntimeGroup, isOntimeMilestone, OntimeEntry, TimeField } from 'ontime-types';

 import EmptyPage from '../../../common/components/state/EmptyPage';
 import EmptyTableBody from '../../../common/components/state/EmptyTableBody';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
-import { useSelectedEventId } from '../../../common/hooks/useSocket';
 import { useFlatRundownWithMetadata } from '../../../common/hooks-query/useRundown';
+import { useSelectedEventId } from '../../../common/hooks/useSocket';
 import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
-import { usePersistedRundownOptions } from '../../../features/rundown/rundown.options';
 import EditorTableSettings from '../../../features/rundown/rundown-table/EditorTableSettings';
+import { usePersistedRundownOptions } from '../../../features/rundown/rundown.options';
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
 import { AppMode } from '../../../ontimeConfig';
 import { usePersistedCuesheetOptions } from '../cuesheet.options';
-
 import { CuesheetHeader, SortableCuesheetHeader } from './cuesheet-table-elements/CuesheetHeader';
 import DelayRow from './cuesheet-table-elements/DelayRow';
 import EventRow from './cuesheet-table-elements/EventRow';
@@ -252,7 +251,6 @@ export default function CuesheetTable({ columns, cuesheetMode, tableRoot, setCue
  );
 }

-
 interface CuesheetVirtuosoContext {
  columnSizeVars: { [key: string]: number };
  cursor: string | null;
@@ -1,12 +1,11 @@
+import { SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable';
+import { HeaderGroup, flexRender } from '@tanstack/react-table';
 import { CSSProperties } from 'react';
-import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
-import { flexRender, HeaderGroup } from '@tanstack/react-table';

 import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { AppMode } from '../../../../ontimeConfig';
 import { usePersistedCuesheetOptions } from '../../cuesheet.options';
-
 import { Draggable, SortableCell, TableCell } from './SortableCell';

 import style from '../CuesheetTable.module.scss';
@@ -1,5 +1,5 @@
-import { memo, PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 import { millisToString, parseUserTime } from 'ontime-utils';
+import { PropsWithChildren, memo, useCallback, useEffect, useRef, useState } from 'react';

 import SingleLineCell from './SingleLineCell';
 import TextLikeInput from './TextLikeInput';
@@ -1,8 +1,8 @@
-import { CSSProperties, useMemo } from 'react';
-import { IoEllipsisHorizontal } from 'react-icons/io5';
-import { flexRender, Table } from '@tanstack/react-table';
+import { Table, flexRender } from '@tanstack/react-table';
 import { EntryId, OntimeEntry, RGBColour, SupportedEntry } from 'ontime-types';
 import { colourToHex, cssOrHexToColour } from 'ontime-utils';
+import { CSSProperties, useMemo } from 'react';
+import { IoEllipsisHorizontal } from 'react-icons/io5';

 import IconButton from '../../../../common/components/buttons/IconButton';
 import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
@@ -1,7 +1,7 @@
+import { Table, flexRender } from '@tanstack/react-table';
+import { EntryId, SupportedEntry } from 'ontime-types';
 import { CSSProperties } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
-import { flexRender, Table } from '@tanstack/react-table';
-import { EntryId, SupportedEntry } from 'ontime-types';

 import IconButton from '../../../../common/components/buttons/IconButton';
 import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
@@ -1,8 +1,8 @@
-import { CSSProperties } from 'react';
-import { IoEllipsisHorizontal } from 'react-icons/io5';
-import { flexRender, Table } from '@tanstack/react-table';
+import { Table, flexRender } from '@tanstack/react-table';
 import { EntryId, SupportedEntry } from 'ontime-types';
 import { colourToHex, cssOrHexToColour } from 'ontime-utils';
+import { CSSProperties } from 'react';
+import { IoEllipsisHorizontal } from 'react-icons/io5';

 import IconButton from '../../../../common/components/buttons/IconButton';
 import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
@@ -1,7 +1,7 @@
-import { CSSProperties, ReactNode } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Header } from '@tanstack/react-table';
+import { CSSProperties, ReactNode } from 'react';

 import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';

@@ -1,4 +1,4 @@
-import { forwardRef, HTMLAttributes, memo, PropsWithChildren, useImperativeHandle, useRef } from 'react';
+import { HTMLAttributes, PropsWithChildren, forwardRef, memo, useImperativeHandle, useRef } from 'react';

 import { cx } from '../../../../common/utils/styleUtils';

@@ -1,8 +1,7 @@
-import { memo, PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 import { parseUserTime } from 'ontime-utils';
+import { PropsWithChildren, memo, useCallback, useEffect, useRef, useState } from 'react';

 import { formatTime } from '../../../../common/utils/time';
-
 import SingleLineCell from './SingleLineCell';
 import TextLikeInput from './TextLikeInput';

@@ -1,14 +1,13 @@
-import { useCallback } from 'react';
 import { CellContext, ColumnDef } from '@tanstack/react-table';
-import { CustomFields, isOntimeDelay, isOntimeEvent, TimeStrategy, URLPreset } from 'ontime-types';
+import { CustomFields, TimeStrategy, URLPreset, isOntimeDelay, isOntimeEvent } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
+import { useCallback } from 'react';

 import DelayIndicator from '../../../../common/components/delay-indicator/DelayIndicator';
 import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { formatDuration, formatTime } from '../../../../common/utils/time';
 import { AppMode } from '../../../../ontimeConfig';
 import { getCuesheetColumnAccessPolicy } from '../../cuesheet.policies';
-
 import DurationInput from './DurationInput';
 import EditableImage from './EditableImage';
 import FlagCell from './FlagCell';
@@ -1,12 +1,11 @@
+import { SupportedEntry } from 'ontime-types';
 import { memo } from 'react';
 import { IoAdd, IoArrowDown, IoArrowUp, IoDuplicateOutline, IoOptions, IoTrash } from 'react-icons/io5';
-import { SupportedEntry } from 'ontime-types';

 import { PositionedDropdownMenu } from '../../../../common/components/dropdown-menu/DropdownMenu';
 import { useEntryActionsContext } from '../../../../common/context/EntryActionsContext';
 import { useEditModal } from '../../cuesheet-edit-modal/useEditModal';
 import { useCuesheetPermissions } from '../../useTablePermissions';
-
 import { useCuesheetTableMenu } from './useCuesheetTableMenu';

 export default memo(TableMenu);
@@ -1,10 +1,10 @@
-import { ReactNode } from 'react';
-import { IoBookOutline, IoChevronDown, IoOptions } from 'react-icons/io5';
 import { Popover } from '@base-ui/react/popover';
 import { Toggle } from '@base-ui/react/toggle';
 import { ToggleGroup } from '@base-ui/react/toggle-group';
 import { Toolbar } from '@base-ui/react/toolbar';
 import type { Column } from '@tanstack/react-table';
+import { ReactNode } from 'react';
+import { IoBookOutline, IoChevronDown, IoOptions } from 'react-icons/io5';

 import Button from '../../../../common/components/buttons/Button';
 import Checkbox from '../../../../common/components/checkbox/Checkbox';
@@ -15,7 +15,6 @@ import { cx } from '../../../../common/utils/styleUtils';
 import { AppMode } from '../../../../ontimeConfig';
 import { CuesheetOptions, usePersistedCuesheetOptions } from '../../cuesheet.options';
 import { useCuesheetPermissions } from '../../useTablePermissions';
-
 import CuesheetShareModal from './CuesheetShareModal';

 import style from './CuesheetTableSettings.module.scss';
@@ -1,6 +1,6 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useLocalStorage } from '@mantine/hooks';
 import { ColumnDef, ColumnSizingState, Updater } from '@tanstack/react-table';
+import { useCallback, useEffect, useMemo, useState } from 'react';

 import { debounce } from '../../../common/utils/debounce';
 import { makeStageKey } from '../../../common/utils/localStorage';
@@ -1,7 +1,6 @@
 import { URLPreset } from 'ontime-types';

 import { AppMode } from '../../ontimeConfig';
-
 import type { CuesheetPermissions } from './useTablePermissions';

 function getPermissionKeys(permission: string | undefined): Set<string> {
@@ -1,10 +1,9 @@
-import { useCallback, useEffect, useMemo } from 'react';
 import { useSessionStorage } from '@mantine/hooks';
 import { URLPreset } from 'ontime-types';
+import { useCallback, useEffect, useMemo } from 'react';

 import { sessionScope } from '../../externals';
 import { AppMode, sessionKeys } from '../../ontimeConfig';
-
 import { getCuesheetPermissionsPolicy } from './cuesheet.policies';
 import { useCuesheetPermissions } from './useTablePermissions';

@@ -2,7 +2,6 @@ import { lazy } from 'react';

 import TrackingPlaybackBar from '../../features/control/playback/tracking-playback-bar/TrackingPlaybackBar';
 import { AppMode } from '../../ontimeConfig';
-
 import TitleList from './title-list/TitleList';
 import { EditorLayoutMode, useEditorLayout } from './useEditorLayout';

@@ -4,7 +4,6 @@ import { LuLayoutDashboard } from 'react-icons/lu';

 import IconButton from '../../common/components/buttons/IconButton';
 import { DropdownMenu, DropdownMenuOption } from '../../common/components/dropdown-menu/DropdownMenu';
-
 import { EditorLayoutMode, useEditorLayout } from './useEditorLayout';

 export default memo(EditorLayoutOptions);
@@ -1,6 +1,6 @@
+import { useDisclosure, useHotkeys } from '@mantine/hooks';
 import { useCallback, useEffect } from 'react';
 import { IoApps, IoClose, IoSettingsOutline } from 'react-icons/io5';
-import { useDisclosure, useHotkeys } from '@mantine/hooks';

 import IconButton from '../../common/components/buttons/IconButton';
 import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
@@ -10,10 +10,9 @@ import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import AppSettings from '../../features/app-settings/AppSettings';
 import useAppSettingsNavigation from '../../features/app-settings/useAppSettingsNavigation';
 import EditorOverview from '../../features/overview/EditorOverview';
-
-import WelcomePlacement from './welcome/WelcomePlacement';
 import Editor from './Editor';
 import EditorLayoutOptions from './EditorLayoutOptions';
+import WelcomePlacement from './welcome/WelcomePlacement';

 import styles from './ProtectedEditor.module.scss';

@@ -67,4 +67,4 @@
  max-height: 70vh;
  overflow: auto;
  padding-top: 1rem;
-}
+}
@@ -1,10 +1,9 @@
-import { KeyboardEvent, useState } from 'react';
 import { useDebouncedCallback } from '@mantine/hooks';
 import { SupportedEntry } from 'ontime-types';
+import { KeyboardEvent, useState } from 'react';

 import Input from '../../../common/components/input/input/Input';
 import Modal from '../../../common/components/modal/Modal';
-
 import useFinder from './useFinder';

 import style from './Finder.module.scss';
@@ -1,5 +1,5 @@
+import { EntryId, MaybeString, SupportedEntry, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
 import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
-import { EntryId, isOntimeEvent, isOntimeGroup, isOntimeMilestone, MaybeString, SupportedEntry } from 'ontime-types';

 import { useFlatRundown } from '../../../common/hooks-query/useRundown';
 import { useSelectAndRevealEntry } from '../../../features/rundown/useSelectAndRevealEntry';
@@ -1,9 +1,8 @@
-import { createRoot } from 'react-dom/client';
 import { ErrorBoundary } from '@sentry/react';
+import { createRoot } from 'react-dom/client';

 import { CornerPipButton } from '../../../common/components/editor-utils/EditorUtils';
 import useViewSettings from '../../../common/hooks-query/useViewSettings';
-
 import { PipTimer } from './PipTimer';

 export default function PipTimerHost() {
@@ -1,4 +1,4 @@
-import { lazy, memo, Suspense } from 'react';
+import { Suspense, lazy, memo } from 'react';

 import { isPipSupported } from './pip.utils';

@@ -111,7 +111,7 @@
    position: fixed;
    inset: 0;
    padding: 2vw;
-    background:  $viewer-background-color;
+    background: $viewer-background-color;
    opacity: 0;
    transition: opacity $viewer-transition-time;

@@ -1,15 +1,14 @@
+import { OntimeEvent, isOntimeEvent } from 'ontime-types';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
-import { isOntimeEvent, OntimeEvent } from 'ontime-types';

 import ScrollArea from '../../../common/components/scroll-area/ScrollArea';
-import { useSelectedEventId } from '../../../common/hooks/useSocket';
 import useRundown from '../../../common/hooks-query/useRundown';
+import { useSelectedEventId } from '../../../common/hooks/useSocket';
 import { ExtendedEntry, getFlatRundownMetadata } from '../../../common/utils/rundownMetadata';
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
 import { useSelectAndRevealEntry } from '../../../features/rundown/useSelectAndRevealEntry';
 import { AppMode } from '../../../ontimeConfig';
-
 import { getCurrentEventInfo } from './titleList.utils';
 import TitleListEmpty from './TitleListEmpty';
 import TitleListItem from './TitleListItem';
@@ -1,6 +1,6 @@
-import { memo, useCallback } from 'react';
 import { Day, OntimeEvent } from 'ontime-types';
 import { MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils';
+import { memo, useCallback } from 'react';

 import Tooltip from '../../../common/components/tooltip/Tooltip';
 import { ExtendedEntry } from '../../../common/utils/rundownMetadata';
@@ -1,5 +1,5 @@
-import { useSearchParams } from 'react-router';
 import { isValueOfEnum } from 'ontime-utils';
+import { useSearchParams } from 'react-router';

 const layoutParam = 'layout';

@@ -11,7 +11,6 @@ import * as Editor from '../../../common/components/editor-utils/EditorUtils';
 import ExternalLink from '../../../common/components/link/external-link/ExternalLink';
 import Modal from '../../../common/components/modal/Modal';
 import { appVersion, discordUrl, documentationUrl, websiteUrl } from '../../../externals';
-
 import ImportProjectButton from './composite/ImportProjectButton';
 import WelcomeProjectList from './composite/WelcomeProjectList';

@@ -1,5 +1,4 @@
 import { useDialogStore } from '../../../common/stores/dialogStore';
-
 import Welcome from './Welcome';

 export default function WelcomePlacement() {
@@ -27,7 +27,7 @@
    overflow-y: auto;
    width: min(calc(100vw - 4rem), 960px);
    display: flex;
-    flex-direction: column;  
+    flex-direction: column;
    align-items: start;
    gap: $view-element-gap;

@@ -1,5 +1,5 @@
-import { IoOpenOutline } from 'react-icons/io5';
 import { OntimeView } from 'ontime-types';
+import { IoOpenOutline } from 'react-icons/io5';

 import EmptyPage from '../../common/components/state/EmptyPage';
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
@@ -7,7 +7,6 @@ import ViewParamsEditor from '../../common/components/view-params-editor/ViewPar
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { useTranslation } from '../../translation/TranslationProvider';
 import Loader from '../common/loader/Loader';
-
 import { ProjectInfoData, useProjectInfoData } from './useProjectInfoData';

 import './ProjectInfo.scss';
@@ -1,5 +1,5 @@
-import { useMemo } from 'react';
 import { OntimeView } from 'ontime-types';
+import { useMemo } from 'react';

 import EmptyPage from '../../common/components/state/EmptyPage';
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
@@ -8,7 +8,6 @@ import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { cx } from '../../common/utils/styleUtils';
 import { getDefaultFormat } from '../../common/utils/time';
 import Loader from '../common/loader/Loader';
-
 import { getStudioOptions, useStudioOptions } from './studio.options';
 import StudioClock from './StudioClock';
 import StudioTimers from './StudioTimers';
@@ -5,7 +5,6 @@ import { useStudioClockSocket } from '../../common/hooks/useSocket';
 import { cx } from '../../common/utils/styleUtils';
 import { formatTime } from '../../common/utils/time';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
-
 import { getLargeClockData } from './studioClock.utils';

 import './StudioClock.scss';
@@ -7,7 +7,6 @@ import { cx } from '../../common/utils/styleUtils';
 import { useTranslation } from '../../translation/TranslationProvider';
 import { getPropertyValue } from '../common/viewUtils';
 import { getTimerColour } from '../utils/presentation.utils';
-
 import { useStudioOptions } from './studio.options';
 import { getFormattedEventData, getFormattedScheduleTimes } from './studioTimers.utils';

@@ -1,6 +1,6 @@
+import { CustomFields, OntimeEvent } from 'ontime-types';
 import { use, useMemo } from 'react';
 import { useSearchParams } from 'react-router';
-import { CustomFields, OntimeEvent } from 'ontime-types';

 import { getTimeOption } from '../../common/components/view-params-editor/common.options';
 import { OptionTitle } from '../../common/components/view-params-editor/constants';
@@ -5,7 +5,7 @@ import useProjectData from '../../common/hooks-query/useProjectData';
 import useSettings from '../../common/hooks-query/useSettings';
 import useViewSettings from '../../common/hooks-query/useViewSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
-import { aggregateQueryStatus, ViewData } from '../utils/viewLoader.utils';
+import { ViewData, aggregateQueryStatus } from '../utils/viewLoader.utils';

 export interface StudioData {
  customFields: CustomFields;
@@ -1,13 +1,12 @@
-import { memo, useMemo, useRef } from 'react';
 import { useViewportSize } from '@mantine/hooks';
-import { isOntimeEvent, isPlayableEvent, OntimeEntry, PlayableEvent } from 'ontime-types';
-import { dayInMs, getLastEvent, MILLIS_PER_HOUR } from 'ontime-utils';
+import { OntimeEntry, PlayableEvent, isOntimeEvent, isPlayableEvent } from 'ontime-types';
+import { MILLIS_PER_HOUR, dayInMs, getLastEvent } from 'ontime-utils';
+import { memo, useMemo, useRef } from 'react';

 import useHorizontalFollowComponent from '../../common/hooks/useHorizontalFollowComponent';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { cx } from '../../common/utils/styleUtils';
 import { getPropertyValue } from '../common/viewUtils';
-
 import TimelineMarkers from './timeline-markers/TimelineMarkers';
 import { useTimelineOptions } from './timeline.options';
 import { calculateTimelineLayout, getEndHour, getStartHour } from './timeline.utils';
@@ -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} />
+  );
 }
@@ -1,5 +1,5 @@
-import { useMemo } from 'react';
 import { OntimeView } from 'ontime-types';
+import { useMemo } from 'react';

 import EmptyPage from '../../common/components/state/EmptyPage';
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
@@ -10,7 +10,6 @@ import { formatTime, getDefaultFormat } from '../../common/utils/time';
 import { useTranslation } from '../../translation/TranslationProvider';
 import Loader from '../common/loader/Loader';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
-
 import Timeline from './Timeline';
 import { getTimelineOptions, useTimelineOptions } from './timeline.options';
 import { getUpcomingEvents, useScopedRundown } from './timeline.utils';
@@ -6,7 +6,6 @@ import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { formatDuration, getExpectedTimesFromExtendedEvent } from '../../common/utils/time';
 import { useTranslation } from '../../translation/TranslationProvider';
 import { getPropertyValue } from '../common/viewUtils';
-
 import TimelineSection from './timeline-section/TimelineSection';

 interface TimelineSectionsProps {
@@ -1,5 +1,5 @@
-import { memo } from 'react';
 import { MaybeString } from 'ontime-types';
+import { memo } from 'react';

 import { cx } from '../../../common/utils/styleUtils';

@@ -1,6 +1,6 @@
+import { CustomFields, OntimeEvent } from 'ontime-types';
 import { use, useMemo } from 'react';
 import { useSearchParams } from 'react-router';
-import { CustomFields, OntimeEvent } from 'ontime-types';

 import { getTimeOption } from '../../common/components/view-params-editor/common.options';
 import { OptionTitle } from '../../common/components/view-params-editor/constants';
@@ -1,19 +1,18 @@
-import { useMemo } from 'react';
-import { isOntimeEvent, isPlayableEvent, MaybeString, OntimeEntry, OntimeEvent, PlayableEvent } from 'ontime-types';
+import { MaybeString, OntimeEntry, OntimeEvent, PlayableEvent, isOntimeEvent, isPlayableEvent } from 'ontime-types';
 import {
+  MILLIS_PER_HOUR,
+  MILLIS_PER_MINUTE,
  dayInMs,
  getEventWithId,
  getFirstEvent,
  getNextEvent,
  getTimeFrom,
  isNewLatest,
-  MILLIS_PER_HOUR,
-  MILLIS_PER_MINUTE,
 } from 'ontime-utils';
+import { useMemo } from 'react';

 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { formatDuration } from '../../common/utils/time';
-
 import { useTimelineOptions } from './timeline.options';
 import type { ProgressStatus } from './TimelineEntry';

@@ -5,7 +5,7 @@ import useProjectData from '../../common/hooks-query/useProjectData';
 import { useFlatRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
-import { aggregateQueryStatus, ViewData } from '../utils/viewLoader.utils';
+import { ViewData, aggregateQueryStatus } from '../utils/viewLoader.utils';

 export interface TimelineData {
  events: ExtendedEntry<OntimeEntry>[];
@@ -1,5 +1,5 @@
-import { useMemo } from 'react';
 import { OntimeView, TimerType } from 'ontime-types';
+import { useMemo } from 'react';

 import { FitText } from '../../common/components/fit-text/FitText';
 import MultiPartProgressBar from '../../common/components/multi-part-progress-bar/MultiPartProgressBar';
@@ -16,7 +16,6 @@ import Loader from '../common/loader/Loader';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
 import { getFormattedTimer, getTimerByType } from '../common/viewUtils';
 import { getTimerColour } from '../utils/presentation.utils';
-
 import { getTimerOptions, useTimerOptions } from './timer.options';
 import {
  getCardData,
@@ -1,7 +1,7 @@
-import { use, useMemo } from 'react';
-import { useSearchParams } from 'react-router';
 import { CustomFields, OntimeEvent, TimerType } from 'ontime-types';
 import { validateTimerType } from 'ontime-utils';
+import { use, useMemo } from 'react';
+import { useSearchParams } from 'react-router';

 import type { SelectOption } from '../../common/components/select/Select';
 import {
@@ -6,7 +6,7 @@ import useRundown from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import useViewSettings from '../../common/hooks-query/useViewSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
-import { aggregateQueryStatus, ViewData } from '../utils/viewLoader.utils';
+import { ViewData, aggregateQueryStatus } from '../utils/viewLoader.utils';

 export interface TimerData {
  customFields: CustomFields;