feat: expose presets in view options

apps/client/src/views/backstage/Backstage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import QRCode from 'react-qr-code';
 import { useViewportSize } from '@mantine/hooks';
-import { CustomFields, OntimeEvent, ProjectData, Runtime, Settings } from 'ontime-types';
+import { CustomFields, OntimeEvent, OntimeView, ProjectData, Runtime, Settings } from 'ontime-types';
 import { millisToString, removeLeadingZero } from 'ontime-utils';
 
 import ProgressBar from '../../common/components/progress-bar/ProgressBar';
@@ -110,7 +110,7 @@ export default function Backstage({
 
   return (
     <div className={`backstage ${isMirrored ? 'mirror' : ''}`} data-testid='backstage-view'>
-      <ViewParamsEditor viewOptions={backstageOptions} />
+      <ViewParamsEditor target={OntimeView.Backstage} viewOptions={backstageOptions} />
       <div className='project-header'>
         {general?.logo && <ViewLogo name={general.logo} className='logo' />}
         <div className='title'>{general.title}</div>

apps/client/src/views/countdown/Countdown.tsx

@@ -6,6 +6,7 @@ import {
   isOntimeEvent,
   isPlayableEvent,
   OntimeEvent,
+  OntimeView,
   ProjectData,
   Settings,
 } from 'ontime-types';
@@ -70,7 +71,7 @@ export default function Countdown({
 
   return (
     <div className={`countdown ${isMirrored ? 'mirror' : ''}`} data-testid='countdown-view'>
-      <ViewParamsEditor viewOptions={countdownOptions} />
+      <ViewParamsEditor target={OntimeView.Countdown} viewOptions={countdownOptions} />
       <div className='project-header'>
         {general?.logo && <ViewLogo name={general.logo} className='logo' />}
         <div className='title'>{general.title}</div>

apps/client/src/views/project-info/ProjectInfo.tsx

@@ -10,6 +10,7 @@ import { useViewOptionsStore } from '../../common/stores/viewOptions';
 import { useTranslation } from '../../translation/TranslationProvider';
 
 import './ProjectInfo.scss';
+import { OntimeView } from 'ontime-types';
 
 export default function ProjectInfo() {
   // persisted app state
@@ -23,7 +24,7 @@ export default function ProjectInfo() {
     return (
       <>
         <ViewNavigationMenu isLockable suppressSettings />
-        <ViewParamsEditor viewOptions={[]} />
+        <ViewParamsEditor target={OntimeView.ProjectInfo} viewOptions={[]} />
         <EmptyPage text={getLocalizedString('common.no_data')} />;
       </>
     );
@@ -38,7 +39,7 @@ export default function ProjectInfo() {
     return (
       <>
         <ViewNavigationMenu isLockable suppressSettings />
-        <ViewParamsEditor viewOptions={[]} />
+        <ViewParamsEditor target={OntimeView.ProjectInfo} viewOptions={[]} />
         <EmptyPage text={getLocalizedString('common.no_data')} />;
       </>
     );
@@ -47,7 +48,7 @@ export default function ProjectInfo() {
   return (
     <div className={`project ${isMirrored ? 'mirror' : ''}`} data-testid='project-view'>
       <ViewNavigationMenu isLockable suppressSettings />
-      <ViewParamsEditor viewOptions={[]} />
+      <ViewParamsEditor target={OntimeView.ProjectInfo} viewOptions={[]} />
       {data.logo && <ViewLogo name={data.logo} className='logo' />}
       <div className='info'>
         {data.title && (

apps/client/src/views/studio/Studio.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { MessageState, OntimeEvent, ProjectData, Runtime, Settings, ViewSettings } from 'ontime-types';
+import { MessageState, OntimeEvent, OntimeView, ProjectData, Runtime, Settings, ViewSettings } from 'ontime-types';
 
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
@@ -48,7 +48,7 @@ export default function Studio({
 
   return (
     <div className={cx(['studio', isMirrored && 'mirror'])} data-testid='studio-view'>
-      <ViewParamsEditor viewOptions={studioOptions} />
+      <ViewParamsEditor target={OntimeView.StudioClock} viewOptions={studioOptions} />
 
       <div className='project-header'>
         {general?.logo && <ViewLogo name={general.logo} className='logo' />}

apps/client/src/views/timeline/TimelinePage.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { MaybeString, OntimeEvent, ProjectData, Runtime, Settings } from 'ontime-types';
+import { MaybeString, OntimeEvent, OntimeView, ProjectData, Runtime, Settings } from 'ontime-types';
 
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
@@ -72,7 +72,7 @@ export default function TimelinePage({ events, general, runtime, selectedId, set
   }
   return (
     <div className='timeline' data-testid='timeline-view'>
-      <ViewParamsEditor viewOptions={progressOptions} />
+      <ViewParamsEditor target={OntimeView.Timeline} viewOptions={progressOptions} />
       <div className='project-header'>
         {general?.logo && <ViewLogo name={general.logo} className='logo' />}
         <div className='title'>{general.title}</div>

apps/client/src/views/timer/Timer.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { CustomFields, MessageState, OntimeEvent, ProjectData, Settings, ViewSettings } from 'ontime-types';
+import { CustomFields, MessageState, OntimeEvent, OntimeView, ProjectData, Settings, ViewSettings } from 'ontime-types';
 
 import { FitText } from '../../common/components/fit-text/FitText';
 import MultiPartProgressBar from '../../common/components/multi-part-progress-bar/MultiPartProgressBar';
@@ -157,7 +157,7 @@ export default function Timer({
     >
       {!hideLogo && general?.logo && <ViewLogo name={general.logo} className='logo' />}
 
-      <ViewParamsEditor viewOptions={timerOptions} />
+      <ViewParamsEditor target={OntimeView.Timer} viewOptions={timerOptions} />
 
       <div className={cx(['blackout', message.timer.blackout && 'blackout--active'])} />