on new recording flow: disable style/early return for buttons while recording

Author: ameer2468

apps/desktop/src/routes/(window-chrome)/new-main/CameraSelect.tsx

@@ -38,7 +38,7 @@ export default function CameraSelect(props: {
 		<div class="flex flex-col gap-[0.25rem] items-stretch text-[--text-primary]">
 			<button
 				disabled={!!currentRecording.data || props.disabled}
-				class="cursor-default flex flex-row gap-2 items-center px-2 w-full h-9 rounded-lg transition-colors bg-gray-3 disabled:text-gray-11 KSelect"
+				class="flex flex-row gap-2 items-center px-2 w-full h-9 rounded-lg transition-colors cursor-default disabled:opacity-70 bg-gray-3 disabled:text-gray-11 KSelect"
 				onClick={() => {
 					Promise.all([
 						CheckMenuItem.new({

apps/desktop/src/routes/(window-chrome)/new-main/MicrophoneSelect.tsx

@@ -66,7 +66,7 @@ export default function MicrophoneSelect(props: {
 		<div class="flex flex-col gap-[0.25rem] items-stretch text-[--text-primary]">
 			<button
 				disabled={!!currentRecording.data || props.disabled}
-				class="z-10 relative cursor-default flex flex-row gap-2 items-center px-2 w-full h-9 rounded-lg overflow-hidden transition-colors bg-gray-3 disabled:text-gray-11 KSelect"
+				class="flex overflow-hidden relative z-10 flex-row gap-2 items-center px-2 w-full h-9 rounded-lg transition-colors cursor-default disabled:opacity-70 bg-gray-3 disabled:text-gray-11 KSelect"
 				onClick={() => {
 					Promise.all([
 						CheckMenuItem.new({

apps/desktop/src/routes/(window-chrome)/new-main/SystemAudio.tsx

@@ -13,7 +13,7 @@ export default function SystemAudio() {
 				setOptions({ captureSystemAudio: !rawOptions.captureSystemAudio });
 			}}
 			disabled={!!currentRecording.data}
-			class="curosr-default flex flex-row gap-2 items-center px-2 w-full h-9 rounded-lg transition-colors bg-gray-3 disabled:text-gray-11 KSelect"
+			class="flex flex-row gap-2 items-center px-2 w-full h-9 rounded-lg transition-colors curosr-default disabled:opacity-70 bg-gray-3 disabled:text-gray-11 KSelect"
 		>
 			<IconPhMonitorBold class="text-gray-10 size-4" />
 			<p class="flex-1 text-sm text-left truncate">

apps/desktop/src/routes/(window-chrome)/new-main/TargetTypeButton.tsx

@@ -6,6 +6,7 @@ function TargetTypeButton(
 		selected: boolean;
 		Component: Component<ComponentProps<"svg">>;
 		name: string;
+		disabled?: boolean;
 	} & ComponentProps<"div">,
 ) {
 	return (
@@ -16,6 +17,7 @@ function TargetTypeButton(
 				props.selected
 					? "bg-gray-3 text-white ring-blue-9 ring-1"
 					: "ring-transparent ring-0",
+				props.disabled ? "opacity-70 pointer-events-none" : "",
 			)}
 		>
 			<props.Component

apps/desktop/src/routes/(window-chrome)/new-main/index.tsx

@@ -30,6 +30,7 @@ import { generalSettingsStore } from "~/store";
 import { createSignInMutation } from "~/utils/auth";
 import {
 	createCameraMutation,
+	createCurrentRecordingQuery,
 	createLicenseQuery,
 	listAudioDevices,
 	listScreens,
@@ -112,6 +113,8 @@ function createUpdateCheck() {
 
 function Page() {
 	const { rawOptions, setOptions } = useRecordingOptions();
+	const currentRecording = createCurrentRecordingQuery();
+	const isRecording = () => !!currentRecording.data;
 
 	createUpdateCheck();
 
@@ -389,27 +392,34 @@ function Page() {
 				<TargetTypeButton
 					selected={rawOptions.targetMode === "display"}
 					Component={IconMdiMonitor}
-					onClick={() =>
+					disabled={isRecording()}
+					onClick={() => {
+						//if recording early return
+						if (isRecording()) return;
 						setOptions("targetMode", (v) =>
 							v === "display" ? null : "display",
-						)
-					}
+						);
+					}}
 					name="Display"
 				/>
 				<TargetTypeButton
 					selected={rawOptions.targetMode === "window"}
 					Component={IconLucideAppWindowMac}
-					onClick={() =>
-						setOptions("targetMode", (v) => (v === "window" ? null : "window"))
-					}
+					disabled={isRecording()}
+					onClick={() => {
+						if (isRecording()) return;
+						setOptions("targetMode", (v) => (v === "window" ? null : "window"));
+					}}
 					name="Window"
 				/>
 				<TargetTypeButton
 					selected={rawOptions.targetMode === "area"}
 					Component={IconMaterialSymbolsScreenshotFrame2Rounded}
-					onClick={() =>
-						setOptions("targetMode", (v) => (v === "area" ? null : "area"))
-					}
+					disabled={isRecording()}
+					onClick={() => {
+						if (isRecording()) return;
+						setOptions("targetMode", (v) => (v === "area" ? null : "area"));
+					}}
 					name="Area"
 				/>
 			</div>