fix: remove onNavigateToSettings prop and update IndexingStatusDot to post settingsButtonClicked message

Author: daniel-lxs

webview-ui/src/App.tsx

@@ -166,10 +166,6 @@ const App = () => {
 				isHidden={tab !== "chat"}
 				showAnnouncement={showAnnouncement}
 				hideAnnouncement={() => setShowAnnouncement(false)}
-				onNavigateToSettings={() => {
-					switchTab("settings")
-					setCurrentSection("experimental")
-				}}
 			/>
 			<HumanRelayDialog
 				isOpen={humanRelayDialogState.isOpen}

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

@@ -45,7 +45,6 @@ interface ChatTextAreaProps {
 	mode: Mode
 	setMode: (value: Mode) => void
 	modeShortcutText: string
-	onNavigateToSettings?: () => void
 }
 
 const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
@@ -65,7 +64,6 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			mode,
 			setMode,
 			modeShortcutText,
-			onNavigateToSettings,
 		},
 		ref,
 	) => {
@@ -1175,9 +1173,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					</div>
 
 					<div className={cn("flex", "items-center", "gap-0.5", "shrink-0")}>
-						{codebaseIndexConfig?.codebaseIndexEnabled && (
-							<IndexingStatusDot onNavigateToSettings={onNavigateToSettings} />
-						)}
+						{codebaseIndexConfig?.codebaseIndexEnabled && <IndexingStatusDot />}
 						<IconButton
 							iconClass={isEnhancingPrompt ? "codicon-loading" : "codicon-sparkle"}
 							title={t("chat:enhancePrompt")}

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

@@ -46,7 +46,6 @@ export interface ChatViewProps {
 	isHidden: boolean
 	showAnnouncement: boolean
 	hideAnnouncement: () => void
-	onNavigateToSettings?: () => void
 }
 
 export interface ChatViewRef {
@@ -58,7 +57,7 @@ export const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images
 const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
 
 const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewProps> = (
-	{ isHidden, showAnnouncement, hideAnnouncement, onNavigateToSettings },
+	{ isHidden, showAnnouncement, hideAnnouncement },
 	ref,
 ) => {
 	const isMountedRef = useRef(true)
@@ -1547,7 +1546,6 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 				mode={mode}
 				setMode={setMode}
 				modeShortcutText={modeShortcutText}
-				onNavigateToSettings={onNavigateToSettings}
 			/>
 
 			{isProfileDisabled && (

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

@@ -6,11 +6,10 @@ 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 }) => {
+export const IndexingStatusDot: React.FC<IndexingStatusDotProps> = ({ className }) => {
 	const { t } = useAppTranslation()
 	const { showTooltip, handleMouseEnter, handleMouseLeave, cleanup } = useTooltip({ delay: 300 })
 	const [isHovered, setIsHovered] = useState(false)
@@ -69,9 +68,14 @@ export const IndexingStatusDot: React.FC<IndexingStatusDotProps> = ({ onNavigate
 
 	// Navigate to settings when clicked
 	const handleClick = () => {
-		if (onNavigateToSettings) {
-			onNavigateToSettings()
-		}
+		window.postMessage(
+			{
+				type: "action",
+				action: "settingsButtonClicked",
+				values: { section: "experimental" },
+			},
+			"*",
+		)
 	}
 
 	const handleMouseEnterButton = () => {

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

@@ -124,14 +124,25 @@ describe("IndexingStatusDot", () => {
 		expect(button).toHaveAttribute("aria-label", "Index ready")
 	})
 
-	it("calls onNavigateToSettings when clicked", () => {
-		const onNavigateToSettings = jest.fn()
-		renderComponent({ onNavigateToSettings })
+	it("posts settingsButtonClicked message when clicked", () => {
+		// Mock window.postMessage
+		const postMessageSpy = jest.spyOn(window, "postMessage")
+
+		renderComponent()
 
 		const button = screen.getByRole("button")
 		fireEvent.click(button)
 
-		expect(onNavigateToSettings).toHaveBeenCalled()
+		expect(postMessageSpy).toHaveBeenCalledWith(
+			{
+				type: "action",
+				action: "settingsButtonClicked",
+				values: { section: "experimental" },
+			},
+			"*",
+		)
+
+		postMessageSpy.mockRestore()
 	})
 
 	it("requests indexing status on mount", () => {