refactor: apply param structure

apps/client/src/common/components/view-params-editor/constants.ts

@@ -38,3 +38,14 @@ export const showLeadingZeros: ParamField = {
   type: 'boolean',
   defaultValue: false,
 };
+
+export enum OptionTitle {
+  ClockOptions = 'Clock Options',
+  TimerOptions = 'Timer Options',
+  DataSources = 'Data sources',
+  ElementVisibility = 'Element visibility',
+  BehaviourOptions = 'View behaviour',
+  StyleOverride = 'View style override',
+  Animation = 'View animation',
+  Schedule = 'Schedule options',
+}

apps/client/src/common/components/view-params-editor/types.ts

@@ -1,3 +1,5 @@
+import { OptionTitle } from './constants';
+
 type BaseField = {
   id: string;
   title: string;
@@ -26,7 +28,7 @@ export type ParamField = BaseField &
   (OptionsField | MultiOptionsField | StringField | NumberField | BooleanField | ColourField | PersistedField);
 
 export type ViewOption = {
-  title: string;
+  title: OptionTitle;
   options: ParamField[];
   collapsible?: boolean;
 };

apps/client/src/features/operator/operator.options.tsx

@@ -1,6 +1,10 @@
 import { CustomFields } from 'ontime-types';
 
-import { getTimeOption, makeOptionsFromCustomFields } from '../../common/components/view-params-editor/constants';
+import {
+  getTimeOption,
+  makeOptionsFromCustomFields,
+  OptionTitle,
+} from '../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../common/components/view-params-editor/types';
 
 export const getOperatorOptions = (customFields: CustomFields, timeFormat: string): ViewOption[] => {
@@ -14,47 +18,55 @@ export const getOperatorOptions = (customFields: CustomFields, timeFormat: strin
   }, {});
 
   return [
-    { section: 'Clock Options' },
+    { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
-    getTimeOption(timeFormat),
-    { section: 'Data sources' },
-
     {
-      id: 'main',
+      title: OptionTitle.DataSources,
-      title: 'Main data field',
+      collapsible: true,
-      description: 'Field to be shown in the first line of text',
+      options: [
-      type: 'option',
+        {
-      values: fieldOptions,
+          id: 'main',
-      defaultValue: 'title',
+          title: 'Main data field',
+          description: 'Field to be shown in the first line of text',
+          type: 'option',
+          values: fieldOptions,
+          defaultValue: 'title',
+        },
+        {
+          id: 'secondary',
+          title: 'Secondary data field',
+          description: 'Field to be shown in the second line of text',
+          type: 'option',
+          values: fieldOptions,
+          defaultValue: '',
+        },
+        {
+          id: 'subscribe',
+          title: 'Highlight Field',
+          description: 'Choose a custom field to highlight',
+          type: 'multi-option',
+          values: customFieldSelect,
+        },
+      ],
     },
     {
-      id: 'secondary',
+      title: OptionTitle.ElementVisibility,
-      title: 'Secondary data field',
+      collapsible: true,
-      description: 'Field to be shown in the second line of text',
+      options: [
-      type: 'option',
+        {
-      values: fieldOptions,
+          id: 'hidepast',
-      defaultValue: '',
+          title: 'Hide Past Events',
-    },
+          description: 'Whether to hide events that have passed',
-    {
+          type: 'boolean',
-      id: 'subscribe',
+          defaultValue: false,
-      title: 'Highlight Field',
+        },
-      description: 'Choose a custom field to highlight',
+        {
-      type: 'multi-option',
+          id: 'shouldEdit',
-      values: customFieldSelect,
+          title: 'Edit custom field',
-    },
+          description: 'Allows editing an events selected custom field by long pressing.',
-    { section: 'Element visibility' },
+          type: 'boolean',
-    {
+          defaultValue: false,
-      id: 'hidepast',
+        },
-      title: 'Hide Past Events',
+      ],
-      description: 'Whether to hide events that have passed',
-      type: 'boolean',
-      defaultValue: false,
-    },
-    {
-      id: 'shouldEdit',
-      title: 'Edit custom field',
-      description: 'Allows editing an events selected custom field by long pressing.',
-      type: 'boolean',
-      defaultValue: false,
     },
   ];
 };

apps/client/src/features/viewers/backstage/backstage.options.ts

@@ -1,44 +1,58 @@
 import { CustomFields } from 'ontime-types';
 
-import { getTimeOption, makeOptionsFromCustomFields } from '../../../common/components/view-params-editor/constants';
+import {
+  getTimeOption,
+  makeOptionsFromCustomFields,
+  OptionTitle,
+} from '../../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../../common/components/view-params-editor/types';
 
 export const getBackstageOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
   const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
 
   return [
-    { section: 'Clock Options' },
+    { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
-    getTimeOption(timeFormat),
-    { section: 'Data sources' },
     {
-      id: 'secondary-src',
+      title: OptionTitle.DataSources,
-      title: 'Event secondary text',
+      collapsible: true,
-      description: 'Select the data source for auxiliary text shown in now and next cards',
+      options: [
-      type: 'option',
+        {
-      values: secondaryOptions,
+          id: 'secondary-src',
-      defaultValue: '',
+          title: 'Event secondary text',
+          description: 'Select the data source for auxiliary text shown in now and next cards',
+          type: 'option',
+          values: secondaryOptions,
+          defaultValue: '',
+        },
+      ],
     },
-    { section: 'Schedule options' },
+
     {
-      id: 'eventsPerPage',
+      title: OptionTitle.Schedule,
-      title: 'Events per page',
+      collapsible: true,
-      description: 'Sets the number of events on the page, can cause overflow',
+      options: [
-      type: 'number',
+        {
-      placeholder: '8 (default)',
+          id: 'eventsPerPage',
-    },
+          title: 'Events per page',
-    {
+          description: 'Sets the number of events on the page, can cause overflow',
-      id: 'hidePast',
+          type: 'number',
-      title: 'Hide past events',
+          placeholder: '8 (default)',
-      description: 'Scheduler will only show upcoming events',
+        },
-      type: 'boolean',
+        {
-      defaultValue: false,
+          id: 'hidePast',
-    },
+          title: 'Hide past events',
-    {
+          description: 'Scheduler will only show upcoming events',
-      id: 'stopCycle',
+          type: 'boolean',
-      title: 'Stop cycling through event pages',
+          defaultValue: false,
-      description: 'Schedule will not auto-cycle through events',
+        },
-      type: 'boolean',
+        {
-      defaultValue: false,
+          id: 'stopCycle',
+          title: 'Stop cycling through event pages',
+          description: 'Schedule will not auto-cycle through events',
+          type: 'boolean',
+          defaultValue: false,
+        },
+      ],
     },
   ];
 };

apps/client/src/features/viewers/clock/clock.options.ts

@@ -1,73 +1,77 @@
-import { getTimeOption } from '../../../common/components/view-params-editor/constants';
+import { getTimeOption, OptionTitle } from '../../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../../common/components/view-params-editor/types';
 
 export const getClockOptions = (timeFormat: string): ViewOption[] => [
-  { section: 'Clock Options' },
+  { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
-  getTimeOption(timeFormat),
-  { section: 'View style override' },
   {
-    id: 'key',
+    title: OptionTitle.ClockOptions,
-    title: 'Key Colour',
+    collapsible: true,
-    description: 'Background or key colour for entire view. Default: #000000',
+    options: [
-    type: 'colour',
+      {
-    defaultValue: '000000',
+        id: 'key',
-  },
+        title: 'Key Colour',
-  {
+        description: 'Background or key colour for entire view. Default: #000000',
-    id: 'text',
+        type: 'colour',
-    title: 'Text Colour',
+        defaultValue: '000000',
-    description: 'Text colour. Default: #FFFFFF',
+      },
-    type: 'colour',
+      {
-    defaultValue: 'FFFFFF',
+        id: 'text',
-  },
+        title: 'Text Colour',
-  {
+        description: 'Text colour. Default: #FFFFFF',
-    id: 'textbg',
+        type: 'colour',
-    title: 'Text Background',
+        defaultValue: 'FFFFFF',
-    description: 'Background colour for timer text. Default: #FFF0 (transparent)',
+      },
-    type: 'colour',
+      {
-    defaultValue: 'FFF0',
+        id: 'textbg',
-  },
+        title: 'Text Background',
-  {
+        description: 'Background colour for timer text. Default: #FFF0 (transparent)',
-    id: 'font',
+        type: 'colour',
-    title: 'Font',
+        defaultValue: 'FFF0',
-    description: 'Font family, will use the fonts available in the system',
+      },
-    type: 'string',
+      {
-    placeholder: 'Arial Black (default)',
+        id: 'font',
-  },
+        title: 'Font',
-  {
+        description: 'Font family, will use the fonts available in the system',
-    id: 'size',
+        type: 'string',
-    title: 'Text Size',
+        placeholder: 'Arial Black (default)',
-    description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
+      },
-    type: 'number',
+      {
-    placeholder: '1 (default)',
+        id: 'size',
-  },
+        title: 'Text Size',
-  {
+        description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
-    id: 'alignx',
+        type: 'number',
-    title: 'Align Horizontal',
+        placeholder: '1 (default)',
-    description: 'Moves the horizontally in page to start = left | center | end = right',
+      },
-    type: 'option',
+      {
-    values: { start: 'Start', center: 'Center', end: 'End' },
+        id: 'alignx',
-    defaultValue: 'center',
+        title: 'Align Horizontal',
-  },
+        description: 'Moves the horizontally in page to start = left | center | end = right',
-  {
+        type: 'option',
-    id: 'offsetx',
+        values: { start: 'Start', center: 'Center', end: 'End' },
-    title: 'Offset Horizontal',
+        defaultValue: 'center',
-    description: 'Offsets the timer horizontal position by a given amount in pixels',
+      },
-    type: 'number',
+      {
-    placeholder: '0 (default)',
+        id: 'offsetx',
-  },
+        title: 'Offset Horizontal',
-  {
+        description: 'Offsets the timer horizontal position by a given amount in pixels',
-    id: 'aligny',
+        type: 'number',
-    title: 'Align Vertical',
+        placeholder: '0 (default)',
-    description: 'Moves the vertically in page to start = left | center | end = right',
+      },
-    type: 'option',
+      {
-    values: { start: 'Start', center: 'Center', end: 'End' },
+        id: 'aligny',
-    defaultValue: 'center',
+        title: 'Align Vertical',
-  },
+        description: 'Moves the vertically in page to start = left | center | end = right',
-  {
+        type: 'option',
-    id: 'offsety',
+        values: { start: 'Start', center: 'Center', end: 'End' },
-    title: 'Offset Vertical',
+        defaultValue: 'center',
-    description: 'Offsets the timer vertical position by a given amount in pixels',
+      },
-    type: 'number',
+      {
-    placeholder: '0 (default)',
+        id: 'offsety',
+        title: 'Offset Vertical',
+        description: 'Offsets the timer vertical position by a given amount in pixels',
+        type: 'number',
+        placeholder: '0 (default)',
+      },
+    ],
   },
 ];

apps/client/src/features/viewers/countdown/countdown.options.ts

@@ -1,7 +1,7 @@
-import { getTimeOption, hideTimerSeconds } from '../../../common/components/view-params-editor/constants';
+import { getTimeOption, hideTimerSeconds, OptionTitle } from '../../../common/components/view-params-editor/constants';
-import { ViewOption } from '../../../common/components/view-params-editor/types';
+import { ParamField, ViewOption } from '../../../common/components/view-params-editor/types';
 
-const makePersistedField = (id: string, value: string): ViewOption => {
+const makePersistedField = (id: string, value: string): ParamField => {
   return {
     id,
     title: 'Used to keep the selection on submit',
@@ -13,17 +13,20 @@ const makePersistedField = (id: string, value: string): ViewOption => {
 
 type Persisted = { id: string; value: string };
 export const getCountdownOptions = (timeFormat: string, persisted?: Persisted): ViewOption[] => [
-  { section: 'Clock Options' },
+  { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
-  getTimeOption(timeFormat),
+  { title: OptionTitle.TimerOptions, collapsible: true, options: [hideTimerSeconds] },
-  { section: 'Timer Options' },
-  hideTimerSeconds,
-  { section: 'View behaviour' },
   {
-    id: 'showProjected',
+    title: OptionTitle.BehaviourOptions,
-    title: 'Show projected time',
+    collapsible: true,
-    description: 'Show projected times for the event, as well as apply the runtime offset to the timer.',
+    options: [
-    type: 'boolean',
+      {
-    defaultValue: false,
+        id: 'showProjected',
+        title: 'Show projected time',
+        description: 'Show projected times for the event, as well as apply the runtime offset to the timer.',
+        type: 'boolean',
+        defaultValue: false,
+      },
+      ...(persisted ? [makePersistedField(persisted.id, persisted.value)] : []),
+    ],
   },
-  ...(persisted ? [makePersistedField(persisted.id, persisted.value)] : []),
 ];

apps/client/src/features/viewers/lower-thirds/lowerThird.options.ts

@@ -1,6 +1,6 @@
 import { CustomFields } from 'ontime-types';
 
-import { makeOptionsFromCustomFields } from '../../../common/components/view-params-editor/constants';
+import { makeOptionsFromCustomFields, OptionTitle } from '../../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../../common/components/view-params-editor/types';
 
 export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] => {
@@ -16,102 +16,119 @@ export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] =
   });
 
   return [
-    { section: 'Data sources' },
     {
-      id: 'top-src',
+      title: OptionTitle.DataSources,
-      title: 'Top Text',
+      collapsible: true,
-      description: '',
+      options: [
-      type: 'option',
+        {
-      values: topSourceOptions,
+          id: 'top-src',
-      defaultValue: 'title',
+          title: 'Top Text',
+          description: '',
+          type: 'option',
+          values: topSourceOptions,
+          defaultValue: 'title',
+        },
+        {
+          id: 'bottom-src',
+          title: 'Bottom Text',
+          description: 'Select the data source for the bottom element',
+          type: 'option',
+          values: bottomSourceOptions,
+          defaultValue: 'none',
+        },
+      ],
     },
+
     {
-      id: 'bottom-src',
+      title: OptionTitle.Animation,
-      title: 'Bottom Text',
+      collapsible: true,
-      description: 'Select the data source for the bottom element',
+      options: [
-      type: 'option',
+        {
-      values: bottomSourceOptions,
+          id: 'transition',
-      defaultValue: 'none',
+          title: 'Transition',
+          description: 'Transition in time in seconds (default 3)',
+          type: 'number',
+          placeholder: '3 (default)',
+        },
+        {
+          id: 'delay',
+          title: 'Delay',
+          description: 'Delay between transition in and out in seconds (default 3)',
+          type: 'number',
+          placeholder: '3 (default)',
+        },
+      ],
     },
-    { section: 'View animation' },
+
     {
-      id: 'transition',
+      title: OptionTitle.StyleOverride,
-      title: 'Transition',
+      collapsible: true,
-      description: 'Transition in time in seconds (default 3)',
+      options: [
-      type: 'number',
+        {
-      placeholder: '3 (default)',
+          id: 'top-size',
-    },
+          title: 'Top Text Size',
-    {
+          description: 'Font size of the top text',
-      id: 'delay',
+          type: 'string',
-      title: 'Delay',
+          placeholder: '65px',
-      description: 'Delay between transition in and out in seconds (default 3)',
+        },
-      type: 'number',
+        {
-      placeholder: '3 (default)',
+          id: 'bottom-size',
-    },
+          title: 'Bottom Text Size',
-    { section: 'View style override' },
+          description: 'Font size of the bottom text',
-    {
+          type: 'string',
-      id: 'top-size',
+          placeholder: '64px',
-      title: 'Top Text Size',
+        },
-      description: 'Font size of the top text',
+        {
-      type: 'string',
+          id: 'width',
-      placeholder: '65px',
+          title: 'Minimum Width',
-    },
+          description: 'Minimum Width of the element',
-    {
+          type: 'number',
-      id: 'bottom-size',
+          prefix: '%',
-      title: 'Bottom Text Size',
+          placeholder: '45 (default)',
-      description: 'Font size of the bottom text',
+        },
-      type: 'string',
+        {
-      placeholder: '64px',
+          id: 'key',
-    },
+          title: 'Key Colour',
-    {
+          description: 'Colour of the background. Default: #FFF0 (transparent)',
-      id: 'width',
+          type: 'colour',
-      title: 'Minimum Width',
+          defaultValue: 'FFF0',
-      description: 'Minimum Width of the element',
+        },
-      type: 'number',
+        {
-      prefix: '%',
+          id: 'top-colour',
-      placeholder: '45 (default)',
+          title: 'Top Text Colour',
-    },
+          description: 'Top text colour. Default: #000000',
-    {
+          type: 'colour',
-      id: 'key',
+          defaultValue: '000000',
-      title: 'Key Colour',
+        },
-      description: 'Colour of the background. Default: #FFF0 (transparent)',
+        {
-      type: 'colour',
+          id: 'bottom-colour',
-      defaultValue: 'FFF0',
+          title: 'Bottom Text Colour',
-    },
+          description: 'Bottom text colour. Default: #000000',
-    {
+          type: 'colour',
-      id: 'top-colour',
+          defaultValue: '000000',
-      title: 'Top Text Colour',
+        },
-      description: 'Top text colour. Default: #000000',
+        {
-      type: 'colour',
+          id: 'top-bg',
-      defaultValue: '000000',
+          title: 'Top Background Colour',
-    },
+          description: 'Top text background colour. Default: #FFF0 (transparent)',
-    {
+          type: 'colour',
-      id: 'bottom-colour',
+          defaultValue: 'FFF0',
-      title: 'Bottom Text Colour',
+        },
-      description: 'Bottom text colour. Default: #000000',
+        {
-      type: 'colour',
+          id: 'bottom-bg',
-      defaultValue: '000000',
+          title: 'Bottom Background Colour',
-    },
+          description: 'Bottom text background colour. Default: #FFF0 (transparent)',
-    {
+          type: 'colour',
-      id: 'top-bg',
+          defaultValue: 'FFF0',
-      title: 'Top Background Colour',
+        },
-      description: 'Top text background colour. Default: #FFF0 (transparent)',
+        {
-      type: 'colour',
+          id: 'line-colour',
-      defaultValue: 'FFF0',
+          title: 'Line Colour',
-    },
+          description: 'Colour of the line. Default: #FF0000',
-    {
+          type: 'colour',
-      id: 'bottom-bg',
+          defaultValue: 'FF0000',
-      title: 'Bottom Background Colour',
+        },
-      description: 'Bottom text background colour. Default: #FFF0 (transparent)',
+      ],
-      type: 'colour',
-      defaultValue: 'FFF0',
-    },
-    {
-      id: 'line-colour',
-      title: 'Line Colour',
-      description: 'Colour of the line. Default: #FF0000',
-      type: 'colour',
-      defaultValue: 'FF0000',
     },
   ];
 };

apps/client/src/features/viewers/minimal-timer/minimalTimer.options.ts

@@ -1,89 +1,101 @@
-import { hideTimerSeconds, showLeadingZeros } from '../../../common/components/view-params-editor/constants';
+import {
+  hideTimerSeconds,
+  OptionTitle,
+  showLeadingZeros,
+} from '../../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../../common/components/view-params-editor/types';
 
 export const MINIMAL_TIMER_OPTIONS: ViewOption[] = [
-  { section: 'Timer Options' },
+  { title: OptionTitle.TimerOptions, collapsible: true, options: [hideTimerSeconds, showLeadingZeros] },
-  hideTimerSeconds,
-  showLeadingZeros,
-  { section: 'Element visibility' },
   {
-    id: 'hideovertime',
+    title: OptionTitle.ElementVisibility,
-    title: 'Hide Overtime',
+    collapsible: true,
-    description: 'Whether to suppress overtime styles (red borders and red text)',
+    options: [
-    type: 'boolean',
+      {
-    defaultValue: false,
+        id: 'hideovertime',
+        title: 'Hide Overtime',
+        description: 'Whether to suppress overtime styles (red borders and red text)',
+        type: 'boolean',
+        defaultValue: false,
+      },
+      {
+        id: 'hideendmessage',
+        title: 'Hide End Message',
+        description: 'Whether to hide end message and continue showing the clock if timer is in overtime',
+        type: 'boolean',
+        defaultValue: false,
+      },
+    ],
   },
   {
-    id: 'hideendmessage',
+    title: OptionTitle.StyleOverride,
-    title: 'Hide End Message',
+    collapsible: true,
-    description: 'Whether to hide end message and continue showing the clock if timer is in overtime',
+    options: [
-    type: 'boolean',
+      {
-    defaultValue: false,
+        id: 'key',
-  },
+        title: 'Key Colour',
-  { section: 'View style override' },
+        description: 'Background or key colour for entire view. Default: #000000',
-  {
+        type: 'colour',
-    id: 'key',
+        defaultValue: '000000',
-    title: 'Key Colour',
+      },
-    description: 'Background or key colour for entire view. Default: #000000',
+      {
-    type: 'colour',
+        id: 'text',
-    defaultValue: '000000',
+        title: 'Text Colour',
-  },
+        description: 'Text colour. Default: #FFFFFF',
-  {
+        type: 'colour',
-    id: 'text',
+        defaultValue: 'FFFFFF',
-    title: 'Text Colour',
+      },
-    description: 'Text colour. Default: #FFFFFF',
+      {
-    type: 'colour',
+        id: 'textbg',
-    defaultValue: 'FFFFFF',
+        title: 'Text Background',
-  },
+        description: 'Background colour for timer text. Default: #FFF0 (transparent)',
-  {
+        type: 'colour',
-    id: 'textbg',
+        defaultValue: 'FFF0',
-    title: 'Text Background',
+      },
-    description: 'Background colour for timer text. Default: #FFF0 (transparent)',
+      {
-    type: 'colour',
+        id: 'font',
-    defaultValue: 'FFF0',
+        title: 'Font',
-  },
+        description: 'Font family, will use the fonts available in the system',
-  {
+        type: 'string',
-    id: 'font',
+        placeholder: 'Arial Black (default)',
-    title: 'Font',
+      },
-    description: 'Font family, will use the fonts available in the system',
+      {
-    type: 'string',
+        id: 'size',
-    placeholder: 'Arial Black (default)',
+        title: 'Text Size',
-  },
+        description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
-  {
+        type: 'number',
-    id: 'size',
+        placeholder: '1 (default)',
-    title: 'Text Size',
+      },
-    description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
+      {
-    type: 'number',
+        id: 'alignx',
-    placeholder: '1 (default)',
+        title: 'Align Horizontal',
-  },
+        description: 'Moves the horizontally in page to start = left | center | end = right',
-  {
+        type: 'option',
-    id: 'alignx',
+        values: { start: 'Start', center: 'Center', end: 'End' },
-    title: 'Align Horizontal',
+        defaultValue: 'center',
-    description: 'Moves the horizontally in page to start = left | center | end = right',
+      },
-    type: 'option',
+      {
-    values: { start: 'Start', center: 'Center', end: 'End' },
+        id: 'offsetx',
-    defaultValue: 'center',
+        title: 'Offset Horizontal',
-  },
+        description: 'Offsets the timer horizontal position by a given amount in pixels',
-  {
+        type: 'number',
-    id: 'offsetx',
+        placeholder: '0 (default)',
-    title: 'Offset Horizontal',
+      },
-    description: 'Offsets the timer horizontal position by a given amount in pixels',
+      {
-    type: 'number',
+        id: 'aligny',
-    placeholder: '0 (default)',
+        title: 'Align Vertical',
-  },
+        description: 'Moves the vertically in page to start = left | center | end = right',
-  {
+        type: 'option',
-    id: 'aligny',
+        values: { start: 'Start', center: 'Center', end: 'End' },
-    title: 'Align Vertical',
+        defaultValue: 'center',
-    description: 'Moves the vertically in page to start = left | center | end = right',
+      },
-    type: 'option',
+      {
-    values: { start: 'Start', center: 'Center', end: 'End' },
+        id: 'offsety',
-    defaultValue: 'center',
+        title: 'Offset Vertical',
-  },
+        description: 'Offsets the timer vertical position by a given amount in pixels',
-  {
+        type: 'number',
-    id: 'offsety',
+        placeholder: '0 (default)',
-    title: 'Offset Vertical',
+      },
-    description: 'Offsets the timer vertical position by a given amount in pixels',
+    ],
-    type: 'number',
-    placeholder: '0 (default)',
   },
 ];

apps/client/src/features/viewers/public/public.options.ts

@@ -1,44 +1,57 @@
 import { CustomFields } from 'ontime-types';
 
-import { getTimeOption, makeOptionsFromCustomFields } from '../../../common/components/view-params-editor/constants';
+import {
+  getTimeOption,
+  makeOptionsFromCustomFields,
+  OptionTitle,
+} from '../../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../../common/components/view-params-editor/types';
 
 export const getPublicOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
   const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
 
   return [
-    { section: 'Clock Options' },
+    { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
-    getTimeOption(timeFormat),
-    { section: 'Data sources' },
     {
-      id: 'secondary-src',
+      title: OptionTitle.DataSources,
-      title: 'Event secondary text',
+      collapsible: true,
-      description: 'Select the data source for auxiliary text shown in now and next cards',
+      options: [
-      type: 'option',
+        {
-      values: secondaryOptions,
+          id: 'secondary-src',
-      defaultValue: '',
+          title: 'Event secondary text',
-    },
+          description: 'Select the data source for auxiliary text shown in now and next cards',
-    { section: 'Schedule options' },
+          type: 'option',
-    {
+          values: secondaryOptions,
-      id: 'eventsPerPage',
+          defaultValue: '',
-      title: 'Events per page',
+        },
-      description: 'Sets the number of events on the page, can cause overflow',
+      ],
-      type: 'number',
-      placeholder: '8 (default)',
     },
     {
-      id: 'hidePast',
+      title: OptionTitle.Schedule,
-      title: 'Hide past events',
+      collapsible: true,
-      description: 'Scheduler will only show upcoming events',
+      options: [
-      type: 'boolean',
+        {
-      defaultValue: false,
+          id: 'eventsPerPage',
-    },
+          title: 'Events per page',
-    {
+          description: 'Sets the number of events on the page, can cause overflow',
-      id: 'stopCycle',
+          type: 'number',
-      title: 'Stop cycling through event pages',
+          placeholder: '8 (default)',
-      description: 'Schedule will not auto-cycle through events',
+        },
-      type: 'boolean',
+        {
-      defaultValue: false,
+          id: 'hidePast',
+          title: 'Hide past events',
+          description: 'Scheduler will only show upcoming events',
+          type: 'boolean',
+          defaultValue: false,
+        },
+        {
+          id: 'stopCycle',
+          title: 'Stop cycling through event pages',
+          description: 'Schedule will not auto-cycle through events',
+          type: 'boolean',
+          defaultValue: false,
+        },
+      ],
     },
   ];
 };

apps/client/src/features/viewers/studio/studioClock.options.ts

@@ -1,17 +1,20 @@
-import { getTimeOption, hideTimerSeconds } from '../../../common/components/view-params-editor/constants';
+import { getTimeOption, hideTimerSeconds, OptionTitle } from '../../../common/components/view-params-editor/constants';
 import type { ViewOption } from '../../../common/components/view-params-editor/types';
 
 export const getStudioClockOptions = (timeFormat: string): ViewOption[] => [
-  { section: 'Clock Options' },
+  { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
-  getTimeOption(timeFormat),
+  { title: OptionTitle.TimerOptions, collapsible: true, options: [hideTimerSeconds] },
-  { section: 'Timer Options' },
-  hideTimerSeconds,
-  { section: 'Element visibility' },
   {
-    id: 'hideRight',
+    title: OptionTitle.ElementVisibility,
-    title: 'Hide right section',
+    collapsible: true,
-    description: 'Hides the right section with On Air indicator and the schedule',
+    options: [
-    type: 'boolean',
+      {
-    defaultValue: false,
+        id: 'hideRight',
+        title: 'Hide right section',
+        description: 'Hides the right section with On Air indicator and the schedule',
+        type: 'boolean',
+        defaultValue: false,
+      },
+    ],
   },
 ];

apps/client/src/views/cuesheet/cuesheet.options.ts

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
+import { OptionTitle } from '../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../common/components/view-params-editor/types';
 import { isStringBoolean } from '../../features/viewers/common/viewUtils';
 
@@ -9,56 +10,66 @@ import { isStringBoolean } from '../../features/viewers/common/viewUtils';
  * we save the user preferences in the local storage
  */
 export const cuesheetOptions: ViewOption[] = [
-  { section: 'Table options' },
   {
-    id: 'showActionMenu',
+    title: OptionTitle.ElementVisibility,
-    title: 'Show action menu',
+    collapsible: true,
-    description: 'Whether to show the action menu for every row in the table',
+    options: [
-    type: 'boolean',
+      {
-    defaultValue: false,
+        id: 'showActionMenu',
+        title: 'Show action menu',
+        description: 'Whether to show the action menu for every row in the table',
+        type: 'boolean',
+        defaultValue: false,
+      },
+      {
+        id: 'hideTableSeconds',
+        title: 'Hide seconds in table',
+        description: 'Whether to hide seconds in the time fields displayed in the table',
+        type: 'boolean',
+        defaultValue: false,
+      },
+      {
+        id: 'followSelected',
+        title: 'Follow selected event',
+        description: 'Whether the view should automatically scroll to the selected event',
+        type: 'boolean',
+        defaultValue: false,
+      },
+      {
+        id: 'hidePast',
+        title: 'Hide Past Events',
+        description: 'Whether to hide events that have passed',
+        type: 'boolean',
+        defaultValue: false,
+      },
+      {
+        id: 'hideIndexColumn',
+        title: 'Hide index column',
+        description: 'Whether the hide the event indexes in the table',
+        type: 'boolean',
+        defaultValue: false,
+      },
+    ],
   },
   {
-    id: 'hideTableSeconds',
+    title: OptionTitle.BehaviourOptions,
-    title: 'Hide seconds in table',
+    collapsible: true,
-    description: 'Whether to hide seconds in the time fields displayed in the table',
+    options: [
-    type: 'boolean',
+      {
-    defaultValue: false,
+        id: 'showDelayedTimes',
-  },
+        title: 'Show delayed times',
-  {
+        description: 'Whether the time fields should include delays',
-    id: 'followSelected',
+        type: 'boolean',
-    title: 'Follow selected event',
+        defaultValue: false,
-    description: 'Whether the view should automatically scroll to the selected event',
+      },
-    type: 'boolean',
+      {
-    defaultValue: false,
+        id: 'hideDelays',
-  },
+        title: 'Hide delays',
-  {
+        description: 'Whether to hide the rows containing scheduled delays',
-    id: 'hidePast',
+        type: 'boolean',
-    title: 'Hide Past Events',
+        defaultValue: false,
-    description: 'Whether to hide events that have passed',
+      },
-    type: 'boolean',
+    ],
-    defaultValue: false,
-  },
-  {
-    id: 'hideIndexColumn',
-    title: 'Hide index column',
-    description: 'Whether the hide the event indexes in the table',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  { section: 'Delay flow' },
-  {
-    id: 'showDelayedTimes',
-    title: 'Show delayed times',
-    description: 'Whether the time fields should include delays',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'hideDelays',
-    title: 'Hide delays',
-    description: 'Whether to hide the rows containing scheduled delays',
-    type: 'boolean',
-    defaultValue: false,
   },
 ];
 

apps/client/src/views/project-info/projectInfo.options.ts

@@ -1,19 +1,25 @@
+import { OptionTitle } from '../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../common/components/view-params-editor/types';
 
 export const projectInfoOptions: ViewOption[] = [
-  { section: 'Data visibility' },
   {
-    id: 'showBackstage',
+    title: OptionTitle.BehaviourOptions,
-    title: 'Show backstage Data',
+    collapsible: true,
-    description: 'Weather to show fields related to the backstage views',
+    options: [
-    type: 'boolean',
+      {
-    defaultValue: false,
+        id: 'showBackstage',
-  },
+        title: 'Show backstage Data',
-  {
+        description: 'Weather to show fields related to the backstage views',
-    id: 'showPublic',
+        type: 'boolean',
-    title: 'Show Public Data',
+        defaultValue: false,
-    description: 'Weather to show fields related to the public views',
+      },
-    type: 'boolean',
+      {
-    defaultValue: false,
+        id: 'showPublic',
+        title: 'Show Public Data',
+        description: 'Weather to show fields related to the public views',
+        type: 'boolean',
+        defaultValue: false,
+      },
+    ],
   },
 ];

apps/client/src/views/timeline/timeline.options.ts

@@ -1,22 +1,28 @@
-import { getTimeOption } from '../../common/components/view-params-editor/constants';
+import { getTimeOption, OptionTitle } from '../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../common/components/view-params-editor/types';
 
 export const getTimelineOptions = (timeFormat: string): ViewOption[] => {
   return [
-    getTimeOption(timeFormat),
+    { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
     {
-      id: 'hidePast',
+      title: OptionTitle.ElementVisibility,
-      title: 'Hide Past Events',
+      collapsible: true,
-      description: 'Whether to hide events that have passed',
+      options: [
-      type: 'boolean',
+        {
-      defaultValue: false,
+          id: 'hidePast',
-    },
+          title: 'Hide Past Events',
-    {
+          description: 'Whether to hide events that have passed',
-      id: 'hideBackstage',
+          type: 'boolean',
-      title: 'Hide Private Events',
+          defaultValue: false,
-      description: 'Whether to hide non-public events',
+        },
-      type: 'boolean',
+        {
-      defaultValue: false,
+          id: 'hideBackstage',
+          title: 'Hide Private Events',
+          description: 'Whether to hide non-public events',
+          type: 'boolean',
+          defaultValue: false,
+        },
+      ],
     },
   ];
 };

apps/client/src/views/timer/timer.options.ts

@@ -7,6 +7,7 @@ import {
   getTimeOption,
   hideTimerSeconds,
   makeOptionsFromCustomFields,
+  OptionTitle,
   showLeadingZeros,
 } from '../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../common/components/view-params-editor/types';
@@ -25,71 +26,86 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
   const secondaryOptions = makeOptionsFromCustomFields(customFields, { title: 'Title', note: 'Note' });
 
   return [
-    { section: 'Clock Options' },
+    { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
-    getTimeOption(timeFormat),
-    { section: 'Timer Options' },
-    hideTimerSeconds,
-    showLeadingZeros,
     {
-      id: 'timerType',
+      title: OptionTitle.TimerOptions,
-      title: 'Timer type',
+      collapsible: true,
-      description: 'Override the timer type',
+      options: [
-      type: 'option',
+        hideTimerSeconds,
-      values: timerDisplayOptions,
+        showLeadingZeros,
-      defaultValue: 'no-overrides',
+        {
-    },
+          id: 'timerType',
-    { section: 'Data sources' },
+          title: 'Timer type',
-    {
+          description: 'Override the timer type',
-      id: 'main',
+          type: 'option',
-      title: 'Main text',
+          values: timerDisplayOptions,
-      description: 'Select the data source for the main text',
+          defaultValue: 'no-overrides',
-      type: 'option',
+        },
-      values: mainOptions,
+      ],
-      defaultValue: 'Title',
     },
     {
-      id: 'secondary-src',
+      title: OptionTitle.DataSources,
-      title: 'Secondary text',
+      collapsible: true,
-      description: 'Select the data source for the secondary text',
+      options: [
-      type: 'option',
+        {
-      values: secondaryOptions,
+          id: 'main',
-      defaultValue: '',
+          title: 'Main text',
+          description: 'Select the data source for the main text',
+          type: 'option',
+          values: mainOptions,
+          defaultValue: 'Title',
+        },
+        {
+          id: 'secondary-src',
+          title: 'Secondary text',
+          description: 'Select the data source for the secondary text',
+          type: 'option',
+          values: secondaryOptions,
+          defaultValue: '',
+        },
+      ],
     },
-    { section: 'Element visibility' },
+
     {
-      id: 'hideClock',
+      title: OptionTitle.ElementVisibility,
-      title: 'Hide Time Now',
+      collapsible: true,
-      description: 'Hides the Time Now field',
+      options: [
-      type: 'boolean',
+        {
-      defaultValue: false,
+          id: 'hideClock',
-    },
+          title: 'Hide Time Now',
-    {
+          description: 'Hides the Time Now field',
-      id: 'hideCards',
+          type: 'boolean',
-      title: 'Hide Cards',
+          defaultValue: false,
-      description: 'Hides the Now and Next cards',
+        },
-      type: 'boolean',
+        {
-      defaultValue: false,
+          id: 'hideCards',
-    },
+          title: 'Hide Cards',
-    {
+          description: 'Hides the Now and Next cards',
-      id: 'hideProgress',
+          type: 'boolean',
-      title: 'Hide progress bar',
+          defaultValue: false,
-      description: 'Hides the progress bar',
+        },
-      type: 'boolean',
+        {
-      defaultValue: false,
+          id: 'hideProgress',
-    },
+          title: 'Hide progress bar',
-    {
+          description: 'Hides the progress bar',
-      id: 'hideMessage',
+          type: 'boolean',
-      title: 'Hide Timer Message',
+          defaultValue: false,
-      description: 'Prevents displaying fullscreen messages in the timer',
+        },
-      type: 'boolean',
+        {
-      defaultValue: false,
+          id: 'hideMessage',
-    },
+          title: 'Hide Timer Message',
-    {
+          description: 'Prevents displaying fullscreen messages in the timer',
-      id: 'hideExternal',
+          type: 'boolean',
-      title: 'Hide Auxiliary timer / External message',
+          defaultValue: false,
-      description: 'Prevents the screen from displaying the secondary timer field',
+        },
-      type: 'boolean',
+        {
-      defaultValue: false,
+          id: 'hideExternal',
+          title: 'Hide Auxiliary timer / External message',
+          description: 'Prevents the screen from displaying the secondary timer field',
+          type: 'boolean',
+          defaultValue: false,
+        },
+      ],
     },
   ];
 };