add toggleable icons for the clipboard component

app/javascript/application.js

@@ -47,7 +47,3 @@ window.customElements.define('template-builder', class extends HTMLElement {
     this.appElem?.remove()
   }
 })
-
-document.addEventListener('clipboard-copy', function (event) {
-  console.log('Copied to clipboard') // TODO: Add a toast message
-})

app/javascript/elements/clipboard_copy.js

@@ -99,9 +99,16 @@ async function copy (button) {
     button.dispatchEvent(new CustomEvent('clipboard-copy', { bubbles: true }))
   }
 
+  function toggleActiveIcon () {
+    if (button.classList.contains('swap')) {
+      button.classList.toggle('swap-active')
+    }
+  }
+
   if (text) {
     await copyText(text)
     trigger()
+    toggleActiveIcon()
   } else if (id) {
     const root = 'getRootNode' in Element.prototype ? button.getRootNode() : button.ownerDocument
 
@@ -112,6 +119,7 @@ async function copy (button) {
     if (node) {
       await copyTarget(node)
       trigger()
+      toggleActiveIcon()
     }
   }
 }