Prevent repeated clicking the Copy button

package.json

@@ -1,7 +1,7 @@
 {
   "name": "lindsvg-pwa",
   "private": true,
-  "version": "2.4.2",
+  "version": "2.4.3",
   "type": "module",
   "scripts": {
     "lint": "eslint \"src/**/*.{mjs,vue}\"",

src/components/PanelCollections.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {ref, computed} from "vue";
+import {ref, computed, useCssModule} from "vue";
 import {refDebounced} from "@vueuse/core";
 import {useCollectionsStore, isUserDefined, USER_DEFINED_COLLECTION_ID} from "../stores/collections.mjs";
 import {useLSystemStore} from "../stores/lSystem.mjs";
@@ -52,16 +52,15 @@ function deleteLSystem(lid) {
   collectionsStore.deleteLSystem(lid);
 }
 
+let copiedClassName = useCssModule().copied;
 async function copyPermalink(target, cid, lid) {
   let url = new URL(location.origin + location.pathname);
   url.searchParams.set("cid", cid);
   url.searchParams.set("lid", lid);
   await navigator.clipboard.writeText(url.toString());
-  target.classList.remove(interfaceStyles.iconButtonLink);
-  target.classList.add(interfaceStyles.iconButtonCheck);
+  target.classList.add(copiedClassName);
   setTimeout(() => {
-    target.classList.remove(interfaceStyles.iconButtonCheck);
-    target.classList.add(interfaceStyles.iconButtonLink);
+    target.classList.remove(copiedClassName);
   }, 2000);
 }
 </script>
@@ -235,4 +234,12 @@ async function copyPermalink(target, cid, lid) {
   .collectionItems li:not(:hover, .active) :where(.permalinkButton, .exploreButton, .deleteLSystemButton):not(:focus) {
     opacity: 0.01;
   }
+
+  .copied {
+    pointer-events: none;
+
+    &::before {
+      --mask-pos: -200px 0;
+    }
+  }
 </style>

src/components/PanelSharing.vue

@@ -178,8 +178,12 @@ async function copyLSVG({target}) {
       width: 100%;
     }
 
-    &.copied::before {
-      --mask-pos: -204px -4px;
+    &.copied {
+      pointer-events: none;
+
+      &::before {
+        --mask-pos: -204px -4px;
+      }
     }
   }