feat: add shortcut hint to auto-approve dropdown

Author: roomote

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

@@ -10,6 +10,7 @@ import { Popover, PopoverContent, PopoverTrigger, StandardTooltip, ToggleSwitch
 import { AutoApproveSetting, autoApproveSettingsConfig } from "../settings/AutoApproveToggle"
 import { useAutoApprovalToggles } from "@/hooks/useAutoApprovalToggles"
 import { useAutoApprovalState } from "@/hooks/useAutoApprovalState"
+import { ShortcutHint } from "./ShortcutHint"
 
 interface AutoApproveDropdownProps {
 	disabled?: boolean
@@ -222,6 +223,7 @@ export const AutoApproveDropdown = ({ disabled = false, triggerClassName = "" }:
 						<p className="m-0 text-xs text-vscode-descriptionForeground">
 							{t("chat:autoApprove.description")}
 						</p>
+						<ShortcutHint translationKey={"chat:autoApprove.toggleShortcut"} />
 					</div>
 					<div className="grid grid-cols-1 min-[340px]:grid-cols-2 gap-x-2 gap-y-2 p-3">
 						{settingsArray.map(({ key, labelKey, descriptionKey, icon }) => {

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

@@ -0,0 +1,43 @@
+import React from "react"
+import { Trans } from "react-i18next"
+
+import { useAppTranslation } from "@/i18n/TranslationContext"
+import { usePlatform } from "@/hooks/usePlatform"
+
+interface ShortcutHintProps {
+	translationKey: string
+}
+
+export const ShortcutHint: React.FC<ShortcutHintProps> = ({ translationKey }) => {
+	const { t } = useAppTranslation()
+	const platform = usePlatform()
+
+	const getShortcut = () => {
+		switch (platform) {
+			case "mac":
+				return "⌘⌥A"
+			case "windows":
+			case "linux":
+				return "Ctrl+Alt+A"
+			default:
+				return ""
+		}
+	}
+
+	const shortcut = getShortcut()
+
+	if (!shortcut) {
+		return null
+	}
+
+	return (
+		<p className="m-0 text-xs text-vscode-descriptionForeground">
+			<Trans
+				i18nKey={translationKey}
+				components={{
+					shortcut: <code className="p-1 rounded bg-vscode-button-background">{shortcut}</code>,
+				}}
+			/>
+		</p>
+	)
+}

webview-ui/src/hooks/usePlatform.ts

@@ -0,0 +1,20 @@
+import { useState, useEffect } from "react"
+
+type Platform = "mac" | "windows" | "linux" | "unknown"
+
+export function usePlatform(): Platform {
+	const [platform, setPlatform] = useState<Platform>("unknown")
+
+	useEffect(() => {
+		const userAgent = window.navigator.userAgent.toLowerCase()
+		if (userAgent.includes("mac")) {
+			setPlatform("mac")
+		} else if (userAgent.includes("win")) {
+			setPlatform("windows")
+		} else if (userAgent.includes("linux")) {
+			setPlatform("linux")
+		}
+	}, [])
+
+	return platform
+}

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

@@ -294,7 +294,8 @@
 		"triggerLabel_zero": "0 auto-approve",
 		"triggerLabel_one": "1 auto-approved",
 		"triggerLabel_other": "{{count}} auto-approved",
-		"triggerLabelAll": "YOLO"
+		"triggerLabelAll": "YOLO",
+		"toggleShortcut": "Toggle with <shortcut>"
 	},
 	"announcement": {
 		"title": "🎉 Roo Code {{version}} Released",