Move notification toggle to auto-approve menu

- Remove "Configure notification settings" link and move the toggle directly into the auto-approve menu
- Remove notification setting from General Settings since it now lives in auto-approve menu
- Remove hover:opacity-80 from icon button variant to prevent dimming on hover
- Make docs link font size inherit and separator line thinner

.changeset/hip-boxes-sin.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+removing tooltips from auto approve menu

webview-ui/src/components/chat/auto-approve-menu/AutoApproveMenuItem.tsx

@@ -1,7 +1,6 @@
 import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
 import styled from "styled-components"
 import { Button } from "@/components/ui/button"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { cn } from "@/lib/utils"
 import { ActionMetadata } from "./types"
 
@@ -42,22 +41,17 @@ const AutoApproveMenuItem = ({ action, isChecked, onToggle, showIcon = true, dis
 	const content = (
 		<div className="w-full" style={{ opacity: disabled ? 0.5 : 1 }}>
 			<ActionButtonContainer className="w-full">
-				<Tooltip>
-					<TooltipContent showArrow={false}>{action.description}</TooltipContent>
-					<TooltipTrigger asChild>
-						<Button
-							className={cn("w-full flex text-sm items-center justify-start text-foreground gap-2")}
-							disabled={disabled}
-							onClick={(e) => onChange(e as unknown as Event)}
-							size="icon"
-							style={{ cursor: disabled ? "not-allowed" : "pointer" }}
-							variant="icon">
-							<VSCodeCheckbox checked={checked} disabled={disabled} />
-							{showIcon && <span className={`codicon ${action.icon} icon`}></span>}
-							<span className="label">{action.label}</span>
-						</Button>
-					</TooltipTrigger>
-				</Tooltip>
+				<Button
+					className={cn("w-full flex text-sm items-center justify-start text-foreground gap-2")}
+					disabled={disabled}
+					onClick={(e) => onChange(e as unknown as Event)}
+					size="icon"
+					style={{ cursor: disabled ? "not-allowed" : "pointer" }}
+					variant="icon">
+					<VSCodeCheckbox checked={checked} disabled={disabled} />
+					{showIcon && <span className={`codicon ${action.icon} icon`}></span>}
+					<span className="label">{action.label}</span>
+				</Button>
 			</ActionButtonContainer>
 			{action.subAction && (
 				<SubOptionAnimateIn show={checked}>

webview-ui/src/components/chat/auto-approve-menu/AutoApproveModal.tsx

@@ -1,9 +1,11 @@
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
 import React, { useEffect, useRef, useState } from "react"
 import { useClickAway } from "react-use"
 import { useExtensionState } from "@/context/ExtensionStateContext"
 import { useAutoApproveActions } from "@/hooks/useAutoApproveActions"
-import { getAsVar, VSC_TITLEBAR_INACTIVE_FOREGROUND } from "@/utils/vscStyles"
+import { getAsVar, VSC_DESCRIPTION_FOREGROUND, VSC_TITLEBAR_INACTIVE_FOREGROUND } from "@/utils/vscStyles"
 import AutoApproveMenuItem from "./AutoApproveMenuItem"
+import { updateAutoApproveSettings } from "./AutoApproveSettingsAPI"
 import { ActionMetadata } from "./types"
 
 const breakpoint = 500
@@ -16,15 +18,8 @@ interface AutoApproveModalProps {
 }
 
 const AutoApproveModal: React.FC<AutoApproveModalProps> = ({ isVisible, setIsVisible, buttonRef, ACTION_METADATA }) => {
-	const { navigateToSettings } = useExtensionState()
+	const { autoApprovalSettings } = useExtensionState()
 	const { isChecked, updateAction } = useAutoApproveActions()
-
-	const handleNotificationsLinkClick = (e: React.MouseEvent) => {
-		e.preventDefault()
-		e.stopPropagation()
-		navigateToSettings("general")
-	}
-
 	const modalRef = useRef<HTMLDivElement>(null)
 	const itemsContainerRef = useRef<HTMLDivElement>(null)
 	const [containerWidth, setContainerWidth] = useState(0)
@@ -78,12 +73,14 @@ const AutoApproveModal: React.FC<AutoApproveModalProps> = ({ isVisible, setIsVis
 				}}>
 				<div className="mb-2.5 text-muted-foreground text-xs cursor-pointer" onClick={() => setIsVisible(false)}>
 					Let Cline take these actions without asking for approval.{" "}
-					<span
-						className="underline cursor-pointer hover:text-foreground"
-						onClick={handleNotificationsLinkClick}
-						style={{ textDecoration: "underline" }}>
-						Configure notification settings
-					</span>
+					<a
+						className="text-link hover:text-link-hover"
+						href="https://docs.cline.bot/features/auto-approve#auto-approve"
+						rel="noopener"
+						style={{ fontSize: "inherit" }}
+						target="_blank">
+						Docs
+					</a>
 				</div>
 
 				<div
@@ -109,6 +106,32 @@ const AutoApproveModal: React.FC<AutoApproveModalProps> = ({ isVisible, setIsVis
 						<AutoApproveMenuItem action={action} isChecked={isChecked} key={action.id} onToggle={updateAction} />
 					))}
 				</div>
+
+				{/* Separator line */}
+				<div
+					style={{
+						height: "0.5px",
+						background: getAsVar(VSC_DESCRIPTION_FOREGROUND),
+						opacity: 0.1,
+						margin: "8px 0",
+					}}
+				/>
+
+				{/* Notifications toggle */}
+				<div className="flex items-center gap-2">
+					<VSCodeCheckbox
+						checked={autoApprovalSettings.enableNotifications}
+						onChange={async (e: any) => {
+							const checked = e.target.checked === true
+							await updateAutoApproveSettings({
+								...autoApprovalSettings,
+								version: (autoApprovalSettings.version ?? 1) + 1,
+								enableNotifications: checked,
+							})
+						}}>
+						<span className="text-sm">Enable notifications</span>
+					</VSCodeCheckbox>
+				</div>
 			</div>
 		</div>
 	)

webview-ui/src/components/chat/auto-approve-menu/constants.ts

@@ -5,13 +5,11 @@ export const ACTION_METADATA: ActionMetadata[] = [
 		id: "readFiles",
 		label: "Read project files",
 		shortName: "Read",
-		description: "Allows Cline to read files within your workspace.",
 		icon: "codicon-search",
 		subAction: {
 			id: "readFilesExternally",
 			label: "Read all files",
 			shortName: "Read (all)",
-			description: "Allows Cline to read any file on your computer.",
 			icon: "codicon-folder-opened",
 			parentActionId: "readFiles",
 		},
@@ -20,13 +18,11 @@ export const ACTION_METADATA: ActionMetadata[] = [
 		id: "editFiles",
 		label: "Edit project files",
 		shortName: "Edit",
-		description: "Allows Cline to modify files within your workspace.",
 		icon: "codicon-edit",
 		subAction: {
 			id: "editFilesExternally",
 			label: "Edit all files",
 			shortName: "Edit (all)",
-			description: "Allows Cline to modify any file on your computer.",
 			icon: "codicon-files",
 			parentActionId: "editFiles",
 		},
@@ -35,14 +31,11 @@ export const ACTION_METADATA: ActionMetadata[] = [
 		id: "executeSafeCommands",
 		label: "Execute safe commands",
 		shortName: "Safe Commands",
-		description:
-			"Allows Cline to execute safe terminal commands. If the model determines a command is potentially destructive, it will still require approval.",
 		icon: "codicon-terminal",
 		subAction: {
 			id: "executeAllCommands",
 			label: "Execute all commands",
 			shortName: "All Commands",
-			description: "Allows Cline to execute all terminal commands. Use at your own risk.",
 			icon: "codicon-terminal-bash",
 			parentActionId: "executeSafeCommands",
 		},
@@ -51,14 +44,12 @@ export const ACTION_METADATA: ActionMetadata[] = [
 		id: "useBrowser",
 		label: "Use the browser",
 		shortName: "Browser",
-		description: "Allows Cline to launch and interact with any website in a browser.",
 		icon: "codicon-globe",
 	},
 	{
 		id: "useMcp",
 		label: "Use MCP servers",
 		shortName: "MCP",
-		description: "Allows Cline to use configured MCP servers which may modify filesystem or interact with APIs.",
 		icon: "codicon-server",
 	},
 ]
@@ -67,6 +58,5 @@ export const NOTIFICATIONS_SETTING: ActionMetadata = {
 	id: "enableNotifications",
 	label: "Enable notifications",
 	shortName: "Notifications",
-	description: "Receive system notifications when Cline requires approval to proceed or when a task is completed.",
 	icon: "codicon-bell",
 }

webview-ui/src/components/chat/auto-approve-menu/types.ts

@@ -4,7 +4,6 @@ export interface ActionMetadata {
 	id: keyof AutoApprovalSettings["actions"] | "enableNotifications"
 	label: string
 	shortName: string
-	description: string
 	icon: string
 	subAction?: ActionMetadata
 	sub?: boolean

webview-ui/src/components/settings/sections/GeneralSettingsSection.tsx

@@ -1,5 +1,4 @@
 import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
-import { updateAutoApproveSettings } from "@/components/chat/auto-approve-menu/AutoApproveSettingsAPI"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { useExtensionState } from "@/context/ExtensionStateContext"
 import PreferredLanguageSetting from "../PreferredLanguageSetting"
@@ -11,7 +10,7 @@ interface GeneralSettingsSectionProps {
 }
 
 const GeneralSettingsSection = ({ renderSectionHeader }: GeneralSettingsSectionProps) => {
-	const { telemetrySetting, remoteConfigSettings, autoApprovalSettings } = useExtensionState()
+	const { telemetrySetting, remoteConfigSettings } = useExtensionState()
 
 	return (
 		<div>
@@ -19,25 +18,6 @@ const GeneralSettingsSection = ({ renderSectionHeader }: GeneralSettingsSectionP
 			<Section>
 				<PreferredLanguageSetting />
 
-				<div className="mb-[5px]" id="enable-notifications">
-					<VSCodeCheckbox
-						checked={autoApprovalSettings.enableNotifications}
-						onChange={async (e: any) => {
-							const checked = e.target.checked === true
-							await updateAutoApproveSettings({
-								...autoApprovalSettings,
-								version: (autoApprovalSettings.version ?? 1) + 1,
-								enableNotifications: checked,
-							})
-						}}>
-						Enable notifications
-					</VSCodeCheckbox>
-
-					<p className="text-sm mt-[5px] text-description">
-						Receive system notifications when Cline requires approval to proceed or when a task is completed.
-					</p>
-				</div>
-
 				<div className="mb-[5px]">
 					<Tooltip>
 						<TooltipContent hidden={remoteConfigSettings?.telemetrySetting === undefined}>

webview-ui/src/components/ui/button.tsx

@@ -17,7 +17,7 @@ const buttonVariants = cva(
 				ghost: "hover:bg-accent/10",
 				link: "text-link underline-offset-4 hover:underline p-0 m-0",
 				text: "text-foreground",
-				icon: "hover:opacity-80 p-0 m-0 border-0 cursor-pointer hover:shadow-none focus:ring-0 focus:ring-offset-0",
+				icon: "p-0 m-0 border-0 cursor-pointer hover:shadow-none focus:ring-0 focus:ring-offset-0",
 			},
 			size: {
 				default: "py-1.5 px-4 [&_svg]:size-3",