feat: add notification indicator to version number for new announcements

Author: roomote

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

@@ -117,6 +117,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		soundEnabled,
 		soundVolume,
 		cloudIsAuthenticated,
+		shouldShowAnnouncement,
 	} = useExtensionState()
 
 	const messagesRef = useRef(messages)
@@ -1829,6 +1830,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 						<VersionIndicator
 							onClick={() => setShowAnnouncementModal(true)}
 							className="absolute top-2 right-3 z-10"
+							showNotification={shouldShowAnnouncement}
 						/>
 
 						<RooHero />

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

@@ -5,17 +5,24 @@ import { Package } from "@roo/package"
 interface VersionIndicatorProps {
 	onClick: () => void
 	className?: string
+	showNotification?: boolean
 }
 
-const VersionIndicator: React.FC<VersionIndicatorProps> = ({ onClick, className = "" }) => {
+const VersionIndicator: React.FC<VersionIndicatorProps> = ({ onClick, className = "", showNotification = false }) => {
 	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 ${className}`}
+			className={`relative text-xs text-vscode-descriptionForeground hover:text-vscode-foreground transition-colors cursor-pointer px-2 py-1 rounded border ${className}`}
 			aria-label={t("chat:versionIndicator.ariaLabel", { version: Package.version })}>
 			v{Package.version}
+			{showNotification && (
+				<span
+					className="absolute -top-1 -right-1 w-2 h-2 bg-vscode-badge-background rounded-full animate-pulse"
+					aria-label={t("chat:versionIndicator.newAnnouncement")}
+				/>
+			)}
 		</button>
 	)
 }