fix: Auto-Approval Enabled checkbox now enables Save button

- Add autoApprovalEnabled prop to AutoApproveSettings component
- Update checkbox onChange to call setCachedStateField for Save button activation
- Keep setAutoApprovalEnabled call for immediate timer cancellation (hybrid approach)
- Include autoApprovalEnabled in SettingsView handleSubmit for persistence

This fixes Issue #10745 where toggling the Auto-Approval Enabled checkbox
did not activate the Save button, making its behavior inconsistent with
other settings checkboxes.

The hybrid approach preserves the current UX where unchecking the box
immediately stops any active countdown timers, while also enabling the
Save button so users can confirm their changes.

webview-ui/src/components/settings/AutoApproveSettings.tsx

@@ -19,6 +19,7 @@ import { useAutoApprovalState } from "@/hooks/useAutoApprovalState"
 import { useAutoApprovalToggles } from "@/hooks/useAutoApprovalToggles"
 
 type AutoApproveSettingsProps = HTMLAttributes<HTMLDivElement> & {
+	autoApprovalEnabled?: boolean
 	alwaysAllowReadOnly?: boolean
 	alwaysAllowReadOnlyOutsideWorkspace?: boolean
 	alwaysAllowWrite?: boolean
@@ -36,6 +37,7 @@ type AutoApproveSettingsProps = HTMLAttributes<HTMLDivElement> & {
 	allowedMaxCost?: number | undefined
 	deniedCommands?: string[]
 	setCachedStateField: SetCachedStateField<
+		| "autoApprovalEnabled"
 		| "alwaysAllowReadOnly"
 		| "alwaysAllowReadOnlyOutsideWorkspace"
 		| "alwaysAllowWrite"
@@ -56,6 +58,7 @@ type AutoApproveSettingsProps = HTMLAttributes<HTMLDivElement> & {
 }
 
 export const AutoApproveSettings = ({
+	autoApprovalEnabled,
 	alwaysAllowReadOnly,
 	alwaysAllowReadOnlyOutsideWorkspace,
 	alwaysAllowWrite,
@@ -78,10 +81,11 @@ export const AutoApproveSettings = ({
 	const { t } = useAppTranslation()
 	const [commandInput, setCommandInput] = useState("")
 	const [deniedCommandInput, setDeniedCommandInput] = useState("")
-	const { autoApprovalEnabled, setAutoApprovalEnabled } = useExtensionState()
+	const { setAutoApprovalEnabled } = useExtensionState()
 
 	const toggles = useAutoApprovalToggles()
 
+	// Use the prop value (from cached state) for display, but still use context for timer effects
 	const { effectiveAutoApprovalEnabled } = useAutoApprovalState(toggles, autoApprovalEnabled)
 
 	const handleAddCommand = () => {
@@ -121,8 +125,10 @@ export const AutoApproveSettings = ({
 							aria-label={t("settings:autoApprove.toggleAriaLabel")}
 							onChange={() => {
 								const newValue = !(autoApprovalEnabled ?? false)
+								// Update cached state for Save button activation
+								setCachedStateField("autoApprovalEnabled", newValue)
+								// Also update context state for immediate timer effect (hybrid approach)
 								setAutoApprovalEnabled(newValue)
-								vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
 							}}>
 							<span className="font-medium">{t("settings:autoApprove.enabled")}</span>
 						</VSCodeCheckbox>

webview-ui/src/components/settings/SettingsView.tsx

@@ -144,6 +144,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 	const [cachedState, setCachedState] = useState(() => extensionState)
 
 	const {
+		autoApprovalEnabled,
 		alwaysAllowReadOnly,
 		alwaysAllowReadOnlyOutsideWorkspace,
 		allowedCommands,
@@ -361,6 +362,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			vscode.postMessage({
 				type: "updateSettings",
 				updatedSettings: {
+					autoApprovalEnabled: autoApprovalEnabled ?? false,
 					language,
 					alwaysAllowReadOnly: alwaysAllowReadOnly ?? undefined,
 					alwaysAllowReadOnlyOutsideWorkspace: alwaysAllowReadOnlyOutsideWorkspace ?? undefined,
@@ -776,6 +778,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 						{/* Auto-Approve Section */}
 						{renderTab === "autoApprove" && (
 							<AutoApproveSettings
+								autoApprovalEnabled={autoApprovalEnabled}
 								alwaysAllowReadOnly={alwaysAllowReadOnly}
 								alwaysAllowReadOnlyOutsideWorkspace={alwaysAllowReadOnlyOutsideWorkspace}
 								alwaysAllowWrite={alwaysAllowWrite}