Link start times from excel import (#903)

* add test for linking start time in excel import

* link ids

* add link to UI

* ensure times with cachedRundown

---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>

apps/client/src/features/app-settings/panel/sources-panel/preview/PreviewRundown.module.scss

@@ -1,12 +1,27 @@
-  .center {
-    text-align: center;
-  }
+.center {
+  text-align: center;
+}
 
-  .nowrap {
-    white-space: nowrap;
-  }
+.nowrap {
+  white-space: nowrap;
+}
 
-  tr .secondaryRow {
-    background-color: $white-7;
-    padding-left: 2em;
-  }
+tr .secondaryRow {
+  background-color: $white-7;
+  padding-left: 2em;
+}
+
+.linkStartActive {
+  color: $active-indicator;
+  transform: rotate(-45deg);
+}
+
+.flex {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.subdued {
+  opacity: $opacity-disabled;
+}

apps/client/src/features/app-settings/panel/sources-panel/preview/PreviewRundown.tsx

@@ -1,4 +1,5 @@
 import { Fragment } from 'react';
+import { IoLink } from '@react-icons/all-files/io5/IoLink';
 import { CustomFields, isOntimeBlock, isOntimeEvent, OntimeRundown } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
@@ -83,7 +84,10 @@ export default function PreviewRundown(props: PreviewRundownProps) {
                 </td>
                 <td className={style.nowrap}>{event.cue}</td>
                 <td>{event.title}</td>
-                <td>{millisToString(event.timeStart)}</td>
+                <td className={style.flex}>
+                  <span className={event.linkStart ? style.subdued : undefined}>{millisToString(event.timeStart)}</span>
+                  {event.linkStart && <IoLink className={style.linkStartActive} />}
+                </td>
                 <td>{millisToString(event.timeEnd)}</td>
                 <td>{millisToString(event.duration)}</td>
                 <td>{millisToString(event.timeWarning)}</td>