fix: address PR review feedback for IndexingStatusBadge

- Fixed useEffect dependency array by removing tooltipTimeout
- Internationalized all user-facing strings with translation keys
- Moved IndexingStatus types to shared/ExtensionMessage.ts
- Created reusable useTooltip hook for tooltip management
- Memoized progress calculation with useMemo
- Added comprehensive test suite with 10 tests

All review comments from PR #4532 have been addressed.

Author: hannesrudolph

src/shared/ExtensionMessage.ts

@@ -17,6 +17,20 @@ import { McpServer } from "./mcp"
 import { Mode } from "./modes"
 import { RouterModels } from "./api"
 
+// Indexing status types
+export interface IndexingStatus {
+	systemStatus: string
+	message?: string
+	processedItems: number
+	totalItems: number
+	currentItemUnit?: string
+}
+
+export interface IndexingStatusUpdateMessage {
+	type: "indexingStatusUpdate"
+	values: IndexingStatus
+}
+
 export interface LanguageModelChatSelector {
 	vendor?: string
 	family?: string

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

@@ -1,34 +1,25 @@
-import React, { useState, useEffect } from "react"
+import React, { useState, useEffect, useMemo } from "react"
 import { cn } from "@src/lib/utils"
 import { vscode } from "@src/utils/vscode"
-
-interface IndexingStatus {
-	systemStatus: string
-	message?: string
-	processedItems: number
-	totalItems: number
-	currentItemUnit?: string
-}
-
-interface IndexingStatusUpdateMessage {
-	type: "indexingStatusUpdate"
-	values: IndexingStatus
-}
+import { useAppTranslation } from "@/i18n/TranslationContext"
+import { useTooltip } from "@/hooks/useTooltip"
+import type { IndexingStatus, IndexingStatusUpdateMessage } from "@roo/ExtensionMessage"
 
 interface IndexingStatusDotProps {
 	onNavigateToSettings?: () => void
 	className?: string
 }
 
 export const IndexingStatusDot: React.FC<IndexingStatusDotProps> = ({ onNavigateToSettings, className }) => {
+	const { t } = useAppTranslation()
+	const { showTooltip, handleMouseEnter, handleMouseLeave, cleanup } = useTooltip({ delay: 300 })
+
 	const [indexingStatus, setIndexingStatus] = useState<IndexingStatus>({
 		systemStatus: "Standby",
 		processedItems: 0,
 		totalItems: 0,
 		currentItemUnit: "items",
 	})
-	const [showTooltip, setShowTooltip] = useState(false)
-	const [tooltipTimeout, setTooltipTimeout] = useState<NodeJS.Timeout | null>(null)
 
 	useEffect(() => {
 		// Request initial indexing status
@@ -46,44 +37,35 @@ export const IndexingStatusDot: React.FC<IndexingStatusDotProps> = ({ onNavigate
 
 		return () => {
 			window.removeEventListener("message", handleMessage)
-			if (tooltipTimeout) clearTimeout(tooltipTimeout)
+			cleanup()
 		}
-	}, [tooltipTimeout])
+	}, [cleanup])
 
-	// Calculate progress percentage
-	const progressPercentage =
-		indexingStatus.totalItems > 0
-			? Math.round((indexingStatus.processedItems / indexingStatus.totalItems) * 100)
-			: 0
+	// Calculate progress percentage with memoization
+	const progressPercentage = useMemo(
+		() =>
+			indexingStatus.totalItems > 0
+				? Math.round((indexingStatus.processedItems / indexingStatus.totalItems) * 100)
+				: 0,
+		[indexingStatus.processedItems, indexingStatus.totalItems],
+	)
 
-	// Get tooltip text
+	// Get tooltip text with internationalization
 	const getTooltipText = () => {
 		switch (indexingStatus.systemStatus) {
 			case "Standby":
-				return "Index ready"
+				return t("chat:indexingStatus.ready")
 			case "Indexing":
-				return `Indexing ${progressPercentage}%`
+				return t("chat:indexingStatus.indexing", { percentage: progressPercentage })
 			case "Indexed":
-				return "Indexed"
+				return t("chat:indexingStatus.indexed")
 			case "Error":
-				return "Index error"
+				return t("chat:indexingStatus.error")
 			default:
-				return "Index status"
+				return t("chat:indexingStatus.status")
 		}
 	}
 
-	// Handle mouse events for tooltip
-	const handleMouseEnter = () => {
-		if (tooltipTimeout) clearTimeout(tooltipTimeout)
-		const timeout = setTimeout(() => setShowTooltip(true), 300) // 300ms delay
-		setTooltipTimeout(timeout)
-	}
-
-	const handleMouseLeave = () => {
-		if (tooltipTimeout) clearTimeout(tooltipTimeout)
-		setShowTooltip(false)
-	}
-
 	// Navigate to settings when clicked
 	const handleClick = () => {
 		if (onNavigateToSettings) {