From c96152c3baefebb5504ffe75af9b3c68e3a8176b Mon Sep 17 00:00:00 2001
From: Maks Pikov <mixelburg@users.noreply.github.com>
Date: Wed, 22 Apr 2026 22:08:11 +0000
Subject: [PATCH] fix: add "Copied!" feedback to copy-to-clipboard button

Previously, the copy-to-clipboard button showed no visual feedback
after clicking, making it unclear whether the text was actually copied.

This change adds a brief "Copied!" text that appears for 2 seconds
after clicking the copy button, replacing the clipboard icon.

Fixes #10853
---
 src/core/components/copy-to-clipboard-btn.jsx | 26 ++++++++++++++++---
 src/style/_buttons.scss                       |  7 +++++
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/core/components/copy-to-clipboard-btn.jsx b/src/core/components/copy-to-clipboard-btn.jsx
index 9c44487e2c5..87bfdc27e37 100644
--- a/src/core/components/copy-to-clipboard-btn.jsx
+++ b/src/core/components/copy-to-clipboard-btn.jsx
@@ -8,15 +8,35 @@ import PropTypes from "prop-types"
  * @constructor
  */
 export default class CopyToClipboardBtn extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { copied: false }
+    this.handleCopy = this.handleCopy.bind(this)
+  }
+
+  handleCopy() {
+    this.setState({ copied: true })
+    this._timer = setTimeout(() => {
+      this.setState({ copied: false })
+    }, 2000)
+  }
+
+  componentWillUnmount() {
+    if (this._timer) {
+      clearTimeout(this._timer)
+    }
+  }
+
   render() {
     let { getComponent } = this.props
+    const { copied } = this.state
 
     const CopyIcon = getComponent("CopyIcon")
 
     return (
-      <div className="view-line-link copy-to-clipboard" title="Copy to clipboard">
-        <CopyToClipboard text={this.props.textToCopy}>
-          <CopyIcon />
+      <div className="view-line-link copy-to-clipboard" title={copied ? "Copied!" : "Copy to clipboard"}>
+        <CopyToClipboard text={this.props.textToCopy} onCopy={this.handleCopy}>
+          {copied ? <span className="copy-to-clipboard__copied">Copied!</span> : <CopyIcon />}
         </CopyToClipboard>
       </div>
     )
diff --git a/src/style/_buttons.scss b/src/style/_buttons.scss
index 7806d17ee1d..19e9580c94b 100644
--- a/src/style/_buttons.scss
+++ b/src/style/_buttons.scss
@@ -197,3 +197,10 @@ button {
   height: 26px;
   position: unset;
 }
+
+.copy-to-clipboard__copied {
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  user-select: none;
+}