refactor: simplify secondary styles

apps/client/src/features/control/message/MessageControl.module.scss

@@ -21,6 +21,22 @@
   position: relative;
 }
 
+.corner {
+  transform: rotate(45deg);
+
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  cursor: pointer;
+  color: $ui-white;
+  transition-property: color;
+  transition-duration: $transition-time-action;
+
+  &:hover {
+    color: $ontime-color;
+  }
+}
+
 .options {
   display: flex;
   flex-direction: column;
@@ -29,7 +45,7 @@
 
 .eventStatus {
   position: absolute;
-  right: 0;
+  left: 0;
   margin: 0.5rem 0.25rem;
   display: flex;
   flex-direction: column;

apps/client/src/features/control/message/TimerPreview.tsx

@@ -7,6 +7,7 @@ import { TimerPhase, TimerType } from 'ontime-types';
 
 import { useMessagePreview } from '../../../common/hooks/useSocket';
 import useViewSettings from '../../../common/hooks-query/useViewSettings';
+import { handleLinks } from '../../../common/utils/linkUtils';
 import { cx } from '../../../common/utils/styleUtils';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 
@@ -47,6 +48,7 @@ export default function TimerPreview() {
 
   return (
     <div className={style.preview}>
+      <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'timer')} />
       <div className={contentClasses}>
         <div
           className={style.mainContent}

apps/client/src/features/viewers/timer/Timer.scss

@@ -129,20 +129,22 @@
     }
   }
 
-  .external {
+  .secondary {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 
+    margin-top: 0.25em;
+    padding-block: 0.25em;
+
     font-weight: 600;
     text-align: center;
     color: var(--external-color-override, $external-color);
     letter-spacing: 0.5px;
     line-height: 0.9em;
-    padding-bottom: 0.2em;
     transition-property: opacity, height;
     transition-duration: $viewer-transition-time;
-    border-top: 1px solid rgba(white, 0.1);
+    border-top: 1px solid color-mix(in srgb, var(--external-color-override, $external-color) 10%, transparent);
 
     &--hidden {
       opacity: 0;

apps/client/src/features/viewers/timer/Timer.tsx

@@ -203,7 +203,7 @@ export default function Timer(props: TimerProps) {
           </div>
         )}
         <div
-          className={`external${secondaryContent ? '' : ' external--hidden'}`}
+          className={`secondary${secondaryContent ? '' : ' secondary--hidden'}`}
           style={{ fontSize: `${externalFontSize}vw` }}
         >
           {secondaryContent}

apps/client/src/theme/_viewerDefs.scss

@@ -26,7 +26,7 @@ $timer-color: rgba(white, 80%); // --timer-color-override
 $timer-finished-color: $playback-negative;
 $timer-bold-font-family: 'Arial Black', sans-serif; // --card-background-color-override
 
-$external-color: rgba(white, 70%); // --external-color-override
+$external-color: rgba(white, 85%); // --external-color-override
 
 // properties of other timers (clock and countdown)
 $timer-label-size: clamp(16px, 1.5vw, 24px);

apps/server/src/app.ts

@@ -210,7 +210,7 @@ export const startServer = async (
   runtimeService.init(maybeRestorePoint);
 
   // eventStore set is a dependency of the services that publish to it
-  messageService.init(eventStore.set);
+  messageService.init((key, value) => eventStore.set(key, value));
 
   expressServer.listen(serverPort, '0.0.0.0', () => {
     const nif = getNetworkInterfaces();