feat: move codebase indexing toggle to General Settings

- Create new GeneralSettings component with codebase indexing enable/disable toggle
- Add "General" as first section in SettingsView with SquareMousePointer icon
- Remove enable/disable checkbox from CodeIndexPopover to focus on configuration
- Add conditional rendering to IndexingStatusBadge to hide when indexing disabled
- Add translation keys for General Settings section
- Fix React hooks rules by moving conditional return after all hooks

Fixes #5680

Author: roomote

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

@@ -7,7 +7,6 @@ import {
 	VSCodeDropdown,
 	VSCodeOption,
 	VSCodeLink,
-	VSCodeCheckbox,
 } from "@vscode/webview-ui-toolkit/react"
 import * as ProgressPrimitive from "@radix-ui/react-progress"
 import { vscode } from "@src/utils/vscode"
@@ -513,20 +512,6 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 					</div>
 
 					<div className="p-4">
-						{/* Enable/Disable Toggle */}
-						<div className="mb-4">
-							<div className="flex items-center gap-2">
-								<VSCodeCheckbox
-									checked={currentSettings.codebaseIndexEnabled}
-									onChange={(e: any) => updateSetting("codebaseIndexEnabled", e.target.checked)}>
-									<span className="font-medium">{t("settings:codeIndex.enableLabel")}</span>
-								</VSCodeCheckbox>
-								<StandardTooltip content={t("settings:codeIndex.enableDescription")}>
-									<span className="codicon codicon-info text-xs text-vscode-descriptionForeground cursor-help" />
-								</StandardTooltip>
-							</div>
-						</div>
-
 						{/* Status Section */}
 						<div className="space-y-2">
 							<h4 className="text-sm font-medium">{t("settings:codeIndex.statusTitle")}</h4>

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

@@ -4,6 +4,7 @@ import { cn } from "@src/lib/utils"
 import { vscode } from "@src/utils/vscode"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { useTooltip } from "@/hooks/useTooltip"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { CodeIndexPopover } from "./CodeIndexPopover"
 import type { IndexingStatus, IndexingStatusUpdateMessage } from "@roo/ExtensionMessage"
 
@@ -15,6 +16,7 @@ export const IndexingStatusBadge: React.FC<IndexingStatusBadgeProps> = ({ classN
 	const { t } = useAppTranslation()
 	const { showTooltip, handleMouseEnter, handleMouseLeave, cleanup } = useTooltip({ delay: 300 })
 	const [isHovered, setIsHovered] = useState(false)
+	const { codebaseIndexConfig } = useExtensionState()
 
 	const [indexingStatus, setIndexingStatus] = useState<IndexingStatus>({
 		systemStatus: "Standby",
@@ -52,6 +54,11 @@ export const IndexingStatusBadge: React.FC<IndexingStatusBadgeProps> = ({ classN
 		[indexingStatus.processedItems, indexingStatus.totalItems],
 	)
 
+	// Don't render if codebase indexing is disabled
+	if (!codebaseIndexConfig?.codebaseIndexEnabled) {
+		return null
+	}
+
 	// Get tooltip text with internationalization
 	const getTooltipText = () => {
 		switch (indexingStatus.systemStatus) {

webview-ui/src/components/settings/GeneralSettings.tsx

@@ -0,0 +1,47 @@
+import React from "react"
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { useAppTranslation } from "@/i18n/TranslationContext"
+import { vscode } from "@/utils/vscode"
+
+export const GeneralSettings: React.FC = () => {
+	const { t } = useAppTranslation()
+	const { codebaseIndexConfig } = useExtensionState()
+
+	const updateSetting = (key: string, value: any) => {
+		vscode.postMessage({
+			type: "saveCodeIndexSettingsAtomic",
+			codeIndexSettings: {
+				codebaseIndexEnabled: codebaseIndexConfig?.codebaseIndexEnabled ?? true,
+				codebaseIndexQdrantUrl: codebaseIndexConfig?.codebaseIndexQdrantUrl ?? "",
+				codebaseIndexEmbedderProvider: codebaseIndexConfig?.codebaseIndexEmbedderProvider ?? "openai",
+				codebaseIndexEmbedderBaseUrl: codebaseIndexConfig?.codebaseIndexEmbedderBaseUrl,
+				codebaseIndexEmbedderModelId: codebaseIndexConfig?.codebaseIndexEmbedderModelId ?? "",
+				codebaseIndexEmbedderModelDimension: codebaseIndexConfig?.codebaseIndexEmbedderModelDimension,
+				codebaseIndexSearchMaxResults: codebaseIndexConfig?.codebaseIndexSearchMaxResults,
+				codebaseIndexSearchMinScore: codebaseIndexConfig?.codebaseIndexSearchMinScore,
+				codebaseIndexOpenAiCompatibleBaseUrl: codebaseIndexConfig?.codebaseIndexOpenAiCompatibleBaseUrl,
+				...codebaseIndexConfig,
+				[key]: value,
+			},
+		})
+	}
+
+	return (
+		<div className="space-y-4">
+			<div className="space-y-2">
+				<h3 className="text-lg font-medium text-vscode-foreground">
+					{t("settings:general.codebaseIndexing.title")}
+				</h3>
+				<p className="text-sm text-vscode-descriptionForeground">
+					{t("settings:general.codebaseIndexing.description")}
+				</p>
+				<VSCodeCheckbox
+					checked={codebaseIndexConfig?.codebaseIndexEnabled ?? true}
+					onChange={(e: any) => updateSetting("codebaseIndexEnabled", e.target.checked)}>
+					{t("settings:general.codebaseIndexing.enabled")}
+				</VSCodeCheckbox>
+			</div>
+		</div>
+	)
+}

webview-ui/src/components/settings/SettingsView.tsx

@@ -54,6 +54,7 @@ import { SetCachedStateField, SetExperimentEnabled } from "./types"
 import { SectionHeader } from "./SectionHeader"
 import ApiConfigManager from "./ApiConfigManager"
 import ApiOptions from "./ApiOptions"
+import { GeneralSettings } from "./GeneralSettings"
 import { AutoApproveSettings } from "./AutoApproveSettings"
 import { BrowserSettings } from "./BrowserSettings"
 import { CheckpointSettings } from "./CheckpointSettings"
@@ -79,6 +80,7 @@ export interface SettingsViewRef {
 }
 
 const sectionNames = [
+	"general",
 	"providers",
 	"autoApprove",
 	"browser",
@@ -392,6 +394,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 
 	const sections: { id: SectionName; icon: LucideIcon }[] = useMemo(
 		() => [
+			{ id: "general", icon: SquareMousePointer },
 			{ id: "providers", icon: Webhook },
 			{ id: "autoApprove", icon: CheckCheck },
 			{ id: "browser", icon: SquareMousePointer },
@@ -539,6 +542,9 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 
 				{/* Content area */}
 				<TabContent className="p-0 flex-1 overflow-auto">
+					{/* General Section */}
+					{activeTab === "general" && <GeneralSettings />}
+
 					{/* Providers Section */}
 					{activeTab === "providers" && (
 						<div>

webview-ui/src/i18n/locales/en/settings.json

@@ -21,6 +21,7 @@
 		"discardButton": "Discard changes"
 	},
 	"sections": {
+		"general": "General",
 		"providers": "Providers",
 		"autoApprove": "Auto-Approve",
 		"browser": "Browser",
@@ -33,6 +34,13 @@
 		"language": "Language",
 		"about": "About Roo Code"
 	},
+	"general": {
+		"description": "Configure general application settings and features.",
+		"codebaseIndexing": {
+			"title": "Codebase Indexing",
+			"description": "Enable semantic search of your project codebase for improved context understanding and code assistance."
+		}
+	},
 	"prompts": {
 		"description": "Configure support prompts that are used for quick actions like enhancing prompts, explaining code, and fixing issues. These prompts help Roo provide better assistance for common development tasks."
 	},