fix: resolve PR issues

- Consolidate duplicate Announcement modal rendering logic
- Remove unrelated formatting changes (semicolon and trailing comma)
- Add translations for all non-English locales
- Extract version indicator into reusable VersionIndicator component
- Update tests to work with new component structure

Author: daniel-lxs

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

@@ -21,7 +21,6 @@ import { getApiMetrics } from "@roo/getApiMetrics"
 import { AudioType } from "@roo/WebviewMessage"
 import { getAllModes } from "@roo/modes"
 import { ProfileValidator } from "@roo/ProfileValidator"
-import { Package } from "@roo/package"
 
 import { vscode } from "@src/utils/vscode"
 import { validateCommand } from "@src/utils/command-validation"
@@ -33,6 +32,7 @@ import RooHero from "@src/components/welcome/RooHero"
 import RooTips from "@src/components/welcome/RooTips"
 
 import TelemetryBanner from "../common/TelemetryBanner"
+import VersionIndicator from "../common/VersionIndicator"
 import { useTaskSearch } from "../history/useTaskSearch"
 import HistoryPreview from "../history/HistoryPreview"
 import Announcement from "./Announcement"
@@ -1367,15 +1367,20 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 	return (
 		<div className={isHidden ? "hidden" : "fixed top-0 left-0 right-0 bottom-0 flex flex-col overflow-hidden"}>
 			{/* Version indicator in top-right corner */}
-			<button
-				onClick={() => setShowAnnouncementModal(true)}
-				className="absolute top-2 right-2 text-xs text-vscode-descriptionForeground hover:text-vscode-foreground transition-colors cursor-pointer px-2 py-1 rounded border border-vscode-panel-border hover:border-vscode-focusBorder z-10"
-				aria-label={t("chat:versionIndicator.ariaLabel", { version: Package.version })}>
-				v{Package.version}
-			</button>
-
-			{showAnnouncement && <Announcement hideAnnouncement={hideAnnouncement} />}
-			{showAnnouncementModal && <Announcement hideAnnouncement={() => setShowAnnouncementModal(false)} />}
+			<VersionIndicator onClick={() => setShowAnnouncementModal(true)} className="absolute top-2 right-2 z-10" />
+
+			{(showAnnouncement || showAnnouncementModal) && (
+				<Announcement
+					hideAnnouncement={() => {
+						if (showAnnouncementModal) {
+							setShowAnnouncementModal(false)
+						}
+						if (showAnnouncement) {
+							hideAnnouncement()
+						}
+					}}
+				/>
+			)}
 			{task ? (
 				<>
 					<TaskHeader

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

@@ -61,6 +61,23 @@ vi.mock("../AutoApproveMenu", () => ({
 	default: () => null,
 }))
 
+vi.mock("@src/components/common/VersionIndicator", () => ({
+	default: function MockVersionIndicator({ onClick, className }: { onClick: () => void; className?: string }) {
+		// eslint-disable-next-line @typescript-eslint/no-require-imports
+		const React = require("react")
+		return React.createElement(
+			"button",
+			{
+				onClick,
+				className,
+				"aria-label": "chat:versionIndicator.ariaLabel",
+				"data-testid": "version-indicator",
+			},
+			"v3.21.5",
+		)
+	},
+}))
+
 vi.mock("@src/components/modals/Announcement", () => ({
 	default: function MockAnnouncement({ hideAnnouncement }: { hideAnnouncement: () => void }) {
 		// eslint-disable-next-line @typescript-eslint/no-require-imports
@@ -1136,20 +1153,18 @@ describe("ChatView - Version Indicator Tests", () => {
 	})
 
 	it("version indicator has correct styling classes", () => {
-		const { getByLabelText } = renderChatView()
+		const { getByTestId } = renderChatView()
 
 		// First hydrate state
 		mockPostMessage({
 			clineMessages: [],
 		})
 
-		// Check styling classes
-		const versionButton = getByLabelText(/version/i)
-		expect(versionButton.className).toContain("absolute")
-		expect(versionButton.className).toContain("top-2")
-		expect(versionButton.className).toContain("right-2")
-		expect(versionButton.className).toContain("text-xs")
-		expect(versionButton.className).toContain("cursor-pointer")
+		// Check styling classes - the VersionIndicator component receives className prop
+		const versionButton = getByTestId("version-indicator")
+		expect(versionButton).toBeInTheDocument()
+		// The className is passed as a prop to VersionIndicator
+		expect(versionButton.className).toContain("absolute top-2 right-2 z-10")
 	})
 
 	it("version indicator has proper accessibility attributes", () => {

webview-ui/src/components/common/VersionIndicator.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import { useTranslation } from "react-i18next"
+import { Package } from "@roo/package"
+
+interface VersionIndicatorProps {
+	onClick: () => void
+	className?: string
+}
+
+const VersionIndicator: React.FC<VersionIndicatorProps> = ({ onClick, className = "" }) => {
+	const { t } = useTranslation()
+
+	return (
+		<button
+			onClick={onClick}
+			className={`text-xs text-vscode-descriptionForeground hover:text-vscode-foreground transition-colors cursor-pointer px-2 py-1 rounded border border-vscode-panel-border hover:border-vscode-focusBorder ${className}`}
+			aria-label={t("chat:versionIndicator.ariaLabel", { version: Package.version })}>
+			v{Package.version}
+		</button>
+	)
+}
+
+export default VersionIndicator

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

@@ -312,6 +312,6 @@
 		"status": "Estat de l'índex"
 	},
 	"versionIndicator": {
-		"ariaLabel": "Version {{version}} - Click to view release notes"
+		"ariaLabel": "Versió {{version}} - Feu clic per veure les notes de llançament"
 	}
 }

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

@@ -312,6 +312,6 @@
 		"status": "Index-Status"
 	},
 	"versionIndicator": {
-		"ariaLabel": "Version {{version}} - Click to view release notes"
+		"ariaLabel": "Version {{version}} - Klicken Sie, um die Versionshinweise anzuzeigen"
 	}
 }

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

@@ -312,6 +312,6 @@
 		"status": "Estado del índice"
 	},
 	"versionIndicator": {
-		"ariaLabel": "Version {{version}} - Click to view release notes"
+		"ariaLabel": "Versión {{version}} - Haz clic para ver las notas de la versión"
 	}
 }

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

@@ -312,6 +312,6 @@
 		"status": "Statut de l'index"
 	},
 	"versionIndicator": {
-		"ariaLabel": "Version {{version}} - Click to view release notes"
+		"ariaLabel": "Version {{version}} - Cliquez pour voir les notes de version"
 	}
 }

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

@@ -312,6 +312,6 @@
 		"status": "इंडेक्स स्थिति"
 	},
 	"versionIndicator": {
-		"ariaLabel": "Version {{version}} - Click to view release notes"
+		"ariaLabel": "संस्करण {{version}} - रिलीज़ नोट्स देखने के लिए क्लिक करें"
 	}
 }

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

@@ -318,6 +318,6 @@
 		"status": "Status indeks"
 	},
 	"versionIndicator": {
-		"ariaLabel": "Version {{version}} - Click to view release notes"
+		"ariaLabel": "Versi {{version}} - Klik untuk melihat catatan rilis"
 	}
 }

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

@@ -312,6 +312,6 @@
 		"status": "Stato indice"
 	},
 	"versionIndicator": {
-		"ariaLabel": "Version {{version}} - Click to view release notes"
+		"ariaLabel": "Versione {{version}} - Clicca per visualizzare le note di rilascio"
 	}
 }