refactor(terminal): redesign profile settings UX — unified dropdown, consistent layout, and styling (#119)(#321)

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

@@ -1,15 +1,16 @@
-import { HTMLAttributes, useState, useCallback, useEffect, useId } from "react"
+import { HTMLAttributes, useState, useCallback, useEffect } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { vscode } from "@/utils/vscode"
-import { VSCodeCheckbox, VSCodeLink, VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import { Trans } from "react-i18next"
 import { buildDocLink } from "@src/utils/docLinks"
 import { useEvent, useMount } from "react-use"
+import { Terminal } from "lucide-react"
 
 import { type ExtensionMessage, type TerminalOutputPreviewSize } from "@roo-code/types"
 
 import { cn } from "@/lib/utils"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider } from "@/components/ui"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Button } from "@/components/ui"
 
 import { SetCachedStateField } from "./types"
 import { SectionHeader } from "./SectionHeader"
@@ -44,7 +45,7 @@ type TerminalSettingsProps = HTMLAttributes<HTMLDivElement> & {
 
 // Sentinel value that maps to `undefined` (use VS Code's default shell).
 // The Select component cannot accept empty-string item values.
-const DEFAULT_PROFILE_VALUE = "__default__"
+const DEFAULT_PROFILE_VALUE = "__zoo_code_follow_vscode_sentinel__"
 
 export const TerminalSettings = ({
 	terminalOutputPreviewSize,
@@ -67,10 +68,6 @@ export const TerminalSettings = ({
 	const [inheritEnv, setInheritEnv] = useState<boolean>(true)
 	const [profileNames, setProfileNames] = useState<string[]>([])
 	const [isProfilesLoaded, setIsProfilesLoaded] = useState(false)
-	const profileModeId = useId()
-	const defaultProfileId = `${profileModeId}-default`
-	const overrideProfileId = `${profileModeId}-override`
-	const isProfileOverrideSelected = !!terminalProfile && (!isProfilesLoaded || profileNames.includes(terminalProfile))
 	const isVSCodeTerminalEnabled = terminalShellIntegrationDisabled === false
 
 	useMount(() => {
@@ -166,111 +163,7 @@ export const TerminalSettings = ({
 						</div>
 					</div>
 					<div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background">
-						{/* Profile override — only applies when VS Code integrated terminal is active
-						    (shell integration enabled). Hidden in Execa/inline mode since getProfileShell()
-						    is not wired there. */}
-						{isVSCodeTerminalEnabled && (
-							<SearchableSetting
-								settingId="terminal-profile"
-								section="terminal"
-								label={t("settings:terminal.profile.label")}>
-								<label className="block font-medium mb-1">{t("settings:terminal.profile.label")}</label>
-
-								{/* Level 1: Default (recommended) */}
-								<div className="flex items-center gap-2 mb-2">
-									<input
-										type="radio"
-										id={defaultProfileId}
-										name={profileModeId}
-										checked={!isProfileOverrideSelected}
-										onChange={() => setCachedStateField("terminalProfile", undefined)}
-										data-testid="terminal-profile-default-radio"
-									/>
-									<label htmlFor={defaultProfileId} className="cursor-pointer">
-										{t("settings:terminal.profile.default")}
-									</label>
-									<VSCodeButton
-										appearance="secondary"
-										onClick={() => {
-											onTerminalProfilePickerOpened?.()
-											vscode.postMessage({ type: "openTerminalProfilePicker" })
-										}}
-										data-testid="terminal-profile-configure-button">
-										{t("settings:terminal.profile.configureButton")}
-									</VSCodeButton>
-								</div>
-
-								{/* Level 2: Override */}
-								<div className="flex items-center gap-2 mb-2">
-									<input
-										type="radio"
-										id={overrideProfileId}
-										name={profileModeId}
-										checked={isProfileOverrideSelected}
-										disabled={profileNames.length === 0}
-										onChange={() => {
-											if (!terminalProfile && profileNames.length > 0) {
-												setCachedStateField("terminalProfile", profileNames[0])
-											}
-										}}
-										data-testid="terminal-profile-override-radio"
-									/>
-									<label
-										htmlFor={overrideProfileId}
-										className={
-											profileNames.length === 0
-												? "cursor-not-allowed text-vscode-disabledForeground"
-												: "cursor-pointer"
-										}>
-										{t("settings:terminal.profile.overrideLabel")}
-									</label>
-									{profileNames.length === 0 && (
-										<span
-											className="text-vscode-descriptionForeground text-xs"
-											data-testid="terminal-profile-no-profiles-hint">
-											{t("settings:terminal.profile.noProfiles")}
-										</span>
-									)}
-								</div>
-
-								{isProfileOverrideSelected && profileNames.length > 0 && (
-									<Select
-										value={terminalProfile || DEFAULT_PROFILE_VALUE}
-										data-testid="terminal-profile-dropdown"
-										onValueChange={(value) =>
-											setCachedStateField(
-												"terminalProfile",
-												value === DEFAULT_PROFILE_VALUE ? undefined : value,
-											)
-										}>
-										<SelectTrigger className="w-full ml-6">
-											<SelectValue placeholder={t("settings:common.select")} />
-										</SelectTrigger>
-										<SelectContent>
-											{profileNames.map((name) => (
-												<SelectItem key={name} value={name}>
-													{name}
-												</SelectItem>
-											))}
-										</SelectContent>
-									</Select>
-								)}
-
-								<div className="text-vscode-descriptionForeground text-sm mt-1">
-									<Trans i18nKey="settings:terminal.profile.description">
-										<VSCodeLink
-											href={buildDocLink(
-												"features/shell-integration",
-												"settings_terminal_profile",
-											)}
-											style={{ display: "inline" }}>
-											{" "}
-										</VSCodeLink>
-									</Trans>
-								</div>
-							</SearchableSetting>
-						)}
-
+						{/* "Use Inline Terminal" checkbox — ALWAYS at the top */}
 						<SearchableSetting
 							settingId="terminal-shell-integration-disabled"
 							section="terminal"
@@ -300,6 +193,77 @@ export const TerminalSettings = ({
 
 						{isVSCodeTerminalEnabled && (
 							<>
+								{/* Profile override — unified dropdown, now below checkbox */}
+								<SearchableSetting
+									settingId="terminal-profile"
+									section="terminal"
+									label={t("settings:terminal.profile.label")}>
+									<label className="block font-medium mb-1">
+										{t("settings:terminal.profile.label")}
+									</label>
+
+									<Select
+										value={terminalProfile || DEFAULT_PROFILE_VALUE}
+										onValueChange={(value) =>
+											setCachedStateField(
+												"terminalProfile",
+												value === DEFAULT_PROFILE_VALUE ? undefined : value,
+											)
+										}
+										data-testid="terminal-profile-dropdown">
+										<SelectTrigger className="w-full">
+											<SelectValue placeholder={t("settings:common.select")} />
+										</SelectTrigger>
+										<SelectContent>
+											<SelectItem value={DEFAULT_PROFILE_VALUE}>
+												{t("settings:terminal.profile.followVscode")}
+											</SelectItem>
+											{profileNames.map((name) => (
+												<SelectItem key={name} value={name}>
+													{name}
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+
+									{!terminalProfile && (
+										<div className="mt-2 flex flex-col">
+											<Button
+												variant="secondary"
+												className="py-1"
+												onClick={() => {
+													onTerminalProfilePickerOpened?.()
+													vscode.postMessage({ type: "openTerminalProfilePicker" })
+												}}
+												data-testid="terminal-profile-configure-button">
+												<Terminal />
+												{t("settings:terminal.profile.configureButton")}
+											</Button>
+										</div>
+									)}
+
+									{isProfilesLoaded && profileNames.length === 0 && (
+										<div
+											className="text-vscode-descriptionForeground text-xs mt-1"
+											data-testid="terminal-profile-no-profiles-hint">
+											{t("settings:terminal.profile.noProfiles")}
+										</div>
+									)}
+
+									<div className="text-vscode-descriptionForeground text-sm mt-1">
+										<Trans i18nKey="settings:terminal.profile.description">
+											<VSCodeLink
+												href={buildDocLink(
+													"features/shell-integration",
+													"settings_terminal_profile",
+												)}
+												style={{ display: "inline" }}>
+												{" "}
+											</VSCodeLink>
+										</Trans>
+									</div>
+								</SearchableSetting>
+
 								<SearchableSetting
 									settingId="terminal-inherit-env"
 									section="terminal"