[98] add a visual indicator of a successful copy

Author: Mateusz-Dobrzynski

package-lock.json

@@ -14,20 +14,21 @@
     "@types/jest": "^29.5.12",
     "flag-icons": "^7.2.2",
     "jest": "^29.7.0",
-    "jsdom": "24.1.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "24.1.0",
     "next": "^14.1.0",
     "react": "^18",
     "react-dom": "^18",
     "react-use": "^17.5.0",
+    "sonner": "^1.5.0",
     "ts-jest": "^29.1.4",
     "ts-node": "^10.9.2",
     "use-sound": "^4.0.1"
   },
   "devDependencies": {
+    "@playwright/test": "^1.45.1",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^16.0.0",
-    "@playwright/test": "^1.45.1",
     "@types/node": "^20",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

package.json

@@ -11,12 +11,14 @@ import { MotionDisplay } from "./MotionDisplay";
 import { MotionsFilter } from "./MotionsFilter";
 import { useLang } from "@/lib/useLang";
 import { IconCopy } from "./icons/Copy";
+import { toast, Toaster } from "sonner";
 
 const MotionGenerator = () => {
   const [motion, setMotion] = useState<motion | null>(null);
   const debateContext = useContext(DebateContext);
   const router = useRouter();
   const infoslideLabel = useLang("infoslide");
+  const successfulCopyMessage = useLang("motionCopiedSuccess");
 
   function generateMotion(): motion {
     const filteredMotions = motions.filter((motion) => {
@@ -39,7 +41,7 @@ const MotionGenerator = () => {
     navigator.clipboard.writeText(
       `${motion.motion}\n${infoslideLine}${sourceLine}`
     );
-    displayMotionCopiedMessage();
+    toast.success(successfulCopyMessage);
   }
 
   function saveMotionToContext(): void {
@@ -64,17 +66,9 @@ const MotionGenerator = () => {
     setEnabledMotionTypes(newState as any);
   };
 
-  const [motionCopiedRecently, setMotionCopiedRecently] = useState(false);
-
-  function displayMotionCopiedMessage() {
-    setMotionCopiedRecently(true);
-    setTimeout(() => {
-      setMotionCopiedRecently(false);
-    }, 1000);
-  }
-
   return (
     <div className="flex flex-col items-center text-center">
+      <Toaster richColors position="bottom-center" />
       <section className="hidden xl:flex flex-col space-y-2 max-w-[400px]">
         <GenericButton
           text={useLang("debateMotionGeneratorRegenerate")}