Merge pull request #881 from RooVetGit/cte/shadcn-tooltips

Add tooltips on checkpoint actions

Author: cte

webview-ui/package-lock.json

@@ -20,6 +20,7 @@
 		"@radix-ui/react-icons": "^1.3.2",
 		"@radix-ui/react-popover": "^1.1.6",
 		"@radix-ui/react-slot": "^1.1.1",
+		"@radix-ui/react-tooltip": "^1.1.8",
 		"@tailwindcss/vite": "^4.0.0",
 		"@vscode/webview-ui-toolkit": "^1.4.0",
 		"class-variance-authority": "^0.7.1",

webview-ui/package.json

@@ -3,7 +3,16 @@ import { CheckIcon, Cross2Icon } from "@radix-ui/react-icons"
 
 import { vscode } from "../../../utils/vscode"
 
-import { Button, Popover, PopoverContent, PopoverTrigger } from "@/components/ui"
+import {
+	Button,
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui"
 
 type CheckpointMenuProps = {
 	ts: number
@@ -43,19 +52,33 @@ export const CheckpointMenu = ({ ts, commitHash, currentCheckpointHash }: Checkp
 
 	return (
 		<div className="flex flex-row gap-1">
-			<Button variant="ghost" size="icon" onClick={onCheckpointDiff}>
-				<span className="codicon codicon-diff-single" />
-			</Button>
+			<TooltipProvider>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<Button variant="ghost" size="icon" onClick={onCheckpointDiff}>
+							<span className="codicon codicon-diff-single" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent align="end">View Diff</TooltipContent>
+				</Tooltip>
+			</TooltipProvider>
 			<Popover
 				open={isOpen}
 				onOpenChange={(open) => {
 					setIsOpen(open)
 					setIsConfirming(false)
 				}}>
 				<PopoverTrigger asChild>
-					<Button variant="ghost" size="icon">
-						<span className="codicon codicon-history" />
-					</Button>
+					<TooltipProvider>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button variant="ghost" size="icon">
+									<span className="codicon codicon-history" />
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent align="end">Restore Checkpoint</TooltipContent>
+						</Tooltip>
+					</TooltipProvider>
 				</PopoverTrigger>
 				<PopoverContent align="end" container={portalContainer}>
 					<div className="flex flex-col gap-2">

webview-ui/src/components/chat/checkpoints/CheckpointMenu.tsx

@@ -3,3 +3,4 @@ export * from "./command"
 export * from "./dialog"
 export * from "./dropdown-menu"
 export * from "./popover"
+export * from "./tooltip"

webview-ui/src/components/ui/index.ts

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+	React.ElementRef<typeof TooltipPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<TooltipPrimitive.Portal>
+		<TooltipPrimitive.Content
+			ref={ref}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 overflow-hidden rounded-xs bg-vscode-notifications-background border border-vscode-notifications-border px-3 py-1.5 text-xs text-vscode-notifications-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				className,
+			)}
+			{...props}
+		/>
+	</TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

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

@@ -76,6 +76,13 @@
 
 	--color-vscode-input-background: var(--vscode-input-background);
 	--color-vscode-input-border: var(--vscode-input-border);
+
+	--color-vscode-badge-foreground: var(--vscode-badge-foreground);
+	--color-vscode-badge-background: var(--vscode-badge-background);
+
+	--color-vscode-notifications-foreground: var(--vscode-notifications-foreground);
+	--color-vscode-notifications-background: var(--vscode-notifications-background);
+	--color-vscode-notifications-border: var(--vscode-notifications-border);
 }
 
 @layer base {