refactor: improve synchronisation of external text

apps/client/src/features/control/message/MessageControl.tsx

@@ -1,4 +1,8 @@
+import { IoEye, IoEyeOffOutline } from 'react-icons/io5';
+
+import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
 import { setMessage, useExternalMessageInput, useTimerMessageInput } from '../../../common/hooks/useSocket';
+import { tooltipDelayMid } from '../../../ontimeConfig';
 
 import InputRow from './InputRow';
 import TimerControlsPreview from './TimerViewControl';
@@ -23,8 +27,17 @@ function TimerMessageInput() {
       text={text}
       visible={visible}
       changeHandler={(newValue) => setMessage.timerText(newValue)}
-      actionHandler={() => setMessage.timerVisible(!visible)}
-    />
+    >
+      <TooltipActionBtn
+        clickHandler={() => setMessage.timerVisible(!visible)}
+        tooltip={visible ? 'Make invisible' : 'Make visible'}
+        aria-label='Toggle timer message visibility'
+        openDelay={tooltipDelayMid}
+        icon={visible ? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
+        variant={visible ? 'ontime-filled' : 'ontime-subtle'}
+        size='sm'
+      />
+    </InputRow>
   );
 }
 
@@ -46,7 +59,16 @@ function ExternalInput() {
       text={text}
       visible={visible}
       changeHandler={(newValue) => setMessage.externalText(newValue)}
-      actionHandler={toggleExternal}
-    />
+    >
+      <TooltipActionBtn
+        clickHandler={toggleExternal}
+        tooltip={visible ? 'Make invisible' : 'Make visible'}
+        aria-label='Toggle external message visibility'
+        openDelay={tooltipDelayMid}
+        icon={visible ? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
+        variant={visible ? 'ontime-filled' : 'ontime-subtle'}
+        size='sm'
+      />
+    </InputRow>
   );
 }