feat: replace auto-approve text labels with icons in collapsed view

- Updated AutoApproveMenu component to display icons instead of text labels when collapsed
- Added enabledIcons computed value to extract icon names from enabled toggles
- Modified the display span to render icons with proper styling
- Updated tests to check for icon presence instead of text content
- Removed unused displayText and enabledActionsList variables
- Maintains the same functionality while providing a more compact visual representation

Author: roomote

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

@@ -129,18 +129,12 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 		setIsExpanded((prev) => !prev)
 	}, [])
 
-	const enabledActionsList = Object.entries(toggles)
-		.filter(([_key, value]) => !!value)
-		.map(([key]) => t(autoApproveSettingsConfig[key as AutoApproveSetting].labelKey))
-		.join(", ")
-
-	// Update displayed text logic
-	const displayText = useMemo(() => {
-		if (!effectiveAutoApprovalEnabled || !hasEnabledOptions) {
-			return t("chat:autoApprove.none")
-		}
-		return enabledActionsList || t("chat:autoApprove.none")
-	}, [effectiveAutoApprovalEnabled, hasEnabledOptions, enabledActionsList, t])
+	// Get enabled icons for display
+	const enabledIcons = useMemo(() => {
+		return Object.entries(toggles)
+			.filter(([_key, value]) => !!value)
+			.map(([key]) => autoApproveSettingsConfig[key as AutoApproveSetting].icon)
+	}, [toggles])
 
 	const handleOpenSettings = useCallback(
 		() =>
@@ -213,8 +207,22 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 							whiteSpace: "nowrap",
 							flex: 1,
 							minWidth: 0,
+							display: "flex",
+							alignItems: "center",
+							gap: "6px",
 						}}>
-						{displayText}
+						{!effectiveAutoApprovalEnabled || !hasEnabledOptions
+							? t("chat:autoApprove.none")
+							: enabledIcons.map((icon, index) => (
+									<span
+										key={index}
+										className={`codicon codicon-${icon}`}
+										style={{
+											fontSize: "14px",
+											flexShrink: 0,
+										}}
+									/>
+								))}
 					</span>
 					<span
 						className={`codicon codicon-chevron-${isExpanded ? "down" : "right"}`}

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

@@ -111,8 +111,9 @@ describe("AutoApproveMenu", () => {
 
 			render(<AutoApproveMenu />)
 
-			// Check that the text shows the enabled option
-			expect(screen.getByText("Read-only operations")).toBeInTheDocument()
+			// Check that the icon for read-only operations is shown
+			const container = screen.getByText("Auto-approve").parentElement?.parentElement
+			expect(container?.querySelector(".codicon-eye")).toBeInTheDocument()
 		})
 
 		it("should not allow toggling master checkbox when no options are selected", () => {
@@ -222,8 +223,11 @@ describe("AutoApproveMenu", () => {
 
 			render(<AutoApproveMenu />)
 
-			// Should show all enabled options in the summary
-			expect(screen.getByText("Read-only operations, Write operations, Execute operations")).toBeInTheDocument()
+			// Should show icons for all enabled options
+			const container = screen.getByText("Auto-approve").parentElement?.parentElement
+			expect(container?.querySelector(".codicon-eye")).toBeInTheDocument() // Read
+			expect(container?.querySelector(".codicon-edit")).toBeInTheDocument() // Write
+			expect(container?.querySelector(".codicon-terminal")).toBeInTheDocument() // Execute
 		})
 
 		it("should handle enabling first option when none selected", async () => {