refactor: format times in editor based on project time format

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

@@ -8,7 +8,8 @@ import AppLink from '../../../common/components/link/app-link/AppLink';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
 import { getOffsetState } from '../../../common/utils/offset';
-import { cx, enDash, timerPlaceholder } from '../../../common/utils/styleUtils';
+import { cx, enDash } from '../../../common/utils/styleUtils';
+import { formatTime } from '../../../common/utils/time';
 import TextLikeInput from '../../../views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput';
 import EntryEditorCustomFields from './composite/EventEditorCustomFields';
 import EventTextArea from './composite/EventTextArea';
@@ -60,13 +61,13 @@ export default function GroupEditor({ group }: GroupEditorProps) {
           <div>
             <Editor.Label>First event start</Editor.Label>
             <TextLikeInput className={style.textLikeInput} disabled>
-              {millisToString(group.timeStart, { fallback: timerPlaceholder })}
+              {formatTime(group.timeStart)}
             </TextLikeInput>
           </div>
           <div>
             <Editor.Label>Last event end</Editor.Label>
             <TextLikeInput className={style.textLikeInput} disabled>
-              {millisToString(group.timeEnd, { fallback: timerPlaceholder })}
+              {formatTime(group.timeEnd)}
             </TextLikeInput>
           </div>
           <div>

apps/client/src/features/rundown/entry-editor/composite/EventEditorTimes.tsx

@@ -1,5 +1,5 @@
 import { EndAction, TimeStrategy, TimerType } from 'ontime-types';
-import { millisToString, parseUserTime } from 'ontime-utils';
+import { parseUserTime } from 'ontime-utils';
 import { memo } from 'react';
 import { IoInformationCircle } from 'react-icons/io5';
 
@@ -10,6 +10,7 @@ import Switch from '../../../../common/components/switch/Switch';
 import Tooltip from '../../../../common/components/tooltip/Tooltip';
 import { useEntryActionsContext } from '../../../../common/context/EntryActionsContext';
 import { millisToDelayString } from '../../../../common/utils/dateConfig';
+import { formatTime } from '../../../../common/utils/time';
 import TimeInputFlow from '../../time-input-flow/TimeInputFlow';
 
 import style from '../EntryEditor.module.scss';
@@ -68,9 +69,7 @@ function EventEditorTimes({
 
   const hasDelay = delay !== 0;
   const delayLabel = hasDelay
-    ? `Event is ${millisToDelayString(delay, 'expanded')}. New schedule ${millisToString(
-        timeStart + delay,
-      )} → ${millisToString(timeEnd + delay)}`
+    ? `Event is ${millisToDelayString(delay, 'expanded')}. New schedule ${formatTime(timeStart + delay)} → ${formatTime(timeEnd + delay)}`
     : '';
 
   return (