feat: add copy project id

docs/cli/faq.mdx

@@ -23,3 +23,12 @@ Yes. If you have previously retrieved secrets for a specific project and environ
 <Accordion title="Can I upload the .infisical.json file that was generated?">
 Yes. This is simply a configuration file and contains no sensitive data.
 </Accordion>
+
+<Accordion title="Where can I find my Project ID?">
+
+  Visit the Infisical website and navigate to a project of your choice. Once on the project page, access the **Project Settings** from the sidebar. Within the Project name section, click the "Copy Project ID" button for copying the current Project ID to clipboard, or simply obtain it from the URL of the current page.
+  
+  ```
+    https://app.infisical.com/project/<your_project_id>/settings
+  ```
+</Accordion>

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx

@@ -1,5 +1,7 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
@@ -7,6 +9,7 @@ import { useNotificationContext } from "@app/components/context/Notifications/No
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, FormControl, Input } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useToggle } from "@app/hooks";
 import { useRenameWorkspace } from "@app/hooks/api";
 
 const formSchema = yup.object({
@@ -19,6 +22,7 @@ export const ProjectNameChangeSection = () => {
   const { createNotification } = useNotificationContext();
   const { currentWorkspace } = useWorkspace();
   const { mutateAsync, isLoading } = useRenameWorkspace();
+  const [isProjectIdCopied, setIsProjectIdCopied] = useToggle(false);
 
   const { handleSubmit, control, reset } = useForm<FormData>({ resolver: yupResolver(formSchema) });
 
@@ -30,6 +34,16 @@ export const ProjectNameChangeSection = () => {
     }
   }, [currentWorkspace]);
 
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+
+    if (isProjectIdCopied) {
+      timer = setTimeout(() => setIsProjectIdCopied.off(), 2000);
+    }
+
+    return () => clearTimeout(timer);
+}, [setIsProjectIdCopied]);
+
   const onFormSubmit = async ({ name }: FormData) => {
     try {
       if (!currentWorkspace?.id) return;
@@ -52,12 +66,38 @@ export const ProjectNameChangeSection = () => {
     }
   };
 
+  const copyProjectIdToClipboard = () => {
+    navigator.clipboard.writeText(currentWorkspace?._id || "");
+    setIsProjectIdCopied.on();
+
+    createNotification({
+      text: "Copied Project ID to clipboard",
+      type: "success"
+    });
+  }
+
   return (
     <form
       onSubmit={handleSubmit(onFormSubmit)}
       className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
     >
-      <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Project Name</h2>
+      <div className="flex justify-betweens">
+        <h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">Project Name</h2>
+        <div>
+          <Button
+            colorSchema="secondary"
+            className="group relative"
+            leftIcon={<FontAwesomeIcon icon={isProjectIdCopied ? faCheck : faCopy} />}
+            onClick={copyProjectIdToClipboard}
+          >
+            Copy Project ID
+            <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+              Click to copy
+            </span>
+          </Button>
+        </div>
+      </div>
+
       <div className="max-w-md">
         <Controller
           defaultValue=""