refactor: apply param structure

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