Feat: Vertical settings tabs (#2914)

Co-authored-by: Matt Rubens <[email protected]>

Author: dlab-anton

src/activate/registerCommands.ts

@@ -116,6 +116,8 @@ const getCommandsMap = ({ context, outputChannel, provider }: RegisterCommandOpt
 			telemetryService.captureTitleButtonClicked("settings")
 
 			visibleProvider.postMessageToWebview({ type: "action", action: "settingsButtonClicked" })
+			// Also explicitly post the visibility message to trigger scroll reliably
+			visibleProvider.postMessageToWebview({ type: "action", action: "didBecomeVisible" })
 		},
 		"roo-cline.historyButtonClicked": () => {
 			const visibleProvider = getVisibleProviderOrLog(outputChannel)
@@ -212,10 +214,26 @@ export const openClineInNewTab = async ({ context, outputChannel }: Omit<Registe
 
 	await tabProvider.resolveWebviewView(newPanel)
 
+	// Add listener for visibility changes to notify webview
+	newPanel.onDidChangeViewState(
+		(e) => {
+			const panel = e.webviewPanel
+			if (panel.visible) {
+				panel.webview.postMessage({ type: "action", action: "didBecomeVisible" }) // Use the same message type as in SettingsView.tsx
+			}
+		},
+		null, // First null is for `thisArgs`
+		context.subscriptions, // Register listener for disposal
+	)
+
 	// Handle panel closing events.
-	newPanel.onDidDispose(() => {
-		setPanel(undefined, "tab")
-	})
+	newPanel.onDidDispose(
+		() => {
+			setPanel(undefined, "tab")
+		},
+		null,
+		context.subscriptions, // Also register dispose listener
+	)
 
 	// Lock the editor group so clicking on files doesn't open them over the panel.
 	await delay(100)

webview-ui/src/components/common/Tab.tsx

@@ -1,12 +1,12 @@
-import { HTMLAttributes, useCallback } from "react"
+import React, { HTMLAttributes, useCallback, forwardRef } from "react"
 
 import { useExtensionState } from "@/context/ExtensionStateContext"
 import { cn } from "@/lib/utils"
 
 type TabProps = HTMLAttributes<HTMLDivElement>
 
 export const Tab = ({ className, children, ...props }: TabProps) => (
-	<div className={cn("fixed inset-0 flex flex-col overflow-hidden", className)} {...props}>
+	<div className={cn("fixed inset-0 flex flex-col", className)} {...props}>
 		{children}
 	</div>
 )
@@ -45,3 +45,47 @@ export const TabContent = ({ className, children, ...props }: TabProps) => {
 		</div>
 	)
 }
+
+export const TabList = forwardRef<
+	HTMLDivElement,
+	HTMLAttributes<HTMLDivElement> & {
+		value: string
+		onValueChange: (value: string) => void
+	}
+>(({ children, className, value, onValueChange, ...props }, ref) => {
+	return (
+		<div ref={ref} role="tablist" className={cn("flex", className)} {...props}>
+			{React.Children.map(children, (child) => {
+				if (React.isValidElement(child)) {
+					return React.cloneElement(child as React.ReactElement<any>, {
+						isSelected: child.props.value === value,
+						onSelect: () => onValueChange(child.props.value),
+					})
+				}
+				return child
+			})}
+		</div>
+	)
+})
+
+export const TabTrigger = forwardRef<
+	HTMLButtonElement,
+	React.ButtonHTMLAttributes<HTMLButtonElement> & {
+		value: string
+		isSelected?: boolean
+		onSelect?: () => void
+	}
+>(({ children, className, value: _value, isSelected, onSelect, ...props }, ref) => {
+	return (
+		<button
+			ref={ref}
+			role="tab"
+			aria-selected={isSelected}
+			tabIndex={isSelected ? 0 : -1}
+			className={cn("focus:outline-none focus:ring-2 focus:ring-vscode-focusBorder", className)}
+			onClick={onSelect}
+			{...props}>
+			{children}
+		</button>
+	)
+})