feat(navigation): add a copy current url button to navbar for ease of sharing

frontend/app/components/NavigationRail/NavigationRail.jsx

@@ -5,8 +5,10 @@ import Link from "next/link";
 import Image from "next/image";
 import { useUserStore } from "@/app/store/user-store";
 import { useRouter } from "next/navigation";
+import useCopyToClipboard from "@/app/hooks/useCopyToClipboard";
 
 export const NavigationRail = (props) => {
+  const [isCopied, copyToClipboard] = useCopyToClipboard();
   const pathname = usePathname();
   const userStore = useUserStore();
   const router = useRouter();
@@ -98,6 +100,14 @@ export const NavigationRail = (props) => {
       )}
 
       <span className="max"></span>
+
+      <button className="circle transparent" onClick={() => copyToClipboard()}>
+        <i>{isCopied ? "done" : "content_copy"}</i>
+        <div class="tooltip right">
+          {isCopied ? "Ссылка скопирована" : "Скопировать ссылку"}
+        </div>
+      </button>
+
       <button
         className="circle transparent"
         onClick={() => props.setSettingsPopup(!props.settingsPopup)}

frontend/app/hooks/useCopyToClipboard.js

@@ -0,0 +1,46 @@
+// hooks/useCopyToClipboard.js
+
+import { useState, useEffect } from "react";
+
+function useCopyToClipboard() {
+  const [isCopied, setIsCopied] = useState(false);
+
+  useEffect(() => {
+    if (isCopied) {
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2500);
+    }
+  }, [isCopied]);
+
+  async function copyToClipboard(text) {
+    if (!navigator.clipboard) {
+      // Clipboard API not supported
+      try {
+        // Fallback for older browsers (like Firefox before v49)
+        const input = document.createElement("input");
+        document.body.appendChild(input);
+        input.setAttribute("value", window.location.href);
+        input.select();
+        document.execCommand("copy");
+        document.body.removeChild(input);
+        setIsCopied(true);
+      } catch (err) {
+        console.error("Failed to copy text: ", err);
+        setIsCopied(false);
+      }
+    } else {
+      try {
+        await navigator.clipboard.writeText(window.location.href);
+        setIsCopied(true);
+      } catch (err) {
+        console.error("Failed to copy text: ", err);
+        setIsCopied(false);
+      }
+    }
+  }
+
+  return [isCopied, copyToClipboard];
+}
+
+export default useCopyToClipboard;