added a new Feature that allows user to pause/resume while screen recording,

src/components/launch/LaunchWindow.tsx

@@ -1,6 +1,6 @@
 import { ChevronDown, Languages } from "lucide-react";
 import { useEffect, useState } from "react";
-import { BsRecordCircle } from "react-icons/bs";
+import { BsPauseCircle, BsPlayCircle, BsRecordCircle } from "react-icons/bs";
 import { FaRegStopCircle } from "react-icons/fa";
 import { FaFolderOpen } from "react-icons/fa6";
 import { FiMinus, FiX } from "react-icons/fi";
@@ -41,6 +41,8 @@ const ICON_CONFIG = {
 	micOff: { icon: MdMicOff, size: ICON_SIZE },
 	webcamOn: { icon: MdVideocam, size: ICON_SIZE },
 	webcamOff: { icon: MdVideocamOff, size: ICON_SIZE },
+	pause: { icon: BsPauseCircle, size: ICON_SIZE },
+	resume: { icon: BsPlayCircle, size: ICON_SIZE },
 	stop: { icon: FaRegStopCircle, size: ICON_SIZE },
 	restart: { icon: MdRestartAlt, size: ICON_SIZE },
 	record: { icon: BsRecordCircle, size: ICON_SIZE },
@@ -77,7 +79,10 @@ export function LaunchWindow() {
 
 	const {
 		recording,
+		paused,
+		elapsedSeconds,
 		toggleRecording,
+		togglePaused,
 		restartRecording,
 		microphoneEnabled,
 		setMicrophoneEnabled,
@@ -90,8 +95,6 @@ export function LaunchWindow() {
 		webcamDeviceId,
 		setWebcamDeviceId,
 	} = useScreenRecorder();
-	const [recordingStart, setRecordingStart] = useState<number | null>(null);
-	const [elapsed, setElapsed] = useState(0);
 
 	const showMicControls = microphoneEnabled && !recording;
 	const showWebcamControls = webcamEnabled && !recording;
@@ -146,25 +149,6 @@ export function LaunchWindow() {
 		}
 	}, [selectedCameraId, setWebcamDeviceId]);
 
-	useEffect(() => {
-		let timer: NodeJS.Timeout | null = null;
-		if (recording) {
-			if (!recordingStart) setRecordingStart(Date.now());
-			timer = setInterval(() => {
-				if (recordingStart) {
-					setElapsed(Math.floor((Date.now() - recordingStart) / 1000));
-				}
-			}, 1000);
-		} else {
-			setRecordingStart(null);
-			setElapsed(0);
-			if (timer) clearInterval(timer);
-		}
-		return () => {
-			if (timer) clearInterval(timer);
-		};
-	}, [recording, recordingStart]);
-
 	useEffect(() => {
 		if (!import.meta.env.DEV) {
 			return;
@@ -447,7 +431,11 @@ export function LaunchWindow() {
 				{/* Record/Stop group */}
 				<button
 					className={`flex items-center gap-0.5 rounded-full p-2 transition-colors duration-150 ${styles.electronNoDrag} ${
-						recording ? "animate-record-pulse bg-red-500/10" : "bg-white/5 hover:bg-white/[0.08]"
+						recording
+							? paused
+								? "bg-amber-500/10 hover:bg-amber-500/15"
+								: "animate-record-pulse bg-red-500/10"
+							: "bg-white/5 hover:bg-white/[0.08]"
 					}`}
 					onClick={toggleRecording}
 					disabled={!hasSelectedSource && !recording}
@@ -455,9 +443,11 @@ export function LaunchWindow() {
 				>
 					{recording ? (
 						<>
-							{getIcon("stop", "text-red-400")}
-							<span className="text-red-400 text-xs font-semibold tabular-nums">
-								{formatTimePadded(elapsed)}
+							{getIcon("stop", paused ? "text-amber-400" : "text-red-400")}
+							<span
+								className={`${paused ? "text-amber-400" : "text-red-400"} text-xs font-semibold tabular-nums`}
+							>
+								{formatTimePadded(elapsedSeconds)}
 							</span>
 						</>
 					) : (
@@ -465,6 +455,17 @@ export function LaunchWindow() {
 					)}
 				</button>
 
+				{recording && (
+					<Tooltip content={paused ? "Resume recording" : "Pause recording"}>
+						<button
+							className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
+							onClick={togglePaused}
+						>
+							{getIcon(paused ? "resume" : "pause", paused ? "text-amber-400" : "text-white/60")}
+						</button>
+					</Tooltip>
+				)}
+
 				{/* Restart recording */}
 				{recording && (
 					<Tooltip content={t("tooltips.restartRecording")}>