Feat: Time until group and flag (#1708)

* refactor: split event data and state data

* refactor: calculate the start time insted of until

* cleanup

* send next flag expected start from server

* refactor: render

* fix test

* use same icon

* refactor: group duration

* Optimize (#1711)

* refactor: consolidate block, flag and end loading and expected times

* work on test

* cal end value

* lint

* fix test

* remove todo

apps/client/src/common/hooks/useSocket.ts

@@ -151,7 +151,8 @@ export const useClock = createSelector((state: RuntimeStore) => ({
 }));
 
 export const useNextFlag = createSelector((state: RuntimeStore) => ({
-  nextFlag: state.nextFlag,
+  id: state.nextFlag?.id ?? null,
+  expectedStart: state.nextFlag?.expectedStart ?? null,
 }));
 
 /** Used by the progress bar components */
@@ -177,7 +178,6 @@ export const useRuntimePlaybackOverview = createSelector((state: RuntimeStore) =
   selectedEventIndex: state.runtime.selectedEventIndex,
   offset: state.runtime.offsetMode === OffsetMode.Absolute ? state.runtime.offsetAbs : state.runtime.offsetRel,
 
-  blockStartedAt: state.blockNow?.startedAt ?? null,
   blockExpectedEnd: state.blockNow?.expectedEnd ?? null,
 }));
 
@@ -186,13 +186,13 @@ export const useTimelineStatus = createSelector((state: RuntimeStore) => ({
   offset: state.runtime.offsetAbs,
 }));
 
-export const useTimeUntilData = createSelector((state: RuntimeStore) => ({
-  clock: state.clock,
+export const useExpectedStartData = createSelector((state: RuntimeStore) => ({
   offset: state.runtime.offsetMode === OffsetMode.Absolute ? state.runtime.offsetAbs : state.runtime.offsetRel,
   offsetMode: state.runtime.offsetMode,
   currentDay: state.eventNow?.dayOffset ?? 0,
   actualStart: state.runtime.actualStart,
   plannedStart: state.runtime.plannedStart,
+  clock: state.clock,
 }));
 
 export const useCurrentDay = createSelector((state: RuntimeStore) => ({