feat(webview-ui): add sticky modes setting to new miscellaneous section

Author: atlasgong

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

@@ -0,0 +1,47 @@
+import { HTMLAttributes } from "react"
+import { useAppTranslation } from "@/i18n/TranslationContext"
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+import { Settings } from "lucide-react"
+
+import { SetCachedStateField } from "./types"
+import { SectionHeader } from "./SectionHeader"
+import { Section } from "./Section"
+
+type MiscellaneousSettingsProps = HTMLAttributes<HTMLDivElement> & {
+	stickyModesEnabled?: boolean
+	setCachedStateField: SetCachedStateField<"stickyModesEnabled">
+}
+
+export const MiscellaneousSettings = ({
+	stickyModesEnabled,
+	setCachedStateField,
+	className,
+	...props
+}: MiscellaneousSettingsProps) => {
+	const { t } = useAppTranslation()
+
+	return (
+		<div {...props}>
+			<SectionHeader description={t("settings:miscellaneous.description")}>
+				<div className="flex items-center gap-2">
+					<Settings className="w-4" />
+					<div>{t("settings:sections.miscellaneous")}</div>
+				</div>
+			</SectionHeader>
+
+			<Section>
+				<div>
+					<VSCodeCheckbox
+						checked={stickyModesEnabled}
+						onChange={(e: any) => setCachedStateField("stickyModesEnabled", e.target.checked)}
+						data-testid="sticky-modes-enabled-checkbox">
+						<span className="font-medium">{t("settings:miscellaneous.stickyModes.label")}</span>
+					</VSCodeCheckbox>
+					<div className="text-vscode-descriptionForeground text-sm mt-1">
+						{t("settings:miscellaneous.stickyModes.description")}
+					</div>
+				</div>
+			</Section>
+		</div>
+	)
+}

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

@@ -8,6 +8,7 @@ import {
 	Bell,
 	Database,
 	SquareTerminal,
+	Settings as SettingsIcon, // renamed to avoid conflict with component name
 	FlaskConical,
 	AlertTriangle,
 	Globe,
@@ -49,6 +50,7 @@ import { CheckpointSettings } from "./CheckpointSettings"
 import { NotificationSettings } from "./NotificationSettings"
 import { ContextManagementSettings } from "./ContextManagementSettings"
 import { TerminalSettings } from "./TerminalSettings"
+import { MiscellaneousSettings } from "./MiscellaneousSettings"
 import { ExperimentalSettings } from "./ExperimentalSettings"
 import { LanguageSettings } from "./LanguageSettings"
 import { About } from "./About"
@@ -66,6 +68,7 @@ const sectionNames = [
 	"notifications",
 	"contextManagement",
 	"terminal",
+	"miscellaneous",
 	"experimental",
 	"language",
 	"about",
@@ -131,6 +134,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 		terminalZshOhMy,
 		terminalZshP10k,
 		terminalZdotdir,
+		stickyModesEnabled,
 		writeDelayMs,
 		showRooIgnoredFiles,
 		remoteBrowserEnabled,
@@ -244,6 +248,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			vscode.postMessage({ type: "terminalZshOhMy", bool: terminalZshOhMy })
 			vscode.postMessage({ type: "terminalZshP10k", bool: terminalZshP10k })
 			vscode.postMessage({ type: "terminalZdotdir", bool: terminalZdotdir })
+			vscode.postMessage({ type: "stickyModesEnabled", bool: stickyModesEnabled })
 			vscode.postMessage({ type: "mcpEnabled", bool: mcpEnabled })
 			vscode.postMessage({ type: "alwaysApproveResubmit", bool: alwaysApproveResubmit })
 			vscode.postMessage({ type: "requestDelaySeconds", value: requestDelaySeconds })
@@ -288,6 +293,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 	const notificationsRef = useRef<HTMLDivElement>(null)
 	const contextManagementRef = useRef<HTMLDivElement>(null)
 	const terminalRef = useRef<HTMLDivElement>(null)
+	const miscellaneousRef = useRef<HTMLDivElement>(null)
 	const experimentalRef = useRef<HTMLDivElement>(null)
 	const languageRef = useRef<HTMLDivElement>(null)
 	const aboutRef = useRef<HTMLDivElement>(null)
@@ -301,6 +307,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			{ id: "notifications", icon: Bell, ref: notificationsRef },
 			{ id: "contextManagement", icon: Database, ref: contextManagementRef },
 			{ id: "terminal", icon: SquareTerminal, ref: terminalRef },
+			{ id: "miscellaneous", icon: SettingsIcon, ref: miscellaneousRef },
 			{ id: "experimental", icon: FlaskConical, ref: experimentalRef },
 			{ id: "language", icon: Globe, ref: languageRef },
 			{ id: "about", icon: Info, ref: aboutRef },
@@ -313,6 +320,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			notificationsRef,
 			contextManagementRef,
 			terminalRef,
+			miscellaneousRef,
 			experimentalRef,
 		],
 	)
@@ -494,6 +502,13 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 					/>
 				</div>
 
+				<div ref={miscellaneousRef}>
+					<MiscellaneousSettings
+						stickyModesEnabled={stickyModesEnabled}
+						setCachedStateField={setCachedStateField}
+					/>
+				</div>
+
 				<div ref={experimentalRef}>
 					<ExperimentalSettings
 						setCachedStateField={setCachedStateField}

webview-ui/src/context/ExtensionStateContext.tsx

@@ -87,6 +87,8 @@ export interface ExtensionStateContextType extends ExtensionState {
 	pinnedApiConfigs?: Record<string, boolean>
 	setPinnedApiConfigs: (value: Record<string, boolean>) => void
 	togglePinnedApiConfig: (configName: string) => void
+	stickyModesEnabled: boolean
+	setStickyModesEnabled: (value: boolean) => void
 }
 
 export const ExtensionStateContext = createContext<ExtensionStateContextType | undefined>(undefined)
@@ -163,6 +165,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		terminalZshOhMy: false, // Default Oh My Zsh integration setting
 		terminalZshP10k: false, // Default Powerlevel10k integration setting
 		terminalZdotdir: false, // Default ZDOTDIR handling setting
+		stickyModesEnabled: true, // Default sticky modes to enabled
 	})
 
 	const [didHydrateState, setDidHydrateState] = useState(false)
@@ -331,6 +334,8 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 
 				return { ...prevState, pinnedApiConfigs: newPinned }
 			}),
+		stickyModesEnabled: state.stickyModesEnabled ?? true,
+		setStickyModesEnabled: (value) => setState((prevState) => ({ ...prevState, stickyModesEnabled: value })),
 	}
 
 	return <ExtensionStateContext.Provider value={contextValue}>{children}</ExtensionStateContext.Provider>