refactor: address review feedback on aux timer naming

- Revert the automation action labels back to "Aux N: action" (no
  functional reason to change this wording).
- Simplify the aux timers header in the playback control: the flex
  container now only handles layout, and the label text reuses the
  same font-size/color as the per-timer labels below it, instead of a
  bespoke style block duplicating those values.
- Replace the generic, length-driven normaliser with an explicit
  sanitiseAuxTimerNames() that always deals with exactly three timers,
  and rename it away from "normalise" (which didn't convey that it
  trims, caps length and fills in missing entries). Static defaults
  now use a plain ['', '', ''] literal instead of calling the
  sanitiser with no input to sanitise.
- Settings.type.ts and AuxTimerSettings.tsx no longer generate their
  three fields from a loop; the form mirrors the same explicit,
  one-field-per-row style already used by GeneralSettings.tsx.
- Trim comments that only restated what the following line already
  says, keeping the ones that explain non-obvious behaviour (why
  AuxTimerService needs to be resynced separately from the data
  provider, why SimpleTimer.reset() preserves the name).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WCZejVTzuAY3tHTE6nB3JH

apps/client/src/common/models/OntimeSettings.ts

@@ -1,5 +1,4 @@
 import { Settings } from 'ontime-types';
-import { normaliseAuxTimerNames } from 'ontime-utils';
 
 export const ontimePlaceholderSettings: Settings = {
   version: '4.0.0',
@@ -7,5 +6,5 @@ export const ontimePlaceholderSettings: Settings = {
   operatorKey: null,
   timeFormat: '24',
   language: 'en',
-  auxTimerNames: normaliseAuxTimerNames(),
+  auxTimerNames: ['', '', ''],
 };

apps/client/src/common/utils/auxTimerUtils.ts

@@ -1,9 +1,3 @@
-/**
- * Resolves the display label for an aux timer.
- * Falls back to the provided default when no custom name is set.
- * @param name - the aux timer's custom name (from the runtime store)
- * @param fallback - label to use when no custom name is set
- */
 export function getAuxTimerLabel(name: string | undefined, fallback: string): string {
   const custom = name?.trim();
   return custom ? custom : fallback;

apps/client/src/features/app-settings/panel/automations-panel/OntimeActionForm.tsx

@@ -51,21 +51,21 @@ export default function OntimeActionForm({
           }}
           value={watch(`outputs.${index}.action`)}
           options={[
-            { value: 'aux1-pause', label: 'Aux timer 1: pause' },
-            { value: 'aux2-pause', label: 'Aux timer 2: pause' },
-            { value: 'aux3-pause', label: 'Aux timer 3: pause' },
+            { value: 'aux1-pause', label: 'Aux 1: pause' },
+            { value: 'aux2-pause', label: 'Aux 2: pause' },
+            { value: 'aux3-pause', label: 'Aux 3: pause' },
 
-            { value: 'aux1-start', label: 'Aux timer 1: start' },
-            { value: 'aux2-start', label: 'Aux timer 2: start' },
-            { value: 'aux3-start', label: 'Aux timer 3: start' },
+            { value: 'aux1-start', label: 'Aux 1: start' },
+            { value: 'aux2-start', label: 'Aux 2: start' },
+            { value: 'aux3-start', label: 'Aux 3: start' },
 
-            { value: 'aux1-stop', label: 'Aux timer 1: stop' },
-            { value: 'aux2-stop', label: 'Aux timer 2: stop' },
-            { value: 'aux3-stop', label: 'Aux timer 3: stop' },
+            { value: 'aux1-stop', label: 'Aux 1: stop' },
+            { value: 'aux2-stop', label: 'Aux 2: stop' },
+            { value: 'aux3-stop', label: 'Aux 3: stop' },
 
-            { value: 'aux1-set', label: 'Aux timer 1: set' },
-            { value: 'aux2-set', label: 'Aux timer 2: set' },
-            { value: 'aux3-set', label: 'Aux timer 3: set' },
+            { value: 'aux1-set', label: 'Aux 1: set' },
+            { value: 'aux2-set', label: 'Aux 2: set' },
+            { value: 'aux3-set', label: 'Aux 3: set' },
 
             { value: 'playback-start', label: 'Playback: start' },
             { value: 'playback-stop', label: 'Playback: stop' },

apps/client/src/features/app-settings/panel/settings-panel/AuxTimerSettings.tsx

@@ -1,5 +1,5 @@
 import { Settings } from 'ontime-types';
-import { auxTimerNameMaxLength, numberOfAuxTimers } from 'ontime-utils';
+import { auxTimerNameMaxLength } from 'ontime-utils';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 
@@ -12,9 +12,6 @@ import useSettings from '../../../../common/hooks-query/useSettings';
 import { preventEscape } from '../../../../common/utils/keyEvent';
 import * as Panel from '../../panel-utils/PanelUtils';
 
-/** zero based index of each aux timer, used to address the auxTimerNames array */
-const auxTimerIndexes = Array.from({ length: numberOfAuxTimers }, (_, index) => index);
-
 export default function AuxTimerSettings() {
   const { data, status, refetch } = useSettings();
   const {
@@ -30,7 +27,6 @@ export default function AuxTimerSettings() {
     },
   });
 
-  // update form if we get new data from server
   useEffect(() => {
     if (data) {
       reset(data);
@@ -79,16 +75,18 @@ export default function AuxTimerSettings() {
           <Panel.Loader isLoading={isLoading} />
           <Panel.Error>{errors.root?.message}</Panel.Error>
           <Panel.ListGroup>
-            {auxTimerIndexes.map((index) => (
-              <Panel.ListItem key={index}>
-                <Panel.Field title={`Aux timer ${index + 1}`} description={`Custom name for aux timer ${index + 1}`} />
-                <Input
-                  maxLength={auxTimerNameMaxLength}
-                  placeholder={`Aux ${index + 1}`}
-                  {...register(`auxTimerNames.${index}`)}
-                />
-              </Panel.ListItem>
-            ))}
+            <Panel.ListItem>
+              <Panel.Field title='Aux timer 1' description='Custom name for aux timer 1' />
+              <Input maxLength={auxTimerNameMaxLength} placeholder='Aux 1' {...register('auxTimerNames.0')} />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field title='Aux timer 2' description='Custom name for aux timer 2' />
+              <Input maxLength={auxTimerNameMaxLength} placeholder='Aux 2' {...register('auxTimerNames.1')} />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field title='Aux timer 3' description='Custom name for aux timer 3' />
+              <Input maxLength={auxTimerNameMaxLength} placeholder='Aux 3' {...register('auxTimerNames.2')} />
+            </Panel.ListItem>
           </Panel.ListGroup>
         </Panel.Section>
       </Panel.Card>

apps/client/src/features/control/playback/PlaybackControl.module.scss

@@ -8,6 +8,9 @@
   align-items: center;
   justify-content: space-between;
   margin-top: 1rem;
+}
+
+.label {
   font-size: $inner-section-text-size;
   color: $label-gray;
 }

apps/client/src/features/control/playback/PlaybackControl.tsx

@@ -27,7 +27,7 @@ export default function PlaybackControl() {
         timerPhase={data.timerPhase}
       />
       <div className={style.auxHeader}>
-        <span>Aux timers</span>
+        <span className={style.label}>Aux timers</span>
         <Tooltip
           text='Name aux timers'
           render={