chore: minor fixes

web/components/project/index.ts

@@ -5,7 +5,7 @@ export * from "./settings-sidebar";
 export * from "./single-integration-card";
 export * from "./single-project-card";
 export * from "./sidebar-list-item";
-export * from "./confirm-project-leave-modal";
+export * from "./leave-project-modal";
 export * from "./member-select";
 export * from "./members-select";
 export * from "./label-select";

web/components/project/leave-project-modal.tsx

@@ -1,18 +1,14 @@
-import React from "react";
+import { FC } from "react";
-// next imports
 import { useRouter } from "next/router";
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { observer } from "mobx-react-lite";
 // ui
 import { DangerButton, Input, SecondaryButton } from "components/ui";
 // fetch-keys
 import { PROJECTS_LIST } from "constants/fetch-keys";
 // mobx react lite
-import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -33,16 +29,17 @@ const defaultValues: FormData = {
   confirmLeave: "",
 };
 
-export const ConfirmProjectLeaveModal: React.FC = observer(() => {
+export const LeaveProjectModal: FC<> = observer(() => {
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-
+  // store
-  const store: RootStore = useMobxStore();
+  const { project: projectStore } = useMobxStore();
-  const { project } = store;
+  // user
-
   const { user } = useUser();
+  // project
   const { mutateProjects } = useProjects();
-
+  // toast
   const { setToastAlert } = useToast();
 
   const {
@@ -50,23 +47,21 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
     formState: { isSubmitting },
     handleSubmit,
     reset,
-    watch,
   } = useForm({ defaultValues });
 
   const handleClose = () => {
-    project.handleProjectLeaveModal(null);
+    projectStore.handleProjectLeaveModal(null);
-
     reset({ ...defaultValues });
   };
 
   const onSubmit = async (data: any) => {
     if (data) {
-      if (data.projectName === project?.projectLeaveDetails?.name) {
+      if (data.projectName === projectStore?.projectLeaveDetails?.name) {
         if (data.confirmLeave === "Leave Project") {
-          return project
+          return projectStore
             .leaveProject(
-              project.projectLeaveDetails.workspaceSlug.toString(),
+              projectStore.projectLeaveDetails.workspaceSlug.toString(),
-              project.projectLeaveDetails.id.toString(),
+              projectStore.projectLeaveDetails.id.toString(),
               user
             )
             .then((res) => {
@@ -105,7 +100,7 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
   };
 
   return (
-    <Transition.Root show={project.projectLeaveModal} as={React.Fragment}>
+    <Transition.Root show={projectStore.projectLeaveModal} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
           as={React.Fragment}
@@ -134,10 +129,7 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
                 <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon
+                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Leave Project</h3>
@@ -155,10 +147,8 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
                   <div className="text-custom-text-200">
                     <p className="break-words text-sm ">
                       Enter the project name{" "}
-                      <span className="font-medium text-custom-text-100">
+                      <span className="font-medium text-custom-text-100">{project?.projectLeaveDetails?.name}</span> to
-                        {project?.projectLeaveDetails?.name}
+                      continue:
-                      </span>{" "}
-                      to continue:
                     </p>
                     <Controller
                       control={control}
@@ -177,8 +167,7 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
 
                   <div className="text-custom-text-200">
                     <p className="text-sm">
-                      To confirm, type{" "}
+                      To confirm, type <span className="font-medium text-custom-text-100">Leave Project</span> below:
-                      <span className="font-medium text-custom-text-100">Leave Project</span> below:
                     </p>
                     <Controller
                       control={control}

web/components/project/sidebar-list-item.tsx

@@ -1,12 +1,10 @@
+import { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
-// react-beautiful-dnd
 import { DraggableProvided, DraggableStateSnapshot } from "react-beautiful-dnd";
-// headless ui
 import { Disclosure, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
 // services
 import projectService from "services/project.service";
 // hooks
@@ -32,11 +30,10 @@ import { renderEmoji } from "helpers/emoji.helper";
 import { IProject } from "types";
 // fetch-keys
 import { PROJECTS_LIST } from "constants/fetch-keys";
-// mobx react lite
-import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
+import { LeaveProjectModal } from "./leave-project-modal";
 
 type Props = {
   project: IProject;
@@ -98,6 +95,8 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId } = router.query;
   // toast
   const { setToastAlert } = useToast();
+  // states
+  const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
 
   const isAdmin = project.member_role === 20;
   const isViewerOrGuest = project.member_role === 10 || project.member_role === 5;
@@ -126,218 +125,219 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
     });
   };
 
+  const handleLeaveProject = () => {
+    setLeaveProjectModal(true);
+  };
+
   return (
-    <Disclosure key={project.id} defaultOpen={projectId === project.id}>
+    <>
-      {({ open }) => (
+      <LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={} />
-        <>
+      <Disclosure key={project.id} defaultOpen={projectId === project.id}>
-          <div
+        {({ open }) => (
-            className={`group relative text-custom-sidebar-text-10 px-2 py-1 w-full flex items-center hover:bg-custom-sidebar-background-80 rounded-md ${
+          <>
-              snapshot?.isDragging ? "opacity-60" : ""
+            <div
-            }`}
+              className={`group relative text-custom-sidebar-text-10 px-2 py-1 w-full flex items-center hover:bg-custom-sidebar-background-80 rounded-md ${
-          >
+                snapshot?.isDragging ? "opacity-60" : ""
-            {provided && (
+              }`}
-              <Tooltip
+            >
-                tooltipContent={project.sort_order === null ? "Join the project to rearrange" : "Drag to rearrange"}
+              {provided && (
-                position="top-right"
+                <Tooltip
-              >
+                  tooltipContent={project.sort_order === null ? "Join the project to rearrange" : "Drag to rearrange"}
-                <button
+                  position="top-right"
-                  type="button"
-                  className={`absolute top-1/2 -translate-y-1/2 -left-4 hidden rounded p-0.5 text-custom-sidebar-text-400 ${
-                    sidebarCollapse ? "" : "group-hover:!flex"
-                  } ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`}
-                  {...provided?.dragHandleProps}
                 >
-                  <EllipsisVerticalIcon className="h-4" />
+                  <button
-                  <EllipsisVerticalIcon className="-ml-5 h-4" />
+                    type="button"
-                </button>
+                    className={`absolute top-1/2 -translate-y-1/2 -left-4 hidden rounded p-0.5 text-custom-sidebar-text-400 ${
-              </Tooltip>
+                      sidebarCollapse ? "" : "group-hover:!flex"
-            )}
+                    } ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`}
-            <Tooltip tooltipContent={`${project.name}`} position="right" className="ml-2" disabled={!sidebarCollapse}>
+                    {...provided?.dragHandleProps}
-              <Disclosure.Button
+                  >
-                as="div"
+                    <EllipsisVerticalIcon className="h-4" />
-                className={`flex items-center flex-grow truncate cursor-pointer select-none text-left text-sm font-medium ${
+                    <EllipsisVerticalIcon className="-ml-5 h-4" />
-                  sidebarCollapse ? "justify-center" : `justify-between`
+                  </button>
-                }`}
+                </Tooltip>
-              >
+              )}
-                <div
+              <Tooltip tooltipContent={`${project.name}`} position="right" className="ml-2" disabled={!sidebarCollapse}>
-                  className={`flex items-center flex-grow w-full truncate gap-x-2 ${
+                <Disclosure.Button
-                    sidebarCollapse ? "justify-center" : ""
+                  as="div"
+                  className={`flex items-center flex-grow truncate cursor-pointer select-none text-left text-sm font-medium ${
+                    sidebarCollapse ? "justify-center" : `justify-between`
                   }`}
                 >
-                  {project.emoji ? (
+                  <div
-                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                    className={`flex items-center flex-grow w-full truncate gap-x-2 ${
-                      {renderEmoji(project.emoji)}
+                      sidebarCollapse ? "justify-center" : ""
-                    </span>
+                    }`}
-                  ) : project.icon_prop ? (
+                  >
-                    <div className="h-7 w-7 flex-shrink-0 grid place-items-center">
+                    {project.emoji ? (
-                      {renderEmoji(project.icon_prop)}
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                    </div>
+                        {renderEmoji(project.emoji)}
-                  ) : (
+                      </span>
-                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    ) : project.icon_prop ? (
-                      {project?.name.charAt(0)}
+                      <div className="h-7 w-7 flex-shrink-0 grid place-items-center">
-                    </span>
+                        {renderEmoji(project.icon_prop)}
-                  )}
-
-                  {!sidebarCollapse && (
-                    <p className={`truncate ${open ? "" : "text-custom-sidebar-text-200"}`}>{project.name}</p>
-                  )}
-                </div>
-                {!sidebarCollapse && (
-                  <ExpandMoreOutlined
-                    fontSize="small"
-                    className={`flex-shrink-0 ${
-                      open ? "rotate-180" : ""
-                    } !hidden group-hover:!block text-custom-sidebar-text-400 duration-300`}
-                  />
-                )}
-              </Disclosure.Button>
-            </Tooltip>
-
-            {!sidebarCollapse && (
-              <CustomMenu
-                className="hidden group-hover:block flex-shrink-0"
-                buttonClassName="!text-custom-sidebar-text-400 hover:text-custom-sidebar-text-400"
-                ellipsis
-              >
-                {!shortContextMenu && isAdmin && (
-                  <CustomMenu.MenuItem onClick={handleDeleteProject}>
-                    <span className="flex items-center justify-start gap-2 ">
-                      <TrashIcon className="h-4 w-4" />
-                      <span>Delete project</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                )}
-                {!project.is_favorite && (
-                  <CustomMenu.MenuItem onClick={handleAddToFavorites}>
-                    <span className="flex items-center justify-start gap-2">
-                      <StarIcon className="h-4 w-4" />
-                      <span>Add to favorites</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                )}
-                {project.is_favorite && (
-                  <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
-                    <span className="flex items-center justify-start gap-2">
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                      <span>Remove from favorites</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                )}
-                <CustomMenu.MenuItem onClick={handleCopyText}>
-                  <span className="flex items-center justify-start gap-2">
-                    <LinkIcon className="h-4 w-4" />
-                    <span>Copy project link</span>
-                  </span>
-                </CustomMenu.MenuItem>
-
-                {/* publish project settings */}
-                {isAdmin && (
-                  <CustomMenu.MenuItem onClick={() => projectPublish.handleProjectModal(project?.id)}>
-                    <div className="flex-shrink-0 relative flex items-center justify-start gap-2">
-                      <div className="rounded transition-all w-4 h-4 flex justify-center items-center text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 duration-300 cursor-pointer">
-                        <Icon iconName="ios_share" className="!text-base" />
                       </div>
-                      <div>{project.is_deployed ? "Publish settings" : "Publish"}</div>
+                    ) : (
-                    </div>
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                  </CustomMenu.MenuItem>
+                        {project?.name.charAt(0)}
-                )}
+                      </span>
+                    )}
 
-                {project.archive_in > 0 && (
+                    {!sidebarCollapse && (
-                  <CustomMenu.MenuItem
+                      <p className={`truncate ${open ? "" : "text-custom-sidebar-text-200"}`}>{project.name}</p>
-                    onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/archived-issues/`)}
+                    )}
-                  >
+                  </div>
-                    <div className="flex items-center justify-start gap-2">
+                  {!sidebarCollapse && (
-                      <ArchiveOutlined fontSize="small" />
+                    <ExpandMoreOutlined
-                      <span>Archived Issues</span>
+                      fontSize="small"
-                    </div>
+                      className={`flex-shrink-0 ${
-                  </CustomMenu.MenuItem>
+                        open ? "rotate-180" : ""
-                )}
+                      } !hidden group-hover:!block text-custom-sidebar-text-400 duration-300`}
-                <CustomMenu.MenuItem
+                    />
-                  onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/draft-issues`)}
+                  )}
+                </Disclosure.Button>
+              </Tooltip>
+
+              {!sidebarCollapse && (
+                <CustomMenu
+                  className="hidden group-hover:block flex-shrink-0"
+                  buttonClassName="!text-custom-sidebar-text-400 hover:text-custom-sidebar-text-400"
+                  ellipsis
                 >
-                  <div className="flex items-center justify-start gap-2">
+                  {!shortContextMenu && isAdmin && (
-                    <PenSquare className="!text-base !leading-4 w-[14px] h-[14px] text-custom-text-300" />
+                    <CustomMenu.MenuItem onClick={handleDeleteProject}>
-                    <span>Draft Issues</span>
+                      <span className="flex items-center justify-start gap-2 ">
-                  </div>
+                        <TrashIcon className="h-4 w-4" />
-                </CustomMenu.MenuItem>
+                        <span>Delete project</span>
-                <CustomMenu.MenuItem onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)}>
+                      </span>
-                  <div className="flex items-center justify-start gap-2">
+                    </CustomMenu.MenuItem>
-                    <Icon iconName="settings" className="!text-base !leading-4" />
+                  )}
-                    <span>Settings</span>
+                  {!project.is_favorite && (
-                  </div>
+                    <CustomMenu.MenuItem onClick={handleAddToFavorites}>
-                </CustomMenu.MenuItem>
+                      <span className="flex items-center justify-start gap-2">
+                        <StarIcon className="h-4 w-4" />
+                        <span>Add to favorites</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  )}
+                  {project.is_favorite && (
+                    <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
+                      <span className="flex items-center justify-start gap-2">
+                        <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                        <span>Remove from favorites</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  )}
+                  <CustomMenu.MenuItem onClick={handleCopyText}>
+                    <span className="flex items-center justify-start gap-2">
+                      <LinkIcon className="h-4 w-4" />
+                      <span>Copy project link</span>
+                    </span>
+                  </CustomMenu.MenuItem>
 
-                {/* leave project */}
+                  {/* publish project settings */}
-                {isViewerOrGuest && (
+                  {isAdmin && (
+                    <CustomMenu.MenuItem onClick={() => projectPublish.handleProjectModal(project?.id)}>
+                      <div className="flex-shrink-0 relative flex items-center justify-start gap-2">
+                        <div className="rounded transition-all w-4 h-4 flex justify-center items-center text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 duration-300 cursor-pointer">
+                          <Icon iconName="ios_share" className="!text-base" />
+                        </div>
+                        <div>{project.is_deployed ? "Publish settings" : "Publish"}</div>
+                      </div>
+                    </CustomMenu.MenuItem>
+                  )}
+
+                  {project.archive_in > 0 && (
+                    <CustomMenu.MenuItem
+                      onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/archived-issues/`)}
+                    >
+                      <div className="flex items-center justify-start gap-2">
+                        <ArchiveOutlined fontSize="small" />
+                        <span>Archived Issues</span>
+                      </div>
+                    </CustomMenu.MenuItem>
+                  )}
                   <CustomMenu.MenuItem
-                    onClick={() =>
+                    onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/draft-issues`)}
-                      projectStore.handleProjectLeaveModal({
-                        id: project?.id,
-                        name: project?.name,
-                        workspaceSlug: workspaceSlug as string,
-                      })
-                    }
                   >
                     <div className="flex items-center justify-start gap-2">
-                      <Icon iconName="logout" className="!text-base !leading-4" />
+                      <PenSquare className="!text-base !leading-4 w-[14px] h-[14px] text-custom-text-300" />
-                      <span>Leave Project</span>
+                      <span>Draft Issues</span>
+                    </div>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem
+                    onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)}
+                  >
+                    <div className="flex items-center justify-start gap-2">
+                      <Icon iconName="settings" className="!text-base !leading-4" />
+                      <span>Settings</span>
                     </div>
                   </CustomMenu.MenuItem>
-                )}
-              </CustomMenu>
-            )}
-          </div>
 
-          <Transition
+                  {/* leave project */}
-            enter="transition duration-100 ease-out"
+                  {isViewerOrGuest && (
-            enterFrom="transform scale-95 opacity-0"
+                    <CustomMenu.MenuItem onClick={handleLeaveProject}>
-            enterTo="transform scale-100 opacity-100"
+                      <div className="flex items-center justify-start gap-2">
-            leave="transition duration-75 ease-out"
+                        <Icon iconName="logout" className="!text-base !leading-4" />
-            leaveFrom="transform scale-100 opacity-100"
+                        <span>Leave Project</span>
-            leaveTo="transform scale-95 opacity-0"
+                      </div>
-          >
+                    </CustomMenu.MenuItem>
-            <Disclosure.Panel className={`space-y-2 mt-1 ${sidebarCollapse ? "" : "ml-[2.25rem]"}`}>
+                  )}
-              {navigation(workspaceSlug as string, project?.id).map((item) => {
+                </CustomMenu>
-                if (
+              )}
-                  (item.name === "Cycles" && !project.cycle_view) ||
+            </div>
-                  (item.name === "Modules" && !project.module_view) ||
-                  (item.name === "Views" && !project.issue_views_view) ||
-                  (item.name === "Pages" && !project.page_view)
-                )
-                  return;
 
-                return (
+            <Transition
-                  <Link key={item.name} href={item.href}>
+              enter="transition duration-100 ease-out"
-                    <a className="block w-full">
+              enterFrom="transform scale-95 opacity-0"
-                      <Tooltip
+              enterTo="transform scale-100 opacity-100"
-                        tooltipContent={`${project?.name}: ${item.name}`}
+              leave="transition duration-75 ease-out"
-                        position="right"
+              leaveFrom="transform scale-100 opacity-100"
-                        className="ml-2"
+              leaveTo="transform scale-95 opacity-0"
-                        disabled={!sidebarCollapse}
+            >
-                      >
+              <Disclosure.Panel className={`space-y-2 mt-1 ${sidebarCollapse ? "" : "ml-[2.25rem]"}`}>
-                        <div
+                {navigation(workspaceSlug as string, project?.id).map((item) => {
-                          className={`group flex items-center rounded-md px-2 py-1.5 gap-2.5 text-xs font-medium outline-none ${
+                  if (
-                            router.asPath.includes(item.href)
+                    (item.name === "Cycles" && !project.cycle_view) ||
-                              ? "bg-custom-primary-100/10 text-custom-primary-100"
+                    (item.name === "Modules" && !project.module_view) ||
-                              : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                    (item.name === "Views" && !project.issue_views_view) ||
-                          } ${sidebarCollapse ? "justify-center" : ""}`}
+                    (item.name === "Pages" && !project.page_view)
+                  )
+                    return;
+
+                  return (
+                    <Link key={item.name} href={item.href}>
+                      <a className="block w-full">
+                        <Tooltip
+                          tooltipContent={`${project?.name}: ${item.name}`}
+                          position="right"
+                          className="ml-2"
+                          disabled={!sidebarCollapse}
                         >
-                          <item.Icon
+                          <div
-                            sx={{
+                            className={`group flex items-center rounded-md px-2 py-1.5 gap-2.5 text-xs font-medium outline-none ${
-                              fontSize: 18,
+                              router.asPath.includes(item.href)
-                            }}
+                                ? "bg-custom-primary-100/10 text-custom-primary-100"
-                          />
+                                : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                          {!sidebarCollapse && item.name}
+                            } ${sidebarCollapse ? "justify-center" : ""}`}
-                        </div>
+                          >
-                      </Tooltip>
+                            <item.Icon
-                    </a>
+                              sx={{
-                  </Link>
+                                fontSize: 18,
-                );
+                              }}
-              })}
+                            />
-            </Disclosure.Panel>
+                            {!sidebarCollapse && item.name}
-          </Transition>
+                          </div>
-        </>
+                        </Tooltip>
-      )}
+                      </a>
-    </Disclosure>
+                    </Link>
+                  );
+                })}
+              </Disclosure.Panel>
+            </Transition>
+          </>
+        )}
+      </Disclosure>
+    </>
   );
 });

web/components/project/sidebar-list.tsx

@@ -9,7 +9,8 @@ import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 import useProjects from "hooks/use-projects";
 // components
-import { CreateProjectModal, DeleteProjectModal, ProjectSidebarListItem } from "components/project";
+import { CreateProjectModal, DeleteProjectModal, ProjectSidebarListItem, LeaveProjectModal } from "components/project";
+import { PublishProjectModal } from "components/project/publish-project/modal";
 // services
 import projectService from "services/project.service";
 // icons
@@ -26,7 +27,7 @@ import { PROJECTS_LIST } from "constants/fetch-keys";
 import { useMobxStore } from "lib/mobx/store-provider";
 
 export const ProjectSidebarList: FC = observer(() => {
-  const { theme: themeStore, workspace: workspaceStore } = useMobxStore();
+  const { theme: themeStore, workspace: workspaceStore, project: projectStore } = useMobxStore();
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -39,11 +40,8 @@ export const ProjectSidebarList: FC = observer(() => {
   const [isFavoriteProjectCreate, setIsFavoriteProjectCreate] = useState(false);
   const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
   const [deleteProjectModal, setDeleteProjectModal] = useState(false);
-  const [projectToDelete, setProjectToDelete] = useState<IProject | null>(null);
-  const [projectToLeaveId, setProjectToLeaveId] = useState<string | null>(null);
 
-  // router
+  const [isScrolled, setIsScrolled] = useState(false); // scroll animation state
-  const [isScrolled, setIsScrolled] = useState(false);
 
   const containerRef = useRef<HTMLDivElement | null>(null);
 
@@ -53,9 +51,6 @@ export const ProjectSidebarList: FC = observer(() => {
   const joinedProjects = workspaceSlug && workspaceStore.workspaceJoinedProjects;
   const favoriteProjects = workspaceSlug && workspaceStore.workspaceFavoriteProjects;
 
-  console.log("workspaceJoinedProjects", workspaceStore.workspaceJoinedProjects);
-  console.log("workspaceFavoriteProjects", workspaceStore.workspaceFavoriteProjects);
-
   const orderedJoinedProjects: IProject[] | undefined = joinedProjects
     ? orderArrayBy(joinedProjects, "sort_order", "ascending")
     : undefined;
@@ -64,11 +59,6 @@ export const ProjectSidebarList: FC = observer(() => {
     ? orderArrayBy(favoriteProjects, "sort_order", "ascending")
     : undefined;
 
-  const handleDeleteProject = (project: IProject) => {
-    setProjectToDelete(project);
-    setDeleteProjectModal(true);
-  };
-
   const handleCopyText = (projectId: string) => {
     const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
     copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues`).then(() => {
@@ -87,36 +77,11 @@ export const ProjectSidebarList: FC = observer(() => {
 
     if (source.index === destination.index) return;
 
-    const projectsList =
+    const updatedSortOrder = projectStore.orderProjectsWithSortOrder(source.index, destination.index, draggableId);
-      (destination.droppableId === "joined-projects" ? orderedJoinedProjects : orderedFavProjects) ?? [];
 
-    let updatedSortOrder = projectsList[source.index].sort_order;
+    projectStore
-
+      .updateProjectView(workspaceSlug.toString(), draggableId, { sort_order: updatedSortOrder })
-    if (destination.index === 0) updatedSortOrder = (projectsList[0].sort_order as number) - 1000;
+      .catch((error) => {
-    else if (destination.index === projectsList.length - 1)
-      updatedSortOrder = (projectsList[projectsList.length - 1].sort_order as number) + 1000;
-    else {
-      const destinationSortingOrder = projectsList[destination.index].sort_order as number;
-      const relativeDestinationSortingOrder =
-        source.index < destination.index
-          ? (projectsList[destination.index + 1].sort_order as number)
-          : (projectsList[destination.index - 1].sort_order as number);
-
-      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
-    }
-
-    mutate<IProject[]>(
-      PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-      (prevData) => {
-        if (!prevData) return prevData;
-        return prevData.map((p) => (p.id === draggableId ? { ...p, sort_order: updatedSortOrder } : p));
-      },
-      false
-    );
-
-    await projectService
-      .setProjectView(workspaceSlug as string, draggableId, { sort_order: updatedSortOrder })
-      .catch(() => {
         setToastAlert({
           type: "error",
           title: "Error!",
@@ -125,20 +90,20 @@ export const ProjectSidebarList: FC = observer(() => {
       });
   };
 
-  const handleScroll = () => {
+  /**
-    if (containerRef.current) {
+   * Implementing scroll animation styles based on the scroll length of the container
-      const scrollTop = containerRef.current.scrollTop;
+   */
-      setIsScrolled(scrollTop > 0);
-    }
-  };
-
   useEffect(() => {
+    const handleScroll = () => {
+      if (containerRef.current) {
+        const scrollTop = containerRef.current.scrollTop;
+        setIsScrolled(scrollTop > 0);
+      }
+    };
     const currentContainerRef = containerRef.current;
-
     if (currentContainerRef) {
       currentContainerRef.addEventListener("scroll", handleScroll);
     }
-
     return () => {
       if (currentContainerRef) {
         currentContainerRef.removeEventListener("scroll", handleScroll);
@@ -160,6 +125,10 @@ export const ProjectSidebarList: FC = observer(() => {
         data={projectToDelete}
         user={user}
       />
+      {/* project leave modal */}
+      <LeaveProjectModal />
+      {/* publish project modal */}
+      <PublishProjectModal />
       <div
         ref={containerRef}
         className={`h-full overflow-y-auto px-4 space-y-3 pt-3 ${

web/layouts/app-layout/app-sidebar.tsx

@@ -1,5 +1,4 @@
-// hooks
+import { observer } from "mobx-react-lite";
-import useTheme from "hooks/use-theme";
 // components
 import {
   WorkspaceHelpSection,
@@ -8,10 +7,6 @@ import {
   WorkspaceSidebarQuickAction,
 } from "components/workspace";
 import { ProjectSidebarList } from "components/project";
-import { PublishProjectModal } from "components/project/publish-project/modal";
-import { ConfirmProjectLeaveModal } from "components/project/confirm-project-leave-modal";
-// mobx react lite
-import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 
@@ -21,15 +16,13 @@ export interface SidebarProps {
 }
 
 const Sidebar: React.FC<SidebarProps> = observer(({ toggleSidebar, setToggleSidebar }) => {
-  const store: any = useMobxStore();
+  const { theme: themStore } = useMobxStore();
-  // theme
-  const { collapsed: sidebarCollapse } = useTheme();
 
   return (
     <div
       id="app-sidebar"
       className={`fixed md:relative inset-y-0 flex flex-col bg-custom-sidebar-background-100 h-full flex-shrink-0 flex-grow-0 border-r border-custom-sidebar-border-200 z-20 duration-300 ${
-        store?.theme?.sidebarCollapsed ? "" : "md:w-[280px]"
+        themStore?.sidebarCollapsed ? "" : "md:w-[280px]"
       } ${toggleSidebar ? "left-0" : "-left-full md:left-0"}`}
     >
       <div className="flex h-full w-full flex-1 flex-col">
@@ -39,10 +32,6 @@ const Sidebar: React.FC<SidebarProps> = observer(({ toggleSidebar, setToggleSide
         <ProjectSidebarList />
         <WorkspaceHelpSection setSidebarActive={setToggleSidebar} />
       </div>
-      {/* publish project modal */}
-      <PublishProjectModal />
-      {/* project leave modal */}
-      <ConfirmProjectLeaveModal />
     </div>
   );
 });

web/store/project.ts

@@ -15,9 +15,6 @@ export interface IProjectStore {
   loader: boolean;
   error: any | null;
 
-  projectLeaveModal: boolean;
-  projectLeaveDetails: IProject | any;
-
   projectId: string | null;
 
   projects: {
@@ -65,6 +62,9 @@ export interface IProjectStore {
   addProjectToFavorites: (workspaceSlug: string, projectSlug: string) => Promise<any>;
   removeProjectFromFavorites: (workspaceSlug: string, projectSlug: string) => Promise<any>;
 
+  orderProjectsWithSortOrder: (sourceIndex: number, destinationIndex: number, projectId: string) => number;
+  updateProjectView: (workspaceSlug: string, projectId: string, viewProps: any) => Promise<any>;
+
   handleProjectLeaveModal: (project: any | null) => void;
 
   leaveProject: (workspaceSlug: string, projectSlug: string, user: any) => Promise<void>;
@@ -150,6 +150,9 @@ class ProjectStore implements IProjectStore {
       addProjectToFavorites: action,
       removeProjectFromFavorites: action,
 
+      orderProjectsWithSortOrder: action,
+      updateProjectView: action,
+
       handleProjectLeaveModal: action,
       leaveProject: action,
     });
@@ -421,6 +424,56 @@ class ProjectStore implements IProjectStore {
     }
   };
 
+  orderProjectsWithSortOrder = (sortIndex: number, destinationIndex: number, projectId: string) => {
+    try {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      if (!workspaceSlug) return 0;
+
+      const projectsList = this.rootStore.workspace.projects[workspaceSlug] || [];
+      let updatedSortOrder = projectsList[sortIndex].sort_order;
+
+      if (destinationIndex === 0) updatedSortOrder = (projectsList[0].sort_order as number) - 1000;
+      else if (destinationIndex === projectsList.length - 1)
+        updatedSortOrder = (projectsList[projectsList.length - 1].sort_order as number) + 1000;
+      else {
+        const destinationSortingOrder = projectsList[destinationIndex].sort_order as number;
+        const relativeDestinationSortingOrder =
+          sortIndex < destinationIndex
+            ? (projectsList[destinationIndex + 1].sort_order as number)
+            : (projectsList[destinationIndex - 1].sort_order as number);
+
+        updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+      }
+
+      const updatedProjectsList = projectsList.map((p) =>
+        p.id === projectId ? { ...p, sort_order: updatedSortOrder } : p
+      );
+
+      runInAction(() => {
+        this.rootStore.workspace.projects = {
+          ...this.rootStore.workspace.projects,
+          [workspaceSlug]: updatedProjectsList,
+        };
+      });
+
+      return updatedSortOrder;
+    } catch (error) {
+      console.log("failed to update sort order of the projects");
+      return 0;
+    }
+  };
+
+  updateProjectView = async (workspaceSlug: string, projectId: string, viewProps: any) => {
+    try {
+      const response = await this.projectService.setProjectView(workspaceSlug, projectId, viewProps);
+      await this.rootStore.workspace.getWorkspaceProjects(workspaceSlug);
+      return response;
+    } catch (error) {
+      console.log("Failed to update sort order of the projects");
+      throw error;
+    }
+  };
+
   handleProjectLeaveModal = (project: IProject | null = null) => {
     if (project && project?.id) {
       this.projectLeaveModal = !this.projectLeaveModal;