fix: auto-approve checkbox now expands menu when no options selected

- When no auto-approve options are selected, clicking the checkbox area will expand the menu to show available options
- This improves UX by making it clearer how to enable auto-approval features
- Updated tests to verify the new behavior

Author: roomote

webview-ui/src/components/chat/AutoApproveMenu.tsx

@@ -185,7 +185,14 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 					cursor: "pointer",
 				}}
 				onClick={toggleExpanded}>
-				<div onClick={(e) => e.stopPropagation()}>
+				<div
+					onClick={(e) => {
+						e.stopPropagation()
+						// If no options are selected, clicking the checkbox area should expand the menu
+						if (!hasEnabledOptions) {
+							setIsExpanded(true)
+						}
+					}}>
 					<StandardTooltip
 						content={!hasEnabledOptions ? t("chat:autoApprove.selectOptionsFirst") : undefined}>
 						<VSCodeCheckbox
@@ -202,7 +209,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 									setAutoApprovalEnabled(newValue)
 									vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
 								}
-								// If no options enabled, do nothing
+								// If no options enabled, the onClick handler above will expand the menu
 							}}
 						/>
 					</StandardTooltip>

webview-ui/src/components/chat/__tests__/AutoApproveMenu.spec.tsx

@@ -115,7 +115,7 @@ describe("AutoApproveMenu", () => {
 			expect(screen.getByText("Read-only operations")).toBeInTheDocument()
 		})
 
-		it("should not allow toggling master checkbox when no options are selected", () => {
+		it("should expand menu when clicking checkbox area with no options selected", async () => {
 			;(useExtensionState as ReturnType<typeof vi.fn>).mockReturnValue({
 				...defaultExtensionState,
 				autoApprovalEnabled: false,
@@ -124,12 +124,18 @@ describe("AutoApproveMenu", () => {
 
 			render(<AutoApproveMenu />)
 
-			// Click on the master checkbox
+			// Click on the checkbox container (since the checkbox itself is disabled)
 			const masterCheckbox = screen.getByRole("checkbox")
-			fireEvent.click(masterCheckbox)
+			const checkboxContainer = masterCheckbox.parentElement
+			fireEvent.click(checkboxContainer!)
 
 			// Should not send any message since no options are selected
 			expect(mockPostMessage).not.toHaveBeenCalled()
+
+			// But should expand the menu to show options
+			await waitFor(() => {
+				expect(screen.getByTestId("always-allow-readonly-toggle")).toBeInTheDocument()
+			})
 		})
 
 		it("should toggle master checkbox when options are selected", () => {