feat: timer overview shows waiting timer

apps/client/src/features/operator/status-bar/StatusBar.module.scss

@@ -3,15 +3,12 @@
   top: 0;
   width: 100%;
   z-index: $zindex-floating;
-
   background-color: $gray-1350;
-  border-bottom: 1px solid $white-10;
-  box-shadow: $large-top-drawer-shadow;
 }
 
 .timers {
   padding-block: 0.75rem 0.5rem;
-  padding-inline: 1rem;
+  padding-inline: 1rem 0;
 
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
@@ -20,35 +17,14 @@
 
 .runningTimer {
   grid-area: timers;
-  display: flex;
-  flex-direction: column;
   justify-self: center;
-  color: $muted-gray;
 }
 
 .timeNow {
   grid-area: clock;
-  display: flex;
-  flex-direction: column;
   justify-self: right;
 }
 
-.label {
-  font-size: calc(1rem - 2px);
-  color: $gray-700;
-  line-height: 0.9em;
-}
-
-.timer {
-  font-size: 1.5rem;
-  letter-spacing: 0.5px;
-  line-height: 1.5;
-}
-
-.active {
-  color: $ui-white;
-}
-
 .progressOverride {
   grid-area: bar;
   height: 1rem;

apps/client/src/features/operator/status-bar/StatusBarTimers.tsx

@@ -1,33 +1,12 @@
-import { isPlaybackActive } from 'ontime-utils';
+import { ClockOverview, TimerOverview } from '../../overview/composite/TimeElements';
 
-import { useClock, useTimer } from '../../../common/hooks/useSocket';
-import { cx } from '../../../common/utils/styleUtils';
-import ClockTime from '../../viewers/common/clock-time/ClockTime';
-import RunningTime from '../../viewers/common/running-time/RunningTime';
-
-import styles from './StatusBar.module.scss';
+import style from './StatusBar.module.scss';
 
 export default function StatusBarTimers() {
-  const timer = useTimer();
-  const { clock } = useClock();
-
-  const playbackActive = isPlaybackActive(timer.playback);
-
   return (
-    <div className={styles.timers}>
-      <div className={styles.runningTimer}>
-        <span className={styles.label}>Running timer</span>
-        <RunningTime
-          className={cx([styles.timer, playbackActive && styles.active])}
-          value={timer.current}
-          hideLeadingZero
-        />
-      </div>
-
-      <div className={styles.timeNow}>
-        <span className={styles.label}>Time now</span>
-        <ClockTime className={styles.timer} value={clock} />
-      </div>
+    <div className={style.timers}>
+      <TimerOverview className={style.runningTimer} />
+      <ClockOverview className={style.timeNow} />
     </div>
   );
 }