Now we can copy to clipboard the userPairingId

app/dashboard/layout.tsx

@@ -21,9 +21,10 @@ import {
   LogOut,
   ChevronDown,
   Home,
-  Key,
   TestTube,
-  User
+  User,
+  Copy,
+  CheckCircle,
 } from "@/lib/icons"
 import UserStore from "@/lib/4nk/UserStore"
 import EventBus from "@/lib/4nk/EventBus"
@@ -39,12 +40,11 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
   const [isAuthModalOpen, setIsAuthModalOpen] = useState(false)
   const [show4nkAuthModal, setShow4nkAuthModal] = useState(false)
   const [isLoading, setIsLoading] = useState(true)
-  const [isMockMode, setIsMockMode] = useState(false)
+  const [isMockMode, setIsMockMode] = useState(true)
   const [userInfo, setUserInfo] = useState<any>(null)
   const [showLogoutConfirm, setShowLogoutConfirm] = useState(false)
-  const [isPrivateKeyFlash, setIsPrivateKeyFlash] = useState(false)
+  const [isCopied, setIsCopied] = useState(false)
   const router = useRouter()
-  const pathname = usePathname()
 
   useEffect(() => {
     try {
@@ -114,20 +114,16 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
     setShowLogoutConfirm(true)
   }, []);
 
-  useEffect(() => {
+  const handleCopyToClipboard = useCallback(() => {
-    const onPrivateKeyAccess = () => {
+    if (userPairingId) {
-      setIsPrivateKeyFlash(true)
+      navigator.clipboard.writeText(userPairingId).then(() => {
-      setTimeout(() => setIsPrivateKeyFlash(false), 400)
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 2000);
+      }).catch(err => {
+        console.error('Erreur lors de la copie : ', err);
+      });
     }
-    if (typeof window !== "undefined") {
+  }, [userPairingId]);
-      window.addEventListener("private-key-access", onPrivateKeyAccess as EventListener)
-    }
-    return () => {
-      if (typeof window !== "undefined") {
-        window.removeEventListener("private-key-access", onPrivateKeyAccess as EventListener)
-      }
-    }
-  }, [])
 
   return (
     <div className="flex h-screen bg-gray-50 dark:bg-gray-900">
@@ -180,6 +176,27 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="w-56">
                   <DropdownMenuLabel>
+                    <div className="flex items-center justify-between group">
+                      <p className="text-sm font-medium truncate" title={userPairingId || ""}>
+                        {userInfo?.id}
+                      </p>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-6 w-6"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          e.preventDefault();
+                          handleCopyToClipboard();
+                        }}
+                      >
+                        {isCopied ? (
+                          <CheckCircle className="h-4 w-4 text-green-500" />
+                        ) : (
+                          <Copy className="h-4 w-4 text-gray-500 group-hover:text-gray-900 dark:group-hover:text-gray-100" />
+                        )}
+                      </Button>
+                    </div>
                     <p className="text-sm font-medium">{userInfo?.name}</p>
                     <p className="text-xs text-gray-500 dark:text-gray-400">{userInfo?.company}</p>
                   </DropdownMenuLabel>