Additional i18n-l10n for Welcome/Home/Chat/History + Spanish language translations (RooCodeInc#1494)

* more i18n

* translations fix

* de tweak

Author: brownrw8

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

@@ -114,8 +114,8 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 				<Trans
 					i18nKey="announcement.joinOurCommunities"
 					components={{
-						DiscordLink: <VSCodeLink href="https://discord.gg/cline" />,
-						RedditLink: <VSCodeLink href="https://www.reddit.com/r/cline/" />,
+						DiscordLink: <VSCodeLink style={{ display: "inline" }} href="https://discord.gg/cline" />,
+						RedditLink: <VSCodeLink style={{ display: "inline" }} href="https://www.reddit.com/r/cline/" />,
 					}}
 				/>
 			</p>

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

@@ -5,6 +5,7 @@ import { useExtensionState } from "../../context/ExtensionStateContext"
 import { AutoApprovalSettings } from "../../../../src/shared/AutoApprovalSettings"
 import { vscode } from "../../utils/vscode"
 import { getAsVar, VSC_FOREGROUND, VSC_TITLEBAR_INACTIVE_FOREGROUND, VSC_DESCRIPTION_FOREGROUND } from "../../utils/vscStyles"
+import { useTranslation } from "react-i18next"
 
 interface AutoApproveMenuProps {
 	style?: React.CSSProperties
@@ -50,6 +51,7 @@ const ACTION_METADATA: {
 ]
 
 const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
+	const { t } = useTranslation("translation", { keyPrefix: "autoApproveMenu" })
 	const { autoApprovalSettings } = useExtensionState()
 	const [isExpanded, setIsExpanded] = useState(false)
 	const [isHoveringCollapsibleSection, setIsHoveringCollapsibleSection] = useState(false)
@@ -190,15 +192,15 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 							color: getAsVar(VSC_FOREGROUND),
 							whiteSpace: "nowrap",
 						}}>
-						Auto-approve:
+						{t("autoApprove")}
 					</span>
 					<span
 						style={{
 							whiteSpace: "nowrap",
 							overflow: "hidden",
 							textOverflow: "ellipsis",
 						}}>
-						{enabledActions.length === 0 ? "None" : enabledActionsList}
+						{enabledActions.length === 0 ? t("none") : enabledActionsList}
 					</span>
 					<span
 						className={`codicon codicon-chevron-${isExpanded ? "down" : "right"}`}
@@ -217,8 +219,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 							color: getAsVar(VSC_DESCRIPTION_FOREGROUND),
 							fontSize: "12px",
 						}}>
-						Auto-approve allows Cline to perform the following actions without asking for permission. Please use with
-						caution and only enable if you understand the risks.
+						{t("autoApproveDescription")}
 					</div>
 					{ACTION_METADATA.map((action) => (
 						<div key={action.id} style={{ margin: "6px 0" }}>
@@ -285,7 +286,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 							fontSize: "12px",
 							marginBottom: "10px",
 						}}>
-						Cline will automatically make this many API requests before asking for approval to proceed with the task.
+						{t("autoApproveMaxRequestsDescription")}
 					</div>
 					<div style={{ margin: "6px 0" }}>
 						<VSCodeCheckbox
@@ -294,15 +295,15 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 								const checked = (e.target as HTMLInputElement).checked
 								updateNotifications(checked)
 							}}>
-							Enable Notifications
+							{t("enableNotifications")}
 						</VSCodeCheckbox>
 						<div
 							style={{
 								marginLeft: "28px",
 								color: getAsVar(VSC_DESCRIPTION_FOREGROUND),
 								fontSize: "12px",
 							}}>
-							Receive system notifications when Cline requires approval to proceed or when a task is completed.
+							{t("enableNotificationsDescription")}
 						</div>
 					</div>
 				</div>