UI Tweak: Fade buttons on history preview (homescreen) if no interaction in progress. (#3523)

Fade buttons on history preview unless mouseover.

webview-ui/src/components/history/CopyButton.tsx

@@ -7,9 +7,10 @@ import { useAppTranslation } from "@/i18n/TranslationContext"
 
 type CopyButtonProps = {
 	itemTask: string
+	className?: string
 }
 
-export const CopyButton = ({ itemTask }: CopyButtonProps) => {
+export const CopyButton = ({ itemTask, className }: CopyButtonProps) => {
 	const { isCopied, copy } = useClipboard()
 	const { t } = useAppTranslation()
 
@@ -34,7 +35,7 @@ export const CopyButton = ({ itemTask }: CopyButtonProps) => {
 			title={t("history:copyPrompt")}
 			onClick={onCopy}
 			data-testid="copy-prompt-button"
-			className="opacity-50 hover:opacity-100">
+			className={cn("opacity-50 hover:opacity-100", className)}>
 			<span className={cn("codicon scale-80", { "codicon-check": isCopied, "codicon-copy": !isCopied })} />
 		</Button>
 	)

webview-ui/src/components/history/TaskItem.tsx

@@ -50,7 +50,7 @@ const TaskItem = ({
 				"cursor-pointer",
 				{
 					// Compact variant styling
-					"bg-vscode-editor-background rounded relative overflow-hidden border border-vscode-toolbar-hoverBackground/30 hover:border-vscode-toolbar-hoverBackground/60":
+					"group bg-vscode-editor-background rounded relative overflow-hidden border border-vscode-toolbar-hoverBackground/30 hover:border-vscode-toolbar-hoverBackground/60":
 						isCompact,
 					// Full variant styling
 					"bg-vscode-list-activeSelectionBackground": !isCompact && isSelectionMode && isSelected,

webview-ui/src/components/history/TaskItemHeader.tsx

@@ -43,7 +43,7 @@ const TaskItemHeader: React.FC<TaskItemHeaderProps> = ({ item, variant, isSelect
 
 			{/* Action Buttons */}
 			{!isSelectionMode && (
-				<div className="flex flex-row gap-0 items-center opacity-50 hover:opacity-100">
+				<div className="flex flex-row gap-0 items-center opacity-20 group-hover:opacity-50 hover:opacity-100">
 					{isCompact ? (
 						<CopyButton itemTask={item.task} />
 					) : (