From fae9e030a34c87eef7a342d4fbe70a6889d7ff87 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Wed, 26 Aug 2026 12:40:01 +0000
Subject: [PATCH] feat(ui): add a clear screen control to message control

Recovering from "message up, blinking, secondary on" took four clicks in
three places, which is the wrong shape for something done under pressure.
One control now returns the stage to a plain timer in a single patch,
keeping whatever the operator has typed. It is disabled while nothing is
active, so an accidental click is a no-op.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011CHxSQ6nWHuyar8feieRra
---
 apps/client/src/common/hooks/useSocket.ts             |  3 +++
 .../src/features/control/message/ScreenControl.tsx    | 11 ++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/common/hooks/useSocket.ts b/apps/client/src/common/hooks/useSocket.ts
index da94bb454..30862c92e 100644
--- a/apps/client/src/common/hooks/useSocket.ts
+++ b/apps/client/src/common/hooks/useSocket.ts
@@ -55,6 +55,9 @@ export const setMessage = {
   timerBlackout: (payload: boolean) => sendSocket('message', { timer: { blackout: payload } }),
   timerSecondarySource: (payload: TimerMessage['secondarySource']) =>
     sendSocket('message', { timer: { secondarySource: payload } }),
+  /** returns the stage to a plain timer, keeping whatever the operator has typed */
+  clearScreen: () =>
+    sendSocket('message', { timer: { visible: false, blink: false, blackout: false, secondarySource: null } }),
 };
 
 export const usePlaybackControl = createSelector((state: RuntimeStore) => ({
diff --git a/apps/client/src/features/control/message/ScreenControl.tsx b/apps/client/src/features/control/message/ScreenControl.tsx
index dd6d19b7f..607fc6b02 100644
--- a/apps/client/src/features/control/message/ScreenControl.tsx
+++ b/apps/client/src/features/control/message/ScreenControl.tsx
@@ -4,7 +4,7 @@ import { setMessage, useScreenControl } from '../../../common/hooks/useSocket';
 import style from './ScreenControl.module.scss';
 
 export default function ScreenControl() {
-  const { blackout, blink } = useScreenControl();
+  const { blackout, blink, isScreenModified } = useScreenControl();
 
   return (
     <div className={style.screenControl}>
@@ -26,6 +26,15 @@ export default function ScreenControl() {
       >
         Blackout
       </Button>
+      <Button
+        variant='subtle'
+        fluid
+        disabled={!isScreenModified}
+        onClick={() => setMessage.clearScreen()}
+        data-testid='clear screen'
+      >
+        Clear screen
+      </Button>
     </div>
   );
 }