Move modes view into settings and update related routing logic

Co-authored-by: matt <matt@roocode.com>

webview-ui/src/App.tsx

@@ -16,19 +16,18 @@ import SettingsView, { SettingsViewRef } from "./components/settings/SettingsVie
 import WelcomeView from "./components/welcome/WelcomeView"
 import McpView from "./components/mcp/McpView"
 import { MarketplaceView } from "./components/marketplace/MarketplaceView"
-import ModesView from "./components/modes/ModesView"
 import { HumanRelayDialog } from "./components/human-relay/HumanRelayDialog"
 import { AccountView } from "./components/account/AccountView"
 import { useAddNonInteractiveClickListener } from "./components/ui/hooks/useNonInteractiveClick"
 import { TooltipProvider } from "./components/ui/tooltip"
 import { STANDARD_TOOLTIP_DELAY } from "./components/ui/standard-tooltip"
 
-type Tab = "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "account"
+type Tab = "settings" | "history" | "mcp" | "chat" | "marketplace" | "account"
 
 const tabsByMessageAction: Partial<Record<NonNullable<ExtensionMessage["action"]>, Tab>> = {
 	chatButtonClicked: "chat",
 	settingsButtonClicked: "settings",
-	promptsButtonClicked: "modes",
+	promptsButtonClicked: "settings",
 	mcpButtonClicked: "mcp",
 	historyButtonClicked: "history",
 	marketplaceButtonClicked: "marketplace",
@@ -105,9 +104,14 @@ const App = () => {
 				} else {
 					// Handle other actions using the mapping
 					const newTab = tabsByMessageAction[message.action]
-					const section = message.values?.section as string | undefined
+					let section = message.values?.section as string | undefined
 					const marketplaceTab = message.values?.marketplaceTab as string | undefined
 
+					// Special handling for promptsButtonClicked - redirect to modes section in settings
+					if (message.action === "promptsButtonClicked") {
+						section = "modes"
+					}
+
 					if (newTab) {
 						switchTab(newTab)
 						setCurrentSection(section)
@@ -172,7 +176,6 @@ const App = () => {
 		<WelcomeView />
 	) : (
 		<>
-			{tab === "modes" && <ModesView onDone={() => switchTab("chat")} />}
 			{tab === "mcp" && <McpView onDone={() => switchTab("chat")} />}
 			{tab === "history" && <HistoryView onDone={() => switchTab("chat")} />}
 			{tab === "settings" && (

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

@@ -22,6 +22,7 @@ import {
 	Globe,
 	Info,
 	MessageSquare,
+	Bot,
 	LucideIcon,
 } from "lucide-react"
 
@@ -65,6 +66,7 @@ import { LanguageSettings } from "./LanguageSettings"
 import { About } from "./About"
 import { Section } from "./Section"
 import PromptsSettings from "./PromptsSettings"
+import ModesView from "../modes/ModesView"
 import { cn } from "@/lib/utils"
 
 export const settingsTabsContainer = "flex flex-1 overflow-hidden [&.narrow_.tab-label]:hidden"
@@ -86,6 +88,7 @@ const sectionNames = [
 	"notifications",
 	"contextManagement",
 	"terminal",
+	"modes",
 	"prompts",
 	"experimental",
 	"language",
@@ -394,6 +397,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			{ id: "notifications", icon: Bell },
 			{ id: "contextManagement", icon: Database },
 			{ id: "terminal", icon: SquareTerminal },
+			{ id: "modes", icon: Bot },
 			{ id: "prompts", icon: MessageSquare },
 			{ id: "experimental", icon: FlaskConical },
 			{ id: "language", icon: Globe },
@@ -670,6 +674,22 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 						/>
 					)}
 
+					{/* Modes Section */}
+					{activeTab === "modes" && (
+						<div>
+							<SectionHeader>
+								<div className="flex items-center gap-2">
+									<Bot className="w-4" />
+									<div>{t("settings:sections.modes")}</div>
+								</div>
+							</SectionHeader>
+
+							<Section>
+								<ModesView onDone={() => {}} />
+							</Section>
+						</div>
+					)}
+
 					{/* Prompts Section */}
 					{activeTab === "prompts" && (
 						<PromptsSettings

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

@@ -28,6 +28,7 @@
 		"notifications": "Benachrichtigungen",
 		"contextManagement": "Kontext",
 		"terminal": "Terminal",
+		"modes": "Modi",
 		"prompts": "Eingabeaufforderungen",
 		"experimental": "Experimentell",
 		"language": "Sprache",

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

@@ -28,6 +28,7 @@
 		"notifications": "Notifications",
 		"contextManagement": "Context",
 		"terminal": "Terminal",
+		"modes": "Modes",
 		"prompts": "Prompts",
 		"experimental": "Experimental",
 		"language": "Language",

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

@@ -28,6 +28,7 @@
 		"notifications": "Notificaciones",
 		"contextManagement": "Contexto",
 		"terminal": "Terminal",
+		"modes": "Modos",
 		"prompts": "Indicaciones",
 		"experimental": "Experimental",
 		"language": "Idioma",

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

@@ -28,6 +28,7 @@
 		"notifications": "Notifications",
 		"contextManagement": "Contexte",
 		"terminal": "Terminal",
+		"modes": "Modes",
 		"prompts": "Invites",
 		"experimental": "Expérimental",
 		"language": "Langue",

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

@@ -28,6 +28,7 @@
 		"notifications": "通知",
 		"contextManagement": "コンテキスト",
 		"terminal": "ターミナル",
+		"modes": "モード",
 		"prompts": "プロンプト",
 		"experimental": "実験的",
 		"language": "言語",

webview-ui/src/i18n/locales/zh-CN/settings.json

@@ -28,6 +28,7 @@
 		"notifications": "通知",
 		"contextManagement": "上下文",
 		"terminal": "终端",
+		"modes": "模式",
 		"prompts": "提示词",
 		"experimental": "实验性",
 		"language": "语言",