refactor: apply param structure

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' },
-    getTimeOption(timeFormat),
-    { section: 'Data sources' },
-
+    { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
     {
-      id: 'main',
-      title: 'Main data field',
-      description: 'Field to be shown in the first line of text',
-      type: 'option',
-      values: fieldOptions,
-      defaultValue: 'title',
+      title: OptionTitle.DataSources,
+      collapsible: true,
+      options: [
+        {
+          id: 'main',
+          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: '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,
-    },
-    { section: 'Element visibility' },
-    {
-      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,
+      title: OptionTitle.ElementVisibility,
+      collapsible: true,
+      options: [
+        {
+          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,
+        },
+      ],
     },
   ];
 };