fix: improve lock icon visibility in API config popover (#12237)

- Replace subtle IconButton with a visible Button + text label ("Locked"/"Unlocked")
- Use text-vscode-descriptionForeground instead of opacity-60 for unlocked state
- Add StandardTooltip explaining the lock function on hover
- Ensure cursor:pointer is always present
- Add i18n keys for "locked"/"unlocked" labels in all 18 locales
- Update tests to match new styling classes

Author: roomote

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

@@ -232,16 +232,39 @@ export const ApiConfigSelector = ({
 								onClick={handleEditClick}
 								tooltip={false}
 							/>
-							<IconButton
-								iconClass={lockApiConfigAcrossModes ? "codicon-lock" : "codicon-unlock"}
-								title={
+							<StandardTooltip
+								content={
 									lockApiConfigAcrossModes
 										? t("chat:unlockApiConfigAcrossModes")
 										: t("chat:lockApiConfigAcrossModes")
-								}
-								className={lockApiConfigAcrossModes ? "text-vscode-focusBorder" : "opacity-60"}
-								onClick={onToggleLockApiConfig}
-							/>
+								}>
+								<Button
+									aria-label={
+										lockApiConfigAcrossModes
+											? t("chat:unlockApiConfigAcrossModes")
+											: t("chat:lockApiConfigAcrossModes")
+									}
+									className={cn(
+										"inline-flex items-center gap-1 px-1.5 py-1 h-7 rounded-md text-xs",
+										"bg-transparent border-none cursor-pointer",
+										"transition-all duration-150",
+										"hover:bg-[rgba(255,255,255,0.06)]",
+										"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
+										lockApiConfigAcrossModes
+											? "text-vscode-focusBorder opacity-100"
+											: "text-vscode-descriptionForeground opacity-90 hover:opacity-100",
+									)}
+									onClick={onToggleLockApiConfig}>
+									<span
+										className={cn(
+											"codicon",
+											lockApiConfigAcrossModes ? "codicon-lock" : "codicon-unlock",
+										)}
+										style={{ fontSize: 14 }}
+									/>
+									<span>{lockApiConfigAcrossModes ? t("chat:locked") : t("chat:unlocked")}</span>
+								</Button>
+							</StandardTooltip>
 						</div>
 
 						{/* Info icon and title on the right with matching spacing */}

webview-ui/src/components/chat/__tests__/ChatTextArea.lockApiConfig.spec.tsx

@@ -78,8 +78,8 @@ describe("ChatTextArea - lockApiConfigAcrossModes toggle", () => {
 
 			const button = openPopoverAndGetLockToggle("chat:lockApiConfigAcrossModes")
 			expect(button).toBeInTheDocument()
-			// Unlocked state has muted opacity
-			expect(button.className).toContain("opacity-60")
+			// Unlocked state has visible but muted style
+			expect(button.className).toContain("text-vscode-descriptionForeground")
 			expect(button.className).not.toContain("text-vscode-focusBorder")
 		})
 
@@ -95,7 +95,7 @@ describe("ChatTextArea - lockApiConfigAcrossModes toggle", () => {
 			expect(button).toBeInTheDocument()
 			// Locked state has the focus border highlight color
 			expect(button.className).toContain("text-vscode-focusBorder")
-			expect(button.className).not.toContain("opacity-60")
+			expect(button.className).not.toContain("text-vscode-descriptionForeground")
 		})
 
 		it("renders in unlocked state when lockApiConfigAcrossModes is undefined (default)", () => {
@@ -108,7 +108,7 @@ describe("ChatTextArea - lockApiConfigAcrossModes toggle", () => {
 			const button = openPopoverAndGetLockToggle("chat:lockApiConfigAcrossModes")
 			expect(button).toBeInTheDocument()
 			// Default (undefined/falsy) renders in unlocked style
-			expect(button.className).toContain("opacity-60")
+			expect(button.className).toContain("text-vscode-descriptionForeground")
 		})
 	})
 

webview-ui/src/i18n/locales/ca/chat.json

@@ -493,5 +493,7 @@
 		"title": "Provider no longer supported",
 		"message": "Sorry, this provider is no longer supported. We saw very few Roo users actually using it and we need to reduce the surface area of our codebase so we can keep shipping fast and serving our community well in this space. It was a really hard decision but it lets us focus on what matters most to you. It sucks, we know.",
 		"openSettings": "Open Settings"
-	}
+	},
+	"locked": "Locked",
+	"unlocked": "Unlocked"
 }