[WEB-999] chore: updated UI improvements and workflow updates in the project inbox (#4180)

* chore: snoozed filter in the issue inbox filter

* chore: navigating to the next or previous issue when we accept, decline, or duplicate the issue in inbox

* chore: Implemented state, label, assignee and target_date in the inbox issue description and Implemented issue edit confirmation once we click accept the inbox issue

* chore: removed logs

* chore: inbox issue create response

* chore: update inbox issue response

* chore: updated inbox issue accept workflow and added issue properties in inbox issue create modal

* chore: resolved build errors and upgraded lucide react

* chore: updated inbox issue store hook

* chore: code cleanup and removed validation for inbox description

* fix: renamed the variable isLoading to loader in project-inbox store

* fix: updated set function for issue property update

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>

web/components/headers/project-inbox.tsx

@@ -6,7 +6,7 @@ import { Plus, RefreshCcw } from "lucide-react";
 import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
-import { CreateInboxIssueModal } from "@/components/inbox";
+import { InboxIssueCreateEditModalRoot } from "@/components/inbox";
 import { ProjectLogo } from "@/components/project";
 // hooks
 import { useProject, useProjectInbox } from "@/hooks/store";
@@ -16,10 +16,10 @@ export const ProjectInboxHeader: FC = observer(() => {
   const [createIssueModal, setCreateIssueModal] = useState(false);
   // router
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId } = router.query;
   // store hooks
   const { currentProjectDetails } = useProject();
-  const { isLoading } = useProjectInbox();
+  const { loader } = useProjectInbox();
 
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
@@ -51,7 +51,7 @@ export const ProjectInboxHeader: FC = observer(() => {
             />
           </Breadcrumbs>
 
-          {isLoading === "pagination-loading" && (
+          {loader === "pagination-loading" && (
             <div className="flex items-center gap-1.5 text-custom-text-300">
               <RefreshCcw className="h-3.5 w-3.5 animate-spin" />
               <p className="text-sm">Syncing...</p>
@@ -60,9 +60,16 @@ export const ProjectInboxHeader: FC = observer(() => {
         </div>
       </div>
 
-      {currentProjectDetails?.inbox_view && (
+      {currentProjectDetails?.inbox_view && workspaceSlug && projectId && (
         <div className="flex items-center gap-2">
-          <CreateInboxIssueModal isOpen={createIssueModal} onClose={() => setCreateIssueModal(false)} />
+          <InboxIssueCreateEditModalRoot
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+            modalState={createIssueModal}
+            handleModalClose={() => setCreateIssueModal(false)}
+            issue={undefined}
+          />
+
           <Button variant="primary" prependIcon={<Plus />} size="sm" onClick={() => setCreateIssueModal(true)}>
             Add Issue
           </Button>