Better display of auto-approval kb shortcut

Author: brunobergher

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

@@ -297,14 +297,16 @@ export const AutoApproveDropdown = ({ disabled = false, triggerClassName = "" }:
 								}
 								handleAutoApprovalToggle()
 							}}>
-							<StandardTooltip content={`Toggle auto-approve ${getAutoApproveShortcut()}`}>
-								<ToggleSwitch
-									checked={effectiveAutoApprovalEnabled}
-									aria-label="Toggle auto-approval"
-									onChange={handleAutoApprovalToggle}
-								/>
+							<StandardTooltip content={`${t("chat:autoApprove.toggle")} (${getAutoApproveShortcut()})`}>
+								<span>
+									<ToggleSwitch
+										checked={effectiveAutoApprovalEnabled}
+										aria-label="Toggle auto-approval"
+										onChange={handleAutoApprovalToggle}
+									/>
+									<span className={cn("text-sm font-bold select-none")}>Enabled</span>
+								</span>
 							</StandardTooltip>
-							<span className={cn("text-sm font-bold select-none")}>Enabled</span>
 						</label>
 					</div>
 				</div>

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

@@ -133,10 +133,12 @@ export const AutoApproveSettings = ({
 								setAutoApprovalEnabled(newValue)
 								vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
 							}}>
-							<span className="font-medium">{t("settings:autoApprove.enabled")}</span>
+							<span className="font-medium">
+								{t("settings:autoApprove.enabled")} ({getAutoApproveShortcut()})
+							</span>
 						</VSCodeCheckbox>
 						<div className="text-vscode-descriptionForeground text-sm mt-1">
-							{t("settings:autoApprove.description")} {getAutoApproveShortcut()}
+							{t("settings:autoApprove.description")}
 						</div>
 					</div>
 

webview-ui/src/i18n/locales/en/chat.json

@@ -277,6 +277,7 @@
 		"tooltipManage": "Manage auto-approval settings",
 		"tooltipStatus": "Auto-approval enabled for: {{toggles}}",
 		"title": "Auto-approve",
+		"toggle": "Toggle auto-approve",
 		"all": "All",
 		"none": "None",
 		"description": "Run these actions without asking for permission. Only enable for actions you fully trust.",