From 529ab19747085e224f020da4fa0da3c3cac23d0a Mon Sep 17 00:00:00 2001
From: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Date: Wed, 23 Aug 2023 22:13:04 +0530
Subject: [PATCH 01/70] chore: removed extra exporter function (#1953)

---
 apiserver/plane/api/urls.py        |  5 ++++-
 apiserver/plane/api/views/issue.py | 25 -------------------------
 2 files changed, 4 insertions(+), 26 deletions(-)

diff --git a/apiserver/plane/api/urls.py b/apiserver/plane/api/urls.py
index b8743476e..8ebf10f57 100644
--- a/apiserver/plane/api/urls.py
+++ b/apiserver/plane/api/urls.py
@@ -89,7 +89,6 @@ from plane.api.views import (
     IssueCommentPublicViewSet,
     IssueReactionViewSet,
     CommentReactionViewSet,
-    ExportIssuesEndpoint,
     ## End Issues
     # States
     StateViewSet,
@@ -175,6 +174,10 @@ from plane.api.views import (
     InboxIssuePublicViewSet,
     IssueVotePublicViewSet,
     ## End Public Boards
+    ## Exporter
+    ExportIssuesEndpoint,
+    ## End Exporter
+
 )
 
 
diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index 6f0f1e6ae..0b08bb14f 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -1827,28 +1827,3 @@ class IssueVotePublicViewSet(BaseViewSet):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-
-class ExportIssuesEndpoint(BaseAPIView):
-    permission_classes = [
-        WorkSpaceAdminPermission,
-    ]
-
-    def post(self, request, slug):
-        try:
-
-            issue_export_task.delay(
-                email=request.user.email, data=request.data, slug=slug ,exporter_name=request.user.first_name
-            )
-
-            return Response(
-                {
-                    "message": f"Once the export is ready it will be emailed to you at {str(request.user.email)}"
-                },
-                status=status.HTTP_200_OK,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
\ No newline at end of file

From 7fca01d8c9e7eca9d8d772e8add6488b97efaf4b Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Wed, 23 Aug 2023 22:13:37 +0530
Subject: [PATCH 02/70] feat: project deploy board endpoint (#1943)

---
 apiserver/plane/api/urls.py           |  6 +++++
 apiserver/plane/api/views/__init__.py |  1 +
 apiserver/plane/api/views/project.py  | 35 +++++++++++++++++++++++++++
 3 files changed, 42 insertions(+)

diff --git a/apiserver/plane/api/urls.py b/apiserver/plane/api/urls.py
index 8ebf10f57..a6beac693 100644
--- a/apiserver/plane/api/urls.py
+++ b/apiserver/plane/api/urls.py
@@ -173,6 +173,7 @@ from plane.api.views import (
     CommentReactionPublicViewSet,
     InboxIssuePublicViewSet,
     IssueVotePublicViewSet,
+    WorkspaceProjectDeployBoardEndpoint,
     ## End Public Boards
     ## Exporter
     ExportIssuesEndpoint,
@@ -1617,5 +1618,10 @@ urlpatterns = [
         ),
         name="issue-vote-project-board",
     ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/",
+        WorkspaceProjectDeployBoardEndpoint.as_view(),
+        name="workspace-project-boards",
+    ),
     ## End Public Boards
 ]
diff --git a/apiserver/plane/api/views/__init__.py b/apiserver/plane/api/views/__init__.py
index 11223f90a..9572c552f 100644
--- a/apiserver/plane/api/views/__init__.py
+++ b/apiserver/plane/api/views/__init__.py
@@ -16,6 +16,7 @@ from .project import (
     ProjectDeployBoardViewSet,
     ProjectDeployBoardPublicSettingsEndpoint,
     ProjectMemberEndpoint,
+    WorkspaceProjectDeployBoardEndpoint,
 )
 from .user import (
     UserEndpoint,
diff --git a/apiserver/plane/api/views/project.py b/apiserver/plane/api/views/project.py
index 6adee0016..a693d535b 100644
--- a/apiserver/plane/api/views/project.py
+++ b/apiserver/plane/api/views/project.py
@@ -1286,3 +1286,38 @@ class ProjectDeployBoardIssuesPublicEndpoint(BaseAPIView):
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+
+
+class WorkspaceProjectDeployBoardEndpoint(BaseAPIView):
+
+    permission_classes = [AllowAny,]
+
+    def get(self, request, slug):
+        try:
+            projects = (
+                Project.objects.filter(workspace__slug=slug)
+                .annotate(
+                    is_public=Exists(
+                        ProjectDeployBoard.objects.filter(
+                            workspace__slug=slug, project_id=OuterRef("pk")
+                        )
+                    )
+                )
+                .filter(is_public=True)
+            ).values(
+                "id",
+                "identifier",
+                "name",
+                "description",
+                "emoji",
+                "icon_prop",
+                "cover_image",
+            )
+
+            return Response(projects, status=status.HTTP_200_OK)
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )

From f97597958afbe90d07f6e8bd9a0d4997bc1e984a Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Thu, 24 Aug 2023 17:44:20 +0530
Subject: [PATCH 03/70] fix: workspace memebers mutate issue

---
 .../workspace/send-workspace-invitation-modal.tsx     | 10 ++++------
 apps/app/pages/[workspaceSlug]/settings/members.tsx   | 11 +++++++++--
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/apps/app/components/workspace/send-workspace-invitation-modal.tsx b/apps/app/components/workspace/send-workspace-invitation-modal.tsx
index 5bffa3264..c9d090405 100644
--- a/apps/app/components/workspace/send-workspace-invitation-modal.tsx
+++ b/apps/app/components/workspace/send-workspace-invitation-modal.tsx
@@ -25,6 +25,7 @@ type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   workspace_slug: string;
   user: ICurrentUserResponse | undefined;
+  onSuccess: () => void;
 };
 
 type EmailRole = {
@@ -45,12 +46,8 @@ const defaultValues: FormValues = {
   ],
 };
 
-const SendWorkspaceInvitationModal: React.FC<Props> = ({
-  isOpen,
-  setIsOpen,
-  workspace_slug,
-  user,
-}) => {
+const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
+  const { isOpen, setIsOpen, workspace_slug, user, onSuccess } = props;
   const {
     control,
     reset,
@@ -88,6 +85,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
           title: "Success!",
           message: "Invitations sent successfully.",
         });
+        onSuccess();
       })
       .catch((err) => {
         setToastAlert({
diff --git a/apps/app/pages/[workspaceSlug]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/settings/members.tsx
index 5f6fbc150..85131dab7 100644
--- a/apps/app/pages/[workspaceSlug]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/members.tsx
@@ -99,6 +99,11 @@ const MembersSettings: NextPage = () => {
 
   const currentUser = workspaceMembers?.find((item) => item.member?.id === user?.id);
 
+  const handleInviteModalSuccess = () => {
+    mutateInvitations();
+    mutateMembers();
+  };
+
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
@@ -139,8 +144,9 @@ const MembersSettings: NextPage = () => {
                 });
               })
               .finally(() => {
-                mutateMembers((prevData: any) =>
-                  prevData?.filter((item: any) => item.id !== selectedRemoveMember)
+                mutateMembers(
+                  (prevData: any) =>
+                    prevData?.filter((item: any) => item.id !== selectedRemoveMember)
                 );
               });
           }
@@ -180,6 +186,7 @@ const MembersSettings: NextPage = () => {
         setIsOpen={setInviteModal}
         workspace_slug={workspaceSlug as string}
         user={user}
+        onSuccess={handleInviteModalSuccess}
       />
       <div className="p-8">
         <SettingsHeader />

From bce8cae0dac8c3827d11160f1a99196a9aea3b5c Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Thu, 24 Aug 2023 18:21:57 +0530
Subject: [PATCH 04/70] fix: mutate fixes

---
 apps/app/pages/[workspaceSlug]/settings/members.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/app/pages/[workspaceSlug]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/settings/members.tsx
index 85131dab7..0801c84b7 100644
--- a/apps/app/pages/[workspaceSlug]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/members.tsx
@@ -101,7 +101,6 @@ const MembersSettings: NextPage = () => {
 
   const handleInviteModalSuccess = () => {
     mutateInvitations();
-    mutateMembers();
   };
 
   return (

From 802e6b3e8ee488694fac7c6e73cd9d44b3db317e Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Thu, 24 Aug 2023 19:43:50 +0530
Subject: [PATCH 05/70] fix: project member mutate issue (#1967)

---
 .../project/send-project-invitation-modal.tsx         | 11 +++++++----
 .../projects/[projectId]/settings/members.tsx         |  3 +++
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/app/components/project/send-project-invitation-modal.tsx b/apps/app/components/project/send-project-invitation-modal.tsx
index d37ad627f..414ef7a6c 100644
--- a/apps/app/components/project/send-project-invitation-modal.tsx
+++ b/apps/app/components/project/send-project-invitation-modal.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 
 import { useRouter } from "next/router";
 
-import useSWR, { mutate } from "swr";
+import useSWR from "swr";
 
 import { useForm, Controller, useFieldArray } from "react-hook-form";
 
@@ -28,7 +28,7 @@ import useToast from "hooks/use-toast";
 // types
 import { ICurrentUserResponse } from "types";
 // fetch-keys
-import { PROJECT_MEMBERS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
+import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 // constants
 import { ROLE } from "constants/workspace";
 
@@ -37,6 +37,7 @@ type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   members: any[];
   user: ICurrentUserResponse | undefined;
+  onSuccess: () => void;
 };
 
 type member = {
@@ -57,7 +58,9 @@ const defaultValues: FormValues = {
   ],
 };
 
-const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, members, user }) => {
+const SendProjectInvitationModal: React.FC<Props> = (props) => {
+  const { isOpen, setIsOpen, members, user, onSuccess } = props;
+
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -98,13 +101,13 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
           type: "success",
           message: "Member added successfully",
         });
+        onSuccess();
       })
       .catch((error) => {
         console.log(error);
       })
       .finally(() => {
         reset(defaultValues);
-        mutate(PROJECT_MEMBERS(projectId.toString()));
       });
   };
 
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index 6fb29efb2..ec8c0c43b 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -108,6 +108,8 @@ const MembersSettings: NextPage = () => {
 
   const currentUser = projectMembers?.find((item) => item.member.id === user?.id);
 
+  const handleProjectInvitationSuccess = () => {};
+
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
@@ -167,6 +169,7 @@ const MembersSettings: NextPage = () => {
         setIsOpen={setInviteModal}
         members={members}
         user={user}
+        onSuccess={() => mutateMembers()}
       />
       <div className="p-8">
         <SettingsHeader />

From d18ac83909e9073f2b17996350b1b7b253a86e0b Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 24 Aug 2023 19:45:23 +0530
Subject: [PATCH 06/70] feat: start date filter added across the platform
 (#1955)

Co-authored-by: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>
---
 ...filter-modal.tsx => date-filter-modal.tsx} | 17 +++--
 ...lter-select.tsx => date-filter-select.tsx} | 15 ++--
 .../components/core/filters/filters-list.tsx  | 28 +++++++
 apps/app/components/core/filters/index.ts     |  4 +-
 .../core/filters/issues-view-filter.tsx       |  9 +--
 .../app/components/core/views/issues-view.tsx |  1 +
 .../my-issues/my-issues-select-filters.tsx    | 75 ++++++++++++++++---
 .../my-issues/my-issues-view-options.tsx      |  9 +--
 .../issues/my-issues/my-issues-view.tsx       |  1 +
 .../profile/profile-issues-view-options.tsx   |  9 +--
 .../profile/profile-issues-view.tsx           |  1 +
 apps/app/components/views/form.tsx            |  8 +-
 apps/app/components/views/select-filters.tsx  | 75 ++++++++++++++++---
 apps/app/constants/fetch-keys.ts              | 18 ++++-
 .../constants/{due-dates.ts => filters.ts}    |  2 +-
 apps/app/contexts/issue-view.context.tsx      |  1 +
 apps/app/contexts/profile-issues-context.tsx  |  1 +
 .../hooks/my-issues/use-my-issues-filter.tsx  |  1 +
 apps/app/hooks/my-issues/use-my-issues.tsx    |  1 +
 apps/app/hooks/use-issues-view.tsx            |  1 +
 apps/app/hooks/use-profile-issues.tsx         |  1 +
 apps/app/types/issues.d.ts                    |  1 +
 apps/app/types/views.d.ts                     |  1 +
 23 files changed, 216 insertions(+), 64 deletions(-)
 rename apps/app/components/core/filters/{due-date-filter-modal.tsx => date-filter-modal.tsx} (90%)
 rename apps/app/components/core/filters/{due-date-filter-select.tsx => date-filter-select.tsx} (78%)
 rename apps/app/constants/{due-dates.ts => filters.ts} (96%)

diff --git a/apps/app/components/core/filters/due-date-filter-modal.tsx b/apps/app/components/core/filters/date-filter-modal.tsx
similarity index 90%
rename from apps/app/components/core/filters/due-date-filter-modal.tsx
rename to apps/app/components/core/filters/date-filter-modal.tsx
index 9556bd193..abc2cc7c4 100644
--- a/apps/app/components/core/filters/due-date-filter-modal.tsx
+++ b/apps/app/components/core/filters/date-filter-modal.tsx
@@ -11,15 +11,18 @@ import { Dialog, Transition } from "@headlessui/react";
 // hooks
 import useIssuesView from "hooks/use-issues-view";
 // components
-import { DueDateFilterSelect } from "./due-date-filter-select";
+import { DateFilterSelect } from "./date-filter-select";
 // ui
 import { PrimaryButton, SecondaryButton } from "components/ui";
 // icons
 import { XMarkIcon } from "@heroicons/react/20/solid";
 // helpers
 import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { IIssueFilterOptions } from "types";
 
 type Props = {
+  title: string;
+  field: keyof IIssueFilterOptions;
   isOpen: boolean;
   handleClose: () => void;
 };
@@ -36,7 +39,7 @@ const defaultValues: TFormValues = {
   date2: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),
 };
 
-export const DueDateFilterModal: React.FC<Props> = ({ isOpen, handleClose }) => {
+export const DateFilterModal: React.FC<Props> = ({ title, field, isOpen, handleClose }) => {
   const { filters, setFilters } = useIssuesView();
 
   const router = useRouter();
@@ -51,11 +54,11 @@ export const DueDateFilterModal: React.FC<Props> = ({ isOpen, handleClose }) =>
 
     if (filterType === "range") {
       setFilters(
-        { target_date: [`${renderDateFormat(date1)};after`, `${renderDateFormat(date2)};before`] },
+        { [field]: [`${renderDateFormat(date1)};after`, `${renderDateFormat(date2)};before`] },
         !Boolean(viewId)
       );
     } else {
-      const filteredArray = filters?.target_date?.filter((item) => {
+      const filteredArray = (filters?.[field] as string[])?.filter((item) => {
         if (item?.includes(filterType)) return false;
 
         return true;
@@ -64,13 +67,13 @@ export const DueDateFilterModal: React.FC<Props> = ({ isOpen, handleClose }) =>
       const filterOne = filteredArray && filteredArray?.length > 0 ? filteredArray[0] : null;
       if (filterOne)
         setFilters(
-          { target_date: [filterOne, `${renderDateFormat(date1)};${filterType}`] },
+          { [field]: [filterOne, `${renderDateFormat(date1)};${filterType}`] },
           !Boolean(viewId)
         );
       else
         setFilters(
           {
-            target_date: [`${renderDateFormat(date1)};${filterType}`],
+            [field]: [`${renderDateFormat(date1)};${filterType}`],
           },
           !Boolean(viewId)
         );
@@ -116,7 +119,7 @@ export const DueDateFilterModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                       control={control}
                       name="filterType"
                       render={({ field: { value, onChange } }) => (
-                        <DueDateFilterSelect value={value} onChange={onChange} />
+                        <DateFilterSelect title={title} value={value} onChange={onChange} />
                       )}
                     />
                     <XMarkIcon
diff --git a/apps/app/components/core/filters/due-date-filter-select.tsx b/apps/app/components/core/filters/date-filter-select.tsx
similarity index 78%
rename from apps/app/components/core/filters/due-date-filter-select.tsx
rename to apps/app/components/core/filters/date-filter-select.tsx
index 480a77619..b35b585ce 100644
--- a/apps/app/components/core/filters/due-date-filter-select.tsx
+++ b/apps/app/components/core/filters/date-filter-select.tsx
@@ -7,6 +7,7 @@ import { CalendarBeforeIcon, CalendarAfterIcon, CalendarMonthIcon } from "compon
 // fetch-keys
 
 type Props = {
+  title: string;
   value: string;
   onChange: (value: string) => void;
 };
@@ -19,29 +20,31 @@ type DueDate = {
 
 const dueDateRange: DueDate[] = [
   {
-    name: "Due date before",
+    name: "before",
     value: "before",
     icon: <CalendarBeforeIcon className="h-4 w-4 " />,
   },
   {
-    name: "Due date after",
+    name: "after",
     value: "after",
     icon: <CalendarAfterIcon className="h-4 w-4 " />,
   },
   {
-    name: "Due date range",
+    name: "range",
     value: "range",
     icon: <CalendarMonthIcon className="h-4 w-4 " />,
   },
 ];
 
-export const DueDateFilterSelect: React.FC<Props> = ({ value, onChange }) => (
+export const DateFilterSelect: React.FC<Props> = ({ title, value, onChange }) => (
   <CustomSelect
     value={value}
     label={
       <div className="flex items-center gap-2 text-xs">
         {dueDateRange.find((item) => item.value === value)?.icon}
-        <span>{dueDateRange.find((item) => item.value === value)?.name}</span>
+        <span>
+          {title} {dueDateRange.find((item) => item.value === value)?.name}
+        </span>
       </div>
     }
     onChange={onChange}
@@ -50,7 +53,7 @@ export const DueDateFilterSelect: React.FC<Props> = ({ value, onChange }) => (
       <CustomSelect.Option key={index} value={option.value}>
         <>
           <span>{option.icon}</span>
-          {option.name}
+          {title} {option.name}
         </>
       </CustomSelect.Option>
     ))}
diff --git a/apps/app/components/core/filters/filters-list.tsx b/apps/app/components/core/filters/filters-list.tsx
index ffe596258..8192bdf7d 100644
--- a/apps/app/components/core/filters/filters-list.tsx
+++ b/apps/app/components/core/filters/filters-list.tsx
@@ -240,6 +240,34 @@ export const FiltersList: React.FC<Props> = ({
                           </div>
                         );
                       })
+                    : key === "start_date"
+                    ? filters.start_date?.map((date: string) => {
+                        if (filters.start_date && filters.start_date.length <= 0) return null;
+
+                        const splitDate = date.split(";");
+
+                        return (
+                          <div
+                            key={date}
+                            className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-100 px-1 py-0.5"
+                          >
+                            <div className="h-1.5 w-1.5 rounded-full" />
+                            <span className="capitalize">
+                              {splitDate[1]} {renderShortDateWithYearFormat(splitDate[0])}
+                            </span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters({
+                                  start_date: filters.start_date?.filter((d: any) => d !== date),
+                                })
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </span>
+                          </div>
+                        );
+                      })
                     : key === "target_date"
                     ? filters.target_date?.map((date: string) => {
                         if (filters.target_date && filters.target_date.length <= 0) return null;
diff --git a/apps/app/components/core/filters/index.ts b/apps/app/components/core/filters/index.ts
index 01c371911..d6455151e 100644
--- a/apps/app/components/core/filters/index.ts
+++ b/apps/app/components/core/filters/index.ts
@@ -1,4 +1,4 @@
-export * from "./due-date-filter-modal";
-export * from "./due-date-filter-select";
+export * from "./date-filter-modal";
+export * from "./date-filter-select";
 export * from "./filters-list";
 export * from "./issues-view-filter";
diff --git a/apps/app/components/core/filters/issues-view-filter.tsx b/apps/app/components/core/filters/issues-view-filter.tsx
index 2fa80c975..37aab34e9 100644
--- a/apps/app/components/core/filters/issues-view-filter.tsx
+++ b/apps/app/components/core/filters/issues-view-filter.tsx
@@ -119,14 +119,11 @@ export const IssuesFilterView: React.FC = () => {
           onSelect={(option) => {
             const key = option.key as keyof typeof filters;
 
-            if (key === "target_date") {
-              const valueExists = checkIfArraysHaveSameElements(
-                filters.target_date ?? [],
-                option.value
-              );
+            if (key === "start_date" || key === "target_date") {
+              const valueExists = checkIfArraysHaveSameElements(filters[key] ?? [], option.value);
 
               setFilters({
-                target_date: valueExists ? null : option.value,
+                [key]: valueExists ? null : option.value,
               });
             } else {
               const valueExists = filters[key]?.includes(option.value);
diff --git a/apps/app/components/core/views/issues-view.tsx b/apps/app/components/core/views/issues-view.tsx
index d3d76f805..5f33a6cb0 100644
--- a/apps/app/components/core/views/issues-view.tsx
+++ b/apps/app/components/core/views/issues-view.tsx
@@ -478,6 +478,7 @@ export const IssuesView: React.FC<Props> = ({
                   labels: null,
                   priority: null,
                   state: null,
+                  start_date: null,
                   target_date: null,
                   type: null,
                 })
diff --git a/apps/app/components/issues/my-issues/my-issues-select-filters.tsx b/apps/app/components/issues/my-issues/my-issues-select-filters.tsx
index e3d2cdff0..58cc63679 100644
--- a/apps/app/components/issues/my-issues/my-issues-select-filters.tsx
+++ b/apps/app/components/issues/my-issues/my-issues-select-filters.tsx
@@ -7,7 +7,7 @@ import useSWR from "swr";
 // services
 import issuesService from "services/issues.service";
 // components
-import { DueDateFilterModal } from "components/core";
+import { DateFilterModal } from "components/core";
 // ui
 import { MultiLevelDropdown } from "components/ui";
 // icons
@@ -20,7 +20,7 @@ import { IIssueFilterOptions, IQuery } from "types";
 import { WORKSPACE_LABELS } from "constants/fetch-keys";
 // constants
 import { GROUP_CHOICES, PRIORITIES } from "constants/project";
-import { DUE_DATES } from "constants/due-dates";
+import { DATE_FILTER_OPTIONS } from "constants/filters";
 
 type Props = {
   filters: Partial<IIssueFilterOptions> | IQuery;
@@ -35,7 +35,14 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
   direction = "right",
   height = "md",
 }) => {
-  const [isDueDateFilterModalOpen, setIsDueDateFilterModalOpen] = useState(false);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+  const [dateFilterType, setDateFilterType] = useState<{
+    title: string;
+    type: "start_date" | "target_date";
+  }>({
+    title: "",
+    type: "start_date",
+  });
   const [fetchLabels, setFetchLabels] = useState(false);
 
   const router = useRouter();
@@ -50,10 +57,12 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
 
   return (
     <>
-      {isDueDateFilterModalOpen && (
-        <DueDateFilterModal
-          isOpen={isDueDateFilterModalOpen}
-          handleClose={() => setIsDueDateFilterModalOpen(false)}
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          title={dateFilterType.title}
+          field={dateFilterType.type}
+          isOpen={isDateFilterModalOpen}
+          handleClose={() => setIsDateFilterModalOpen(false)}
         />
       )}
       <MultiLevelDropdown
@@ -132,12 +141,48 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
             })),
           },
           {
-            id: "target_date",
-            label: "Due date",
-            value: DUE_DATES,
+            id: "start_date",
+            label: "Start date",
+            value: DATE_FILTER_OPTIONS,
             hasChildren: true,
             children: [
-              ...(DUE_DATES?.map((option) => ({
+              ...(DATE_FILTER_OPTIONS?.map((option) => ({
+                id: option.name,
+                label: option.name,
+                value: {
+                  key: "start_date",
+                  value: option.value,
+                },
+                selected: checkIfArraysHaveSameElements(filters?.start_date ?? [], option.value),
+              })) ?? []),
+              {
+                id: "custom",
+                label: "Custom",
+                value: "custom",
+                element: (
+                  <button
+                    onClick={() => {
+                      setIsDateFilterModalOpen(true);
+                      setDateFilterType({
+                        title: "Start date",
+                        type: "start_date",
+                      });
+                    }}
+                    className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                  >
+                    Custom
+                  </button>
+                ),
+              },
+            ],
+          },
+          {
+            id: "target_date",
+            label: "Due date",
+            value: DATE_FILTER_OPTIONS,
+            hasChildren: true,
+            children: [
+              ...(DATE_FILTER_OPTIONS?.map((option) => ({
                 id: option.name,
                 label: option.name,
                 value: {
@@ -152,7 +197,13 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
                 value: "custom",
                 element: (
                   <button
-                    onClick={() => setIsDueDateFilterModalOpen(true)}
+                    onClick={() => {
+                      setIsDateFilterModalOpen(true);
+                      setDateFilterType({
+                        title: "Due date",
+                        type: "target_date",
+                      });
+                    }}
                     className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
                   >
                     Custom
diff --git a/apps/app/components/issues/my-issues/my-issues-view-options.tsx b/apps/app/components/issues/my-issues/my-issues-view-options.tsx
index 23d0d2535..4c2a4bed1 100644
--- a/apps/app/components/issues/my-issues/my-issues-view-options.tsx
+++ b/apps/app/components/issues/my-issues/my-issues-view-options.tsx
@@ -89,14 +89,11 @@ export const MyIssuesViewOptions: React.FC = () => {
         onSelect={(option) => {
           const key = option.key as keyof typeof filters;
 
-          if (key === "target_date") {
-            const valueExists = checkIfArraysHaveSameElements(
-              filters?.target_date ?? [],
-              option.value
-            );
+          if (key === "start_date" || key === "target_date") {
+            const valueExists = checkIfArraysHaveSameElements(filters?.[key] ?? [], option.value);
 
             setFilters({
-              target_date: valueExists ? null : option.value,
+              [key]: valueExists ? null : option.value,
             });
           } else {
             const valueExists = filters[key]?.includes(option.value);
diff --git a/apps/app/components/issues/my-issues/my-issues-view.tsx b/apps/app/components/issues/my-issues/my-issues-view.tsx
index 6451bd1aa..ee38849cd 100644
--- a/apps/app/components/issues/my-issues/my-issues-view.tsx
+++ b/apps/app/components/issues/my-issues/my-issues-view.tsx
@@ -249,6 +249,7 @@ export const MyIssuesView: React.FC<Props> = ({
                   labels: null,
                   priority: null,
                   state_group: null,
+                  start_date: null,
                   target_date: null,
                   type: null,
                 })
diff --git a/apps/app/components/profile/profile-issues-view-options.tsx b/apps/app/components/profile/profile-issues-view-options.tsx
index 904e1ea65..382f8f220 100644
--- a/apps/app/components/profile/profile-issues-view-options.tsx
+++ b/apps/app/components/profile/profile-issues-view-options.tsx
@@ -115,14 +115,11 @@ export const ProfileIssuesViewOptions: React.FC = () => {
         onSelect={(option) => {
           const key = option.key as keyof typeof filters;
 
-          if (key === "target_date") {
-            const valueExists = checkIfArraysHaveSameElements(
-              filters?.target_date ?? [],
-              option.value
-            );
+          if (key === "start_date" || key === "target_date") {
+            const valueExists = checkIfArraysHaveSameElements(filters?.[key] ?? [], option.value);
 
             setFilters({
-              target_date: valueExists ? null : option.value,
+              [key]: valueExists ? null : option.value,
             });
           } else {
             const valueExists = filters[key]?.includes(option.value);
diff --git a/apps/app/components/profile/profile-issues-view.tsx b/apps/app/components/profile/profile-issues-view.tsx
index 44120a61c..0449546fc 100644
--- a/apps/app/components/profile/profile-issues-view.tsx
+++ b/apps/app/components/profile/profile-issues-view.tsx
@@ -263,6 +263,7 @@ export const ProfileIssuesView = () => {
                   labels: null,
                   priority: null,
                   state_group: null,
+                  start_date: null,
                   target_date: null,
                   type: null,
                 })
diff --git a/apps/app/components/views/form.tsx b/apps/app/components/views/form.tsx
index 9191a7b2b..0c57a9542 100644
--- a/apps/app/components/views/form.tsx
+++ b/apps/app/components/views/form.tsx
@@ -94,6 +94,7 @@ export const ViewForm: React.FC<Props> = ({
       labels: null,
       priority: null,
       state: null,
+      start_date: null,
       target_date: null,
       type: null,
     });
@@ -155,14 +156,15 @@ export const ViewForm: React.FC<Props> = ({
               onSelect={(option) => {
                 const key = option.key as keyof typeof filters;
 
-                if (key === "target_date") {
+                if (key === "start_date" || key === "target_date") {
                   const valueExists = checkIfArraysHaveSameElements(
-                    filters?.target_date ?? [],
+                    filters?.[key] ?? [],
                     option.value
                   );
 
                   setValue("query", {
-                    target_date: valueExists ? null : option.value,
+                    ...filters,
+                    [key]: valueExists ? null : option.value,
                   } as IQuery);
                 } else {
                   if (!filters?.[key]?.includes(option.value))
diff --git a/apps/app/components/views/select-filters.tsx b/apps/app/components/views/select-filters.tsx
index c621241ca..7016afc00 100644
--- a/apps/app/components/views/select-filters.tsx
+++ b/apps/app/components/views/select-filters.tsx
@@ -9,7 +9,7 @@ import stateService from "services/state.service";
 import projectService from "services/project.service";
 import issuesService from "services/issues.service";
 // components
-import { DueDateFilterModal } from "components/core";
+import { DateFilterModal } from "components/core";
 // ui
 import { Avatar, MultiLevelDropdown } from "components/ui";
 // icons
@@ -23,7 +23,7 @@ import { IIssueFilterOptions, IQuery } from "types";
 import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, STATES_LIST } from "constants/fetch-keys";
 // constants
 import { PRIORITIES } from "constants/project";
-import { DUE_DATES } from "constants/due-dates";
+import { DATE_FILTER_OPTIONS } from "constants/filters";
 
 type Props = {
   filters: Partial<IIssueFilterOptions> | IQuery;
@@ -38,7 +38,14 @@ export const SelectFilters: React.FC<Props> = ({
   direction = "right",
   height = "md",
 }) => {
-  const [isDueDateFilterModalOpen, setIsDueDateFilterModalOpen] = useState(false);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+  const [dateFilterType, setDateFilterType] = useState<{
+    title: string;
+    type: "start_date" | "target_date";
+  }>({
+    title: "",
+    type: "start_date",
+  });
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -67,10 +74,12 @@ export const SelectFilters: React.FC<Props> = ({
 
   return (
     <>
-      {isDueDateFilterModalOpen && (
-        <DueDateFilterModal
-          isOpen={isDueDateFilterModalOpen}
-          handleClose={() => setIsDueDateFilterModalOpen(false)}
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          title={dateFilterType.title}
+          field={dateFilterType.type}
+          isOpen={isDateFilterModalOpen}
+          handleClose={() => setIsDateFilterModalOpen(false)}
         />
       )}
       <MultiLevelDropdown
@@ -183,12 +192,48 @@ export const SelectFilters: React.FC<Props> = ({
             })),
           },
           {
-            id: "target_date",
-            label: "Due date",
-            value: DUE_DATES,
+            id: "start_date",
+            label: "Start date",
+            value: DATE_FILTER_OPTIONS,
             hasChildren: true,
             children: [
-              ...DUE_DATES.map((option) => ({
+              ...DATE_FILTER_OPTIONS.map((option) => ({
+                id: option.name,
+                label: option.name,
+                value: {
+                  key: "start_date",
+                  value: option.value,
+                },
+                selected: checkIfArraysHaveSameElements(filters?.start_date ?? [], option.value),
+              })),
+              {
+                id: "custom",
+                label: "Custom",
+                value: "custom",
+                element: (
+                  <button
+                    onClick={() => {
+                      setIsDateFilterModalOpen(true);
+                      setDateFilterType({
+                        title: "Start date",
+                        type: "start_date",
+                      });
+                    }}
+                    className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                  >
+                    Custom
+                  </button>
+                ),
+              },
+            ],
+          },
+          {
+            id: "target_date",
+            label: "Due date",
+            value: DATE_FILTER_OPTIONS,
+            hasChildren: true,
+            children: [
+              ...DATE_FILTER_OPTIONS.map((option) => ({
                 id: option.name,
                 label: option.name,
                 value: {
@@ -203,7 +248,13 @@ export const SelectFilters: React.FC<Props> = ({
                 value: "custom",
                 element: (
                   <button
-                    onClick={() => setIsDueDateFilterModalOpen(true)}
+                    onClick={() => {
+                      setIsDateFilterModalOpen(true);
+                      setDateFilterType({
+                        title: "Due date",
+                        type: "target_date",
+                      });
+                    }}
                     className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
                   >
                     Custom
diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts
index 97e8dfc90..14d34a96a 100644
--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@@ -8,6 +8,7 @@ const paramsToKey = (params: any) => {
     assignees,
     created_by,
     labels,
+    start_date,
     target_date,
     sub_issue,
     start_target_date,
@@ -19,6 +20,7 @@ const paramsToKey = (params: any) => {
   let createdByKey = created_by ? created_by.split(",") : [];
   let labelsKey = labels ? labels.split(",") : [];
   const startTargetDate = start_target_date ? `${start_target_date}`.toUpperCase() : "FALSE";
+  const startDateKey = start_date ?? "";
   const targetDateKey = target_date ?? "";
   const type = params.type ? params.type.toUpperCase() : "NULL";
   const groupBy = params.group_by ? params.group_by.toUpperCase() : "NULL";
@@ -31,7 +33,7 @@ const paramsToKey = (params: any) => {
   createdByKey = createdByKey.sort().join("_");
   labelsKey = labelsKey.sort().join("_");
 
-  return `${stateKey}_${priorityKey}_${assigneesKey}_${createdByKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${targetDateKey}_${sub_issue}_${startTargetDate}`;
+  return `${stateKey}_${priorityKey}_${assigneesKey}_${createdByKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${startDateKey}_${targetDateKey}_${sub_issue}_${startTargetDate}`;
 };
 
 const inboxParamsToKey = (params: any) => {
@@ -48,7 +50,16 @@ const inboxParamsToKey = (params: any) => {
 };
 
 const myIssuesParamsToKey = (params: any) => {
-  const { assignees, created_by, labels, priority, state_group, subscriber, target_date } = params;
+  const {
+    assignees,
+    created_by,
+    labels,
+    priority,
+    state_group,
+    subscriber,
+    start_date,
+    target_date,
+  } = params;
 
   let assigneesKey = assignees ? assignees.split(",") : [];
   let createdByKey = created_by ? created_by.split(",") : [];
@@ -56,6 +67,7 @@ const myIssuesParamsToKey = (params: any) => {
   let subscriberKey = subscriber ? subscriber.split(",") : [];
   let priorityKey = priority ? priority.split(",") : [];
   let labelsKey = labels ? labels.split(",") : [];
+  const startDateKey = start_date ?? "";
   const targetDateKey = target_date ?? "";
   const type = params.type ? params.type.toUpperCase() : "NULL";
   const groupBy = params.group_by ? params.group_by.toUpperCase() : "NULL";
@@ -69,7 +81,7 @@ const myIssuesParamsToKey = (params: any) => {
   priorityKey = priorityKey.sort().join("_");
   labelsKey = labelsKey.sort().join("_");
 
-  return `${assigneesKey}_${createdByKey}_${stateGroupKey}_${subscriberKey}_${priorityKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${targetDateKey}`;
+  return `${assigneesKey}_${createdByKey}_${stateGroupKey}_${subscriberKey}_${priorityKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${startDateKey}_${targetDateKey}`;
 };
 
 export const CURRENT_USER = "CURRENT_USER";
diff --git a/apps/app/constants/due-dates.ts b/apps/app/constants/filters.ts
similarity index 96%
rename from apps/app/constants/due-dates.ts
rename to apps/app/constants/filters.ts
index 362fd41a5..1172ae47b 100644
--- a/apps/app/constants/due-dates.ts
+++ b/apps/app/constants/filters.ts
@@ -1,7 +1,7 @@
 // helper
 import { renderDateFormat } from "helpers/date-time.helper";
 
-export const DUE_DATES = [
+export const DATE_FILTER_OPTIONS = [
   {
     name: "Last week",
     value: [
diff --git a/apps/app/contexts/issue-view.context.tsx b/apps/app/contexts/issue-view.context.tsx
index 530dbee4e..134e0d8f6 100644
--- a/apps/app/contexts/issue-view.context.tsx
+++ b/apps/app/contexts/issue-view.context.tsx
@@ -94,6 +94,7 @@ export const initialState: StateType = {
     state_group: null,
     subscriber: null,
     created_by: null,
+    start_date: null,
     target_date: null,
   },
 };
diff --git a/apps/app/contexts/profile-issues-context.tsx b/apps/app/contexts/profile-issues-context.tsx
index 34540acb7..7fc6d6c02 100644
--- a/apps/app/contexts/profile-issues-context.tsx
+++ b/apps/app/contexts/profile-issues-context.tsx
@@ -72,6 +72,7 @@ export const initialState: StateType = {
     state_group: null,
     subscriber: null,
     created_by: null,
+    start_date: null,
     target_date: null,
   },
   properties: {
diff --git a/apps/app/hooks/my-issues/use-my-issues-filter.tsx b/apps/app/hooks/my-issues/use-my-issues-filter.tsx
index 2ca77cd55..2de72918f 100644
--- a/apps/app/hooks/my-issues/use-my-issues-filter.tsx
+++ b/apps/app/hooks/my-issues/use-my-issues-filter.tsx
@@ -26,6 +26,7 @@ const initialValues: IWorkspaceViewProps = {
     priority: null,
     state_group: null,
     subscriber: null,
+    start_date: null,
     target_date: null,
     type: null,
   },
diff --git a/apps/app/hooks/my-issues/use-my-issues.tsx b/apps/app/hooks/my-issues/use-my-issues.tsx
index aae05bc84..2cb97ecd0 100644
--- a/apps/app/hooks/my-issues/use-my-issues.tsx
+++ b/apps/app/hooks/my-issues/use-my-issues.tsx
@@ -27,6 +27,7 @@ const useMyIssues = (workspaceSlug: string | undefined) => {
     priority: filters?.priority ? filters?.priority.join(",") : undefined,
     state_group: filters?.state_group ? filters?.state_group.join(",") : undefined,
     subscriber: filters?.subscriber ? filters?.subscriber.join(",") : undefined,
+    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
     target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
     type: filters?.type ? filters?.type : undefined,
   };
diff --git a/apps/app/hooks/use-issues-view.tsx b/apps/app/hooks/use-issues-view.tsx
index 3d702abea..767dbdb4c 100644
--- a/apps/app/hooks/use-issues-view.tsx
+++ b/apps/app/hooks/use-issues-view.tsx
@@ -58,6 +58,7 @@ const useIssuesView = () => {
     type: filters?.type ? filters?.type : undefined,
     labels: filters?.labels ? filters?.labels.join(",") : undefined,
     created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
+    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
     target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
     sub_issue: showSubIssues,
   };
diff --git a/apps/app/hooks/use-profile-issues.tsx b/apps/app/hooks/use-profile-issues.tsx
index 7e7f24372..6b4d4abfa 100644
--- a/apps/app/hooks/use-profile-issues.tsx
+++ b/apps/app/hooks/use-profile-issues.tsx
@@ -44,6 +44,7 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
     order_by: orderBy,
     priority: filters?.priority ? filters?.priority.join(",") : undefined,
     state_group: filters?.state_group ? filters?.state_group.join(",") : undefined,
+    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
     target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
     type: filters?.type ? filters?.type : undefined,
     subscriber: filters?.subscriber ? filters?.subscriber.join(",") : undefined,
diff --git a/apps/app/types/issues.d.ts b/apps/app/types/issues.d.ts
index 9cbcef847..edbe512a6 100644
--- a/apps/app/types/issues.d.ts
+++ b/apps/app/types/issues.d.ts
@@ -215,6 +215,7 @@ export interface IIssueLite {
 export interface IIssueFilterOptions {
   type: "active" | "backlog" | null;
   assignees: string[] | null;
+  start_date: string[] | null;
   target_date: string[] | null;
   state: string[] | null;
   state_group: TStateGroups[] | null;
diff --git a/apps/app/types/views.d.ts b/apps/app/types/views.d.ts
index 9bd133600..e1246af5a 100644
--- a/apps/app/types/views.d.ts
+++ b/apps/app/types/views.d.ts
@@ -20,6 +20,7 @@ export interface IQuery {
   labels: string[] | null;
   priority: string[] | null;
   state: string[] | null;
+  start_date: string[] | null;
   target_date: string[] | null;
   type: "active" | "backlog" | null;
 }

From 38934e8b99c021e4fb54c9defabbd7433206266f Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 24 Aug 2023 19:46:12 +0530
Subject: [PATCH 07/70] chore: group by assignees option for project issues
 (#1957)

* dev: group by assignees option for project issues

* fix: no assignee title

---------

Co-authored-by: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>
---
 .../core/views/board-view/board-header.tsx          | 13 ++++++++-----
 apps/app/components/core/views/issues-view.tsx      |  3 ++-
 .../components/core/views/list-view/single-list.tsx |  6 ++++--
 .../issues/my-issues/my-issues-view-options.tsx     |  6 +++++-
 .../profile/profile-issues-view-options.tsx         |  6 +++++-
 apps/app/constants/issue.ts                         |  1 +
 apps/app/types/issues.d.ts                          |  1 +
 7 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/apps/app/components/core/views/board-view/board-header.tsx b/apps/app/components/core/views/board-view/board-header.tsx
index 919bc36a3..d5b11f5f0 100644
--- a/apps/app/components/core/views/board-view/board-header.tsx
+++ b/apps/app/components/core/views/board-view/board-header.tsx
@@ -12,7 +12,7 @@ import useProjects from "hooks/use-projects";
 // component
 import { Avatar, Icon } from "components/ui";
 // icons
-import { ArrowsPointingInIcon, ArrowsPointingOutIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { PlusIcon } from "@heroicons/react/24/outline";
 import { getPriorityIcon, getStateGroupIcon } from "components/icons";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
@@ -56,10 +56,10 @@ export const BoardHeader: React.FC<Props> = ({
   );
 
   const { data: members } = useSWR(
-    workspaceSlug && projectId && selectedGroup === "created_by"
+    workspaceSlug && projectId && (selectedGroup === "created_by" || selectedGroup === "assignees")
       ? PROJECT_MEMBERS(projectId.toString())
       : null,
-    workspaceSlug && projectId && selectedGroup === "created_by"
+    workspaceSlug && projectId && (selectedGroup === "created_by" || selectedGroup === "assignees")
       ? () => projectService.projectMembers(workspaceSlug.toString(), projectId.toString())
       : null
   );
@@ -79,9 +79,11 @@ export const BoardHeader: React.FC<Props> = ({
       case "project":
         title = projects?.find((p) => p.id === groupTitle)?.name ?? "None";
         break;
+      case "assignees":
       case "created_by":
         const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        title = member?.display_name ?? "";
+        title = member ? member.display_name : "None";
+
         break;
     }
 
@@ -122,9 +124,10 @@ export const BoardHeader: React.FC<Props> = ({
           />
         );
         break;
+      case "assignees":
       case "created_by":
         const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        icon = <Avatar user={member} height="24px" width="24px" fontSize="12px" />;
+        icon = member ? <Avatar user={member} height="24px" width="24px" fontSize="12px" /> : <></>;
 
         break;
     }
diff --git a/apps/app/components/core/views/issues-view.tsx b/apps/app/components/core/views/issues-view.tsx
index 5f33a6cb0..ffa3f8165 100644
--- a/apps/app/components/core/views/issues-view.tsx
+++ b/apps/app/components/core/views/issues-view.tsx
@@ -514,7 +514,8 @@ export const IssuesView: React.FC<Props> = ({
         dragDisabled={
           selectedGroup === "created_by" ||
           selectedGroup === "labels" ||
-          selectedGroup === "state_detail.group"
+          selectedGroup === "state_detail.group" ||
+          selectedGroup === "assignees"
         }
         emptyState={{
           title: cycleId
diff --git a/apps/app/components/core/views/list-view/single-list.tsx b/apps/app/components/core/views/list-view/single-list.tsx
index 5efc93f3c..03ef77727 100644
--- a/apps/app/components/core/views/list-view/single-list.tsx
+++ b/apps/app/components/core/views/list-view/single-list.tsx
@@ -94,9 +94,10 @@ export const SingleList: React.FC<Props> = ({
       case "project":
         title = projects?.find((p) => p.id === groupTitle)?.name ?? "None";
         break;
+      case "assignees":
       case "created_by":
         const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        title = member?.display_name ?? "";
+        title = member ? member.display_name : "None";
         break;
     }
 
@@ -137,9 +138,10 @@ export const SingleList: React.FC<Props> = ({
           />
         );
         break;
+      case "assignees":
       case "created_by":
         const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        icon = <Avatar user={member} height="24px" width="24px" fontSize="12px" />;
+        icon = member ? <Avatar user={member} height="24px" width="24px" fontSize="12px" /> : <></>;
 
         break;
     }
diff --git a/apps/app/components/issues/my-issues/my-issues-view-options.tsx b/apps/app/components/issues/my-issues/my-issues-view-options.tsx
index 4c2a4bed1..7c6a6fe44 100644
--- a/apps/app/components/issues/my-issues/my-issues-view-options.tsx
+++ b/apps/app/components/issues/my-issues/my-issues-view-options.tsx
@@ -156,7 +156,11 @@ export const MyIssuesViewOptions: React.FC = () => {
                             >
                               {GROUP_BY_OPTIONS.map((option) => {
                                 if (issueView === "kanban" && option.key === null) return null;
-                                if (option.key === "state" || option.key === "created_by")
+                                if (
+                                  option.key === "state" ||
+                                  option.key === "created_by" ||
+                                  option.key === "assignees"
+                                )
                                   return null;
 
                                 return (
diff --git a/apps/app/components/profile/profile-issues-view-options.tsx b/apps/app/components/profile/profile-issues-view-options.tsx
index 382f8f220..38faf500b 100644
--- a/apps/app/components/profile/profile-issues-view-options.tsx
+++ b/apps/app/components/profile/profile-issues-view-options.tsx
@@ -183,7 +183,11 @@ export const ProfileIssuesViewOptions: React.FC = () => {
                             >
                               {GROUP_BY_OPTIONS.map((option) => {
                                 if (issueView === "kanban" && option.key === null) return null;
-                                if (option.key === "state" || option.key === "created_by")
+                                if (
+                                  option.key === "state" ||
+                                  option.key === "created_by" ||
+                                  option.key === "assignees"
+                                )
                                   return null;
 
                                 return (
diff --git a/apps/app/constants/issue.ts b/apps/app/constants/issue.ts
index 3665f180c..4e8bb0944 100644
--- a/apps/app/constants/issue.ts
+++ b/apps/app/constants/issue.ts
@@ -7,6 +7,7 @@ export const GROUP_BY_OPTIONS: Array<{
   { name: "Priority", key: "priority" },
   { name: "Project", key: "project" },
   { name: "Labels", key: "labels" },
+  { name: "Assignees", key: "assignees" },
   { name: "Created by", key: "created_by" },
   { name: "None", key: null },
 ];
diff --git a/apps/app/types/issues.d.ts b/apps/app/types/issues.d.ts
index edbe512a6..79ebb04f4 100644
--- a/apps/app/types/issues.d.ts
+++ b/apps/app/types/issues.d.ts
@@ -234,6 +234,7 @@ export type TIssueGroupByOptions =
   | "created_by"
   | "state_detail.group"
   | "project"
+  | "assignees"
   | null;
 
 export type TIssueOrderByOptions =

From ab4a17c17883a1b382d89eee359730adfec91fba Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 24 Aug 2023 23:07:20 +0530
Subject: [PATCH 08/70] chore: custom CSS shadow variables added (#1969)

* chore: custom shadow variables added

* fix: 2xs shade

---------

Co-authored-by: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>
---
 apps/app/styles/globals.css | 39 +++++++++++++++++++++++++++++++++++++
 apps/app/tailwind.config.js | 25 ++++++++++++++++++++----
 2 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css
index b8f662902..cdb67cbc5 100644
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@@ -58,6 +58,25 @@
     --color-border-300: 212, 212, 212; /* strong border- 1 */
     --color-border-400: 185, 185, 185; /* strong border- 2 */
 
+    --color-shadow-2xs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06),
+      0px 1px 2px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.14);
+    --color-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 8px -1px rgba(16, 24, 40, 0.1);
+    --color-shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02),
+      0px 1px 12px 0px rgba(0, 0, 0, 0.12);
+    --color-shadow-rg: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
+      0px 1px 12px 0px rgba(16, 24, 40, 0.04);
+    --color-shadow-md: 0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 16px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-lg: 0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
+      0px 1px 24px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
+      0px 0px 52px 0px rgba(16, 24, 40, 0.16);
+    --color-shadow-2xl: 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
+      0px 12px 24px 0px rgba(16, 24, 40, 0.12), 0px 1px 32px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-3xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
+      0px 1px 48px 0px rgba(16, 24, 40, 0.12);
+
     --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
     --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
     --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
@@ -71,6 +90,16 @@
     --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
     --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
     --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
+
+    --color-sidebar-shadow-2xs: var(--color-shadow-2xs);
+    --color-sidebar-shadow-xs: var(--color-shadow-xs);
+    --color-sidebar-shadow-sm: var(--color-shadow-sm);
+    --color-sidebar-shadow-rg: var(--color-shadow-rg);
+    --color-sidebar-shadow-md: var(--color-shadow-md);
+    --color-sidebar-shadow-lg: var(--color-shadow-lg);
+    --color-sidebar-shadow-xl: var(--color-shadow-xl);
+    --color-sidebar-shadow-2xl: var(--color-shadow-2xl);
+    --color-sidebar-shadow-3xl: var(--color-shadow-3xl);
   }
 
   [data-theme="light"],
@@ -113,6 +142,16 @@
     --color-background-100: 7, 7, 7; /* primary bg */
     --color-background-90: 11, 11, 11; /* secondary bg */
     --color-background-80: 23, 23, 23; /* tertiary bg */
+
+    --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
+    --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
+    --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
+    --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
   }
 
   [data-theme="dark"] {
diff --git a/apps/app/tailwind.config.js b/apps/app/tailwind.config.js
index 11e1946a5..0b7b5861a 100644
--- a/apps/app/tailwind.config.js
+++ b/apps/app/tailwind.config.js
@@ -5,6 +5,26 @@ module.exports = {
   content: ["./pages/**/*.tsx", "./components/**/*.tsx", "./layouts/**/*.tsx", "./ui/**/*.tsx"],
   theme: {
     extend: {
+      boxShadow: {
+        "custom-shadow-2xs": "var(--color-shadow-2xs)",
+        "custom-shadow-xs": "var(--color-shadow-xs)",
+        "custom-shadow-sm": "var(--color-shadow-sm)",
+        "custom-shadow-rg": "var(--color-shadow-rg)",
+        "custom-shadow-md": "var(--color-shadow-md)",
+        "custom-shadow-lg": "var(--color-shadow-lg)",
+        "custom-shadow-xl": "var(--color-shadow-xl)",
+        "custom-shadow-2xl": "var(--color-shadow-2xl)",
+        "custom-shadow-3xl": "var(--color-shadow-3xl)",
+        "custom-sidebar-shadow-2xs": "var(--color-sidebar-shadow-2xs)",
+        "custom-sidebar-shadow-xs": "var(--color-sidebar-shadow-xs)",
+        "custom-sidebar-shadow-sm": "var(--color-sidebar-shadow-sm)",
+        "custom-sidebar-shadow-rg": "var(--color-sidebar-shadow-rg)",
+        "custom-sidebar-shadow-md": "var(--color-sidebar-shadow-md)",
+        "custom-sidebar-shadow-lg": "var(--color-sidebar-shadow-lg)",
+        "custom-sidebar-shadow-xl": "var(--color-sidebar-shadow-xl)",
+        "custom-sidebar-shadow-2xl": "var(--color-sidebar-shadow-2xl)",
+        "custom-sidebar-shadow-3xl": "var(--color-sidebar-shadow-3xl)",
+      },
       colors: {
         custom: {
           primary: {
@@ -182,8 +202,5 @@ module.exports = {
       custom: ["Inter", "sans-serif"],
     },
   },
-  plugins: [
-    require("tailwindcss-animate"),
-    require("@tailwindcss/typography")
-  ],
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
 };

From fe1b0c1d73c76f66a6c4ac6b56df16ca6910cccf Mon Sep 17 00:00:00 2001
From: Henit Chobisa <chobisa.henit@gmail.com>
Date: Fri, 25 Aug 2023 12:12:07 +0530
Subject: [PATCH 09/70] [chore] Fixed Github Workflows for Building and
 Pushing, frontend, backend, proxy & plane-deploy  (#1959)

* chore: modified frontend github workflow

* chore: modified backend github workflows

* chore: added github workflow for build and push for plane-deploy

* chore: added github workflow for plane-proxy
---
 .github/workflows/push-image-backend.yml  | 68 ++++++++--------------
 .github/workflows/push-image-deploy.yml   | 57 ++++++++++++++++++
 .github/workflows/push-image-frontend.yml | 71 +++++++++--------------
 .github/workflows/push-image-proxy.yml    | 56 ++++++++++++++++++
 4 files changed, 164 insertions(+), 88 deletions(-)
 create mode 100644 .github/workflows/push-image-deploy.yml
 create mode 100644 .github/workflows/push-image-proxy.yml

diff --git a/.github/workflows/push-image-backend.yml b/.github/workflows/push-image-backend.yml
index 95d93f813..9ca34790b 100644
--- a/.github/workflows/push-image-backend.yml
+++ b/.github/workflows/push-image-backend.yml
@@ -1,12 +1,11 @@
 name: Build and Push Backend Docker Image
 
 on:
-  push:
-    branches:
-      - 'develop'
-      - 'master'
-    tags:
-      - '*'
+  pull_request:
+    types: [closed]
+    branches: [develop]
+  release:
+    types: [released]
 
 jobs:
   build_push_backend:
@@ -17,61 +16,42 @@ jobs:
       - name: Check out the repo
         uses: actions/checkout@v3.3.0
 
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2.1.0
-        with:
-          platforms: linux/arm64,linux/amd64
-
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2.5.0
 
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v2.1.0
-        with:
-          registry: "ghcr.io"
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
       - name: Login to Docker Hub
         uses: docker/login-action@v2.1.0
         with:
-          registry: "registry.hub.docker.com"
           username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_PASSWORD }}
-
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub)
-        id: ghmeta
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Pull Request
+        id: meta_pr
+        if: ${{ github.event_name == 'pull_request' }}
         uses: docker/metadata-action@v4.3.0
         with:
-          images: makeplane/plane-backend
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend
+          tags: type=raw,value=develop
 
-      - name: Extract metadata (tags, labels) for Docker (Github)
-        id: dkrmeta
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
+        id: meta
         uses: docker/metadata-action@v4.3.0
+        if: ${{ github.event_name == 'release' }}
         with:
-          images: ghcr.io/${{ github.repository }}-backend
-
-      - name: Build and Push to GitHub Container Registry
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: ./apiserver
-          file: ./apiserver/Dockerfile.api
-          platforms: linux/arm64,linux/amd64
-          push: true
-          cache-from: type=gha
-          cache-to: type=gha
-          tags: ${{ steps.ghmeta.outputs.tags }}
-          labels: ${{ steps.ghmeta.outputs.labels }}
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend
+          tags: |
+            type=ref,event=tag
 
       - name: Build and Push to Docker Hub
         uses: docker/build-push-action@v4.0.0
         with:
           context: ./apiserver
           file: ./apiserver/Dockerfile.api
-          platforms: linux/arm64,linux/amd64
+          platforms: linux/amd64
           push: true
-          cache-from: type=gha
-          cache-to: type=gha
-          tags: ${{ steps.dkrmeta.outputs.tags }}
-          labels: ${{ steps.dkrmeta.outputs.labels }}
+          tags: ${{ github.event_name == 'release' && steps.meta.outputs.tags || steps.meta_pr.outputs.tags }}
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
 
diff --git a/.github/workflows/push-image-deploy.yml b/.github/workflows/push-image-deploy.yml
new file mode 100644
index 000000000..4a689bd29
--- /dev/null
+++ b/.github/workflows/push-image-deploy.yml
@@ -0,0 +1,57 @@
+name: Build and Push Plane Deploy Docker Image
+
+on:
+  pull_request:
+    types: [closed]
+    branches: [develop]
+  release:
+    types: [released]
+
+jobs:
+  build_push_plane_deploy:
+    name: Build and Push Plane Deploy Docker Image
+    runs-on: ubuntu-20.04
+
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3.3.0
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.1.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Pull Request
+        id: meta_pr
+        if: ${{ github.event_name == 'pull_request' }}
+        uses: docker/metadata-action@v4.3.0
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-deploy
+          tags: type=raw,value=develop
+
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
+        id: meta
+        uses: docker/metadata-action@v4.3.0
+        if: ${{ github.event_name == 'release' }}
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-deploy
+          tags: |
+            type=ref,event=tag
+
+      - name: Build and Push to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./apps/space/Dockerfile.space
+          platforms: linux/amd64
+          push: true
+          tags: ${{ github.event_name == 'release' && steps.meta.outputs.tags || steps.meta_pr.outputs.tags }}
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
diff --git a/.github/workflows/push-image-frontend.yml b/.github/workflows/push-image-frontend.yml
index cbd742511..69d24e128 100644
--- a/.github/workflows/push-image-frontend.yml
+++ b/.github/workflows/push-image-frontend.yml
@@ -1,77 +1,60 @@
 name: Build and Push Frontend Docker Image
 
 on:
-  push:
-    branches:
-      - 'develop'
-      - 'master'
-    tags:
-      - '*'
+  pull_request:
+    types: [closed]
+    branches: [develop]
+  release:
+    types: [released]
 
 jobs:
   build_push_frontend:
     name: Build Frontend Docker Image
     runs-on: ubuntu-20.04
-
     steps:
       - name: Check out the repo
         uses: actions/checkout@v3.3.0
 
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2.1.0
-        with:
-          platforms: linux/arm64,linux/amd64
-
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2.5.0
-
-      - name: Login to Github Container Registry
-        uses: docker/login-action@v2.1.0
-        with:
-          registry: "ghcr.io"
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
+    
+      - name: Setup .npmrc for repository
+        run: |
+            echo -e "@tiptap-pro:registry=https://registry.tiptap.dev/\n//registry.tiptap.dev/:_authToken=${{ secrets.TIPTAP_TOKEN }}" > .npmrc
 
       - name: Login to Docker Hub
         uses: docker/login-action@v2.1.0
         with:
-          registry: "registry.hub.docker.com"
           username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_PASSWORD }}
-      
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub)
-        id: ghmeta
-        uses: docker/metadata-action@v4.3.0
-        with:
-          images: makeplane/plane-frontend
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
 
-      - name: Extract metadata (tags, labels) for Docker (Github)
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
         id: meta
+        if: ${{ github.event_name == 'release' }}
         uses: docker/metadata-action@v4.3.0
         with:
-          images: ghcr.io/${{ github.repository }}-frontend
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend
+          tags: |
+            type=ref,event=tag
 
-      - name: Build and Push to GitHub Container Registry
-        uses: docker/build-push-action@v4.0.0
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Pull Request
+        id: meta_pr
+        if: ${{ github.event_name == 'pull_request' }}
+        uses: docker/metadata-action@v4.3.0
         with:
-          context: .
-          file: ./apps/app/Dockerfile.web
-          platforms: linux/arm64,linux/amd64
-          push: true
-          cache-from: type=gha
-          cache-to: type=gha
-          tags: ${{ steps.ghmeta.outputs.tags }}
-          labels: ${{ steps.ghmeta.outputs.labels }}
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend
+          tags: type=raw,value=develop
       
       - name: Build and Push to Docker Container Registry
         uses: docker/build-push-action@v4.0.0
         with:
           context: .
           file: ./apps/app/Dockerfile.web
-          platforms: linux/arm64,linux/amd64
+          platforms: linux/amd64
+          tags: ${{ github.event_name == 'release' && steps.meta.outputs.tags || steps.meta_pr.outputs.tags }}
           push: true
-          cache-from: type=gha
-          cache-to: type=gha
-          tags: ${{ steps.dkrmeta.outputs.tags }}
-          labels: ${{ steps.dkrmeta.outputs.labels }}
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
 
diff --git a/.github/workflows/push-image-proxy.yml b/.github/workflows/push-image-proxy.yml
new file mode 100644
index 000000000..e053c8aa9
--- /dev/null
+++ b/.github/workflows/push-image-proxy.yml
@@ -0,0 +1,56 @@
+name: Build and Push Proxy Docker Image
+
+on:
+  pull_request:
+    types: [closed]
+    branches: [develop]
+  release:
+    types: [released]
+
+jobs:
+  build_push_proxy:
+    name: Build and Push Proxy Docker Image
+    runs-on: ubuntu-20.04
+
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3.3.0
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.1.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Pull Request
+        id: meta_pr
+        if: ${{ github.event_name == 'pull_request' }}
+        uses: docker/metadata-action@v4.3.0
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy
+          tags: type=raw,value=develop
+
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
+        id: meta
+        uses: docker/metadata-action@v4.3.0
+        if: ${{ github.event_name == 'release' }}
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy
+          tags: |
+            type=ref,event=tag
+
+      - name: Build and Push to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: ./nginx
+          file: ./nginx/Dockerfile
+          platforms: linux/amd64
+          push: true
+          tags: ${{ github.event_name == 'release' && steps.meta.outputs.tags || steps.meta_pr.outputs.tags }}
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}

From bf0d0503b2bf41c091405372a3110eb2658e2937 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 25 Aug 2023 12:17:17 +0530
Subject: [PATCH 10/70] fix: redirection after deleting a project (#1970)

Co-authored-by: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>
---
 apps/app/components/project/delete-project-modal.tsx          | 4 +++-
 .../[workspaceSlug]/projects/[projectId]/settings/index.tsx   | 3 ---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/apps/app/components/project/delete-project-modal.tsx b/apps/app/components/project/delete-project-modal.tsx
index 5b271d99d..d6f7ba0f0 100644
--- a/apps/app/components/project/delete-project-modal.tsx
+++ b/apps/app/components/project/delete-project-modal.tsx
@@ -42,7 +42,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
   user,
 }) => {
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
   const { setToastAlert } = useToast();
 
@@ -81,6 +81,8 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
         );
 
         if (onSuccess) onSuccess();
+
+        if (projectId && projectId === data.id) router.push(`/${workspaceSlug}/projects`);
       })
       .catch(() =>
         setToastAlert({
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index 4287cee5d..57bf4fa3c 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -183,9 +183,6 @@ const GeneralSettings: NextPage = () => {
         data={projectDetails ?? null}
         isOpen={Boolean(selectProject)}
         onClose={() => setSelectedProject(null)}
-        onSuccess={() => {
-          router.push(`/${workspaceSlug}/projects`);
-        }}
         user={user}
       />
       <form onSubmit={handleSubmit(onSubmit)} className="p-8">

From d8b8c903f212f54aed82b1cbcddae8da4363ff53 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 25 Aug 2023 12:21:11 +0530
Subject: [PATCH 11/70] fix: issue activity redirection to cycle and module
 (#1973)

Co-authored-by: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>
---
 apps/app/components/core/activity.tsx | 89 ++++++++++++++++++++++-----
 1 file changed, 75 insertions(+), 14 deletions(-)

diff --git a/apps/app/components/core/activity.tsx b/apps/app/components/core/activity.tsx
index 7ddf9c33c..1b9de8d25 100644
--- a/apps/app/components/core/activity.tsx
+++ b/apps/app/components/core/activity.tsx
@@ -53,7 +53,11 @@ const UserLink = ({ activity }: { activity: IIssueActivity }) => {
 
 const activityDetails: {
   [key: string]: {
-    message: (activity: IIssueActivity, showIssue: boolean) => React.ReactNode;
+    message: (
+      activity: IIssueActivity,
+      showIssue: boolean,
+      workspaceSlug: string
+    ) => React.ReactNode;
     icon: React.ReactNode;
   };
 } = {
@@ -173,26 +177,50 @@ const activityDetails: {
     icon: <BlockedIcon height="12" width="12" color="#6b7280" />,
   },
   cycles: {
-    message: (activity) => {
+    message: (activity, showIssue, workspaceSlug) => {
       if (activity.verb === "created")
         return (
           <>
             added this issue to the cycle{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+            <a
+              href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              {activity.new_value}
+              <Icon iconName="launch" className="!text-xs" />
+            </a>
           </>
         );
       else if (activity.verb === "updated")
         return (
           <>
             set the cycle to{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+            <a
+              href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              {activity.new_value}
+              <Icon iconName="launch" className="!text-xs" />
+            </a>
           </>
         );
       else
         return (
           <>
             removed the issue from the cycle{" "}
-            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+            <a
+              href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              {activity.old_value}
+              <Icon iconName="launch" className="!text-xs" />
+            </a>
           </>
         );
     },
@@ -351,26 +379,50 @@ const activityDetails: {
     icon: <Icon iconName="link" className="!text-sm" aria-hidden="true" />,
   },
   modules: {
-    message: (activity) => {
+    message: (activity, showIssue, workspaceSlug) => {
       if (activity.verb === "created")
         return (
           <>
             added this issue to the module{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+            <a
+              href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              {activity.new_value}
+              <Icon iconName="launch" className="!text-xs" />
+            </a>
           </>
         );
       else if (activity.verb === "updated")
         return (
           <>
             set the module to{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+            <a
+              href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              {activity.new_value}
+              <Icon iconName="launch" className="!text-xs" />
+            </a>
           </>
         );
       else
         return (
           <>
             removed the issue from the module{" "}
-            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+            <a
+              href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              {activity.old_value}
+              <Icon iconName="launch" className="!text-xs" />
+            </a>
           </>
         );
     },
@@ -538,8 +590,17 @@ export const ActivityMessage = ({
 }: {
   activity: IIssueActivity;
   showIssue?: boolean;
-}) => (
-  <>
-    {activityDetails[activity.field as keyof typeof activityDetails]?.message(activity, showIssue)}
-  </>
-);
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <>
+      {activityDetails[activity.field as keyof typeof activityDetails]?.message(
+        activity,
+        showIssue,
+        workspaceSlug?.toString() ?? ""
+      )}
+    </>
+  );
+};

From 1530993b8422c3a9efb1ad20009ad1bcf4f0677c Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 25 Aug 2023 12:42:12 +0530
Subject: [PATCH 12/70] fix: tiptap editor max width (#1968)

Co-authored-by: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>
---
 apps/app/components/tiptap/index.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/app/components/tiptap/index.tsx b/apps/app/components/tiptap/index.tsx
index 418449c08..df286c86f 100644
--- a/apps/app/components/tiptap/index.tsx
+++ b/apps/app/components/tiptap/index.tsx
@@ -73,9 +73,10 @@ const Tiptap = (props: ITiptapRichTextEditor) => {
     }, 500);
   }, 1000);
 
-  const editorClassNames = `relative w-full max-w-screen-lg sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md
-      ${noBorder ? "" : "border border-custom-border-200"} ${borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
-    } ${customClassName}`;
+  const editorClassNames = `relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md
+      ${noBorder ? "" : "border border-custom-border-200"} ${
+    borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
+  } ${customClassName}`;
 
   if (!editor) return null;
   editorRef.current = editor;

From 0525e7d6b3f6cfc91af73d70a4ffe92ff322c493 Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Fri, 25 Aug 2023 13:38:50 +0530
Subject: [PATCH 13/70] fix: workspace members reordering (#1978)

---
 .../[workspaceSlug]/settings/members.tsx      | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/app/pages/[workspaceSlug]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/settings/members.tsx
index 0801c84b7..9090e1c17 100644
--- a/apps/app/pages/[workspaceSlug]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/members.tsx
@@ -69,19 +69,6 @@ const MembersSettings: NextPage = () => {
   );
 
   const members = [
-    ...(workspaceMembers?.map((item) => ({
-      id: item.id,
-      memberId: item.member?.id,
-      avatar: item.member?.avatar,
-      first_name: item.member?.first_name,
-      last_name: item.member?.last_name,
-      email: item.member?.email,
-      display_name: item.member?.display_name,
-      role: item.role,
-      status: true,
-      member: true,
-      accountCreated: true,
-    })) || []),
     ...(workspaceInvitations?.map((item) => ({
       id: item.id,
       memberId: item.id,
@@ -95,6 +82,19 @@ const MembersSettings: NextPage = () => {
       member: false,
       accountCreated: item?.accepted ? false : true,
     })) || []),
+    ...(workspaceMembers?.map((item) => ({
+      id: item.id,
+      memberId: item.member?.id,
+      avatar: item.member?.avatar,
+      first_name: item.member?.first_name,
+      last_name: item.member?.last_name,
+      email: item.member?.email,
+      display_name: item.member?.display_name,
+      role: item.role,
+      status: true,
+      member: true,
+      accountCreated: true,
+    })) || []),
   ];
 
   const currentUser = workspaceMembers?.find((item) => item.member?.id === user?.id);

From fd8c368c97907c44bfe52c96a22b9c1cf993f8e9 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Fri, 25 Aug 2023 15:16:15 +0530
Subject: [PATCH 14/70] fix: add member role and member status in project
 create response (#1962)

---
 apiserver/plane/api/views/project.py | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apiserver/plane/api/views/project.py b/apiserver/plane/api/views/project.py
index a693d535b..3e5ca1c4b 100644
--- a/apiserver/plane/api/views/project.py
+++ b/apiserver/plane/api/views/project.py
@@ -287,7 +287,10 @@ class ProjectViewSet(BaseViewSet):
                 )
 
                 data = serializer.data
+                # Additional fields of the member
                 data["sort_order"] = project_member.sort_order
+                data["member_role"] = project_member.role
+                data["is_member"] = True
                 return Response(data, status=status.HTTP_201_CREATED)
             return Response(
                 serializer.errors,

From 93fa093a79c56781ab9400fab5e3c49633dc9b61 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Fri, 25 Aug 2023 17:23:07 +0530
Subject: [PATCH 15/70] dev: update python runtime (#1981)

---
 apiserver/runtime.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apiserver/runtime.txt b/apiserver/runtime.txt
index fefae710d..d5831c54f 100644
--- a/apiserver/runtime.txt
+++ b/apiserver/runtime.txt
@@ -1 +1 @@
-python-3.11.4
\ No newline at end of file
+python-3.11.5
\ No newline at end of file

From 2b168edd996f70ac3e040c03ecc3f59e67348a15 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 25 Aug 2023 17:41:23 +0530
Subject: [PATCH 16/70] feat: peek overview for spreadsheet issues (#1979)

* feat: peak overview for issues

* fix: peek spelling

* chore: truncate issue property labels

* style: full screen view designed

* chore: add comment section

* chore: copy link and delete options added

* chore: update icons

---------

Co-authored-by: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>
---
 .../app/components/core/views/issues-view.tsx |   2 +-
 .../views/spreadsheet-view/single-issue.tsx   | 374 +++++++++---------
 .../spreadsheet-view/spreadsheet-view.tsx     |   2 +-
 .../components/inbox/inbox-issue-activity.tsx | 106 +++++
 .../components/inbox/inbox-main-content.tsx   |  17 +-
 apps/app/components/inbox/index.ts            |   1 +
 apps/app/components/issues/activity.tsx       |  70 +---
 .../components/issues/comment/add-comment.tsx |  65 +--
 .../components/issues/description-form.tsx    |  81 ++--
 apps/app/components/issues/index.ts           |   1 +
 apps/app/components/issues/main-content.tsx   | 101 ++++-
 .../peek-overview/full-screen-peek-view.tsx   |  79 ++++
 .../issues/peek-overview/header.tsx           | 133 +++++++
 .../components/issues/peek-overview/index.ts  |   7 +
 .../issues/peek-overview/issue-activity.tsx   |  90 +++++
 .../issues/peek-overview/issue-details.tsx    |  34 ++
 .../issues/peek-overview/issue-properties.tsx | 203 ++++++++++
 .../issues/peek-overview/layout.tsx           | 107 +++++
 .../issues/peek-overview/side-peek-view.tsx   |  75 ++++
 .../issues/sidebar-select/assignee.tsx        |  61 +--
 .../issues/sidebar-select/estimate.tsx        |  83 ++--
 .../issues/sidebar-select/priority.tsx        |  87 ++--
 .../issues/sidebar-select/state.tsx           | 107 +++--
 apps/app/components/issues/sidebar.tsx        | 129 +++---
 24 files changed, 1410 insertions(+), 605 deletions(-)
 create mode 100644 apps/app/components/inbox/inbox-issue-activity.tsx
 create mode 100644 apps/app/components/issues/peek-overview/full-screen-peek-view.tsx
 create mode 100644 apps/app/components/issues/peek-overview/header.tsx
 create mode 100644 apps/app/components/issues/peek-overview/index.ts
 create mode 100644 apps/app/components/issues/peek-overview/issue-activity.tsx
 create mode 100644 apps/app/components/issues/peek-overview/issue-details.tsx
 create mode 100644 apps/app/components/issues/peek-overview/issue-properties.tsx
 create mode 100644 apps/app/components/issues/peek-overview/layout.tsx
 create mode 100644 apps/app/components/issues/peek-overview/side-peek-view.tsx

diff --git a/apps/app/components/core/views/issues-view.tsx b/apps/app/components/core/views/issues-view.tsx
index ffa3f8165..755b37aa1 100644
--- a/apps/app/components/core/views/issues-view.tsx
+++ b/apps/app/components/core/views/issues-view.tsx
@@ -548,7 +548,7 @@ export const IssuesView: React.FC<Props> = ({
         }}
         handleOnDragEnd={handleOnDragEnd}
         handleIssueAction={handleIssueAction}
-        openIssuesListModal={openIssuesListModal ? openIssuesListModal : null}
+        openIssuesListModal={openIssuesListModal ?? null}
         removeIssue={cycleId ? removeIssueFromCycle : moduleId ? removeIssueFromModule : null}
         trashBox={trashBox}
         setTrashBox={setTrashBox}
diff --git a/apps/app/components/core/views/spreadsheet-view/single-issue.tsx b/apps/app/components/core/views/spreadsheet-view/single-issue.tsx
index 7e8fd0d26..11a8c42c5 100644
--- a/apps/app/components/core/views/spreadsheet-view/single-issue.tsx
+++ b/apps/app/components/core/views/spreadsheet-view/single-issue.tsx
@@ -1,12 +1,12 @@
 import React, { useCallback, useState } from "react";
 
-import Link from "next/link";
 import { useRouter } from "next/router";
 
 import { mutate } from "swr";
 
 // components
 import {
+  IssuePeekOverview,
   ViewAssigneeSelect,
   ViewDueDateSelect,
   ViewEstimateSelect,
@@ -75,6 +75,10 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
   nestingLevel,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+
+  // issue peek overview
+  const [issuePeekOverview, setIssuePeekOverview] = useState(false);
+
   const router = useRouter();
 
   const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
@@ -95,7 +99,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         ? VIEW_ISSUES(viewId.toString(), params)
         : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);
 
-      if (issue.parent) {
+      if (issue.parent)
         mutate<ISubIssueResponse>(
           SUB_ISSUES(issue.parent.toString()),
           (prevData) => {
@@ -116,7 +120,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           },
           false
         );
-      } else {
+      else
         mutate<IIssue[]>(
           fetchKey,
           (prevData) =>
@@ -131,7 +135,6 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             }),
           false
         );
-      }
 
       issuesService
         .patchIssue(
@@ -179,190 +182,203 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
-    <div
-      className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
-      style={{ gridTemplateColumns }}
-    >
-      <div className="flex gap-1.5 items-center px-4 sticky z-[1] left-0 text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full">
-        <div className="flex gap-1.5 items-center" style={issue.parent ? { paddingLeft } : {}}>
-          <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100 w-14">
-            {properties.key && (
-              <span className="flex items-center justify-center opacity-100 group-hover:opacity-0">
-                {issue.project_detail?.identifier}-{issue.sequence_id}
-              </span>
-            )}
-            {!isNotAllowed && !disableUserActions && (
-              <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
-                <Popover2
-                  isOpen={isOpen}
-                  canEscapeKeyClose
-                  onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
-                  content={
-                    <div
-                      className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-200 bg-custom-background-90`}
-                    >
-                      <button
-                        type="button"
-                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                        onClick={() => {
-                          handleEditIssue(issue);
-                          setIsOpen(false);
-                        }}
+    <>
+      <IssuePeekOverview
+        handleDeleteIssue={() => handleDeleteIssue(issue)}
+        handleUpdateIssue={async (formData) => partialUpdateIssue(formData, issue)}
+        issue={issue}
+        isOpen={issuePeekOverview}
+        onClose={() => setIssuePeekOverview(false)}
+        workspaceSlug={workspaceSlug?.toString() ?? ""}
+        readOnly={isNotAllowed}
+      />
+      <div
+        className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
+        style={{ gridTemplateColumns }}
+      >
+        <div className="flex gap-1.5 items-center px-4 sticky z-[1] left-0 text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full">
+          <div className="flex gap-1.5 items-center" style={issue.parent ? { paddingLeft } : {}}>
+            <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100 w-14">
+              {properties.key && (
+                <span className="flex items-center justify-center opacity-100 group-hover:opacity-0">
+                  {issue.project_detail?.identifier}-{issue.sequence_id}
+                </span>
+              )}
+              {!isNotAllowed && !disableUserActions && (
+                <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
+                  <Popover2
+                    isOpen={isOpen}
+                    canEscapeKeyClose
+                    onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
+                    content={
+                      <div
+                        className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-200 bg-custom-background-90`}
                       >
-                        <div className="flex items-center justify-start gap-2">
-                          <PencilIcon className="h-4 w-4" />
-                          <span>Edit issue</span>
-                        </div>
-                      </button>
+                        <button
+                          type="button"
+                          className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                          onClick={() => {
+                            handleEditIssue(issue);
+                            setIsOpen(false);
+                          }}
+                        >
+                          <div className="flex items-center justify-start gap-2">
+                            <PencilIcon className="h-4 w-4" />
+                            <span>Edit issue</span>
+                          </div>
+                        </button>
 
-                      <button
-                        type="button"
-                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                        onClick={() => {
-                          handleDeleteIssue(issue);
-                          setIsOpen(false);
-                        }}
-                      >
-                        <div className="flex items-center justify-start gap-2">
-                          <TrashIcon className="h-4 w-4" />
-                          <span>Delete issue</span>
-                        </div>
-                      </button>
+                        <button
+                          type="button"
+                          className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                          onClick={() => {
+                            handleDeleteIssue(issue);
+                            setIsOpen(false);
+                          }}
+                        >
+                          <div className="flex items-center justify-start gap-2">
+                            <TrashIcon className="h-4 w-4" />
+                            <span>Delete issue</span>
+                          </div>
+                        </button>
 
-                      <button
-                        type="button"
-                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                        onClick={() => {
-                          handleCopyText();
-                          setIsOpen(false);
-                        }}
-                      >
-                        <div className="flex items-center justify-start gap-2">
-                          <LinkIcon className="h-4 w-4" />
-                          <span>Copy issue link</span>
-                        </div>
-                      </button>
-                    </div>
-                  }
-                  placement="bottom-start"
+                        <button
+                          type="button"
+                          className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                          onClick={() => {
+                            handleCopyText();
+                            setIsOpen(false);
+                          }}
+                        >
+                          <div className="flex items-center justify-start gap-2">
+                            <LinkIcon className="h-4 w-4" />
+                            <span>Copy issue link</span>
+                          </div>
+                        </button>
+                      </div>
+                    }
+                    placement="bottom-start"
+                  >
+                    <EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
+                  </Popover2>
+                </div>
+              )}
+            </div>
+
+            {issue.sub_issues_count > 0 && (
+              <div className="h-6 w-6 flex justify-center items-center">
+                <button
+                  className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
+                  onClick={() => handleToggleExpand(issue.id)}
                 >
-                  <EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
-                </Popover2>
+                  <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
+                </button>
               </div>
             )}
           </div>
 
-          {issue.sub_issues_count > 0 && (
-            <div className="h-6 w-6 flex justify-center items-center">
-              <button
-                className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
-                onClick={() => handleToggleExpand(issue.id)}
-              >
-                <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
-              </button>
-            </div>
-          )}
-        </div>
-
-        <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
-          <a className="truncate text-custom-text-100 cursor-pointer w-full text-[0.825rem]">
+          <button
+            type="button"
+            className="truncate text-custom-text-100 text-left cursor-pointer w-full text-[0.825rem]"
+            onClick={() => setIssuePeekOverview(true)}
+          >
             {issue.name}
-          </a>
-        </Link>
+          </button>
+        </div>
+        {properties.state && (
+          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+            <ViewStateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              position="left"
+              className="max-w-full"
+              tooltipPosition={tooltipPosition}
+              customButton
+              user={user}
+              isNotAllowed={isNotAllowed}
+            />
+          </div>
+        )}
+        {properties.priority && (
+          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+            <ViewPrioritySelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              position="left"
+              tooltipPosition={tooltipPosition}
+              noBorder
+              user={user}
+              isNotAllowed={isNotAllowed}
+            />
+          </div>
+        )}
+        {properties.assignee && (
+          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+            <ViewAssigneeSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              position="left"
+              tooltipPosition={tooltipPosition}
+              customButton
+              user={user}
+              isNotAllowed={isNotAllowed}
+            />
+          </div>
+        )}
+        {properties.labels && (
+          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+            <ViewIssueLabel issue={issue} maxRender={1} />
+          </div>
+        )}
+
+        {properties.start_date && (
+          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+            <ViewStartDateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              tooltipPosition={tooltipPosition}
+              noBorder
+              user={user}
+              isNotAllowed={isNotAllowed}
+            />
+          </div>
+        )}
+
+        {properties.due_date && (
+          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+            <ViewDueDateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              tooltipPosition={tooltipPosition}
+              noBorder
+              user={user}
+              isNotAllowed={isNotAllowed}
+            />
+          </div>
+        )}
+        {properties.estimate && (
+          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+            <ViewEstimateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              position="left"
+              tooltipPosition={tooltipPosition}
+              user={user}
+              isNotAllowed={isNotAllowed}
+            />
+          </div>
+        )}
+        {properties.created_on && (
+          <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+            {renderLongDetailDateFormat(issue.created_at)}
+          </div>
+        )}
+        {properties.updated_on && (
+          <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+            {renderLongDetailDateFormat(issue.updated_at)}
+          </div>
+        )}
       </div>
-      {properties.state && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          <ViewStateSelect
-            issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            position="left"
-            className="max-w-full"
-            tooltipPosition={tooltipPosition}
-            customButton
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        </div>
-      )}
-      {properties.priority && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          <ViewPrioritySelect
-            issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            position="left"
-            tooltipPosition={tooltipPosition}
-            noBorder
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        </div>
-      )}
-      {properties.assignee && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          <ViewAssigneeSelect
-            issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            position="left"
-            tooltipPosition={tooltipPosition}
-            customButton
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        </div>
-      )}
-      {properties.labels && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          <ViewIssueLabel issue={issue} maxRender={1} />
-        </div>
-      )}
-
-      {properties.start_date && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          <ViewStartDateSelect
-            issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            tooltipPosition={tooltipPosition}
-            noBorder
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        </div>
-      )}
-
-      {properties.due_date && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          <ViewDueDateSelect
-            issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            tooltipPosition={tooltipPosition}
-            noBorder
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        </div>
-      )}
-      {properties.estimate && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          <ViewEstimateSelect
-            issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            position="left"
-            tooltipPosition={tooltipPosition}
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        </div>
-      )}
-      {properties.created_on && (
-        <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          {renderLongDetailDateFormat(issue.created_at)}
-        </div>
-      )}
-      {properties.updated_on && (
-        <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          {renderLongDetailDateFormat(issue.updated_at)}
-        </div>
-      )}
-    </div>
+    </>
   );
 };
diff --git a/apps/app/components/core/views/spreadsheet-view/spreadsheet-view.tsx b/apps/app/components/core/views/spreadsheet-view/spreadsheet-view.tsx
index a4f426a23..0b2e785d6 100644
--- a/apps/app/components/core/views/spreadsheet-view/spreadsheet-view.tsx
+++ b/apps/app/components/core/views/spreadsheet-view/spreadsheet-view.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 
 // components
 import { SpreadsheetColumns, SpreadsheetIssues } from "components/core";
-import { CustomMenu, Icon, Spinner } from "components/ui";
+import { CustomMenu, Spinner } from "components/ui";
 // hooks
 import useIssuesProperties from "hooks/use-issue-properties";
 import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
diff --git a/apps/app/components/inbox/inbox-issue-activity.tsx b/apps/app/components/inbox/inbox-issue-activity.tsx
new file mode 100644
index 000000000..efa237162
--- /dev/null
+++ b/apps/app/components/inbox/inbox-issue-activity.tsx
@@ -0,0 +1,106 @@
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// components
+import { AddComment, IssueActivitySection } from "components/issues";
+// services
+import issuesService from "services/issues.service";
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+// types
+import { IIssue, IIssueComment } from "types";
+// fetch-keys
+import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+
+type Props = { issueDetails: IIssue };
+
+export const InboxIssueActivity: React.FC<Props> = ({ issueDetails }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, inboxIssueId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { user } = useUser();
+
+  const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
+    workspaceSlug && projectId && inboxIssueId
+      ? PROJECT_ISSUES_ACTIVITY(inboxIssueId.toString())
+      : null,
+    workspaceSlug && projectId && inboxIssueId
+      ? () =>
+          issuesService.getIssueActivities(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            inboxIssueId.toString()
+          )
+      : null
+  );
+
+  const handleCommentUpdate = async (comment: IIssueComment) => {
+    if (!workspaceSlug || !projectId || !inboxIssueId) return;
+
+    await issuesService
+      .patchIssueComment(
+        workspaceSlug as string,
+        projectId as string,
+        inboxIssueId as string,
+        comment.id,
+        comment,
+        user
+      )
+      .then(() => mutateIssueActivity());
+  };
+
+  const handleCommentDelete = async (commentId: string) => {
+    if (!workspaceSlug || !projectId || !inboxIssueId) return;
+
+    mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
+
+    await issuesService
+      .deleteIssueComment(
+        workspaceSlug as string,
+        projectId as string,
+        inboxIssueId as string,
+        commentId,
+        user
+      )
+      .then(() => mutateIssueActivity());
+  };
+
+  const handleAddComment = async (formData: IIssueComment) => {
+    if (!workspaceSlug || !issueDetails) return;
+
+    await issuesService
+      .createIssueComment(
+        workspaceSlug.toString(),
+        issueDetails.project,
+        issueDetails.id,
+        formData,
+        user
+      )
+      .then(() => {
+        mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Comment could not be posted. Please try again.",
+        })
+      );
+  };
+
+  return (
+    <div className="space-y-5">
+      <h3 className="text-lg text-custom-text-100">Comments/Activity</h3>
+      <IssueActivitySection
+        activity={issueActivity}
+        handleCommentUpdate={handleCommentUpdate}
+        handleCommentDelete={handleCommentDelete}
+      />
+      <AddComment onSubmit={handleAddComment} />
+    </div>
+  );
+};
diff --git a/apps/app/components/inbox/inbox-main-content.tsx b/apps/app/components/inbox/inbox-main-content.tsx
index bd4f0ab01..6d4a4337c 100644
--- a/apps/app/components/inbox/inbox-main-content.tsx
+++ b/apps/app/components/inbox/inbox-main-content.tsx
@@ -14,13 +14,8 @@ import inboxServices from "services/inbox.service";
 import useInboxView from "hooks/use-inbox-view";
 import useUserAuth from "hooks/use-user-auth";
 // components
-import {
-  AddComment,
-  IssueActivitySection,
-  IssueDescriptionForm,
-  IssueDetailsSidebar,
-  IssueReaction,
-} from "components/issues";
+import { IssueDescriptionForm, IssueDetailsSidebar, IssueReaction } from "components/issues";
+import { InboxIssueActivity } from "components/inbox";
 // ui
 import { Loader } from "components/ui";
 // icons
@@ -42,7 +37,6 @@ import { INBOX_ISSUES, INBOX_ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "cons
 
 const defaultValues = {
   name: "",
-  description: "",
   description_html: "",
   estimate_point: null,
   assignees_list: [],
@@ -296,7 +290,6 @@ export const InboxMainContent: React.FC = () => {
                 workspaceSlug={workspaceSlug as string}
                 issue={{
                   name: issueDetails.name,
-                  description: issueDetails.description,
                   description_html: issueDetails.description_html,
                 }}
                 handleFormSubmit={submitChanges}
@@ -312,11 +305,7 @@ export const InboxMainContent: React.FC = () => {
               issueId={issueDetails.id}
             />
 
-            <div className="space-y-5">
-              <h3 className="text-lg text-custom-text-100">Comments/Activity</h3>
-              <IssueActivitySection issueId={issueDetails.id} user={user} />
-              <AddComment issueId={issueDetails.id} user={user} />
-            </div>
+            <InboxIssueActivity issueDetails={issueDetails} />
           </div>
 
           <div className="basis-1/3 space-y-5 border-custom-border-200 p-5">
diff --git a/apps/app/components/inbox/index.ts b/apps/app/components/inbox/index.ts
index 38cea0348..8301d2570 100644
--- a/apps/app/components/inbox/index.ts
+++ b/apps/app/components/inbox/index.ts
@@ -4,6 +4,7 @@ export * from "./delete-issue-modal";
 export * from "./filters-dropdown";
 export * from "./filters-list";
 export * from "./inbox-action-headers";
+export * from "./inbox-issue-activity";
 export * from "./inbox-issue-card";
 export * from "./inbox-main-content";
 export * from "./issues-list-sidebar";
diff --git a/apps/app/components/issues/activity.tsx b/apps/app/components/issues/activity.tsx
index 8dd948e08..5a82907f2 100644
--- a/apps/app/components/issues/activity.tsx
+++ b/apps/app/components/issues/activity.tsx
@@ -3,10 +3,6 @@ import React from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
-import useSWR from "swr";
-
-// services
-import issuesService from "services/issues.service";
 // components
 import { ActivityIcon, ActivityMessage } from "components/core";
 import { CommentCard } from "components/issues/comment";
@@ -15,62 +11,23 @@ import { Icon, Loader } from "components/ui";
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 // types
-import { ICurrentUserResponse, IIssueComment } from "types";
-// fetch-keys
-import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+import { IIssueActivity, IIssueComment } from "types";
 
 type Props = {
-  issueId: string;
-  user: ICurrentUserResponse | undefined;
+  activity: IIssueActivity[] | undefined;
+  handleCommentUpdate: (comment: IIssueComment) => Promise<void>;
+  handleCommentDelete: (commentId: string) => Promise<void>;
 };
 
-export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
+export const IssueActivitySection: React.FC<Props> = ({
+  activity,
+  handleCommentUpdate,
+  handleCommentDelete,
+}) => {
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug } = router.query;
 
-  const { data: issueActivities, mutate: mutateIssueActivities } = useSWR(
-    workspaceSlug && projectId ? PROJECT_ISSUES_ACTIVITY(issueId) : null,
-    workspaceSlug && projectId
-      ? () =>
-          issuesService.getIssueActivities(workspaceSlug as string, projectId as string, issueId)
-      : null
-  );
-
-  const handleCommentUpdate = async (comment: IIssueComment) => {
-    if (!workspaceSlug || !projectId || !issueId) return;
-
-    await issuesService
-      .patchIssueComment(
-        workspaceSlug as string,
-        projectId as string,
-        issueId as string,
-        comment.id,
-        comment,
-        user
-      )
-      .then((res) => mutateIssueActivities());
-  };
-
-  const handleCommentDelete = async (commentId: string) => {
-    if (!workspaceSlug || !projectId || !issueId) return;
-
-    mutateIssueActivities(
-      (prevData: any) => prevData?.filter((p: any) => p.id !== commentId),
-      false
-    );
-
-    await issuesService
-      .deleteIssueComment(
-        workspaceSlug as string,
-        projectId as string,
-        issueId as string,
-        commentId,
-        user
-      )
-      .then(() => mutateIssueActivities());
-  };
-
-  if (!issueActivities) {
+  if (!activity)
     return (
       <Loader className="space-y-4">
         <div className="space-y-2">
@@ -87,12 +44,11 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
         </div>
       </Loader>
     );
-  }
 
   return (
     <div className="flow-root">
       <ul role="list" className="-mb-4">
-        {issueActivities.map((activityItem, index) => {
+        {activity.map((activityItem, index) => {
           // determines what type of action is performed
           const message = activityItem.field ? (
             <ActivityMessage activity={activityItem} />
@@ -104,7 +60,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
             return (
               <li key={activityItem.id}>
                 <div className="relative pb-1">
-                  {issueActivities.length > 1 && index !== issueActivities.length - 1 ? (
+                  {activity.length > 1 && index !== activity.length - 1 ? (
                     <span
                       className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-custom-background-80"
                       aria-hidden="true"
diff --git a/apps/app/components/issues/comment/add-comment.tsx b/apps/app/components/issues/comment/add-comment.tsx
index 9d00bf784..540577447 100644
--- a/apps/app/components/issues/comment/add-comment.tsx
+++ b/apps/app/components/issues/comment/add-comment.tsx
@@ -2,20 +2,13 @@ import React from "react";
 
 import { useRouter } from "next/router";
 
-import { mutate } from "swr";
-
 // react-hook-form
 import { useForm, Controller } from "react-hook-form";
-// services
-import issuesServices from "services/issues.service";
-// hooks
-import useToast from "hooks/use-toast";
 // ui
 import { SecondaryButton } from "components/ui";
 // types
-import type { ICurrentUserResponse, IIssueComment } from "types";
+import type { IIssueComment } from "types";
 // fetch-keys
-import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
 
 const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
@@ -30,63 +23,37 @@ const defaultValues: Partial<IIssueComment> = {
 };
 
 type Props = {
-  issueId: string;
-  user: ICurrentUserResponse | undefined;
   disabled?: boolean;
+  onSubmit: (data: IIssueComment) => Promise<void>;
 };
 
-export const AddComment: React.FC<Props> = ({ issueId, user, disabled = false }) => {
+export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
   const {
-    handleSubmit,
     control,
+    formState: { isSubmitting },
+    handleSubmit,
+    reset,
     setValue,
     watch,
-    formState: { isSubmitting },
-    reset,
   } = useForm<IIssueComment>({ defaultValues });
 
   const editorRef = React.useRef<any>(null);
 
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug } = router.query;
 
-  const { setToastAlert } = useToast();
+  const handleAddComment = async (formData: IIssueComment) => {
+    if (!formData.comment_html || !formData.comment_json || isSubmitting) return;
 
-  const onSubmit = async (formData: IIssueComment) => {
-    if (
-      !workspaceSlug ||
-      !projectId ||
-      !issueId ||
-      isSubmitting ||
-      !formData.comment_html ||
-      !formData.comment_json
-    )
-      return;
-    await issuesServices
-      .createIssueComment(
-        workspaceSlug as string,
-        projectId as string,
-        issueId as string,
-        formData,
-        user
-      )
-      .then(() => {
-        mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
-        reset(defaultValues);
-        editorRef.current?.clearEditor();
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Comment could not be posted. Please try again.",
-        })
-      );
+    await onSubmit(formData).then(() => {
+      reset(defaultValues);
+      editorRef.current?.clearEditor();
+    });
   };
 
   return (
     <div>
-      <form onSubmit={handleSubmit(onSubmit)}>
+      <form onSubmit={handleSubmit(handleAddComment)}>
         <div className="issue-comments-section">
           <Controller
             name="comment_html"
@@ -97,8 +64,8 @@ export const AddComment: React.FC<Props> = ({ issueId, user, disabled = false })
                 ref={editorRef}
                 value={
                   !value ||
-                    value === "" ||
-                    (typeof value === "object" && Object.keys(value).length === 0)
+                  value === "" ||
+                  (typeof value === "object" && Object.keys(value).length === 0)
                     ? watch("comment_html")
                     : value
                 }
diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx
index 5561b1b99..48c42c47f 100644
--- a/apps/app/components/issues/description-form.tsx
+++ b/apps/app/components/issues/description-form.tsx
@@ -4,24 +4,21 @@ import { FC, useCallback, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 // hooks
 import useReloadConfirmations from "hooks/use-reload-confirmation";
+import { useDebouncedCallback } from "use-debounce";
 // components
 import { TextArea } from "components/ui";
-
+import Tiptap from "components/tiptap";
 // types
 import { IIssue } from "types";
-import Tiptap from "components/tiptap";
-import { useDebouncedCallback } from "use-debounce";
 
 export interface IssueDescriptionFormValues {
   name: string;
-  description: any;
   description_html: string;
 }
 
 export interface IssueDetailsProps {
   issue: {
     name: string;
-    description: string;
     description_html: string;
   };
   workspaceSlug: string;
@@ -43,7 +40,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
   const {
     handleSubmit,
     watch,
-    setValue,
     reset,
     register,
     control,
@@ -51,7 +47,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
   } = useForm<IIssue>({
     defaultValues: {
       name: "",
-      description: "",
       description_html: "",
     },
   });
@@ -62,7 +57,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
 
       await handleFormSubmit({
         name: formData.name ?? "",
-        description: formData.description ?? "",
         description_html: formData.description_html ?? "<p></p>",
       });
     },
@@ -80,7 +74,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
     }
   }, [isSubmitting, setShowAlert]);
 
-
   // reset form values
   useEffect(() => {
     if (!issue) return;
@@ -99,27 +92,32 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
   return (
     <div className="relative">
       <div className="relative">
-        <TextArea
-          id="name"
-          name="name"
-          placeholder="Enter issue name"
-          register={register}
-          onFocus={() => setCharacterLimit(true)}
-          onChange={(e) => {
-            setCharacterLimit(false);
-            setIsSubmitting("submitting");
-            debouncedTitleSave();
-          }}
-          required={true}
-          className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
-          role="textbox"
-          disabled={!isAllowed}
-        />
-        {characterLimit && (
+        {isAllowed ? (
+          <TextArea
+            id="name"
+            name="name"
+            placeholder="Enter issue name"
+            register={register}
+            onFocus={() => setCharacterLimit(true)}
+            onChange={(e) => {
+              setCharacterLimit(false);
+              setIsSubmitting("submitting");
+              debouncedTitleSave();
+            }}
+            required={true}
+            className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
+            role="textbox"
+            disabled={!isAllowed}
+          />
+        ) : (
+          <h4 className="break-words text-2xl font-semibold">{issue.name}</h4>
+        )}
+        {characterLimit && isAllowed && (
           <div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 text-custom-text-200 p-0.5 text-xs">
             <span
-              className={`${watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
-                }`}
+              className={`${
+                watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
+              }`}
             >
               {watch("name").length}
             </span>
@@ -133,39 +131,42 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
           name="description_html"
           control={control}
           render={({ field: { value, onChange } }) => {
-            if (!value && !watch("description_html")) return <></>;
+            if (!value) return <></>;
 
             return (
               <Tiptap
                 value={
                   !value ||
-                    value === "" ||
-                    (typeof value === "object" && Object.keys(value).length === 0)
-                    ? watch("description_html")
+                  value === "" ||
+                  (typeof value === "object" && Object.keys(value).length === 0)
+                    ? "<p></p>"
                     : value
                 }
                 workspaceSlug={workspaceSlug}
                 debouncedUpdatesEnabled={true}
                 setShouldShowAlert={setShowAlert}
                 setIsSubmitting={setIsSubmitting}
-                customClassName="min-h-[150px] shadow-sm"
-                editorContentCustomClassNames="pb-9"
+                customClassName={
+                  isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"
+                }
+                noBorder={!isAllowed}
                 onChange={(description: Object, description_html: string) => {
                   setShowAlert(true);
                   setIsSubmitting("submitting");
                   onChange(description_html);
-                  setValue("description", description);
-                  handleSubmit(handleDescriptionFormSubmit)().finally(() => {
-                    setIsSubmitting("submitted");
-                  });
+                  handleSubmit(handleDescriptionFormSubmit)().finally(() =>
+                    setIsSubmitting("submitted")
+                  );
                 }}
+                editable={isAllowed}
               />
             );
           }}
         />
         <div
-          className={`absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center ${isSubmitting === "saved" ? "fadeOut" : "fadeIn"
-            }`}
+          className={`absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center ${
+            isSubmitting === "saved" ? "fadeOut" : "fadeIn"
+          }`}
         >
           {isSubmitting === "submitting" ? "Saving..." : "Saved"}
         </div>
diff --git a/apps/app/components/issues/index.ts b/apps/app/components/issues/index.ts
index 1c9fa9ddb..d0ab71e1c 100644
--- a/apps/app/components/issues/index.ts
+++ b/apps/app/components/issues/index.ts
@@ -15,3 +15,4 @@ export * from "./sidebar";
 export * from "./sub-issues-list";
 export * from "./label";
 export * from "./issue-reaction";
+export * from "./peek-overview";
diff --git a/apps/app/components/issues/main-content.tsx b/apps/app/components/issues/main-content.tsx
index da48969e3..ed559beb7 100644
--- a/apps/app/components/issues/main-content.tsx
+++ b/apps/app/components/issues/main-content.tsx
@@ -1,12 +1,13 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 
-import useSWR from "swr";
+import useSWR, { mutate } from "swr";
 
 // services
 import issuesService from "services/issues.service";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
+import useToast from "hooks/use-toast";
 // contexts
 import { useProjectMyMembership } from "contexts/project-member.context";
 // components
@@ -25,9 +26,9 @@ import { CustomMenu } from "components/ui";
 import { LayerDiagonalIcon } from "components/icons";
 import { MinusCircleIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue } from "types";
+import { IIssue, IIssueComment } from "types";
 // fetch-keys
-import { SUB_ISSUES } from "constants/fetch-keys";
+import { PROJECT_ISSUES_ACTIVITY, SUB_ISSUES } from "constants/fetch-keys";
 
 type Props = {
   issueDetails: IIssue;
@@ -43,6 +44,8 @@ export const IssueMainContent: React.FC<Props> = ({
   const router = useRouter();
   const { workspaceSlug, projectId, issueId, archivedIssueId } = router.query;
 
+  const { setToastAlert } = useToast();
+
   const { user } = useUserAuth();
   const { memberRole } = useProjectMyMembership();
 
@@ -50,15 +53,81 @@ export const IssueMainContent: React.FC<Props> = ({
     workspaceSlug && projectId && issueDetails?.parent ? SUB_ISSUES(issueDetails.parent) : null,
     workspaceSlug && projectId && issueDetails?.parent
       ? () =>
-        issuesService.subIssues(
-          workspaceSlug as string,
-          projectId as string,
-          issueDetails.parent ?? ""
-        )
+          issuesService.subIssues(
+            workspaceSlug as string,
+            projectId as string,
+            issueDetails.parent ?? ""
+          )
       : null
   );
   const siblingIssuesList = siblingIssues?.sub_issues.filter((i) => i.id !== issueDetails.id);
 
+  const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
+    workspaceSlug && projectId && issueId ? PROJECT_ISSUES_ACTIVITY(issueId.toString()) : null,
+    workspaceSlug && projectId && issueId
+      ? () =>
+          issuesService.getIssueActivities(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            issueId.toString()
+          )
+      : null
+  );
+
+  const handleCommentUpdate = async (comment: IIssueComment) => {
+    if (!workspaceSlug || !projectId || !issueId) return;
+
+    await issuesService
+      .patchIssueComment(
+        workspaceSlug as string,
+        projectId as string,
+        issueId as string,
+        comment.id,
+        comment,
+        user
+      )
+      .then(() => mutateIssueActivity());
+  };
+
+  const handleCommentDelete = async (commentId: string) => {
+    if (!workspaceSlug || !projectId || !issueId) return;
+
+    mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
+
+    await issuesService
+      .deleteIssueComment(
+        workspaceSlug as string,
+        projectId as string,
+        issueId as string,
+        commentId,
+        user
+      )
+      .then(() => mutateIssueActivity());
+  };
+
+  const handleAddComment = async (formData: IIssueComment) => {
+    if (!workspaceSlug || !issueDetails) return;
+
+    await issuesService
+      .createIssueComment(
+        workspaceSlug.toString(),
+        issueDetails.project,
+        issueDetails.id,
+        formData,
+        user
+      )
+      .then(() => {
+        mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Comment could not be posted. Please try again.",
+        })
+      );
+  };
+
   return (
     <>
       <div className="rounded-lg">
@@ -97,8 +166,9 @@ export const IssueMainContent: React.FC<Props> = ({
                       <CustomMenu.MenuItem
                         key={issue.id}
                         renderAs="a"
-                        href={`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id
-                          }`}
+                        href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
+                          issue.id
+                        }`}
                         className="flex items-center gap-2 py-2"
                       >
                         <LayerDiagonalIcon className="h-4 w-4" />
@@ -146,14 +216,11 @@ export const IssueMainContent: React.FC<Props> = ({
       <div className="space-y-5 pt-3">
         <h3 className="text-lg text-custom-text-100">Comments/Activity</h3>
         <IssueActivitySection
-          issueId={(archivedIssueId as string) ?? (issueId as string)}
-          user={user}
-        />
-        <AddComment
-          issueId={(archivedIssueId as string) ?? (issueId as string)}
-          user={user}
-          disabled={uneditable}
+          activity={issueActivity}
+          handleCommentUpdate={handleCommentUpdate}
+          handleCommentDelete={handleCommentDelete}
         />
+        <AddComment onSubmit={handleAddComment} disabled={uneditable} />
       </div>
     </>
   );
diff --git a/apps/app/components/issues/peek-overview/full-screen-peek-view.tsx b/apps/app/components/issues/peek-overview/full-screen-peek-view.tsx
new file mode 100644
index 000000000..d470f4910
--- /dev/null
+++ b/apps/app/components/issues/peek-overview/full-screen-peek-view.tsx
@@ -0,0 +1,79 @@
+import {
+  PeekOverviewHeader,
+  PeekOverviewIssueActivity,
+  PeekOverviewIssueDetails,
+  PeekOverviewIssueProperties,
+  TPeekOverviewModes,
+} from "components/issues";
+import { IIssue } from "types";
+
+type Props = {
+  handleClose: () => void;
+  handleDeleteIssue: () => void;
+  handleUpdateIssue: (issue: Partial<IIssue>) => Promise<void>;
+  issue: IIssue;
+  mode: TPeekOverviewModes;
+  readOnly: boolean;
+  setMode: (mode: TPeekOverviewModes) => void;
+  workspaceSlug: string;
+};
+
+export const FullScreenPeekView: React.FC<Props> = ({
+  handleClose,
+  handleDeleteIssue,
+  handleUpdateIssue,
+  issue,
+  mode,
+  readOnly,
+  setMode,
+  workspaceSlug,
+}) => (
+  <div className="h-full w-full grid grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
+    <div className="h-full w-full flex flex-col col-span-7 overflow-hidden">
+      <div className="w-full p-5">
+        <PeekOverviewHeader
+          handleClose={handleClose}
+          handleDeleteIssue={handleDeleteIssue}
+          issue={issue}
+          mode={mode}
+          setMode={setMode}
+          workspaceSlug={workspaceSlug}
+        />
+      </div>
+      <div className="h-full w-full px-6 overflow-y-auto">
+        {/* issue title and description */}
+        <div className="w-full">
+          <PeekOverviewIssueDetails
+            handleUpdateIssue={handleUpdateIssue}
+            issue={issue}
+            readOnly={readOnly}
+            workspaceSlug={workspaceSlug}
+          />
+        </div>
+        {/* divider */}
+        <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
+        {/* issue activity/comments */}
+        <div className="w-full">
+          <PeekOverviewIssueActivity
+            workspaceSlug={workspaceSlug}
+            issue={issue}
+            readOnly={readOnly}
+          />
+        </div>
+      </div>
+    </div>
+    <div className="col-span-3 h-full w-full overflow-y-auto">
+      {/* issue properties */}
+      <div className="w-full px-6 py-5">
+        <PeekOverviewIssueProperties
+          handleDeleteIssue={handleDeleteIssue}
+          issue={issue}
+          mode="full"
+          onChange={handleUpdateIssue}
+          readOnly={readOnly}
+          workspaceSlug={workspaceSlug}
+        />
+      </div>
+    </div>
+  </div>
+);
diff --git a/apps/app/components/issues/peek-overview/header.tsx b/apps/app/components/issues/peek-overview/header.tsx
new file mode 100644
index 000000000..29e23a262
--- /dev/null
+++ b/apps/app/components/issues/peek-overview/header.tsx
@@ -0,0 +1,133 @@
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { CustomSelect, Icon } from "components/ui";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import { IIssue } from "types";
+import { TPeekOverviewModes } from "./layout";
+import { ArrowRightAlt, CloseFullscreen, East, OpenInFull } from "@mui/icons-material";
+
+type Props = {
+  handleClose: () => void;
+  handleDeleteIssue: () => void;
+  issue: IIssue;
+  mode: TPeekOverviewModes;
+  setMode: (mode: TPeekOverviewModes) => void;
+  workspaceSlug: string;
+};
+
+const peekModes: {
+  key: TPeekOverviewModes;
+  icon: string;
+  label: string;
+}[] = [
+  { key: "side", icon: "side_navigation", label: "Side Peek" },
+  {
+    key: "modal",
+    icon: "dialogs",
+    label: "Modal Peek",
+  },
+  {
+    key: "full",
+    icon: "nearby",
+    label: "Full Screen Peek",
+  },
+];
+
+export const PeekOverviewHeader: React.FC<Props> = ({
+  issue,
+  handleClose,
+  handleDeleteIssue,
+  mode,
+  setMode,
+  workspaceSlug,
+}) => {
+  const { setToastAlert } = useToast();
+
+  const handleCopyLink = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(
+      `${originURL}/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link copied!",
+        message: "Issue link copied to clipboard",
+      });
+    });
+  };
+
+  return (
+    <div className="flex justify-between items-center">
+      <div className="flex items-center gap-4">
+        {mode === "side" && (
+          <button type="button" onClick={handleClose}>
+            <East
+              sx={{
+                fontSize: "14px",
+              }}
+            />
+          </button>
+        )}
+        {mode === "modal" || mode === "full" ? (
+          <button type="button" onClick={() => setMode("side")}>
+            <CloseFullscreen
+              sx={{
+                fontSize: "14px",
+              }}
+            />
+          </button>
+        ) : (
+          <button type="button" onClick={() => setMode("modal")}>
+            <OpenInFull
+              sx={{
+                fontSize: "14px",
+              }}
+            />
+          </button>
+        )}
+        <CustomSelect
+          value={mode}
+          onChange={(val: TPeekOverviewModes) => setMode(val)}
+          customButton={
+            <button
+              type="button"
+              className={`grid place-items-center ${mode === "full" ? "rotate-45" : ""}`}
+            >
+              <Icon iconName={peekModes.find((m) => m.key === mode)?.icon ?? ""} />
+            </button>
+          }
+          position="left"
+        >
+          {peekModes.map((mode) => (
+            <CustomSelect.Option key={mode.key} value={mode.key}>
+              <div className="flex items-center gap-1.5">
+                <Icon
+                  iconName={mode.icon}
+                  className={`!text-base flex-shrink-0 -my-1 ${
+                    mode.key === "full" ? "rotate-45" : ""
+                  }`}
+                />
+                {mode.label}
+              </div>
+            </CustomSelect.Option>
+          ))}
+        </CustomSelect>
+      </div>
+      {(mode === "side" || mode === "modal") && (
+        <div className="flex items-center gap-2">
+          <button type="button" onClick={handleCopyLink} className="-rotate-45">
+            <Icon iconName="link" />
+          </button>
+          <button type="button" onClick={handleDeleteIssue}>
+            <Icon iconName="delete" />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/app/components/issues/peek-overview/index.ts b/apps/app/components/issues/peek-overview/index.ts
new file mode 100644
index 000000000..45edd5147
--- /dev/null
+++ b/apps/app/components/issues/peek-overview/index.ts
@@ -0,0 +1,7 @@
+export * from "./full-screen-peek-view";
+export * from "./header";
+export * from "./issue-activity";
+export * from "./issue-details";
+export * from "./issue-properties";
+export * from "./layout";
+export * from "./side-peek-view";
diff --git a/apps/app/components/issues/peek-overview/issue-activity.tsx b/apps/app/components/issues/peek-overview/issue-activity.tsx
new file mode 100644
index 000000000..975b01fb0
--- /dev/null
+++ b/apps/app/components/issues/peek-overview/issue-activity.tsx
@@ -0,0 +1,90 @@
+import useSWR, { mutate } from "swr";
+
+// services
+import issuesService from "services/issues.service";
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+// components
+import { AddComment, IssueActivitySection } from "components/issues";
+// types
+import { IIssue, IIssueComment } from "types";
+// fetch-keys
+import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+
+type Props = {
+  workspaceSlug: string;
+  issue: IIssue;
+  readOnly: boolean;
+};
+
+export const PeekOverviewIssueActivity: React.FC<Props> = ({ workspaceSlug, issue, readOnly }) => {
+  const { setToastAlert } = useToast();
+
+  const { user } = useUser();
+
+  const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
+    workspaceSlug && issue ? PROJECT_ISSUES_ACTIVITY(issue.id) : null,
+    workspaceSlug && issue
+      ? () => issuesService.getIssueActivities(workspaceSlug.toString(), issue?.project, issue?.id)
+      : null
+  );
+
+  const handleCommentUpdate = async (comment: IIssueComment) => {
+    if (!workspaceSlug || !issue) return;
+
+    await issuesService
+      .patchIssueComment(
+        workspaceSlug as string,
+        issue.project,
+        issue.id,
+        comment.id,
+        comment,
+        user
+      )
+      .then(() => mutateIssueActivity());
+  };
+
+  const handleCommentDelete = async (commentId: string) => {
+    if (!workspaceSlug || !issue) return;
+
+    mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
+
+    await issuesService
+      .deleteIssueComment(workspaceSlug as string, issue.project, issue.id, commentId, user)
+      .then(() => mutateIssueActivity());
+  };
+
+  const handleAddComment = async (formData: IIssueComment) => {
+    if (!workspaceSlug || !issue) return;
+
+    await issuesService
+      .createIssueComment(workspaceSlug.toString(), issue.project, issue.id, formData, user)
+      .then(() => {
+        mutate(PROJECT_ISSUES_ACTIVITY(issue.id));
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Comment could not be posted. Please try again.",
+        })
+      );
+  };
+
+  return (
+    <div>
+      <h4 className="font-medium">Activity</h4>
+      <div className="mt-4">
+        <IssueActivitySection
+          activity={issueActivity}
+          handleCommentUpdate={handleCommentUpdate}
+          handleCommentDelete={handleCommentDelete}
+        />
+        <div className="mt-4">
+          <AddComment onSubmit={handleAddComment} />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/issues/peek-overview/issue-details.tsx b/apps/app/components/issues/peek-overview/issue-details.tsx
new file mode 100644
index 000000000..5b9db8dbd
--- /dev/null
+++ b/apps/app/components/issues/peek-overview/issue-details.tsx
@@ -0,0 +1,34 @@
+// components
+import { IssueDescriptionForm, IssueReaction } from "components/issues";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  handleUpdateIssue: (formData: Partial<IIssue>) => Promise<void>;
+  issue: IIssue;
+  readOnly: boolean;
+  workspaceSlug: string;
+};
+
+export const PeekOverviewIssueDetails: React.FC<Props> = ({
+  handleUpdateIssue,
+  issue,
+  readOnly,
+  workspaceSlug,
+}) => (
+  <div className="space-y-2">
+    <h6 className="font-medium text-custom-text-200">
+      {issue.project_detail.identifier}-{issue.sequence_id}
+    </h6>
+    <IssueDescriptionForm
+      handleFormSubmit={handleUpdateIssue}
+      isAllowed={!readOnly}
+      issue={{
+        name: issue.name,
+        description_html: issue.description_html,
+      }}
+      workspaceSlug={workspaceSlug}
+    />
+    <IssueReaction workspaceSlug={workspaceSlug} issueId={issue.id} projectId={issue.project} />
+  </div>
+);
diff --git a/apps/app/components/issues/peek-overview/issue-properties.tsx b/apps/app/components/issues/peek-overview/issue-properties.tsx
new file mode 100644
index 000000000..bf1ecefd9
--- /dev/null
+++ b/apps/app/components/issues/peek-overview/issue-properties.tsx
@@ -0,0 +1,203 @@
+// headless ui
+import { Disclosure } from "@headlessui/react";
+import { getStateGroupIcon } from "components/icons";
+// components
+import {
+  SidebarAssigneeSelect,
+  SidebarEstimateSelect,
+  SidebarPrioritySelect,
+  SidebarStateSelect,
+  TPeekOverviewModes,
+} from "components/issues";
+// icons
+import { CustomDatePicker, Icon } from "components/ui";
+import { copyTextToClipboard } from "helpers/string.helper";
+import useToast from "hooks/use-toast";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  handleDeleteIssue: () => void;
+  issue: IIssue;
+  mode: TPeekOverviewModes;
+  onChange: (issueProperty: Partial<IIssue>) => void;
+  readOnly: boolean;
+  workspaceSlug: string;
+};
+
+export const PeekOverviewIssueProperties: React.FC<Props> = ({
+  handleDeleteIssue,
+  issue,
+  mode,
+  onChange,
+  readOnly,
+  workspaceSlug,
+}) => {
+  const { setToastAlert } = useToast();
+
+  const startDate = issue.start_date;
+  const targetDate = issue.target_date;
+
+  const minDate = startDate ? new Date(startDate) : null;
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = targetDate ? new Date(targetDate) : null;
+  maxDate?.setDate(maxDate.getDate());
+
+  const handleCopyLink = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(
+      `${originURL}/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link copied!",
+        message: "Issue link copied to clipboard",
+      });
+    });
+  };
+
+  return (
+    <div className={mode === "full" ? "divide-y divide-custom-border-200" : ""}>
+      {mode === "full" && (
+        <div className="flex justify-between gap-2 pb-3">
+          <h6 className="flex items-center gap-2 font-medium">
+            {getStateGroupIcon(issue.state_detail.group, "16", "16", issue.state_detail.color)}
+            {issue.project_detail.identifier}-{issue.sequence_id}
+          </h6>
+          <div className="flex items-center gap-2">
+            <button type="button" onClick={handleCopyLink} className="-rotate-45">
+              <Icon iconName="link" />
+            </button>
+            <button type="button" onClick={handleDeleteIssue}>
+              <Icon iconName="delete" />
+            </button>
+          </div>
+        </div>
+      )}
+      <div className={`space-y-4 ${mode === "full" ? "pt-3" : ""}`}>
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="radio_button_checked" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">State</span>
+          </div>
+          <div className="w-3/4">
+            <SidebarStateSelect
+              value={issue.state}
+              onChange={(val: string) => onChange({ state: val })}
+              disabled={readOnly}
+            />
+          </div>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="group" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">Assignees</span>
+          </div>
+          <div className="w-3/4">
+            <SidebarAssigneeSelect
+              value={issue.assignees_list}
+              onChange={(val: string[]) => onChange({ assignees_list: val })}
+              disabled={readOnly}
+            />
+          </div>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="signal_cellular_alt" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">Priority</span>
+          </div>
+          <div className="w-3/4">
+            <SidebarPrioritySelect
+              value={issue.priority}
+              onChange={(val: string) => onChange({ priority: val })}
+              disabled={readOnly}
+            />
+          </div>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">Start date</span>
+          </div>
+          <div>
+            {issue.start_date ? (
+              <CustomDatePicker
+                placeholder="Start date"
+                value={issue.start_date}
+                onChange={(val) =>
+                  onChange({
+                    start_date: val,
+                  })
+                }
+                className="bg-custom-background-100"
+                wrapperClassName="w-full"
+                maxDate={maxDate ?? undefined}
+                disabled={readOnly}
+              />
+            ) : (
+              <span className="text-custom-text-200">Empty</span>
+            )}
+          </div>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">Due date</span>
+          </div>
+          <div>
+            {issue.target_date ? (
+              <CustomDatePicker
+                placeholder="Due date"
+                value={issue.target_date}
+                onChange={(val) =>
+                  onChange({
+                    target_date: val,
+                  })
+                }
+                className="bg-custom-background-100"
+                wrapperClassName="w-full"
+                minDate={minDate ?? undefined}
+                disabled={readOnly}
+              />
+            ) : (
+              <span className="text-custom-text-200">Empty</span>
+            )}
+          </div>
+        </div>
+        {/* <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="change_history" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">Estimate</span>
+          </div>
+          <div className="w-3/4">
+            <SidebarEstimateSelect
+              value={issue.estimate_point}
+              onChange={(val: number | null) => onChange({ estimate_point: val })}
+              disabled={readOnly}
+            />
+          </div>
+        </div> */}
+        {/* <Disclosure as="div">
+          {({ open }) => (
+            <>
+              <Disclosure.Button
+                as="button"
+                type="button"
+                className="flex items-center gap-1 text-sm text-custom-text-200"
+              >
+                Show {open ? "Less" : "More"}
+                <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-base" />
+              </Disclosure.Button>
+              <Disclosure.Panel as="div" className="mt-4 space-y-4">
+                Disclosure Panel
+              </Disclosure.Panel>
+            </>
+          )}
+        </Disclosure> */}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/issues/peek-overview/layout.tsx b/apps/app/components/issues/peek-overview/layout.tsx
new file mode 100644
index 000000000..7196052f8
--- /dev/null
+++ b/apps/app/components/issues/peek-overview/layout.tsx
@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+import { FullScreenPeekView, SidePeekView } from "components/issues";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  handleDeleteIssue: () => void;
+  handleUpdateIssue: (issue: Partial<IIssue>) => Promise<void>;
+  issue: IIssue | null;
+  isOpen: boolean;
+  onClose: () => void;
+  workspaceSlug: string;
+  readOnly: boolean;
+};
+
+export type TPeekOverviewModes = "side" | "modal" | "full";
+
+export const IssuePeekOverview: React.FC<Props> = ({
+  handleDeleteIssue,
+  handleUpdateIssue,
+  issue,
+  isOpen,
+  onClose,
+  workspaceSlug,
+  readOnly,
+}) => {
+  const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
+
+  const handleClose = () => {
+    onClose();
+    setPeekOverviewMode("side");
+  };
+
+  if (!issue || !isOpen) return null;
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        {/* add backdrop conditionally */}
+        {(peekOverviewMode === "modal" || peekOverviewMode === "full") && (
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          </Transition.Child>
+        )}
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="relative h-full w-full">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel
+                className={`absolute z-20 bg-custom-background-100 ${
+                  peekOverviewMode === "side"
+                    ? "top-0 right-0 h-full w-1/2 shadow-custom-shadow-md"
+                    : peekOverviewMode === "modal"
+                    ? "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[70%] w-3/5 rounded-lg shadow-custom-shadow-xl"
+                    : "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[95%] w-[95%] rounded-lg shadow-custom-shadow-xl"
+                }`}
+              >
+                {(peekOverviewMode === "side" || peekOverviewMode === "modal") && (
+                  <SidePeekView
+                    handleClose={handleClose}
+                    handleDeleteIssue={handleDeleteIssue}
+                    handleUpdateIssue={handleUpdateIssue}
+                    issue={issue}
+                    mode={peekOverviewMode}
+                    readOnly={readOnly}
+                    setMode={(mode) => setPeekOverviewMode(mode)}
+                    workspaceSlug={workspaceSlug}
+                  />
+                )}
+                {peekOverviewMode === "full" && (
+                  <FullScreenPeekView
+                    handleClose={handleClose}
+                    handleDeleteIssue={handleDeleteIssue}
+                    handleUpdateIssue={handleUpdateIssue}
+                    issue={issue}
+                    mode={peekOverviewMode}
+                    readOnly={readOnly}
+                    setMode={(mode) => setPeekOverviewMode(mode)}
+                    workspaceSlug={workspaceSlug}
+                  />
+                )}
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/apps/app/components/issues/peek-overview/side-peek-view.tsx b/apps/app/components/issues/peek-overview/side-peek-view.tsx
new file mode 100644
index 000000000..f938c3805
--- /dev/null
+++ b/apps/app/components/issues/peek-overview/side-peek-view.tsx
@@ -0,0 +1,75 @@
+import {
+  PeekOverviewHeader,
+  PeekOverviewIssueActivity,
+  PeekOverviewIssueDetails,
+  PeekOverviewIssueProperties,
+  TPeekOverviewModes,
+} from "components/issues";
+import { IIssue } from "types";
+
+type Props = {
+  handleClose: () => void;
+  handleDeleteIssue: () => void;
+  handleUpdateIssue: (issue: Partial<IIssue>) => Promise<void>;
+  issue: IIssue;
+  mode: TPeekOverviewModes;
+  readOnly: boolean;
+  setMode: (mode: TPeekOverviewModes) => void;
+  workspaceSlug: string;
+};
+
+export const SidePeekView: React.FC<Props> = ({
+  handleClose,
+  handleDeleteIssue,
+  handleUpdateIssue,
+  issue,
+  mode,
+  readOnly,
+  setMode,
+  workspaceSlug,
+}) => (
+  <div className="h-full w-full flex flex-col overflow-hidden">
+    <div className="w-full p-5">
+      <PeekOverviewHeader
+        handleClose={handleClose}
+        handleDeleteIssue={handleDeleteIssue}
+        issue={issue}
+        mode={mode}
+        setMode={setMode}
+        workspaceSlug={workspaceSlug}
+      />
+    </div>
+    <div className="h-full w-full px-6 overflow-y-auto">
+      {/* issue title and description */}
+      <div className="w-full">
+        <PeekOverviewIssueDetails
+          handleUpdateIssue={handleUpdateIssue}
+          issue={issue}
+          readOnly={readOnly}
+          workspaceSlug={workspaceSlug}
+        />
+      </div>
+      {/* issue properties */}
+      <div className="w-full mt-10">
+        <PeekOverviewIssueProperties
+          handleDeleteIssue={handleDeleteIssue}
+          issue={issue}
+          mode={mode}
+          onChange={handleUpdateIssue}
+          readOnly={readOnly}
+          workspaceSlug={workspaceSlug}
+        />
+      </div>
+      {/* divider */}
+      <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
+      {/* issue activity/comments */}
+      <div className="w-full pb-5">
+        <PeekOverviewIssueActivity
+          workspaceSlug={workspaceSlug}
+          issue={issue}
+          readOnly={readOnly}
+        />
+      </div>
+    </div>
+  </div>
+);
diff --git a/apps/app/components/issues/sidebar-select/assignee.tsx b/apps/app/components/issues/sidebar-select/assignee.tsx
index 323d201e8..ad7db744f 100644
--- a/apps/app/components/issues/sidebar-select/assignee.tsx
+++ b/apps/app/components/issues/sidebar-select/assignee.tsx
@@ -9,26 +9,16 @@ import projectService from "services/project.service";
 // ui
 import { CustomSearchSelect } from "components/ui";
 import { AssigneesList, Avatar } from "components/ui/avatar";
-// icons
-import { UserGroupIcon } from "@heroicons/react/24/outline";
-// types
-import { UserAuth } from "types";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
 type Props = {
   value: string[];
   onChange: (val: string[]) => void;
-  userAuth: UserAuth;
   disabled?: boolean;
 };
 
-export const SidebarAssigneeSelect: React.FC<Props> = ({
-  value,
-  onChange,
-  userAuth,
-  disabled = false,
-}) => {
+export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -50,36 +40,27 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({
     ),
   }));
 
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
-
   return (
-    <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-        <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
-        <p>Assignees</p>
-      </div>
-      <div className="sm:basis-1/2">
-        <CustomSearchSelect
-          value={value}
-          label={
-            <div className="flex items-center gap-2 text-custom-text-200">
-              {value && value.length > 0 && Array.isArray(value) ? (
-                <div className="-my-0.5 flex items-center justify-center gap-2">
-                  <AssigneesList userIds={value} length={3} showLength={false} />
-                  <span className="text-custom-text-100">{value.length} Assignees</span>
-                </div>
-              ) : (
-                "No assignees"
-              )}
+    <CustomSearchSelect
+      value={value}
+      customButton={
+        <>
+          {value && value.length > 0 && Array.isArray(value) ? (
+            <div className="-my-0.5 flex items-center gap-2">
+              <AssigneesList userIds={value} length={3} showLength={false} />
+              <span className="text-custom-text-100 text-sm">{value.length} Assignees</span>
             </div>
-          }
-          options={options}
-          onChange={onChange}
-          position="right"
-          multiple
-          disabled={isNotAllowed}
-        />
-      </div>
-    </div>
+          ) : (
+            <button type="button" className="bg-custom-background-80 px-2.5 py-0.5 text-sm rounded">
+              No assignees
+            </button>
+          )}
+        </>
+      }
+      options={options}
+      onChange={onChange}
+      multiple
+      disabled={disabled}
+    />
   );
 };
diff --git a/apps/app/components/issues/sidebar-select/estimate.tsx b/apps/app/components/issues/sidebar-select/estimate.tsx
index ab8bfac15..063694141 100644
--- a/apps/app/components/issues/sidebar-select/estimate.tsx
+++ b/apps/app/components/issues/sidebar-select/estimate.tsx
@@ -6,75 +6,56 @@ import useEstimateOption from "hooks/use-estimate-option";
 import { CustomSelect } from "components/ui";
 // icons
 import { PlayIcon } from "@heroicons/react/24/outline";
-// types
-import { UserAuth } from "types";
 
 type Props = {
   value: number | null;
   onChange: (val: number | null) => void;
-  userAuth: UserAuth;
   disabled?: boolean;
 };
 
-export const SidebarEstimateSelect: React.FC<Props> = ({
-  value,
-  onChange,
-  userAuth,
-  disabled = false,
-}) => {
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
-
+export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
   const { isEstimateActive, estimatePoints } = useEstimateOption();
 
   if (!isEstimateActive) return null;
 
   return (
-    <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-        <PlayIcon className="h-4 w-4 flex-shrink-0 -rotate-90" />
-        <p>Estimate</p>
-      </div>
-      <div className="sm:basis-1/2">
-        <CustomSelect
-          value={value}
-          label={
-            <div className="flex items-center gap-2 text-xs">
-              <PlayIcon
-                className={`h-4 w-4 -rotate-90 ${
-                  value !== null ? "text-custom-text-100" : "text-custom-text-200"
-                }`}
-              />
-              {estimatePoints?.find((e) => e.key === value)?.value ?? (
-                <span className="text-custom-text-200">No estimates</span>
-              )}
-            </div>
-          }
-          onChange={onChange}
-          position="right"
-          width="w-full"
-          disabled={isNotAllowed || disabled}
+    <CustomSelect
+      value={value}
+      customButton={
+        <button
+          type="button"
+          className="flex items-center gap-1.5 !text-sm bg-custom-background-80 rounded px-2.5 py-0.5"
         >
-          <CustomSelect.Option value={null}>
+          <PlayIcon
+            className={`h-4 w-4 -rotate-90 ${
+              value !== null ? "text-custom-text-100" : "text-custom-text-200"
+            }`}
+          />
+          {estimatePoints?.find((e) => e.key === value)?.value ?? "No estimate"}
+        </button>
+      }
+      onChange={onChange}
+      disabled={disabled}
+    >
+      <CustomSelect.Option value={null}>
+        <>
+          <span>
+            <PlayIcon className="h-4 w-4 -rotate-90" />
+          </span>
+          None
+        </>
+      </CustomSelect.Option>
+      {estimatePoints &&
+        estimatePoints.map((point) => (
+          <CustomSelect.Option key={point.key} value={point.key}>
             <>
               <span>
                 <PlayIcon className="h-4 w-4 -rotate-90" />
               </span>
-              None
+              {point.value}
             </>
           </CustomSelect.Option>
-          {estimatePoints &&
-            estimatePoints.map((point) => (
-              <CustomSelect.Option key={point.key} value={point.key}>
-                <>
-                  <span>
-                    <PlayIcon className="h-4 w-4 -rotate-90" />
-                  </span>
-                  {point.value}
-                </>
-              </CustomSelect.Option>
-            ))}
-        </CustomSelect>
-      </div>
-    </div>
+        ))}
+    </CustomSelect>
   );
 };
diff --git a/apps/app/components/issues/sidebar-select/priority.tsx b/apps/app/components/issues/sidebar-select/priority.tsx
index a97fe06fb..dfaa712e2 100644
--- a/apps/app/components/issues/sidebar-select/priority.tsx
+++ b/apps/app/components/issues/sidebar-select/priority.tsx
@@ -3,62 +3,51 @@ import React from "react";
 // ui
 import { CustomSelect } from "components/ui";
 // icons
-import { ChartBarIcon } from "@heroicons/react/24/outline";
 import { getPriorityIcon } from "components/icons/priority-icon";
-// types
-import { UserAuth } from "types";
 // constants
 import { PRIORITIES } from "constants/project";
 
 type Props = {
   value: string | null;
   onChange: (val: string) => void;
-  userAuth: UserAuth;
   disabled?: boolean;
 };
 
-export const SidebarPrioritySelect: React.FC<Props> = ({
-  value,
-  onChange,
-  userAuth,
-  disabled = false,
-}) => {
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
-
-  return (
-    <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-        <ChartBarIcon className="h-4 w-4 flex-shrink-0" />
-        <p>Priority</p>
-      </div>
-      <div className="sm:basis-1/2">
-        <CustomSelect
-          label={
-            <div className="flex items-center gap-2 text-left capitalize">
-              <span className={`${value ? "text-custom-text-100" : "text-custom-text-200"}`}>
-                {getPriorityIcon(value ?? "None", "text-sm")}
-              </span>
-              <span className={`${value ? "text-custom-text-100" : "text-custom-text-200"}`}>
-                {value ?? "None"}
-              </span>
-            </div>
-          }
-          value={value}
-          onChange={onChange}
-          width="w-full"
-          position="right"
-          disabled={isNotAllowed}
-        >
-          {PRIORITIES.map((option) => (
-            <CustomSelect.Option key={option} value={option} className="capitalize">
-              <>
-                {getPriorityIcon(option, "text-sm")}
-                {option ?? "None"}
-              </>
-            </CustomSelect.Option>
-          ))}
-        </CustomSelect>
-      </div>
-    </div>
-  );
-};
+export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabled = false }) => (
+  <CustomSelect
+    customButton={
+      <button
+        type="button"
+        className={`flex items-center gap-1.5 text-left text-sm capitalize rounded px-2.5 py-0.5 ${
+          value === "urgent"
+            ? "border-red-500/20 bg-red-500/20 text-red-500"
+            : value === "high"
+            ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
+            : value === "medium"
+            ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
+            : value === "low"
+            ? "border-green-500/20 bg-green-500/20 text-green-500"
+            : "bg-custom-background-80 border-custom-border-200"
+        }`}
+      >
+        <span className="grid place-items-center -my-1">
+          {getPriorityIcon(value ?? "None", "!text-sm")}
+        </span>
+        <span>{value ?? "None"}</span>
+      </button>
+    }
+    value={value}
+    onChange={onChange}
+    optionsClassName="w-min"
+    disabled={disabled}
+  >
+    {PRIORITIES.map((option) => (
+      <CustomSelect.Option key={option} value={option} className="capitalize">
+        <>
+          {getPriorityIcon(option, "text-sm")}
+          {option ?? "None"}
+        </>
+      </CustomSelect.Option>
+    ))}
+  </CustomSelect>
+);
diff --git a/apps/app/components/issues/sidebar-select/state.tsx b/apps/app/components/issues/sidebar-select/state.tsx
index b1751b070..a3874221f 100644
--- a/apps/app/components/issues/sidebar-select/state.tsx
+++ b/apps/app/components/issues/sidebar-select/state.tsx
@@ -9,29 +9,20 @@ import stateService from "services/state.service";
 // ui
 import { Spinner, CustomSelect } from "components/ui";
 // icons
-import { Squares2X2Icon } from "@heroicons/react/24/outline";
 import { getStateGroupIcon } from "components/icons";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
-// types
-import { UserAuth } from "types";
 // constants
 import { STATES_LIST } from "constants/fetch-keys";
 
 type Props = {
   value: string;
   onChange: (val: string) => void;
-  userAuth: UserAuth;
   disabled?: boolean;
 };
 
-export const SidebarStateSelect: React.FC<Props> = ({
-  value,
-  onChange,
-  userAuth,
-  disabled = false,
-}) => {
+export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, inboxIssueId } = router.query;
 
@@ -45,60 +36,52 @@ export const SidebarStateSelect: React.FC<Props> = ({
 
   const selectedState = states?.find((s) => s.id === value);
 
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
-
   return (
-    <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-        <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
-        <p>State</p>
-      </div>
-      <div className="sm:basis-1/2">
-        <CustomSelect
-          label={
-            selectedState ? (
-              <div className="flex items-center gap-2 text-left text-custom-text-100">
-                {getStateGroupIcon(
-                  selectedState?.group ?? "backlog",
-                  "16",
-                  "16",
-                  selectedState?.color ?? ""
-                )}
-                {addSpaceIfCamelCase(selectedState?.name ?? "")}
-              </div>
-            ) : inboxIssueId ? (
-              <div className="flex items-center gap-2 text-left text-custom-text-100">
-                {getStateGroupIcon("backlog", "16", "16", "#ff7700")}
-                Triage
-              </div>
-            ) : (
-              "None"
-            )
-          }
-          value={value}
-          onChange={onChange}
-          width="w-full"
-          position="right"
-          disabled={isNotAllowed}
-        >
-          {states ? (
-            states.length > 0 ? (
-              states.map((state) => (
-                <CustomSelect.Option key={state.id} value={state.id}>
-                  <>
-                    {getStateGroupIcon(state.group, "16", "16", state.color)}
-                    {state.name}
-                  </>
-                </CustomSelect.Option>
-              ))
-            ) : (
-              <div className="text-center">No states found</div>
-            )
+    <CustomSelect
+      customButton={
+        <button type="button" className="bg-custom-background-80 text-sm rounded px-2.5 py-0.5">
+          {selectedState ? (
+            <div className="flex items-center gap-1.5 text-left text-custom-text-100">
+              {getStateGroupIcon(
+                selectedState?.group ?? "backlog",
+                "14",
+                "14",
+                selectedState?.color ?? ""
+              )}
+              {addSpaceIfCamelCase(selectedState?.name ?? "")}
+            </div>
+          ) : inboxIssueId ? (
+            <div className="flex items-center gap-1.5 text-left text-custom-text-100">
+              {getStateGroupIcon("backlog", "14", "14", "#ff7700")}
+              Triage
+            </div>
           ) : (
-            <Spinner />
+            "None"
           )}
-        </CustomSelect>
-      </div>
-    </div>
+        </button>
+      }
+      value={value}
+      onChange={onChange}
+      optionsClassName="w-min"
+      position="left"
+      disabled={disabled}
+    >
+      {states ? (
+        states.length > 0 ? (
+          states.map((state) => (
+            <CustomSelect.Option key={state.id} value={state.id}>
+              <>
+                {getStateGroupIcon(state.group, "16", "16", state.color)}
+                {state.name}
+              </>
+            </CustomSelect.Option>
+          ))
+        ) : (
+          <div className="text-center">No states found</div>
+        )
+      ) : (
+        <Spinner />
+      )}
+    </CustomSelect>
   );
 };
diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
index 6ae7eccb8..366e57ba7 100644
--- a/apps/app/components/issues/sidebar.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@@ -33,7 +33,16 @@ import {
 // ui
 import { CustomDatePicker, Icon } from "components/ui";
 // icons
-import { LinkIcon, CalendarDaysIcon, TrashIcon, PlusIcon } from "@heroicons/react/24/outline";
+import {
+  LinkIcon,
+  CalendarDaysIcon,
+  TrashIcon,
+  PlusIcon,
+  Squares2X2Icon,
+  ChartBarIcon,
+  UserGroupIcon,
+  PlayIcon,
+} from "@heroicons/react/24/outline";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
@@ -332,60 +341,90 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
             {showFirstSection && (
               <div className="py-1">
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
-                  <Controller
-                    control={control}
-                    name="state"
-                    render={({ field: { value } }) => (
-                      <SidebarStateSelect
-                        value={value}
-                        onChange={(val: string) => submitChanges({ state: val })}
-                        userAuth={memberRole}
-                        disabled={uneditable}
+                  <div className="flex flex-wrap items-center py-2">
+                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+                      <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
+                      <p>State</p>
+                    </div>
+                    <div className="sm:basis-1/2">
+                      <Controller
+                        control={control}
+                        name="state"
+                        render={({ field: { value } }) => (
+                          <SidebarStateSelect
+                            value={value}
+                            onChange={(val: string) => submitChanges({ state: val })}
+                            disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                          />
+                        )}
                       />
-                    )}
-                  />
+                    </div>
+                  </div>
                 )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
-                  <Controller
-                    control={control}
-                    name="assignees_list"
-                    render={({ field: { value } }) => (
-                      <SidebarAssigneeSelect
-                        value={value}
-                        onChange={(val: string[]) => submitChanges({ assignees_list: val })}
-                        userAuth={memberRole}
-                        disabled={uneditable}
+                  <div className="flex flex-wrap items-center py-2">
+                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+                      <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
+                      <p>Assignees</p>
+                    </div>
+                    <div className="sm:basis-1/2">
+                      <Controller
+                        control={control}
+                        name="assignees_list"
+                        render={({ field: { value } }) => (
+                          <SidebarAssigneeSelect
+                            value={value}
+                            onChange={(val: string[]) => submitChanges({ assignees_list: val })}
+                            disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                          />
+                        )}
                       />
-                    )}
-                  />
+                    </div>
+                  </div>
                 )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
-                  <Controller
-                    control={control}
-                    name="priority"
-                    render={({ field: { value } }) => (
-                      <SidebarPrioritySelect
-                        value={value}
-                        onChange={(val: string) => submitChanges({ priority: val })}
-                        userAuth={memberRole}
-                        disabled={uneditable}
+                  <div className="flex flex-wrap items-center py-2">
+                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+                      <ChartBarIcon className="h-4 w-4 flex-shrink-0" />
+                      <p>Priority</p>
+                    </div>
+                    <div className="sm:basis-1/2">
+                      <Controller
+                        control={control}
+                        name="priority"
+                        render={({ field: { value } }) => (
+                          <SidebarPrioritySelect
+                            value={value}
+                            onChange={(val: string) => submitChanges({ priority: val })}
+                            disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                          />
+                        )}
                       />
-                    )}
-                  />
+                    </div>
+                  </div>
                 )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && (
-                  <Controller
-                    control={control}
-                    name="estimate_point"
-                    render={({ field: { value } }) => (
-                      <SidebarEstimateSelect
-                        value={value}
-                        onChange={(val: number | null) => submitChanges({ estimate_point: val })}
-                        userAuth={memberRole}
-                        disabled={uneditable}
+                  <div className="flex flex-wrap items-center py-2">
+                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+                      <PlayIcon className="h-4 w-4 flex-shrink-0 -rotate-90" />
+                      <p>Estimate</p>
+                    </div>
+                    <div className="sm:basis-1/2">
+                      <Controller
+                        control={control}
+                        name="estimate_point"
+                        render={({ field: { value } }) => (
+                          <SidebarEstimateSelect
+                            value={value}
+                            onChange={(val: number | null) =>
+                              submitChanges({ estimate_point: val })
+                            }
+                            disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                          />
+                        )}
                       />
-                    )}
-                  />
+                    </div>
+                  </div>
                 )}
               </div>
             )}

From a9ff4b8c93456e52e4e692050cc4fb56327b41e9 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Sun, 27 Aug 2023 20:31:32 +0530
Subject: [PATCH 17/70] fix: project members n+1 (#1975)

---
 apiserver/plane/api/serializers/project.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apiserver/plane/api/serializers/project.py b/apiserver/plane/api/serializers/project.py
index 1f7a973c1..55847881d 100644
--- a/apiserver/plane/api/serializers/project.py
+++ b/apiserver/plane/api/serializers/project.py
@@ -112,7 +112,7 @@ class ProjectDetailSerializer(BaseSerializer):
 
 
 class ProjectMemberSerializer(BaseSerializer):
-    workspace = WorkSpaceSerializer(read_only=True)
+    workspace = WorkspaceLiteSerializer(read_only=True)
     project = ProjectLiteSerializer(read_only=True)
     member = UserLiteSerializer(read_only=True)
 

From 9f420a00d787f4f810d6332d29637399127c6b93 Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Mon, 28 Aug 2023 13:09:27 +0530
Subject: [PATCH 18/70] fix: create new project as fav (#1993)

---
 apps/app/components/project/sidebar-list.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/apps/app/components/project/sidebar-list.tsx b/apps/app/components/project/sidebar-list.tsx
index 9e37426de..0ab8f9bee 100644
--- a/apps/app/components/project/sidebar-list.tsx
+++ b/apps/app/components/project/sidebar-list.tsx
@@ -31,6 +31,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 export const ProjectSidebarList: FC = () => {
   const store: any = useMobxStore();
 
+  const [isFavoriteProjectCreate, setIsFavoriteProjectCreate] = useState(false);
   const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
   const [deleteProjectModal, setDeleteProjectModal] = useState(false);
   const [projectToDelete, setProjectToDelete] = useState<IProject | null>(null);
@@ -151,7 +152,7 @@ export const ProjectSidebarList: FC = () => {
       <CreateProjectModal
         isOpen={isProjectModalOpen}
         setIsOpen={setIsProjectModalOpen}
-        setToFavorite
+        setToFavorite={isFavoriteProjectCreate}
         user={user}
       />
       <DeleteProjectModal
@@ -189,7 +190,10 @@ export const ProjectSidebarList: FC = () => {
                             </Disclosure.Button>
                             <button
                               className="group-hover:opacity-100 opacity-0"
-                              onClick={() => setIsProjectModalOpen(true)}
+                              onClick={() => {
+                                setIsFavoriteProjectCreate(true);
+                                setIsProjectModalOpen(true);
+                              }}
                             >
                               <Icon iconName="add" />
                             </button>
@@ -252,7 +256,10 @@ export const ProjectSidebarList: FC = () => {
                             </Disclosure.Button>
                             <button
                               className="group-hover:opacity-100 opacity-0"
-                              onClick={() => setIsProjectModalOpen(true)}
+                              onClick={() => {
+                                setIsFavoriteProjectCreate(false);
+                                setIsProjectModalOpen(true);
+                              }}
                             >
                               <Icon iconName="add" />
                             </button>

From a61e8370b5d12d7f4e9e16157599c90c8aba3129 Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Mon, 28 Aug 2023 13:25:09 +0530
Subject: [PATCH 19/70] fix: workspace accepted invitation redirects to the
 workspace (#1971)

* fix: workspace accepted invitation redirects to the workspace

* chore: removing logs

* fix: updating user last workspace id with newly joined one

* adding error toast
---
 apps/app/pages/invitations.tsx | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/apps/app/pages/invitations.tsx b/apps/app/pages/invitations.tsx
index 34aeca8f3..8e823b450 100644
--- a/apps/app/pages/invitations.tsx
+++ b/apps/app/pages/invitations.tsx
@@ -33,6 +33,7 @@ import type { IWorkspaceMemberInvitation } from "types";
 import { USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
 // constants
 import { ROLE } from "constants/workspace";
+import userService from "services/user.service";
 
 const OnBoard: NextPage = () => {
   const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
@@ -78,12 +79,32 @@ const OnBoard: NextPage = () => {
     workspaceService
       .joinWorkspaces({ invitations: invitationsRespond })
       .then(() => {
-        mutateInvitations();
         mutate("USER_WORKSPACES");
-
-        setIsJoiningWorkspaces(false);
+        const firstInviteId = invitationsRespond[0];
+        const redirectWorkspace = invitations?.find((i) => i.id === firstInviteId)?.workspace;
+        userService
+          .updateUser({ last_workspace_id: redirectWorkspace?.id })
+          .then(() => {
+            setIsJoiningWorkspaces(false);
+            router.push(`/${redirectWorkspace?.slug}`);
+          })
+          .catch(() => {
+            setToastAlert({
+              type: "error",
+              title: "Error!",
+              message: "Something went wrong, Please try again.",
+            });
+            setIsJoiningWorkspaces(false);
+          });
       })
-      .catch(() => setIsJoiningWorkspaces(false));
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong, Please try again.",
+        });
+        setIsJoiningWorkspaces(false);
+      });
   };
 
   return (
@@ -167,6 +188,7 @@ const OnBoard: NextPage = () => {
                       size="md"
                       onClick={submitInvitations}
                       disabled={isJoiningWorkspaces || invitationsRespond.length === 0}
+                      loading={isJoiningWorkspaces}
                     >
                       Accept & Join
                     </PrimaryButton>

From 47abe9db5edf71421b84244be802288e775b4f5c Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 28 Aug 2023 13:25:47 +0530
Subject: [PATCH 20/70] dev: gantt chart revamp (#1900)

* style: gantt chart polishing

* chore: sidebar y-axis drag and drop

* chore: remove y-axis drag and drop from the main content

* refactor: drop end function

* refactor: resizing logic

* chore: x-axis block move

* chore: x-axis block move flag

* chore: update scroll end logic

* style: modules gantt chart

* style: block background tint

* refactor: context dispatcher types

* refactor: draggable component

* chore: filters added to gantt chart

* refactor: folder structure

* style: cycle blocks

* chore: move to block arrow

* chore: move to block on the right side arrow

* chore: added proper comments for functions

* refactor: blocks render logic

* fix: x-axis drag and drop

* chore: minor ui fixes

* chore: remove link tag from blocks

---------

Co-authored-by: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>
---
 .../core/filters/issues-view-filter.tsx       |  66 +++--
 apps/app/components/core/views/all-views.tsx  |   5 +-
 .../components/cycles/gantt-chart/blocks.tsx  |  83 ++++++
 .../cycle-issues-layout.tsx}                  |  30 +--
 .../cycles-list-layout.tsx}                   |  23 +-
 .../components/cycles/gantt-chart/index.ts    |   3 +
 apps/app/components/cycles/index.ts           |   3 +-
 .../components/cycles/single-cycle-list.tsx   |   1 +
 .../components/gantt-chart/blocks/block.tsx   | 103 --------
 .../gantt-chart/blocks/blocks-display.tsx     | 206 +++++----------
 .../components/gantt-chart/blocks/index.ts    |   1 -
 .../components/gantt-chart/chart/index.tsx    | 149 +++++------
 .../components/gantt-chart/chart/month.tsx    |  50 ++--
 .../components/gantt-chart/contexts/index.tsx |  13 +-
 apps/app/components/gantt-chart/data/index.ts |   4 +-
 .../gantt-chart/helpers/draggable.tsx         | 249 +++++++++++++-----
 .../components/gantt-chart/hooks/index.tsx    |   4 +-
 apps/app/components/gantt-chart/root.tsx      |  34 ++-
 apps/app/components/gantt-chart/sidebar.tsx   | 156 +++++++++++
 .../app/components/gantt-chart/types/index.ts |  24 +-
 .../app/components/icons/state-group-icon.tsx |   5 +
 .../components/issues/gantt-chart/blocks.tsx  |  67 +++++
 .../components/issues/gantt-chart/index.ts    |   2 +
 .../layout.tsx}                               |  23 +-
 .../components/modules/gantt-chart/blocks.tsx |  55 ++++
 .../components/modules/gantt-chart/index.ts   |   3 +
 .../module-issues-layout.tsx}                 |  30 +--
 .../modules-list-layout.tsx}                  |  23 +-
 apps/app/components/modules/index.ts          |   1 -
 apps/app/components/views/gantt-chart.tsx     |  29 +-
 apps/app/constants/issue.ts                   |   1 +
 apps/app/helpers/date-time.helper.ts          |  29 ++
 .../hooks/gantt-chart/cycle-issues-view.tsx   |   8 +-
 apps/app/hooks/gantt-chart/issue-view.tsx     |   8 +-
 .../hooks/gantt-chart/module-issues-view.tsx  |   8 +-
 .../hooks/gantt-chart/view-issues-view.tsx    |   2 +-
 .../projects/[projectId]/modules/index.tsx    |  95 ++++---
 apps/app/types/issues.d.ts                    |   4 +-
 38 files changed, 965 insertions(+), 635 deletions(-)
 create mode 100644 apps/app/components/cycles/gantt-chart/blocks.tsx
 rename apps/app/components/cycles/{gantt-chart.tsx => gantt-chart/cycle-issues-layout.tsx} (55%)
 rename apps/app/components/cycles/{cycles-list-gantt-chart.tsx => gantt-chart/cycles-list-layout.tsx} (75%)
 create mode 100644 apps/app/components/cycles/gantt-chart/index.ts
 delete mode 100644 apps/app/components/gantt-chart/blocks/block.tsx
 create mode 100644 apps/app/components/gantt-chart/sidebar.tsx
 create mode 100644 apps/app/components/issues/gantt-chart/blocks.tsx
 create mode 100644 apps/app/components/issues/gantt-chart/index.ts
 rename apps/app/components/issues/{gantt-chart.tsx => gantt-chart/layout.tsx} (59%)
 create mode 100644 apps/app/components/modules/gantt-chart/blocks.tsx
 create mode 100644 apps/app/components/modules/gantt-chart/index.ts
 rename apps/app/components/modules/{gantt-chart.tsx => gantt-chart/module-issues-layout.tsx} (57%)
 rename apps/app/components/modules/{modules-list-gantt-chart.tsx => gantt-chart/modules-list-layout.tsx} (74%)

diff --git a/apps/app/components/core/filters/issues-view-filter.tsx b/apps/app/components/core/filters/issues-view-filter.tsx
index 37aab34e9..3238a8d17 100644
--- a/apps/app/components/core/filters/issues-view-filter.tsx
+++ b/apps/app/components/core/filters/issues-view-filter.tsx
@@ -113,43 +113,41 @@ export const IssuesFilterView: React.FC = () => {
           ))}
         </div>
       )}
-      {issueView !== "gantt_chart" && (
-        <SelectFilters
-          filters={filters}
-          onSelect={(option) => {
-            const key = option.key as keyof typeof filters;
+      <SelectFilters
+        filters={filters}
+        onSelect={(option) => {
+          const key = option.key as keyof typeof filters;
 
-            if (key === "start_date" || key === "target_date") {
-              const valueExists = checkIfArraysHaveSameElements(filters[key] ?? [], option.value);
+          if (key === "start_date" || key === "target_date") {
+            const valueExists = checkIfArraysHaveSameElements(filters[key] ?? [], option.value);
 
-              setFilters({
-                [key]: valueExists ? null : option.value,
-              });
-            } else {
-              const valueExists = filters[key]?.includes(option.value);
+            setFilters({
+              [key]: valueExists ? null : option.value,
+            });
+          } else {
+            const valueExists = filters[key]?.includes(option.value);
 
-              if (valueExists)
-                setFilters(
-                  {
-                    [option.key]: ((filters[key] ?? []) as any[])?.filter(
-                      (val) => val !== option.value
-                    ),
-                  },
-                  !Boolean(viewId)
-                );
-              else
-                setFilters(
-                  {
-                    [option.key]: [...((filters[key] ?? []) as any[]), option.value],
-                  },
-                  !Boolean(viewId)
-                );
-            }
-          }}
-          direction="left"
-          height="rg"
-        />
-      )}
+            if (valueExists)
+              setFilters(
+                {
+                  [option.key]: ((filters[key] ?? []) as any[])?.filter(
+                    (val) => val !== option.value
+                  ),
+                },
+                !Boolean(viewId)
+              );
+            else
+              setFilters(
+                {
+                  [option.key]: [...((filters[key] ?? []) as any[]), option.value],
+                },
+                !Boolean(viewId)
+              );
+          }
+        }}
+        direction="left"
+        height="rg"
+      />
       <Popover className="relative">
         {({ open }) => (
           <>
diff --git a/apps/app/components/core/views/all-views.tsx b/apps/app/components/core/views/all-views.tsx
index 4a757649c..79d5d6b11 100644
--- a/apps/app/components/core/views/all-views.tsx
+++ b/apps/app/components/core/views/all-views.tsx
@@ -114,7 +114,10 @@ export const AllViews: React.FC<Props> = ({
         )}
       </StrictModeDroppable>
       {groupedIssues ? (
-        !isEmpty || issueView === "kanban" || issueView === "calendar" ? (
+        !isEmpty ||
+        issueView === "kanban" ||
+        issueView === "calendar" ||
+        issueView === "gantt_chart" ? (
           <>
             {issueView === "list" ? (
               <AllLists
diff --git a/apps/app/components/cycles/gantt-chart/blocks.tsx b/apps/app/components/cycles/gantt-chart/blocks.tsx
new file mode 100644
index 000000000..9d90c0adf
--- /dev/null
+++ b/apps/app/components/cycles/gantt-chart/blocks.tsx
@@ -0,0 +1,83 @@
+import { useRouter } from "next/router";
+
+// ui
+import { Tooltip } from "components/ui";
+// icons
+import { ContrastIcon } from "components/icons";
+// helpers
+import { getDateRangeStatus, renderShortDate } from "helpers/date-time.helper";
+// types
+import { ICycle } from "types";
+
+export const CycleGanttBlock = ({ data }: { data: ICycle }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const cycleStatus = getDateRangeStatus(data?.start_date, data?.end_date);
+
+  return (
+    <div
+      className="flex items-center relative h-full w-full rounded"
+      style={{
+        backgroundColor:
+          cycleStatus === "current"
+            ? "#09a953"
+            : cycleStatus === "upcoming"
+            ? "#f7ae59"
+            : cycleStatus === "completed"
+            ? "#3f76ff"
+            : cycleStatus === "draft"
+            ? "rgb(var(--color-text-200))"
+            : "",
+      }}
+      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/cycles/${data?.id}`)}
+    >
+      <div className="absolute top-0 left-0 h-full w-full bg-custom-background-100/50" />
+      <Tooltip
+        tooltipContent={
+          <div className="space-y-1">
+            <h5>{data?.name}</h5>
+            <div>
+              {renderShortDate(data?.start_date ?? "")} to {renderShortDate(data?.end_date ?? "")}
+            </div>
+          </div>
+        }
+        position="top-left"
+      >
+        <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">
+          {data?.name}
+        </div>
+      </Tooltip>
+    </div>
+  );
+};
+
+export const CycleGanttSidebarBlock = ({ data }: { data: ICycle }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const cycleStatus = getDateRangeStatus(data?.start_date, data?.end_date);
+
+  return (
+    <div
+      className="relative w-full flex items-center gap-2 h-full"
+      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/cycles/${data?.id}`)}
+    >
+      <ContrastIcon
+        className="h-5 w-5 flex-shrink-0"
+        color={`${
+          cycleStatus === "current"
+            ? "#09a953"
+            : cycleStatus === "upcoming"
+            ? "#f7ae59"
+            : cycleStatus === "completed"
+            ? "#3f76ff"
+            : cycleStatus === "draft"
+            ? "rgb(var(--color-text-200))"
+            : ""
+        }`}
+      />
+      <h6 className="text-sm font-medium flex-grow truncate">{data?.name}</h6>
+    </div>
+  );
+};
diff --git a/apps/app/components/cycles/gantt-chart.tsx b/apps/app/components/cycles/gantt-chart/cycle-issues-layout.tsx
similarity index 55%
rename from apps/app/components/cycles/gantt-chart.tsx
rename to apps/app/components/cycles/gantt-chart/cycle-issues-layout.tsx
index fe276b50d..7741432ce 100644
--- a/apps/app/components/cycles/gantt-chart.tsx
+++ b/apps/app/components/cycles/gantt-chart/cycle-issues-layout.tsx
@@ -6,11 +6,8 @@ import useUser from "hooks/use-user";
 import useGanttChartCycleIssues from "hooks/gantt-chart/cycle-issues-view";
 import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
 // components
-import {
-  GanttChartRoot,
-  IssueGanttBlock,
-  renderIssueBlocksStructure,
-} from "components/gantt-chart";
+import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
+import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
 // types
 import { IIssue } from "types";
 
@@ -28,29 +25,20 @@ export const CycleIssuesGanttChartView = () => {
     cycleId as string
   );
 
-  // rendering issues on gantt sidebar
-  const GanttSidebarBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
-      <div
-        className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
-        style={{ backgroundColor: data?.state_detail?.color || "rgb(var(--color-primary-100))" }}
-      />
-      <div className="text-custom-text-100 text-sm">{data?.name}</div>
-    </div>
-  );
-
   return (
-    <div className="w-full h-full p-3">
+    <div className="w-full h-full">
       <GanttChartRoot
-        title="Cycles"
-        loaderTitle="Cycles"
+        border={false}
+        title="Issues"
+        loaderTitle="Issues"
         blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
         blockUpdateHandler={(block, payload) =>
           updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
         }
-        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
-        blockRender={(data: any) => <IssueGanttBlock issue={data as IIssue} />}
+        SidebarBlockRender={IssueGanttSidebarBlock}
+        BlockRender={IssueGanttBlock}
         enableReorder={orderBy === "sort_order"}
+        bottomSpacing
       />
     </div>
   );
diff --git a/apps/app/components/cycles/cycles-list-gantt-chart.tsx b/apps/app/components/cycles/gantt-chart/cycles-list-layout.tsx
similarity index 75%
rename from apps/app/components/cycles/cycles-list-gantt-chart.tsx
rename to apps/app/components/cycles/gantt-chart/cycles-list-layout.tsx
index 4ad0029d8..a5b576bca 100644
--- a/apps/app/components/cycles/cycles-list-gantt-chart.tsx
+++ b/apps/app/components/cycles/gantt-chart/cycles-list-layout.tsx
@@ -9,7 +9,8 @@ import cyclesService from "services/cycles.service";
 // hooks
 import useUser from "hooks/use-user";
 // components
-import { CycleGanttBlock, GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
+import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
+import { CycleGanttBlock, CycleGanttSidebarBlock } from "components/cycles";
 // types
 import { ICycle } from "types";
 
@@ -24,17 +25,6 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
 
   const { user } = useUser();
 
-  // rendering issues on gantt sidebar
-  const GanttSidebarBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
-      <div
-        className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
-        style={{ backgroundColor: "rgb(var(--color-primary-100))" }}
-      />
-      <div className="text-custom-text-100 text-sm">{data?.name}</div>
-    </div>
-  );
-
   const handleCycleUpdate = (cycle: ICycle, payload: IBlockUpdateData) => {
     if (!workspaceSlug || !user) return;
 
@@ -88,10 +78,11 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
         loaderTitle="Cycles"
         blocks={cycles ? blockFormat(cycles) : null}
         blockUpdateHandler={(block, payload) => handleCycleUpdate(block, payload)}
-        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
-        blockRender={(data: any) => <CycleGanttBlock cycle={data as ICycle} />}
-        enableLeftDrag={false}
-        enableRightDrag={false}
+        SidebarBlockRender={CycleGanttSidebarBlock}
+        BlockRender={CycleGanttBlock}
+        enableBlockLeftResize={false}
+        enableBlockRightResize={false}
+        enableBlockMove={false}
       />
     </div>
   );
diff --git a/apps/app/components/cycles/gantt-chart/index.ts b/apps/app/components/cycles/gantt-chart/index.ts
new file mode 100644
index 000000000..e4850b2e2
--- /dev/null
+++ b/apps/app/components/cycles/gantt-chart/index.ts
@@ -0,0 +1,3 @@
+export * from "./blocks";
+export * from "./cycle-issues-layout";
+export * from "./cycles-list-layout";
diff --git a/apps/app/components/cycles/index.ts b/apps/app/components/cycles/index.ts
index 40355d574..4b43b3a74 100644
--- a/apps/app/components/cycles/index.ts
+++ b/apps/app/components/cycles/index.ts
@@ -1,11 +1,10 @@
 export * from "./cycles-list";
 export * from "./active-cycle-details";
 export * from "./active-cycle-stats";
-export * from "./cycles-list-gantt-chart";
+export * from "./gantt-chart";
 export * from "./cycles-view";
 export * from "./delete-cycle-modal";
 export * from "./form";
-export * from "./gantt-chart";
 export * from "./modal";
 export * from "./select";
 export * from "./sidebar";
diff --git a/apps/app/components/cycles/single-cycle-list.tsx b/apps/app/components/cycles/single-cycle-list.tsx
index 7518568ed..ec01da9e7 100644
--- a/apps/app/components/cycles/single-cycle-list.tsx
+++ b/apps/app/components/cycles/single-cycle-list.tsx
@@ -106,6 +106,7 @@ function RadialProgressBar({ progress }: progress) {
     </div>
   );
 }
+
 export const SingleCycleList: React.FC<TSingleStatProps> = ({
   cycle,
   handleEditCycle,
diff --git a/apps/app/components/gantt-chart/blocks/block.tsx b/apps/app/components/gantt-chart/blocks/block.tsx
deleted file mode 100644
index 52fd1fe52..000000000
--- a/apps/app/components/gantt-chart/blocks/block.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-// ui
-import { Tooltip } from "components/ui";
-// helpers
-import { renderShortDate } from "helpers/date-time.helper";
-// types
-import { ICycle, IIssue, IModule } from "types";
-// constants
-import { MODULE_STATUS } from "constants/module";
-
-export const IssueGanttBlock = ({ issue }: { issue: IIssue }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  return (
-    <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
-      <a className="relative flex items-center w-full h-full shadow-sm transition-all duration-300">
-        <div
-          className="flex-shrink-0 w-0.5 h-full"
-          style={{ backgroundColor: issue.state_detail?.color }}
-        />
-        <Tooltip
-          tooltipContent={
-            <div className="space-y-1">
-              <h5>{issue.name}</h5>
-              <div>
-                {renderShortDate(issue.start_date ?? "")} to{" "}
-                {renderShortDate(issue.target_date ?? "")}
-              </div>
-            </div>
-          }
-          position="top-left"
-        >
-          <div className="text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">
-            {issue.name}
-          </div>
-        </Tooltip>
-      </a>
-    </Link>
-  );
-};
-
-export const CycleGanttBlock = ({ cycle }: { cycle: ICycle }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  return (
-    <Link href={`/${workspaceSlug}/projects/${cycle.project}/cycles/${cycle.id}`}>
-      <a className="relative flex items-center w-full h-full shadow-sm transition-all duration-300">
-        <div className="flex-shrink-0 w-0.5 h-full bg-custom-primary-100" />
-        <Tooltip
-          tooltipContent={
-            <div className="space-y-1">
-              <h5>{cycle.name}</h5>
-              <div>
-                {renderShortDate(cycle.start_date ?? "")} to {renderShortDate(cycle.end_date ?? "")}
-              </div>
-            </div>
-          }
-          position="top-left"
-        >
-          <div className="text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">
-            {cycle.name}
-          </div>
-        </Tooltip>
-      </a>
-    </Link>
-  );
-};
-
-export const ModuleGanttBlock = ({ module }: { module: IModule }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  return (
-    <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
-      <a className="relative flex items-center w-full h-full shadow-sm transition-all duration-300">
-        <div
-          className="flex-shrink-0 w-0.5 h-full"
-          style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === module.status)?.color }}
-        />
-        <Tooltip
-          tooltipContent={
-            <div className="space-y-1">
-              <h5>{module.name}</h5>
-              <div>
-                {renderShortDate(module.start_date ?? "")} to{" "}
-                {renderShortDate(module.target_date ?? "")}
-              </div>
-            </div>
-          }
-          position="top-left"
-        >
-          <div className="text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">
-            {module.name}
-          </div>
-        </Tooltip>
-      </a>
-    </Link>
-  );
-};
diff --git a/apps/app/components/gantt-chart/blocks/blocks-display.tsx b/apps/app/components/gantt-chart/blocks/blocks-display.tsx
index fd43c733e..f0e7279be 100644
--- a/apps/app/components/gantt-chart/blocks/blocks-display.tsx
+++ b/apps/app/components/gantt-chart/blocks/blocks-display.tsx
@@ -1,8 +1,7 @@
 import { FC } from "react";
 
-// react-beautiful-dnd
-import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
-import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+// hooks
+import { useChart } from "../hooks";
 // helpers
 import { ChartDraggable } from "../helpers/draggable";
 import { renderDateFormat } from "helpers/date-time.helper";
@@ -12,90 +11,59 @@ import { IBlockUpdateData, IGanttBlock } from "../types";
 export const GanttChartBlocks: FC<{
   itemsContainerWidth: number;
   blocks: IGanttBlock[] | null;
-  sidebarBlockRender: FC;
-  blockRender: FC;
+  BlockRender: React.FC<any>;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  enableLeftDrag: boolean;
-  enableRightDrag: boolean;
-  enableReorder: boolean;
+  enableBlockLeftResize: boolean;
+  enableBlockRightResize: boolean;
+  enableBlockMove: boolean;
 }> = ({
   itemsContainerWidth,
   blocks,
-  sidebarBlockRender,
-  blockRender,
+  BlockRender,
   blockUpdateHandler,
-  enableLeftDrag,
-  enableRightDrag,
-  enableReorder,
+  enableBlockLeftResize,
+  enableBlockRightResize,
+  enableBlockMove,
 }) => {
-  const handleChartBlockPosition = (
-    block: IGanttBlock,
-    totalBlockShifts: number,
-    dragDirection: "left" | "right"
-  ) => {
-    let updatedDate = new Date();
+  const { activeBlock, dispatch } = useChart();
 
-    if (dragDirection === "left") {
-      const originalDate = new Date(block.start_date);
-
-      const currentDay = originalDate.getDate();
-      updatedDate = new Date(originalDate);
-
-      updatedDate.setDate(currentDay - totalBlockShifts);
-    } else {
-      const originalDate = new Date(block.target_date);
-
-      const currentDay = originalDate.getDate();
-      updatedDate = new Date(originalDate);
-
-      updatedDate.setDate(currentDay + totalBlockShifts);
-    }
-
-    blockUpdateHandler(block.data, {
-      [dragDirection === "left" ? "start_date" : "target_date"]: renderDateFormat(updatedDate),
+  // update the active block on hover
+  const updateActiveBlock = (block: IGanttBlock | null) => {
+    dispatch({
+      type: "PARTIAL_UPDATE",
+      payload: {
+        activeBlock: block,
+      },
     });
   };
 
-  const handleOrderChange = (result: DropResult) => {
-    if (!blocks) return;
+  const handleChartBlockPosition = (
+    block: IGanttBlock,
+    totalBlockShifts: number,
+    dragDirection: "left" | "right" | "move"
+  ) => {
+    const originalStartDate = new Date(block.start_date);
+    const updatedStartDate = new Date(originalStartDate);
 
-    const { source, destination, draggableId } = result;
+    const originalTargetDate = new Date(block.target_date);
+    const updatedTargetDate = new Date(originalTargetDate);
 
-    if (!destination) return;
-
-    if (source.index === destination.index && document) {
-      // const draggedBlock = document.querySelector(`#${draggableId}`) as HTMLElement;
-      // const blockStyles = window.getComputedStyle(draggedBlock);
-
-      // console.log(blockStyles.marginLeft);
-
-      return;
+    // update the start date on left resize
+    if (dragDirection === "left")
+      updatedStartDate.setDate(originalStartDate.getDate() - totalBlockShifts);
+    // update the target date on right resize
+    else if (dragDirection === "right")
+      updatedTargetDate.setDate(originalTargetDate.getDate() + totalBlockShifts);
+    // update both the dates on x-axis move
+    else if (dragDirection === "move") {
+      updatedStartDate.setDate(originalStartDate.getDate() + totalBlockShifts);
+      updatedTargetDate.setDate(originalTargetDate.getDate() + totalBlockShifts);
     }
 
-    let updatedSortOrder = blocks[source.index].sort_order;
-
-    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
-    else if (destination.index === blocks.length - 1)
-      updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
-    else {
-      const destinationSortingOrder = blocks[destination.index].sort_order;
-      const relativeDestinationSortingOrder =
-        source.index < destination.index
-          ? blocks[destination.index + 1].sort_order
-          : blocks[destination.index - 1].sort_order;
-
-      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
-    }
-
-    const removedElement = blocks.splice(source.index, 1)[0];
-    blocks.splice(destination.index, 0, removedElement);
-
-    blockUpdateHandler(removedElement.data, {
-      sort_order: {
-        destinationIndex: destination.index,
-        newSortOrder: updatedSortOrder,
-        sourceIndex: source.index,
-      },
+    // call the block update handler with the updated dates
+    blockUpdateHandler(block.data, {
+      start_date: renderDateFormat(updatedStartDate),
+      target_date: renderDateFormat(updatedTargetDate),
     });
   };
 
@@ -104,75 +72,29 @@ export const GanttChartBlocks: FC<{
       className="relative z-[5] mt-[72px] h-full overflow-hidden overflow-y-auto"
       style={{ width: `${itemsContainerWidth}px` }}
     >
-      <DragDropContext onDragEnd={handleOrderChange}>
-        <StrictModeDroppable droppableId="gantt">
-          {(droppableProvided, droppableSnapshot) => (
-            <div
-              className="w-full space-y-2"
-              ref={droppableProvided.innerRef}
-              {...droppableProvided.droppableProps}
-            >
-              <>
-                {blocks &&
-                  blocks.length > 0 &&
-                  blocks.map(
-                    (block, index: number) =>
-                      block.start_date &&
-                      block.target_date && (
-                        <Draggable
-                          key={`block-${block.id}`}
-                          draggableId={`block-${block.id}`}
-                          index={index}
-                          isDragDisabled={!enableReorder}
-                        >
-                          {(provided) => (
-                            <div
-                              className={
-                                droppableSnapshot.isDraggingOver ? "bg-custom-border-100/10" : ""
-                              }
-                              ref={provided.innerRef}
-                              {...provided.draggableProps}
-                            >
-                              <ChartDraggable
-                                block={block}
-                                handleBlock={(...args) => handleChartBlockPosition(block, ...args)}
-                                enableLeftDrag={enableLeftDrag}
-                                enableRightDrag={enableRightDrag}
-                                provided={provided}
-                              >
-                                <div
-                                  className="rounded shadow-sm bg-custom-background-80 overflow-hidden h-9 flex items-center transition-all"
-                                  style={{
-                                    width: `${block.position?.width}px`,
-                                  }}
-                                >
-                                  {blockRender({
-                                    ...block.data,
-                                  })}
-                                </div>
-                              </ChartDraggable>
-                            </div>
-                          )}
-                        </Draggable>
-                      )
-                  )}
-                {droppableProvided.placeholder}
-              </>
-            </div>
-          )}
-        </StrictModeDroppable>
-      </DragDropContext>
-
-      {/* sidebar */}
-      {/* <div className="fixed top-0 bottom-0 w-[300px] flex-shrink-0 divide-y divide-custom-border-200 border-r border-custom-border-200 overflow-y-auto">
-        {blocks &&
-          blocks.length > 0 &&
-          blocks.map((block: any, _idx: number) => (
-            <div className="relative h-[40px] bg-custom-background-100" key={`sidebar-blocks-${_idx}`}>
-              {sidebarBlockRender(block?.data)}
-            </div>
-          ))}
-      </div> */}
+      {blocks &&
+        blocks.length > 0 &&
+        blocks.map(
+          (block) =>
+            block.start_date &&
+            block.target_date && (
+              <div
+                key={`block-${block.id}`}
+                className={`h-11 ${activeBlock?.id === block.id ? "bg-custom-background-80" : ""}`}
+                onMouseEnter={() => updateActiveBlock(block)}
+                onMouseLeave={() => updateActiveBlock(null)}
+              >
+                <ChartDraggable
+                  block={block}
+                  BlockRender={BlockRender}
+                  handleBlock={(...args) => handleChartBlockPosition(block, ...args)}
+                  enableBlockLeftResize={enableBlockLeftResize}
+                  enableBlockRightResize={enableBlockRightResize}
+                  enableBlockMove={enableBlockMove}
+                />
+              </div>
+            )
+        )}
     </div>
   );
 };
diff --git a/apps/app/components/gantt-chart/blocks/index.ts b/apps/app/components/gantt-chart/blocks/index.ts
index 8773b2797..18ca5da9e 100644
--- a/apps/app/components/gantt-chart/blocks/index.ts
+++ b/apps/app/components/gantt-chart/blocks/index.ts
@@ -1,2 +1 @@
-export * from "./block";
 export * from "./blocks-display";
diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx
index 0cc8a14ee..aa79ae19c 100644
--- a/apps/app/components/gantt-chart/chart/index.tsx
+++ b/apps/app/components/gantt-chart/chart/index.tsx
@@ -3,6 +3,7 @@ import { FC, useEffect, useState } from "react";
 import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/20/solid";
 // components
 import { GanttChartBlocks } from "components/gantt-chart";
+import { GanttSidebar } from "../sidebar";
 // import { HourChartView } from "./hours";
 // import { DayChartView } from "./day";
 // import { WeekChartView } from "./week";
@@ -25,7 +26,7 @@ import {
   getMonthChartItemPositionWidthInMonth,
 } from "../views";
 // types
-import { ChartDataType, IBlockUpdateData, IGanttBlock } from "../types";
+import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
 // data
 import { currentViewDataWithView } from "../data";
 // context
@@ -33,15 +34,17 @@ import { useChart } from "../hooks";
 
 type ChartViewRootProps = {
   border: boolean;
-  title: null | string;
+  title: string;
   loaderTitle: string;
   blocks: IGanttBlock[] | null;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  sidebarBlockRender: FC<any>;
-  blockRender: FC<any>;
-  enableLeftDrag: boolean;
-  enableRightDrag: boolean;
+  SidebarBlockRender: React.FC<any>;
+  BlockRender: React.FC<any>;
+  enableBlockLeftResize: boolean;
+  enableBlockRightResize: boolean;
+  enableBlockMove: boolean;
   enableReorder: boolean;
+  bottomSpacing: boolean;
 };
 
 export const ChartViewRoot: FC<ChartViewRootProps> = ({
@@ -50,22 +53,24 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   blocks = null,
   loaderTitle,
   blockUpdateHandler,
-  sidebarBlockRender,
-  blockRender,
-  enableLeftDrag,
-  enableRightDrag,
+  SidebarBlockRender,
+  BlockRender,
+  enableBlockLeftResize,
+  enableBlockRightResize,
+  enableBlockMove,
   enableReorder,
+  bottomSpacing,
 }) => {
-  const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
-
   const [itemsContainerWidth, setItemsContainerWidth] = useState<number>(0);
   const [fullScreenMode, setFullScreenMode] = useState<boolean>(false);
-  const [blocksSidebarView, setBlocksSidebarView] = useState<boolean>(false);
 
   // blocks state management starts
   const [chartBlocks, setChartBlocks] = useState<IGanttBlock[] | null>(null);
 
-  const renderBlockStructure = (view: any, blocks: IGanttBlock[]) =>
+  const { currentView, currentViewData, renderView, dispatch, allViews, updateScrollLeft } =
+    useChart();
+
+  const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) =>
     blocks && blocks.length > 0
       ? blocks.map((block: any) => ({
           ...block,
@@ -74,16 +79,16 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
       : [];
 
   useEffect(() => {
-    if (currentViewData && blocks && blocks.length > 0)
+    if (currentViewData && blocks)
       setChartBlocks(() => renderBlockStructure(currentViewData, blocks));
   }, [currentViewData, blocks]);
 
   // blocks state management ends
 
-  const handleChartView = (key: string) => updateCurrentViewRenderPayload(null, key);
+  const handleChartView = (key: TGanttViews) => updateCurrentViewRenderPayload(null, key);
 
-  const updateCurrentViewRenderPayload = (side: null | "left" | "right", view: string) => {
-    const selectedCurrentView = view;
+  const updateCurrentViewRenderPayload = (side: null | "left" | "right", view: TGanttViews) => {
+    const selectedCurrentView: TGanttViews = view;
     const selectedCurrentViewData: ChartDataType | undefined =
       selectedCurrentView && selectedCurrentView === currentViewData?.key
         ? currentViewData
@@ -155,6 +160,9 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
 
   const updatingCurrentLeftScrollPosition = (width: number) => {
     const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
+
+    if (!scrollContainer) return;
+
     scrollContainer.scrollLeft = width + scrollContainer?.scrollLeft;
     setItemsContainerWidth(width + scrollContainer?.scrollLeft);
   };
@@ -195,6 +203,8 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
     const clientVisibleWidth: number = scrollContainer?.clientWidth;
     const currentScrollPosition: number = scrollContainer?.scrollLeft;
 
+    updateScrollLeft(currentScrollPosition);
+
     const approxRangeLeft: number =
       scrollWidth >= clientVisibleWidth + 1000 ? 1000 : scrollWidth - clientVisibleWidth;
     const approxRangeRight: number = scrollWidth - (approxRangeLeft + clientVisibleWidth);
@@ -205,16 +215,6 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
       updateCurrentViewRenderPayload("left", currentView);
   };
 
-  useEffect(() => {
-    const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
-
-    scrollContainer.addEventListener("scroll", onScroll);
-
-    return () => {
-      scrollContainer.removeEventListener("scroll", onScroll);
-    };
-  }, [renderView]);
-
   return (
     <div
       className={`${
@@ -225,44 +225,14 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
         border ? `border border-custom-border-200` : ``
       } flex h-full flex-col rounded-sm select-none bg-custom-background-100 shadow`}
     >
-      {/* chart title */}
-      {/* <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-custom-border-200">
-        {title && (
-          <div className="text-lg font-medium flex gap-2 items-center">
-            <div>{title}</div>
-            <div className="text-xs rounded-full px-2 py-1 font-bold border border-custom-primary/75 bg-custom-primary/5 text-custom-text-100">
-              Gantt View Beta
-            </div>
-          </div>
-        )}
-        {blocks === null ? (
-          <div className="text-sm font-medium ml-auto">Loading...</div>
-        ) : (
-          <div className="text-sm font-medium ml-auto">
-            {blocks.length} {loaderTitle}
-          </div>
-        )}
-      </div> */}
-
       {/* chart header */}
-      <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap p-2">
-        {/* <div
-          className="transition-all border border-custom-border-200 w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80"
-          onClick={() => setBlocksSidebarView(() => !blocksSidebarView)}
-        >
-          {blocksSidebarView ? (
-            <XMarkIcon className="h-5 w-5" />
-          ) : (
-            <Bars4Icon className="h-4 w-4" />
-          )}
-        </div> */}
-
+      <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap px-2.5 py-2">
         {title && (
           <div className="text-lg font-medium flex gap-2 items-center">
             <div>{title}</div>
-            <div className="text-xs rounded-full px-2 py-1 font-bold border border-custom-primary/75 bg-custom-primary/5 text-custom-text-100">
+            {/* <div className="text-xs rounded-full px-2 py-1 font-bold border border-custom-primary/75 bg-custom-primary/5 text-custom-text-100">
               Gantt View Beta
-            </div>
+            </div> */}
           </div>
         )}
 
@@ -282,7 +252,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             allViews.map((_chatView: any, _idx: any) => (
               <div
                 key={_chatView?.key}
-                className={`cursor-pointer rounded-sm border border-custom-border-200 p-1 px-2 text-xs ${
+                className={`cursor-pointer rounded-sm p-1 px-2 text-xs ${
                   currentView === _chatView?.key
                     ? `bg-custom-background-80`
                     : `hover:bg-custom-background-90`
@@ -296,7 +266,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
 
         <div className="flex items-center gap-1">
           <div
-            className={`cursor-pointer rounded-sm border border-custom-border-200 p-1 px-2 text-xs hover:bg-custom-background-80`}
+            className="cursor-pointer rounded-sm p-1 px-2 text-xs hover:bg-custom-background-80"
             onClick={handleToday}
           >
             Today
@@ -316,26 +286,30 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
       </div>
 
       {/* content */}
-      <div className="relative flex h-full w-full flex-1 overflow-hidden border-t border-custom-border-200">
+      <div
+        id="gantt-container"
+        className={`relative flex h-full w-full flex-1 overflow-hidden border-t border-custom-border-200 ${
+          bottomSpacing ? "mb-8" : ""
+        }`}
+      >
         <div
-          className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto"
-          id="scroll-container"
+          id="gantt-sidebar"
+          className="h-full w-1/4 flex flex-col border-r border-custom-border-200 space-y-3"
+        >
+          <div className="h-[60px] border-b border-custom-border-200 box-border flex-shrink-0" />
+          <GanttSidebar
+            title={title}
+            blockUpdateHandler={blockUpdateHandler}
+            blocks={chartBlocks}
+            SidebarBlockRender={SidebarBlockRender}
+            enableReorder={enableReorder}
+          />
+        </div>
+        <div
+          className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto horizontal-scroll-enable"
+          id="scroll-container"
+          onScroll={onScroll}
         >
-          {/* blocks components */}
-          {currentView && currentViewData && (
-            <GanttChartBlocks
-              itemsContainerWidth={itemsContainerWidth}
-              blocks={chartBlocks}
-              sidebarBlockRender={sidebarBlockRender}
-              blockRender={blockRender}
-              blockUpdateHandler={blockUpdateHandler}
-              enableLeftDrag={enableLeftDrag}
-              enableRightDrag={enableRightDrag}
-              enableReorder={enableReorder}
-            />
-          )}
-
-          {/* chart */}
           {/* {currentView && currentView === "hours" && <HourChartView />} */}
           {/* {currentView && currentView === "day" && <DayChartView />} */}
           {/* {currentView && currentView === "week" && <WeekChartView />} */}
@@ -343,6 +317,19 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
           {currentView && currentView === "month" && <MonthChartView />}
           {/* {currentView && currentView === "quarter" && <QuarterChartView />} */}
           {/* {currentView && currentView === "year" && <YearChartView />} */}
+
+          {/* blocks */}
+          {currentView && currentViewData && (
+            <GanttChartBlocks
+              itemsContainerWidth={itemsContainerWidth}
+              blocks={chartBlocks}
+              BlockRender={BlockRender}
+              blockUpdateHandler={blockUpdateHandler}
+              enableBlockLeftResize={enableBlockLeftResize}
+              enableBlockRightResize={enableBlockRightResize}
+              enableBlockMove={enableBlockMove}
+            />
+          )}
         </div>
       </div>
     </div>
diff --git a/apps/app/components/gantt-chart/chart/month.tsx b/apps/app/components/gantt-chart/chart/month.tsx
index b6c68b5d1..2a4a67daf 100644
--- a/apps/app/components/gantt-chart/chart/month.tsx
+++ b/apps/app/components/gantt-chart/chart/month.tsx
@@ -17,9 +17,38 @@ export const MonthChartView: FC<any> = () => {
           monthBlocks.length > 0 &&
           monthBlocks.map((block, _idxRoot) => (
             <div key={`month-${block?.month}-${block?.year}`} className="relative flex flex-col">
-              <div className="relative border-b border-custom-border-200">
-                <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
-                  {block?.title}
+              <div className="h-[60px] w-full">
+                <div className="relative h-[30px]">
+                  <div className="sticky left-0 inline-flex whitespace-nowrap px-3 py-2 text-xs font-medium capitalize">
+                    {block?.title}
+                  </div>
+                </div>
+
+                <div className="flex w-full h-[30px]">
+                  {block?.children &&
+                    block?.children.length > 0 &&
+                    block?.children.map((monthDay, _idx) => (
+                      <div
+                        key={`sub-title-${_idxRoot}-${_idx}`}
+                        className="flex-shrink-0 border-b py-1 text-center capitalize border-custom-border-200"
+                        style={{ width: `${currentViewData?.data.width}px` }}
+                      >
+                        <div className="text-xs space-x-1">
+                          <span className="text-custom-text-200">
+                            {monthDay.dayData.shortTitle[0]}
+                          </span>{" "}
+                          <span
+                            className={
+                              monthDay.today
+                                ? "bg-custom-primary-100 text-white px-1 rounded-full"
+                                : ""
+                            }
+                          >
+                            {monthDay.day}
+                          </span>
+                        </div>
+                      </div>
+                    ))}
                 </div>
               </div>
 
@@ -28,19 +57,10 @@ export const MonthChartView: FC<any> = () => {
                   block?.children.length > 0 &&
                   block?.children.map((monthDay, _idx) => (
                     <div
-                      key={`sub-title-${_idxRoot}-${_idx}`}
+                      key={`column-${_idxRoot}-${_idx}`}
                       className="relative flex h-full flex-col overflow-hidden whitespace-nowrap"
                       style={{ width: `${currentViewData?.data.width}px` }}
                     >
-                      <div
-                        className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          monthDay?.today
-                            ? `text-red-500 border-red-500`
-                            : `border-custom-border-200`
-                        }`}
-                      >
-                        <div>{monthDay?.title}</div>
-                      </div>
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
                           ["sat", "sun"].includes(monthDay?.dayData?.shortTitle || "")
@@ -48,9 +68,9 @@ export const MonthChartView: FC<any> = () => {
                             : ``
                         }`}
                       >
-                        {monthDay?.today && (
+                        {/* {monthDay?.today && (
                           <div className="absolute top-0 bottom-0 w-[1px] bg-red-500" />
-                        )}
+                        )} */}
                       </div>
                     </div>
                   ))}
diff --git a/apps/app/components/gantt-chart/contexts/index.tsx b/apps/app/components/gantt-chart/contexts/index.tsx
index 4f858cf33..05dfbe678 100644
--- a/apps/app/components/gantt-chart/contexts/index.tsx
+++ b/apps/app/components/gantt-chart/contexts/index.tsx
@@ -32,16 +32,27 @@ export const ChartContextProvider: React.FC<{ children: React.ReactNode }> = ({
     currentViewData: currentViewDataWithView(initialView),
     renderView: [],
     allViews: allViewsWithData,
+    activeBlock: null,
   });
 
+  const [scrollLeft, setScrollLeft] = useState(0);
+
   const handleDispatch = (action: ChartContextActionPayload): ChartContextData => {
     const newState = chartReducer(state, action);
+
     dispatch(() => newState);
+
     return newState;
   };
 
+  const updateScrollLeft = (scrollLeft: number) => {
+    setScrollLeft(scrollLeft);
+  };
+
   return (
-    <ChartContext.Provider value={{ ...state, dispatch: handleDispatch }}>
+    <ChartContext.Provider
+      value={{ ...state, scrollLeft, updateScrollLeft, dispatch: handleDispatch }}
+    >
       {children}
     </ChartContext.Provider>
   );
diff --git a/apps/app/components/gantt-chart/data/index.ts b/apps/app/components/gantt-chart/data/index.ts
index 4be799998..4e1921434 100644
--- a/apps/app/components/gantt-chart/data/index.ts
+++ b/apps/app/components/gantt-chart/data/index.ts
@@ -108,8 +108,8 @@ export const allViewsWithData: ChartDataType[] = [
       startDate: new Date(),
       currentDate: new Date(),
       endDate: new Date(),
-      approxFilterRange: 8,
-      width: 80, // it will preview monthly all dates with weekends highlighted with no limitations ex: title (1, 2, 3)
+      approxFilterRange: 6,
+      width: 55, // it will preview monthly all dates with weekends highlighted with no limitations ex: title (1, 2, 3)
     },
   },
   // {
diff --git a/apps/app/components/gantt-chart/helpers/draggable.tsx b/apps/app/components/gantt-chart/helpers/draggable.tsx
index 320f4355f..20423ff59 100644
--- a/apps/app/components/gantt-chart/helpers/draggable.tsx
+++ b/apps/app/components/gantt-chart/helpers/draggable.tsx
@@ -1,45 +1,57 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
-// react-beautiful-dnd
-import { DraggableProvided } from "react-beautiful-dnd";
+// icons
+import { Icon } from "components/ui";
+// hooks
 import { useChart } from "../hooks";
 // types
 import { IGanttBlock } from "../types";
 
 type Props = {
-  children: any;
   block: IGanttBlock;
-  handleBlock: (totalBlockShifts: number, dragDirection: "left" | "right") => void;
-  enableLeftDrag: boolean;
-  enableRightDrag: boolean;
-  provided: DraggableProvided;
+  BlockRender: React.FC<any>;
+  handleBlock: (totalBlockShifts: number, dragDirection: "left" | "right" | "move") => void;
+  enableBlockLeftResize: boolean;
+  enableBlockRightResize: boolean;
+  enableBlockMove: boolean;
 };
 
 export const ChartDraggable: React.FC<Props> = ({
-  children,
   block,
+  BlockRender,
   handleBlock,
-  enableLeftDrag = true,
-  enableRightDrag = true,
-  provided,
+  enableBlockLeftResize,
+  enableBlockRightResize,
+  enableBlockMove,
 }) => {
   const [isLeftResizing, setIsLeftResizing] = useState(false);
   const [isRightResizing, setIsRightResizing] = useState(false);
+  const [isMoving, setIsMoving] = useState(false);
+  const [posFromLeft, setPosFromLeft] = useState<number | null>(null);
 
-  const parentDivRef = useRef<HTMLDivElement>(null);
   const resizableRef = useRef<HTMLDivElement>(null);
 
-  const { currentViewData } = useChart();
+  const { currentViewData, scrollLeft } = useChart();
 
+  // check if cursor reaches either end while resizing/dragging
   const checkScrollEnd = (e: MouseEvent): number => {
+    const SCROLL_THRESHOLD = 70;
+
     let delWidth = 0;
 
+    const ganttContainer = document.querySelector("#gantt-container") as HTMLElement;
+    const ganttSidebar = document.querySelector("#gantt-sidebar") as HTMLElement;
+
     const scrollContainer = document.querySelector("#scroll-container") as HTMLElement;
-    const appSidebar = document.querySelector("#app-sidebar") as HTMLElement;
+
+    if (!ganttContainer || !ganttSidebar || !scrollContainer) return 0;
 
     const posFromLeft = e.clientX;
     // manually scroll to left if reached the left end while dragging
-    if (posFromLeft - appSidebar.clientWidth <= 70) {
+    if (
+      posFromLeft - (ganttContainer.getBoundingClientRect().left + ganttSidebar.clientWidth) <=
+      SCROLL_THRESHOLD
+    ) {
       if (e.movementX > 0) return 0;
 
       delWidth = -5;
@@ -48,8 +60,8 @@ export const ChartDraggable: React.FC<Props> = ({
     } else delWidth = e.movementX;
 
     // manually scroll to right if reached the right end while dragging
-    const posFromRight = window.innerWidth - e.clientX;
-    if (posFromRight <= 70) {
+    const posFromRight = ganttContainer.getBoundingClientRect().right - e.clientX;
+    if (posFromRight <= SCROLL_THRESHOLD) {
       if (e.movementX < 0) return 0;
 
       delWidth = 5;
@@ -60,12 +72,11 @@ export const ChartDraggable: React.FC<Props> = ({
     return delWidth;
   };
 
-  const handleLeftDrag = () => {
-    if (!currentViewData || !resizableRef.current || !parentDivRef.current || !block.position)
-      return;
+  // handle block resize from the left end
+  const handleBlockLeftResize = () => {
+    if (!currentViewData || !resizableRef.current || !block.position) return;
 
     const resizableDiv = resizableRef.current;
-    const parentDiv = parentDivRef.current;
 
     const columnWidth = currentViewData.data.width;
 
@@ -73,11 +84,9 @@ export const ChartDraggable: React.FC<Props> = ({
       resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
 
     let initialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
-    let initialMarginLeft = parseInt(parentDiv.style.marginLeft);
+    let initialMarginLeft = parseInt(resizableDiv.style.marginLeft);
 
     const handleMouseMove = (e: MouseEvent) => {
-      if (!window) return;
-
       let delWidth = 0;
 
       delWidth = checkScrollEnd(e);
@@ -92,7 +101,7 @@ export const ChartDraggable: React.FC<Props> = ({
       if (newWidth < columnWidth) return;
 
       resizableDiv.style.width = `${newWidth}px`;
-      parentDiv.style.marginLeft = `${newMarginLeft}px`;
+      resizableDiv.style.marginLeft = `${newMarginLeft}px`;
 
       if (block.position) {
         block.position.width = newWidth;
@@ -100,6 +109,7 @@ export const ChartDraggable: React.FC<Props> = ({
       }
     };
 
+    // remove event listeners and call block handler with the updated start date
     const handleMouseUp = () => {
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
@@ -115,9 +125,9 @@ export const ChartDraggable: React.FC<Props> = ({
     document.addEventListener("mouseup", handleMouseUp);
   };
 
-  const handleRightDrag = () => {
-    if (!currentViewData || !resizableRef.current || !parentDivRef.current || !block.position)
-      return;
+  // handle block resize from the right end
+  const handleBlockRightResize = () => {
+    if (!currentViewData || !resizableRef.current || !block.position) return;
 
     const resizableDiv = resizableRef.current;
 
@@ -129,8 +139,6 @@ export const ChartDraggable: React.FC<Props> = ({
     let initialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
 
     const handleMouseMove = (e: MouseEvent) => {
-      if (!window) return;
-
       let delWidth = 0;
 
       delWidth = checkScrollEnd(e);
@@ -145,6 +153,7 @@ export const ChartDraggable: React.FC<Props> = ({
       if (block.position) block.position.width = Math.max(newWidth, 80);
     };
 
+    // remove event listeners and call block handler with the updated target date
     const handleMouseUp = () => {
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
@@ -160,46 +169,148 @@ export const ChartDraggable: React.FC<Props> = ({
     document.addEventListener("mouseup", handleMouseUp);
   };
 
+  // handle block x-axis move
+  const handleBlockMove = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (!enableBlockMove || !currentViewData || !resizableRef.current || !block.position) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    setIsMoving(true);
+
+    const resizableDiv = resizableRef.current;
+
+    const columnWidth = currentViewData.data.width;
+
+    const blockInitialMarginLeft = parseInt(resizableDiv.style.marginLeft);
+
+    let initialMarginLeft = parseInt(resizableDiv.style.marginLeft);
+
+    const handleMouseMove = (e: MouseEvent) => {
+      let delWidth = 0;
+
+      delWidth = checkScrollEnd(e);
+
+      // calculate new marginLeft and update the initial marginLeft using -=
+      const newMarginLeft = Math.round((initialMarginLeft += delWidth) / columnWidth) * columnWidth;
+
+      resizableDiv.style.marginLeft = `${newMarginLeft}px`;
+
+      if (block.position) block.position.marginLeft = newMarginLeft;
+    };
+
+    // remove event listeners and call block handler with the updated dates
+    const handleMouseUp = () => {
+      setIsMoving(false);
+
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+
+      const totalBlockShifts = Math.ceil(
+        (parseInt(resizableDiv.style.marginLeft) - blockInitialMarginLeft) / columnWidth
+      );
+
+      handleBlock(totalBlockShifts, "move");
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+  };
+
+  // scroll to a hidden block
+  const handleScrollToBlock = () => {
+    const scrollContainer = document.querySelector("#scroll-container") as HTMLElement;
+
+    if (!scrollContainer || !block.position) return;
+
+    // update container's scroll position to the block's position
+    scrollContainer.scrollLeft = block.position.marginLeft - 4;
+  };
+
+  // update block position from viewport's left end on scroll
+  useEffect(() => {
+    const block = resizableRef.current;
+
+    if (!block) return;
+
+    setPosFromLeft(block.getBoundingClientRect().left);
+  }, [scrollLeft]);
+
+  // check if block is hidden on either side
+  const isBlockHiddenOnLeft =
+    block.position?.marginLeft &&
+    block.position?.width &&
+    scrollLeft > block.position.marginLeft + block.position.width;
+  const isBlockHiddenOnRight = posFromLeft && window && posFromLeft > window.innerWidth;
+
   return (
-    <div
-      id={`block-${block.id}`}
-      ref={parentDivRef}
-      className="relative group inline-flex cursor-pointer items-center font-medium transition-all"
-      style={{
-        marginLeft: `${block.position?.marginLeft}px`,
-      }}
-    >
-      {enableLeftDrag && (
-        <>
-          <div
-            onMouseDown={handleLeftDrag}
-            onMouseEnter={() => setIsLeftResizing(true)}
-            onMouseLeave={() => setIsLeftResizing(false)}
-            className="absolute top-1/2 -left-2.5 -translate-y-1/2 z-[1] w-6 h-10 bg-brand-backdrop rounded-md cursor-col-resize"
-          />
-          <div
-            className={`absolute top-1/2 -translate-y-1/2 w-1 h-4/5 rounded-sm bg-custom-background-80 transition-all duration-300 ${
-              isLeftResizing ? "-left-2.5" : "left-1"
-            }`}
-          />
-        </>
+    <>
+      {/* move to left side hidden block button */}
+      {isBlockHiddenOnLeft && (
+        <div
+          className="fixed ml-1 mt-1.5 z-[1] h-8 w-8 grid place-items-center border border-custom-border-300 rounded cursor-pointer bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
+          onClick={handleScrollToBlock}
+        >
+          <Icon iconName="arrow_back" />
+        </div>
       )}
-      {React.cloneElement(children, { ref: resizableRef, ...provided.dragHandleProps })}
-      {enableRightDrag && (
-        <>
-          <div
-            onMouseDown={handleRightDrag}
-            onMouseEnter={() => setIsRightResizing(true)}
-            onMouseLeave={() => setIsRightResizing(false)}
-            className="absolute top-1/2 -right-2.5 -translate-y-1/2 z-[1] w-6 h-6 bg-brand-backdrop rounded-md cursor-col-resize"
-          />
-          <div
-            className={`absolute top-1/2 -translate-y-1/2 w-1 h-4/5 rounded-sm bg-custom-background-80 transition-all duration-300 ${
-              isRightResizing ? "-right-2.5" : "right-1"
-            }`}
-          />
-        </>
+      {/* move to right side hidden block button */}
+      {isBlockHiddenOnRight && (
+        <div
+          className="fixed right-1 mt-1.5 z-[1] h-8 w-8 grid place-items-center border border-custom-border-300 rounded cursor-pointer bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
+          onClick={handleScrollToBlock}
+        >
+          <Icon iconName="arrow_forward" />
+        </div>
       )}
-    </div>
+      <div
+        id={`block-${block.id}`}
+        ref={resizableRef}
+        className="relative group cursor-pointer font-medium rounded shadow-sm h-full inline-flex items-center transition-all"
+        style={{
+          marginLeft: `${block.position?.marginLeft}px`,
+          width: `${block.position?.width}px`,
+        }}
+      >
+        {/* left resize drag handle */}
+        {enableBlockLeftResize && (
+          <>
+            <div
+              onMouseDown={handleBlockLeftResize}
+              onMouseEnter={() => setIsLeftResizing(true)}
+              onMouseLeave={() => setIsLeftResizing(false)}
+              className="absolute top-1/2 -left-2.5 -translate-y-1/2 z-[3] w-6 h-full rounded-md cursor-col-resize"
+            />
+            <div
+              className={`absolute top-1/2 -translate-y-1/2 w-1 h-7 rounded-sm bg-custom-background-100 transition-all duration-300 ${
+                isLeftResizing ? "-left-2.5" : "left-1"
+              }`}
+            />
+          </>
+        )}
+        <div
+          className="relative z-[2] rounded h-8 w-full flex items-center"
+          onMouseDown={handleBlockMove}
+        >
+          <BlockRender data={block.data} />
+        </div>
+        {/* right resize drag handle */}
+        {enableBlockRightResize && (
+          <>
+            <div
+              onMouseDown={handleBlockRightResize}
+              onMouseEnter={() => setIsRightResizing(true)}
+              onMouseLeave={() => setIsRightResizing(false)}
+              className="absolute top-1/2 -right-2.5 -translate-y-1/2 z-[2] w-6 h-full rounded-md cursor-col-resize"
+            />
+            <div
+              className={`absolute top-1/2 -translate-y-1/2 w-1 h-7 rounded-sm bg-custom-background-100 transition-all duration-300 ${
+                isRightResizing ? "-right-2.5" : "right-1"
+              }`}
+            />
+          </>
+        )}
+      </div>
+    </>
   );
 };
diff --git a/apps/app/components/gantt-chart/hooks/index.tsx b/apps/app/components/gantt-chart/hooks/index.tsx
index a26b56f84..5fb9bee3f 100644
--- a/apps/app/components/gantt-chart/hooks/index.tsx
+++ b/apps/app/components/gantt-chart/hooks/index.tsx
@@ -7,9 +7,7 @@ import { ChartContext } from "../contexts";
 export const useChart = (): ChartContextReducer => {
   const context = useContext(ChartContext);
 
-  if (!context) {
-    throw new Error("useChart must be used within a GanttChart");
-  }
+  if (!context) throw new Error("useChart must be used within a GanttChart");
 
   return context;
 };
diff --git a/apps/app/components/gantt-chart/root.tsx b/apps/app/components/gantt-chart/root.tsx
index 077e8a896..5acedd53e 100644
--- a/apps/app/components/gantt-chart/root.tsx
+++ b/apps/app/components/gantt-chart/root.tsx
@@ -8,28 +8,32 @@ import { IBlockUpdateData, IGanttBlock } from "./types";
 
 type GanttChartRootProps = {
   border?: boolean;
-  title: null | string;
+  title: string;
   loaderTitle: string;
   blocks: IGanttBlock[] | null;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  sidebarBlockRender: FC<any>;
-  blockRender: FC<any>;
-  enableLeftDrag?: boolean;
-  enableRightDrag?: boolean;
+  SidebarBlockRender: FC<any>;
+  BlockRender: FC<any>;
+  enableBlockLeftResize?: boolean;
+  enableBlockRightResize?: boolean;
+  enableBlockMove?: boolean;
   enableReorder?: boolean;
+  bottomSpacing?: boolean;
 };
 
 export const GanttChartRoot: FC<GanttChartRootProps> = ({
   border = true,
-  title = null,
+  title,
   blocks,
   loaderTitle = "blocks",
   blockUpdateHandler,
-  sidebarBlockRender,
-  blockRender,
-  enableLeftDrag = true,
-  enableRightDrag = true,
+  SidebarBlockRender,
+  BlockRender,
+  enableBlockLeftResize = true,
+  enableBlockRightResize = true,
+  enableBlockMove = true,
   enableReorder = true,
+  bottomSpacing = false,
 }) => (
   <ChartContextProvider>
     <ChartViewRoot
@@ -38,11 +42,13 @@ export const GanttChartRoot: FC<GanttChartRootProps> = ({
       blocks={blocks}
       loaderTitle={loaderTitle}
       blockUpdateHandler={blockUpdateHandler}
-      sidebarBlockRender={sidebarBlockRender}
-      blockRender={blockRender}
-      enableLeftDrag={enableLeftDrag}
-      enableRightDrag={enableRightDrag}
+      SidebarBlockRender={SidebarBlockRender}
+      BlockRender={BlockRender}
+      enableBlockLeftResize={enableBlockLeftResize}
+      enableBlockRightResize={enableBlockRightResize}
+      enableBlockMove={enableBlockMove}
       enableReorder={enableReorder}
+      bottomSpacing={bottomSpacing}
     />
   </ChartContextProvider>
 );
diff --git a/apps/app/components/gantt-chart/sidebar.tsx b/apps/app/components/gantt-chart/sidebar.tsx
new file mode 100644
index 000000000..92e7a603d
--- /dev/null
+++ b/apps/app/components/gantt-chart/sidebar.tsx
@@ -0,0 +1,156 @@
+// react-beautiful-dnd
+import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+// hooks
+import { useChart } from "./hooks";
+// ui
+import { Loader } from "components/ui";
+// icons
+import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+// types
+import { IBlockUpdateData, IGanttBlock } from "./types";
+
+type Props = {
+  title: string;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blocks: IGanttBlock[] | null;
+  SidebarBlockRender: React.FC<any>;
+  enableReorder: boolean;
+};
+
+export const GanttSidebar: React.FC<Props> = ({
+  title,
+  blockUpdateHandler,
+  blocks,
+  SidebarBlockRender,
+  enableReorder,
+}) => {
+  const { activeBlock, dispatch } = useChart();
+
+  // update the active block on hover
+  const updateActiveBlock = (block: IGanttBlock | null) => {
+    dispatch({
+      type: "PARTIAL_UPDATE",
+      payload: {
+        activeBlock: block,
+      },
+    });
+  };
+
+  const handleOrderChange = (result: DropResult) => {
+    if (!blocks) return;
+
+    const { source, destination } = result;
+
+    // return if dropped outside the list
+    if (!destination) return;
+
+    // return if dropped on the same index
+    if (source.index === destination.index) return;
+
+    let updatedSortOrder = blocks[source.index].sort_order;
+
+    // update the sort order to the lowest if dropped at the top
+    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
+    // update the sort order to the highest if dropped at the bottom
+    else if (destination.index === blocks.length - 1)
+      updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
+    // update the sort order to the average of the two adjacent blocks if dropped in between
+    else {
+      const destinationSortingOrder = blocks[destination.index].sort_order;
+      const relativeDestinationSortingOrder =
+        source.index < destination.index
+          ? blocks[destination.index + 1].sort_order
+          : blocks[destination.index - 1].sort_order;
+
+      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+    }
+
+    // extract the element from the source index and insert it at the destination index without updating the entire array
+    const removedElement = blocks.splice(source.index, 1)[0];
+    blocks.splice(destination.index, 0, removedElement);
+
+    // call the block update handler with the updated sort order, new and old index
+    blockUpdateHandler(removedElement.data, {
+      sort_order: {
+        destinationIndex: destination.index,
+        newSortOrder: updatedSortOrder,
+        sourceIndex: source.index,
+      },
+    });
+  };
+
+  return (
+    <DragDropContext onDragEnd={handleOrderChange}>
+      <StrictModeDroppable droppableId="gantt-sidebar">
+        {(droppableProvided) => (
+          <div
+            className="h-full overflow-y-auto pl-2.5"
+            ref={droppableProvided.innerRef}
+            {...droppableProvided.droppableProps}
+          >
+            <>
+              {blocks ? (
+                blocks.length > 0 ? (
+                  blocks.map((block, index) => (
+                    <Draggable
+                      key={`sidebar-block-${block.id}`}
+                      draggableId={`sidebar-block-${block.id}`}
+                      index={index}
+                      isDragDisabled={!enableReorder}
+                    >
+                      {(provided, snapshot) => (
+                        <div
+                          className={`h-11 ${
+                            snapshot.isDragging ? "bg-custom-background-80 rounded" : ""
+                          }`}
+                          onMouseEnter={() => updateActiveBlock(block)}
+                          onMouseLeave={() => updateActiveBlock(null)}
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                        >
+                          <div
+                            id={`sidebar-block-${block.id}`}
+                            className={`group h-full w-full flex items-center gap-2 rounded-l px-2 pr-4 ${
+                              activeBlock?.id === block.id ? "bg-custom-background-80" : ""
+                            }`}
+                          >
+                            {enableReorder && (
+                              <button
+                                type="button"
+                                className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
+                                {...provided.dragHandleProps}
+                              >
+                                <EllipsisVerticalIcon className="h-4" />
+                                <EllipsisVerticalIcon className="h-4 -ml-5" />
+                              </button>
+                            )}
+                            <div className="flex-grow truncate w-full h-full">
+                              <SidebarBlockRender data={block.data} />
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </Draggable>
+                  ))
+                ) : (
+                  <div className="text-custom-text-200 text-sm text-center mt-8">
+                    No <span className="lowercase">{title}</span> found
+                  </div>
+                )
+              ) : (
+                <Loader className="pr-2 space-y-3">
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                </Loader>
+              )}
+              {droppableProvided.placeholder}
+            </>
+          </div>
+        )}
+      </StrictModeDroppable>
+    </DragDropContext>
+  );
+};
diff --git a/apps/app/components/gantt-chart/types/index.ts b/apps/app/components/gantt-chart/types/index.ts
index 645fd9c87..9cab40f5c 100644
--- a/apps/app/components/gantt-chart/types/index.ts
+++ b/apps/app/components/gantt-chart/types/index.ts
@@ -27,19 +27,33 @@ export interface IBlockUpdateData {
   target_date?: string;
 }
 
+export type TGanttViews = "hours" | "day" | "week" | "bi_week" | "month" | "quarter" | "year";
+
 export interface ChartContextData {
   allViews: allViewsType[];
-  currentView: "hours" | "day" | "week" | "bi_week" | "month" | "quarter" | "year";
+  currentView: TGanttViews;
   currentViewData: ChartDataType | undefined;
   renderView: any;
+  activeBlock: IGanttBlock | null;
 }
 
-export type ChartContextActionPayload = {
-  type: "CURRENT_VIEW" | "CURRENT_VIEW_DATA" | "PARTIAL_UPDATE" | "RENDER_VIEW";
-  payload: any;
-};
+export type ChartContextActionPayload =
+  | {
+      type: "CURRENT_VIEW";
+      payload: TGanttViews;
+    }
+  | {
+      type: "CURRENT_VIEW_DATA" | "RENDER_VIEW";
+      payload: ChartDataType | undefined;
+    }
+  | {
+      type: "PARTIAL_UPDATE";
+      payload: Partial<ChartContextData>;
+    };
 
 export interface ChartContextReducer extends ChartContextData {
+  scrollLeft: number;
+  updateScrollLeft: (scrollLeft: number) => void;
   dispatch: (action: ChartContextActionPayload) => void;
 }
 
diff --git a/apps/app/components/icons/state-group-icon.tsx b/apps/app/components/icons/state-group-icon.tsx
index b7da7136f..522e0b9dc 100644
--- a/apps/app/components/icons/state-group-icon.tsx
+++ b/apps/app/components/icons/state-group-icon.tsx
@@ -21,6 +21,7 @@ export const getStateGroupIcon = (
           width={width}
           height={height}
           color={color ?? STATE_GROUP_COLORS["backlog"]}
+          className="flex-shrink-0"
         />
       );
     case "unstarted":
@@ -29,6 +30,7 @@ export const getStateGroupIcon = (
           width={width}
           height={height}
           color={color ?? STATE_GROUP_COLORS["unstarted"]}
+          className="flex-shrink-0"
         />
       );
     case "started":
@@ -37,6 +39,7 @@ export const getStateGroupIcon = (
           width={width}
           height={height}
           color={color ?? STATE_GROUP_COLORS["started"]}
+          className="flex-shrink-0"
         />
       );
     case "completed":
@@ -45,6 +48,7 @@ export const getStateGroupIcon = (
           width={width}
           height={height}
           color={color ?? STATE_GROUP_COLORS["completed"]}
+          className="flex-shrink-0"
         />
       );
     case "cancelled":
@@ -53,6 +57,7 @@ export const getStateGroupIcon = (
           width={width}
           height={height}
           color={color ?? STATE_GROUP_COLORS["cancelled"]}
+          className="flex-shrink-0"
         />
       );
     default:
diff --git a/apps/app/components/issues/gantt-chart/blocks.tsx b/apps/app/components/issues/gantt-chart/blocks.tsx
new file mode 100644
index 000000000..2ad21c499
--- /dev/null
+++ b/apps/app/components/issues/gantt-chart/blocks.tsx
@@ -0,0 +1,67 @@
+import { useRouter } from "next/router";
+
+// ui
+import { Tooltip } from "components/ui";
+// icons
+import { getStateGroupIcon } from "components/icons";
+// helpers
+import { findTotalDaysInRange, renderShortDate } from "helpers/date-time.helper";
+// types
+import { IIssue } from "types";
+
+export const IssueGanttBlock = ({ data }: { data: IIssue }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <div
+      className="flex items-center relative h-full w-full rounded"
+      style={{ backgroundColor: data?.state_detail?.color }}
+      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/issues/${data?.id}`)}
+    >
+      <div className="absolute top-0 left-0 h-full w-full bg-custom-background-100/50" />
+      <Tooltip
+        tooltipContent={
+          <div className="space-y-1">
+            <h5>{data?.name}</h5>
+            <div>
+              {renderShortDate(data?.start_date ?? "")} to{" "}
+              {renderShortDate(data?.target_date ?? "")}
+            </div>
+          </div>
+        }
+        position="top-left"
+      >
+        <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">
+          {data?.name}
+        </div>
+      </Tooltip>
+    </div>
+  );
+};
+
+// rendering issues on gantt sidebar
+export const IssueGanttSidebarBlock = ({ data }: { data: IIssue }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const duration = findTotalDaysInRange(data?.start_date ?? "", data?.target_date ?? "", true);
+
+  return (
+    <div
+      className="relative w-full flex items-center gap-2 h-full"
+      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/issues/${data?.id}`)}
+    >
+      {getStateGroupIcon(data?.state_detail?.group, "14", "14", data?.state_detail?.color)}
+      <div className="text-xs text-custom-text-300 flex-shrink-0">
+        {data?.project_detail?.identifier} {data?.sequence_id}
+      </div>
+      <div className="flex items-center justify-between gap-2 w-full flex-grow truncate">
+        <h6 className="text-sm font-medium flex-grow truncate">{data?.name}</h6>
+        <span className="flex-shrink-0 text-sm text-custom-text-200">
+          {duration} day{duration > 1 ? "s" : ""}
+        </span>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/issues/gantt-chart/index.ts b/apps/app/components/issues/gantt-chart/index.ts
new file mode 100644
index 000000000..7f0d16273
--- /dev/null
+++ b/apps/app/components/issues/gantt-chart/index.ts
@@ -0,0 +1,2 @@
+export * from "./blocks";
+export * from "./layout";
diff --git a/apps/app/components/issues/gantt-chart.tsx b/apps/app/components/issues/gantt-chart/layout.tsx
similarity index 59%
rename from apps/app/components/issues/gantt-chart.tsx
rename to apps/app/components/issues/gantt-chart/layout.tsx
index 4912183a8..a42d764d8 100644
--- a/apps/app/components/issues/gantt-chart.tsx
+++ b/apps/app/components/issues/gantt-chart/layout.tsx
@@ -6,11 +6,8 @@ import useUser from "hooks/use-user";
 import useGanttChartIssues from "hooks/gantt-chart/issue-view";
 import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
 // components
-import {
-  GanttChartRoot,
-  IssueGanttBlock,
-  renderIssueBlocksStructure,
-} from "components/gantt-chart";
+import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
+import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
 // types
 import { IIssue } from "types";
 
@@ -27,17 +24,6 @@ export const IssueGanttChartView = () => {
     projectId as string
   );
 
-  // rendering issues on gantt sidebar
-  const GanttSidebarBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
-      <div
-        className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
-        style={{ backgroundColor: data?.state_detail?.color || "#rgb(var(--color-primary-100))" }}
-      />
-      <div className="text-custom-text-100 text-sm">{data?.name}</div>
-    </div>
-  );
-
   return (
     <div className="w-full h-full">
       <GanttChartRoot
@@ -48,9 +34,10 @@ export const IssueGanttChartView = () => {
         blockUpdateHandler={(block, payload) =>
           updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
         }
-        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
-        blockRender={(data: any) => <IssueGanttBlock issue={data as IIssue} />}
+        BlockRender={IssueGanttBlock}
+        SidebarBlockRender={IssueGanttSidebarBlock}
         enableReorder={orderBy === "sort_order"}
+        bottomSpacing
       />
     </div>
   );
diff --git a/apps/app/components/modules/gantt-chart/blocks.tsx b/apps/app/components/modules/gantt-chart/blocks.tsx
new file mode 100644
index 000000000..bcf307098
--- /dev/null
+++ b/apps/app/components/modules/gantt-chart/blocks.tsx
@@ -0,0 +1,55 @@
+import { useRouter } from "next/router";
+
+// ui
+import { Tooltip } from "components/ui";
+// helpers
+import { renderShortDate } from "helpers/date-time.helper";
+// types
+import { IModule } from "types";
+// constants
+import { MODULE_STATUS } from "constants/module";
+
+export const ModuleGanttBlock = ({ data }: { data: IModule }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <div
+      className="relative flex items-center w-full h-full rounded"
+      style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data?.status)?.color }}
+      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data?.id}`)}
+    >
+      <div className="absolute top-0 left-0 h-full w-full bg-custom-background-100/50" />
+      <Tooltip
+        tooltipContent={
+          <div className="space-y-1">
+            <h5>{data?.name}</h5>
+            <div>
+              {renderShortDate(data?.start_date ?? "")} to{" "}
+              {renderShortDate(data?.target_date ?? "")}
+            </div>
+          </div>
+        }
+        position="top-left"
+      >
+        <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">
+          {data?.name}
+        </div>
+      </Tooltip>
+    </div>
+  );
+};
+
+export const ModuleGanttSidebarBlock = ({ data }: { data: IModule }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <div
+      className="relative w-full flex items-center gap-2 h-full"
+      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data.id}`)}
+    >
+      <h6 className="text-sm font-medium flex-grow truncate">{data.name}</h6>
+    </div>
+  );
+};
diff --git a/apps/app/components/modules/gantt-chart/index.ts b/apps/app/components/modules/gantt-chart/index.ts
new file mode 100644
index 000000000..301b9f840
--- /dev/null
+++ b/apps/app/components/modules/gantt-chart/index.ts
@@ -0,0 +1,3 @@
+export * from "./blocks";
+export * from "./module-issues-layout";
+export * from "./modules-list-layout";
diff --git a/apps/app/components/modules/gantt-chart.tsx b/apps/app/components/modules/gantt-chart/module-issues-layout.tsx
similarity index 57%
rename from apps/app/components/modules/gantt-chart.tsx
rename to apps/app/components/modules/gantt-chart/module-issues-layout.tsx
index 8ab8b6024..9c0b05078 100644
--- a/apps/app/components/modules/gantt-chart.tsx
+++ b/apps/app/components/modules/gantt-chart/module-issues-layout.tsx
@@ -8,11 +8,8 @@ import useUser from "hooks/use-user";
 import useGanttChartModuleIssues from "hooks/gantt-chart/module-issues-view";
 import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
 // components
-import {
-  GanttChartRoot,
-  IssueGanttBlock,
-  renderIssueBlocksStructure,
-} from "components/gantt-chart";
+import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
+import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
 // types
 import { IIssue } from "types";
 
@@ -32,29 +29,20 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
     moduleId as string
   );
 
-  // rendering issues on gantt sidebar
-  const GanttSidebarBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
-      <div
-        className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
-        style={{ backgroundColor: data?.state_detail?.color || "rgb(var(--color-primary-100))" }}
-      />
-      <div className="text-custom-text-100 text-sm">{data?.name}</div>
-    </div>
-  );
-
   return (
-    <div className="w-full h-full p-3">
+    <div className="w-full h-full">
       <GanttChartRoot
-        title="Modules"
-        loaderTitle="Modules"
+        border={false}
+        title="Issues"
+        loaderTitle="Issues"
         blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
         blockUpdateHandler={(block, payload) =>
           updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
         }
-        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
-        blockRender={(data: any) => <IssueGanttBlock issue={data as IIssue} />}
+        SidebarBlockRender={IssueGanttSidebarBlock}
+        BlockRender={IssueGanttBlock}
         enableReorder={orderBy === "sort_order"}
+        bottomSpacing
       />
     </div>
   );
diff --git a/apps/app/components/modules/modules-list-gantt-chart.tsx b/apps/app/components/modules/gantt-chart/modules-list-layout.tsx
similarity index 74%
rename from apps/app/components/modules/modules-list-gantt-chart.tsx
rename to apps/app/components/modules/gantt-chart/modules-list-layout.tsx
index 7dc281fb3..70f493dde 100644
--- a/apps/app/components/modules/modules-list-gantt-chart.tsx
+++ b/apps/app/components/modules/gantt-chart/modules-list-layout.tsx
@@ -1,6 +1,7 @@
 import { FC } from "react";
 
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 import { KeyedMutator } from "swr";
 
@@ -9,11 +10,10 @@ import modulesService from "services/modules.service";
 // hooks
 import useUser from "hooks/use-user";
 // components
-import { GanttChartRoot, IBlockUpdateData, ModuleGanttBlock } from "components/gantt-chart";
+import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
+import { ModuleGanttBlock, ModuleGanttSidebarBlock } from "components/modules";
 // types
 import { IModule } from "types";
-// constants
-import { MODULE_STATUS } from "constants/module";
 
 type Props = {
   modules: IModule[];
@@ -26,19 +26,6 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules })
 
   const { user } = useUser();
 
-  // rendering issues on gantt sidebar
-  const GanttSidebarBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
-      <div
-        className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
-        style={{
-          backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color,
-        }}
-      />
-      <div className="text-custom-text-100 text-sm">{data?.name}</div>
-    </div>
-  );
-
   const handleModuleUpdate = (module: IModule, payload: IBlockUpdateData) => {
     if (!workspaceSlug || !user) return;
 
@@ -98,8 +85,8 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules })
         loaderTitle="Modules"
         blocks={modules ? blockFormat(modules) : null}
         blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
-        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
-        blockRender={(data: any) => <ModuleGanttBlock module={data as IModule} />}
+        SidebarBlockRender={ModuleGanttSidebarBlock}
+        BlockRender={ModuleGanttBlock}
       />
     </div>
   );
diff --git a/apps/app/components/modules/index.ts b/apps/app/components/modules/index.ts
index 5a5e2a4f1..2a7f54fb3 100644
--- a/apps/app/components/modules/index.ts
+++ b/apps/app/components/modules/index.ts
@@ -4,6 +4,5 @@ export * from "./delete-module-modal";
 export * from "./form";
 export * from "./gantt-chart";
 export * from "./modal";
-export * from "./modules-list-gantt-chart";
 export * from "./sidebar";
 export * from "./single-module-card";
diff --git a/apps/app/components/views/gantt-chart.tsx b/apps/app/components/views/gantt-chart.tsx
index 630ffaca0..36022f6fa 100644
--- a/apps/app/components/views/gantt-chart.tsx
+++ b/apps/app/components/views/gantt-chart.tsx
@@ -7,11 +7,8 @@ import useGanttChartViewIssues from "hooks/gantt-chart/view-issues-view";
 import useUser from "hooks/use-user";
 import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
 // components
-import {
-  GanttChartRoot,
-  IssueGanttBlock,
-  renderIssueBlocksStructure,
-} from "components/gantt-chart";
+import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
+import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
 // types
 import { IIssue } from "types";
 
@@ -29,28 +26,18 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
     viewId as string
   );
 
-  // rendering issues on gantt sidebar
-  const GanttSidebarBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
-      <div
-        className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
-        style={{ backgroundColor: data?.state_detail?.color || "rgb(var(--color-primary-100))" }}
-      />
-      <div className="text-custom-text-100 text-sm">{data?.name}</div>
-    </div>
-  );
-
   return (
-    <div className="w-full h-full p-3">
+    <div className="w-full h-full">
       <GanttChartRoot
-        title="Issue Views"
-        loaderTitle="Issue Views"
+        border={false}
+        title="Issues"
+        loaderTitle="Issues"
         blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
         blockUpdateHandler={(block, payload) =>
           updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
         }
-        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
-        blockRender={(data: any) => <IssueGanttBlock issue={data as IIssue} />}
+        SidebarBlockRender={IssueGanttSidebarBlock}
+        BlockRender={IssueGanttBlock}
       />
     </div>
   );
diff --git a/apps/app/constants/issue.ts b/apps/app/constants/issue.ts
index 4e8bb0944..ff9317070 100644
--- a/apps/app/constants/issue.ts
+++ b/apps/app/constants/issue.ts
@@ -19,6 +19,7 @@ export const ORDER_BY_OPTIONS: Array<{
   { name: "Manual", key: "sort_order" },
   { name: "Last created", key: "-created_at" },
   { name: "Last updated", key: "-updated_at" },
+  { name: "Start date", key: "start_date" },
   { name: "Priority", key: "priority" },
 ];
 
diff --git a/apps/app/helpers/date-time.helper.ts b/apps/app/helpers/date-time.helper.ts
index a98f08cb7..39a68bf3b 100644
--- a/apps/app/helpers/date-time.helper.ts
+++ b/apps/app/helpers/date-time.helper.ts
@@ -374,3 +374,32 @@ export const getAllTimeIn30MinutesInterval = (): Array<{
   { label: "11:00", value: "11:00" },
   { label: "11:30", value: "11:30" },
 ];
+
+/**
+ * @returns {number} total number of days in range
+ * @description Returns total number of days in range
+ * @param {string} startDate
+ * @param {string} endDate
+ * @param {boolean} inclusive
+ * @example checkIfStringIsDate("2021-01-01", "2021-01-08") // 8
+ */
+
+export const findTotalDaysInRange = (
+  startDate: Date | string,
+  endDate: Date | string,
+  inclusive: boolean
+): number => {
+  if (!startDate || !endDate) return 0;
+
+  startDate = new Date(startDate);
+  endDate = new Date(endDate);
+
+  // find number of days between startDate and endDate
+  const diffInTime = endDate.getTime() - startDate.getTime();
+  const diffInDays = diffInTime / (1000 * 3600 * 24);
+
+  // if inclusive is true, add 1 to diffInDays
+  if (inclusive) return diffInDays + 1;
+
+  return diffInDays;
+};
diff --git a/apps/app/hooks/gantt-chart/cycle-issues-view.tsx b/apps/app/hooks/gantt-chart/cycle-issues-view.tsx
index 25baf0d3e..7ef534fb4 100644
--- a/apps/app/hooks/gantt-chart/cycle-issues-view.tsx
+++ b/apps/app/hooks/gantt-chart/cycle-issues-view.tsx
@@ -18,7 +18,13 @@ const useGanttChartCycleIssues = (
     order_by: orderBy,
     type: filters?.type ? filters?.type : undefined,
     sub_issue: showSubIssues,
-    start_target_date: true,
+    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
+    state: filters?.state ? filters?.state.join(",") : undefined,
+    priority: filters?.priority ? filters?.priority.join(",") : undefined,
+    labels: filters?.labels ? filters?.labels.join(",") : undefined,
+    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
+    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
+    start_target_date: true, // to fetch only issues with a start and target date
   };
 
   // all issues under the workspace and project
diff --git a/apps/app/hooks/gantt-chart/issue-view.tsx b/apps/app/hooks/gantt-chart/issue-view.tsx
index c7ffa0ffe..7e595a358 100644
--- a/apps/app/hooks/gantt-chart/issue-view.tsx
+++ b/apps/app/hooks/gantt-chart/issue-view.tsx
@@ -14,7 +14,13 @@ const useGanttChartIssues = (workspaceSlug: string | undefined, projectId: strin
     order_by: orderBy,
     type: filters?.type ? filters?.type : undefined,
     sub_issue: showSubIssues,
-    start_target_date: true,
+    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
+    state: filters?.state ? filters?.state.join(",") : undefined,
+    priority: filters?.priority ? filters?.priority.join(",") : undefined,
+    labels: filters?.labels ? filters?.labels.join(",") : undefined,
+    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
+    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
+    start_target_date: true, // to fetch only issues with a start and target date
   };
 
   // all issues under the workspace and project
diff --git a/apps/app/hooks/gantt-chart/module-issues-view.tsx b/apps/app/hooks/gantt-chart/module-issues-view.tsx
index ca686f4e0..54dea3e2e 100644
--- a/apps/app/hooks/gantt-chart/module-issues-view.tsx
+++ b/apps/app/hooks/gantt-chart/module-issues-view.tsx
@@ -18,7 +18,13 @@ const useGanttChartModuleIssues = (
     order_by: orderBy,
     type: filters?.type ? filters?.type : undefined,
     sub_issue: showSubIssues,
-    start_target_date: true,
+    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
+    state: filters?.state ? filters?.state.join(",") : undefined,
+    priority: filters?.priority ? filters?.priority.join(",") : undefined,
+    labels: filters?.labels ? filters?.labels.join(",") : undefined,
+    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
+    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
+    start_target_date: true, // to fetch only issues with a start and target date
   };
 
   // all issues under the workspace and project
diff --git a/apps/app/hooks/gantt-chart/view-issues-view.tsx b/apps/app/hooks/gantt-chart/view-issues-view.tsx
index b66b35128..8e0bc496b 100644
--- a/apps/app/hooks/gantt-chart/view-issues-view.tsx
+++ b/apps/app/hooks/gantt-chart/view-issues-view.tsx
@@ -18,7 +18,7 @@ const useGanttChartViewIssues = (
   // all issues under the view
   const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
     workspaceSlug && projectId && viewId
-      ? VIEW_ISSUES(viewId.toString(), { ...viewGanttParams, start_target_date: true })
+      ? VIEW_ISSUES(viewId.toString(), { ...viewGanttParams, order_by, start_target_date: true })
       : null,
     workspaceSlug && projectId && viewId
       ? () =>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index 98f678d5d..44ccf42ae 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -18,10 +18,10 @@ import {
   SingleModuleCard,
 } from "components/modules";
 // ui
-import { EmptyState, Loader, PrimaryButton } from "components/ui";
+import { EmptyState, Icon, Loader, PrimaryButton, Tooltip } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import { PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+import { PlusIcon } from "@heroicons/react/24/outline";
 // images
 import emptyModule from "public/empty-state/module.svg";
 // types
@@ -30,7 +30,18 @@ import type { NextPage } from "next";
 // fetch-keys
 import { MODULE_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
 // helper
-import { truncateText } from "helpers/string.helper";
+import { replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper";
+
+const moduleViewOptions: { type: "grid" | "gantt_chart"; icon: any }[] = [
+  {
+    type: "gantt_chart",
+    icon: "view_timeline",
+  },
+  {
+    type: "grid",
+    icon: "table_rows",
+  },
+];
 
 const ProjectModules: NextPage = () => {
   const [selectedModule, setSelectedModule] = useState<SelectModuleType>();
@@ -64,6 +75,7 @@ const ProjectModules: NextPage = () => {
 
   useEffect(() => {
     if (createUpdateModule) return;
+
     const timer = setTimeout(() => {
       setSelectedModule(undefined);
       clearTimeout(timer);
@@ -79,16 +91,42 @@ const ProjectModules: NextPage = () => {
         </Breadcrumbs>
       }
       right={
-        <PrimaryButton
-          className="flex items-center gap-2"
-          onClick={() => {
-            const e = new KeyboardEvent("keydown", { key: "m" });
-            document.dispatchEvent(e);
-          }}
-        >
-          <PlusIcon className="h-4 w-4" />
-          Add Module
-        </PrimaryButton>
+        <div className="flex items-center gap-2">
+          {moduleViewOptions.map((option) => (
+            <Tooltip
+              key={option.type}
+              tooltipContent={
+                <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>
+              }
+              position="bottom"
+            >
+              <button
+                type="button"
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
+                  modulesView === option.type
+                    ? "bg-custom-sidebar-background-80"
+                    : "text-custom-sidebar-text-200"
+                }`}
+                onClick={() => setModulesView(option.type)}
+              >
+                <Icon
+                  iconName={option.icon}
+                  className={`!text-base ${option.type === "grid" ? "rotate-90" : ""}`}
+                />
+              </button>
+            </Tooltip>
+          ))}
+          <PrimaryButton
+            className="flex items-center gap-2"
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", { key: "m" });
+              document.dispatchEvent(e);
+            }}
+          >
+            <PlusIcon className="h-4 w-4" />
+            Add Module
+          </PrimaryButton>
+        </div>
       }
     >
       <CreateUpdateModuleModal
@@ -99,34 +137,9 @@ const ProjectModules: NextPage = () => {
       />
       {modules ? (
         modules.length > 0 ? (
-          <div className="space-y-5 p-8 flex flex-col h-full overflow-hidden">
-            <div className="flex gap-4 justify-between">
-              <h3 className="text-2xl font-semibold text-custom-text-100">Modules</h3>
-              <div className="flex items-center gap-x-1">
-                <button
-                  type="button"
-                  className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
-                    modulesView === "grid" ? "bg-custom-background-80" : ""
-                  }`}
-                  onClick={() => setModulesView("grid")}
-                >
-                  <Squares2X2Icon className="h-4 w-4 text-custom-text-200" />
-                </button>
-                <button
-                  type="button"
-                  className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-custom-background-80 ${
-                    modulesView === "gantt_chart" ? "bg-custom-background-80" : ""
-                  }`}
-                  onClick={() => setModulesView("gantt_chart")}
-                >
-                  <span className="material-symbols-rounded text-custom-text-200 text-[18px] rotate-90">
-                    waterfall_chart
-                  </span>
-                </button>
-              </div>
-            </div>
+          <>
             {modulesView === "grid" && (
-              <div className="h-full overflow-y-auto">
+              <div className="h-full overflow-y-auto p-8">
                 <div className="grid grid-cols-1 gap-9 sm:grid-cols-2 lg:grid-cols-3">
                   {modules.map((module) => (
                     <SingleModuleCard
@@ -142,7 +155,7 @@ const ProjectModules: NextPage = () => {
             {modulesView === "gantt_chart" && (
               <ModulesListGanttChartView modules={modules} mutateModules={mutateModules} />
             )}
-          </div>
+          </>
         ) : (
           <EmptyState
             title="Manage your project with modules"
diff --git a/apps/app/types/issues.d.ts b/apps/app/types/issues.d.ts
index 79ebb04f4..98d72041a 100644
--- a/apps/app/types/issues.d.ts
+++ b/apps/app/types/issues.d.ts
@@ -251,7 +251,9 @@ export type TIssueOrderByOptions =
   | "target_date"
   | "-target_date"
   | "estimate__point"
-  | "-estimate__point";
+  | "-estimate__point"
+  | "start_date"
+  | "-start_date";
 
 export interface IIssueViewOptions {
   group_by: TIssueGroupByOptions;

From a1acd2772e76345bec6b41e10f0e21ce7e5cdf86 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 28 Aug 2023 13:26:38 +0530
Subject: [PATCH 21/70] feat: mark all as read (#1982)

---
 .../notifications/notification-header.tsx     | 48 +++++++++++++------
 .../notifications/notification-popover.tsx    |  4 +-
 apps/app/hooks/use-user-notifications.tsx     | 31 +++++++++++-
 apps/app/services/notifications.service.ts    | 14 ++++++
 apps/app/types/notifications.d.ts             |  6 +++
 5 files changed, 87 insertions(+), 16 deletions(-)

diff --git a/apps/app/components/notifications/notification-header.tsx b/apps/app/components/notifications/notification-header.tsx
index e1003f636..0d181da98 100644
--- a/apps/app/components/notifications/notification-header.tsx
+++ b/apps/app/components/notifications/notification-header.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { Icon, Tooltip } from "components/ui";
+import { CustomMenu, Icon, Tooltip } from "components/ui";
 // helpers
 import { getNumberCount } from "helpers/string.helper";
 
@@ -21,6 +21,7 @@ type NotificationHeaderProps = {
   setArchived: React.Dispatch<React.SetStateAction<boolean>>;
   setReadNotification: React.Dispatch<React.SetStateAction<boolean>>;
   setSelectedTab: React.Dispatch<React.SetStateAction<NotificationType>>;
+  markAllNotificationsAsRead: () => Promise<void>;
 };
 
 export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) => {
@@ -37,6 +38,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
     setArchived,
     setReadNotification,
     setSelectedTab,
+    markAllNotificationsAsRead,
   } = props;
 
   const notificationTabs: Array<{
@@ -88,33 +90,51 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
               <Icon iconName="filter_list" />
             </button>
           </Tooltip>
-          <Tooltip tooltipContent="Snoozed notifications">
-            <button
-              type="button"
+          <CustomMenu
+            customButton={
+              <div className="grid place-items-center ">
+                <Icon iconName="more_vert" />
+              </div>
+            }
+          >
+            <CustomMenu.MenuItem renderAs="button" onClick={markAllNotificationsAsRead}>
+              <div className="flex items-center gap-2">
+                <Icon iconName="done_all" />
+                Mark all as read
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              renderAs="button"
               onClick={() => {
                 setArchived(false);
                 setReadNotification(false);
                 setSnoozed((prev) => !prev);
               }}
             >
-              <Icon iconName="schedule" />
-            </button>
-          </Tooltip>
-          <Tooltip tooltipContent="Archived notifications">
-            <button
-              type="button"
+              <div className="flex items-center gap-2">
+                <Icon iconName="schedule" />
+                Show snoozed
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              renderAs="button"
               onClick={() => {
                 setSnoozed(false);
                 setReadNotification(false);
                 setArchived((prev) => !prev);
               }}
             >
-              <Icon iconName="archive" />
+              <div className="flex items-center gap-2">
+                <Icon iconName="archive" />
+                Show archived
+              </div>
+            </CustomMenu.MenuItem>
+          </CustomMenu>
+          <Tooltip tooltipContent="Close">
+            <button type="button" onClick={() => closePopover()}>
+              <Icon iconName="close" />
             </button>
           </Tooltip>
-          <button type="button" onClick={() => closePopover()}>
-            <Icon iconName="close" />
-          </button>
         </div>
       </div>
       <div className="border-b border-custom-border-300 w-full px-5 mt-5">
diff --git a/apps/app/components/notifications/notification-popover.tsx b/apps/app/components/notifications/notification-popover.tsx
index 39e4d8764..f01fdafd1 100644
--- a/apps/app/components/notifications/notification-popover.tsx
+++ b/apps/app/components/notifications/notification-popover.tsx
@@ -51,6 +51,7 @@ export const NotificationPopover = () => {
     hasMore,
     isRefreshing,
     setFetchNotifications,
+    markAllNotificationsAsRead,
   } = useUserNotification();
 
   // theme context
@@ -112,7 +113,7 @@ export const NotificationPopover = () => {
                 leaveFrom="opacity-100 translate-y-0"
                 leaveTo="opacity-0 translate-y-1"
               >
-                <Popover.Panel className="absolute bg-custom-background-100 flex flex-col left-0 md:left-full ml-8 z-10 -top-44 md:w-[36rem] w-[20rem] h-[75vh] border border-custom-border-300 shadow-lg rounded-xl">
+                <Popover.Panel className="absolute bg-custom-background-100 flex flex-col left-0 md:left-full ml-8 z-10 -top-36 md:w-[36rem] w-[20rem] h-[50vh] border border-custom-border-300 shadow-lg rounded-xl">
                   <NotificationHeader
                     notificationCount={notificationCount}
                     notificationMutate={notificationMutate}
@@ -126,6 +127,7 @@ export const NotificationPopover = () => {
                     setArchived={setArchived}
                     setReadNotification={setReadNotification}
                     setSelectedTab={setSelectedTab}
+                    markAllNotificationsAsRead={markAllNotificationsAsRead}
                   />
 
                   {notifications ? (
diff --git a/apps/app/hooks/use-user-notifications.tsx b/apps/app/hooks/use-user-notifications.tsx
index fe539d805..5e6ea5d0b 100644
--- a/apps/app/hooks/use-user-notifications.tsx
+++ b/apps/app/hooks/use-user-notifications.tsx
@@ -9,11 +9,14 @@ import useSWRInfinite from "swr/infinite";
 // services
 import userNotificationServices from "services/notifications.service";
 
+// hooks
+import useToast from "./use-toast";
+
 // fetch-keys
 import { UNREAD_NOTIFICATIONS_COUNT, getPaginatedNotificationKey } from "constants/fetch-keys";
 
 // type
-import type { NotificationType, NotificationCount } from "types";
+import type { NotificationType, NotificationCount, IMarkAllAsReadPayload } from "types";
 
 const PER_PAGE = 30;
 
@@ -21,6 +24,8 @@ const useUserNotification = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { setToastAlert } = useToast();
+
   const [snoozed, setSnoozed] = useState<boolean>(false);
   const [archived, setArchived] = useState<boolean>(false);
   const [readNotification, setReadNotification] = useState<boolean>(false);
@@ -274,6 +279,29 @@ const useUserNotification = () => {
     }
   };
 
+  const markAllNotificationsAsRead = async () => {
+    if (!workspaceSlug) return;
+
+    let markAsReadParams: IMarkAllAsReadPayload;
+
+    if (snoozed) markAsReadParams = { archived: false, snoozed: true };
+    else if (archived) markAsReadParams = { archived: true, snoozed: false };
+    else markAsReadParams = { archived: false, snoozed: false, type: selectedTab };
+
+    await userNotificationServices
+      .markAllNotificationsAsRead(workspaceSlug.toString(), markAsReadParams)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong. Please try again.",
+        });
+      })
+      .finally(() => {
+        notificationMutate();
+      });
+  };
+
   return {
     notifications,
     notificationMutate,
@@ -304,6 +332,7 @@ const useUserNotification = () => {
     isRefreshing,
     setFetchNotifications,
     markNotificationAsRead,
+    markAllNotificationsAsRead,
   };
 };
 
diff --git a/apps/app/services/notifications.service.ts b/apps/app/services/notifications.service.ts
index a8652b777..01c139b51 100644
--- a/apps/app/services/notifications.service.ts
+++ b/apps/app/services/notifications.service.ts
@@ -9,6 +9,7 @@ import type {
   INotificationParams,
   NotificationCount,
   PaginatedUserNotification,
+  IMarkAllAsReadPayload,
 } from "types";
 
 class UserNotificationsServices extends APIService {
@@ -172,6 +173,19 @@ class UserNotificationsServices extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async markAllNotificationsAsRead(
+    workspaceSlug: string,
+    payload: IMarkAllAsReadPayload
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/users/notifications/mark-all-read/`, {
+      ...payload,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 const userNotificationServices = new UserNotificationsServices();
diff --git a/apps/app/types/notifications.d.ts b/apps/app/types/notifications.d.ts
index adb4e469a..8033c19a9 100644
--- a/apps/app/types/notifications.d.ts
+++ b/apps/app/types/notifications.d.ts
@@ -71,3 +71,9 @@ export type NotificationCount = {
   my_issues: number;
   watching_issues: number;
 };
+
+export interface IMarkAllAsReadPayload {
+  archived?: boolean;
+  snoozed?: boolean;
+  type?: NotificationType;
+}

From 6e7701d85430257b7e904aa397756061fc08ab6c Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 28 Aug 2023 13:29:07 +0530
Subject: [PATCH 22/70] chore: don't show completion percentage if user has no
 assigned issues (#1984)

---
 apps/app/components/profile/sidebar.tsx | 28 +++++++++++++------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/apps/app/components/profile/sidebar.tsx b/apps/app/components/profile/sidebar.tsx
index d49058c67..ba574441a 100644
--- a/apps/app/components/profile/sidebar.tsx
+++ b/apps/app/components/profile/sidebar.tsx
@@ -162,19 +162,21 @@ export const ProfileSidebar = () => {
                             </div>
                           </div>
                           <div className="flex-shrink-0 flex items-center gap-2">
-                            <Tooltip tooltipContent="Completion percentage" position="left">
-                              <div
-                                className={`px-1 py-0.5 text-xs font-medium rounded ${
-                                  completedIssuePercentage <= 35
-                                    ? "bg-red-500/10 text-red-500"
-                                    : completedIssuePercentage <= 70
-                                    ? "bg-yellow-500/10 text-yellow-500"
-                                    : "bg-green-500/10 text-green-500"
-                                }`}
-                              >
-                                {completedIssuePercentage}%
-                              </div>
-                            </Tooltip>
+                            {project.assigned_issues > 0 && (
+                              <Tooltip tooltipContent="Completion percentage" position="left">
+                                <div
+                                  className={`px-1 py-0.5 text-xs font-medium rounded ${
+                                    completedIssuePercentage <= 35
+                                      ? "bg-red-500/10 text-red-500"
+                                      : completedIssuePercentage <= 70
+                                      ? "bg-yellow-500/10 text-yellow-500"
+                                      : "bg-green-500/10 text-green-500"
+                                  }`}
+                                >
+                                  {completedIssuePercentage}%
+                                </div>
+                              </Tooltip>
+                            )}
                             <Icon iconName="arrow_drop_down" className="!text-lg" />
                           </div>
                         </Disclosure.Button>

From 485e56bcdfc630d8bf8dce2bd28beea55d8cffbf Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 28 Aug 2023 13:29:48 +0530
Subject: [PATCH 23/70] fix: my profile activity endpoint (#1983)

* fix: my profile activity endpoint

* chore: update service name
---
 .../[workspaceSlug]/me/profile/activity.tsx   | 25 +++++++++----------
 apps/app/services/user.service.ts             |  4 +--
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx b/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
index 148d738c0..eba97e1ec 100644
--- a/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
@@ -25,18 +25,10 @@ const ProfileActivity = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { data: userActivity } = useSWR(USER_ACTIVITY, () => userService.getUserActivity());
-
-  if (!userActivity) {
-    return (
-      <Loader className="space-y-5">
-        <Loader.Item height="40px" />
-        <Loader.Item height="40px" />
-        <Loader.Item height="40px" />
-        <Loader.Item height="40px" />
-      </Loader>
-    );
-  }
+  const { data: userActivity } = useSWR(
+    workspaceSlug ? USER_ACTIVITY : null,
+    workspaceSlug ? () => userService.getUserActivity(workspaceSlug.toString()) : null
+  );
 
   return (
     <WorkspaceAuthorizationLayout
@@ -56,7 +48,7 @@ const ProfileActivity = () => {
           </div>
           <SettingsNavbar profilePage />
         </div>
-        {userActivity && userActivity.results.length > 0 && (
+        {userActivity ? (
           <div>
             <ul role="list" className="-mb-4">
               {userActivity.results.map((activityItem: any, activityIdx: number) => {
@@ -226,6 +218,13 @@ const ProfileActivity = () => {
               })}
             </ul>
           </div>
+        ) : (
+          <Loader className="space-y-5">
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+          </Loader>
         )}
       </div>
     </WorkspaceAuthorizationLayout>
diff --git a/apps/app/services/user.service.ts b/apps/app/services/user.service.ts
index 98eea5278..0e5def647 100644
--- a/apps/app/services/user.service.ts
+++ b/apps/app/services/user.service.ts
@@ -101,8 +101,8 @@ class UserService extends APIService {
       });
   }
 
-  async getUserActivity(): Promise<IUserActivityResponse> {
-    return this.get("/api/users/activities/")
+  async getUserWorkspaceActivity(workspaceSlug: string): Promise<IUserActivityResponse> {
+    return this.get(`/api/users/workspaces/${workspaceSlug}/activities/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;

From 293d90ddda7f4d662e7a76cc22a91a8a5bfd9523 Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Mon, 28 Aug 2023 13:34:05 +0530
Subject: [PATCH 24/70] fix: Cycles and Modules Cards view responsiveness
 (#1997)

* fix: modules cards fixes

* fix:cycles responsive cards
---
 apps/app/components/cycles/cycles-view.tsx                      | 2 +-
 .../[workspaceSlug]/projects/[projectId]/modules/index.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/app/components/cycles/cycles-view.tsx b/apps/app/components/cycles/cycles-view.tsx
index ede13b65e..6e07d896e 100644
--- a/apps/app/components/cycles/cycles-view.tsx
+++ b/apps/app/components/cycles/cycles-view.tsx
@@ -190,7 +190,7 @@ export const CyclesView: React.FC<Props> = ({ cycles, mutateCycles, viewType })
               ))}
             </div>
           ) : viewType === "board" ? (
-            <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+            <div className="grid grid-cols-1 gap-9 lg:grid-cols-2 xl:grid-cols-3">
               {cycles.map((cycle) => (
                 <SingleCycleCard
                   key={cycle.id}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index 44ccf42ae..6e7e1bca4 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -140,7 +140,7 @@ const ProjectModules: NextPage = () => {
           <>
             {modulesView === "grid" && (
               <div className="h-full overflow-y-auto p-8">
-                <div className="grid grid-cols-1 gap-9 sm:grid-cols-2 lg:grid-cols-3">
+                <div className="grid grid-cols-1 gap-9 lg:grid-cols-2 xl:grid-cols-3">
                   {modules.map((module) => (
                     <SingleModuleCard
                       key={module.id}

From 8a3b65a740b965532874c1f5c97291b574b6d829 Mon Sep 17 00:00:00 2001
From: Henit Chobisa <chobisa.henit@gmail.com>
Date: Mon, 28 Aug 2023 13:36:08 +0530
Subject: [PATCH 25/70] [chore] Update development workflows with every PR
 build and removed image update on every merge (#1985)

* chore: Combined Github Workflows for Release

* chore: Added Workflows for Building and Testing Changes
---
 .github/workflows/Build_Test_Pull_Request.yml |  55 +++++++++
 .github/workflows/Update_Docker_Images.yml    | 111 ++++++++++++++++++
 .github/workflows/push-image-backend.yml      |  57 ---------
 .github/workflows/push-image-deploy.yml       |  57 ---------
 .github/workflows/push-image-frontend.yml     |  60 ----------
 .github/workflows/push-image-proxy.yml        |  56 ---------
 6 files changed, 166 insertions(+), 230 deletions(-)
 create mode 100644 .github/workflows/Build_Test_Pull_Request.yml
 create mode 100644 .github/workflows/Update_Docker_Images.yml
 delete mode 100644 .github/workflows/push-image-backend.yml
 delete mode 100644 .github/workflows/push-image-deploy.yml
 delete mode 100644 .github/workflows/push-image-frontend.yml
 delete mode 100644 .github/workflows/push-image-proxy.yml

diff --git a/.github/workflows/Build_Test_Pull_Request.yml b/.github/workflows/Build_Test_Pull_Request.yml
new file mode 100644
index 000000000..0dbca646a
--- /dev/null
+++ b/.github/workflows/Build_Test_Pull_Request.yml
@@ -0,0 +1,55 @@
+name: Build Pull Request Contents
+
+on: 
+  pull_request:
+    types: ["opened", "synchronize"]
+
+jobs:
+  build-pull-request-contents:
+    name: Build Pull Request Contents
+    runs-on: ubuntu-20.04
+    permissions:
+      pull-requests: read
+
+    steps:
+      - name: Checkout Repository to Actions
+        uses: actions/checkout@v3.3.0
+
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.x
+          cache: 'yarn'
+      
+      - name: Get changed files
+        id: changed-files
+        uses: tj-actions/changed-files@v38
+        with:
+          files_yaml: |
+            apiserver:
+              - apiserver/**
+            web:
+              - apps/app/**
+            deploy:
+              - apps/space/**
+
+      - name: Setup .npmrc for repository
+        run: |
+            echo -e "@tiptap-pro:registry=https://registry.tiptap.dev/\n//registry.tiptap.dev/:_authToken=${{ secrets.TIPTAP_TOKEN }}" > .npmrc
+
+      - name: Build Plane's Main App
+        if: steps.changed-files.outputs.web_any_changed == 'true'
+        run: |
+          mv ./.npmrc ./apps/app
+          cd apps/app
+          yarn
+          yarn build
+
+      - name: Build Plane's Deploy App
+        if: steps.changed-files.outputs.deploy_any_changed == 'true'
+        run: |
+          cd apps/space
+          yarn 
+          yarn build
+
+
diff --git a/.github/workflows/Update_Docker_Images.yml b/.github/workflows/Update_Docker_Images.yml
new file mode 100644
index 000000000..8e27e098f
--- /dev/null
+++ b/.github/workflows/Update_Docker_Images.yml
@@ -0,0 +1,111 @@
+name: Update Docker Images for Plane on Release
+
+on:
+  release:
+    types: [released]
+
+jobs:
+  build_push_backend:
+    name: Build and Push Api Server Docker Image
+    runs-on: ubuntu-20.04
+
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3.3.0
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.1.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Setup .npmrc for repository
+        run: |
+            echo -e "@tiptap-pro:registry=https://registry.tiptap.dev/\n//registry.tiptap.dev/:_authToken=${{ secrets.TIPTAP_TOKEN }}" > .npmrc
+
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
+        id: metaFrontend
+        uses: docker/metadata-action@v4.3.0
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend
+          tags: |
+            type=ref,event=tag
+      
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
+        id: metaBackend
+        uses: docker/metadata-action@v4.3.0
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend
+          tags: |
+            type=ref,event=tag
+
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
+        id: metaDeploy
+        uses: docker/metadata-action@v4.3.0
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-deploy
+          tags: |
+            type=ref,event=tag
+
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
+        id: metaProxy
+        uses: docker/metadata-action@v4.3.0
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy
+          tags: |
+            type=ref,event=tag
+
+      - name: Build and Push Frontend to Docker Container Registry
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./apps/app/Dockerfile.web
+          platforms: linux/amd64
+          tags: ${{ steps.metaFrontend.outputs.tags }}
+          push: true
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and Push Backend to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: ./apiserver
+          file: ./apiserver/Dockerfile.api
+          platforms: linux/amd64
+          push: true
+          tags: ${{ steps.metaBackend.outputs.tags }}
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and Push Plane-Deploy to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./apps/space/Dockerfile.space
+          platforms: linux/amd64
+          push: true
+          tags: ${{ steps.metaDeploy.outputs.tags }}
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and Push Plane-Proxy to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: ./nginx
+          file: ./nginx/Dockerfile
+          platforms: linux/amd64
+          push: true
+          tags: ${{ steps.metaProxy.outputs.tags }}
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
diff --git a/.github/workflows/push-image-backend.yml b/.github/workflows/push-image-backend.yml
deleted file mode 100644
index 9ca34790b..000000000
--- a/.github/workflows/push-image-backend.yml
+++ /dev/null
@@ -1,57 +0,0 @@
-name: Build and Push Backend Docker Image
-
-on:
-  pull_request:
-    types: [closed]
-    branches: [develop]
-  release:
-    types: [released]
-
-jobs:
-  build_push_backend:
-    name: Build and Push Api Server Docker Image
-    runs-on: ubuntu-20.04
-
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3.3.0
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.5.0
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v2.1.0
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Pull Request
-        id: meta_pr
-        if: ${{ github.event_name == 'pull_request' }}
-        uses: docker/metadata-action@v4.3.0
-        with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend
-          tags: type=raw,value=develop
-
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
-        id: meta
-        uses: docker/metadata-action@v4.3.0
-        if: ${{ github.event_name == 'release' }}
-        with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend
-          tags: |
-            type=ref,event=tag
-
-      - name: Build and Push to Docker Hub
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: ./apiserver
-          file: ./apiserver/Dockerfile.api
-          platforms: linux/amd64
-          push: true
-          tags: ${{ github.event_name == 'release' && steps.meta.outputs.tags || steps.meta_pr.outputs.tags }}
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
-
diff --git a/.github/workflows/push-image-deploy.yml b/.github/workflows/push-image-deploy.yml
deleted file mode 100644
index 4a689bd29..000000000
--- a/.github/workflows/push-image-deploy.yml
+++ /dev/null
@@ -1,57 +0,0 @@
-name: Build and Push Plane Deploy Docker Image
-
-on:
-  pull_request:
-    types: [closed]
-    branches: [develop]
-  release:
-    types: [released]
-
-jobs:
-  build_push_plane_deploy:
-    name: Build and Push Plane Deploy Docker Image
-    runs-on: ubuntu-20.04
-
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3.3.0
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.5.0
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v2.1.0
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Pull Request
-        id: meta_pr
-        if: ${{ github.event_name == 'pull_request' }}
-        uses: docker/metadata-action@v4.3.0
-        with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-deploy
-          tags: type=raw,value=develop
-
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
-        id: meta
-        uses: docker/metadata-action@v4.3.0
-        if: ${{ github.event_name == 'release' }}
-        with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-deploy
-          tags: |
-            type=ref,event=tag
-
-      - name: Build and Push to Docker Hub
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: .
-          file: ./apps/space/Dockerfile.space
-          platforms: linux/amd64
-          push: true
-          tags: ${{ github.event_name == 'release' && steps.meta.outputs.tags || steps.meta_pr.outputs.tags }}
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
-
diff --git a/.github/workflows/push-image-frontend.yml b/.github/workflows/push-image-frontend.yml
deleted file mode 100644
index 69d24e128..000000000
--- a/.github/workflows/push-image-frontend.yml
+++ /dev/null
@@ -1,60 +0,0 @@
-name: Build and Push Frontend Docker Image
-
-on:
-  pull_request:
-    types: [closed]
-    branches: [develop]
-  release:
-    types: [released]
-
-jobs:
-  build_push_frontend:
-    name: Build Frontend Docker Image
-    runs-on: ubuntu-20.04
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3.3.0
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.5.0
-    
-      - name: Setup .npmrc for repository
-        run: |
-            echo -e "@tiptap-pro:registry=https://registry.tiptap.dev/\n//registry.tiptap.dev/:_authToken=${{ secrets.TIPTAP_TOKEN }}" > .npmrc
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v2.1.0
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
-        id: meta
-        if: ${{ github.event_name == 'release' }}
-        uses: docker/metadata-action@v4.3.0
-        with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend
-          tags: |
-            type=ref,event=tag
-
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Pull Request
-        id: meta_pr
-        if: ${{ github.event_name == 'pull_request' }}
-        uses: docker/metadata-action@v4.3.0
-        with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend
-          tags: type=raw,value=develop
-      
-      - name: Build and Push to Docker Container Registry
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: .
-          file: ./apps/app/Dockerfile.web
-          platforms: linux/amd64
-          tags: ${{ github.event_name == 'release' && steps.meta.outputs.tags || steps.meta_pr.outputs.tags }}
-          push: true
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
-
diff --git a/.github/workflows/push-image-proxy.yml b/.github/workflows/push-image-proxy.yml
deleted file mode 100644
index e053c8aa9..000000000
--- a/.github/workflows/push-image-proxy.yml
+++ /dev/null
@@ -1,56 +0,0 @@
-name: Build and Push Proxy Docker Image
-
-on:
-  pull_request:
-    types: [closed]
-    branches: [develop]
-  release:
-    types: [released]
-
-jobs:
-  build_push_proxy:
-    name: Build and Push Proxy Docker Image
-    runs-on: ubuntu-20.04
-
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3.3.0
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.5.0
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v2.1.0
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Pull Request
-        id: meta_pr
-        if: ${{ github.event_name == 'pull_request' }}
-        uses: docker/metadata-action@v4.3.0
-        with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy
-          tags: type=raw,value=develop
-
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
-        id: meta
-        uses: docker/metadata-action@v4.3.0
-        if: ${{ github.event_name == 'release' }}
-        with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy
-          tags: |
-            type=ref,event=tag
-
-      - name: Build and Push to Docker Hub
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: ./nginx
-          file: ./nginx/Dockerfile
-          platforms: linux/amd64
-          push: true
-          tags: ${{ github.event_name == 'release' && steps.meta.outputs.tags || steps.meta_pr.outputs.tags }}
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}

From b2e57603918aab0cb575458fede535c41e565abe Mon Sep 17 00:00:00 2001
From: srinivas pendem <65014795+srinivaspendem@users.noreply.github.com>
Date: Mon, 28 Aug 2023 15:54:20 +0530
Subject: [PATCH 26/70] bugfix: Export download next link changed to anchor
 (#2000)

* bugfix: Export download next link changd to anchot

* bugfix: user workspace service name update

---------

Co-authored-by: srinivaspendem <you@example.comsrinivaspendem2612@gmail.com>
---
 apps/app/components/exporter/single-export.tsx         | 6 ++----
 apps/app/pages/[workspaceSlug]/me/profile/activity.tsx | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/apps/app/components/exporter/single-export.tsx b/apps/app/components/exporter/single-export.tsx
index 34eb1510a..c8ef2dc1a 100644
--- a/apps/app/components/exporter/single-export.tsx
+++ b/apps/app/components/exporter/single-export.tsx
@@ -1,6 +1,4 @@
 import React from "react";
-// next imports
-import Link from "next/link";
 // ui
 import { PrimaryButton } from "components/ui"; // icons
 // helpers
@@ -65,11 +63,11 @@ export const SingleExport: React.FC<Props> = ({ service, refreshing }) => {
         <>
           {service.status == "completed" && (
             <div>
-              <Link href={service?.url}>
+              <a target="_blank" href={service?.url} rel="noopener noreferrer">
                 <PrimaryButton className="w-full text-center">
                   {isLoading ? "Downloading..." : "Download"}
                 </PrimaryButton>
-              </Link>
+              </a>
             </div>
           )}
         </>
diff --git a/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx b/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
index eba97e1ec..3a8e9f8da 100644
--- a/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
@@ -27,7 +27,7 @@ const ProfileActivity = () => {
 
   const { data: userActivity } = useSWR(
     workspaceSlug ? USER_ACTIVITY : null,
-    workspaceSlug ? () => userService.getUserActivity(workspaceSlug.toString()) : null
+    workspaceSlug ? () => userService.getUserWorkspaceActivity(workspaceSlug.toString()) : null
   );
 
   return (

From c65bbf865d19963eb6d25abdfb9cf7dc329da8a8 Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Mon, 28 Aug 2023 15:54:49 +0530
Subject: [PATCH 27/70] fix: tiptap editor export fixes (#2001)

---
 .../core/modals/gpt-assistant-modal.tsx       | 31 +++++-------
 .../components/issues/comment/add-comment.tsx | 15 ++----
 .../issues/comment/comment-card.tsx           | 19 ++++---
 .../components/issues/description-form.tsx    |  4 +-
 apps/app/components/issues/form.tsx           | 11 +----
 .../pages/create-update-block-inline.tsx      | 33 +++++--------
 .../components/pages/single-page-block.tsx    | 49 +++++++++----------
 apps/app/components/tiptap/index.tsx          | 18 ++++---
 .../[workspaceSlug]/me/profile/activity.tsx   |  4 +-
 9 files changed, 77 insertions(+), 107 deletions(-)

diff --git a/apps/app/components/core/modals/gpt-assistant-modal.tsx b/apps/app/components/core/modals/gpt-assistant-modal.tsx
index 35f282040..81c9b7d71 100644
--- a/apps/app/components/core/modals/gpt-assistant-modal.tsx
+++ b/apps/app/components/core/modals/gpt-assistant-modal.tsx
@@ -1,7 +1,5 @@
 import React, { useEffect, useState, forwardRef, useRef } from "react";
-
 import { useRouter } from "next/router";
-
 // react-hook-form
 import { useForm } from "react-hook-form";
 // services
@@ -12,9 +10,10 @@ import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // ui
 import { Input, PrimaryButton, SecondaryButton } from "components/ui";
-
+import { TipTapEditor } from "components/tiptap";
+// types
 import { IIssue, IPageBlock } from "types";
-import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
+
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
@@ -32,12 +31,6 @@ type FormData = {
   task: string;
 };
 
-const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
-  (props, ref) => <Tiptap {...props} forwardedRef={ref} />
-);
-
-TiptapEditor.displayName = "TiptapEditor";
-
 export const GptAssistantModal: React.FC<Props> = ({
   isOpen,
   handleClose,
@@ -140,13 +133,14 @@ export const GptAssistantModal: React.FC<Props> = ({
 
   return (
     <div
-      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${isOpen ? "block" : "hidden"
-        }`}
+      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${
+        isOpen ? "block" : "hidden"
+      }`}
     >
       {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
         <div className="text-sm">
           Content:
-          <TiptapEditor
+          <TipTapEditor
             workspaceSlug={workspaceSlug as string}
             value={htmlContent ?? `<p>${content}</p>`}
             customClassName="-m-3"
@@ -160,7 +154,7 @@ export const GptAssistantModal: React.FC<Props> = ({
       {response !== "" && (
         <div className="page-block-section text-sm">
           Response:
-          <Tiptap
+          <TipTapEditor
             workspaceSlug={workspaceSlug as string}
             value={`<p>${response}</p>`}
             customClassName="-mx-3 -my-3"
@@ -180,10 +174,11 @@ export const GptAssistantModal: React.FC<Props> = ({
         type="text"
         name="task"
         register={register}
-        placeholder={`${content && content !== ""
+        placeholder={`${
+          content && content !== ""
             ? "Tell AI what action to perform on this content..."
             : "Ask AI anything..."
-          }`}
+        }`}
         autoComplete="off"
       />
       <div className={`flex gap-2 ${response === "" ? "justify-end" : "justify-between"}`}>
@@ -219,8 +214,8 @@ export const GptAssistantModal: React.FC<Props> = ({
             {isSubmitting
               ? "Generating response..."
               : response === ""
-                ? "Generate response"
-                : "Generate again"}
+              ? "Generate response"
+              : "Generate again"}
           </PrimaryButton>
         </div>
       </div>
diff --git a/apps/app/components/issues/comment/add-comment.tsx b/apps/app/components/issues/comment/add-comment.tsx
index 540577447..4d64a90ba 100644
--- a/apps/app/components/issues/comment/add-comment.tsx
+++ b/apps/app/components/issues/comment/add-comment.tsx
@@ -1,21 +1,12 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 // react-hook-form
 import { useForm, Controller } from "react-hook-form";
-// ui
+// components
 import { SecondaryButton } from "components/ui";
+import { TipTapEditor } from "components/tiptap";
 // types
 import type { IIssueComment } from "types";
-// fetch-keys
-import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
-
-const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
-  (props, ref) => <Tiptap {...props} forwardedRef={ref} />
-);
-
-TiptapEditor.displayName = "TiptapEditor";
 
 const defaultValues: Partial<IIssueComment> = {
   comment_json: "",
@@ -59,7 +50,7 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
             name="comment_html"
             control={control}
             render={({ field: { value, onChange } }) => (
-              <TiptapEditor
+              <TipTapEditor
                 workspaceSlug={workspaceSlug as string}
                 ref={editorRef}
                 value={
diff --git a/apps/app/components/issues/comment/comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx
index 06ef891a9..089aa9db9 100644
--- a/apps/app/components/issues/comment/comment-card.tsx
+++ b/apps/app/components/issues/comment/comment-card.tsx
@@ -9,17 +9,11 @@ import useUser from "hooks/use-user";
 // ui
 import { CustomMenu } from "components/ui";
 import { CommentReaction } from "components/issues";
+import { TipTapEditor } from "components/tiptap";
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 // types
 import type { IIssueComment } from "types";
-import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
-
-const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
-  (props, ref) => <Tiptap {...props} forwardedRef={ref} />
-);
-
-TiptapEditor.displayName = "TiptapEditor";
 
 type Props = {
   workspaceSlug: string;
@@ -28,7 +22,12 @@ type Props = {
   handleCommentDeletion: (comment: string) => void;
 };
 
-export const CommentCard: React.FC<Props> = ({ comment, workspaceSlug, onSubmit, handleCommentDeletion }) => {
+export const CommentCard: React.FC<Props> = ({
+  comment,
+  workspaceSlug,
+  onSubmit,
+  handleCommentDeletion,
+}) => {
   const { user } = useUser();
 
   const editorRef = React.useRef<any>(null);
@@ -109,7 +108,7 @@ export const CommentCard: React.FC<Props> = ({ comment, workspaceSlug, onSubmit,
             onSubmit={handleSubmit(onEnter)}
           >
             <div>
-              <TiptapEditor
+              <TipTapEditor
                 workspaceSlug={workspaceSlug as string}
                 ref={editorRef}
                 value={watch("comment_html")}
@@ -139,7 +138,7 @@ export const CommentCard: React.FC<Props> = ({ comment, workspaceSlug, onSubmit,
             </div>
           </form>
           <div className={`${isEditing ? "hidden" : ""}`}>
-            <TiptapEditor
+            <TipTapEditor
               workspaceSlug={workspaceSlug as string}
               ref={showEditorRef}
               value={comment.comment_html}
diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx
index 48c42c47f..54ea0a976 100644
--- a/apps/app/components/issues/description-form.tsx
+++ b/apps/app/components/issues/description-form.tsx
@@ -7,7 +7,7 @@ import useReloadConfirmations from "hooks/use-reload-confirmation";
 import { useDebouncedCallback } from "use-debounce";
 // components
 import { TextArea } from "components/ui";
-import Tiptap from "components/tiptap";
+import { TipTapEditor } from "components/tiptap";
 // types
 import { IIssue } from "types";
 
@@ -134,7 +134,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
             if (!value) return <></>;
 
             return (
-              <Tiptap
+              <TipTapEditor
                 value={
                   !value ||
                   value === "" ||
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index c15c61d57..0bca224df 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -31,18 +31,11 @@ import {
   SecondaryButton,
   ToggleSwitch,
 } from "components/ui";
+import { TipTapEditor } from "components/tiptap";
 // icons
 import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
 import type { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
-import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
-// rich-text-editor
-
-const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
-  (props, ref) => <Tiptap {...props} forwardedRef={ref} />
-);
-
-TiptapEditor.displayName = "TiptapEditor";
 
 const defaultValues: Partial<IIssue> = {
   project: "",
@@ -369,7 +362,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                       if (!value && !watch("description_html")) return <></>;
 
                       return (
-                        <TiptapEditor
+                        <TipTapEditor
                           workspaceSlug={workspaceSlug as string}
                           ref={editorRef}
                           debouncedUpdatesEnabled={false}
diff --git a/apps/app/components/pages/create-update-block-inline.tsx b/apps/app/components/pages/create-update-block-inline.tsx
index 3e0f604a3..cee9fe8e3 100644
--- a/apps/app/components/pages/create-update-block-inline.tsx
+++ b/apps/app/components/pages/create-update-block-inline.tsx
@@ -1,12 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
 import { SparklesIcon } from "@heroicons/react/24/outline";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // services
 import pagesService from "services/pages.service";
@@ -16,13 +11,12 @@ import aiService from "services/ai.service";
 import useToast from "hooks/use-toast";
 // components
 import { GptAssistantModal } from "components/core";
-// ui
+import { TipTapEditor } from "components/tiptap";
 import { PrimaryButton, SecondaryButton, TextArea } from "components/ui";
 // types
 import { ICurrentUserResponse, IPageBlock } from "types";
 // fetch-keys
 import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
-import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
 
 type Props = {
   handleClose: () => void;
@@ -39,12 +33,6 @@ const defaultValues = {
   description_html: null,
 };
 
-const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
-  (props, ref) => <Tiptap {...props} forwardedRef={ref} />
-);
-
-TiptapEditor.displayName = "TiptapEditor";
-
 export const CreateUpdateBlockInline: React.FC<Props> = ({
   handleClose,
   data,
@@ -231,9 +219,9 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
       description:
         !data.description || data.description === ""
           ? {
-            type: "doc",
-            content: [{ type: "paragraph" }],
-          }
+              type: "doc",
+              content: [{ type: "paragraph" }],
+            }
           : data.description,
       description_html: data.description_html ?? "<p></p>",
     });
@@ -291,7 +279,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
               render={({ field: { value, onChange } }) => {
                 if (!data)
                   return (
-                    <TiptapEditor
+                    <TipTapEditor
                       workspaceSlug={workspaceSlug as string}
                       ref={editorRef}
                       value={"<p></p>"}
@@ -311,7 +299,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                   );
 
                 return (
-                  <TiptapEditor
+                  <TipTapEditor
                     workspaceSlug={workspaceSlug as string}
                     ref={editorRef}
                     value={
@@ -334,8 +322,9 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
             <div className="m-2 mt-6 flex">
               <button
                 type="button"
-                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-80 ${iAmFeelingLucky ? "cursor-wait bg-custom-background-90" : ""
-                  }`}
+                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-80 ${
+                  iAmFeelingLucky ? "cursor-wait bg-custom-background-90" : ""
+                }`}
                 onClick={handleAutoGenerateDescription}
                 disabled={iAmFeelingLucky}
               >
@@ -367,8 +356,8 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                 ? "Updating..."
                 : "Update block"
               : isSubmitting
-                ? "Adding..."
-                : "Add block"}
+              ? "Adding..."
+              : "Add block"}
           </PrimaryButton>
         </div>
       </form>
diff --git a/apps/app/components/pages/single-page-block.tsx b/apps/app/components/pages/single-page-block.tsx
index 0c192990a..e4c1d94ac 100644
--- a/apps/app/components/pages/single-page-block.tsx
+++ b/apps/app/components/pages/single-page-block.tsx
@@ -19,6 +19,7 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import { GptAssistantModal } from "components/core";
 import { CreateUpdateBlockInline } from "components/pages";
+import { TipTapEditor } from "components/tiptap";
 // ui
 import { CustomMenu, TextArea } from "components/ui";
 // icons
@@ -38,7 +39,6 @@ import { copyTextToClipboard } from "helpers/string.helper";
 import { ICurrentUserResponse, IIssue, IPageBlock, IProject } from "types";
 // fetch-keys
 import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
-import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
 
 type Props = {
   block: IPageBlock;
@@ -48,13 +48,6 @@ type Props = {
   user: ICurrentUserResponse | undefined;
 };
 
-const TiptapEditor = React.forwardRef<
-  ITiptapRichTextEditor,
-  ITiptapRichTextEditor
->((props, ref) => <Tiptap {...props} forwardedRef={ref} />);
-
-TiptapEditor.displayName = "TiptapEditor";
-
 export const SinglePageBlock: React.FC<Props> = ({
   block,
   projectDetails,
@@ -328,8 +321,9 @@ export const SinglePageBlock: React.FC<Props> = ({
             </div>
           ) : (
             <div
-              className={`group relative w-full rounded bg-custom-background-80 text-custom-text-200 ${snapshot.isDragging ? "bg-custom-background-100 p-4 shadow" : ""
-                }`}
+              className={`group relative w-full rounded bg-custom-background-80 text-custom-text-200 ${
+                snapshot.isDragging ? "bg-custom-background-100 p-4 shadow" : ""
+              }`}
               ref={provided.innerRef}
               {...provided.draggableProps}
             >
@@ -343,8 +337,9 @@ export const SinglePageBlock: React.FC<Props> = ({
               </button>
               <div
                 ref={actionSectionRef}
-                className={`absolute top-4 right-2 hidden items-center gap-2 bg-custom-background-80 pl-4 group-hover:!flex ${isMenuActive ? "!flex" : ""
-                  }`}
+                className={`absolute top-4 right-2 hidden items-center gap-2 bg-custom-background-80 pl-4 group-hover:!flex ${
+                  isMenuActive ? "!flex" : ""
+                }`}
               >
                 {block.issue && block.sync && (
                   <div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded py-1 px-1.5 text-xs">
@@ -358,8 +353,9 @@ export const SinglePageBlock: React.FC<Props> = ({
                 )}
                 <button
                   type="button"
-                  className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${iAmFeelingLucky ? "cursor-wait" : ""
-                    }`}
+                  className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${
+                    iAmFeelingLucky ? "cursor-wait" : ""
+                  }`}
                   onClick={handleAutoGenerateDescription}
                   disabled={iAmFeelingLucky}
                 >
@@ -455,18 +451,19 @@ export const SinglePageBlock: React.FC<Props> = ({
 
                   {showBlockDetails
                     ? block.description_html.length > 7 && (
-                      <TiptapEditor
-                        workspaceSlug={workspaceSlug as string}
-                        value={block.description_html}
-                        customClassName="text-sm min-h-[150px]"
-                        noBorder
-                        borderOnFocus={false}
-                      />
-                    ) : block.description_stripped.length > 0 && (
-                      <p className="mt-3 text-sm font-normal text-custom-text-200 h-5 truncate">
-                        {block.description_stripped}
-                      </p>
-                    )}
+                        <TipTapEditor
+                          workspaceSlug={workspaceSlug as string}
+                          value={block.description_html}
+                          customClassName="text-sm min-h-[150px]"
+                          noBorder
+                          borderOnFocus={false}
+                        />
+                      )
+                    : block.description_stripped.length > 0 && (
+                        <p className="mt-3 text-sm font-normal text-custom-text-200 h-5 truncate">
+                          {block.description_stripped}
+                        </p>
+                      )}
                 </div>
               </div>
               <GptAssistantModal
diff --git a/apps/app/components/tiptap/index.tsx b/apps/app/components/tiptap/index.tsx
index df286c86f..f0315cad4 100644
--- a/apps/app/components/tiptap/index.tsx
+++ b/apps/app/components/tiptap/index.tsx
@@ -3,10 +3,10 @@ import { useDebouncedCallback } from "use-debounce";
 import { EditorBubbleMenu } from "./bubble-menu";
 import { TiptapExtensions } from "./extensions";
 import { TiptapEditorProps } from "./props";
-import { useImperativeHandle, useRef } from "react";
+import { useImperativeHandle, useRef, forwardRef } from "react";
 import { ImageResizer } from "./extensions/image-resize";
 
-export interface ITiptapRichTextEditor {
+export interface ITipTapRichTextEditor {
   value: string;
   noBorder?: boolean;
   borderOnFocus?: boolean;
@@ -21,7 +21,7 @@ export interface ITiptapRichTextEditor {
   debouncedUpdatesEnabled?: boolean;
 }
 
-const Tiptap = (props: ITiptapRichTextEditor) => {
+const Tiptap = (props: ITipTapRichTextEditor) => {
   const {
     onChange,
     debouncedUpdatesEnabled,
@@ -75,8 +75,8 @@ const Tiptap = (props: ITiptapRichTextEditor) => {
 
   const editorClassNames = `relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md
       ${noBorder ? "" : "border border-custom-border-200"} ${
-    borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
-  } ${customClassName}`;
+        borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
+      } ${customClassName}`;
 
   if (!editor) return null;
   editorRef.current = editor;
@@ -98,4 +98,10 @@ const Tiptap = (props: ITiptapRichTextEditor) => {
   );
 };
 
-export default Tiptap;
+const TipTapEditor = forwardRef<ITipTapRichTextEditor, ITipTapRichTextEditor>((props, ref) => (
+  <Tiptap {...props} forwardedRef={ref} />
+));
+
+TipTapEditor.displayName = "TipTapEditor";
+
+export { TipTapEditor };
diff --git a/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx b/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
index 3a8e9f8da..20f278427 100644
--- a/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
@@ -10,7 +10,7 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 import SettingsNavbar from "layouts/settings-navbar";
 // components
 import { ActivityIcon, ActivityMessage } from "components/core";
-import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
+import { TipTapEditor } from "components/tiptap";
 // icons
 import { ArrowTopRightOnSquareIcon, ChatBubbleLeftEllipsisIcon } from "@heroicons/react/24/outline";
 // ui
@@ -97,7 +97,7 @@ const ProfileActivity = () => {
                             </p>
                           </div>
                           <div className="issue-comments-section p-0">
-                            <Tiptap
+                            <TipTapEditor
                               workspaceSlug={workspaceSlug as string}
                               value={
                                 activityItem?.new_value !== ""

From 8581226e60bc66ff011d544aeabab36890bc6ecc Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Tue, 29 Aug 2023 13:34:38 +0530
Subject: [PATCH 28/70] chore: improve access field for comments for public
 boards (#1956)

Co-authored-by: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
---
 apiserver/plane/api/serializers/issue.py |  2 +-
 apiserver/plane/api/views/issue.py       | 37 ++++++++++++++++--------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/apiserver/plane/api/serializers/issue.py b/apiserver/plane/api/serializers/issue.py
index 64ee2b8f7..647b299fd 100644
--- a/apiserver/plane/api/serializers/issue.py
+++ b/apiserver/plane/api/serializers/issue.py
@@ -569,7 +569,7 @@ class IssueCommentSerializer(BaseSerializer):
     project_detail = ProjectLiteSerializer(read_only=True, source="project")
     workspace_detail = WorkspaceLiteSerializer(read_only=True, source="workspace")
     comment_reactions = CommentReactionLiteSerializer(read_only=True, many=True)
-
+    is_member = serializers.BooleanField(read_only=True)
 
     class Meta:
         model = IssueComment
diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index 0b08bb14f..ff8dab801 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -77,6 +77,7 @@ from plane.db.models import (
 from plane.bgtasks.issue_activites_task import issue_activity
 from plane.utils.grouper import group_results
 from plane.utils.issue_filters import issue_filters
+from plane.bgtasks.export_task import issue_export_task
 
 
 class IssueViewSet(BaseViewSet):
@@ -588,6 +589,15 @@ class IssueCommentViewSet(BaseViewSet):
             .select_related("project")
             .select_related("workspace")
             .select_related("issue")
+            .annotate(
+                is_member=Exists(
+                    ProjectMember.objects.filter(
+                        workspace__slug=self.kwargs.get("slug"),
+                        project_id=self.kwargs.get("project_id"),
+                        member_id=self.request.user.id,
+                    )
+                )
+            )
             .distinct()
         )
 
@@ -769,7 +779,9 @@ class SubIssuesEndpoint(BaseAPIView):
                 .order_by("state_group")
             )
 
-            result = {item["state_group"]: item["state_count"] for item in state_distribution}
+            result = {
+                item["state_group"]: item["state_count"] for item in state_distribution
+            }
 
             serializer = IssueLiteSerializer(
                 sub_issues,
@@ -1482,6 +1494,15 @@ class IssueCommentPublicViewSet(BaseViewSet):
                 .select_related("project")
                 .select_related("workspace")
                 .select_related("issue")
+                .annotate(
+                    is_member=Exists(
+                        ProjectMember.objects.filter(
+                            workspace__slug=self.kwargs.get("slug"),
+                            project_id=self.kwargs.get("project_id"),
+                            member_id=self.request.user.id,
+                        )
+                    )
+                )
                 .distinct()
             )
         else:
@@ -1499,21 +1520,13 @@ class IssueCommentPublicViewSet(BaseViewSet):
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-            access = (
-                "INTERNAL"
-                if ProjectMember.objects.filter(
-                    project_id=project_id, member=request.user
-                ).exists()
-                else "EXTERNAL"
-            )
-
             serializer = IssueCommentSerializer(data=request.data)
             if serializer.is_valid():
                 serializer.save(
                     project_id=project_id,
                     issue_id=issue_id,
                     actor=request.user,
-                    access=access,
+                    access="EXTERNAL",
                 )
                 issue_activity.delay(
                     type="comment.activity.created",
@@ -1567,7 +1580,8 @@ class IssueCommentPublicViewSet(BaseViewSet):
         except (IssueComment.DoesNotExist, ProjectDeployBoard.DoesNotExist):
             return Response(
                 {"error": "IssueComent Does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,)
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
     def destroy(self, request, slug, project_id, issue_id, pk):
         try:
@@ -1826,4 +1840,3 @@ class IssueVotePublicViewSet(BaseViewSet):
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-

From 3a41ec74427bb9bcdad0ebe2eac7f4ec4c880180 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Tue, 29 Aug 2023 13:35:13 +0530
Subject: [PATCH 29/70] chore: update user activity endpoint to return only
 workspace activities (#1980)

---
 apiserver/plane/api/urls.py       | 2 +-
 apiserver/plane/api/views/user.py | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apiserver/plane/api/urls.py b/apiserver/plane/api/urls.py
index a6beac693..64fb4b025 100644
--- a/apiserver/plane/api/urls.py
+++ b/apiserver/plane/api/urls.py
@@ -235,7 +235,7 @@ urlpatterns = [
         UpdateUserTourCompletedEndpoint.as_view(),
         name="user-tour",
     ),
-    path("users/activities/", UserActivityEndpoint.as_view(), name="user-activities"),
+    path("users/workspaces/<str:slug>/activities/", UserActivityEndpoint.as_view(), name="user-activities"),
     # user workspaces
     path(
         "users/me/workspaces/",
diff --git a/apiserver/plane/api/views/user.py b/apiserver/plane/api/views/user.py
index 84ee47e42..68958e504 100644
--- a/apiserver/plane/api/views/user.py
+++ b/apiserver/plane/api/views/user.py
@@ -137,11 +137,11 @@ class UpdateUserTourCompletedEndpoint(BaseAPIView):
 
 
 class UserActivityEndpoint(BaseAPIView, BasePaginator):
-    def get(self, request):
+    def get(self, request, slug):
         try:
-            queryset = IssueActivity.objects.filter(actor=request.user).select_related(
-                "actor", "workspace", "issue", "project"
-            )
+            queryset = IssueActivity.objects.filter(
+                actor=request.user, workspace__slug=slug
+            ).select_related("actor", "workspace", "issue", "project")
 
             return self.paginate(
                 request=request,

From abcdebef8511ccb2fcd444126a08ed2f97c9a00e Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Tue, 29 Aug 2023 13:35:36 +0530
Subject: [PATCH 30/70] fix: n+1 in issue history and issue automation tasks
 (#1994)

---
 apiserver/plane/api/views/issue.py               | 6 ++++++
 apiserver/plane/bgtasks/issue_automation_task.py | 8 ++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index ff8dab801..e704969fd 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -493,6 +493,12 @@ class IssueActivityEndpoint(BaseAPIView):
                 .filter(project__project_projectmember__member=self.request.user)
                 .order_by("created_at")
                 .select_related("actor", "issue", "project", "workspace")
+                .prefetch_related(
+                    Prefetch(
+                        "comment_reactions",
+                        queryset=CommentReaction.objects.select_related("actor"),
+                    )
+                )
             )
             issue_activities = IssueActivitySerializer(issue_activities, many=True).data
             issue_comments = IssueCommentSerializer(issue_comments, many=True).data
diff --git a/apiserver/plane/bgtasks/issue_automation_task.py b/apiserver/plane/bgtasks/issue_automation_task.py
index 0e3ead65d..a1f4a3e92 100644
--- a/apiserver/plane/bgtasks/issue_automation_task.py
+++ b/apiserver/plane/bgtasks/issue_automation_task.py
@@ -64,7 +64,7 @@ def archive_old_issues():
                     issues_to_update.append(issue)
 
                 # Bulk Update the issues and log the activity
-                Issue.objects.bulk_update(
+                updated_issues = Issue.objects.bulk_update(
                     issues_to_update, ["archived_at"], batch_size=100
                 )
                 [
@@ -77,7 +77,7 @@ def archive_old_issues():
                         current_instance=None,
                         subscriber=False,
                     )
-                    for issue in issues_to_update
+                    for issue in updated_issues
                 ]
         return
     except Exception as e:
@@ -136,7 +136,7 @@ def close_old_issues():
                     issues_to_update.append(issue)
 
                 # Bulk Update the issues and log the activity
-                Issue.objects.bulk_update(issues_to_update, ["state"], batch_size=100)
+                updated_issues = Issue.objects.bulk_update(issues_to_update, ["state"], batch_size=100)
                 [
                     issue_activity.delay(
                         type="issue.activity.updated",
@@ -147,7 +147,7 @@ def close_old_issues():
                         current_instance=None,
                         subscriber=False,
                     )
-                    for issue in issues_to_update
+                    for issue in updated_issues
                 ]
         return
     except Exception as e:

From e1ad38568826698adb5f7261642c735e92f587f5 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Tue, 29 Aug 2023 13:45:04 +0530
Subject: [PATCH 31/70] fix: issue exports in self hosted instances (#1996)

* fix: issue exports in self hosted instances

* dev: remove print logs

* dev: update url creation function

* fix: changed the presigned url for self hosted exports

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
---
 apiserver/plane/bgtasks/export_task.py        | 81 +++++++++++++------
 .../plane/bgtasks/exporter_expired_task.py    | 29 ++++---
 2 files changed, 75 insertions(+), 35 deletions(-)

diff --git a/apiserver/plane/bgtasks/export_task.py b/apiserver/plane/bgtasks/export_task.py
index 22a9afe51..a45120eb5 100644
--- a/apiserver/plane/bgtasks/export_task.py
+++ b/apiserver/plane/bgtasks/export_task.py
@@ -4,6 +4,7 @@ import io
 import json
 import boto3
 import zipfile
+from urllib.parse import urlparse, urlunparse
 
 # Django imports
 from django.conf import settings
@@ -23,9 +24,11 @@ def dateTimeConverter(time):
     if time:
         return time.strftime("%a, %d %b %Y %I:%M:%S %Z%z")
 
+
 def dateConverter(time):
     if time:
-        return time.strftime("%a, %d %b %Y")    
+        return time.strftime("%a, %d %b %Y")
+
 
 def create_csv_file(data):
     csv_buffer = io.StringIO()
@@ -66,28 +69,53 @@ def create_zip_file(files):
 
 
 def upload_to_s3(zip_file, workspace_id, token_id, slug):
-    s3 = boto3.client(
-        "s3",
-        region_name=settings.AWS_REGION,
-        aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
-        aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
-        config=Config(signature_version="s3v4"),
-    )
     file_name = f"{workspace_id}/export-{slug}-{token_id[:6]}-{timezone.now()}.zip"
-
-    s3.upload_fileobj(
-        zip_file,
-        settings.AWS_S3_BUCKET_NAME,
-        file_name,
-        ExtraArgs={"ACL": "public-read", "ContentType": "application/zip"},
-    )
-
     expires_in = 7 * 24 * 60 * 60
-    presigned_url = s3.generate_presigned_url(
-        "get_object",
-        Params={"Bucket": settings.AWS_S3_BUCKET_NAME, "Key": file_name},
-        ExpiresIn=expires_in,
-    )
+
+    if settings.DOCKERIZED and settings.USE_MINIO:
+        s3 = boto3.client(
+            "s3",
+            endpoint_url=settings.AWS_S3_ENDPOINT_URL,
+            aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
+            aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
+            config=Config(signature_version="s3v4"),
+        )
+        s3.upload_fileobj(
+            zip_file,
+            settings.AWS_STORAGE_BUCKET_NAME,
+            file_name,
+            ExtraArgs={"ACL": "public-read", "ContentType": "application/zip"},
+        )
+        presigned_url = s3.generate_presigned_url(
+            "get_object",
+            Params={"Bucket": settings.AWS_STORAGE_BUCKET_NAME, "Key": file_name},
+            ExpiresIn=expires_in,
+        )
+        # Create the new url with updated domain and protocol
+        presigned_url = presigned_url.replace(
+            "http://plane-minio:9000/uploads/",
+            f"{settings.AWS_S3_URL_PROTOCOL}//{settings.AWS_S3_CUSTOM_DOMAIN}/",
+        )
+    else:
+        s3 = boto3.client(
+            "s3",
+            region_name=settings.AWS_REGION,
+            aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
+            aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
+            config=Config(signature_version="s3v4"),
+        )
+        s3.upload_fileobj(
+            zip_file,
+            settings.AWS_S3_BUCKET_NAME,
+            file_name,
+            ExtraArgs={"ACL": "public-read", "ContentType": "application/zip"},
+        )
+
+        presigned_url = s3.generate_presigned_url(
+            "get_object",
+            Params={"Bucket": settings.AWS_S3_BUCKET_NAME, "Key": file_name},
+            ExpiresIn=expires_in,
+        )
 
     exporter_instance = ExporterHistory.objects.get(token=token_id)
 
@@ -98,7 +126,7 @@ def upload_to_s3(zip_file, workspace_id, token_id, slug):
     else:
         exporter_instance.status = "failed"
 
-    exporter_instance.save(update_fields=["status", "url","key"])
+    exporter_instance.save(update_fields=["status", "url", "key"])
 
 
 def generate_table_row(issue):
@@ -145,7 +173,7 @@ def generate_json_row(issue):
         else "",
         "Labels": issue["labels__name"],
         "Cycle Name": issue["issue_cycle__cycle__name"],
-        "Cycle Start Date":  dateConverter(issue["issue_cycle__cycle__start_date"]),
+        "Cycle Start Date": dateConverter(issue["issue_cycle__cycle__start_date"]),
         "Cycle End Date": dateConverter(issue["issue_cycle__cycle__end_date"]),
         "Module Name": issue["issue_module__module__name"],
         "Module Start Date": dateConverter(issue["issue_module__module__start_date"]),
@@ -242,7 +270,9 @@ def issue_export_task(provider, workspace_id, project_ids, token_id, multiple, s
         workspace_issues = (
             (
                 Issue.objects.filter(
-                    workspace__id=workspace_id, project_id__in=project_ids
+                    workspace__id=workspace_id,
+                    project_id__in=project_ids,
+                    project__project_projectmember__member=exporter_instance.initiated_by_id,
                 )
                 .select_related("project", "workspace", "state", "parent", "created_by")
                 .prefetch_related(
@@ -275,7 +305,7 @@ def issue_export_task(provider, workspace_id, project_ids, token_id, multiple, s
                     "labels__name",
                 )
             )
-            .order_by("project__identifier","sequence_id")
+            .order_by("project__identifier", "sequence_id")
             .distinct()
         )
         # CSV header
@@ -338,7 +368,6 @@ def issue_export_task(provider, workspace_id, project_ids, token_id, multiple, s
         exporter_instance.status = "failed"
         exporter_instance.reason = str(e)
         exporter_instance.save(update_fields=["status", "reason"])
-
         # Print logs if in DEBUG mode
         if settings.DEBUG:
             print(e)
diff --git a/apiserver/plane/bgtasks/exporter_expired_task.py b/apiserver/plane/bgtasks/exporter_expired_task.py
index 799904347..a77d68b4b 100644
--- a/apiserver/plane/bgtasks/exporter_expired_task.py
+++ b/apiserver/plane/bgtasks/exporter_expired_task.py
@@ -21,18 +21,29 @@ def delete_old_s3_link():
     expired_exporter_history = ExporterHistory.objects.filter(
         Q(url__isnull=False) & Q(created_at__lte=timezone.now() - timedelta(days=8))
     ).values_list("key", "id")
-
-    s3 = boto3.client(
-        "s3",
-        region_name="ap-south-1",
-        aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
-        aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
-        config=Config(signature_version="s3v4"),
-    )
+    if settings.DOCKERIZED and settings.USE_MINIO:
+        s3 = boto3.client(
+            "s3",
+            endpoint_url=settings.AWS_S3_ENDPOINT_URL,
+            aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
+            aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
+            config=Config(signature_version="s3v4"),
+        )
+    else:
+        s3 = boto3.client(
+            "s3",
+            region_name="ap-south-1",
+            aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
+            aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
+            config=Config(signature_version="s3v4"),
+        )
 
     for file_name, exporter_id in expired_exporter_history:
         # Delete object from S3
         if file_name:
-            s3.delete_object(Bucket=settings.AWS_S3_BUCKET_NAME, Key=file_name)
+            if settings.DOCKERIZED and settings.USE_MINIO:
+                s3.delete_object(Bucket=settings.AWS_STORAGE_BUCKET_NAME, Key=file_name)
+            else:
+                s3.delete_object(Bucket=settings.AWS_S3_BUCKET_NAME, Key=file_name)
 
         ExporterHistory.objects.filter(id=exporter_id).update(url=None)

From 5ad5da4fd7c0c364edc6919d5ce32dae954e4d22 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Tue, 29 Aug 2023 13:45:25 +0530
Subject: [PATCH 32/70] dev: remove gunicorn config (#1999)

---
 apiserver/Procfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apiserver/Procfile b/apiserver/Procfile
index 694c49df4..63736e8e8 100644
--- a/apiserver/Procfile
+++ b/apiserver/Procfile
@@ -1,3 +1,3 @@
-web: gunicorn -w 4 -k uvicorn.workers.UvicornWorker plane.asgi:application --bind 0.0.0.0:$PORT --config gunicorn.config.py --max-requests 10000 --max-requests-jitter 1000 --access-logfile -
+web: gunicorn -w 4 -k uvicorn.workers.UvicornWorker plane.asgi:application --bind 0.0.0.0:$PORT --max-requests 10000 --max-requests-jitter 1000 --access-logfile -
 worker: celery -A plane worker -l info
 beat: celery -A plane beat -l INFO
\ No newline at end of file

From 91c10930a424b97f383b7b6943025e2fd1aeb24d Mon Sep 17 00:00:00 2001
From: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Date: Tue, 29 Aug 2023 14:57:27 +0530
Subject: [PATCH 33/70] feat: mark all read notifications (#1963)

* feat: mark all read notifications

* fix: changed string to boolean

* fix: changed snoozed condition
---
 apiserver/plane/api/urls.py               | 10 +++
 apiserver/plane/api/views/__init__.py     |  2 +-
 apiserver/plane/api/views/notification.py | 93 ++++++++++++++++++++++-
 3 files changed, 101 insertions(+), 4 deletions(-)

diff --git a/apiserver/plane/api/urls.py b/apiserver/plane/api/urls.py
index 64fb4b025..483bf99a4 100644
--- a/apiserver/plane/api/urls.py
+++ b/apiserver/plane/api/urls.py
@@ -164,6 +164,7 @@ from plane.api.views import (
     # Notification
     NotificationViewSet,
     UnreadNotificationEndpoint,
+    MarkAllReadNotificationViewSet,
     ## End Notification
     # Public Boards
     ProjectDeployBoardViewSet,
@@ -1494,6 +1495,15 @@ urlpatterns = [
         UnreadNotificationEndpoint.as_view(),
         name="unread-notifications",
     ),
+    path(
+        "workspaces/<str:slug>/users/notifications/mark-all-read/",
+        MarkAllReadNotificationViewSet.as_view(
+            {
+                "post": "create",
+            }
+        ),
+        name="mark-all-read-notifications",
+    ),
     ## End Notification
     # Public Boards
     path(
diff --git a/apiserver/plane/api/views/__init__.py b/apiserver/plane/api/views/__init__.py
index 9572c552f..47e7c6f85 100644
--- a/apiserver/plane/api/views/__init__.py
+++ b/apiserver/plane/api/views/__init__.py
@@ -162,7 +162,7 @@ from .analytic import (
     DefaultAnalyticsEndpoint,
 )
 
-from .notification import NotificationViewSet, UnreadNotificationEndpoint
+from .notification import NotificationViewSet, UnreadNotificationEndpoint, MarkAllReadNotificationViewSet
 
 from .exporter import (
     ExportIssuesEndpoint,
diff --git a/apiserver/plane/api/views/notification.py b/apiserver/plane/api/views/notification.py
index 2abc82631..75b94f034 100644
--- a/apiserver/plane/api/views/notification.py
+++ b/apiserver/plane/api/views/notification.py
@@ -10,7 +10,13 @@ from plane.utils.paginator import BasePaginator
 
 # Module imports
 from .base import BaseViewSet, BaseAPIView
-from plane.db.models import Notification, IssueAssignee, IssueSubscriber, Issue, WorkspaceMember
+from plane.db.models import (
+    Notification,
+    IssueAssignee,
+    IssueSubscriber,
+    Issue,
+    WorkspaceMember,
+)
 from plane.api.serializers import NotificationSerializer
 
 
@@ -83,13 +89,17 @@ class NotificationViewSet(BaseViewSet, BasePaginator):
 
             # Created issues
             if type == "created":
-                if WorkspaceMember.objects.filter(workspace__slug=slug, member=request.user, role__lt=15).exists():
+                if WorkspaceMember.objects.filter(
+                    workspace__slug=slug, member=request.user, role__lt=15
+                ).exists():
                     notifications = Notification.objects.none()
                 else:
                     issue_ids = Issue.objects.filter(
                         workspace__slug=slug, created_by=request.user
                     ).values_list("pk", flat=True)
-                    notifications = notifications.filter(entity_identifier__in=issue_ids)
+                    notifications = notifications.filter(
+                        entity_identifier__in=issue_ids
+                    )
 
             # Pagination
             if request.GET.get("per_page", False) and request.GET.get("cursor", False):
@@ -274,3 +284,80 @@ class UnreadNotificationEndpoint(BaseAPIView):
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+
+
+class MarkAllReadNotificationViewSet(BaseViewSet):
+    def create(self, request, slug):
+        try:
+            snoozed = request.data.get("snoozed", False)
+            archived = request.data.get("archived", False)
+            type = request.data.get("type", "all")
+
+            notifications = (
+                Notification.objects.filter(
+                    workspace__slug=slug,
+                    receiver_id=request.user.id,
+                    read_at__isnull=True,
+                )
+                .select_related("workspace", "project", "triggered_by", "receiver")
+                .order_by("snoozed_till", "-created_at")
+            )
+
+            # Filter for snoozed notifications
+            if snoozed:
+                notifications = notifications.filter(
+                    Q(snoozed_till__lt=timezone.now()) | Q(snoozed_till__isnull=False)
+                )
+            else:
+                notifications = notifications.filter(
+                    Q(snoozed_till__gte=timezone.now()) | Q(snoozed_till__isnull=True),
+                )
+
+            # Filter for archived or unarchive
+            if archived:
+                notifications = notifications.filter(archived_at__isnull=False)
+            else:
+                notifications = notifications.filter(archived_at__isnull=True)
+
+            # Subscribed issues
+            if type == "watching":
+                issue_ids = IssueSubscriber.objects.filter(
+                    workspace__slug=slug, subscriber_id=request.user.id
+                ).values_list("issue_id", flat=True)
+                notifications = notifications.filter(entity_identifier__in=issue_ids)
+
+            # Assigned Issues
+            if type == "assigned":
+                issue_ids = IssueAssignee.objects.filter(
+                    workspace__slug=slug, assignee_id=request.user.id
+                ).values_list("issue_id", flat=True)
+                notifications = notifications.filter(entity_identifier__in=issue_ids)
+
+            # Created issues
+            if type == "created":
+                if WorkspaceMember.objects.filter(
+                    workspace__slug=slug, member=request.user, role__lt=15
+                ).exists():
+                    notifications = Notification.objects.none()
+                else:
+                    issue_ids = Issue.objects.filter(
+                        workspace__slug=slug, created_by=request.user
+                    ).values_list("pk", flat=True)
+                    notifications = notifications.filter(
+                        entity_identifier__in=issue_ids
+                    )
+
+            updated_notifications = []
+            for notification in notifications:
+                notification.read_at = timezone.now()
+                updated_notifications.append(notification)
+            Notification.objects.bulk_update(
+                updated_notifications, ["read_at"], batch_size=100
+            )
+            return Response({"message": "Successful"}, status=status.HTTP_200_OK)
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )

From 1d30a9a0a8ef8d1d8dc0406f54866c3a712fb22f Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Tue, 29 Aug 2023 15:00:26 +0530
Subject: [PATCH 34/70] chore: project public board issue retrieve (#2003)

* chore: project public board issue retrieve

* dev: project issues list endpoint

* fix: issue public retrieve endpoint
---
 apiserver/plane/api/serializers/__init__.py |   1 +
 apiserver/plane/api/serializers/issue.py    |  32 +++-
 apiserver/plane/api/urls.py                 |  10 +-
 apiserver/plane/api/views/__init__.py       |   3 +-
 apiserver/plane/api/views/issue.py          | 174 ++++++++++++++++++++
 apiserver/plane/api/views/project.py        | 148 -----------------
 6 files changed, 214 insertions(+), 154 deletions(-)

diff --git a/apiserver/plane/api/serializers/__init__.py b/apiserver/plane/api/serializers/__init__.py
index 5855f0413..93b21a7f2 100644
--- a/apiserver/plane/api/serializers/__init__.py
+++ b/apiserver/plane/api/serializers/__init__.py
@@ -44,6 +44,7 @@ from .issue import (
     IssueReactionSerializer,
     CommentReactionSerializer,
     IssueVoteSerializer,
+    IssuePublicSerializer,
 )
 
 from .module import (
diff --git a/apiserver/plane/api/serializers/issue.py b/apiserver/plane/api/serializers/issue.py
index 647b299fd..07afc91bc 100644
--- a/apiserver/plane/api/serializers/issue.py
+++ b/apiserver/plane/api/serializers/issue.py
@@ -113,7 +113,11 @@ class IssueCreateSerializer(BaseSerializer):
         ]
 
     def validate(self, data):
-        if data.get("start_date", None) is not None and data.get("target_date", None) is not None and data.get("start_date", None) > data.get("target_date", None):
+        if (
+            data.get("start_date", None) is not None
+            and data.get("target_date", None) is not None
+            and data.get("start_date", None) > data.get("target_date", None)
+        ):
             raise serializers.ValidationError("Start date cannot exceed target date")
         return data
 
@@ -554,9 +558,7 @@ class CommentReactionSerializer(BaseSerializer):
         read_only_fields = ["workspace", "project", "comment", "actor"]
 
 
-
 class IssueVoteSerializer(BaseSerializer):
-
     class Meta:
         model = IssueVote
         fields = ["issue", "vote", "workspace_id", "project_id", "actor"]
@@ -676,6 +678,30 @@ class IssueLiteSerializer(BaseSerializer):
         ]
 
 
+class IssuePublicSerializer(BaseSerializer):
+    project_detail = ProjectLiteSerializer(read_only=True, source="project")
+    state_detail = StateLiteSerializer(read_only=True, source="state")
+    issue_reactions = IssueReactionLiteSerializer(read_only=True, many=True)
+
+    class Meta:
+        model = Issue
+        fields = [
+            "id",
+            "name",
+            "description_html",
+            "sequence_id",
+            "state",
+            "state_detail",
+            "project",
+            "project_detail",
+            "workspace",
+            "priority",
+            "target_date",
+            "issue_reactions",
+        ]
+        read_only_fields = fields
+
+
 class IssueSubscriberSerializer(BaseSerializer):
     class Meta:
         model = IssueSubscriber
diff --git a/apiserver/plane/api/urls.py b/apiserver/plane/api/urls.py
index 483bf99a4..1fb2b8e90 100644
--- a/apiserver/plane/api/urls.py
+++ b/apiserver/plane/api/urls.py
@@ -168,13 +168,14 @@ from plane.api.views import (
     ## End Notification
     # Public Boards
     ProjectDeployBoardViewSet,
-    ProjectDeployBoardIssuesPublicEndpoint,
+    ProjectIssuesPublicEndpoint,
     ProjectDeployBoardPublicSettingsEndpoint,
     IssueReactionPublicViewSet,
     CommentReactionPublicViewSet,
     InboxIssuePublicViewSet,
     IssueVotePublicViewSet,
     WorkspaceProjectDeployBoardEndpoint,
+    IssueRetrievePublicEndpoint,
     ## End Public Boards
     ## Exporter
     ExportIssuesEndpoint,
@@ -1534,9 +1535,14 @@ urlpatterns = [
     ),
     path(
         "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/",
-        ProjectDeployBoardIssuesPublicEndpoint.as_view(),
+        ProjectIssuesPublicEndpoint.as_view(),
         name="project-deploy-board",
     ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/",
+        IssueRetrievePublicEndpoint.as_view(),
+        name="workspace-project-boards",
+    ),
     path(
         "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/comments/",
         IssueCommentPublicViewSet.as_view(
diff --git a/apiserver/plane/api/views/__init__.py b/apiserver/plane/api/views/__init__.py
index 47e7c6f85..b697741ae 100644
--- a/apiserver/plane/api/views/__init__.py
+++ b/apiserver/plane/api/views/__init__.py
@@ -12,7 +12,6 @@ from .project import (
     ProjectUserViewsEndpoint,
     ProjectMemberUserEndpoint,
     ProjectFavoritesViewSet,
-    ProjectDeployBoardIssuesPublicEndpoint,
     ProjectDeployBoardViewSet,
     ProjectDeployBoardPublicSettingsEndpoint,
     ProjectMemberEndpoint,
@@ -85,6 +84,8 @@ from .issue import (
     IssueReactionPublicViewSet,
     CommentReactionPublicViewSet,
     IssueVotePublicViewSet,
+    IssueRetrievePublicEndpoint,
+    ProjectIssuesPublicEndpoint,
 )
 
 from .auth_extended import (
diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index e704969fd..4ed109a80 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -28,6 +28,7 @@ from django.conf import settings
 from rest_framework.response import Response
 from rest_framework import status
 from rest_framework.parsers import MultiPartParser, FormParser
+from rest_framework.permissions import AllowAny
 from sentry_sdk import capture_exception
 
 # Module imports
@@ -49,6 +50,7 @@ from plane.api.serializers import (
     IssueReactionSerializer,
     CommentReactionSerializer,
     IssueVoteSerializer,
+    IssuePublicSerializer,
 )
 from plane.api.permissions import (
     WorkspaceEntityPermission,
@@ -1846,3 +1848,175 @@ class IssueVotePublicViewSet(BaseViewSet):
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+
+
+class IssueRetrievePublicEndpoint(BaseAPIView):
+    permission_classes = [
+        AllowAny,
+    ]
+
+    def get(self, request, slug, project_id, issue_id):
+        try:
+            issue = Issue.objects.get(
+                workspace__slug=slug, project_id=project_id, pk=issue_id
+            )
+            serializer = IssuePublicSerializer(issue)
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        except Issue.DoesNotExist:
+            return Response(
+                {"error": "Issue Does not exist"}, status=status.HTTP_400_BAD_REQUEST
+            )
+        except Exception as e:
+            print(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+
+class ProjectIssuesPublicEndpoint(BaseAPIView):
+    permission_classes = [
+        AllowAny,
+    ]
+
+    def get(self, request, slug, project_id):
+        try:
+            project_deploy_board = ProjectDeployBoard.objects.get(
+                workspace__slug=slug, project_id=project_id
+            )
+
+            filters = issue_filters(request.query_params, "GET")
+
+            # Custom ordering for priority and state
+            priority_order = ["urgent", "high", "medium", "low", None]
+            state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
+
+            order_by_param = request.GET.get("order_by", "-created_at")
+
+            issue_queryset = (
+                Issue.issue_objects.annotate(
+                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                    .order_by()
+                    .annotate(count=Func(F("id"), function="Count"))
+                    .values("count")
+                )
+                .filter(project_id=project_id)
+                .filter(workspace__slug=slug)
+                .select_related("project", "workspace", "state", "parent")
+                .prefetch_related("assignees", "labels")
+                .prefetch_related(
+                    Prefetch(
+                        "issue_reactions",
+                        queryset=IssueReaction.objects.select_related("actor"),
+                    )
+                )
+                .filter(**filters)
+                .annotate(cycle_id=F("issue_cycle__cycle_id"))
+                .annotate(module_id=F("issue_module__module_id"))
+                .annotate(
+                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                    .order_by()
+                    .annotate(count=Func(F("id"), function="Count"))
+                    .values("count")
+                )
+                .annotate(
+                    attachment_count=IssueAttachment.objects.filter(
+                        issue=OuterRef("id")
+                    )
+                    .order_by()
+                    .annotate(count=Func(F("id"), function="Count"))
+                    .values("count")
+                )
+            )
+
+            # Priority Ordering
+            if order_by_param == "priority" or order_by_param == "-priority":
+                priority_order = (
+                    priority_order
+                    if order_by_param == "priority"
+                    else priority_order[::-1]
+                )
+                issue_queryset = issue_queryset.annotate(
+                    priority_order=Case(
+                        *[
+                            When(priority=p, then=Value(i))
+                            for i, p in enumerate(priority_order)
+                        ],
+                        output_field=CharField(),
+                    )
+                ).order_by("priority_order")
+
+            # State Ordering
+            elif order_by_param in [
+                "state__name",
+                "state__group",
+                "-state__name",
+                "-state__group",
+            ]:
+                state_order = (
+                    state_order
+                    if order_by_param in ["state__name", "state__group"]
+                    else state_order[::-1]
+                )
+                issue_queryset = issue_queryset.annotate(
+                    state_order=Case(
+                        *[
+                            When(state__group=state_group, then=Value(i))
+                            for i, state_group in enumerate(state_order)
+                        ],
+                        default=Value(len(state_order)),
+                        output_field=CharField(),
+                    )
+                ).order_by("state_order")
+            # assignee and label ordering
+            elif order_by_param in [
+                "labels__name",
+                "-labels__name",
+                "assignees__first_name",
+                "-assignees__first_name",
+            ]:
+                issue_queryset = issue_queryset.annotate(
+                    max_values=Max(
+                        order_by_param[1::]
+                        if order_by_param.startswith("-")
+                        else order_by_param
+                    )
+                ).order_by(
+                    "-max_values" if order_by_param.startswith("-") else "max_values"
+                )
+            else:
+                issue_queryset = issue_queryset.order_by(order_by_param)
+
+            issues = IssuePublicSerializer(issue_queryset, many=True).data
+
+            states = State.objects.filter(
+                workspace__slug=slug, project_id=project_id
+            ).values("name", "group", "color", "id")
+
+            labels = Label.objects.filter(
+                workspace__slug=slug, project_id=project_id
+            ).values("id", "name", "color", "parent")
+
+            ## Grouping the results
+            group_by = request.GET.get("group_by", False)
+            if group_by:
+                issues = group_results(issues, group_by)
+
+            return Response(
+                {
+                    "issues": issues,
+                    "states": states,
+                    "labels": labels,
+                },
+                status=status.HTTP_200_OK,
+            )
+        except ProjectDeployBoard.DoesNotExist:
+            return Response(
+                {"error": "Board does not exists"}, status=status.HTTP_404_NOT_FOUND
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
\ No newline at end of file
diff --git a/apiserver/plane/api/views/project.py b/apiserver/plane/api/views/project.py
index 3e5ca1c4b..97b06fce5 100644
--- a/apiserver/plane/api/views/project.py
+++ b/apiserver/plane/api/views/project.py
@@ -1143,154 +1143,6 @@ class ProjectDeployBoardPublicSettingsEndpoint(BaseAPIView):
             )
 
 
-class ProjectDeployBoardIssuesPublicEndpoint(BaseAPIView):
-    permission_classes = [
-        AllowAny,
-    ]
-
-    def get(self, request, slug, project_id):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
-            )
-
-            filters = issue_filters(request.query_params, "GET")
-
-            # Custom ordering for priority and state
-            priority_order = ["urgent", "high", "medium", "low", None]
-            state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
-
-            order_by_param = request.GET.get("order_by", "-created_at")
-
-            issue_queryset = (
-                Issue.issue_objects.annotate(
-                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .filter(project_id=project_id)
-                .filter(workspace__slug=slug)
-                .select_related("project", "workspace", "state", "parent")
-                .prefetch_related("assignees", "labels")
-                .prefetch_related(
-                    Prefetch(
-                        "issue_reactions",
-                        queryset=IssueReaction.objects.select_related("actor"),
-                    )
-                )
-                .filter(**filters)
-                .annotate(cycle_id=F("issue_cycle__cycle_id"))
-                .annotate(module_id=F("issue_module__module_id"))
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-            )
-
-            # Priority Ordering
-            if order_by_param == "priority" or order_by_param == "-priority":
-                priority_order = (
-                    priority_order
-                    if order_by_param == "priority"
-                    else priority_order[::-1]
-                )
-                issue_queryset = issue_queryset.annotate(
-                    priority_order=Case(
-                        *[
-                            When(priority=p, then=Value(i))
-                            for i, p in enumerate(priority_order)
-                        ],
-                        output_field=CharField(),
-                    )
-                ).order_by("priority_order")
-
-            # State Ordering
-            elif order_by_param in [
-                "state__name",
-                "state__group",
-                "-state__name",
-                "-state__group",
-            ]:
-                state_order = (
-                    state_order
-                    if order_by_param in ["state__name", "state__group"]
-                    else state_order[::-1]
-                )
-                issue_queryset = issue_queryset.annotate(
-                    state_order=Case(
-                        *[
-                            When(state__group=state_group, then=Value(i))
-                            for i, state_group in enumerate(state_order)
-                        ],
-                        default=Value(len(state_order)),
-                        output_field=CharField(),
-                    )
-                ).order_by("state_order")
-            # assignee and label ordering
-            elif order_by_param in [
-                "labels__name",
-                "-labels__name",
-                "assignees__first_name",
-                "-assignees__first_name",
-            ]:
-                issue_queryset = issue_queryset.annotate(
-                    max_values=Max(
-                        order_by_param[1::]
-                        if order_by_param.startswith("-")
-                        else order_by_param
-                    )
-                ).order_by(
-                    "-max_values" if order_by_param.startswith("-") else "max_values"
-                )
-            else:
-                issue_queryset = issue_queryset.order_by(order_by_param)
-
-            issues = IssueLiteSerializer(issue_queryset, many=True).data
-
-            states = State.objects.filter(
-                workspace__slug=slug, project_id=project_id
-            ).values("name", "group", "color", "id")
-
-            labels = Label.objects.filter(
-                workspace__slug=slug, project_id=project_id
-            ).values("id", "name", "color", "parent")
-
-            ## Grouping the results
-            group_by = request.GET.get("group_by", False)
-            if group_by:
-                issues = group_results(issues, group_by)
-
-            return Response(
-                {
-                    "issues": issues,
-                    "states": states,
-                    "labels": labels,
-                },
-                status=status.HTTP_200_OK,
-            )
-        except ProjectDeployBoard.DoesNotExist:
-            return Response(
-                {"error": "Board does not exists"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-
 class WorkspaceProjectDeployBoardEndpoint(BaseAPIView):
 
     permission_classes = [AllowAny,]

From 1cf5e8d80a980d2f241b853fbca50d55ced6b705 Mon Sep 17 00:00:00 2001
From: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Date: Tue, 29 Aug 2023 15:01:18 +0530
Subject: [PATCH 35/70] fix: only external comments will show in deploy boards
 (#2010)

---
 apiserver/plane/api/views/issue.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index 4ed109a80..616cef0d6 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -1499,6 +1499,7 @@ class IssueCommentPublicViewSet(BaseViewSet):
                 .get_queryset()
                 .filter(workspace__slug=self.kwargs.get("slug"))
                 .filter(issue_id=self.kwargs.get("issue_id"))
+                .filter(access="EXTERNAL")
                 .select_related("project")
                 .select_related("workspace")
                 .select_related("issue")

From b2a41d3bf67ce46f712ed0b57007de50be2cf49c Mon Sep 17 00:00:00 2001
From: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Date: Tue, 29 Aug 2023 15:02:29 +0530
Subject: [PATCH 36/70] fix: issue votes (#2006)

* fix: issue votes

* fix: added default as 1 in vote

* fix: issue vote migration file
---
 apiserver/plane/api/views/issue.py            |  3 ++-
 ..._together_alter_issuevote_vote_and_more.py | 26 +++++++++++++++++++
 apiserver/plane/db/models/issue.py            |  6 +++--
 3 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 apiserver/plane/db/migrations/0042_alter_issuevote_unique_together_alter_issuevote_vote_and_more.py

diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index 616cef0d6..05434aec5 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -1822,8 +1822,9 @@ class IssueVotePublicViewSet(BaseViewSet):
                 actor_id=request.user.id,
                 project_id=project_id,
                 issue_id=issue_id,
-                vote=request.data.get("vote", 1),
             )
+            issue_vote.vote = request.data.get("vote", 1)
+            issue_vote.save()
             serializer = IssueVoteSerializer(issue_vote)
             return Response(serializer.data, status=status.HTTP_201_CREATED)
         except Exception as e:
diff --git a/apiserver/plane/db/migrations/0042_alter_issuevote_unique_together_alter_issuevote_vote_and_more.py b/apiserver/plane/db/migrations/0042_alter_issuevote_unique_together_alter_issuevote_vote_and_more.py
new file mode 100644
index 000000000..d8063acc0
--- /dev/null
+++ b/apiserver/plane/db/migrations/0042_alter_issuevote_unique_together_alter_issuevote_vote_and_more.py
@@ -0,0 +1,26 @@
+# Generated by Django 4.2.3 on 2023-08-29 07:58
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0041_cycle_sort_order_issuecomment_access_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterUniqueTogether(
+            name='issuevote',
+            unique_together=set(),
+        ),
+        migrations.AlterField(
+            model_name='issuevote',
+            name='vote',
+            field=models.IntegerField(choices=[(-1, 'DOWNVOTE'), (1, 'UPVOTE')], default=1),
+        ),
+        migrations.AlterUniqueTogether(
+            name='issuevote',
+            unique_together={('issue', 'actor', 'vote')},
+        ),
+    ]
diff --git a/apiserver/plane/db/models/issue.py b/apiserver/plane/db/models/issue.py
index 7af9e6e14..1633cbaf9 100644
--- a/apiserver/plane/db/models/issue.py
+++ b/apiserver/plane/db/models/issue.py
@@ -476,10 +476,12 @@ class IssueVote(ProjectBaseModel):
         choices=(
             (-1, "DOWNVOTE"),
             (1, "UPVOTE"),
-        )
+        ),
+        default=1,
     )
+
     class Meta:
-        unique_together = ["issue", "actor"]
+        unique_together = ["issue", "actor", "vote"]
         verbose_name = "Issue Vote"
         verbose_name_plural = "Issue Votes"
         db_table = "issue_votes"

From 90cf39cf59dd20d2abbf4752f42d98b1da221e1a Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Tue, 29 Aug 2023 16:40:28 +0530
Subject: [PATCH 37/70] fix: access creation in comments (#2013)

---
 apiserver/plane/api/serializers/issue.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apiserver/plane/api/serializers/issue.py b/apiserver/plane/api/serializers/issue.py
index 07afc91bc..2a75b2f48 100644
--- a/apiserver/plane/api/serializers/issue.py
+++ b/apiserver/plane/api/serializers/issue.py
@@ -584,7 +584,6 @@ class IssueCommentSerializer(BaseSerializer):
             "updated_by",
             "created_at",
             "updated_at",
-            "access",
         ]
 
 

From 38a5623c43c74b6480f59bf4a3a9b987167f7dc0 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 29 Aug 2023 20:11:06 +0530
Subject: [PATCH 38/70] dev: user timezone select option (#2002)

---
 apps/app/constants/timezones.ts               | 2386 +++++++++++++++++
 .../[workspaceSlug]/me/profile/index.tsx      |   47 +-
 apps/app/types/users.d.ts                     |    1 +
 3 files changed, 2433 insertions(+), 1 deletion(-)
 create mode 100644 apps/app/constants/timezones.ts

diff --git a/apps/app/constants/timezones.ts b/apps/app/constants/timezones.ts
new file mode 100644
index 000000000..0ba1df4c0
--- /dev/null
+++ b/apps/app/constants/timezones.ts
@@ -0,0 +1,2386 @@
+export const TIME_ZONES = [
+  {
+    label: "Africa/Abidjan, GMT",
+    value: "Africa/Abidjan",
+  },
+  {
+    label: "Africa/Accra, GMT",
+    value: "Africa/Accra",
+  },
+  {
+    label: "Africa/Addis_Ababa, GMT+03:00",
+    value: "Africa/Addis_Ababa",
+  },
+  {
+    label: "Africa/Algiers, GMT+01:00",
+    value: "Africa/Algiers",
+  },
+  {
+    label: "Africa/Asmara, GMT+03:00",
+    value: "Africa/Asmara",
+  },
+  {
+    label: "Africa/Asmera, GMT+03:00",
+    value: "Africa/Asmera",
+  },
+  {
+    label: "Africa/Bamako, GMT",
+    value: "Africa/Bamako",
+  },
+  {
+    label: "Africa/Bangui, GMT+01:00",
+    value: "Africa/Bangui",
+  },
+  {
+    label: "Africa/Banjul, GMT",
+    value: "Africa/Banjul",
+  },
+  {
+    label: "Africa/Bissau, GMT",
+    value: "Africa/Bissau",
+  },
+  {
+    label: "Africa/Blantyre, GMT+02:00",
+    value: "Africa/Blantyre",
+  },
+  {
+    label: "Africa/Brazzaville, GMT+01:00",
+    value: "Africa/Brazzaville",
+  },
+  {
+    label: "Africa/Bujumbura, GMT+02:00",
+    value: "Africa/Bujumbura",
+  },
+  {
+    label: "Africa/Cairo, GMT+03:00",
+    value: "Africa/Cairo",
+  },
+  {
+    label: "Africa/Casablanca, GMT+01:00",
+    value: "Africa/Casablanca",
+  },
+  {
+    label: "Africa/Ceuta, GMT+02:00",
+    value: "Africa/Ceuta",
+  },
+  {
+    label: "Africa/Conakry, GMT",
+    value: "Africa/Conakry",
+  },
+  {
+    label: "Africa/Dakar, GMT",
+    value: "Africa/Dakar",
+  },
+  {
+    label: "Africa/Dar_es_Salaam, GMT+03:00",
+    value: "Africa/Dar_es_Salaam",
+  },
+  {
+    label: "Africa/Djibouti, GMT+03:00",
+    value: "Africa/Djibouti",
+  },
+  {
+    label: "Africa/Douala, GMT+01:00",
+    value: "Africa/Douala",
+  },
+  {
+    label: "Africa/El_Aaiun, GMT+01:00",
+    value: "Africa/El_Aaiun",
+  },
+  {
+    label: "Africa/Freetown, GMT",
+    value: "Africa/Freetown",
+  },
+  {
+    label: "Africa/Gaborone, GMT+02:00",
+    value: "Africa/Gaborone",
+  },
+  {
+    label: "Africa/Harare, GMT+02:00",
+    value: "Africa/Harare",
+  },
+  {
+    label: "Africa/Johannesburg, GMT+02:00",
+    value: "Africa/Johannesburg",
+  },
+  {
+    label: "Africa/Juba, GMT+02:00",
+    value: "Africa/Juba",
+  },
+  {
+    label: "Africa/Kampala, GMT+03:00",
+    value: "Africa/Kampala",
+  },
+  {
+    label: "Africa/Khartoum, GMT+02:00",
+    value: "Africa/Khartoum",
+  },
+  {
+    label: "Africa/Kigali, GMT+02:00",
+    value: "Africa/Kigali",
+  },
+  {
+    label: "Africa/Kinshasa, GMT+01:00",
+    value: "Africa/Kinshasa",
+  },
+  {
+    label: "Africa/Lagos, GMT+01:00",
+    value: "Africa/Lagos",
+  },
+  {
+    label: "Africa/Libreville, GMT+01:00",
+    value: "Africa/Libreville",
+  },
+  {
+    label: "Africa/Lome, GMT",
+    value: "Africa/Lome",
+  },
+  {
+    label: "Africa/Luanda, GMT+01:00",
+    value: "Africa/Luanda",
+  },
+  {
+    label: "Africa/Lubumbashi, GMT+02:00",
+    value: "Africa/Lubumbashi",
+  },
+  {
+    label: "Africa/Lusaka, GMT+02:00",
+    value: "Africa/Lusaka",
+  },
+  {
+    label: "Africa/Malabo, GMT+01:00",
+    value: "Africa/Malabo",
+  },
+  {
+    label: "Africa/Maputo, GMT+02:00",
+    value: "Africa/Maputo",
+  },
+  {
+    label: "Africa/Maseru, GMT+02:00",
+    value: "Africa/Maseru",
+  },
+  {
+    label: "Africa/Mbabane, GMT+02:00",
+    value: "Africa/Mbabane",
+  },
+  {
+    label: "Africa/Mogadishu, GMT+03:00",
+    value: "Africa/Mogadishu",
+  },
+  {
+    label: "Africa/Monrovia, GMT",
+    value: "Africa/Monrovia",
+  },
+  {
+    label: "Africa/Nairobi, GMT+03:00",
+    value: "Africa/Nairobi",
+  },
+  {
+    label: "Africa/Ndjamena, GMT+01:00",
+    value: "Africa/Ndjamena",
+  },
+  {
+    label: "Africa/Niamey, GMT+01:00",
+    value: "Africa/Niamey",
+  },
+  {
+    label: "Africa/Nouakchott, GMT",
+    value: "Africa/Nouakchott",
+  },
+  {
+    label: "Africa/Ouagadougou, GMT",
+    value: "Africa/Ouagadougou",
+  },
+  {
+    label: "Africa/Porto-Novo, GMT+01:00",
+    value: "Africa/Porto-Novo",
+  },
+  {
+    label: "Africa/Sao_Tome, GMT",
+    value: "Africa/Sao_Tome",
+  },
+  {
+    label: "Africa/Timbuktu, GMT",
+    value: "Africa/Timbuktu",
+  },
+  {
+    label: "Africa/Tripoli, GMT+02:00",
+    value: "Africa/Tripoli",
+  },
+  {
+    label: "Africa/Tunis, GMT+01:00",
+    value: "Africa/Tunis",
+  },
+  {
+    label: "Africa/Windhoek, GMT+02:00",
+    value: "Africa/Windhoek",
+  },
+  {
+    label: "America/Adak, GMT-09:00",
+    value: "America/Adak",
+  },
+  {
+    label: "America/Anchorage, GMT-08:00",
+    value: "America/Anchorage",
+  },
+  {
+    label: "America/Anguilla, GMT-04:00",
+    value: "America/Anguilla",
+  },
+  {
+    label: "America/Antigua, GMT-04:00",
+    value: "America/Antigua",
+  },
+  {
+    label: "America/Araguaina, GMT-03:00",
+    value: "America/Araguaina",
+  },
+  {
+    label: "America/Argentina/Buenos_Aires, GMT-03:00",
+    value: "America/Argentina/Buenos_Aires",
+  },
+  {
+    label: "America/Argentina/Catamarca, GMT-03:00",
+    value: "America/Argentina/Catamarca",
+  },
+  {
+    label: "America/Argentina/ComodRivadavia, GMT-03:00",
+    value: "America/Argentina/ComodRivadavia",
+  },
+  {
+    label: "America/Argentina/Cordoba, GMT-03:00",
+    value: "America/Argentina/Cordoba",
+  },
+  {
+    label: "America/Argentina/Jujuy, GMT-03:00",
+    value: "America/Argentina/Jujuy",
+  },
+  {
+    label: "America/Argentina/La_Rioja, GMT-03:00",
+    value: "America/Argentina/La_Rioja",
+  },
+  {
+    label: "America/Argentina/Mendoza, GMT-03:00",
+    value: "America/Argentina/Mendoza",
+  },
+  {
+    label: "America/Argentina/Rio_Gallegos, GMT-03:00",
+    value: "America/Argentina/Rio_Gallegos",
+  },
+  {
+    label: "America/Argentina/Salta, GMT-03:00",
+    value: "America/Argentina/Salta",
+  },
+  {
+    label: "America/Argentina/San_Juan, GMT-03:00",
+    value: "America/Argentina/San_Juan",
+  },
+  {
+    label: "America/Argentina/San_Luis, GMT-03:00",
+    value: "America/Argentina/San_Luis",
+  },
+  {
+    label: "America/Argentina/Tucuman, GMT-03:00",
+    value: "America/Argentina/Tucuman",
+  },
+  {
+    label: "America/Argentina/Ushuaia, GMT-03:00",
+    value: "America/Argentina/Ushuaia",
+  },
+  {
+    label: "America/Aruba, GMT-04:00",
+    value: "America/Aruba",
+  },
+  {
+    label: "America/Asuncion, GMT-04:00",
+    value: "America/Asuncion",
+  },
+  {
+    label: "America/Atikokan, GMT-05:00",
+    value: "America/Atikokan",
+  },
+  {
+    label: "America/Atka, GMT-09:00",
+    value: "America/Atka",
+  },
+  {
+    label: "America/Bahia, GMT-03:00",
+    value: "America/Bahia",
+  },
+  {
+    label: "America/Bahia_Banderas, GMT-06:00",
+    value: "America/Bahia_Banderas",
+  },
+  {
+    label: "America/Barbados, GMT-04:00",
+    value: "America/Barbados",
+  },
+  {
+    label: "America/Belem, GMT-03:00",
+    value: "America/Belem",
+  },
+  {
+    label: "America/Belize, GMT-06:00",
+    value: "America/Belize",
+  },
+  {
+    label: "America/Blanc-Sablon, GMT-04:00",
+    value: "America/Blanc-Sablon",
+  },
+  {
+    label: "America/Boa_Vista, GMT-04:00",
+    value: "America/Boa_Vista",
+  },
+  {
+    label: "America/Bogota, GMT-05:00",
+    value: "America/Bogota",
+  },
+  {
+    label: "America/Boise, GMT-06:00",
+    value: "America/Boise",
+  },
+  {
+    label: "America/Buenos_Aires, GMT-03:00",
+    value: "America/Buenos_Aires",
+  },
+  {
+    label: "America/Cambridge_Bay, GMT-06:00",
+    value: "America/Cambridge_Bay",
+  },
+  {
+    label: "America/Campo_Grande, GMT-04:00",
+    value: "America/Campo_Grande",
+  },
+  {
+    label: "America/Cancun, GMT-05:00",
+    value: "America/Cancun",
+  },
+  {
+    label: "America/Caracas, GMT-04:00",
+    value: "America/Caracas",
+  },
+  {
+    label: "America/Catamarca, GMT-03:00",
+    value: "America/Catamarca",
+  },
+  {
+    label: "America/Cayenne, GMT-03:00",
+    value: "America/Cayenne",
+  },
+  {
+    label: "America/Cayman, GMT-05:00",
+    value: "America/Cayman",
+  },
+  {
+    label: "America/Chicago, GMT-05:00",
+    value: "America/Chicago",
+  },
+  {
+    label: "America/Chihuahua, GMT-06:00",
+    value: "America/Chihuahua",
+  },
+  {
+    label: "America/Ciudad_Juarez, GMT-06:00",
+    value: "America/Ciudad_Juarez",
+  },
+  {
+    label: "America/Coral_Harbour, GMT-05:00",
+    value: "America/Coral_Harbour",
+  },
+  {
+    label: "America/Cordoba, GMT-03:00",
+    value: "America/Cordoba",
+  },
+  {
+    label: "America/Costa_Rica, GMT-06:00",
+    value: "America/Costa_Rica",
+  },
+  {
+    label: "America/Creston, GMT-07:00",
+    value: "America/Creston",
+  },
+  {
+    label: "America/Cuiaba, GMT-04:00",
+    value: "America/Cuiaba",
+  },
+  {
+    label: "America/Curacao, GMT-04:00",
+    value: "America/Curacao",
+  },
+  {
+    label: "America/Danmarkshavn, GMT",
+    value: "America/Danmarkshavn",
+  },
+  {
+    label: "America/Dawson, GMT-07:00",
+    value: "America/Dawson",
+  },
+  {
+    label: "America/Dawson_Creek, GMT-07:00",
+    value: "America/Dawson_Creek",
+  },
+  {
+    label: "America/Denver, GMT-06:00",
+    value: "America/Denver",
+  },
+  {
+    label: "America/Detroit, GMT-04:00",
+    value: "America/Detroit",
+  },
+  {
+    label: "America/Dominica, GMT-04:00",
+    value: "America/Dominica",
+  },
+  {
+    label: "America/Edmonton, GMT-06:00",
+    value: "America/Edmonton",
+  },
+  {
+    label: "America/Eirunepe, GMT-05:00",
+    value: "America/Eirunepe",
+  },
+  {
+    label: "America/El_Salvador, GMT-06:00",
+    value: "America/El_Salvador",
+  },
+  {
+    label: "America/Ensenada, GMT-07:00",
+    value: "America/Ensenada",
+  },
+  {
+    label: "America/Fort_Nelson, GMT-07:00",
+    value: "America/Fort_Nelson",
+  },
+  {
+    label: "America/Fort_Wayne, GMT-04:00",
+    value: "America/Fort_Wayne",
+  },
+  {
+    label: "America/Fortaleza, GMT-03:00",
+    value: "America/Fortaleza",
+  },
+  {
+    label: "America/Glace_Bay, GMT-03:00",
+    value: "America/Glace_Bay",
+  },
+  {
+    label: "America/Godthab, GMT-02:00",
+    value: "America/Godthab",
+  },
+  {
+    label: "America/Goose_Bay, GMT-03:00",
+    value: "America/Goose_Bay",
+  },
+  {
+    label: "America/Grand_Turk, GMT-04:00",
+    value: "America/Grand_Turk",
+  },
+  {
+    label: "America/Grenada, GMT-04:00",
+    value: "America/Grenada",
+  },
+  {
+    label: "America/Guadeloupe, GMT-04:00",
+    value: "America/Guadeloupe",
+  },
+  {
+    label: "America/Guatemala, GMT-06:00",
+    value: "America/Guatemala",
+  },
+  {
+    label: "America/Guayaquil, GMT-05:00",
+    value: "America/Guayaquil",
+  },
+  {
+    label: "America/Guyana, GMT-04:00",
+    value: "America/Guyana",
+  },
+  {
+    label: "America/Halifax, GMT-03:00",
+    value: "America/Halifax",
+  },
+  {
+    label: "America/Havana, GMT-04:00",
+    value: "America/Havana",
+  },
+  {
+    label: "America/Hermosillo, GMT-07:00",
+    value: "America/Hermosillo",
+  },
+  {
+    label: "America/Indiana/Indianapolis, GMT-04:00",
+    value: "America/Indiana/Indianapolis",
+  },
+  {
+    label: "America/Indiana/Knox, GMT-05:00",
+    value: "America/Indiana/Knox",
+  },
+  {
+    label: "America/Indiana/Marengo, GMT-04:00",
+    value: "America/Indiana/Marengo",
+  },
+  {
+    label: "America/Indiana/Petersburg, GMT-04:00",
+    value: "America/Indiana/Petersburg",
+  },
+  {
+    label: "America/Indiana/Tell_City, GMT-05:00",
+    value: "America/Indiana/Tell_City",
+  },
+  {
+    label: "America/Indiana/Vevay, GMT-04:00",
+    value: "America/Indiana/Vevay",
+  },
+  {
+    label: "America/Indiana/Vincennes, GMT-04:00",
+    value: "America/Indiana/Vincennes",
+  },
+  {
+    label: "America/Indiana/Winamac, GMT-04:00",
+    value: "America/Indiana/Winamac",
+  },
+  {
+    label: "America/Indianapolis, GMT-04:00",
+    value: "America/Indianapolis",
+  },
+  {
+    label: "America/Inuvik, GMT-06:00",
+    value: "America/Inuvik",
+  },
+  {
+    label: "America/Iqaluit, GMT-04:00",
+    value: "America/Iqaluit",
+  },
+  {
+    label: "America/Jamaica, GMT-05:00",
+    value: "America/Jamaica",
+  },
+  {
+    label: "America/Jujuy, GMT-03:00",
+    value: "America/Jujuy",
+  },
+  {
+    label: "America/Juneau, GMT-08:00",
+    value: "America/Juneau",
+  },
+  {
+    label: "America/Kentucky/Louisville, GMT-04:00",
+    value: "America/Kentucky/Louisville",
+  },
+  {
+    label: "America/Kentucky/Monticello, GMT-04:00",
+    value: "America/Kentucky/Monticello",
+  },
+  {
+    label: "America/Knox_IN, GMT-05:00",
+    value: "America/Knox_IN",
+  },
+  {
+    label: "America/Kralendijk, GMT-04:00",
+    value: "America/Kralendijk",
+  },
+  {
+    label: "America/La_Paz, GMT-04:00",
+    value: "America/La_Paz",
+  },
+  {
+    label: "America/Lima, GMT-05:00",
+    value: "America/Lima",
+  },
+  {
+    label: "America/Los_Angeles, GMT-07:00",
+    value: "America/Los_Angeles",
+  },
+  {
+    label: "America/Louisville, GMT-04:00",
+    value: "America/Louisville",
+  },
+  {
+    label: "America/Lower_Princes, GMT-04:00",
+    value: "America/Lower_Princes",
+  },
+  {
+    label: "America/Maceio, GMT-03:00",
+    value: "America/Maceio",
+  },
+  {
+    label: "America/Managua, GMT-06:00",
+    value: "America/Managua",
+  },
+  {
+    label: "America/Manaus, GMT-04:00",
+    value: "America/Manaus",
+  },
+  {
+    label: "America/Marigot, GMT-04:00",
+    value: "America/Marigot",
+  },
+  {
+    label: "America/Martinique, GMT-04:00",
+    value: "America/Martinique",
+  },
+  {
+    label: "America/Matamoros, GMT-05:00",
+    value: "America/Matamoros",
+  },
+  {
+    label: "America/Mazatlan, GMT-07:00",
+    value: "America/Mazatlan",
+  },
+  {
+    label: "America/Mendoza, GMT-03:00",
+    value: "America/Mendoza",
+  },
+  {
+    label: "America/Menominee, GMT-05:00",
+    value: "America/Menominee",
+  },
+  {
+    label: "America/Merida, GMT-06:00",
+    value: "America/Merida",
+  },
+  {
+    label: "America/Metlakatla, GMT-08:00",
+    value: "America/Metlakatla",
+  },
+  {
+    label: "America/Mexico_City, GMT-06:00",
+    value: "America/Mexico_City",
+  },
+  {
+    label: "America/Miquelon, GMT-02:00",
+    value: "America/Miquelon",
+  },
+  {
+    label: "America/Moncton, GMT-03:00",
+    value: "America/Moncton",
+  },
+  {
+    label: "America/Monterrey, GMT-06:00",
+    value: "America/Monterrey",
+  },
+  {
+    label: "America/Montevideo, GMT-03:00",
+    value: "America/Montevideo",
+  },
+  {
+    label: "America/Montreal, GMT-04:00",
+    value: "America/Montreal",
+  },
+  {
+    label: "America/Montserrat, GMT-04:00",
+    value: "America/Montserrat",
+  },
+  {
+    label: "America/Nassau, GMT-04:00",
+    value: "America/Nassau",
+  },
+  {
+    label: "America/New_York, GMT-04:00",
+    value: "America/New_York",
+  },
+  {
+    label: "America/Nipigon, GMT-04:00",
+    value: "America/Nipigon",
+  },
+  {
+    label: "America/Nome, GMT-08:00",
+    value: "America/Nome",
+  },
+  {
+    label: "America/Noronha, GMT-02:00",
+    value: "America/Noronha",
+  },
+  {
+    label: "America/North_Dakota/Beulah, GMT-05:00",
+    value: "America/North_Dakota/Beulah",
+  },
+  {
+    label: "America/North_Dakota/Center, GMT-05:00",
+    value: "America/North_Dakota/Center",
+  },
+  {
+    label: "America/North_Dakota/New_Salem, GMT-05:00",
+    value: "America/North_Dakota/New_Salem",
+  },
+  {
+    label: "America/Nuuk, GMT-02:00",
+    value: "America/Nuuk",
+  },
+  {
+    label: "America/Ojinaga, GMT-05:00",
+    value: "America/Ojinaga",
+  },
+  {
+    label: "America/Panama, GMT-05:00",
+    value: "America/Panama",
+  },
+  {
+    label: "America/Pangnirtung, GMT-04:00",
+    value: "America/Pangnirtung",
+  },
+  {
+    label: "America/Paramaribo, GMT-03:00",
+    value: "America/Paramaribo",
+  },
+  {
+    label: "America/Phoenix, GMT-07:00",
+    value: "America/Phoenix",
+  },
+  {
+    label: "America/Port-au-Prince, GMT-04:00",
+    value: "America/Port-au-Prince",
+  },
+  {
+    label: "America/Port_of_Spain, GMT-04:00",
+    value: "America/Port_of_Spain",
+  },
+  {
+    label: "America/Porto_Acre, GMT-05:00",
+    value: "America/Porto_Acre",
+  },
+  {
+    label: "America/Porto_Velho, GMT-04:00",
+    value: "America/Porto_Velho",
+  },
+  {
+    label: "America/Puerto_Rico, GMT-04:00",
+    value: "America/Puerto_Rico",
+  },
+  {
+    label: "America/Punta_Arenas, GMT-03:00",
+    value: "America/Punta_Arenas",
+  },
+  {
+    label: "America/Rainy_River, GMT-05:00",
+    value: "America/Rainy_River",
+  },
+  {
+    label: "America/Rankin_Inlet, GMT-05:00",
+    value: "America/Rankin_Inlet",
+  },
+  {
+    label: "America/Recife, GMT-03:00",
+    value: "America/Recife",
+  },
+  {
+    label: "America/Regina, GMT-06:00",
+    value: "America/Regina",
+  },
+  {
+    label: "America/Resolute, GMT-05:00",
+    value: "America/Resolute",
+  },
+  {
+    label: "America/Rio_Branco, GMT-05:00",
+    value: "America/Rio_Branco",
+  },
+  {
+    label: "America/Rosario, GMT-03:00",
+    value: "America/Rosario",
+  },
+  {
+    label: "America/Santa_Isabel, GMT-07:00",
+    value: "America/Santa_Isabel",
+  },
+  {
+    label: "America/Santarem, GMT-03:00",
+    value: "America/Santarem",
+  },
+  {
+    label: "America/Santiago, GMT-04:00",
+    value: "America/Santiago",
+  },
+  {
+    label: "America/Santo_Domingo, GMT-04:00",
+    value: "America/Santo_Domingo",
+  },
+  {
+    label: "America/Sao_Paulo, GMT-03:00",
+    value: "America/Sao_Paulo",
+  },
+  {
+    label: "America/Scoresbysund, GMT",
+    value: "America/Scoresbysund",
+  },
+  {
+    label: "America/Shiprock, GMT-06:00",
+    value: "America/Shiprock",
+  },
+  {
+    label: "America/Sitka, GMT-08:00",
+    value: "America/Sitka",
+  },
+  {
+    label: "America/St_Barthelemy, GMT-04:00",
+    value: "America/St_Barthelemy",
+  },
+  {
+    label: "America/St_Johns, GMT-02:30",
+    value: "America/St_Johns",
+  },
+  {
+    label: "America/St_Kitts, GMT-04:00",
+    value: "America/St_Kitts",
+  },
+  {
+    label: "America/St_Lucia, GMT-04:00",
+    value: "America/St_Lucia",
+  },
+  {
+    label: "America/St_Thomas, GMT-04:00",
+    value: "America/St_Thomas",
+  },
+  {
+    label: "America/St_Vincent, GMT-04:00",
+    value: "America/St_Vincent",
+  },
+  {
+    label: "America/Swift_Current, GMT-06:00",
+    value: "America/Swift_Current",
+  },
+  {
+    label: "America/Tegucigalpa, GMT-06:00",
+    value: "America/Tegucigalpa",
+  },
+  {
+    label: "America/Thule, GMT-03:00",
+    value: "America/Thule",
+  },
+  {
+    label: "America/Thunder_Bay, GMT-04:00",
+    value: "America/Thunder_Bay",
+  },
+  {
+    label: "America/Tijuana, GMT-07:00",
+    value: "America/Tijuana",
+  },
+  {
+    label: "America/Toronto, GMT-04:00",
+    value: "America/Toronto",
+  },
+  {
+    label: "America/Tortola, GMT-04:00",
+    value: "America/Tortola",
+  },
+  {
+    label: "America/Vancouver, GMT-07:00",
+    value: "America/Vancouver",
+  },
+  {
+    label: "America/Virgin, GMT-04:00",
+    value: "America/Virgin",
+  },
+  {
+    label: "America/Whitehorse, GMT-07:00",
+    value: "America/Whitehorse",
+  },
+  {
+    label: "America/Winnipeg, GMT-05:00",
+    value: "America/Winnipeg",
+  },
+  {
+    label: "America/Yakutat, GMT-08:00",
+    value: "America/Yakutat",
+  },
+  {
+    label: "America/Yellowknife, GMT-06:00",
+    value: "America/Yellowknife",
+  },
+  {
+    label: "Antarctica/Casey, GMT+11:00",
+    value: "Antarctica/Casey",
+  },
+  {
+    label: "Antarctica/Davis, GMT+07:00",
+    value: "Antarctica/Davis",
+  },
+  {
+    label: "Antarctica/DumontDUrville, GMT+10:00",
+    value: "Antarctica/DumontDUrville",
+  },
+  {
+    label: "Antarctica/Macquarie, GMT+10:00",
+    value: "Antarctica/Macquarie",
+  },
+  {
+    label: "Antarctica/Mawson, GMT+05:00",
+    value: "Antarctica/Mawson",
+  },
+  {
+    label: "Antarctica/McMurdo, GMT+12:00",
+    value: "Antarctica/McMurdo",
+  },
+  {
+    label: "Antarctica/Palmer, GMT-03:00",
+    value: "Antarctica/Palmer",
+  },
+  {
+    label: "Antarctica/Rothera, GMT-03:00",
+    value: "Antarctica/Rothera",
+  },
+  {
+    label: "Antarctica/South_Pole, GMT+12:00",
+    value: "Antarctica/South_Pole",
+  },
+  {
+    label: "Antarctica/Syowa, GMT+03:00",
+    value: "Antarctica/Syowa",
+  },
+  {
+    label: "Antarctica/Troll, GMT+02:00",
+    value: "Antarctica/Troll",
+  },
+  {
+    label: "Antarctica/Vostok, GMT+06:00",
+    value: "Antarctica/Vostok",
+  },
+  {
+    label: "Arctic/Longyearbyen, GMT+02:00",
+    value: "Arctic/Longyearbyen",
+  },
+  {
+    label: "Asia/Aden, GMT+03:00",
+    value: "Asia/Aden",
+  },
+  {
+    label: "Asia/Almaty, GMT+06:00",
+    value: "Asia/Almaty",
+  },
+  {
+    label: "Asia/Amman, GMT+03:00",
+    value: "Asia/Amman",
+  },
+  {
+    label: "Asia/Anadyr, GMT+12:00",
+    value: "Asia/Anadyr",
+  },
+  {
+    label: "Asia/Aqtau, GMT+05:00",
+    value: "Asia/Aqtau",
+  },
+  {
+    label: "Asia/Aqtobe, GMT+05:00",
+    value: "Asia/Aqtobe",
+  },
+  {
+    label: "Asia/Ashgabat, GMT+05:00",
+    value: "Asia/Ashgabat",
+  },
+  {
+    label: "Asia/Ashkhabad, GMT+05:00",
+    value: "Asia/Ashkhabad",
+  },
+  {
+    label: "Asia/Atyrau, GMT+05:00",
+    value: "Asia/Atyrau",
+  },
+  {
+    label: "Asia/Baghdad, GMT+03:00",
+    value: "Asia/Baghdad",
+  },
+  {
+    label: "Asia/Bahrain, GMT+03:00",
+    value: "Asia/Bahrain",
+  },
+  {
+    label: "Asia/Baku, GMT+04:00",
+    value: "Asia/Baku",
+  },
+  {
+    label: "Asia/Bangkok, GMT+07:00",
+    value: "Asia/Bangkok",
+  },
+  {
+    label: "Asia/Barnaul, GMT+07:00",
+    value: "Asia/Barnaul",
+  },
+  {
+    label: "Asia/Beirut, GMT+03:00",
+    value: "Asia/Beirut",
+  },
+  {
+    label: "Asia/Bishkek, GMT+06:00",
+    value: "Asia/Bishkek",
+  },
+  {
+    label: "Asia/Brunei, GMT+08:00",
+    value: "Asia/Brunei",
+  },
+  {
+    label: "Asia/Calcutta, GMT+05:30",
+    value: "Asia/Calcutta",
+  },
+  {
+    label: "Asia/Chita, GMT+09:00",
+    value: "Asia/Chita",
+  },
+  {
+    label: "Asia/Choibalsan, GMT+08:00",
+    value: "Asia/Choibalsan",
+  },
+  {
+    label: "Asia/Chongqing, GMT+08:00",
+    value: "Asia/Chongqing",
+  },
+  {
+    label: "Asia/Chungking, GMT+08:00",
+    value: "Asia/Chungking",
+  },
+  {
+    label: "Asia/Colombo, GMT+05:30",
+    value: "Asia/Colombo",
+  },
+  {
+    label: "Asia/Dacca, GMT+06:00",
+    value: "Asia/Dacca",
+  },
+  {
+    label: "Asia/Damascus, GMT+03:00",
+    value: "Asia/Damascus",
+  },
+  {
+    label: "Asia/Dhaka, GMT+06:00",
+    value: "Asia/Dhaka",
+  },
+  {
+    label: "Asia/Dili, GMT+09:00",
+    value: "Asia/Dili",
+  },
+  {
+    label: "Asia/Dubai, GMT+04:00",
+    value: "Asia/Dubai",
+  },
+  {
+    label: "Asia/Dushanbe, GMT+05:00",
+    value: "Asia/Dushanbe",
+  },
+  {
+    label: "Asia/Famagusta, GMT+03:00",
+    value: "Asia/Famagusta",
+  },
+  {
+    label: "Asia/Gaza, GMT+03:00",
+    value: "Asia/Gaza",
+  },
+  {
+    label: "Asia/Harbin, GMT+08:00",
+    value: "Asia/Harbin",
+  },
+  {
+    label: "Asia/Hebron, GMT+03:00",
+    value: "Asia/Hebron",
+  },
+  {
+    label: "Asia/Ho_Chi_Minh, GMT+07:00",
+    value: "Asia/Ho_Chi_Minh",
+  },
+  {
+    label: "Asia/Hong_Kong, GMT+08:00",
+    value: "Asia/Hong_Kong",
+  },
+  {
+    label: "Asia/Hovd, GMT+07:00",
+    value: "Asia/Hovd",
+  },
+  {
+    label: "Asia/Irkutsk, GMT+08:00",
+    value: "Asia/Irkutsk",
+  },
+  {
+    label: "Asia/Istanbul, GMT+03:00",
+    value: "Asia/Istanbul",
+  },
+  {
+    label: "Asia/Jakarta, GMT+07:00",
+    value: "Asia/Jakarta",
+  },
+  {
+    label: "Asia/Jayapura, GMT+09:00",
+    value: "Asia/Jayapura",
+  },
+  {
+    label: "Asia/Jerusalem, GMT+03:00",
+    value: "Asia/Jerusalem",
+  },
+  {
+    label: "Asia/Kabul, GMT+04:30",
+    value: "Asia/Kabul",
+  },
+  {
+    label: "Asia/Kamchatka, GMT+12:00",
+    value: "Asia/Kamchatka",
+  },
+  {
+    label: "Asia/Karachi, GMT+05:00",
+    value: "Asia/Karachi",
+  },
+  {
+    label: "Asia/Kashgar, GMT+06:00",
+    value: "Asia/Kashgar",
+  },
+  {
+    label: "Asia/Kathmandu, GMT+05:45",
+    value: "Asia/Kathmandu",
+  },
+  {
+    label: "Asia/Katmandu, GMT+05:45",
+    value: "Asia/Katmandu",
+  },
+  {
+    label: "Asia/Khandyga, GMT+09:00",
+    value: "Asia/Khandyga",
+  },
+  {
+    label: "Asia/Kolkata, GMT+05:30",
+    value: "Asia/Kolkata",
+  },
+  {
+    label: "Asia/Krasnoyarsk, GMT+07:00",
+    value: "Asia/Krasnoyarsk",
+  },
+  {
+    label: "Asia/Kuala_Lumpur, GMT+08:00",
+    value: "Asia/Kuala_Lumpur",
+  },
+  {
+    label: "Asia/Kuching, GMT+08:00",
+    value: "Asia/Kuching",
+  },
+  {
+    label: "Asia/Kuwait, GMT+03:00",
+    value: "Asia/Kuwait",
+  },
+  {
+    label: "Asia/Macao, GMT+08:00",
+    value: "Asia/Macao",
+  },
+  {
+    label: "Asia/Macau, GMT+08:00",
+    value: "Asia/Macau",
+  },
+  {
+    label: "Asia/Magadan, GMT+11:00",
+    value: "Asia/Magadan",
+  },
+  {
+    label: "Asia/Makassar, GMT+08:00",
+    value: "Asia/Makassar",
+  },
+  {
+    label: "Asia/Manila, GMT+08:00",
+    value: "Asia/Manila",
+  },
+  {
+    label: "Asia/Muscat, GMT+04:00",
+    value: "Asia/Muscat",
+  },
+  {
+    label: "Asia/Nicosia, GMT+03:00",
+    value: "Asia/Nicosia",
+  },
+  {
+    label: "Asia/Novokuznetsk, GMT+07:00",
+    value: "Asia/Novokuznetsk",
+  },
+  {
+    label: "Asia/Novosibirsk, GMT+07:00",
+    value: "Asia/Novosibirsk",
+  },
+  {
+    label: "Asia/Omsk, GMT+06:00",
+    value: "Asia/Omsk",
+  },
+  {
+    label: "Asia/Oral, GMT+05:00",
+    value: "Asia/Oral",
+  },
+  {
+    label: "Asia/Phnom_Penh, GMT+07:00",
+    value: "Asia/Phnom_Penh",
+  },
+  {
+    label: "Asia/Pontianak, GMT+07:00",
+    value: "Asia/Pontianak",
+  },
+  {
+    label: "Asia/Pyongyang, GMT+09:00",
+    value: "Asia/Pyongyang",
+  },
+  {
+    label: "Asia/Qatar, GMT+03:00",
+    value: "Asia/Qatar",
+  },
+  {
+    label: "Asia/Qostanay, GMT+06:00",
+    value: "Asia/Qostanay",
+  },
+  {
+    label: "Asia/Qyzylorda, GMT+05:00",
+    value: "Asia/Qyzylorda",
+  },
+  {
+    label: "Asia/Rangoon, GMT+06:30",
+    value: "Asia/Rangoon",
+  },
+  {
+    label: "Asia/Riyadh, GMT+03:00",
+    value: "Asia/Riyadh",
+  },
+  {
+    label: "Asia/Saigon, GMT+07:00",
+    value: "Asia/Saigon",
+  },
+  {
+    label: "Asia/Sakhalin, GMT+11:00",
+    value: "Asia/Sakhalin",
+  },
+  {
+    label: "Asia/Samarkand, GMT+05:00",
+    value: "Asia/Samarkand",
+  },
+  {
+    label: "Asia/Seoul, GMT+09:00",
+    value: "Asia/Seoul",
+  },
+  {
+    label: "Asia/Shanghai, GMT+08:00",
+    value: "Asia/Shanghai",
+  },
+  {
+    label: "Asia/Singapore, GMT+08:00",
+    value: "Asia/Singapore",
+  },
+  {
+    label: "Asia/Srednekolymsk, GMT+11:00",
+    value: "Asia/Srednekolymsk",
+  },
+  {
+    label: "Asia/Taipei, GMT+08:00",
+    value: "Asia/Taipei",
+  },
+  {
+    label: "Asia/Tashkent, GMT+05:00",
+    value: "Asia/Tashkent",
+  },
+  {
+    label: "Asia/Tbilisi, GMT+04:00",
+    value: "Asia/Tbilisi",
+  },
+  {
+    label: "Asia/Tehran, GMT+03:30",
+    value: "Asia/Tehran",
+  },
+  {
+    label: "Asia/Tel_Aviv, GMT+03:00",
+    value: "Asia/Tel_Aviv",
+  },
+  {
+    label: "Asia/Thimbu, GMT+06:00",
+    value: "Asia/Thimbu",
+  },
+  {
+    label: "Asia/Thimphu, GMT+06:00",
+    value: "Asia/Thimphu",
+  },
+  {
+    label: "Asia/Tokyo, GMT+09:00",
+    value: "Asia/Tokyo",
+  },
+  {
+    label: "Asia/Tomsk, GMT+07:00",
+    value: "Asia/Tomsk",
+  },
+  {
+    label: "Asia/Ujung_Pandang, GMT+08:00",
+    value: "Asia/Ujung_Pandang",
+  },
+  {
+    label: "Asia/Ulaanbaatar, GMT+08:00",
+    value: "Asia/Ulaanbaatar",
+  },
+  {
+    label: "Asia/Ulan_Bator, GMT+08:00",
+    value: "Asia/Ulan_Bator",
+  },
+  {
+    label: "Asia/Urumqi, GMT+06:00",
+    value: "Asia/Urumqi",
+  },
+  {
+    label: "Asia/Ust-Nera, GMT+10:00",
+    value: "Asia/Ust-Nera",
+  },
+  {
+    label: "Asia/Vientiane, GMT+07:00",
+    value: "Asia/Vientiane",
+  },
+  {
+    label: "Asia/Vladivostok, GMT+10:00",
+    value: "Asia/Vladivostok",
+  },
+  {
+    label: "Asia/Yakutsk, GMT+09:00",
+    value: "Asia/Yakutsk",
+  },
+  {
+    label: "Asia/Yangon, GMT+06:30",
+    value: "Asia/Yangon",
+  },
+  {
+    label: "Asia/Yekaterinburg, GMT+05:00",
+    value: "Asia/Yekaterinburg",
+  },
+  {
+    label: "Asia/Yerevan, GMT+04:00",
+    value: "Asia/Yerevan",
+  },
+  {
+    label: "Atlantic/Azores, GMT",
+    value: "Atlantic/Azores",
+  },
+  {
+    label: "Atlantic/Bermuda, GMT-03:00",
+    value: "Atlantic/Bermuda",
+  },
+  {
+    label: "Atlantic/Canary, GMT+01:00",
+    value: "Atlantic/Canary",
+  },
+  {
+    label: "Atlantic/Cape_Verde, GMT-01:00",
+    value: "Atlantic/Cape_Verde",
+  },
+  {
+    label: "Atlantic/Faeroe, GMT+01:00",
+    value: "Atlantic/Faeroe",
+  },
+  {
+    label: "Atlantic/Faroe, GMT+01:00",
+    value: "Atlantic/Faroe",
+  },
+  {
+    label: "Atlantic/Jan_Mayen, GMT+02:00",
+    value: "Atlantic/Jan_Mayen",
+  },
+  {
+    label: "Atlantic/Madeira, GMT+01:00",
+    value: "Atlantic/Madeira",
+  },
+  {
+    label: "Atlantic/Reykjavik, GMT",
+    value: "Atlantic/Reykjavik",
+  },
+  {
+    label: "Atlantic/South_Georgia, GMT-02:00",
+    value: "Atlantic/South_Georgia",
+  },
+  {
+    label: "Atlantic/St_Helena, GMT",
+    value: "Atlantic/St_Helena",
+  },
+  {
+    label: "Atlantic/Stanley, GMT-03:00",
+    value: "Atlantic/Stanley",
+  },
+  {
+    label: "Australia/ACT, GMT+10:00",
+    value: "Australia/ACT",
+  },
+  {
+    label: "Australia/Adelaide, GMT+09:30",
+    value: "Australia/Adelaide",
+  },
+  {
+    label: "Australia/Brisbane, GMT+10:00",
+    value: "Australia/Brisbane",
+  },
+  {
+    label: "Australia/Broken_Hill, GMT+09:30",
+    value: "Australia/Broken_Hill",
+  },
+  {
+    label: "Australia/Canberra, GMT+10:00",
+    value: "Australia/Canberra",
+  },
+  {
+    label: "Australia/Currie, GMT+10:00",
+    value: "Australia/Currie",
+  },
+  {
+    label: "Australia/Darwin, GMT+09:30",
+    value: "Australia/Darwin",
+  },
+  {
+    label: "Australia/Eucla, GMT+08:45",
+    value: "Australia/Eucla",
+  },
+  {
+    label: "Australia/Hobart, GMT+10:00",
+    value: "Australia/Hobart",
+  },
+  {
+    label: "Australia/LHI, GMT+10:30",
+    value: "Australia/LHI",
+  },
+  {
+    label: "Australia/Lindeman, GMT+10:00",
+    value: "Australia/Lindeman",
+  },
+  {
+    label: "Australia/Lord_Howe, GMT+10:30",
+    value: "Australia/Lord_Howe",
+  },
+  {
+    label: "Australia/Melbourne, GMT+10:00",
+    value: "Australia/Melbourne",
+  },
+  {
+    label: "Australia/NSW, GMT+10:00",
+    value: "Australia/NSW",
+  },
+  {
+    label: "Australia/North, GMT+09:30",
+    value: "Australia/North",
+  },
+  {
+    label: "Australia/Perth, GMT+08:00",
+    value: "Australia/Perth",
+  },
+  {
+    label: "Australia/Queensland, GMT+10:00",
+    value: "Australia/Queensland",
+  },
+  {
+    label: "Australia/South, GMT+09:30",
+    value: "Australia/South",
+  },
+  {
+    label: "Australia/Sydney, GMT+10:00",
+    value: "Australia/Sydney",
+  },
+  {
+    label: "Australia/Tasmania, GMT+10:00",
+    value: "Australia/Tasmania",
+  },
+  {
+    label: "Australia/Victoria, GMT+10:00",
+    value: "Australia/Victoria",
+  },
+  {
+    label: "Australia/West, GMT+08:00",
+    value: "Australia/West",
+  },
+  {
+    label: "Australia/Yancowinna, GMT+09:30",
+    value: "Australia/Yancowinna",
+  },
+  {
+    label: "Brazil/Acre, GMT-05:00",
+    value: "Brazil/Acre",
+  },
+  {
+    label: "Brazil/DeNoronha, GMT-02:00",
+    value: "Brazil/DeNoronha",
+  },
+  {
+    label: "Brazil/East, GMT-03:00",
+    value: "Brazil/East",
+  },
+  {
+    label: "Brazil/West, GMT-04:00",
+    value: "Brazil/West",
+  },
+  {
+    label: "CET, GMT+02:00",
+    value: "CET",
+  },
+  {
+    label: "CST6CDT, GMT-05:00",
+    value: "CST6CDT",
+  },
+  {
+    label: "Canada/Atlantic, GMT-03:00",
+    value: "Canada/Atlantic",
+  },
+  {
+    label: "Canada/Central, GMT-05:00",
+    value: "Canada/Central",
+  },
+  {
+    label: "Canada/Eastern, GMT-04:00",
+    value: "Canada/Eastern",
+  },
+  {
+    label: "Canada/Mountain, GMT-06:00",
+    value: "Canada/Mountain",
+  },
+  {
+    label: "Canada/Newfoundland, GMT-02:30",
+    value: "Canada/Newfoundland",
+  },
+  {
+    label: "Canada/Pacific, GMT-07:00",
+    value: "Canada/Pacific",
+  },
+  {
+    label: "Canada/Saskatchewan, GMT-06:00",
+    value: "Canada/Saskatchewan",
+  },
+  {
+    label: "Canada/Yukon, GMT-07:00",
+    value: "Canada/Yukon",
+  },
+  {
+    label: "Chile/Continental, GMT-04:00",
+    value: "Chile/Continental",
+  },
+  {
+    label: "Chile/EasterIsland, GMT-06:00",
+    value: "Chile/EasterIsland",
+  },
+  {
+    label: "Cuba, GMT-04:00",
+    value: "Cuba",
+  },
+  {
+    label: "EET, GMT+03:00",
+    value: "EET",
+  },
+  {
+    label: "EST, GMT-05:00",
+    value: "EST",
+  },
+  {
+    label: "EST5EDT, GMT-04:00",
+    value: "EST5EDT",
+  },
+  {
+    label: "Egypt, GMT+03:00",
+    value: "Egypt",
+  },
+  {
+    label: "Eire, GMT+01:00",
+    value: "Eire",
+  },
+  {
+    label: "Etc/GMT, GMT",
+    value: "Etc/GMT",
+  },
+  {
+    label: "Etc/GMT+0, GMT",
+    value: "Etc/GMT+0",
+  },
+  {
+    label: "Etc/GMT+1, GMT-01:00",
+    value: "Etc/GMT+1",
+  },
+  {
+    label: "Etc/GMT+10, GMT-10:00",
+    value: "Etc/GMT+10",
+  },
+  {
+    label: "Etc/GMT+11, GMT-11:00",
+    value: "Etc/GMT+11",
+  },
+  {
+    label: "Etc/GMT+12, GMT-12:00",
+    value: "Etc/GMT+12",
+  },
+  {
+    label: "Etc/GMT+2, GMT-02:00",
+    value: "Etc/GMT+2",
+  },
+  {
+    label: "Etc/GMT+3, GMT-03:00",
+    value: "Etc/GMT+3",
+  },
+  {
+    label: "Etc/GMT+4, GMT-04:00",
+    value: "Etc/GMT+4",
+  },
+  {
+    label: "Etc/GMT+5, GMT-05:00",
+    value: "Etc/GMT+5",
+  },
+  {
+    label: "Etc/GMT+6, GMT-06:00",
+    value: "Etc/GMT+6",
+  },
+  {
+    label: "Etc/GMT+7, GMT-07:00",
+    value: "Etc/GMT+7",
+  },
+  {
+    label: "Etc/GMT+8, GMT-08:00",
+    value: "Etc/GMT+8",
+  },
+  {
+    label: "Etc/GMT+9, GMT-09:00",
+    value: "Etc/GMT+9",
+  },
+  {
+    label: "Etc/GMT-0, GMT",
+    value: "Etc/GMT-0",
+  },
+  {
+    label: "Etc/GMT-1, GMT+01:00",
+    value: "Etc/GMT-1",
+  },
+  {
+    label: "Etc/GMT-10, GMT+10:00",
+    value: "Etc/GMT-10",
+  },
+  {
+    label: "Etc/GMT-11, GMT+11:00",
+    value: "Etc/GMT-11",
+  },
+  {
+    label: "Etc/GMT-12, GMT+12:00",
+    value: "Etc/GMT-12",
+  },
+  {
+    label: "Etc/GMT-13, GMT+13:00",
+    value: "Etc/GMT-13",
+  },
+  {
+    label: "Etc/GMT-14, GMT+14:00",
+    value: "Etc/GMT-14",
+  },
+  {
+    label: "Etc/GMT-2, GMT+02:00",
+    value: "Etc/GMT-2",
+  },
+  {
+    label: "Etc/GMT-3, GMT+03:00",
+    value: "Etc/GMT-3",
+  },
+  {
+    label: "Etc/GMT-4, GMT+04:00",
+    value: "Etc/GMT-4",
+  },
+  {
+    label: "Etc/GMT-5, GMT+05:00",
+    value: "Etc/GMT-5",
+  },
+  {
+    label: "Etc/GMT-6, GMT+06:00",
+    value: "Etc/GMT-6",
+  },
+  {
+    label: "Etc/GMT-7, GMT+07:00",
+    value: "Etc/GMT-7",
+  },
+  {
+    label: "Etc/GMT-8, GMT+08:00",
+    value: "Etc/GMT-8",
+  },
+  {
+    label: "Etc/GMT-9, GMT+09:00",
+    value: "Etc/GMT-9",
+  },
+  {
+    label: "Etc/GMT0, GMT",
+    value: "Etc/GMT0",
+  },
+  {
+    label: "Etc/Greenwich, GMT",
+    value: "Etc/Greenwich",
+  },
+  {
+    label: "Etc/UCT, GMT",
+    value: "Etc/UCT",
+  },
+  {
+    label: "Etc/UTC, GMT",
+    value: "Etc/UTC",
+  },
+  {
+    label: "Etc/Universal, GMT",
+    value: "Etc/Universal",
+  },
+  {
+    label: "Etc/Zulu, GMT",
+    value: "Etc/Zulu",
+  },
+  {
+    label: "Europe/Amsterdam, GMT+02:00",
+    value: "Europe/Amsterdam",
+  },
+  {
+    label: "Europe/Andorra, GMT+02:00",
+    value: "Europe/Andorra",
+  },
+  {
+    label: "Europe/Astrakhan, GMT+04:00",
+    value: "Europe/Astrakhan",
+  },
+  {
+    label: "Europe/Athens, GMT+03:00",
+    value: "Europe/Athens",
+  },
+  {
+    label: "Europe/Belfast, GMT+01:00",
+    value: "Europe/Belfast",
+  },
+  {
+    label: "Europe/Belgrade, GMT+02:00",
+    value: "Europe/Belgrade",
+  },
+  {
+    label: "Europe/Berlin, GMT+02:00",
+    value: "Europe/Berlin",
+  },
+  {
+    label: "Europe/Bratislava, GMT+02:00",
+    value: "Europe/Bratislava",
+  },
+  {
+    label: "Europe/Brussels, GMT+02:00",
+    value: "Europe/Brussels",
+  },
+  {
+    label: "Europe/Bucharest, GMT+03:00",
+    value: "Europe/Bucharest",
+  },
+  {
+    label: "Europe/Budapest, GMT+02:00",
+    value: "Europe/Budapest",
+  },
+  {
+    label: "Europe/Busingen, GMT+02:00",
+    value: "Europe/Busingen",
+  },
+  {
+    label: "Europe/Chisinau, GMT+03:00",
+    value: "Europe/Chisinau",
+  },
+  {
+    label: "Europe/Copenhagen, GMT+02:00",
+    value: "Europe/Copenhagen",
+  },
+  {
+    label: "Europe/Dublin, GMT+01:00",
+    value: "Europe/Dublin",
+  },
+  {
+    label: "Europe/Gibraltar, GMT+02:00",
+    value: "Europe/Gibraltar",
+  },
+  {
+    label: "Europe/Guernsey, GMT+01:00",
+    value: "Europe/Guernsey",
+  },
+  {
+    label: "Europe/Helsinki, GMT+03:00",
+    value: "Europe/Helsinki",
+  },
+  {
+    label: "Europe/Isle_of_Man, GMT+01:00",
+    value: "Europe/Isle_of_Man",
+  },
+  {
+    label: "Europe/Istanbul, GMT+03:00",
+    value: "Europe/Istanbul",
+  },
+  {
+    label: "Europe/Jersey, GMT+01:00",
+    value: "Europe/Jersey",
+  },
+  {
+    label: "Europe/Kaliningrad, GMT+02:00",
+    value: "Europe/Kaliningrad",
+  },
+  {
+    label: "Europe/Kiev, GMT+03:00",
+    value: "Europe/Kiev",
+  },
+  {
+    label: "Europe/Kirov, GMT+03:00",
+    value: "Europe/Kirov",
+  },
+  {
+    label: "Europe/Kyiv, GMT+03:00",
+    value: "Europe/Kyiv",
+  },
+  {
+    label: "Europe/Lisbon, GMT+01:00",
+    value: "Europe/Lisbon",
+  },
+  {
+    label: "Europe/Ljubljana, GMT+02:00",
+    value: "Europe/Ljubljana",
+  },
+  {
+    label: "Europe/London, GMT+01:00",
+    value: "Europe/London",
+  },
+  {
+    label: "Europe/Luxembourg, GMT+02:00",
+    value: "Europe/Luxembourg",
+  },
+  {
+    label: "Europe/Madrid, GMT+02:00",
+    value: "Europe/Madrid",
+  },
+  {
+    label: "Europe/Malta, GMT+02:00",
+    value: "Europe/Malta",
+  },
+  {
+    label: "Europe/Mariehamn, GMT+03:00",
+    value: "Europe/Mariehamn",
+  },
+  {
+    label: "Europe/Minsk, GMT+03:00",
+    value: "Europe/Minsk",
+  },
+  {
+    label: "Europe/Monaco, GMT+02:00",
+    value: "Europe/Monaco",
+  },
+  {
+    label: "Europe/Moscow, GMT+03:00",
+    value: "Europe/Moscow",
+  },
+  {
+    label: "Europe/Nicosia, GMT+03:00",
+    value: "Europe/Nicosia",
+  },
+  {
+    label: "Europe/Oslo, GMT+02:00",
+    value: "Europe/Oslo",
+  },
+  {
+    label: "Europe/Paris, GMT+02:00",
+    value: "Europe/Paris",
+  },
+  {
+    label: "Europe/Podgorica, GMT+02:00",
+    value: "Europe/Podgorica",
+  },
+  {
+    label: "Europe/Prague, GMT+02:00",
+    value: "Europe/Prague",
+  },
+  {
+    label: "Europe/Riga, GMT+03:00",
+    value: "Europe/Riga",
+  },
+  {
+    label: "Europe/Rome, GMT+02:00",
+    value: "Europe/Rome",
+  },
+  {
+    label: "Europe/Samara, GMT+04:00",
+    value: "Europe/Samara",
+  },
+  {
+    label: "Europe/San_Marino, GMT+02:00",
+    value: "Europe/San_Marino",
+  },
+  {
+    label: "Europe/Sarajevo, GMT+02:00",
+    value: "Europe/Sarajevo",
+  },
+  {
+    label: "Europe/Saratov, GMT+04:00",
+    value: "Europe/Saratov",
+  },
+  {
+    label: "Europe/Simferopol, GMT+03:00",
+    value: "Europe/Simferopol",
+  },
+  {
+    label: "Europe/Skopje, GMT+02:00",
+    value: "Europe/Skopje",
+  },
+  {
+    label: "Europe/Sofia, GMT+03:00",
+    value: "Europe/Sofia",
+  },
+  {
+    label: "Europe/Stockholm, GMT+02:00",
+    value: "Europe/Stockholm",
+  },
+  {
+    label: "Europe/Tallinn, GMT+03:00",
+    value: "Europe/Tallinn",
+  },
+  {
+    label: "Europe/Tirane, GMT+02:00",
+    value: "Europe/Tirane",
+  },
+  {
+    label: "Europe/Tiraspol, GMT+03:00",
+    value: "Europe/Tiraspol",
+  },
+  {
+    label: "Europe/Ulyanovsk, GMT+04:00",
+    value: "Europe/Ulyanovsk",
+  },
+  {
+    label: "Europe/Uzhgorod, GMT+03:00",
+    value: "Europe/Uzhgorod",
+  },
+  {
+    label: "Europe/Vaduz, GMT+02:00",
+    value: "Europe/Vaduz",
+  },
+  {
+    label: "Europe/Vatican, GMT+02:00",
+    value: "Europe/Vatican",
+  },
+  {
+    label: "Europe/Vienna, GMT+02:00",
+    value: "Europe/Vienna",
+  },
+  {
+    label: "Europe/Vilnius, GMT+03:00",
+    value: "Europe/Vilnius",
+  },
+  {
+    label: "Europe/Volgograd, GMT+03:00",
+    value: "Europe/Volgograd",
+  },
+  {
+    label: "Europe/Warsaw, GMT+02:00",
+    value: "Europe/Warsaw",
+  },
+  {
+    label: "Europe/Zagreb, GMT+02:00",
+    value: "Europe/Zagreb",
+  },
+  {
+    label: "Europe/Zaporozhye, GMT+03:00",
+    value: "Europe/Zaporozhye",
+  },
+  {
+    label: "Europe/Zurich, GMT+02:00",
+    value: "Europe/Zurich",
+  },
+  {
+    label: "GB, GMT+01:00",
+    value: "GB",
+  },
+  {
+    label: "GB-Eire, GMT+01:00",
+    value: "GB-Eire",
+  },
+  {
+    label: "GMT, GMT",
+    value: "GMT",
+  },
+  {
+    label: "GMT+0, GMT",
+    value: "GMT+0",
+  },
+  {
+    label: "GMT-0, GMT",
+    value: "GMT-0",
+  },
+  {
+    label: "GMT0, GMT",
+    value: "GMT0",
+  },
+  {
+    label: "Greenwich, GMT",
+    value: "Greenwich",
+  },
+  {
+    label: "HST, GMT-10:00",
+    value: "HST",
+  },
+  {
+    label: "Hongkong, GMT+08:00",
+    value: "Hongkong",
+  },
+  {
+    label: "Iceland, GMT",
+    value: "Iceland",
+  },
+  {
+    label: "Indian/Antananarivo, GMT+03:00",
+    value: "Indian/Antananarivo",
+  },
+  {
+    label: "Indian/Chagos, GMT+06:00",
+    value: "Indian/Chagos",
+  },
+  {
+    label: "Indian/Christmas, GMT+07:00",
+    value: "Indian/Christmas",
+  },
+  {
+    label: "Indian/Cocos, GMT+06:30",
+    value: "Indian/Cocos",
+  },
+  {
+    label: "Indian/Comoro, GMT+03:00",
+    value: "Indian/Comoro",
+  },
+  {
+    label: "Indian/Kerguelen, GMT+05:00",
+    value: "Indian/Kerguelen",
+  },
+  {
+    label: "Indian/Mahe, GMT+04:00",
+    value: "Indian/Mahe",
+  },
+  {
+    label: "Indian/Maldives, GMT+05:00",
+    value: "Indian/Maldives",
+  },
+  {
+    label: "Indian/Mauritius, GMT+04:00",
+    value: "Indian/Mauritius",
+  },
+  {
+    label: "Indian/Mayotte, GMT+03:00",
+    value: "Indian/Mayotte",
+  },
+  {
+    label: "Indian/Reunion, GMT+04:00",
+    value: "Indian/Reunion",
+  },
+  {
+    label: "Iran, GMT+03:30",
+    value: "Iran",
+  },
+  {
+    label: "Israel, GMT+03:00",
+    value: "Israel",
+  },
+  {
+    label: "Jamaica, GMT-05:00",
+    value: "Jamaica",
+  },
+  {
+    label: "Japan, GMT+09:00",
+    value: "Japan",
+  },
+  {
+    label: "Kwajalein, GMT+12:00",
+    value: "Kwajalein",
+  },
+  {
+    label: "Libya, GMT+02:00",
+    value: "Libya",
+  },
+  {
+    label: "MET, GMT+02:00",
+    value: "MET",
+  },
+  {
+    label: "MST, GMT-07:00",
+    value: "MST",
+  },
+  {
+    label: "MST7MDT, GMT-06:00",
+    value: "MST7MDT",
+  },
+  {
+    label: "Mexico/BajaNorte, GMT-07:00",
+    value: "Mexico/BajaNorte",
+  },
+  {
+    label: "Mexico/BajaSur, GMT-07:00",
+    value: "Mexico/BajaSur",
+  },
+  {
+    label: "Mexico/General, GMT-06:00",
+    value: "Mexico/General",
+  },
+  {
+    label: "NZ, GMT+12:00",
+    value: "NZ",
+  },
+  {
+    label: "NZ-CHAT, GMT+12:45",
+    value: "NZ-CHAT",
+  },
+  {
+    label: "Navajo, GMT-06:00",
+    value: "Navajo",
+  },
+  {
+    label: "PRC, GMT+08:00",
+    value: "PRC",
+  },
+  {
+    label: "PST8PDT, GMT-07:00",
+    value: "PST8PDT",
+  },
+  {
+    label: "Pacific/Apia, GMT+13:00",
+    value: "Pacific/Apia",
+  },
+  {
+    label: "Pacific/Auckland, GMT+12:00",
+    value: "Pacific/Auckland",
+  },
+  {
+    label: "Pacific/Bougainville, GMT+11:00",
+    value: "Pacific/Bougainville",
+  },
+  {
+    label: "Pacific/Chatham, GMT+12:45",
+    value: "Pacific/Chatham",
+  },
+  {
+    label: "Pacific/Chuuk, GMT+10:00",
+    value: "Pacific/Chuuk",
+  },
+  {
+    label: "Pacific/Easter, GMT-06:00",
+    value: "Pacific/Easter",
+  },
+  {
+    label: "Pacific/Efate, GMT+11:00",
+    value: "Pacific/Efate",
+  },
+  {
+    label: "Pacific/Enderbury, GMT+13:00",
+    value: "Pacific/Enderbury",
+  },
+  {
+    label: "Pacific/Fakaofo, GMT+13:00",
+    value: "Pacific/Fakaofo",
+  },
+  {
+    label: "Pacific/Fiji, GMT+12:00",
+    value: "Pacific/Fiji",
+  },
+  {
+    label: "Pacific/Funafuti, GMT+12:00",
+    value: "Pacific/Funafuti",
+  },
+  {
+    label: "Pacific/Galapagos, GMT-06:00",
+    value: "Pacific/Galapagos",
+  },
+  {
+    label: "Pacific/Gambier, GMT-09:00",
+    value: "Pacific/Gambier",
+  },
+  {
+    label: "Pacific/Guadalcanal, GMT+11:00",
+    value: "Pacific/Guadalcanal",
+  },
+  {
+    label: "Pacific/Guam, GMT+10:00",
+    value: "Pacific/Guam",
+  },
+  {
+    label: "Pacific/Honolulu, GMT-10:00",
+    value: "Pacific/Honolulu",
+  },
+  {
+    label: "Pacific/Johnston, GMT-10:00",
+    value: "Pacific/Johnston",
+  },
+  {
+    label: "Pacific/Kanton, GMT+13:00",
+    value: "Pacific/Kanton",
+  },
+  {
+    label: "Pacific/Kiritimati, GMT+14:00",
+    value: "Pacific/Kiritimati",
+  },
+  {
+    label: "Pacific/Kosrae, GMT+11:00",
+    value: "Pacific/Kosrae",
+  },
+  {
+    label: "Pacific/Kwajalein, GMT+12:00",
+    value: "Pacific/Kwajalein",
+  },
+  {
+    label: "Pacific/Majuro, GMT+12:00",
+    value: "Pacific/Majuro",
+  },
+  {
+    label: "Pacific/Marquesas, GMT-09:30",
+    value: "Pacific/Marquesas",
+  },
+  {
+    label: "Pacific/Midway, GMT-11:00",
+    value: "Pacific/Midway",
+  },
+  {
+    label: "Pacific/Nauru, GMT+12:00",
+    value: "Pacific/Nauru",
+  },
+  {
+    label: "Pacific/Niue, GMT-11:00",
+    value: "Pacific/Niue",
+  },
+  {
+    label: "Pacific/Norfolk, GMT+11:00",
+    value: "Pacific/Norfolk",
+  },
+  {
+    label: "Pacific/Noumea, GMT+11:00",
+    value: "Pacific/Noumea",
+  },
+  {
+    label: "Pacific/Pago_Pago, GMT-11:00",
+    value: "Pacific/Pago_Pago",
+  },
+  {
+    label: "Pacific/Palau, GMT+09:00",
+    value: "Pacific/Palau",
+  },
+  {
+    label: "Pacific/Pitcairn, GMT-08:00",
+    value: "Pacific/Pitcairn",
+  },
+  {
+    label: "Pacific/Pohnpei, GMT+11:00",
+    value: "Pacific/Pohnpei",
+  },
+  {
+    label: "Pacific/Ponape, GMT+11:00",
+    value: "Pacific/Ponape",
+  },
+  {
+    label: "Pacific/Port_Moresby, GMT+10:00",
+    value: "Pacific/Port_Moresby",
+  },
+  {
+    label: "Pacific/Rarotonga, GMT-10:00",
+    value: "Pacific/Rarotonga",
+  },
+  {
+    label: "Pacific/Saipan, GMT+10:00",
+    value: "Pacific/Saipan",
+  },
+  {
+    label: "Pacific/Samoa, GMT-11:00",
+    value: "Pacific/Samoa",
+  },
+  {
+    label: "Pacific/Tahiti, GMT-10:00",
+    value: "Pacific/Tahiti",
+  },
+  {
+    label: "Pacific/Tarawa, GMT+12:00",
+    value: "Pacific/Tarawa",
+  },
+  {
+    label: "Pacific/Tongatapu, GMT+13:00",
+    value: "Pacific/Tongatapu",
+  },
+  {
+    label: "Pacific/Truk, GMT+10:00",
+    value: "Pacific/Truk",
+  },
+  {
+    label: "Pacific/Wake, GMT+12:00",
+    value: "Pacific/Wake",
+  },
+  {
+    label: "Pacific/Wallis, GMT+12:00",
+    value: "Pacific/Wallis",
+  },
+  {
+    label: "Pacific/Yap, GMT+10:00",
+    value: "Pacific/Yap",
+  },
+  {
+    label: "Poland, GMT+02:00",
+    value: "Poland",
+  },
+  {
+    label: "Portugal, GMT+01:00",
+    value: "Portugal",
+  },
+  {
+    label: "ROC, GMT+08:00",
+    value: "ROC",
+  },
+  {
+    label: "ROK, GMT+09:00",
+    value: "ROK",
+  },
+  {
+    label: "Singapore, GMT+08:00",
+    value: "Singapore",
+  },
+  {
+    label: "Turkey, GMT+03:00",
+    value: "Turkey",
+  },
+  {
+    label: "UCT, GMT",
+    value: "UCT",
+  },
+  {
+    label: "US/Alaska, GMT-08:00",
+    value: "US/Alaska",
+  },
+  {
+    label: "US/Aleutian, GMT-09:00",
+    value: "US/Aleutian",
+  },
+  {
+    label: "US/Arizona, GMT-07:00",
+    value: "US/Arizona",
+  },
+  {
+    label: "US/Central, GMT-05:00",
+    value: "US/Central",
+  },
+  {
+    label: "US/East-Indiana, GMT-04:00",
+    value: "US/East-Indiana",
+  },
+  {
+    label: "US/Eastern, GMT-04:00",
+    value: "US/Eastern",
+  },
+  {
+    label: "US/Hawaii, GMT-10:00",
+    value: "US/Hawaii",
+  },
+  {
+    label: "US/Indiana-Starke, GMT-05:00",
+    value: "US/Indiana-Starke",
+  },
+  {
+    label: "US/Michigan, GMT-04:00",
+    value: "US/Michigan",
+  },
+  {
+    label: "US/Mountain, GMT-06:00",
+    value: "US/Mountain",
+  },
+  {
+    label: "US/Pacific, GMT-07:00",
+    value: "US/Pacific",
+  },
+  {
+    label: "US/Samoa, GMT-11:00",
+    value: "US/Samoa",
+  },
+  {
+    label: "UTC, GMT",
+    value: "UTC",
+  },
+  {
+    label: "Universal, GMT",
+    value: "Universal",
+  },
+  {
+    label: "W-SU, GMT+03:00",
+    value: "W-SU",
+  },
+  {
+    label: "WET, GMT+01:00",
+    value: "WET",
+  },
+  {
+    label: "Zulu, GMT",
+    value: "Zulu",
+  },
+];
diff --git a/apps/app/pages/[workspaceSlug]/me/profile/index.tsx b/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
index 4ea92d49d..6c0af1bc2 100644
--- a/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
@@ -14,7 +14,14 @@ import SettingsNavbar from "layouts/settings-navbar";
 // components
 import { ImagePickerPopover, ImageUploadModal } from "components/core";
 // ui
-import { CustomSelect, DangerButton, Input, SecondaryButton, Spinner } from "components/ui";
+import {
+  CustomSearchSelect,
+  CustomSelect,
+  DangerButton,
+  Input,
+  SecondaryButton,
+  Spinner,
+} from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { UserIcon } from "@heroicons/react/24/outline";
@@ -23,6 +30,7 @@ import type { NextPage } from "next";
 import type { IUser } from "types";
 // constants
 import { USER_ROLES } from "constants/workspace";
+import { TIME_ZONES } from "constants/timezones";
 
 const defaultValues: Partial<IUser> = {
   avatar: "",
@@ -31,6 +39,7 @@ const defaultValues: Partial<IUser> = {
   last_name: "",
   email: "",
   role: "Product / Project Manager",
+  user_timezone: "Asia/Kolkata",
 };
 
 const Profile: NextPage = () => {
@@ -72,6 +81,7 @@ const Profile: NextPage = () => {
       cover_image: formData.cover_image,
       role: formData.role,
       display_name: formData.display_name,
+      user_timezone: formData.user_timezone,
     };
 
     await userService
@@ -128,6 +138,12 @@ const Profile: NextPage = () => {
     });
   };
 
+  const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
+    value: timeZone.value,
+    query: timeZone.label + " " + timeZone.value,
+    content: timeZone.label,
+  }));
+
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
@@ -348,6 +364,35 @@ const Profile: NextPage = () => {
                 {errors.role && <span className="text-xs text-red-500">Please select a role</span>}
               </div>
             </div>
+            <div className="grid grid-cols-12 gap-4 sm:gap-16">
+              <div className="col-span-12 sm:col-span-6">
+                <h4 className="text-lg font-semibold text-custom-text-100">Timezone</h4>
+                <p className="text-sm text-custom-text-200">Select a timezone</p>
+              </div>
+              <div className="col-span-12 sm:col-span-6">
+                <Controller
+                  name="user_timezone"
+                  control={control}
+                  rules={{ required: "This field is required" }}
+                  render={({ field: { value, onChange } }) => (
+                    <CustomSearchSelect
+                      value={value}
+                      label={
+                        value
+                          ? TIME_ZONES.find((t) => t.value === value)?.label ?? value
+                          : "Select a timezone"
+                      }
+                      options={timeZoneOptions}
+                      onChange={onChange}
+                      verticalPosition="top"
+                      optionsClassName="w-full"
+                      input
+                    />
+                  )}
+                />
+                {errors.role && <span className="text-xs text-red-500">Please select a role</span>}
+              </div>
+            </div>
             <div className="sm:text-right">
               <SecondaryButton type="submit" loading={isSubmitting}>
                 {isSubmitting ? "Updating..." : "Update profile"}
diff --git a/apps/app/types/users.d.ts b/apps/app/types/users.d.ts
index b41d1f8ef..55c95e5f3 100644
--- a/apps/app/types/users.d.ts
+++ b/apps/app/types/users.d.ts
@@ -36,6 +36,7 @@ export interface IUser {
   theme: ICustomTheme;
   updated_at: readonly Date;
   username: string;
+  user_timezone: string;
 
   [...rest: string]: any;
 }

From fd0efb0242403af5c8132f47572496babf719a09 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 29 Aug 2023 20:11:38 +0530
Subject: [PATCH 39/70] fix: start date filter not working on the platform
 (#2007)

---
 apps/app/hooks/gantt-chart/cycle-issues-view.tsx  | 1 +
 apps/app/hooks/gantt-chart/issue-view.tsx         | 1 +
 apps/app/hooks/gantt-chart/module-issues-view.tsx | 1 +
 apps/app/hooks/use-calendar-issues-view.tsx       | 1 +
 apps/app/hooks/use-spreadsheet-issues-view.tsx    | 2 ++
 5 files changed, 6 insertions(+)

diff --git a/apps/app/hooks/gantt-chart/cycle-issues-view.tsx b/apps/app/hooks/gantt-chart/cycle-issues-view.tsx
index 7ef534fb4..8d32d5e4b 100644
--- a/apps/app/hooks/gantt-chart/cycle-issues-view.tsx
+++ b/apps/app/hooks/gantt-chart/cycle-issues-view.tsx
@@ -23,6 +23,7 @@ const useGanttChartCycleIssues = (
     priority: filters?.priority ? filters?.priority.join(",") : undefined,
     labels: filters?.labels ? filters?.labels.join(",") : undefined,
     created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
+    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
     target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
     start_target_date: true, // to fetch only issues with a start and target date
   };
diff --git a/apps/app/hooks/gantt-chart/issue-view.tsx b/apps/app/hooks/gantt-chart/issue-view.tsx
index 7e595a358..ba9465114 100644
--- a/apps/app/hooks/gantt-chart/issue-view.tsx
+++ b/apps/app/hooks/gantt-chart/issue-view.tsx
@@ -19,6 +19,7 @@ const useGanttChartIssues = (workspaceSlug: string | undefined, projectId: strin
     priority: filters?.priority ? filters?.priority.join(",") : undefined,
     labels: filters?.labels ? filters?.labels.join(",") : undefined,
     created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
+    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
     target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
     start_target_date: true, // to fetch only issues with a start and target date
   };
diff --git a/apps/app/hooks/gantt-chart/module-issues-view.tsx b/apps/app/hooks/gantt-chart/module-issues-view.tsx
index 54dea3e2e..3d88cab4f 100644
--- a/apps/app/hooks/gantt-chart/module-issues-view.tsx
+++ b/apps/app/hooks/gantt-chart/module-issues-view.tsx
@@ -23,6 +23,7 @@ const useGanttChartModuleIssues = (
     priority: filters?.priority ? filters?.priority.join(",") : undefined,
     labels: filters?.labels ? filters?.labels.join(",") : undefined,
     created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
+    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
     target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
     start_target_date: true, // to fetch only issues with a start and target date
   };
diff --git a/apps/app/hooks/use-calendar-issues-view.tsx b/apps/app/hooks/use-calendar-issues-view.tsx
index d8daae922..d69864c2d 100644
--- a/apps/app/hooks/use-calendar-issues-view.tsx
+++ b/apps/app/hooks/use-calendar-issues-view.tsx
@@ -42,6 +42,7 @@ const useCalendarIssuesView = () => {
     type: filters?.type ? filters?.type : undefined,
     labels: filters?.labels ? filters?.labels.join(",") : undefined,
     created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
+    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
     target_date: calendarDateRange,
   };
 
diff --git a/apps/app/hooks/use-spreadsheet-issues-view.tsx b/apps/app/hooks/use-spreadsheet-issues-view.tsx
index 797ddf7d6..4471b4352 100644
--- a/apps/app/hooks/use-spreadsheet-issues-view.tsx
+++ b/apps/app/hooks/use-spreadsheet-issues-view.tsx
@@ -43,6 +43,8 @@ const useSpreadsheetIssuesView = () => {
     type: filters?.type ? filters?.type : undefined,
     labels: filters?.labels ? filters?.labels.join(",") : undefined,
     created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
+    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
+    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
     sub_issue: "false",
   };
 

From d8bbdc14ac0c6996541e92fbcbe3d4ebba7e2496 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 29 Aug 2023 20:14:13 +0530
Subject: [PATCH 40/70] feat: access selector for comment (#2012)

* dev: access specifier for comment

* chore: change access order
---
 .../components/issues/comment/add-comment.tsx | 112 ++++++++++++------
 apps/app/components/issues/main-content.tsx   |   9 +-
 apps/app/services/issues.service.ts           |  14 +--
 apps/app/types/issues.d.ts                    |   1 +
 apps/app/types/projects.d.ts                  |   2 +-
 5 files changed, 93 insertions(+), 45 deletions(-)

diff --git a/apps/app/components/issues/comment/add-comment.tsx b/apps/app/components/issues/comment/add-comment.tsx
index 4d64a90ba..33d7f2289 100644
--- a/apps/app/components/issues/comment/add-comment.tsx
+++ b/apps/app/components/issues/comment/add-comment.tsx
@@ -3,38 +3,55 @@ import { useRouter } from "next/router";
 // react-hook-form
 import { useForm, Controller } from "react-hook-form";
 // components
-import { SecondaryButton } from "components/ui";
 import { TipTapEditor } from "components/tiptap";
+// ui
+import { Icon, SecondaryButton, Tooltip } from "components/ui";
 // types
 import type { IIssueComment } from "types";
 
 const defaultValues: Partial<IIssueComment> = {
-  comment_json: "",
+  access: "INTERNAL",
   comment_html: "",
 };
 
 type Props = {
   disabled?: boolean;
   onSubmit: (data: IIssueComment) => Promise<void>;
+  showAccessSpecifier?: boolean;
 };
 
-export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
-  const {
-    control,
-    formState: { isSubmitting },
-    handleSubmit,
-    reset,
-    setValue,
-    watch,
-  } = useForm<IIssueComment>({ defaultValues });
+const commentAccess = [
+  {
+    icon: "lock",
+    key: "INTERNAL",
+    label: "Private",
+  },
+  {
+    icon: "public",
+    key: "EXTERNAL",
+    label: "Public",
+  },
+];
 
+export const AddComment: React.FC<Props> = ({
+  disabled = false,
+  onSubmit,
+  showAccessSpecifier = false,
+}) => {
   const editorRef = React.useRef<any>(null);
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm<IIssueComment>({ defaultValues });
+
   const handleAddComment = async (formData: IIssueComment) => {
-    if (!formData.comment_html || !formData.comment_json || isSubmitting) return;
+    if (!formData.comment_html || isSubmitting) return;
 
     await onSubmit(formData).then(() => {
       reset(defaultValues);
@@ -45,30 +62,55 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
   return (
     <div>
       <form onSubmit={handleSubmit(handleAddComment)}>
-        <div className="issue-comments-section">
-          <Controller
-            name="comment_html"
-            control={control}
-            render={({ field: { value, onChange } }) => (
-              <TipTapEditor
-                workspaceSlug={workspaceSlug as string}
-                ref={editorRef}
-                value={
-                  !value ||
-                  value === "" ||
-                  (typeof value === "object" && Object.keys(value).length === 0)
-                    ? watch("comment_html")
-                    : value
-                }
-                customClassName="p-3 min-h-[50px] shadow-sm"
-                debouncedUpdatesEnabled={false}
-                onChange={(comment_json: Object, comment_html: string) => {
-                  onChange(comment_html);
-                  setValue("comment_json", comment_json);
-                }}
-              />
+        <div>
+          <div className="relative">
+            {showAccessSpecifier && (
+              <div className="absolute bottom-2 left-3 z-[1]">
+                <Controller
+                  control={control}
+                  name="access"
+                  render={({ field: { onChange, value } }) => (
+                    <div className="flex border border-custom-border-300 divide-x divide-custom-border-300 rounded overflow-hidden">
+                      {commentAccess.map((access) => (
+                        <Tooltip key={access.key} tooltipContent={access.label}>
+                          <button
+                            type="button"
+                            onClick={() => onChange(access.key)}
+                            className={`grid place-items-center p-1 hover:bg-custom-background-80 ${
+                              value === access.key ? "bg-custom-background-80" : ""
+                            }`}
+                          >
+                            <Icon
+                              iconName={access.icon}
+                              className={`w-4 h-4 -mt-1 ${
+                                value === access.key
+                                  ? "!text-custom-text-100"
+                                  : "!text-custom-text-400"
+                              }`}
+                            />
+                          </button>
+                        </Tooltip>
+                      ))}
+                    </div>
+                  )}
+                />
+              </div>
             )}
-          />
+            <Controller
+              name="comment_html"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <TipTapEditor
+                  workspaceSlug={workspaceSlug as string}
+                  ref={editorRef}
+                  value={!value || value === "" ? "<p></p>" : value}
+                  customClassName="p-3 min-h-[100px] shadow-sm"
+                  debouncedUpdatesEnabled={false}
+                  onChange={(comment_json: Object, comment_html: string) => onChange(comment_html)}
+                />
+              )}
+            />
+          </div>
 
           <SecondaryButton type="submit" disabled={isSubmitting || disabled} className="mt-2">
             {isSubmitting ? "Adding..." : "Comment"}
diff --git a/apps/app/components/issues/main-content.tsx b/apps/app/components/issues/main-content.tsx
index ed559beb7..bab384523 100644
--- a/apps/app/components/issues/main-content.tsx
+++ b/apps/app/components/issues/main-content.tsx
@@ -8,6 +8,7 @@ import issuesService from "services/issues.service";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 import useToast from "hooks/use-toast";
+import useProjectDetails from "hooks/use-project-details";
 // contexts
 import { useProjectMyMembership } from "contexts/project-member.context";
 // components
@@ -49,6 +50,8 @@ export const IssueMainContent: React.FC<Props> = ({
   const { user } = useUserAuth();
   const { memberRole } = useProjectMyMembership();
 
+  const { projectDetails } = useProjectDetails();
+
   const { data: siblingIssues } = useSWR(
     workspaceSlug && projectId && issueDetails?.parent ? SUB_ISSUES(issueDetails.parent) : null,
     workspaceSlug && projectId && issueDetails?.parent
@@ -220,7 +223,11 @@ export const IssueMainContent: React.FC<Props> = ({
           handleCommentUpdate={handleCommentUpdate}
           handleCommentDelete={handleCommentDelete}
         />
-        <AddComment onSubmit={handleAddComment} disabled={uneditable} />
+        <AddComment
+          onSubmit={handleAddComment}
+          disabled={uneditable}
+          showAccessSpecifier={projectDetails && projectDetails.is_deployed}
+        />
       </div>
     </>
   );
diff --git a/apps/app/services/issues.service.ts b/apps/app/services/issues.service.ts
index 53c6c1a2d..b8875e6c5 100644
--- a/apps/app/services/issues.service.ts
+++ b/apps/app/services/issues.service.ts
@@ -182,7 +182,7 @@ class ProjectIssuesServices extends APIService {
     workspaceSlug: string,
     projectId: string,
     issueId: string,
-    data: any,
+    data: Partial<IIssueComment>,
     user: ICurrentUserResponse | undefined
   ): Promise<any> {
     return this.post(
@@ -468,20 +468,18 @@ class ProjectIssuesServices extends APIService {
       metadata: any;
       title: string;
       url: string;
-    },
-
+    }
   ): Promise<any> {
     return this.patch(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/${linkId}/`,
       data
     )
-    .then((response) => response?.data)
-    .catch((error) => {
-      throw error?.response;
-    });
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
   }
 
-
   async deleteIssueLink(
     workspaceSlug: string,
     projectId: string,
diff --git a/apps/app/types/issues.d.ts b/apps/app/types/issues.d.ts
index 98d72041a..93e1598f3 100644
--- a/apps/app/types/issues.d.ts
+++ b/apps/app/types/issues.d.ts
@@ -198,6 +198,7 @@ export interface IIssueActivity {
 }
 
 export interface IIssueComment extends IIssueActivity {
+  access: "EXTERNAL" | "INTERNAL";
   comment_html: string;
   comment_json: any;
   comment_stripped: string;
diff --git a/apps/app/types/projects.d.ts b/apps/app/types/projects.d.ts
index a3d8b997a..78ef4d953 100644
--- a/apps/app/types/projects.d.ts
+++ b/apps/app/types/projects.d.ts
@@ -39,6 +39,7 @@ export interface IProject {
   } | null;
   id: string;
   identifier: string;
+  is_deployed: boolean;
   is_favorite: boolean;
   is_member: boolean;
   member_role: 5 | 10 | 15 | 20 | null;
@@ -57,7 +58,6 @@ export interface IProject {
   updated_by: string;
   workspace: IWorkspace | string;
   workspace_detail: IWorkspaceLite;
-  is_deployed: boolean;
 }
 
 export interface IProjectLite {

From 168e79d6df2c896ef29a98c2361cd4dc691d64c8 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 29 Aug 2023 20:15:12 +0530
Subject: [PATCH 41/70] style: revamp of the issue details sidebar (#2014)

---
 .../issues/sidebar-select/assignee.tsx        |   4 +-
 .../issues/sidebar-select/blocked.tsx         |  12 +-
 .../issues/sidebar-select/blocker.tsx         |  12 +-
 .../issues/sidebar-select/cycle.tsx           | 107 +++++++--------
 .../issues/sidebar-select/estimate.tsx        |   4 +-
 .../issues/sidebar-select/module.tsx          | 116 ++++++++--------
 .../issues/sidebar-select/parent.tsx          |  68 ++++------
 .../issues/sidebar-select/priority.tsx        |   2 +-
 .../issues/sidebar-select/state.tsx           |   2 +-
 apps/app/components/issues/sidebar.tsx        | 126 +++++++++++-------
 10 files changed, 219 insertions(+), 234 deletions(-)

diff --git a/apps/app/components/issues/sidebar-select/assignee.tsx b/apps/app/components/issues/sidebar-select/assignee.tsx
index ad7db744f..61ece6f78 100644
--- a/apps/app/components/issues/sidebar-select/assignee.tsx
+++ b/apps/app/components/issues/sidebar-select/assignee.tsx
@@ -48,10 +48,10 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabl
           {value && value.length > 0 && Array.isArray(value) ? (
             <div className="-my-0.5 flex items-center gap-2">
               <AssigneesList userIds={value} length={3} showLength={false} />
-              <span className="text-custom-text-100 text-sm">{value.length} Assignees</span>
+              <span className="text-custom-text-100 text-xs">{value.length} Assignees</span>
             </div>
           ) : (
-            <button type="button" className="bg-custom-background-80 px-2.5 py-0.5 text-sm rounded">
+            <button type="button" className="bg-custom-background-80 px-2.5 py-0.5 text-xs rounded">
               No assignees
             </button>
           )}
diff --git a/apps/app/components/issues/sidebar-select/blocked.tsx b/apps/app/components/issues/sidebar-select/blocked.tsx
index 76373700c..fbe58b4b2 100644
--- a/apps/app/components/issues/sidebar-select/blocked.tsx
+++ b/apps/app/components/issues/sidebar-select/blocked.tsx
@@ -18,7 +18,6 @@ type Props = {
   issueId?: string;
   submitChanges: (formData: Partial<IIssue>) => void;
   watch: UseFormWatch<IIssue>;
-  userAuth: UserAuth;
   disabled?: boolean;
 };
 
@@ -26,7 +25,6 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
   issueId,
   submitChanges,
   watch,
-  userAuth,
   disabled = false,
 }) => {
   const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
@@ -73,8 +71,6 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
     handleClose();
   };
 
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
-
   return (
     <>
       <ExistingIssuesListModal
@@ -128,11 +124,11 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
           </div>
           <button
             type="button"
-            className={`flex w-full text-custom-text-200 ${
-              isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
-            } items-center justify-between gap-1 rounded-md border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
+            className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 ${
+              disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+            }`}
             onClick={() => setIsBlockedModalOpen(true)}
-            disabled={isNotAllowed}
+            disabled={disabled}
           >
             Select issues
           </button>
diff --git a/apps/app/components/issues/sidebar-select/blocker.tsx b/apps/app/components/issues/sidebar-select/blocker.tsx
index c25adc49e..49a6bc505 100644
--- a/apps/app/components/issues/sidebar-select/blocker.tsx
+++ b/apps/app/components/issues/sidebar-select/blocker.tsx
@@ -18,7 +18,6 @@ type Props = {
   issueId?: string;
   submitChanges: (formData: Partial<IIssue>) => void;
   watch: UseFormWatch<IIssue>;
-  userAuth: UserAuth;
   disabled?: boolean;
 };
 
@@ -26,7 +25,6 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
   issueId,
   submitChanges,
   watch,
-  userAuth,
   disabled = false,
 }) => {
   const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
@@ -73,8 +71,6 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
     handleClose();
   };
 
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
-
   return (
     <>
       <ExistingIssuesListModal
@@ -130,11 +126,11 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
           </div>
           <button
             type="button"
-            className={`flex w-full text-custom-text-200 ${
-              isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
-            } items-center justify-between gap-1 rounded-md border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
+            className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 ${
+              disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+            }`}
             onClick={() => setIsBlockerModalOpen(true)}
-            disabled={isNotAllowed}
+            disabled={disabled}
           >
             Select issues
           </button>
diff --git a/apps/app/components/issues/sidebar-select/cycle.tsx b/apps/app/components/issues/sidebar-select/cycle.tsx
index 1eacba245..3451be2c3 100644
--- a/apps/app/components/issues/sidebar-select/cycle.tsx
+++ b/apps/app/components/issues/sidebar-select/cycle.tsx
@@ -11,24 +11,20 @@ import cyclesService from "services/cycles.service";
 import { Spinner, CustomSelect, Tooltip } from "components/ui";
 // helper
 import { truncateText } from "helpers/string.helper";
-// icons
-import { ContrastIcon } from "components/icons";
 // types
-import { ICycle, IIssue, UserAuth } from "types";
+import { ICycle, IIssue } from "types";
 // fetch-keys
 import { CYCLE_ISSUES, INCOMPLETE_CYCLES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
 
 type Props = {
   issueDetail: IIssue | undefined;
   handleCycleChange: (cycle: ICycle) => void;
-  userAuth: UserAuth;
   disabled?: boolean;
 };
 
 export const SidebarCycleSelect: React.FC<Props> = ({
   issueDetail,
   handleCycleChange,
-  userAuth,
   disabled = false,
 }) => {
   const router = useRouter();
@@ -63,59 +59,56 @@ export const SidebarCycleSelect: React.FC<Props> = ({
 
   const issueCycle = issueDetail?.issue_cycle;
 
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
-
   return (
-    <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-        <ContrastIcon className="h-4 w-4 flex-shrink-0" />
-        <p>Cycle</p>
-      </div>
-      <div className="space-y-1 sm:basis-1/2">
-        <CustomSelect
-          label={
-            <Tooltip
-              position="left"
-              tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : "No cycle"}`}
-            >
-              <span className="w-full max-w-[125px] truncate text-left sm:block">
-                <span className={`${issueCycle ? "text-custom-text-100" : "text-custom-text-200"}`}>
-                  {issueCycle ? truncateText(issueCycle.cycle_detail.name, 15) : "No cycle"}
-                </span>
-              </span>
-            </Tooltip>
-          }
-          value={issueCycle ? issueCycle.cycle_detail.id : null}
-          onChange={(value: any) => {
-            !value
-              ? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
-              : handleCycleChange(incompleteCycles?.find((c) => c.id === value) as ICycle);
-          }}
-          width="w-full"
-          position="right"
-          maxHeight="rg"
-          disabled={isNotAllowed}
+    <CustomSelect
+      customButton={
+        <Tooltip
+          position="left"
+          tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : "No cycle"}`}
         >
-          {incompleteCycles ? (
-            incompleteCycles.length > 0 ? (
-              <>
-                {incompleteCycles.map((option) => (
-                  <CustomSelect.Option key={option.id} value={option.id}>
-                    <Tooltip position="left-bottom" tooltipContent={option.name}>
-                      <span className="w-full truncate">{truncateText(option.name, 25)}</span>
-                    </Tooltip>
-                  </CustomSelect.Option>
-                ))}
-                <CustomSelect.Option value={null}>None</CustomSelect.Option>
-              </>
-            ) : (
-              <div className="text-center">No cycles found</div>
-            )
-          ) : (
-            <Spinner />
-          )}
-        </CustomSelect>
-      </div>
-    </div>
+          <button
+            type="button"
+            className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex ${
+              disabled ? "cursor-not-allowed" : ""
+            }`}
+          >
+            <span
+              className={`truncate ${issueCycle ? "text-custom-text-100" : "text-custom-text-200"}`}
+            >
+              {issueCycle ? issueCycle.cycle_detail.name : "No cycle"}
+            </span>
+          </button>
+        </Tooltip>
+      }
+      value={issueCycle ? issueCycle.cycle_detail.id : null}
+      onChange={(value: any) => {
+        !value
+          ? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
+          : handleCycleChange(incompleteCycles?.find((c) => c.id === value) as ICycle);
+      }}
+      width="w-full"
+      position="right"
+      maxHeight="rg"
+      disabled={disabled}
+    >
+      {incompleteCycles ? (
+        incompleteCycles.length > 0 ? (
+          <>
+            {incompleteCycles.map((option) => (
+              <CustomSelect.Option key={option.id} value={option.id}>
+                <Tooltip position="left-bottom" tooltipContent={option.name}>
+                  <span className="w-full truncate">{truncateText(option.name, 25)}</span>
+                </Tooltip>
+              </CustomSelect.Option>
+            ))}
+            <CustomSelect.Option value={null}>None</CustomSelect.Option>
+          </>
+        ) : (
+          <div className="text-center">No cycles found</div>
+        )
+      ) : (
+        <Spinner />
+      )}
+    </CustomSelect>
   );
 };
diff --git a/apps/app/components/issues/sidebar-select/estimate.tsx b/apps/app/components/issues/sidebar-select/estimate.tsx
index 063694141..7ebdfe2b9 100644
--- a/apps/app/components/issues/sidebar-select/estimate.tsx
+++ b/apps/app/components/issues/sidebar-select/estimate.tsx
@@ -14,9 +14,7 @@ type Props = {
 };
 
 export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
-  const { isEstimateActive, estimatePoints } = useEstimateOption();
-
-  if (!isEstimateActive) return null;
+  const { estimatePoints } = useEstimateOption();
 
   return (
     <CustomSelect
diff --git a/apps/app/components/issues/sidebar-select/module.tsx b/apps/app/components/issues/sidebar-select/module.tsx
index a8770e03d..a183fe951 100644
--- a/apps/app/components/issues/sidebar-select/module.tsx
+++ b/apps/app/components/issues/sidebar-select/module.tsx
@@ -10,24 +10,20 @@ import modulesService from "services/modules.service";
 import { Spinner, CustomSelect, Tooltip } from "components/ui";
 // helper
 import { truncateText } from "helpers/string.helper";
-// icons
-import { RectangleGroupIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue, IModule, UserAuth } from "types";
+import { IIssue, IModule } from "types";
 // fetch-keys
 import { ISSUE_DETAILS, MODULE_ISSUES, MODULE_LIST } from "constants/fetch-keys";
 
 type Props = {
   issueDetail: IIssue | undefined;
   handleModuleChange: (module: IModule) => void;
-  userAuth: UserAuth;
   disabled?: boolean;
 };
 
 export const SidebarModuleSelect: React.FC<Props> = ({
   issueDetail,
   handleModuleChange,
-  userAuth,
   disabled = false,
 }) => {
   const router = useRouter();
@@ -57,66 +53,60 @@ export const SidebarModuleSelect: React.FC<Props> = ({
 
   const issueModule = issueDetail?.issue_module;
 
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
-
   return (
-    <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-        <RectangleGroupIcon className="h-4 w-4 flex-shrink-0" />
-        <p>Module</p>
-      </div>
-      <div className="space-y-1 sm:basis-1/2">
-        <CustomSelect
-          label={
-            <Tooltip
-              position="left"
-              tooltipContent={`${
-                modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"
+    <CustomSelect
+      customButton={
+        <Tooltip
+          position="left"
+          tooltipContent={`${
+            modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"
+          }`}
+        >
+          <button
+            type="button"
+            className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex ${
+              disabled ? "cursor-not-allowed" : ""
+            }`}
+          >
+            <span
+              className={`truncate ${
+                issueModule ? "text-custom-text-100" : "text-custom-text-200"
               }`}
             >
-              <span className="w-full max-w-[125px] truncate text-left sm:block">
-                <span
-                  className={`${issueModule ? "text-custom-text-100" : "text-custom-text-200"}`}
-                >
-                  {truncateText(
-                    `${modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}`,
-                    15
-                  )}
-                </span>
-              </span>
-            </Tooltip>
-          }
-          value={issueModule ? issueModule.module_detail?.id : null}
-          onChange={(value: any) => {
-            !value
-              ? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
-              : handleModuleChange(modules?.find((m) => m.id === value) as IModule);
-          }}
-          width="w-full"
-          position="right"
-          maxHeight="rg"
-          disabled={isNotAllowed}
-        >
-          {modules ? (
-            modules.length > 0 ? (
-              <>
-                {modules.map((option) => (
-                  <CustomSelect.Option key={option.id} value={option.id}>
-                    <Tooltip position="left-bottom" tooltipContent={option.name}>
-                      <span className="w-full truncate">{truncateText(option.name, 25)}</span>
-                    </Tooltip>
-                  </CustomSelect.Option>
-                ))}
-                <CustomSelect.Option value={null}>None</CustomSelect.Option>
-              </>
-            ) : (
-              <div className="text-center">No modules found</div>
-            )
-          ) : (
-            <Spinner />
-          )}
-        </CustomSelect>
-      </div>
-    </div>
+              {modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}
+            </span>
+          </button>
+        </Tooltip>
+      }
+      value={issueModule ? issueModule.module_detail?.id : null}
+      onChange={(value: any) => {
+        !value
+          ? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
+          : handleModuleChange(modules?.find((m) => m.id === value) as IModule);
+      }}
+      width="w-full"
+      position="right"
+      maxHeight="rg"
+      disabled={disabled}
+    >
+      {modules ? (
+        modules.length > 0 ? (
+          <>
+            {modules.map((option) => (
+              <CustomSelect.Option key={option.id} value={option.id}>
+                <Tooltip position="left-bottom" tooltipContent={option.name}>
+                  <span className="w-full truncate">{truncateText(option.name, 25)}</span>
+                </Tooltip>
+              </CustomSelect.Option>
+            ))}
+            <CustomSelect.Option value={null}>None</CustomSelect.Option>
+          </>
+        ) : (
+          <div className="text-center">No modules found</div>
+        )
+      ) : (
+        <Spinner />
+      )}
+    </CustomSelect>
   );
 };
diff --git a/apps/app/components/issues/sidebar-select/parent.tsx b/apps/app/components/issues/sidebar-select/parent.tsx
index 1e780dd57..dd5d4f55b 100644
--- a/apps/app/components/issues/sidebar-select/parent.tsx
+++ b/apps/app/components/issues/sidebar-select/parent.tsx
@@ -2,8 +2,6 @@ import React, { useState } from "react";
 
 import { useRouter } from "next/router";
 
-// icons
-import { UserIcon } from "@heroicons/react/24/outline";
 // components
 import { ParentIssuesListModal } from "components/issues";
 // types
@@ -12,14 +10,12 @@ import { IIssue, ISearchIssueResponse, UserAuth } from "types";
 type Props = {
   onChange: (value: string) => void;
   issueDetails: IIssue | undefined;
-  userAuth: UserAuth;
   disabled?: boolean;
 };
 
 export const SidebarParentSelect: React.FC<Props> = ({
   onChange,
   issueDetails,
-  userAuth,
   disabled = false,
 }) => {
   const [isParentModalOpen, setIsParentModalOpen] = useState(false);
@@ -28,42 +24,34 @@ export const SidebarParentSelect: React.FC<Props> = ({
   const router = useRouter();
   const { projectId, issueId } = router.query;
 
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
-
   return (
-    <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-        <UserIcon className="h-4 w-4 flex-shrink-0" />
-        <p>Parent</p>
-      </div>
-      <div className="sm:basis-1/2">
-        <ParentIssuesListModal
-          isOpen={isParentModalOpen}
-          handleClose={() => setIsParentModalOpen(false)}
-          onChange={(issue) => {
-            onChange(issue.id);
-            setSelectedParentIssue(issue);
-          }}
-          issueId={issueId as string}
-          projectId={projectId as string}
-        />
-        <button
-          type="button"
-          className={`flex w-full ${
-            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
-          } items-center justify-between gap-1 rounded-md border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
-          onClick={() => setIsParentModalOpen(true)}
-          disabled={isNotAllowed}
-        >
-          {selectedParentIssue && issueDetails?.parent ? (
-            `${selectedParentIssue.project__identifier}-${selectedParentIssue.sequence_id}`
-          ) : !selectedParentIssue && issueDetails?.parent ? (
-            `${issueDetails.parent_detail?.project_detail.identifier}-${issueDetails.parent_detail?.sequence_id}`
-          ) : (
-            <span className="text-custom-text-200">Select issue</span>
-          )}
-        </button>
-      </div>
-    </div>
+    <>
+      <ParentIssuesListModal
+        isOpen={isParentModalOpen}
+        handleClose={() => setIsParentModalOpen(false)}
+        onChange={(issue) => {
+          onChange(issue.id);
+          setSelectedParentIssue(issue);
+        }}
+        issueId={issueId as string}
+        projectId={projectId as string}
+      />
+      <button
+        type="button"
+        className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 ${
+          disabled ? "cursor-not-allowed" : "cursor-pointer "
+        }`}
+        onClick={() => setIsParentModalOpen(true)}
+        disabled={disabled}
+      >
+        {selectedParentIssue && issueDetails?.parent ? (
+          `${selectedParentIssue.project__identifier}-${selectedParentIssue.sequence_id}`
+        ) : !selectedParentIssue && issueDetails?.parent ? (
+          `${issueDetails.parent_detail?.project_detail.identifier}-${issueDetails.parent_detail?.sequence_id}`
+        ) : (
+          <span className="text-custom-text-200">Select issue</span>
+        )}
+      </button>
+    </>
   );
 };
diff --git a/apps/app/components/issues/sidebar-select/priority.tsx b/apps/app/components/issues/sidebar-select/priority.tsx
index dfaa712e2..fd1c77f28 100644
--- a/apps/app/components/issues/sidebar-select/priority.tsx
+++ b/apps/app/components/issues/sidebar-select/priority.tsx
@@ -18,7 +18,7 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabl
     customButton={
       <button
         type="button"
-        className={`flex items-center gap-1.5 text-left text-sm capitalize rounded px-2.5 py-0.5 ${
+        className={`flex items-center gap-1.5 text-left text-xs capitalize rounded px-2.5 py-0.5 ${
           value === "urgent"
             ? "border-red-500/20 bg-red-500/20 text-red-500"
             : value === "high"
diff --git a/apps/app/components/issues/sidebar-select/state.tsx b/apps/app/components/issues/sidebar-select/state.tsx
index a3874221f..5084c61bd 100644
--- a/apps/app/components/issues/sidebar-select/state.tsx
+++ b/apps/app/components/issues/sidebar-select/state.tsx
@@ -39,7 +39,7 @@ export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, disabled
   return (
     <CustomSelect
       customButton={
-        <button type="button" className="bg-custom-background-80 text-sm rounded px-2.5 py-0.5">
+        <button type="button" className="bg-custom-background-80 text-xs rounded px-2.5 py-0.5">
           {selectedState ? (
             <div className="flex items-center gap-1.5 text-left text-custom-text-100">
               {getStateGroupIcon(
diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
index 366e57ba7..4bdd30137 100644
--- a/apps/app/components/issues/sidebar.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@@ -10,6 +10,7 @@ import { Controller, UseFormWatch } from "react-hook-form";
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 import useUserIssueNotificationSubscription from "hooks/use-issue-notification-subscription";
+import useEstimateOption from "hooks/use-estimate-option";
 // services
 import issuesService from "services/issues.service";
 import modulesService from "services/modules.service";
@@ -42,6 +43,8 @@ import {
   ChartBarIcon,
   UserGroupIcon,
   PlayIcon,
+  UserIcon,
+  RectangleGroupIcon,
 } from "@heroicons/react/24/outline";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
@@ -49,6 +52,7 @@ import { copyTextToClipboard } from "helpers/string.helper";
 import type { ICycle, IIssue, IIssueLink, linkDetails, IModule } from "types";
 // fetch-keys
 import { ISSUE_DETAILS } from "constants/fetch-keys";
+import { ContrastIcon } from "components/icons";
 
 type Props = {
   control: any;
@@ -93,6 +97,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
 
   const { user } = useUserAuth();
 
+  const { isEstimateActive } = useEstimateOption();
+
   const { loading, handleSubscribe, handleUnsubscribe, subscribed } =
     useUserIssueNotificationSubscription(workspaceSlug, projectId, issueId);
 
@@ -403,22 +409,51 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                     </div>
                   </div>
                 )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && (
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) &&
+                  isEstimateActive && (
+                    <div className="flex flex-wrap items-center py-2">
+                      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+                        <PlayIcon className="h-4 w-4 flex-shrink-0 -rotate-90" />
+                        <p>Estimate</p>
+                      </div>
+                      <div className="sm:basis-1/2">
+                        <Controller
+                          control={control}
+                          name="estimate_point"
+                          render={({ field: { value } }) => (
+                            <SidebarEstimateSelect
+                              value={value}
+                              onChange={(val: number | null) =>
+                                submitChanges({ estimate_point: val })
+                              }
+                              disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                            />
+                          )}
+                        />
+                      </div>
+                    </div>
+                  )}
+              </div>
+            )}
+            {showSecondSection && (
+              <div className="py-1">
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
                   <div className="flex flex-wrap items-center py-2">
                     <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <PlayIcon className="h-4 w-4 flex-shrink-0 -rotate-90" />
-                      <p>Estimate</p>
+                      <UserIcon className="h-4 w-4 flex-shrink-0" />
+                      <p>Parent</p>
                     </div>
                     <div className="sm:basis-1/2">
                       <Controller
                         control={control}
-                        name="estimate_point"
-                        render={({ field: { value } }) => (
-                          <SidebarEstimateSelect
-                            value={value}
-                            onChange={(val: number | null) =>
-                              submitChanges({ estimate_point: val })
-                            }
+                        name="parent"
+                        render={({ field: { onChange } }) => (
+                          <SidebarParentSelect
+                            onChange={(val: string) => {
+                              submitChanges({ parent: val });
+                              onChange(val);
+                            }}
+                            issueDetails={issueDetail}
                             disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
                           />
                         )}
@@ -426,34 +461,12 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                     </div>
                   </div>
                 )}
-              </div>
-            )}
-            {showSecondSection && (
-              <div className="py-1">
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
-                  <Controller
-                    control={control}
-                    name="parent"
-                    render={({ field: { onChange } }) => (
-                      <SidebarParentSelect
-                        onChange={(val: string) => {
-                          submitChanges({ parent: val });
-                          onChange(val);
-                        }}
-                        issueDetails={issueDetail}
-                        userAuth={memberRole}
-                        disabled={uneditable}
-                      />
-                    )}
-                  />
-                )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("blocker")) && (
                   <SidebarBlockerSelect
                     issueId={issueId as string}
                     submitChanges={submitChanges}
                     watch={watchIssue}
-                    userAuth={memberRole}
-                    disabled={uneditable}
+                    disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
                   />
                 )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("blocked")) && (
@@ -461,8 +474,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                     issueId={issueId as string}
                     submitChanges={submitChanges}
                     watch={watchIssue}
-                    userAuth={memberRole}
-                    disabled={uneditable}
+                    disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
                   />
                 )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
@@ -484,8 +496,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                 start_date: val,
                               })
                             }
-                            className="bg-custom-background-100"
-                            wrapperClassName="w-full"
+                            className="bg-custom-background-80 border-none"
                             maxDate={maxDate ?? undefined}
                             disabled={isNotAllowed || uneditable}
                           />
@@ -513,8 +524,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                 target_date: val,
                               })
                             }
-                            className="bg-custom-background-100"
-                            wrapperClassName="w-full"
+                            className="bg-custom-background-80 border-none"
                             minDate={minDate ?? undefined}
                             disabled={isNotAllowed || uneditable}
                           />
@@ -528,20 +538,34 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
             {showThirdSection && (
               <div className="py-1">
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && (
-                  <SidebarCycleSelect
-                    issueDetail={issueDetail}
-                    handleCycleChange={handleCycleChange}
-                    userAuth={memberRole}
-                    disabled={uneditable}
-                  />
+                  <div className="flex flex-wrap items-center py-2">
+                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
+                      <ContrastIcon className="h-4 w-4 flex-shrink-0" />
+                      <p>Cycle</p>
+                    </div>
+                    <div className="space-y-1 sm:w-1/2">
+                      <SidebarCycleSelect
+                        issueDetail={issueDetail}
+                        handleCycleChange={handleCycleChange}
+                        disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                      />
+                    </div>
+                  </div>
                 )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && (
-                  <SidebarModuleSelect
-                    issueDetail={issueDetail}
-                    handleModuleChange={handleModuleChange}
-                    userAuth={memberRole}
-                    disabled={uneditable}
-                  />
+                  <div className="flex flex-wrap items-center py-2">
+                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
+                      <RectangleGroupIcon className="h-4 w-4 flex-shrink-0" />
+                      <p>Module</p>
+                    </div>
+                    <div className="space-y-1 sm:w-1/2">
+                      <SidebarModuleSelect
+                        issueDetail={issueDetail}
+                        handleModuleChange={handleModuleChange}
+                        disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                      />
+                    </div>
+                  </div>
                 )}
               </div>
             )}

From 2e5ade05fe4e6439cedf010062fb58ed227ca84f Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 30 Aug 2023 11:43:47 +0530
Subject: [PATCH 42/70] chore: update module status icons and colors (#2011)

* chore: update module status icons and colors

* refactor: import statements

* fix: add default alue to module status
---
 apps/app/components/icons/index.ts            |  1 +
 apps/app/components/icons/module/backlog.tsx  | 57 +++++++++++++++
 .../app/components/icons/module/cancelled.tsx | 35 +++++++++
 .../app/components/icons/module/completed.tsx | 28 ++++++++
 .../components/icons/module/in-progress.tsx   | 71 +++++++++++++++++++
 apps/app/components/icons/module/index.ts     |  7 ++
 .../icons/module/module-status-icon.tsx       | 37 ++++++++++
 apps/app/components/icons/module/paused.tsx   | 31 ++++++++
 apps/app/components/icons/module/planned.tsx  | 24 +++++++
 .../components/modules/gantt-chart/blocks.tsx |  3 +
 apps/app/components/modules/select/status.tsx | 15 +---
 apps/app/components/modules/sidebar.tsx       |  2 +-
 apps/app/constants/module.ts                  | 21 ++++--
 apps/app/types/modules.d.ts                   | 10 ++-
 14 files changed, 321 insertions(+), 21 deletions(-)
 create mode 100644 apps/app/components/icons/module/backlog.tsx
 create mode 100644 apps/app/components/icons/module/cancelled.tsx
 create mode 100644 apps/app/components/icons/module/completed.tsx
 create mode 100644 apps/app/components/icons/module/in-progress.tsx
 create mode 100644 apps/app/components/icons/module/index.ts
 create mode 100644 apps/app/components/icons/module/module-status-icon.tsx
 create mode 100644 apps/app/components/icons/module/paused.tsx
 create mode 100644 apps/app/components/icons/module/planned.tsx

diff --git a/apps/app/components/icons/index.ts b/apps/app/components/icons/index.ts
index 183b20c97..d3b311e40 100644
--- a/apps/app/components/icons/index.ts
+++ b/apps/app/components/icons/index.ts
@@ -27,6 +27,7 @@ export * from "./started-state-icon";
 export * from "./layer-diagonal-icon";
 export * from "./lock-icon";
 export * from "./menu-icon";
+export * from "./module";
 export * from "./pencil-scribble-icon";
 export * from "./plus-icon";
 export * from "./person-running-icon";
diff --git a/apps/app/components/icons/module/backlog.tsx b/apps/app/components/icons/module/backlog.tsx
new file mode 100644
index 000000000..5685c7498
--- /dev/null
+++ b/apps/app/components/icons/module/backlog.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+
+type Props = {
+  width?: string;
+  height?: string;
+  className?: string;
+  color?: string;
+};
+
+export const ModuleBacklogIcon: React.FC<Props> = ({ width = "20", height = "20", className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 247.63 247.6"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path fill="#f6aa3e" d="M87.76,165.33a2.1,2.1,0,0,1-2.33,0Z" />
+        <path fill="#f5a839" d="M94.08,165.33a1.67,1.67,0,0,1-2,0Z" />
+        <path
+          fill="#a3a3a2"
+          d="M.29,115.46A130.18,130.18,0,0,1,2.05,101c.15-1,.53-1.37,1.62-1.15q7.78,1.64,15.6,3.12c1,.2,1.27.56,1.07,1.63a105.92,105.92,0,0,0-1.7,23.11,99.36,99.36,0,0,0,1.7,15.3c.2,1.05,0,1.44-1.06,1.64q-7.82,1.49-15.6,3.12c-1.22.25-1.5-.29-1.66-1.29C1.33,142,.64,137.63.34,133.16c0-.28-.05-.56-.34-.71v-.66c.36-.68.08-1.41.17-2.12A15,15,0,0,0,0,126.13v-4.66a17,17,0,0,0,.17-3.7A9.41,9.41,0,0,1,.29,115.46Z"
+        />
+        <path
+          fill="#a3a3a2"
+          d="M132.14.29a130.64,130.64,0,0,1,14.48,1.76c1,.15,1.36.55,1.13,1.63q-1.62,7.79-3.11,15.6c-.2,1-.58,1.26-1.63,1.06a106.48,106.48,0,0,0-23-1.71,101.71,101.71,0,0,0-15.47,1.71c-1.08.21-1.42-.05-1.62-1.08-1-5.2-2-10.41-3.12-15.59-.23-1.1.17-1.47,1.15-1.62A137.72,137.72,0,0,1,115.46.28a5.78,5.78,0,0,1,1.66-.11h1.66A9,9,0,0,0,121.47,0h4.66a17,17,0,0,0,3.7.17A9.41,9.41,0,0,1,132.14.29Z"
+        />
+        <path
+          fill="#a3a3a2"
+          d="M229,123.63a92.74,92.74,0,0,0-1.71-18.81c-.25-1.28.09-1.7,1.31-1.93q7.57-1.44,15.12-3c1.13-.24,1.66,0,1.88,1.22a133,133,0,0,1,2,26.28,141.92,141.92,0,0,1-2,19.29c-.19,1.08-.71,1.27-1.69,1.07q-7.71-1.58-15.45-3.07c-1.07-.21-1.36-.6-1.15-1.73A98.45,98.45,0,0,0,229,123.63Z"
+        />
+        <path
+          fill="#a3a3a2"
+          d="M123.83,247.6a131.89,131.89,0,0,1-22.79-2c-1.14-.19-1.4-.68-1.18-1.76q1.61-7.71,3.09-15.45c.19-1,.45-1.34,1.6-1.12a105.9,105.9,0,0,0,23,1.72A101.84,101.84,0,0,0,143,227.26c1.05-.19,1.44,0,1.64,1.07q1.49,7.81,3.12,15.61c.22,1.08-.15,1.45-1.15,1.62A129.86,129.86,0,0,1,123.83,247.6Z"
+        />
+        <path
+          fill="#a3a3a2"
+          d="M65.13,211.57c-.17.28-.37.62-.58.94-2.93,4.37-5.88,8.72-8.76,13.13-.6.91-1,1-1.92.4a126.44,126.44,0,0,1-32-32c-.8-1.15-.84-1.7.45-2.52,4.35-2.77,8.61-5.66,12.86-8.56.9-.62,1.33-.5,1.94.38a103.22,103.22,0,0,0,27.2,27.21C65.1,211.15,65.14,211.21,65.13,211.57Z"
+        />
+        <path
+          fill="#a3a3a2"
+          d="M192.79,226.56c-.51-.06-.61-.4-.79-.67-3.05-4.55-6.08-9.12-9.17-13.65-.6-.89-.16-1.22.5-1.66a103.37,103.37,0,0,0,16.56-14.05,93.49,93.49,0,0,0,10.53-13c.68-1,1.15-1.13,2.18-.42,4.32,3,8.7,5.91,13.09,8.81.83.54,1,.94.38,1.8a125.4,125.4,0,0,1-32,32C193.65,226,193.18,226.31,192.79,226.56Z"
+        />
+        <path
+          fill="#a3a3a2"
+          d="M36,65.13c-.28-.18-.62-.37-.94-.59-4.37-2.92-8.72-5.88-13.12-8.75-.95-.62-1-1-.36-1.91A127.22,127.22,0,0,1,53.69,21.72c1.07-.74,1.56-.65,2.27.46,2.79,4.32,5.67,8.6,8.57,12.85.63.91.68,1.38-.32,2.07A105,105,0,0,0,37,64.29C36.43,65.13,36.4,65.14,36,65.13Z"
+        />
+        <path
+          fill="#a3a3a2"
+          d="M226.53,54.77c.07.52-.35.64-.66.85-4.56,3.05-9.12,6.08-13.65,9.15-.76.51-1.12.3-1.57-.38a97.64,97.64,0,0,0-11.79-14.34,97,97,0,0,0-15.37-12.87c-1.05-.7-1.09-1.18-.4-2.19,3-4.33,5.91-8.7,8.8-13.09.57-.86,1-.91,1.79-.32A126.12,126.12,0,0,1,225.92,53.8C226.14,54.11,226.33,54.45,226.53,54.77Z"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/apps/app/components/icons/module/cancelled.tsx b/apps/app/components/icons/module/cancelled.tsx
new file mode 100644
index 000000000..9bfc02943
--- /dev/null
+++ b/apps/app/components/icons/module/cancelled.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+type Props = {
+  width?: string;
+  height?: string;
+  className?: string;
+  color?: string;
+};
+
+export const ModuleCancelledIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_4052_100277)">
+      <path
+        d="M8 8.84L10.58 11.42C10.7 11.54 10.84 11.6 11 11.6C11.16 11.6 11.3 11.54 11.42 11.42C11.54 11.3 11.6 11.16 11.6 11C11.6 10.84 11.54 10.7 11.42 10.58L8.84 8L11.42 5.42C11.54 5.3 11.6 5.16 11.6 5C11.6 4.84 11.54 4.7 11.42 4.58C11.3 4.46 11.16 4.4 11 4.4C10.84 4.4 10.7 4.46 10.58 4.58L8 7.16L5.42 4.58C5.3 4.46 5.16 4.4 5 4.4C4.84 4.4 4.7 4.46 4.58 4.58C4.46 4.7 4.4 4.84 4.4 5C4.4 5.16 4.46 5.3 4.58 5.42L7.16 8L4.58 10.58C4.46 10.7 4.4 10.84 4.4 11C4.4 11.16 4.46 11.3 4.58 11.42C4.7 11.54 4.84 11.6 5 11.6C5.16 11.6 5.3 11.54 5.42 11.42L8 8.84ZM8 16C6.90667 16 5.87333 15.79 4.9 15.37C3.92667 14.95 3.07667 14.3767 2.35 13.65C1.62333 12.9233 1.05 12.0733 0.63 11.1C0.21 10.1267 0 9.09333 0 8C0 6.89333 0.21 5.85333 0.63 4.88C1.05 3.90667 1.62333 3.06 2.35 2.34C3.07667 1.62 3.92667 1.05 4.9 0.63C5.87333 0.21 6.90667 0 8 0C9.10667 0 10.1467 0.21 11.12 0.63C12.0933 1.05 12.94 1.62 13.66 2.34C14.38 3.06 14.95 3.90667 15.37 4.88C15.79 5.85333 16 6.89333 16 8C16 9.09333 15.79 10.1267 15.37 11.1C14.95 12.0733 14.38 12.9233 13.66 13.65C12.94 14.3767 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM8 14.8C9.89333 14.8 11.5 14.1367 12.82 12.81C14.14 11.4833 14.8 9.88 14.8 8C14.8 6.10667 14.14 4.5 12.82 3.18C11.5 1.86 9.89333 1.2 8 1.2C6.12 1.2 4.51667 1.86 3.19 3.18C1.86333 4.5 1.2 6.10667 1.2 8C1.2 9.88 1.86333 11.4833 3.19 12.81C4.51667 14.1367 6.12 14.8 8 14.8Z"
+        fill="#ef4444"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4052_100277">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/apps/app/components/icons/module/completed.tsx b/apps/app/components/icons/module/completed.tsx
new file mode 100644
index 000000000..4c50ed3ad
--- /dev/null
+++ b/apps/app/components/icons/module/completed.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+type Props = {
+  width?: string;
+  height?: string;
+  className?: string;
+  color?: string;
+};
+
+export const ModuleCompletedIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.80486 9.80731L4.84856 7.85103C4.73197 7.73443 4.58542 7.67478 4.4089 7.67208C4.23238 7.66937 4.08312 7.72902 3.96113 7.85103C3.83913 7.97302 3.77814 8.12093 3.77814 8.29474C3.77814 8.46855 3.83913 8.61645 3.96113 8.73844L6.27206 11.0494C6.42428 11.2016 6.60188 11.2777 6.80486 11.2777C7.00782 11.2777 7.18541 11.2016 7.33764 11.0494L12.0227 6.36435C12.1393 6.24776 12.1989 6.10121 12.2016 5.92469C12.2043 5.74817 12.1447 5.59891 12.0227 5.47692C11.9007 5.35493 11.7528 5.29393 11.579 5.29393C11.4051 5.29393 11.2572 5.35493 11.1353 5.47692L6.80486 9.80731ZM8.00141 16C6.89494 16 5.85491 15.79 4.88132 15.3701C3.90772 14.9502 3.06082 14.3803 2.34064 13.6604C1.62044 12.9405 1.05028 12.094 0.63017 11.1208C0.210057 10.1477 0 9.10788 0 8.00141C0 6.89494 0.209966 5.85491 0.629896 4.88132C1.04983 3.90772 1.61972 3.06082 2.33958 2.34064C3.05946 1.62044 3.90598 1.05028 4.87915 0.630171C5.8523 0.210058 6.89212 0 7.99859 0C9.10506 0 10.1451 0.209966 11.1187 0.629897C12.0923 1.04983 12.9392 1.61972 13.6594 2.33959C14.3796 3.05946 14.9497 3.90598 15.3698 4.87915C15.7899 5.8523 16 6.89212 16 7.99859C16 9.10506 15.79 10.1451 15.3701 11.1187C14.9502 12.0923 14.3803 12.9392 13.6604 13.6594C12.9405 14.3796 12.094 14.9497 11.1208 15.3698C10.1477 15.7899 9.10788 16 8.00141 16ZM8 14.7369C9.88071 14.7369 11.4737 14.0842 12.779 12.779C14.0842 11.4737 14.7369 9.88071 14.7369 8C14.7369 6.11929 14.0842 4.52631 12.779 3.22104C11.4737 1.91577 9.88071 1.26314 8 1.26314C6.11929 1.26314 4.52631 1.91577 3.22104 3.22104C1.91577 4.52631 1.26314 6.11929 1.26314 8C1.26314 9.88071 1.91577 11.4737 3.22104 12.779C4.52631 14.0842 6.11929 14.7369 8 14.7369Z"
+      fill="#16a34a"
+    />
+  </svg>
+);
diff --git a/apps/app/components/icons/module/in-progress.tsx b/apps/app/components/icons/module/in-progress.tsx
new file mode 100644
index 000000000..5892a94d6
--- /dev/null
+++ b/apps/app/components/icons/module/in-progress.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+
+type Props = {
+  width?: string;
+  height?: string;
+  className?: string;
+  color?: string;
+};
+
+export const ModuleInProgressIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 234.83 234.82"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path fill="#f7b964" d="M0,111.14c.63.7.21,1.53.3,2.29-.07.26-.17.28-.3,0Z" />
+        <path fill="#f6ab3e" d="M0,119.46a3.11,3.11,0,0,1,.3,2q-.19.33-.3,0Z" />
+        <path
+          fill="#facf96"
+          d="M.27,123.16c0,.66.38,1.38-.27,2v-2C.13,122.89.22,122.91.27,123.16Z"
+        />
+        <path fill="#f5a939" d="M0,113.47l.3,0a2.39,2.39,0,0,1-.3,1.71Z" />
+        <path fill="#f8ba67" d="M.27,123.16a.63.63,0,0,1-.27,0v-1.66l.3,0Z" />
+        <path
+          fill="#f39e1f"
+          d="M234.58,106.92a72,72,0,0,0-.65-8.42,117.08,117.08,0,0,0-13.46-38.74,118.87,118.87,0,0,0-31.73-36.49A115,115,0,0,0,151.17,4.14,83.24,83.24,0,0,0,134.28.58c-2.94-.24-5.89-.22-8.83-.58h-4a2.66,2.66,0,0,1-2,0h-4.32a3.45,3.45,0,0,1-2.33,0h-3.66c-.51.33-1.08.14-1.62.16A87.24,87.24,0,0,0,90,2.35,118.53,118.53,0,0,0,23.16,46,115.24,115.24,0,0,0,4.29,83,85.41,85.41,0,0,0,.6,100.15c-.26,3-.22,6-.6,9v2a6.63,6.63,0,0,1,.17,2.26c-.08.58.17,1.19-.17,1.74v4.32c.35.66.08,1.37.17,2.05v1.57c-.09.68.18,1.39-.17,2v.67c.3.39.14.85.16,1.28.2,3.18.22,6.38.66,9.53a101.21,101.21,0,0,0,4.27,17.76A118.17,118.17,0,0,0,99,234a100.25,100.25,0,0,0,11.37.65,167.86,167.86,0,0,0,23.84-.54,100.39,100.39,0,0,0,23.35-5.72,117.87,117.87,0,0,0,39.67-24.08,117.77,117.77,0,0,0,33.27-53.2,85.63,85.63,0,0,0,3.71-17.37A212.22,212.22,0,0,0,234.58,106.92ZM117.31,217a99.63,99.63,0,0,1-99.7-100.05c0-54.91,44.8-99.35,100.09-99.33,54.89,0,99.32,44.83,99.29,100.14C217,172.43,172.21,217,117.31,217Z"
+        />
+        <path
+          fill="#f39e1f"
+          d="M117.33,44a84.49,84.49,0,0,1,12.9,1.15c1.09.19,1.37.56,1.15,1.6q-1.51,7.41-2.94,14.82c-.16.82-.45,1.11-1.33.95a53.31,53.31,0,0,0-19.67,0c-.77.14-1.11-.06-1.26-.83q-1.47-7.59-3-15.16c-.2-1,.21-1.19,1.08-1.35A80.7,80.7,0,0,1,117.33,44Z"
+        />
+        <path
+          fill="#f39e1f"
+          d="M44,117.2a80.88,80.88,0,0,1,1.17-12.9c.18-1,.49-1.3,1.49-1.1q7.49,1.53,15,3c.89.18,1,.59.85,1.39a53.54,53.54,0,0,0,0,19.51c.15.83,0,1.2-.88,1.36-5,1-10,2-15,3-.85.17-1.25,0-1.43-1A82.68,82.68,0,0,1,44,117.2Z"
+        />
+        <path
+          fill="#f39e1f"
+          d="M190.64,117.39a80.88,80.88,0,0,1-1.17,12.9c-.18,1-.46,1.32-1.48,1.11q-7.49-1.53-15-3c-.88-.17-1-.57-.86-1.38a53.54,53.54,0,0,0,0-19.51c-.18-1,.16-1.23,1-1.39q7.33-1.41,14.66-2.91c1-.21,1.46-.09,1.65,1.08A86.71,86.71,0,0,1,190.64,117.39Z"
+        />
+        <path
+          fill="#f39e1f"
+          d="M117.28,190.64a83.24,83.24,0,0,1-12.9-1.15c-1.07-.19-1.38-.53-1.16-1.6q1.52-7.39,2.94-14.82c.16-.8.43-1.12,1.32-.95a53.31,53.31,0,0,0,19.67,0c.92-.17,1.14.2,1.29,1q1.44,7.42,2.95,14.82c.19.95,0,1.35-1,1.54A83,83,0,0,1,117.28,190.64Z"
+        />
+        <path
+          fill="#f39e1f"
+          d="M70.7,86.15,70,85.74c-4.23-2.84-8.45-5.69-12.71-8.49-.76-.5-.93-.86-.36-1.67A75.59,75.59,0,0,1,75.41,57.11c.85-.6,1.29-.66,1.93.33,2.71,4.18,5.5,8.3,8.3,12.42.53.78.62,1.18-.28,1.81A54.6,54.6,0,0,0,71.68,85.32C71.07,86.18,71.05,86.17,70.7,86.15Z"
+        />
+        <path
+          fill="#f39e1f"
+          d="M178,76.28c.05.58-.38.7-.69.9-4.27,2.87-8.55,5.72-12.82,8.6-.6.41-1,.47-1.44-.23a54.76,54.76,0,0,0-14-14c-.66-.46-.69-.8-.25-1.45q4.33-6.39,8.59-12.83c.47-.72.82-.84,1.56-.33A74.64,74.64,0,0,1,177.53,75.5C177.72,75.77,177.89,76.06,178,76.28Z"
+        />
+        <path
+          fill="#f39e1f"
+          d="M70.68,148.46c.48-.11.59.27.77.52A55.65,55.65,0,0,0,85.59,163.1c.58.4.66.72.26,1.32q-4.38,6.47-8.69,13c-.41.63-.74.81-1.43.32a74.65,74.65,0,0,1-18.8-18.8c-.42-.61-.48-1,.23-1.46,4.34-2.87,8.65-5.78,13-8.67C70.32,148.67,70.52,148.56,70.68,148.46Z"
+        />
+        <path
+          fill="#f39e1f"
+          d="M158.24,178.06c-.56-.08-.67-.5-.87-.8-2.84-4.23-5.66-8.47-8.52-12.68-.47-.69-.47-1,.29-1.56A54.46,54.46,0,0,0,163,149.11c.53-.77.9-.7,1.57-.24q6.33,4.29,12.7,8.49c.81.53.86.91.32,1.68a74.06,74.06,0,0,1-18.46,18.45C158.84,177.71,158.5,177.9,158.24,178.06Z"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/apps/app/components/icons/module/index.ts b/apps/app/components/icons/module/index.ts
new file mode 100644
index 000000000..e82014b2f
--- /dev/null
+++ b/apps/app/components/icons/module/index.ts
@@ -0,0 +1,7 @@
+export * from "./backlog";
+export * from "./cancelled";
+export * from "./completed";
+export * from "./in-progress";
+export * from "./module-status-icon";
+export * from "./paused";
+export * from "./planned";
diff --git a/apps/app/components/icons/module/module-status-icon.tsx b/apps/app/components/icons/module/module-status-icon.tsx
new file mode 100644
index 000000000..e80497773
--- /dev/null
+++ b/apps/app/components/icons/module/module-status-icon.tsx
@@ -0,0 +1,37 @@
+// icons
+import {
+  ModuleBacklogIcon,
+  ModuleCancelledIcon,
+  ModuleCompletedIcon,
+  ModuleInProgressIcon,
+  ModulePausedIcon,
+  ModulePlannedIcon,
+} from "components/icons";
+// types
+import { TModuleStatus } from "types";
+
+type Props = {
+  status: TModuleStatus;
+  className?: string;
+  height?: string;
+  width?: string;
+};
+
+export const ModuleStatusIcon: React.FC<Props> = ({
+  status,
+  className,
+  height = "12px",
+  width = "12px",
+}) => {
+  if (status === "backlog")
+    return <ModuleBacklogIcon className={className} height={height} width={width} />;
+  else if (status === "cancelled")
+    return <ModuleCancelledIcon className={className} height={height} width={width} />;
+  else if (status === "completed")
+    return <ModuleCompletedIcon className={className} height={height} width={width} />;
+  else if (status === "in-progress")
+    return <ModuleInProgressIcon className={className} height={height} width={width} />;
+  else if (status === "paused")
+    return <ModulePausedIcon className={className} height={height} width={width} />;
+  else return <ModulePlannedIcon className={className} height={height} width={width} />;
+};
diff --git a/apps/app/components/icons/module/paused.tsx b/apps/app/components/icons/module/paused.tsx
new file mode 100644
index 000000000..56ebcfd98
--- /dev/null
+++ b/apps/app/components/icons/module/paused.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+type Props = {
+  width?: string;
+  height?: string;
+  className?: string;
+  color?: string;
+};
+
+export const ModulePausedIcon: React.FC<Props> = ({ width = "20", height = "20", className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_4052_100275)">
+      <path
+        d="M6.4435 10.34C6.6145 10.34 6.75667 10.2825 6.87 10.1675C6.98333 10.0525 7.04 9.91 7.04 9.74V6.24C7.04 6.07 6.98217 5.9275 6.8665 5.8125C6.75082 5.6975 6.60749 5.64 6.4365 5.64C6.2655 5.64 6.12333 5.6975 6.01 5.8125C5.89667 5.9275 5.84 6.07 5.84 6.24V9.74C5.84 9.91 5.89783 10.0525 6.0135 10.1675C6.12918 10.2825 6.27251 10.34 6.4435 10.34ZM9.5635 10.34C9.7345 10.34 9.87667 10.2825 9.99 10.1675C10.1033 10.0525 10.16 9.91 10.16 9.74V6.24C10.16 6.07 10.1022 5.9275 9.9865 5.8125C9.87082 5.6975 9.72749 5.64 9.5565 5.64C9.3855 5.64 9.24333 5.6975 9.13 5.8125C9.01667 5.9275 8.96 6.07 8.96 6.24V9.74C8.96 9.91 9.01783 10.0525 9.1335 10.1675C9.24918 10.2825 9.39251 10.34 9.5635 10.34ZM8 16C6.89333 16 5.85333 15.79 4.88 15.37C3.90667 14.95 3.06 14.38 2.34 13.66C1.62 12.94 1.05 12.0933 0.63 11.12C0.21 10.1467 0 9.10667 0 8C0 7.54667 0.0366667 7.09993 0.11 6.6598C0.183333 6.21965 0.293333 5.78639 0.44 5.36C0.493333 5.21333 0.593333 5.11667 0.74 5.07C0.886667 5.02333 1.02667 5.04199 1.16 5.12596C1.30285 5.20993 1.40523 5.33327 1.46714 5.49596C1.52905 5.65865 1.54 5.82 1.5 5.98C1.42 6.31333 1.35 6.64765 1.29 6.98294C1.23 7.31823 1.2 7.65725 1.2 8C1.2 9.89833 1.85875 11.5063 3.17624 12.8238C4.49375 14.1413 6.10167 14.8 8 14.8C9.89833 14.8 11.5063 14.1413 12.8238 12.8238C14.1413 11.5063 14.8 9.89833 14.8 8C14.8 6.10167 14.1413 4.49375 12.8238 3.17624C11.5063 1.85875 9.89833 1.2 8 1.2C7.63235 1.2 7.26852 1.22667 6.90852 1.28C6.54852 1.33333 6.19235 1.41333 5.84 1.52C5.68 1.57333 5.52 1.56667 5.36 1.5C5.2 1.43333 5.08667 1.32667 5.02 1.18C4.95333 1.03333 4.96 0.886667 5.04 0.74C5.12 0.593333 5.23333 0.493333 5.38 0.44C5.79333 0.306667 6.21333 0.2 6.64 0.12C7.06667 0.04 7.49333 0 7.92 0C9.02667 0 10.07 0.21 11.05 0.63C12.03 1.05 12.8863 1.62 13.6189 2.34C14.3516 3.06 14.9316 3.90667 15.3589 4.88C15.7863 5.85333 16 6.89333 16 8C16 9.10667 15.79 10.1467 15.37 11.12C14.95 12.0933 14.38 12.94 13.66 13.66C12.94 14.38 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM2.65764 3.62C2.37921 3.62 2.14333 3.52255 1.95 3.32764C1.75667 3.13275 1.66 2.89608 1.66 2.61764C1.66 2.33921 1.75745 2.10333 1.95236 1.91C2.14725 1.71667 2.38392 1.62 2.66236 1.62C2.94079 1.62 3.17667 1.71745 3.37 1.91236C3.56333 2.10725 3.66 2.34392 3.66 2.62236C3.66 2.90079 3.56255 3.13667 3.36764 3.33C3.17275 3.52333 2.93608 3.62 2.65764 3.62Z"
+        fill="#525252"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4052_100275">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/apps/app/components/icons/module/planned.tsx b/apps/app/components/icons/module/planned.tsx
new file mode 100644
index 000000000..97592057c
--- /dev/null
+++ b/apps/app/components/icons/module/planned.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+type Props = {
+  width?: string;
+  height?: string;
+  className?: string;
+  color?: string;
+};
+
+export const ModulePlannedIcon: React.FC<Props> = ({ width = "20", height = "20", className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.57177 7.43329L11.3665 10.228C11.4883 10.3498 11.5441 10.4809 11.5339 10.6213C11.5238 10.7617 11.4578 10.8928 11.336 11.0146C11.2142 11.1364 11.0794 11.1973 10.9317 11.1973C10.784 11.1973 10.6492 11.1364 10.5274 11.0146L7.64476 8.12349C7.57709 8.05582 7.52408 7.98139 7.48574 7.90018C7.4474 7.81898 7.42823 7.72538 7.42823 7.61936V3.51362C7.42823 3.35574 7.48405 3.22097 7.5957 3.10932C7.70734 2.99768 7.84211 2.94185 8 2.94185C8.15789 2.94185 8.29266 2.99768 8.4043 3.10932C8.51595 3.22097 8.57177 3.35574 8.57177 3.51362V7.43329ZM0.806954 11.4933C0.573486 11.04 0.390212 10.5655 0.257131 10.0698C0.124064 9.57411 0.0383541 9.07477 0 8.57177H1.15709C1.18077 8.98793 1.24646 9.38746 1.35418 9.77036C1.46188 10.1533 1.60427 10.5297 1.78133 10.8996L0.806954 11.4933ZM0.021992 7.42823C0.0603462 6.92523 0.143806 6.4273 0.272371 5.93444C0.400937 5.4416 0.579131 4.96567 0.806954 4.50665L1.80333 5.07842C1.62062 5.44834 1.47315 5.82983 1.36093 6.22287C1.24872 6.61591 1.18077 7.0177 1.15709 7.42823H0.021992ZM3.52381 14.6128C3.10877 14.3286 2.71855 14.0103 2.35315 13.6578C1.98774 13.3054 1.66294 12.9217 1.37872 12.5067L2.3751 11.9044C2.5939 12.2507 2.84879 12.5656 3.13976 12.8492C3.43073 13.1329 3.74934 13.3914 4.09558 13.6249L3.52381 14.6128ZM2.3751 4.09558L1.37872 3.52381C1.66294 3.09411 1.98408 2.70163 2.34215 2.34637C2.70023 1.99112 3.09411 1.67139 3.52381 1.38719L4.09558 2.3751C3.75837 2.60856 3.44568 2.86571 3.15753 3.14653C2.86937 3.42736 2.60856 3.7437 2.3751 4.09558ZM7.42823 16C6.92523 15.9616 6.4273 15.8745 5.93444 15.7386C5.4416 15.6027 4.96567 15.4209 4.50665 15.193L5.07842 14.2187C5.44834 14.4014 5.82983 14.5452 6.22287 14.6501C6.61591 14.7549 7.0177 14.8192 7.42823 14.8429V16ZM5.10042 1.80333L4.50665 0.806954C4.96567 0.579131 5.4416 0.397272 5.93444 0.261376C6.4273 0.125479 6.92523 0.0383541 7.42823 0V1.15709C7.0177 1.18077 6.61957 1.24872 6.23386 1.36093C5.84815 1.47315 5.47034 1.62062 5.10042 1.80333ZM8.57177 16V14.8429C8.9823 14.8192 9.38409 14.7549 9.77713 14.6501C10.1702 14.5452 10.5517 14.4014 10.9216 14.2187L11.4933 15.193C11.0343 15.4209 10.5584 15.6027 10.0656 15.7386C9.5727 15.8745 9.07477 15.9616 8.57177 16ZM10.9216 1.78133C10.5517 1.59862 10.1702 1.45482 9.77713 1.34994C9.38409 1.24505 8.9823 1.18077 8.57177 1.15709V0C9.07477 0.0383541 9.5727 0.125479 10.0656 0.261376C10.5584 0.397272 11.0343 0.579131 11.4933 0.806954L10.9216 1.78133ZM12.4762 14.6128L11.9044 13.6469C12.2563 13.4134 12.5726 13.149 12.8535 12.8535C13.1343 12.558 13.3914 12.2416 13.6249 11.9044L14.6128 12.4982C14.3286 12.9132 14.0052 13.297 13.6426 13.6494C13.28 14.0018 12.8912 14.323 12.4762 14.6128ZM13.6249 4.08713C13.3914 3.74991 13.1306 3.43862 12.8425 3.15328C12.5543 2.86796 12.2416 2.60856 11.9044 2.3751L12.4762 1.38719C12.8912 1.67703 13.28 1.99817 13.6426 2.3506C14.0052 2.70304 14.3314 3.08678 14.6213 3.50181L13.6249 4.08713ZM14.8429 7.42823C14.8192 7.0177 14.7535 6.61957 14.6458 6.23386C14.5381 5.84815 14.3929 5.46752 14.2102 5.09197L15.193 4.50665C15.4265 4.96003 15.6098 5.43314 15.7429 5.926C15.8759 6.41884 15.9616 6.91958 16 7.42823H14.8429ZM15.193 11.4933L14.2187 10.9216C14.4014 10.5517 14.5452 10.1702 14.6501 9.77713C14.7549 9.38409 14.8192 8.9823 14.8429 8.57177H16C15.9616 9.07477 15.8745 9.5727 15.7386 10.0656C15.6027 10.5584 15.4209 11.0343 15.193 11.4933Z"
+      fill="#3f76ff"
+    />
+  </svg>
+);
diff --git a/apps/app/components/modules/gantt-chart/blocks.tsx b/apps/app/components/modules/gantt-chart/blocks.tsx
index bcf307098..c6400ad82 100644
--- a/apps/app/components/modules/gantt-chart/blocks.tsx
+++ b/apps/app/components/modules/gantt-chart/blocks.tsx
@@ -2,6 +2,8 @@ import { useRouter } from "next/router";
 
 // ui
 import { Tooltip } from "components/ui";
+// icons
+import { ModuleStatusIcon } from "components/icons";
 // helpers
 import { renderShortDate } from "helpers/date-time.helper";
 // types
@@ -49,6 +51,7 @@ export const ModuleGanttSidebarBlock = ({ data }: { data: IModule }) => {
       className="relative w-full flex items-center gap-2 h-full"
       onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data.id}`)}
     >
+      <ModuleStatusIcon status={data?.status ?? "backlog"} height="16px" width="16px" />
       <h6 className="text-sm font-medium flex-grow truncate">{data.name}</h6>
     </div>
   );
diff --git a/apps/app/components/modules/select/status.tsx b/apps/app/components/modules/select/status.tsx
index 08192cd5d..8c16ca14c 100644
--- a/apps/app/components/modules/select/status.tsx
+++ b/apps/app/components/modules/select/status.tsx
@@ -6,6 +6,7 @@ import { Controller, FieldError, Control } from "react-hook-form";
 import { CustomSelect } from "components/ui";
 // icons
 import { Squares2X2Icon } from "@heroicons/react/24/outline";
+import { ModuleStatusIcon } from "components/icons";
 // types
 import type { IModule } from "types";
 // constants
@@ -31,12 +32,7 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
             }`}
           >
             {value ? (
-              <span
-                className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                style={{
-                  backgroundColor: MODULE_STATUS.find((s) => s.value === value)?.color,
-                }}
-              />
+              <ModuleStatusIcon status={value} />
             ) : (
               <Squares2X2Icon
                 className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`}
@@ -53,12 +49,7 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
         {MODULE_STATUS.map((status) => (
           <CustomSelect.Option key={status.value} value={status.value}>
             <div className="flex items-center gap-2">
-              <span
-                className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                style={{
-                  backgroundColor: status.color,
-                }}
-              />
+              <ModuleStatusIcon status={status.value} />
               {status.label}
             </div>
           </CustomSelect.Option>
diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx
index 0407b95aa..e815d1950 100644
--- a/apps/app/components/modules/sidebar.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@@ -48,7 +48,7 @@ const defaultValues: Partial<IModule> = {
   members_list: [],
   start_date: null,
   target_date: null,
-  status: null,
+  status: "backlog",
 };
 
 type Props = {
diff --git a/apps/app/constants/module.ts b/apps/app/constants/module.ts
index ffacdfa3c..058171328 100644
--- a/apps/app/constants/module.ts
+++ b/apps/app/constants/module.ts
@@ -1,8 +1,15 @@
-export const MODULE_STATUS = [
-  { label: "Backlog", value: "backlog", color: "#5e6ad2" },
-  { label: "Planned", value: "planned", color: "#26b5ce" },
-  { label: "In Progress", value: "in-progress", color: "#f2c94c" },
-  { label: "Paused", value: "paused", color: "#ff6900" },
-  { label: "Completed", value: "completed", color: "#4cb782" },
-  { label: "Cancelled", value: "cancelled", color: "#cc1d10" },
+// types
+import { TModuleStatus } from "types";
+
+export const MODULE_STATUS: {
+  label: string;
+  value: TModuleStatus;
+  color: string;
+}[] = [
+  { label: "Backlog", value: "backlog", color: "#a3a3a2" },
+  { label: "Planned", value: "planned", color: "#3f76ff" },
+  { label: "In Progress", value: "in-progress", color: "#f39e1f" },
+  { label: "Paused", value: "paused", color: "#525252" },
+  { label: "Completed", value: "completed", color: "#16a34a" },
+  { label: "Cancelled", value: "cancelled", color: "#ef4444" },
 ];
diff --git a/apps/app/types/modules.d.ts b/apps/app/types/modules.d.ts
index e395f6f16..709d1d300 100644
--- a/apps/app/types/modules.d.ts
+++ b/apps/app/types/modules.d.ts
@@ -10,6 +10,14 @@ import type {
   linkDetails,
 } from "types";
 
+export type TModuleStatus =
+  | "backlog"
+  | "planned"
+  | "in-progress"
+  | "paused"
+  | "completed"
+  | "cancelled";
+
 export interface IModule {
   backlog_issues: number;
   cancelled_issues: number;
@@ -39,7 +47,7 @@ export interface IModule {
   sort_order: number;
   start_date: string | null;
   started_issues: number;
-  status: "backlog" | "planned" | "in-progress" | "paused" | "completed" | "cancelled" | null;
+  status: TModuleStatus;
   target_date: string | null;
   total_issues: number;
   unstarted_issues: number;

From 23f5d5d1726b250937154802e028118b804c74a4 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Wed, 30 Aug 2023 12:15:08 +0530
Subject: [PATCH 43/70] chore: track public board comments and reaction users
 for public deploy boards (#1972)

* chore: track project deploy board comment and reaction users for public deploy boards

* dev: remove tracking from project viewsets
---
 apiserver/plane/api/serializers/__init__.py |  1 +
 apiserver/plane/api/serializers/project.py  | 15 +++++++-
 apiserver/plane/api/views/issue.py          | 39 ++++++++++++++++++++-
 apiserver/plane/db/models/__init__.py       |  1 +
 apiserver/plane/db/models/project.py        | 15 ++++++++
 5 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/apiserver/plane/api/serializers/__init__.py b/apiserver/plane/api/serializers/__init__.py
index 93b21a7f2..2dc910caf 100644
--- a/apiserver/plane/api/serializers/__init__.py
+++ b/apiserver/plane/api/serializers/__init__.py
@@ -20,6 +20,7 @@ from .project import (
     ProjectMemberLiteSerializer,
     ProjectDeployBoardSerializer,
     ProjectMemberAdminSerializer,
+    ProjectPublicMemberSerializer
 )
 from .state import StateSerializer, StateLiteSerializer
 from .view import IssueViewSerializer, IssueViewFavoriteSerializer
diff --git a/apiserver/plane/api/serializers/project.py b/apiserver/plane/api/serializers/project.py
index 55847881d..49d986cae 100644
--- a/apiserver/plane/api/serializers/project.py
+++ b/apiserver/plane/api/serializers/project.py
@@ -15,6 +15,7 @@ from plane.db.models import (
     ProjectIdentifier,
     ProjectFavorite,
     ProjectDeployBoard,
+    ProjectPublicMember,
 )
 
 
@@ -177,5 +178,17 @@ class ProjectDeployBoardSerializer(BaseSerializer):
         fields = "__all__"
         read_only_fields = [
             "workspace",
-            "project" "anchor",
+            "project", "anchor",
+        ]
+
+
+class ProjectPublicMemberSerializer(BaseSerializer):
+
+    class Meta:
+        model = ProjectPublicMember
+        fields = "__all__"
+        read_only_fields = [
+            "workspace",
+            "project",
+            "member",
         ]
diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index 05434aec5..802431d2e 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -75,6 +75,7 @@ from plane.db.models import (
     CommentReaction,
     ProjectDeployBoard,
     IssueVote,
+    ProjectPublicMember,
 )
 from plane.bgtasks.issue_activites_task import issue_activity
 from plane.utils.grouper import group_results
@@ -1545,6 +1546,16 @@ class IssueCommentPublicViewSet(BaseViewSet):
                     project_id=str(project_id),
                     current_instance=None,
                 )
+                if not ProjectMember.objects.filter(
+                    project_id=project_id,
+                    member=request.user,
+                ).exists():
+                    # Add the user for workspace tracking
+                    _ = ProjectPublicMember.objects.get_or_create(
+                        project_id=project_id,
+                        member=request.user,
+                    )
+
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
         except Exception as e:
@@ -1671,6 +1682,15 @@ class IssueReactionPublicViewSet(BaseViewSet):
                 serializer.save(
                     project_id=project_id, issue_id=issue_id, actor=request.user
                 )
+                if not ProjectMember.objects.filter(
+                    project_id=project_id,
+                    member=request.user,
+                ).exists():
+                    # Add the user for workspace tracking
+                    _ = ProjectPublicMember.objects.get_or_create(
+                        project_id=project_id,
+                        member=request.user,
+                    )
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
         except ProjectDeployBoard.DoesNotExist:
@@ -1756,6 +1776,14 @@ class CommentReactionPublicViewSet(BaseViewSet):
                 serializer.save(
                     project_id=project_id, comment_id=comment_id, actor=request.user
                 )
+                if not ProjectMember.objects.filter(
+                    project_id=project_id, member=request.user
+                ).exists():
+                    # Add the user for workspace tracking
+                    _ = ProjectPublicMember.objects.get_or_create(
+                        project_id=project_id,
+                        member=request.user,
+                    )
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
         except ProjectDeployBoard.DoesNotExist:
@@ -1823,6 +1851,14 @@ class IssueVotePublicViewSet(BaseViewSet):
                 project_id=project_id,
                 issue_id=issue_id,
             )
+            # Add the user for workspace tracking
+            if not ProjectMember.objects.filter(
+                project_id=project_id, member=request.user
+            ).exists():
+                _ = ProjectPublicMember.objects.get_or_create(
+                    project_id=project_id,
+                    member=request.user,
+                )
             issue_vote.vote = request.data.get("vote", 1)
             issue_vote.save()
             serializer = IssueVoteSerializer(issue_vote)
@@ -2021,4 +2057,5 @@ class ProjectIssuesPublicEndpoint(BaseAPIView):
             return Response(
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
-            )
\ No newline at end of file
+            )
+
diff --git a/apiserver/plane/db/models/__init__.py b/apiserver/plane/db/models/__init__.py
index 659eea3eb..90532dc64 100644
--- a/apiserver/plane/db/models/__init__.py
+++ b/apiserver/plane/db/models/__init__.py
@@ -19,6 +19,7 @@ from .project import (
     ProjectIdentifier,
     ProjectFavorite,
     ProjectDeployBoard,
+    ProjectPublicMember,
 )
 
 from .issue import (
diff --git a/apiserver/plane/db/models/project.py b/apiserver/plane/db/models/project.py
index 0c2b5cb96..da155af40 100644
--- a/apiserver/plane/db/models/project.py
+++ b/apiserver/plane/db/models/project.py
@@ -254,3 +254,18 @@ class ProjectDeployBoard(ProjectBaseModel):
     def __str__(self):
         """Return project and anchor"""
         return f"{self.anchor} <{self.project.name}>"
+
+
+class ProjectPublicMember(ProjectBaseModel):
+    member = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="public_project_members",
+    )
+
+    class Meta:
+        unique_together = ["project", "member"]
+        verbose_name = "Project Public Member"
+        verbose_name_plural = "Project Public Members"
+        db_table = "project_public_members"
+        ordering = ("-created_at",)

From 426f65898b24856b6c775955167a7322f0c4adf6 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Wed, 30 Aug 2023 12:18:18 +0530
Subject: [PATCH 44/70] feat: user timezones (#2009)

* dev: user timezones

* feat: user timezones
---
 apiserver/plane/api/views/base.py             | 27 +++++++++++---
 ..._alter_analyticview_created_by_and_more.py | 35 +++++++++++++++++++
 apiserver/plane/db/models/user.py             |  7 ++--
 apiserver/plane/settings/common.py            |  4 +--
 4 files changed, 62 insertions(+), 11 deletions(-)
 create mode 100644 apiserver/plane/db/migrations/0042_alter_analyticview_created_by_and_more.py

diff --git a/apiserver/plane/api/views/base.py b/apiserver/plane/api/views/base.py
index 3c260e03b..60b0ec0c6 100644
--- a/apiserver/plane/api/views/base.py
+++ b/apiserver/plane/api/views/base.py
@@ -1,24 +1,41 @@
+# Python imports
+import zoneinfo
+
 # Django imports
 from django.urls import resolve
 from django.conf import settings
-
+from django.utils import timezone
 # Third part imports
+
 from rest_framework import status
 from rest_framework.viewsets import ModelViewSet
 from rest_framework.exceptions import APIException
 from rest_framework.views import APIView
 from rest_framework.filters import SearchFilter
 from rest_framework.permissions import IsAuthenticated
-from rest_framework.exceptions import NotFound
 from sentry_sdk import capture_exception
 from django_filters.rest_framework import DjangoFilterBackend
 
 # Module imports
-from plane.db.models import Workspace, Project
 from plane.utils.paginator import BasePaginator
 
 
-class BaseViewSet(ModelViewSet, BasePaginator):
+class TimezoneMixin:
+    """
+    This enables timezone conversion according
+    to the user set timezone
+    """
+    def initial(self, request, *args, **kwargs):
+        super().initial(request, *args, **kwargs)
+        if request.user.is_authenticated:
+            timezone.activate(zoneinfo.ZoneInfo(request.user.user_timezone))
+        else:
+            timezone.deactivate()
+
+
+
+
+class BaseViewSet(TimezoneMixin, ModelViewSet, BasePaginator):
 
     model = None
 
@@ -67,7 +84,7 @@ class BaseViewSet(ModelViewSet, BasePaginator):
             return self.kwargs.get("pk", None)
 
 
-class BaseAPIView(APIView, BasePaginator):
+class BaseAPIView(TimezoneMixin, APIView, BasePaginator):
 
     permission_classes = [
         IsAuthenticated,
diff --git a/apiserver/plane/db/migrations/0042_alter_analyticview_created_by_and_more.py b/apiserver/plane/db/migrations/0042_alter_analyticview_created_by_and_more.py
new file mode 100644
index 000000000..f7d6a979d
--- /dev/null
+++ b/apiserver/plane/db/migrations/0042_alter_analyticview_created_by_and_more.py
@@ -0,0 +1,35 @@
+# Generated by Django 4.2.3 on 2023-08-29 06:26
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+def update_user_timezones(apps, schema_editor):
+    UserModel = apps.get_model("db", "User")
+    updated_users = []
+    for obj in UserModel.objects.all():
+        obj.user_timezone = "UTC"
+        updated_users.append(obj)
+    UserModel.objects.bulk_update(updated_users, ["user_timezone"], batch_size=100)
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0041_cycle_sort_order_issuecomment_access_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='user',
+            name='user_timezone',
+            field=models.CharField(choices=[('Africa/Abidjan', 'Africa/Abidjan'), ('Africa/Accra', 'Africa/Accra'), ('Africa/Addis_Ababa', 'Africa/Addis_Ababa'), ('Africa/Algiers', 'Africa/Algiers'), ('Africa/Asmara', 'Africa/Asmara'), ('Africa/Asmera', 'Africa/Asmera'), ('Africa/Bamako', 'Africa/Bamako'), ('Africa/Bangui', 'Africa/Bangui'), ('Africa/Banjul', 'Africa/Banjul'), ('Africa/Bissau', 'Africa/Bissau'), ('Africa/Blantyre', 'Africa/Blantyre'), ('Africa/Brazzaville', 'Africa/Brazzaville'), ('Africa/Bujumbura', 'Africa/Bujumbura'), ('Africa/Cairo', 'Africa/Cairo'), ('Africa/Casablanca', 'Africa/Casablanca'), ('Africa/Ceuta', 'Africa/Ceuta'), ('Africa/Conakry', 'Africa/Conakry'), ('Africa/Dakar', 'Africa/Dakar'), ('Africa/Dar_es_Salaam', 'Africa/Dar_es_Salaam'), ('Africa/Djibouti', 'Africa/Djibouti'), ('Africa/Douala', 'Africa/Douala'), ('Africa/El_Aaiun', 'Africa/El_Aaiun'), ('Africa/Freetown', 'Africa/Freetown'), ('Africa/Gaborone', 'Africa/Gaborone'), ('Africa/Harare', 'Africa/Harare'), ('Africa/Johannesburg', 'Africa/Johannesburg'), ('Africa/Juba', 'Africa/Juba'), ('Africa/Kampala', 'Africa/Kampala'), ('Africa/Khartoum', 'Africa/Khartoum'), ('Africa/Kigali', 'Africa/Kigali'), ('Africa/Kinshasa', 'Africa/Kinshasa'), ('Africa/Lagos', 'Africa/Lagos'), ('Africa/Libreville', 'Africa/Libreville'), ('Africa/Lome', 'Africa/Lome'), ('Africa/Luanda', 'Africa/Luanda'), ('Africa/Lubumbashi', 'Africa/Lubumbashi'), ('Africa/Lusaka', 'Africa/Lusaka'), ('Africa/Malabo', 'Africa/Malabo'), ('Africa/Maputo', 'Africa/Maputo'), ('Africa/Maseru', 'Africa/Maseru'), ('Africa/Mbabane', 'Africa/Mbabane'), ('Africa/Mogadishu', 'Africa/Mogadishu'), ('Africa/Monrovia', 'Africa/Monrovia'), ('Africa/Nairobi', 'Africa/Nairobi'), ('Africa/Ndjamena', 'Africa/Ndjamena'), ('Africa/Niamey', 'Africa/Niamey'), ('Africa/Nouakchott', 'Africa/Nouakchott'), ('Africa/Ouagadougou', 'Africa/Ouagadougou'), ('Africa/Porto-Novo', 'Africa/Porto-Novo'), ('Africa/Sao_Tome', 'Africa/Sao_Tome'), ('Africa/Timbuktu', 'Africa/Timbuktu'), ('Africa/Tripoli', 'Africa/Tripoli'), ('Africa/Tunis', 'Africa/Tunis'), ('Africa/Windhoek', 'Africa/Windhoek'), ('America/Adak', 'America/Adak'), ('America/Anchorage', 'America/Anchorage'), ('America/Anguilla', 'America/Anguilla'), ('America/Antigua', 'America/Antigua'), ('America/Araguaina', 'America/Araguaina'), ('America/Argentina/Buenos_Aires', 'America/Argentina/Buenos_Aires'), ('America/Argentina/Catamarca', 'America/Argentina/Catamarca'), ('America/Argentina/ComodRivadavia', 'America/Argentina/ComodRivadavia'), ('America/Argentina/Cordoba', 'America/Argentina/Cordoba'), ('America/Argentina/Jujuy', 'America/Argentina/Jujuy'), ('America/Argentina/La_Rioja', 'America/Argentina/La_Rioja'), ('America/Argentina/Mendoza', 'America/Argentina/Mendoza'), ('America/Argentina/Rio_Gallegos', 'America/Argentina/Rio_Gallegos'), ('America/Argentina/Salta', 'America/Argentina/Salta'), ('America/Argentina/San_Juan', 'America/Argentina/San_Juan'), ('America/Argentina/San_Luis', 'America/Argentina/San_Luis'), ('America/Argentina/Tucuman', 'America/Argentina/Tucuman'), ('America/Argentina/Ushuaia', 'America/Argentina/Ushuaia'), ('America/Aruba', 'America/Aruba'), ('America/Asuncion', 'America/Asuncion'), ('America/Atikokan', 'America/Atikokan'), ('America/Atka', 'America/Atka'), ('America/Bahia', 'America/Bahia'), ('America/Bahia_Banderas', 'America/Bahia_Banderas'), ('America/Barbados', 'America/Barbados'), ('America/Belem', 'America/Belem'), ('America/Belize', 'America/Belize'), ('America/Blanc-Sablon', 'America/Blanc-Sablon'), ('America/Boa_Vista', 'America/Boa_Vista'), ('America/Bogota', 'America/Bogota'), ('America/Boise', 'America/Boise'), ('America/Buenos_Aires', 'America/Buenos_Aires'), ('America/Cambridge_Bay', 'America/Cambridge_Bay'), ('America/Campo_Grande', 'America/Campo_Grande'), ('America/Cancun', 'America/Cancun'), ('America/Caracas', 'America/Caracas'), ('America/Catamarca', 'America/Catamarca'), ('America/Cayenne', 'America/Cayenne'), ('America/Cayman', 'America/Cayman'), ('America/Chicago', 'America/Chicago'), ('America/Chihuahua', 'America/Chihuahua'), ('America/Ciudad_Juarez', 'America/Ciudad_Juarez'), ('America/Coral_Harbour', 'America/Coral_Harbour'), ('America/Cordoba', 'America/Cordoba'), ('America/Costa_Rica', 'America/Costa_Rica'), ('America/Creston', 'America/Creston'), ('America/Cuiaba', 'America/Cuiaba'), ('America/Curacao', 'America/Curacao'), ('America/Danmarkshavn', 'America/Danmarkshavn'), ('America/Dawson', 'America/Dawson'), ('America/Dawson_Creek', 'America/Dawson_Creek'), ('America/Denver', 'America/Denver'), ('America/Detroit', 'America/Detroit'), ('America/Dominica', 'America/Dominica'), ('America/Edmonton', 'America/Edmonton'), ('America/Eirunepe', 'America/Eirunepe'), ('America/El_Salvador', 'America/El_Salvador'), ('America/Ensenada', 'America/Ensenada'), ('America/Fort_Nelson', 'America/Fort_Nelson'), ('America/Fort_Wayne', 'America/Fort_Wayne'), ('America/Fortaleza', 'America/Fortaleza'), ('America/Glace_Bay', 'America/Glace_Bay'), ('America/Godthab', 'America/Godthab'), ('America/Goose_Bay', 'America/Goose_Bay'), ('America/Grand_Turk', 'America/Grand_Turk'), ('America/Grenada', 'America/Grenada'), ('America/Guadeloupe', 'America/Guadeloupe'), ('America/Guatemala', 'America/Guatemala'), ('America/Guayaquil', 'America/Guayaquil'), ('America/Guyana', 'America/Guyana'), ('America/Halifax', 'America/Halifax'), ('America/Havana', 'America/Havana'), ('America/Hermosillo', 'America/Hermosillo'), ('America/Indiana/Indianapolis', 'America/Indiana/Indianapolis'), ('America/Indiana/Knox', 'America/Indiana/Knox'), ('America/Indiana/Marengo', 'America/Indiana/Marengo'), ('America/Indiana/Petersburg', 'America/Indiana/Petersburg'), ('America/Indiana/Tell_City', 'America/Indiana/Tell_City'), ('America/Indiana/Vevay', 'America/Indiana/Vevay'), ('America/Indiana/Vincennes', 'America/Indiana/Vincennes'), ('America/Indiana/Winamac', 'America/Indiana/Winamac'), ('America/Indianapolis', 'America/Indianapolis'), ('America/Inuvik', 'America/Inuvik'), ('America/Iqaluit', 'America/Iqaluit'), ('America/Jamaica', 'America/Jamaica'), ('America/Jujuy', 'America/Jujuy'), ('America/Juneau', 'America/Juneau'), ('America/Kentucky/Louisville', 'America/Kentucky/Louisville'), ('America/Kentucky/Monticello', 'America/Kentucky/Monticello'), ('America/Knox_IN', 'America/Knox_IN'), ('America/Kralendijk', 'America/Kralendijk'), ('America/La_Paz', 'America/La_Paz'), ('America/Lima', 'America/Lima'), ('America/Los_Angeles', 'America/Los_Angeles'), ('America/Louisville', 'America/Louisville'), ('America/Lower_Princes', 'America/Lower_Princes'), ('America/Maceio', 'America/Maceio'), ('America/Managua', 'America/Managua'), ('America/Manaus', 'America/Manaus'), ('America/Marigot', 'America/Marigot'), ('America/Martinique', 'America/Martinique'), ('America/Matamoros', 'America/Matamoros'), ('America/Mazatlan', 'America/Mazatlan'), ('America/Mendoza', 'America/Mendoza'), ('America/Menominee', 'America/Menominee'), ('America/Merida', 'America/Merida'), ('America/Metlakatla', 'America/Metlakatla'), ('America/Mexico_City', 'America/Mexico_City'), ('America/Miquelon', 'America/Miquelon'), ('America/Moncton', 'America/Moncton'), ('America/Monterrey', 'America/Monterrey'), ('America/Montevideo', 'America/Montevideo'), ('America/Montreal', 'America/Montreal'), ('America/Montserrat', 'America/Montserrat'), ('America/Nassau', 'America/Nassau'), ('America/New_York', 'America/New_York'), ('America/Nipigon', 'America/Nipigon'), ('America/Nome', 'America/Nome'), ('America/Noronha', 'America/Noronha'), ('America/North_Dakota/Beulah', 'America/North_Dakota/Beulah'), ('America/North_Dakota/Center', 'America/North_Dakota/Center'), ('America/North_Dakota/New_Salem', 'America/North_Dakota/New_Salem'), ('America/Nuuk', 'America/Nuuk'), ('America/Ojinaga', 'America/Ojinaga'), ('America/Panama', 'America/Panama'), ('America/Pangnirtung', 'America/Pangnirtung'), ('America/Paramaribo', 'America/Paramaribo'), ('America/Phoenix', 'America/Phoenix'), ('America/Port-au-Prince', 'America/Port-au-Prince'), ('America/Port_of_Spain', 'America/Port_of_Spain'), ('America/Porto_Acre', 'America/Porto_Acre'), ('America/Porto_Velho', 'America/Porto_Velho'), ('America/Puerto_Rico', 'America/Puerto_Rico'), ('America/Punta_Arenas', 'America/Punta_Arenas'), ('America/Rainy_River', 'America/Rainy_River'), ('America/Rankin_Inlet', 'America/Rankin_Inlet'), ('America/Recife', 'America/Recife'), ('America/Regina', 'America/Regina'), ('America/Resolute', 'America/Resolute'), ('America/Rio_Branco', 'America/Rio_Branco'), ('America/Rosario', 'America/Rosario'), ('America/Santa_Isabel', 'America/Santa_Isabel'), ('America/Santarem', 'America/Santarem'), ('America/Santiago', 'America/Santiago'), ('America/Santo_Domingo', 'America/Santo_Domingo'), ('America/Sao_Paulo', 'America/Sao_Paulo'), ('America/Scoresbysund', 'America/Scoresbysund'), ('America/Shiprock', 'America/Shiprock'), ('America/Sitka', 'America/Sitka'), ('America/St_Barthelemy', 'America/St_Barthelemy'), ('America/St_Johns', 'America/St_Johns'), ('America/St_Kitts', 'America/St_Kitts'), ('America/St_Lucia', 'America/St_Lucia'), ('America/St_Thomas', 'America/St_Thomas'), ('America/St_Vincent', 'America/St_Vincent'), ('America/Swift_Current', 'America/Swift_Current'), ('America/Tegucigalpa', 'America/Tegucigalpa'), ('America/Thule', 'America/Thule'), ('America/Thunder_Bay', 'America/Thunder_Bay'), ('America/Tijuana', 'America/Tijuana'), ('America/Toronto', 'America/Toronto'), ('America/Tortola', 'America/Tortola'), ('America/Vancouver', 'America/Vancouver'), ('America/Virgin', 'America/Virgin'), ('America/Whitehorse', 'America/Whitehorse'), ('America/Winnipeg', 'America/Winnipeg'), ('America/Yakutat', 'America/Yakutat'), ('America/Yellowknife', 'America/Yellowknife'), ('Antarctica/Casey', 'Antarctica/Casey'), ('Antarctica/Davis', 'Antarctica/Davis'), ('Antarctica/DumontDUrville', 'Antarctica/DumontDUrville'), ('Antarctica/Macquarie', 'Antarctica/Macquarie'), ('Antarctica/Mawson', 'Antarctica/Mawson'), ('Antarctica/McMurdo', 'Antarctica/McMurdo'), ('Antarctica/Palmer', 'Antarctica/Palmer'), ('Antarctica/Rothera', 'Antarctica/Rothera'), ('Antarctica/South_Pole', 'Antarctica/South_Pole'), ('Antarctica/Syowa', 'Antarctica/Syowa'), ('Antarctica/Troll', 'Antarctica/Troll'), ('Antarctica/Vostok', 'Antarctica/Vostok'), ('Arctic/Longyearbyen', 'Arctic/Longyearbyen'), ('Asia/Aden', 'Asia/Aden'), ('Asia/Almaty', 'Asia/Almaty'), ('Asia/Amman', 'Asia/Amman'), ('Asia/Anadyr', 'Asia/Anadyr'), ('Asia/Aqtau', 'Asia/Aqtau'), ('Asia/Aqtobe', 'Asia/Aqtobe'), ('Asia/Ashgabat', 'Asia/Ashgabat'), ('Asia/Ashkhabad', 'Asia/Ashkhabad'), ('Asia/Atyrau', 'Asia/Atyrau'), ('Asia/Baghdad', 'Asia/Baghdad'), ('Asia/Bahrain', 'Asia/Bahrain'), ('Asia/Baku', 'Asia/Baku'), ('Asia/Bangkok', 'Asia/Bangkok'), ('Asia/Barnaul', 'Asia/Barnaul'), ('Asia/Beirut', 'Asia/Beirut'), ('Asia/Bishkek', 'Asia/Bishkek'), ('Asia/Brunei', 'Asia/Brunei'), ('Asia/Calcutta', 'Asia/Calcutta'), ('Asia/Chita', 'Asia/Chita'), ('Asia/Choibalsan', 'Asia/Choibalsan'), ('Asia/Chongqing', 'Asia/Chongqing'), ('Asia/Chungking', 'Asia/Chungking'), ('Asia/Colombo', 'Asia/Colombo'), ('Asia/Dacca', 'Asia/Dacca'), ('Asia/Damascus', 'Asia/Damascus'), ('Asia/Dhaka', 'Asia/Dhaka'), ('Asia/Dili', 'Asia/Dili'), ('Asia/Dubai', 'Asia/Dubai'), ('Asia/Dushanbe', 'Asia/Dushanbe'), ('Asia/Famagusta', 'Asia/Famagusta'), ('Asia/Gaza', 'Asia/Gaza'), ('Asia/Harbin', 'Asia/Harbin'), ('Asia/Hebron', 'Asia/Hebron'), ('Asia/Ho_Chi_Minh', 'Asia/Ho_Chi_Minh'), ('Asia/Hong_Kong', 'Asia/Hong_Kong'), ('Asia/Hovd', 'Asia/Hovd'), ('Asia/Irkutsk', 'Asia/Irkutsk'), ('Asia/Istanbul', 'Asia/Istanbul'), ('Asia/Jakarta', 'Asia/Jakarta'), ('Asia/Jayapura', 'Asia/Jayapura'), ('Asia/Jerusalem', 'Asia/Jerusalem'), ('Asia/Kabul', 'Asia/Kabul'), ('Asia/Kamchatka', 'Asia/Kamchatka'), ('Asia/Karachi', 'Asia/Karachi'), ('Asia/Kashgar', 'Asia/Kashgar'), ('Asia/Kathmandu', 'Asia/Kathmandu'), ('Asia/Katmandu', 'Asia/Katmandu'), ('Asia/Khandyga', 'Asia/Khandyga'), ('Asia/Kolkata', 'Asia/Kolkata'), ('Asia/Krasnoyarsk', 'Asia/Krasnoyarsk'), ('Asia/Kuala_Lumpur', 'Asia/Kuala_Lumpur'), ('Asia/Kuching', 'Asia/Kuching'), ('Asia/Kuwait', 'Asia/Kuwait'), ('Asia/Macao', 'Asia/Macao'), ('Asia/Macau', 'Asia/Macau'), ('Asia/Magadan', 'Asia/Magadan'), ('Asia/Makassar', 'Asia/Makassar'), ('Asia/Manila', 'Asia/Manila'), ('Asia/Muscat', 'Asia/Muscat'), ('Asia/Nicosia', 'Asia/Nicosia'), ('Asia/Novokuznetsk', 'Asia/Novokuznetsk'), ('Asia/Novosibirsk', 'Asia/Novosibirsk'), ('Asia/Omsk', 'Asia/Omsk'), ('Asia/Oral', 'Asia/Oral'), ('Asia/Phnom_Penh', 'Asia/Phnom_Penh'), ('Asia/Pontianak', 'Asia/Pontianak'), ('Asia/Pyongyang', 'Asia/Pyongyang'), ('Asia/Qatar', 'Asia/Qatar'), ('Asia/Qostanay', 'Asia/Qostanay'), ('Asia/Qyzylorda', 'Asia/Qyzylorda'), ('Asia/Rangoon', 'Asia/Rangoon'), ('Asia/Riyadh', 'Asia/Riyadh'), ('Asia/Saigon', 'Asia/Saigon'), ('Asia/Sakhalin', 'Asia/Sakhalin'), ('Asia/Samarkand', 'Asia/Samarkand'), ('Asia/Seoul', 'Asia/Seoul'), ('Asia/Shanghai', 'Asia/Shanghai'), ('Asia/Singapore', 'Asia/Singapore'), ('Asia/Srednekolymsk', 'Asia/Srednekolymsk'), ('Asia/Taipei', 'Asia/Taipei'), ('Asia/Tashkent', 'Asia/Tashkent'), ('Asia/Tbilisi', 'Asia/Tbilisi'), ('Asia/Tehran', 'Asia/Tehran'), ('Asia/Tel_Aviv', 'Asia/Tel_Aviv'), ('Asia/Thimbu', 'Asia/Thimbu'), ('Asia/Thimphu', 'Asia/Thimphu'), ('Asia/Tokyo', 'Asia/Tokyo'), ('Asia/Tomsk', 'Asia/Tomsk'), ('Asia/Ujung_Pandang', 'Asia/Ujung_Pandang'), ('Asia/Ulaanbaatar', 'Asia/Ulaanbaatar'), ('Asia/Ulan_Bator', 'Asia/Ulan_Bator'), ('Asia/Urumqi', 'Asia/Urumqi'), ('Asia/Ust-Nera', 'Asia/Ust-Nera'), ('Asia/Vientiane', 'Asia/Vientiane'), ('Asia/Vladivostok', 'Asia/Vladivostok'), ('Asia/Yakutsk', 'Asia/Yakutsk'), ('Asia/Yangon', 'Asia/Yangon'), ('Asia/Yekaterinburg', 'Asia/Yekaterinburg'), ('Asia/Yerevan', 'Asia/Yerevan'), ('Atlantic/Azores', 'Atlantic/Azores'), ('Atlantic/Bermuda', 'Atlantic/Bermuda'), ('Atlantic/Canary', 'Atlantic/Canary'), ('Atlantic/Cape_Verde', 'Atlantic/Cape_Verde'), ('Atlantic/Faeroe', 'Atlantic/Faeroe'), ('Atlantic/Faroe', 'Atlantic/Faroe'), ('Atlantic/Jan_Mayen', 'Atlantic/Jan_Mayen'), ('Atlantic/Madeira', 'Atlantic/Madeira'), ('Atlantic/Reykjavik', 'Atlantic/Reykjavik'), ('Atlantic/South_Georgia', 'Atlantic/South_Georgia'), ('Atlantic/St_Helena', 'Atlantic/St_Helena'), ('Atlantic/Stanley', 'Atlantic/Stanley'), ('Australia/ACT', 'Australia/ACT'), ('Australia/Adelaide', 'Australia/Adelaide'), ('Australia/Brisbane', 'Australia/Brisbane'), ('Australia/Broken_Hill', 'Australia/Broken_Hill'), ('Australia/Canberra', 'Australia/Canberra'), ('Australia/Currie', 'Australia/Currie'), ('Australia/Darwin', 'Australia/Darwin'), ('Australia/Eucla', 'Australia/Eucla'), ('Australia/Hobart', 'Australia/Hobart'), ('Australia/LHI', 'Australia/LHI'), ('Australia/Lindeman', 'Australia/Lindeman'), ('Australia/Lord_Howe', 'Australia/Lord_Howe'), ('Australia/Melbourne', 'Australia/Melbourne'), ('Australia/NSW', 'Australia/NSW'), ('Australia/North', 'Australia/North'), ('Australia/Perth', 'Australia/Perth'), ('Australia/Queensland', 'Australia/Queensland'), ('Australia/South', 'Australia/South'), ('Australia/Sydney', 'Australia/Sydney'), ('Australia/Tasmania', 'Australia/Tasmania'), ('Australia/Victoria', 'Australia/Victoria'), ('Australia/West', 'Australia/West'), ('Australia/Yancowinna', 'Australia/Yancowinna'), ('Brazil/Acre', 'Brazil/Acre'), ('Brazil/DeNoronha', 'Brazil/DeNoronha'), ('Brazil/East', 'Brazil/East'), ('Brazil/West', 'Brazil/West'), ('CET', 'CET'), ('CST6CDT', 'CST6CDT'), ('Canada/Atlantic', 'Canada/Atlantic'), ('Canada/Central', 'Canada/Central'), ('Canada/Eastern', 'Canada/Eastern'), ('Canada/Mountain', 'Canada/Mountain'), ('Canada/Newfoundland', 'Canada/Newfoundland'), ('Canada/Pacific', 'Canada/Pacific'), ('Canada/Saskatchewan', 'Canada/Saskatchewan'), ('Canada/Yukon', 'Canada/Yukon'), ('Chile/Continental', 'Chile/Continental'), ('Chile/EasterIsland', 'Chile/EasterIsland'), ('Cuba', 'Cuba'), ('EET', 'EET'), ('EST', 'EST'), ('EST5EDT', 'EST5EDT'), ('Egypt', 'Egypt'), ('Eire', 'Eire'), ('Etc/GMT', 'Etc/GMT'), ('Etc/GMT+0', 'Etc/GMT+0'), ('Etc/GMT+1', 'Etc/GMT+1'), ('Etc/GMT+10', 'Etc/GMT+10'), ('Etc/GMT+11', 'Etc/GMT+11'), ('Etc/GMT+12', 'Etc/GMT+12'), ('Etc/GMT+2', 'Etc/GMT+2'), ('Etc/GMT+3', 'Etc/GMT+3'), ('Etc/GMT+4', 'Etc/GMT+4'), ('Etc/GMT+5', 'Etc/GMT+5'), ('Etc/GMT+6', 'Etc/GMT+6'), ('Etc/GMT+7', 'Etc/GMT+7'), ('Etc/GMT+8', 'Etc/GMT+8'), ('Etc/GMT+9', 'Etc/GMT+9'), ('Etc/GMT-0', 'Etc/GMT-0'), ('Etc/GMT-1', 'Etc/GMT-1'), ('Etc/GMT-10', 'Etc/GMT-10'), ('Etc/GMT-11', 'Etc/GMT-11'), ('Etc/GMT-12', 'Etc/GMT-12'), ('Etc/GMT-13', 'Etc/GMT-13'), ('Etc/GMT-14', 'Etc/GMT-14'), ('Etc/GMT-2', 'Etc/GMT-2'), ('Etc/GMT-3', 'Etc/GMT-3'), ('Etc/GMT-4', 'Etc/GMT-4'), ('Etc/GMT-5', 'Etc/GMT-5'), ('Etc/GMT-6', 'Etc/GMT-6'), ('Etc/GMT-7', 'Etc/GMT-7'), ('Etc/GMT-8', 'Etc/GMT-8'), ('Etc/GMT-9', 'Etc/GMT-9'), ('Etc/GMT0', 'Etc/GMT0'), ('Etc/Greenwich', 'Etc/Greenwich'), ('Etc/UCT', 'Etc/UCT'), ('Etc/UTC', 'Etc/UTC'), ('Etc/Universal', 'Etc/Universal'), ('Etc/Zulu', 'Etc/Zulu'), ('Europe/Amsterdam', 'Europe/Amsterdam'), ('Europe/Andorra', 'Europe/Andorra'), ('Europe/Astrakhan', 'Europe/Astrakhan'), ('Europe/Athens', 'Europe/Athens'), ('Europe/Belfast', 'Europe/Belfast'), ('Europe/Belgrade', 'Europe/Belgrade'), ('Europe/Berlin', 'Europe/Berlin'), ('Europe/Bratislava', 'Europe/Bratislava'), ('Europe/Brussels', 'Europe/Brussels'), ('Europe/Bucharest', 'Europe/Bucharest'), ('Europe/Budapest', 'Europe/Budapest'), ('Europe/Busingen', 'Europe/Busingen'), ('Europe/Chisinau', 'Europe/Chisinau'), ('Europe/Copenhagen', 'Europe/Copenhagen'), ('Europe/Dublin', 'Europe/Dublin'), ('Europe/Gibraltar', 'Europe/Gibraltar'), ('Europe/Guernsey', 'Europe/Guernsey'), ('Europe/Helsinki', 'Europe/Helsinki'), ('Europe/Isle_of_Man', 'Europe/Isle_of_Man'), ('Europe/Istanbul', 'Europe/Istanbul'), ('Europe/Jersey', 'Europe/Jersey'), ('Europe/Kaliningrad', 'Europe/Kaliningrad'), ('Europe/Kiev', 'Europe/Kiev'), ('Europe/Kirov', 'Europe/Kirov'), ('Europe/Kyiv', 'Europe/Kyiv'), ('Europe/Lisbon', 'Europe/Lisbon'), ('Europe/Ljubljana', 'Europe/Ljubljana'), ('Europe/London', 'Europe/London'), ('Europe/Luxembourg', 'Europe/Luxembourg'), ('Europe/Madrid', 'Europe/Madrid'), ('Europe/Malta', 'Europe/Malta'), ('Europe/Mariehamn', 'Europe/Mariehamn'), ('Europe/Minsk', 'Europe/Minsk'), ('Europe/Monaco', 'Europe/Monaco'), ('Europe/Moscow', 'Europe/Moscow'), ('Europe/Nicosia', 'Europe/Nicosia'), ('Europe/Oslo', 'Europe/Oslo'), ('Europe/Paris', 'Europe/Paris'), ('Europe/Podgorica', 'Europe/Podgorica'), ('Europe/Prague', 'Europe/Prague'), ('Europe/Riga', 'Europe/Riga'), ('Europe/Rome', 'Europe/Rome'), ('Europe/Samara', 'Europe/Samara'), ('Europe/San_Marino', 'Europe/San_Marino'), ('Europe/Sarajevo', 'Europe/Sarajevo'), ('Europe/Saratov', 'Europe/Saratov'), ('Europe/Simferopol', 'Europe/Simferopol'), ('Europe/Skopje', 'Europe/Skopje'), ('Europe/Sofia', 'Europe/Sofia'), ('Europe/Stockholm', 'Europe/Stockholm'), ('Europe/Tallinn', 'Europe/Tallinn'), ('Europe/Tirane', 'Europe/Tirane'), ('Europe/Tiraspol', 'Europe/Tiraspol'), ('Europe/Ulyanovsk', 'Europe/Ulyanovsk'), ('Europe/Uzhgorod', 'Europe/Uzhgorod'), ('Europe/Vaduz', 'Europe/Vaduz'), ('Europe/Vatican', 'Europe/Vatican'), ('Europe/Vienna', 'Europe/Vienna'), ('Europe/Vilnius', 'Europe/Vilnius'), ('Europe/Volgograd', 'Europe/Volgograd'), ('Europe/Warsaw', 'Europe/Warsaw'), ('Europe/Zagreb', 'Europe/Zagreb'), ('Europe/Zaporozhye', 'Europe/Zaporozhye'), ('Europe/Zurich', 'Europe/Zurich'), ('GB', 'GB'), ('GB-Eire', 'GB-Eire'), ('GMT', 'GMT'), ('GMT+0', 'GMT+0'), ('GMT-0', 'GMT-0'), ('GMT0', 'GMT0'), ('Greenwich', 'Greenwich'), ('HST', 'HST'), ('Hongkong', 'Hongkong'), ('Iceland', 'Iceland'), ('Indian/Antananarivo', 'Indian/Antananarivo'), ('Indian/Chagos', 'Indian/Chagos'), ('Indian/Christmas', 'Indian/Christmas'), ('Indian/Cocos', 'Indian/Cocos'), ('Indian/Comoro', 'Indian/Comoro'), ('Indian/Kerguelen', 'Indian/Kerguelen'), ('Indian/Mahe', 'Indian/Mahe'), ('Indian/Maldives', 'Indian/Maldives'), ('Indian/Mauritius', 'Indian/Mauritius'), ('Indian/Mayotte', 'Indian/Mayotte'), ('Indian/Reunion', 'Indian/Reunion'), ('Iran', 'Iran'), ('Israel', 'Israel'), ('Jamaica', 'Jamaica'), ('Japan', 'Japan'), ('Kwajalein', 'Kwajalein'), ('Libya', 'Libya'), ('MET', 'MET'), ('MST', 'MST'), ('MST7MDT', 'MST7MDT'), ('Mexico/BajaNorte', 'Mexico/BajaNorte'), ('Mexico/BajaSur', 'Mexico/BajaSur'), ('Mexico/General', 'Mexico/General'), ('NZ', 'NZ'), ('NZ-CHAT', 'NZ-CHAT'), ('Navajo', 'Navajo'), ('PRC', 'PRC'), ('PST8PDT', 'PST8PDT'), ('Pacific/Apia', 'Pacific/Apia'), ('Pacific/Auckland', 'Pacific/Auckland'), ('Pacific/Bougainville', 'Pacific/Bougainville'), ('Pacific/Chatham', 'Pacific/Chatham'), ('Pacific/Chuuk', 'Pacific/Chuuk'), ('Pacific/Easter', 'Pacific/Easter'), ('Pacific/Efate', 'Pacific/Efate'), ('Pacific/Enderbury', 'Pacific/Enderbury'), ('Pacific/Fakaofo', 'Pacific/Fakaofo'), ('Pacific/Fiji', 'Pacific/Fiji'), ('Pacific/Funafuti', 'Pacific/Funafuti'), ('Pacific/Galapagos', 'Pacific/Galapagos'), ('Pacific/Gambier', 'Pacific/Gambier'), ('Pacific/Guadalcanal', 'Pacific/Guadalcanal'), ('Pacific/Guam', 'Pacific/Guam'), ('Pacific/Honolulu', 'Pacific/Honolulu'), ('Pacific/Johnston', 'Pacific/Johnston'), ('Pacific/Kanton', 'Pacific/Kanton'), ('Pacific/Kiritimati', 'Pacific/Kiritimati'), ('Pacific/Kosrae', 'Pacific/Kosrae'), ('Pacific/Kwajalein', 'Pacific/Kwajalein'), ('Pacific/Majuro', 'Pacific/Majuro'), ('Pacific/Marquesas', 'Pacific/Marquesas'), ('Pacific/Midway', 'Pacific/Midway'), ('Pacific/Nauru', 'Pacific/Nauru'), ('Pacific/Niue', 'Pacific/Niue'), ('Pacific/Norfolk', 'Pacific/Norfolk'), ('Pacific/Noumea', 'Pacific/Noumea'), ('Pacific/Pago_Pago', 'Pacific/Pago_Pago'), ('Pacific/Palau', 'Pacific/Palau'), ('Pacific/Pitcairn', 'Pacific/Pitcairn'), ('Pacific/Pohnpei', 'Pacific/Pohnpei'), ('Pacific/Ponape', 'Pacific/Ponape'), ('Pacific/Port_Moresby', 'Pacific/Port_Moresby'), ('Pacific/Rarotonga', 'Pacific/Rarotonga'), ('Pacific/Saipan', 'Pacific/Saipan'), ('Pacific/Samoa', 'Pacific/Samoa'), ('Pacific/Tahiti', 'Pacific/Tahiti'), ('Pacific/Tarawa', 'Pacific/Tarawa'), ('Pacific/Tongatapu', 'Pacific/Tongatapu'), ('Pacific/Truk', 'Pacific/Truk'), ('Pacific/Wake', 'Pacific/Wake'), ('Pacific/Wallis', 'Pacific/Wallis'), ('Pacific/Yap', 'Pacific/Yap'), ('Poland', 'Poland'), ('Portugal', 'Portugal'), ('ROC', 'ROC'), ('ROK', 'ROK'), ('Singapore', 'Singapore'), ('Turkey', 'Turkey'), ('UCT', 'UCT'), ('US/Alaska', 'US/Alaska'), ('US/Aleutian', 'US/Aleutian'), ('US/Arizona', 'US/Arizona'), ('US/Central', 'US/Central'), ('US/East-Indiana', 'US/East-Indiana'), ('US/Eastern', 'US/Eastern'), ('US/Hawaii', 'US/Hawaii'), ('US/Indiana-Starke', 'US/Indiana-Starke'), ('US/Michigan', 'US/Michigan'), ('US/Mountain', 'US/Mountain'), ('US/Pacific', 'US/Pacific'), ('US/Samoa', 'US/Samoa'), ('UTC', 'UTC'), ('Universal', 'Universal'), ('W-SU', 'W-SU'), ('WET', 'WET'), ('Zulu', 'Zulu')], default='UTC', max_length=255),
+        ),
+        migrations.AlterField(
+            model_name='issuelink',
+            name='title',
+            field=models.CharField(blank=True, max_length=255, null=True),
+        ),
+        migrations.RunPython(update_user_timezones)
+    ]
diff --git a/apiserver/plane/db/models/user.py b/apiserver/plane/db/models/user.py
index 3975a3b93..e90e19c5e 100644
--- a/apiserver/plane/db/models/user.py
+++ b/apiserver/plane/db/models/user.py
@@ -2,6 +2,7 @@
 import uuid
 import string
 import random
+import pytz
 
 # Django imports
 from django.db import models
@@ -9,9 +10,6 @@ from django.db.models.signals import post_save
 from django.dispatch import receiver
 from django.contrib.auth.models import AbstractBaseUser, UserManager, PermissionsMixin
 from django.utils import timezone
-from django.core.mail import EmailMultiAlternatives
-from django.template.loader import render_to_string
-from django.utils.html import strip_tags
 from django.conf import settings
 
 # Third party imports
@@ -66,7 +64,8 @@ class User(AbstractBaseUser, PermissionsMixin):
     billing_address = models.JSONField(null=True)
     has_billing_address = models.BooleanField(default=False)
 
-    user_timezone = models.CharField(max_length=255, default="Asia/Kolkata")
+    USER_TIMEZONE_CHOICES = tuple(zip(pytz.all_timezones, pytz.all_timezones))
+    user_timezone = models.CharField(max_length=255, default="UTC", choices=USER_TIMEZONE_CHOICES)
 
     last_active = models.DateTimeField(default=timezone.now, null=True)
     last_login_time = models.DateTimeField(null=True)
diff --git a/apiserver/plane/settings/common.py b/apiserver/plane/settings/common.py
index 59e0bd31b..27da44d9c 100644
--- a/apiserver/plane/settings/common.py
+++ b/apiserver/plane/settings/common.py
@@ -49,7 +49,7 @@ MIDDLEWARE = [
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
     "crum.CurrentRequestUserMiddleware",
     "django.middleware.gzip.GZipMiddleware",
-]
+ ]
 
 REST_FRAMEWORK = {
     "DEFAULT_AUTHENTICATION_CLASSES": (
@@ -161,7 +161,7 @@ MEDIA_URL = "/media/"
 
 LANGUAGE_CODE = "en-us"
 
-TIME_ZONE = "Asia/Kolkata"
+TIME_ZONE = "UTC"
 
 USE_I18N = True
 

From 761a1eb41a68dc0479a715b9659521212c2c9a0e Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Wed, 30 Aug 2023 12:18:56 +0530
Subject: [PATCH 45/70] fix: user created by stats (#2016)

---
 apiserver/plane/api/views/workspace.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apiserver/plane/api/views/workspace.py b/apiserver/plane/api/views/workspace.py
index cfdd0dd9b..b10fe3d42 100644
--- a/apiserver/plane/api/views/workspace.py
+++ b/apiserver/plane/api/views/workspace.py
@@ -1100,7 +1100,6 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
             created_issues = (
                 Issue.issue_objects.filter(
                     workspace__slug=slug,
-                    assignees__in=[user_id],
                     project__project_projectmember__member=request.user,
                     created_by_id=user_id,
                 )

From 17aff1f369e15eeb0b5142a732208e964819665b Mon Sep 17 00:00:00 2001
From: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Date: Wed, 30 Aug 2023 12:20:13 +0530
Subject: [PATCH 46/70] fix: asset key validation (#1938)

* fix: asset key validation

* chore: asset key validation in user assets

---------

Co-authored-by: Bavisetti Narayan <narayan@Bavisettis-MacBook-Pro.local>
---
 apiserver/plane/api/views/asset.py | 32 ++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/apiserver/plane/api/views/asset.py b/apiserver/plane/api/views/asset.py
index 0b935a4d3..d9b6e502d 100644
--- a/apiserver/plane/api/views/asset.py
+++ b/apiserver/plane/api/views/asset.py
@@ -18,10 +18,21 @@ class FileAssetEndpoint(BaseAPIView):
     """
 
     def get(self, request, workspace_id, asset_key):
-        asset_key = str(workspace_id) + "/" + asset_key
-        files = FileAsset.objects.filter(asset=asset_key)
-        serializer = FileAssetSerializer(files, context={"request": request}, many=True)
-        return Response(serializer.data)
+        try:
+            asset_key = str(workspace_id) + "/" + asset_key
+            files = FileAsset.objects.filter(asset=asset_key)
+            if files.exists():
+                serializer = FileAssetSerializer(files, context={"request": request}, many=True)
+                return Response({"data": serializer.data, "status": True}, status=status.HTTP_200_OK)
+            else:
+                return Response({"error": "Asset key does not exist", "status": False}, status=status.HTTP_200_OK)
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
 
     def post(self, request, slug):
         try:
@@ -68,11 +79,16 @@ class UserAssetsEndpoint(BaseAPIView):
     def get(self, request, asset_key):
         try:
             files = FileAsset.objects.filter(asset=asset_key, created_by=request.user)
-            serializer = FileAssetSerializer(files, context={"request": request})
-            return Response(serializer.data)
-        except FileAsset.DoesNotExist:
+            if files.exists():
+                serializer = FileAssetSerializer(files, context={"request": request})
+                return Response({"data": serializer.data, "status": True}, status=status.HTTP_200_OK)
+            else:
+                return Response({"error": "Asset key does not exist", "status": False}, status=status.HTTP_200_OK)
+        except Exception as e:
+            capture_exception(e)
             return Response(
-                {"error": "File Asset does not exist"}, status=status.HTTP_404_NOT_FOUND
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
 
     def post(self, request):

From f5a076e9a9e003f52bebd407765f8da7d4f268da Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 30 Aug 2023 13:26:28 +0530
Subject: [PATCH 47/70] dev: revamp peek overview (#2021)

* dev: mobx for issues store

* refactor: peek overview component

* chore: update open issue button

* fix: issue mutation after any crud action

* chore: remove peek overview from gantt

* chore: refactor code
---
 .../components/command-palette/command-k.tsx  |   2 +-
 .../views/spreadsheet-view/single-issue.tsx   |  24 +-
 .../spreadsheet-view/spreadsheet-view.tsx     | 159 +++++------
 .../components/issues/gantt-chart/blocks.tsx  |   4 +-
 .../peek-overview/full-screen-peek-view.tsx   |  84 +++---
 .../issues/peek-overview/header.tsx           |  32 +--
 .../issues/peek-overview/issue-properties.tsx |  25 +-
 .../issues/peek-overview/layout.tsx           | 247 ++++++++++++------
 .../issues/peek-overview/side-peek-view.tsx   |  83 +++---
 .../app/hooks/use-spreadsheet-issues-view.tsx |  15 +-
 apps/app/store/issues.ts                      | 172 ++++++++++++
 apps/app/store/root.ts                        |   3 +
 12 files changed, 576 insertions(+), 274 deletions(-)
 create mode 100644 apps/app/store/issues.ts

diff --git a/apps/app/components/command-palette/command-k.tsx b/apps/app/components/command-palette/command-k.tsx
index a1525a348..d20a44290 100644
--- a/apps/app/components/command-palette/command-k.tsx
+++ b/apps/app/components/command-palette/command-k.tsx
@@ -665,7 +665,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                           className="focus:outline-none"
                         >
                           <div className="flex items-center gap-2 text-custom-text-200">
-                            <DiscordIcon className="h-4 w-4" color="#6b7280" />
+                            <DiscordIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
                             Join our Discord
                           </div>
                         </Command.Item>
diff --git a/apps/app/components/core/views/spreadsheet-view/single-issue.tsx b/apps/app/components/core/views/spreadsheet-view/single-issue.tsx
index 11a8c42c5..53869a638 100644
--- a/apps/app/components/core/views/spreadsheet-view/single-issue.tsx
+++ b/apps/app/components/core/views/spreadsheet-view/single-issue.tsx
@@ -6,7 +6,6 @@ import { mutate } from "swr";
 
 // components
 import {
-  IssuePeekOverview,
   ViewAssigneeSelect,
   ViewDueDateSelect,
   ViewEstimateSelect,
@@ -76,9 +75,6 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  // issue peek overview
-  const [issuePeekOverview, setIssuePeekOverview] = useState(false);
-
   const router = useRouter();
 
   const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
@@ -161,6 +157,15 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
     [workspaceSlug, projectId, cycleId, moduleId, viewId, params, user]
   );
 
+  const openPeekOverview = () => {
+    const { query } = router;
+
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekIssue: issue.id },
+    });
+  };
+
   const handleCopyText = () => {
     const originURL =
       typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
@@ -183,15 +188,6 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
 
   return (
     <>
-      <IssuePeekOverview
-        handleDeleteIssue={() => handleDeleteIssue(issue)}
-        handleUpdateIssue={async (formData) => partialUpdateIssue(formData, issue)}
-        issue={issue}
-        isOpen={issuePeekOverview}
-        onClose={() => setIssuePeekOverview(false)}
-        workspaceSlug={workspaceSlug?.toString() ?? ""}
-        readOnly={isNotAllowed}
-      />
       <div
         className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
         style={{ gridTemplateColumns }}
@@ -280,7 +276,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           <button
             type="button"
             className="truncate text-custom-text-100 text-left cursor-pointer w-full text-[0.825rem]"
-            onClick={() => setIssuePeekOverview(true)}
+            onClick={openPeekOverview}
           >
             {issue.name}
           </button>
diff --git a/apps/app/components/core/views/spreadsheet-view/spreadsheet-view.tsx b/apps/app/components/core/views/spreadsheet-view/spreadsheet-view.tsx
index 0b2e785d6..1076f30d0 100644
--- a/apps/app/components/core/views/spreadsheet-view/spreadsheet-view.tsx
+++ b/apps/app/components/core/views/spreadsheet-view/spreadsheet-view.tsx
@@ -6,6 +6,7 @@ import { useRouter } from "next/router";
 // components
 import { SpreadsheetColumns, SpreadsheetIssues } from "components/core";
 import { CustomMenu, Spinner } from "components/ui";
+import { IssuePeekOverview } from "components/issues";
 // hooks
 import useIssuesProperties from "hooks/use-issue-properties";
 import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
@@ -38,7 +39,7 @@ export const SpreadsheetView: React.FC<Props> = ({
 
   const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
 
-  const { spreadsheetIssues } = useSpreadsheetIssuesView();
+  const { spreadsheetIssues, mutateIssues } = useSpreadsheetIssuesView();
 
   const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
 
@@ -59,80 +60,88 @@ export const SpreadsheetView: React.FC<Props> = ({
     .join(" ");
 
   return (
-    <div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
-      <div className="sticky z-[2] top-0 border-b border-custom-border-200 bg-custom-background-90 w-full min-w-max">
-        <SpreadsheetColumns columnData={columnData} gridTemplateColumns={gridTemplateColumns} />
-      </div>
-      {spreadsheetIssues ? (
-        <div className="flex flex-col h-full w-full bg-custom-background-100 rounded-sm ">
-          {spreadsheetIssues.map((issue: IIssue, index) => (
-            <SpreadsheetIssues
-              key={`${issue.id}_${index}`}
-              index={index}
-              issue={issue}
-              expandedIssues={expandedIssues}
-              setExpandedIssues={setExpandedIssues}
-              gridTemplateColumns={gridTemplateColumns}
-              properties={properties}
-              handleIssueAction={handleIssueAction}
-              disableUserActions={disableUserActions}
-              user={user}
-              userAuth={userAuth}
-            />
-          ))}
-          <div
-            className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
-            style={{ gridTemplateColumns }}
-          >
-            {type === "issue" ? (
-              <button
-                className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
-                onClick={() => {
-                  const e = new KeyboardEvent("keydown", { key: "c" });
-                  document.dispatchEvent(e);
-                }}
-              >
-                <PlusIcon className="h-4 w-4" />
-                Add Issue
-              </button>
-            ) : (
-              !disableUserActions && (
-                <CustomMenu
-                  className="sticky left-0 z-[1]"
-                  customButton={
-                    <button
-                      className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
-                      type="button"
-                    >
-                      <PlusIcon className="h-4 w-4" />
-                      Add Issue
-                    </button>
-                  }
-                  position="left"
-                  optionsClassName="left-5 !w-36"
-                  noBorder
-                >
-                  <CustomMenu.MenuItem
-                    onClick={() => {
-                      const e = new KeyboardEvent("keydown", { key: "c" });
-                      document.dispatchEvent(e);
-                    }}
-                  >
-                    Create new
-                  </CustomMenu.MenuItem>
-                  {openIssuesListModal && (
-                    <CustomMenu.MenuItem onClick={openIssuesListModal}>
-                      Add an existing issue
-                    </CustomMenu.MenuItem>
-                  )}
-                </CustomMenu>
-              )
-            )}
-          </div>
+    <>
+      <IssuePeekOverview
+        handleMutation={() => mutateIssues()}
+        projectId={projectId?.toString() ?? ""}
+        workspaceSlug={workspaceSlug?.toString() ?? ""}
+        readOnly={disableUserActions}
+      />
+      <div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
+        <div className="sticky z-[2] top-0 border-b border-custom-border-200 bg-custom-background-90 w-full min-w-max">
+          <SpreadsheetColumns columnData={columnData} gridTemplateColumns={gridTemplateColumns} />
         </div>
-      ) : (
-        <Spinner />
-      )}
-    </div>
+        {spreadsheetIssues ? (
+          <div className="flex flex-col h-full w-full bg-custom-background-100 rounded-sm ">
+            {spreadsheetIssues.map((issue: IIssue, index) => (
+              <SpreadsheetIssues
+                key={`${issue.id}_${index}`}
+                index={index}
+                issue={issue}
+                expandedIssues={expandedIssues}
+                setExpandedIssues={setExpandedIssues}
+                gridTemplateColumns={gridTemplateColumns}
+                properties={properties}
+                handleIssueAction={handleIssueAction}
+                disableUserActions={disableUserActions}
+                user={user}
+                userAuth={userAuth}
+              />
+            ))}
+            <div
+              className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
+              style={{ gridTemplateColumns }}
+            >
+              {type === "issue" ? (
+                <button
+                  className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
+                  onClick={() => {
+                    const e = new KeyboardEvent("keydown", { key: "c" });
+                    document.dispatchEvent(e);
+                  }}
+                >
+                  <PlusIcon className="h-4 w-4" />
+                  Add Issue
+                </button>
+              ) : (
+                !disableUserActions && (
+                  <CustomMenu
+                    className="sticky left-0 z-[1]"
+                    customButton={
+                      <button
+                        className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
+                        type="button"
+                      >
+                        <PlusIcon className="h-4 w-4" />
+                        Add Issue
+                      </button>
+                    }
+                    position="left"
+                    optionsClassName="left-5 !w-36"
+                    noBorder
+                  >
+                    <CustomMenu.MenuItem
+                      onClick={() => {
+                        const e = new KeyboardEvent("keydown", { key: "c" });
+                        document.dispatchEvent(e);
+                      }}
+                    >
+                      Create new
+                    </CustomMenu.MenuItem>
+                    {openIssuesListModal && (
+                      <CustomMenu.MenuItem onClick={openIssuesListModal}>
+                        Add an existing issue
+                      </CustomMenu.MenuItem>
+                    )}
+                  </CustomMenu>
+                )
+              )}
+            </div>
+          </div>
+        ) : (
+          <Spinner />
+        )}
+      </div>
+    </>
   );
 };
diff --git a/apps/app/components/issues/gantt-chart/blocks.tsx b/apps/app/components/issues/gantt-chart/blocks.tsx
index 2ad21c499..3ab7ea90b 100644
--- a/apps/app/components/issues/gantt-chart/blocks.tsx
+++ b/apps/app/components/issues/gantt-chart/blocks.tsx
@@ -15,7 +15,7 @@ export const IssueGanttBlock = ({ data }: { data: IIssue }) => {
 
   return (
     <div
-      className="flex items-center relative h-full w-full rounded"
+      className="flex items-center relative h-full w-full rounded cursor-pointer"
       style={{ backgroundColor: data?.state_detail?.color }}
       onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/issues/${data?.id}`)}
     >
@@ -49,7 +49,7 @@ export const IssueGanttSidebarBlock = ({ data }: { data: IIssue }) => {
 
   return (
     <div
-      className="relative w-full flex items-center gap-2 h-full"
+      className="relative w-full flex items-center gap-2 h-full cursor-pointer"
       onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/issues/${data?.id}`)}
     >
       {getStateGroupIcon(data?.state_detail?.group, "14", "14", data?.state_detail?.color)}
diff --git a/apps/app/components/issues/peek-overview/full-screen-peek-view.tsx b/apps/app/components/issues/peek-overview/full-screen-peek-view.tsx
index d470f4910..9c04e0b6a 100644
--- a/apps/app/components/issues/peek-overview/full-screen-peek-view.tsx
+++ b/apps/app/components/issues/peek-overview/full-screen-peek-view.tsx
@@ -1,3 +1,4 @@
+// components
 import {
   PeekOverviewHeader,
   PeekOverviewIssueActivity,
@@ -5,13 +6,16 @@ import {
   PeekOverviewIssueProperties,
   TPeekOverviewModes,
 } from "components/issues";
+// ui
+import { Loader } from "components/ui";
+// types
 import { IIssue } from "types";
 
 type Props = {
   handleClose: () => void;
   handleDeleteIssue: () => void;
-  handleUpdateIssue: (issue: Partial<IIssue>) => Promise<void>;
-  issue: IIssue;
+  handleUpdateIssue: (formData: Partial<IIssue>) => Promise<void>;
+  issue: IIssue | undefined;
   mode: TPeekOverviewModes;
   readOnly: boolean;
   setMode: (mode: TPeekOverviewModes) => void;
@@ -40,39 +44,59 @@ export const FullScreenPeekView: React.FC<Props> = ({
           workspaceSlug={workspaceSlug}
         />
       </div>
-      <div className="h-full w-full px-6 overflow-y-auto">
-        {/* issue title and description */}
-        <div className="w-full">
-          <PeekOverviewIssueDetails
-            handleUpdateIssue={handleUpdateIssue}
-            issue={issue}
-            readOnly={readOnly}
-            workspaceSlug={workspaceSlug}
-          />
+      {issue ? (
+        <div className="h-full w-full px-6 overflow-y-auto">
+          {/* issue title and description */}
+          <div className="w-full">
+            <PeekOverviewIssueDetails
+              handleUpdateIssue={handleUpdateIssue}
+              issue={issue}
+              readOnly={readOnly}
+              workspaceSlug={workspaceSlug}
+            />
+          </div>
+          {/* divider */}
+          <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
+          {/* issue activity/comments */}
+          <div className="w-full pb-5">
+            <PeekOverviewIssueActivity
+              workspaceSlug={workspaceSlug}
+              issue={issue}
+              readOnly={readOnly}
+            />
+          </div>
         </div>
-        {/* divider */}
-        <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
-        {/* issue activity/comments */}
-        <div className="w-full">
-          <PeekOverviewIssueActivity
-            workspaceSlug={workspaceSlug}
-            issue={issue}
-            readOnly={readOnly}
-          />
-        </div>
-      </div>
+      ) : (
+        <Loader className="px-6">
+          <Loader.Item height="30px" />
+          <div className="space-y-2 mt-3">
+            <Loader.Item height="20px" width="70%" />
+            <Loader.Item height="20px" width="60%" />
+            <Loader.Item height="20px" width="60%" />
+          </div>
+        </Loader>
+      )}
     </div>
     <div className="col-span-3 h-full w-full overflow-y-auto">
       {/* issue properties */}
       <div className="w-full px-6 py-5">
-        <PeekOverviewIssueProperties
-          handleDeleteIssue={handleDeleteIssue}
-          issue={issue}
-          mode="full"
-          onChange={handleUpdateIssue}
-          readOnly={readOnly}
-          workspaceSlug={workspaceSlug}
-        />
+        {issue ? (
+          <PeekOverviewIssueProperties
+            handleDeleteIssue={handleDeleteIssue}
+            handleUpdateIssue={handleUpdateIssue}
+            issue={issue}
+            mode="full"
+            readOnly={readOnly}
+            workspaceSlug={workspaceSlug}
+          />
+        ) : (
+          <Loader className="mt-11 space-y-4">
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+          </Loader>
+        )}
       </div>
     </div>
   </div>
diff --git a/apps/app/components/issues/peek-overview/header.tsx b/apps/app/components/issues/peek-overview/header.tsx
index 29e23a262..266b2edb8 100644
--- a/apps/app/components/issues/peek-overview/header.tsx
+++ b/apps/app/components/issues/peek-overview/header.tsx
@@ -1,18 +1,21 @@
+import Link from "next/link";
+
 // hooks
 import useToast from "hooks/use-toast";
 // ui
 import { CustomSelect, Icon } from "components/ui";
+// icons
+import { East, OpenInFull } from "@mui/icons-material";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
 import { IIssue } from "types";
 import { TPeekOverviewModes } from "./layout";
-import { ArrowRightAlt, CloseFullscreen, East, OpenInFull } from "@mui/icons-material";
 
 type Props = {
   handleClose: () => void;
   handleDeleteIssue: () => void;
-  issue: IIssue;
+  issue: IIssue | undefined;
   mode: TPeekOverviewModes;
   setMode: (mode: TPeekOverviewModes) => void;
   workspaceSlug: string;
@@ -47,12 +50,9 @@ export const PeekOverviewHeader: React.FC<Props> = ({
   const { setToastAlert } = useToast();
 
   const handleCopyLink = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    const urlToCopy = window.location.href;
 
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`
-    ).then(() => {
+    copyTextToClipboard(urlToCopy).then(() => {
       setToastAlert({
         type: "success",
         title: "Link copied!",
@@ -73,23 +73,15 @@ export const PeekOverviewHeader: React.FC<Props> = ({
             />
           </button>
         )}
-        {mode === "modal" || mode === "full" ? (
-          <button type="button" onClick={() => setMode("side")}>
-            <CloseFullscreen
-              sx={{
-                fontSize: "14px",
-              }}
-            />
-          </button>
-        ) : (
-          <button type="button" onClick={() => setMode("modal")}>
+        <Link href={`/${workspaceSlug}/projects/${issue?.project}/issues/${issue?.id}`}>
+          <a>
             <OpenInFull
               sx={{
                 fontSize: "14px",
               }}
             />
-          </button>
-        )}
+          </a>
+        </Link>
         <CustomSelect
           value={mode}
           onChange={(val: TPeekOverviewModes) => setMode(val)}
@@ -119,7 +111,7 @@ export const PeekOverviewHeader: React.FC<Props> = ({
         </CustomSelect>
       </div>
       {(mode === "side" || mode === "modal") && (
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 flex-shrink-0">
           <button type="button" onClick={handleCopyLink} className="-rotate-45">
             <Icon iconName="link" />
           </button>
diff --git a/apps/app/components/issues/peek-overview/issue-properties.tsx b/apps/app/components/issues/peek-overview/issue-properties.tsx
index bf1ecefd9..2c8b4d572 100644
--- a/apps/app/components/issues/peek-overview/issue-properties.tsx
+++ b/apps/app/components/issues/peek-overview/issue-properties.tsx
@@ -1,6 +1,11 @@
+// mobx
+import { observer } from "mobx-react-lite";
 // headless ui
 import { Disclosure } from "@headlessui/react";
 import { getStateGroupIcon } from "components/icons";
+// hooks
+import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
 // components
 import {
   SidebarAssigneeSelect,
@@ -9,27 +14,27 @@ import {
   SidebarStateSelect,
   TPeekOverviewModes,
 } from "components/issues";
-// icons
+// ui
 import { CustomDatePicker, Icon } from "components/ui";
+// helpers
 import { copyTextToClipboard } from "helpers/string.helper";
-import useToast from "hooks/use-toast";
 // types
 import { IIssue } from "types";
 
 type Props = {
   handleDeleteIssue: () => void;
+  handleUpdateIssue: (formData: Partial<IIssue>) => Promise<void>;
   issue: IIssue;
   mode: TPeekOverviewModes;
-  onChange: (issueProperty: Partial<IIssue>) => void;
   readOnly: boolean;
   workspaceSlug: string;
 };
 
 export const PeekOverviewIssueProperties: React.FC<Props> = ({
   handleDeleteIssue,
+  handleUpdateIssue,
   issue,
   mode,
-  onChange,
   readOnly,
   workspaceSlug,
 }) => {
@@ -86,7 +91,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
           <div className="w-3/4">
             <SidebarStateSelect
               value={issue.state}
-              onChange={(val: string) => onChange({ state: val })}
+              onChange={(val: string) => handleUpdateIssue({ state: val })}
               disabled={readOnly}
             />
           </div>
@@ -99,7 +104,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
           <div className="w-3/4">
             <SidebarAssigneeSelect
               value={issue.assignees_list}
-              onChange={(val: string[]) => onChange({ assignees_list: val })}
+              onChange={(val: string[]) => handleUpdateIssue({ assignees_list: val })}
               disabled={readOnly}
             />
           </div>
@@ -112,7 +117,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
           <div className="w-3/4">
             <SidebarPrioritySelect
               value={issue.priority}
-              onChange={(val: string) => onChange({ priority: val })}
+              onChange={(val: string) => handleUpdateIssue({ priority: val })}
               disabled={readOnly}
             />
           </div>
@@ -128,7 +133,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
                 placeholder="Start date"
                 value={issue.start_date}
                 onChange={(val) =>
-                  onChange({
+                  handleUpdateIssue({
                     start_date: val,
                   })
                 }
@@ -153,7 +158,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
                 placeholder="Due date"
                 value={issue.target_date}
                 onChange={(val) =>
-                  onChange({
+                  handleUpdateIssue({
                     target_date: val,
                   })
                 }
@@ -175,7 +180,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
           <div className="w-3/4">
             <SidebarEstimateSelect
               value={issue.estimate_point}
-              onChange={(val: number | null) => onChange({ estimate_point: val })}
+              onChange={(val: number | null) =>handleUpdateIssue({ estimate_point: val })}
               disabled={readOnly}
             />
           </div>
diff --git a/apps/app/components/issues/peek-overview/layout.tsx b/apps/app/components/issues/peek-overview/layout.tsx
index 7196052f8..50fa5df68 100644
--- a/apps/app/components/issues/peek-overview/layout.tsx
+++ b/apps/app/components/issues/peek-overview/layout.tsx
@@ -1,107 +1,184 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
+// hooks
+import useUser from "hooks/use-user";
+// components
 import { FullScreenPeekView, SidePeekView } from "components/issues";
 // types
 import { IIssue } from "types";
 
 type Props = {
-  handleDeleteIssue: () => void;
-  handleUpdateIssue: (issue: Partial<IIssue>) => Promise<void>;
-  issue: IIssue | null;
-  isOpen: boolean;
-  onClose: () => void;
-  workspaceSlug: string;
+  handleMutation: () => void;
+  projectId: string;
   readOnly: boolean;
+  workspaceSlug: string;
 };
 
 export type TPeekOverviewModes = "side" | "modal" | "full";
 
-export const IssuePeekOverview: React.FC<Props> = ({
-  handleDeleteIssue,
-  handleUpdateIssue,
-  issue,
-  isOpen,
-  onClose,
-  workspaceSlug,
-  readOnly,
-}) => {
-  const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
+export const IssuePeekOverview: React.FC<Props> = observer(
+  ({ handleMutation, projectId, readOnly, workspaceSlug }) => {
+    const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
+    const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
+    const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
 
-  const handleClose = () => {
-    onClose();
-    setPeekOverviewMode("side");
-  };
+    const router = useRouter();
+    const { peekIssue } = router.query;
 
-  if (!issue || !isOpen) return null;
+    const { issues: issuesStore } = useMobxStore();
+    const { deleteIssue, getIssueById, issues, updateIssue } = issuesStore;
 
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        {/* add backdrop conditionally */}
-        {(peekOverviewMode === "modal" || peekOverviewMode === "full") && (
-          <Transition.Child
-            as={React.Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
-          </Transition.Child>
-        )}
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="relative h-full w-full">
+    const issue = issues[peekIssue?.toString() ?? ""];
+
+    const { user } = useUser();
+
+    const handleClose = () => {
+      const { query } = router;
+      delete query.peekIssue;
+
+      router.push({
+        pathname: router.pathname,
+        query: { ...query },
+      });
+    };
+
+    const handleUpdateIssue = async (formData: Partial<IIssue>) => {
+      if (!issue || !user) return;
+
+      await updateIssue(workspaceSlug, projectId, issue.id, formData, user);
+      handleMutation();
+    };
+
+    const handleDeleteIssue = async () => {
+      if (!issue || !user) return;
+
+      await deleteIssue(workspaceSlug, projectId, issue.id, user);
+      handleMutation();
+
+      handleClose();
+    };
+
+    useEffect(() => {
+      if (!peekIssue) return;
+
+      getIssueById(workspaceSlug, projectId, peekIssue.toString());
+    }, [getIssueById, peekIssue, projectId, workspaceSlug]);
+
+    useEffect(() => {
+      if (peekIssue) {
+        if (peekOverviewMode === "side") {
+          setIsSidePeekOpen(true);
+          setIsModalPeekOpen(false);
+        } else {
+          setIsModalPeekOpen(true);
+          setIsSidePeekOpen(false);
+        }
+      } else {
+        console.log("Triggered");
+        setIsSidePeekOpen(false);
+        setIsModalPeekOpen(false);
+      }
+    }, [peekIssue, peekOverviewMode]);
+
+    return (
+      <>
+        <Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
+          <Dialog as="div" className="relative z-20" onClose={handleClose}>
+            <div className="fixed inset-0 z-20 overflow-y-auto">
+              <div className="relative h-full w-full">
+                <Transition.Child
+                  as={React.Fragment}
+                  enter="transition-transform duration-300"
+                  enterFrom="translate-x-full"
+                  enterTo="translate-x-0"
+                  leave="transition-transform duration-200"
+                  leaveFrom="translate-x-0"
+                  leaveTo="translate-x-full"
+                >
+                  <Dialog.Panel className="absolute z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-md">
+                    <SidePeekView
+                      handleClose={handleClose}
+                      handleDeleteIssue={handleDeleteIssue}
+                      handleUpdateIssue={handleUpdateIssue}
+                      issue={issue}
+                      mode={peekOverviewMode}
+                      readOnly={readOnly}
+                      setMode={(mode) => setPeekOverviewMode(mode)}
+                      workspaceSlug={workspaceSlug}
+                    />
+                  </Dialog.Panel>
+                </Transition.Child>
+              </div>
+            </div>
+          </Dialog>
+        </Transition.Root>
+        <Transition.Root appear show={isModalPeekOpen} as={React.Fragment}>
+          <Dialog as="div" className="relative z-20" onClose={handleClose}>
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
               leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
             >
-              <Dialog.Panel
-                className={`absolute z-20 bg-custom-background-100 ${
-                  peekOverviewMode === "side"
-                    ? "top-0 right-0 h-full w-1/2 shadow-custom-shadow-md"
-                    : peekOverviewMode === "modal"
-                    ? "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[70%] w-3/5 rounded-lg shadow-custom-shadow-xl"
-                    : "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[95%] w-[95%] rounded-lg shadow-custom-shadow-xl"
-                }`}
-              >
-                {(peekOverviewMode === "side" || peekOverviewMode === "modal") && (
-                  <SidePeekView
-                    handleClose={handleClose}
-                    handleDeleteIssue={handleDeleteIssue}
-                    handleUpdateIssue={handleUpdateIssue}
-                    issue={issue}
-                    mode={peekOverviewMode}
-                    readOnly={readOnly}
-                    setMode={(mode) => setPeekOverviewMode(mode)}
-                    workspaceSlug={workspaceSlug}
-                  />
-                )}
-                {peekOverviewMode === "full" && (
-                  <FullScreenPeekView
-                    handleClose={handleClose}
-                    handleDeleteIssue={handleDeleteIssue}
-                    handleUpdateIssue={handleUpdateIssue}
-                    issue={issue}
-                    mode={peekOverviewMode}
-                    readOnly={readOnly}
-                    setMode={(mode) => setPeekOverviewMode(mode)}
-                    workspaceSlug={workspaceSlug}
-                  />
-                )}
-              </Dialog.Panel>
+              <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
             </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
+            <div className="fixed inset-0 z-20 overflow-y-auto">
+              <div className="relative h-full w-full">
+                <Transition.Child
+                  as={React.Fragment}
+                  enter="ease-out duration-300"
+                  enterFrom="opacity-0"
+                  enterTo="opacity-100"
+                  leave="ease-in duration-200"
+                  leaveFrom="opacity-100"
+                  leaveTo="opacity-0"
+                >
+                  <Dialog.Panel
+                    className={`absolute z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
+                      peekOverviewMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
+                    }`}
+                  >
+                    {peekOverviewMode === "modal" && (
+                      <SidePeekView
+                        handleClose={handleClose}
+                        handleDeleteIssue={handleDeleteIssue}
+                        handleUpdateIssue={handleUpdateIssue}
+                        issue={issue}
+                        mode={peekOverviewMode}
+                        readOnly={readOnly}
+                        setMode={(mode) => setPeekOverviewMode(mode)}
+                        workspaceSlug={workspaceSlug}
+                      />
+                    )}
+                    {peekOverviewMode === "full" && (
+                      <FullScreenPeekView
+                        handleClose={handleClose}
+                        handleDeleteIssue={handleDeleteIssue}
+                        handleUpdateIssue={handleUpdateIssue}
+                        issue={issue}
+                        mode={peekOverviewMode}
+                        readOnly={readOnly}
+                        setMode={(mode) => setPeekOverviewMode(mode)}
+                        workspaceSlug={workspaceSlug}
+                      />
+                    )}
+                  </Dialog.Panel>
+                </Transition.Child>
+              </div>
+            </div>
+          </Dialog>
+        </Transition.Root>
+      </>
+    );
+  }
+);
diff --git a/apps/app/components/issues/peek-overview/side-peek-view.tsx b/apps/app/components/issues/peek-overview/side-peek-view.tsx
index f938c3805..1bdeed479 100644
--- a/apps/app/components/issues/peek-overview/side-peek-view.tsx
+++ b/apps/app/components/issues/peek-overview/side-peek-view.tsx
@@ -1,3 +1,4 @@
+// components
 import {
   PeekOverviewHeader,
   PeekOverviewIssueActivity,
@@ -5,13 +6,16 @@ import {
   PeekOverviewIssueProperties,
   TPeekOverviewModes,
 } from "components/issues";
+// ui
+import { Loader } from "components/ui";
+// types
 import { IIssue } from "types";
 
 type Props = {
   handleClose: () => void;
   handleDeleteIssue: () => void;
-  handleUpdateIssue: (issue: Partial<IIssue>) => Promise<void>;
-  issue: IIssue;
+  handleUpdateIssue: (formData: Partial<IIssue>) => Promise<void>;
+  issue: IIssue | undefined;
   mode: TPeekOverviewModes;
   readOnly: boolean;
   setMode: (mode: TPeekOverviewModes) => void;
@@ -39,37 +43,50 @@ export const SidePeekView: React.FC<Props> = ({
         workspaceSlug={workspaceSlug}
       />
     </div>
-    <div className="h-full w-full px-6 overflow-y-auto">
-      {/* issue title and description */}
-      <div className="w-full">
-        <PeekOverviewIssueDetails
-          handleUpdateIssue={handleUpdateIssue}
-          issue={issue}
-          readOnly={readOnly}
-          workspaceSlug={workspaceSlug}
-        />
+    {issue ? (
+      <div className="h-full w-full px-6 overflow-y-auto">
+        {/* issue title and description */}
+        <div className="w-full">
+          <PeekOverviewIssueDetails
+            handleUpdateIssue={handleUpdateIssue}
+            issue={issue}
+            readOnly={readOnly}
+            workspaceSlug={workspaceSlug}
+          />
+        </div>
+        {/* issue properties */}
+        <div className="w-full mt-10">
+          <PeekOverviewIssueProperties
+            handleDeleteIssue={handleDeleteIssue}
+            handleUpdateIssue={handleUpdateIssue}
+            issue={issue}
+            mode={mode}
+            readOnly={readOnly}
+            workspaceSlug={workspaceSlug}
+          />
+        </div>
+        {/* divider */}
+        <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
+        {/* issue activity/comments */}
+        <div className="w-full pb-5">
+          {issue && (
+            <PeekOverviewIssueActivity
+              workspaceSlug={workspaceSlug}
+              issue={issue}
+              readOnly={readOnly}
+            />
+          )}
+        </div>
       </div>
-      {/* issue properties */}
-      <div className="w-full mt-10">
-        <PeekOverviewIssueProperties
-          handleDeleteIssue={handleDeleteIssue}
-          issue={issue}
-          mode={mode}
-          onChange={handleUpdateIssue}
-          readOnly={readOnly}
-          workspaceSlug={workspaceSlug}
-        />
-      </div>
-      {/* divider */}
-      <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
-      {/* issue activity/comments */}
-      <div className="w-full pb-5">
-        <PeekOverviewIssueActivity
-          workspaceSlug={workspaceSlug}
-          issue={issue}
-          readOnly={readOnly}
-        />
-      </div>
-    </div>
+    ) : (
+      <Loader className="px-6">
+        <Loader.Item height="30px" />
+        <div className="space-y-2 mt-3">
+          <Loader.Item height="20px" width="70%" />
+          <Loader.Item height="20px" width="60%" />
+          <Loader.Item height="20px" width="60%" />
+        </div>
+      </Loader>
+    )}
   </div>
 );
diff --git a/apps/app/hooks/use-spreadsheet-issues-view.tsx b/apps/app/hooks/use-spreadsheet-issues-view.tsx
index 4471b4352..145313dac 100644
--- a/apps/app/hooks/use-spreadsheet-issues-view.tsx
+++ b/apps/app/hooks/use-spreadsheet-issues-view.tsx
@@ -48,7 +48,7 @@ const useSpreadsheetIssuesView = () => {
     sub_issue: "false",
   };
 
-  const { data: projectSpreadsheetIssues } = useSWR(
+  const { data: projectSpreadsheetIssues, mutate: mutateProjectSpreadsheetIssues } = useSWR(
     workspaceSlug && projectId
       ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params)
       : null,
@@ -58,7 +58,7 @@ const useSpreadsheetIssuesView = () => {
       : null
   );
 
-  const { data: cycleSpreadsheetIssues } = useSWR(
+  const { data: cycleSpreadsheetIssues, mutate: mutateCycleSpreadsheetIssues } = useSWR(
     workspaceSlug && projectId && cycleId
       ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
       : null,
@@ -73,7 +73,7 @@ const useSpreadsheetIssuesView = () => {
       : null
   );
 
-  const { data: moduleSpreadsheetIssues } = useSWR(
+  const { data: moduleSpreadsheetIssues, mutate: mutateModuleSpreadsheetIssues } = useSWR(
     workspaceSlug && projectId && moduleId
       ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
       : null,
@@ -88,7 +88,7 @@ const useSpreadsheetIssuesView = () => {
       : null
   );
 
-  const { data: viewSpreadsheetIssues } = useSWR(
+  const { data: viewSpreadsheetIssues, mutate: mutateViewSpreadsheetIssues } = useSWR(
     workspaceSlug && projectId && viewId && params ? VIEW_ISSUES(viewId.toString(), params) : null,
     workspaceSlug && projectId && viewId && params
       ? () =>
@@ -106,6 +106,13 @@ const useSpreadsheetIssuesView = () => {
 
   return {
     issueView,
+    mutateIssues: cycleId
+      ? mutateCycleSpreadsheetIssues
+      : moduleId
+      ? mutateModuleSpreadsheetIssues
+      : viewId
+      ? mutateViewSpreadsheetIssues
+      : mutateProjectSpreadsheetIssues,
     spreadsheetIssues: spreadsheetIssues ?? [],
     orderBy,
     setOrderBy,
diff --git a/apps/app/store/issues.ts b/apps/app/store/issues.ts
new file mode 100644
index 000000000..538c5e2a9
--- /dev/null
+++ b/apps/app/store/issues.ts
@@ -0,0 +1,172 @@
+// mobx
+import { action, observable, runInAction, makeAutoObservable } from "mobx";
+// services
+import issueService from "services/issues.service";
+// types
+import type { ICurrentUserResponse, IIssue } from "types";
+
+class IssuesStore {
+  issues: { [key: string]: IIssue } = {};
+  isIssuesLoading: boolean = false;
+  rootStore: any | null = null;
+
+  constructor(_rootStore: any | null = null) {
+    makeAutoObservable(this, {
+      issues: observable.ref,
+      loadIssues: action,
+      getIssueById: action,
+      isIssuesLoading: observable,
+      createIssue: action,
+      updateIssue: action,
+      deleteIssue: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  /**
+   * @description Fetch all issues of a project and hydrate issues field
+   */
+
+  loadIssues = async (workspaceSlug: string, projectId: string) => {
+    this.isIssuesLoading = true;
+    try {
+      const issuesResponse: IIssue[] = (await issueService.getIssuesWithParams(
+        workspaceSlug,
+        projectId
+      )) as IIssue[];
+
+      const issues: { [kye: string]: IIssue } = {};
+      issuesResponse.forEach((issue) => {
+        issues[issue.id] = issue;
+      });
+
+      runInAction(() => {
+        this.issues = issues;
+        this.isIssuesLoading = false;
+      });
+    } catch (error) {
+      this.isIssuesLoading = false;
+      console.error("Fetching issues error", error);
+    }
+  };
+
+  getIssueById = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string
+  ): Promise<IIssue> => {
+    if (this.issues[issueId]) return this.issues[issueId];
+
+    try {
+      const issueResponse: IIssue = await issueService.retrieve(workspaceSlug, projectId, issueId);
+
+      const issues = {
+        ...this.issues,
+        [issueId]: { ...issueResponse },
+      };
+
+      runInAction(() => {
+        this.issues = issues;
+      });
+
+      return issueResponse;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  createIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueForm: IIssue,
+    user: ICurrentUserResponse
+  ): Promise<IIssue> => {
+    try {
+      const issueResponse = await issueService.createIssues(
+        workspaceSlug,
+        projectId,
+        issueForm,
+        user
+      );
+
+      const issues = {
+        ...this.issues,
+        [issueResponse.id]: { ...issueResponse },
+      };
+
+      runInAction(() => {
+        this.issues = issues;
+      });
+      return issueResponse;
+    } catch (error) {
+      console.error("Creating issue error", error);
+      throw error;
+    }
+  };
+
+  updateIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    issueForm: Partial<IIssue>,
+    user: ICurrentUserResponse
+  ) => {
+    // keep a copy of the issue in the store
+    const originalIssue = { ...this.issues[issueId] };
+
+    // immediately update the issue in the store
+    const updatedIssue = { ...originalIssue, ...issueForm };
+
+    try {
+      runInAction(() => {
+        this.issues[issueId] = updatedIssue;
+      });
+
+      // make a patch request to update the issue
+      const issueResponse: IIssue = await issueService.patchIssue(
+        workspaceSlug,
+        projectId,
+        issueId,
+        issueForm,
+        user
+      );
+
+      const updatedIssues = { ...this.issues };
+      updatedIssues[issueId] = { ...issueResponse };
+
+      runInAction(() => {
+        this.issues = updatedIssues;
+      });
+    } catch (error) {
+      // if there is an error, revert the changes
+      runInAction(() => {
+        this.issues[issueId] = originalIssue;
+      });
+
+      return error;
+    }
+  };
+
+  deleteIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    user: ICurrentUserResponse
+  ) => {
+    const issues = { ...this.issues };
+    delete issues[issueId];
+
+    try {
+      runInAction(() => {
+        this.issues = issues;
+      });
+
+      issueService.deleteIssue(workspaceSlug, projectId, issueId, user);
+    } catch (error) {
+      console.error("Deleting issue error", error);
+    }
+  };
+}
+
+export default IssuesStore;
diff --git a/apps/app/store/root.ts b/apps/app/store/root.ts
index 5895637a8..40dd62fe6 100644
--- a/apps/app/store/root.ts
+++ b/apps/app/store/root.ts
@@ -3,6 +3,7 @@ import { enableStaticRendering } from "mobx-react-lite";
 // store imports
 import UserStore from "./user";
 import ThemeStore from "./theme";
+import IssuesStore from "./issues";
 import ProjectPublishStore, { IProjectPublishStore } from "./project-publish";
 
 enableStaticRendering(typeof window === "undefined");
@@ -11,10 +12,12 @@ export class RootStore {
   user;
   theme;
   projectPublish: IProjectPublishStore;
+  issues: IssuesStore;
 
   constructor() {
     this.user = new UserStore(this);
     this.theme = new ThemeStore(this);
     this.projectPublish = new ProjectPublishStore(this);
+    this.issues = new IssuesStore(this);
   }
 }

From 6c6b81bea7d123454c1c6e58ff43d1d94cf8e051 Mon Sep 17 00:00:00 2001
From: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Date: Wed, 30 Aug 2023 16:38:04 +0530
Subject: [PATCH 48/70] chore: tracking the history of issue reactions and
 votes. (#2020)

* chore: tracking the issues reaction and vote history

* fix: changed the keywords for vote and reaction

* chore: added validation
---
 apiserver/plane/api/views/issue.py            | 114 +++++++++++-
 apiserver/plane/api/views/workspace.py        |   1 +
 .../plane/bgtasks/issue_activites_task.py     | 167 +++++++++++++++++-
 3 files changed, 280 insertions(+), 2 deletions(-)

diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index 802431d2e..ac69e9d8d 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -486,7 +486,7 @@ class IssueActivityEndpoint(BaseAPIView):
             issue_activities = (
                 IssueActivity.objects.filter(issue_id=issue_id)
                 .filter(
-                    ~Q(field="comment"),
+                    ~Q(field__in=["comment", "vote", "reaction"]),
                     project__project_projectmember__member=self.request.user,
                 )
                 .select_related("actor", "workspace", "issue", "project")
@@ -1405,6 +1405,14 @@ class IssueReactionViewSet(BaseViewSet):
             project_id=self.kwargs.get("project_id"),
             actor=self.request.user,
         )
+        issue_activity.delay(
+            type="issue_reaction.activity.created",
+            requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+            actor_id=str(self.request.user.id),
+            issue_id=str(self.kwargs.get("issue_id", None)),
+            project_id=str(self.kwargs.get("project_id", None)),
+            current_instance=None,
+        )
 
     def destroy(self, request, slug, project_id, issue_id, reaction_code):
         try:
@@ -1415,6 +1423,19 @@ class IssueReactionViewSet(BaseViewSet):
                 reaction=reaction_code,
                 actor=request.user,
             )
+            issue_activity.delay(
+                type="issue_reaction.activity.deleted",
+                requested_data=None,
+                actor_id=str(self.request.user.id),
+                issue_id=str(self.kwargs.get("issue_id", None)),
+                project_id=str(self.kwargs.get("project_id", None)),
+                current_instance=json.dumps(
+                    {
+                        "reaction": str(reaction_code),
+                        "identifier": str(issue_reaction.id),
+                    }
+                ),
+            )
             issue_reaction.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
         except IssueReaction.DoesNotExist:
@@ -1455,6 +1476,14 @@ class CommentReactionViewSet(BaseViewSet):
             comment_id=self.kwargs.get("comment_id"),
             project_id=self.kwargs.get("project_id"),
         )
+        issue_activity.delay(
+            type="comment_reaction.activity.created",
+            requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+            actor_id=str(self.request.user.id),
+            issue_id=None,
+            project_id=str(self.kwargs.get("project_id", None)),
+            current_instance=None,
+        )
 
     def destroy(self, request, slug, project_id, comment_id, reaction_code):
         try:
@@ -1465,6 +1494,20 @@ class CommentReactionViewSet(BaseViewSet):
                 reaction=reaction_code,
                 actor=request.user,
             )
+            issue_activity.delay(
+                type="comment_reaction.activity.deleted",
+                requested_data=None,
+                actor_id=str(self.request.user.id),
+                issue_id=None,
+                project_id=str(self.kwargs.get("project_id", None)),
+                current_instance=json.dumps(
+                    {
+                        "reaction": str(reaction_code),
+                        "identifier": str(comment_reaction.id),
+                        "comment_id": str(comment_id)
+                    }
+                ),
+            )
             comment_reaction.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
         except CommentReaction.DoesNotExist:
@@ -1691,6 +1734,14 @@ class IssueReactionPublicViewSet(BaseViewSet):
                         project_id=project_id,
                         member=request.user,
                     )
+                issue_activity.delay(
+                    type="issue_reaction.activity.created",
+                    requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+                    actor_id=str(self.request.user.id),
+                    issue_id=str(self.kwargs.get("issue_id", None)),
+                    project_id=str(self.kwargs.get("project_id", None)),
+                    current_instance=None,
+                )    
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
         except ProjectDeployBoard.DoesNotExist:
@@ -1722,6 +1773,19 @@ class IssueReactionPublicViewSet(BaseViewSet):
                 reaction=reaction_code,
                 actor=request.user,
             )
+            issue_activity.delay(
+                type="issue_reaction.activity.deleted",
+                requested_data=None,
+                actor_id=str(self.request.user.id),
+                issue_id=str(self.kwargs.get("issue_id", None)),
+                project_id=str(self.kwargs.get("project_id", None)),
+                current_instance=json.dumps(
+                    {
+                        "reaction": str(reaction_code),
+                        "identifier": str(issue_reaction.id),
+                    }
+                ),
+            )
             issue_reaction.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
         except IssueReaction.DoesNotExist:
@@ -1784,8 +1848,21 @@ class CommentReactionPublicViewSet(BaseViewSet):
                         project_id=project_id,
                         member=request.user,
                     )
+                issue_activity.delay(
+                    type="comment_reaction.activity.created",
+                    requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+                    actor_id=str(self.request.user.id),
+                    issue_id=None,
+                    project_id=str(self.kwargs.get("project_id", None)),
+                    current_instance=None,
+                )    
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        except IssueComment.DoesNotExist:
+            return Response(
+                {"error": "Comment does not exist"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
         except ProjectDeployBoard.DoesNotExist:
             return Response(
                 {"error": "Project board does not exist"},
@@ -1816,6 +1893,20 @@ class CommentReactionPublicViewSet(BaseViewSet):
                 reaction=reaction_code,
                 actor=request.user,
             )
+            issue_activity.delay(
+                type="comment_reaction.activity.deleted",
+                requested_data=None,
+                actor_id=str(self.request.user.id),
+                issue_id=None,
+                project_id=str(self.kwargs.get("project_id", None)),
+                current_instance=json.dumps(
+                    {
+                        "reaction": str(reaction_code),
+                        "identifier": str(comment_reaction.id),
+                        "comment_id": str(comment_id)
+                    }
+                ),
+            )
             comment_reaction.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
         except CommentReaction.DoesNotExist:
@@ -1861,6 +1952,14 @@ class IssueVotePublicViewSet(BaseViewSet):
                 )
             issue_vote.vote = request.data.get("vote", 1)
             issue_vote.save()
+            issue_activity.delay(
+                    type="issue_vote.activity.created",
+                    requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+                    actor_id=str(self.request.user.id),
+                    issue_id=str(self.kwargs.get("issue_id", None)),
+                    project_id=str(self.kwargs.get("project_id", None)),
+                    current_instance=None,
+                )
             serializer = IssueVoteSerializer(issue_vote)
             return Response(serializer.data, status=status.HTTP_201_CREATED)
         except Exception as e:
@@ -1878,6 +1977,19 @@ class IssueVotePublicViewSet(BaseViewSet):
                 issue_id=issue_id,
                 actor_id=request.user.id,
             )
+            issue_activity.delay(
+                type="issue_vote.activity.deleted",
+                requested_data=None,
+                actor_id=str(self.request.user.id),
+                issue_id=str(self.kwargs.get("issue_id", None)),
+                project_id=str(self.kwargs.get("project_id", None)),
+                current_instance=json.dumps(
+                    {
+                        "vote": str(issue_vote.vote),
+                        "identifier": str(issue_vote.id),
+                    }
+                ),
+            )
             issue_vote.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
         except Exception as e:
diff --git a/apiserver/plane/api/views/workspace.py b/apiserver/plane/api/views/workspace.py
index b10fe3d42..cbf62548f 100644
--- a/apiserver/plane/api/views/workspace.py
+++ b/apiserver/plane/api/views/workspace.py
@@ -1197,6 +1197,7 @@ class WorkspaceUserActivityEndpoint(BaseAPIView):
             projects = request.query_params.getlist("project", [])
 
             queryset = IssueActivity.objects.filter(
+                ~Q(field__in=["comment", "vote", "reaction"]),
                 workspace__slug=slug,
                 project__project_projectmember__member=request.user,
                 actor=user_id,
diff --git a/apiserver/plane/bgtasks/issue_activites_task.py b/apiserver/plane/bgtasks/issue_activites_task.py
index 1cc6c85cc..0cadac553 100644
--- a/apiserver/plane/bgtasks/issue_activites_task.py
+++ b/apiserver/plane/bgtasks/issue_activites_task.py
@@ -24,6 +24,9 @@ from plane.db.models import (
     IssueSubscriber,
     Notification,
     IssueAssignee,
+    IssueReaction,
+    CommentReaction,
+    IssueComment,
 )
 from plane.api.serializers import IssueActivitySerializer
 
@@ -629,7 +632,7 @@ def update_issue_activity(
         "parent": track_parent,
         "priority": track_priority,
         "state": track_state,
-        "description": track_description,
+        "description_html": track_description,
         "target_date": track_target_date,
         "start_date": track_start_date,
         "labels_list": track_labels,
@@ -1022,6 +1025,150 @@ def delete_attachment_activity(
         )
     )
 
+def create_issue_reaction_activity(
+    requested_data, current_instance, issue_id, project, actor, issue_activities
+):
+    requested_data = json.loads(requested_data) if requested_data is not None else None
+    if requested_data and requested_data.get("reaction") is not None:
+        issue_reaction = IssueReaction.objects.filter(reaction=requested_data.get("reaction"), project=project, actor=actor).values_list('id', flat=True).first()
+        if issue_reaction is not None:
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=issue_id,
+                    actor=actor,
+                    verb="created",
+                    old_value=None,
+                    new_value=requested_data.get("reaction"),
+                    field="reaction",
+                    project=project,
+                    workspace=project.workspace,
+                    comment="added the reaction",
+                    old_identifier=None,
+                    new_identifier=issue_reaction,
+                )
+            )
+
+
+def delete_issue_reaction_activity(
+        requested_data, current_instance, issue_id, project, actor, issue_activities
+):
+    current_instance = (
+        json.loads(current_instance) if current_instance is not None else None
+    )
+    if current_instance and current_instance.get("reaction") is not None:
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor=actor,
+                verb="deleted",
+                old_value=current_instance.get("reaction"),
+                new_value=None,
+                field="reaction",
+                project=project,
+                workspace=project.workspace,
+                comment="removed the reaction",
+                old_identifier=current_instance.get("identifier"),
+                new_identifier=None,
+            )
+        )
+
+
+def create_comment_reaction_activity(
+    requested_data, current_instance, issue_id, project, actor, issue_activities
+):
+    requested_data = json.loads(requested_data) if requested_data is not None else None
+    if requested_data and requested_data.get("reaction") is not None:
+        comment_reaction_id, comment_id = CommentReaction.objects.filter(reaction=requested_data.get("reaction"), project=project, actor=actor).values_list('id', 'comment__id').first()
+        comment = IssueComment.objects.get(pk=comment_id,project=project)
+        if comment is not None and comment_reaction_id is not None and comment_id is not None:
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=comment.issue_id,
+                    actor=actor,
+                    verb="created",
+                    old_value=None,
+                    new_value=requested_data.get("reaction"),
+                    field="reaction",
+                    project=project,
+                    workspace=project.workspace,
+                    comment="added the reaction",
+                    old_identifier=None,
+                    new_identifier=comment_reaction_id,
+                )
+            )
+
+
+def delete_comment_reaction_activity(
+        requested_data, current_instance, issue_id, project, actor, issue_activities
+):
+    current_instance = (
+        json.loads(current_instance) if current_instance is not None else None
+    )
+    if current_instance and current_instance.get("reaction") is not None:
+        issue_id = IssueComment.objects.filter(pk=current_instance.get("comment_id"), project=project).values_list('issue_id', flat=True).first()
+        if issue_id is not None:
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=issue_id,
+                    actor=actor,
+                    verb="deleted",
+                    old_value=current_instance.get("reaction"),
+                    new_value=None,
+                    field="reaction",
+                    project=project,
+                    workspace=project.workspace,
+                    comment="removed the reaction",
+                    old_identifier=current_instance.get("identifier"),
+                    new_identifier=None,
+                )
+            )
+
+
+def create_issue_vote_activity(
+    requested_data, current_instance, issue_id, project, actor, issue_activities
+):
+    requested_data = json.loads(requested_data) if requested_data is not None else None
+    if requested_data and requested_data.get("vote") is not None:
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor=actor,
+                verb="created",
+                old_value=None,
+                new_value=requested_data.get("vote"),
+                field="vote",
+                project=project,
+                workspace=project.workspace,
+                comment="added the vote",
+                old_identifier=None,
+                new_identifier=None,
+            )
+        )
+
+
+def delete_issue_vote_activity(
+        requested_data, current_instance, issue_id, project, actor, issue_activities
+):
+    current_instance = (
+        json.loads(current_instance) if current_instance is not None else None
+    )
+    if current_instance and current_instance.get("vote") is not None:
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor=actor,
+                verb="deleted",
+                old_value=current_instance.get("vote"),
+                new_value=None,
+                field="vote",
+                project=project,
+                workspace=project.workspace,
+                comment="removed the vote",
+                old_identifier=current_instance.get("identifier"),
+                new_identifier=None,
+            )
+        )
+
 
 # Receive message from room group
 @shared_task
@@ -1045,6 +1192,12 @@ def issue_activity(
             "cycle.activity.deleted",
             "module.activity.created",
             "module.activity.deleted",
+            "issue_reaction.activity.created",
+            "issue_reaction.activity.deleted",
+            "comment_reaction.activity.created",
+            "comment_reaction.activity.deleted",
+            "issue_vote.activity.created",
+            "issue_vote.activity.deleted",
         ]:
             issue = Issue.objects.filter(pk=issue_id).first()
 
@@ -1080,6 +1233,12 @@ def issue_activity(
             "link.activity.deleted": delete_link_activity,
             "attachment.activity.created": create_attachment_activity,
             "attachment.activity.deleted": delete_attachment_activity,
+            "issue_reaction.activity.created": create_issue_reaction_activity,
+            "issue_reaction.activity.deleted": delete_issue_reaction_activity,
+            "comment_reaction.activity.created": create_comment_reaction_activity,
+            "comment_reaction.activity.deleted": delete_comment_reaction_activity,
+            "issue_vote.activity.created": create_issue_vote_activity,
+            "issue_vote.activity.deleted": delete_issue_vote_activity,
         }
 
         func = ACTIVITY_MAPPER.get(type)
@@ -1119,6 +1278,12 @@ def issue_activity(
             "cycle.activity.deleted",
             "module.activity.created",
             "module.activity.deleted",
+            "issue_reaction.activity.created",
+            "issue_reaction.activity.deleted",
+            "comment_reaction.activity.created",
+            "comment_reaction.activity.deleted",
+            "issue_vote.activity.created",
+            "issue_vote.activity.deleted",
         ]:
             # Create Notifications
             bulk_notifications = []

From 54527cc2bb85bec500b01069f319fc58a6cd9c7e Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 30 Aug 2023 17:27:49 +0530
Subject: [PATCH 49/70] dev: revamp publish project modal (#2022)

* dev: revamp publish project modal

* chore: sidebar dropdown text
---
 .../project/publish-project/modal.tsx         | 674 ++++++++++--------
 .../project/publish-project/popover.tsx       |  21 +-
 .../project/single-sidebar-project.tsx        |   6 +-
 apps/app/store/project-publish.tsx            |  22 +-
 4 files changed, 377 insertions(+), 346 deletions(-)

diff --git a/apps/app/components/project/publish-project/modal.tsx b/apps/app/components/project/publish-project/modal.tsx
index 5f9d9ae2c..b22a496f5 100644
--- a/apps/app/components/project/publish-project/modal.tsx
+++ b/apps/app/components/project/publish-project/modal.tsx
@@ -1,28 +1,38 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 // next imports
 import { useRouter } from "next/router";
 // react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // ui components
-import { ToggleSwitch, PrimaryButton, SecondaryButton } from "components/ui";
+import { ToggleSwitch, PrimaryButton, SecondaryButton, Icon, DangerButton } from "components/ui";
 import { CustomPopover } from "./popover";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
-import { IProjectPublishSettingsViews } from "store/project-publish";
+import { IProjectPublishSettings, TProjectPublishViews } from "store/project-publish";
 // hooks
 import useToast from "hooks/use-toast";
 import useProjectDetails from "hooks/use-project-details";
+import useUser from "hooks/use-user";
 
 type Props = {
   // user: ICurrentUserResponse | undefined;
 };
 
-const defaultValues: Partial<any> = {
+type FormData = {
+  id: string | null;
+  comments: boolean;
+  reactions: boolean;
+  votes: boolean;
+  inbox: string | null;
+  views: TProjectPublishViews[];
+};
+
+const defaultValues: FormData = {
   id: null,
   comments: false,
   reactions: false,
@@ -31,70 +41,73 @@ const defaultValues: Partial<any> = {
   views: ["list", "kanban"],
 };
 
-const viewOptions = [
-  { key: "list", value: "List" },
-  { key: "kanban", value: "Kanban" },
-  // { key: "calendar", value: "Calendar" },
-  // { key: "gantt", value: "Gantt" },
-  // { key: "spreadsheet", value: "Spreadsheet" },
+const viewOptions: {
+  key: TProjectPublishViews;
+  label: string;
+}[] = [
+  { key: "list", label: "List" },
+  { key: "kanban", label: "Kanban" },
+  // { key: "calendar", label: "Calendar" },
+  // { key: "gantt", label: "Gantt" },
+  // { key: "spreadsheet", label: "Spreadsheet" },
 ];
 
 export const PublishProjectModal: React.FC<Props> = observer(() => {
-  const store: RootStore = useMobxStore();
-  const { projectPublish } = store;
+  const [isUnpublishing, setIsUnpublishing] = useState(false);
+  const [isUpdateRequired, setIsUpdateRequired] = useState(false);
 
-  const { projectDetails, mutateProjectDetails } = useProjectDetails();
-
-  const { setToastAlert } = useToast();
-  const handleToastAlert = (title: string, type: string, message: string) => {
-    setToastAlert({
-      title: title || "Title",
-      type: "error" || "warning",
-      message: message || "Message",
-    });
-  };
-
-  const { NEXT_PUBLIC_DEPLOY_URL } = process.env;
-  const plane_deploy_url = NEXT_PUBLIC_DEPLOY_URL
-    ? NEXT_PUBLIC_DEPLOY_URL
-    : "http://localhost:3001";
+  const plane_deploy_url = process.env.NEXT_PUBLIC_DEPLOY_URL ?? "http://localhost:4000";
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const store: RootStore = useMobxStore();
+  const { projectPublish } = store;
+
+  const { user } = useUser();
+
+  const { mutateProjectDetails } = useProjectDetails();
+
+  const { setToastAlert } = useToast();
+
   const {
-    formState: { errors, isSubmitting },
+    control,
+    formState: { isSubmitting },
+    getValues,
     handleSubmit,
     reset,
     watch,
-    setValue,
-  } = useForm<any>({
+  } = useForm<FormData>({
     defaultValues,
-    reValidateMode: "onChange",
   });
 
   const handleClose = () => {
     projectPublish.handleProjectModal(null);
+
+    setIsUpdateRequired(false);
     reset({ ...defaultValues });
   };
 
+  // prefill form with the saved settings if the project is already published
   useEffect(() => {
     if (
       projectPublish.projectPublishSettings &&
-      projectPublish.projectPublishSettings != "not-initialized"
+      projectPublish.projectPublishSettings !== "not-initialized"
     ) {
-      let userBoards: string[] = [];
+      let userBoards: TProjectPublishViews[] = [];
+
       if (projectPublish.projectPublishSettings?.views) {
-        const _views: IProjectPublishSettingsViews | null =
-          projectPublish.projectPublishSettings?.views || null;
-        if (_views != null) {
-          if (_views.list) userBoards.push("list");
-          if (_views.kanban) userBoards.push("kanban");
-          if (_views.calendar) userBoards.push("calendar");
-          if (_views.gantt) userBoards.push("gantt");
-          if (_views.spreadsheet) userBoards.push("spreadsheet");
-          userBoards = userBoards && userBoards.length > 0 ? userBoards : ["list"];
-        }
+        const savedViews = projectPublish.projectPublishSettings?.views;
+
+        if (!savedViews) return;
+
+        if (savedViews.list) userBoards.push("list");
+        if (savedViews.kanban) userBoards.push("kanban");
+        if (savedViews.calendar) userBoards.push("calendar");
+        if (savedViews.gantt) userBoards.push("gantt");
+        if (savedViews.spreadsheet) userBoards.push("spreadsheet");
+
+        userBoards = userBoards && userBoards.length > 0 ? userBoards : ["list"];
       }
 
       const updatedData = {
@@ -105,126 +118,105 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
         inbox: projectPublish.projectPublishSettings?.inbox || null,
         views: userBoards,
       };
+
       reset({ ...updatedData });
     }
   }, [reset, projectPublish.projectPublishSettings]);
 
+  // fetch publish settings
   useEffect(() => {
+    if (!workspaceSlug) return;
+
     if (
       projectPublish.projectPublishModal &&
-      workspaceSlug &&
-      projectPublish.project_id != null &&
+      projectPublish.project_id !== null &&
       projectPublish?.projectPublishSettings === "not-initialized"
     ) {
       projectPublish.getProjectSettingsAsync(
-        workspaceSlug as string,
-        projectPublish.project_id as string,
+        workspaceSlug.toString(),
+        projectPublish.project_id,
         null
       );
     }
   }, [workspaceSlug, projectPublish, projectPublish.projectPublishModal]);
 
-  const onSettingsPublish = async (formData: any) => {
-    if (formData.views && formData.views.length > 0) {
-      const payload = {
-        comments: formData.comments || false,
-        reactions: formData.reactions || false,
-        votes: formData.votes || false,
-        inbox: formData.inbox || null,
-        views: {
-          list: formData.views.includes("list") || false,
-          kanban: formData.views.includes("kanban") || false,
-          calendar: formData.views.includes("calendar") || false,
-          gantt: formData.views.includes("gantt") || false,
-          spreadsheet: formData.views.includes("spreadsheet") || false,
-        },
-      };
+  const handlePublishProject = async (payload: IProjectPublishSettings) => {
+    if (!workspaceSlug || !user) return;
 
-      const _workspaceSlug = workspaceSlug;
-      const _projectId = projectPublish.project_id;
-
-      return projectPublish
-        .createProjectSettingsAsync(_workspaceSlug as string, _projectId as string, payload, null)
-        .then((response) => {
-          mutateProjectDetails();
-          handleClose();
-          console.log("_projectId", _projectId);
-          if (_projectId)
-            window.open(`${plane_deploy_url}/${_workspaceSlug}/${_projectId}`, "_blank");
-          return response;
-        })
-        .catch((error) => {
-          console.error("error", error);
-          return error;
-        });
-    } else {
-      handleToastAlert("Missing fields", "warning", "Please select at least one view to publish");
-    }
-  };
-
-  const onSettingsUpdate = async (key: string, value: any) => {
-    const payload = {
-      comments: key === "comments" ? value : watch("comments"),
-      reactions: key === "reactions" ? value : watch("reactions"),
-      votes: key === "votes" ? value : watch("votes"),
-      inbox: key === "inbox" ? value : watch("inbox"),
-      views:
-        key === "views"
-          ? {
-              list: value.includes("list") ? true : false,
-              kanban: value.includes("kanban") ? true : false,
-              calendar: value.includes("calendar") ? true : false,
-              gantt: value.includes("gantt") ? true : false,
-              spreadsheet: value.includes("spreadsheet") ? true : false,
-            }
-          : {
-              list: watch("views").includes("list") ? true : false,
-              kanban: watch("views").includes("kanban") ? true : false,
-              calendar: watch("views").includes("calendar") ? true : false,
-              gantt: watch("views").includes("gantt") ? true : false,
-              spreadsheet: watch("views").includes("spreadsheet") ? true : false,
-            },
-    };
+    const projectId = projectPublish.project_id;
 
     return projectPublish
-      .updateProjectSettingsAsync(
-        workspaceSlug as string,
-        projectPublish.project_id as string,
-        watch("id"),
+      .createProjectSettingsAsync(
+        workspaceSlug.toString(),
+        projectId?.toString() ?? "",
         payload,
-        null
+        user
       )
       .then((response) => {
         mutateProjectDetails();
+        handleClose();
+        if (projectId) window.open(`${plane_deploy_url}/${workspaceSlug}/${projectId}`, "_blank");
         return response;
       })
+      .catch((error) => {
+        console.error("error", error);
+        return error;
+      });
+  };
+
+  const handleUpdatePublishSettings = async (payload: IProjectPublishSettings) => {
+    if (!workspaceSlug || !user) return;
+
+    await projectPublish
+      .updateProjectSettingsAsync(
+        workspaceSlug.toString(),
+        projectPublish.project_id?.toString() ?? "",
+        payload.id ?? "",
+        payload,
+        user
+      )
+      .then((res) => {
+        mutateProjectDetails();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Publish settings updated successfully!",
+        });
+
+        handleClose();
+        return res;
+      })
       .catch((error) => {
         console.log("error", error);
         return error;
       });
   };
 
-  const onSettingsUnPublish = async (formData: any) =>
+  const handleUnpublishProject = async (publishId: string) => {
+    if (!workspaceSlug || !publishId) return;
+
+    setIsUnpublishing(true);
+
     projectPublish
       .deleteProjectSettingsAsync(
-        workspaceSlug as string,
+        workspaceSlug.toString(),
         projectPublish.project_id as string,
-        formData?.id,
+        publishId,
         null
       )
-      .then((response) => {
+      .then((res) => {
         mutateProjectDetails();
-        reset({ ...defaultValues });
+
         handleClose();
-        return response;
+        return res;
       })
-      .catch((error) => {
-        console.error("error", error);
-        return error;
-      });
+      .catch((err) => err)
+      .finally(() => setIsUnpublishing(false));
+  };
 
   const CopyLinkToClipboard = ({ copy_link }: { copy_link: string }) => {
-    const [status, setStatus] = React.useState(false);
+    const [status, setStatus] = useState(false);
 
     const copyText = () => {
       navigator.clipboard.writeText(copy_link);
@@ -244,6 +236,68 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
     );
   };
 
+  const handleFormSubmit = async (formData: FormData) => {
+    if (!formData.views || formData.views.length === 0) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Please select at least one view layout to publish the project.",
+      });
+      return;
+    }
+
+    const payload = {
+      comments: formData.comments,
+      reactions: formData.reactions,
+      votes: formData.votes,
+      inbox: formData.inbox,
+      views: {
+        list: formData.views.includes("list"),
+        kanban: formData.views.includes("kanban"),
+        calendar: formData.views.includes("calendar"),
+        gantt: formData.views.includes("gantt"),
+        spreadsheet: formData.views.includes("spreadsheet"),
+      },
+    };
+
+    if (watch("id")) await handleUpdatePublishSettings({ id: watch("id") ?? "", ...payload });
+    else await handlePublishProject(payload);
+  };
+
+  // check if an update is required or not
+  const checkIfUpdateIsRequired = () => {
+    if (
+      !projectPublish.projectPublishSettings ||
+      projectPublish.projectPublishSettings === "not-initialized"
+    )
+      return;
+
+    const currentSettings = projectPublish.projectPublishSettings as IProjectPublishSettings;
+    const newSettings = getValues();
+
+    if (
+      currentSettings.comments !== newSettings.comments ||
+      currentSettings.reactions !== newSettings.reactions ||
+      currentSettings.votes !== newSettings.votes
+    ) {
+      setIsUpdateRequired(true);
+      return;
+    }
+
+    let viewCheckFlag = 0;
+    viewOptions.forEach((option) => {
+      if (currentSettings.views[option.key] !== newSettings.views.includes(option.key))
+        viewCheckFlag++;
+    });
+
+    if (viewCheckFlag !== 0) {
+      setIsUpdateRequired(true);
+      return;
+    }
+
+    setIsUpdateRequired(false);
+  };
+
   return (
     <Transition.Root show={projectPublish.projectPublishModal} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
@@ -270,200 +324,190 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="transform rounded-lg bg-custom-background-100 border border-custom-border-100 text-left shadow-xl transition-all w-full sm:w-3/5 lg:w-1/2 xl:w-2/5 space-y-4">
-                {/* heading */}
-                <div className="p-3 px-4 pb-0 flex gap-2 justify-between items-center">
-                  <div className="font-medium text-xl">Publish</div>
-                  {projectPublish.loader && (
-                    <div className="text-xs text-custom-text-400">Changes saved</div>
-                  )}
-                  <div
-                    className="hover:bg-custom-background-90 w-[30px] h-[30px] rounded flex justify-center items-center cursor-pointer transition-all"
-                    onClick={handleClose}
-                  >
-                    <span className="material-symbols-rounded text-[16px]">close</span>
-                  </div>
-                </div>
-
-                {/* content */}
-                <div className="space-y-3">
-                  {watch("id") && (
-                    <div className="flex items-center gap-1 px-4 text-custom-primary-100">
-                      <div className="w-[20px] h-[20px] overflow-hidden flex items-center">
-                        <span className="material-symbols-rounded text-[18px]">
-                          radio_button_checked
-                        </span>
-                      </div>
-                      <div className="text-sm">This project is live on web</div>
-                    </div>
-                  )}
-
-                  <div className="mx-4 border border-custom-border-100 bg-custom-background-90 rounded p-3 py-2 relative flex gap-2 items-center">
-                    <div className="relative line-clamp-1 overflow-hidden w-full text-sm">
-                      {`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
-                    </div>
-                    <div className="flex-shrink-0 relative flex items-center gap-1">
-                      <a
-                        href={`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
-                        target="_blank"
-                        rel="noreferrer"
+              <Dialog.Panel className="transform rounded-lg bg-custom-background-100 border border-custom-border-100 text-left shadow-xl transition-all w-full sm:w-3/5 lg:w-1/2 xl:w-2/5 ">
+                <form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-4">
+                  {/* heading */}
+                  <div className="px-6 pt-4 flex items-center justify-between gap-2">
+                    <h5 className="font-semibold text-xl inline-block">Publish</h5>
+                    {watch("id") && (
+                      <DangerButton
+                        onClick={() => handleUnpublishProject(watch("id") ?? "")}
+                        className="!px-2 !py-1.5"
+                        loading={isUnpublishing}
                       >
-                        <div className="border border-custom-border-100 bg-custom-background-100 w-[30px] h-[30px] rounded flex justify-center items-center hover:bg-custom-background-90 cursor-pointer">
-                          <span className="material-symbols-rounded text-[16px]">open_in_new</span>
-                        </div>
-                      </a>
-                      <CopyLinkToClipboard
-                        copy_link={`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="space-y-3 px-4">
-                    <div className="relative flex justify-between items-center gap-2">
-                      <div className="text-custom-text-100">Views</div>
-                      <div>
-                        <CustomPopover
-                          label={
-                            watch("views") && watch("views").length > 0
-                              ? viewOptions
-                                  .filter(
-                                    (_view) => watch("views").includes(_view.key) && _view.value
-                                  )
-                                  .map((_view) => _view.value)
-                                  .join(", ")
-                              : ``
-                          }
-                          placeholder="Select views"
-                        >
-                          <>
-                            {viewOptions &&
-                              viewOptions.length > 0 &&
-                              viewOptions.map((_view) => (
-                                <div
-                                  key={_view.value}
-                                  className={`relative flex items-center gap-2 justify-between p-1 m-1 px-2 cursor-pointer rounded-sm text-custom-text-200 ${
-                                    watch("views").includes(_view.key)
-                                      ? `bg-custom-background-80 text-custom-text-100`
-                                      : `hover:bg-custom-background-80 hover:text-custom-text-100`
-                                  }`}
-                                  onClick={() => {
-                                    const _views =
-                                      watch("views") && watch("views").length > 0
-                                        ? watch("views").includes(_view?.key)
-                                          ? watch("views").filter((_o: string) => _o !== _view?.key)
-                                          : [...watch("views"), _view?.key]
-                                        : [_view?.key];
-                                    setValue("views", _views);
-                                    if (watch("id") != null) onSettingsUpdate("views", _views);
-                                  }}
-                                >
-                                  <div className="text-sm">{_view.value}</div>
-                                  <div
-                                    className={`w-[18px] h-[18px] relative flex justify-center items-center`}
-                                  >
-                                    {watch("views") &&
-                                      watch("views").length > 0 &&
-                                      watch("views").includes(_view.key) && (
-                                        <span className="material-symbols-rounded text-[18px]">
-                                          done
-                                        </span>
-                                      )}
-                                  </div>
-                                </div>
-                              ))}
-                          </>
-                        </CustomPopover>
-                      </div>
-                    </div>
-
-                    {/* <div className="relative flex justify-between items-center gap-2">
-                      <div className="text-custom-text-100">Allow comments</div>
-                      <div>
-                        <ToggleSwitch
-                          value={watch("comments") ?? false}
-                          onChange={() => {
-                            const _comments = !watch("comments");
-                            setValue("comments", _comments);
-                            if (watch("id") != null) onSettingsUpdate("comments", _comments);
-                          }}
-                          size="sm"
-                        />
-                      </div>
-                    </div> */}
-
-                    {/* <div className="relative flex justify-between items-center gap-2">
-                      <div className="text-custom-text-100">Allow reactions</div>
-                      <div>
-                        <ToggleSwitch
-                          value={watch("reactions") ?? false}
-                          onChange={() => {
-                            const _reactions = !watch("reactions");
-                            setValue("reactions", _reactions);
-                            if (watch("id") != null) onSettingsUpdate("reactions", _reactions);
-                          }}
-                          size="sm"
-                        />
-                      </div>
-                    </div> */}
-
-                    {/* <div className="relative flex justify-between items-center gap-2">
-                      <div className="text-custom-text-100">Allow Voting</div>
-                      <div>
-                        <ToggleSwitch
-                          value={watch("votes") ?? false}
-                          onChange={() => {
-                            const _votes = !watch("votes");
-                            setValue("votes", _votes);
-                            if (watch("id") != null) onSettingsUpdate("votes", _votes);
-                          }}
-                          size="sm"
-                        />
-                      </div>
-                    </div> */}
-
-                    {/* <div className="relative flex justify-between items-center gap-2">
-                      <div className="text-custom-text-100">Allow issue proposals</div>
-                      <div>
-                        <ToggleSwitch
-                          value={watch("inbox") ?? false}
-                          onChange={() => {
-                            setValue("inbox", !watch("inbox"));
-                          }}
-                          size="sm"
-                        />
-                      </div>
-                    </div> */}
-                  </div>
-                </div>
-
-                {/* modal handlers */}
-                <div className="border-t border-custom-border-300 p-3 px-4 relative flex justify-between items-center">
-                  <div className="flex items-center gap-1 text-custom-text-300">
-                    <div className="w-[20px] h-[20px] overflow-hidden flex items-center">
-                      <span className="material-symbols-rounded text-[18px]">public</span>
-                    </div>
-                    <div className="text-sm">Anyone with the link can access</div>
-                  </div>
-                  <div className="relative flex items-center gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    {watch("id") != null ? (
-                      <PrimaryButton
-                        outline
-                        onClick={handleSubmit(onSettingsUnPublish)}
-                        disabled={isSubmitting}
-                      >
-                        {isSubmitting ? "Unpublishing..." : "Unpublish"}
-                      </PrimaryButton>
-                    ) : (
-                      <PrimaryButton
-                        onClick={handleSubmit(onSettingsPublish)}
-                        disabled={isSubmitting}
-                      >
-                        {isSubmitting ? "Publishing..." : "Publish"}
-                      </PrimaryButton>
+                        {isUnpublishing ? "Unpublishing..." : "Unpublish"}
+                      </DangerButton>
                     )}
                   </div>
-                </div>
+
+                  {/* content */}
+                  <div className="space-y-3 px-6">
+                    <div className="border border-custom-border-100 bg-custom-background-80 rounded-md px-3 py-2 relative flex gap-2 items-center">
+                      <div className="truncate flex-grow text-sm">
+                        {`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
+                      </div>
+                      <div className="flex-shrink-0 relative flex items-center gap-1">
+                        <CopyLinkToClipboard
+                          copy_link={`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
+                        />
+                      </div>
+                    </div>
+
+                    {watch("id") && (
+                      <div className="flex items-center gap-1 text-custom-primary-100">
+                        <div className="w-5 h-5 overflow-hidden flex items-center">
+                          <Icon iconName="radio_button_checked" className="!text-lg" />
+                        </div>
+                        <div className="text-sm">This project is live on web</div>
+                      </div>
+                    )}
+
+                    <div className="space-y-4">
+                      <div className="relative flex justify-between items-center gap-2">
+                        <div className="text-sm">Views</div>
+                        <Controller
+                          control={control}
+                          name="views"
+                          render={({ field: { onChange, value } }) => (
+                            <CustomPopover
+                              label={
+                                value.length > 0
+                                  ? viewOptions
+                                      .filter((v) => value.includes(v.key))
+                                      .map((v) => v.label)
+                                      .join(", ")
+                                  : ``
+                              }
+                              placeholder="Select views"
+                            >
+                              <>
+                                {viewOptions.map((option) => (
+                                  <div
+                                    key={option.key}
+                                    className={`relative flex items-center gap-2 justify-between p-1 m-1 px-2 cursor-pointer rounded-sm text-custom-text-200 ${
+                                      value.includes(option.key)
+                                        ? "bg-custom-background-80 text-custom-text-100"
+                                        : "hover:bg-custom-background-80 hover:text-custom-text-100"
+                                    }`}
+                                    onClick={() => {
+                                      const _views =
+                                        value.length > 0
+                                          ? value.includes(option.key)
+                                            ? value.filter((_o: string) => _o !== option.key)
+                                            : [...value, option.key]
+                                          : [option.key];
+
+                                      if (_views.length === 0) return;
+
+                                      onChange(_views);
+                                      checkIfUpdateIsRequired();
+                                    }}
+                                  >
+                                    <div className="text-sm">{option.label}</div>
+                                    <div
+                                      className={`w-[18px] h-[18px] relative flex justify-center items-center`}
+                                    >
+                                      {value.length > 0 && value.includes(option.key) && (
+                                        <Icon iconName="done" className="!text-lg" />
+                                      )}
+                                    </div>
+                                  </div>
+                                ))}
+                              </>
+                            </CustomPopover>
+                          )}
+                        />
+                      </div>
+
+                      <div className="relative flex justify-between items-center gap-2">
+                        <div className="text-sm">Allow comments</div>
+                        <Controller
+                          control={control}
+                          name="comments"
+                          render={({ field: { onChange, value } }) => (
+                            <ToggleSwitch
+                              value={value}
+                              onChange={(val) => {
+                                onChange(val);
+                                checkIfUpdateIsRequired();
+                              }}
+                              size="sm"
+                            />
+                          )}
+                        />
+                      </div>
+                      <div className="relative flex justify-between items-center gap-2">
+                        <div className="text-sm">Allow reactions</div>
+                        <Controller
+                          control={control}
+                          name="reactions"
+                          render={({ field: { onChange, value } }) => (
+                            <ToggleSwitch
+                              value={value}
+                              onChange={(val) => {
+                                onChange(val);
+                                checkIfUpdateIsRequired();
+                              }}
+                              size="sm"
+                            />
+                          )}
+                        />
+                      </div>
+                      <div className="relative flex justify-between items-center gap-2">
+                        <div className="text-sm">Allow voting</div>
+                        <Controller
+                          control={control}
+                          name="votes"
+                          render={({ field: { onChange, value } }) => (
+                            <ToggleSwitch
+                              value={value}
+                              onChange={(val) => {
+                                onChange(val);
+                                checkIfUpdateIsRequired();
+                              }}
+                              size="sm"
+                            />
+                          )}
+                        />
+                      </div>
+
+                      {/* <div className="relative flex justify-between items-center gap-2">
+                      <div className="text-sm">Allow issue proposals</div>
+                      <Controller
+                        control={control}
+                        name="inbox"
+                        render={({ field: { onChange, value } }) => (
+                          <ToggleSwitch value={value} onChange={onChange} size="sm" />
+                        )}
+                      />
+                    </div> */}
+                    </div>
+                  </div>
+
+                  {/* modal handlers */}
+                  <div className="border-t border-custom-border-200 px-6 py-5 relative flex justify-between items-center">
+                    <div className="flex items-center gap-1 text-custom-text-400 text-sm">
+                      <Icon iconName="public" className="!text-base" />
+                      <div className="text-sm">Anyone with the link can access</div>
+                    </div>
+                    <div className="relative flex items-center gap-2">
+                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                      {watch("id") ? (
+                        <>
+                          {isUpdateRequired && (
+                            <PrimaryButton type="submit" loading={isSubmitting}>
+                              {isSubmitting ? "Updating..." : "Update settings"}
+                            </PrimaryButton>
+                          )}
+                        </>
+                      ) : (
+                        <PrimaryButton type="submit" loading={isSubmitting}>
+                          {isSubmitting ? "Publishing..." : "Publish"}
+                        </PrimaryButton>
+                      )}
+                    </div>
+                  </div>
+                </form>
               </Dialog.Panel>
             </Transition.Child>
           </div>
diff --git a/apps/app/components/project/publish-project/popover.tsx b/apps/app/components/project/publish-project/popover.tsx
index 623675b9f..5ab2d6432 100644
--- a/apps/app/components/project/publish-project/popover.tsx
+++ b/apps/app/components/project/publish-project/popover.tsx
@@ -1,6 +1,9 @@
 import React, { Fragment } from "react";
+
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
+// icons
+import { Icon } from "components/ui";
 
 export const CustomPopover = ({
   children,
@@ -16,18 +19,14 @@ export const CustomPopover = ({
       {({ open }) => (
         <>
           <Popover.Button
-            className={`${
-              open ? "" : ""
-            }  relative flex items-center gap-1 border border-custom-border-300 shadow-sm p-1 px-2 ring-0 outline-none`}
+            className={`${open ? "" : ""}  relative flex items-center gap-1 ring-0 outline-none`}
           >
-            <div className="text-sm font-medium">
-              {label ? label : placeholder ? placeholder : "Select"}
-            </div>
-            <div className="w-[20px] h-[20px] relative flex justify-center items-center">
+            <div className="text-sm">{label ?? placeholder}</div>
+            <div className="w-5 h-5 grid place-items-center">
               {!open ? (
-                <span className="material-symbols-rounded text-[20px]">expand_more</span>
+                <Icon iconName="expand_more" className="!text-base" />
               ) : (
-                <span className="material-symbols-rounded text-[20px]">expand_less</span>
+                <Icon iconName="expand_less" className="!text-base" />
               )}
             </div>
           </Popover.Button>
@@ -41,8 +40,8 @@ export const CustomPopover = ({
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-1"
           >
-            <Popover.Panel className="absolute right-0 z-[9999]">
-              <div className="overflow-hidden rounded-sm border border-custom-border-300 mt-1 overflow-y-auto bg-custom-background-90 shadow-lg focus:outline-none">
+            <Popover.Panel className="absolute right-0 z-10 mt-1 min-w-[150px]">
+              <div className="overflow-hidden rounded border border-custom-border-300 mt-1 overflow-y-auto bg-custom-background-90 shadow-custom-shadow-2xs focus:outline-none">
                 {children}
               </div>
             </Popover.Panel>
diff --git a/apps/app/components/project/single-sidebar-project.tsx b/apps/app/components/project/single-sidebar-project.tsx
index 7bfca0d2c..6fbdbbaf0 100644
--- a/apps/app/components/project/single-sidebar-project.tsx
+++ b/apps/app/components/project/single-sidebar-project.tsx
@@ -26,7 +26,6 @@ import {
   SettingsOutlined,
 } from "@mui/icons-material";
 // helpers
-import { truncateText } from "helpers/string.helper";
 import { renderEmoji } from "helpers/emoji.helper";
 // types
 import { IProject } from "types";
@@ -265,11 +264,10 @@ export const SingleSidebarProject: React.FC<Props> = observer(
                     >
                       <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">
-                          <span className="material-symbols-rounded text-[16px]">ios_share</span>
+                          <Icon iconName="ios_share" className="!text-base" />
                         </div>
-                        <div>Publish</div>
+                        <div>{project.is_deployed ? "Publish settings" : "Publish"}</div>
                       </div>
-                      {/* <PublishProjectModal /> */}
                     </CustomMenu.MenuItem>
                   )}
 
diff --git a/apps/app/store/project-publish.tsx b/apps/app/store/project-publish.tsx
index 1b27d5fff..ffc45f546 100644
--- a/apps/app/store/project-publish.tsx
+++ b/apps/app/store/project-publish.tsx
@@ -4,21 +4,11 @@ import { RootStore } from "./root";
 // services
 import ProjectServices from "services/project-publish.service";
 
-export type IProjectPublishSettingsViewKeys =
-  | "list"
-  | "gantt"
-  | "kanban"
-  | "calendar"
-  | "spreadsheet"
-  | string;
+export type TProjectPublishViews = "list" | "gantt" | "kanban" | "calendar" | "spreadsheet";
 
-export interface IProjectPublishSettingsViews {
-  list: boolean;
-  gantt: boolean;
-  kanban: boolean;
-  calendar: boolean;
-  spreadsheet: boolean;
-}
+export type TProjectPublishViewsSettings = {
+  [key in TProjectPublishViews]: boolean;
+};
 
 export interface IProjectPublishSettings {
   id?: string;
@@ -26,8 +16,8 @@ export interface IProjectPublishSettings {
   comments: boolean;
   reactions: boolean;
   votes: boolean;
-  views: IProjectPublishSettingsViews;
-  inbox: null;
+  views: TProjectPublishViewsSettings;
+  inbox: string | null;
 }
 
 export interface IProjectPublishStore {

From 5e00ffee0563215f8ee0503dfe242fb16fb3365c Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 30 Aug 2023 17:28:17 +0530
Subject: [PATCH 50/70] fix: bugs on the user profile page (#2018)

---
 apps/app/components/profile/sidebar.tsx      | 19 ++-----------
 apps/app/contexts/profile-issues-context.tsx | 29 +++++++++++---------
 apps/app/hooks/use-profile-issues.tsx        | 17 +++++++++++-
 3 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/apps/app/components/profile/sidebar.tsx b/apps/app/components/profile/sidebar.tsx
index ba574441a..a1236b397 100644
--- a/apps/app/components/profile/sidebar.tsx
+++ b/apps/app/components/profile/sidebar.tsx
@@ -3,8 +3,6 @@ import Link from "next/link";
 
 import useSWR from "swr";
 
-// next-themes
-import { useTheme } from "next-themes";
 // headless ui
 import { Disclosure, Transition } from "@headlessui/react";
 // services
@@ -25,8 +23,6 @@ export const ProfileSidebar = () => {
   const router = useRouter();
   const { workspaceSlug, userId } = router.query;
 
-  const { theme } = useTheme();
-
   const { user } = useUser();
 
   const { data: userProjectsData } = useSWR(
@@ -56,15 +52,7 @@ export const ProfileSidebar = () => {
   ];
 
   return (
-    <div
-      className="flex-shrink-0 md:h-full w-full md:w-80 overflow-y-auto"
-      style={{
-        boxShadow:
-          theme === "light"
-            ? "0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12)"
-            : "0px 0px 4px 0px rgba(0, 0, 0, 0.20), 0px 2px 6px 0px rgba(0, 0, 0, 0.50)",
-      }}
-    >
+    <div className="flex-shrink-0 md:h-full w-full md:w-80 overflow-y-auto shadow-custom-shadow-sm">
       {userProjectsData ? (
         <>
           <div className="relative h-32">
@@ -127,12 +115,11 @@ export const ProfileSidebar = () => {
                   project.assigned_issues +
                   project.pending_issues +
                   project.completed_issues;
-                const totalAssignedIssues = totalIssues - project.created_issues;
 
                 const completedIssuePercentage =
-                  totalAssignedIssues === 0
+                  project.assigned_issues === 0
                     ? 0
-                    : Math.round((project.completed_issues / totalAssignedIssues) * 100);
+                    : Math.round((project.completed_issues / project.assigned_issues) * 100);
 
                 return (
                   <Disclosure
diff --git a/apps/app/contexts/profile-issues-context.tsx b/apps/app/contexts/profile-issues-context.tsx
index 7fc6d6c02..db54f2470 100644
--- a/apps/app/contexts/profile-issues-context.tsx
+++ b/apps/app/contexts/profile-issues-context.tsx
@@ -197,23 +197,26 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
 }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
-  const setIssueView = useCallback((property: TIssueViewOptions) => {
-    dispatch({
-      type: "SET_ISSUE_VIEW",
-      payload: {
-        issueView: property,
-      },
-    });
-
-    if (property === "kanban") {
+  const setIssueView = useCallback(
+    (property: TIssueViewOptions) => {
       dispatch({
-        type: "SET_GROUP_BY_PROPERTY",
+        type: "SET_ISSUE_VIEW",
         payload: {
-          groupByProperty: "state_detail.group",
+          issueView: property,
         },
       });
-    }
-  }, []);
+
+      if (property === "kanban" && state.groupByProperty === null) {
+        dispatch({
+          type: "SET_GROUP_BY_PROPERTY",
+          payload: {
+            groupByProperty: "state_detail.group",
+          },
+        });
+      }
+    },
+    [state]
+  );
 
   const setGroupByProperty = useCallback((property: TIssueGroupByOptions) => {
     dispatch({
diff --git a/apps/app/hooks/use-profile-issues.tsx b/apps/app/hooks/use-profile-issues.tsx
index 6b4d4abfa..c232199bc 100644
--- a/apps/app/hooks/use-profile-issues.tsx
+++ b/apps/app/hooks/use-profile-issues.tsx
@@ -71,8 +71,23 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
         allIssues: userProfileIssues,
       };
 
+    if (groupByProperty === "state_detail.group") {
+      return userProfileIssues
+        ? Object.assign(
+            {
+              backlog: [],
+              unstarted: [],
+              started: [],
+              completed: [],
+              cancelled: [],
+            },
+            userProfileIssues
+          )
+        : undefined;
+    }
+
     return userProfileIssues;
-  }, [userProfileIssues]);
+  }, [groupByProperty, userProfileIssues]);
 
   useEffect(() => {
     if (!userId || !filters) return;

From 320608ea73ac3bd043250369af5601ac8921540b Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Thu, 31 Aug 2023 11:32:58 +0530
Subject: [PATCH 51/70] chore: return issue votes in public issue list endpoint
 (#2026)

---
 apiserver/plane/api/serializers/issue.py | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apiserver/plane/api/serializers/issue.py b/apiserver/plane/api/serializers/issue.py
index 2a75b2f48..1f4d814a4 100644
--- a/apiserver/plane/api/serializers/issue.py
+++ b/apiserver/plane/api/serializers/issue.py
@@ -681,6 +681,7 @@ class IssuePublicSerializer(BaseSerializer):
     project_detail = ProjectLiteSerializer(read_only=True, source="project")
     state_detail = StateLiteSerializer(read_only=True, source="state")
     issue_reactions = IssueReactionLiteSerializer(read_only=True, many=True)
+    votes = IssueVoteSerializer(read_only=True, many=True)
 
     class Meta:
         model = Issue
@@ -697,6 +698,7 @@ class IssuePublicSerializer(BaseSerializer):
             "priority",
             "target_date",
             "issue_reactions",
+            "votes",
         ]
         read_only_fields = fields
 

From 38b7f4382fda94d04f9c833adc09263df6b0ea4e Mon Sep 17 00:00:00 2001
From: "M. Palanikannan" <73993394+Palanikannan1437@users.noreply.github.com>
Date: Thu, 31 Aug 2023 13:41:41 +0530
Subject: [PATCH 52/70] [feat]: Tiptap table integration (#2008)

* added basic table support

* fixed table position at bottom

* fixed image node deletion logic's regression issue

* added compatible styles

* enabled slash commands

* disabled slash command and bubble menu's node selector for table cells

* added dropcursor support to type below the table/image

* blocked image uploads for handledrop and paste actions
---
 .../components/tiptap/bubble-menu/index.tsx   |  4 +-
 .../tiptap/bubble-menu/link-selector.tsx      |  5 +-
 .../components/tiptap/extensions/index.tsx    | 15 ++-
 .../tiptap/extensions/table/table-cell.ts     | 31 ++++++
 .../tiptap/extensions/table/table-header.ts   |  7 ++
 .../tiptap/extensions/table/table.ts          |  9 ++
 apps/app/components/tiptap/index.tsx          |  2 +
 .../tiptap/plugins/delete-image.tsx           |  2 +-
 .../tiptap/plugins/upload-image.tsx           |  2 -
 apps/app/components/tiptap/props.tsx          | 19 ++++
 .../components/tiptap/slash-command/index.tsx | 13 +++
 .../components/tiptap/table-menu/index.tsx    | 96 +++++++++++++++++++
 apps/app/package.json                         |  5 +
 apps/app/styles/editor.css                    | 79 +++++++++++++++
 yarn.lock                                     | 25 +++++
 15 files changed, 306 insertions(+), 8 deletions(-)
 create mode 100644 apps/app/components/tiptap/extensions/table/table-cell.ts
 create mode 100644 apps/app/components/tiptap/extensions/table/table-header.ts
 create mode 100644 apps/app/components/tiptap/extensions/table/table.ts
 create mode 100644 apps/app/components/tiptap/table-menu/index.tsx

diff --git a/apps/app/components/tiptap/bubble-menu/index.tsx b/apps/app/components/tiptap/bubble-menu/index.tsx
index e68900782..7e72963b6 100644
--- a/apps/app/components/tiptap/bubble-menu/index.tsx
+++ b/apps/app/components/tiptap/bubble-menu/index.tsx
@@ -77,14 +77,14 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
       {...bubbleMenuProps}
       className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
     >
-      <NodeSelector
+      {!props.editor.isActive("table") && <NodeSelector
         editor={props.editor!}
         isOpen={isNodeSelectorOpen}
         setIsOpen={() => {
           setIsNodeSelectorOpen(!isNodeSelectorOpen);
           setIsLinkSelectorOpen(false);
         }}
-      />
+      />}
       <LinkSelector
         editor={props.editor!!}
         isOpen={isLinkSelectorOpen}
diff --git a/apps/app/components/tiptap/bubble-menu/link-selector.tsx b/apps/app/components/tiptap/bubble-menu/link-selector.tsx
index 1596870f7..16072f4be 100644
--- a/apps/app/components/tiptap/bubble-menu/link-selector.tsx
+++ b/apps/app/components/tiptap/bubble-menu/link-selector.tsx
@@ -6,7 +6,7 @@ import isValidHttpUrl from "./utils/link-validator";
 interface LinkSelectorProps {
   editor: Editor;
   isOpen: boolean;
-  setIsOpen: Dispatch<SetStateAction<boolean>>;
+  setIsOpen: Dispatch<SetStateAction<boolean>>
 }
 
 
@@ -52,7 +52,8 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
           className="fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 dow-xl animate-in fade-in slide-in-from-top-1"
           onKeyDown={(e) => {
             if (e.key === "Enter") {
-              e.preventDefault(); onLinkSubmit();
+              e.preventDefault();
+              onLinkSubmit();
             }
           }}
         >
diff --git a/apps/app/components/tiptap/extensions/index.tsx b/apps/app/components/tiptap/extensions/index.tsx
index 2c5ffd10a..fa257b20a 100644
--- a/apps/app/components/tiptap/extensions/index.tsx
+++ b/apps/app/components/tiptap/extensions/index.tsx
@@ -13,6 +13,7 @@ import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 import { lowlight } from "lowlight/lib/core";
 import SlashCommand from "../slash-command";
 import { InputRule } from "@tiptap/core";
+import Gapcursor from '@tiptap/extension-gapcursor'
 
 import ts from "highlight.js/lib/languages/typescript";
 
@@ -20,6 +21,10 @@ import "highlight.js/styles/github-dark.css";
 import UniqueID from "@tiptap-pro/extension-unique-id";
 import UpdatedImage from "./updated-image";
 import isValidHttpUrl from "../bubble-menu/utils/link-validator";
+import { CustomTableCell } from "./table/table-cell";
+import { Table } from "./table/table";
+import { TableHeader } from "./table/table-header";
+import { TableRow } from "@tiptap/extension-table-row";
 
 lowlight.registerLanguage("ts", ts);
 
@@ -55,7 +60,7 @@ export const TiptapExtensions = (workspaceSlug: string, setIsSubmitting?: (isSub
     codeBlock: false,
     horizontalRule: false,
     dropcursor: {
-      color: "#DBEAFE",
+      color: "rgba(var(--color-text-100))",
       width: 2,
     },
     gapcursor: false,
@@ -86,6 +91,7 @@ export const TiptapExtensions = (workspaceSlug: string, setIsSubmitting?: (isSub
       class: "mb-6 border-t border-custom-border-300",
     },
   }),
+  Gapcursor,
   TiptapLink.configure({
     protocols: ["http", "https"],
     validate: (url) => isValidHttpUrl(url),
@@ -104,6 +110,9 @@ export const TiptapExtensions = (workspaceSlug: string, setIsSubmitting?: (isSub
       if (node.type.name === "heading") {
         return `Heading ${node.attrs.level}`;
       }
+      if (node.type.name === "image" || node.type.name === "table") {
+        return ""
+      }
 
       return "Press '/' for commands...";
     },
@@ -134,4 +143,8 @@ export const TiptapExtensions = (workspaceSlug: string, setIsSubmitting?: (isSub
     html: true,
     transformCopiedText: true,
   }),
+  Table,
+  TableHeader,
+  CustomTableCell,
+  TableRow
 ];
diff --git a/apps/app/components/tiptap/extensions/table/table-cell.ts b/apps/app/components/tiptap/extensions/table/table-cell.ts
new file mode 100644
index 000000000..94c5aced2
--- /dev/null
+++ b/apps/app/components/tiptap/extensions/table/table-cell.ts
@@ -0,0 +1,31 @@
+import { TableCell } from "@tiptap/extension-table-cell";
+
+export const CustomTableCell = TableCell.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      isHeader: {
+        default: false,
+        parseHTML: (element) => { isHeader: element.tagName === "TD" },
+        renderHTML: (attributes) => { tag: attributes.isHeader ? "th" : "td" }
+      },
+    };
+  },
+  renderHTML({ HTMLAttributes }) {
+    if (HTMLAttributes.isHeader) {
+      return [
+        "th",
+        {
+          ...HTMLAttributes,
+          class: `relative ${HTMLAttributes.class}`,
+        },
+        [
+          "span",
+          { class: "absolute top-0 right-0" },
+        ],
+        0,
+      ];
+    }
+    return ["td", HTMLAttributes, 0];
+  },
+});
diff --git a/apps/app/components/tiptap/extensions/table/table-header.ts b/apps/app/components/tiptap/extensions/table/table-header.ts
new file mode 100644
index 000000000..d04fe85d3
--- /dev/null
+++ b/apps/app/components/tiptap/extensions/table/table-header.ts
@@ -0,0 +1,7 @@
+import { TableHeader as BaseTableHeader } from "@tiptap/extension-table-header";
+
+const TableHeader = BaseTableHeader.extend({
+  content: "paragraph"
+});
+
+export { TableHeader };
diff --git a/apps/app/components/tiptap/extensions/table/table.ts b/apps/app/components/tiptap/extensions/table/table.ts
new file mode 100644
index 000000000..b05dedb3b
--- /dev/null
+++ b/apps/app/components/tiptap/extensions/table/table.ts
@@ -0,0 +1,9 @@
+import { Table as BaseTable } from "@tiptap/extension-table";
+
+const Table = BaseTable.configure({
+  resizable: true,
+  cellMinWidth: 100,
+  allowTableNodeSelection: true
+});
+
+export { Table };
diff --git a/apps/app/components/tiptap/index.tsx b/apps/app/components/tiptap/index.tsx
index f0315cad4..869e44aad 100644
--- a/apps/app/components/tiptap/index.tsx
+++ b/apps/app/components/tiptap/index.tsx
@@ -5,6 +5,7 @@ import { TiptapExtensions } from "./extensions";
 import { TiptapEditorProps } from "./props";
 import { useImperativeHandle, useRef, forwardRef } from "react";
 import { ImageResizer } from "./extensions/image-resize";
+import { TableMenu } from "./table-menu";
 
 export interface ITipTapRichTextEditor {
   value: string;
@@ -92,6 +93,7 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
       {editor && <EditorBubbleMenu editor={editor} />}
       <div className={`${editorContentCustomClassNames}`}>
         <EditorContent editor={editor} />
+        {editor?.isActive("table") && <TableMenu editor={editor} />}
         {editor?.isActive("image") && <ImageResizer editor={editor} />}
       </div>
     </div>
diff --git a/apps/app/components/tiptap/plugins/delete-image.tsx b/apps/app/components/tiptap/plugins/delete-image.tsx
index 57ab65c63..262a3f591 100644
--- a/apps/app/components/tiptap/plugins/delete-image.tsx
+++ b/apps/app/components/tiptap/plugins/delete-image.tsx
@@ -16,6 +16,7 @@ const TrackImageDeletionPlugin = () =>
         oldState.doc.descendants((oldNode, oldPos) => {
           if (oldNode.type.name !== 'image') return;
 
+          if (oldPos < 0 || oldPos > newState.doc.content.size) return;
           if (!newState.doc.resolve(oldPos).parent) return;
           const newNode = newState.doc.nodeAt(oldPos);
 
@@ -28,7 +29,6 @@ const TrackImageDeletionPlugin = () =>
                 nodeExists = true;
               }
             });
-
             if (!nodeExists) {
               removedImages.push(oldNode as ProseMirrorNode);
             }
diff --git a/apps/app/components/tiptap/plugins/upload-image.tsx b/apps/app/components/tiptap/plugins/upload-image.tsx
index 0657bc82b..a13f8e18a 100644
--- a/apps/app/components/tiptap/plugins/upload-image.tsx
+++ b/apps/app/components/tiptap/plugins/upload-image.tsx
@@ -60,8 +60,6 @@ function findPlaceholder(state: EditorState, id: {}) {
 export async function startImageUpload(file: File, view: EditorView, pos: number, workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void) {
   if (!file.type.includes("image/")) {
     return;
-  } else if (file.size / 1024 / 1024 > 20) {
-    return;
   }
 
   const id = {};
diff --git a/apps/app/components/tiptap/props.tsx b/apps/app/components/tiptap/props.tsx
index d50fc29b0..69cddca1f 100644
--- a/apps/app/components/tiptap/props.tsx
+++ b/apps/app/components/tiptap/props.tsx
@@ -1,5 +1,6 @@
 import { EditorProps } from "@tiptap/pm/view";
 import { startImageUpload } from "./plugins/upload-image";
+import { findTableAncestor } from "./table-menu";
 
 export function TiptapEditorProps(workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void): EditorProps {
   return {
@@ -18,6 +19,15 @@ export function TiptapEditorProps(workspaceSlug: string, setIsSubmitting?: (isSu
       },
     },
     handlePaste: (view, event) => {
+      if (typeof window !== "undefined") {
+        const selection: any = window?.getSelection();
+        if (selection.rangeCount !== 0) {
+          const range = selection.getRangeAt(0);
+          if (findTableAncestor(range.startContainer)) {
+            return;
+          }
+        }
+      }
       if (
         event.clipboardData &&
         event.clipboardData.files &&
@@ -32,6 +42,15 @@ export function TiptapEditorProps(workspaceSlug: string, setIsSubmitting?: (isSu
       return false;
     },
     handleDrop: (view, event, _slice, moved) => {
+      if (typeof window !== "undefined") {
+        const selection: any = window?.getSelection();
+        if (selection.rangeCount !== 0) {
+          const range = selection.getRangeAt(0);
+          if (findTableAncestor(range.startContainer)) {
+            return;
+          }
+        }
+      }
       if (
         !moved &&
         event.dataTransfer &&
diff --git a/apps/app/components/tiptap/slash-command/index.tsx b/apps/app/components/tiptap/slash-command/index.tsx
index 38f5c9c0a..c843f0762 100644
--- a/apps/app/components/tiptap/slash-command/index.tsx
+++ b/apps/app/components/tiptap/slash-command/index.tsx
@@ -15,6 +15,7 @@ import {
   MinusSquare,
   CheckSquare,
   ImageIcon,
+  Table,
 } from "lucide-react";
 import { startImageUpload } from "../plugins/upload-image";
 import { cn } from "../utils";
@@ -46,6 +47,9 @@ const Command = Extension.create({
     return [
       Suggestion({
         editor: this.editor,
+        allow({ editor }) {
+          return !editor.isActive("table");
+        },
         ...this.options.suggestion,
       }),
     ];
@@ -117,6 +121,15 @@ const getSuggestionItems = (workspaceSlug: string, setIsSubmitting?: (isSubmitti
         editor.chain().focus().deleteRange(range).setHorizontalRule().run();
       },
     },
+    {
+      title: "Table",
+      description: "Create a Table",
+      searchTerms: ["table", "cell", "db", "data", "tabular"],
+      icon: <Table size={18} />,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+      },
+    },
     {
       title: "Numbered List",
       description: "Create a list with numbering.",
diff --git a/apps/app/components/tiptap/table-menu/index.tsx b/apps/app/components/tiptap/table-menu/index.tsx
new file mode 100644
index 000000000..878679a29
--- /dev/null
+++ b/apps/app/components/tiptap/table-menu/index.tsx
@@ -0,0 +1,96 @@
+import { useState, useEffect } from "react";
+import { Rows, Columns, ToggleRight } from "lucide-react";
+import { cn } from "../utils";
+
+interface TableMenuItem {
+  name: string;
+  command: () => void;
+  icon: any;
+}
+
+export const findTableAncestor = (node: Node | null): HTMLTableElement | null => {
+  while (node !== null && node.nodeName !== "TABLE") {
+    node = node.parentNode;
+  }
+  return node as HTMLTableElement;
+};
+
+export const TableMenu = ({ editor }: { editor: any }) => {
+  const [tableLocation, setTableLocation] = useState({ bottom: 0, left: 0 });
+  const items: TableMenuItem[] = [
+    {
+      name: "Insert Column right",
+      command: () => editor.chain().focus().addColumnBefore().run(),
+      icon: Columns,
+    },
+    {
+      name: "Insert Row below",
+      command: () => editor.chain().focus().addRowAfter().run(),
+      icon: Rows,
+    },
+    {
+      name: "Delete Column",
+      command: () => editor.chain().focus().deleteColumn().run(),
+      icon: Columns,
+    },
+    {
+      name: "Delete Rows",
+      command: () => editor.chain().focus().deleteRow().run(),
+      icon: Rows,
+    },
+    {
+      name: "Toggle Header Row",
+      command: () => editor.chain().focus().toggleHeaderRow().run(),
+      icon: ToggleRight,
+    }
+
+  ];
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const handleWindowClick = () => {
+        const selection: any = window?.getSelection();
+        if (selection.rangeCount !== 0) {
+          const range = selection.getRangeAt(0);
+          const tableNode = findTableAncestor(range.startContainer);
+          if (tableNode) {
+            const tableRect = tableNode.getBoundingClientRect();
+            const tableCenter = tableRect.left + tableRect.width / 2;
+            const menuWidth = 45;
+            const menuLeft = tableCenter - menuWidth / 2;
+            const tableBottom = tableRect.bottom;
+            setTableLocation({ bottom: tableBottom, left: menuLeft });
+          }
+        }
+      }
+
+      window.addEventListener("click", handleWindowClick);
+
+      return () => {
+        window.removeEventListener("click", handleWindowClick);
+      };
+    }
+  }, [tableLocation]);
+
+  return (
+    <section
+      className="fixed left-1/2 transform -translate-x-1/2 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
+      style={{ bottom: `calc(100vh - ${tableLocation.bottom + 45}px)`, left: `${tableLocation.left}px` }}
+    >
+      {items.map((item, index) => (
+        <button
+          key={index}
+          onClick={item.command}
+          className="p-2 text-custom-text-200 hover:bg-text-custom-text-100 hover:bg-custom-primary-100/10 active:bg-custom-background-100"
+          title={item.name}
+        >
+          <item.icon
+            className={cn("h-5 w-5 text-lg", {
+              "text-red-600": item.name.includes("Delete"),
+            })}
+          />
+        </button>
+      ))}
+    </section>
+  );
+};
diff --git a/apps/app/package.json b/apps/app/package.json
index 578a95716..b9f3bf25e 100644
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -30,11 +30,16 @@
     "@tiptap-pro/extension-unique-id": "^2.1.0",
     "@tiptap/extension-code-block-lowlight": "^2.0.4",
     "@tiptap/extension-color": "^2.0.4",
+    "@tiptap/extension-gapcursor": "^2.1.7",
     "@tiptap/extension-highlight": "^2.0.4",
     "@tiptap/extension-horizontal-rule": "^2.0.4",
     "@tiptap/extension-image": "^2.0.4",
     "@tiptap/extension-link": "^2.0.4",
     "@tiptap/extension-placeholder": "^2.0.4",
+    "@tiptap/extension-table": "^2.1.6",
+    "@tiptap/extension-table-cell": "^2.1.6",
+    "@tiptap/extension-table-header": "^2.1.6",
+    "@tiptap/extension-table-row": "^2.1.6",
     "@tiptap/extension-task-item": "^2.0.4",
     "@tiptap/extension-task-list": "^2.0.4",
     "@tiptap/extension-text-style": "^2.0.4",
diff --git a/apps/app/styles/editor.css b/apps/app/styles/editor.css
index 57c23c911..3332185d2 100644
--- a/apps/app/styles/editor.css
+++ b/apps/app/styles/editor.css
@@ -30,6 +30,10 @@
   }
 }
 
+.ProseMirror-gapcursor:after {
+  border-top: 1px solid rgb(var(--color-text-100)) !important;
+}
+
 /* Custom TODO list checkboxes – shoutout to this awesome tutorial: https://moderncss.dev/pure-css-custom-checkbox-style/ */
 
 ul[data-type="taskList"] li > label {
@@ -150,3 +154,78 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
     transform: rotate(360deg);
   }
 }
+
+#tiptap-container {
+  table {
+    border-collapse: collapse;
+    table-layout: fixed;
+    margin: 0;
+    margin-bottom: 1.5rem;
+    margin-top: 1.5rem;
+    border: 2px solid rgb(var(--color-border-100));
+    width: 100%;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+
+    td,
+    th {
+      min-width: 1em;
+      border: 2px solid rgb(var(--color-border-400));
+      padding: 10px 15px;
+      vertical-align: top;
+      box-sizing: border-box;
+      position: relative;
+      transition: background-color 0.3s ease;
+
+      > * {
+        margin-bottom: 0;
+      }
+    }
+
+    th {
+      font-weight: bold;
+      text-align: left; 
+      background-color: rgb(var(--color-primary-300));
+    }
+
+    td:hover {
+      background-color: rgba(var(--color-primary-300), 0.1);
+    }
+
+    .selectedCell:after {
+      z-index: 2;
+      position: absolute;
+      content: "";
+      left: 0; right: 0; top: 0; bottom: 0;
+      background-color: rgba(var(--color-primary-300), 0.1);
+      pointer-events: none;
+    }
+
+    .column-resize-handle {
+      position: absolute;
+      right: -2px;
+      top: 0;
+      bottom: -2px;
+      width: 2px;
+      background-color: rgb(var(--color-primary-400));
+      pointer-events: none;
+    }
+  }
+}
+
+.tableWrapper {
+  overflow-x: auto;
+}
+
+.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+.ProseMirror table * p {
+   padding: 0px 1px;
+   margin: 6px 2px;
+}
+
+.ProseMirror table * .is-empty::before {
+  opacity: 0;
+}
diff --git a/yarn.lock b/yarn.lock
index ac134d60f..3eafeb5b9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2282,6 +2282,11 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.0.4.tgz#c100a792fd41535ad6382aa8133d0d9c0b2cb2b8"
   integrity sha512-VxmKfBQjSSu1mNvHlydA4dJW/zawGKyqmnryiFNcUV9s+/HWLR5i9SiUl4wJM/B8sG8cQxClne5/LrCAeGNYuA==
 
+"@tiptap/extension-gapcursor@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.1.7.tgz#5c0303ba37b4c066f3a3c5835fd0b298f0d3e919"
+  integrity sha512-7eoInzzk1sssoD3RMkwFC86U15Ja4ANve+8wIC+xhN4R3Oe3PY3lFbp1GQxCmaJj8b3rtjNKIQZ2zO0PH58afA==
+
 "@tiptap/extension-hard-break@^2.0.4":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.0.4.tgz#a4f70fa9a473270f7ec89f20a14b9122af5657bc"
@@ -2349,6 +2354,26 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.0.4.tgz#13286dcf8780c55610ed65b24238b8395a5be824"
   integrity sha512-Men7LK6N/Dh3/G4/z2Z9WkDHM2Gxx1XyxYix2ZMf5CnqY37SeDNUnGDqit65pdIN3Y/TQnOZTkKSBilSAtXfJA==
 
+"@tiptap/extension-table-cell@^2.1.6":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-cell/-/extension-table-cell-2.1.7.tgz#87841144b8368c9611ad46f2134b637e2c33c8bc"
+  integrity sha512-p3e4FNdbKVIjOLHDcXrRtlP6FYPoN6hBUFjq6QZbf5g4+ao2Uq4bQCL+eKbYMxUVERl8g/Qu9X+jG99fVsBDjA==
+
+"@tiptap/extension-table-header@^2.1.6":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-header/-/extension-table-header-2.1.7.tgz#4757834655e2c4edffa65bc6f6807eb59401e0d8"
+  integrity sha512-rolSUQxFJf/CEj2XBJpeMsLiLHASKrVIzZ2A/AZ9pT6WpFqmECi8r9xyutpJpx21n2Hrk46Y+uGFOKhyvbZ5ug==
+
+"@tiptap/extension-table-row@^2.1.6":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-row/-/extension-table-row-2.1.7.tgz#f736a61035b271423ef18f65a25f8d1e240263a1"
+  integrity sha512-DBCaEMEuCCoOmr4fdDfp2jnmyWPt672rmCZ5WUuenJ47Cy4Ox2dV+qk5vBZ/yDQcq12WvzLMhdSnAo9pMMMa6Q==
+
+"@tiptap/extension-table@^2.1.6":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table/-/extension-table-2.1.7.tgz#c8a83744f60c76ae1e41438b04d5ac9e984afa66"
+  integrity sha512-nlKs35vTQOFW9lfw76S7kJvqVJAfHUlz1muQgWT0gNUlKJYINMXjUIg4Wcx8LTaITCCkp0lMGrLETGRNI+RyxA==
+
 "@tiptap/extension-task-item@^2.0.4":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-task-item/-/extension-task-item-2.0.4.tgz#71f46d35ac629ca10c5c23d4ad170007338a436e"

From af929ab7414463a624a04ad3e4d3cc95239e7c21 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 31 Aug 2023 16:30:28 +0530
Subject: [PATCH 53/70] style: tiptap table (#2033)

---
 apps/app/components/tiptap/index.tsx          |   6 +-
 .../components/tiptap/table-menu/index.tsx    | 113 +++++++++++-------
 apps/app/styles/editor.css                    |  22 ++--
 apps/app/styles/globals.css                   |   4 +
 4 files changed, 90 insertions(+), 55 deletions(-)

diff --git a/apps/app/components/tiptap/index.tsx b/apps/app/components/tiptap/index.tsx
index 869e44aad..2ab6bf288 100644
--- a/apps/app/components/tiptap/index.tsx
+++ b/apps/app/components/tiptap/index.tsx
@@ -76,8 +76,8 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
 
   const editorClassNames = `relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md
       ${noBorder ? "" : "border border-custom-border-200"} ${
-        borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
-      } ${customClassName}`;
+    borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
+  } ${customClassName}`;
 
   if (!editor) return null;
   editorRef.current = editor;
@@ -93,7 +93,7 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
       {editor && <EditorBubbleMenu editor={editor} />}
       <div className={`${editorContentCustomClassNames}`}>
         <EditorContent editor={editor} />
-        {editor?.isActive("table") && <TableMenu editor={editor} />}
+        <TableMenu editor={editor} />
         {editor?.isActive("image") && <ImageResizer editor={editor} />}
       </div>
     </div>
diff --git a/apps/app/components/tiptap/table-menu/index.tsx b/apps/app/components/tiptap/table-menu/index.tsx
index 878679a29..0da68410e 100644
--- a/apps/app/components/tiptap/table-menu/index.tsx
+++ b/apps/app/components/tiptap/table-menu/index.tsx
@@ -1,11 +1,13 @@
 import { useState, useEffect } from "react";
 import { Rows, Columns, ToggleRight } from "lucide-react";
 import { cn } from "../utils";
+import { Tooltip } from "components/ui";
 
 interface TableMenuItem {
-  name: string;
   command: () => void;
   icon: any;
+  key: string;
+  name: string;
 }
 
 export const findTableAncestor = (node: Node | null): HTMLTableElement | null => {
@@ -17,79 +19,108 @@ export const findTableAncestor = (node: Node | null): HTMLTableElement | null =>
 
 export const TableMenu = ({ editor }: { editor: any }) => {
   const [tableLocation, setTableLocation] = useState({ bottom: 0, left: 0 });
+  const isOpen = editor?.isActive("table");
+
   const items: TableMenuItem[] = [
     {
-      name: "Insert Column right",
       command: () => editor.chain().focus().addColumnBefore().run(),
       icon: Columns,
+      key: "insert-column-right",
+      name: "Insert 1 column right",
     },
     {
-      name: "Insert Row below",
       command: () => editor.chain().focus().addRowAfter().run(),
       icon: Rows,
+      key: "insert-row-below",
+      name: "Insert 1 row below",
     },
     {
-      name: "Delete Column",
       command: () => editor.chain().focus().deleteColumn().run(),
       icon: Columns,
+      key: "delete-column",
+      name: "Delete column",
     },
     {
-      name: "Delete Rows",
       command: () => editor.chain().focus().deleteRow().run(),
       icon: Rows,
+      key: "delete-row",
+      name: "Delete row",
     },
     {
-      name: "Toggle Header Row",
       command: () => editor.chain().focus().toggleHeaderRow().run(),
       icon: ToggleRight,
-    }
-
+      key: "toggle-header-row",
+      name: "Toggle header row",
+    },
   ];
 
   useEffect(() => {
-    if (typeof window !== "undefined") {
-      const handleWindowClick = () => {
-        const selection: any = window?.getSelection();
-        if (selection.rangeCount !== 0) {
-          const range = selection.getRangeAt(0);
-          const tableNode = findTableAncestor(range.startContainer);
-          if (tableNode) {
-            const tableRect = tableNode.getBoundingClientRect();
-            const tableCenter = tableRect.left + tableRect.width / 2;
-            const menuWidth = 45;
-            const menuLeft = tableCenter - menuWidth / 2;
-            const tableBottom = tableRect.bottom;
-            setTableLocation({ bottom: tableBottom, left: menuLeft });
+    if (!window) return;
+
+    const handleWindowClick = () => {
+      const selection: any = window?.getSelection();
+
+      if (selection.rangeCount !== 0) {
+        const range = selection.getRangeAt(0);
+        const tableNode = findTableAncestor(range.startContainer);
+
+        let parent = tableNode?.parentElement;
+
+        if (tableNode) {
+          const tableRect = tableNode.getBoundingClientRect();
+          const tableCenter = tableRect.left + tableRect.width / 2;
+          const menuWidth = 45;
+          const menuLeft = tableCenter - menuWidth / 2;
+          const tableBottom = tableRect.bottom;
+
+          setTableLocation({ bottom: tableBottom, left: menuLeft });
+
+          while (parent) {
+            if (!parent.classList.contains("disable-scroll"))
+              parent.classList.add("disable-scroll");
+            parent = parent.parentElement;
           }
+        } else {
+          const scrollDisabledContainers = document.querySelectorAll(".disable-scroll");
+
+          scrollDisabledContainers.forEach((container) => {
+            container.classList.remove("disable-scroll");
+          });
         }
       }
+    };
 
-      window.addEventListener("click", handleWindowClick);
+    window.addEventListener("click", handleWindowClick);
 
-      return () => {
-        window.removeEventListener("click", handleWindowClick);
-      };
-    }
-  }, [tableLocation]);
+    return () => {
+      window.removeEventListener("click", handleWindowClick);
+    };
+  }, [tableLocation, editor]);
 
   return (
     <section
-      className="fixed left-1/2 transform -translate-x-1/2 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
-      style={{ bottom: `calc(100vh - ${tableLocation.bottom + 45}px)`, left: `${tableLocation.left}px` }}
+      className={`fixed left-1/2 transform -translate-x-1/2 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 shadow-custom-shadow-sm p-1 ${
+        isOpen ? "block" : "hidden"
+      }`}
+      style={{
+        bottom: `calc(100vh - ${tableLocation.bottom + 45}px)`,
+        left: `${tableLocation.left}px`,
+      }}
     >
       {items.map((item, index) => (
-        <button
-          key={index}
-          onClick={item.command}
-          className="p-2 text-custom-text-200 hover:bg-text-custom-text-100 hover:bg-custom-primary-100/10 active:bg-custom-background-100"
-          title={item.name}
-        >
-          <item.icon
-            className={cn("h-5 w-5 text-lg", {
-              "text-red-600": item.name.includes("Delete"),
-            })}
-          />
-        </button>
+        <Tooltip key={index} tooltipContent={item.name}>
+          <button
+            onClick={item.command}
+            className="p-1.5 text-custom-text-200 hover:bg-text-custom-text-100 hover:bg-custom-background-80 active:bg-custom-background-80 rounded"
+            title={item.name}
+          >
+            <item.icon
+              className={cn("h-4 w-4 text-lg", {
+                "text-red-600": item.key.includes("delete"),
+              })}
+            />
+          </button>
+        </Tooltip>
       ))}
     </section>
   );
diff --git a/apps/app/styles/editor.css b/apps/app/styles/editor.css
index 3332185d2..9da250dd1 100644
--- a/apps/app/styles/editor.css
+++ b/apps/app/styles/editor.css
@@ -144,7 +144,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
     height: 20px;
     border-radius: 50%;
     border: 3px solid rgba(var(--color-text-200));
-    border-top-color: rgba(var(--color-text-800)); 
+    border-top-color: rgba(var(--color-text-800));
     animation: spinning 0.6s linear infinite;
   }
 }
@@ -160,16 +160,13 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
     border-collapse: collapse;
     table-layout: fixed;
     margin: 0;
-    margin-bottom: 1.5rem;
-    margin-top: 1.5rem;
-    border: 2px solid rgb(var(--color-border-100));
+    border: 1px solid rgb(var(--color-border-200));
     width: 100%;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
 
     td,
     th {
       min-width: 1em;
-      border: 2px solid rgb(var(--color-border-400));
+      border: 1px solid rgb(var(--color-border-200));
       padding: 10px 15px;
       vertical-align: top;
       box-sizing: border-box;
@@ -183,8 +180,8 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
 
     th {
       font-weight: bold;
-      text-align: left; 
-      background-color: rgb(var(--color-primary-300));
+      text-align: left;
+      background-color: rgb(var(--color-primary-100));
     }
 
     td:hover {
@@ -195,7 +192,10 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
       z-index: 2;
       position: absolute;
       content: "";
-      left: 0; right: 0; top: 0; bottom: 0;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
       background-color: rgba(var(--color-primary-300), 0.1);
       pointer-events: none;
     }
@@ -222,8 +222,8 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
 }
 
 .ProseMirror table * p {
-   padding: 0px 1px;
-   margin: 6px 2px;
+  padding: 0px 1px;
+  margin: 6px 2px;
 }
 
 .ProseMirror table * .is-empty::before {
diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css
index cdb67cbc5..3de1e2c57 100644
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@@ -355,3 +355,7 @@ body {
 .bp4-overlay-content {
   z-index: 555 !important;
 }
+
+.disable-scroll {
+  overflow: hidden !important;
+}

From b496a62540ca17f74002862857f4dea8b52f8579 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Thu, 31 Aug 2023 19:07:56 +0530
Subject: [PATCH 54/70] fix: subscribed issues are filtering (#2037)

---
 apiserver/plane/api/views/issue.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index ac69e9d8d..cbcd40f04 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -337,7 +337,7 @@ class UserWorkSpaceIssues(BaseAPIView):
 
             issue_queryset = (
                 Issue.issue_objects.filter(
-                    (Q(assignees__in=[request.user]) | Q(created_by=request.user)),
+                    (Q(assignees__in=[request.user]) | Q(created_by=request.user) | Q(issue_subscribers__subscriber=request.user)),
                     workspace__slug=slug,
                 )
                 .annotate(

From 099bce87b5c02a6e2e0773ca677da06e12a4d38b Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Fri, 1 Sep 2023 00:08:40 +0530
Subject: [PATCH 55/70] chore: public board endpoints (#2030)

---
 apiserver/plane/api/serializers/issue.py |  5 ++--
 apiserver/plane/api/views/issue.py       | 37 +++++++++++++++---------
 apiserver/plane/db/models/issue.py       |  2 +-
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/apiserver/plane/api/serializers/issue.py b/apiserver/plane/api/serializers/issue.py
index 1f4d814a4..6cd06a767 100644
--- a/apiserver/plane/api/serializers/issue.py
+++ b/apiserver/plane/api/serializers/issue.py
@@ -680,7 +680,7 @@ class IssueLiteSerializer(BaseSerializer):
 class IssuePublicSerializer(BaseSerializer):
     project_detail = ProjectLiteSerializer(read_only=True, source="project")
     state_detail = StateLiteSerializer(read_only=True, source="state")
-    issue_reactions = IssueReactionLiteSerializer(read_only=True, many=True)
+    reactions = IssueReactionLiteSerializer(read_only=True, many=True, source="issue_reactions")
     votes = IssueVoteSerializer(read_only=True, many=True)
 
     class Meta:
@@ -697,12 +697,13 @@ class IssuePublicSerializer(BaseSerializer):
             "workspace",
             "priority",
             "target_date",
-            "issue_reactions",
+            "reactions",
             "votes",
         ]
         read_only_fields = fields
 
 
+
 class IssueSubscriberSerializer(BaseSerializer):
     class Meta:
         model = IssueSubscriber
diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index cbcd40f04..74b574423 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -28,7 +28,7 @@ from django.conf import settings
 from rest_framework.response import Response
 from rest_framework import status
 from rest_framework.parsers import MultiPartParser, FormParser
-from rest_framework.permissions import AllowAny
+from rest_framework.permissions import AllowAny, IsAuthenticated
 from sentry_sdk import capture_exception
 
 # Module imports
@@ -1504,7 +1504,7 @@ class CommentReactionViewSet(BaseViewSet):
                     {
                         "reaction": str(reaction_code),
                         "identifier": str(comment_reaction.id),
-                        "comment_id": str(comment_id)
+                        "comment_id": str(comment_id),
                     }
                 ),
             )
@@ -1532,6 +1532,18 @@ class IssueCommentPublicViewSet(BaseViewSet):
         "workspace__id",
     ]
 
+    def get_permissions(self):
+        if self.action in ["list", "retrieve"]:
+            self.permission_classes = [
+                AllowAny,
+            ]
+        else:
+            self.permission_classes = [
+                IsAuthenticated,
+            ]
+
+        return super(IssueCommentPublicViewSet, self).get_permissions()
+
     def get_queryset(self):
         project_deploy_board = ProjectDeployBoard.objects.get(
             workspace__slug=self.kwargs.get("slug"),
@@ -1741,7 +1753,7 @@ class IssueReactionPublicViewSet(BaseViewSet):
                     issue_id=str(self.kwargs.get("issue_id", None)),
                     project_id=str(self.kwargs.get("project_id", None)),
                     current_instance=None,
-                )    
+                )
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
         except ProjectDeployBoard.DoesNotExist:
@@ -1855,7 +1867,7 @@ class CommentReactionPublicViewSet(BaseViewSet):
                     issue_id=None,
                     project_id=str(self.kwargs.get("project_id", None)),
                     current_instance=None,
-                )    
+                )
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
         except IssueComment.DoesNotExist:
@@ -1903,7 +1915,7 @@ class CommentReactionPublicViewSet(BaseViewSet):
                     {
                         "reaction": str(reaction_code),
                         "identifier": str(comment_reaction.id),
-                        "comment_id": str(comment_id)
+                        "comment_id": str(comment_id),
                     }
                 ),
             )
@@ -1953,13 +1965,13 @@ class IssueVotePublicViewSet(BaseViewSet):
             issue_vote.vote = request.data.get("vote", 1)
             issue_vote.save()
             issue_activity.delay(
-                    type="issue_vote.activity.created",
-                    requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
-                    actor_id=str(self.request.user.id),
-                    issue_id=str(self.kwargs.get("issue_id", None)),
-                    project_id=str(self.kwargs.get("project_id", None)),
-                    current_instance=None,
-                )
+                type="issue_vote.activity.created",
+                requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+                actor_id=str(self.request.user.id),
+                issue_id=str(self.kwargs.get("issue_id", None)),
+                project_id=str(self.kwargs.get("project_id", None)),
+                current_instance=None,
+            )
             serializer = IssueVoteSerializer(issue_vote)
             return Response(serializer.data, status=status.HTTP_201_CREATED)
         except Exception as e:
@@ -2170,4 +2182,3 @@ class ProjectIssuesPublicEndpoint(BaseAPIView):
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-
diff --git a/apiserver/plane/db/models/issue.py b/apiserver/plane/db/models/issue.py
index 1633cbaf9..8f085b2a2 100644
--- a/apiserver/plane/db/models/issue.py
+++ b/apiserver/plane/db/models/issue.py
@@ -293,7 +293,7 @@ class IssueComment(ProjectBaseModel):
     comment_json = models.JSONField(blank=True, default=dict)
     comment_html = models.TextField(blank=True, default="<p></p>")
     attachments = ArrayField(models.URLField(), size=10, blank=True, default=list)
-    issue = models.ForeignKey(Issue, on_delete=models.CASCADE)
+    issue = models.ForeignKey(Issue, on_delete=models.CASCADE, related_name="issue_comments")
     # System can also create comment
     actor = models.ForeignKey(
         settings.AUTH_USER_MODEL,

From eab1d9329bb0aa0e44c677c8513ce12da82f9661 Mon Sep 17 00:00:00 2001
From: Lakhan Baheti <94619783+1akhanBaheti@users.noreply.github.com>
Date: Fri, 1 Sep 2023 10:59:17 +0530
Subject: [PATCH 56/70] feat: editor for issue description (#2038)

---
 apps/app/pages/[workspaceSlug]/editor.tsx | 192 ++++++++++++++++++++++
 1 file changed, 192 insertions(+)
 create mode 100644 apps/app/pages/[workspaceSlug]/editor.tsx

diff --git a/apps/app/pages/[workspaceSlug]/editor.tsx b/apps/app/pages/[workspaceSlug]/editor.tsx
new file mode 100644
index 000000000..73f0932ea
--- /dev/null
+++ b/apps/app/pages/[workspaceSlug]/editor.tsx
@@ -0,0 +1,192 @@
+import { TipTapEditor } from "components/tiptap";
+import type { NextPage } from "next";
+import { useCallback, useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import issuesService from "services/issues.service";
+import { ICurrentUserResponse, IIssue } from "types";
+import useReloadConfirmations from "hooks/use-reload-confirmation";
+import { Spinner } from "components/ui";
+import Image404 from "public/404.svg";
+import DefaultLayout from "layouts/default-layout";
+import Image from "next/image";
+import userService from "services/user.service";
+import { useRouter } from "next/router";
+
+const Editor: NextPage = () => {
+  const [user, setUser] = useState<ICurrentUserResponse | undefined>();
+  const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
+  const [isLoading, setIsLoading] = useState("false");
+  const { setShowAlert } = useReloadConfirmations();
+  const [cookies, setCookies] = useState<any>({});
+  const [issueDetail, setIssueDetail] = useState<IIssue | null>(null);
+  const router = useRouter();
+  const { editable } = router.query;
+  const {
+    handleSubmit,
+    watch,
+    setValue,
+    control,
+    formState: { errors },
+  } = useForm<IIssue>({
+    defaultValues: {
+      name: "",
+      description: "",
+      description_html: "",
+    },
+  });
+
+  const getCookies = () => {
+    const cookies = document.cookie.split(";");
+    const cookieObj: any = {};
+    cookies.forEach((cookie) => {
+      const cookieArr = cookie.split("=");
+      cookieObj[cookieArr[0].trim()] = cookieArr[1];
+    });
+
+    setCookies(cookieObj);
+    return cookieObj;
+  };
+
+  const getIssueDetail = async (cookiesData: any) => {
+    try {
+      setIsLoading("true");
+      const userData = await userService.currentUser();
+      setUser(userData);
+      const issueDetail = await issuesService.retrieve(
+        cookiesData.MOBILE_slug,
+        cookiesData.MOBILE_project_id,
+        cookiesData.MOBILE_issue_id
+      );
+      setIssueDetail(issueDetail);
+      setIsLoading("false");
+      setValue("description_html", issueDetail.description_html);
+      setValue("description", issueDetail.description);
+    } catch (e) {
+      setIsLoading("error");
+      console.log(e);
+    }
+  };
+  useEffect(() => {
+    const cookiesData = getCookies();
+
+    getIssueDetail(cookiesData);
+  }, []);
+
+  useEffect(() => {
+    if (isSubmitting === "submitted") {
+      setShowAlert(false);
+      setTimeout(async () => {
+        setIsSubmitting("saved");
+      }, 2000);
+    } else if (isSubmitting === "submitting") {
+      setShowAlert(true);
+    }
+  }, [isSubmitting, setShowAlert]);
+
+  const submitChanges = async (
+    formData: Partial<IIssue>,
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string
+  ) => {
+    if (!workspaceSlug || !projectId || !issueId) return;
+
+    const payload: Partial<IIssue> = {
+      ...formData,
+    };
+
+    delete payload.blocker_issues;
+    delete payload.blocked_issues;
+    await issuesService
+      .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
+      .catch((e) => {
+        console.log(e);
+      });
+  };
+
+  const handleDescriptionFormSubmit = useCallback(
+    async (formData: Partial<IIssue>) => {
+      if (!formData) return;
+
+      await submitChanges(
+        {
+          name: issueDetail?.name ?? "",
+          description: formData.description ?? "",
+          description_html: formData.description_html ?? "<p></p>",
+        },
+        cookies.MOBILE_slug,
+        cookies.MOBILE_project_id,
+        cookies.MOBILE_issue_id
+      );
+    },
+    [submitChanges]
+  );
+
+  return isLoading === "error" ? (
+    <ErrorEncountered />
+  ) : isLoading === "true" ? (
+    <div className="grid place-items-center h-screen w-full">
+      <Spinner />
+    </div>
+  ) : (
+    <div className="flex blur-none shadow-none backdrop:backdrop-blur-none  justify-center items-center">
+      <Controller
+        name="description_html"
+        control={control}
+        render={({ field: { value, onChange } }) => (
+          <TipTapEditor
+            borderOnFocus={false}
+            value={
+              !value ||
+              value === "" ||
+              (typeof value === "object" && Object.keys(value).length === 0)
+                ? watch("description_html")
+                : value
+            }
+            editable={editable === "true"}
+            noBorder={true}
+            workspaceSlug={cookies.MOBILE_slug ?? ""}
+            debouncedUpdatesEnabled={true}
+            setShouldShowAlert={setShowAlert}
+            setIsSubmitting={setIsSubmitting}
+            customClassName="min-h-[150px] shadow-sm"
+            editorContentCustomClassNames="pb-9"
+            onChange={(description: Object, description_html: string) => {
+              setShowAlert(true);
+              setIsSubmitting("submitting");
+              onChange(description_html);
+              setValue("description", description);
+              handleSubmit(handleDescriptionFormSubmit)().finally(() => {
+                setIsSubmitting("submitted");
+              });
+            }}
+          />
+        )}
+      />
+      <div
+        className={`absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center ${
+          isSubmitting === "saved" ? "fadeOut" : "fadeIn"
+        }`}
+      >
+        {isSubmitting === "submitting" ? "Saving..." : "Saved"}
+      </div>
+    </div>
+  );
+};
+
+const ErrorEncountered: NextPage = () => (
+  <DefaultLayout>
+    <div className="grid max-h-fit place-items-center p-4">
+      <div className="space-y-8 text-center">
+        <div className="relative mx-auto h-40 w-40 lg:h-40 lg:w-40">
+          <Image src={Image404} layout="fill" alt="404- Page not found" />
+        </div>
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold">Oops! Something went wrong.</h3>
+        </div>
+      </div>
+    </div>
+  </DefaultLayout>
+);
+
+export default Editor;

From 3a0d96a48d9756817d168b6774faea3fb6dbab6f Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Fri, 1 Sep 2023 11:21:34 +0530
Subject: [PATCH 57/70] chore: cycle endpoint to return display name as well in
 the assignee distribution (#2041)

* chore: cycle endpoint to return display name as well in the assignee distribution

* fix: value error
---
 apiserver/plane/api/views/cycle.py | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/apiserver/plane/api/views/cycle.py b/apiserver/plane/api/views/cycle.py
index a3d89fa81..3dca6c312 100644
--- a/apiserver/plane/api/views/cycle.py
+++ b/apiserver/plane/api/views/cycle.py
@@ -191,11 +191,10 @@ class CycleViewSet(BaseViewSet):
                             workspace__slug=slug,
                             project_id=project_id,
                         )
-                        .annotate(first_name=F("assignees__first_name"))
-                        .annotate(last_name=F("assignees__last_name"))
+                        .annotate(display_name=F("assignees__display_name"))
                         .annotate(assignee_id=F("assignees__id"))
                         .annotate(avatar=F("assignees__avatar"))
-                        .values("first_name", "last_name", "assignee_id", "avatar")
+                        .values("display_name", "assignee_id", "avatar")
                         .annotate(total_issues=Count("assignee_id"))
                         .annotate(
                             completed_issues=Count(
@@ -209,7 +208,7 @@ class CycleViewSet(BaseViewSet):
                                 filter=Q(completed_at__isnull=True),
                             )
                         )
-                        .order_by("first_name", "last_name")
+                        .order_by("display_name")
                     )
 
                     label_distribution = (

From 0d4bcd2758671f2b68508a8ec1cafa5158311342 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 1 Sep 2023 11:23:43 +0530
Subject: [PATCH 58/70] fix: Gantt chart bugs (#2024)

* fix: only left mouse button should trigger all the events

* fix: extra block shadow
---
 .../app/components/gantt-chart/helpers/draggable.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/app/components/gantt-chart/helpers/draggable.tsx b/apps/app/components/gantt-chart/helpers/draggable.tsx
index 20423ff59..b665bf5d3 100644
--- a/apps/app/components/gantt-chart/helpers/draggable.tsx
+++ b/apps/app/components/gantt-chart/helpers/draggable.tsx
@@ -73,9 +73,11 @@ export const ChartDraggable: React.FC<Props> = ({
   };
 
   // handle block resize from the left end
-  const handleBlockLeftResize = () => {
+  const handleBlockLeftResize = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     if (!currentViewData || !resizableRef.current || !block.position) return;
 
+    if (e.button !== 0) return;
+
     const resizableDiv = resizableRef.current;
 
     const columnWidth = currentViewData.data.width;
@@ -126,9 +128,11 @@ export const ChartDraggable: React.FC<Props> = ({
   };
 
   // handle block resize from the right end
-  const handleBlockRightResize = () => {
+  const handleBlockRightResize = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     if (!currentViewData || !resizableRef.current || !block.position) return;
 
+    if (e.button !== 0) return;
+
     const resizableDiv = resizableRef.current;
 
     const columnWidth = currentViewData.data.width;
@@ -173,6 +177,8 @@ export const ChartDraggable: React.FC<Props> = ({
   const handleBlockMove = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     if (!enableBlockMove || !currentViewData || !resizableRef.current || !block.position) return;
 
+    if (e.button !== 0) return;
+
     e.preventDefault();
     e.stopPropagation();
 
@@ -266,7 +272,7 @@ export const ChartDraggable: React.FC<Props> = ({
       <div
         id={`block-${block.id}`}
         ref={resizableRef}
-        className="relative group cursor-pointer font-medium rounded shadow-sm h-full inline-flex items-center transition-all"
+        className="relative group cursor-pointer font-medium h-full inline-flex items-center transition-all"
         style={{
           marginLeft: `${block.position?.marginLeft}px`,
           width: `${block.position?.width}px`,

From c6d9ace6a2bf884c8d784c63d6bdd128734583ee Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Fri, 1 Sep 2023 13:20:52 +0530
Subject: [PATCH 59/70] dev: migrations for v0.12 release (#2044)

---
 ..._alter_analyticview_created_by_and_more.py | 35 ++++++++++++++++++-
 ..._together_alter_issuevote_vote_and_more.py | 26 --------------
 2 files changed, 34 insertions(+), 27 deletions(-)
 delete mode 100644 apiserver/plane/db/migrations/0042_alter_issuevote_unique_together_alter_issuevote_vote_and_more.py

diff --git a/apiserver/plane/db/migrations/0042_alter_analyticview_created_by_and_more.py b/apiserver/plane/db/migrations/0042_alter_analyticview_created_by_and_more.py
index f7d6a979d..7db02c53d 100644
--- a/apiserver/plane/db/migrations/0042_alter_analyticview_created_by_and_more.py
+++ b/apiserver/plane/db/migrations/0042_alter_analyticview_created_by_and_more.py
@@ -31,5 +31,38 @@ class Migration(migrations.Migration):
             name='title',
             field=models.CharField(blank=True, max_length=255, null=True),
         ),
-        migrations.RunPython(update_user_timezones)
+        migrations.RunPython(update_user_timezones),
+        migrations.AlterUniqueTogether(
+            name='issuevote',
+            unique_together=set(),
+        ),
+        migrations.AlterField(
+            model_name='issuevote',
+            name='vote',
+            field=models.IntegerField(choices=[(-1, 'DOWNVOTE'), (1, 'UPVOTE')], default=1),
+        ),
+        migrations.AlterUniqueTogether(
+            name='issuevote',
+            unique_together={('issue', 'actor', 'vote')},
+        ),
+        migrations.CreateModel(
+            name='ProjectPublicMember',
+            fields=[
+                ('created_at', models.DateTimeField(auto_now_add=True, verbose_name='Created At')),
+                ('updated_at', models.DateTimeField(auto_now=True, verbose_name='Last Modified At')),
+                ('id', models.UUIDField(db_index=True, default=uuid.uuid4, editable=False, primary_key=True, serialize=False, unique=True)),
+                ('created_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_created_by', to=settings.AUTH_USER_MODEL, verbose_name='Created By')),
+                ('member', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='public_project_members', to=settings.AUTH_USER_MODEL)),
+                ('project', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='project_%(class)s', to='db.project')),
+                ('updated_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_updated_by', to=settings.AUTH_USER_MODEL, verbose_name='Last Modified By')),
+                ('workspace', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='workspace_%(class)s', to='db.workspace')),
+            ],
+            options={
+                'verbose_name': 'Project Public Member',
+                'verbose_name_plural': 'Project Public Members',
+                'db_table': 'project_public_members',
+                'ordering': ('-created_at',),
+                'unique_together': {('project', 'member')},
+            },
+        ),
     ]
diff --git a/apiserver/plane/db/migrations/0042_alter_issuevote_unique_together_alter_issuevote_vote_and_more.py b/apiserver/plane/db/migrations/0042_alter_issuevote_unique_together_alter_issuevote_vote_and_more.py
deleted file mode 100644
index d8063acc0..000000000
--- a/apiserver/plane/db/migrations/0042_alter_issuevote_unique_together_alter_issuevote_vote_and_more.py
+++ /dev/null
@@ -1,26 +0,0 @@
-# Generated by Django 4.2.3 on 2023-08-29 07:58
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('db', '0041_cycle_sort_order_issuecomment_access_and_more'),
-    ]
-
-    operations = [
-        migrations.AlterUniqueTogether(
-            name='issuevote',
-            unique_together=set(),
-        ),
-        migrations.AlterField(
-            model_name='issuevote',
-            name='vote',
-            field=models.IntegerField(choices=[(-1, 'DOWNVOTE'), (1, 'UPVOTE')], default=1),
-        ),
-        migrations.AlterUniqueTogether(
-            name='issuevote',
-            unique_together={('issue', 'actor', 'vote')},
-        ),
-    ]

From 4ba3ef5c2488f023d1e7d1cd4dc1f8b620f7186a Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 1 Sep 2023 13:52:55 +0530
Subject: [PATCH 60/70] fix: peek overview bugs (#2043)

* fix: side peek modal shaking

* refactor: peek overview layout

* fix: date selector, activity mutation

* fix: delete issue handler

* fix: assignees mutation
---
 .../components/issues/delete-issue-modal.tsx  |  11 +-
 .../issues/peek-overview/issue-properties.tsx |  60 +++-----
 .../issues/peek-overview/layout.tsx           | 145 +++++++++---------
 .../issues/sidebar-select/assignee.tsx        |   5 +-
 .../issues/sidebar-select/priority.tsx        |   2 +-
 .../components/ui/dropdowns/custom-select.tsx |   2 +-
 apps/app/store/issues.ts                      |   5 +-
 7 files changed, 120 insertions(+), 110 deletions(-)

diff --git a/apps/app/components/issues/delete-issue-modal.tsx b/apps/app/components/issues/delete-issue-modal.tsx
index f46dae9aa..d847126ed 100644
--- a/apps/app/components/issues/delete-issue-modal.tsx
+++ b/apps/app/components/issues/delete-issue-modal.tsx
@@ -33,10 +33,17 @@ type Props = {
   isOpen: boolean;
   handleClose: () => void;
   data: IIssue | null;
+  onSubmit?: () => Promise<void>;
   user: ICurrentUserResponse | undefined;
 };
 
-export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, user }) => {
+export const DeleteIssueModal: React.FC<Props> = ({
+  isOpen,
+  handleClose,
+  data,
+  onSubmit,
+  user,
+}) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
@@ -116,6 +123,8 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, u
           else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(data.project, params));
         }
 
+        if (onSubmit) onSubmit();
+
         handleClose();
         setToastAlert({
           title: "Success",
diff --git a/apps/app/components/issues/peek-overview/issue-properties.tsx b/apps/app/components/issues/peek-overview/issue-properties.tsx
index 2c8b4d572..1f2d618ac 100644
--- a/apps/app/components/issues/peek-overview/issue-properties.tsx
+++ b/apps/app/components/issues/peek-overview/issue-properties.tsx
@@ -103,7 +103,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
           </div>
           <div className="w-3/4">
             <SidebarAssigneeSelect
-              value={issue.assignees_list}
+              value={issue.assignees}
               onChange={(val: string[]) => handleUpdateIssue({ assignees_list: val })}
               disabled={readOnly}
             />
@@ -128,23 +128,18 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
             <span className="flex-grow truncate">Start date</span>
           </div>
           <div>
-            {issue.start_date ? (
-              <CustomDatePicker
-                placeholder="Start date"
-                value={issue.start_date}
-                onChange={(val) =>
-                  handleUpdateIssue({
-                    start_date: val,
-                  })
-                }
-                className="bg-custom-background-100"
-                wrapperClassName="w-full"
-                maxDate={maxDate ?? undefined}
-                disabled={readOnly}
-              />
-            ) : (
-              <span className="text-custom-text-200">Empty</span>
-            )}
+            <CustomDatePicker
+              placeholder="Select start date"
+              value={issue.start_date}
+              onChange={(val) =>
+                handleUpdateIssue({
+                  start_date: val,
+                })
+              }
+              className="bg-custom-background-80 border-none"
+              maxDate={maxDate ?? undefined}
+              disabled={readOnly}
+            />
           </div>
         </div>
         <div className="flex items-center gap-2 text-sm">
@@ -153,23 +148,18 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
             <span className="flex-grow truncate">Due date</span>
           </div>
           <div>
-            {issue.target_date ? (
-              <CustomDatePicker
-                placeholder="Due date"
-                value={issue.target_date}
-                onChange={(val) =>
-                  handleUpdateIssue({
-                    target_date: val,
-                  })
-                }
-                className="bg-custom-background-100"
-                wrapperClassName="w-full"
-                minDate={minDate ?? undefined}
-                disabled={readOnly}
-              />
-            ) : (
-              <span className="text-custom-text-200">Empty</span>
-            )}
+            <CustomDatePicker
+              placeholder="Select due date"
+              value={issue.target_date}
+              onChange={(val) =>
+                handleUpdateIssue({
+                  target_date: val,
+                })
+              }
+              className="bg-custom-background-80 border-none"
+              minDate={minDate ?? undefined}
+              disabled={readOnly}
+            />
           </div>
         </div>
         {/* <div className="flex items-center gap-2 text-sm">
diff --git a/apps/app/components/issues/peek-overview/layout.tsx b/apps/app/components/issues/peek-overview/layout.tsx
index 50fa5df68..40737b6e8 100644
--- a/apps/app/components/issues/peek-overview/layout.tsx
+++ b/apps/app/components/issues/peek-overview/layout.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
 
+import { mutate } from "swr";
 // mobx
 import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
@@ -10,9 +11,11 @@ import { Dialog, Transition } from "@headlessui/react";
 // hooks
 import useUser from "hooks/use-user";
 // components
-import { FullScreenPeekView, SidePeekView } from "components/issues";
+import { DeleteIssueModal, FullScreenPeekView, SidePeekView } from "components/issues";
 // types
 import { IIssue } from "types";
+// fetch-keys
+import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 
 type Props = {
   handleMutation: () => void;
@@ -28,6 +31,7 @@ export const IssuePeekOverview: React.FC<Props> = observer(
     const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
     const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
     const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
+    const [deleteIssueModal, setDeleteIssueModal] = useState(false);
 
     const router = useRouter();
     const { peekIssue } = router.query;
@@ -53,6 +57,7 @@ export const IssuePeekOverview: React.FC<Props> = observer(
       if (!issue || !user) return;
 
       await updateIssue(workspaceSlug, projectId, issue.id, formData, user);
+      mutate(PROJECT_ISSUES_ACTIVITY(issue.id));
       handleMutation();
     };
 
@@ -81,7 +86,6 @@ export const IssuePeekOverview: React.FC<Props> = observer(
           setIsSidePeekOpen(false);
         }
       } else {
-        console.log("Triggered");
         setIsSidePeekOpen(false);
         setIsModalPeekOpen(false);
       }
@@ -89,33 +93,38 @@ export const IssuePeekOverview: React.FC<Props> = observer(
 
     return (
       <>
+        <DeleteIssueModal
+          isOpen={deleteIssueModal}
+          handleClose={() => setDeleteIssueModal(false)}
+          data={issue ? { ...issue } : null}
+          onSubmit={handleDeleteIssue}
+          user={user}
+        />
         <Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
           <Dialog as="div" className="relative z-20" onClose={handleClose}>
-            <div className="fixed inset-0 z-20 overflow-y-auto">
-              <div className="relative h-full w-full">
-                <Transition.Child
-                  as={React.Fragment}
-                  enter="transition-transform duration-300"
-                  enterFrom="translate-x-full"
-                  enterTo="translate-x-0"
-                  leave="transition-transform duration-200"
-                  leaveFrom="translate-x-0"
-                  leaveTo="translate-x-full"
-                >
-                  <Dialog.Panel className="absolute z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-md">
-                    <SidePeekView
-                      handleClose={handleClose}
-                      handleDeleteIssue={handleDeleteIssue}
-                      handleUpdateIssue={handleUpdateIssue}
-                      issue={issue}
-                      mode={peekOverviewMode}
-                      readOnly={readOnly}
-                      setMode={(mode) => setPeekOverviewMode(mode)}
-                      workspaceSlug={workspaceSlug}
-                    />
-                  </Dialog.Panel>
-                </Transition.Child>
-              </div>
+            <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
+              <Transition.Child
+                as={React.Fragment}
+                enter="transition-transform duration-300"
+                enterFrom="translate-x-full"
+                enterTo="translate-x-0"
+                leave="transition-transform duration-200"
+                leaveFrom="translate-x-0"
+                leaveTo="translate-x-full"
+              >
+                <Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-md">
+                  <SidePeekView
+                    handleClose={handleClose}
+                    handleDeleteIssue={() => setDeleteIssueModal(true)}
+                    handleUpdateIssue={handleUpdateIssue}
+                    issue={issue}
+                    mode={peekOverviewMode}
+                    readOnly={readOnly}
+                    setMode={(mode) => setPeekOverviewMode(mode)}
+                    workspaceSlug={workspaceSlug}
+                  />
+                </Dialog.Panel>
+              </Transition.Child>
             </div>
           </Dialog>
         </Transition.Root>
@@ -132,49 +141,47 @@ export const IssuePeekOverview: React.FC<Props> = observer(
             >
               <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
             </Transition.Child>
-            <div className="fixed inset-0 z-20 overflow-y-auto">
-              <div className="relative h-full w-full">
-                <Transition.Child
-                  as={React.Fragment}
-                  enter="ease-out duration-300"
-                  enterFrom="opacity-0"
-                  enterTo="opacity-100"
-                  leave="ease-in duration-200"
-                  leaveFrom="opacity-100"
-                  leaveTo="opacity-0"
+            <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
+              <Transition.Child
+                as={React.Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <Dialog.Panel
+                  className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
+                    peekOverviewMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
+                  }`}
                 >
-                  <Dialog.Panel
-                    className={`absolute z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
-                      peekOverviewMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
-                    }`}
-                  >
-                    {peekOverviewMode === "modal" && (
-                      <SidePeekView
-                        handleClose={handleClose}
-                        handleDeleteIssue={handleDeleteIssue}
-                        handleUpdateIssue={handleUpdateIssue}
-                        issue={issue}
-                        mode={peekOverviewMode}
-                        readOnly={readOnly}
-                        setMode={(mode) => setPeekOverviewMode(mode)}
-                        workspaceSlug={workspaceSlug}
-                      />
-                    )}
-                    {peekOverviewMode === "full" && (
-                      <FullScreenPeekView
-                        handleClose={handleClose}
-                        handleDeleteIssue={handleDeleteIssue}
-                        handleUpdateIssue={handleUpdateIssue}
-                        issue={issue}
-                        mode={peekOverviewMode}
-                        readOnly={readOnly}
-                        setMode={(mode) => setPeekOverviewMode(mode)}
-                        workspaceSlug={workspaceSlug}
-                      />
-                    )}
-                  </Dialog.Panel>
-                </Transition.Child>
-              </div>
+                  {peekOverviewMode === "modal" && (
+                    <SidePeekView
+                      handleClose={handleClose}
+                      handleDeleteIssue={() => setDeleteIssueModal(true)}
+                      handleUpdateIssue={handleUpdateIssue}
+                      issue={issue}
+                      mode={peekOverviewMode}
+                      readOnly={readOnly}
+                      setMode={(mode) => setPeekOverviewMode(mode)}
+                      workspaceSlug={workspaceSlug}
+                    />
+                  )}
+                  {peekOverviewMode === "full" && (
+                    <FullScreenPeekView
+                      handleClose={handleClose}
+                      handleDeleteIssue={() => setDeleteIssueModal(true)}
+                      handleUpdateIssue={handleUpdateIssue}
+                      issue={issue}
+                      mode={peekOverviewMode}
+                      readOnly={readOnly}
+                      setMode={(mode) => setPeekOverviewMode(mode)}
+                      workspaceSlug={workspaceSlug}
+                    />
+                  )}
+                </Dialog.Panel>
+              </Transition.Child>
             </div>
           </Dialog>
         </Transition.Root>
diff --git a/apps/app/components/issues/sidebar-select/assignee.tsx b/apps/app/components/issues/sidebar-select/assignee.tsx
index 61ece6f78..8b9872368 100644
--- a/apps/app/components/issues/sidebar-select/assignee.tsx
+++ b/apps/app/components/issues/sidebar-select/assignee.tsx
@@ -51,7 +51,10 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabl
               <span className="text-custom-text-100 text-xs">{value.length} Assignees</span>
             </div>
           ) : (
-            <button type="button" className="bg-custom-background-80 px-2.5 py-0.5 text-xs rounded">
+            <button
+              type="button"
+              className="bg-custom-background-80 px-2.5 py-0.5 text-xs rounded text-custom-text-200"
+            >
               No assignees
             </button>
           )}
diff --git a/apps/app/components/issues/sidebar-select/priority.tsx b/apps/app/components/issues/sidebar-select/priority.tsx
index fd1c77f28..67ae5133d 100644
--- a/apps/app/components/issues/sidebar-select/priority.tsx
+++ b/apps/app/components/issues/sidebar-select/priority.tsx
@@ -27,7 +27,7 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabl
             ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
             : value === "low"
             ? "border-green-500/20 bg-green-500/20 text-green-500"
-            : "bg-custom-background-80 border-custom-border-200"
+            : "bg-custom-background-80 border-custom-border-200 text-custom-text-200"
         }`}
       >
         <span className="grid place-items-center -my-1">
diff --git a/apps/app/components/ui/dropdowns/custom-select.tsx b/apps/app/components/ui/dropdowns/custom-select.tsx
index 4e495a210..ae814dccb 100644
--- a/apps/app/components/ui/dropdowns/custom-select.tsx
+++ b/apps/app/components/ui/dropdowns/custom-select.tsx
@@ -41,7 +41,7 @@ const CustomSelect = ({
   >
     <>
       {customButton ? (
-        <Listbox.Button as="div">{customButton}</Listbox.Button>
+        <Listbox.Button as={React.Fragment}>{customButton}</Listbox.Button>
       ) : (
         <Listbox.Button
           type="button"
diff --git a/apps/app/store/issues.ts b/apps/app/store/issues.ts
index 538c5e2a9..286d98534 100644
--- a/apps/app/store/issues.ts
+++ b/apps/app/store/issues.ts
@@ -116,11 +116,12 @@ class IssuesStore {
     const originalIssue = { ...this.issues[issueId] };
 
     // immediately update the issue in the store
-    const updatedIssue = { ...originalIssue, ...issueForm };
+    const updatedIssue = { ...this.issues[issueId], ...issueForm };
+    if (updatedIssue.assignees_list) updatedIssue.assignees = updatedIssue.assignees_list;
 
     try {
       runInAction(() => {
-        this.issues[issueId] = updatedIssue;
+        this.issues[issueId] = { ...updatedIssue };
       });
 
       // make a patch request to update the issue

From 1e9f0823f8c63838345fa967c5f1f3be8e6b3935 Mon Sep 17 00:00:00 2001
From: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Date: Fri, 1 Sep 2023 14:41:20 +0530
Subject: [PATCH 61/70] fix: imported uuid (#2048)

---
 .../migrations/0042_alter_analyticview_created_by_and_more.py   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apiserver/plane/db/migrations/0042_alter_analyticview_created_by_and_more.py b/apiserver/plane/db/migrations/0042_alter_analyticview_created_by_and_more.py
index 7db02c53d..62f08038c 100644
--- a/apiserver/plane/db/migrations/0042_alter_analyticview_created_by_and_more.py
+++ b/apiserver/plane/db/migrations/0042_alter_analyticview_created_by_and_more.py
@@ -3,7 +3,7 @@
 from django.conf import settings
 from django.db import migrations, models
 import django.db.models.deletion
-
+import uuid
 
 def update_user_timezones(apps, schema_editor):
     UserModel = apps.get_model("db", "User")

From 42ece0d784ebf172ac15cf326270a29f3c9735ff Mon Sep 17 00:00:00 2001
From: Kritika Upadhyay <78753387+Kritikkkaaa@users.noreply.github.com>
Date: Fri, 1 Sep 2023 15:37:27 +0530
Subject: [PATCH 62/70] chore: updates project invite placeholder (#2049)

---
 apps/app/components/project/send-project-invitation-modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/components/project/send-project-invitation-modal.tsx b/apps/app/components/project/send-project-invitation-modal.tsx
index 414ef7a6c..035a680f2 100644
--- a/apps/app/components/project/send-project-invitation-modal.tsx
+++ b/apps/app/components/project/send-project-invitation-modal.tsx
@@ -218,7 +218,7 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
                                           }
                                         </div>
                                       ) : (
-                                        <div>Select co-worker&rsquo;s email</div>
+                                        <div>Select co-worker</div>
                                       )}
                                       <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
                                     </button>

From f4fa2e011a7e9b98c4a265fb76db8daba7eb31d4 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Fri, 1 Sep 2023 15:55:06 +0530
Subject: [PATCH 63/70] feat: leave project and workspace endpoint (#2042)

* feat: leave project and workspace endpoint

* fix: argument error

* dev: update endpoint status
---
 apiserver/plane/api/urls.py            | 12 +++++
 apiserver/plane/api/views/__init__.py  |  2 +
 apiserver/plane/api/views/project.py   | 66 +++++++++++++++++++-------
 apiserver/plane/api/views/workspace.py | 41 ++++++++++++++++
 4 files changed, 105 insertions(+), 16 deletions(-)

diff --git a/apiserver/plane/api/urls.py b/apiserver/plane/api/urls.py
index 1fb2b8e90..558b7f059 100644
--- a/apiserver/plane/api/urls.py
+++ b/apiserver/plane/api/urls.py
@@ -51,6 +51,7 @@ from plane.api.views import (
     WorkspaceUserProfileEndpoint,
     WorkspaceUserProfileIssuesEndpoint,
     WorkspaceLabelsEndpoint,
+    LeaveWorkspaceEndpoint,
     ## End Workspaces
     # File Assets
     FileAssetEndpoint,
@@ -68,6 +69,7 @@ from plane.api.views import (
     UserProjectInvitationsViewset,
     ProjectIdentifierEndpoint,
     ProjectFavoritesViewSet,
+    LeaveProjectEndpoint,
     ## End Projects
     # Issues
     IssueViewSet,
@@ -441,6 +443,11 @@ urlpatterns = [
         WorkspaceLabelsEndpoint.as_view(),
         name="workspace-labels",
     ),
+    path(
+        "workspaces/<str:slug>/members/leave/",
+        LeaveWorkspaceEndpoint.as_view(),
+        name="workspace-labels",
+    ),
     ## End Workspaces ##
     # Projects
     path(
@@ -554,6 +561,11 @@ urlpatterns = [
         ),
         name="project",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/members/leave/",
+        LeaveProjectEndpoint.as_view(),
+        name="project",
+    ),
     # End Projects
     #  States
     path(
diff --git a/apiserver/plane/api/views/__init__.py b/apiserver/plane/api/views/__init__.py
index b697741ae..71647bfea 100644
--- a/apiserver/plane/api/views/__init__.py
+++ b/apiserver/plane/api/views/__init__.py
@@ -16,6 +16,7 @@ from .project import (
     ProjectDeployBoardPublicSettingsEndpoint,
     ProjectMemberEndpoint,
     WorkspaceProjectDeployBoardEndpoint,
+    LeaveProjectEndpoint,
 )
 from .user import (
     UserEndpoint,
@@ -52,6 +53,7 @@ from .workspace import (
     WorkspaceUserProfileIssuesEndpoint,
     WorkspaceLabelsEndpoint,
     WorkspaceMembersEndpoint,
+    LeaveWorkspaceEndpoint,
 )
 from .state import StateViewSet
 from .view import IssueViewViewSet, ViewIssuesEndpoint, IssueViewFavoriteViewSet
diff --git a/apiserver/plane/api/views/project.py b/apiserver/plane/api/views/project.py
index 97b06fce5..a83bbca25 100644
--- a/apiserver/plane/api/views/project.py
+++ b/apiserver/plane/api/views/project.py
@@ -11,14 +11,8 @@ from django.db.models import (
     OuterRef,
     Func,
     F,
-    Max,
-    CharField,
     Func,
     Subquery,
-    Prefetch,
-    When,
-    Case,
-    Value,
 )
 from django.core.validators import validate_email
 from django.conf import settings
@@ -47,6 +41,7 @@ from plane.api.permissions import (
     ProjectBasePermission,
     ProjectEntityPermission,
     ProjectMemberPermission,
+    ProjectLitePermission,
 )
 
 from plane.db.models import (
@@ -71,16 +66,9 @@ from plane.db.models import (
     ModuleMember,
     Inbox,
     ProjectDeployBoard,
-    Issue,
-    IssueReaction,
-    IssueLink,
-    IssueAttachment,
-    Label,
 )
 
 from plane.bgtasks.project_invitation_task import project_invitation
-from plane.utils.grouper import group_results
-from plane.utils.issue_filters import issue_filters
 
 
 class ProjectViewSet(BaseViewSet):
@@ -629,7 +617,7 @@ class ProjectMemberViewSet(BaseViewSet):
             return Response(status=status.HTTP_204_NO_CONTENT)
         except ProjectMember.DoesNotExist:
             return Response(
-                {"error": "Project Member does not exist"}, status=status.HTTP_400
+                {"error": "Project Member does not exist"}, status=status.HTTP_400_BAD_REQUEST
             )
         except Exception as e:
             capture_exception(e)
@@ -1144,8 +1132,9 @@ class ProjectDeployBoardPublicSettingsEndpoint(BaseAPIView):
 
 
 class WorkspaceProjectDeployBoardEndpoint(BaseAPIView):
-
-    permission_classes = [AllowAny,]
+    permission_classes = [
+        AllowAny,
+    ]
 
     def get(self, request, slug):
         try:
@@ -1176,3 +1165,48 @@ class WorkspaceProjectDeployBoardEndpoint(BaseAPIView):
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+
+
+class LeaveProjectEndpoint(BaseAPIView):
+    permission_classes = [
+        ProjectLitePermission,
+    ]
+
+    def delete(self, request, slug, project_id):
+        try:
+            project_member = ProjectMember.objects.get(
+                workspace__slug=slug,
+                member=request.user,
+                project_id=project_id,
+            )
+
+            # Only Admin case
+            if (
+                project_member.role == 20
+                and ProjectMember.objects.filter(
+                    workspace__slug=slug,
+                    role=20,
+                    project_id=project_id,
+                ).count()
+                == 1
+            ):
+                return Response(
+                    {
+                        "error": "You cannot leave the project since you are the only admin of the project you should delete the project"
+                    },
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+            # Delete the member from workspace
+            project_member.delete()
+            return Response(status=status.HTTP_204_NO_CONTENT)
+        except ProjectMember.DoesNotExist:
+            return Response(
+                {"error": "Workspace member does not exists"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
diff --git a/apiserver/plane/api/views/workspace.py b/apiserver/plane/api/views/workspace.py
index cbf62548f..ce425185e 100644
--- a/apiserver/plane/api/views/workspace.py
+++ b/apiserver/plane/api/views/workspace.py
@@ -1473,3 +1473,44 @@ class WorkspaceMembersEndpoint(BaseAPIView):
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+
+
+class LeaveWorkspaceEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkspaceEntityPermission,
+    ]
+
+    def delete(self, request, slug):
+        try:
+            workspace_member = WorkspaceMember.objects.get(
+                workspace__slug=slug, member=request.user
+            )
+
+            # Only Admin case
+            if (
+                workspace_member.role == 20
+                and WorkspaceMember.objects.filter(
+                    workspace__slug=slug, role=20
+                ).count()
+                == 1
+            ):
+                return Response(
+                    {
+                        "error": "You cannot leave the workspace since you are the only admin of the workspace you should delete the workspace"
+                    },
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+            # Delete the member from workspace
+            workspace_member.delete()
+            return Response(status=status.HTTP_204_NO_CONTENT)
+        except WorkspaceMember.DoesNotExist:
+            return Response(
+                {"error": "Workspace member does not exists"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )

From 82a48d4805730bb16fcf8d2da69441ddf19265f4 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Fri, 1 Sep 2023 15:55:21 +0530
Subject: [PATCH 64/70] chore: reaction serializers (#2046)

* dev: chore reaction serializers

* fix: remove issue reaction lite serializer
---
 apiserver/plane/api/serializers/issue.py | 22 ++++++----------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/apiserver/plane/api/serializers/issue.py b/apiserver/plane/api/serializers/issue.py
index 6cd06a767..fd6369a73 100644
--- a/apiserver/plane/api/serializers/issue.py
+++ b/apiserver/plane/api/serializers/issue.py
@@ -514,6 +514,9 @@ class IssueAttachmentSerializer(BaseSerializer):
 
 
 class IssueReactionSerializer(BaseSerializer):
+    
+    actor_detail = UserLiteSerializer(read_only=True, source="actor")
+    
     class Meta:
         model = IssueReaction
         fields = "__all__"
@@ -525,19 +528,6 @@ class IssueReactionSerializer(BaseSerializer):
         ]
 
 
-class IssueReactionLiteSerializer(BaseSerializer):
-    actor_detail = UserLiteSerializer(read_only=True, source="actor")
-
-    class Meta:
-        model = IssueReaction
-        fields = [
-            "id",
-            "reaction",
-            "issue",
-            "actor_detail",
-        ]
-
-
 class CommentReactionLiteSerializer(BaseSerializer):
     actor_detail = UserLiteSerializer(read_only=True, source="actor")
 
@@ -633,7 +623,7 @@ class IssueSerializer(BaseSerializer):
     issue_link = IssueLinkSerializer(read_only=True, many=True)
     issue_attachment = IssueAttachmentSerializer(read_only=True, many=True)
     sub_issues_count = serializers.IntegerField(read_only=True)
-    issue_reactions = IssueReactionLiteSerializer(read_only=True, many=True)
+    issue_reactions = IssueReactionSerializer(read_only=True, many=True)
 
     class Meta:
         model = Issue
@@ -659,7 +649,7 @@ class IssueLiteSerializer(BaseSerializer):
     module_id = serializers.UUIDField(read_only=True)
     attachment_count = serializers.IntegerField(read_only=True)
     link_count = serializers.IntegerField(read_only=True)
-    issue_reactions = IssueReactionLiteSerializer(read_only=True, many=True)
+    issue_reactions = IssueReactionSerializer(read_only=True, many=True)
 
     class Meta:
         model = Issue
@@ -680,7 +670,7 @@ class IssueLiteSerializer(BaseSerializer):
 class IssuePublicSerializer(BaseSerializer):
     project_detail = ProjectLiteSerializer(read_only=True, source="project")
     state_detail = StateLiteSerializer(read_only=True, source="state")
-    reactions = IssueReactionLiteSerializer(read_only=True, many=True, source="issue_reactions")
+    reactions = IssueReactionSerializer(read_only=True, many=True, source="issue_reactions")
     votes = IssueVoteSerializer(read_only=True, many=True)
 
     class Meta:

From c03550656ada0c0ce3dca134b618051375b6232a Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Fri, 1 Sep 2023 15:58:25 +0530
Subject: [PATCH 65/70] chore: vote actor details (#2047)

* chore: vote actor details

* dev: add field in serializer

* dev: remove _id in workspace and project
---
 apiserver/plane/api/serializers/issue.py | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apiserver/plane/api/serializers/issue.py b/apiserver/plane/api/serializers/issue.py
index fd6369a73..938c7cab4 100644
--- a/apiserver/plane/api/serializers/issue.py
+++ b/apiserver/plane/api/serializers/issue.py
@@ -549,9 +549,12 @@ class CommentReactionSerializer(BaseSerializer):
 
 
 class IssueVoteSerializer(BaseSerializer):
+
+    actor_detail = UserLiteSerializer(read_only=True, source="actor")
+
     class Meta:
         model = IssueVote
-        fields = ["issue", "vote", "workspace_id", "project_id", "actor"]
+        fields = ["issue", "vote", "workspace", "project", "actor", "actor_detail"]
         read_only_fields = fields
 
 

From 8a95a41100c8405f613d636eb2a75a2b5813fc8c Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Fri, 1 Sep 2023 16:42:30 +0530
Subject: [PATCH 66/70] feat: Converting space app to pages dir (#2052)

Co-authored-by: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
Co-authored-by: Bavisetti Narayan <narayan@Bavisettis-MacBook-Pro.local>
Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Co-authored-by: M. Palanikannan <73993394+Palanikannan1437@users.noreply.github.com>
Co-authored-by: Lakhan Baheti <94619783+1akhanBaheti@users.noreply.github.com>
Co-authored-by: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Co-authored-by: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
---
 .../[project_slug]/layout.tsx                 |   66 -
 .../[workspace_slug]/[project_slug]/page.tsx  |  113 --
 apps/space/app/layout.tsx                     |   20 -
 apps/space/app/page.tsx                       |    9 -
 .../components/accounts/email-code-form.tsx   |  216 +++
 .../accounts/email-password-form.tsx          |  116 ++
 .../accounts/email-reset-password-form.tsx    |   89 +
 .../accounts/github-login-button.tsx          |   55 +
 .../components/accounts/google-login.tsx      |   59 +
 apps/space/components/accounts/index.ts       |    6 +
 .../components/accounts/onboarding-form.tsx   |  187 ++
 .../issues/board-views/block-downvotes.tsx    |   10 +
 .../issues/board-views/block-due-date.tsx     |   58 +-
 .../issues/board-views/block-labels.tsx       |   10 +-
 .../issues/board-views/block-priority.tsx     |    7 +-
 .../issues/board-views/block-state.tsx        |   10 +-
 .../issues/board-views/block-upvotes.tsx      |    8 +
 .../issues/board-views/kanban/block.tsx       |   53 +-
 .../issues/board-views/kanban/header.tsx      |   12 +-
 .../issues/board-views/kanban/index.tsx       |   12 +-
 .../issues/board-views/list/block.tsx         |  115 +-
 .../issues/board-views/list/header.tsx        |   12 +-
 .../issues/board-views/list/index.tsx         |   32 +-
 .../components/issues/filters-render/date.tsx |   38 -
 .../issues/filters-render/index.tsx           |   51 +-
 .../label/filter-label-block.tsx              |   37 +-
 .../issues/filters-render/label/index.tsx     |   34 +-
 .../priority/filter-priority-block.tsx        |   29 +-
 .../issues/filters-render/priority/index.tsx  |   39 +-
 .../state/filter-state-block.tsx              |   31 +-
 .../issues/filters-render/state/index.tsx     |   34 +-
 apps/space/components/issues/navbar/index.tsx |   52 +-
 .../issues/navbar/issue-board-view.tsx        |   71 +-
 .../components/issues/navbar/issue-filter.tsx |  106 +-
 apps/space/components/issues/navbar/theme.tsx |   23 +-
 .../issues/peek-overview/add-comment.tsx      |  104 ++
 .../peek-overview/comment-detail-card.tsx     |  190 ++
 .../peek-overview/full-screen-peek-view.tsx   |   71 +
 .../issues/peek-overview/header.tsx           |  145 ++
 .../components/issues/peek-overview/index.ts  |   12 +
 .../issues/peek-overview/issue-activity.tsx   |   44 +
 .../issues/peek-overview/issue-details.tsx    |   40 +
 .../peek-overview/issue-emoji-reactions.tsx   |  101 ++
 .../issues/peek-overview/issue-properties.tsx |  155 ++
 .../issues/peek-overview/issue-reaction.tsx   |   24 +
 .../peek-overview/issue-vote-reactions.tsx    |  129 ++
 .../issues/peek-overview/layout.tsx           |  127 ++
 .../issues/peek-overview/side-peek-view.tsx   |   55 +
 .../components/tiptap/bubble-menu/index.tsx   |  119 ++
 .../tiptap/bubble-menu/link-selector.tsx      |   90 +
 .../tiptap/bubble-menu/node-selector.tsx      |  130 ++
 .../bubble-menu/utils/link-validator.tsx      |   12 +
 .../tiptap/extensions/image-resize.tsx        |   57 +
 .../components/tiptap/extensions/index.tsx    |  137 ++
 .../tiptap/extensions/updated-image.tsx       |   22 +
 apps/space/components/tiptap/index.tsx        |  113 ++
 .../tiptap/plugins/delete-image.tsx           |   56 +
 .../tiptap/plugins/upload-image.tsx           |  127 ++
 apps/space/components/tiptap/props.tsx        |   56 +
 .../components/tiptap/slash-command/index.tsx |  339 ++++
 apps/space/components/tiptap/utils.ts         |    6 +
 apps/space/components/ui/dropdown.tsx         |  149 ++
 apps/space/components/ui/icon.tsx             |   10 +
 apps/space/components/ui/index.ts             |    8 +
 apps/space/components/ui/input.tsx            |   37 +
 apps/space/components/ui/loader.tsx           |   25 +
 apps/space/components/ui/primary-button.tsx   |   35 +
 .../space/components/ui/reaction-selector.tsx |   77 +
 apps/space/components/ui/secondary-button.tsx |   35 +
 apps/space/components/ui/toast-alert.tsx      |   67 +
 apps/space/components/ui/tooltip.tsx          |   71 +
 .../components/views/project-details.tsx      |   84 +
 apps/space/constants/data.ts                  |   50 +-
 apps/space/constants/helpers.ts               |   23 +
 apps/space/constants/seo.ts                   |    7 +
 apps/space/constants/workspace.ts             |   12 +
 apps/space/contexts/toast.context.tsx         |   97 ++
 apps/space/helpers/date-time.helper.ts        |   14 +
 apps/space/helpers/emoji.helper.tsx           |   56 +
 apps/space/helpers/string.helper.ts           |   31 +
 apps/space/hooks/use-outside-click.tsx        |   21 +
 apps/space/hooks/use-timer.tsx                |   19 +
 apps/space/hooks/use-toast.tsx                |    9 +
 apps/space/layouts/project-layout.tsx         |   30 +
 apps/space/lib/mobx/store-init.tsx            |   16 +-
 apps/space/next.config.js                     |    1 -
 apps/space/package.json                       |   39 +-
 .../[workspace_slug]/[project_slug]/index.tsx |   50 +
 .../[workspace_slug]/index.tsx}               |    0
 apps/space/pages/_app.tsx                     |   39 +-
 apps/space/pages/_document.tsx                |    2 +-
 apps/space/pages/index.tsx                    |  156 ++
 apps/space/pages/onboarding/index.tsx         |   53 +
 .../project-not-published/index.tsx}          |    0
 apps/space/postcss.config.js                  |    1 +
 .../public/favicon/android-chrome-192x192.png |  Bin 0 -> 2222 bytes
 .../public/favicon/android-chrome-512x512.png |  Bin 0 -> 3832 bytes
 .../space/public/favicon/apple-touch-icon.png |  Bin 0 -> 2176 bytes
 apps/space/public/favicon/favicon-16x16.png   |  Bin 0 -> 1625 bytes
 apps/space/public/favicon/favicon-32x32.png   |  Bin 0 -> 1617 bytes
 apps/space/public/favicon/favicon.ico         |  Bin 0 -> 919 bytes
 apps/space/public/favicon/site.webmanifest    |    1 +
 apps/space/public/logos/github-black.png      |  Bin 0 -> 14032 bytes
 apps/space/public/logos/github-square.png     |  Bin 0 -> 2352 bytes
 apps/space/public/logos/github-white.png      |  Bin 0 -> 16559 bytes
 .../black-horizontal-with-blue-logo.svg       |   17 +
 .../public/plane-logos/blue-without-text.png  |  Bin 0 -> 2460 bytes
 .../white-horizontal-with-blue-logo.svg       |   17 +
 .../public/plane-logos/white-horizontal.svg   |   17 +
 apps/space/services/api.service.ts            |   10 +
 apps/space/services/authentication.service.ts |   92 +
 apps/space/services/file.service.ts           |  101 ++
 apps/space/services/issue.service.ts          |  131 +-
 apps/space/services/project.service.ts        |    2 +-
 apps/space/services/user.service.ts           |    8 +
 apps/space/store/issue.ts                     |  100 +-
 apps/space/store/issue_details.ts             |  259 +++
 apps/space/store/issue_legacy.ts              |  566 ++++++
 apps/space/store/project.ts                   |   53 +-
 apps/space/store/root.ts                      |   14 +-
 apps/space/store/theme.ts                     |   33 -
 apps/space/store/types/index.ts               |    4 -
 apps/space/store/types/issue.ts               |   72 -
 apps/space/store/types/user.ts                |    4 -
 apps/space/store/user.ts                      |   50 +-
 apps/space/styles/editor.css                  |  231 +++
 apps/space/styles/globals.css                 |  228 +++
 apps/space/tailwind.config.js                 |  190 +-
 apps/space/types/issue.ts                     |  161 ++
 apps/space/{store => }/types/project.ts       |   11 -
 apps/space/{store => }/types/theme.ts         |    0
 apps/space/types/user.ts                      |    3 +
 yarn.lock                                     | 1534 +++++++++--------
 133 files changed, 7993 insertions(+), 1521 deletions(-)
 delete mode 100644 apps/space/app/[workspace_slug]/[project_slug]/layout.tsx
 delete mode 100644 apps/space/app/[workspace_slug]/[project_slug]/page.tsx
 delete mode 100644 apps/space/app/layout.tsx
 delete mode 100644 apps/space/app/page.tsx
 create mode 100644 apps/space/components/accounts/email-code-form.tsx
 create mode 100644 apps/space/components/accounts/email-password-form.tsx
 create mode 100644 apps/space/components/accounts/email-reset-password-form.tsx
 create mode 100644 apps/space/components/accounts/github-login-button.tsx
 create mode 100644 apps/space/components/accounts/google-login.tsx
 create mode 100644 apps/space/components/accounts/index.ts
 create mode 100644 apps/space/components/accounts/onboarding-form.tsx
 create mode 100644 apps/space/components/issues/board-views/block-downvotes.tsx
 create mode 100644 apps/space/components/issues/board-views/block-upvotes.tsx
 delete mode 100644 apps/space/components/issues/filters-render/date.tsx
 create mode 100644 apps/space/components/issues/peek-overview/add-comment.tsx
 create mode 100644 apps/space/components/issues/peek-overview/comment-detail-card.tsx
 create mode 100644 apps/space/components/issues/peek-overview/full-screen-peek-view.tsx
 create mode 100644 apps/space/components/issues/peek-overview/header.tsx
 create mode 100644 apps/space/components/issues/peek-overview/index.ts
 create mode 100644 apps/space/components/issues/peek-overview/issue-activity.tsx
 create mode 100644 apps/space/components/issues/peek-overview/issue-details.tsx
 create mode 100644 apps/space/components/issues/peek-overview/issue-emoji-reactions.tsx
 create mode 100644 apps/space/components/issues/peek-overview/issue-properties.tsx
 create mode 100644 apps/space/components/issues/peek-overview/issue-reaction.tsx
 create mode 100644 apps/space/components/issues/peek-overview/issue-vote-reactions.tsx
 create mode 100644 apps/space/components/issues/peek-overview/layout.tsx
 create mode 100644 apps/space/components/issues/peek-overview/side-peek-view.tsx
 create mode 100644 apps/space/components/tiptap/bubble-menu/index.tsx
 create mode 100644 apps/space/components/tiptap/bubble-menu/link-selector.tsx
 create mode 100644 apps/space/components/tiptap/bubble-menu/node-selector.tsx
 create mode 100644 apps/space/components/tiptap/bubble-menu/utils/link-validator.tsx
 create mode 100644 apps/space/components/tiptap/extensions/image-resize.tsx
 create mode 100644 apps/space/components/tiptap/extensions/index.tsx
 create mode 100644 apps/space/components/tiptap/extensions/updated-image.tsx
 create mode 100644 apps/space/components/tiptap/index.tsx
 create mode 100644 apps/space/components/tiptap/plugins/delete-image.tsx
 create mode 100644 apps/space/components/tiptap/plugins/upload-image.tsx
 create mode 100644 apps/space/components/tiptap/props.tsx
 create mode 100644 apps/space/components/tiptap/slash-command/index.tsx
 create mode 100644 apps/space/components/tiptap/utils.ts
 create mode 100644 apps/space/components/ui/dropdown.tsx
 create mode 100644 apps/space/components/ui/icon.tsx
 create mode 100644 apps/space/components/ui/index.ts
 create mode 100644 apps/space/components/ui/input.tsx
 create mode 100644 apps/space/components/ui/loader.tsx
 create mode 100644 apps/space/components/ui/primary-button.tsx
 create mode 100644 apps/space/components/ui/reaction-selector.tsx
 create mode 100644 apps/space/components/ui/secondary-button.tsx
 create mode 100644 apps/space/components/ui/toast-alert.tsx
 create mode 100644 apps/space/components/ui/tooltip.tsx
 create mode 100644 apps/space/components/views/project-details.tsx
 create mode 100644 apps/space/constants/seo.ts
 create mode 100644 apps/space/constants/workspace.ts
 create mode 100644 apps/space/contexts/toast.context.tsx
 create mode 100644 apps/space/helpers/date-time.helper.ts
 create mode 100644 apps/space/helpers/emoji.helper.tsx
 create mode 100644 apps/space/helpers/string.helper.ts
 create mode 100644 apps/space/hooks/use-outside-click.tsx
 create mode 100644 apps/space/hooks/use-timer.tsx
 create mode 100644 apps/space/hooks/use-toast.tsx
 create mode 100644 apps/space/layouts/project-layout.tsx
 create mode 100644 apps/space/pages/[workspace_slug]/[project_slug]/index.tsx
 rename apps/space/{app/[workspace_slug]/page.tsx => pages/[workspace_slug]/index.tsx} (100%)
 create mode 100644 apps/space/pages/index.tsx
 create mode 100644 apps/space/pages/onboarding/index.tsx
 rename apps/space/{app/project-not-published/page.tsx => pages/project-not-published/index.tsx} (100%)
 create mode 100644 apps/space/public/favicon/android-chrome-192x192.png
 create mode 100644 apps/space/public/favicon/android-chrome-512x512.png
 create mode 100644 apps/space/public/favicon/apple-touch-icon.png
 create mode 100644 apps/space/public/favicon/favicon-16x16.png
 create mode 100644 apps/space/public/favicon/favicon-32x32.png
 create mode 100644 apps/space/public/favicon/favicon.ico
 create mode 100644 apps/space/public/favicon/site.webmanifest
 create mode 100644 apps/space/public/logos/github-black.png
 create mode 100644 apps/space/public/logos/github-square.png
 create mode 100644 apps/space/public/logos/github-white.png
 create mode 100644 apps/space/public/plane-logos/black-horizontal-with-blue-logo.svg
 create mode 100644 apps/space/public/plane-logos/blue-without-text.png
 create mode 100644 apps/space/public/plane-logos/white-horizontal-with-blue-logo.svg
 create mode 100644 apps/space/public/plane-logos/white-horizontal.svg
 create mode 100644 apps/space/services/authentication.service.ts
 create mode 100644 apps/space/services/file.service.ts
 create mode 100644 apps/space/store/issue_details.ts
 create mode 100644 apps/space/store/issue_legacy.ts
 delete mode 100644 apps/space/store/theme.ts
 delete mode 100644 apps/space/store/types/index.ts
 delete mode 100644 apps/space/store/types/issue.ts
 delete mode 100644 apps/space/store/types/user.ts
 create mode 100644 apps/space/styles/editor.css
 create mode 100644 apps/space/types/issue.ts
 rename apps/space/{store => }/types/project.ts (64%)
 rename apps/space/{store => }/types/theme.ts (100%)
 create mode 100644 apps/space/types/user.ts

diff --git a/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx b/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx
deleted file mode 100644
index 7b4ed6142..000000000
--- a/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-// next imports
-import Link from "next/link";
-import Image from "next/image";
-import { Metadata, ResolvingMetadata } from "next";
-// components
-import IssueNavbar from "components/issues/navbar";
-import IssueFilter from "components/issues/filters-render";
-// service
-import ProjectService from "services/project.service";
-import { redirect } from "next/navigation";
-
-type LayoutProps = {
-  params: { workspace_slug: string; project_slug: string };
-};
-
-export async function generateMetadata({ params }: LayoutProps): Promise<Metadata> {
-  // read route params
-  const { workspace_slug, project_slug } = params;
-  const projectServiceInstance = new ProjectService();
-
-  try {
-    const project = await projectServiceInstance?.getProjectSettingsAsync(workspace_slug, project_slug);
-
-    return {
-      title: `${project?.project_details?.name} | ${workspace_slug}`,
-      description: `${
-        project?.project_details?.description || `${project?.project_details?.name} | ${workspace_slug}`
-      }`,
-      icons: `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${
-        typeof project?.project_details?.emoji != "object"
-          ? String.fromCodePoint(parseInt(project?.project_details?.emoji))
-          : "✈️"
-      }</text></svg>`,
-    };
-  } catch (error: any) {
-    if (error?.data?.error) {
-      redirect(`/project-not-published`);
-    }
-    return {};
-  }
-}
-
-const RootLayout = ({ children }: { children: React.ReactNode }) => (
-  <div className="relative w-screen min-h-[500px] h-screen overflow-hidden flex flex-col">
-    <div className="flex-shrink-0 h-[60px] border-b border-gray-300 relative flex items-center bg-white select-none">
-      <IssueNavbar />
-    </div>
-    {/* <div className="flex-shrink-0 min-h-[50px] h-auto py-1.5 border-b border-gray-300 relative flex items-center shadow-md bg-white select-none">
-      <IssueFilter />
-    </div> */}
-    <div className="w-full h-full relative bg-gray-100/50 overflow-hidden">{children}</div>
-
-    <div className="absolute z-[99999] bottom-[10px] right-[10px] bg-white rounded-sm shadow-lg border border-gray-100">
-      <Link href="https://plane.so" className="p-1 px-2 flex items-center gap-1" target="_blank">
-        <div className="w-[24px] h-[24px] relative flex justify-center items-center">
-          <Image src="/plane-logo.webp" alt="plane logo" className="w-[24px] h-[24px]" height="24" width="24" />
-        </div>
-        <div className="text-xs">
-          Powered by <b>Plane Deploy</b>
-        </div>
-      </Link>
-    </div>
-  </div>
-);
-
-export default RootLayout;
diff --git a/apps/space/app/[workspace_slug]/[project_slug]/page.tsx b/apps/space/app/[workspace_slug]/[project_slug]/page.tsx
deleted file mode 100644
index 81c2b48c2..000000000
--- a/apps/space/app/[workspace_slug]/[project_slug]/page.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-// next imports
-import { useRouter, useParams, useSearchParams } from "next/navigation";
-// mobx
-import { observer } from "mobx-react-lite";
-// components
-import { IssueListView } from "components/issues/board-views/list";
-import { IssueKanbanView } from "components/issues/board-views/kanban";
-import { IssueCalendarView } from "components/issues/board-views/calendar";
-import { IssueSpreadsheetView } from "components/issues/board-views/spreadsheet";
-import { IssueGanttView } from "components/issues/board-views/gantt";
-// mobx store
-import { RootStore } from "store/root";
-import { useMobxStore } from "lib/mobx/store-provider";
-// types
-import { TIssueBoardKeys } from "store/types";
-
-const WorkspaceProjectPage = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  const router = useRouter();
-  const routerParams = useParams();
-  const routerSearchparams = useSearchParams();
-
-  const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string };
-  const board =
-    routerSearchparams &&
-    routerSearchparams.get("board") != null &&
-    (routerSearchparams.get("board") as TIssueBoardKeys | "");
-
-  // updating default board view when we are in the issues page
-  useEffect(() => {
-    if (workspace_slug && project_slug && store?.project?.workspaceProjectSettings) {
-      const workspacePRojectSettingViews = store?.project?.workspaceProjectSettings?.views;
-      const userAccessViews: TIssueBoardKeys[] = [];
-
-      Object.keys(workspacePRojectSettingViews).filter((_key) => {
-        if (_key === "list" && workspacePRojectSettingViews.list === true) userAccessViews.push(_key);
-        if (_key === "kanban" && workspacePRojectSettingViews.kanban === true) userAccessViews.push(_key);
-        if (_key === "calendar" && workspacePRojectSettingViews.calendar === true) userAccessViews.push(_key);
-        if (_key === "spreadsheet" && workspacePRojectSettingViews.spreadsheet === true) userAccessViews.push(_key);
-        if (_key === "gantt" && workspacePRojectSettingViews.gantt === true) userAccessViews.push(_key);
-      });
-
-      if (userAccessViews && userAccessViews.length > 0) {
-        if (!board) {
-          store.issue.setCurrentIssueBoardView(userAccessViews[0]);
-          router.replace(`/${workspace_slug}/${project_slug}?board=${userAccessViews[0]}`);
-        } else {
-          if (userAccessViews.includes(board)) {
-            if (store.issue.currentIssueBoardView === null) store.issue.setCurrentIssueBoardView(board);
-            else {
-              if (board === store.issue.currentIssueBoardView)
-                router.replace(`/${workspace_slug}/${project_slug}?board=${board}`);
-              else {
-                store.issue.setCurrentIssueBoardView(board);
-                router.replace(`/${workspace_slug}/${project_slug}?board=${board}`);
-              }
-            }
-          } else {
-            store.issue.setCurrentIssueBoardView(userAccessViews[0]);
-            router.replace(`/${workspace_slug}/${project_slug}?board=${userAccessViews[0]}`);
-          }
-        }
-      }
-    }
-  }, [workspace_slug, project_slug, board, router, store?.issue, store?.project?.workspaceProjectSettings]);
-
-  useEffect(() => {
-    if (workspace_slug && project_slug) {
-      store?.project?.getProjectSettingsAsync(workspace_slug, project_slug);
-      store?.issue?.getIssuesAsync(workspace_slug, project_slug);
-    }
-  }, [workspace_slug, project_slug, store?.project, store?.issue]);
-
-  return (
-    <div className="relative w-full h-full overflow-hidden">
-      {store?.issue?.loader && !store.issue.issues ? (
-        <div className="text-sm text-center py-10 text-gray-500">Loading...</div>
-      ) : (
-        <>
-          {store?.issue?.error ? (
-            <div className="text-sm text-center py-10 text-gray-500">Something went wrong.</div>
-          ) : (
-            store?.issue?.currentIssueBoardView && (
-              <>
-                {store?.issue?.currentIssueBoardView === "list" && (
-                  <div className="relative w-full h-full overflow-y-auto">
-                    <div className="container mx-auto px-5 py-3">
-                      <IssueListView />
-                    </div>
-                  </div>
-                )}
-                {store?.issue?.currentIssueBoardView === "kanban" && (
-                  <div className="relative w-full h-full mx-auto px-5">
-                    <IssueKanbanView />
-                  </div>
-                )}
-                {store?.issue?.currentIssueBoardView === "calendar" && <IssueCalendarView />}
-                {store?.issue?.currentIssueBoardView === "spreadsheet" && <IssueSpreadsheetView />}
-                {store?.issue?.currentIssueBoardView === "gantt" && <IssueGanttView />}
-              </>
-            )
-          )}
-        </>
-      )}
-    </div>
-  );
-});
-
-export default WorkspaceProjectPage;
diff --git a/apps/space/app/layout.tsx b/apps/space/app/layout.tsx
deleted file mode 100644
index b63f748e8..000000000
--- a/apps/space/app/layout.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-"use client";
-
-// root styles
-import "styles/globals.css";
-// mobx store provider
-import { MobxStoreProvider } from "lib/mobx/store-provider";
-import MobxStoreInit from "lib/mobx/store-init";
-
-const RootLayout = ({ children }: { children: React.ReactNode }) => (
-  <html lang="en">
-    <body className="antialiased w-100">
-      <MobxStoreProvider>
-        <MobxStoreInit />
-        <main>{children}</main>
-      </MobxStoreProvider>
-    </body>
-  </html>
-);
-
-export default RootLayout;
diff --git a/apps/space/app/page.tsx b/apps/space/app/page.tsx
deleted file mode 100644
index 6a18b7283..000000000
--- a/apps/space/app/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-import React from "react";
-
-const HomePage = () => (
-  <div className="relative w-screen h-screen flex justify-center items-center text-5xl">Plane Deploy</div>
-);
-
-export default HomePage;
diff --git a/apps/space/components/accounts/email-code-form.tsx b/apps/space/components/accounts/email-code-form.tsx
new file mode 100644
index 000000000..b760ccfbb
--- /dev/null
+++ b/apps/space/components/accounts/email-code-form.tsx
@@ -0,0 +1,216 @@
+import React, { useEffect, useState, useCallback } from "react";
+
+// react hook form
+import { useForm } from "react-hook-form";
+
+// services
+import authenticationService from "services/authentication.service";
+
+// hooks
+import useToast from "hooks/use-toast";
+import useTimer from "hooks/use-timer";
+
+// ui
+import { Input, PrimaryButton } from "components/ui";
+
+// types
+type EmailCodeFormValues = {
+  email: string;
+  key?: string;
+  token?: string;
+};
+
+export const EmailCodeForm = ({ handleSignIn }: any) => {
+  const [codeSent, setCodeSent] = useState(false);
+  const [codeResent, setCodeResent] = useState(false);
+  const [isCodeResending, setIsCodeResending] = useState(false);
+  const [errorResendingCode, setErrorResendingCode] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { setToastAlert } = useToast();
+  const { timer: resendCodeTimer, setTimer: setResendCodeTimer } = useTimer();
+
+  const {
+    register,
+    handleSubmit,
+    setError,
+    setValue,
+    getValues,
+    watch,
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm<EmailCodeFormValues>({
+    defaultValues: {
+      email: "",
+      key: "",
+      token: "",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  const isResendDisabled = resendCodeTimer > 0 || isCodeResending || isSubmitting || errorResendingCode;
+
+  const onSubmit = useCallback(
+    async ({ email }: EmailCodeFormValues) => {
+      setErrorResendingCode(false);
+      await authenticationService
+        .emailCode({ email })
+        .then((res) => {
+          setValue("key", res.key);
+          setCodeSent(true);
+        })
+        .catch((err) => {
+          setErrorResendingCode(true);
+          setToastAlert({
+            title: "Oops!",
+            type: "error",
+            message: err?.error,
+          });
+        });
+    },
+    [setToastAlert, setValue]
+  );
+
+  const handleSignin = async (formData: EmailCodeFormValues) => {
+    setIsLoading(true);
+    await authenticationService
+      .magicSignIn(formData)
+      .then((response) => {
+        setIsLoading(false);
+        handleSignIn(response);
+      })
+      .catch((error) => {
+        setIsLoading(false);
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: error?.response?.data?.error ?? "Enter the correct code to sign in",
+        });
+        setError("token" as keyof EmailCodeFormValues, {
+          type: "manual",
+          message: error?.error,
+        });
+      });
+  };
+
+  const emailOld = getValues("email");
+
+  useEffect(() => {
+    setErrorResendingCode(false);
+  }, [emailOld]);
+
+  useEffect(() => {
+    const submitForm = (e: KeyboardEvent) => {
+      if (!codeSent && e.key === "Enter") {
+        e.preventDefault();
+        handleSubmit(onSubmit)().then(() => {
+          setResendCodeTimer(30);
+        });
+      }
+    };
+
+    if (!codeSent) {
+      window.addEventListener("keydown", submitForm);
+    }
+
+    return () => {
+      window.removeEventListener("keydown", submitForm);
+    };
+  }, [handleSubmit, codeSent, onSubmit, setResendCodeTimer]);
+
+  return (
+    <>
+      {(codeSent || codeResent) && (
+        <p className="text-center mt-4">
+          We have sent the sign in code.
+          <br />
+          Please check your inbox at <span className="font-medium">{watch("email")}</span>
+        </p>
+      )}
+      <form className="space-y-4 mt-10 sm:w-[360px] mx-auto">
+        <div className="space-y-1">
+          <Input
+            id="email"
+            type="email"
+            placeholder="Enter your email address..."
+            className="border-custom-border-300 h-[46px]"
+            {...register("email", {
+              required: "Email address is required",
+              validate: (value) =>
+                /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                  value
+                ) || "Email address is not valid",
+            })}
+          />
+          {errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
+        </div>
+
+        {codeSent && (
+          <>
+            <Input
+              id="token"
+              type="token"
+              {...register("token", {
+                required: "Code is required",
+              })}
+              placeholder="Enter code..."
+              className="border-custom-border-300 h-[46px]"
+            />
+            {errors.token && <div className="text-sm text-red-500">{errors.token.message}</div>}
+            <button
+              type="button"
+              className={`flex w-full justify-end text-xs outline-none ${
+                isResendDisabled ? "cursor-default text-custom-text-200" : "cursor-pointer text-custom-primary-100"
+              } `}
+              onClick={() => {
+                setIsCodeResending(true);
+                onSubmit({ email: getValues("email") }).then(() => {
+                  setCodeResent(true);
+                  setIsCodeResending(false);
+                  setResendCodeTimer(30);
+                });
+              }}
+              disabled={isResendDisabled}
+            >
+              {resendCodeTimer > 0 ? (
+                <span className="text-right">Request new code in {resendCodeTimer} seconds</span>
+              ) : isCodeResending ? (
+                "Sending new code..."
+              ) : errorResendingCode ? (
+                "Please try again later"
+              ) : (
+                <span className="font-medium">Resend code</span>
+              )}
+            </button>
+          </>
+        )}
+        {codeSent ? (
+          <PrimaryButton
+            type="submit"
+            className="w-full text-center h-[46px]"
+            size="md"
+            onClick={handleSubmit(handleSignin)}
+            disabled={!isValid && isDirty}
+            loading={isLoading}
+          >
+            {isLoading ? "Signing in..." : "Sign in"}
+          </PrimaryButton>
+        ) : (
+          <PrimaryButton
+            className="w-full text-center h-[46px]"
+            size="md"
+            onClick={() => {
+              handleSubmit(onSubmit)().then(() => {
+                setResendCodeTimer(30);
+              });
+            }}
+            disabled={!isValid && isDirty}
+            loading={isSubmitting}
+          >
+            {isSubmitting ? "Sending code..." : "Send sign in code"}
+          </PrimaryButton>
+        )}
+      </form>
+    </>
+  );
+};
diff --git a/apps/space/components/accounts/email-password-form.tsx b/apps/space/components/accounts/email-password-form.tsx
new file mode 100644
index 000000000..23742eefe
--- /dev/null
+++ b/apps/space/components/accounts/email-password-form.tsx
@@ -0,0 +1,116 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+import Link from "next/link";
+
+// react hook form
+import { useForm } from "react-hook-form";
+// components
+import { EmailResetPasswordForm } from "./email-reset-password-form";
+// ui
+import { Input, PrimaryButton } from "components/ui";
+// types
+type EmailPasswordFormValues = {
+  email: string;
+  password?: string;
+  medium?: string;
+};
+
+type Props = {
+  onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
+};
+
+export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
+  const [isResettingPassword, setIsResettingPassword] = useState(false);
+
+  const router = useRouter();
+  const isSignUpPage = router.pathname === "/sign-up";
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm<EmailPasswordFormValues>({
+    defaultValues: {
+      email: "",
+      password: "",
+      medium: "email",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  return (
+    <>
+      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
+        {isResettingPassword ? "Reset your password" : isSignUpPage ? "Sign up on Plane" : "Sign in to Plane"}
+      </h1>
+      {isResettingPassword ? (
+        <EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} />
+      ) : (
+        <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)}>
+          <div className="space-y-1">
+            <Input
+              id="email"
+              type="email"
+              {...register("email", {
+                required: "Email address is required",
+                validate: (value) =>
+                  /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                    value
+                  ) || "Email address is not valid",
+              })}
+              placeholder="Enter your email address..."
+              className="border-custom-border-300 h-[46px]"
+            />
+            {errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
+          </div>
+          <div className="space-y-1">
+            <Input
+              id="password"
+              type="password"
+              {...register("password", {
+                required: "Password is required",
+              })}
+              placeholder="Enter your password..."
+              className="border-custom-border-300 h-[46px]"
+            />
+            {errors.password && <div className="text-sm text-red-500">{errors.password.message}</div>}
+          </div>
+          <div className="text-right text-xs">
+            {isSignUpPage ? (
+              <Link href="/">
+                <a className="text-custom-text-200 hover:text-custom-primary-100">Already have an account? Sign in.</a>
+              </Link>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setIsResettingPassword(true)}
+                className="text-custom-text-200 hover:text-custom-primary-100"
+              >
+                Forgot your password?
+              </button>
+            )}
+          </div>
+          <div>
+            <PrimaryButton
+              type="submit"
+              className="w-full text-center h-[46px]"
+              disabled={!isValid && isDirty}
+              loading={isSubmitting}
+            >
+              {isSignUpPage ? (isSubmitting ? "Signing up..." : "Sign up") : isSubmitting ? "Signing in..." : "Sign in"}
+            </PrimaryButton>
+            {!isSignUpPage && (
+              <Link href="/sign-up">
+                <a className="block text-custom-text-200 hover:text-custom-primary-100 text-xs mt-4">
+                  Don{"'"}t have an account? Sign up.
+                </a>
+              </Link>
+            )}
+          </div>
+        </form>
+      )}
+    </>
+  );
+};
diff --git a/apps/space/components/accounts/email-reset-password-form.tsx b/apps/space/components/accounts/email-reset-password-form.tsx
new file mode 100644
index 000000000..c850b305c
--- /dev/null
+++ b/apps/space/components/accounts/email-reset-password-form.tsx
@@ -0,0 +1,89 @@
+import React from "react";
+
+// react hook form
+import { useForm } from "react-hook-form";
+// services
+import userService from "services/user.service";
+// hooks
+// import useToast from "hooks/use-toast";
+// ui
+import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+// types
+type Props = {
+  setIsResettingPassword: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword }) => {
+  // const { setToastAlert } = useToast();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm({
+    defaultValues: {
+      email: "",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  const forgotPassword = async (formData: any) => {
+    const payload = {
+      email: formData.email,
+    };
+
+    // await userService
+    //   .forgotPassword(payload)
+    //   .then(() =>
+    //     setToastAlert({
+    //       type: "success",
+    //       title: "Success!",
+    //       message: "Password reset link has been sent to your email address.",
+    //     })
+    //   )
+    //   .catch((err) => {
+    //     if (err.status === 400)
+    //       setToastAlert({
+    //         type: "error",
+    //         title: "Error!",
+    //         message: "Please check the Email ID entered.",
+    //       });
+    //     else
+    //       setToastAlert({
+    //         type: "error",
+    //         title: "Error!",
+    //         message: "Something went wrong. Please try again.",
+    //       });
+    //   });
+  };
+
+  return (
+    <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(forgotPassword)}>
+      <div className="space-y-1">
+        <Input
+          id="email"
+          type="email"
+          {...register("email", {
+            required: "Email address is required",
+            validate: (value) =>
+              /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                value
+              ) || "Email address is not valid",
+          })}
+          placeholder="Enter registered email address.."
+          className="border-custom-border-300 h-[46px]"
+        />
+        {errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
+      </div>
+      <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
+        <SecondaryButton className="w-full text-center h-[46px]" onClick={() => setIsResettingPassword(false)}>
+          Go Back
+        </SecondaryButton>
+        <PrimaryButton type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
+          {isSubmitting ? "Sending link..." : "Send reset link"}
+        </PrimaryButton>
+      </div>
+    </form>
+  );
+};
diff --git a/apps/space/components/accounts/github-login-button.tsx b/apps/space/components/accounts/github-login-button.tsx
new file mode 100644
index 000000000..4ba47b421
--- /dev/null
+++ b/apps/space/components/accounts/github-login-button.tsx
@@ -0,0 +1,55 @@
+import { useEffect, useState, FC } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+// next-themes
+import { useTheme } from "next-themes";
+// images
+import githubBlackImage from "/public/logos/github-black.png";
+import githubWhiteImage from "/public/logos/github-white.png";
+
+export interface GithubLoginButtonProps {
+  handleSignIn: React.Dispatch<string>;
+}
+
+export const GithubLoginButton: FC<GithubLoginButtonProps> = ({ handleSignIn }) => {
+  const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
+  const [gitCode, setGitCode] = useState<null | string>(null);
+
+  const router = useRouter();
+
+  const { code } = router.query;
+
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    if (code && !gitCode) {
+      setGitCode(code.toString());
+      handleSignIn(code.toString());
+    }
+  }, [code, gitCode, handleSignIn]);
+
+  useEffect(() => {
+    const origin = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    setLoginCallBackURL(`${origin}/` as any);
+  }, []);
+
+  return (
+    <div className="w-full flex justify-center items-center">
+      <Link
+        className="w-full"
+        href={`https://github.com/login/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
+      >
+        <button className="flex w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80 h-[46px]">
+          <Image
+            src={theme === "dark" ? githubWhiteImage : githubBlackImage}
+            height={20}
+            width={20}
+            alt="GitHub Logo"
+          />
+          <span>Sign in with GitHub</span>
+        </button>
+      </Link>
+    </div>
+  );
+};
diff --git a/apps/space/components/accounts/google-login.tsx b/apps/space/components/accounts/google-login.tsx
new file mode 100644
index 000000000..82916d7b5
--- /dev/null
+++ b/apps/space/components/accounts/google-login.tsx
@@ -0,0 +1,59 @@
+import { FC, CSSProperties, useEffect, useRef, useCallback, useState } from "react";
+
+import Script from "next/script";
+
+export interface IGoogleLoginButton {
+  text?: string;
+  handleSignIn: React.Dispatch<any>;
+  styles?: CSSProperties;
+}
+
+export const GoogleLoginButton: FC<IGoogleLoginButton> = ({ handleSignIn }) => {
+  const googleSignInButton = useRef<HTMLDivElement>(null);
+  const [gsiScriptLoaded, setGsiScriptLoaded] = useState(false);
+
+  const loadScript = useCallback(() => {
+    if (!googleSignInButton.current || gsiScriptLoaded) return;
+
+    (window as any)?.google?.accounts.id.initialize({
+      client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
+      callback: handleSignIn,
+    });
+
+    try {
+      (window as any)?.google?.accounts.id.renderButton(
+        googleSignInButton.current,
+        {
+          type: "standard",
+          theme: "outline",
+          size: "large",
+          logo_alignment: "center",
+          width: 360,
+          text: "signin_with",
+        } as any // customization attributes
+      );
+    } catch (err) {
+      console.log(err);
+    }
+
+    (window as any)?.google?.accounts.id.prompt(); // also display the One Tap dialog
+
+    setGsiScriptLoaded(true);
+  }, [handleSignIn, gsiScriptLoaded]);
+
+  useEffect(() => {
+    if ((window as any)?.google?.accounts?.id) {
+      loadScript();
+    }
+    return () => {
+      (window as any)?.google?.accounts.id.cancel();
+    };
+  }, [loadScript]);
+
+  return (
+    <>
+      <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
+      <div className="overflow-hidden rounded w-full" id="googleSignInButton" ref={googleSignInButton} />
+    </>
+  );
+};
diff --git a/apps/space/components/accounts/index.ts b/apps/space/components/accounts/index.ts
new file mode 100644
index 000000000..093e8538c
--- /dev/null
+++ b/apps/space/components/accounts/index.ts
@@ -0,0 +1,6 @@
+export * from "./email-code-form";
+export * from "./email-password-form";
+export * from "./email-reset-password-form";
+export * from "./github-login-button";
+export * from "./google-login";
+export * from "./onboarding-form";
diff --git a/apps/space/components/accounts/onboarding-form.tsx b/apps/space/components/accounts/onboarding-form.tsx
new file mode 100644
index 000000000..c40465b3f
--- /dev/null
+++ b/apps/space/components/accounts/onboarding-form.tsx
@@ -0,0 +1,187 @@
+import { useEffect, Fragment } from "react";
+import { useRouter } from "next/router";
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// icons
+import { ChevronDownIcon, CheckIcon } from "@heroicons/react/20/solid";
+// constants
+import { USER_ROLES } from "constants/workspace";
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import UserService from "services/user.service";
+// ui
+import { Input, PrimaryButton } from "components/ui";
+
+const defaultValues = {
+  first_name: "",
+  last_name: "",
+  role: "",
+};
+
+type Props = {
+  user?: any;
+};
+
+export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
+  const { setToastAlert } = useToast();
+
+  const router = useRouter();
+  const { next_path } = router.query;
+
+  const { user: userStore } = useMobxStore();
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm({
+    defaultValues,
+  });
+
+  const onSubmit = async (formData: any) => {
+    const payload = {
+      ...formData,
+      onboarding_step: {
+        ...user.onboarding_step,
+        profile_complete: true,
+      },
+    };
+
+    const userService = new UserService();
+
+    await userService
+      .updateMe(payload)
+      .then((response) => {
+        userStore.setCurrentUser(response);
+        router.push(next_path?.toString() || "/");
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Details updated successfully.",
+        });
+      })
+      .catch((err) => {});
+  };
+
+  useEffect(() => {
+    if (user) {
+      reset({
+        first_name: user.first_name,
+        last_name: user.last_name,
+        role: user.role,
+      });
+    }
+  }, [user, reset]);
+
+  return (
+    <form
+      className="h-full w-full space-y-7 sm:space-y-10 overflow-y-auto sm:flex sm:flex-col sm:items-start sm:justify-center"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <div className="relative sm:text-lg">
+        <div className="text-gray-800 absolute -top-1 -left-3">{'"'}</div>
+        <h5>Hey there 👋🏻</h5>
+        <h5 className="mt-5 mb-6">Let{"'"}s get you onboard!</h5>
+        <h4 className="text-xl sm:text-2xl font-semibold">Set up your Plane profile.</h4>
+      </div>
+
+      <div className="space-y-7 sm:w-3/4 md:w-2/5">
+        <div className="space-y-1 text-sm">
+          <label htmlFor="firstName">First Name</label>
+          <Input
+            id="firstName"
+            autoComplete="off"
+            placeholder="Enter your first name..."
+            {...register("first_name", {
+              required: "First name is required",
+            })}
+          />
+          {errors.first_name && <div className="text-sm text-red-500">{errors.first_name.message}</div>}
+        </div>
+        <div className="space-y-1 text-sm">
+          <label htmlFor="lastName">Last Name</label>
+          <Input
+            id="lastName"
+            autoComplete="off"
+            placeholder="Enter your last name..."
+            {...register("last_name", {
+              required: "Last name is required",
+            })}
+          />
+          {errors.last_name && <div className="text-sm text-red-500">{errors.last_name.message}</div>}
+        </div>
+        <div className="space-y-1 text-sm">
+          <span>What{"'"}s your role?</span>
+          <div className="w-full">
+            <Controller
+              name="role"
+              control={control}
+              rules={{ required: "This field is required" }}
+              render={({ field: { value, onChange } }) => (
+                <Listbox as="div" value={value} onChange={onChange} className="relative flex-shrink-0 text-left">
+                  <Listbox.Button
+                    type="button"
+                    className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none px-3 py-2 text-sm`}
+                  >
+                    <span className="text-custom-text-400">{value || "Select your role..."}</span>
+                    <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                  </Listbox.Button>
+
+                  <Transition
+                    as={Fragment}
+                    enter="transition ease-out duration-100"
+                    enterFrom="transform opacity-0 scale-95"
+                    enterTo="transform opacity-100 scale-100"
+                    leave="transition ease-in duration-75"
+                    leaveFrom="transform opacity-100 scale-100"
+                    leaveTo="transform opacity-0 scale-95"
+                  >
+                    <Listbox.Options
+                      className={`absolute z-10 border border-custom-border-300 mt-1 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none w-full max-h-36 left-0 origin-top-left`}
+                    >
+                      <div className="space-y-1 p-2">
+                        {USER_ROLES.map((role) => (
+                          <Listbox.Option
+                            key={role.value}
+                            value={role.value}
+                            className={({ active, selected }) =>
+                              `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                                active || selected ? "bg-custom-background-80" : ""
+                              } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                            }
+                          >
+                            {({ selected }) => (
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <span>{role.label}</span>
+                                </div>
+                                {selected && <CheckIcon className="h-4 w-4 flex-shrink-0" />}
+                              </div>
+                            )}
+                          </Listbox.Option>
+                        ))}
+                      </div>
+                    </Listbox.Options>
+                  </Transition>
+                </Listbox>
+              )}
+            />
+            {errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
+          </div>
+        </div>
+      </div>
+
+      <PrimaryButton type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
+        {isSubmitting ? "Updating..." : "Continue"}
+      </PrimaryButton>
+    </form>
+  );
+});
diff --git a/apps/space/components/issues/board-views/block-downvotes.tsx b/apps/space/components/issues/board-views/block-downvotes.tsx
new file mode 100644
index 000000000..72e21f641
--- /dev/null
+++ b/apps/space/components/issues/board-views/block-downvotes.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+export const IssueBlockDownVotes = ({ number }: { number: number }) => (
+  <div className="h-6 rounded flex px-1.5 pl-1 py-1 items-center border-[0.5px] border-custom-border-300 text-custom-text-300 text-xs">
+    <span className="material-symbols-rounded text-base !p-0 !m-0 rotate-180 text-custom-text-300">
+      arrow_upward_alt
+    </span>
+    {number}
+  </div>
+);
diff --git a/apps/space/components/issues/board-views/block-due-date.tsx b/apps/space/components/issues/board-views/block-due-date.tsx
index 6d3cc3cc0..f96836098 100644
--- a/apps/space/components/issues/board-views/block-due-date.tsx
+++ b/apps/space/components/issues/board-views/block-due-date.tsx
@@ -1,32 +1,60 @@
 "use client";
 
 // helpers
-import { renderDateFormat } from "constants/helpers";
+import { renderFullDate } from "constants/helpers";
 
 export const findHowManyDaysLeft = (date: string | Date) => {
   const today = new Date();
   const eventDate = new Date(date);
   const timeDiff = Math.abs(eventDate.getTime() - today.getTime());
+
   return Math.ceil(timeDiff / (1000 * 3600 * 24));
 };
 
-const validDate = (date: any, state: string): string => {
-  if (date === null || ["backlog", "unstarted", "cancelled"].includes(state))
-    return `bg-gray-500/10 text-gray-500 border-gray-500/50`;
-  else {
+const dueDateIcon = (
+  date: string,
+  stateGroup: string
+): {
+  iconName: string;
+  className: string;
+} => {
+  let iconName = "calendar_today";
+  let className = "";
+
+  if (!date || ["completed", "cancelled"].includes(stateGroup)) {
+    iconName = "calendar_today";
+    className = "";
+  } else {
     const today = new Date();
     const dueDate = new Date(date);
 
-    if (dueDate < today) return `bg-red-500/10 text-red-500 border-red-500/50`;
-    else return `bg-green-500/10 text-green-500 border-green-500/50`;
+    if (dueDate < today) {
+      iconName = "event_busy";
+      className = "text-red-500";
+    } else if (dueDate > today) {
+      iconName = "calendar_today";
+      className = "";
+    } else {
+      iconName = "today";
+      className = "text-red-500";
+    }
   }
+
+  return {
+    iconName,
+    className,
+  };
 };
 
-export const IssueBlockDueDate = ({ due_date, state }: any) => (
-  <div
-    className={`h-[24px] rounded-sm flex px-2 items-center border border-gray-300 gap-1 text-gray-700 text-xs font-medium 
-    ${validDate(due_date, state)}`}
-  >
-    {renderDateFormat(due_date)}
-  </div>
-);
+export const IssueBlockDueDate = ({ due_date, group }: { due_date: string; group: string }) => {
+  const iconDetails = dueDateIcon(due_date, group);
+
+  return (
+    <div className="rounded flex px-2.5 py-1 items-center border-[0.5px] border-custom-border-300 gap-1 text-custom-text-100 text-xs">
+      <span className={`material-symbols-rounded text-sm -my-0.5 ${iconDetails.className}`}>
+        {iconDetails.iconName}
+      </span>
+      {renderFullDate(due_date)}
+    </div>
+  );
+};
diff --git a/apps/space/components/issues/board-views/block-labels.tsx b/apps/space/components/issues/board-views/block-labels.tsx
index 90cc1629c..31e218a7f 100644
--- a/apps/space/components/issues/board-views/block-labels.tsx
+++ b/apps/space/components/issues/board-views/block-labels.tsx
@@ -6,11 +6,13 @@ export const IssueBlockLabels = ({ labels }: any) => (
       labels.length > 0 &&
       labels.map((_label: any) => (
         <div
-          className={`h-[24px] rounded-sm flex px-1 items-center border gap-1 !bg-transparent !text-gray-700`}
-          style={{ backgroundColor: `${_label?.color}10`, borderColor: `${_label?.color}50` }}
+          key={_label?.id}
+          className="flex cursor-default items-center flex-shrink-0 rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
         >
-          <div className="w-[10px] h-[10px] rounded-full" style={{ backgroundColor: `${_label?.color}` }} />
-          <div className="text-sm">{_label?.name}</div>
+          <div className="flex items-center gap-1.5 text-custom-text-200">
+            <div className="w-2 h-2 rounded-full" style={{ backgroundColor: `${_label?.color}` }} />
+            <div className="text-xs">{_label?.name}</div>
+          </div>
         </div>
       ))}
   </div>
diff --git a/apps/space/components/issues/board-views/block-priority.tsx b/apps/space/components/issues/board-views/block-priority.tsx
index 61ca50765..5c9ad3c08 100644
--- a/apps/space/components/issues/board-views/block-priority.tsx
+++ b/apps/space/components/issues/board-views/block-priority.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 // types
-import { TIssuePriorityKey } from "store/types/issue";
+import { TIssuePriorityKey } from "types/issue";
 // constants
 import { issuePriorityFilter } from "constants/data";
 
@@ -9,9 +9,10 @@ export const IssueBlockPriority = ({ priority }: { priority: TIssuePriorityKey |
   const priority_detail = priority != null ? issuePriorityFilter(priority) : null;
 
   if (priority_detail === null) return <></>;
+
   return (
-    <div className={`w-[24px] h-[24px] rounded-sm flex justify-center items-center ${priority_detail?.className}`}>
-      <span className="material-symbols-rounded text-[16px]">{priority_detail?.icon}</span>
+    <div className={`h-6 w-6 rounded grid place-items-center border-[0.5px] ${priority_detail?.className}`}>
+      <span className="material-symbols-rounded text-sm">{priority_detail?.icon}</span>
     </div>
   );
 };
diff --git a/apps/space/components/issues/board-views/block-state.tsx b/apps/space/components/issues/board-views/block-state.tsx
index 87cd65938..6638566f9 100644
--- a/apps/space/components/issues/board-views/block-state.tsx
+++ b/apps/space/components/issues/board-views/block-state.tsx
@@ -8,11 +8,11 @@ export const IssueBlockState = ({ state }: any) => {
 
   if (stateGroup === null) return <></>;
   return (
-    <div
-      className={`h-[24px] rounded-sm flex px-1 items-center border ${stateGroup?.className} gap-1 !bg-transparent !text-gray-700`}
-    >
-      <stateGroup.icon />
-      <div className="text-sm">{state?.name}</div>
+    <div className="flex items-center justify-between gap-1 w-full rounded shadow-sm border-[0.5px] border-custom-border-300 duration-300 focus:outline-none px-2.5 py-1 text-xs cursor-pointer hover:bg-custom-background-80">
+      <div className="flex items-center cursor-pointer w-full gap-1.5 text-custom-text-200">
+        <stateGroup.icon />
+        <div className="text-xs">{state?.name}</div>
+      </div>
     </div>
   );
 };
diff --git a/apps/space/components/issues/board-views/block-upvotes.tsx b/apps/space/components/issues/board-views/block-upvotes.tsx
new file mode 100644
index 000000000..517afeaf0
--- /dev/null
+++ b/apps/space/components/issues/board-views/block-upvotes.tsx
@@ -0,0 +1,8 @@
+"use client";
+
+export const IssueBlockUpVotes = ({ number }: { number: number }) => (
+  <div className="h-6 rounded flex px-1.5 pl-1 py-1 items-center border-[0.5px] border-custom-border-300 text-custom-text-300 text-xs">
+    <span className="material-symbols-rounded text-base !p-0 !m-0 text-custom-text-300">arrow_upward_alt</span>
+    {number}
+  </div>
+);
diff --git a/apps/space/components/issues/board-views/kanban/block.tsx b/apps/space/components/issues/board-views/kanban/block.tsx
index 22af77568..07375fe36 100644
--- a/apps/space/components/issues/board-views/kanban/block.tsx
+++ b/apps/space/components/issues/board-views/kanban/block.tsx
@@ -2,32 +2,55 @@
 
 // mobx react lite
 import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
 // components
 import { IssueBlockPriority } from "components/issues/board-views/block-priority";
 import { IssueBlockState } from "components/issues/board-views/block-state";
 import { IssueBlockLabels } from "components/issues/board-views/block-labels";
 import { IssueBlockDueDate } from "components/issues/board-views/block-due-date";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
 // interfaces
-import { IIssue } from "store/types/issue";
+import { IIssue } from "types/issue";
 import { RootStore } from "store/root";
+import { useRouter } from "next/router";
 
-export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
-  const store: RootStore = useMobxStore();
+export const IssueListBlock = observer(({ issue }: { issue: IIssue }) => {
+  const { project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
+
+  // router
+  const router = useRouter();
+  const { workspace_slug, project_slug, board } = router.query;
+
+  const handleBlockClick = () => {
+    issueDetailStore.setPeekId(issue.id);
+    router.replace(
+      {
+        pathname: `/${workspace_slug?.toString()}/${project_slug}`,
+        query: {
+          board: board?.toString(),
+          peekId: issue.id,
+        },
+      },
+      undefined,
+      { shallow: true }
+    );
+    // router.push(`/${workspace_slug?.toString()}/${project_slug}?board=${board?.toString()}&peekId=${issue.id}`);
+  };
 
   return (
-    <div className="p-2 px-3 bg-white space-y-2 rounded-sm shadow">
+    <div className="py-3 px-4 h-[118px] flex flex-col gap-1.5 bg-custom-background-100 rounded shadow-custom-shadow-sm border-[0.5px] border-custom-border-200">
       {/* id */}
-      <div className="flex-shrink-0 text-sm text-gray-600 w-[60px]">
-        {store?.project?.project?.identifier}-{issue?.sequence_id}
+      <div className="text-xs text-custom-text-300 break-words">
+        {projectStore?.project?.identifier}-{issue?.sequence_id}
       </div>
 
       {/* name */}
-      <div className="font-medium text-gray-800 h-full line-clamp-2">{issue.name}</div>
+      <h6 onClick={handleBlockClick} className="text-sm font-medium break-words line-clamp-2 cursor-pointer">
+        {issue.name}
+      </h6>
 
-      {/* priority */}
-      <div className="relative flex flex-wrap items-center gap-2 w-full">
+      <div className="relative flex-grow flex items-end gap-2 w-full overflow-x-scroll hide-horizontal-scrollbar">
+        {/* priority */}
         {issue?.priority && (
           <div className="flex-shrink-0">
             <IssueBlockPriority priority={issue?.priority} />
@@ -39,12 +62,6 @@ export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
             <IssueBlockState state={issue?.state_detail} />
           </div>
         )}
-        {/* labels */}
-        {issue?.label_details && issue?.label_details.length > 0 && (
-          <div className="flex-shrink-0">
-            <IssueBlockLabels labels={issue?.label_details} />
-          </div>
-        )}
         {/* due date */}
         {issue?.target_date && (
           <div className="flex-shrink-0">
@@ -54,4 +71,4 @@ export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
       </div>
     </div>
   );
-};
+});
diff --git a/apps/space/components/issues/board-views/kanban/header.tsx b/apps/space/components/issues/board-views/kanban/header.tsx
index 43c19f5f5..69c252593 100644
--- a/apps/space/components/issues/board-views/kanban/header.tsx
+++ b/apps/space/components/issues/board-views/kanban/header.tsx
@@ -3,7 +3,7 @@
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // interfaces
-import { IIssueState } from "store/types/issue";
+import { IIssueState } from "types/issue";
 // constants
 import { issueGroupFilter } from "constants/data";
 // mobx hook
@@ -18,14 +18,14 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
   if (stateGroup === null) return <></>;
 
   return (
-    <div className="py-2 flex items-center gap-2">
-      <div className="w-[28px] h-[28px] flex justify-center items-center">
+    <div className="pb-2 px-2 flex items-center">
+      <div className="w-4 h-4 flex justify-center items-center flex-shrink-0">
         <stateGroup.icon />
       </div>
-      <div className="font-medium capitalize">{state?.name}</div>
-      <div className="bg-gray-200/50 text-gray-700 font-medium text-xs w-full max-w-[26px] h-[20px] flex justify-center items-center rounded-full">
+      <div className="font-semibold text-custom-text-200 capitalize ml-2 mr-3 truncate">{state?.name}</div>
+      <span className="text-custom-text-300 rounded-full flex-shrink-0">
         {store.issue.getCountOfIssuesByState(state.id)}
-      </div>
+      </span>
     </div>
   );
 });
diff --git a/apps/space/components/issues/board-views/kanban/index.tsx b/apps/space/components/issues/board-views/kanban/index.tsx
index d716356ff..2ba1450a0 100644
--- a/apps/space/components/issues/board-views/kanban/index.tsx
+++ b/apps/space/components/issues/board-views/kanban/index.tsx
@@ -6,7 +6,7 @@ import { observer } from "mobx-react-lite";
 import { IssueListHeader } from "components/issues/board-views/kanban/header";
 import { IssueListBlock } from "components/issues/board-views/kanban/block";
 // interfaces
-import { IIssueState, IIssue } from "store/types/issue";
+import { IIssueState, IIssue } from "types/issue";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -19,20 +19,20 @@ export const IssueKanbanView = observer(() => {
       {store?.issue?.states &&
         store?.issue?.states.length > 0 &&
         store?.issue?.states.map((_state: IIssueState) => (
-          <div className="flex-shrink-0 relative w-[340px] h-full flex flex-col">
+          <div key={_state.id} className="flex-shrink-0 relative w-[340px] h-full flex flex-col">
             <div className="flex-shrink-0">
               <IssueListHeader state={_state} />
             </div>
-            <div className="w-full h-full overflow-hidden overflow-y-auto">
+            <div className="w-full h-full overflow-hidden overflow-y-auto hide-vertical-scrollbar">
               {store.issue.getFilteredIssuesByState(_state.id) &&
               store.issue.getFilteredIssuesByState(_state.id).length > 0 ? (
-                <div className="space-y-3 pb-2">
+                <div className="space-y-3 pb-2 px-2">
                   {store.issue.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
-                    <IssueListBlock issue={_issue} />
+                    <IssueListBlock key={_issue.id} issue={_issue} />
                   ))}
                 </div>
               ) : (
-                <div className="relative w-full h-full flex justify-center items-center p-10 text-center text-sm text-gray-600">
+                <div className="relative w-full h-full flex justify-center items-center p-10 text-center text-sm text-custom-text-200">
                   No Issues are available.
                 </div>
               )}
diff --git a/apps/space/components/issues/board-views/list/block.tsx b/apps/space/components/issues/board-views/list/block.tsx
index b9dfcc6ab..a4b1ad2b8 100644
--- a/apps/space/components/issues/board-views/list/block.tsx
+++ b/apps/space/components/issues/board-views/list/block.tsx
@@ -1,59 +1,102 @@
-"use client";
-
-// mobx react lite
+import { FC } from "react";
+import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // components
 import { IssueBlockPriority } from "components/issues/board-views/block-priority";
 import { IssueBlockState } from "components/issues/board-views/block-state";
 import { IssueBlockLabels } from "components/issues/board-views/block-labels";
 import { IssueBlockDueDate } from "components/issues/board-views/block-due-date";
+import { IssueBlockUpVotes } from "components/issues/board-views/block-upvotes";
+import { IssueBlockDownVotes } from "components/issues/board-views/block-downvotes";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 // interfaces
-import { IIssue } from "store/types/issue";
+import { IIssue } from "types/issue";
+// store
 import { RootStore } from "store/root";
 
-export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
-  const store: RootStore = useMobxStore();
+export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
+  const { issue } = props;
+  // store
+  const { project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
+  // router
+  const router = useRouter();
+  const { workspace_slug, project_slug, board } = router.query;
+
+  const handleBlockClick = () => {
+    issueDetailStore.setPeekId(issue.id);
+    router.replace(
+      {
+        pathname: `/${workspace_slug?.toString()}/${project_slug}`,
+        query: {
+          board: board?.toString(),
+          peekId: issue.id,
+        },
+      },
+      undefined,
+      { shallow: true }
+    );
+    // router.push(`/${workspace_slug?.toString()}/${project_slug}?board=${board?.toString()}&peekId=${issue.id}`);
+  };
+
+  const totalUpVotes = issue.votes.filter((v) => v.vote === 1);
+  const totalDownVotes = issue.votes.filter((v) => v.vote === -1);
 
   return (
-    <div className="p-2 px-3 relative flex items-center gap-3">
-      <div className="relative flex items-center gap-3 w-full">
+    <div className="flex items-center px-6 py-3.5 relative gap-10 bg-custom-background-100">
+      <div className="relative flex items-center gap-5 w-full flex-grow overflow-hidden">
         {/* id */}
-        <div className="flex-shrink-0 text-sm text-gray-600 w-[60px]">
-          {store?.project?.project?.identifier}-{issue?.sequence_id}
+        <div className="flex-shrink-0 text-sm text-custom-text-300">
+          {projectStore?.project?.identifier}-{issue?.sequence_id}
         </div>
         {/* name */}
-        <div className="font-medium text-gray-800 h-full line-clamp-1">{issue.name}</div>
+        <div onClick={handleBlockClick} className="font-medium text-sm truncate flex-grow cursor-pointer">
+          {issue.name}
+        </div>
       </div>
 
-      {/* priority */}
-      {issue?.priority && (
-        <div className="flex-shrink-0">
-          <IssueBlockPriority priority={issue?.priority} />
-        </div>
-      )}
+      <div className="inline-flex flex-shrink-0 items-center gap-2 text-xs">
+        {projectStore.deploySettings?.votes && (
+          <>
+            {/* upvotes */}
+            <div className="flex-shrink-0">
+              <IssueBlockUpVotes number={totalUpVotes.length} />
+            </div>
+            {/* downotes */}
+            <div className="flex-shrink-0">
+              <IssueBlockDownVotes number={totalDownVotes.length} />
+            </div>
+          </>
+        )}
 
-      {/* state */}
-      {issue?.state_detail && (
-        <div className="flex-shrink-0">
-          <IssueBlockState state={issue?.state_detail} />
-        </div>
-      )}
+        {/* priority */}
+        {issue?.priority && (
+          <div className="flex-shrink-0">
+            <IssueBlockPriority priority={issue?.priority} />
+          </div>
+        )}
 
-      {/* labels */}
-      {issue?.label_details && issue?.label_details.length > 0 && (
-        <div className="flex-shrink-0">
-          <IssueBlockLabels labels={issue?.label_details} />
-        </div>
-      )}
+        {/* state */}
+        {issue?.state_detail && (
+          <div className="flex-shrink-0">
+            <IssueBlockState state={issue?.state_detail} />
+          </div>
+        )}
 
-      {/* due date */}
-      {issue?.target_date && (
-        <div className="flex-shrink-0">
-          <IssueBlockDueDate due_date={issue?.target_date} group={issue?.state_detail?.group} />
-        </div>
-      )}
+        {/* labels */}
+        {issue?.label_details && issue?.label_details.length > 0 && (
+          <div className="flex-shrink-0">
+            <IssueBlockLabels labels={issue?.label_details} />
+          </div>
+        )}
+
+        {/* due date */}
+        {issue?.target_date && (
+          <div className="flex-shrink-0">
+            <IssueBlockDueDate due_date={issue?.target_date} group={issue?.state_detail?.group} />
+          </div>
+        )}
+      </div>
     </div>
   );
-};
+});
diff --git a/apps/space/components/issues/board-views/list/header.tsx b/apps/space/components/issues/board-views/list/header.tsx
index e87cac6f7..546c20bf6 100644
--- a/apps/space/components/issues/board-views/list/header.tsx
+++ b/apps/space/components/issues/board-views/list/header.tsx
@@ -3,7 +3,7 @@
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // interfaces
-import { IIssueState } from "store/types/issue";
+import { IIssueState } from "types/issue";
 // constants
 import { issueGroupFilter } from "constants/data";
 // mobx hook
@@ -18,14 +18,12 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
   if (stateGroup === null) return <></>;
 
   return (
-    <div className="py-2 px-3 flex items-center gap-2">
-      <div className="w-[28px] h-[28px] flex justify-center items-center">
+    <div className="px-6 py-2 flex items-center">
+      <div className="w-4 h-4 flex justify-center items-center">
         <stateGroup.icon />
       </div>
-      <div className="font-medium capitalize">{state?.name}</div>
-      <div className="bg-gray-200/50 text-gray-700 font-medium text-xs w-full max-w-[26px] h-[20px] flex justify-center items-center rounded-full">
-        {store.issue.getCountOfIssuesByState(state.id)}
-      </div>
+      <div className="font-semibold capitalize ml-2 mr-3">{state?.name}</div>
+      <div className="text-custom-text-200">{store.issue.getCountOfIssuesByState(state.id)}</div>
     </div>
   );
 });
diff --git a/apps/space/components/issues/board-views/list/index.tsx b/apps/space/components/issues/board-views/list/index.tsx
index 7a7ec0de1..4d4701840 100644
--- a/apps/space/components/issues/board-views/list/index.tsx
+++ b/apps/space/components/issues/board-views/list/index.tsx
@@ -1,35 +1,37 @@
-"use client";
-
-// mobx react lite
+import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { IssueListHeader } from "components/issues/board-views/list/header";
 import { IssueListBlock } from "components/issues/board-views/list/block";
 // interfaces
-import { IIssueState, IIssue } from "store/types/issue";
+import { IIssueState, IIssue } from "types/issue";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
+// store
 import { RootStore } from "store/root";
+import { useRouter } from "next/router";
 
 export const IssueListView = observer(() => {
-  const store: RootStore = useMobxStore();
+  const { issue: issueStore }: RootStore = useMobxStore();
 
   return (
     <>
-      {store?.issue?.states &&
-        store?.issue?.states.length > 0 &&
-        store?.issue?.states.map((_state: IIssueState) => (
-          <div className="relative w-full">
+      {issueStore?.states &&
+        issueStore?.states.length > 0 &&
+        issueStore?.states.map((_state: IIssueState) => (
+          <div key={_state.id} className="relative w-full">
             <IssueListHeader state={_state} />
-            {store.issue.getFilteredIssuesByState(_state.id) &&
-            store.issue.getFilteredIssuesByState(_state.id).length > 0 ? (
-              <div className="bg-white divide-y">
-                {store.issue.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
-                  <IssueListBlock issue={_issue} />
+            {issueStore.getFilteredIssuesByState(_state.id) &&
+            issueStore.getFilteredIssuesByState(_state.id).length > 0 ? (
+              <div className="divide-y divide-custom-border-200">
+                {issueStore.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
+                  <IssueListBlock key={_issue.id} issue={_issue} />
                 ))}
               </div>
             ) : (
-              <div className="bg-white p-5 text-sm text-gray-600">No Issues are available.</div>
+              <div className="px-6 py-3.5 text-sm text-custom-text-200 bg-custom-background-100">
+                No Issues are available.
+              </div>
             )}
           </div>
         ))}
diff --git a/apps/space/components/issues/filters-render/date.tsx b/apps/space/components/issues/filters-render/date.tsx
deleted file mode 100644
index e01d0ae58..000000000
--- a/apps/space/components/issues/filters-render/date.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-"use client";
-
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-
-const IssueDateFilter = observer(() => {
-  const store = useMobxStore();
-
-  return (
-    <>
-      <div className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded">
-        <div className="flex-shrink-0 font-medium">Due Date</div>
-        <div className="relative flex flex-wrap items-center gap-1">
-          {/* <div className="flex items-center gap-1 border border-gray-300 px-[2px] py-0.5 rounded-full">
-            <div className="w-[18px] h-[18px] cursor-pointer flex justify-center items-center overflow-hidden rounded-full border border-gray-300">
-              <span className={`material-symbols-rounded text-[16px]`}>close</span>
-            </div>
-            <div>Backlog</div>
-            <div
-              className={`w-[18px] h-[18px] cursor-pointer flex justify-center items-center overflow-hidden rounded-full text-gray-500 hover:bg-gray-200/60 hover:text-gray-600`}
-            >
-              <span className={`material-symbols-rounded text-[16px]`}>close</span>
-            </div>
-          </div> */}
-        </div>
-        <div
-          className={`w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-sm text-gray-500 hover:bg-gray-200/60 hover:text-gray-600`}
-        >
-          <span className={`material-symbols-rounded text-[16px]`}>close</span>
-        </div>
-      </div>
-    </>
-  );
-});
-
-export default IssueDateFilter;
diff --git a/apps/space/components/issues/filters-render/index.tsx b/apps/space/components/issues/filters-render/index.tsx
index 366ae1030..d797d1506 100644
--- a/apps/space/components/issues/filters-render/index.tsx
+++ b/apps/space/components/issues/filters-render/index.tsx
@@ -1,12 +1,10 @@
-"use client";
-
+import { useRouter } from "next/router";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // components
 import IssueStateFilter from "./state";
 import IssueLabelFilter from "./label";
 import IssuePriorityFilter from "./priority";
-import IssueDateFilter from "./date";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -14,24 +12,39 @@ import { RootStore } from "store/root";
 const IssueFilter = observer(() => {
   const store: RootStore = useMobxStore();
 
-  const clearAllFilters = () => {};
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const clearAllFilters = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "all",
+    //     removeAll: true,
+    //   })
+    // );
+  };
+
+  // if (store.issue.getIfFiltersIsEmpty()) return null;
 
   return (
-    <div className="container mx-auto px-5 flex justify-start items-center flex-wrap gap-2 text-sm">
-      {/* state */}
-      {store?.issue?.states && <IssueStateFilter />}
-      {/* labels */}
-      {store?.issue?.labels && <IssueLabelFilter />}
-      {/* priority */}
-      <IssuePriorityFilter />
-      {/* due date */}
-      <IssueDateFilter />
-      {/* clear all filters */}
-      <div
-        className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded cursor-pointer hover:bg-gray-200/60"
-        onClick={clearAllFilters}
-      >
-        <div>Clear all filters</div>
+    <div className="flex-shrink-0 min-h-[50px] h-auto py-1.5 border-b border-custom-border-200 relative flex items-center shadow-md bg-whiate select-none">
+      <div className="px-5 flex justify-start items-center flex-wrap gap-2 text-sm">
+        {/* state */}
+        {/* {store.issue.checkIfFilterExistsForKey("state") && <IssueStateFilter />} */}
+        {/* labels */}
+        {/* {store.issue.checkIfFilterExistsForKey("label") && <IssueLabelFilter />} */}
+        {/* priority */}
+        {/* {store.issue.checkIfFilterExistsForKey("priority") && <IssuePriorityFilter />} */}
+        {/* clear all filters */}
+        <div
+          className="flex items-center gap-2 border border-custom-border-200 px-2 py-1 cursor-pointer text-xs rounded-full"
+          onClick={clearAllFilters}
+        >
+          <div>Clear all filters</div>
+          <div className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm">
+            <span className="material-symbols-rounded text-[12px]">close</span>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/apps/space/components/issues/filters-render/label/filter-label-block.tsx b/apps/space/components/issues/filters-render/label/filter-label-block.tsx
index 0606bfc95..a54fb65e4 100644
--- a/apps/space/components/issues/filters-render/label/filter-label-block.tsx
+++ b/apps/space/components/issues/filters-render/label/filter-label-block.tsx
@@ -1,33 +1,42 @@
-"use client";
-
+import { useRouter } from "next/router";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 // interfaces
-import { IIssueLabel } from "store/types/issue";
-// constants
-import { issueGroupFilter } from "constants/data";
+import { IIssueLabel } from "types/issue";
 
 export const RenderIssueLabel = observer(({ label }: { label: IIssueLabel }) => {
   const store = useMobxStore();
 
-  const removeLabelFromFilter = () => {};
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const removeLabelFromFilter = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "label",
+    //     value: label?.id,
+    //   })
+    // );
+  };
 
   return (
     <div
-      className="flex-shrink-0 relative flex items-center flex-wrap gap-1 border px-[2px] py-0.5 rounded-full select-none"
-      style={{ color: label?.color, backgroundColor: `${label?.color}10`, borderColor: `${label?.color}50` }}
+      className="flex-shrink-0 relative flex items-center flex-wrap gap-1 px-2 py-0.5 rounded-full select-none"
+      style={{ color: label?.color, backgroundColor: `${label?.color}10` }}
     >
-      <div className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center overflow-hidden rounded-full">
-        <div className="w-[10px] h-[10px] rounded-full" style={{ backgroundColor: `${label?.color}` }} />
-      </div>
-      <div className="text-sm font-medium whitespace-nowrap">{label?.name}</div>
       <div
-        className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-full text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
+        className="flex-shrink-0 w-1.5 h-1.5 flex justify-center items-center overflow-hidden rounded-full"
+        style={{ backgroundColor: `${label?.color}` }}
+      />
+
+      <div className="font-medium whitespace-nowrap text-xs">{label?.name}</div>
+      <div
+        className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
         onClick={removeLabelFromFilter}
       >
-        <span className="material-symbols-rounded text-[14px]">close</span>
+        <span className="material-symbols-rounded text-xs">close</span>
       </div>
     </div>
   );
diff --git a/apps/space/components/issues/filters-render/label/index.tsx b/apps/space/components/issues/filters-render/label/index.tsx
index 7d313153a..1d9a4f990 100644
--- a/apps/space/components/issues/filters-render/label/index.tsx
+++ b/apps/space/components/issues/filters-render/label/index.tsx
@@ -1,11 +1,10 @@
-"use client";
-
+import { useRouter } from "next/router";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // components
 import { RenderIssueLabel } from "./filter-label-block";
 // interfaces
-import { IIssueLabel } from "store/types/issue";
+import { IIssueLabel } from "types/issue";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -13,21 +12,36 @@ import { RootStore } from "store/root";
 const IssueLabelFilter = observer(() => {
   const store: RootStore = useMobxStore();
 
-  const clearLabelFilters = () => {};
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const clearLabelFilters = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "label",
+    //     removeAll: true,
+    //   })
+    // );
+  };
 
   return (
     <>
-      <div className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded">
-        <div className="flex-shrink-0 font-medium">Labels</div>
+      <div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
+        <div className="flex-shrink-0 text-custom-text-200">Labels</div>
         <div className="relative flex flex-wrap items-center gap-1">
-          {store?.issue?.labels &&
-            store?.issue?.labels.map((_label: IIssueLabel, _index: number) => <RenderIssueLabel label={_label} />)}
+          {/* {store?.issue?.labels &&
+            store?.issue?.labels.map(
+              (_label: IIssueLabel, _index: number) =>
+                store.issue.getUserSelectedFilter("label", _label.id) && (
+                  <RenderIssueLabel key={_label.id} label={_label} />
+                )
+            )} */}
         </div>
         <div
-          className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-sm text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
+          className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
           onClick={clearLabelFilters}
         >
-          <span className="material-symbols-rounded text-[16px]">close</span>
+          <span className="material-symbols-rounded text-[12px]">close</span>
         </div>
       </div>
     </>
diff --git a/apps/space/components/issues/filters-render/priority/filter-priority-block.tsx b/apps/space/components/issues/filters-render/priority/filter-priority-block.tsx
index 98173fd66..5fd1ef1a7 100644
--- a/apps/space/components/issues/filters-render/priority/filter-priority-block.tsx
+++ b/apps/space/components/issues/filters-render/priority/filter-priority-block.tsx
@@ -1,32 +1,41 @@
-"use client";
-
+import { useRouter } from "next/router";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 // interfaces
-import { IIssuePriorityFilters } from "store/types/issue";
+import { IIssuePriorityFilters } from "types/issue";
 
 export const RenderIssuePriority = observer(({ priority }: { priority: IIssuePriorityFilters }) => {
   const store = useMobxStore();
 
-  const removePriorityFromFilter = () => {};
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const removePriorityFromFilter = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "priority",
+    //     value: priority?.key,
+    //   })
+    // );
+  };
 
   return (
     <div
-      className={`flex-shrink-0 relative flex items-center flex-wrap gap-1 border px-[2px] py-0.5 rounded-full select-none ${
+      className={`flex-shrink-0 relative flex items-center flex-wrap gap-1 px-2 py-0.5 text-xs rounded-full select-none ${
         priority.className || ``
       }`}
     >
-      <div className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center overflow-hidden rounded-full">
-        <span className="material-symbols-rounded text-[14px]">{priority?.icon}</span>
+      <div className="flex-shrink-0 flex justify-center items-center overflow-hidden rounded-full">
+        <span className="material-symbols-rounded text-xs">{priority?.icon}</span>
       </div>
-      <div className="text-sm font-medium whitespace-nowrap">{priority?.title}</div>
+      <div className="whitespace-nowrap">{priority?.title}</div>
       <div
-        className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-full text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
+        className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
         onClick={removePriorityFromFilter}
       >
-        <span className="material-symbols-rounded text-[14px]">close</span>
+        <span className="material-symbols-rounded text-xs">close</span>
       </div>
     </div>
   );
diff --git a/apps/space/components/issues/filters-render/priority/index.tsx b/apps/space/components/issues/filters-render/priority/index.tsx
index 2253a0be2..100ba1761 100644
--- a/apps/space/components/issues/filters-render/priority/index.tsx
+++ b/apps/space/components/issues/filters-render/priority/index.tsx
@@ -1,5 +1,4 @@
-"use client";
-
+import { useRouter } from "next/router";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx hook
@@ -7,28 +6,46 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { RenderIssuePriority } from "./filter-priority-block";
 // interfaces
-import { IIssuePriorityFilters } from "store/types/issue";
+import { IIssuePriorityFilters } from "types/issue";
 // constants
 import { issuePriorityFilters } from "constants/data";
 
 const IssuePriorityFilter = observer(() => {
   const store = useMobxStore();
 
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const clearPriorityFilters = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "priority",
+    //     removeAll: true,
+    //   })
+    // );
+  };
+
   return (
     <>
-      <div className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded">
-        <div className="flex-shrink-0 font-medium">Priority</div>
+      <div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
+        <div className="flex-shrink-0 text-custom-text-200">Priority</div>
         <div className="relative flex flex-wrap items-center gap-1">
-          {issuePriorityFilters.map((_priority: IIssuePriorityFilters, _index: number) => (
-            <RenderIssuePriority priority={_priority} />
-          ))}
+          {/* {issuePriorityFilters.map(
+            (_priority: IIssuePriorityFilters, _index: number) =>
+              store.issue.getUserSelectedFilter("priority", _priority.key) && (
+                <RenderIssuePriority key={_priority.key} priority={_priority} />
+              )
+          )} */}
         </div>
         <div
-          className={`w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-sm text-gray-500 hover:bg-gray-200/60 hover:text-gray-600`}
+          className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
+          onClick={() => {
+            clearPriorityFilters();
+          }}
         >
-          <span className={`material-symbols-rounded text-[16px]`}>close</span>
+          <span className="material-symbols-rounded text-[12px]">close</span>
         </div>
-      </div>{" "}
+      </div>
     </>
   );
 });
diff --git a/apps/space/components/issues/filters-render/state/filter-state-block.tsx b/apps/space/components/issues/filters-render/state/filter-state-block.tsx
index 95a4f4c70..8445386a4 100644
--- a/apps/space/components/issues/filters-render/state/filter-state-block.tsx
+++ b/apps/space/components/issues/filters-render/state/filter-state-block.tsx
@@ -1,37 +1,42 @@
-"use client";
-
+import { useRouter } from "next/router";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 // interfaces
-import { IIssueState } from "store/types/issue";
+import { IIssueState } from "types/issue";
 // constants
 import { issueGroupFilter } from "constants/data";
 
 export const RenderIssueState = observer(({ state }: { state: IIssueState }) => {
   const store = useMobxStore();
 
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
   const stateGroup = issueGroupFilter(state.group);
 
-  const removeStateFromFilter = () => {};
+  const removeStateFromFilter = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "state",
+    //     value: state?.id,
+    //   })
+    // );
+  };
 
   if (stateGroup === null) return <></>;
   return (
-    <div
-      className={`flex-shrink-0 relative flex items-center flex-wrap gap-1 border px-[2px] py-0.5 rounded-full select-none ${
-        stateGroup.className || ``
-      }`}
-    >
-      <div className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center overflow-hidden rounded-full">
+    <div className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 ${stateGroup.className || ``}`}>
+      <div className="flex-shrink-0 w-3 h-3 flex justify-center items-center overflow-hidden rounded-full">
         <stateGroup.icon />
       </div>
-      <div className="text-sm font-medium whitespace-nowrap">{state?.name}</div>
+      <div className="text-xs font-medium whitespace-nowrap">{state?.name}</div>
       <div
-        className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-full text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
+        className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
         onClick={removeStateFromFilter}
       >
-        <span className="material-symbols-rounded text-[14px]">close</span>
+        <span className="material-symbols-rounded text-xs">close</span>
       </div>
     </div>
   );
diff --git a/apps/space/components/issues/filters-render/state/index.tsx b/apps/space/components/issues/filters-render/state/index.tsx
index fc73af381..0198c5215 100644
--- a/apps/space/components/issues/filters-render/state/index.tsx
+++ b/apps/space/components/issues/filters-render/state/index.tsx
@@ -1,11 +1,10 @@
-"use client";
-
+import { useRouter } from "next/router";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // components
 import { RenderIssueState } from "./filter-state-block";
 // interfaces
-import { IIssueState } from "store/types/issue";
+import { IIssueState } from "types/issue";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -13,21 +12,36 @@ import { RootStore } from "store/root";
 const IssueStateFilter = observer(() => {
   const store: RootStore = useMobxStore();
 
-  const clearStateFilters = () => {};
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const clearStateFilters = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "state",
+    //     removeAll: true,
+    //   })
+    // );
+  };
 
   return (
     <>
-      <div className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded">
-        <div className="flex-shrink-0 font-medium">State</div>
+      <div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
+        <div className="flex-shrink-0 text-custom-text-200">State</div>
         <div className="relative flex flex-wrap items-center gap-1">
-          {store?.issue?.states &&
-            store?.issue?.states.map((_state: IIssueState, _index: number) => <RenderIssueState state={_state} />)}
+          {/* {store?.issue?.states &&
+            store?.issue?.states.map(
+              (_state: IIssueState, _index: number) =>
+                store.issue.getUserSelectedFilter("state", _state.id) && (
+                  <RenderIssueState key={_state.id} state={_state} />
+                )
+            )} */}
         </div>
         <div
-          className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-sm text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
+          className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
           onClick={clearStateFilters}
         >
-          <span className="material-symbols-rounded text-[16px]">close</span>
+          <span className="material-symbols-rounded text-[12px]">close</span>
         </div>
       </div>
     </>
diff --git a/apps/space/components/issues/navbar/index.tsx b/apps/space/components/issues/navbar/index.tsx
index 71a2fabcc..83d79f349 100644
--- a/apps/space/components/issues/navbar/index.tsx
+++ b/apps/space/components/issues/navbar/index.tsx
@@ -1,17 +1,15 @@
-"use client";
-
-// next imports
+import { useEffect } from "react";
 import Image from "next/image";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // components
 import { NavbarSearch } from "./search";
 import { NavbarIssueBoardView } from "./issue-board-view";
 import { NavbarIssueFilter } from "./issue-filter";
-import { NavbarIssueView } from "./issue-view";
 import { NavbarTheme } from "./theme";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx
+// lib
 import { useMobxStore } from "lib/mobx/store-provider";
+// store
 import { RootStore } from "store/root";
 
 const renderEmoji = (emoji: string | { name: string; color: string }) => {
@@ -27,21 +25,41 @@ const renderEmoji = (emoji: string | { name: string; color: string }) => {
 };
 
 const IssueNavbar = observer(() => {
-  const store: RootStore = useMobxStore();
+  const { project: projectStore }: RootStore = useMobxStore();
+  // router
+  const router = useRouter();
+  const { workspace_slug, project_slug, board } = router.query;
+
+  useEffect(() => {
+    if (workspace_slug && project_slug) {
+      projectStore.fetchProjectSettings(workspace_slug.toString(), project_slug.toString());
+    }
+  }, [projectStore, workspace_slug, project_slug]);
+
+  useEffect(() => {
+    if (workspace_slug && projectStore) {
+      if (board) {
+        projectStore.setActiveBoard(board.toString());
+      } else {
+        router.push(`/${workspace_slug}/${project_slug}?board=list`);
+        projectStore.setActiveBoard("list");
+      }
+    }
+  }, [board, router, projectStore, workspace_slug, project_slug]);
 
   return (
     <div className="px-5 relative w-full flex items-center gap-4">
       {/* project detail */}
       <div className="flex-shrink-0 flex items-center gap-2">
-        <div className="w-[32px] h-[32px] rounded-sm flex justify-center items-center bg-gray-100 text-[24px]">
-          {store?.project?.project && store?.project?.project?.emoji ? (
-            renderEmoji(store?.project?.project?.emoji)
+        <div className="w-4 h-4 flex justify-center items-center">
+          {projectStore?.project && projectStore?.project?.emoji ? (
+            renderEmoji(projectStore?.project?.emoji)
           ) : (
             <Image src="/plane-logo.webp" alt="plane logo" className="w-[24px] h-[24px]" height="24" width="24" />
           )}
         </div>
         <div className="font-medium text-lg max-w-[300px] line-clamp-1 overflow-hidden">
-          {store?.project?.project?.name || `...`}
+          {projectStore?.project?.name || `...`}
         </div>
       </div>
 
@@ -55,16 +73,10 @@ const IssueNavbar = observer(() => {
         <NavbarIssueBoardView />
       </div>
 
-      {/* issue filters */}
-      {/* <div className="flex-shrink-0 relative flex items-center gap-2">
-        <NavbarIssueFilter />
-        <NavbarIssueView />
-      </div> */}
-
       {/* theming */}
-      {/* <div className="flex-shrink-0 relative">
+      <div className="flex-shrink-0 relative">
         <NavbarTheme />
-      </div> */}
+      </div>
     </div>
   );
 });
diff --git a/apps/space/components/issues/navbar/issue-board-view.tsx b/apps/space/components/issues/navbar/issue-board-view.tsx
index 57c8b27c1..62f4d1702 100644
--- a/apps/space/components/issues/navbar/issue-board-view.tsx
+++ b/apps/space/components/issues/navbar/issue-board-view.tsx
@@ -1,54 +1,63 @@
-"use client";
-
-// next imports
-import { useRouter, useParams } from "next/navigation";
-// mobx react lite
+import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // constants
 import { issueViews } from "constants/data";
-// interfaces
-import { TIssueBoardKeys } from "store/types";
 // mobx
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 
 export const NavbarIssueBoardView = observer(() => {
-  const store: RootStore = useMobxStore();
+  const { project: projectStore, issue: issueStore }: RootStore = useMobxStore();
 
   const router = useRouter();
-  const routerParams = useParams();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
 
-  const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string };
-
-  const handleCurrentBoardView = (boardView: TIssueBoardKeys) => {
-    store?.issue?.setCurrentIssueBoardView(boardView);
-    router.replace(`/${workspace_slug}/${project_slug}?board=${boardView}`);
+  const handleCurrentBoardView = (boardView: string) => {
+    projectStore.setActiveBoard(boardView);
+    router.push(
+      `/${workspace_slug}/${project_slug}?board=${boardView}${
+        issueStore?.filteredLabels && issueStore?.filteredLabels.length > 0
+          ? `&labels=${issueStore?.filteredLabels.join(",")}`
+          : ""
+      }${
+        issueStore?.filteredPriorities && issueStore?.filteredPriorities.length > 0
+          ? `&priorities=${issueStore?.filteredPriorities.join(",")}`
+          : ""
+      }${
+        issueStore?.filteredStates && issueStore?.filteredStates.length > 0
+          ? `&states=${issueStore?.filteredStates.join(",")}`
+          : ""
+      }`
+    );
   };
 
   return (
     <>
-      {store?.project?.workspaceProjectSettings &&
-        issueViews &&
-        issueViews.length > 0 &&
-        issueViews.map(
-          (_view) =>
-            store?.project?.workspaceProjectSettings?.views[_view?.key] && (
+      {projectStore?.viewOptions &&
+        Object.keys(projectStore?.viewOptions).map((viewKey: string) => {
+          if (projectStore?.viewOptions[viewKey]) {
+            return (
               <div
-                key={_view?.key}
-                className={`w-[28px] h-[28px] flex justify-center items-center rounded-sm cursor-pointer text-gray-500 ${
-                  _view?.key === store?.issue?.currentIssueBoardView
-                    ? `bg-gray-200/60 text-gray-800`
-                    : `hover:bg-gray-200/60 text-gray-600`
+                key={viewKey}
+                className={`w-[28px] h-[28px] flex justify-center items-center rounded-sm cursor-pointer ${
+                  viewKey === projectStore?.activeBoard
+                    ? `bg-custom-background-80 text-custom-text-200`
+                    : `hover:bg-custom-background-80 text-custom-text-300`
                 }`}
-                onClick={() => handleCurrentBoardView(_view?.key)}
-                title={_view?.title}
+                onClick={() => handleCurrentBoardView(viewKey)}
+                title={viewKey}
               >
-                <span className={`material-symbols-rounded text-[18px] ${_view?.className ? _view?.className : ``}`}>
-                  {_view?.icon}
+                <span
+                  className={`material-symbols-rounded text-[18px] ${
+                    issueViews[viewKey]?.className ? issueViews[viewKey]?.className : ``
+                  }`}
+                >
+                  {issueViews[viewKey]?.icon}
                 </span>
               </div>
-            )
-        )}
+            );
+          }
+        })}
     </>
   );
 });
diff --git a/apps/space/components/issues/navbar/issue-filter.tsx b/apps/space/components/issues/navbar/issue-filter.tsx
index 10255882d..852121a5e 100644
--- a/apps/space/components/issues/navbar/issue-filter.tsx
+++ b/apps/space/components/issues/navbar/issue-filter.tsx
@@ -1,13 +1,111 @@
-"use client";
-
-// mobx react lite
+import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+// icons
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
 // mobx
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
+// components
+import { Dropdown } from "components/ui/dropdown";
+// constants
+import { issueGroupFilter } from "constants/data";
+
+const PRIORITIES = ["urgent", "high", "medium", "low"];
 
 export const NavbarIssueFilter = observer(() => {
   const store: RootStore = useMobxStore();
 
-  return <div>Filter</div>;
+  const router = useRouter();
+  const pathName = router.asPath;
+
+  const handleOnSelect = (key: "states" | "labels" | "priorities", value: string) => {
+    // if (key === "states") {
+    //   store.issue.userSelectedStates = store.issue.userSelectedStates.includes(value)
+    //     ? store.issue.userSelectedStates.filter((s) => s !== value)
+    //     : [...store.issue.userSelectedStates, value];
+    // } else if (key === "labels") {
+    //   store.issue.userSelectedLabels = store.issue.userSelectedLabels.includes(value)
+    //     ? store.issue.userSelectedLabels.filter((l) => l !== value)
+    //     : [...store.issue.userSelectedLabels, value];
+    // } else if (key === "priorities") {
+    //   store.issue.userSelectedPriorities = store.issue.userSelectedPriorities.includes(value)
+    //     ? store.issue.userSelectedPriorities.filter((p) => p !== value)
+    //     : [...store.issue.userSelectedPriorities, value];
+    // }
+    // const paramsCommaSeparated = `${`board=${store.issue.currentIssueBoardView || "list"}`}${
+    //   store.issue.userSelectedPriorities.length > 0 ? `&priorities=${store.issue.userSelectedPriorities.join(",")}` : ""
+    // }${store.issue.userSelectedStates.length > 0 ? `&states=${store.issue.userSelectedStates.join(",")}` : ""}${
+    //   store.issue.userSelectedLabels.length > 0 ? `&labels=${store.issue.userSelectedLabels.join(",")}` : ""
+    // }`;
+    // router.replace(`${pathName}?${paramsCommaSeparated}`);
+  };
+
+  return (
+    <Dropdown
+      button={
+        <>
+          <span>Filters</span>
+          <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+        </>
+      }
+      items={[
+        {
+          display: "Priority",
+          children: PRIORITIES.map((priority) => ({
+            display: (
+              <span className="capitalize flex items-center gap-x-2">
+                <span className="material-symbols-rounded text-[14px]">
+                  {priority === "urgent"
+                    ? "error"
+                    : priority === "high"
+                    ? "signal_cellular_alt"
+                    : priority === "medium"
+                    ? "signal_cellular_alt_2_bar"
+                    : "signal_cellular_alt_1_bar"}
+                </span>
+                {priority}
+              </span>
+            ),
+            onClick: () => handleOnSelect("priorities", priority),
+            isSelected: store.issue.filteredPriorities.includes(priority),
+          })),
+        },
+        {
+          display: "State",
+          children: (store.issue.states || []).map((state) => {
+            const stateGroup = issueGroupFilter(state.group);
+
+            return {
+              display: (
+                <span className="capitalize flex items-center gap-x-2">
+                  {stateGroup && <stateGroup.icon />}
+                  {state.name}
+                </span>
+              ),
+              onClick: () => handleOnSelect("states", state.id),
+              isSelected: store.issue.filteredStates.includes(state.id),
+            };
+          }),
+        },
+        {
+          display: "Labels",
+          children: [...(store.issue.labels || [])].map((label) => ({
+            display: (
+              <span className="capitalize flex items-center gap-x-2">
+                <span
+                  className="w-3 h-3 rounded-full"
+                  style={{
+                    backgroundColor: label.color || "#000",
+                  }}
+                />
+                {label.name}
+              </span>
+            ),
+            onClick: () => handleOnSelect("labels", label.id),
+            isSelected: store.issue.filteredLabels.includes(label.id),
+          })),
+        },
+      ]}
+    />
+  );
 });
diff --git a/apps/space/components/issues/navbar/theme.tsx b/apps/space/components/issues/navbar/theme.tsx
index c122f8478..faea53ba3 100644
--- a/apps/space/components/issues/navbar/theme.tsx
+++ b/apps/space/components/issues/navbar/theme.tsx
@@ -1,28 +1,25 @@
 "use client";
 
+// next theme
+import { useTheme } from "next-themes";
+
 // mobx react lite
 import { observer } from "mobx-react-lite";
-// mobx
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 
 export const NavbarTheme = observer(() => {
-  const store: RootStore = useMobxStore();
+  const { setTheme, theme } = useTheme();
 
   const handleTheme = () => {
-    store?.theme?.setTheme(store?.theme?.theme === "light" ? "dark" : "light");
+    setTheme(theme === "light" ? "dark" : "light");
   };
 
   return (
-    <div
-      className="relative w-[28px] h-[28px] flex justify-center items-center rounded-sm cursor-pointer bg-gray-100 hover:bg-gray-200 hover:bg-gray-200/60 text-gray-600 transition-all"
+    <button
+      type="button"
       onClick={handleTheme}
+      className="relative w-7 h-7 grid place-items-center bg-custom-background-100 hover:bg-custom-background-80 text-custom-text-100 rounded"
     >
-      {store?.theme?.theme === "light" ? (
-        <span className={`material-symbols-rounded text-[18px]`}>dark_mode</span>
-      ) : (
-        <span className={`material-symbols-rounded text-[18px]`}>light_mode</span>
-      )}
-    </div>
+      <span className="material-symbols-rounded text-sm">{theme === "light" ? "dark_mode" : "light_mode"}</span>
+    </button>
   );
 });
diff --git a/apps/space/components/issues/peek-overview/add-comment.tsx b/apps/space/components/issues/peek-overview/add-comment.tsx
new file mode 100644
index 000000000..3ea4308d7
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/add-comment.tsx
@@ -0,0 +1,104 @@
+import React, { useRef } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { useForm, Controller } from "react-hook-form";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { SecondaryButton } from "components/ui";
+// types
+import { Comment } from "types/issue";
+// components
+import { TipTapEditor } from "components/tiptap";
+
+const defaultValues: Partial<Comment> = {
+  comment_html: "",
+};
+
+type Props = {
+  disabled?: boolean;
+};
+
+export const AddComment: React.FC<Props> = observer((props) => {
+  const { disabled = false } = props;
+
+  const {
+    handleSubmit,
+    control,
+    setValue,
+    watch,
+    formState: { isSubmitting },
+    reset,
+  } = useForm<Comment>({ defaultValues });
+
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const { user: userStore, issueDetails: issueDetailStore } = useMobxStore();
+
+  const issueId = issueDetailStore.peekId;
+
+  const editorRef = useRef<any>(null);
+
+  const { setToastAlert } = useToast();
+
+  const onSubmit = async (formData: Comment) => {
+    if (!workspace_slug || !project_slug || !issueId || isSubmitting || !formData.comment_html) return;
+
+    await issueDetailStore
+      .addIssueComment(workspace_slug, project_slug, issueId, formData)
+      .then(() => {
+        reset(defaultValues);
+        editorRef.current?.clearEditor();
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Comment could not be posted. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <div>
+      <div className="issue-comments-section">
+        <Controller
+          name="comment_html"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <TipTapEditor
+              workspaceSlug={workspace_slug as string}
+              ref={editorRef}
+              value={
+                !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
+                  ? watch("comment_html")
+                  : value
+              }
+              customClassName="p-3 min-h-[50px] shadow-sm"
+              debouncedUpdatesEnabled={false}
+              onChange={(comment_json: Object, comment_html: string) => {
+                onChange(comment_html);
+              }}
+            />
+          )}
+        />
+
+        <SecondaryButton
+          onClick={(e) => {
+            userStore.requiredLogin(() => {
+              handleSubmit(onSubmit)(e);
+            });
+          }}
+          type="submit"
+          disabled={isSubmitting || disabled}
+          className="mt-2"
+        >
+          {isSubmitting ? "Adding..." : "Comment"}
+        </SecondaryButton>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/space/components/issues/peek-overview/comment-detail-card.tsx b/apps/space/components/issues/peek-overview/comment-detail-card.tsx
new file mode 100644
index 000000000..7dee29aae
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/comment-detail-card.tsx
@@ -0,0 +1,190 @@
+import React, { useEffect, useState, useRef } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { observer } from "mobx-react-lite";
+import { Menu, Transition } from "@headlessui/react";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// icons
+import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon, EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+// helpers
+import { timeAgo } from "helpers/date-time.helper";
+// types
+import { Comment } from "types/issue";
+// components
+import { TipTapEditor } from "components/tiptap";
+
+type Props = {
+  workspaceSlug: string;
+  comment: Comment;
+};
+
+export const CommentCard: React.FC<Props> = observer((props) => {
+  const { comment, workspaceSlug } = props;
+  // store
+  const { user: userStore, issueDetails: issueDetailStore } = useMobxStore();
+  // states
+  const [isEditing, setIsEditing] = useState(false);
+
+  const {
+    formState: { isSubmitting },
+    handleSubmit,
+    control,
+  } = useForm<any>({
+    defaultValues: { comment_html: comment.comment_html },
+  });
+
+  const handleDelete = () => {
+    if (!workspaceSlug || !issueDetailStore.peekId) return;
+    issueDetailStore.deleteIssueComment(workspaceSlug, comment.project, issueDetailStore.peekId, comment.id);
+  };
+
+  const handleCommentUpdate = async (formData: Comment) => {
+    if (!workspaceSlug || !issueDetailStore.peekId) return;
+    issueDetailStore.updateIssueComment(workspaceSlug, comment.project, issueDetailStore.peekId, comment.id, formData);
+    setIsEditing(false);
+  };
+
+  return (
+    <div className="relative flex items-start space-x-3">
+      <div className="relative px-1">
+        {comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={comment.actor_detail.avatar}
+            alt={
+              comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name
+            }
+            height={30}
+            width={30}
+            className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-200"
+          />
+        ) : (
+          <div className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}>
+            {comment.actor_detail.is_bot
+              ? comment.actor_detail.first_name.charAt(0)
+              : comment.actor_detail.display_name.charAt(0)}
+          </div>
+        )}
+
+        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
+          <ChatBubbleLeftEllipsisIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />
+        </span>
+      </div>
+      <div className="min-w-0 flex-1">
+        <div>
+          <div className="text-xs">
+            {comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name}
+          </div>
+          <p className="mt-0.5 text-xs text-custom-text-200">
+            <>Commented {timeAgo(comment.created_at)}</>
+          </p>
+        </div>
+        <div className="issue-comments-section p-0">
+          <form
+            onSubmit={handleSubmit(handleCommentUpdate)}
+            className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}
+          >
+            <div>
+              <Controller
+                control={control}
+                name="comment_html"
+                render={({ field: { onChange, value } }) => (
+                  <TipTapEditor
+                    workspaceSlug={workspaceSlug as string}
+                    value={value}
+                    debouncedUpdatesEnabled={false}
+                    customClassName="min-h-[50px] p-3 shadow-sm"
+                    onChange={(comment_json: Object, comment_html: string) => {
+                      onChange(comment_html);
+                    }}
+                  />
+                )}
+              />
+            </div>
+            <div className="flex gap-1 self-end">
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
+              >
+                <CheckIcon className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
+              </button>
+              <button
+                type="button"
+                className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
+                onClick={() => setIsEditing(false)}
+              >
+                <XMarkIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
+              </button>
+            </div>
+          </form>
+          <div className={`${isEditing ? "hidden" : ""}`}>
+            <TipTapEditor
+              workspaceSlug={workspaceSlug.toString()}
+              value={comment.comment_html}
+              editable={false}
+              customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+            />
+          </div>
+        </div>
+      </div>
+
+      {userStore?.currentUser?.id === comment?.actor_detail?.id && (
+        <Menu as="div" className="relative w-min text-left">
+          <Menu.Button
+            type="button"
+            onClick={() => {}}
+            className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none cursor-pointer hover:bg-custom-background-80"
+          >
+            <EllipsisVerticalIcon className="h-5 w-5 text-custom-text-200 duration-300" />
+          </Menu.Button>
+
+          <Transition
+            as={React.Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items className="absolute z-10 overflow-y-scroll whitespace-nowrap rounded-md max-h-36 border right-0 origin-top-right mt-1 overflow-auto min-w-[8rem] border-custom-border-300 p-1 text-xs shadow-lg focus:outline-none bg-custom-background-90">
+              <Menu.Item>
+                {({ active }) => (
+                  <div className="py-1">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setIsEditing(true);
+                      }}
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+                        active ? "bg-custom-background-80" : ""
+                      }`}
+                    >
+                      Edit
+                    </button>
+                  </div>
+                )}
+              </Menu.Item>
+              <Menu.Item>
+                {({ active }) => (
+                  <div className="py-1">
+                    <button
+                      type="button"
+                      onClick={handleDelete}
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+                        active ? "bg-custom-background-80" : ""
+                      }`}
+                    >
+                      Delete
+                    </button>
+                  </div>
+                )}
+              </Menu.Item>
+            </Menu.Items>
+          </Transition>
+        </Menu>
+      )}
+    </div>
+  );
+});
diff --git a/apps/space/components/issues/peek-overview/full-screen-peek-view.tsx b/apps/space/components/issues/peek-overview/full-screen-peek-view.tsx
new file mode 100644
index 000000000..a40e6b16a
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/full-screen-peek-view.tsx
@@ -0,0 +1,71 @@
+import { useEffect } from "react";
+import { observer } from "mobx-react-lite";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import {
+  PeekOverviewHeader,
+  PeekOverviewIssueActivity,
+  PeekOverviewIssueDetails,
+  PeekOverviewIssueProperties,
+} from "components/issues/peek-overview";
+// types
+import { Loader } from "components/ui/loader";
+import { IIssue } from "types/issue";
+
+type Props = {
+  handleClose: () => void;
+  issueDetails: IIssue | undefined;
+};
+
+export const FullScreenPeekView: React.FC<Props> = observer((props) => {
+  const { handleClose, issueDetails } = props;
+
+  return (
+    <div className="h-full w-full grid grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
+      <div className="h-full w-full flex flex-col col-span-7 overflow-hidden">
+        <div className="w-full p-5">
+          <PeekOverviewHeader handleClose={handleClose} issueDetails={issueDetails} />
+        </div>
+        {issueDetails ? (
+          <div className="h-full w-full px-6 overflow-y-auto">
+            {/* issue title and description */}
+            <div className="w-full">
+              <PeekOverviewIssueDetails issueDetails={issueDetails} />
+            </div>
+            {/* divider */}
+            <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
+            {/* issue activity/comments */}
+            <div className="w-full pb-5">
+              <PeekOverviewIssueActivity issueDetails={issueDetails} />
+            </div>
+          </div>
+        ) : (
+          <Loader className="px-6">
+            <Loader.Item height="30px" />
+            <div className="space-y-2 mt-3">
+              <Loader.Item height="20px" width="70%" />
+              <Loader.Item height="20px" width="60%" />
+              <Loader.Item height="20px" width="60%" />
+            </div>
+          </Loader>
+        )}
+      </div>
+      <div className="col-span-3 h-full w-full overflow-y-auto">
+        {/* issue properties */}
+        <div className="w-full px-6 py-5">
+          {issueDetails ? (
+            <PeekOverviewIssueProperties issueDetails={issueDetails} />
+          ) : (
+            <Loader className="mt-11 space-y-4">
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/space/components/issues/peek-overview/header.tsx b/apps/space/components/issues/peek-overview/header.tsx
new file mode 100644
index 000000000..7d2e76668
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/header.tsx
@@ -0,0 +1,145 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Icon } from "components/ui";
+// icons
+import { East } from "@mui/icons-material";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+// store
+import { IPeekMode } from "store/issue_details";
+import { RootStore } from "store/root";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// types
+import { IIssue } from "types/issue";
+
+type Props = {
+  handleClose: () => void;
+  issueDetails: IIssue | undefined;
+};
+
+const peekModes: {
+  key: IPeekMode;
+  icon: string;
+  label: string;
+}[] = [
+  { key: "side", icon: "side_navigation", label: "Side Peek" },
+  {
+    key: "modal",
+    icon: "dialogs",
+    label: "Modal Peek",
+  },
+  {
+    key: "full",
+    icon: "nearby",
+    label: "Full Screen Peek",
+  },
+];
+
+export const PeekOverviewHeader: React.FC<Props> = (props) => {
+  const { handleClose, issueDetails } = props;
+
+  const { issueDetails: issueDetailStore }: RootStore = useMobxStore();
+
+  const router = useRouter();
+  const { workspace_slug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleCopyLink = () => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(`${originURL}/${workspace_slug}/projects/${issueDetails?.project}/`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link copied!",
+        message: "Issue link copied to clipboard",
+      });
+    });
+  };
+
+  return (
+    <>
+      <div className="flex justify-between items-center">
+        <div className="flex items-center gap-4">
+          {issueDetailStore.peekMode === "side" && (
+            <button type="button" onClick={handleClose} autoFocus={false}>
+              <East
+                sx={{
+                  fontSize: "14px",
+                }}
+              />
+            </button>
+          )}
+          <Listbox
+            as="div"
+            value={issueDetailStore.peekMode}
+            onChange={(val) => issueDetailStore.setPeekMode(val)}
+            className="relative flex-shrink-0 text-left"
+          >
+            <Listbox.Button
+              className={`grid place-items-center ${issueDetailStore.peekMode === "full" ? "rotate-45" : ""}`}
+            >
+              <Icon iconName={peekModes.find((m) => m.key === issueDetailStore.peekMode)?.icon ?? ""} />
+            </Listbox.Button>
+
+            <Transition
+              as={React.Fragment}
+              enter="transition ease-out duration-100"
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="transform opacity-100 scale-100"
+              leave="transition ease-in duration-75"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95"
+            >
+              <Listbox.Options className="absolute z-10 border border-custom-border-300 mt-1 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none left-0 origin-top-left min-w-[8rem] whitespace-nowrap">
+                <div className="space-y-1 p-2">
+                  {peekModes.map((mode) => (
+                    <Listbox.Option
+                      key={mode.key}
+                      value={mode.key}
+                      className={({ active, selected }) =>
+                        `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                          active || selected ? "bg-custom-background-80" : ""
+                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      }
+                    >
+                      {({ selected }) => (
+                        <div className="flex items-center justify-between gap-2">
+                          <div className="flex items-center gap-2">
+                            <div className="flex items-center gap-1.5">
+                              <Icon
+                                iconName={mode.icon}
+                                className={`!text-base flex-shrink-0 -my-1 ${mode.key === "full" ? "rotate-45" : ""}`}
+                              />
+                              {mode.label}
+                            </div>
+                          </div>
+                          {selected && <Icon iconName="done" />}
+                        </div>
+                      )}
+                    </Listbox.Option>
+                  ))}
+                </div>
+              </Listbox.Options>
+            </Transition>
+          </Listbox>
+        </div>
+        {(issueDetailStore.peekMode === "side" || issueDetailStore.peekMode === "modal") && (
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <button type="button" onClick={handleCopyLink} className="-rotate-45">
+              <Icon iconName="link" />
+            </button>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
diff --git a/apps/space/components/issues/peek-overview/index.ts b/apps/space/components/issues/peek-overview/index.ts
new file mode 100644
index 000000000..44ab04b88
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/index.ts
@@ -0,0 +1,12 @@
+export * from "./full-screen-peek-view";
+export * from "./header";
+export * from "./issue-activity";
+export * from "./issue-details";
+export * from "./issue-properties";
+export * from "./layout";
+export * from "./side-peek-view";
+export * from "./issue-reaction";
+export * from "./issue-vote-reactions";
+export * from "./issue-emoji-reactions";
+export * from "./comment-detail-card";
+export * from "./add-comment";
diff --git a/apps/space/components/issues/peek-overview/issue-activity.tsx b/apps/space/components/issues/peek-overview/issue-activity.tsx
new file mode 100644
index 000000000..9f12b9f73
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/issue-activity.tsx
@@ -0,0 +1,44 @@
+import React, { useEffect } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CommentCard, AddComment } from "components/issues/peek-overview";
+// types
+import { IIssue } from "types/issue";
+
+type Props = {
+  issueDetails: IIssue;
+};
+
+export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
+  const router = useRouter();
+  const { workspace_slug } = router.query;
+
+  const { issueDetails: issueDetailStore, project: projectStore, user: userStore } = useMobxStore();
+
+  const comments = issueDetailStore.details[issueDetailStore.peekId || ""]?.comments || [];
+
+  console.log("issueDetailStore", issueDetailStore);
+
+  return (
+    <div>
+      <h4 className="font-medium">Activity</h4>
+      {workspace_slug && (
+        <div className="mt-4">
+          <div className="space-y-4">
+            {comments.map((comment: any) => (
+              <CommentCard key={comment.id} comment={comment} workspaceSlug={workspace_slug?.toString()} />
+            ))}
+          </div>
+          {projectStore.deploySettings?.comments && (
+            <div className="mt-4">
+              <AddComment disabled={!userStore.currentUser} />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/apps/space/components/issues/peek-overview/issue-details.tsx b/apps/space/components/issues/peek-overview/issue-details.tsx
new file mode 100644
index 000000000..0b329568c
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/issue-details.tsx
@@ -0,0 +1,40 @@
+import { IssueReactions } from "components/issues/peek-overview";
+import { TipTapEditor } from "components/tiptap";
+import { useRouter } from "next/router";
+// types
+import { IIssue } from "types/issue";
+
+type Props = {
+  issueDetails: IIssue;
+};
+
+export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
+  const router = useRouter();
+  const { workspace_slug } = router.query;
+
+  return (
+    <div className="space-y-2">
+      <h6 className="font-medium text-custom-text-200">
+        {issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
+      </h6>
+      <h4 className="break-words text-2xl font-semibold">{issueDetails.name}</h4>
+      {issueDetails.description_html !== "" && issueDetails.description_html !== "<p></p>" && (
+        <TipTapEditor
+          workspaceSlug={workspace_slug as string}
+          value={
+            !issueDetails.description_html ||
+            issueDetails.description_html === "" ||
+            (typeof issueDetails.description_html === "object" &&
+              Object.keys(issueDetails.description_html).length === 0)
+              ? "<p></p>"
+              : issueDetails.description_html
+          }
+          customClassName="p-3 min-h-[50px] shadow-sm"
+          debouncedUpdatesEnabled={false}
+          editable={false}
+        />
+      )}
+      <IssueReactions />
+    </div>
+  );
+};
diff --git a/apps/space/components/issues/peek-overview/issue-emoji-reactions.tsx b/apps/space/components/issues/peek-overview/issue-emoji-reactions.tsx
new file mode 100644
index 000000000..1a81cecdf
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/issue-emoji-reactions.tsx
@@ -0,0 +1,101 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// helpers
+import { groupReactions, renderEmoji } from "helpers/emoji.helper";
+// components
+import { ReactionSelector, Tooltip } from "components/ui";
+
+export const IssueEmojiReactions: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query;
+  // store
+  const { user: userStore, issueDetails: issueDetailsStore } = useMobxStore();
+
+  const user = userStore?.currentUser;
+  const issueId = issueDetailsStore.peekId;
+  const reactions = issueId ? issueDetailsStore.details[issueId]?.reactions || [] : [];
+  const groupedReactions = groupReactions(reactions, "reaction");
+
+  const handleReactionSelectClick = (reactionHex: string) => {
+    if (!workspace_slug || !project_slug || !issueId) return;
+    const userReaction = reactions?.find((r) => r.actor_detail.id === user?.id && r.reaction === reactionHex);
+    if (userReaction) return;
+    issueDetailsStore.addIssueReaction(workspace_slug.toString(), project_slug.toString(), issueId, {
+      reaction: reactionHex,
+    });
+  };
+
+  const handleReactionClick = (reactionHex: string) => {
+    if (!workspace_slug || !project_slug || !issueId) return;
+    issueDetailsStore.removeIssueReaction(workspace_slug.toString(), project_slug.toString(), issueId, reactionHex);
+  };
+
+  useEffect(() => {
+    if (user) return;
+    userStore.fetchCurrentUser();
+  }, [user, userStore]);
+
+  return (
+    <>
+      <ReactionSelector
+        onSelect={(value) => {
+          userStore.requiredLogin(() => {
+            handleReactionSelectClick(value);
+          });
+        }}
+        size="md"
+      />
+      <div className="flex items-center gap-2 flex-wrap">
+        {Object.keys(groupedReactions || {}).map((reaction) => {
+          const reactions = groupedReactions?.[reaction] ?? [];
+          const REACTIONS_LIMIT = 1000;
+
+          if (reactions.length > 0)
+            return (
+              <Tooltip
+                tooltipContent={
+                  <div>
+                    {reactions
+                      .map((r) => r.actor_detail.display_name)
+                      .splice(0, REACTIONS_LIMIT)
+                      .join(", ")}
+                    {reactions.length > REACTIONS_LIMIT && " and " + (reactions.length - REACTIONS_LIMIT) + " more"}
+                  </div>
+                }
+              >
+                <button
+                  type="button"
+                  onClick={() => {
+                    userStore.requiredLogin(() => {
+                      handleReactionClick(reaction);
+                    });
+                  }}
+                  key={reaction}
+                  className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
+                    reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
+                      ? "bg-custom-primary-100/10"
+                      : "bg-custom-background-80"
+                  }`}
+                >
+                  <span>{renderEmoji(reaction)}</span>
+                  <span
+                    className={
+                      reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
+                        ? "text-custom-primary-100"
+                        : ""
+                    }
+                  >
+                    {groupedReactions?.[reaction].length}{" "}
+                  </span>
+                </button>
+              </Tooltip>
+            );
+        })}
+      </div>
+    </>
+  );
+});
diff --git a/apps/space/components/issues/peek-overview/issue-properties.tsx b/apps/space/components/issues/peek-overview/issue-properties.tsx
new file mode 100644
index 000000000..2d454852a
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/issue-properties.tsx
@@ -0,0 +1,155 @@
+// headless ui
+import { Disclosure } from "@headlessui/react";
+// import { getStateGroupIcon } from "components/icons";
+// hooks
+import useToast from "hooks/use-toast";
+// icons
+import { Icon } from "components/ui";
+import { copyTextToClipboard, addSpaceIfCamelCase } from "helpers/string.helper";
+// types
+import { IIssue } from "types/issue";
+// constants
+import { issueGroupFilter, issuePriorityFilter } from "constants/data";
+import { useEffect } from "react";
+import { renderDateFormat } from "constants/helpers";
+import { IPeekMode } from "store/issue_details";
+import { useRouter } from "next/router";
+import { RootStore } from "store/root";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+type Props = {
+  issueDetails: IIssue;
+  mode?: IPeekMode;
+};
+
+const validDate = (date: any, state: string): string => {
+  if (date === null || ["backlog", "unstarted", "cancelled"].includes(state))
+    return `bg-gray-500/10 text-gray-500 border-gray-500/50`;
+  else {
+    const today = new Date();
+    const dueDate = new Date(date);
+
+    if (dueDate < today) return `bg-red-500/10 text-red-500 border-red-500/50`;
+    else return `bg-green-500/10 text-green-500 border-green-500/50`;
+  }
+};
+
+export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mode }) => {
+  const { setToastAlert } = useToast();
+
+  const { issueDetails: issueDetailStore }: RootStore = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const startDate = issueDetails.start_date;
+  const targetDate = issueDetails.target_date;
+
+  const minDate = startDate ? new Date(startDate) : null;
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = targetDate ? new Date(targetDate) : null;
+  maxDate?.setDate(maxDate.getDate());
+
+  const state = issueDetails.state_detail;
+  const stateGroup = issueGroupFilter(state.group);
+
+  const priority = issueDetails.priority ? issuePriorityFilter(issueDetails.priority) : null;
+
+  const handleCopyLink = () => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(
+      `${originURL}/${workspaceSlug}/projects/${issueDetails.project}/issues/${issueDetails.id}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link copied!",
+        message: "Issue link copied to clipboard",
+      });
+    });
+  };
+
+  return (
+    <div className={mode === "full" ? "divide-y divide-custom-border-200" : ""}>
+      {mode === "full" && (
+        <div className="flex justify-between gap-2 pb-3">
+          <h6 className="flex items-center gap-2 font-medium">
+            {/* {getStateGroupIcon(issue.state_detail.group, "16", "16", issue.state_detail.color)} */}
+            {issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
+          </h6>
+          <div className="flex items-center gap-2">
+            <button type="button" onClick={handleCopyLink} className="-rotate-45">
+              <Icon iconName="link" />
+            </button>
+          </div>
+        </div>
+      )}
+      <div className={`space-y-4 ${mode === "full" ? "pt-3" : ""}`}>
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="radio_button_checked" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">State</span>
+          </div>
+          <div className="w-3/4">
+            {stateGroup && (
+              <div className="inline-flex bg-custom-background-80 text-sm rounded px-2.5 py-0.5">
+                <div className="flex items-center gap-1.5 text-left text-custom-text-100">
+                  <stateGroup.icon />
+                  {addSpaceIfCamelCase(state?.name ?? "")}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="signal_cellular_alt" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">Priority</span>
+          </div>
+          <div className="w-3/4">
+            <div
+              className={`inline-flex items-center gap-1.5 text-left text-sm capitalize rounded px-2.5 py-0.5 ${
+                priority?.key === "urgent"
+                  ? "border-red-500/20 bg-red-500/20 text-red-500"
+                  : priority?.key === "high"
+                  ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
+                  : priority?.key === "medium"
+                  ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
+                  : priority?.key === "low"
+                  ? "border-green-500/20 bg-green-500/20 text-green-500"
+                  : "bg-custom-background-80 border-custom-border-200"
+              }`}
+            >
+              {priority && (
+                <span className="grid place-items-center -my-1">
+                  <Icon iconName={priority?.icon!} />
+                </span>
+              )}
+              <span>{priority?.title ?? "None"}</span>
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">Due date</span>
+          </div>
+          <div>
+            {issueDetails.target_date ? (
+              <div
+                className={`h-[24px] rounded-md flex px-2.5 py-1 items-center border border-custom-border-100 gap-1 text-custom-text-100 text-xs font-medium 
+                ${validDate(issueDetails.target_date, state)}`}
+              >
+                {renderDateFormat(issueDetails.target_date)}
+              </div>
+            ) : (
+              <span className="text-custom-text-200">Empty</span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/space/components/issues/peek-overview/issue-reaction.tsx b/apps/space/components/issues/peek-overview/issue-reaction.tsx
new file mode 100644
index 000000000..643ec7119
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/issue-reaction.tsx
@@ -0,0 +1,24 @@
+import { IssueEmojiReactions, IssueVotes } from "components/issues/peek-overview";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export const IssueReactions: React.FC = () => {
+  const { project: projectStore } = useMobxStore();
+
+  return (
+    <div className="flex gap-3 items-center mt-4">
+      {projectStore?.deploySettings?.votes && (
+        <>
+          <div className="flex gap-2 items-center">
+            <IssueVotes />
+          </div>
+          <div className="w-0.5 h-8 bg-custom-background-200" />
+        </>
+      )}
+      {projectStore?.deploySettings?.reactions && (
+        <div className="flex gap-2 items-center">
+          <IssueEmojiReactions />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/space/components/issues/peek-overview/issue-vote-reactions.tsx b/apps/space/components/issues/peek-overview/issue-vote-reactions.tsx
new file mode 100644
index 000000000..ac20565ea
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/issue-vote-reactions.tsx
@@ -0,0 +1,129 @@
+import { useState, useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+import { Tooltip } from "components/ui";
+
+export const IssueVotes: React.FC = observer(() => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const router = useRouter();
+
+  const { workspace_slug, project_slug } = router.query;
+
+  const { user: userStore, issueDetails: issueDetailsStore } = useMobxStore();
+
+  const user = userStore?.currentUser;
+  const issueId = issueDetailsStore.peekId;
+
+  const votes = issueId ? issueDetailsStore.details[issueId]?.votes : [];
+
+  const allUpVotes = votes?.filter((vote) => vote.vote === 1);
+  const allDownVotes = votes?.filter((vote) => vote.vote === -1);
+
+  const isUpVotedByUser = allUpVotes?.some((vote) => vote.actor === user?.id);
+  const isDownVotedByUser = allDownVotes?.some((vote) => vote.actor === user?.id);
+
+  const handleVote = async (e: any, voteValue: 1 | -1) => {
+    if (!workspace_slug || !project_slug || !issueId) return;
+
+    setIsSubmitting(true);
+
+    const actionPerformed = votes?.find((vote) => vote.actor === user?.id && vote.vote === voteValue);
+
+    if (actionPerformed)
+      await issueDetailsStore.removeIssueVote(workspace_slug.toString(), project_slug.toString(), issueId);
+    else
+      await issueDetailsStore.addIssueVote(workspace_slug.toString(), project_slug.toString(), issueId, {
+        vote: voteValue,
+      });
+
+    setIsSubmitting(false);
+  };
+
+  useEffect(() => {
+    if (user) return;
+
+    userStore.fetchCurrentUser();
+  }, [user, userStore]);
+
+  const VOTES_LIMIT = 1000;
+
+  return (
+    <div className="flex gap-2 items-center">
+      {/* upvote button 👇 */}
+      <Tooltip
+        tooltipContent={
+          <div>
+            {allUpVotes.length > 0 ? (
+              <>
+                {allUpVotes
+                  .map((r) => r.actor_detail.display_name)
+                  .splice(0, VOTES_LIMIT)
+                  .join(", ")}
+                {allUpVotes.length > VOTES_LIMIT && " and " + (allUpVotes.length - VOTES_LIMIT) + " more"}
+              </>
+            ) : (
+              "No upvotes yet"
+            )}
+          </div>
+        }
+      >
+        <button
+          type="button"
+          disabled={isSubmitting}
+          onClick={(e) => {
+            userStore.requiredLogin(() => {
+              handleVote(e, 1);
+            });
+          }}
+          className={`flex items-center justify-center overflow-hidden px-2 gap-x-1 border rounded focus:outline-none ${
+            isUpVotedByUser ? "border-custom-primary-200 text-custom-primary-200" : "border-custom-border-300"
+          }`}
+        >
+          <span className="material-symbols-rounded text-base !p-0 !m-0">arrow_upward_alt</span>
+          <span className="text-sm font-normal transition-opacity ease-in-out">{allUpVotes.length}</span>
+        </button>
+      </Tooltip>
+
+      {/* downvote button 👇 */}
+      <Tooltip
+        tooltipContent={
+          <div>
+            {allDownVotes.length > 0 ? (
+              <>
+                {allDownVotes
+                  .map((r) => r.actor_detail.display_name)
+                  .splice(0, VOTES_LIMIT)
+                  .join(", ")}
+                {allDownVotes.length > VOTES_LIMIT && " and " + (allDownVotes.length - VOTES_LIMIT) + " more"}
+              </>
+            ) : (
+              "No downvotes yet"
+            )}
+          </div>
+        }
+      >
+        <button
+          type="button"
+          disabled={isSubmitting}
+          onClick={(e) => {
+            userStore.requiredLogin(() => {
+              handleVote(e, -1);
+            });
+          }}
+          className={`flex items-center justify-center overflow-hidden px-2 gap-x-1 border rounded focus:outline-none ${
+            isDownVotedByUser ? "border-red-600 text-red-600" : "border-custom-border-300"
+          }`}
+        >
+          <span className="material-symbols-rounded text-base !p-0 !m-0">arrow_downward_alt</span>
+          <span className="text-sm font-normal transition-opacity ease-in-out">{allDownVotes.length}</span>
+        </button>
+      </Tooltip>
+    </div>
+  );
+});
diff --git a/apps/space/components/issues/peek-overview/layout.tsx b/apps/space/components/issues/peek-overview/layout.tsx
new file mode 100644
index 000000000..abb76db48
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/layout.tsx
@@ -0,0 +1,127 @@
+import React, { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// components
+import { FullScreenPeekView, SidePeekView } from "components/issues/peek-overview";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+
+type Props = {};
+
+export const IssuePeekOverview: React.FC<Props> = observer((props) => {
+  const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
+  const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
+
+  // router
+  const router = useRouter();
+  const { workspace_slug, project_slug, peekId, board } = router.query;
+  // store
+  const { issueDetails: issueDetailStore, issue: issueStore } = useMobxStore();
+
+  const issueDetails = issueDetailStore.peekId && peekId ? issueDetailStore.details[peekId.toString()] : undefined;
+
+  useEffect(() => {
+    if (workspace_slug && project_slug && peekId && issueStore.issues && issueStore.issues.length > 0) {
+      if (!issueDetails) {
+        issueDetailStore.fetchIssueDetails(workspace_slug.toString(), project_slug.toString(), peekId.toString());
+      }
+    }
+  }, [workspace_slug, project_slug, issueDetailStore, issueDetails, peekId, issueStore.issues]);
+
+  const handleClose = () => {
+    issueDetailStore.setPeekId(null);
+    router.replace(
+      {
+        pathname: `/${workspace_slug?.toString()}/${project_slug}`,
+        query: {
+          board,
+        },
+      },
+      undefined,
+      { shallow: true }
+    );
+  };
+
+  useEffect(() => {
+    if (peekId) {
+      if (issueDetailStore.peekMode === "side") {
+        setIsSidePeekOpen(true);
+        setIsModalPeekOpen(false);
+      } else {
+        setIsModalPeekOpen(true);
+        setIsSidePeekOpen(false);
+      }
+    } else {
+      setIsSidePeekOpen(false);
+      setIsModalPeekOpen(false);
+    }
+  }, [peekId, issueDetailStore.peekMode]);
+
+  return (
+    <>
+      <Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
+        <Dialog as="div" className="relative z-20" onClose={handleClose}>
+          <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
+            <Transition.Child
+              as={React.Fragment}
+              enter="transition-transform duration-300"
+              enterFrom="translate-x-full"
+              enterTo="translate-x-0"
+              leave="transition-transform duration-200"
+              leaveFrom="translate-x-0"
+              leaveTo="translate-x-full"
+            >
+              <Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-sm">
+                <SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition.Root>
+      <Transition.Root appear show={isModalPeekOpen} as={React.Fragment}>
+        <Dialog as="div" className="relative z-20" onClose={handleClose}>
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          </Transition.Child>
+          <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <Dialog.Panel
+                className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
+                  issueDetailStore.peekMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
+                }`}
+              >
+                {issueDetailStore.peekMode === "modal" && (
+                  <SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
+                )}
+                {issueDetailStore.peekMode === "full" && (
+                  <FullScreenPeekView handleClose={handleClose} issueDetails={issueDetails} />
+                )}
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition.Root>
+    </>
+  );
+});
diff --git a/apps/space/components/issues/peek-overview/side-peek-view.tsx b/apps/space/components/issues/peek-overview/side-peek-view.tsx
new file mode 100644
index 000000000..bacf83420
--- /dev/null
+++ b/apps/space/components/issues/peek-overview/side-peek-view.tsx
@@ -0,0 +1,55 @@
+import { observer } from "mobx-react-lite";
+// components
+import {
+  PeekOverviewHeader,
+  PeekOverviewIssueActivity,
+  PeekOverviewIssueDetails,
+  PeekOverviewIssueProperties,
+} from "components/issues/peek-overview";
+
+import { Loader } from "components/ui/loader";
+import { IIssue } from "types/issue";
+
+type Props = {
+  handleClose: () => void;
+  issueDetails: IIssue | undefined;
+};
+
+export const SidePeekView: React.FC<Props> = observer((props) => {
+  const { handleClose, issueDetails } = props;
+
+  return (
+    <div className="h-full w-full flex flex-col overflow-hidden">
+      <div className="w-full p-5">
+        <PeekOverviewHeader handleClose={handleClose} issueDetails={issueDetails} />
+      </div>
+      {issueDetails ? (
+        <div className="h-full w-full px-6 overflow-y-auto">
+          {/* issue title and description */}
+          <div className="w-full">
+            <PeekOverviewIssueDetails issueDetails={issueDetails} />
+          </div>
+          {/* issue properties */}
+          <div className="w-full mt-6">
+            <PeekOverviewIssueProperties issueDetails={issueDetails} />
+          </div>
+          {/* divider */}
+          <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
+          {/* issue activity/comments */}
+          <div className="w-full pb-5">
+            <PeekOverviewIssueActivity issueDetails={issueDetails} />
+          </div>
+        </div>
+      ) : (
+        <Loader className="px-6">
+          <Loader.Item height="30px" />
+          <div className="space-y-2 mt-3">
+            <Loader.Item height="20px" width="70%" />
+            <Loader.Item height="20px" width="60%" />
+            <Loader.Item height="20px" width="60%" />
+          </div>
+        </Loader>
+      )}
+    </div>
+  );
+});
diff --git a/apps/space/components/tiptap/bubble-menu/index.tsx b/apps/space/components/tiptap/bubble-menu/index.tsx
new file mode 100644
index 000000000..e68900782
--- /dev/null
+++ b/apps/space/components/tiptap/bubble-menu/index.tsx
@@ -0,0 +1,119 @@
+import { BubbleMenu, BubbleMenuProps } from "@tiptap/react";
+import { FC, useState } from "react";
+import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon } from "lucide-react";
+
+import { NodeSelector } from "./node-selector";
+import { LinkSelector } from "./link-selector";
+import { cn } from "../utils";
+
+export interface BubbleMenuItem {
+  name: string;
+  isActive: () => boolean;
+  command: () => void;
+  icon: typeof BoldIcon;
+}
+
+type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children">;
+
+export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
+  const items: BubbleMenuItem[] = [
+    {
+      name: "bold",
+      isActive: () => props.editor?.isActive("bold"),
+      command: () => props.editor?.chain().focus().toggleBold().run(),
+      icon: BoldIcon,
+    },
+    {
+      name: "italic",
+      isActive: () => props.editor?.isActive("italic"),
+      command: () => props.editor?.chain().focus().toggleItalic().run(),
+      icon: ItalicIcon,
+    },
+    {
+      name: "underline",
+      isActive: () => props.editor?.isActive("underline"),
+      command: () => props.editor?.chain().focus().toggleUnderline().run(),
+      icon: UnderlineIcon,
+    },
+    {
+      name: "strike",
+      isActive: () => props.editor?.isActive("strike"),
+      command: () => props.editor?.chain().focus().toggleStrike().run(),
+      icon: StrikethroughIcon,
+    },
+    {
+      name: "code",
+      isActive: () => props.editor?.isActive("code"),
+      command: () => props.editor?.chain().focus().toggleCode().run(),
+      icon: CodeIcon,
+    },
+  ];
+
+  const bubbleMenuProps: EditorBubbleMenuProps = {
+    ...props,
+    shouldShow: ({ editor }) => {
+      if (!editor.isEditable) {
+        return false;
+      }
+      if (editor.isActive("image")) {
+        return false;
+      }
+      return editor.view.state.selection.content().size > 0;
+    },
+    tippyOptions: {
+      moveTransition: "transform 0.15s ease-out",
+      onHidden: () => {
+        setIsNodeSelectorOpen(false);
+        setIsLinkSelectorOpen(false);
+      },
+    },
+  };
+
+  const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
+  const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
+
+  return (
+    <BubbleMenu
+      {...bubbleMenuProps}
+      className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
+    >
+      <NodeSelector
+        editor={props.editor!}
+        isOpen={isNodeSelectorOpen}
+        setIsOpen={() => {
+          setIsNodeSelectorOpen(!isNodeSelectorOpen);
+          setIsLinkSelectorOpen(false);
+        }}
+      />
+      <LinkSelector
+        editor={props.editor!!}
+        isOpen={isLinkSelectorOpen}
+        setIsOpen={() => {
+          setIsLinkSelectorOpen(!isLinkSelectorOpen);
+          setIsNodeSelectorOpen(false);
+        }}
+      />
+      <div className="flex">
+        {items.map((item, index) => (
+          <button
+            key={index}
+            type="button"
+            onClick={item.command}
+            className={cn(
+              "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
+              {
+                "text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
+              }
+            )}
+          >
+            <item.icon
+              className={cn("h-4 w-4", {
+                "text-custom-text-100": item.isActive(),
+              })}
+            />
+          </button>
+        ))}
+      </div>
+    </BubbleMenu>
+  );
+};
diff --git a/apps/space/components/tiptap/bubble-menu/link-selector.tsx b/apps/space/components/tiptap/bubble-menu/link-selector.tsx
new file mode 100644
index 000000000..1596870f7
--- /dev/null
+++ b/apps/space/components/tiptap/bubble-menu/link-selector.tsx
@@ -0,0 +1,90 @@
+import { Editor } from "@tiptap/core";
+import { Check, Trash } from "lucide-react";
+import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from "react";
+import { cn } from "../utils";
+import isValidHttpUrl from "./utils/link-validator";
+interface LinkSelectorProps {
+  editor: Editor;
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+
+export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const onLinkSubmit = useCallback(() => {
+    const input = inputRef.current;
+    const url = input?.value;
+    if (url && isValidHttpUrl(url)) {
+      editor.chain().focus().setLink({ href: url }).run();
+      setIsOpen(false);
+    }
+  }, [editor, inputRef, setIsOpen]);
+
+  useEffect(() => {
+    inputRef.current && inputRef.current?.focus();
+  });
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        className={cn(
+          "flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-300 hover:bg-custom-background-100 active:bg-custom-background-100",
+          { "bg-custom-background-100": isOpen }
+        )}
+        onClick={() => {
+          setIsOpen(!isOpen);
+        }}
+      >
+        <p className="text-base">↗</p>
+        <p
+          className={cn("underline underline-offset-4", {
+            "text-custom-text-100": editor.isActive("link"),
+          })}
+        >
+          Link
+        </p>
+      </button>
+      {isOpen && (
+        <div
+          className="fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 dow-xl animate-in fade-in slide-in-from-top-1"
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault(); onLinkSubmit();
+            }
+          }}
+        >
+          <input
+            ref={inputRef}
+            type="url"
+            placeholder="Paste a link"
+            className="flex-1 bg-custom-background-100 border-r border-custom-border-300 p-1 text-sm outline-none placeholder:text-custom-text-400"
+            defaultValue={editor.getAttributes("link").href || ""}
+          />
+          {editor.getAttributes("link").href ? (
+            <button
+              type="button"
+              className="flex items-center rounded-sm p-1 text-red-600 transition-all hover:bg-red-100 dark:hover:bg-red-800"
+              onClick={() => {
+                editor.chain().focus().unsetLink().run();
+                setIsOpen(false);
+              }}
+            >
+              <Trash className="h-4 w-4" />
+            </button>
+          ) : (
+            <button className="flex items-center rounded-sm p-1 text-custom-text-300 transition-all hover:bg-custom-background-90" type="button"
+              onClick={() => {
+                onLinkSubmit();
+              }}
+            >
+              <Check className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/space/components/tiptap/bubble-menu/node-selector.tsx b/apps/space/components/tiptap/bubble-menu/node-selector.tsx
new file mode 100644
index 000000000..f6f1f18dc
--- /dev/null
+++ b/apps/space/components/tiptap/bubble-menu/node-selector.tsx
@@ -0,0 +1,130 @@
+import { Editor } from "@tiptap/core";
+import {
+  Check,
+  ChevronDown,
+  Heading1,
+  Heading2,
+  Heading3,
+  TextQuote,
+  ListOrdered,
+  TextIcon,
+  Code,
+  CheckSquare,
+} from "lucide-react";
+import { Dispatch, FC, SetStateAction } from "react";
+
+import { BubbleMenuItem } from "../bubble-menu";
+import { cn } from "../utils";
+
+interface NodeSelectorProps {
+  editor: Editor;
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen }) => {
+  const items: BubbleMenuItem[] = [
+    {
+      name: "Text",
+      icon: TextIcon,
+      command: () => editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
+      isActive: () =>
+        editor.isActive("paragraph") &&
+        !editor.isActive("bulletList") &&
+        !editor.isActive("orderedList"),
+    },
+    {
+      name: "H1",
+      icon: Heading1,
+      command: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+      isActive: () => editor.isActive("heading", { level: 1 }),
+    },
+    {
+      name: "H2",
+      icon: Heading2,
+      command: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+      isActive: () => editor.isActive("heading", { level: 2 }),
+    },
+    {
+      name: "H3",
+      icon: Heading3,
+      command: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+      isActive: () => editor.isActive("heading", { level: 3 }),
+    },
+    {
+      name: "To-do List",
+      icon: CheckSquare,
+      command: () => editor.chain().focus().toggleTaskList().run(),
+      isActive: () => editor.isActive("taskItem"),
+    },
+    {
+      name: "Bullet List",
+      icon: ListOrdered,
+      command: () => editor.chain().focus().toggleBulletList().run(),
+      isActive: () => editor.isActive("bulletList"),
+    },
+    {
+      name: "Numbered List",
+      icon: ListOrdered,
+      command: () => editor.chain().focus().toggleOrderedList().run(),
+      isActive: () => editor.isActive("orderedList"),
+    },
+    {
+      name: "Quote",
+      icon: TextQuote,
+      command: () =>
+        editor.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
+      isActive: () => editor.isActive("blockquote"),
+    },
+    {
+      name: "Code",
+      icon: Code,
+      command: () => editor.chain().focus().toggleCodeBlock().run(),
+      isActive: () => editor.isActive("codeBlock"),
+    },
+  ];
+
+  const activeItem = items.filter((item) => item.isActive()).pop() ?? {
+    name: "Multiple",
+  };
+
+  return (
+    <div className="relative h-full">
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5"
+      >
+        <span>{activeItem?.name}</span>
+        <ChevronDown className="h-4 w-4" />
+      </button>
+
+      {isOpen && (
+        <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
+          {items.map((item, index) => (
+            <button
+              key={index}
+              type="button"
+              onClick={() => {
+                item.command();
+                setIsOpen(false);
+              }}
+              className={cn(
+                "flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100",
+                { "bg-custom-primary-100/5 text-custom-text-100": activeItem.name === item.name }
+              )}
+            >
+              <div className="flex items-center space-x-2">
+                <div className="rounded-sm border border-custom-border-300 p-1">
+                  <item.icon className="h-3 w-3" />
+                </div>
+                <span>{item.name}</span>
+              </div>
+              {activeItem.name === item.name && <Check className="h-4 w-4" />}
+            </button>
+          ))}
+        </section>
+      )}
+    </div>
+  );
+};
diff --git a/apps/space/components/tiptap/bubble-menu/utils/link-validator.tsx b/apps/space/components/tiptap/bubble-menu/utils/link-validator.tsx
new file mode 100644
index 000000000..5b05811d6
--- /dev/null
+++ b/apps/space/components/tiptap/bubble-menu/utils/link-validator.tsx
@@ -0,0 +1,12 @@
+export default function isValidHttpUrl(string: string): boolean {
+  let url;
+
+  try {
+    url = new URL(string);
+  } catch (_) {
+    return false;
+  }
+
+  return url.protocol === "http:" || url.protocol === "https:";
+}
+
diff --git a/apps/space/components/tiptap/extensions/image-resize.tsx b/apps/space/components/tiptap/extensions/image-resize.tsx
new file mode 100644
index 000000000..7b2d1a2d3
--- /dev/null
+++ b/apps/space/components/tiptap/extensions/image-resize.tsx
@@ -0,0 +1,57 @@
+import { Editor } from "@tiptap/react";
+import Moveable from "react-moveable";
+
+export const ImageResizer = ({ editor }: { editor: Editor }) => {
+  const updateMediaSize = () => {
+    const imageInfo = document.querySelector(
+      ".ProseMirror-selectednode",
+    ) as HTMLImageElement;
+    if (imageInfo) {
+      const selection = editor.state.selection;
+      editor.commands.setImage({
+        src: imageInfo.src,
+        width: Number(imageInfo.style.width.replace("px", "")),
+        height: Number(imageInfo.style.height.replace("px", "")),
+      } as any);
+      editor.commands.setNodeSelection(selection.from);
+    }
+  };
+
+  return (
+    <>
+      <Moveable
+        target={document.querySelector(".ProseMirror-selectednode") as any}
+        container={null}
+        origin={false}
+        edge={false}
+        throttleDrag={0}
+        keepRatio={true}
+        resizable={true}
+        throttleResize={0}
+        onResize={({
+          target,
+          width,
+          height,
+          delta,
+        }:
+          any) => {
+          delta[0] && (target!.style.width = `${width}px`);
+          delta[1] && (target!.style.height = `${height}px`);
+        }}
+        onResizeEnd={() => {
+          updateMediaSize();
+        }}
+        scalable={true}
+        renderDirections={["w", "e"]}
+        onScale={({
+          target,
+          transform,
+        }:
+          any) => {
+          target!.style.transform = transform;
+        }}
+      />
+    </>
+  );
+};
+
diff --git a/apps/space/components/tiptap/extensions/index.tsx b/apps/space/components/tiptap/extensions/index.tsx
new file mode 100644
index 000000000..2c5ffd10a
--- /dev/null
+++ b/apps/space/components/tiptap/extensions/index.tsx
@@ -0,0 +1,137 @@
+import StarterKit from "@tiptap/starter-kit";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import TiptapLink from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import TiptapUnderline from "@tiptap/extension-underline";
+import TextStyle from "@tiptap/extension-text-style";
+import { Color } from "@tiptap/extension-color";
+import TaskItem from "@tiptap/extension-task-item";
+import TaskList from "@tiptap/extension-task-list";
+import { Markdown } from "tiptap-markdown";
+import Highlight from "@tiptap/extension-highlight";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import { lowlight } from "lowlight/lib/core";
+import SlashCommand from "../slash-command";
+import { InputRule } from "@tiptap/core";
+
+import ts from "highlight.js/lib/languages/typescript";
+
+import "highlight.js/styles/github-dark.css";
+import UniqueID from "@tiptap-pro/extension-unique-id";
+import UpdatedImage from "./updated-image";
+import isValidHttpUrl from "../bubble-menu/utils/link-validator";
+
+lowlight.registerLanguage("ts", ts);
+
+export const TiptapExtensions = (workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void) => [
+  StarterKit.configure({
+    bulletList: {
+      HTMLAttributes: {
+        class: "list-disc list-outside leading-3 -mt-2",
+      },
+    },
+    orderedList: {
+      HTMLAttributes: {
+        class: "list-decimal list-outside leading-3 -mt-2",
+      },
+    },
+    listItem: {
+      HTMLAttributes: {
+        class: "leading-normal -mb-2",
+      },
+    },
+    blockquote: {
+      HTMLAttributes: {
+        class: "border-l-4 border-custom-border-300",
+      },
+    },
+    code: {
+      HTMLAttributes: {
+        class:
+          "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
+        spellcheck: "false",
+      },
+    },
+    codeBlock: false,
+    horizontalRule: false,
+    dropcursor: {
+      color: "#DBEAFE",
+      width: 2,
+    },
+    gapcursor: false,
+  }),
+  CodeBlockLowlight.configure({
+    lowlight,
+  }),
+  HorizontalRule.extend({
+    addInputRules() {
+      return [
+        new InputRule({
+          find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+          handler: ({ state, range, commands }) => {
+            commands.splitBlock();
+
+            const attributes = {};
+            const { tr } = state;
+            const start = range.from;
+            const end = range.to;
+            // @ts-ignore
+            tr.replaceWith(start - 1, end, this.type.create(attributes));
+          },
+        }),
+      ];
+    },
+  }).configure({
+    HTMLAttributes: {
+      class: "mb-6 border-t border-custom-border-300",
+    },
+  }),
+  TiptapLink.configure({
+    protocols: ["http", "https"],
+    validate: (url) => isValidHttpUrl(url),
+    HTMLAttributes: {
+      class:
+        "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
+    },
+  }),
+  UpdatedImage.configure({
+    HTMLAttributes: {
+      class: "rounded-lg border border-custom-border-300",
+    },
+  }),
+  Placeholder.configure({
+    placeholder: ({ node }) => {
+      if (node.type.name === "heading") {
+        return `Heading ${node.attrs.level}`;
+      }
+
+      return "Press '/' for commands...";
+    },
+    includeChildren: true,
+  }),
+  UniqueID.configure({
+    types: ["image"],
+  }),
+  SlashCommand(workspaceSlug, setIsSubmitting),
+  TiptapUnderline,
+  TextStyle,
+  Color,
+  Highlight.configure({
+    multicolor: true,
+  }),
+  TaskList.configure({
+    HTMLAttributes: {
+      class: "not-prose pl-2",
+    },
+  }),
+  TaskItem.configure({
+    HTMLAttributes: {
+      class: "flex items-start my-4",
+    },
+    nested: true,
+  }),
+  Markdown.configure({
+    html: true,
+    transformCopiedText: true,
+  }),
+];
diff --git a/apps/space/components/tiptap/extensions/updated-image.tsx b/apps/space/components/tiptap/extensions/updated-image.tsx
new file mode 100644
index 000000000..01648dcd7
--- /dev/null
+++ b/apps/space/components/tiptap/extensions/updated-image.tsx
@@ -0,0 +1,22 @@
+import Image from "@tiptap/extension-image";
+import TrackImageDeletionPlugin from "../plugins/delete-image";
+import UploadImagesPlugin from "../plugins/upload-image";
+
+const UpdatedImage = Image.extend({
+  addProseMirrorPlugins() {
+    return [UploadImagesPlugin(), TrackImageDeletionPlugin()];
+  },
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      width: {
+        default: '35%',
+      },
+      height: {
+        default: null,
+      },
+    };
+  },
+});
+
+export default UpdatedImage;
diff --git a/apps/space/components/tiptap/index.tsx b/apps/space/components/tiptap/index.tsx
new file mode 100644
index 000000000..44dcea516
--- /dev/null
+++ b/apps/space/components/tiptap/index.tsx
@@ -0,0 +1,113 @@
+import { useImperativeHandle, useRef, forwardRef, useEffect } from "react";
+import { useEditor, EditorContent, Editor } from "@tiptap/react";
+import { useDebouncedCallback } from "use-debounce";
+// components
+import { EditorBubbleMenu } from "./bubble-menu";
+import { TiptapExtensions } from "./extensions";
+import { TiptapEditorProps } from "./props";
+import { ImageResizer } from "./extensions/image-resize";
+
+export interface ITipTapRichTextEditor {
+  value: string;
+  noBorder?: boolean;
+  borderOnFocus?: boolean;
+  customClassName?: string;
+  editorContentCustomClassNames?: string;
+  onChange?: (json: any, html: string) => void;
+  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
+  setShouldShowAlert?: (showAlert: boolean) => void;
+  workspaceSlug: string;
+  editable?: boolean;
+  forwardedRef?: any;
+  debouncedUpdatesEnabled?: boolean;
+}
+
+const Tiptap = (props: ITipTapRichTextEditor) => {
+  const {
+    onChange,
+    debouncedUpdatesEnabled,
+    forwardedRef,
+    editable,
+    setIsSubmitting,
+    setShouldShowAlert,
+    editorContentCustomClassNames,
+    value,
+    noBorder,
+    workspaceSlug,
+    borderOnFocus,
+    customClassName,
+  } = props;
+  const editor = useEditor({
+    editable: editable ?? true,
+    editorProps: TiptapEditorProps(workspaceSlug, setIsSubmitting),
+    extensions: TiptapExtensions(workspaceSlug, setIsSubmitting),
+    content: value,
+    onUpdate: async ({ editor }) => {
+      // for instant feedback loop
+      setIsSubmitting?.("submitting");
+      setShouldShowAlert?.(true);
+      if (debouncedUpdatesEnabled) {
+        debouncedUpdates({ onChange, editor });
+      } else {
+        onChange?.(editor.getJSON(), editor.getHTML());
+      }
+    },
+  });
+
+  useEffect(() => {
+    if (editor) {
+      editor.commands.setContent(value);
+    }
+  }, [value]);
+
+  const editorRef: React.MutableRefObject<Editor | null> = useRef(null);
+
+  useImperativeHandle(forwardedRef, () => ({
+    clearEditor: () => {
+      editorRef.current?.commands.clearContent();
+    },
+    setEditorValue: (content: string) => {
+      editorRef.current?.commands.setContent(content);
+    },
+  }));
+
+  const debouncedUpdates = useDebouncedCallback(async ({ onChange, editor }) => {
+    setTimeout(async () => {
+      if (onChange) {
+        onChange(editor.getJSON(), editor.getHTML());
+      }
+    }, 500);
+  }, 1000);
+
+  const editorClassNames = `relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md
+      ${noBorder ? "" : "border border-custom-border-200"} ${
+    borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
+  } ${customClassName}`;
+
+  if (!editor) return null;
+  editorRef.current = editor;
+
+  return (
+    <div
+      id="tiptap-container"
+      onClick={() => {
+        editor?.chain().focus().run();
+      }}
+      className={`tiptap-editor-container cursor-text ${editorClassNames}`}
+    >
+      {editor && <EditorBubbleMenu editor={editor} />}
+      <div className={`${editorContentCustomClassNames}`}>
+        <EditorContent editor={editor} />
+        {editor?.isActive("image") && <ImageResizer editor={editor} />}
+      </div>
+    </div>
+  );
+};
+
+const TipTapEditor = forwardRef<ITipTapRichTextEditor, ITipTapRichTextEditor>((props, ref) => (
+  <Tiptap {...props} forwardedRef={ref} />
+));
+
+TipTapEditor.displayName = "TipTapEditor";
+
+export { TipTapEditor };
diff --git a/apps/space/components/tiptap/plugins/delete-image.tsx b/apps/space/components/tiptap/plugins/delete-image.tsx
new file mode 100644
index 000000000..57ab65c63
--- /dev/null
+++ b/apps/space/components/tiptap/plugins/delete-image.tsx
@@ -0,0 +1,56 @@
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Node as ProseMirrorNode } from '@tiptap/pm/model';
+import fileService from "services/file.service";
+
+const deleteKey = new PluginKey("delete-image");
+
+const TrackImageDeletionPlugin = () =>
+  new Plugin({
+    key: deleteKey,
+    appendTransaction: (transactions, oldState, newState) => {
+      transactions.forEach((transaction) => {
+        if (!transaction.docChanged) return;
+
+        const removedImages: ProseMirrorNode[] = [];
+
+        oldState.doc.descendants((oldNode, oldPos) => {
+          if (oldNode.type.name !== 'image') return;
+
+          if (!newState.doc.resolve(oldPos).parent) return;
+          const newNode = newState.doc.nodeAt(oldPos);
+
+          // Check if the node has been deleted or replaced
+          if (!newNode || newNode.type.name !== 'image') {
+            // Check if the node still exists elsewhere in the document
+            let nodeExists = false;
+            newState.doc.descendants((node) => {
+              if (node.attrs.id === oldNode.attrs.id) {
+                nodeExists = true;
+              }
+            });
+
+            if (!nodeExists) {
+              removedImages.push(oldNode as ProseMirrorNode);
+            }
+          }
+        });
+
+        removedImages.forEach((node) => {
+          const src = node.attrs.src;
+          onNodeDeleted(src);
+        });
+      });
+
+      return null;
+    },
+  });
+
+export default TrackImageDeletionPlugin;
+
+async function onNodeDeleted(src: string) {
+  const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
+  const resStatus = await fileService.deleteImage(assetUrlWithWorkspaceId);
+  if (resStatus === 204) {
+    console.log("Image deleted successfully");
+  }
+}
diff --git a/apps/space/components/tiptap/plugins/upload-image.tsx b/apps/space/components/tiptap/plugins/upload-image.tsx
new file mode 100644
index 000000000..0657bc82b
--- /dev/null
+++ b/apps/space/components/tiptap/plugins/upload-image.tsx
@@ -0,0 +1,127 @@
+// @ts-nocheck
+import { EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet, EditorView } from "@tiptap/pm/view";
+import fileService from "services/file.service";
+
+const uploadKey = new PluginKey("upload-image");
+
+const UploadImagesPlugin = () =>
+  new Plugin({
+    key: uploadKey,
+    state: {
+      init() {
+        return DecorationSet.empty;
+      },
+      apply(tr, set) {
+        set = set.map(tr.mapping, tr.doc);
+        // See if the transaction adds or removes any placeholders
+        const action = tr.getMeta(uploadKey);
+        if (action && action.add) {
+          const { id, pos, src } = action.add;
+
+          const placeholder = document.createElement("div");
+          placeholder.setAttribute("class", "img-placeholder");
+          const image = document.createElement("img");
+          image.setAttribute(
+            "class",
+            "opacity-10 rounded-lg border border-custom-border-300",
+          );
+          image.src = src;
+          placeholder.appendChild(image);
+          const deco = Decoration.widget(pos + 1, placeholder, {
+            id,
+          });
+          set = set.add(tr.doc, [deco]);
+        } else if (action && action.remove) {
+          set = set.remove(set.find(undefined, undefined, (spec) => spec.id == action.remove.id));
+        }
+        return set;
+      },
+    },
+    props: {
+      decorations(state) {
+        return this.getState(state);
+      },
+    },
+  });
+
+export default UploadImagesPlugin;
+
+function findPlaceholder(state: EditorState, id: {}) {
+  const decos = uploadKey.getState(state);
+  const found = decos.find(
+    undefined,
+    undefined,
+    (spec: { id: number | undefined }) => spec.id == id
+  );
+  return found.length ? found[0].from : null;
+}
+
+export async function startImageUpload(file: File, view: EditorView, pos: number, workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void) {
+  if (!file.type.includes("image/")) {
+    return;
+  } else if (file.size / 1024 / 1024 > 20) {
+    return;
+  }
+
+  const id = {};
+
+  const tr = view.state.tr;
+  if (!tr.selection.empty) tr.deleteSelection();
+
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => {
+    tr.setMeta(uploadKey, {
+      add: {
+        id,
+        pos,
+        src: reader.result,
+      },
+    });
+    view.dispatch(tr);
+  };
+
+  if (!workspaceSlug) {
+    return;
+  }
+  setIsSubmitting?.("submitting")
+  const src = await UploadImageHandler(file, workspaceSlug);
+  const { schema } = view.state;
+  pos = findPlaceholder(view.state, id);
+
+  if (pos == null) return;
+  const imageSrc = typeof src === "object" ? reader.result : src;
+
+  const node = schema.nodes.image.create({ src: imageSrc });
+  const transaction = view.state.tr
+    .replaceWith(pos, pos, node)
+    .setMeta(uploadKey, { remove: { id } });
+  view.dispatch(transaction);
+}
+
+const UploadImageHandler = (file: File, workspaceSlug: string): Promise<string> => {
+  if (!workspaceSlug) {
+    return Promise.reject("Workspace slug is missing");
+  }
+  try {
+    const formData = new FormData();
+    formData.append("asset", file);
+    formData.append("attributes", JSON.stringify({}));
+
+    return new Promise(async (resolve, reject) => {
+      const imageUrl = await fileService
+        .uploadFile(workspaceSlug, formData)
+        .then((response) => response.asset);
+
+      const image = new Image();
+      image.src = imageUrl;
+      image.onload = () => {
+        resolve(imageUrl);
+      };
+    });
+  } catch (error) {
+    console.log(error);
+    return Promise.reject(error);
+  }
+};
diff --git a/apps/space/components/tiptap/props.tsx b/apps/space/components/tiptap/props.tsx
new file mode 100644
index 000000000..d50fc29b0
--- /dev/null
+++ b/apps/space/components/tiptap/props.tsx
@@ -0,0 +1,56 @@
+import { EditorProps } from "@tiptap/pm/view";
+import { startImageUpload } from "./plugins/upload-image";
+
+export function TiptapEditorProps(workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void): EditorProps {
+  return {
+    attributes: {
+      class: `prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none`,
+    },
+    handleDOMEvents: {
+      keydown: (_view, event) => {
+        // prevent default event listeners from firing when slash command is active
+        if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
+          const slashCommand = document.querySelector("#slash-command");
+          if (slashCommand) {
+            return true;
+          }
+        }
+      },
+    },
+    handlePaste: (view, event) => {
+      if (
+        event.clipboardData &&
+        event.clipboardData.files &&
+        event.clipboardData.files[0]
+      ) {
+        event.preventDefault();
+        const file = event.clipboardData.files[0];
+        const pos = view.state.selection.from;
+        startImageUpload(file, view, pos, workspaceSlug, setIsSubmitting);
+        return true;
+      }
+      return false;
+    },
+    handleDrop: (view, event, _slice, moved) => {
+      if (
+        !moved &&
+        event.dataTransfer &&
+        event.dataTransfer.files &&
+        event.dataTransfer.files[0]
+      ) {
+        event.preventDefault();
+        const file = event.dataTransfer.files[0];
+        const coordinates = view.posAtCoords({
+          left: event.clientX,
+          top: event.clientY,
+        });
+        // here we deduct 1 from the pos or else the image will create an extra node
+        if (coordinates) {
+          startImageUpload(file, view, coordinates.pos - 1, workspaceSlug, setIsSubmitting);
+        }
+        return true;
+      }
+      return false;
+    },
+  };
+}
diff --git a/apps/space/components/tiptap/slash-command/index.tsx b/apps/space/components/tiptap/slash-command/index.tsx
new file mode 100644
index 000000000..38f5c9c0a
--- /dev/null
+++ b/apps/space/components/tiptap/slash-command/index.tsx
@@ -0,0 +1,339 @@
+import React, { useState, useEffect, useCallback, ReactNode, useRef, useLayoutEffect } from "react";
+import { Editor, Range, Extension } from "@tiptap/core";
+import Suggestion from "@tiptap/suggestion";
+import { ReactRenderer } from "@tiptap/react";
+import tippy from "tippy.js";
+import {
+  Heading1,
+  Heading2,
+  Heading3,
+  List,
+  ListOrdered,
+  Text,
+  TextQuote,
+  Code,
+  MinusSquare,
+  CheckSquare,
+  ImageIcon,
+} from "lucide-react";
+import { startImageUpload } from "../plugins/upload-image";
+import { cn } from "../utils";
+
+interface CommandItemProps {
+  title: string;
+  description: string;
+  icon: ReactNode;
+}
+
+interface CommandProps {
+  editor: Editor;
+  range: Range;
+}
+
+const Command = Extension.create({
+  name: "slash-command",
+  addOptions() {
+    return {
+      suggestion: {
+        char: "/",
+        command: ({ editor, range, props }: { editor: Editor; range: Range; props: any }) => {
+          props.command({ editor, range });
+        },
+      },
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        ...this.options.suggestion,
+      }),
+    ];
+  },
+});
+
+const getSuggestionItems = (workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void) => ({ query }: { query: string }) =>
+  [
+    {
+      title: "Text",
+      description: "Just start typing with plain text.",
+      searchTerms: ["p", "paragraph"],
+      icon: <Text size={18} />,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
+      },
+    },
+    {
+      title: "Heading 1",
+      description: "Big section heading.",
+      searchTerms: ["title", "big", "large"],
+      icon: <Heading1 size={18} />,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
+      },
+    },
+    {
+      title: "Heading 2",
+      description: "Medium section heading.",
+      searchTerms: ["subtitle", "medium"],
+      icon: <Heading2 size={18} />,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
+      },
+    },
+    {
+      title: "Heading 3",
+      description: "Small section heading.",
+      searchTerms: ["subtitle", "small"],
+      icon: <Heading3 size={18} />,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
+      },
+    },
+    {
+      title: "To-do List",
+      description: "Track tasks with a to-do list.",
+      searchTerms: ["todo", "task", "list", "check", "checkbox"],
+      icon: <CheckSquare size={18} />,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).toggleTaskList().run();
+      },
+    },
+    {
+      title: "Bullet List",
+      description: "Create a simple bullet list.",
+      searchTerms: ["unordered", "point"],
+      icon: <List size={18} />,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).toggleBulletList().run();
+      },
+    },
+    {
+      title: "Divider",
+      description: "Visually divide blocks",
+      searchTerms: ["line", "divider", "horizontal", "rule", "separate"],
+      icon: <MinusSquare size={18} />,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+      },
+    },
+    {
+      title: "Numbered List",
+      description: "Create a list with numbering.",
+      searchTerms: ["ordered"],
+      icon: <ListOrdered size={18} />,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+      },
+    },
+    {
+      title: "Quote",
+      description: "Capture a quote.",
+      searchTerms: ["blockquote"],
+      icon: <TextQuote size={18} />,
+      command: ({ editor, range }: CommandProps) =>
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .toggleNode("paragraph", "paragraph")
+          .toggleBlockquote()
+          .run(),
+    },
+    {
+      title: "Code",
+      description: "Capture a code snippet.",
+      searchTerms: ["codeblock"],
+      icon: <Code size={18} />,
+      command: ({ editor, range }: CommandProps) =>
+        editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
+    },
+    {
+      title: "Image",
+      description: "Upload an image from your computer.",
+      searchTerms: ["photo", "picture", "media"],
+      icon: <ImageIcon size={18} />,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).run();
+        // upload image
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "image/*";
+        input.onchange = async () => {
+          if (input.files?.length) {
+            const file = input.files[0];
+            const pos = editor.view.state.selection.from;
+            startImageUpload(file, editor.view, pos, workspaceSlug, setIsSubmitting);
+          }
+        };
+        input.click();
+      },
+    },
+  ].filter((item) => {
+    if (typeof query === "string" && query.length > 0) {
+      const search = query.toLowerCase();
+      return (
+        item.title.toLowerCase().includes(search) ||
+        item.description.toLowerCase().includes(search) ||
+        (item.searchTerms && item.searchTerms.some((term: string) => term.includes(search)))
+      );
+    }
+    return true;
+  });
+
+export const updateScrollView = (container: HTMLElement, item: HTMLElement) => {
+  const containerHeight = container.offsetHeight;
+  const itemHeight = item ? item.offsetHeight : 0;
+
+  const top = item.offsetTop;
+  const bottom = top + itemHeight;
+
+  if (top < container.scrollTop) {
+    container.scrollTop -= container.scrollTop - top + 5;
+  } else if (bottom > containerHeight + container.scrollTop) {
+    container.scrollTop += bottom - containerHeight - container.scrollTop + 5;
+  }
+};
+
+const CommandList = ({
+  items,
+  command,
+}: {
+  items: CommandItemProps[];
+  command: any;
+  editor: any;
+  range: any;
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const selectItem = useCallback(
+    (index: number) => {
+      const item = items[index];
+      if (item) {
+        command(item);
+      }
+    },
+    [command, items]
+  );
+
+  useEffect(() => {
+    const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (navigationKeys.includes(e.key)) {
+        e.preventDefault();
+        if (e.key === "ArrowUp") {
+          setSelectedIndex((selectedIndex + items.length - 1) % items.length);
+          return true;
+        }
+        if (e.key === "ArrowDown") {
+          setSelectedIndex((selectedIndex + 1) % items.length);
+          return true;
+        }
+        if (e.key === "Enter") {
+          selectItem(selectedIndex);
+          return true;
+        }
+        return false;
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [items, selectedIndex, setSelectedIndex, selectItem]);
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [items]);
+
+  const commandListContainer = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const container = commandListContainer?.current;
+
+    const item = container?.children[selectedIndex] as HTMLElement;
+
+    if (item && container) updateScrollView(container, item);
+  }, [selectedIndex]);
+
+  return items.length > 0 ? (
+    <div
+      id="slash-command"
+      ref={commandListContainer}
+      className="z-50 fixed h-auto max-h-[330px] w-72 overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-100 px-1 py-2 shadow-md transition-all"
+    >
+      {items.map((item: CommandItemProps, index: number) => (
+        <button
+          className={cn(
+            `flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100`,
+            { "bg-custom-primary-100/5  text-custom-text-100": index === selectedIndex }
+          )}
+          key={index}
+          onClick={() => selectItem(index)}
+        >
+          <div>
+            <p className="font-medium">{item.title}</p>
+            <p className="text-xs text-custom-text-300">{item.description}</p>
+          </div>
+        </button>
+      ))}
+    </div>
+  ) : null;
+};
+
+const renderItems = () => {
+  let component: ReactRenderer | null = null;
+  let popup: any | null = null;
+
+  return {
+    onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
+      component = new ReactRenderer(CommandList, {
+        props,
+        editor: props.editor,
+      });
+
+      // @ts-ignore
+      popup = tippy("body", {
+        getReferenceClientRect: props.clientRect,
+        appendTo: () => document.querySelector("#tiptap-container"),
+        content: component.element,
+        showOnCreate: true,
+        interactive: true,
+        trigger: "manual",
+        placement: "bottom-start",
+      });
+    },
+    onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
+      component?.updateProps(props);
+
+      popup &&
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect,
+        });
+    },
+    onKeyDown: (props: { event: KeyboardEvent }) => {
+      if (props.event.key === "Escape") {
+        popup?.[0].hide();
+
+        return true;
+      }
+
+      // @ts-ignore
+      return component?.ref?.onKeyDown(props);
+    },
+    onExit: () => {
+      popup?.[0].destroy();
+      component?.destroy();
+    },
+  };
+};
+
+export const SlashCommand = (workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void) =>
+  Command.configure({
+    suggestion: {
+      items: getSuggestionItems(workspaceSlug, setIsSubmitting),
+      render: renderItems,
+    },
+  });
+
+export default SlashCommand;
diff --git a/apps/space/components/tiptap/utils.ts b/apps/space/components/tiptap/utils.ts
new file mode 100644
index 000000000..a5ef19350
--- /dev/null
+++ b/apps/space/components/tiptap/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/apps/space/components/ui/dropdown.tsx b/apps/space/components/ui/dropdown.tsx
new file mode 100644
index 000000000..d1791de00
--- /dev/null
+++ b/apps/space/components/ui/dropdown.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { Fragment, useState, useRef } from "react";
+
+// next
+import Link from "next/link";
+
+// headless
+import { Popover, Transition } from "@headlessui/react";
+import { ChevronLeftIcon, CheckIcon } from "@heroicons/react/20/solid";
+
+// hooks
+import useOutSideClick from "hooks/use-outside-click";
+
+type ItemOptionType = {
+  display: React.ReactNode;
+  as?: "button" | "link" | "div";
+  href?: string;
+  isSelected?: boolean;
+  onClick?: () => void;
+  children?: ItemOptionType[] | null;
+};
+
+type DropdownItemProps = {
+  item: ItemOptionType;
+};
+
+type DropDownListProps = {
+  open: boolean;
+  handleClose?: () => void;
+  items: ItemOptionType[];
+};
+
+type DropdownProps = {
+  button: React.ReactNode | (() => React.ReactNode);
+  items: ItemOptionType[];
+};
+
+const DropdownList: React.FC<DropDownListProps> = (props) => {
+  const { open, items, handleClose } = props;
+
+  const ref = useRef(null);
+
+  useOutSideClick(ref, () => {
+    if (handleClose) handleClose();
+  });
+
+  return (
+    <Popover className="absolute -left-1">
+      <Transition
+        show={open}
+        as={Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <Popover.Panel
+          ref={ref}
+          className="absolute left-1/2 -translate-x-full z-10 mt-1 max-w-[9rem] origin-top-right select-none rounded-md bg-custom-background-90 border border-custom-border-300 text-xs shadow-lg focus:outline-none"
+        >
+          <div className="w-full text-sm rounded-md shadow-lg">
+            {items.map((item, index) => (
+              <DropdownItem key={index} item={item} />
+            ))}
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  );
+};
+
+const DropdownItem: React.FC<DropdownItemProps> = (props) => {
+  const { item } = props;
+  const { display, children, as: as_, href, onClick, isSelected } = item;
+
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="w-full group relative flex gap-x-6 rounded-lg p-1">
+      {(!as_ || as_ === "button" || as_ === "div") && (
+        <button
+          type="button"
+          onClick={() => {
+            if (!children) {
+              if (onClick) onClick();
+              return;
+            }
+            setOpen((prev) => !prev);
+          }}
+          className={`w-full flex items-center gap-1 rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80 ${
+            isSelected ? "bg-custom-background-80" : ""
+          }`}
+        >
+          {children && <ChevronLeftIcon className="h-5 w-5 transition-transform transform" />}
+          {!children && <span />}
+          <span className="truncate text-xs">{display}</span>
+          <CheckIcon className={`h-3.5 w-3.5 opacity-0 ${isSelected ? "opacity-100" : ""}`} />
+        </button>
+      )}
+
+      {as_ === "link" && <Link href={href || "#"}>{display}</Link>}
+
+      {children && <DropdownList open={open} handleClose={() => setOpen(false)} items={children} />}
+    </div>
+  );
+};
+
+const Dropdown: React.FC<DropdownProps> = (props) => {
+  const { button, items } = props;
+
+  return (
+    <Popover className="relative">
+      {({ open }) => (
+        <>
+          <Popover.Button
+            className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-200 px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none hover:text-custom-text-100 hover:bg-custom-background-90 ${
+              open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
+            }`}
+          >
+            {typeof button === "function" ? button() : button}
+          </Popover.Button>
+
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel className="absolute left-full -translate-x-full z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-custom-background-90 border border-custom-border-300 text-xs shadow-lg focus:outline-none">
+              <div className="w-full">
+                {items.map((item, index) => (
+                  <DropdownItem key={index} item={item} />
+                ))}
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
+};
+
+export { Dropdown };
diff --git a/apps/space/components/ui/icon.tsx b/apps/space/components/ui/icon.tsx
new file mode 100644
index 000000000..418186291
--- /dev/null
+++ b/apps/space/components/ui/icon.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+
+type Props = {
+  iconName: string;
+  className?: string;
+};
+
+export const Icon: React.FC<Props> = ({ iconName, className = "" }) => (
+  <span className={`material-symbols-rounded text-sm leading-5 font-light ${className}`}>{iconName}</span>
+);
diff --git a/apps/space/components/ui/index.ts b/apps/space/components/ui/index.ts
new file mode 100644
index 000000000..e44096909
--- /dev/null
+++ b/apps/space/components/ui/index.ts
@@ -0,0 +1,8 @@
+export * from "./dropdown";
+export * from "./input";
+export * from "./loader";
+export * from "./primary-button";
+export * from "./secondary-button";
+export * from "./icon";
+export * from "./reaction-selector";
+export * from "./tooltip";
diff --git a/apps/space/components/ui/input.tsx b/apps/space/components/ui/input.tsx
new file mode 100644
index 000000000..b6be82ae5
--- /dev/null
+++ b/apps/space/components/ui/input.tsx
@@ -0,0 +1,37 @@
+import React, { forwardRef, Ref } from "react";
+
+// types
+interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
+  mode?: "primary" | "transparent" | "trueTransparent";
+  error?: boolean;
+  inputSize?: "rg" | "lg";
+  fullWidth?: boolean;
+}
+
+export const Input = forwardRef((props: Props, ref: Ref<HTMLInputElement>) => {
+  const { mode = "primary", error, className = "", type, fullWidth = true, id, inputSize = "rg", ...rest } = props;
+
+  return (
+    <input
+      id={id}
+      ref={ref}
+      type={type}
+      className={`block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${
+        mode === "primary"
+          ? "rounded-md border border-custom-border-200"
+          : mode === "transparent"
+          ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
+          : mode === "trueTransparent"
+          ? "rounded border-none bg-transparent ring-0"
+          : ""
+      } ${error ? "border-red-500" : ""} ${error && mode === "primary" ? "bg-red-500/20" : ""} ${
+        fullWidth ? "w-full" : ""
+      } ${inputSize === "rg" ? "px-3 py-2" : inputSize === "lg" ? "p-3" : ""} ${className}`}
+      {...rest}
+    />
+  );
+});
+
+Input.displayName = "Input";
+
+export default Input;
diff --git a/apps/space/components/ui/loader.tsx b/apps/space/components/ui/loader.tsx
new file mode 100644
index 000000000..b9d13883a
--- /dev/null
+++ b/apps/space/components/ui/loader.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const Loader = ({ children, className = "" }: Props) => (
+  <div className={`${className} animate-pulse`} role="status">
+    {children}
+  </div>
+);
+
+type ItemProps = {
+  height?: string;
+  width?: string;
+};
+
+const Item: React.FC<ItemProps> = ({ height = "auto", width = "auto" }) => (
+  <div className="rounded-md bg-custom-background-80" style={{ height: height, width: width }} />
+);
+
+Loader.Item = Item;
+
+export { Loader };
diff --git a/apps/space/components/ui/primary-button.tsx b/apps/space/components/ui/primary-button.tsx
new file mode 100644
index 000000000..b3e1b82ee
--- /dev/null
+++ b/apps/space/components/ui/primary-button.tsx
@@ -0,0 +1,35 @@
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: "sm" | "md" | "lg";
+  outline?: boolean;
+  loading?: boolean;
+}
+
+export const PrimaryButton: React.FC<ButtonProps> = ({
+  children,
+  className = "",
+  onClick,
+  type = "button",
+  disabled = false,
+  loading = false,
+  size = "sm",
+  outline = false,
+}) => (
+  <button
+    type={type}
+    className={`${className} border border-custom-primary font-medium duration-300 ${
+      size === "sm"
+        ? "rounded px-3 py-2 text-xs"
+        : size === "md"
+        ? "rounded-md px-3.5 py-2 text-sm"
+        : "rounded-lg px-4 py-2 text-base"
+    } ${disabled ? "cursor-not-allowed opacity-70 hover:opacity-70" : ""} ${
+      outline
+        ? "bg-transparent text-custom-primary hover:bg-custom-primary hover:text-white"
+        : "text-white bg-custom-primary hover:border-opacity-90 hover:bg-opacity-90"
+    }  ${loading ? "cursor-wait" : ""}`}
+    onClick={onClick}
+    disabled={disabled || loading}
+  >
+    {children}
+  </button>
+);
diff --git a/apps/space/components/ui/reaction-selector.tsx b/apps/space/components/ui/reaction-selector.tsx
new file mode 100644
index 000000000..70994460c
--- /dev/null
+++ b/apps/space/components/ui/reaction-selector.tsx
@@ -0,0 +1,77 @@
+import { Fragment } from "react";
+
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
+
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+// icons
+import { Icon } from "components/ui";
+
+const reactionEmojis = ["128077", "128078", "128516", "128165", "128533", "129505", "9992", "128064"];
+
+interface Props {
+  size?: "sm" | "md" | "lg";
+  position?: "top" | "bottom";
+  onSelect: (emoji: string) => void;
+}
+
+export const ReactionSelector: React.FC<Props> = (props) => {
+  const { onSelect, position, size } = props;
+
+  return (
+    <Popover className="relative">
+      {({ open, close: closePopover }) => (
+        <>
+          <Popover.Button
+            className={`${
+              open ? "" : "text-opacity-90"
+            } group inline-flex items-center rounded-md bg-custom-background-80 focus:outline-none`}
+          >
+            <span
+              className={`flex justify-center items-center rounded-md px-2 ${
+                size === "sm" ? "w-6 h-6" : size === "md" ? "w-7 h-7" : "w-8 h-8"
+              }`}
+            >
+              <Icon iconName="add_reaction" className="text-custom-text-100 scale-125" />
+            </span>
+          </Popover.Button>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel
+              className={`bg-custom-sidebar-background-100 absolute -left-2 z-10 ${
+                position === "top" ? "-top-12" : "-bottom-12"
+              }`}
+            >
+              <div className="bg-custom-sidebar-background-100 border border-custom-border-200 rounded-md p-1">
+                <div className="flex gap-x-1">
+                  {reactionEmojis.map((emoji) => (
+                    <button
+                      key={emoji}
+                      type="button"
+                      onClick={() => {
+                        onSelect(emoji);
+                        closePopover();
+                      }}
+                      className="flex select-none items-center justify-between rounded-md text-sm p-1 hover:bg-custom-sidebar-background-90"
+                    >
+                      {renderEmoji(emoji)}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
+};
diff --git a/apps/space/components/ui/secondary-button.tsx b/apps/space/components/ui/secondary-button.tsx
new file mode 100644
index 000000000..2a9b3d528
--- /dev/null
+++ b/apps/space/components/ui/secondary-button.tsx
@@ -0,0 +1,35 @@
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: "sm" | "md" | "lg";
+  outline?: boolean;
+  loading?: boolean;
+}
+
+export const SecondaryButton: React.FC<ButtonProps> = ({
+  children,
+  className = "",
+  onClick,
+  type = "button",
+  disabled = false,
+  loading = false,
+  size = "sm",
+  outline = false,
+}) => (
+  <button
+    type={type}
+    className={`${className} border border-custom-border-200 font-medium duration-300 ${
+      size === "sm"
+        ? "rounded px-3 py-2 text-xs"
+        : size === "md"
+        ? "rounded-md px-3.5 py-2 text-sm"
+        : "rounded-lg px-4 py-2 text-base"
+    } ${disabled ? "cursor-not-allowed border-custom-border-200 bg-custom-background-90" : ""} ${
+      outline
+        ? "bg-transparent hover:bg-custom-background-80"
+        : "bg-custom-background-100 hover:border-opacity-70 hover:bg-opacity-70"
+    } ${loading ? "cursor-wait" : ""}`}
+    onClick={onClick}
+    disabled={disabled || loading}
+  >
+    {children}
+  </button>
+);
diff --git a/apps/space/components/ui/toast-alert.tsx b/apps/space/components/ui/toast-alert.tsx
new file mode 100644
index 000000000..5d0c0123c
--- /dev/null
+++ b/apps/space/components/ui/toast-alert.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+// hooks
+import {
+  CheckCircleIcon,
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+  XCircleIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
+import useToast from "hooks/use-toast";
+// icons
+
+const ToastAlerts = () => {
+  const { alerts, removeAlert } = useToast();
+
+  if (!alerts) return null;
+
+  return (
+    <div className="pointer-events-none fixed top-5 right-5 z-50 h-full w-80 space-y-5 overflow-hidden">
+      {alerts.map((alert) => (
+        <div className="relative overflow-hidden rounded-md text-white" key={alert.id}>
+          <div className="absolute top-1 right-1">
+            <button
+              type="button"
+              className="pointer-events-auto inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2"
+              onClick={() => removeAlert(alert.id)}
+            >
+              <span className="sr-only">Dismiss</span>
+              <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+            </button>
+          </div>
+          <div
+            className={`px-2 py-4 ${
+              alert.type === "success"
+                ? "bg-[#06d6a0]"
+                : alert.type === "error"
+                ? "bg-[#ef476f]"
+                : alert.type === "warning"
+                ? "bg-[#e98601]"
+                : "bg-[#1B9aaa]"
+            }`}
+          >
+            <div className="flex items-center gap-x-3">
+              <div className="flex-shrink-0">
+                {alert.type === "success" ? (
+                  <CheckCircleIcon className="h-8 w-8" aria-hidden="true" />
+                ) : alert.type === "error" ? (
+                  <XCircleIcon className="h-8 w-8" />
+                ) : alert.type === "warning" ? (
+                  <ExclamationTriangleIcon className="h-8 w-8" aria-hidden="true" />
+                ) : (
+                  <InformationCircleIcon className="h-8 w-8" />
+                )}
+              </div>
+              <div>
+                <p className="font-semibold">{alert.title}</p>
+                {alert.message && <p className="mt-1 text-xs">{alert.message}</p>}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ToastAlerts;
diff --git a/apps/space/components/ui/tooltip.tsx b/apps/space/components/ui/tooltip.tsx
new file mode 100644
index 000000000..994c0f32a
--- /dev/null
+++ b/apps/space/components/ui/tooltip.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+
+// next-themes
+import { useTheme } from "next-themes";
+// tooltip2
+import { Tooltip2 } from "@blueprintjs/popover2";
+
+type Props = {
+  tooltipHeading?: string;
+  tooltipContent: string | React.ReactNode;
+  position?:
+    | "top"
+    | "right"
+    | "bottom"
+    | "left"
+    | "auto"
+    | "auto-end"
+    | "auto-start"
+    | "bottom-left"
+    | "bottom-right"
+    | "left-bottom"
+    | "left-top"
+    | "right-bottom"
+    | "right-top"
+    | "top-left"
+    | "top-right";
+  children: JSX.Element;
+  disabled?: boolean;
+  className?: string;
+  openDelay?: number;
+  closeDelay?: number;
+};
+
+export const Tooltip: React.FC<Props> = ({
+  tooltipHeading,
+  tooltipContent,
+  position = "top",
+  children,
+  disabled = false,
+  className = "",
+  openDelay = 200,
+  closeDelay,
+}) => {
+  const { theme } = useTheme();
+
+  return (
+    <Tooltip2
+      disabled={disabled}
+      hoverOpenDelay={openDelay}
+      hoverCloseDelay={closeDelay}
+      content={
+        <div
+          className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md border border-custom-border-200 ${
+            theme === "custom" ? "bg-custom-background-100 text-custom-text-200" : "bg-black text-gray-400"
+          } break-words overflow-hidden ${className}`}
+        >
+          {tooltipHeading && (
+            <h5 className={`font-medium ${theme === "custom" ? "text-custom-text-100" : "text-white"}`}>
+              {tooltipHeading}
+            </h5>
+          )}
+          {tooltipContent}
+        </div>
+      }
+      position={position}
+      renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) =>
+        React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props })
+      }
+    />
+  );
+};
diff --git a/apps/space/components/views/project-details.tsx b/apps/space/components/views/project-details.tsx
new file mode 100644
index 000000000..bbf043130
--- /dev/null
+++ b/apps/space/components/views/project-details.tsx
@@ -0,0 +1,84 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// components
+import { IssueListView } from "components/issues/board-views/list";
+import { IssueKanbanView } from "components/issues/board-views/kanban";
+import { IssueCalendarView } from "components/issues/board-views/calendar";
+import { IssueSpreadsheetView } from "components/issues/board-views/spreadsheet";
+import { IssueGanttView } from "components/issues/board-views/gantt";
+import { IssuePeekOverview } from "components/issues/peek-overview";
+// mobx store
+import { RootStore } from "store/root";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export const ProjectDetailsView = observer(() => {
+  const router = useRouter();
+  const { workspace_slug, project_slug, states, labels, priorities, board, peekId } = router.query;
+
+  const {
+    issue: issueStore,
+    project: projectStore,
+    issueDetails: issueDetailStore,
+    user: userStore,
+  }: RootStore = useMobxStore();
+
+  useEffect(() => {
+    if (!userStore.currentUser) {
+      userStore.fetchCurrentUser();
+    }
+  }, [userStore]);
+
+  useEffect(() => {
+    if (workspace_slug && project_slug) {
+      const params = {
+        state: states || null,
+        labels: labels || null,
+        priority: priorities || null,
+      };
+      issueStore.fetchPublicIssues(workspace_slug?.toString(), project_slug.toString(), params);
+    }
+  }, [workspace_slug, project_slug, issueStore, states, labels, priorities]);
+
+  useEffect(() => {
+    if (peekId && workspace_slug && project_slug) {
+      issueDetailStore.setPeekId(peekId.toString());
+    }
+  }, [peekId, issueDetailStore, project_slug, workspace_slug]);
+
+  return (
+    <div className="relative w-full h-full overflow-hidden">
+      {workspace_slug && <IssuePeekOverview />}
+
+      {issueStore?.loader && !issueStore.issues ? (
+        <div className="text-sm text-center py-10 text-custom-text-100">Loading...</div>
+      ) : (
+        <>
+          {issueStore?.error ? (
+            <div className="text-sm text-center py-10  bg-custom-background-200 text-custom-text-100">
+              Something went wrong.
+            </div>
+          ) : (
+            projectStore?.activeBoard && (
+              <>
+                {projectStore?.activeBoard === "list" && (
+                  <div className="relative w-full h-full overflow-y-auto">
+                    <IssueListView />
+                  </div>
+                )}
+                {projectStore?.activeBoard === "kanban" && (
+                  <div className="relative w-full h-full mx-auto px-9 py-5">
+                    <IssueKanbanView />
+                  </div>
+                )}
+                {projectStore?.activeBoard === "calendar" && <IssueCalendarView />}
+                {projectStore?.activeBoard === "spreadsheet" && <IssueSpreadsheetView />}
+                {projectStore?.activeBoard === "gantt" && <IssueGanttView />}
+              </>
+            )
+          )}
+        </>
+      )}
+    </div>
+  );
+});
diff --git a/apps/space/constants/data.ts b/apps/space/constants/data.ts
index 81ccae116..29d411342 100644
--- a/apps/space/constants/data.ts
+++ b/apps/space/constants/data.ts
@@ -7,7 +7,7 @@ import {
   TIssueGroupKey,
   IIssuePriorityFilters,
   IIssueGroup,
-} from "store/types/issue";
+} from "types/issue";
 // icons
 import {
   BacklogStateIcon,
@@ -18,69 +18,49 @@ import {
 } from "components/icons";
 
 // all issue views
-export const issueViews: IIssueBoardViews[] = [
-  {
-    key: "list",
+export const issueViews: any = {
+  list: {
     title: "List View",
     icon: "format_list_bulleted",
     className: "",
   },
-  {
-    key: "kanban",
+  kanban: {
     title: "Board View",
     icon: "grid_view",
     className: "",
   },
-  // {
-  //   key: "calendar",
-  //   title: "Calendar View",
-  //   icon: "calendar_month",
-  //   className: "",
-  // },
-  // {
-  //   key: "spreadsheet",
-  //   title: "Spreadsheet View",
-  //   icon: "table_chart",
-  //   className: "",
-  // },
-  // {
-  //   key: "gantt",
-  //   title: "Gantt Chart View",
-  //   icon: "waterfall_chart",
-  //   className: "rotate-90",
-  // },
-];
+};
 
 // issue priority filters
 export const issuePriorityFilters: IIssuePriorityFilters[] = [
   {
     key: "urgent",
     title: "Urgent",
-    className: "border border-red-500/50 bg-red-500/20 text-red-500",
+    className: "bg-red-500 border-red-500 text-white",
     icon: "error",
   },
   {
     key: "high",
     title: "High",
-    className: "border border-orange-500/50 bg-orange-500/20 text-orange-500",
+    className: "text-orange-500 border-custom-border-300",
     icon: "signal_cellular_alt",
   },
   {
     key: "medium",
     title: "Medium",
-    className: "border border-yellow-500/50 bg-yellow-500/20 text-yellow-500",
+    className: "text-yellow-500 border-custom-border-300",
     icon: "signal_cellular_alt_2_bar",
   },
   {
     key: "low",
     title: "Low",
-    className: "border border-green-500/50 bg-green-500/20 text-green-500",
+    className: "text-green-500 border-custom-border-300",
     icon: "signal_cellular_alt_1_bar",
   },
   {
     key: "none",
     title: "None",
-    className: "border border-gray-500/50 bg-gray-500/20 text-gray-500",
+    className: "text-gray-500 border-custom-border-300",
     icon: "block",
   },
 ];
@@ -111,35 +91,35 @@ export const issueGroups: IIssueGroup[] = [
     key: "backlog",
     title: "Backlog",
     color: "#d9d9d9",
-    className: `border-[#d9d9d9]/50 text-[#d9d9d9] bg-[#d9d9d9]/10`,
+    className: `text-[#d9d9d9] bg-[#d9d9d9]/10`,
     icon: BacklogStateIcon,
   },
   {
     key: "unstarted",
     title: "Unstarted",
     color: "#3f76ff",
-    className: `border-[#3f76ff]/50 text-[#3f76ff] bg-[#3f76ff]/10`,
+    className: `text-[#3f76ff] bg-[#3f76ff]/10`,
     icon: UnstartedStateIcon,
   },
   {
     key: "started",
     title: "Started",
     color: "#f59e0b",
-    className: `border-[#f59e0b]/50 text-[#f59e0b] bg-[#f59e0b]/10`,
+    className: `text-[#f59e0b] bg-[#f59e0b]/10`,
     icon: StartedStateIcon,
   },
   {
     key: "completed",
     title: "Completed",
     color: "#16a34a",
-    className: `border-[#16a34a]/50 text-[#16a34a] bg-[#16a34a]/10`,
+    className: `text-[#16a34a] bg-[#16a34a]/10`,
     icon: CompletedStateIcon,
   },
   {
     key: "cancelled",
     title: "Cancelled",
     color: "#dc2626",
-    className: `border-[#dc2626]/50 text-[#dc2626] bg-[#dc2626]/10`,
+    className: `text-[#dc2626] bg-[#dc2626]/10`,
     icon: CancelledStateIcon,
   },
 ];
diff --git a/apps/space/constants/helpers.ts b/apps/space/constants/helpers.ts
index fd4dba217..0cf142353 100644
--- a/apps/space/constants/helpers.ts
+++ b/apps/space/constants/helpers.ts
@@ -11,3 +11,26 @@ export const renderDateFormat = (date: string | Date | null) => {
 
   return [year, month, day].join("-");
 };
+
+/**
+ * @description Returns date and month, if date is of the current year
+ * @description Returns date, month adn year, if date is of a different year than current
+ * @param {string} date
+ * @example renderFullDate("2023-01-01") // 1 Jan
+ * @example renderFullDate("2021-01-01") // 1 Jan, 2021
+ */
+
+export const renderFullDate = (date: string): string => {
+  if (!date) return "";
+
+  const months: string[] = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+  const currentDate: Date = new Date();
+  const [year, month, day]: number[] = date.split("-").map(Number);
+
+  const formattedMonth: string = months[month - 1];
+  const formattedDay: string = day < 10 ? `0${day}` : day.toString();
+
+  if (currentDate.getFullYear() === year) return `${formattedDay} ${formattedMonth}`;
+  else return `${formattedDay} ${formattedMonth}, ${year}`;
+};
diff --git a/apps/space/constants/seo.ts b/apps/space/constants/seo.ts
new file mode 100644
index 000000000..b2baca612
--- /dev/null
+++ b/apps/space/constants/seo.ts
@@ -0,0 +1,7 @@
+export const SITE_NAME = "Plane Deploy | Make your Plane boards and roadmaps pubic with just one-click. ";
+export const SITE_TITLE = "Plane Deploy | Make your Plane boards public with one-click";
+export const SITE_DESCRIPTION = "Plane Deploy is a customer feedback management tool built on top of plane.so";
+export const SITE_KEYWORDS =
+  "software development, customer feedback, software, accelerate, code management, release management, project management, issue tracking, agile, scrum, kanban, collaboration";
+export const SITE_URL = "https://app.plane.so/";
+export const TWITTER_USER_NAME = "planepowers";
diff --git a/apps/space/constants/workspace.ts b/apps/space/constants/workspace.ts
new file mode 100644
index 000000000..5ae5a7cf4
--- /dev/null
+++ b/apps/space/constants/workspace.ts
@@ -0,0 +1,12 @@
+export const USER_ROLES = [
+  { value: "Product / Project Manager", label: "Product / Project Manager" },
+  { value: "Development / Engineering", label: "Development / Engineering" },
+  { value: "Founder / Executive", label: "Founder / Executive" },
+  { value: "Freelancer / Consultant", label: "Freelancer / Consultant" },
+  { value: "Marketing / Growth", label: "Marketing / Growth" },
+  { value: "Sales / Business Development", label: "Sales / Business Development" },
+  { value: "Support / Operations", label: "Support / Operations" },
+  { value: "Student / Professor", label: "Student / Professor" },
+  { value: "Human Resources", label: "Human Resources" },
+  { value: "Other", label: "Other" },
+];
diff --git a/apps/space/contexts/toast.context.tsx b/apps/space/contexts/toast.context.tsx
new file mode 100644
index 000000000..a382b4fd2
--- /dev/null
+++ b/apps/space/contexts/toast.context.tsx
@@ -0,0 +1,97 @@
+import React, { createContext, useCallback, useReducer } from "react";
+// uuid
+import { v4 as uuid } from "uuid";
+// components
+import ToastAlert from "components/ui/toast-alert";
+
+export const toastContext = createContext<ContextType>({} as ContextType);
+
+// types
+type ToastAlert = {
+  id: string;
+  title: string;
+  message?: string;
+  type: "success" | "error" | "warning" | "info";
+};
+
+type ReducerActionType = {
+  type: "SET_TOAST_ALERT" | "REMOVE_TOAST_ALERT";
+  payload: ToastAlert;
+};
+
+type ContextType = {
+  alerts?: ToastAlert[];
+  removeAlert: (id: string) => void;
+  setToastAlert: (data: {
+    title: string;
+    type?: "success" | "error" | "warning" | "info" | undefined;
+    message?: string | undefined;
+  }) => void;
+};
+
+type StateType = {
+  toastAlerts?: ToastAlert[];
+};
+
+type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
+
+export const initialState: StateType = {
+  toastAlerts: [],
+};
+
+export const reducer: ReducerFunctionType = (state, action) => {
+  const { type, payload } = action;
+
+  switch (type) {
+    case "SET_TOAST_ALERT":
+      return {
+        ...state,
+        toastAlerts: [...(state.toastAlerts ?? []), payload],
+      };
+
+    case "REMOVE_TOAST_ALERT":
+      return {
+        ...state,
+        toastAlerts: state.toastAlerts?.filter((toastAlert) => toastAlert.id !== payload.id),
+      };
+
+    default: {
+      return state;
+    }
+  }
+};
+
+export const ToastContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const removeAlert = useCallback((id: string) => {
+    dispatch({
+      type: "REMOVE_TOAST_ALERT",
+      payload: { id, title: "", message: "", type: "success" },
+    });
+  }, []);
+
+  const setToastAlert = useCallback(
+    (data: { title: string; type?: "success" | "error" | "warning" | "info"; message?: string }) => {
+      const id = uuid();
+      const { title, type, message } = data;
+      dispatch({
+        type: "SET_TOAST_ALERT",
+        payload: { id, title, message, type: type ?? "success" },
+      });
+
+      const timer = setTimeout(() => {
+        removeAlert(id);
+        clearTimeout(timer);
+      }, 3000);
+    },
+    [removeAlert]
+  );
+
+  return (
+    <toastContext.Provider value={{ setToastAlert, removeAlert, alerts: state.toastAlerts }}>
+      <ToastAlert />
+      {children}
+    </toastContext.Provider>
+  );
+};
diff --git a/apps/space/helpers/date-time.helper.ts b/apps/space/helpers/date-time.helper.ts
new file mode 100644
index 000000000..625871625
--- /dev/null
+++ b/apps/space/helpers/date-time.helper.ts
@@ -0,0 +1,14 @@
+export const timeAgo = (time: any) => {
+  switch (typeof time) {
+    case "number":
+      break;
+    case "string":
+      time = +new Date(time);
+      break;
+    case "object":
+      if (time.constructor === Date) time = time.getTime();
+      break;
+    default:
+      time = +new Date();
+  }
+};
diff --git a/apps/space/helpers/emoji.helper.tsx b/apps/space/helpers/emoji.helper.tsx
new file mode 100644
index 000000000..7c9f3cfcb
--- /dev/null
+++ b/apps/space/helpers/emoji.helper.tsx
@@ -0,0 +1,56 @@
+export const getRandomEmoji = () => {
+  const emojis = [
+    "8986",
+    "9200",
+    "128204",
+    "127773",
+    "127891",
+    "127947",
+    "128076",
+    "128077",
+    "128187",
+    "128188",
+    "128512",
+    "128522",
+    "128578",
+  ];
+
+  return emojis[Math.floor(Math.random() * emojis.length)];
+};
+
+export const renderEmoji = (
+  emoji:
+    | string
+    | {
+        name: string;
+        color: string;
+      }
+) => {
+  if (!emoji) return;
+
+  if (typeof emoji === "object")
+    return (
+      <span style={{ color: emoji.color }} className="material-symbols-rounded text-lg">
+        {emoji.name}
+      </span>
+    );
+  else return isNaN(parseInt(emoji)) ? emoji : String.fromCodePoint(parseInt(emoji));
+};
+
+export const groupReactions: (reactions: any[], key: string) => { [key: string]: any[] } = (
+  reactions: any,
+  key: string
+) => {
+  const groupedReactions = reactions.reduce(
+    (acc: any, reaction: any) => {
+      if (!acc[reaction[key]]) {
+        acc[reaction[key]] = [];
+      }
+      acc[reaction[key]].push(reaction);
+      return acc;
+    },
+    {} as { [key: string]: any[] }
+  );
+
+  return groupedReactions;
+};
diff --git a/apps/space/helpers/string.helper.ts b/apps/space/helpers/string.helper.ts
new file mode 100644
index 000000000..1b676ca57
--- /dev/null
+++ b/apps/space/helpers/string.helper.ts
@@ -0,0 +1,31 @@
+export const addSpaceIfCamelCase = (str: string) => str.replace(/([a-z])([A-Z])/g, "$1 $2");
+
+const fallbackCopyTextToClipboard = (text: string) => {
+  var textArea = document.createElement("textarea");
+  textArea.value = text;
+
+  // Avoid scrolling to bottom
+  textArea.style.top = "0";
+  textArea.style.left = "0";
+  textArea.style.position = "fixed";
+
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+
+  try {
+    // FIXME: Even though we are using this as a fallback, execCommand is deprecated 👎. We should find a better way to do this.
+    // https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
+    var successful = document.execCommand("copy");
+  } catch (err) {}
+
+  document.body.removeChild(textArea);
+};
+
+export const copyTextToClipboard = async (text: string) => {
+  if (!navigator.clipboard) {
+    fallbackCopyTextToClipboard(text);
+    return;
+  }
+  await navigator.clipboard.writeText(text);
+};
diff --git a/apps/space/hooks/use-outside-click.tsx b/apps/space/hooks/use-outside-click.tsx
new file mode 100644
index 000000000..f2bed415f
--- /dev/null
+++ b/apps/space/hooks/use-outside-click.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { useEffect } from "react";
+
+const useOutSideClick = (ref: any, callback: any) => {
+  const handleClick = (e: any) => {
+    if (ref.current && !ref.current.contains(e.target)) {
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("click", handleClick);
+
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  });
+};
+
+export default useOutSideClick;
diff --git a/apps/space/hooks/use-timer.tsx b/apps/space/hooks/use-timer.tsx
new file mode 100644
index 000000000..1edf4931a
--- /dev/null
+++ b/apps/space/hooks/use-timer.tsx
@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+
+const TIMER = 30;
+
+const useTimer = (initialValue: number = TIMER) => {
+  const [timer, setTimer] = useState(initialValue);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimer((prev) => prev - 1);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return { timer, setTimer };
+};
+
+export default useTimer;
diff --git a/apps/space/hooks/use-toast.tsx b/apps/space/hooks/use-toast.tsx
new file mode 100644
index 000000000..6de3c104c
--- /dev/null
+++ b/apps/space/hooks/use-toast.tsx
@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { toastContext } from "contexts/toast.context";
+
+const useToast = () => {
+  const toastContextData = useContext(toastContext);
+  return toastContextData;
+};
+
+export default useToast;
diff --git a/apps/space/layouts/project-layout.tsx b/apps/space/layouts/project-layout.tsx
new file mode 100644
index 000000000..2147e845e
--- /dev/null
+++ b/apps/space/layouts/project-layout.tsx
@@ -0,0 +1,30 @@
+import Link from "next/link";
+import Image from "next/image";
+
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import IssueNavbar from "components/issues/navbar";
+
+const ProjectLayout = ({ children }: { children: React.ReactNode }) => (
+  <div className="relative w-screen min-h-[500px] h-screen overflow-hidden flex flex-col">
+    <div className="flex-shrink-0 h-[60px] border-b border-custom-border-300 relative flex items-center bg-custom-sidebar-background-100 select-none">
+      <IssueNavbar />
+    </div>
+    <div className="w-full h-full relative bg-custom-background-90 overflow-hidden">{children}</div>
+    <div className="absolute z-[99999] bottom-[10px] right-[10px] bg-custom-background-100 rounded-sm shadow-lg border border-custom-border-300">
+      <Link href="https://plane.so">
+        <a className="p-1 px-2 flex items-center gap-1" target="_blank">
+          <div className="w-[24px] h-[24px] relative flex justify-center items-center">
+            <Image src="/plane-logo.webp" alt="plane logo" className="w-[24px] h-[24px]" height="24" width="24" />
+          </div>
+          <div className="text-xs">
+            Powered by <b>Plane Deploy</b>
+          </div>
+        </a>
+      </Link>
+    </div>
+  </div>
+);
+
+export default observer(ProjectLayout);
diff --git a/apps/space/lib/mobx/store-init.tsx b/apps/space/lib/mobx/store-init.tsx
index a31bc822f..6e38d9c6d 100644
--- a/apps/space/lib/mobx/store-init.tsx
+++ b/apps/space/lib/mobx/store-init.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import { useEffect } from "react";
+// next imports
+import { useRouter } from "next/router";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -8,12 +10,14 @@ import { RootStore } from "store/root";
 const MobxStoreInit = () => {
   const store: RootStore = useMobxStore();
 
-  useEffect(() => {
-    // theme
-    const _theme = localStorage && localStorage.getItem("app_theme") ? localStorage.getItem("app_theme") : "light";
-    if (_theme && store?.theme?.theme != _theme) store.theme.setTheme(_theme);
-    else localStorage.setItem("app_theme", _theme && _theme != "light" ? "dark" : "light");
-  }, [store?.theme]);
+  const router = useRouter();
+  const { states, labels, priorities } = router.query as { states: string[]; labels: string[]; priorities: string[] };
+
+  // useEffect(() => {
+  //   store.issue.userSelectedLabels = labels || [];
+  //   store.issue.userSelectedPriorities = priorities || [];
+  //   store.issue.userSelectedStates = states || [];
+  // }, [store.issue]);
 
   return <></>;
 };
diff --git a/apps/space/next.config.js b/apps/space/next.config.js
index 4128b636a..ce021afe9 100644
--- a/apps/space/next.config.js
+++ b/apps/space/next.config.js
@@ -6,7 +6,6 @@ const nextConfig = {
   swcMinify: true,
   experimental: {
     outputFileTracingRoot: path.join(__dirname, "../../"),
-    appDir: true,
   },
   output: "standalone",
 };
diff --git a/apps/space/package.json b/apps/space/package.json
index e37dfa54a..bf30bc28d 100644
--- a/apps/space/package.json
+++ b/apps/space/package.json
@@ -10,27 +10,52 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.13",
-    "@types/node": "18.14.1",
-    "@types/nprogress": "^0.2.0",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
+    "@mui/icons-material": "^5.14.7",
+    "@tiptap-pro/extension-unique-id": "^2.1.0",
+    "@tiptap/extension-code-block-lowlight": "^2.0.4",
+    "@tiptap/extension-color": "^2.0.4",
+    "@tiptap/extension-gapcursor": "^2.1.7",
+    "@tiptap/extension-highlight": "^2.0.4",
+    "@tiptap/extension-horizontal-rule": "^2.0.4",
+    "@tiptap/extension-image": "^2.0.4",
+    "@tiptap/extension-link": "^2.0.4",
+    "@tiptap/extension-placeholder": "^2.0.4",
+    "@tiptap/extension-table": "^2.1.6",
+    "@tiptap/extension-table-cell": "^2.1.6",
+    "@tiptap/extension-table-header": "^2.1.6",
+    "@tiptap/extension-table-row": "^2.1.6",
+    "@tiptap/extension-task-item": "^2.0.4",
+    "@tiptap/extension-task-list": "^2.0.4",
+    "@tiptap/extension-text-style": "^2.0.4",
+    "@tiptap/extension-underline": "^2.0.4",
+    "@tiptap/pm": "^2.0.4",
+    "@tiptap/react": "^2.0.4",
+    "@tiptap/starter-kit": "^2.0.4",
+    "@tiptap/suggestion": "^2.0.4",
     "axios": "^1.3.4",
-    "eslint": "8.34.0",
-    "eslint-config-next": "13.2.1",
     "js-cookie": "^3.0.1",
     "mobx": "^6.10.0",
     "mobx-react-lite": "^4.0.3",
-    "next": "^13.4.16",
+    "next": "12.3.2",
+    "next-theme": "^0.1.5",
     "nprogress": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "swr": "^2.2.2",
     "typescript": "4.9.5",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9",
     "@types/js-cookie": "^3.0.3",
+    "@types/node": "18.14.1",
+    "@types/nprogress": "^0.2.0",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
     "@types/uuid": "^9.0.1",
     "autoprefixer": "^10.4.13",
+    "eslint": "8.34.0",
+    "eslint-config-next": "13.2.1",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.7"
   }
diff --git a/apps/space/pages/[workspace_slug]/[project_slug]/index.tsx b/apps/space/pages/[workspace_slug]/[project_slug]/index.tsx
new file mode 100644
index 000000000..220a5b8c7
--- /dev/null
+++ b/apps/space/pages/[workspace_slug]/[project_slug]/index.tsx
@@ -0,0 +1,50 @@
+import useSWR from "swr";
+import type { GetServerSideProps } from "next";
+import { useRouter } from "next/router";
+import Head from "next/head";
+/// layouts
+import ProjectLayout from "layouts/project-layout";
+// components
+import { ProjectDetailsView } from "components/views/project-details";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+
+const WorkspaceProjectPage = (props: any) => {
+  const SITE_TITLE = props?.project_settings?.project_details?.name || "Plane | Deploy";
+
+  const router = useRouter();
+  const { workspace_slug, project_slug, states, labels, priorities } = router.query;
+
+  const { project: projectStore, issue: issueStore } = useMobxStore();
+
+  useSWR("REVALIDATE_ALL", () => {
+    if (workspace_slug && project_slug) {
+      projectStore.fetchProjectSettings(workspace_slug.toString(), project_slug.toString());
+      const params = {
+        state: states || null,
+        labels: labels || null,
+        priority: priorities || null,
+      };
+      issueStore.fetchPublicIssues(workspace_slug.toString(), project_slug.toString(), params);
+    }
+  });
+
+  return (
+    <ProjectLayout>
+      <Head>
+        <title>{SITE_TITLE}</title>
+      </Head>
+      <ProjectDetailsView />
+    </ProjectLayout>
+  );
+};
+
+// export const getServerSideProps: GetServerSideProps<any> = async ({ query: { workspace_slug, project_slug } }) => {
+//   const res = await fetch(
+//     `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/public/workspaces/${workspace_slug}/project-boards/${project_slug}/settings/`
+//   );
+//   const project_settings = await res.json();
+//   return { props: { project_settings } };
+// };
+
+export default WorkspaceProjectPage;
diff --git a/apps/space/app/[workspace_slug]/page.tsx b/apps/space/pages/[workspace_slug]/index.tsx
similarity index 100%
rename from apps/space/app/[workspace_slug]/page.tsx
rename to apps/space/pages/[workspace_slug]/index.tsx
diff --git a/apps/space/pages/_app.tsx b/apps/space/pages/_app.tsx
index 8681006e1..900b39f61 100644
--- a/apps/space/pages/_app.tsx
+++ b/apps/space/pages/_app.tsx
@@ -1,10 +1,43 @@
+import Head from "next/head";
+import type { AppProps } from "next/app";
+import { ThemeProvider } from "next-themes";
 // styles
 import "styles/globals.css";
-// types
-import type { AppProps } from "next/app";
+import "styles/editor.css";
+// contexts
+import { ToastContextProvider } from "contexts/toast.context";
+// mobx store provider
+import { MobxStoreProvider } from "lib/mobx/store-provider";
+import MobxStoreInit from "lib/mobx/store-init";
+// constants
+import { SITE_NAME, SITE_DESCRIPTION, SITE_URL, TWITTER_USER_NAME, SITE_KEYWORDS, SITE_TITLE } from "constants/seo";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <MobxStoreProvider>
+      <MobxStoreInit />
+      <Head>
+        <title>{SITE_TITLE}</title>
+        <meta property="og:site_name" content={SITE_NAME} />
+        <meta property="og:title" content={SITE_TITLE} />
+        <meta property="og:url" content={SITE_URL} />
+        <meta name="description" content={SITE_DESCRIPTION} />
+        <meta property="og:description" content={SITE_DESCRIPTION} />
+        <meta name="keywords" content={SITE_KEYWORDS} />
+        <meta name="twitter:site" content={`@${TWITTER_USER_NAME}`} />
+        <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
+        <link rel="manifest" href="/site.webmanifest.json" />
+        <link rel="shortcut icon" href="/favicon/favicon.ico" />
+      </Head>
+      <ToastContextProvider>
+        <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
+          <Component {...pageProps} />
+        </ThemeProvider>
+      </ToastContextProvider>
+    </MobxStoreProvider>
+  );
 }
 
 export default MyApp;
diff --git a/apps/space/pages/_document.tsx b/apps/space/pages/_document.tsx
index 8b41d05fc..91cf943a3 100644
--- a/apps/space/pages/_document.tsx
+++ b/apps/space/pages/_document.tsx
@@ -5,7 +5,7 @@ class MyDocument extends Document {
     return (
       <Html>
         <Head />
-        <body>
+        <body className="antialiased bg-custom-background-90 w-100">
           <Main />
           <NextScript />
         </body>
diff --git a/apps/space/pages/index.tsx b/apps/space/pages/index.tsx
new file mode 100644
index 000000000..26949d76b
--- /dev/null
+++ b/apps/space/pages/index.tsx
@@ -0,0 +1,156 @@
+import React, { useEffect } from "react";
+import Image from "next/image";
+import { useRouter } from "next/router";
+// assets
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import authenticationService from "services/authentication.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { EmailPasswordForm, GithubLoginButton, GoogleLoginButton, EmailCodeForm } from "components/accounts";
+
+const HomePage = () => {
+  const { user: userStore } = useMobxStore();
+
+  const router = useRouter();
+  const { next_path = "/" } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const onSignInError = (error: any) => {
+    setToastAlert({
+      title: "Error signing in!",
+      type: "error",
+      message: error?.error || "Something went wrong. Please try again later or contact the support team.",
+    });
+  };
+
+  const onSignInSuccess = (response: any) => {
+    const isOnboarded = response?.user?.onboarding_step?.profile_complete || false;
+
+    userStore.setCurrentUser(response?.user);
+
+    if (!isOnboarded) {
+      router.push(`/onboarding?next_path=${next_path}`);
+      return;
+    }
+    router.push(next_path.toString());
+  };
+
+  const handleGoogleSignIn = async ({ clientId, credential }: any) => {
+    try {
+      if (clientId && credential) {
+        const socialAuthPayload = {
+          medium: "google",
+          credential,
+          clientId,
+        };
+        const response = await authenticationService.socialAuth(socialAuthPayload);
+
+        onSignInSuccess(response);
+      } else {
+        throw Error("Cant find credentials");
+      }
+    } catch (err: any) {
+      onSignInError(err);
+    }
+  };
+
+  const handleGitHubSignIn = async (credential: string) => {
+    try {
+      if (process.env.NEXT_PUBLIC_GITHUB_ID && credential) {
+        const socialAuthPayload = {
+          medium: "github",
+          credential,
+          clientId: process.env.NEXT_PUBLIC_GITHUB_ID,
+        };
+        const response = await authenticationService.socialAuth(socialAuthPayload);
+        onSignInSuccess(response);
+      } else {
+        throw Error("Cant find credentials");
+      }
+    } catch (err: any) {
+      onSignInError(err);
+    }
+  };
+
+  const handlePasswordSignIn = async (formData: any) => {
+    await authenticationService
+      .emailLogin(formData)
+      .then((response) => {
+        try {
+          if (response) {
+            onSignInSuccess(response);
+          }
+        } catch (err: any) {
+          onSignInError(err);
+        }
+      })
+      .catch((err) => onSignInError(err));
+  };
+
+  const handleEmailCodeSignIn = async (response: any) => {
+    try {
+      if (response) {
+        onSignInSuccess(response);
+      }
+    } catch (err: any) {
+      onSignInError(err);
+    }
+  };
+
+  return (
+    <div className="h-screen w-full overflow-hidden">
+      <div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
+      <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
+        <div className="grid place-items-center bg-custom-background-100">
+          <div className="h-[30px] w-[30px]">
+            <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
+          </div>
+        </div>
+      </div>
+      <div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
+        <div>
+          {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
+            <>
+              <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
+                Sign in to Plane
+              </h1>
+              <div className="flex flex-col divide-y divide-custom-border-200">
+                <div className="pb-7">
+                  <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
+                </div>
+                <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
+                  <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
+                  <GithubLoginButton handleSignIn={handleGitHubSignIn} />
+                </div>
+              </div>
+            </>
+          ) : (
+            <EmailPasswordForm onSubmit={handlePasswordSignIn} />
+          )}
+
+          {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
+            <p className="pt-16 text-custom-text-200 text-sm text-center">
+              By signing up, you agree to the{" "}
+              <a
+                href="https://plane.so/terms-and-conditions"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-medium underline"
+              >
+                Terms & Conditions
+              </a>
+            </p>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/apps/space/pages/onboarding/index.tsx b/apps/space/pages/onboarding/index.tsx
new file mode 100644
index 000000000..10adb1d18
--- /dev/null
+++ b/apps/space/pages/onboarding/index.tsx
@@ -0,0 +1,53 @@
+import React, { useEffect } from "react";
+import Image from "next/image";
+// assets
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import authenticationService from "services/authentication.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { OnBoardingForm } from "components/accounts/onboarding-form";
+
+const OnBoardingPage = () => {
+  const { user: userStore } = useMobxStore();
+
+  const user = userStore?.currentUser;
+
+  const { setToastAlert } = useToast();
+
+  useEffect(() => {
+    const user = userStore?.currentUser;
+
+    if (!user) {
+      userStore.fetchCurrentUser();
+    }
+  }, [userStore]);
+
+  return (
+    <div className="h-screen w-full overflow-hidden bg-custom-background-100">
+      <div className="flex h-full w-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
+        <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
+          <div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0 z-10" />
+          <div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 py-5 left-2 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
+            <div className="h-[30px] w-[30px]">
+              <Image src={BluePlaneLogoWithoutText} alt="Plane logo" />
+            </div>
+          </div>
+          <div className="absolute sm:fixed text-custom-text-100 text-sm font-medium right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
+            {user?.email}
+          </div>
+        </div>
+        <div className="relative flex justify-center sm:items-center h-full px-8 pb-0 sm:px-0 sm:py-12 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5 overflow-hidden">
+          <OnBoardingForm user={user} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default observer(OnBoardingPage);
diff --git a/apps/space/app/project-not-published/page.tsx b/apps/space/pages/project-not-published/index.tsx
similarity index 100%
rename from apps/space/app/project-not-published/page.tsx
rename to apps/space/pages/project-not-published/index.tsx
diff --git a/apps/space/postcss.config.js b/apps/space/postcss.config.js
index 12a703d90..cbfea5ea2 100644
--- a/apps/space/postcss.config.js
+++ b/apps/space/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
   },
diff --git a/apps/space/public/favicon/android-chrome-192x192.png b/apps/space/public/favicon/android-chrome-192x192.png
new file mode 100644
index 0000000000000000000000000000000000000000..62e95acfc55b0719e3a66c77b211577980dc26a9
GIT binary patch
literal 2222
zcmcIm4Q$j@94~H)U>KMgMi8^65XES(?OpG-tGnalZfqCrZH|k~pwX^<ch~Itv9`C~
zrhzF$zyvm9Fp<nm9YF)cL<7?>$4rRM#27LckuYv^A?Reoxrqkd^nAUqfI*4GHEH|$
z-tYbXzyH@u_tXZfmMmVm7(tLFfogvpe1BrycisV?b?0LX;cJmv{iKc{cNJUr0^~sF
z3Iw@*xfrT9>e<H_UXg5^pfmtmLQ)|bK`PcIRE}>12HF53qU^z@diya{6g=1#Crh%b
z4@AZ4Rt;=!4TkvEM&2!8>%3@1f`J4QFgP?J#bljHc(61t1IN}hfuU)L(dfZ8SO(F0
zwifj%8bDn(66Z<Mj+VJ?l#8Za<in_)w37tsBq%#hxfqgWs4_HrVbGc;gqb@3rmQXa
z<-wwcp)v$vnx@Tk*c2^7P;R%IAnk<Rjza{lx5x&Uz-4`Pj=>LfUK3SARAkg*<QkN?
z;lZHNj0=*Qr<L_=m|(z&1g8>|jkH`!0|h>hQ{!4JZCv095CamB4IN^sJXVb=hN4H6
zf1u7UUuOV@mSyucZm30)@+NenvKhLO4ag1AdZ<MOL><tTxW<FZW+-#D<&DbtG{6~(
z7E+X0E>X2P$*7&O+0nIIL|ITw{lRNC06%8{4+gUa^F`qfGDJ}fMKiShA=1e>$PAQK
z1ToxlBdF8O(C+J?uw(?z;BE>QcqXi95(ga?B`yL8RgPe2K8%b{i76U14AnWVoe%hY
zwVDzZV{k#QtJ;VLDt#`>?Q-FE8<m#JvP?kM4Nm4k!0*9eaBQL|FplzaX9MZxa60UE
z;ALT&$IHvYPTb{k0E(l@au?r_+wWKSxK#qV{lb6TU!#ez1-aNQ^H_~()eciF>M*M<
z+1A+%nzEyqh^EVh;drYJJQ#1~9|%}>TD;{5WN6JOfTaIY7a5qYgbkC^z=jBn)=le<
zfZ_?OVKaUZe|Isxc1?5V;PAw-hWVoke&i23Aj1<*gGX7k^ySqEQs52vH-r+Mmy`WR
zzK*XNn4WTf|Mu82dJnx5+ugAfEgUQDc=Ykq`i)!Hy@W=8s8J6eTCaY9f9xNhL_fOc
z;0|<c(Gx`t$KGw~9X;bnzI9PAIz4cKNZ>UIW$M$4)5RgYYH8amh3gL>)y0T-8_FUF
z7q!s~I_^il`hO>ny)jtOGkEb{VzhrY8sBzhA8XE>{gdcAX^!t2e543#OO1`adhzvV
zN++Lpw+?(a+)J}Vn-+dsh|Qm(y{Wr@{qp#B?}^mxrSs$WO$7VAqgOATDk-U&syC;m
zXC{)vyMp^h-j`h7wp}%^DI+b%eve(*7oX}J+4@vscK_aUbaESYIXJX`(9yHEc=vpS
zEyKC|=Zf|b_02BXvwfmH@<nmCdGxtoKA#(|z)!B|<C8=ECEujx8k?G-xPkT`M}NDT
zJk{H6t`aU3ob`{U=4N&rDO;K<Zyh+{Q08WnA9fw}miF<(<uA-%&ZWqeHp!Sg{>Q>d
z&E(T7p~&g(S@Rvy+4|X;={4>21Iy;K*m9XTxBaI>HT}WEJ!`B#ia=%1|K7%DU;GP+
C)#N__

literal 0
HcmV?d00001

diff --git a/apps/space/public/favicon/android-chrome-512x512.png b/apps/space/public/favicon/android-chrome-512x512.png
new file mode 100644
index 0000000000000000000000000000000000000000..41400832b3142b8085148febc9488408d03cc07d
GIT binary patch
literal 3832
zcmeHKe{2&~9DjrHV<_Nnrt;%*+aD0Q-j8<edQj$Q=hnn-%V@IAAmMuV+TGUP9e3BY
z-69Z76n}!6Xo3VxOyrL#i{j6~+;9<Ma845>&dC_;2P$PSC7q5reAji&P?X4DGub7V
zd-vYweSd#H@9vrM(&B{+9#{YXSm-WsRRAyx4QGM*bJ62U^yDadWGN-p8UVN5ZQL1P
z&)#eR=G-TGtMn?*qbx6nOq?M5peY(s5E_8B1yP0L>!6PLU_g`{_@%?GI3@}XyfV*2
zc@!tC5lb3WxS^rc%Qw{Vb^$L~hpmmWNI(ec92N})C5??b@T6Q8jg4s%$C41e&Vd&i
z3b86rIp&mAh*?b(!BZ52+3Y6TYOz?U)fhuD6iMZgG(*r<ma?$44NF}((xwW2w!-yD
zN*8)_;5E9gup}9YL`)I0Nmc_SZMWM=iXj<>KnOyMNjeuLBrRuBf(vTADk{1tOPC>%
z^T}b|fg?*NTnH&?v67Yw6ABm^<rI=OQHD!NpunebN>~jhl?yxxgD?aoT|-zpja6!7
zUDj&ke-NEszD@xOt;dtraYI`|p|lE3FRDjwqyln7wC0T|kgR~399DT)RFBNeF}zV&
zrwTb;R=u(uoJ>^tq{$dVn;2|mr6>t<L|Zjw19WjZbl@m!C|@*Tro1%G(iYajJVfQO
zW@-ZJkp<Bo`#Y3jDT<}d*FjOq2%OH{6fE$pUsgjLa###;0Z1xR0LRi{WSw$QR*_<4
zoq6iK+vzM<Wxp6i3tC0-ddywqw9<B~m0(PC(p-;+bxWGgNj!AB95@P&NfZUvmQP!3
zK0im8ZM=o>=UFTS2ceIEwBU#NcFLE}_$T+fWIk+^z~p}6KkhG6Mbv^^@RsEmjcL>l
zTOw*GtFct;Y=B!*qo9Z-%Z255qYWH5Z{!~ecxqa_<p@lOjnqIS^k3>?0;b7+J;JH5
zFo2?U)4C&(@ubnP6Mm3?buqa%rMV~Jh%t;|nyS!Cn(Uy27*0i0HavbXf>?8>+g0d|
z?!DO6TH6D&kDop7>8a``h8Ji2w9>n@asJSvbLCm3&(_UdQuf9x#l0twe$v~Yi<i7K
zbnhB=XTJNMx1W0Xt-<rXS-JO*UK!9HFTT92z&27_{b~kyKmO%%#IoBEQ}4(GATtYq
z`F8<uM=k(Z2>=i824Fju0YKplV0y*j)S-E8*3okp4t&&lO}vzdFT0G#E{^`bB2sYL
zv8Uz9=k5f`oNH^VTeglx!}*Q#j#SkTb!=+;JeDz&)9F;(UpFLxY3R`5&Y`jJdm7a^
zk6#*Z-kRSqa;3d%O?KZm&4-^JS@F)9{VlUUd;xriw~l>!H8I@x?b-OU=Z6O$ye6%S
zp8x*%p$K*C<85pv*tl=WOb<^Vs%lHbs73&~<quY$h%emu*{*{9@s6Ih>;r+Oz!}F6
zSJlL#W4~Sf;^)^ZZ70T2Mz{PiFwptt$fnWS#3Ga5(Fk7CE({I^6LZHGzbmg8dcuOr
z<4Cw~tpC@t`WO9|wuk!W%rNsbI-x2@HYdRLrpG#$gYF+sb#!zc9si{}yRRosgqwq3
v?K;gUu_jpUmjT#k?z(;EO#R<|Ta3?M6)y9&m*=z_|EBJuQrE%tn|J&Pm-{+X

literal 0
HcmV?d00001

diff --git a/apps/space/public/favicon/apple-touch-icon.png b/apps/space/public/favicon/apple-touch-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..5273d4951dbcf125f8f21386422af21adaa1b609
GIT binary patch
literal 2176
zcmcIme@xtD81Ax(Yzx^IRE!hXltf&#*B{&+ySjqx4&gEn2)hlGWvthJcXZsfU0Zg?
zjX;7k>P$8>79(S0Gc)lIBF02F32X%UgN&TW#Ayr>#7!}b?Y8Nd;t%|K++CPX7Z+^O
z_UrdO-}}DL^S<wwzFJmNl(yoL6$pZ)Ig1_T@cn^tr>4Ls`$-B7U(1!^=QRXbnQq)m
zkRwMQMv(g+65W-0rRzC{mjfnFkUhW@3MdebARF^T3dh$19rXa8D6v?yyB9-6fyF8;
zF4CpgL5)}(R>78ViJK4C@-_j>&qFtc7-%2>bPf##{F26mSS)6jfn#Huz|a^(uVt|U
z!y#JfDnsqE3Q((w#CejW(OjE}vYO3S@+p)iX_6o<1V!VNl_AXxm5atN40=-qFH`P#
zHtq|4u~?0+D-1ydgF#a;$0Vyhg0k6c1W6M#jY9;k)k``T!X+&$VZi}3UKJHxlqJ-#
z$a&;CoyB0J^ArL~(yXM#WrBhcAx<GE6KPP20R=vZQ|eTI%(=i5zz+gI(lv;sl31li
z)@7|m{s+^^<=Y%UX<e?Qk2}T^2qax-df^^OBQD4t(VDwn0Yo{_<T{lHg?nI_Sq2-0
zv8#a7Wz{Xq{zRh65+S2BWunn1Dnv<;gWCE98-Rn;0gJ(`!F*A84(X;ShB7l|`bpBl
z<dE}Fmn?|h`oBYIh9nt!!);JlG6JV_cLfVP<CWC_2MLP-&IbrZ@?mIFM#e7tWfeMx
z(d8_hciQb`s_Yg0a6v0C+Jrg_?N-WWwc@miiiPWPF-}R-If(~O2a7>*Orj_-UO;aU
zEEWsS)3g=O%{6m4M_Y1nvxldxW{<~1^B}R`A@g-c2_*Il|8ak*D#8}z{P%3fXiTGa
zm|{_bS*?$^&K9scKJtrbtXvq5H`;*3cq9Knz~a;5Ju5J8Hdq6o(SNCnd6*`9^&qE$
z0v}ZCu60Mi;0dE)=Xnr+r5IaV(A)_)JTZ)6@~DCz$-@pv@Pt$0QC9eRQ3Zl5UF~!f
zxI;&;e2sUEgGUFhN4vf{e{5&fhpE=KZ_7?vAAGqvkTP=ULJ@at>zWp9XxHj}Z@uyc
z^-|wzx%tE|{`U8OJbif>+nztxv*X}5>0=XZowf4m(KPq;dygS=*##|FP5Cm{{u9nM
z=Jm~w7Y@IjdgOt{nH-#$T2d9fICHLRwD(GHS9suyo*UEs(ay1JX!9Sds>hj+X8ST$
zEuUR?Ribxg-@nM-=NYv%^v!iwWoMl2ssDLmDl;eN)~7Rh;orMP)@_Tv+1hn|q_1{-
zPE~f_Jb;f1!})V(=ccl&GuhtoKqT^7>DaF`gPSMEcAVk8-%t78$@-yb@)Ek35+!5@
zFeC4dU3=!s&hf6EaDOCn?)cvE-)0B;)^-FVk?Cl(vEfqa*5?L+()`A`!SsWf<5g!a
zMy+dq+P1yBaq`B~$J?9an+IB3H)oXQH(mbh{K}4?zqRGXMM`BN&KUQ@{TG&=y84}O
zsJH1<_ud{us*@Q*dF{3rSbn6zS+M{AahsqrSbcbFDZB6E;$_A^g0ry1(Ya}7^Pi}J
B1vCHv

literal 0
HcmV?d00001

diff --git a/apps/space/public/favicon/favicon-16x16.png b/apps/space/public/favicon/favicon-16x16.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ddbd49c043e06b87fe4c980588a8cba97bfe94e
GIT binary patch
literal 1625
zcmbVMTWB0r7#@k$UTm-wY!D>Fqy>wanKQGqyP0FgxY<pcRX4_TrSYZi$;{c^Av<%%
znc3_nC@sF!cmW?8E27XRr6590iw{K_X$3C@9~4_{OC(WHsg1P~ty;%3dn46qu?J@6
z%sJox{r7)*cxe0jwRf&%7-oHXFf~HIw};Q_Tj;y<Qh?}ZjWhU|$1v+QhR;pRE3bAi
z%&I%g?5IDQc?jyn5|Ba0uu!!eie{MJzN&-taqP2WxM12Ew{-Lv$C`%5?TltX#!2F$
zIXLCw9aBSDeQI1+4X*D#wzmo?frWj<R;`ll!K%j9cp=?~$0EnpApW?<B|?SlXl9sA
z5*M>E0q{BiG8<O~DW)hf(9Oy~1|o=xlFUmn2oxyA*~a3iHrL3*k<_+^F8Zf&Mc;Rz
zC{`*Jp%M{@TM#8xRYf3+vdmKi?@ii1s`9qi)nrIvPj^knH;K)LjA)FMeT}1*)?Kii
z7Om|y!bAfmR*@r00tj8I0S&!{bINY1rrgj)T*4N%eUD<L7S<^epLj*`FVwB;s}#`C
zW-=`u*R;j5S}Ht$V1l~Q2*@?jUUt&K;t2Lg+12sD1U0iO^u~cn7bBmzSwc$9L=87h
zW@Sl`*}Hd|wm~Z1))fLcg?y}WG;1_p5+4CsNrI9B75N?zg%MDPW{6?tC;thRAplU0
zUInEkV;~=07i{P-Ph1O8hfNC=u;|zYj%|ezCP|67R57(KvhqBgOb)vwZ<gqVH?qB-
zO%Ehvk{XNgvLMyW&17KO_IzaPIGxfs8XUni4O)v)r6<y(@X;P4&LcyScvXq2yc$PQ
z85oi($K|Gcis<FA1e)^3|CE2&HE9c?(hc*3jTzPs95g+e)yYQd?7&Ynb|sUol?z0A
z*ajM>hxx|_*ElwBI0ALrN)c1i|EP;P%p-Zff?S*^&}dz^?nG+57&dI(5Ap9V*6vm`
zcN0!0M!0Q_D*DqJcG#v9&ZVR5*=_0P=otJiol0bTUeNytg1)vbd#1T_pMgEA_MdoN
zpa0>Lvnbua>C}stkMbW)>su0S7v9ZHKz}CMzE?TRd_RRgJ+!o3c^up;0RWssSLSEF
z{%Ns|uH!R%ySKh!&lWc*U!A<`rOhwTZhUR`lh1hHd|Sxna-)ZTzxDXRGu=;}zU{#2
zb<cmW#{Br=(&xYIlD~+AJa0?qv3{AnKQ}k`<Km{pgG<Lc&UMhWZ}XoQF3m3Vu0Hj1
z5bS=ly6{`)qsur5&g{Pu%)hf-=n~3@9~^vOA!z^740fHM;s?4fRyrR+_qTWadh%vw
X--qsd=e5L<aQLSOhEi|!=bruxecB=R

literal 0
HcmV?d00001

diff --git a/apps/space/public/favicon/favicon-32x32.png b/apps/space/public/favicon/favicon-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..80cbe7a68fd2cdfb46e7ebe65c0565d596aef764
GIT binary patch
literal 1617
zcmbVMZD`zN9M9Qlw`y+_MLWTfrejQOk|(*B_MSG@_O83TVY*v;qumE#x#YRK&`X|}
zq`Ma<y%Powg_VI$ryFQt8!8){DCl5w6New>Cj}9Nxef7y!VvwU6wfF3MyJ!^0#BZ|
z-}C#w{|}_5;=MhO^-vVmn@q%}$xM4=?S16$R4TubX`PkW?NHSH4|&5!9eJydqV9b}
zPtUn?@-tAy2B&B^gSe7m5i~`Oj+HD$okuR6K{?%&n49M=Ftn~o%xp*ovK2*nJyEgI
zOl2yqR_4`+#*95hkCq@IFp#UzC8J<Eup}`JUP#v7G0)Hqh&wMa<DNizPEOHLY$H0%
z0agV-q=zD$5Do^zV2~Dp2zU_U1(6lP5CowxM7KVMNVBypoQ`d4$s#+6$-AxvdA?XI
za>W3L?Hn&eA`u>lyeP5+!8&ErRZ6Vs473?y$Wd+Ga&>Id9;1@M3$DZvO`9edR)^Mf
zT5ci^<4cOg3mouFY5+C0gR>UwLPNNw@~D6eWV#N)3LUJK$1ZmA_+O|y*S82Du9fAE
zjN9sB7#$IgJGqyb(Q?Rb(N4N-A$}S;c)?cD<X)oYfM<;bqc&1pY^O0Uv;&oDt4xam
zC(>JIbyLGd=ZRGhP)u==#E__wcnNF(qy+&AK^PRD1R)pzO{k1DJzM@KRD=LP5!?bL
zDWfT_a!0VH!YsB8g&3?GN)GXsnPcdV8(|a|uuTLL?E<UMlhJ6(##y~UE}ZH31f86W
zhJ{Et%!-`QP*;{=(sW$KR8cY}F~m8Xu4@ntDS=@z6Jmju$+E#faF|tu5MslTNI(U{
zApr@&_WKxC7rYc`zt{ff`yIAUN>C}>HIG-AUhcqz?vSXKTctCDo@=cNI^9SYsHk2U
zNQ~;mA8AbMSifrzG--=@L`eT5FPbn1XWgP=qwyT^)*bVXC(83)!8YyS|88RAZdGx&
z;iO}D%TB8zn@+PsCh2fCX=Rm1^Usqucr6(lPtWaFSL*e#&z`>LxbMRkzV<Eq_mHnY
z{?)M$uI@_iyqURDe)C;_e)s1eAFkELUrYROaAV*3ksJ0J=^g5Hw0pGo6<B>gw)Kl&
zPrpp=H$A&@V|L5ii}j6%PF}A{xeM=2%#8GW|KlIuoI7(&XTnnL%lao*7yH@Ny8YBg
z4-du<^{)A}dZM<od&BmwgJ)inE-nAr@0W&s0})xQUtawEf!7cG^5CiOYU`JF`S-0{
zPG70M5#1C3VCm<oZ%5a%zt8GkdUfsmrSl`|;cJ_}9XxxsKXkDgzj(51+v5~<eSL7l
UzL}qndQCq$ITbrKvFF9V07^v-F8}}l

literal 0
HcmV?d00001

diff --git a/apps/space/public/favicon/favicon.ico b/apps/space/public/favicon/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..9094a07c7867e7225ee571208d544ac2c73ba72d
GIT binary patch
literal 919
zcmZQzU<5)CU}R8WXk=z!5CgJ11N_{1xum#&OkPh9mmrWV2y?IjshFY_X$%a^9-c0a
zAr-gY-q@HM9LUgi@xA5wOij(ql{XkFnKCA>5ag9@Z9l;gvVoDO!R4BVH!HJ(Yv3P^
zH@r2yO~rjrSnFbIzyI_zJd?INBsNTb)$*(7v}^)`zb0=xT=4o;?bkaZHYM7^JlkdJ
zK0G+Tis68=8qj$S3=B*R98_a)G;lhAe8s{bz(6eql1UHNoSpqPiM3)$4da|+t(-sP
z&s?=O=GnTgE^Pnmxt47+R*7E~4({PUpl-}l8ohVzzGvLoQ$oM)t;+2B$T;JS!Idlj
zp2e?QzpT1g=KTl1ryF0f+zA+JK>!Zbb7yjz9)?{F+Imy(nnd#S)2~$0OV{nYnYiNj
ztH`grW}Pv7wjgZ#)w7B5edeM2pS|kUZQHfRE`0s1`!O>4EA7JKeGE+)%8P$*GP>rv
z)$H&EhC8A4K8Dw7YM*MCiv0iipEtcshF^O~h71dXg?K$<kg!36x;>vC0}yz+`njxg
HN@xNAL5sc;

literal 0
HcmV?d00001

diff --git a/apps/space/public/favicon/site.webmanifest b/apps/space/public/favicon/site.webmanifest
new file mode 100644
index 000000000..45dc8a206
--- /dev/null
+++ b/apps/space/public/favicon/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
diff --git a/apps/space/public/logos/github-black.png b/apps/space/public/logos/github-black.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a7a82474ff108faf2c883c5616c83160c889c3c
GIT binary patch
literal 14032
zcmY*=cUV)w()WhmK~y@3kkG3%1%apt1Q1XW5R|I)(4+|jq9{d*5PC-m0t(VYZ_<=*
zP<m6OL<mJfk^04ZpZh%Dd;ZBev$MaQ-PtlTJBczj)L~}eVE_OyBXqUy06;;0r2up^
z<R4PNw*vqK0YdAVNkA5HhPKZ7W_r(-weH1dRO|+Hkn5@Js$%@t8uFy>WiSd!ey)7A
z!cY{=tTlY^%>A1W&YPdR%?7y!i+rxfNvF=H7te8>`63oxIrL%=lWBRnm{mMCwB2L`
zf9gGyp02Pxd*z7(6}i#>`>@NSUr}Hda;Dlj!lYDBP?1=ebhrgmVzo)3dBfeyW&W@3
zXa8hIR7o%CX1In9Rt1c_U6|t>PD1;{1F*&Qh;o+>kq?bcuEt>R!AixQ)e*e9JOa+y
z14%x)SX!96g!6lBA?#KnsS-OTl^&q*+?D#34h7hkZwsNkAnJ_d9Ud#chC(4EIZauO
z5DjyfmpxLp0p|EBWy*Fp3S$L!kY_=;rm~;x<~esAZ-|-IzoN3}hZxgu7{I(JMAAI#
z1Vwc8U^wF$CZ%R>dd6eZ5;6G@ubSjoDx!aokF|88X&-<#Nf1h7Hn@wZ$()*dSush~
zZ?Ni6ewU5KGpx0<^PHFyL4p;cOwJOJVyVE&;IUupTdXvUC`o`@+P?OwD`O9lCU_%i
z^#a51Q`mSxLEBXBm-?GeH)`kBYu_4F`a}<~AKk~FI~0P5anJ)j#rGpVCkYtSyz}P>
zR}h-3q{;b3JR=qGu6ltA+@nT}5NG7B`NR@NwMTKvlt6cwEhyr2!Lae$8LfQzp~=CN
z(G&pAJjq=oN)uFRRNwxr8=M@i^Z|fv796sip2ZbKUwgfI=5EPAX}_ujHl{oJTb+N^
zSt!2{;qIA@=+~F(wpj;Ld@8WC(1F5PNS=jz!O55G-6+w>al4e7+bt3hv~qpo)^3Hg
zHTPy@($5gr#v24GkSD)h^GzEgW7j5pDJr_;)^_iC5GbdOcZ3eu%nM(N<sR+s8HNC{
z?8BA=O3b>$urNb(V=1w!2cX}UATvwkR?c)z4SkyQc?P@}XG7hko!R*{u93JB*SKv<
zK~vtFH}30BGtJO!QD><FW|C_LHXrtI;7m8Tqxj8Ff1wfe+)3JDLZP$p1;EJN!591N
zQ{8sXav9<PT0O+*kc-(G*S_&^PFB%W$0`A*F&a#Zth0_D`{t4?MnjyS@rtih2m+UU
z&^R%uVQmq?PW3!pim-q=aZq4|cj$uQlGwFhRrE=GY_YU!FZzRu*cDyq^%$5fZsK!^
zmXB#d1!c~zO&nFJe}K1=xpQy(rF}7(-KP9H^)=^v^x6b<;7tnjEK{OS12z@PuPqKi
zT<Oo586n=MX|QDm4Lnc+m*s@fA;8zRwQ%hxU{#8ZeDcC{XjOQtUt<}e%!MZCwf-cZ
z7uY$y45OXrRG`x6AVl05rbqdCb_BzMGormM$BwQnl_anqR<pwIPm6}pA_5}=WzR-~
zzF#bySIqEXOegRP<w}kD2P}LNXBEKW#6$dI2@}om7hcS6GD(M_fUh4UEj+}9?qA?K
zg80byAB4A>TR)?S2fv2CZ+T&?;;U~EUPAJW)Xc5D_!e%Q1W?D<`bvGUE+st&!_}ft
zqAe}U#T$<Tp7ID0_$+7o=2`R3f4G0aJ8nn(Gm`@NJ29brV54vW+)H=neR&+kK0r$*
zdeVj(B>C`%X`){-*S0(sieOp{qY^~9b1XZl?c1l~87bkVeibcCP7d)SI@Irw+=uS|
zAMlJ6X#d*r79j<(14Vht_>bAdC;T*_;G)}O)bL<ZNQN%JE12V76H(Li{}7DBN@Wk^
zk8cN(MNat+n}IsNBtyV`auTa!u|35ZigJ|k;Sij{m_5@85UP2;bGv7&?=epic0V@W
zCpLS66^QR=V%1^I+Q_bGDna*+g@>AGt%0f`8V@YRLZ>A9GBbvB1EC_fPpSLOX0;>4
z3B@DS!2}OBO(6LrBvY-}K;>2v770^FBzK2#qwDx&oF&Lz?k{meP5m%&yQ&L*&j0@L
z0Ku8`kJay4GrP@N6et6qEcNiYFy!sPYe1|UiSbJ!(cBYYp@*9<z;6BYkp|S>Q*<6K
ztCVbDMDE9$3!@!bb4gCsJI}IUY;^SKQ1{WrXv{}xVmBl&8iE`9f;blw+C;J0hvEz>
z#y0CWI0Gm2DlcmSN#x}sEj?N@-|a`AMZvTjP$bw|vK>oMn`yEGP33r>M(i8dv=pdr
zM{$?eV`;@Z11o6qLfjXkgSd|%c^5mN>Vkxhb7svnOTkZ`)&Kf^h%uCHI0y2SXeXVE
z&Wg7NZZhNv$W%1o<2tB7^?EI4H&rqBQV9n=d`H!=ZBn(Cml6#>u?s5Pd<lQ43*Ilz
zZqHqGKF)Gy079OH$977oy+t(iaNqDLyVmdC^%p^8e+Le=DJAg^1qI*D4e>WH-M>5)
z09!>NG9|g0Vp5A@xWx-2GUaj)z>lp`s^hSPB;VC>+B|hvy^P*@R$vud+2Vh-YgUyV
zJ&J@9&RFiSg3Uf87by+vE50`x52_v1)OvEw!~ol%;MAr4=5N=wbwS47MMUT=;#-KI
zeeHw>#EF6){)DBL{{#T9`jl<TjE?&tR!t8-bf?}Nh{daE+Poruc^<OK(kOqZ+i>+I
zBQ<c6MT{9Up@bnTb1XPkB_PN@rQ48x@SC3=KBt`EW7f|}2Ufn*VAcx*0<|fI8<mJ^
zp}lkfUk%6eU~=+K8tgq+CoWGteswDZ2qLS9@i^yi3qSXn${QEmJVMEfKzGhqtpo}6
zt-s8U?qaSD|1^67;$J6>*2><>mbp$*{@M7@FG&~$5!AFtGVZ<kMx4?GvrF#|J!<x}
z0Qzcu*G%o^t34zXcx;3RG-t2Vg3nXkn3GP!Iw+uYi)bYZ)o}pyg(=H9Yf`Fbfg@Zq
z#YdNF3<5S?`4N(chWFpRWv@UyBMyUM&sPC>QIU=<)SKC=`9^p>0Gm0}?hC-Dpx4;Y
zBvV$H2-v`oq&~nQz#)eS4($-scP53}E~YHX?^6O*CR~NBE&_Jv4#m8K+Q+177pgG|
z5ZU)$S^J!Vf)!q<txR9_(!Vx3ouxCG>snqMh{HxEEb-^hJfH=FA*Xg#ko%GsA?AI9
zJG3D0_C|^#Y#HCH4)H8JP#++K0JKQ6121)Rifj8~6WwsB$3AbECdi`}c4PYDSNdR(
zzU?L7CM9s{&{j@)BtF)^6oAN$o>v9HdCC|s>Gvqu)cXNt`7>;ga2*SPYdjG0v^G>p
zvZN@-BDd8fp1VT8uZ71`G69A%{z+3j=xFlV1WH_w?G2Q@Ga%ze_{aYd)A~^V;1-L2
zsy+qzw5)#qT7?GeSHSV+h>^Rp8+<hVFt@LBFX%qP{D$-cKmW9qY+PK6{I#fhysft@
ziY5(|C$8sI-$JU|y*s}0jl;;phH)k(fADYzo&5dib6J&9m{1E&8<pJNY8|0>(2VNE
zi`6nO;j-->I+&wZ29kYVW2aQRZtPmR=9?ywm=O_oXPPr??1#h?tgLU`*%($y@$sh`
zJ5yDRG4-gVT!}g?wc(9chaxRZ#3{A{@uQmcd-z(jYCTjmUu#fVy9h?4AaF}u6x=}S
zWtN5<`n|&@y6y*!CHRzMZ>;4)_P2|e4^k)dtRo_jB5ci1%8XM|6*DjWS!FmZO<7S>
z-ZGZVw0J9@+#nb^X;+CIxvD-gXjar0{ycw4T`f|3%=qd`y%o)P#<LCmz=S`dk+_9h
zhqpp|!0}pRaclTO9@x2ytx&{;FZ4lpKg%I5B>Hgfz}ap^9CohxAQmY7|J2^`XYLtq
z^G$Asx$%^c!bhDt|G3W%FdX4c#Zs+AslJ-k4ee;SxMtaHivRxbBQ5JMePesJp0MlX
z^_cP#(`qBfoPrR#pV^*KTe546nd31vV{G5d?7duG_@=%5?)2bRSJWA^1GcHmd57Oo
zVwZDjUivKv1&AE}A@75CD=eDsrHj<ot%dNI-mP#EQfjWpZW9$U@T)Om!tRw+0iIMt
z*1~al50%gFRXJPKuoT`_I?oC-@5zUuW|fu1n@=K->~OG#Or6aVCD#(<Q~gG_tK&B-
zg!+c}Gvc1Gf82QHSGf@TO*r9N6O8cbg~PAFCo05>;xrF?vu}6ID+11ph~H|IsaPeh
zNl)QPD2(4@wL8%MX0^Hg5Z<hefSZOf^E`JhwROu>+p1mq@~)$F{GoD{_TIJKvx4le
z)S$$3?N9C&Jai6|?(+Mq2x*<BNKbW!-|CT0$I+(VzTnj3nPSzWl_lTh_oC0M8&A~V
zq#=GJ1YB9_%8_rS@NBe+jhR=yllX@eYCYXSa#gFEzE!Nju~G0=ZUotpwF7-<hg4Fj
zLOx{4P{4OzQnY2h)RQ9Ine*c!6UIl;nwbq^{|;Mr-baWKil4QJQxYm_g)-SR&ZR8)
zPCY7w>g%cIjNQD|WjShURUR;NQj6~^_?jk4cz}>Rw_AeLnyKYWv=3G~x6t@LAA0OT
zHI^Vmo(;9vH)edh9j8>E@zq~jzJeGszv?PKGCSbcxh8WuJ94UAoBD^_F5<Fp=kR~O
zr~N8<9WB+%oO}~{MN|eF^zh3iH)Ovms+|f99I7BRql%~P^uhG+9W$Z2IFovXzeX}m
zOw*i{nvwJ8YP6f3vt5>-9jD7|l{7nA#dk|fubFlGAQ)8NZl5ZTS}kJdxr2s6?+cAt
zrn*8=f<u<upGxTiYS4#n^g)KToDnedWna(M<Ph0PXJqR5$wT~8<@hzXFq<!h5z@Ag
z%d3*VJT=uW(=zecmVVPu9GNslg@xcs_ito;w`%2g;zRa?*Q;PekQbdX%c=nb%CZN=
z*dblA)6<Jcw%{|xRUXD9FP56(G*<t#=o+ms5^N48aP|@A5(+71fRcE;v_jsA?rpEB
z%+1bjq`1VFTAg5;t3LJy^9qVg<nCD-)UZ%|=e4o?{n6ux2K~(VNr|^eS84iwL-U<X
z9d#K8^{Hse(x5jZe;MY>bM<~&@!ZKBtyX8ZkY0VdYq?VEmJJCq>9ogw|595Lw^Va`
zXiVRtkwii4fGbnIhib4RnS+!&LtLesuT}H5ioO3{y-wHHb||@V1#{xkO26(<C8^ut
z`Jt-Jl7G-Suf;ma2f8yAKSl7EimRs%shr7|9p;jV8qzVZt>Cez_4SeQ-;+MdUAxyF
zw_DHqNABBilD=tAnSb$Nu4N|N{v`DThq+u#+Esq8ZG3<2{58}&2meDi@64E1OCA5P
z(m^AfGI}W(bAqcBd(8PoAX}fZNXqnec?jf}qv*j@@6W9GQsG}_V8QJPvx&VkqDo93
zC@tutT}o{-pFQRDKFf|fEFD}WTbx(vFPT4HYcj6oaG^mnRazKrG61wFrQ7)+iK)wl
zZK%M5$c<GdB}z}PyxhzWgaS?gJUE7zP1ct$hB!r1*;r0BGk$-XQ%N;{24z??>-r;k
zgR1SgNk4e*5#)0>WWQ4t{rk9g&-LjXeVYcx^v{ukKAZxyi8_GywHa7-)CoM79z7Mj
zK=E3$40<&N1iu|B?z!nV`<zqbEINO}s9CwpG0+<PR7?yk?$TA`8)CGkM;|`;)p*id
zemOXfvQ5;ZwSZ$KG&s4ejLOD(*P`q^Jpj4a-Gx#cZ7~}23j!#Ux0c`cDOoiOA3*^K
zwxh|jT0YnpYSW=8Z^nKV2r>K;zy;aY%DpSQS2NAwd&+i!9$t=$WBkNK#?b}8_c|Iv
zug}o8Q6W~p9Vz@1UX~qwfRu19RSnf6(<hWpj{|uBHL44a_WiOo3kIp$nmfkpyIU_r
zGZjdI0L2%dcI`Y6ePcUezYTz4>DET~Pt$i-K|p89`blub$6S*!N18s}z?yfhyfZUG
z&aS=GXwf~rN%W^(hX8)HmQnKX2j2>n4aD&*QncmY6LTwzD_)5BE>Af>%RI1)DzW{+
zF}{BLiJmMSsId<pYki7I!D&j~?O|%OWjdK<78ItPr$@zxx=S7(zdtFyCkpg83D$B=
zG+@3XK<`TA1ygkgvuv=|o6y=`VzGjv+$1|1F}HCwA&=i1f|gYH#U+;=JR?AJ_A7^P
zXG?^7C)2lG#vL=i-whK6aD0&X3mfGRe>|Hd&Z0v<Y;IiN#ytu$1WLS4DCSRBn%?I=
z`0jEHb4#SaVVV2*1-$&fP=h?vOx=cPA(r1th`!0?Ib^X5jm;C9Q!%%@fe=u19%T?9
z3`LrE-7`rBS$Dq9h3#&7QWTv<8Sojt|0(f4fO_6fG~<3dnXcYG27n9cvNc4@K8@Hg
zRVm>Bb`4wkswy&2u@G>Nw`cxBvif9mngl!Aqx+snSCBP<+&l+K+UrWy%m-%`h<R+)
zN`6)7|ETvZ@vn#vZa31mRU~j2e9`#q*AFC=rw=$fVdE!iVQWsGsI`2&xLC!}4E)-f
z7ali#9hCh;><4a01o-)c&X*$ZI!WA%$K`Od8k;=?PKBH!3>cMs-5ngL5wgi-A8Qhq
zg<W1V2<%+`ZE8JKtx8!g6&Cu9rpksEeskAx^Yx@v>BmDCCCIq!fVV_%J9){W^@dYB
zJ<3c!mVc+p!yxHyOB&Kp8B-r%_Or)(&*Lg-+W58PgttER&gA<&T8=K@q(bBBx0gMV
zt7&d>E7eM$mN>|iCvyXqu*j)CW&TdGcg!Gbp8JQPfV)OIv$@Wc9ld~;$uFt@eoCvG
z@qp~{6@9ybVM!v1bn%qh|86O7cWYwv<x6&-qK-!!4G(Ga-zpt*@}sdq<qSL3-$)O+
z6L=96eXqw1zKzVUu~Oh1b)(o!AoYprr|PTLldgmLE=S}xcjxl3!^fiZGB6!_*nqV)
z2{aLz_|*T-G?W6)8$Oi^IV;v#)Spxx)BJA5OhExGa3AF>OkL6-`xP1k)s)Yd?)<*(
z6*Zw3Yh|oJ-xh(FNtLQ+P8SesW&>1Swb;922P@ya-L@A>%3~xxBDdv4fm7-s><`Vs
zLXn+bzVGA;xP(_uyT&&y9?DCOh#dg7@%K0m=lc>uJnsD=HLcOkr1NcYPm>VJakiVZ
zY*EFSld#^%-oy7zX{%|bQ6e(Btw@T`!!Xj&*UnDu3^U;}5U!iiF~ajw6pHM(H2^}2
zdidsnlIuF9DQg>&vD#J;H(mal3tZ$5BzUiOo@Dn%X}8+@3)8pB{7urqf2>G81#BNA
zVGoUnT5skm8WYUGUe(lH&vmMgu~2pMfGZ#}H|W+=$LPX=x2mip{}7|l^NMNhnheWi
z7e)8QA#^iXLb8rtIehPZD>qsxbHW7Fc+Po$gb}D;al(a6<4KXoThX4=<6BN1n$2Vu
zWO3cRq5URpeA+TJ8&N<#Hp+FP)>6pC^Lo-T4aD>K2TUiD7OpM$qiWJytRQu#8`8U(
ztiJ&w^?dLtz%LmxHASj2b;BT(#3A<sp6Q-RMV3#VADmPQ*C5dTSouBONwgkQcWF=B
z=m_hED|4I3)8uR3EtcdZt($W=ur2jozR0TQPYXM`d0Qe3d)4*Og%bWdM8;XQhRdML
z{;4&6+nc}Bq23{a&Q^q%K#;Mj)aV9RbKGKcDTJ#%XS=;F;_=no6UgV!=4#3T2nnUg
z$I#}{9oju*%5wLRz1*08e$JzA>FbBo$vg(H?E^jN+Xny6gkCb2qZHJUa$_khmOs9z
zY)r?VwM#4Lc$Tmn)_Fs{rZ~p|O#gtaZqm_s`90fX%Htz>*_Moqw8Pb<DfmPQ=?07!
z9b~7jbDN%0e*SJ_$tw4XXV?AaVdoLQ`T!_N**MlAGLV&=p6Q6<KU!7B?Ii&>gDxsB
z=YL>VNxrr|yi-AX0M|!avfq6#9S1>A->TMN4e|XC*)RW2Q==Y!`qMf$JblR`m$tPb
zmiX{2`WmL&SbSC<Mw166Jw1u7kU!ynNH%3p+qcs>ue(j}#`H~bv;pJiZ<I%4@^H--
zE!*t|4;_K&m%Wz!9W}B%FVm5z3r7}iF&i1cP4{tt|6|)dM(}on(XK+i#g(EQIlCuN
z(3)xmz$>k}<vBb1;4vj&q-&wHkokJxt{+JjB(3CPOy4avr%yh;kvFIS^yT)0{O|rl
z$^J@vP~)=f)%t{@+-*rkAU{)I7J!@itfY<Xik2r7Z6?*Bk6MAA_Jx%>HG9-Dl}$5+
z`&E&3g|tRJSt@X|F?uMkImoeOBMZ1CpQ3aYSqx7pjq9F{a(>G7?+#=~d!`*wfP?FE
zfd)YN^9gRj+mgIN1JcXcW`$9IC~((A|9Ctdq$nWX49G{&IfnKRKlp=yFBIJ9t=lNN
zYDJ!N0A<U@*mD#|WkaZ3SFht-I|m11Gfe+>VY(b?zHK#jbV9+jFH}I1jFFcpD#ldC
z5%-s$zOAvhZrMq0ks3q~iyqW?_HXC{Q;A>i?AysEfz)-1`LR#(t-=r+UK?`271*3%
z2d)3D$MbU9N6Kjpl+(F_Ba6#RWI3}a=Q$MsnbLah?|+d-Wywfe!T)-bZICb5MCM~H
z&#lXg35t6zx%w>W3TU!N7*dnm(U}nQ=JHGyq%t`)AmtE;RS{<|Gxeu$t9$N#nWpTY
z-i9d;v|GCqz`l+!EqZ;0_t+v0lo;drb!<%k;j5=1-UQTqVkZm1e_sap=*+E*>81iE
zX+oTE8@Vq&I^@0>vx8HoUtpNO3>*nT=+N8%ti)Nzk>AOK0*3;K@hrIzm2XXcWs+Qv
zgXD#hVnY%D75phB-2eZ+N*jO_DKa?xf8t=c!Ks)B8L;K6tQF+{uhOPxMkZH$CL2@W
ze;njjb02yzBhT^oCIuT>a{FS}j1nNZNAARKMo<Z|_3{CZH%256TMD`I>c%+02!Ys~
zInX+#X`q^q#jmSU^!;a0zHl*gG~R~-+Zf5McaS_zQq)QF4|eqZf*D^bQ>lNtK1;5Y
z2BCZ5#`zz>*JNxSH6Zng2~7@B(!J<r0nwZK38DRf>bgBG`sT{nV_`D)KeC+U?>SyF
zH2E5-O^6IUV8;ySa-ZtE4V%3TeB?2u=&<?oaQLGp&_)UsBZEb1vx1{b=NQTWg+=kW
z+CMbLj(;qx=Yy8X^8#hdMdotqu-o|8Ia#JKGXO!FtYuTS3Go_pT-#(2%u6P2a{{sN
zmoTOUyJ3P5x|m{F09&X%^)#ns<Dv&>%vaj*4jy!y)6u{6#x?kf$|kVb{{n<Z^FKuj
zC^QjqdZ!r1HvU11ipsd06DF-gNoVJ*Lb+LqO{bm>W=ct})+2AYdAgGF`?TA3J(6HK
zmzo1El}15nEYt$%9Dk(EC4j5<Z6KX?3uH?Wo-ocNoz=w-9KffEH{W<^jjM_JvS_p}
z5c(nT9H#$og>yrlb>3g)vVv&YrD2i(Ax&Jz(~(IIK&VpxpSdNbc6a8QJS7`>1p(Nb
zAx2lSV%ubFxhyGYm8|hjQ;87ZjjKj#sJyUXv3rJngIOZmVomKSZP)4p$BX9=X^rEE
z+(%&<OEjUrfz*Pd5UQReE;Re_*vp+kb0Z2iRsjY8%PV92&_jiOiMB0;IoDvw!tZvM
zQ`&g;1Fcv6T<}4^-_`qkwsMqg#i)N<*!@Gc@4S2pAYpRg-De=EqK}x2uwag(61?Lc
zy2hGnMF%QLvN&4s>9;&2KpSsqV&EBZKI9bq@e$kM$>LqeCDug_l3f(dcS&XfUneZ^
zzY91i&?Qa!_;nL!&%3IpZ(FreKh#&1R7P^7UqWZ`2|CLu@l5~Qe5vL?diP#*A=~Bg
zXG4mkI_&JPDgZAFBmBF65K=L<$ERnkauom+Y}s%CI17vIcCHgC9n>v2<%*RVy!G*9
z-Jt}<wg;LlMn3A^ErpQq`{>Ihk9a8|@b}X#r@VKAZm%fg5<w^N#XlwDS2})vHKu4w
z1zY6sHE$BRZy3cm!f6rtxJrjaUf@<lpF`cjv$@Fd%yjS0nmTCMPw;-q6m~w37`n>|
z*ej}uS2SNSL_eQ8@$dS`iJy{q;sE(sfyIW(l5H~RBKbz+Ho?n46rvlZ55iOa!OI!r
z3ya?uDJFw*HaQu4C<;rq4&z^-V5QgY-7M&lZ?07WA1W^z`v{cFQgHmck$CG@g)J?5
zTT~+A>@vpq8%fi493h*0R~eBe=sbjHguuVy>^ENz>Z>!K{C50se-zTWY!K8+1LRf1
zETRm{?61(nEk;vGTmM*-Sdyxx@14y~VFw%(-GmRA6mhbkT3x7*N4MTX^~i<>3I_a>
zZYzJeZ-wXlcTU~@TP>}4BRG)1?@%rO>3ib!h`PEN$k?JjGdSbfnq-im_`ElAFmd;u
z_3HyQj}z9%$@ea$JgQ(u>t^-NUnte+**sxKYc5%9d{NcKkN#6*o^q1UxqED-WcT)j
zY+`je$m;PVg<gRXI4phDTFKX0Y@J$&Mq|?Lz`OWH=)el`=RqbU&9+hXqM>_7?9d$*
zK(Wt7_7~jOT{q1r>CpkqY|SI&peWe_-*n+eINtqrd)1%WT9}@^J1!_|;fG+%lFfo3
z;KxB$G_gOl^8<#ejVPp;trs^Lh-rEFui8&02mbuMVByTaN*GW#vixzNwF%>2f@S@u
zGM5@!$79hSliG%HNGOD@41(D@i?IK<oNGK$ebjw1ns5L(qW|RrFbAuLZ}RX|@!kSF
zy&`N`QwghuCY0pMwet4Rrwq!0%tMnZ89<Sw0l7VX7f&#uMl+xu;@8hPv7dZhX=v6y
z3$}O!#dA|hQU8<$i>uY3b}m{RIVK`qp6Lot%NSqy`HXrv{06e{_QA1_U8DAg#`G?}
zFgHt^!M8>|QizRIAF`1E$#Zt^J(WO&i8nlIl5nm*rWh}CAdhtGrqN=GD<%a)QbV|=
zkY`p#<x6ZI*HPk=hxuWx83uqHs({8;1oA#4`#(;f8!#Vj3tOQ|O4=%!z*7dEF^VAt
zsc|!az^as;ZPIyX7nc}!Wk{L?p}n6`&TJ!rWQJJKCwt)P-l)!77}GZa7@t;bsPdB^
z10rBhc3Zl2tzLoh#QknC7`9bGgyPJ?bw^}_AMCgUb6|p-Y@&lf8|t@8YKS}`ZR5$(
z5)H%EzX7-KAG`cf@Cl6$S)cn_`qnEoe;D96QAND+w8ohuxgEN5Jw(X1w3>ES2MWLJ
zYan2o*`Ji-yU6B&P%Vgk#0IyRc5rWfx6vnJ<+_tNV5)}Nqm*5KGxXe*(z<Fx=L&)G
z^OOT-J;?{`WHHy;j;xkW8>qGJkkugTuHH6-@e^wnL>urs=KifvaI%tN@=}p`8jwLq
zUHgO-{(Ezlkz&F;Mf}vw-bD@NtEK?l7guhQ&P;HN5frDc#Ctq{R^1#Sep+&z3sbpP
zVnmbTdlf1A9HJYo|LgQFp6{Td#GW`@`iDj0;$fW@zOGXho@Zh?6_|rRES+9>=Qrhl
zJ~xE=J{puwTR~VSgoHFWseV>xVYl5HH)4zP*KW%1#yRkQdHYlOFo_P%H!W2DS}()!
z)Wo1aMX_>b)U3<niR}1u`J^AsDO6dHd9Oq098psl$Bw&wT)mzJSTno&k>k&wU&Rzc
zk2A5?&QxE^gWAKgrJV(ijT0)&43Olc63*fzy9HZBM7cjOZoG|Yu~lnLp4~{|8M?Ql
zZ+4HdVVVbRZA$XLsJ?-#Dw^qCXfD>w^IqTlc#0v_VH07}H_vdcF5_%1O>lw=!cy)D
z)lUdU;>OS3U<~6)SC1KO&k#8U5{sa3?>>-qPNkcK#q;d(o`mWih@u$2io3_w^Ixzq
zemqcRB=3}U91*0nS%#s}8P<N5Rw_tXEh!cXj5_|{)_6~L(wp(DKti=eSEz^By4A<Z
zxkoe0ab<cLwxKQVi?tYJPn}_^=9tax2P#HWy^Gs+2QR22+h{Nv!UQ=>6K0>q?tEV&
zUyjqU4$Z{WYd5$@&wGr9EJ34k!hI`)C>*c<maf``b4sUxr15M;QzPfoU1g~)YRS2h
zHwMZHB<Vx<obVR0+3LX|q*Bu(=0%oHr<(}TiQUP9J#tKD%S{jUOFYW-x4u$p^x>Mf
z=;0%G4d&1a&yA}?3Dr*re8CI3&bVLAlk9W&T>rQAm&FST{jOv#-73Y*ZJKLaA{w$I
z@_OoeG*CPX6&h$&H<wi_tND5n3#Qs7w~22#gBwtbAG}YcgjIw+ld#TL`P9P?ZxOT+
zxm8`V@HLt#sX2d`dar_k37g}){cmMiE8@>;X)gcqyT2+oKGwM5X~`05iI2<DL`TL{
z8s*92$}IIl4WoYB#bLdQHP)6zC)qUki<(4qGd_2W7}xFaq)x20?YhM>ynYbT^ct(+
z7XGR;yGZh+cF^JBp8xN&YYKJWS|UPcTKZ5z!$WgpR&O@bA1q9-J`Y0DEOSIh5Z_Q)
zD1GC2=kC1fH=X;zIAhbMCH76?>cMRdnk7kgb-|_Am|eR4?bHO)S<5RiqfK`7*L3c9
zeu$7&kH`7@bFZm5(CSlp*Ynp{^Io8D8^yTmRa4jVuf{PqZQ~1(9u%r?T(089x$8zw
zj$iV*Gu`4Ab8eEBnfXK$ytmvarmbc7p<(Z2Pe~~>zq#<%*8-gS@-%v^B^ImiW(#}2
zjPuX2`+#da`KwrV2D7Mac>f_j12g*j&+>2R_sDT(+<3j|KkprSEc0X3FS|K4mwS_E
zT4k#>q55H)t5|~CCZWQL{Y9~SPT#|{AL>l&{GlKD=A#Aj7=k8citlsTWHw@(EJ(_T
zd`h$KJHarvd;L{@3DY9{+yS}B*A{`i&_B_LD;nh&zT~~lsg4uHzERHn6m~(wVS<PA
zg_okG%USMj+bg@GVQW<l-z3+h5p#4$Gk<L?Gut{Y$V`7brKQ9{nurTfh?e%2)?j89
zf8y<%^<B0)G{HTWhdF5eY(_-Arhf15<9`kT5)gce+uQ2H%C29EKZ#I3NLx0&a+)16
z7ZfaSjLP@#8Ig(VT(II5uEJS{Gk=$+IUIr~FSW1)WJSzbW_1Yim0II9qF&h7-Vylr
zK>=B`-h31Z7VBI1xxaK+dmLp9^}b!wpbw7s(}QxErIPYKrfxxaSSLh;TZp!dBLVxX
zQI2jw4xLEUR9QZ0R}Xu3+s%L^^X-tPcIWpW+>V30_SDIM+0$A7kXOflPnh}?Y25W!
z)bwOuP#M$?`MS>B;4d0xg+4U5c-Ej^Ydv^bA2qqlz4ryB;mw&Iy6AOdT!&iv^Nx~m
zf?3mpKY!1PKAKI-t+IcKnj9aL&dV<nnI=t#+g><Z-Io1ZC1O`!OF%T~$deT}GVbk;
zU7y*~%jw&Zyt<#<bw6j7<@;Y6Vrt}Nfgf-Q=UfUNLUxWn3!mHJ+0D&b&Y_A;S!aFy
zz*l|-T0DnICuqOA7PR&O@9RQY)y(aC@TsjbfmOzx%Sq&NuCeVV*~%zlMQ+dy^_eI2
zA*m6qi~E_&4cFCa#tZ8UY8{1g0{XhI`us_}&a-kNAc?9&v3GUM1+VpWq{l8e4QXj@
zC7KIJ<=({~-*4x*$@F?9<M-y<Qi;&fk)bK_<$H*S{8RVbSLcb00P9g#N^PFfpk<>#
zWK3SRD~e3RDfv=+Yg3KgR@oa^Hc~%nB8T1tmP`|U<-<Zv9Rfp^(6d=*`sOd>zrnoY
zxb$#mL!fUC6@EF)xh>qj%13}((JA)&DEFDIZWG>x;fNay&g3Kjiyr$M^Xg9aUb3u?
zxN-h?I_`+16QKO5RKKo1K0GiJIk(zZwgL`fjeAt{Lv-*hQE;y(k6hQ^E*X+C9_rd3
zzwdeF$(ui|BRcHb<Q#oFp>XjjGn^`NLiybrdQlF=6*oeKZAtRqiv~ok+m7CxzeOgm
z{J3H$b^OM)i=A4%gmubexn&LJtigY+_Oe{DC{^j@bU(v@m`tI=Nf~ih{fv9MVd^7K
zx`LzPY$^gipw-1TcTL;~$n4FtRc=f-c;jTT6@!0*UGgmBz0dHst9fa%I?D^>H=h;w
zxj%lP=-fLIazfq>@|e}yVp`U=mg{K(Utn`1>StDt@<|k8bjw%s+*QWM&)1w|M^o?q
z9qgz3Sm3S`m~$yG8amJKujS2OG)GL5cTubw5iPu}|Jdu(0!D+g-S^u7k=`?7ITyjc
zsmzY{HXbV)S$6Bc-t|#>e&&0yTHjplGwL#W&s;m1t`3VBTfb4tjrOSb3zPT@A5~*h
zNqUf2WfNg<L>qxRMCkKw>tcOo`|G01Ru%FR+{LKeeItaZmM6dO)IGc*B;;cd|0Xr!
zLgm17z4j!}r$tXph*Z4!n1r7+)S8lydX#f5sr-FwvLns(M89y7*Kiey0$%VDS0OH5
zylzbLLdf1ELruyITcBBt#+9;oH+h18)VBXIkZuOX>8Wl8dWP@m+o~`c+~jUaleF2N
zK>1xQX^mKdrG34^PO(=#m{Gbe?>TNCVq+1TYnA<+mHkmGJ`L>{jqESit}D1X*pJZl
zp0}0i5xV^Ld0ou1N|rn(XQ=67!~@3R#IKkTr`*8;(-i-46aJu+j;Gnz;+=$ZYUSx5
z#MGz4IU>$q=y=De4y6xjKKE@v5RTMVM$azaasbfD$m4*I3!bJ+%zq;z`$D)8JrlO7
z@=4znr@n9I=dhYx5Bz8kpcXMz0kaD~aKp{=3*EtHLObPQ*wX}`+`@qu4&%!YS}Tbv
zDiwEGo@r+d0o`ggmC3ZkrYzOI3T3VmuJ)R5wuhaD@=si;XB`pkqo%U?yusP>b8$NB
zbhVqFudq4|M}M;-4&g0>GQV7fOqRK)gdbb5JkGeuVgKMIpCCaN6RzcT^Si1{1=Tz?
zqP1eh?FEb?pV;^OzIx|cd1~DCrfWCz>7O8DzSwOJeXmG2bRCFYNrVg1T0dsUauSLg
zAQl_>3g@-d8GVz9-1}p(6k@5N`qh=zuG8QwkMFZs>HA;gA)Xou1gp88N4t|WbWv0w
zwr-?5Y3)}A=*M{|TF1;=y#K|4CuR;2!L<aCrztyWj(KePMF|qmzv~rQDmL`RY|R&-
zcgyM6Q0X4_x;R=LW^$^+Z*s2IQ;gr>N>2CqdXUOZPic7XXkxXdQlwR|{K(Fuo7^_J
zZx^d4ecxfX3e2R2--X?$HX^aNire0;$g+m`nA=zqmVB~^cuWf~IV}n9E;5x?A-I<z
zeGw9WD}BQ?bm`NrhwBMnj{)52O5FKo2^hpvAj#(uc_qSXH%^Lz-D$ydRebj=p`;{m
zITfL*@O-tXmj@FvFiQ>#;uMfE@b2kU*0TzhN8U2b98NsZASy1+yv@vOCP|rczUeWo
z>NJ0QjY$`gZNK=cJ2hx(nCgB}t0%e3eikg>vxM(CQH|Y6-Y6F%J4%0wb~4LS%-sq^
zK&3Fhf8UD1Qx(*XBx2+Byaf>S8=BxUUfXJciGs>(iYL7%)AtWU<9*2WDL}>VH0qF&
zUpx}z%qJ1Vq*{K5K)7y$E*^2_0VC*i!0r4^)GOm=N7v4X5%OX<p4CZ94V9xPitIta
zl;!AHqs9gE{sit2jwi|3uO<q^%(;*h&Uz$G#H;MIA2;L&aJ5wBboB81UP8zVvHKea
z7h<BvRk;Fa>ETzl<`jbzdz)`)YK}xKa3g}gvIBPX^`A%Val1EbXeJJ~A6&qEfRR&$
zuC?oeKd(PrmZUD_5h0XuYeKh?+j+ju7sc4<;j>$2s~yi$Vv~G~mRNf;m2crh2B@en
zLO!dkSG4e==6SbHnuVPG5wCkf-XJ}v=q_9&oI!+QNM{iGupkwnw_CR}Q8vtAoLu7u
zc__|ZJteVy6=6B@JYL)Z{E03sEu)dB4bK+1H+f?xru6(i7JDo0%5@R4Kn!ClWrH0P
zmo;LYW-lYo!b)=|Uz&X$V3~#zWP*@#T_*-VOr&cie}-rObo7%Id#w*--py8d=4P+$
zxe=(pGHJYa%5k;XNF)UzEU|uD=kJ^1X{A(yO7C9U)J+WynO)dnPF0+>JC9iP<=He_
z`7?JiyWk5cnk~ibCXv`5Pw|mc6YIipRai+VG3h7sw?{9C(!(Ps6f#%R+^cA19DELz
zb52lk*mjN^2m2$^rVolo(3&k@zPI*2hY-A@Q}z-R6II;==;5ml7Nbw2u%U<@k*hqm
zXLv^yfOEqG{Kefq3Jdu1n84U3OFSu5d`{~}8U)}McBQYxx3{W80WoN#<&CE34zKvR
zArPNZ1x57_?&|Qa9KEk-(@0R0j>r^eA{WHT>Z`UNJgANuEVC%oJ#aHrF#%Q(u=RxU
zq!5aVZFo=4Slww6CWyT&#I!4b&e8>?)xF|Em#=@nFBIawe4gg>kWuI-|0lrijc+XZ
zw*Lt^Hx)L}yF;V!kK6ejQrVAs=Ps*iYvA#1{KqW4^GZ1oK@HhS5!cXn?!Rv=n`zb#
z9pP~NGCw;cfuIcQxHz`<uI!EwWV1tQWl!(mA-zf_7rBZ6*+ho5%Kg2zygc*)Co=CE
z+`)66OmF&&IqBm#swis}^$7`)E{~Pkt?2Mz6DR}d@@bx8R=oq&R=$7H@a|;4q|F<!
z+2BV3G-%KDs<C{&K7NpGeK}E@ejiy(%|`D4&~h?0T_JbHPUUpLCvV4J8;+KAL$dXP
z6hFDakvD2)nW(5ayGN_F%sES;rnPcojgyUP2+R-lk(KU4^H@M2+xqIq3V+)@@-=nN
z76aH^utIE9Fyq-E?C82We_Kn$fiHpj$C)8u+-f~>c+w-b8Zi8~YuOiZA;ss?Dn-*g
zH~76^cvJm0{@Q5mMIoP%E!Det0gRPIv!F}2B*+txov_uIdmFr<MZs1Zg;7o=jo}&J
zYG0*<@3>dDxC%Yyl~rxsSHI}2gAmmX%qM*+f+zsE?}H0F&Z|{9c@Gw}DdK5rIp(Dh
z<m`cZaxoWK6lVWFgl<erPfCk(-nM>U2L_kwgTY=Y;MBfJ9;)5`6w;N|%*$P}7kxqq
zULRaq#hn!p{z+C`=jYFZ;f5(FQi9O>*F~H>=LmsqEgyWR=!PVl<tEz{fTBkna=DQ?
zBBLOBP!{Pisr<>EwjDtRjwS;y9d(%Q=h`Y@bkAj53y9oj_k0hdcH$cX!(1vO`>?4}
zQb?~9$|vOS{0}!~GPSkwFHBgI{7p#9QA;G$hi@{0<|kptV^CzfYxmLc-$m!RY*=|V
z_6xZIO&V>KFZ}ZQBfK;WmHx8(sSxDzl=N=Ypc!;PqFFAGJUOM@!%H{)6{7s_DF1!C
z-IqI+vHbxvD@_P)`A!UX1Ob^rkN1UFC8rrq>yz|nSB`qOVz9!nW*xk>o@|U^01Y5m
zOt~DL#pD!T?S(I!<upQ@$sP@^#*<)9iN>glIU6Awr_@5vy`ai_V5U3SX1E?$Jnucv
z4Ue*l_sPP>LXUGej73yiD+j6)8_B`3nd@c;f0**1PmpsVd;O<qkApt#W!mM(h};Cl
zYxu>N$#g?N&nq3fv-YdStk`$>@0%)d%x+?J7*foHA_wwooki{a9zeXlJ+%T~j>wsI
znhFuPNFem<N8Ut#{(cw3Qv2}eL|Zyvk{ys7o?#hbrAW1B1O3(50GjyBbU&HMAivY0
zoX5avLJVP@q&T3O^x)_946O>5!4hesDn}m^!g<C#fg3P>*Hvoo6-C*%+2<rvscc>$
z=M}0+4Ak=xLH;MUmQrcn%YPXs^($EPnurZuDB3?fjBwpX-HbFR(F0)%!wQXfr_AGg
zY_@*cRp2#YfQRAgbtSS1W==P{CZTWqe&-ZN6Eh%!7Or{+Z?d(xf_e_TGHzFNLx(kH
z<Y$+4Et*Na6!9sGuxtlM=FZ9Xk2f+UCV%NpEk^sr?5*G>>EM&$Q>GoKF(rwpc)xp1
z9y+5Ug?g%1czl5w6S|2BCrkS=>QQ!^cy-xN<e6(~J`tV|Va}n5FugK1@R!#y0yBM~
zXatopS7{T%Tf{soNvOhf-#G*Hb_6U}NN;-v_dG3l`>E7K#&jB=EN|u_t;w5TKU*eE
zbML#GtG{0iy=(j0rQ_=6@lo2^Srp0gW*(B~VUPSVuYTUYyVY)4k@WM!`Pv!;#<0B1
z7656_k%GBI#pc+-09@%6n@t_-lY4kcWVOPW_7J98ynqRO_p&~-W*?2?K{*~~VD*XW
zvcr-0*5Zq_&pxXk71^s$W`Np)?=Q6KA5P;^sw=Tu9OO)>?>`?SRP+xLu~$qkS<KUH
z@99qt#*OofJKskrxEV2W8r@gRG=xz8-~WV>zw&4>Cl?@IFk}&qe9n*`#7#r3kJoLU
F|34@0LH+;$

literal 0
HcmV?d00001

diff --git a/apps/space/public/logos/github-square.png b/apps/space/public/logos/github-square.png
new file mode 100644
index 0000000000000000000000000000000000000000..527ba79f25878c988d6abb3af215b1f5f4d98ea6
GIT binary patch
literal 2352
zcmV-03D5S4P)<h;3K|Lk000e1NJLTq002e+002e^1^@s6aW3M700009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH2*pW6K~#7F?Ob_m
zP3sn4HP33EqgM?zKeM1wArXnh6a+P=K|~M<36b8IV`}3DF(o&I@DK0t2hvy75L1+g
zKTtz!R#a=On$}ytueWmF=^nnl&pzku>)l_nNYDAs-fRE%x7N4T`qti2WQ=H$X(9tf
z{vi@WKNtQZk}L8rk>7QHG*YBMg#S+@he{@aB~pB#Xrv_BjFe;_DjRM|2_$8jPZf=X
zz?D$cAH?L)&*xy>qEO_Q3RE&%VkiQrSg|5iuU=jKU!g(;_1X9D-|5SjFH}@iM8(C$
z>hCZ^t;o=31ceE;YSp41J$g{@-o2?ymoC(%O&h9Pw=UJJS(7SPu1rx;QS|leS9<^c
zJ-vDJhVt_ADEoFcWnIal^z?Lk^ypEzh)TdeFr$#!Z2kK6dHVF}eDvs1{_x=gyM++K
zw{G3ywQJXMpFVw9hzzBl$)QjjSj>Vub?U?$H*Vy|j~}zw`26`ZXJ%${VqzlKs8J(S
z<am3)MvWTr=FOXfnjN~pEV^{*5|11?lEn=DNlewMRe9dLdHnqOa}GDYef!2~X=&WC
zV@H1x6Wc15Pn<ZR6pSQZzI@3^Nl9MKp5PA9t5+}1$;pv<&A!0Lj~{v0u3cQIQl-cd
zGjZZXE-Wl$KjQG=!^+=<otR0JCb7gD>}MQ5ew^#os~0|Eh7TXk@7}%RzXITtt5m5H
zdSV6)7{ISzzvjOZcI?>UCf?B>+@whpzJ2?)sRD>A;B!8G`o!Ua<W>Ck?OPS}Sz*zl
zMWG=EA^4#~hb&Ki<Hikc+qNxBKEyL-%;1wJPljv>fAZuBr>3Uzuwld0IVVq^Y&kwZ
zKcD;d?dv@;Q>RX~y~yRumzVh+QiB5r4tO?;9z1x!vu4d=$;!*zxPpQL%imtTdQ}CY
zI@cRj%8nJpgy{6?(<FDsa@>$1LsS+Vh;rr1k@zOswrv~95=svrKBTOyEE2OMxlnrb
z>Xpi<ky(r46dfH+jT<+n)~#EU5UT{`iM@OG(uNHiNCG*-^JipaP(nh2seZx@&7C`!
zwr}4~I<RGL*|KG}cM`VVs#Pn?<4D<o8#Zj{I5MqPts1v%+0yoRyLa!l)$`f2XWXJi
zi{MR3>Ltp#*#Svo^XAPRU9i`Zl9IwYK<UEnSmnqDvuDp%g(N#j2(Bt|kp#?82jj<&
zr#f}&SdOtIM%I3sFku4e0HsNpF%(I_C+R@UlE#i5YdOY}nE3d3l2o2_F?jG`iWE>9
zmE~A#EEWU18*WL=h!G=H9aaZeS){5)k%EL0Byp4W_<sHRQPZYPEytLy1XfXQAd-`l
zBkFh|4H`7yn>TN2>pW%36z8i_w{G23Z9@n5?%ngE{^5y?8#hj+COSafhMcZS9XfQ-
z_VT}N`Hdu3AwK}-l$)EYHCBpjB$>D2cc#Q(-$w@$zfju0)5tHte$=sJ$F#;`b;7=u
z5iDnn4kVeQJ9qAopK$TwMXhnQYu7f7XH1E)^Vp?8uHzRoD#iW#_qE1h#Wjn)Oo<T>
zPdbpI75NR4WowU>(x>6)ro`x^0f26t<5wVSH-afKhz@n2OJF$RM5prQ%Nu@fdiA<~
zL&^x`H`K3JUwbTCPK;nm43<3|fEbCA$xn!DAE!Om>^e<}F{_dV0&xK10Y5>acI~k*
zUc4~;+>{uUA9VodHE`fS@(ZAkE-@&jK7IPs@H<mtoCIy7MvWrBpl8pX+QF%mIZeY2
zQ(~@Mxk9=aG-!~cx=pBn6(%Vu$#kU&1ac}XUuu|L#>U1v+HpL1@L;Ihzig#{|NdND
zT&%4#YQ*HU>>zQB+K15vQvLb!=ZB)RNlPT};q2^eb^_V%aZU_m<;s<gPK4bA)I&gO
zI7vaf2X;N30M-z=X{Sw0*REYzJh!70qBUgk;>BSztM1*q^Mwl+*eUky+h=!d^Dogp
zk$F1P@W80rp^Ru&<%6<l7eR^CYcgQ2@PS*lY~fEu&bNNC)hva3_rySCo1x5s(Qk|C
zi>Zh^wtxSA!)^n7cK!NwUbAM6vS<7TL^<_CD4U`IsB`DeJagtuWj2Kc?mM|~(==|F
zwNf|$X2+j_?bsuSkErHmj6q*7is5#x80a{FL&uh{E-A8Cq<VVMFYHz4giR4#j~EEL
z3yhXQbRM*8*G`Rr!`-uIkF8Q@ceUH&4m6upt5&gBICt)xozvAPMz&u0)TvX3Cpv%r
zyxOeCxR{t2mg<?MVrY(bVnz@&Ea~o8SOGJ7=+L3M=hagVZL3B-E{I>?LrTZVMi%G4
z$~RTcCU!8DjEoEp7Vw1*{F|O)Fcq_Q5H##aQTfN%X3d)M&Ye5??%lhpi4oslyLL^*
zMbXjGu87&Xbt?x0EEt;YAI^w@pc@H}&<Jzp%qcS-(Wn&Ff2>As2q~2nD^{>uAeci-
zn!|HCQxF%5B{&eWcdg7Qn2Wa(ta@$$Q(w4np__9$R}%4rYLgE@US1w2PD*s!R~r&y
zmM&fD_MGk%ZQs7V;j>7HaV}rJto+HCF=IGBKAsa25>%kLV8H_2rLv4THKn4WB3`|E
zbucFE{w|^;)5xsM03y-47HVRU-+9n|5!8=WjDg4cbRcEKAJMW?!QIyZ9?cm&dUUX)
z1WybE<^fx_dlCg5lWvJww{D%~v5_vEIdewkZeBgFl;Z_C5Ga+No^Gl<oHLqx+#GxT
z`t_#A#frFO$r3MnbgqJ!BVG{$K_G~SIHhJ>rhy039DTlSj*ACR1A*Xi)22<KXruin
zh*{wAL6yL~@DL{+iz$7C2bs0oRSD$=m<v`t<YQR%keh|5S~v|m@^~^m=a2tA2ll|R
zoe>uoN0M-=ei}DGS0-BWv88(U>{*hel0t-BkzY#xz>6OEZz-8AflQ_PRMBwCuVjK>
zeWqwQC6#P2jY9ms2cHSruhctZ{){Lag7Bu07%F*z*UyApDtUnyTG@Z6l6S`Z5B>`<
W&#HdDYlN8q0000<MNUMnLSTZm>Vy*j

literal 0
HcmV?d00001

diff --git a/apps/space/public/logos/github-white.png b/apps/space/public/logos/github-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..dbb2b578cb6bc41059e08eea448a9a88d78d6b9a
GIT binary patch
literal 16559
zcmbWe2UJr_+bFz~5KuZINbg0E-XS!lhN^T6z4sm>AcTVo5dj71MMXq<6+~*(D54Y*
zkkBNe0#buWQQ95OdEa+^-@m^9-gPf)v9kB<nWxRnGfx}*c?%;3S}s}$f*8=o`c@DG
z2aj;*7&Z9$g&p|=evXG2UkryJX0fAxSYnGA8w4TQeQg{f9L&u$+=ByUTs?x_JY}$f
zA)q$|Y3g7@T;2UWBLv($y?ukUgx1=-g#>&(w1n)H&E?EP^gMlhjibXnt)ne$+@t;7
z)jfoCv;{P=8UR3`XN0Q&HZUM4Tm!2m^fz1$@O;!PD<trDmk56?p|eK_1su%J3+M%h
zc?zh=$Vt1)$teh^s>{f$C@HDPNeL*(DagsnDa*<$NXx5e$SG;as|x(<PY7TO^YGHJ
z(l`7UF7T!$<P#AQq9H3A6%{2Dr6>~|<}E9)uC6XCry#4KAPss*hhGhfaK%aog$w^1
zg1%?Cdzf!Xgl}+=z!5}Ox8TSKEg?YZKP&`>{0D4M_`k#i1SX4h4Uv_Xkvn4P?~Wes
z|LGSJ85Zz2au0V|&j8Or&!C8K&{zIHeM5YLBZ9+yg8zR&|L606LjXi;ZvGz}|06Ad
zf&W1f9$|n1Z2U_g|6}iPo2wz7vR0nq!I5F^o(32|rtlFrAsTvNo~{wWVK%|R0so$;
z^ZzDUKtWzcLEyB#Z;(fDRJg={8Q`h!8sVuW1ZEA)m%OyRnvJ}IhJvDoyvi9lWer8S
zf4Z6nd-!@?{hzujDr?9q|F^DS$#}R%xc(nId$?<O1&0N?0)~A9UA;YJLxQ}81pXsN
z4ZYxi;4pv~P^b7`+tGS@=fi@%d;`FTa4Vy80%!w06?t_P6=?+-`M=3EH`hQ1g-5ss
zxqG7ZwS<6hWPE)+G}P4G)#Q{s)TEW<<-MepJd_lq)#TMYrInQ3<Xqk5mEGOsJpMgi
zKiEC;XbJp#yvP6Lc*`(fumxQM{-5C-ZOo&!qhahD4rcZ0zqXFGXXwA40(=GjUM?E0
z?nm1|OUV6b{yhN)|1|slKTF`B@ligW0O<c_UHsE6JlHED$~DaMtT&L>|8d>P0^((l
zHtauq$o_v>{QKK~+1&r`4m8Hm<9}2Yc=?aA^9%wSE)1x$n{X`_2tw(g_0QU13s<J2
zavg0u57)O#Sp;--qf>E0y!tFB4GfTUPIQugb>{f*j!)V)l#G2oUuS<_>NKVvx)o-t
z`xw0@V6sMa!Z>e+e}+@c(<^KsuX8&pXM5@DfTD=kz(H=G(^AZ*OEEPMzkG2OL0dgD
zd(S9<&ZzW;381ZLE<(l`BWKy643Wq?NSp|oS4kL!EA3){DH=H`8ah4dE=E?X{LI(-
zd5PD-J#Q@keFwDaG#5FjP=_SEygSxOxF+m;Dz$?>y~8kmMcBY9(E&2vluul!AA^5F
zs=!qcE$|jt3k?Q7=YhO(<2T_d;RfM5VU*CFz>S;4wI{o|h1%(&-EU6O=vES$*MG#Y
zl3(a2btw;3tQ`v|J|+FS8@GXX`$Ajd(n{5u#&NCQHN(UUCcx&OyhGK^IrMz(xF#PK
z>s3zuhno^ZuG7Cu33j7;L2W9TjKnGB{vc=&#kYAAI&u36D++p%gx7@NgyCeC>+!HC
z$W%cOZSDaRsF`4vJ4NDDgVe6)=Gb4m!Vt@}!w@19f=XjI&TNG4*s1W6PGYGjW@L3D
zZH#h{5ZQ=enJ}E-A9_#sQW_F>GQBqtp_#T5(QO~Zll4u>?H<{KtT2nGs%VmeMhun|
zR0<ERT)s}JnS^Okq~DY=1ieocwtWxRb(CWuv8x@!($&WW@r;i26TB1L@hpEmejZvH
zb`dJC@q)D@>L91T3Y;o*QWAs{4q*dAn6vjTy@u-sHZs=BQVd<Xze)M!%)p$X17l6h
zY2{)hE<Yfd6f*Bim`uJAYc(!IbHJ^ZMtbnp&?eOb_Mj|}dKuEZzf<Zwc5Qu>VFQ0R
zVGVJL+y+wy;>ve(cau5nPVU(%ZMz8Z7*_MPYOCIQ>c<XMHjNV>Me~blZ<?Bi!YEF&
zEPC7A=cNISK{u1Vf6c&n@(T?lUq&TZo`_)}kt<cCAe&R%kSvw9abcNwbH5{Ta61ZD
z5cbHJ9eSsng1xf#l~CJzu~f1M(NTcy_@G67?<HK9laIcmh*WB{*melhMqbI_)t`2Q
zJ*cE-Nm}NCEoT%OR6dG_>I5038(r;w01PcZ2-XR82yRjDyZK~lvMpg9d%eL#Ng9Q_
z<gc>sJ10Y)C;c|<oJel<UKLt>IQ~3z#4Zgg_X$sU246EB5Nz%>!dW7oiO-);ae&HC
z7a;hB`Mzh`q^&_~u!AgK{eExQgNljcJ3<uFHy*2;Js1`d;uOZHoQuR!%Tp~QVi6=6
z^^_6MQ;0gMgX@-z<(BNw;+PDv*L$^JcC-gcJf3&>ma$}xA^~msnUX!+XcSTL6;2p|
z)&5L;jO`^+I;iGd8)1krsx~M)I_-{++4PzHoFxY4314kdz1YoW`8_j#?)>cMeU4CB
z(=(wAI6EZ-R=J@u{<L~ZX$7}fF~<&9y_$N89}%wms0=m;rNQUE8Q!(|>o*}K;XceX
z{82fh6hyUdJi~<RZ%j0nobFCY#2e9!y0SylTg+q*%_7Uil6YtkA@h#0ghvLxTsBT@
z=s4vzFB>^3qt6{e#iurcPJ<!_4+xf_p7o{jbU1H#cRypvq8j`IFO$F)(;)-qAS3&k
z#*oThg3p-|7(2A0%7E1hQLGORV@Gec$PU?c@a-mj3a5QA-6CB1=W4IIi1MH<0Y*&F
z^AkMNfyqb4;vJ?@vZ}XAZ{{046?7JwIN5w#7+PuKZx~7{_-!otF4pZ){fy}R`2-%A
zPkLkmYeHuIMvhIjy8dLC5TC*b7dzCiO4V^oZRhLp-isp5ldQ=tbGBGJ<FD$-4*~wH
zgDb0GHm&9h4VTY^d1IIv-mu{2CepE2dIp@WZgwWC_;fD|aNS1gZuC)go$c%CHyaSD
znDjakIHX#y<;U{`%Kx4~aK@!JB^rOEt)<~RekG4rzcZBT0q4!+qUW^)07Wa%?CFKN
z9^_xC<YT(~HOM_$k~k_^WOKoiV2x{UO!RSMhc>r33YT(5%u<qjs4aULOV-tq=Pea+
zb?|s1fS}kfGErZ5A~4?%Q1@s2#ExS9RSYv)@@+TH2zJ=VSR$VWjl566RW)qnjK~zQ
z22Q2`uz+YSGejDc_Kr~qEvj)V_eA|#1?&m*vj$d3zYNICko;*+ZXo>iji<;9cE_KN
z%%kaOYPCH@zid&>bRM4M`cw0+1GD?QY(>f^@d@3*6UJ_^^PPg^PQvl=vmz4X%nf6`
zsHVh-yVlTX{&5~UO)bFIXkP<iBjNS<*|wMP2O3K!=$u>n0e<Dk;|&6T(v}4rU0~-^
zi*VhrCLl7aerae6lIdgoh^d90o=L%l0}e`^su{09nyM({$&1iEZ!U`H)Ra*MbtpY$
z2KzL`w-A21CxU#67@C_=`eL6Rt5UC|ZnWe8oecg(Ro!_6)O0U_gnBJbMe6}OUp-Ek
zN#H$deP4)<t#6Y>8D9o{y%`%w!C=3l{i;lpR}$BH89!39L$4i}T91(g02j?u-S`W3
z+qAhtbhwI1s#Xq%GoUq+7)Zbn%*W5>_w_(eytv7J%X^{~CQBy**VvC5;VvQVP|k^}
z15xzoCEivz));fAtP$eq(<Z35p1mRBnSVBbbC0qt08W+<-H3$4_l$z*wi##qHTVb(
z9qynbne@dn!$ww|{2O+y0a}=TAL<;Bu55D0={4yo-AIRR&2bVeoAit`qJP?u?Z*Wd
z2jDKFTcTSJvqhA9gcGcr^hWZKgl`zcz&ik$>#YUhH|X>Z?&3DdJotOJ{Jx0tuw1=z
zh;3NfB|z7V7*WPL=%+BczvYfv>B`M-Jk4LNp);4$Ns}`J&Kdc^DxnUOQ=ruyR^Opc
zWV#izYibqKCpxjEoEbiH3rWZwCp^cN)`>I^84}r7!HkaFK<efmFSO`mMQ2R-a+8$`
zXOU76REFplx7f}E+pm_emfX@k+~x$)v!M1?GQlde$unXNjDNzvu^J7dM9xO&05gQg
z_!q2b^gEpVop7cR@cXgjuLU}diYji{3T#gcbzP)_osYWkE^mpSqZGskT}i6a6-B$U
zG$59x$In)dG)v$v>SuY+%c8lIGZ(nMJZUPda%gda<WmGYuyoPQO>9F(5p%sb88(O?
zwlxTZRavu-?<!$!YosRsAPgSKnCpv9@(|8$=^U(HI>Z-q3~lvD^H{4CN<VMH393f!
zaa#h8Hs@trn(o%sjLa!R!wEXB0OjJ$C4K&n6N-q5D^M&q)6QKHhM-d=vc8X7*r8xJ
zV=qAF*P)lJ{Wx->mD)v|JhjZ6QEE5NsV0lkzdK<ERT~Cuv<HFxZB;d87;q{!7;~rO
zX&^1x2P`)9>&rO{?w1~!BMD8o#3RXES`sL!^S#kx1`B|ubd$D1vPB+qP^-X$-Z3iJ
zDmEfcx^PiwmiJ;pg+qqkE}fWN3(}fR{<fL@d#&HF%fzn>h0k0)KnM6K{>j(*8L85M
zjTU!%I2o-j&+VSP5RReFo-@qLS2+ps!!d6eFN7yS-PA#AUt{>FH2w0%^y=ScEUs#k
z`3cTBR~_|Z{Z>ZH2t5g>*otelFam#yx4midZk1WWmT3!%cuVGLsriiK83@=<2tM_n
z8W8E)tu^rqjzg+A`aP;0?$^~;GpuTzxNYC|X<T@t9(`pmk`Ul#JXsSb9;HU9J@GjT
zMRp<o7Cw}&(8yseI%v>;;(XII`L3?{vW$zKi!0{NS*7RDj(TWco!B$f_w<Zqi<1Z%
z#O3T*>53{DSe$;uA8-4RP9`{iIa$Men{IZ8{KnT0M$shGj0<v+g<N)N>s0m4Sa{5;
zQ6chom6T1BnNZFm?8UY}&gu_6v_)~KiJ|nn^Btf7sw?+-O9ZuzrEGfZHRQD@)NaLQ
zR%=1jU9ecTRx$aWAH-;=X5tO;>q6?#(^Om;?1@K`&z-&t8A!t6iDASp^XPgBQPYaG
z@OZ~b5**9)yhw)-m033<^5jFkcJl>Syk!&90OJs|H|&&m634o?TXFzj2uB*(`28iS
z*!$Qi3=`RSv8jBS!;R}))t1Xo!z(l&OC@ku30Z)XZ$$+0COtD3_J+rE+_=t+CgY2>
zG+in`+ho+=d&D7@0qJM?j$O&(EjeW_0o_b?=a{BEiP}ikf)<0AN|@Dh)%q{^wOc31
zvYh!-ASb=$=4NxQ^Er-W+ptySZ%vCk1vByl+@#=(cJn>1k+TT?_}`Wl=BuKgzQx`p
zWj{l!2pOK9I{q|Dmb$Bm*UdKnJXCES;JU=*yw*j(=Z#5*nTr=!TvMbhOr8FCPg<1y
zW9NOZ+i%Uk1-Q-IZhCR#nijq~f7#rD3af-U*w>Ii5l%`8wkTbrr|3_m+4OI6lOGa~
zd1a#FajZ=Ur9S4NsL@N)bhv9c1kjRwC&=HHnUU&v2NA45@$Uz7Y6ub&R)OKOcpOsP
zgU06p0<T@&vZ#ra%Oowu2Zg1TsTW~ttNDeBd3KmbSA$M(E{1^<j>(q*uh;IU4&we@
z`FYx+knQ~Y*Ts>1upJJ}L88x3%Av<iyzMZGMX%ES+nc+qQLGfh5;?7#TagFMyC+(Y
zUp|~WaqXh?Xfs6O!d}KC-}Li`$@xi8cxS0z+GloK=eI2dkzWy1h>Hi8;@+LPvjkCZ
zsFYY%6=_(&fK5wk{px(U3j2gyea~q1a1=MjJkQr>ZvK(S6mJ<pXBgM1A^-I97!y@w
z6UUC&y5iVlN9m}CTK-&>nB(g{m>P{K4R%PD=0F^!uUB+TQv#)*k(wY24fZlxWf<st
zhp)U{YP&lYTO!PVP5R20v9J4|^^vnuB^(^r`knrM<#EZpJ60xKmx@=`4E$wEUK#N&
zSgD-W?endQuM?o{nJB*ut7mNRIhUx;gSE#bdsrg6&V{S6UNTdve2-ZktEIH1<$BkS
z_G{n;T@cx_w1&>_4?Y_bZkOKPZ_Cb|KMcj(@#q#R4*K9S2aobd;;?;IP!~EcG1m8d
z9Og$>o1OZVexg8d)YD;?k-T?z?5eP{tcdogta+d9P1o7u#oT$ZZ?RnRm+H0Zg&PRr
zJ$J`6M7@_s<wB?^L4G44;u_#Itx%&@6F?EmHBzBvQ>7`cDH#VUDSyjZvrR|Ij=5Mj
zS&Ap>&qhMLZSF$`74K>e4rzLfKp9VEm^MX{EX(H9w8|)EAu~eequY~5QH?x-axG#{
zT+%@qCrS%(^~gv=%dhF(*jD3N!ao^YG>M?h*T)*gEBA9&2ImX9oXM7@$MF8X^v!ti
zoEz1TkcsZbZs$o>WG!`+qWpfA_D}m9IN?=X*{Y_?{4%q03q$DgVjLpw(2Z<1dvQSr
z9{+MvGEzQ=6dLI4M)xC0VdvLeFVR{w=VV6pwKCR6SAvcyDa)2pUq+5SgmMk`bekhb
zLu|X4crtiPU{3V0Tv&qS!PGT^Gv^ZJ@Z4Tu<-r`3?olm3%JlIT3qK=o^{XcAQS-|g
zToTyGt(R_-KDn}xC+jz4{|Z0sRKMlWyLXZN!87iVkE~SEq~rOm`;=X=g+Z?6vZGF0
z{C<F2%yJL2!3!q>*ZaNSYb;MJKifDG4N*rz&p+OABiG9$Qwv_tuB;=|aJHD52k0Bu
zEgFot#$NZA*kJoUDn5&oRNk=e{?uW$V1ccv4<j`UQ(2Mg%W(2BH<Z2k^rs^=Cer-*
zYr+hm4=>A_e&)$rDM&?7W$e8CCy|>Cq7`P^$In-%;`<4bInU9zCimIrgTV1<EBv_0
zuc6M{QO%!<K-=hG4`b?M6s%yqnLN4_>7f6aorzke=1<8*VQ5vvR?1%1wDO%?i@L#X
z&>I6qTAUF}dsKy*su#_j5s4P{*U>v~tE_BKLBkZneFcY9)5?q`=+?HLTl8ZE&^idI
zRPE#gYgVAbBn=p!e3W~VvJRdwIo9o6*%Z}BrIO=w_rChfcHA(rxd?UK@=O1@oYCHd
zFkU=4`1*9umD!LE6B}EoPhiW*UOkq_$SO;6_uj-==dzOSnMzum_iTcWCx|cDJnl39
zHW3s_?zO#Aek-0RNIt`M<;i;~NW`|61sBG97HLUka{<!ia_IhRDI)J*c>NV!1{-Cq
z3}AO!21Aq7;DAPU==-kU_^H$F5D7-A{pSA`u4~mS1-*NQst?RNYTh~5yH@u%JM7Tt
zPDEa?lNYR>v)&oMRwv(dMEAXm<1mfcAB3BpomYXCnPeIpEFHYD3}tA%mY%NK_}usz
z>x0F%-rjcPZhdrH^;4?_Vru|MUvU75dB->;7=GHdXROf>`fT%Y*DrRX@d%`J6C$Fo
z>OFQ?!4UF-(N*j?yh`I1!=$&VqLNELg<pRboq|&~>S8au&4SZw*r=Oew)>V*>3Z3^
zGmp@8D{i=i4(GeG;GBJR93~R^k{uAZSaovB`;;T3$&$X;-)M`0&_yn=JMNBd{`)Ua
zIzq8s<ZbIUzFb~iEAhVfj2~R@OZ@D=1=iM!z<9;1xRC22Fs4D!%=DP>Y7?|OT_DF)
z#HSNh)J3!WHHJQ&9!$9v{iuWwQD_)oMb3Wu978j3#ANf|Huq3y6l{q(J>C+1K^Tg0
znRlj1?_(6G7!7d$S%X}@LgZ$%g*v()Y!8iK!%ZYJ1I@HLnvzu|+-P0QUE*LDl_KrG
z3_}_3!bP=_=TB9!wy!c)C$r$5oTBhazR{fZrAJFnh>?De^}?*LB?{5vEZM<_0e2ut
zKheqTX!Y32V7XDa3tzE;v+CdgK%5nDdGY%TLYei|#0qw(u4s0<3TydlC0CTqpK++A
z+^Ov8;eZW0Yye`v9c$a!0qq0<Gq)!6bVvl|SdE8Z19SWjff>y#7F;Kgebu}-*cp;7
z5}Qf|q$F<vYfjh>qJHhcOtqCXT!lIaxOo-ppAfa;1Eu!+JcGDl#l$qII<Y9esGo>L
zW!zd1Sl(M&uApyS_5T1TUqr;+uM7_X^Hbw;*(%<W_gewAG(<ao^ZetV9=d3Qdg+Sp
zDEgn~iPbO%y4LVJDHRGitVWp6Ao64NwT7vXF`$T7Kl2i6>y!Jz93E7JR|1PGDsF0T
zfxFBSBsOtxGBeyKEPY{{n_2>L(jjb@bEV)CaVfwP^vg=Y%|qbH=Um<DHus+*c<%A3
zu{8smJbP&7NL@5LA!3zL*Ts|&4j-5JSEHz0dbAHaDmTzT!(=TTBZrR*Dm`4;{rzem
zoU#iWgH>EQ$j@24=d8p#vPiLpo8iVf@vZkIfV&aovKhx(VKdK6r?`7*Ujl6{mxNVt
zNm>@TG!W|&_~1!e=Y1BObp1wM!43V_z+I^@*}x<Iy25HF8;<Lb-hZ`!5~A6<Zy*{Y
z9&#4UOi_di<zSil5_)hR{!0-VA}SYrM@jNEo^bF>ZA2I?noC_suPKH~UX4<(50s4u
zVOAHJh8MRNzu38WlP8u1GBkqExJiH17(W}){hYvC^+&JM0;Y+PMBB95AG!H_wbTcS
zsO#Co!^viKNZeuT=6WER1l*ISw;v_&dnJ9?|4e$%zvxNp!XC1A?`!!ndszFdt69dP
zw<Gz=ABP*YRyA)Vi$5-SQn}2#HI_qlZ;rwr)6^X@sOziG-gUL-z{$svR6`^Cv}%ID
zi8G%)MObUnJGSs}ZPk;O96PllG3n-Viu@9g`joaE?yW%bZIT>7R?qGg+wLR!i38n?
zU1>$#rCw?@Y6__9q=bc6;!i7CaDlk@x6Derrq2c}hJ*vpX>sTc;W6>k(|1kM4e}pa
z?Udn^a<?WQi2ns3sObt5PciSg%<V5#l2Gww7v{}1S~49taD1Wr)U~~gL!p^lUoy>M
z^e|JyF3Fy=gmmBye#9|~svNgUb9K>RE#y?Z2&-q2zx{~E8y@44bf;8;1AYKozQ<eo
z3hV=pwfNisT9;>5CFS<_`$0I}T8TbZ2BqJ#qB3+ScM(SUH5*=TGzRNA8VQd*)e7vh
zBy&=Zr5(g$b&h#+?hK&>$lL~ZL%*Pmhjr^aYYo@}+l7OT%p^Gfe&z@tH%kw7T{ds&
zqfgYUm)2FqxnNl1=NFamkN%GTs6sRE8HZfIZv9|ogLbnx^fPy_fNdt3Kv%GFd-92;
z4b)NE!IMwK6Tg^djHt}R#XXZ2%5!dS7kp)d6cbiVQcLiyOZQ7vno{34@P6f?SNbeO
zFvs~<8JB*aGL*U(y4hXYl8>&YaR4D2nm`jxx47<gLuk(Sgu$6V>LB7b5y&$1sUmvA
zZZCD67U%eW@L?!V0k3X`q|4<T_s3n=I^Zt%Y5(%M8pTWpiB_ywh)ihO`v2WdMzc{3
z{fs+4mBV{3Lo$SaXs+VYna!0m?2sakp|ZEcQ%yvy!Zcu`@)>NXXD0ad6G#OLs#dt$
zN=Ldwf;(iixu^_{RcG;*x~q8PCFa@jz(|b~Qt-4_VA`KaiA-qQ`ajo>dkuG)r%gP)
zCxpU@h}N%EeGa>}2Z9-oB<V{i^WZ$YM`)>we!sbXrWV#pOR9XQ#Jep!yWosoEb+(n
zH|a&Z9hGVl{Lm;24TGIK;SAKTmCz)?FYvX({y`&>pfT$Gqr)1Um`AOP(=%hTmm#&2
zj#^dDXh$z@htA#IKb~~B71qBZ#?O(f!A##<kcy>m^V{Cue9sQWh*JG%?Ed;AKBEnY
zk-bs_G_yljdH!UGOunp4y$mhiV=jGvkPqbPM`)?P1U^4P5}4)0#ZA2(|86BWE<?PE
zNedfmvXIwz&mYxij%Wed1iN7N+iZ}(81;{m0=zX4{n9EG(Aq=t{x2P1a;maM;*NKZ
zz<#Sd0&waLEso~f_XUxp4iVqmfo{!wkUNs#g+JT&mIXp{xx>!a^t)6;As`9{@<bmw
z=x~04Fwo=EQ4f9$nk(EEgG(FddP55h!pgISp$w%rOa`M9d;l&lYhuJuDmb$%41?Y>
zevn7O=^2=q5cKn2Kkk7Yc2H#cv3!(bL#SjhNATqqmAJEms5AO~+bM@a-V%2{H3pIh
z%AjYe=!n|4Ee)3n93Y!P{xI~Vyg>J6l|1TzLNI2v7wkP{B^{J*Pk<%^pdsJ3R-~p6
zbPs<5qL0=QAdsB#Q~}W4-vX5v>wE(*PoPRq*c}33@KPRs8hHLE4JJZayPRR?HR&Kt
zhoh<j$6zT}V_<bQQWt*MCF<+hk~-Q58Ixz8{R6(~3Ck0?3XOw1rXSx0a91_w3qzwD
z{|4{`I<d1YjXu-#&v^SblaKF~Q~t)<9sCaiQqYOk1uKBh+2#n}FzzByP8Eh;EP;<I
z-C=i#-Qhs|1rD9#!?+*g5*lxB;DBgV8ls1vz~~ySBR<^xTd*oXuxGa&pl?7{IFZrh
zK(|eHGsJ4I#n9OTVB(f?HJDcy3q$B?jOfwyZc0HJJFjHW?mV#aVrvM!=bBS0A9uR)
zsLS8aE%?zU$at2iT_iQs=4mvY6ch&1c^^3@iHp-;xo|v936VfgS~2v!uE8m)A@97s
zWuL)wFgSZsS15i#w3kWmVj<l4=|!N4Dq)i^c`RUHJ01~+3v^`!LRl&NXGO~;Swnct
z-&0p_4Hi%st-#P6@vCgch^;^3GSF0~>2My5*U*a!I{WjX47v(*(9yQa?NNq$_rBze
zc(x>5UCpDOx>r>4>fi4{TwHv7PN!OxQD~#-1Ui^#<d`%edR$P$uiuvtNZ4Bz;caHD
z_XH=bNj)d#;9`)g2Q5U-?-SvjXU;8^`FR|tIR@QkhYro?KSs7636Co1X14cpIDrMH
zx%>Bf`T#H**&*e1AD8AM<^7P8;0{zpt~I3Gpg}4ByGbjdxe+u8L&`s|12tpwaK8}|
zQ3zh$fD-|<T9_k3PDxXfUY>p>n{YK7zQh`%U~E-TgAUMEJ%chfVn8${>>3(D?Br}h
zUKuR?C~V1g6eGzCf>sk7B%lypU6mxFNMu5wW9{y4G#%~_rR>fKvL*8Q8)@juv0VSl
zE>3_+$sy`igo}z1<oE8KgH?eR9|thcLqQ5*MDa*d;2D9<Y6LAVqKV9TBF+6=1jR<Z
zx9|tGUeI7aKq<Pz<i-Sj=XwUUvO8E^W3M59IO66ny+%Z`C?WDucW%qe!;p*LL!Xv(
zCeU~t9dcR_Ne6Yk^|q(>g5~8e@tRE&Qu(;7#!?maW4U>}=iYCx0~POW%c0L2&ZTQr
zu=B8tFMH`LFRc8@O2YKfs)Dr$Y#rKnp^YFZXz|qr2pvd?o!WaMBPI<6A!;k7Zi$7<
zojKe!wi;I3b7rz{czJi@YouHneB_lE@r`cAh)p}x?v=zWXE755J0Bc;w7jfcxb670
z*dX9Y@>{}zha!kZkf@RlmpmSKO@lN`(_h&m`oWNwCop^L7AKQ#CMEUkCXSsLE%-T2
z7jS$k7lf{(pNcii@3oDer6O*17u4<)u+}I<oqV8ehj2PN!TwMbfXVAIr9BOQ!0ANO
z2OI^oRxV?Q`jL%g4<nxgix9#dS$2yr6ccKi^nBEhPVE{PiB^@WvVbmG9R6mXCbKkO
zjg52$j8SB2jeb2-=tD*JBY#pDE)PaQAXy}c&Lq*G4%?n*g=)m-##UV%gN+P+A@1di
zj1Gx6B78)F2?4TTjlz_7U>Pc<%|q$$7$0WQ+d!?%^~Ks$)kT2R>;^7M?=myj*!63_
zJ&=SM(_<wSlgwC4K-;A^1^63YmG_VD{=^r<IU<!C=!zD<JCOx<N^h3Na>H|A{+={L
zCI@KEQPo=8BGtnJx2AG|sxNNb=uL_%5P;uD?O0nRA()Q7#7&EdghE{}wV33@Ud0?U
z_xT8Sv9*T$5zin+V8OjCG^}m|r<lH#IEY&T6Y)(m2NnvM*N=Cx6^5ctv};rpZ^1w3
zAKBWS^r%A(R2Etz-XRhOSs+HHjc`Y6W%1q$PSzvoL#f^Kn{^<{as#)iLboGR9}Von
zB00Jp?RqZ^vw7tmIN6L`R^fdC-$J7eBw!^T3pe6jS~ZL&^?_k79BQubLTy^c;Fcgs
zQ!&aYpt66Vvq+aoyl2Y_!VN>_>*g+xfIKhx3X@N}oJJ+vRXovdAA>)5;&<+c3e|xs
z;PMlvkj5bca5S=_`I^_7p#@*<v(1!~WcQ=!#yg{g{U*I~aqkab+d7@-pb)MH=+6ut
zVqlydmUXDCoHIHuVg~-8vx|x+7tr^J7apsEy8h>5xN~P^4K7DHk;G1FS}6F+M-C-8
zANe(f`w7l)#iqn^?<i=AbrPzx(h-JI5@r}OjD0^rX^56y;GtdEqKdm+6hB<3pI)T%
z%l>axp2F7GTH=6wQYp-2`_^G+*3D6)?aL5WMprSAZZBVr(<DQzQF>@#(oV_R`C3Fb
z5)^6NxE7bb_{EiQ2)pb-bJxa{32^`q09i$ZI)7`~{osXX5VZ3Gnt2pW;@eS_CyJvV
z6;l<OnQ>O;b&aj5{@OT6D8EWzYvuLGoIV%8@ogBE!3awuBIC_f%zpJBF3%TGbHZA0
zahTYJYvHgZU-2Ms^Y~9ZVTklwb-MT0`0rOPNQhYc!LLP~DEt>tOhOf5dW0v*?nK`H
zz^;Tp-_Djn&?k5hWXJ!l!1j!30@I0@YqI^RLKSd-R`Ddhd%XHLa+w0?r>56b88zS`
zrzpd)Zu?CI2DRJRxRK1RQcTS05HZX_;7@nzg*{ga94e&tDG-NyBX-5+@7Sb`v8Mli
zuISSq8}lKUCxR9#!M0M9B0i{|mzIWU>+(owQkarTCmd*Y`1eL;3=c)@4w**mEP-bv
z(GYF3qQJXztReitAeCwVmK@K|;HEXX8%%!I5|9h69#duKK3*bWKQr8TaVCNsNPOdb
zS={@=)v^&9%VtQ8U(Nm2+QUB+_Z)bz^z~?vNbejk@X66Z_L&Tn{4AusqL8JU>jwkr
z{)iXh2`R}2`UZP_#*&|-31fK6{dO_$3%|>zwk<qa$mN@$Ohvq+c88n7<>qw3s!Ndk
znkXKZzQ1}i2Jd|seE(g+$#vgVFSi%DZC}0+IpOz(Rjy~;^EM)<6Q0#?tYtXMy&mAd
z#XS&di3`eO?7*vW{b3{Ao>H@#51@)oa46pe0e+M7#`iB1PeR0VnM=v)ry~a+6F<Xr
z2%U&hg&MjJ1Xj4-FpT|sD~!bB0Q85X9~D`<WZhm>D_Je&PXPJH^9!YR`G^jt))UxM
zm;=WxN7{wGhpj9SPAg$JC0bE=;s+rHFPtRG5Tru6M4oPy&v_X{P&eqfa2E;bmpk5y
z)l;76C1$@A_oTVY<;6huB%ttLoQ}J}wuEm*H<jG~q1{2=u4;Nse8iDY`if)4S0tR8
zeN^(XGQf<d{~80uV0o{(!;<~Cmq9v+)v;giKl9U^)sc4Z#E#Z_>sMYvk+AccSaJ6>
zJyx!Mn%4Ol-|rdaxf$ZS?{(G$VJWMWWvV?L^7*Mw%dhPxvByFgEd_7MK+r*E`IUm@
zC4x6D<q3uFGAxN%^;ep~b-%m6399%`s#+6sq3_XfiX9oZEKu2L51Tptli~eo$d0DA
z>^YsCwt=RXb?J2SIr48}a>C0KZnwyn34@^~2GjKt@}gT-Zp8DKvX=07H_uJJRiK4%
z+lZvB^*5sJsbSj+xzw83B+Yr3LLrAwHH2-v8v#)^qSBOX<l$^mSg)?7n#MKfc(49V
zZ8h9Q%k89#1!u5R$qnK$L$)oUG7~<#q0RhnS3r)4t5rfhMTxB)q~Qb!h>WK4yj7|e
zkx#{JmDO;_jd5QZ1PSpN<iUlZ<}#MlS3Nj}Gi_d(Qm}(_Qp7#cP@#u5-ir8|t4t!=
z>%m3bM$#1YZ0LuVSr?%I#w%wx`1b#t2`$FBo{^5JXQZ5UgFW6|v<&!FaoZUlU-DqO
zzEtAUDXhZK51qW$`;UdDjQaMS?cWsST!bJVG>`STQm~+1xqToFd4u@Q#e7x8?a{+w
zLnm)&yHw1|KHyxyo5oWV<5@)FjrMmGbGLp6iFYy(1{!#DHD!8LtoVJW<c~jtB4y|2
zL>;^F?5zGY7T(pTTdA1DKaTWKZ@E;zil>t2Ka&+GF_dKSJ@gkk%MsGm{5(oTxW$>S
zHa+)e9i2Ig=geQlln8K0(^`lZtK1R$DUiLk9QF9>aIRm{efXf{2Hf@}6vImQJbz({
zc$UYumd0VI0B<0ma_)8Oy#_aO-(BaK!hB=SGQ?$ORMiSPVkc(S<l1PD)4f=N6B`mD
zND$wV#5A%=#Q82FeL7Xzi)%05hlz)9hWu7@K1>}xX5P$2(RJZ=nPltIW=`=N9plGq
zxtrM9!YDT6R!JF~jLhV#zklO7RiHTda%S$s6!sIAO}Fg@uB2KDc@(^QSG2n@)-Q2D
zP^_S}gvB{-8B|JwRN<q)qH1T|M1OOyr)Q{N>7Z^Xd-;TF(N#W#ouY3-D%H!3rk9s&
z3B@p1xEu<6D!x}+xrojED_!1<65=+nBai1?6)aZP)|O9vBL)9_y(s>sHI9k=>-NNx
z#;(Rn7ASe%Lsr<L*T3;GQRhQaZ_H|}SVQnZQ)X=)=`n><DaNmg!RdHx>YSFJRO-B+
z8*Noa#cRp=9(DwO9VOZ`&yc4tM4}-z_zlljA@WrM6Kib^MG_bwWNv*HvN3Lg{MDwl
zw)`EyV-!3frZVoE0&2#@TgqxC{0M9KCsZ~?+c5rq#)scK@P*T;$0dbEJiOhdm2`Id
zKO&D)KHaLj*y5Nh?K_hlvJ!)LU8p)yJ8kRyW}rJw+fs`5UjAZ@4e7VurZDs<P26te
zS${g-H=$j!Yc-ANW$JGqJ6)@uog3Xd#bLr)pr={0ac5b;>VBMori^n1*laOw3mvI6
zK3B{Nk6}Dtk7?m@GmD+pBim;+O5C3-qLRg$g&Sff^2g7X@=1#sX2@3md3mwG<H|9f
zyAdmmfkw--PXk|%?K6ZpydGQ5c;-GoLp6`61IFRzmt!Y1;@@(^aHQ~E1(zT@T!tgv
zGR+m6FUsD`dJo!dvHdb?ND?qt{(Su8YuNmLg_!jEvVu(UbMrarr@O36Wd#26Equ~z
zf@yLOmF?}<gm|x{^E02#R)6za$ubI8Y$WYnYwXs)4SzanNH|XLVsqNyA-l6V)va{V
z7Z&iIyVibk#|(4K_e2iMHJAK83EYK2fdQ?crlw@Q*vbj@5HU)Wn=76=3PEux+zqZ&
z#v44hWhYzJ6(8S|Qq<i#1`(YJz2kx=EvOKs(LnpQV^~f$9qWm6GJF0l?Fk@xc;`*1
zLT{1Ih&vVJHZ;LG@<>2pxF=!T2HQD!BK+av%>DI+?<yQZb`HTgy!u=XCrODUHdR|k
zjj5&t;Y>xFFVi+LxWU~7f5{G~f>;d{j#i#NRvvZz>22YPv-3=woG_f)*shhEYMn|u
zl9WesD5JHciE|oio|yHTm0-MI=98pO=*C4hCYEo^A(-H`gN*Q_K|6H6^)bn`n$XS+
zZQVBAMEBc9pP8P4Zu2?o6)kb|Z>%Gw8%fcr5Y#7Tw-S`cTMDnE>9QJXRuP^%J65?6
zZT^fV#0ztb&ClQMdV>Xj^oaDK$fpviK1PMgAk|mr$d2QJl0PLXFX#RWcH2*|ThUzJ
zn_QrEYY&ik-(G$J5Pk-N;-JE8-V(S!H1n_xaTg@t%S-%~$1jY-Z1UZk5amr4!hc#W
zRZId?j2GVnw+G4QgjYBwn}`}^eC9_?H6Wsiid4weKU8s^`$S6c(#{K`l}K6n8f+Zq
z4%_Iap&I{A-7+)VRar{%t=dS{hK<=3Hpe>OxRj#!f@$NE1gorr6fVrc`58Dw?mj9{
zvT@OnXFEUo`+E*dR-icj)6cX%#s?qwK_pJ&yG@B~)nkoQkSRWMg<WL6{AFS}hWHgr
zP6TV|cs9IyfbrqSeFf0d9X6CCZ9X9X5OjueJ`{~E1wWY3Gu5V#efDx`blQNpG3)ni
zBjF6Nu30~u|8i}%-3IvS2>eI*BP%b{ACpH?+@#=!MIhXj_1hW)HGk&EcU64?g$nct
z*~i@X2b@fJbS`I!I#AvI6N7<l=Yq#!BYqqBmX58ZYS2rUe!No)rH}N2_$zku*<ml>
z4^Vs0?D9Ta=#}LywlNX(Eui9D-V%>jgjW@D#?cxL#|Iv=IX`2}2CmMw2h9ahJDSzf
zHuKgIUU9f3@V=|cZbP@D)kBOh$r%hVe#_R?1!F>wFX4mj3mFjgHf29QJl{C#6UBVZ
z#$BlfYNf`S9<41FZ0yU(98i+VNEKw-8pob=y}c(soNYx~pMR9Y94vq?1I?b#7=DwE
zt#yLl4-4TRtkCq=1WU<}>-sYzr_DiWmecX6d_d?f^RAKib3c(+EO^e!k6Gu8+-nCI
zAAD-fTFB&jQh_8y65pr?ZkK&qnxX4p$4Z8ThGjSI@v4cVu1k)UKfE+L!JVvK5t_es
zl5i`IUh@n}AHRxdDdD3T>7#P846svDReg7F8VQQ0xkBuKy$1^IL{Znd*2D=-O`y={
z2a-Td^!v=vn0T-J-PgZj8nhcyDQ7@2YQZ=9lHo(`X_A9UW;?foFc`BWHtVxl(3p5M
z3L+jmiq79#Fmy3>Q|q$8K%b45x#h$`or{dfR{9R3%+~NvnX-u@)lr#2F++%}iUAy*
z^Kb9V$_|?*n@2DD1d?wMmXb>ZCQ}J$;!PfL_~Ah6BQDf&k}N>=V}not3TbRF)8aS@
zYY9f)G!nhzgw=7uXi#50b+-=1T)>s}Lx$XVcWfq^@sOwO+1<O;;UW#cvqsVng|~b!
z7V>&jPJruB0s5Mg?Y@{h8JhWCMQ$zH6pj)OQo&BtMSh2xq%}vA<v!IvZK(_2WF5cw
z^RgRNKJU_1Ef%v1trgueelCbIW|??;YKwtzmcWm@`22#&dUU=mG-cM8UZZBz!hYdc
zwWa38kU_P&8>6pnlBC}<J}`Wq4ywe4e(SXZ^UoT8HLp%&{`9M+gjC;yC!gC5ol@1L
zO>4X!R>XDW9aWQ6aKp^!sz#z-Oxb|x0+}p77CLBi@pMVBZ<Y!>1l2t(in-REzm+;+
zd=XTwrzql&iq|edQX*S4K9d&C1@J+TH*3C*#Mymk2bFH$2Td;1LCLSQi!G~92WK*!
z0M1?68v|T^pH&Hy@5+k{fijRlF<rbfCi$-wT{@Kqcl;g%wfk2(eKz_fSTni>b}Q>q
zo#V-61c7~Au=J*Xzu0NXDNB6UqtQ07M_JpiHUChXR8AN?iY~FY<t`{*au&cmgmBo^
zy*y#($=PuN>?mexFhR06D?bC)NkxckKjVdZS;W%OkZi2PkbT6t99k&ZJrU%4FFdG8
z;Q#U&gs5$khF2ebxBu7-Xy_!$KL~8#r#uF3{)me>%Qd|x5e<;TIi7_OOjw#wCl}To
zgh%`yG~u;f(P3%tA{!v6HPJyg>MG_A{2KKsq=}V|jQB)9sxi@H0eEDgrC&3B4t_*G
zDnsZ{@qxoAgNqzp!sOGx-nG9N27^M7E0qVI;Bg30#-X3#7Z7oB=hm`79;lUs3K5z`
zTRdBGbZT5!P^FBnd<c?5@fMgn0qoG1ljN&Uy;<HeH>7^gS)XypFq9UY_+#CeIFeBG
zD%TmR>jR9B!E|Uo4IUNZQcOx}PO(F0{;;obYs7PfXg72|7Kt21;Z>Z3r69X4G<kSj
zkhVpT!s-@?yG&!cm~Y7%*q-eQlk0kh0EJ(tUpyrG5Uh_%Y7NqaCL(GGaF^IugfqCW
zVE4MP&K{1f6IMZ~b%j|EOW@U|^ex`&NCJ@^F^D_>2{I8&*nofvQ?xPgTO}v%C#%GQ
zQlPd*D0d1@)&-@I0-~JoVniVg&+&lFe8Y@ep)x}l*|&^V-t15n234;U;u)5vU{2#i
ze}#6B5eus~^b<mJ^=0W7T#E@yn`nX-`Xh<OLt~yapgfs^C8LOkV|9p_Ct?|;pB+tA
zCl=2+K)+TMT=?6XqJB*f%Q)i&gDUyq!4T%veGsk+M-CY}gT$J|&6`P%JmXKyajZwh
z!y;{or|AcT${1w0e@|SuZvI4rahltdo;^%yn|C4ajtkl(Z%{JhXS|N;%a(9Gphj}b
zY#_svm)t8{=Q;h_K|bUM?cp`|8^7nE%eOmPs9L<MU(H}|=<F`hhNC4v{~%hMKl7sT
z<)XvAn4(=aT5dYr`6d<F$lmabfZe5=LQd)5=9_{|J@1Q8-(HGI$P=!+m>KJcAl+_Y
zjHh!6;?GO^v(uEZ_&tiCi2L2E&eaPlkvH&_8ysYvj3%WQmxSxuLbVb{%yf{&maz^W
zpn$!yIVZA!+h|9AFAG$0HBDqou3_Uo92D?eHq+EQd<<&dlecjrQuh%~)KchyA*@Q=
zYYs8KySv61=FR>XUB5IYDELL^KAr1V`|52(Fff|C)Q|$BGjbF|a{aPEAgC1Y7=&bd
zzEqS^`0gwQM&xg%jGvu&^QMmH&@@0H%o)R6lOYUQU3>naO&`>zsIy}=LM%aG?p=&-
z<&)n;FL#|m#*cO?ao_()Q}i{nDhE1fO8-2+LGoDn2EcoLweRYN(uG=H+3p|VeUBtc
zl*YdYb>yIUr4_=eg<Js$hyYgleJGv4WR_LGUNyi=%*VZ=aDLKQ=ezS$8u{5sYA4+J
z@D^#u)<2i@c9xU)MfKhMN!-094B3}pwEpVCW02(7`%BGar({{+C*PeDMMh@n(Na-x
z?rzOftOkU^jPQsez(krm{&ifAC(RE@I^2~g*q~4gvr~TI<0?S1A3$SXI5!^~FT~v)
z`-&)dj%GFv#tFVGPEl(jcl0sL<2$3hb;-}`HyRToZd*fE$^%F~!+<+wT=h_S&U;)Z
zjvqi~UV~M{>WIwk)`43i@+xtg;i{A?WXD#S2eh9NR#&s3HK^F=X<#J_clRF+9yJK$
zI*i||BL%X)+Re({w*&#&9S}KR(RX1YA2udF&E3Y?bXX_1ED@Il@^e$2_Z^X%?BK4E
zfHE4T4i{kahEcpq`r9NGlkNIJ>^d8MAAvzwfC@xyfKC1YzDyg-_v}|76?eDSb5N#9
zu^@l`CKdQaOTfJU9C<~5@|#2)gWK0JO;emDoC$eQT=<xw5PpYx+ukLL+`V4$_)P=k
zQ%jdT?>ECFWis&513*1o6>ZtLCc@|U$w4Kqza^Jsxbuae-g_}0tcb-yP9p80C9`mb
z-)Zh{j9SuZxVG6z<YEz6qXh<pc$W68;`@aL$oh4Err?1WSSI5tj7r>FA71Y6El%EI
z6i?E8^bv6Z@*y1c;ueZ6X{pYrY12Z{dZr^wrmdiuSGTfa17`&B6K=ez0oD0IPgv3y
zVwqdTRZRk~G8w;b&vf|G4Gi)y_N=#W>OkQKKb((>2S2!2`!+_G))ZIA68Ksiw;T4g
zJU}IGI#ilsMRq0dhdmm(wT+_^XTF@;P2DQ5daDu$MavtOjwn7GAUzdX3p=0VcuW&X
zx}UpYpX2~Vj149fC1<t=^`~Y4wjCoBDbb)FVyyS#J>r|XNp=?Ts6e{d?4a6Tn|$YU
zri_*+yQL{?v1Q%E0ee&-+>}EcFYdmWcSZg-u5Gr5utn^>7A4|+fq}H+doc$#2;UM_
zIk^a5gEddj;2%W;U&VN!gsWkF7;7QevL7o?S^FmC8P4)xV$qq9lI*y5aIern`RK+G
zJz|EM&up1WMMu@bw}WOxWdk36mXAI*sWs<u765L$D!2uoIf3P0i7_O_=mv%gho%Ri
zc_x|!RMQp*-dJ|FG3=bKXQOD4e@?00Sm!%G?8w-W-Kwf%GFA0aa(t)4nJ%FYJ_#Fq
z^gHH83{!;taMGJWsMwT#lmF~gfz@EZo>I9efeDY$D?V0ukK5ZN%9G}NKB@^pzd%Jk
zPHg$C^KwH=Nq`Pw`yx_ujFfnqHv8L~AMYc_VfV_=hg+sNe&#1Jt4w<`s%aAhxUPXl
zW-dD^ZH^w@vM+CBUVZ#<iw-BtD*j80Uk#<4ddbrV+xlbJrLut`LG?rm^_cm9!rdeY
zRAQgcPr<AIYJ1MMbAn>vHWOD70`82Nz1PnEW#{Ieq4E3}>aZ3igCfu#pm{zti#8nI
zEb2CKhdq$&qtQkLn47We<wsYu?l@tf$0#ur6e=(nO0?^oWTuIjF3LA9BA>)H2EaQY
z?D5cJ7e;GEZ^i}sY$}p<PSnQmg@}YGh3LK991R6m?h=z&Zh%`ho04sFDfpVS$Gpj}
zBNflIev&4>9lom+&%~fyh{P>=u!jg-pyz@5PXEvVW$fZ6kDTDKRi)cbW@a(GX!^|=
z`;U>OUEq3KtqPn`lxwbtE_Q|=M)P$};?j6hvR=fkpG?5`mRUjR=}Ei59*AL2%X`Eh
zt3SZ4h00Rm$it-H{%*1&hRL5eDZ9a98hej$O}A)8vtGb;%@tU&lJb(2lhFlDMNE6y
zJ04MIeS1g5F2nf|#fHH*2ts6g;*<TaMsd=kN7oYl5H7(k;Vvn6$0i88!gZ6tW|g*H
zGk;g^Rd8IBk(5Mw>nC%8dFuET#h-spt%qZ*E%bdu{<)XR4MYF;JF4K)=6|lP9`awU
XrLyyQCk|X82tpfJ=+~Ze`RjiH<r<Xv

literal 0
HcmV?d00001

diff --git a/apps/space/public/plane-logos/black-horizontal-with-blue-logo.svg b/apps/space/public/plane-logos/black-horizontal-with-blue-logo.svg
new file mode 100644
index 000000000..ae79919fc
--- /dev/null
+++ b/apps/space/public/plane-logos/black-horizontal-with-blue-logo.svg
@@ -0,0 +1,17 @@
+<svg width="133" height="30" viewBox="0 0 133 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_372_3489)">
+<path d="M35.7598 0.00235398H44.7151C46.4036 -0.0301787 48.0819 0.274777 49.6538 0.899752C51.0897 1.48694 52.3232 2.48876 53.2005 3.7804C54.1414 5.27171 54.6058 7.02009 54.5305 8.78788C54.6025 10.5948 54.1394 12.3823 53.2005 13.921C52.338 15.271 51.1056 16.3375 49.6538 16.9901C48.0968 17.6881 46.409 18.0371 44.7062 18.0131H40.3882V30.0024H35.7598V0.00235398ZM40.3882 14.1812H43.4472C44.5022 14.1924 45.5515 14.0225 46.5505 13.6787C47.4425 13.3684 48.2171 12.7851 48.7672 12.0095C49.3447 11.1092 49.6299 10.0487 49.5829 8.97633C49.6547 7.88162 49.368 6.79348 48.7672 5.88031C48.2009 5.1354 47.4202 4.58669 46.5328 4.30986C45.5354 3.98896 44.4937 3.83143 43.4472 3.84322H40.3882V14.1812Z" fill="#262626"/>
+<path d="M63.6538 30.0023H58.9102V0.00234985H63.6538V30.0023Z" fill="#262626"/>
+<path d="M83.1961 30.0023V26.0717C82.9541 26.623 82.6146 27.1249 82.1941 27.5524C81.5462 28.2456 80.7841 28.8194 79.942 29.2485C78.8993 29.7731 77.7457 30.0319 76.5816 30.0023C74.9896 30.0315 73.4209 29.6134 72.0497 28.7943C70.6785 27.9753 69.5585 26.7874 68.8144 25.3628C68.0116 23.8079 67.6091 22.0734 67.644 20.3194C67.6069 18.5595 68.0094 16.8186 68.8144 15.2581C69.5577 13.8315 70.677 12.6411 72.048 11.819C73.419 10.9969 74.9882 10.5752 76.5816 10.6006C77.7134 10.57 78.8375 10.7969 79.8711 11.2647C80.698 11.6453 81.4539 12.1675 82.1055 12.8082C82.5675 13.2374 82.9256 13.7687 83.1518 14.3607V11.139H87.8333V29.9844L83.1961 30.0023ZM72.299 20.3194C72.2745 21.3974 72.5412 22.4617 73.0704 23.3975C73.548 24.2312 74.2333 24.9235 75.0579 25.4053C75.8825 25.8872 76.8175 26.1417 77.7697 26.1435C78.7342 26.1735 79.6872 25.9254 80.5177 25.4281C81.3482 24.9308 82.0218 24.2047 82.4602 23.3347C82.9374 22.3947 83.1751 21.349 83.1518 20.2925C83.1763 19.233 82.9385 18.1841 82.4602 17.2413C81.9964 16.419 81.3267 15.7349 80.5183 15.2581C79.6888 14.7549 78.7367 14.4969 77.7697 14.5133C76.8353 14.5149 75.9179 14.7656 75.1097 15.2401C74.2725 15.73 73.5757 16.4321 73.0881 17.2772C72.5606 18.2015 72.288 19.2521 72.299 20.3194Z" fill="#262626"/>
+<path d="M103.536 10.6096C104.757 10.611 105.964 10.8677 107.082 11.3634C108.238 11.8795 109.223 12.7205 109.92 13.7864C110.714 15.0781 111.104 16.5829 111.037 18.1029V30.0023H106.293V18.9733C106.348 18.3184 106.273 17.6591 106.074 17.0337C105.874 16.4082 105.554 15.8291 105.132 15.3299C104.739 14.9381 104.272 14.6317 103.758 14.4296C103.244 14.2274 102.695 14.1337 102.144 14.1543C101.323 14.1599 100.521 14.3994 99.8295 14.8453C99.0977 15.3167 98.4893 15.9602 98.0562 16.7209C97.5907 17.539 97.3518 18.469 97.3646 19.4131V30.0023H92.6387V11.157H97.3646V14.244C97.5688 13.6234 97.9368 13.0711 98.4286 12.6467C99.081 12.0457 99.8309 11.563 100.645 11.2198C101.557 10.8175 102.541 10.6097 103.536 10.6096Z" fill="#262626"/>
+<path d="M118.973 21.4322C118.987 22.346 119.221 23.2426 119.656 24.0436C120.095 24.8189 120.753 25.4438 121.545 25.8384C122.494 26.3044 123.541 26.5293 124.595 26.4935C125.5 26.5093 126.4 26.3635 127.255 26.0628C127.932 25.8094 128.569 25.4556 129.143 25.0128C129.56 24.6821 129.93 24.2957 130.243 23.8642L132.335 26.7448C131.854 27.3909 131.273 27.9545 130.615 28.414C129.834 28.9511 128.963 29.3402 128.044 29.5626C126.808 29.8643 125.538 30.0031 124.267 29.9754C122.476 30.0226 120.705 29.599 119.124 28.746C117.69 27.949 116.513 26.7492 115.737 25.291C114.909 23.68 114.498 21.8834 114.54 20.0682C114.532 18.3948 114.924 16.7444 115.684 15.2581C116.41 13.8364 117.524 12.6558 118.894 11.857C120.412 11.0607 122.093 10.6338 123.803 10.6105C125.513 10.5871 127.205 10.9678 128.744 11.7224C130.081 12.4518 131.174 13.5669 131.883 14.9261C132.667 16.483 133.051 18.2141 133 19.9605C133 20.0771 133 20.3284 133 20.6963C133.005 20.9431 132.984 21.1897 132.938 21.4322H118.973ZM128.567 17.9503C128.53 17.3776 128.37 16.8201 128.097 16.317C127.762 15.6679 127.264 15.12 126.652 14.7287C125.854 14.2334 124.926 13.9955 123.992 14.0466C123.03 14.0014 122.076 14.2282 121.234 14.7017C120.661 15.0464 120.172 15.5175 119.804 16.08C119.435 16.6424 119.197 17.2817 119.106 17.9503H128.567Z" fill="#262626"/>
+<path d="M29.127 0.271576H9.70898V10.0981H19.418V19.9246H29.127V0.271576Z" fill="#3F76FF"/>
+<path d="M9.709 10.0981H0V19.9066H9.709V10.0981Z" fill="#3F76FF"/>
+<path d="M19.4266 19.9246H9.73535V29.7511H19.4266V19.9246Z" fill="#3F76FF"/>
+</g>
+<defs>
+<clipPath id="clip0_372_3489">
+<rect width="133" height="30" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/space/public/plane-logos/blue-without-text.png b/apps/space/public/plane-logos/blue-without-text.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea94aec7920b8ee108ed403cd22548712d983a95
GIT binary patch
literal 2460
zcmeHJU1%Id9N*a1CXv`Clu{eebpsOdc6W9!x0hSGp6OlE9OTj?IcOBL&h5@6OKx{I
zyPMp{g9&}`14<)UH4kkS`cMR`n1`Y*CDjTx)D}Y?jKn5=h&Hr_7A^Qvh_jcwBb8{e
zuXbVB*_q$`KYsK3|JipE-TUflch^!BRTt}w_E1#S4sTRHPF8MO(|Pi$u{vLND5}Br
zM%6<4nH)uJ*{LV{+`f31tYU+M8crcDXIKPHQG3EU3#x<2rBkS1Hx=ggxhaO$HHA44
zh=aHlK?8bc!A8A>?xb26R6`mQev#gjlZgQXxsc8o8Pkz-3RAQzlexFdGjtK+4k}EW
z=aBA;C+G;a5iN0mRRIv`V2Bf>mKF*4Xc35j2LWCXSwWIPi!21`(!&sMww9KAq8%k)
z<V#@&T-TC$KAX*QSwDyEeqIQLLOc+8QDg~%b@HYQbFAq!l`TY(quRRV>e!?`i!g<U
zU4<c$uBBjD6|<&OqKOd3=b*(49Pm;q0yVXQvxe<V(YdDbD1!`Sx(>k#6|6OYUF;0t
ze=uFyzRv-nHXg6|*f18usJL+4_7RdsiI5G^PBL#Hz6UvY*j7>d2nn;v%f^x;Hi9m;
zlNe{p7nLZ7Op5|1(#;2SQ^Q&3`E>_S6uL-Z$gTNVAg~~i6a^Us<$&}82*`f0290A)
zPv<v;w#tFPeNZA94Z84wU`>_N*ft<ZST|rl;w`hEp(`}X5uCv`aZIA~uV0TvA_*I(
z^$gi?diL$5W9<=12uTtvazZiOcwCN|jtfl{#i9yB$l-KdlLM;gmx6-CYJiAS11*4s
zEda8?fF!2W)|5XKgyr*5tPXn;D4*B<<N5uzPD&7F9@>sqn4WgzPTe85nlF`3FB&S%
zGCEz9iwsq-3=~H7?jLDPX<2`02G-1G2M{s(FS=NRIXLZRp^e)530n`;9Z!Piy@FlK
zga3Pq#l3aKU51m6;Y};8ihNX>9WqIWvq>u(+cf_QMQ!%QqHW3Cv6Z<mj9$3w&6&m}
z=G6)6T77fx_UXaIthQ<Q&P&Omuc@ELp0L|*y#3AbPv))*Q%6^i)hyhcId%J2`zznQ
z@So%Je=OHobvI_utaOY|Tv@qxmb*Op<cX>utz58Bb!Viy_TBm&bW`(79f`5SA5%}Y
zRf&fl(>8Cp^#9%Xtz+B74?}myYEGZr`h6<9`lYhCaQfErv+uP&ed2?+W}4EIt7q@+
zIuD;)<&F+7RbMymL>`g0fn3gorw+b$^_0=5Xbp=WqHy72<_KYQi74~%0(gJ?qiqKl
zM(0Kw&#MjJU7Y<L6u#{mIk~lKd3MrwYq{R4d*hKPHz>z+uy7%B_4DxP@%{7g?vebb
cgtA}wpRf3)FDzbO^!}e>?cLGO_P&1TFD&-(9RL6T

literal 0
HcmV?d00001

diff --git a/apps/space/public/plane-logos/white-horizontal-with-blue-logo.svg b/apps/space/public/plane-logos/white-horizontal-with-blue-logo.svg
new file mode 100644
index 000000000..1f09cc34a
--- /dev/null
+++ b/apps/space/public/plane-logos/white-horizontal-with-blue-logo.svg
@@ -0,0 +1,17 @@
+<svg width="133" height="30" viewBox="0 0 133 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_372_3489)">
+<path d="M35.7598 0.00235398H44.7151C46.4036 -0.0301787 48.0819 0.274777 49.6538 0.899752C51.0897 1.48694 52.3232 2.48876 53.2005 3.7804C54.1414 5.27171 54.6058 7.02009 54.5305 8.78788C54.6025 10.5948 54.1394 12.3823 53.2005 13.921C52.338 15.271 51.1056 16.3375 49.6538 16.9901C48.0968 17.6881 46.409 18.0371 44.7062 18.0131H40.3882V30.0024H35.7598V0.00235398ZM40.3882 14.1812H43.4472C44.5022 14.1924 45.5515 14.0225 46.5505 13.6787C47.4425 13.3684 48.2171 12.7851 48.7672 12.0095C49.3447 11.1092 49.6299 10.0487 49.5829 8.97633C49.6547 7.88162 49.368 6.79348 48.7672 5.88031C48.2009 5.1354 47.4202 4.58669 46.5328 4.30986C45.5354 3.98896 44.4937 3.83143 43.4472 3.84322H40.3882V14.1812Z" fill="#ffffff"/>
+<path d="M63.6538 30.0023H58.9102V0.00234985H63.6538V30.0023Z" fill="#ffffff"/>
+<path d="M83.1961 30.0023V26.0717C82.9541 26.623 82.6146 27.1249 82.1941 27.5524C81.5462 28.2456 80.7841 28.8194 79.942 29.2485C78.8993 29.7731 77.7457 30.0319 76.5816 30.0023C74.9896 30.0315 73.4209 29.6134 72.0497 28.7943C70.6785 27.9753 69.5585 26.7874 68.8144 25.3628C68.0116 23.8079 67.6091 22.0734 67.644 20.3194C67.6069 18.5595 68.0094 16.8186 68.8144 15.2581C69.5577 13.8315 70.677 12.6411 72.048 11.819C73.419 10.9969 74.9882 10.5752 76.5816 10.6006C77.7134 10.57 78.8375 10.7969 79.8711 11.2647C80.698 11.6453 81.4539 12.1675 82.1055 12.8082C82.5675 13.2374 82.9256 13.7687 83.1518 14.3607V11.139H87.8333V29.9844L83.1961 30.0023ZM72.299 20.3194C72.2745 21.3974 72.5412 22.4617 73.0704 23.3975C73.548 24.2312 74.2333 24.9235 75.0579 25.4053C75.8825 25.8872 76.8175 26.1417 77.7697 26.1435C78.7342 26.1735 79.6872 25.9254 80.5177 25.4281C81.3482 24.9308 82.0218 24.2047 82.4602 23.3347C82.9374 22.3947 83.1751 21.349 83.1518 20.2925C83.1763 19.233 82.9385 18.1841 82.4602 17.2413C81.9964 16.419 81.3267 15.7349 80.5183 15.2581C79.6888 14.7549 78.7367 14.4969 77.7697 14.5133C76.8353 14.5149 75.9179 14.7656 75.1097 15.2401C74.2725 15.73 73.5757 16.4321 73.0881 17.2772C72.5606 18.2015 72.288 19.2521 72.299 20.3194Z" fill="#ffffff"/>
+<path d="M103.536 10.6096C104.757 10.611 105.964 10.8677 107.082 11.3634C108.238 11.8795 109.223 12.7205 109.92 13.7864C110.714 15.0781 111.104 16.5829 111.037 18.1029V30.0023H106.293V18.9733C106.348 18.3184 106.273 17.6591 106.074 17.0337C105.874 16.4082 105.554 15.8291 105.132 15.3299C104.739 14.9381 104.272 14.6317 103.758 14.4296C103.244 14.2274 102.695 14.1337 102.144 14.1543C101.323 14.1599 100.521 14.3994 99.8295 14.8453C99.0977 15.3167 98.4893 15.9602 98.0562 16.7209C97.5907 17.539 97.3518 18.469 97.3646 19.4131V30.0023H92.6387V11.157H97.3646V14.244C97.5688 13.6234 97.9368 13.0711 98.4286 12.6467C99.081 12.0457 99.8309 11.563 100.645 11.2198C101.557 10.8175 102.541 10.6097 103.536 10.6096Z" fill="#ffffff"/>
+<path d="M118.973 21.4322C118.987 22.346 119.221 23.2426 119.656 24.0436C120.095 24.8189 120.753 25.4438 121.545 25.8384C122.494 26.3044 123.541 26.5293 124.595 26.4935C125.5 26.5093 126.4 26.3635 127.255 26.0628C127.932 25.8094 128.569 25.4556 129.143 25.0128C129.56 24.6821 129.93 24.2957 130.243 23.8642L132.335 26.7448C131.854 27.3909 131.273 27.9545 130.615 28.414C129.834 28.9511 128.963 29.3402 128.044 29.5626C126.808 29.8643 125.538 30.0031 124.267 29.9754C122.476 30.0226 120.705 29.599 119.124 28.746C117.69 27.949 116.513 26.7492 115.737 25.291C114.909 23.68 114.498 21.8834 114.54 20.0682C114.532 18.3948 114.924 16.7444 115.684 15.2581C116.41 13.8364 117.524 12.6558 118.894 11.857C120.412 11.0607 122.093 10.6338 123.803 10.6105C125.513 10.5871 127.205 10.9678 128.744 11.7224C130.081 12.4518 131.174 13.5669 131.883 14.9261C132.667 16.483 133.051 18.2141 133 19.9605C133 20.0771 133 20.3284 133 20.6963C133.005 20.9431 132.984 21.1897 132.938 21.4322H118.973ZM128.567 17.9503C128.53 17.3776 128.37 16.8201 128.097 16.317C127.762 15.6679 127.264 15.12 126.652 14.7287C125.854 14.2334 124.926 13.9955 123.992 14.0466C123.03 14.0014 122.076 14.2282 121.234 14.7017C120.661 15.0464 120.172 15.5175 119.804 16.08C119.435 16.6424 119.197 17.2817 119.106 17.9503H128.567Z" fill="#ffffff"/>
+<path d="M29.127 0.271576H9.70898V10.0981H19.418V19.9246H29.127V0.271576Z" fill="#3F76FF"/>
+<path d="M9.709 10.0981H0V19.9066H9.709V10.0981Z" fill="#3F76FF"/>
+<path d="M19.4266 19.9246H9.73535V29.7511H19.4266V19.9246Z" fill="#3F76FF"/>
+</g>
+<defs>
+<clipPath id="clip0_372_3489">
+<rect width="133" height="30" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/space/public/plane-logos/white-horizontal.svg b/apps/space/public/plane-logos/white-horizontal.svg
new file mode 100644
index 000000000..13e2dbb9f
--- /dev/null
+++ b/apps/space/public/plane-logos/white-horizontal.svg
@@ -0,0 +1,17 @@
+<svg width="178" height="40" viewBox="0 0 178 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_435_3747)">
+<path d="M47.8574 -4.66756e-06H59.8428C62.1026 -0.0433815 64.3487 0.363226 66.4525 1.19653C68.3742 1.97944 70.025 3.3152 71.1992 5.03739C72.4584 7.02581 73.0799 9.35697 72.9792 11.714C73.0756 14.1233 72.4557 16.5067 71.1992 18.5582C70.0448 20.3582 68.3954 21.7802 66.4525 22.6503C64.3686 23.581 62.1098 24.0463 59.8309 24.0144H54.0518V40H47.8574V-4.66756e-06ZM54.0518 18.9052H58.1458C59.5579 18.9201 60.9622 18.6935 62.2992 18.2351C63.493 17.8214 64.5297 17.0436 65.2658 16.0096C66.0388 14.8091 66.4205 13.3952 66.3576 11.9653C66.4536 10.5057 66.0699 9.05483 65.2658 7.83727C64.508 6.84406 63.4631 6.11244 62.2754 5.74334C60.9405 5.31547 59.5464 5.10542 58.1458 5.12114H54.0518V18.9052Z" fill="#F2F2F2"/>
+<path d="M85.1905 40H78.8418V0H85.1905V40Z" fill="#F2F2F2"/>
+<path d="M111.345 40V34.7592C111.021 35.4943 110.566 36.1634 110.004 36.7335C109.136 37.6576 108.117 38.4228 106.99 38.9949C105.594 39.6944 104.05 40.0394 102.492 40C100.362 40.0389 98.262 39.4814 96.4269 38.3893C94.5917 37.2972 93.0929 35.7134 92.0969 33.8139C91.0225 31.7408 90.4838 29.4281 90.5305 27.0894C90.4808 24.7429 91.0196 22.4217 92.0969 20.341C93.0918 18.4388 94.5897 16.8517 96.4246 15.7555C98.2595 14.6594 100.36 14.0971 102.492 14.131C104.007 14.0902 105.511 14.3928 106.895 15.0165C108.001 15.524 109.013 16.2202 109.885 17.0745C110.503 17.6468 110.983 18.3551 111.285 19.1445V14.8489H117.551V39.9761L111.345 40ZM96.7605 27.0894C96.7277 28.5267 97.0847 29.9458 97.7929 31.1935C98.4321 32.3051 99.3493 33.2282 100.453 33.8706C101.556 34.5131 102.808 34.8525 104.082 34.8549C105.373 34.8949 106.649 34.5641 107.76 33.901C108.871 33.2379 109.773 32.2699 110.36 31.1098C110.998 29.8565 111.317 28.4623 111.285 27.0536C111.318 25.6409 111 24.2424 110.36 22.9853C109.739 21.8888 108.843 20.9767 107.761 20.341C106.651 19.6701 105.376 19.3261 104.082 19.3479C102.832 19.3501 101.604 19.6844 100.522 20.3171C99.4017 20.9702 98.4693 21.9063 97.8166 23.0332C97.1106 24.2655 96.7459 25.6664 96.7605 27.0894Z" fill="#F2F2F2"/>
+<path d="M138.567 14.143C140.201 14.1449 141.816 14.4871 143.313 15.1481C144.86 15.8362 146.178 16.9575 147.111 18.3787C148.174 20.101 148.695 22.1074 148.606 24.134V40H142.257V25.2946C142.33 24.4215 142.23 23.5424 141.963 22.7085C141.696 21.8745 141.268 21.1023 140.703 20.4367C140.177 19.9144 139.551 19.5058 138.864 19.2363C138.176 18.9667 137.441 18.8418 136.703 18.8693C135.606 18.8767 134.532 19.196 133.606 19.7906C132.627 20.4192 131.813 21.2771 131.233 22.2914C130.61 23.3822 130.29 24.6223 130.307 25.8809V40H123.982V14.8729H130.307V18.9889C130.581 18.1614 131.073 17.425 131.731 16.8591C132.605 16.0578 133.608 15.4143 134.698 14.9566C135.918 14.4202 137.235 14.1432 138.567 14.143Z" fill="#F2F2F2"/>
+<path d="M159.226 28.5731C159.245 29.7916 159.558 30.987 160.14 32.055C160.728 33.0887 161.608 33.922 162.668 34.4481C163.938 35.0694 165.339 35.3692 166.75 35.3216C167.961 35.3426 169.166 35.1482 170.31 34.7472C171.217 34.4094 172.068 33.9376 172.837 33.3473C173.394 32.9063 173.889 32.3911 174.309 31.8157L177.109 35.6566C176.465 36.5181 175.688 37.2695 174.807 37.8821C173.761 38.5983 172.596 39.1172 171.366 39.4137C169.711 39.8159 168.012 40.0009 166.311 39.9641C163.915 40.027 161.543 39.4622 159.428 38.3249C157.508 37.2622 155.934 35.6624 154.895 33.7182C153.787 31.5703 153.236 29.1747 153.293 26.7544C153.282 24.5233 153.807 22.3227 154.824 20.341C155.795 18.4454 157.286 16.8713 159.12 15.8062C161.152 14.7444 163.402 14.1753 165.69 14.1442C167.979 14.113 170.243 14.6206 172.303 15.6267C174.093 16.5992 175.555 18.086 176.504 19.8983C177.552 21.9742 178.067 24.2823 177.999 26.6108C177.999 26.7664 177.999 27.1014 177.999 27.592C178.005 27.921 177.977 28.2498 177.916 28.5731H159.226ZM172.066 23.9306C172.017 23.167 171.802 22.4237 171.437 21.7529C170.989 20.8874 170.322 20.1568 169.503 19.6351C168.435 18.9747 167.194 18.6575 165.943 18.7257C164.656 18.6653 163.378 18.9678 162.252 19.5992C161.485 20.0587 160.831 20.6868 160.338 21.4368C159.844 22.1867 159.526 23.0391 159.404 23.9306H172.066Z" fill="#F2F2F2"/>
+<path d="M38.9821 0.358963H12.9941V13.461H25.9881V26.563H38.9821V0.358963Z" fill="#F2F2F2"/>
+<path d="M12.994 13.461H0V26.539H12.994V13.461Z" fill="#F2F2F2"/>
+<path d="M25.9996 26.563H13.0293V39.665H25.9996V26.563Z" fill="#F2F2F2"/>
+</g>
+<defs>
+<clipPath id="clip0_435_3747">
+<rect width="178" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/space/services/api.service.ts b/apps/space/services/api.service.ts
index 4cf26d9ee..d3ad3949b 100644
--- a/apps/space/services/api.service.ts
+++ b/apps/space/services/api.service.ts
@@ -90,6 +90,16 @@ abstract class APIService {
     });
   }
 
+  mediaUpload(url: string, data = {}, config = {}): Promise<any> {
+    return axios({
+      method: "post",
+      url: this.baseURL + url,
+      data,
+      headers: this.getAccessToken() ? { ...this.getHeaders(), "Content-Type": "multipart/form-data" } : {},
+      ...config,
+    });
+  }
+
   request(config = {}) {
     return axios(config);
   }
diff --git a/apps/space/services/authentication.service.ts b/apps/space/services/authentication.service.ts
new file mode 100644
index 000000000..a6f1ec90f
--- /dev/null
+++ b/apps/space/services/authentication.service.ts
@@ -0,0 +1,92 @@
+// services
+import APIService from "services/api.service";
+
+class AuthService extends APIService {
+  constructor() {
+    super(process.env.NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async emailLogin(data: any) {
+    return this.post("/api/sign-in/", data, { headers: {} })
+      .then((response) => {
+        this.setAccessToken(response?.data?.access_token);
+        this.setRefreshToken(response?.data?.refresh_token);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async emailSignUp(data: { email: string; password: string }) {
+    return this.post("/api/sign-up/", data, { headers: {} })
+      .then((response) => {
+        this.setAccessToken(response?.data?.access_token);
+        this.setRefreshToken(response?.data?.refresh_token);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async socialAuth(data: any): Promise<{
+    access_token: string;
+    refresh_toke: string;
+    user: any;
+  }> {
+    return this.post("/api/social-auth/", data, { headers: {} })
+      .then((response) => {
+        this.setAccessToken(response?.data?.access_token);
+        this.setRefreshToken(response?.data?.refresh_token);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async emailCode(data: any) {
+    return this.post("/api/magic-generate/", data, { headers: {} })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async forgotPassword(data: { email: string }): Promise<any> {
+    return this.post(`/api/forgot-password/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async magicSignIn(data: any) {
+    const response = await this.post("/api/magic-sign-in/", data, { headers: {} });
+    if (response?.status === 200) {
+      this.setAccessToken(response?.data?.access_token);
+      this.setRefreshToken(response?.data?.refresh_token);
+      return response?.data;
+    }
+    throw response.response.data;
+  }
+
+  async signOut() {
+    return this.post("/api/sign-out/", { refresh_token: this.getRefreshToken() })
+      .then((response) => {
+        this.purgeAccessToken();
+        this.purgeRefreshToken();
+        return response?.data;
+      })
+      .catch((error) => {
+        this.purgeAccessToken();
+        this.purgeRefreshToken();
+        throw error?.response?.data;
+      });
+  }
+}
+
+const authService = new AuthService();
+
+export default authService;
diff --git a/apps/space/services/file.service.ts b/apps/space/services/file.service.ts
new file mode 100644
index 000000000..5ef34fc76
--- /dev/null
+++ b/apps/space/services/file.service.ts
@@ -0,0 +1,101 @@
+// services
+import APIService from "services/api.service";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+interface UnSplashImage {
+  id: string;
+  created_at: Date;
+  updated_at: Date;
+  promoted_at: Date;
+  width: number;
+  height: number;
+  color: string;
+  blur_hash: string;
+  description: null;
+  alt_description: string;
+  urls: UnSplashImageUrls;
+  [key: string]: any;
+}
+
+interface UnSplashImageUrls {
+  raw: string;
+  full: string;
+  regular: string;
+  small: string;
+  thumb: string;
+  small_s3: string;
+}
+
+class FileServices extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async uploadFile(workspaceSlug: string, file: FormData): Promise<any> {
+    return this.mediaUpload(`/api/workspaces/${workspaceSlug}/file-assets/`, file)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteImage(assetUrlWithWorkspaceId: string): Promise<any> {
+    return this.delete(`/api/workspaces/file-assets/${assetUrlWithWorkspaceId}/`)
+      .then((response) => response?.status)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteFile(workspaceId: string, assetUrl: string): Promise<any> {
+    const lastIndex = assetUrl.lastIndexOf("/");
+    const assetId = assetUrl.substring(lastIndex + 1);
+
+    return this.delete(`/api/workspaces/file-assets/${workspaceId}/${assetId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+  async uploadUserFile(file: FormData): Promise<any> {
+    return this.mediaUpload(`/api/users/file-assets/`, file)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteUserFile(assetUrl: string): Promise<any> {
+    const lastIndex = assetUrl.lastIndexOf("/");
+    const assetId = assetUrl.substring(lastIndex + 1);
+
+    return this.delete(`/api/users/file-assets/${assetId}`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getUnsplashImages(page: number = 1, query?: string): Promise<UnSplashImage[]> {
+    const url = "/api/unsplash";
+
+    return this.request({
+      method: "get",
+      url,
+      params: {
+        page,
+        per_page: 20,
+        query,
+      },
+    })
+      .then((response) => response?.data?.results ?? response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+const fileServices = new FileServices();
+
+export default fileServices;
diff --git a/apps/space/services/issue.service.ts b/apps/space/services/issue.service.ts
index 38b2f7a1d..03a94654b 100644
--- a/apps/space/services/issue.service.ts
+++ b/apps/space/services/issue.service.ts
@@ -6,8 +6,135 @@ class IssueService extends APIService {
     super(process.env.NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
   }
 
-  async getPublicIssues(workspace_slug: string, project_slug: string): Promise<any> {
-    return this.get(`/api/public/workspaces/${workspace_slug}/project-boards/${project_slug}/issues/`)
+  async getPublicIssues(workspace_slug: string, project_slug: string, params: any): Promise<any> {
+    return this.get(`/api/public/workspaces/${workspace_slug}/project-boards/${project_slug}/issues/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getIssueById(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getIssueVotes(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/votes/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createIssueVote(workspaceSlug: string, projectId: string, issueId: string, data: any): Promise<any> {
+    return this.post(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/votes/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteIssueVote(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.delete(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/votes/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getIssueReactions(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/reactions/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createIssueReaction(workspaceSlug: string, projectId: string, issueId: string, data: any): Promise<any> {
+    return this.post(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/reactions/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteIssueReaction(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    reactionId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/reactions/${reactionId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getIssueComments(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/comments/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getCommentsReactions(workspaceSlug: string, projectId: string, commentId: string): Promise<any> {
+    return this.get(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/comments/${commentId}/reactions/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createIssueComment(workspaceSlug: string, projectId: string, issueId: string, data: any): Promise<any> {
+    return this.post(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/comments/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateIssueComment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    data: any
+  ): Promise<any> {
+    return this.patch(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/comments/${commentId}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteIssueComment(workspaceSlug: string, projectId: string, issueId: string, commentId: string): Promise<any> {
+    return this.delete(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/comments/${commentId}/`
+    )
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response;
diff --git a/apps/space/services/project.service.ts b/apps/space/services/project.service.ts
index 6f0275877..291a5f323 100644
--- a/apps/space/services/project.service.ts
+++ b/apps/space/services/project.service.ts
@@ -6,7 +6,7 @@ class ProjectService extends APIService {
     super(process.env.NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
   }
 
-  async getProjectSettingsAsync(workspace_slug: string, project_slug: string): Promise<any> {
+  async getProjectSettings(workspace_slug: string, project_slug: string): Promise<any> {
     return this.get(`/api/public/workspaces/${workspace_slug}/project-boards/${project_slug}/settings/`)
       .then((response) => response?.data)
       .catch((error) => {
diff --git a/apps/space/services/user.service.ts b/apps/space/services/user.service.ts
index a84358a96..9a324bb95 100644
--- a/apps/space/services/user.service.ts
+++ b/apps/space/services/user.service.ts
@@ -13,6 +13,14 @@ class UserService extends APIService {
         throw error?.response;
       });
   }
+
+  async updateMe(data: any): Promise<any> {
+    return this.patch("/api/users/me/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 export default UserService;
diff --git a/apps/space/store/issue.ts b/apps/space/store/issue.ts
index 79ad4b910..d47336984 100644
--- a/apps/space/store/issue.ts
+++ b/apps/space/store/issue.ts
@@ -1,72 +1,78 @@
-// mobx
-import { observable, action, computed, makeObservable, runInAction } from "mobx";
-// service
+import { observable, action, computed, makeObservable, runInAction, reaction } from "mobx";
+// services
 import IssueService from "services/issue.service";
+// store
+import { RootStore } from "./root";
 // types
-import { TIssueBoardKeys } from "store/types/issue";
-import { IIssueStore, IIssue, IIssueState, IIssueLabel } from "./types";
+// import { IssueDetailType, TIssueBoardKeys } from "types/issue";
+import { IIssue, IIssueState, IIssueLabel } from "types/issue";
+
+export interface IIssueStore {
+  loader: boolean;
+  error: any;
+  // issue options
+  issues: IIssue[] | null;
+  states: IIssueState[] | null;
+  labels: IIssueLabel[] | null;
+  // filtering
+  filteredStates: string[];
+  filteredLabels: string[];
+  filteredPriorities: string[];
+  // service
+  issueService: any;
+  // actions
+  fetchPublicIssues: (workspace_slug: string, project_slug: string, params: any) => void;
+  getCountOfIssuesByState: (state: string) => number;
+  getFilteredIssuesByState: (state: string) => IIssue[];
+}
 
 class IssueStore implements IIssueStore {
-  currentIssueBoardView: TIssueBoardKeys | null = null;
-
   loader: boolean = false;
   error: any | null = null;
 
-  states: IIssueState[] | null = null;
-  labels: IIssueLabel[] | null = null;
-  issues: IIssue[] | null = null;
+  states: IIssueState[] | null = [];
+  labels: IIssueLabel[] | null = [];
 
-  userSelectedStates: string[] = [];
-  userSelectedLabels: string[] = [];
-  // root store
-  rootStore;
-  // service
-  issueService;
+  filteredStates: string[] = [];
+  filteredLabels: string[] = [];
+  filteredPriorities: string[] = [];
+
+  issues: IIssue[] | null = [];
+  issue_detail: any = {};
+
+  rootStore: RootStore;
+  issueService: any;
 
   constructor(_rootStore: any) {
     makeObservable(this, {
       // observable
-      currentIssueBoardView: observable,
-
       loader: observable,
       error: observable,
-
+      // issue options
       states: observable.ref,
       labels: observable.ref,
+      // filtering
+      filteredStates: observable.ref,
+      filteredLabels: observable.ref,
+      filteredPriorities: observable.ref,
+      // issues
       issues: observable.ref,
-
-      userSelectedStates: observable,
-      userSelectedLabels: observable,
-      // action
-      setCurrentIssueBoardView: action,
-      getIssuesAsync: action,
-      // computed
+      issue_detail: observable.ref,
+      // actions
+      fetchPublicIssues: action,
+      getFilteredIssuesByState: action,
     });
 
     this.rootStore = _rootStore;
     this.issueService = new IssueService();
   }
 
-  // computed
-  getCountOfIssuesByState(state_id: string): number {
-    return this.issues?.filter((issue) => issue.state == state_id).length || 0;
-  }
-
-  getFilteredIssuesByState(state_id: string): IIssue[] | [] {
-    return this.issues?.filter((issue) => issue.state == state_id) || [];
-  }
-
-  // action
-  setCurrentIssueBoardView = async (view: TIssueBoardKeys) => {
-    this.currentIssueBoardView = view;
-  };
-
-  getIssuesAsync = async (workspace_slug: string, project_slug: string) => {
+  fetchPublicIssues = async (workspaceSlug: string, projectId: string, params: any) => {
     try {
       this.loader = true;
       this.error = null;
 
-      const response = await this.issueService.getPublicIssues(workspace_slug, project_slug);
+      const response = await this.issueService.getPublicIssues(workspaceSlug, projectId, params);
 
       if (response) {
         const _states: IIssueState[] = [...response?.states];
@@ -78,14 +84,20 @@ class IssueStore implements IIssueStore {
           this.issues = _issues;
           this.loader = false;
         });
-        return response;
       }
     } catch (error) {
       this.loader = false;
       this.error = error;
-      return error;
     }
   };
+
+  // computed
+  getCountOfIssuesByState(state_id: string): number {
+    return this.issues?.filter((issue) => issue.state == state_id).length || 0;
+  }
+
+  getFilteredIssuesByState = (state_id: string): IIssue[] | [] =>
+    this.issues?.filter((issue) => issue.state == state_id) || [];
 }
 
 export default IssueStore;
diff --git a/apps/space/store/issue_details.ts b/apps/space/store/issue_details.ts
new file mode 100644
index 000000000..68f9af1ca
--- /dev/null
+++ b/apps/space/store/issue_details.ts
@@ -0,0 +1,259 @@
+import { makeObservable, observable, action, runInAction } from "mobx";
+// store
+import { RootStore } from "./root";
+// services
+import IssueService from "services/issue.service";
+import { IIssue } from "types/issue";
+
+export type IPeekMode = "side" | "modal" | "full";
+
+export interface IIssueDetailStore {
+  loader: boolean;
+  error: any;
+  // peek info
+  peekId: string | null;
+  peekMode: IPeekMode;
+  details: {
+    [key: string]: IIssue;
+  };
+  // peek actions
+  setPeekId: (issueId: string | null) => void;
+  setPeekMode: (mode: IPeekMode) => void;
+  // issue details
+  fetchIssueDetails: (workspaceId: string, projectId: string, issueId: string) => void;
+  // issue comments
+  addIssueComment: (workspaceId: string, projectId: string, issueId: string, data: any) => Promise<void>;
+  updateIssueComment: (
+    workspaceId: string,
+    projectId: string,
+    issueId: string,
+    comment_id: string,
+    data: any
+  ) => Promise<any>;
+  deleteIssueComment: (workspaceId: string, projectId: string, issueId: string, comment_id: string) => void;
+  // issue reactions
+  addIssueReaction: (workspaceId: string, projectId: string, issueId: string, data: any) => void;
+  removeIssueReaction: (workspaceId: string, projectId: string, issueId: string, reactionId: string) => void;
+  // issue votes
+  addIssueVote: (workspaceId: string, projectId: string, issueId: string, data: { vote: 1 | -1 }) => Promise<void>;
+  removeIssueVote: (workspaceId: string, projectId: string, issueId: string) => Promise<void>;
+}
+
+class IssueDetailStore implements IssueDetailStore {
+  loader: boolean = false;
+  error: any = null;
+  peekId: string | null = null;
+  peekMode: IPeekMode = "side";
+  details: {
+    [key: string]: IIssue;
+  } = {};
+  issueService;
+  rootStore: RootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      loader: observable.ref,
+      error: observable.ref,
+      // peek
+      peekId: observable.ref,
+      peekMode: observable.ref,
+      details: observable.ref,
+      // actions
+      setPeekId: action,
+      fetchIssueDetails: action,
+      setPeekMode: action,
+    });
+    this.issueService = new IssueService();
+    this.rootStore = _rootStore;
+  }
+
+  setPeekId = (issueId: string | null) => {
+    this.peekId = issueId;
+  };
+
+  setPeekMode = (mode: IPeekMode) => {
+    this.peekMode = mode;
+  };
+
+  fetchIssueDetails = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const issueDetails = this.rootStore.issue.issues?.find((i) => i.id === issueId);
+      const commentsResponse = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId);
+
+      if (issueDetails) {
+        runInAction(() => {
+          this.details = {
+            ...this.details,
+            [issueId]: {
+              ...issueDetails,
+              comments: commentsResponse,
+            },
+          };
+        });
+      }
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+    }
+  };
+
+  addIssueComment = async (workspaceSlug: string, projectId: string, issueId: string, data: any) => {
+    try {
+      const issueDetails = this.rootStore.issue.issues?.find((i) => i.id === issueId);
+      const issueCommentResponse = await this.issueService.createIssueComment(workspaceSlug, projectId, issueId, data);
+      if (issueDetails) {
+        runInAction(() => {
+          this.details = {
+            ...this.details,
+            [issueId]: {
+              ...issueDetails,
+              comments: [...this.details[issueId].comments, issueCommentResponse],
+            },
+          };
+        });
+      }
+      return issueCommentResponse;
+    } catch (error) {
+      console.log("Failed to add issue comment");
+      throw error;
+    }
+  };
+
+  updateIssueComment = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    data: any
+  ) => {
+    try {
+      const issueCommentUpdateResponse = await this.issueService.updateIssueComment(
+        workspaceSlug,
+        projectId,
+        issueId,
+        commentId,
+        data
+      );
+
+      if (issueCommentUpdateResponse) {
+        const remainingComments = this.details[issueId].comments.filter((com) => com.id != commentId);
+        runInAction(() => {
+          this.details = {
+            ...this.details,
+            [issueId]: {
+              ...this.details[issueId],
+              comments: [...remainingComments, issueCommentUpdateResponse],
+            },
+          };
+        });
+      }
+      return issueCommentUpdateResponse;
+    } catch (error) {
+      console.log("Failed to add issue comment");
+    }
+  };
+
+  deleteIssueComment = async (workspaceSlug: string, projectId: string, issueId: string, comment_id: string) => {
+    try {
+      await this.issueService.deleteIssueComment(workspaceSlug, projectId, issueId, comment_id);
+      const remainingComments = this.details[issueId].comments.filter((c) => c.id != comment_id);
+      runInAction(() => {
+        this.details = {
+          ...this.details,
+          [issueId]: {
+            ...this.details[issueId],
+            comments: remainingComments,
+          },
+        };
+      });
+    } catch (error) {
+      console.log("Failed to add issue vote");
+    }
+  };
+
+  addIssueReaction = async (workspaceSlug: string, projectId: string, issueId: string, data: any) => {
+    try {
+      const issueVoteResponse = await this.issueService.createIssueReaction(workspaceSlug, projectId, issueId, data);
+
+      if (issueVoteResponse) {
+        runInAction(() => {
+          this.details = {
+            ...this.details,
+            [issueId]: {
+              ...this.details[issueId],
+              reactions: [...this.details[issueId].reactions, issueVoteResponse],
+            },
+          };
+        });
+      }
+    } catch (error) {
+      console.log("Failed to add issue vote");
+    }
+  };
+
+  removeIssueReaction = async (workspaceSlug: string, projectId: string, issueId: string, reactionId: string) => {
+    try {
+      await this.issueService.deleteIssueReaction(workspaceSlug, projectId, issueId, reactionId);
+      const reactions = await this.issueService.getIssueReactions(workspaceSlug, projectId, issueId);
+
+      if (reactions) {
+        runInAction(() => {
+          this.details = {
+            ...this.details,
+            [issueId]: {
+              ...this.details[issueId],
+              reactions: reactions,
+            },
+          };
+        });
+      }
+    } catch (error) {
+      console.log("Failed to remove issue reaction");
+    }
+  };
+
+  addIssueVote = async (workspaceSlug: string, projectId: string, issueId: string, data: { vote: 1 | -1 }) => {
+    try {
+      const issueVoteResponse = await this.issueService.createIssueVote(workspaceSlug, projectId, issueId, data);
+      const issueDetails = await this.issueService.getIssueById(workspaceSlug, projectId, issueId);
+
+      if (issueVoteResponse) {
+        runInAction(() => {
+          this.details = {
+            ...this.details,
+            [issueId]: {
+              ...issueDetails,
+            },
+          };
+        });
+      }
+    } catch (error) {
+      console.log("Failed to add issue vote");
+    }
+  };
+
+  removeIssueVote = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      await this.issueService.deleteIssueVote(workspaceSlug, projectId, issueId);
+      const issueDetails = await this.issueService.getIssueById(workspaceSlug, projectId, issueId);
+
+      if (issueDetails) {
+        runInAction(() => {
+          this.details = {
+            ...this.details,
+            [issueId]: {
+              ...issueDetails,
+            },
+          };
+        });
+      }
+    } catch (error) {
+      console.log("Failed to remove issue vote");
+    }
+  };
+}
+
+export default IssueDetailStore;
diff --git a/apps/space/store/issue_legacy.ts b/apps/space/store/issue_legacy.ts
new file mode 100644
index 000000000..a2cc2e306
--- /dev/null
+++ b/apps/space/store/issue_legacy.ts
@@ -0,0 +1,566 @@
+// mobx
+import { observable, action, computed, makeObservable, runInAction, reaction } from "mobx";
+// service
+import IssueService from "services/issue.service";
+// types
+import { IssueDetailType, TIssueBoardKeys, IIssueLabel, IIssueState, IIssue } from "types/issue";
+
+export interface IIssueStore {
+  currentIssueBoardView: TIssueBoardKeys | null;
+  loader: boolean;
+  error: any | null;
+  states: IIssueState[] | null;
+  labels: IIssueLabel[] | null;
+  issues: IIssue[] | null;
+  issue_detail: IssueDetailType;
+  userSelectedStates: string[];
+  userSelectedLabels: string[];
+  userSelectedPriorities: string[];
+  activePeekOverviewIssueId: string | null;
+  getCountOfIssuesByState: (state: string) => number;
+  getFilteredIssuesByState: (state: string) => IIssue[];
+  getUserSelectedFilter: (key: "state" | "priority" | "label", value: string) => boolean;
+  checkIfFilterExistsForKey: (key: "state" | "priority" | "label") => boolean;
+  clearUserSelectedFilter: (key: "state" | "priority" | "label" | "all") => void;
+  getIfFiltersIsEmpty: () => boolean;
+  getURLDefinition: (
+    workspaceSlug: string,
+    projectId: string,
+    action?: {
+      key: "state" | "priority" | "label" | "all";
+      value?: string;
+      removeAll?: boolean;
+    }
+  ) => string;
+  setActivePeekOverviewIssueId: (value: any) => void;
+  setCurrentIssueBoardView: (view: TIssueBoardKeys) => void;
+  fetchPublicIssues: (workspaceSlug: string, projectId: string, params: any) => Promise<void>;
+  getIssueByIdAsync: (workspaceSlug: string, projectId: string, issueId: string) => Promise<IssueDetailType>;
+}
+
+class IssueLegacyStore {
+  currentIssueBoardView: TIssueBoardKeys | null = null;
+
+  loader: boolean = false;
+  error: any | null = null;
+
+  states: IIssueState[] | null = null;
+  labels: IIssueLabel[] | null = null;
+  issues: IIssue[] | null = null;
+
+  issue_detail: IssueDetailType = {};
+
+  activePeekOverviewIssueId: string | null = null;
+
+  userSelectedStates: string[] = [];
+  userSelectedLabels: string[] = [];
+  userSelectedPriorities: string[] = [];
+  // root store
+  rootStore;
+  // service
+  issueService;
+
+  constructor(_rootStore: any) {
+    makeObservable(this, {
+      // observable
+      currentIssueBoardView: observable,
+
+      loader: observable,
+      error: observable,
+
+      states: observable.ref,
+      labels: observable.ref,
+      issues: observable.ref,
+      issue_detail: observable.ref,
+
+      activePeekOverviewIssueId: observable.ref,
+
+      userSelectedStates: observable.ref,
+      userSelectedLabels: observable.ref,
+      userSelectedPriorities: observable.ref,
+      // action
+      setCurrentIssueBoardView: action,
+      fetchPublicIssues: action,
+      // computed
+    });
+
+    this.rootStore = _rootStore;
+    this.issueService = new IssueService();
+  }
+
+  // computed
+  getCountOfIssuesByState(state_id: string): number {
+    return this.issues?.filter((issue) => issue.state == state_id).length || 0;
+  }
+
+  getFilteredIssuesByState(state_id: string): IIssue[] | [] {
+    return this.issues?.filter((issue) => issue.state == state_id) || [];
+  }
+
+  setActivePeekOverviewIssueId = (issueId: string | null) => (this.activePeekOverviewIssueId = issueId);
+
+  /**
+   *
+   * @param key Is the key of the filter, i.e. state, label, priority
+   * @param value Is the value of the filter, i.e. state_id, label_id, priority
+   * @returns boolean
+   */
+
+  getUserSelectedFilter(key: "state" | "priority" | "label", value: string): boolean {
+    if (key == "state") {
+      return this.userSelectedStates.includes(value);
+    } else if (key == "label") {
+      return this.userSelectedLabels.includes(value);
+    } else if (key == "priority") {
+      return this.userSelectedPriorities.includes(value);
+    } else {
+      return false;
+    }
+  }
+
+  checkIfFilterExistsForKey: (key: "state" | "priority" | "label") => boolean = (key) => {
+    if (key == "state") {
+      return this.userSelectedStates.length > 0;
+    } else if (key == "label") {
+      return this.userSelectedLabels.length > 0;
+    } else if (key == "priority") {
+      return this.userSelectedPriorities.length > 0;
+    } else {
+      return false;
+    }
+  };
+
+  clearUserSelectedFilter(key: "state" | "priority" | "label" | "all") {
+    if (key == "state") {
+      this.userSelectedStates = [];
+    } else if (key == "label") {
+      this.userSelectedLabels = [];
+    } else if (key == "priority") {
+      this.userSelectedPriorities = [];
+    } else if (key == "all") {
+      this.userSelectedStates = [];
+      this.userSelectedLabels = [];
+      this.userSelectedPriorities = [];
+    }
+  }
+
+  getIfFiltersIsEmpty: () => boolean = () =>
+    this.userSelectedStates.length === 0 &&
+    this.userSelectedLabels.length === 0 &&
+    this.userSelectedPriorities.length === 0;
+
+  getURLDefinition = (
+    workspaceSlug: string,
+    projectId: string,
+    action?: {
+      key: "state" | "priority" | "label" | "all";
+      value?: string;
+      removeAll?: boolean;
+    }
+  ) => {
+    let url = `/${workspaceSlug}/${projectId}?board=${this.currentIssueBoardView}`;
+
+    if (action) {
+      if (action.key === "state")
+        this.userSelectedStates = action.removeAll
+          ? []
+          : [...this.userSelectedStates].filter((state) => state !== action.value);
+      if (action.key === "label")
+        this.userSelectedLabels = action.removeAll
+          ? []
+          : [...this.userSelectedLabels].filter((label) => label !== action.value);
+      if (action.key === "priority")
+        this.userSelectedPriorities = action.removeAll
+          ? []
+          : [...this.userSelectedPriorities].filter((priority) => priority !== action.value);
+      if (action.key === "all") {
+        this.userSelectedStates = [];
+        this.userSelectedLabels = [];
+        this.userSelectedPriorities = [];
+      }
+    }
+
+    if (this.checkIfFilterExistsForKey("state")) {
+      url += `&states=${this.userSelectedStates.join(",")}`;
+    }
+    if (this.checkIfFilterExistsForKey("label")) {
+      url += `&labels=${this.userSelectedLabels.join(",")}`;
+    }
+    if (this.checkIfFilterExistsForKey("priority")) {
+      url += `&priorities=${this.userSelectedPriorities.join(",")}`;
+    }
+
+    return url;
+  };
+
+  // action
+  setCurrentIssueBoardView = async (view: TIssueBoardKeys) => {
+    this.currentIssueBoardView = view;
+  };
+
+  fetchPublicIssues = async (workspaceSlug: string, projectId: string, params: any) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const response = await this.issueService.getPublicIssues(workspaceSlug, projectId, params);
+
+      if (response) {
+        const _states: IIssueState[] = [...response?.states];
+        const _labels: IIssueLabel[] = [...response?.labels];
+        const _issues: IIssue[] = [...response?.issues];
+        runInAction(() => {
+          this.states = _states;
+          this.labels = _labels;
+          this.issues = _issues;
+          this.loader = false;
+        });
+        return response;
+      }
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      return error;
+    }
+  };
+
+  getIssueByIdAsync = async (workspaceSlug: string, projectId: string, issueId: string): Promise<IssueDetailType> => {
+    try {
+      const response = this.issues?.find((issue) => issue.id === issueId);
+
+      if (response) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            issue: response,
+            comments: [],
+            reactions: [],
+            votes: [],
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+
+        this.getIssueReactionsAsync(workspaceSlug, projectId, issueId);
+        this.getIssueVotesAsync(workspaceSlug, projectId, issueId);
+        this.getIssueCommentsAsync(workspaceSlug, projectId, issueId);
+      }
+
+      return this.issue_detail[issueId] as any;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  getIssueVotesAsync = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const response = await this.issueService.getIssueVotes(workspaceSlug, projectId, issueId);
+
+      if (response) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            ...this.issue_detail[issueId],
+            votes: response,
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  createIssueVoteAsync = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: {
+      vote: 1 | -1;
+    }
+  ) => {
+    try {
+      const response = await this.issueService.createIssueVote(workspaceSlug, projectId, issueId, data);
+
+      if (response) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            ...this.issue_detail[issueId],
+            votes: [
+              ...{ ...this.issue_detail }[issueId].votes.filter(
+                (vote) => vote.actor !== this.rootStore?.user?.currentUser?.id
+              ),
+              response,
+            ],
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  deleteIssueVoteAsync = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const _votes = (this.issue_detail[issueId].votes = this.issue_detail[issueId].votes.filter(
+        (vote) => vote.actor !== this.rootStore?.user?.user?.id
+      ));
+
+      runInAction(() => {
+        this.issue_detail[issueId].votes = _votes;
+      });
+
+      const response = await this.issueService.deleteIssueVote(workspaceSlug, projectId, issueId);
+
+      const votesAfterCall = await this.issueService.getIssueVotes(workspaceSlug, projectId, issueId);
+
+      if (votesAfterCall)
+        runInAction(() => {
+          this.issue_detail[issueId].votes = votesAfterCall;
+        });
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  getIssueReactionsAsync = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const response = await this.issueService.getIssueReactions(workspaceSlug, projectId, issueId);
+
+      if (response) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            ...this.issue_detail[issueId],
+            reactions: response,
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  createIssueReactionAsync = async (workspaceSlug: string, projectId: string, issueId: string, data: any) => {
+    try {
+      const response = await this.issueService.createIssueReaction(workspaceSlug, projectId, issueId, data);
+
+      if (response) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            ...this.issue_detail[issueId],
+            reactions: [...this.issue_detail[issueId].reactions, response],
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  deleteIssueReactionAsync = async (workspaceSlug: string, projectId: string, issueId: string, reactionHex: string) => {
+    try {
+      const newReactionsList = this.issue_detail[issueId].reactions.filter(
+        (reaction) => reaction.reaction !== reactionHex
+      );
+
+      const _issue_detail = {
+        ...this.issue_detail,
+        [issueId]: {
+          ...this.issue_detail[issueId],
+          reactions: newReactionsList,
+        },
+      };
+
+      runInAction(() => {
+        this.issue_detail = _issue_detail;
+      });
+
+      const response = await this.issueService.deleteIssueReaction(workspaceSlug, projectId, issueId, reactionHex);
+
+      const reactionsAfterCall = await this.issueService.getIssueReactions(workspaceSlug, projectId, issueId);
+
+      if (reactionsAfterCall) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            ...this.issue_detail[issueId],
+            reactions: reactionsAfterCall,
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  getIssueCommentsAsync = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const response = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId);
+
+      if (response) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            ...this.issue_detail[issueId],
+            comments: response,
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  createIssueCommentAsync = async (workspaceSlug: string, projectId: string, issueId: string, data: any) => {
+    try {
+      const response = await this.issueService.createIssueComment(workspaceSlug, projectId, issueId, data);
+
+      if (response) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            ...this.issue_detail[issueId],
+            comments: [...this.issue_detail[issueId].comments, response],
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  updateIssueCommentAsync = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    data: any
+  ) => {
+    try {
+      const response = await this.issueService.updateIssueComment(workspaceSlug, projectId, issueId, commentId, data);
+
+      if (response) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            ...this.issue_detail[issueId],
+            comments: [
+              ...this.issue_detail[issueId].comments.filter((comment) => comment.id !== response.id),
+              response,
+            ],
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  deleteIssueCommentAsync = async (workspaceSlug: string, projectId: string, issueId: string, commentId: string) => {
+    try {
+      const newCommentsList = this.issue_detail[issueId].comments.filter((comment) => comment.id !== commentId);
+
+      const _issue_detail = {
+        ...this.issue_detail,
+        [issueId]: {
+          ...this.issue_detail[issueId],
+          comments: newCommentsList,
+        },
+      };
+
+      runInAction(() => {
+        this.issue_detail = _issue_detail;
+      });
+
+      const response = await this.issueService.deleteIssueComment(workspaceSlug, projectId, issueId, commentId);
+
+      const commentsAfterCall = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId);
+
+      if (commentsAfterCall) {
+        const _issue_detail = {
+          ...this.issue_detail,
+          [issueId]: {
+            ...this.issue_detail[issueId],
+            comments: commentsAfterCall,
+          },
+        };
+        runInAction(() => {
+          this.issue_detail = _issue_detail;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+}
+
+export default IssueLegacyStore;
diff --git a/apps/space/store/project.ts b/apps/space/store/project.ts
index e5ac58261..ddd589f9a 100644
--- a/apps/space/store/project.ts
+++ b/apps/space/store/project.ts
@@ -3,15 +3,29 @@ import { observable, action, makeObservable, runInAction } from "mobx";
 // service
 import ProjectService from "services/project.service";
 // types
-import { IProjectStore, IWorkspace, IProject, IProjectSettings } from "./types";
+import { IWorkspace, IProject, IProjectSettings } from "types/project";
+
+export interface IProjectStore {
+  loader: boolean;
+  error: any | null;
+  workspace: IWorkspace | null;
+  project: IProject | null;
+  deploySettings: IProjectSettings | null;
+  viewOptions: any;
+  activeBoard: string | null;
+  fetchProjectSettings: (workspace_slug: string, project_slug: string) => Promise<void>;
+  setActiveBoard: (value: string) => void;
+}
 
 class ProjectStore implements IProjectStore {
   loader: boolean = false;
   error: any | null = null;
-
+  // data
   workspace: IWorkspace | null = null;
   project: IProject | null = null;
-  workspaceProjectSettings: IProjectSettings | null = null;
+  deploySettings: IProjectSettings | null = null;
+  viewOptions: any = null;
+  activeBoard: string | null = null;
   // root store
   rootStore;
   // service
@@ -19,14 +33,18 @@ class ProjectStore implements IProjectStore {
 
   constructor(_rootStore: any | null = null) {
     makeObservable(this, {
+      // loaders and error observables
+      loader: observable,
+      error: observable.ref,
       // observable
       workspace: observable.ref,
       project: observable.ref,
-      workspaceProjectSettings: observable.ref,
-      loader: observable,
-      error: observable.ref,
-      // action
-      getProjectSettingsAsync: action,
+      deploySettings: observable.ref,
+      viewOptions: observable.ref,
+      activeBoard: observable.ref,
+      // actions
+      fetchProjectSettings: action,
+      setActiveBoard: action,
       // computed
     });
 
@@ -34,26 +52,23 @@ class ProjectStore implements IProjectStore {
     this.projectService = new ProjectService();
   }
 
-  getProjectSettingsAsync = async (workspace_slug: string, project_slug: string) => {
+  fetchProjectSettings = async (workspace_slug: string, project_slug: string) => {
     try {
       this.loader = true;
       this.error = null;
 
-      const response = await this.projectService.getProjectSettingsAsync(workspace_slug, project_slug);
+      const response = await this.projectService.getProjectSettings(workspace_slug, project_slug);
 
       if (response) {
         const _project: IProject = { ...response?.project_details };
         const _workspace: IWorkspace = { ...response?.workspace_detail };
-        const _workspaceProjectSettings: IProjectSettings = {
-          comments: response?.comments,
-          reactions: response?.reactions,
-          votes: response?.votes,
-          views: { ...response?.views },
-        };
+        const _viewOptions = { ...response?.views };
+        const _deploySettings = { ...response };
         runInAction(() => {
           this.project = _project;
           this.workspace = _workspace;
-          this.workspaceProjectSettings = _workspaceProjectSettings;
+          this.viewOptions = _viewOptions;
+          this.deploySettings = _deploySettings;
           this.loader = false;
         });
       }
@@ -64,6 +79,10 @@ class ProjectStore implements IProjectStore {
       return error;
     }
   };
+
+  setActiveBoard = (boardValue: string) => {
+    this.activeBoard = boardValue;
+  };
 }
 
 export default ProjectStore;
diff --git a/apps/space/store/root.ts b/apps/space/store/root.ts
index dd6d620c0..6b87020ef 100644
--- a/apps/space/store/root.ts
+++ b/apps/space/store/root.ts
@@ -2,24 +2,22 @@
 import { enableStaticRendering } from "mobx-react-lite";
 // store imports
 import UserStore from "./user";
-import ThemeStore from "./theme";
-import IssueStore from "./issue";
-import ProjectStore from "./project";
-// types
-import { IIssueStore, IProjectStore, IThemeStore, IUserStore } from "./types";
+import IssueStore, { IIssueStore } from "./issue";
+import ProjectStore, { IProjectStore } from "./project";
+import IssueDetailStore, { IIssueDetailStore } from "./issue_details";
 
 enableStaticRendering(typeof window === "undefined");
 
 export class RootStore {
-  user: IUserStore;
-  theme: IThemeStore;
+  user: UserStore;
   issue: IIssueStore;
+  issueDetails: IIssueDetailStore;
   project: IProjectStore;
 
   constructor() {
     this.user = new UserStore(this);
-    this.theme = new ThemeStore(this);
     this.issue = new IssueStore(this);
     this.project = new ProjectStore(this);
+    this.issueDetails = new IssueDetailStore(this);
   }
 }
diff --git a/apps/space/store/theme.ts b/apps/space/store/theme.ts
deleted file mode 100644
index 809d56b97..000000000
--- a/apps/space/store/theme.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// mobx
-import { observable, action, computed, makeObservable, runInAction } from "mobx";
-// types
-import { IThemeStore } from "./types";
-
-class ThemeStore implements IThemeStore {
-  theme: "light" | "dark" = "light";
-  // root store
-  rootStore;
-
-  constructor(_rootStore: any | null = null) {
-    makeObservable(this, {
-      // observable
-      theme: observable,
-      // action
-      setTheme: action,
-      // computed
-    });
-
-    this.rootStore = _rootStore;
-  }
-
-  setTheme = async (_theme: "light" | "dark" | string) => {
-    try {
-      localStorage.setItem("app_theme", _theme);
-      this.theme = _theme === "light" ? "light" : "dark";
-    } catch (error) {
-      console.error("setting user theme error", error);
-    }
-  };
-}
-
-export default ThemeStore;
diff --git a/apps/space/store/types/index.ts b/apps/space/store/types/index.ts
deleted file mode 100644
index 5a0a51eda..000000000
--- a/apps/space/store/types/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./user";
-export * from "./theme";
-export * from "./project";
-export * from "./issue";
diff --git a/apps/space/store/types/issue.ts b/apps/space/store/types/issue.ts
deleted file mode 100644
index 5feeba7bd..000000000
--- a/apps/space/store/types/issue.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-export type TIssueBoardKeys = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt";
-
-export interface IIssueBoardViews {
-  key: TIssueBoardKeys;
-  title: string;
-  icon: string;
-  className: string;
-}
-
-export type TIssuePriorityKey = "urgent" | "high" | "medium" | "low" | "none";
-export type TIssuePriorityTitle = "Urgent" | "High" | "Medium" | "Low" | "None";
-export interface IIssuePriorityFilters {
-  key: TIssuePriorityKey;
-  title: TIssuePriorityTitle;
-  className: string;
-  icon: string;
-}
-
-export type TIssueGroupKey = "backlog" | "unstarted" | "started" | "completed" | "cancelled";
-export type TIssueGroupTitle = "Backlog" | "Unstarted" | "Started" | "Completed" | "Cancelled";
-
-export interface IIssueGroup {
-  key: TIssueGroupKey;
-  title: TIssueGroupTitle;
-  color: string;
-  className: string;
-  icon: React.FC;
-}
-
-export interface IIssue {
-  id: string;
-  sequence_id: number;
-  name: string;
-  description_html: string;
-  priority: TIssuePriorityKey | null;
-  state: string;
-  state_detail: any;
-  label_details: any;
-  target_date: any;
-}
-
-export interface IIssueState {
-  id: string;
-  name: string;
-  group: TIssueGroupKey;
-  color: string;
-}
-
-export interface IIssueLabel {
-  id: string;
-  name: string;
-  color: string;
-}
-
-export interface IIssueStore {
-  currentIssueBoardView: TIssueBoardKeys | null;
-  loader: boolean;
-  error: any | null;
-
-  states: IIssueState[] | null;
-  labels: IIssueLabel[] | null;
-  issues: IIssue[] | null;
-
-  userSelectedStates: string[];
-  userSelectedLabels: string[];
-
-  getCountOfIssuesByState: (state: string) => number;
-  getFilteredIssuesByState: (state: string) => IIssue[];
-
-  setCurrentIssueBoardView: (view: TIssueBoardKeys) => void;
-  getIssuesAsync: (workspace_slug: string, project_slug: string) => Promise<void>;
-}
diff --git a/apps/space/store/types/user.ts b/apps/space/store/types/user.ts
deleted file mode 100644
index 0293c5381..000000000
--- a/apps/space/store/types/user.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface IUserStore {
-  currentUser: any | null;
-  getUserAsync: () => void;
-}
diff --git a/apps/space/store/user.ts b/apps/space/store/user.ts
index 2f4782236..4ccc2d2bb 100644
--- a/apps/space/store/user.ts
+++ b/apps/space/store/user.ts
@@ -2,8 +2,11 @@
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
 // service
 import UserService from "services/user.service";
-// types
-import { IUserStore } from "./types";
+
+export interface IUserStore {
+  currentUser: any | null;
+  fetchCurrentUser: () => void;
+}
 
 class UserStore implements IUserStore {
   currentUser: any | null = null;
@@ -15,27 +18,56 @@ class UserStore implements IUserStore {
   constructor(_rootStore: any) {
     makeObservable(this, {
       // observable
-      currentUser: observable,
+      currentUser: observable.ref,
       // actions
+      setCurrentUser: action,
       // computed
     });
     this.rootStore = _rootStore;
     this.userService = new UserService();
   }
 
-  getUserAsync = async () => {
+  setCurrentUser = (user: any) => {
+    // TODO: destructure user object
+    this.currentUser = user;
+  };
+
+  /**
+   *
+   * @param callback
+   * @description A wrapper function to check user authentication; it redirects to the login page if not authenticated, otherwise, it executes a callback.
+   * @example this.requiredLogin(() => { // do something });
+   */
+
+  requiredLogin = (callback: () => void) => {
+    if (this.currentUser) {
+      callback();
+      return;
+    }
+
+    this.fetchCurrentUser()
+      .then(() => {
+        if (!this.currentUser) {
+          const currentPath = window.location.pathname;
+          window.location.href = `/?next_path=${currentPath}`;
+        } else callback();
+      })
+      .catch(() => {
+        const currentPath = window.location.pathname;
+        window.location.href = `/?next_path=${currentPath}`;
+      });
+  };
+
+  fetchCurrentUser = async () => {
     try {
-      const response = this.userService.currentUser();
+      const response = await this.userService.currentUser();
       if (response) {
         runInAction(() => {
           this.currentUser = response;
         });
       }
     } catch (error) {
-      console.error("error", error);
-      runInAction(() => {
-        // render error actions
-      });
+      console.error("Failed to fetch current user", error);
     }
   };
 }
diff --git a/apps/space/styles/editor.css b/apps/space/styles/editor.css
new file mode 100644
index 000000000..9da250dd1
--- /dev/null
+++ b/apps/space/styles/editor.css
@@ -0,0 +1,231 @@
+.ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: rgb(var(--color-text-400));
+  pointer-events: none;
+  height: 0;
+}
+
+.ProseMirror .is-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: rgb(var(--color-text-400));
+  pointer-events: none;
+  height: 0;
+}
+
+/* Custom image styles */
+
+.ProseMirror img {
+  transition: filter 0.1s ease-in-out;
+
+  &:hover {
+    cursor: pointer;
+    filter: brightness(90%);
+  }
+
+  &.ProseMirror-selectednode {
+    outline: 3px solid #5abbf7;
+    filter: brightness(90%);
+  }
+}
+
+.ProseMirror-gapcursor:after {
+  border-top: 1px solid rgb(var(--color-text-100)) !important;
+}
+
+/* Custom TODO list checkboxes – shoutout to this awesome tutorial: https://moderncss.dev/pure-css-custom-checkbox-style/ */
+
+ul[data-type="taskList"] li > label {
+  margin-right: 0.2rem;
+  user-select: none;
+}
+
+@media screen and (max-width: 768px) {
+  ul[data-type="taskList"] li > label {
+    margin-right: 0.5rem;
+  }
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: rgb(var(--color-background-100));
+  margin: 0;
+  cursor: pointer;
+  width: 1.2rem;
+  height: 1.2rem;
+  position: relative;
+  border: 2px solid rgb(var(--color-text-100));
+  margin-right: 0.3rem;
+  display: grid;
+  place-content: center;
+
+  &:hover {
+    background-color: rgb(var(--color-background-80));
+  }
+
+  &:active {
+    background-color: rgb(var(--color-background-90));
+  }
+
+  &::before {
+    content: "";
+    width: 0.65em;
+    height: 0.65em;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 1em 1em;
+    transform-origin: center;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  }
+
+  &:checked::before {
+    transform: scale(1);
+  }
+}
+
+ul[data-type="taskList"] li[data-checked="true"] > div > p {
+  color: rgb(var(--color-text-200));
+  text-decoration: line-through;
+  text-decoration-thickness: 2px;
+}
+
+/* Overwrite tippy-box original max-width */
+
+.tippy-box {
+  max-width: 400px !important;
+}
+
+.ProseMirror {
+  position: relative;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+  outline: none;
+  cursor: text;
+  line-height: 1.2;
+  font-family: inherit;
+  font-size: 14px;
+  color: inherit;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  appearance: textfield;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.fadeIn {
+  opacity: 1;
+  transition: opacity 0.3s ease-in;
+}
+
+.fadeOut {
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
+}
+
+.img-placeholder {
+  position: relative;
+  width: 35%;
+
+  &:before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    left: 45%;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 3px solid rgba(var(--color-text-200));
+    border-top-color: rgba(var(--color-text-800));
+    animation: spinning 0.6s linear infinite;
+  }
+}
+
+@keyframes spinning {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+#tiptap-container {
+  table {
+    border-collapse: collapse;
+    table-layout: fixed;
+    margin: 0;
+    border: 1px solid rgb(var(--color-border-200));
+    width: 100%;
+
+    td,
+    th {
+      min-width: 1em;
+      border: 1px solid rgb(var(--color-border-200));
+      padding: 10px 15px;
+      vertical-align: top;
+      box-sizing: border-box;
+      position: relative;
+      transition: background-color 0.3s ease;
+
+      > * {
+        margin-bottom: 0;
+      }
+    }
+
+    th {
+      font-weight: bold;
+      text-align: left;
+      background-color: rgb(var(--color-primary-100));
+    }
+
+    td:hover {
+      background-color: rgba(var(--color-primary-300), 0.1);
+    }
+
+    .selectedCell:after {
+      z-index: 2;
+      position: absolute;
+      content: "";
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background-color: rgba(var(--color-primary-300), 0.1);
+      pointer-events: none;
+    }
+
+    .column-resize-handle {
+      position: absolute;
+      right: -2px;
+      top: 0;
+      bottom: -2px;
+      width: 2px;
+      background-color: rgb(var(--color-primary-400));
+      pointer-events: none;
+    }
+  }
+}
+
+.tableWrapper {
+  overflow-x: auto;
+}
+
+.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+.ProseMirror table * p {
+  padding: 0px 1px;
+  margin: 6px 2px;
+}
+
+.ProseMirror table * .is-empty::before {
+  opacity: 0;
+}
diff --git a/apps/space/styles/globals.css b/apps/space/styles/globals.css
index e493f0abc..1782b9b81 100644
--- a/apps/space/styles/globals.css
+++ b/apps/space/styles/globals.css
@@ -4,3 +4,231 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  html {
+    font-family: "Inter", sans-serif;
+  }
+
+  :root {
+    color-scheme: light !important;
+
+    --color-primary-10: 236, 241, 255;
+    --color-primary-20: 217, 228, 255;
+    --color-primary-30: 197, 214, 255;
+    --color-primary-40: 178, 200, 255;
+    --color-primary-50: 159, 187, 255;
+    --color-primary-60: 140, 173, 255;
+    --color-primary-70: 121, 159, 255;
+    --color-primary-80: 101, 145, 255;
+    --color-primary-90: 82, 132, 255;
+    --color-primary-100: 63, 118, 255;
+    --color-primary-200: 57, 106, 230;
+    --color-primary-300: 50, 94, 204;
+    --color-primary-400: 44, 83, 179;
+    --color-primary-500: 38, 71, 153;
+    --color-primary-600: 32, 59, 128;
+    --color-primary-700: 25, 47, 102;
+    --color-primary-800: 19, 35, 76;
+    --color-primary-900: 13, 24, 51;
+
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
+
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 58, 58, 58; /* secondary text */
+    --color-text-300: 82, 82, 82; /* tertiary text */
+    --color-text-400: 163, 163, 163; /* placeholder text */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+
+    --color-shadow-2xs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
+      0px 1px 2px 0px rgba(23, 23, 23, 0.14);
+    --color-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 8px -1px rgba(16, 24, 40, 0.1);
+    --color-shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02),
+      0px 1px 12px 0px rgba(0, 0, 0, 0.12);
+    --color-shadow-rg: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
+      0px 1px 12px 0px rgba(16, 24, 40, 0.04);
+    --color-shadow-md: 0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 16px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-lg: 0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
+      0px 1px 24px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
+      0px 0px 52px 0px rgba(16, 24, 40, 0.16);
+    --color-shadow-2xl: 0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 32px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-3xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
+      0px 1px 48px 0px rgba(16, 24, 40, 0.12);
+
+    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
+    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
+    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
+    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
+    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
+    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
+
+    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
+
+    --color-sidebar-shadow-2xs: var(--color-shadow-2xs);
+    --color-sidebar-shadow-xs: var(--color-shadow-xs);
+    --color-sidebar-shadow-sm: var(--color-shadow-sm);
+    --color-sidebar-shadow-rg: var(--color-shadow-rg);
+    --color-sidebar-shadow-md: var(--color-shadow-md);
+    --color-sidebar-shadow-lg: var(--color-shadow-lg);
+    --color-sidebar-shadow-xl: var(--color-shadow-xl);
+    --color-sidebar-shadow-2xl: var(--color-shadow-2xl);
+    --color-sidebar-shadow-3xl: var(--color-shadow-3xl);
+  }
+
+  [data-theme="light"],
+  [data-theme="light-contrast"] {
+    color-scheme: light !important;
+
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
+  }
+
+  [data-theme="light"] {
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 58, 58, 58; /* secondary text */
+    --color-text-300: 82, 82, 82; /* tertiary text */
+    --color-text-400: 163, 163, 163; /* placeholder text */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+  }
+
+  [data-theme="light-contrast"] {
+    --color-text-100: 11, 11, 11; /* primary text */
+    --color-text-200: 38, 38, 38; /* secondary text */
+    --color-text-300: 58, 58, 58; /* tertiary text */
+    --color-text-400: 115, 115, 115; /* placeholder text */
+
+    --color-border-100: 34, 34, 34; /* subtle border= 1 */
+    --color-border-200: 38, 38, 38; /* subtle border- 2 */
+    --color-border-300: 46, 46, 46; /* strong border- 1 */
+    --color-border-400: 58, 58, 58; /* strong border- 2 */
+  }
+
+  [data-theme="dark"],
+  [data-theme="dark-contrast"] {
+    color-scheme: dark !important;
+
+    --color-background-100: 7, 7, 7; /* primary bg */
+    --color-background-90: 11, 11, 11; /* secondary bg */
+    --color-background-80: 23, 23, 23; /* tertiary bg */
+
+    --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
+    --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
+    --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
+    --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
+  }
+
+  [data-theme="dark"] {
+    --color-text-100: 229, 229, 229; /* primary text */
+    --color-text-200: 163, 163, 163; /* secondary text */
+    --color-text-300: 115, 115, 115; /* tertiary text */
+    --color-text-400: 82, 82, 82; /* placeholder text */
+
+    --color-border-100: 34, 34, 34; /* subtle border= 1 */
+    --color-border-200: 38, 38, 38; /* subtle border- 2 */
+    --color-border-300: 46, 46, 46; /* strong border- 1 */
+    --color-border-400: 58, 58, 58; /* strong border- 2 */
+  }
+
+  [data-theme="dark-contrast"] {
+    --color-text-100: 250, 250, 250; /* primary text */
+    --color-text-200: 241, 241, 241; /* secondary text */
+    --color-text-300: 212, 212, 212; /* tertiary text */
+    --color-text-400: 115, 115, 115; /* placeholder text */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+  }
+
+  [data-theme="light"],
+  [data-theme="dark"],
+  [data-theme="light-contrast"],
+  [data-theme="dark-contrast"] {
+    --color-primary-10: 236, 241, 255;
+    --color-primary-20: 217, 228, 255;
+    --color-primary-30: 197, 214, 255;
+    --color-primary-40: 178, 200, 255;
+    --color-primary-50: 159, 187, 255;
+    --color-primary-60: 140, 173, 255;
+    --color-primary-70: 121, 159, 255;
+    --color-primary-80: 101, 145, 255;
+    --color-primary-90: 82, 132, 255;
+    --color-primary-100: 63, 118, 255;
+    --color-primary-200: 57, 106, 230;
+    --color-primary-300: 50, 94, 204;
+    --color-primary-400: 44, 83, 179;
+    --color-primary-500: 38, 71, 153;
+    --color-primary-600: 32, 59, 128;
+    --color-primary-700: 25, 47, 102;
+    --color-primary-800: 19, 35, 76;
+    --color-primary-900: 13, 24, 51;
+
+    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
+    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
+    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
+    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
+    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
+    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
+
+    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
+  }
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: rgba(var(--color-background-100));
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: rgba(var(--color-background-80));
+}
+
+.hide-vertical-scrollbar::-webkit-scrollbar {
+  width: 0 !important;
+}
+
+.hide-horizontal-scrollbar::-webkit-scrollbar {
+  height: 0 !important;
+}
+
+.hide-both-scrollbars::-webkit-scrollbar {
+  height: 0 !important;
+  width: 0 !important;
+}
diff --git a/apps/space/tailwind.config.js b/apps/space/tailwind.config.js
index 55aaa9a31..0347ad9f9 100644
--- a/apps/space/tailwind.config.js
+++ b/apps/space/tailwind.config.js
@@ -1,5 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 
+const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
+
 module.exports = {
   content: [
     "./app/**/*.{js,ts,jsx,tsx}",
@@ -10,8 +12,192 @@ module.exports = {
   ],
   theme: {
     extend: {
-      colors: {},
+      boxShadow: {
+        "custom-shadow-2xs": "var(--color-shadow-2xs)",
+        "custom-shadow-xs": "var(--color-shadow-xs)",
+        "custom-shadow-sm": "var(--color-shadow-sm)",
+        "custom-shadow-rg": "var(--color-shadow-rg)",
+        "custom-shadow-md": "var(--color-shadow-md)",
+        "custom-shadow-lg": "var(--color-shadow-lg)",
+        "custom-shadow-xl": "var(--color-shadow-xl)",
+        "custom-shadow-2xl": "var(--color-shadow-2xl)",
+        "custom-shadow-3xl": "var(--color-shadow-3xl)",
+        "custom-sidebar-shadow-2xs": "var(--color-sidebar-shadow-2xs)",
+        "custom-sidebar-shadow-xs": "var(--color-sidebar-shadow-xs)",
+        "custom-sidebar-shadow-sm": "var(--color-sidebar-shadow-sm)",
+        "custom-sidebar-shadow-rg": "var(--color-sidebar-shadow-rg)",
+        "custom-sidebar-shadow-md": "var(--color-sidebar-shadow-md)",
+        "custom-sidebar-shadow-lg": "var(--color-sidebar-shadow-lg)",
+        "custom-sidebar-shadow-xl": "var(--color-sidebar-shadow-xl)",
+        "custom-sidebar-shadow-2xl": "var(--color-sidebar-shadow-2xl)",
+        "custom-sidebar-shadow-3xl": "var(--color-sidebar-shadow-3xl)",
+      },
+      colors: {
+        custom: {
+          primary: {
+            0: "rgb(255, 255, 255)",
+            10: convertToRGB("--color-primary-10"),
+            20: convertToRGB("--color-primary-20"),
+            30: convertToRGB("--color-primary-30"),
+            40: convertToRGB("--color-primary-40"),
+            50: convertToRGB("--color-primary-50"),
+            60: convertToRGB("--color-primary-60"),
+            70: convertToRGB("--color-primary-70"),
+            80: convertToRGB("--color-primary-80"),
+            90: convertToRGB("--color-primary-90"),
+            100: convertToRGB("--color-primary-100"),
+            200: convertToRGB("--color-primary-200"),
+            300: convertToRGB("--color-primary-300"),
+            400: convertToRGB("--color-primary-400"),
+            500: convertToRGB("--color-primary-500"),
+            600: convertToRGB("--color-primary-600"),
+            700: convertToRGB("--color-primary-700"),
+            800: convertToRGB("--color-primary-800"),
+            900: convertToRGB("--color-primary-900"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-primary-100"),
+          },
+          background: {
+            0: "rgb(255, 255, 255)",
+            10: convertToRGB("--color-background-10"),
+            20: convertToRGB("--color-background-20"),
+            30: convertToRGB("--color-background-30"),
+            40: convertToRGB("--color-background-40"),
+            50: convertToRGB("--color-background-50"),
+            60: convertToRGB("--color-background-60"),
+            70: convertToRGB("--color-background-70"),
+            80: convertToRGB("--color-background-80"),
+            90: convertToRGB("--color-background-90"),
+            100: convertToRGB("--color-background-100"),
+            200: convertToRGB("--color-background-200"),
+            300: convertToRGB("--color-background-300"),
+            400: convertToRGB("--color-background-400"),
+            500: convertToRGB("--color-background-500"),
+            600: convertToRGB("--color-background-600"),
+            700: convertToRGB("--color-background-700"),
+            800: convertToRGB("--color-background-800"),
+            900: convertToRGB("--color-background-900"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-background-100"),
+          },
+          text: {
+            0: "rgb(255, 255, 255)",
+            10: convertToRGB("--color-text-10"),
+            20: convertToRGB("--color-text-20"),
+            30: convertToRGB("--color-text-30"),
+            40: convertToRGB("--color-text-40"),
+            50: convertToRGB("--color-text-50"),
+            60: convertToRGB("--color-text-60"),
+            70: convertToRGB("--color-text-70"),
+            80: convertToRGB("--color-text-80"),
+            90: convertToRGB("--color-text-90"),
+            100: convertToRGB("--color-text-100"),
+            200: convertToRGB("--color-text-200"),
+            300: convertToRGB("--color-text-300"),
+            400: convertToRGB("--color-text-400"),
+            500: convertToRGB("--color-text-500"),
+            600: convertToRGB("--color-text-600"),
+            700: convertToRGB("--color-text-700"),
+            800: convertToRGB("--color-text-800"),
+            900: convertToRGB("--color-text-900"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-text-100"),
+          },
+          border: {
+            0: "rgb(255, 255, 255)",
+            100: convertToRGB("--color-border-100"),
+            200: convertToRGB("--color-border-200"),
+            300: convertToRGB("--color-border-300"),
+            400: convertToRGB("--color-border-400"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-border-200"),
+          },
+          sidebar: {
+            background: {
+              0: "rgb(255, 255, 255)",
+              10: convertToRGB("--color-sidebar-background-10"),
+              20: convertToRGB("--color-sidebar-background-20"),
+              30: convertToRGB("--color-sidebar-background-30"),
+              40: convertToRGB("--color-sidebar-background-40"),
+              50: convertToRGB("--color-sidebar-background-50"),
+              60: convertToRGB("--color-sidebar-background-60"),
+              70: convertToRGB("--color-sidebar-background-70"),
+              80: convertToRGB("--color-sidebar-background-80"),
+              90: convertToRGB("--color-sidebar-background-90"),
+              100: convertToRGB("--color-sidebar-background-100"),
+              200: convertToRGB("--color-sidebar-background-200"),
+              300: convertToRGB("--color-sidebar-background-300"),
+              400: convertToRGB("--color-sidebar-background-400"),
+              500: convertToRGB("--color-sidebar-background-500"),
+              600: convertToRGB("--color-sidebar-background-600"),
+              700: convertToRGB("--color-sidebar-background-700"),
+              800: convertToRGB("--color-sidebar-background-800"),
+              900: convertToRGB("--color-sidebar-background-900"),
+              1000: "rgb(0, 0, 0)",
+              DEFAULT: convertToRGB("--color-sidebar-background-100"),
+            },
+            text: {
+              0: "rgb(255, 255, 255)",
+              10: convertToRGB("--color-sidebar-text-10"),
+              20: convertToRGB("--color-sidebar-text-20"),
+              30: convertToRGB("--color-sidebar-text-30"),
+              40: convertToRGB("--color-sidebar-text-40"),
+              50: convertToRGB("--color-sidebar-text-50"),
+              60: convertToRGB("--color-sidebar-text-60"),
+              70: convertToRGB("--color-sidebar-text-70"),
+              80: convertToRGB("--color-sidebar-text-80"),
+              90: convertToRGB("--color-sidebar-text-90"),
+              100: convertToRGB("--color-sidebar-text-100"),
+              200: convertToRGB("--color-sidebar-text-200"),
+              300: convertToRGB("--color-sidebar-text-300"),
+              400: convertToRGB("--color-sidebar-text-400"),
+              500: convertToRGB("--color-sidebar-text-500"),
+              600: convertToRGB("--color-sidebar-text-600"),
+              700: convertToRGB("--color-sidebar-text-700"),
+              800: convertToRGB("--color-sidebar-text-800"),
+              900: convertToRGB("--color-sidebar-text-900"),
+              1000: "rgb(0, 0, 0)",
+              DEFAULT: convertToRGB("--color-sidebar-text-100"),
+            },
+            border: {
+              0: "rgb(255, 255, 255)",
+              100: convertToRGB("--color-sidebar-border-100"),
+              200: convertToRGB("--color-sidebar-border-200"),
+              300: convertToRGB("--color-sidebar-border-300"),
+              400: convertToRGB("--color-sidebar-border-400"),
+              1000: "rgb(0, 0, 0)",
+              DEFAULT: convertToRGB("--color-sidebar-border-200"),
+            },
+          },
+          backdrop: "#131313",
+        },
+      },
+      typography: ({ theme }) => ({
+        brand: {
+          css: {
+            "--tw-prose-body": convertToRGB("--color-text-100"),
+            "--tw-prose-p": convertToRGB("--color-text-100"),
+            "--tw-prose-headings": convertToRGB("--color-text-100"),
+            "--tw-prose-lead": convertToRGB("--color-text-100"),
+            "--tw-prose-links": convertToRGB("--color-primary-100"),
+            "--tw-prose-bold": convertToRGB("--color-text-100"),
+            "--tw-prose-counters": convertToRGB("--color-text-100"),
+            "--tw-prose-bullets": convertToRGB("--color-text-100"),
+            "--tw-prose-hr": convertToRGB("--color-text-100"),
+            "--tw-prose-quotes": convertToRGB("--color-text-100"),
+            "--tw-prose-quote-borders": convertToRGB("--color-border"),
+            "--tw-prose-code": convertToRGB("--color-text-100"),
+            "--tw-prose-pre-code": convertToRGB("--color-text-100"),
+            "--tw-prose-pre-bg": convertToRGB("--color-background-100"),
+            "--tw-prose-th-borders": convertToRGB("--color-border"),
+            "--tw-prose-td-borders": convertToRGB("--color-border"),
+          },
+        },
+      }),
+    },
+    fontFamily: {
+      custom: ["Inter", "sans-serif"],
     },
   },
-  plugins: [],
+  plugins: [require("@tailwindcss/typography")],
 };
diff --git a/apps/space/types/issue.ts b/apps/space/types/issue.ts
new file mode 100644
index 000000000..323df995c
--- /dev/null
+++ b/apps/space/types/issue.ts
@@ -0,0 +1,161 @@
+export type TIssueBoardKeys = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt";
+
+export interface IIssueBoardViews {
+  key: TIssueBoardKeys;
+  title: string;
+  icon: string;
+  className: string;
+}
+
+export type TIssuePriorityKey = "urgent" | "high" | "medium" | "low" | "none";
+export type TIssuePriorityTitle = "Urgent" | "High" | "Medium" | "Low" | "None";
+export interface IIssuePriorityFilters {
+  key: TIssuePriorityKey;
+  title: TIssuePriorityTitle;
+  className: string;
+  icon: string;
+}
+
+export type TIssueGroupKey = "backlog" | "unstarted" | "started" | "completed" | "cancelled";
+export type TIssueGroupTitle = "Backlog" | "Unstarted" | "Started" | "Completed" | "Cancelled";
+
+export interface IIssueGroup {
+  key: TIssueGroupKey;
+  title: TIssueGroupTitle;
+  color: string;
+  className: string;
+  icon: React.FC;
+}
+
+export interface IIssue {
+  id: string;
+  comments: Comment[];
+  description_html: string;
+  label_details: any;
+  name: string;
+  priority: TIssuePriorityKey | null;
+  project: string;
+  project_detail: any;
+  reactions: IIssueReaction[];
+  sequence_id: number;
+  start_date: any;
+  state: string;
+  state_detail: any;
+  target_date: any;
+  votes: {
+    issue: string;
+    vote: -1 | 1;
+    workspace: string;
+    project: string;
+    actor: string;
+    actor_detail: ActorDetail;
+  }[];
+}
+
+export interface IIssueState {
+  id: string;
+  name: string;
+  group: TIssueGroupKey;
+  color: string;
+}
+
+export interface IIssueLabel {
+  id: string;
+  name: string;
+  color: string;
+}
+
+export interface Comment {
+  id: string;
+  actor_detail: ActorDetail;
+  issue_detail: IssueDetail;
+  project_detail: ProjectDetail;
+  workspace_detail: WorkspaceDetail;
+  comment_reactions: any[];
+  is_member: boolean;
+  created_at: Date;
+  updated_at: Date;
+  comment_stripped: string;
+  comment_html: string;
+  attachments: any[];
+  access: string;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  workspace: string;
+  issue: string;
+  actor: string;
+}
+
+export interface IIssueReaction {
+  actor_detail: ActorDetail;
+  id: string;
+  issue: string;
+  reaction: string;
+}
+
+export interface ActorDetail {
+  avatar: string;
+  display_name: string;
+  first_name: string;
+  id: string;
+  is_bot: boolean;
+  last_name: string;
+}
+
+export interface IssueDetail {
+  id: string;
+  name: string;
+  description: Description;
+  description_html: string;
+  priority: string;
+  start_date: null;
+  target_date: null;
+  sequence_id: number;
+  sort_order: number;
+}
+
+export interface Description {
+  type: string;
+  content: DescriptionContent[];
+}
+
+export interface DescriptionContent {
+  type: string;
+  attrs?: Attrs;
+  content: ContentContent[];
+}
+
+export interface Attrs {
+  level: number;
+}
+
+export interface ContentContent {
+  text: string;
+  type: string;
+}
+
+export interface ProjectDetail {
+  id: string;
+  identifier: string;
+  name: string;
+  cover_image: string;
+  icon_prop: null;
+  emoji: string;
+  description: string;
+}
+
+export interface WorkspaceDetail {
+  name: string;
+  slug: string;
+  id: string;
+}
+
+export interface IssueDetailType {
+  [issueId: string]: {
+    issue: IIssue;
+    comments: Comment[];
+    reactions: any[];
+    votes: any[];
+  };
+}
diff --git a/apps/space/store/types/project.ts b/apps/space/types/project.ts
similarity index 64%
rename from apps/space/store/types/project.ts
rename to apps/space/types/project.ts
index 41f4c2f44..e0e1bba9e 100644
--- a/apps/space/store/types/project.ts
+++ b/apps/space/types/project.ts
@@ -27,14 +27,3 @@ export interface IProjectSettings {
     spreadsheet: boolean;
   };
 }
-
-export interface IProjectStore {
-  loader: boolean;
-  error: any | null;
-
-  workspace: IWorkspace | null;
-  project: IProject | null;
-  workspaceProjectSettings: IProjectSettings | null;
-
-  getProjectSettingsAsync: (workspace_slug: string, project_slug: string) => Promise<void>;
-}
diff --git a/apps/space/store/types/theme.ts b/apps/space/types/theme.ts
similarity index 100%
rename from apps/space/store/types/theme.ts
rename to apps/space/types/theme.ts
diff --git a/apps/space/types/user.ts b/apps/space/types/user.ts
new file mode 100644
index 000000000..45b3f3b6e
--- /dev/null
+++ b/apps/space/types/user.ts
@@ -0,0 +1,3 @@
+export interface IUser {
+  first_name: string;
+}
diff --git a/yarn.lock b/yarn.lock
index 3eafeb5b9..a48c94e92 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -37,37 +37,37 @@
     "@babel/highlight" "^7.10.4"
 
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.22.10", "@babel/code-frame@^7.22.5":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.10.tgz#1c20e612b768fefa75f6e90d6ecb86329247f0a3"
-  integrity sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==
+  version "7.22.13"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e"
+  integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==
   dependencies:
-    "@babel/highlight" "^7.22.10"
+    "@babel/highlight" "^7.22.13"
     chalk "^2.4.2"
 
-"@babel/compat-data@^7.22.5", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9":
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9":
   version "7.22.9"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.9.tgz#71cdb00a1ce3a329ce4cbec3a44f9fef35669730"
   integrity sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==
 
 "@babel/core@^7.11.1":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.22.10.tgz#aad442c7bcd1582252cb4576747ace35bc122f35"
-  integrity sha512-fTmqbbUBAwCcre6zPzNngvsI0aNrPZe77AeqvDxWM9Nm+04RrJ3CAmGHA9f7lJQY6ZMhRztNemy4uslDxTX4Qw==
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.22.11.tgz#8033acaa2aa24c3f814edaaa057f3ce0ba559c24"
+  integrity sha512-lh7RJrtPdhibbxndr6/xx0w8+CVlY5FJZiaSz908Fpy+G0xkBFTvwLcKJFF4PJxVfGhVWNebikpWGnOoC71juQ==
   dependencies:
     "@ampproject/remapping" "^2.2.0"
     "@babel/code-frame" "^7.22.10"
     "@babel/generator" "^7.22.10"
     "@babel/helper-compilation-targets" "^7.22.10"
     "@babel/helper-module-transforms" "^7.22.9"
-    "@babel/helpers" "^7.22.10"
-    "@babel/parser" "^7.22.10"
+    "@babel/helpers" "^7.22.11"
+    "@babel/parser" "^7.22.11"
     "@babel/template" "^7.22.5"
-    "@babel/traverse" "^7.22.10"
-    "@babel/types" "^7.22.10"
+    "@babel/traverse" "^7.22.11"
+    "@babel/types" "^7.22.11"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
-    json5 "^2.2.2"
+    json5 "^2.2.3"
     semver "^6.3.1"
 
 "@babel/generator@^7.22.10":
@@ -105,10 +105,10 @@
     lru-cache "^5.1.1"
     semver "^6.3.1"
 
-"@babel/helper-create-class-features-plugin@^7.22.5":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.10.tgz#dd2612d59eac45588021ac3d6fa976d08f4e95a3"
-  integrity sha512-5IBb77txKYQPpOEdUdIhBx8VrZyDCQ+H82H0+5dX1TmuscP5vJKEE3cKurjtIw/vFwzbVH48VweE78kVDBrqjA==
+"@babel/helper-create-class-features-plugin@^7.22.11", "@babel/helper-create-class-features-plugin@^7.22.5":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.11.tgz#4078686740459eeb4af3494a273ac09148dfb213"
+  integrity sha512-y1grdYL4WzmUDBRGK0pDbIoFd7UZKoDurDzWEoNMYoj1EL+foGRQNyPWDcC+YyegN5y1DUsFFmzjGijB3nSVAQ==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
     "@babel/helper-environment-visitor" "^7.22.5"
@@ -260,28 +260,28 @@
     "@babel/template" "^7.22.5"
     "@babel/types" "^7.22.10"
 
-"@babel/helpers@^7.22.10":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.22.10.tgz#ae6005c539dfbcb5cd71fb51bfc8a52ba63bc37a"
-  integrity sha512-a41J4NW8HyZa1I1vAndrraTlPZ/eZoga2ZgS7fEr0tZJGVU4xqdE80CEm0CcNjha5EZ8fTBYLKHF0kqDUuAwQw==
+"@babel/helpers@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.22.11.tgz#b02f5d5f2d7abc21ab59eeed80de410ba70b056a"
+  integrity sha512-vyOXC8PBWaGc5h7GMsNx68OH33cypkEDJCHvYVVgVbbxJDROYVtexSk0gK5iCF1xNjRIN2s8ai7hwkWDq5szWg==
   dependencies:
     "@babel/template" "^7.22.5"
-    "@babel/traverse" "^7.22.10"
-    "@babel/types" "^7.22.10"
+    "@babel/traverse" "^7.22.11"
+    "@babel/types" "^7.22.11"
 
-"@babel/highlight@^7.10.4", "@babel/highlight@^7.22.10":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.10.tgz#02a3f6d8c1cb4521b2fd0ab0da8f4739936137d7"
-  integrity sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==
+"@babel/highlight@^7.10.4", "@babel/highlight@^7.22.13":
+  version "7.22.13"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.13.tgz#9cda839e5d3be9ca9e8c26b6dd69e7548f0cbf16"
+  integrity sha512-C/BaXcnnvBCmHTpz/VGZ8jgtE2aYlW4hxDhseJAWZb7gqGM/qtCK6iZUb0TyKFf7BOUsBH7Q7fkRsDRhg1XklQ==
   dependencies:
     "@babel/helper-validator-identifier" "^7.22.5"
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.22.10", "@babel/parser@^7.22.5":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.10.tgz#e37634f9a12a1716136c44624ef54283cabd3f55"
-  integrity sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==
+"@babel/parser@^7.22.11", "@babel/parser@^7.22.5":
+  version "7.22.14"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.14.tgz#c7de58e8de106e88efca42ce17f0033209dfd245"
+  integrity sha512-1KucTHgOvaw/LzCVrEOAyXkr9rQlp0A1HiHRYnSUE9dmb8PvPW7o5sscg+5169r54n3vGlbx6GevTE/Iw/P3AQ==
 
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.22.5":
   version "7.22.5"
@@ -438,10 +438,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-async-generator-functions@^7.22.10":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.10.tgz#45946cd17f915b10e65c29b8ed18a0a50fc648c8"
-  integrity sha512-eueE8lvKVzq5wIObKK/7dvoeKJ+xc6TvRn6aysIjS6pSCeLy7S/eVi7pEQknZqyqvzaNKdDtem8nUNTBgDVR2g==
+"@babel/plugin-transform-async-generator-functions@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.11.tgz#dbe3b1ff5a52e2e5edc4b19a60d325a675ed2649"
+  integrity sha512-0pAlmeRJn6wU84zzZsEOx1JV1Jf8fqO9ok7wofIJwUnplYo247dcd24P+cMJht7ts9xkzdtB0EPHmOb7F+KzXw==
   dependencies:
     "@babel/helper-environment-visitor" "^7.22.5"
     "@babel/helper-plugin-utils" "^7.22.5"
@@ -479,12 +479,12 @@
     "@babel/helper-create-class-features-plugin" "^7.22.5"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-class-static-block@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.5.tgz#3e40c46f048403472d6f4183116d5e46b1bff5ba"
-  integrity sha512-SPToJ5eYZLxlnp1UzdARpOGeC2GbHvr9d/UV0EukuVx8atktg194oe+C5BqQ8jRTkgLRVOPYeXRSBg1IlMoVRA==
+"@babel/plugin-transform-class-static-block@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.11.tgz#dc8cc6e498f55692ac6b4b89e56d87cec766c974"
+  integrity sha512-GMM8gGmqI7guS/llMFk1bJDkKfn3v3C4KHK9Yg1ey5qcHcOlKb0QvcMrgzvxo+T03/4szNh5lghY+fEC98Kq9g==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.22.5"
+    "@babel/helper-create-class-features-plugin" "^7.22.11"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
@@ -533,10 +533,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-dynamic-import@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.5.tgz#d6908a8916a810468c4edff73b5b75bda6ad393e"
-  integrity sha512-0MC3ppTB1AMxd8fXjSrbPa7LT9hrImt+/fcj+Pg5YMD7UQyWp/02+JWpdnCymmsXwIx5Z+sYn1bwCn4ZJNvhqQ==
+"@babel/plugin-transform-dynamic-import@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.11.tgz#2c7722d2a5c01839eaf31518c6ff96d408e447aa"
+  integrity sha512-g/21plo58sfteWjaO0ZNVb+uEOkJNjAaHhbejrnBmu011l/eNDScmkbjCC3l4FKb10ViaGU4aOkFznSu2zRHgA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
@@ -549,10 +549,10 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.22.5"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-export-namespace-from@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.5.tgz#57c41cb1d0613d22f548fddd8b288eedb9973a5b"
-  integrity sha512-X4hhm7FRnPgd4nDA4b/5V280xCx6oL7Oob5+9qVS5C13Zq4bh1qq7LU0GgRU6b5dBWBvhGaXYVB4AcN6+ol6vg==
+"@babel/plugin-transform-export-namespace-from@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.11.tgz#b3c84c8f19880b6c7440108f8929caf6056db26c"
+  integrity sha512-xa7aad7q7OiT8oNZ1mU7NrISjlSkVdMbNxn9IuLZyL9AJEhs1Apba3I+u5riX1dIkdptP5EKDG5XDPByWxtehw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
@@ -573,10 +573,10 @@
     "@babel/helper-function-name" "^7.22.5"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-json-strings@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.5.tgz#14b64352fdf7e1f737eed68de1a1468bd2a77ec0"
-  integrity sha512-DuCRB7fu8MyTLbEQd1ew3R85nx/88yMoqo2uPSjevMj3yoN7CDM8jkgrY0wmVxfJZyJ/B9fE1iq7EQppWQmR5A==
+"@babel/plugin-transform-json-strings@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.11.tgz#689a34e1eed1928a40954e37f74509f48af67835"
+  integrity sha512-CxT5tCqpA9/jXFlme9xIBCc5RPtdDq3JpkkhgHQqtDdiTnTI0jtZ0QzXhr5DILeYifDPp2wvY2ad+7+hLMW5Pw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
@@ -588,10 +588,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-logical-assignment-operators@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.5.tgz#66ae5f068fd5a9a5dc570df16f56c2a8462a9d6c"
-  integrity sha512-MQQOUW1KL8X0cDWfbwYP+TbVbZm16QmQXJQ+vndPtH/BoO0lOKpVoEDMI7+PskYxH+IiE0tS8xZye0qr1lGzSA==
+"@babel/plugin-transform-logical-assignment-operators@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.11.tgz#24c522a61688bde045b7d9bc3c2597a4d948fc9c"
+  integrity sha512-qQwRTP4+6xFCDV5k7gZBF3C31K34ut0tbEcTKxlX/0KXxm9GLcO14p570aWxFvVzx6QAfPgq7gaeIHXJC8LswQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
@@ -611,22 +611,22 @@
     "@babel/helper-module-transforms" "^7.22.5"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-modules-commonjs@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.5.tgz#7d9875908d19b8c0536085af7b053fd5bd651bfa"
-  integrity sha512-B4pzOXj+ONRmuaQTg05b3y/4DuFz3WcCNAXPLb2Q0GT0TrGKGxNKV4jwsXts+StaM0LQczZbOpj8o1DLPDJIiA==
+"@babel/plugin-transform-modules-commonjs@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.11.tgz#d7991d3abad199c03b68ee66a64f216c47ffdfae"
+  integrity sha512-o2+bg7GDS60cJMgz9jWqRUsWkMzLCxp+jFDeDUT5sjRlAxcJWZ2ylNdI7QQ2+CH5hWu7OnN+Cv3htt7AkSf96g==
   dependencies:
-    "@babel/helper-module-transforms" "^7.22.5"
+    "@babel/helper-module-transforms" "^7.22.9"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-simple-access" "^7.22.5"
 
-"@babel/plugin-transform-modules-systemjs@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.5.tgz#18c31410b5e579a0092638f95c896c2a98a5d496"
-  integrity sha512-emtEpoaTMsOs6Tzz+nbmcePl6AKVtS1yC4YNAeMun9U8YCsgadPNxnOPQ8GhHFB2qdx+LZu9LgoC0Lthuu05DQ==
+"@babel/plugin-transform-modules-systemjs@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.11.tgz#3386be5875d316493b517207e8f1931d93154bb1"
+  integrity sha512-rIqHmHoMEOhI3VkVf5jQ15l539KrwhzqcBO6wdCNWPWc/JWt9ILNYNUssbRpeq0qWns8svuw8LnMNCvWBIJ8wA==
   dependencies:
     "@babel/helper-hoist-variables" "^7.22.5"
-    "@babel/helper-module-transforms" "^7.22.5"
+    "@babel/helper-module-transforms" "^7.22.9"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-validator-identifier" "^7.22.5"
 
@@ -653,29 +653,29 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-nullish-coalescing-operator@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.5.tgz#f8872c65776e0b552e0849d7596cddd416c3e381"
-  integrity sha512-6CF8g6z1dNYZ/VXok5uYkkBBICHZPiGEl7oDnAx2Mt1hlHVHOSIKWJaXHjQJA5VB43KZnXZDIexMchY4y2PGdA==
+"@babel/plugin-transform-nullish-coalescing-operator@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.11.tgz#debef6c8ba795f5ac67cd861a81b744c5d38d9fc"
+  integrity sha512-YZWOw4HxXrotb5xsjMJUDlLgcDXSfO9eCmdl1bgW4+/lAGdkjaEvOnQ4p5WKKdUgSzO39dgPl0pTnfxm0OAXcg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
-"@babel/plugin-transform-numeric-separator@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.5.tgz#57226a2ed9e512b9b446517ab6fa2d17abb83f58"
-  integrity sha512-NbslED1/6M+sXiwwtcAB/nieypGw02Ejf4KtDeMkCEpP6gWFMX1wI9WKYua+4oBneCCEmulOkRpwywypVZzs/g==
+"@babel/plugin-transform-numeric-separator@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.11.tgz#498d77dc45a6c6db74bb829c02a01c1d719cbfbd"
+  integrity sha512-3dzU4QGPsILdJbASKhF/V2TVP+gJya1PsueQCxIPCEcerqF21oEcrob4mzjsp2Py/1nLfF5m+xYNMDpmA8vffg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-transform-object-rest-spread@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.5.tgz#9686dc3447df4753b0b2a2fae7e8bc33cdc1f2e1"
-  integrity sha512-Kk3lyDmEslH9DnvCDA1s1kkd3YWQITiBOHngOtDL9Pt6BZjzqb6hiOlb8VfjiiQJ2unmegBqZu0rx5RxJb5vmQ==
+"@babel/plugin-transform-object-rest-spread@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.11.tgz#dbbb06ce783cd994a8f430d8cefa553e9b42ca62"
+  integrity sha512-nX8cPFa6+UmbepISvlf5jhQyaC7ASs/7UxHmMkuJ/k5xSHvDPPaibMo+v3TXwU/Pjqhep/nFNpd3zn4YR59pnw==
   dependencies:
-    "@babel/compat-data" "^7.22.5"
-    "@babel/helper-compilation-targets" "^7.22.5"
+    "@babel/compat-data" "^7.22.9"
+    "@babel/helper-compilation-targets" "^7.22.10"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
     "@babel/plugin-transform-parameters" "^7.22.5"
@@ -688,18 +688,18 @@
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-replace-supers" "^7.22.5"
 
-"@babel/plugin-transform-optional-catch-binding@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.5.tgz#842080be3076703be0eaf32ead6ac8174edee333"
-  integrity sha512-pH8orJahy+hzZje5b8e2QIlBWQvGpelS76C63Z+jhZKsmzfNaPQ+LaW6dcJ9bxTpo1mtXbgHwy765Ro3jftmUg==
+"@babel/plugin-transform-optional-catch-binding@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.11.tgz#461cc4f578a127bb055527b3e77404cad38c08e0"
+  integrity sha512-rli0WxesXUeCJnMYhzAglEjLWVDF6ahb45HuprcmQuLidBJFWjNnOzssk2kuc6e33FlLaiZhG/kUIzUMWdBKaQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
-"@babel/plugin-transform-optional-chaining@^7.22.10", "@babel/plugin-transform-optional-chaining@^7.22.5":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.10.tgz#076d28a7e074392e840d4ae587d83445bac0372a"
-  integrity sha512-MMkQqZAZ+MGj+jGTG3OTuhKeBpNcO+0oCEbrGNEaOmiEn+1MzRyQlYsruGiU8RTK3zV6XwrVJTmwiDOyYK6J9g==
+"@babel/plugin-transform-optional-chaining@^7.22.12", "@babel/plugin-transform-optional-chaining@^7.22.5":
+  version "7.22.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.12.tgz#d7ebf6a88cd2f4d307b0e000ab630acd8124b333"
+  integrity sha512-7XXCVqZtyFWqjDsYDY4T45w4mlx1rf7aOgkc/Ww76xkgBiOlmjPkx36PBLHa1k1rwWvVgYMPsbuVnIamx2ZQJw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
@@ -720,13 +720,13 @@
     "@babel/helper-create-class-features-plugin" "^7.22.5"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-private-property-in-object@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.5.tgz#07a77f28cbb251546a43d175a1dda4cf3ef83e32"
-  integrity sha512-/9xnaTTJcVoBtSSmrVyhtSvO3kbqS2ODoh2juEU72c3aYonNF0OMGiaz2gjukyKM2wBBYJP38S4JiE0Wfb5VMQ==
+"@babel/plugin-transform-private-property-in-object@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.11.tgz#ad45c4fc440e9cb84c718ed0906d96cf40f9a4e1"
+  integrity sha512-sSCbqZDBKHetvjSwpyWzhuHkmW5RummxJBVbYLkGkaiTOWGxml7SXt0iWa03bzxFIx7wOj3g/ILRd0RcJKBeSQ==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-create-class-features-plugin" "^7.22.5"
+    "@babel/helper-create-class-features-plugin" "^7.22.11"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
@@ -820,9 +820,9 @@
     "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/preset-env@^7.11.0":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.22.10.tgz#3263b9fe2c8823d191d28e61eac60a79f9ce8a0f"
-  integrity sha512-riHpLb1drNkpLlocmSyEg4oYJIQFeXAK/d7rI6mbD0XsvoTOOweXDmQPG/ErxsEhWk3rl3Q/3F6RFQlVFS8m0A==
+  version "7.22.14"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.22.14.tgz#1cbb468d899f64fa71c53446f13b7ff8c0005cc1"
+  integrity sha512-daodMIoVo+ol/g+//c/AH+szBkFj4STQUikvBijRGL72Ph+w+AMTSh55DUETe8KJlPlDT1k/mp7NBfOuiWmoig==
   dependencies:
     "@babel/compat-data" "^7.22.9"
     "@babel/helper-compilation-targets" "^7.22.10"
@@ -850,41 +850,41 @@
     "@babel/plugin-syntax-top-level-await" "^7.14.5"
     "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
     "@babel/plugin-transform-arrow-functions" "^7.22.5"
-    "@babel/plugin-transform-async-generator-functions" "^7.22.10"
+    "@babel/plugin-transform-async-generator-functions" "^7.22.11"
     "@babel/plugin-transform-async-to-generator" "^7.22.5"
     "@babel/plugin-transform-block-scoped-functions" "^7.22.5"
     "@babel/plugin-transform-block-scoping" "^7.22.10"
     "@babel/plugin-transform-class-properties" "^7.22.5"
-    "@babel/plugin-transform-class-static-block" "^7.22.5"
+    "@babel/plugin-transform-class-static-block" "^7.22.11"
     "@babel/plugin-transform-classes" "^7.22.6"
     "@babel/plugin-transform-computed-properties" "^7.22.5"
     "@babel/plugin-transform-destructuring" "^7.22.10"
     "@babel/plugin-transform-dotall-regex" "^7.22.5"
     "@babel/plugin-transform-duplicate-keys" "^7.22.5"
-    "@babel/plugin-transform-dynamic-import" "^7.22.5"
+    "@babel/plugin-transform-dynamic-import" "^7.22.11"
     "@babel/plugin-transform-exponentiation-operator" "^7.22.5"
-    "@babel/plugin-transform-export-namespace-from" "^7.22.5"
+    "@babel/plugin-transform-export-namespace-from" "^7.22.11"
     "@babel/plugin-transform-for-of" "^7.22.5"
     "@babel/plugin-transform-function-name" "^7.22.5"
-    "@babel/plugin-transform-json-strings" "^7.22.5"
+    "@babel/plugin-transform-json-strings" "^7.22.11"
     "@babel/plugin-transform-literals" "^7.22.5"
-    "@babel/plugin-transform-logical-assignment-operators" "^7.22.5"
+    "@babel/plugin-transform-logical-assignment-operators" "^7.22.11"
     "@babel/plugin-transform-member-expression-literals" "^7.22.5"
     "@babel/plugin-transform-modules-amd" "^7.22.5"
-    "@babel/plugin-transform-modules-commonjs" "^7.22.5"
-    "@babel/plugin-transform-modules-systemjs" "^7.22.5"
+    "@babel/plugin-transform-modules-commonjs" "^7.22.11"
+    "@babel/plugin-transform-modules-systemjs" "^7.22.11"
     "@babel/plugin-transform-modules-umd" "^7.22.5"
     "@babel/plugin-transform-named-capturing-groups-regex" "^7.22.5"
     "@babel/plugin-transform-new-target" "^7.22.5"
-    "@babel/plugin-transform-nullish-coalescing-operator" "^7.22.5"
-    "@babel/plugin-transform-numeric-separator" "^7.22.5"
-    "@babel/plugin-transform-object-rest-spread" "^7.22.5"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.22.11"
+    "@babel/plugin-transform-numeric-separator" "^7.22.11"
+    "@babel/plugin-transform-object-rest-spread" "^7.22.11"
     "@babel/plugin-transform-object-super" "^7.22.5"
-    "@babel/plugin-transform-optional-catch-binding" "^7.22.5"
-    "@babel/plugin-transform-optional-chaining" "^7.22.10"
+    "@babel/plugin-transform-optional-catch-binding" "^7.22.11"
+    "@babel/plugin-transform-optional-chaining" "^7.22.12"
     "@babel/plugin-transform-parameters" "^7.22.5"
     "@babel/plugin-transform-private-methods" "^7.22.5"
-    "@babel/plugin-transform-private-property-in-object" "^7.22.5"
+    "@babel/plugin-transform-private-property-in-object" "^7.22.11"
     "@babel/plugin-transform-property-literals" "^7.22.5"
     "@babel/plugin-transform-regenerator" "^7.22.10"
     "@babel/plugin-transform-reserved-words" "^7.22.5"
@@ -898,7 +898,7 @@
     "@babel/plugin-transform-unicode-regex" "^7.22.5"
     "@babel/plugin-transform-unicode-sets-regex" "^7.22.5"
     "@babel/preset-modules" "0.1.6-no-external-plugins"
-    "@babel/types" "^7.22.10"
+    "@babel/types" "^7.22.11"
     babel-plugin-polyfill-corejs2 "^0.4.5"
     babel-plugin-polyfill-corejs3 "^0.8.3"
     babel-plugin-polyfill-regenerator "^0.5.2"
@@ -919,10 +919,10 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.10.tgz#ae3e9631fd947cb7e3610d3e9d8fef5f76696682"
-  integrity sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.10", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.11.tgz#7a9ba3bbe406ad6f9e8dd4da2ece453eb23a77a4"
+  integrity sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA==
   dependencies:
     regenerator-runtime "^0.14.0"
 
@@ -935,10 +935,10 @@
     "@babel/parser" "^7.22.5"
     "@babel/types" "^7.22.5"
 
-"@babel/traverse@^7.22.10":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.10.tgz#20252acb240e746d27c2e82b4484f199cf8141aa"
-  integrity sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==
+"@babel/traverse@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.11.tgz#71ebb3af7a05ff97280b83f05f8865ac94b2027c"
+  integrity sha512-mzAenteTfomcB7mfPtyi+4oe5BZ6MXxWcn4CX+h4IRJ+OOGXBrWU6jDQavkQI9Vuc5P+donFabBfFCcmWka9lQ==
   dependencies:
     "@babel/code-frame" "^7.22.10"
     "@babel/generator" "^7.22.10"
@@ -946,15 +946,15 @@
     "@babel/helper-function-name" "^7.22.5"
     "@babel/helper-hoist-variables" "^7.22.5"
     "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/parser" "^7.22.10"
-    "@babel/types" "^7.22.10"
+    "@babel/parser" "^7.22.11"
+    "@babel/types" "^7.22.11"
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.22.10", "@babel/types@^7.22.5", "@babel/types@^7.4.4":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.10.tgz#4a9e76446048f2c66982d1a989dd12b8a2d2dc03"
-  integrity sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==
+"@babel/types@^7.22.10", "@babel/types@^7.22.11", "@babel/types@^7.22.5", "@babel/types@^7.4.4":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.11.tgz#0e65a6a1d4d9cbaa892b2213f6159485fe632ea2"
+  integrity sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==
   dependencies:
     "@babel/helper-string-parser" "^7.22.5"
     "@babel/helper-validator-identifier" "^7.22.5"
@@ -1155,9 +1155,9 @@
     eslint-visitor-keys "^3.3.0"
 
 "@eslint-community/regexpp@^4.4.0", "@eslint-community/regexpp@^4.6.1":
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.6.2.tgz#1816b5f6948029c5eaacb0703b850ee0cb37d8f8"
-  integrity sha512-pPTNuaAG3QMH+buKyBIGJs3g/S5y0caxw0ygM3YyE6yJFySwiGGSzA+mM3KJ8QQvzeLh3blwgSonkFjgQdxzMw==
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.8.0.tgz#11195513186f68d42fbf449f9a7136b2c0c92005"
+  integrity sha512-JylOEEzDiOryeUnFbQz+oViCXS0KsvR1mvHkoMiu5+UiBvy+RYX7tzlIIIEstF/gVa2tj9AQXk3dgnxv6KxhFg==
 
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
@@ -1204,15 +1204,42 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@^8.47.0":
-  version "8.47.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.47.0.tgz#5478fdf443ff8158f9de171c704ae45308696c7d"
-  integrity sha512-P6omY1zv5MItm93kLM8s2vr1HICJH8v0dvddDhysbIuZ+vcjOHg5Zbkf1mTkcmi2JA9oBG2anOkRnW8WJTS8Og==
+"@eslint/js@8.48.0":
+  version "8.48.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.48.0.tgz#642633964e217905436033a2bd08bf322849b7fb"
+  integrity sha512-ZSjtmelB7IJfWD2Fvb7+Z+ChTIKWq6kjda95fLcQKNS5aheVHn4IkfgRQE3sIIzTcSLwLcLZUD9UBt+V7+h+Pw==
+
+"@floating-ui/core@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.4.1.tgz#0d633f4b76052668afb932492ac452f7ebe97f17"
+  integrity sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==
+  dependencies:
+    "@floating-ui/utils" "^0.1.1"
+
+"@floating-ui/dom@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7"
+  integrity sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==
+  dependencies:
+    "@floating-ui/core" "^1.4.1"
+    "@floating-ui/utils" "^0.1.1"
+
+"@floating-ui/react-dom@^2.0.1":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.2.tgz#fab244d64db08e6bed7be4b5fcce65315ef44d20"
+  integrity sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==
+  dependencies:
+    "@floating-ui/dom" "^1.5.1"
+
+"@floating-ui/utils@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.1.tgz#1a5b1959a528e374e8037c4396c3e825d6cf4a83"
+  integrity sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==
 
 "@headlessui/react@^1.7.13", "@headlessui/react@^1.7.3":
-  version "1.7.16"
-  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.16.tgz#9c458c9c4dbb708258c9e8da3fe5363f915f7b11"
-  integrity sha512-2MphIAZdSUacZBT6EXk8AJkj+EuvaaJbtCyHTJrPsz8inhzCl7qeNPI1uk1AUvCgWylVtdN8cVVmnhUDPxPy3g==
+  version "1.7.17"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.17.tgz#a0ec23af21b527c030967245fd99776aa7352bc6"
+  integrity sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==
   dependencies:
     client-only "^0.0.1"
 
@@ -1222,9 +1249,9 @@
   integrity sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==
 
 "@humanwhocodes/config-array@^0.11.10", "@humanwhocodes/config-array@^0.11.8":
-  version "0.11.10"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2"
-  integrity sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==
+  version "0.11.11"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.11.tgz#88a04c570dbbc7dd943e4712429c3df09bc32844"
+  integrity sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==
   dependencies:
     "@humanwhocodes/object-schema" "^1.2.1"
     debug "^4.1.1"
@@ -1320,43 +1347,51 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
-"@mui/base@5.0.0-beta.10":
-  version "5.0.0-beta.10"
-  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.10.tgz#b9a2de21c7de45aa4275c7ecf5aa803ecc236ba6"
-  integrity sha512-moTAhGwFfQffj7hsu61FnqcGqVcd53A1CrOhnskM9TF0Uh2rnLDMCuar4JRUWWpaJofAfQEbQBBFPadFQLI4PA==
+"@mui/base@5.0.0-beta.13":
+  version "5.0.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.13.tgz#3bae94c39752546d84a67d4ca73486b7c4923a89"
+  integrity sha512-uC0l97pBspfDAp+iz2cJq8YZ8Sd9i73V77+WzUiOAckIVEyCm5dyVDZCCO2/phmzckVEeZCGcytybkjMQuhPQw==
   dependencies:
-    "@babel/runtime" "^7.22.6"
+    "@babel/runtime" "^7.22.10"
     "@emotion/is-prop-valid" "^1.2.1"
+    "@floating-ui/react-dom" "^2.0.1"
     "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.14.4"
+    "@mui/utils" "^5.14.7"
     "@popperjs/core" "^2.11.8"
     clsx "^2.0.0"
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
-"@mui/core-downloads-tracker@^5.14.4":
-  version "5.14.4"
-  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.4.tgz#a517265647ee9660170107d68905db5e400576c5"
-  integrity sha512-pW2XghSi3hpYKX57Wu0SCWMTSpzvXZmmucj3TcOJWaCiFt4xr05w2gcwBZi36dAp9uvd9//9N51qbblmnD+GPg==
+"@mui/core-downloads-tracker@^5.14.7":
+  version "5.14.7"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.7.tgz#95bed2487bf59632125a13b8eb8f4c21e460afec"
+  integrity sha512-sCWTUNElBPgB30iLvWe3PU7SIlTKZNf6/E/sko85iHVeHCM6WPkDw+y89CrZYjhFNmPqt2fIQM/pZu+rP2lFLA==
 
 "@mui/icons-material@^5.14.1":
-  version "5.14.3"
-  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.3.tgz#26a84d52ab2fceea2856adf7a139527b3a51ae90"
-  integrity sha512-XkxWPhageu1OPUm2LWjo5XqeQ0t2xfGe8EiLkRW9oz2LHMMZmijvCxulhgquUVTF1DnoSh+3KoDLSsoAFtVNVw==
+  version "5.14.7"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.7.tgz#d7f6bd188fe38adf35c89d9343b8a529c2306383"
+  integrity sha512-mWp4DwMa8c1Gx9yOEtPgxM4b+e6hAbtZyzfSubdBwrnEE6G5D2rbAJ5MB+If6kfI48JaYaJ5j8+zAdmZLuZc0A==
   dependencies:
-    "@babel/runtime" "^7.22.6"
+    "@babel/runtime" "^7.22.10"
+
+"@mui/icons-material@^5.14.7":
+  version "5.14.7"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.7.tgz#d7f6bd188fe38adf35c89d9343b8a529c2306383"
+  integrity sha512-mWp4DwMa8c1Gx9yOEtPgxM4b+e6hAbtZyzfSubdBwrnEE6G5D2rbAJ5MB+If6kfI48JaYaJ5j8+zAdmZLuZc0A==
+  dependencies:
+    "@babel/runtime" "^7.22.10"
 
 "@mui/material@^5.14.1":
-  version "5.14.4"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.4.tgz#9d4d1834a929a4acc59e550e34ca64c0fd60b3a6"
-  integrity sha512-2XUV3KyRC07BQPPzEgd+ss3x/ezXtHeKtOGCMCNmx3MauZojPYUpSwFkE0fYgYCD9dMQMVG4DY/VF38P0KShsg==
+  version "5.14.7"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.7.tgz#6c2c0de8a625562f789e1bb33cb4cfc8cf20bdb0"
+  integrity sha512-jIZj9F7zMv6IlyaYDVv5M2Kp20jIX8c0kzuwteySHS/A0IvPVyomQEPtWc51MCbpDNCqzwoZUp3rQtA2lI8k7A==
   dependencies:
-    "@babel/runtime" "^7.22.6"
-    "@mui/base" "5.0.0-beta.10"
-    "@mui/core-downloads-tracker" "^5.14.4"
-    "@mui/system" "^5.14.4"
+    "@babel/runtime" "^7.22.10"
+    "@mui/base" "5.0.0-beta.13"
+    "@mui/core-downloads-tracker" "^5.14.7"
+    "@mui/system" "^5.14.7"
     "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.14.4"
+    "@mui/utils" "^5.14.7"
     "@types/react-transition-group" "^4.4.6"
     clsx "^2.0.0"
     csstype "^3.1.2"
@@ -1364,35 +1399,35 @@
     react-is "^18.2.0"
     react-transition-group "^4.4.5"
 
-"@mui/private-theming@^5.14.4":
-  version "5.14.4"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.4.tgz#0ec5510da05047f94984344360c7f457f3a0e19e"
-  integrity sha512-ISXsHDiQ3z1XA4IuKn+iXDWvDjcz/UcQBiFZqtdoIsEBt8CB7wgdQf3LwcwqO81dl5ofg/vNQBEnXuKfZHrnYA==
+"@mui/private-theming@^5.14.7":
+  version "5.14.7"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.7.tgz#c9fec31e59bf66b12959e724b0e8ec3bb4a3d923"
+  integrity sha512-Y86+hmDnJab2Ka42PgxKpK3oL7EiacbeeX3X/lG9LGO0wSc45wZjHeTfIlVSkkUCkexiMKEJp5NlSjZhr27NRQ==
   dependencies:
-    "@babel/runtime" "^7.22.6"
-    "@mui/utils" "^5.14.4"
+    "@babel/runtime" "^7.22.10"
+    "@mui/utils" "^5.14.7"
     prop-types "^15.8.1"
 
-"@mui/styled-engine@^5.13.2":
-  version "5.13.2"
-  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.13.2.tgz#c87bd61c0ab8086d34828b6defe97c02bcd642ef"
-  integrity sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==
+"@mui/styled-engine@^5.14.7":
+  version "5.14.7"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.7.tgz#aaacec6c87bcc9a180b2da062c613213af10f2e3"
+  integrity sha512-hKBETEDsIAkL8/mBwPiQj/vw28OeIhMXC3Tvj4J2bb9snxAKpiZioR1PwqP+6P41twsC/GKBd0Vr9oaWYaHuMg==
   dependencies:
-    "@babel/runtime" "^7.21.0"
+    "@babel/runtime" "^7.22.10"
     "@emotion/cache" "^11.11.0"
     csstype "^3.1.2"
     prop-types "^15.8.1"
 
-"@mui/system@^5.14.4":
-  version "5.14.4"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.4.tgz#306a2fdd41ab6f4912ea689316f834db8461bb86"
-  integrity sha512-oPgfWS97QNfHcDBapdkZIs4G5i85BJt69Hp6wbXF6s7vi3Evcmhdk8AbCRW6n0sX4vTj8oe0mh0RIm1G2A1KDA==
+"@mui/system@^5.14.7":
+  version "5.14.7"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.7.tgz#b08e23f9151d38186ab12dd618906abd4d73d203"
+  integrity sha512-jeZtHglc+Pi6qjGoopT6O4RqYXVBMqHVOsjMGP0hxGSSPm1T4gsAu7jU8eqGx9YwwjvvJ0eotTjFqw7iJ6qE2Q==
   dependencies:
-    "@babel/runtime" "^7.22.6"
-    "@mui/private-theming" "^5.14.4"
-    "@mui/styled-engine" "^5.13.2"
+    "@babel/runtime" "^7.22.10"
+    "@mui/private-theming" "^5.14.7"
+    "@mui/styled-engine" "^5.14.7"
     "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.14.4"
+    "@mui/utils" "^5.14.7"
     clsx "^2.0.0"
     csstype "^3.1.2"
     prop-types "^15.8.1"
@@ -1402,12 +1437,12 @@
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.4.tgz#b6fade19323b754c5c6de679a38f068fd50b9328"
   integrity sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==
 
-"@mui/utils@^5.14.4":
-  version "5.14.4"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.4.tgz#498cc2b08e46776c1e4327bfd8c23ad2f5890bc6"
-  integrity sha512-4ANV0txPD3x0IcTCSEHKDWnsutg1K3m6Vz5IckkbLXVYu17oOZCVUdOKsb/txUmaCd0v0PmSRe5PW+Mlvns5dQ==
+"@mui/utils@^5.14.7":
+  version "5.14.7"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.7.tgz#3677bcabe032f1185e151f57d8c1a166df3ae0a1"
+  integrity sha512-RtheP/aBoPogVdi8vj8Vo2IFnRa4mZVmnD0RGlVZ49yF60rZs+xP4/KbpIrTr83xVs34QmHQ2aQ+IX7I0a0dDw==
   dependencies:
-    "@babel/runtime" "^7.22.6"
+    "@babel/runtime" "^7.22.10"
     "@types/prop-types" "^15.7.5"
     "@types/react-is" "^18.2.1"
     prop-types "^15.8.1"
@@ -1418,11 +1453,6 @@
   resolved "https://registry.yarnpkg.com/@next/env/-/env-12.3.2.tgz#fb819366771f5721e9438ca3a42ad18684f0949b"
   integrity sha512-upwtMaHxlv/udAWGq0kE+rg8huwmcxQPsKZFhS1R5iVO323mvxEBe1YrSXe1awLbg9sTIuEHbgxjLLt7JbeuAQ==
 
-"@next/env@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.4.16.tgz#382b565b35a2a69bd0e6b50f74c7b95f0c4b1097"
-  integrity sha512-pCU0sJBqdfKP9mwDadxvZd+eLz3fZrTlmmDHY12Hdpl3DD0vy8ou5HWKVfG0zZS6tqhL4wnQqRbspdY5nqa7MA==
-
 "@next/eslint-plugin-next@12.2.2":
   version "12.2.2"
   resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-12.2.2.tgz#b4a22c06b6454068b54cc44502168d90fbb29a6d"
@@ -1459,21 +1489,11 @@
   resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.2.tgz#97c532d35c66ce6b6941ae24b5b8b267b9b0d0d8"
   integrity sha512-PTUfe1ZrwjsiuTmr3bOM9lsoy5DCmfYsLOUF9ZVhtbi5MNJVmUTy4VZ06GfrvnCO5hGCr48z3vpFE9QZ0qLcPw==
 
-"@next/swc-darwin-arm64@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.16.tgz#ed6a342f95e5f21213fdadbceb65b40ae678cee0"
-  integrity sha512-Rl6i1uUq0ciRa3VfEpw6GnWAJTSKo9oM2OrkGXPsm7rMxdd2FR5NkKc0C9xzFCI4+QtmBviWBdF2m3ur3Nqstw==
-
 "@next/swc-darwin-x64@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.2.tgz#e0cb4ff4b11faaff3a891bd1d18ed72f71e30ebe"
   integrity sha512-1HkjmS9awwlaeEY8Y01nRSNkSv3y+qnC/mjMPe/W66hEh3QKa/LQHqHeS7NOdEs19B2mhZ7w+EgMRXdLQ0Su8w==
 
-"@next/swc-darwin-x64@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.16.tgz#36c16066a1a3ef8211e84a6a5d72bef15826b291"
-  integrity sha512-o1vIKYbZORyDmTrPV1hApt9NLyWrS5vr2p5hhLGpOnkBY1cz6DAXjv8Lgan8t6X87+83F0EUDlu7klN8ieZ06A==
-
 "@next/swc-freebsd-x64@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.2.tgz#d7b93dd344cb67d1969565d0796c7b7d0217fccf"
@@ -1489,71 +1509,36 @@
   resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.2.tgz#26df7d7cdc18cf413f12a408179ee4ac315f383a"
   integrity sha512-T9GCFyOIb4S3acA9LqflUYD+QZ94iZketHCqKdoO0Nx0OCHIgGJV5rotDe8TDXwh/goYpIfyHU4j1qqw4w4VnA==
 
-"@next/swc-linux-arm64-gnu@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.16.tgz#a5b5500737f07e3aa7f184014d8df7973420df26"
-  integrity sha512-JRyAl8lCfyTng4zoOmE6hNI2f1MFUr7JyTYCHl1RxX42H4a5LMwJhDVQ7a9tmDZ/yj+0hpBn+Aan+d6lA3v0UQ==
-
 "@next/swc-linux-arm64-musl@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.2.tgz#fd42232a6b10d9f9a4f71433d59c280a4532d06f"
   integrity sha512-hxNVZS6L3c2z3l9EH2GP0MGQ9exu6O8cohYNZyqC9WUl6C03sEn8xzDH1y+NgD3fVurvYkGU5F0PDddJJLfDIw==
 
-"@next/swc-linux-arm64-musl@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.16.tgz#381b7662c5b10ed5750dce41dd57841aa0713e77"
-  integrity sha512-9gqVqNzUMWbUDgDiND18xoUqhwSm2gmksqXgCU0qaOKt6oAjWz8cWYjgpPVD0WICKFylEY/gvPEP1fMZDVFZ/g==
-
 "@next/swc-linux-x64-gnu@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.2.tgz#5307579e3d8fbdb03adbe6cfc915b51548e0a103"
   integrity sha512-fCPkLuwDwY8/QeXxciJJjDHG09liZym/Bhb4A+RLFQ877wUkwFsNWDUTSdUx0YXlYK/1gf67BKauqKkOKp6CYw==
 
-"@next/swc-linux-x64-gnu@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.16.tgz#6e0b0eab1c316506950aeb4a09a5ea5c38edabe7"
-  integrity sha512-KcQGwchAKmZVPa8i5PLTxvTs1/rcFnSltfpTm803Tr/BtBV3AxCkHLfhtoyVtVzx/kl/oue8oS+DSmbepQKwhw==
-
 "@next/swc-linux-x64-musl@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.2.tgz#d5cb920a825a8dc80ffba8a6b797fb845af0b84c"
   integrity sha512-o+GifBIQ2K+/MEFxHsxUZoU3bsuVFLXZYWd3idimFHiVdDCVYiKsY6mYMmKDlucX+9xRyOCkKL9Tjf+3tuXJpw==
 
-"@next/swc-linux-x64-musl@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.16.tgz#36b84e4509168a5cadf9dfd728c239002d4311fe"
-  integrity sha512-2RbMZNxYnJmW8EPHVBsGZPq5zqWAyBOc/YFxq/jIQ/Yn3RMFZ1dZVCjtIcsiaKmgh7mjA/W0ApbumutHNxRqqQ==
-
 "@next/swc-win32-arm64-msvc@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.2.tgz#2a0d619e5bc0cec17ed093afd1ca6b1c37c2690c"
   integrity sha512-crii66irzGGMSUR0L8r9+A06eTv7FTXqw4rgzJ33M79EwQJOdpY7RVKXLQMurUhniEeQEEOfamiEdPIi/qxisw==
 
-"@next/swc-win32-arm64-msvc@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.16.tgz#52d36f909ccdefa2761617b6d4e9ae65f99880a9"
-  integrity sha512-thDcGonELN7edUKzjzlHrdoKkm7y8IAdItQpRvvMxNUXa4d9r0ElofhTZj5emR7AiXft17hpen+QAkcWpqG7Jg==
-
 "@next/swc-win32-ia32-msvc@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.2.tgz#769bef60d0d678c3d7606a4dc7fee018d6199227"
   integrity sha512-5hRUSvn3MdQ4nVRu1rmKxq5YJzpTtZfaC/NyGw6wa4NSF1noUn/pdQGUr+I5Qz3CZkd1gZzzC0eaXQHlrk0E2g==
 
-"@next/swc-win32-ia32-msvc@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.16.tgz#a9cb0556d19c33fbb39ac9bef195fd490d6c7673"
-  integrity sha512-f7SE1Mo4JAchUWl0LQsbtySR9xCa+x55C0taetjUApKtcLR3AgAjASrrP+oE1inmLmw573qRnE1eZN8YJfEBQw==
-
 "@next/swc-win32-x64-msvc@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.2.tgz#45beb4b9d28e6dd6abf63cab1c5b92dc84323a6b"
   integrity sha512-tpQJYUH+TzPMIsdVl9fH8uDg47iwiNjKY+8e9da3dXqlkztKzjSw0OwSADoqh3KrifplXeKSta+BBGLdBqg3sg==
 
-"@next/swc-win32-x64-msvc@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.16.tgz#79a151d94583e03992c80df3d3e7f7686390ddac"
-  integrity sha512-WamDZm1M/OEM4QLce3lOmD1XdLEl37zYZwlmOLhmF7qYJ2G6oYm9+ejZVv+LakQIsIuXhSpVlOvrxIAHqwRkPQ==
-
 "@nivo/annotations@0.80.0":
   version "0.80.0"
   resolved "https://registry.yarnpkg.com/@nivo/annotations/-/annotations-0.80.0.tgz#127e4801fff7370dcfb9acfe1e335781dd65cfd5"
@@ -2011,9 +1996,9 @@
     picomatch "^2.2.2"
 
 "@rollup/pluginutils@^5.0.1":
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.3.tgz#183126d69aeb1cfa23401d5a71cb4b8c16c4a4e0"
-  integrity sha512-hfllNN4a80rwNQ9QCxhxuHCGHMAvabXqxNdaChUSSadMre7t4iEUI6fFAhBOn/eIYTgYVhBv7vCLsAJ4u3lf3g==
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.4.tgz#74f808f9053d33bafec0cc98e7b835c9667d32ba"
+  integrity sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==
   dependencies:
     "@types/estree" "^1.0.0"
     estree-walker "^2.0.2"
@@ -2046,26 +2031,26 @@
   dependencies:
     "@daybrush/utils" "^1.4.0"
 
-"@sentry-internal/tracing@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.63.0.tgz#58903b2205456034611cc5bc1b5b2479275f89c7"
-  integrity sha512-Fxpc53p6NGvLSURg3iRvZA0k10K9yfeVhtczvJnpX30POBuV41wxpkLHkb68fjksirjEma1K3Ut1iLOEEDpPQg==
+"@sentry-internal/tracing@7.66.0":
+  version "7.66.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.66.0.tgz#45ea607917d55a5bcaa3229341387ff6ed9b3a2b"
+  integrity sha512-3vCgC2hC3T45pn53yTDVcRpHoJTBxelDPPZVsipAbZnoOVPkj7n6dNfDhj3I3kwWCBPahPkXmE+R4xViR8VqJg==
   dependencies:
-    "@sentry/core" "7.63.0"
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry/core" "7.66.0"
+    "@sentry/types" "7.66.0"
+    "@sentry/utils" "7.66.0"
     tslib "^2.4.1 || ^1.9.3"
 
-"@sentry/browser@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.63.0.tgz#d7eee4be7bfff015f050bca83cafb111dc13d40d"
-  integrity sha512-P1Iw/2281C/7CUCRsN4jgXvjMNKnrwKqxRg7JqN8eVeCDPMpOeEPHNJ6YatEXdVLTKVn0JB7L63Q1prhFr8+SQ==
+"@sentry/browser@7.66.0":
+  version "7.66.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.66.0.tgz#9aa3078f8914d2f8acb4ad9fc7b2011c80e357f5"
+  integrity sha512-rW037rf8jkhyykG38+HUdwkRCKHJEMM5NkCqPIO5zuuxfLKukKdI2rbvgJ93s3/9UfsTuDFcKFL1u43mCn6sDw==
   dependencies:
-    "@sentry-internal/tracing" "7.63.0"
-    "@sentry/core" "7.63.0"
-    "@sentry/replay" "7.63.0"
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry-internal/tracing" "7.66.0"
+    "@sentry/core" "7.66.0"
+    "@sentry/replay" "7.66.0"
+    "@sentry/types" "7.66.0"
+    "@sentry/utils" "7.66.0"
     tslib "^2.4.1 || ^1.9.3"
 
 "@sentry/cli@^1.74.6":
@@ -2080,88 +2065,88 @@
     proxy-from-env "^1.1.0"
     which "^2.0.2"
 
-"@sentry/core@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.63.0.tgz#8c38da6ef3a1de6e364463a09bc703b196ecbba4"
-  integrity sha512-13Ljiq8hv6ieCkO+Am99/PljYJO5ynKT/hRQrWgGy9IIEgUr8sV3fW+1W6K4/3MCeOJou0HsiGBjOD1mASItVg==
+"@sentry/core@7.66.0":
+  version "7.66.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.66.0.tgz#8968f2a9e641d33e3750a8e24d1d39953680c4f2"
+  integrity sha512-WMAEPN86NeCJ1IT48Lqiz4MS5gdDjBwP4M63XP4msZn9aujSf2Qb6My5uT87AJr9zBtgk8MyJsuHr35F0P3q1w==
   dependencies:
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry/types" "7.66.0"
+    "@sentry/utils" "7.66.0"
     tslib "^2.4.1 || ^1.9.3"
 
-"@sentry/integrations@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.63.0.tgz#bf4268b524670fdbc290dc489de0069143b499c6"
-  integrity sha512-+P8GNqFZNH/yS/KPbvUfUDERneoRNUrqp9ayvvp8aq4cTtrBdM72CYgI21oG6cti42SSM1VDLYZomTV3ElPzSg==
+"@sentry/integrations@7.66.0":
+  version "7.66.0"
+  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.66.0.tgz#297d13fd2f567b0eba7faaa3727301db586b398a"
+  integrity sha512-2PNEnihG9e9Rjbz205+A4BYtFcS2XdgwsN6obAU6Yir7VIbskwZXxx87lKZuz6S53sOWPHleC7uvUBjL+Q6vYg==
   dependencies:
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry/types" "7.66.0"
+    "@sentry/utils" "7.66.0"
     localforage "^1.8.1"
     tslib "^2.4.1 || ^1.9.3"
 
 "@sentry/nextjs@^7.36.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-7.63.0.tgz#79bca799d451e1570c7873474e295660218cadea"
-  integrity sha512-pf1kEt2oqxe84+DdmGkI6BEe1KMUcUFU4PZKg5GRFY7e2ZqHoS8hTJF5rBkScqVlQoXDTiGpfI+vU8Ie3snUcQ==
+  version "7.66.0"
+  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-7.66.0.tgz#4ee5a8dc99ed930d2957ac7e287918ff3ba31e87"
+  integrity sha512-CJwl3/rIJRR1isqWjGEE8CYiNUndvRksp7l0/75tfe4JoKTk+XS3tXcXVZyyXh34GU5San1c46ctiyodaGGIeg==
   dependencies:
     "@rollup/plugin-commonjs" "24.0.0"
-    "@sentry/core" "7.63.0"
-    "@sentry/integrations" "7.63.0"
-    "@sentry/node" "7.63.0"
-    "@sentry/react" "7.63.0"
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry/core" "7.66.0"
+    "@sentry/integrations" "7.66.0"
+    "@sentry/node" "7.66.0"
+    "@sentry/react" "7.66.0"
+    "@sentry/types" "7.66.0"
+    "@sentry/utils" "7.66.0"
     "@sentry/webpack-plugin" "1.20.0"
     chalk "3.0.0"
     rollup "2.78.0"
     stacktrace-parser "^0.1.10"
     tslib "^2.4.1 || ^1.9.3"
 
-"@sentry/node@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.63.0.tgz#38508a440c04c0e98d00f5a1855e5448ee70c8d6"
-  integrity sha512-tSMyfQNbfjX1w8vJDZtvWeaD4QQ/Z4zVW/TLXfL/JZFIIksPgDZmqLdF+NJS4bSGTU5JiHiUh4pYhME4mHgNBQ==
+"@sentry/node@7.66.0":
+  version "7.66.0"
+  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.66.0.tgz#d3e08471e1ecae28d3cd0ba3c18487ecb2449881"
+  integrity sha512-PxqIqLr4Sh5xcDfECiBQ4PuZ7v8yTgLhaRkruWrZPYxQrcJFPkwbFkw/IskzVnhT2VwXUmeWEIlRMQKBJ0t83A==
   dependencies:
-    "@sentry-internal/tracing" "7.63.0"
-    "@sentry/core" "7.63.0"
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry-internal/tracing" "7.66.0"
+    "@sentry/core" "7.66.0"
+    "@sentry/types" "7.66.0"
+    "@sentry/utils" "7.66.0"
     cookie "^0.4.1"
     https-proxy-agent "^5.0.0"
     lru_map "^0.3.3"
     tslib "^2.4.1 || ^1.9.3"
 
-"@sentry/react@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.63.0.tgz#6d318191e13ccf7ebba4897d7258b4ea3bcf6c51"
-  integrity sha512-KFRjgADVE4aMI7gJmGnoSz65ZErQlz9xRB3vETWSyNOLprWXuQLPPtcDEn39BROtsDG4pLyYFaSDiD7o0+DyjQ==
+"@sentry/react@7.66.0":
+  version "7.66.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.66.0.tgz#5f4d52a47b97e4daad0a2729ec6c88c0b29f0186"
+  integrity sha512-TC7kCkLoo+Klp9uywdV6tg8DDyn1CrTdndJghO6PoGz6sCa9k+t7K+z4E7MlgDoh3wiZwS2G2zhkT/xVeDRvJA==
   dependencies:
-    "@sentry/browser" "7.63.0"
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry/browser" "7.66.0"
+    "@sentry/types" "7.66.0"
+    "@sentry/utils" "7.66.0"
     hoist-non-react-statics "^3.3.2"
     tslib "^2.4.1 || ^1.9.3"
 
-"@sentry/replay@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.63.0.tgz#989ae32ea028a5eca323786cc07294fedb1f0d45"
-  integrity sha512-ikeFVojuP9oDF103blZcj0Vvb4S50dV54BESMrMW2lYBoMMjvOd7AdL+iDHjn1OL05/mv1C6Oc8MovmvdjILVA==
+"@sentry/replay@7.66.0":
+  version "7.66.0"
+  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.66.0.tgz#5469144192824e7688c475ed29586a8cce6606f6"
+  integrity sha512-5Y2SlVTOFTo3uIycv0mRneBakQtLgWkOnsJaC5LB0Ip0TqVKiMCbQ578vvXp+yvRj4LcS1gNd98xTTNojBoQNg==
   dependencies:
-    "@sentry/core" "7.63.0"
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry/core" "7.66.0"
+    "@sentry/types" "7.66.0"
+    "@sentry/utils" "7.66.0"
 
-"@sentry/types@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.63.0.tgz#8032029fee6f70e04b667646626a674b03e2f79b"
-  integrity sha512-pZNwJVW7RqNLGuTUAhoygt0c9zmc0js10eANAz0MstygJRhQI1tqPDuiELVdujPrbeL+IFKF+7NvRDAydR2Niw==
+"@sentry/types@7.66.0":
+  version "7.66.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.66.0.tgz#4ec290cc6a3dd2024a61a0bffb468cedb409f7fb"
+  integrity sha512-uUMSoSiar6JhuD8p7ON/Ddp4JYvrVd2RpwXJRPH1A4H4Bd4DVt1mKJy1OLG6HdeQv39XyhB1lPZckKJg4tATPw==
 
-"@sentry/utils@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.63.0.tgz#7c598553b4dbb6e3740dc96bc7f112ec32edbe69"
-  integrity sha512-7FQv1RYAwnuTuarruP+1+Jd6YQuN7i/Y7KltwPMVEwU7j5mzYQaexLr/Jz1XIdR2KYVdkbXQyP8jj8BmA6u9Jw==
+"@sentry/utils@7.66.0":
+  version "7.66.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.66.0.tgz#2e37c96610f26bc79ac064fca4222ea91fece68d"
+  integrity sha512-9GYUVgXjK66uXXcLXVMXVzlptqMtq1eJENCuDeezQiEFrNA71KkLDg00wESp+LL+bl3wpVTBApArpbF6UEG5hQ==
   dependencies:
-    "@sentry/types" "7.63.0"
+    "@sentry/types" "7.66.0"
     tslib "^2.4.1 || ^1.9.3"
 
 "@sentry/webpack-plugin@1.20.0":
@@ -2189,13 +2174,6 @@
   dependencies:
     tslib "^2.4.0"
 
-"@swc/helpers@0.5.1":
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.1.tgz#e9031491aa3f26bfcc974a67f48bd456c8a5357a"
-  integrity sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==
-  dependencies:
-    tslib "^2.4.0"
-
 "@tailwindcss/typography@^0.5.9":
   version "0.5.9"
   resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.9.tgz#027e4b0674929daaf7c921c900beee80dbad93e8"
@@ -2207,152 +2185,147 @@
     postcss-selector-parser "6.0.10"
 
 "@tiptap-pro/extension-unique-id@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.tiptap.dev/@tiptap-pro%2fextension-unique-id/-/extension-unique-id-2.1.0.tgz#7f5e7cc2d068eff11531e2b8c894ddf13c8d41d8"
-  integrity sha512-RdkDqFV0adN/NXJ31I64mD3VmoGhQfNMmOyF5X92fbIymHaonAGzDeoXoindd+6MUUd6e3cm75x5VQLdsddG4Q==
+  version "2.2.1"
+  resolved "https://registry.tiptap.dev/@tiptap-pro%2fextension-unique-id/-/extension-unique-id-2.2.1.tgz#656803254760314d4e1b453dc5b75c86023048a6"
+  integrity sha512-B0GNLrWDVcfhbUOOi/lJfow6I4Y8xwJYXnSlhAENnGgOGERjinY1J5nZaR5dDMu1chcJYqAt3I7vkVLA/UMwmQ==
   dependencies:
     uuid "^8.3.2"
 
-"@tiptap/core@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.0.4.tgz#0a2047150ae537e75f96841a603699526f7b4ec5"
-  integrity sha512-2YOMjRqoBGEP4YGgYpuPuBBJHMeqKOhLnS0WVwjVP84zOmMgZ7A8M6ILC9Xr7Q/qHZCvyBGWOSsI7+3HsEzzYQ==
+"@tiptap/core@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.1.7.tgz#9823a3712d176849cfd281dd8229ad0719c9eb9e"
+  integrity sha512-1pqTwlTnwTKQSNQmmTWhs2lwdvd+hFFNFZnrRAfvZhQZA6qPmPmKMNTcYmK38Tn4axKth6mhBamzTJgMZFI7ng==
 
-"@tiptap/extension-blockquote@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.0.4.tgz#1e87f8f157573deec65b54d8a8b5568d79066a86"
-  integrity sha512-z5qfuLi04OgCBI6/odzB2vhulT/wpjymYOnON65vLXGZZbUw4cbPloykhqgWvQp+LzKH+HBhl4fz53d5CgnbOA==
+"@tiptap/extension-blockquote@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.1.7.tgz#fe25ec1dedd1f7e3eb1a851a6ac8738ca4691a17"
+  integrity sha512-oAsUU1c0DDZKHwK7/uCtYpnTUQt0o3w+SsJSv4S2vlSHidiFl9gCQGozUQ/Alzc7GO1Y95rOscL28DJXgXESQg==
 
-"@tiptap/extension-bold@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.0.4.tgz#debba8b0d957fe0b6943354834d8f1f0f8c0695c"
-  integrity sha512-CWSQy1uWkVsen8HUsqhm+oEIxJrCiCENABUbhaVcJL/MqhnP4Trrh1B6O00Yfoc0XToPRRibDaHMFs4A3MSO0g==
+"@tiptap/extension-bold@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.1.7.tgz#c5d89284235d75c2e65745b50a5c0681be1cbab6"
+  integrity sha512-GZV2D91WENkWd1W29vM4kyGWObcxOKQrY8MuCvTdxni1kobEc/LPZzQ1XiQmiNTvXTMcBz5ckLpezdjASV1dNg==
 
-"@tiptap/extension-bubble-menu@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.0.4.tgz#f9dde09d3984e9879b1fe13d3e8c1859f0779ef5"
-  integrity sha512-+cRZwj0YINNNDElSAiX1pvY2K98S2j9MQW2dXV5oLqsJhqGPZsKxVo8I1u7ZtqUla3QE1V18RYPAzVgTiMRkBg==
+"@tiptap/extension-bubble-menu@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.1.7.tgz#62616c9ee456c8413ad6c120757978266052a1a0"
+  integrity sha512-VcwwUgiG17TEDZda1JBbyKCHLIBTu8B2OAzYrnd4ZqeRs5KTVAB279o/TVjsLVgEfC+c7IWwhhaPPMoXn/lJ3g==
   dependencies:
     tippy.js "^6.3.7"
 
-"@tiptap/extension-bullet-list@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.0.4.tgz#d192767d39e45253c5e9d974e949f271e09c72d7"
-  integrity sha512-JSZKBVTaKSuLl5fR4EKE4dOINOrgeRHYA25Vj6cWjgdvpTw5ef7vcUdn9yP4JwTmLRI+VnnMlYL3rqigU3iZNg==
+"@tiptap/extension-bullet-list@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.1.7.tgz#3a7356824a931122314a6bd73b5f9d8a8a313791"
+  integrity sha512-BReix1wkGNH12DSWGnWPKNu4do92Avh98aLkRS1o1V1Y49/+YGMYtfBXB9obq40o0WqKvk4MoM+rhKbfEc44Gg==
 
 "@tiptap/extension-code-block-lowlight@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-2.0.4.tgz#e641f08d2ea77271722e848c6efa819b63638b1a"
-  integrity sha512-fKM/4MY9R75IJJVt7P+aD+GX3yzzL6oHo1dn4hNFJlYp2x5+yH6kneaqKcTglVicBCGc8Ks6wJLEZTxxG35MOA==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-2.1.7.tgz#713dad4324c9ce25c66768fc4cfdb514ecea21c7"
+  integrity sha512-GOmpe3bwjlhMC79vFICInkJwaHx5dTiKQCTzdjZ5qRsvKgk/0YTrmWaN+w+JW5BBUaChj8IrgAPy7VZ20l7GKQ==
 
-"@tiptap/extension-code-block@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-2.0.4.tgz#d551ee7c13fef379bbbad298f1be757d1125cd54"
-  integrity sha512-In2tV3rgm/MznVF0N7qYsYugPWSzhZHaCRCWcFKNvllMExpo91bUWvk+hXaIhhPxvuqGIVezjybwrYuU3bJW0g==
+"@tiptap/extension-code-block@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-2.1.7.tgz#c087c22c305f3c87645228ad32f32595dde7f2a2"
+  integrity sha512-uiasfWCIQuk34vGoIENqAJOHf9m3hAkcELnb9T6+uNxA3O7PUZQqBVN/27oEipj7j15pqua50D6C1jql9kFe0g==
 
-"@tiptap/extension-code@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.0.4.tgz#6952d402e7372dd2d129e962bf9bd54d68ee6183"
-  integrity sha512-HuwJSJkipZf4hkns9witv1CABNIPiB9C8lgAQXK4xJKcoUQChcnljEL+PQ2NqeEeMTEeV3nG3A/0QafH0pgTgg==
+"@tiptap/extension-code@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.1.7.tgz#bad3b1aedc23123a2094f8810801edb0c13acbff"
+  integrity sha512-g0IA6Q6DFZE0AEOMXAV1mktl/XzIO3s1h/haPIKZ8GNes522qhBr9FYc5OUPQCCbgYjL7soTGzxA/W5Jk3f2AQ==
 
 "@tiptap/extension-color@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-color/-/extension-color-2.0.4.tgz#564265c2bcadd268e6b5745d2a06571744cb4090"
-  integrity sha512-7Eb5Gk9v3sj2i1Q8dfqmpnc5aDPC/t0ZEsSLRi4C6SNo1nBeUxteXzpzxWwYjTvK+Um40STR89Z6PY14FIYXSA==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-color/-/extension-color-2.1.7.tgz#7f436aed2f41087d8de6af6a4dd4cb7d964354dd"
+  integrity sha512-NLspH5taSpZP60rXJjDKu8AP9VDd+dlqz4guxvijtuPEePw87Fzidxx9w6X0uYQfx1O0xdPFq3UodlDz591scA==
 
-"@tiptap/extension-document@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.0.4.tgz#f94e6da23a7d93a8ea34c6767d4e2e31f5ab8849"
-  integrity sha512-mCj2fAhnNhIHttPSqfTPSSTGwClGaPYvhT56Ij/Pi4iCrWjPXzC4XnIkIHSS34qS2tJN4XJzr/z7lm3NeLkF1w==
+"@tiptap/extension-document@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.1.7.tgz#5e1d56e899fdca8ebfad1b7cb358d5ace664b851"
+  integrity sha512-tZyoPPmvzti7PEnyulXomEtINd/Oi2S84uOt6gw7DTCnDq5bF5sn1IfN8Icqp9t4jDwyLXy2TL0Zg/sR0a2Ibg==
 
-"@tiptap/extension-dropcursor@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-2.0.4.tgz#f4a7542866c9100fee8e78eca5eebefff58989ca"
-  integrity sha512-1OmKBv/E+nJo2vsosvu8KwFiBB+gZM1pY61qc7JbwEKHSYAxUFHfvLkIA0IQ53Z0DHMrFSKgWmHEcbnqtGevCA==
+"@tiptap/extension-dropcursor@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-2.1.7.tgz#a3f79b7453579f36f326852b16e421601e881a28"
+  integrity sha512-hNk2BuLnNSXlGOQphlzdpFKCKo7uHUFjWuBfzF1S9FMAQgcN7eTia+cCClmXABYfVLW4fT14PC1KiuGjxi9MuA==
 
-"@tiptap/extension-floating-menu@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.0.4.tgz#82f12c2415b7ddbfd782a03b100f717e9905bab0"
-  integrity sha512-0YRE738k+kNKuSHhAb3jj9ZQ7Kda78RYRr+cX2jrQVueIMKebPIY07eBt6JcKmob9V9vcNn9qLtBfmygfcPUQg==
+"@tiptap/extension-floating-menu@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.1.7.tgz#fe2def740b3136d38101634ae60d2fec5468c57e"
+  integrity sha512-K0bO7JKHAvgLM5MkhNgoYcD6SB0Z2tNIFhZHs5SCTuhg7dwduMSM3pC6QBrJGUk99DGsKuMPYQn3c2oG7MLbyQ==
   dependencies:
     tippy.js "^6.3.7"
 
-"@tiptap/extension-gapcursor@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.0.4.tgz#c100a792fd41535ad6382aa8133d0d9c0b2cb2b8"
-  integrity sha512-VxmKfBQjSSu1mNvHlydA4dJW/zawGKyqmnryiFNcUV9s+/HWLR5i9SiUl4wJM/B8sG8cQxClne5/LrCAeGNYuA==
-
 "@tiptap/extension-gapcursor@^2.1.7":
   version "2.1.7"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.1.7.tgz#5c0303ba37b4c066f3a3c5835fd0b298f0d3e919"
   integrity sha512-7eoInzzk1sssoD3RMkwFC86U15Ja4ANve+8wIC+xhN4R3Oe3PY3lFbp1GQxCmaJj8b3rtjNKIQZ2zO0PH58afA==
 
-"@tiptap/extension-hard-break@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.0.4.tgz#a4f70fa9a473270f7ec89f20a14b9122af5657bc"
-  integrity sha512-4j8BZa6diuoRytWoIc7j25EYWWut5TZDLbb+OVURdkHnsF8B8zeNTo55W40CdwSaSyTtXtxbTIldV80ShQarGQ==
+"@tiptap/extension-hard-break@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.1.7.tgz#1cd783adfe2788d41614f8851b8d7a52ec027cce"
+  integrity sha512-6gFXXlCGAdXjy27BW29q4yfCQPAEFd18k7zRTnbd4aE/zIWUtLqdiTfI3kotUMab9Tt9/z1BRmCbEUxRsf1Nww==
 
-"@tiptap/extension-heading@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.0.4.tgz#5372e346c5d69cfa0060d7238d1a0bf440442f6f"
-  integrity sha512-EfitUbew5ljH3xVlBXAxqqcJ4rjv15b8379LYOV6KQCf+Y1wY0gy9Q8wXSnrsAagqrvqipja4Ihn3OZeyIM+CA==
+"@tiptap/extension-heading@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.1.7.tgz#26d16227eab95b1f381e977f7aa1685f493c6fb5"
+  integrity sha512-jMeTqtq3kbMFtMvUb3SeIt4FFM3W+b6TAw5H4Qd6z3gYsAU3GahRK67MtbJfPmznUkZfimrqW9VCaBezScfrsQ==
 
 "@tiptap/extension-highlight@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-highlight/-/extension-highlight-2.0.4.tgz#5d54232ac573d0b04c3e705ca38f207fb6cf7270"
-  integrity sha512-z1hcpf0eHHdaBE0pewXiNIu+QBodw4IAbZykTXMaY1xCsbYWfOJxeIb5o+CEG5HBsmaoJrCYenQw71xzgV0hKA==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-highlight/-/extension-highlight-2.1.7.tgz#0f9434eedfdcb95a22ca5b6f601d13f4343a7e5c"
+  integrity sha512-3EXrnf1BQSdOe/iqzcTIr5Tf0NOhPQ+y1B9nMi/40v3MD8WzRBLaqj0lvpwO7xMAdgxm6IiL/XFYU41n9yFl/Q==
 
-"@tiptap/extension-history@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-history/-/extension-history-2.0.4.tgz#761a9c4b2a875817acc73137660552bd49e94fca"
-  integrity sha512-3GAUszn1xZx3vniHMiX9BSKmfvb5QOb0oSLXInN+hx80CgJDIHqIFuhx2dyV9I/HWpa0cTxaLWj64kfDzb1JVg==
+"@tiptap/extension-history@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-history/-/extension-history-2.1.7.tgz#baa566875ef1278c5dd8821970362d85348b266c"
+  integrity sha512-8SIEKSImrIkqJThym1bPD13sC4/76UrG+piQ30xKQU4B7zUFCbutvrwYuQHSRvaEt8BPdTv2LWIK+wBkIgbWVA==
 
-"@tiptap/extension-horizontal-rule@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.0.4.tgz#6988dd63fb00ca144feb1baac84142782e8ebe38"
-  integrity sha512-OMx2ImQseKbSUjPbbRCuYGOJshxYedh9giWAqwgWWokhYkH4nGxXn5m7+Laj+1wLre4bnWgHWVY4wMGniEj3aw==
+"@tiptap/extension-horizontal-rule@^2.0.4", "@tiptap/extension-horizontal-rule@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.1.7.tgz#7c21bc4917e4ced9382e81626e0f0068b224bfbb"
+  integrity sha512-hJupsDxDVmjmKI/Ewl/gtiyUx52Y3wRUhT8dCXNOA5eldmPXN23E2Fa2BC8XB47dyc5pubyNcLuqaLeaZ5hedw==
 
 "@tiptap/extension-image@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-2.0.4.tgz#a41d5ca246bd41dd293194e359a80cb97f477ab3"
-  integrity sha512-5iQ96pt9xppM8sWzwhGgc99PPoYPQuokTaCXAQKDI0Y1CFCjZ+/duUG3al1VUMpBXsjJw3/RVO1+7CEhRTd3mA==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-2.1.7.tgz#597129fb072f6b0014c980892c367a283077f564"
+  integrity sha512-aWa/NPMc1U9Z6xuV0gk1O1nk4H7BAwQMwqXWdvUQCJhmW5+LJPdEiKvt3P6j+ClIN7sdyokZCgr6eGr817qTLA==
 
-"@tiptap/extension-italic@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.0.4.tgz#4c6d0938542e4f7276f9dd18db395c040f76dcd8"
-  integrity sha512-C/6+qs4Jh8xERRP0wcOopA1+emK8MOkBE4RQx5NbPnT2iCpERP0GlmHBFQIjaYPctZgKFHxsCfRnneS5Xe76+A==
+"@tiptap/extension-italic@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.1.7.tgz#d077683597d4282ae272c48b313d768d71985b67"
+  integrity sha512-7e37f+OFqisdY19nWIthbSNHMJy4+4dec06rUICPrkiuFaADj5HjUQr0dyWpL/LkZh92Wf/rWgp4V/lEwon3jA==
 
 "@tiptap/extension-link@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-2.0.4.tgz#2899f9060ca722f11bd10ceb572ceb5178f111d6"
-  integrity sha512-CliImI1hmC+J6wHxqgz9P4wMjoNSSgm3fnNHsx5z0Bn6JRA4Evh2E3KZAdMaE8xCTx89rKxMYNbamZf4VLSoqQ==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-2.1.7.tgz#2705c212d105ccf411d505e334ece4a723971ee4"
+  integrity sha512-NDfoMCkThng1B530pMg5y69+eWoghZXK2uCntrJH7Rs8jNeGMyt9wGIOd7N8ZYz0oJ2ZYKzZjS0RANdBDS17DA==
   dependencies:
     linkifyjs "^4.1.0"
 
-"@tiptap/extension-list-item@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.0.4.tgz#8ca7c9959a07bf94602f8957d784d526568f2069"
-  integrity sha512-tSkbLgRo1QMNDJttWs9FeRywkuy5T2HdLKKfUcUNzT3s0q5AqIJl7VyimsBL4A6MUfN1qQMZCMHB4pM9Mkluww==
+"@tiptap/extension-list-item@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.1.7.tgz#dc24045e445d0f91baec9b113f711dc90c6682ac"
+  integrity sha512-hd/E4qQopBXWa6kdFY19qFVgqj4fzdPgAnzdXJ2XW7bC6O2CusmHphRRZ5FBsuspYTN/6/fv0i0jK9rSGlsEyA==
 
-"@tiptap/extension-ordered-list@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-2.0.4.tgz#e3e220e9c15114b07c952c32fa58e96601db6bd7"
-  integrity sha512-Kfg+8k9p4iJCUKP/yIa18LfUpl9trURSMP/HX3/yQTz9Ul1vDrjxeFjSE5uWNvupcXRAM24js+aYrCmV7zpU+Q==
+"@tiptap/extension-ordered-list@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-2.1.7.tgz#72d9ddc432ecf0fd19c8acd3c6b44f5358d8e0d0"
+  integrity sha512-3XIXqbZmYkNzF+8PQ2jcCOCj0lpC3y9HGM/+joPIunhiUiktrIgpbUDv2E1Gq5lJHYqthIeujniI2dB85tkwJQ==
 
-"@tiptap/extension-paragraph@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.0.4.tgz#9cffa3f8a980349ca068b1b3c12596bf5f3aef0f"
-  integrity sha512-nDxpopi9WigVqpfi8nU3B0fWYB14EMvKIkutNZo8wJvKGTZufNI8hw66wupIx/jZH1gFxEa5dHerw6aSYuWjgQ==
+"@tiptap/extension-paragraph@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.1.7.tgz#76408706f0037a510a384b86780bd50c6e8ffeea"
+  integrity sha512-cLqX27hNrXrwZCKrIW8OC3rW2+MT8hhS37+cdqOxZo5hUqQ9EF/puwS0w8uUZ7B3awX9Jm1QZDMjjERLkcmobw==
 
 "@tiptap/extension-placeholder@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-placeholder/-/extension-placeholder-2.0.4.tgz#74259783757c59751d78fcdd1aade7e928809187"
-  integrity sha512-Y8hjUYBGTbytgrsplSZdHGciqbuVHQX+h0JcuvVaIlAy1kR7hmbxJLqL8tNa7qLtTqo2MfS2942OtSv85JOCzA==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-placeholder/-/extension-placeholder-2.1.7.tgz#8477cf5116c89f0f75e8e2e3b8528e146a7f0f24"
+  integrity sha512-IiBoItYYNS7hb/zmPitw3w6Cylmp9qX+zW+QKe3lDkCNPeKxyQr86AnVLcQYOuXg62cLV9dp+4azZzHoz9SOcg==
 
-"@tiptap/extension-strike@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.0.4.tgz#13286dcf8780c55610ed65b24238b8395a5be824"
-  integrity sha512-Men7LK6N/Dh3/G4/z2Z9WkDHM2Gxx1XyxYix2ZMf5CnqY37SeDNUnGDqit65pdIN3Y/TQnOZTkKSBilSAtXfJA==
+"@tiptap/extension-strike@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.1.7.tgz#b7b7f49254f1de22416b1415ca88a2a20edd0627"
+  integrity sha512-ONLXYnuZGM2EoGcxkyvJSDMBeAp7K6l83UXkK9TSj+VpEEDdeV7m8mJs8/vACJjJxD5HMN61+EPgU7VTEukQCA==
 
 "@tiptap/extension-table-cell@^2.1.6":
   version "2.1.7"
@@ -2375,34 +2348,34 @@
   integrity sha512-nlKs35vTQOFW9lfw76S7kJvqVJAfHUlz1muQgWT0gNUlKJYINMXjUIg4Wcx8LTaITCCkp0lMGrLETGRNI+RyxA==
 
 "@tiptap/extension-task-item@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-item/-/extension-task-item-2.0.4.tgz#71f46d35ac629ca10c5c23d4ad170007338a436e"
-  integrity sha512-0FfYWrOslDzzN7Ehnt3yBekOSH45tiB/3gzFRvGdLBUv0PiYQolUpyfHGsdNzeKYuWLF1yiacJkCeLgNDgCLDw==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-item/-/extension-task-item-2.1.7.tgz#384a55308f3524f36388560486a2508a4b3c5413"
+  integrity sha512-4wFLZmhYqr87SEI/Qgk3FiH+qfp6IOmuYVhpL5zGLa6p+ytUdmPH3+zOaD1rthn5JiRU9KwYWFvTo2f+/O0NAg==
 
 "@tiptap/extension-task-list@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-list/-/extension-task-list-2.0.4.tgz#69b2b23d1e757044c05f3d7dcbd30194c71f9324"
-  integrity sha512-3RGoEgGJdWpGf8aWl7O7+jnnvfpF0or2YHYYvJv13t5G4dNIS9E7QXT3/rU9QtHNYkbcJYFjHligIFuBTAhZNg==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-list/-/extension-task-list-2.1.7.tgz#abaad3a7b964e58dac6b96b08000a50a06a071b4"
+  integrity sha512-eerV8pbGuYoFji6arWk+LBsIfURXPWNSLi1ZCuPfXP6N8sAV3fNT+VDm6RlGQwadQNae7rnibNClk67+55h9Zg==
 
 "@tiptap/extension-text-style@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-style/-/extension-text-style-2.0.4.tgz#4ba3fd6b204badc43ac6a00285315fe868f07e52"
-  integrity sha512-HQk8c7HasDdeAJxlHrztkgprxocZecZVUMlvPvFAhkq8E/5+nfmr/Gm9qudiStEARZrIYBATNA2PbnQuIGMx3A==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-style/-/extension-text-style-2.1.7.tgz#57f5dc5b223a855e782f24e09dc7fc53d9bd4b00"
+  integrity sha512-0QhEMDiDqMpyBGRt6o4GvbN9cUibZe4LT9e0ujarT6ElSe2fbtwGPnXSXApUtgHDDwHw95M5ZVxX/H5cjyjw1g==
 
-"@tiptap/extension-text@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.0.4.tgz#318b0105491a5976d220871dccabe6c4d2cbeedd"
-  integrity sha512-i8/VFlVZh7TkAI49KKX5JmC0tM8RGwyg5zUpozxYbLdCOv07AkJt+E1fLJty9mqH4Y5HJMNnyNxsuZ9Ol/ySRA==
+"@tiptap/extension-text@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.1.7.tgz#071053ab0a8804a3bce36d1488a603b7446dff4e"
+  integrity sha512-3xaMMMNydLgoS+o+yOvaZF04ui9spJwJZl8VyYgcJKVGGLGRlWHrireXN5/OqXG2jLb/jWqXVx5idppQjX+PMA==
 
 "@tiptap/extension-underline@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-2.0.4.tgz#c1e5df75a4c9f2d9e691d48438ee0894f8bb01f1"
-  integrity sha512-Hvhy3iV5dWs0SFTww6sIzyQSSgVzcQuiozhDs11iP+gvFjK7ejg86KZ8wAVvyCi9K3bOMhohsw1Q2b8JSnIxcg==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-2.1.7.tgz#ab815645770f7d2013ac69327975837b4937c8df"
+  integrity sha512-mL95afyEJvg+C2yrTVn7QltfyE9ja1+94+OUkRBbB8PN3N6HvfSL4K/QSqecOLQ38bSQm/6ZGPkBLDkDGhGPdw==
 
 "@tiptap/pm@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/pm/-/pm-2.0.4.tgz#c3df31a29120e1e3334f8f063df23ccb1ace7851"
-  integrity sha512-DNgxntpEaiW7ciW0BTNTL0TFqAreZTrAROWakI4XaYRAyi5H9NfZW8jmwGwMBkoZ1KB3pfy+jT/Bisy4okEQGQ==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/pm/-/pm-2.1.7.tgz#91e1b87d4ddbddca3cfe46e3c052b0072e4e1d97"
+  integrity sha512-RBVb/k9OjmClwdVl7fpekFgUsLAm1U+5I4w1qA2tj7L/hSPOuPzaEHwCqDYe0b2PR5dd8h0nylS9qXuXVlfwfQ==
   dependencies:
     prosemirror-changeset "^2.2.0"
     prosemirror-collab "^1.3.0"
@@ -2424,42 +2397,42 @@
     prosemirror-view "^1.28.2"
 
 "@tiptap/react@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/react/-/react-2.0.4.tgz#b879faeabd67859254d594eafe0f8232f5d78116"
-  integrity sha512-NcrZL4Tu3+1Xfj/us5AOD7+kJhwYo2XViOB2iRRnfwS80PUtiLWDis6o3ngMGot/jBWzaMn4gofXnMWHtFdIAw==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/react/-/react-2.1.7.tgz#0c5a5407bcb398ff75234dd9c7a3f8878d943088"
+  integrity sha512-jCs5z/rXZ7mEOTPcJ+r/OSTtLOGBahS7D3xDu3pRX4P0wtWHlprsdptxxlWjkBHLav01XXJ+OtGZTfhWBio1QQ==
   dependencies:
-    "@tiptap/extension-bubble-menu" "^2.0.4"
-    "@tiptap/extension-floating-menu" "^2.0.4"
+    "@tiptap/extension-bubble-menu" "^2.1.7"
+    "@tiptap/extension-floating-menu" "^2.1.7"
 
 "@tiptap/starter-kit@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-2.0.4.tgz#20456eb4a4ae0ac8d5bf2ac5e9771b3c617c51a6"
-  integrity sha512-9WtVXhujyp5cOlE7qlcQMFr0FEx3Cvo1isvfQGzhKKPzXa3rR7FT8bnOFsten31/Ia/uwvGXAvRDQy24YfHdNA==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-2.1.7.tgz#a33a7928b7051ac9cd89d1798745f9855b7b72d9"
+  integrity sha512-z2cmJRSC7ImaTGWrHv+xws9y1wIG0OCPosBYpmpwlEfA3JG3axWFmVRJlWnsQV4eSMi3QY3vaPgBAnrR4IxRhQ==
   dependencies:
-    "@tiptap/core" "^2.0.4"
-    "@tiptap/extension-blockquote" "^2.0.4"
-    "@tiptap/extension-bold" "^2.0.4"
-    "@tiptap/extension-bullet-list" "^2.0.4"
-    "@tiptap/extension-code" "^2.0.4"
-    "@tiptap/extension-code-block" "^2.0.4"
-    "@tiptap/extension-document" "^2.0.4"
-    "@tiptap/extension-dropcursor" "^2.0.4"
-    "@tiptap/extension-gapcursor" "^2.0.4"
-    "@tiptap/extension-hard-break" "^2.0.4"
-    "@tiptap/extension-heading" "^2.0.4"
-    "@tiptap/extension-history" "^2.0.4"
-    "@tiptap/extension-horizontal-rule" "^2.0.4"
-    "@tiptap/extension-italic" "^2.0.4"
-    "@tiptap/extension-list-item" "^2.0.4"
-    "@tiptap/extension-ordered-list" "^2.0.4"
-    "@tiptap/extension-paragraph" "^2.0.4"
-    "@tiptap/extension-strike" "^2.0.4"
-    "@tiptap/extension-text" "^2.0.4"
+    "@tiptap/core" "^2.1.7"
+    "@tiptap/extension-blockquote" "^2.1.7"
+    "@tiptap/extension-bold" "^2.1.7"
+    "@tiptap/extension-bullet-list" "^2.1.7"
+    "@tiptap/extension-code" "^2.1.7"
+    "@tiptap/extension-code-block" "^2.1.7"
+    "@tiptap/extension-document" "^2.1.7"
+    "@tiptap/extension-dropcursor" "^2.1.7"
+    "@tiptap/extension-gapcursor" "^2.1.7"
+    "@tiptap/extension-hard-break" "^2.1.7"
+    "@tiptap/extension-heading" "^2.1.7"
+    "@tiptap/extension-history" "^2.1.7"
+    "@tiptap/extension-horizontal-rule" "^2.1.7"
+    "@tiptap/extension-italic" "^2.1.7"
+    "@tiptap/extension-list-item" "^2.1.7"
+    "@tiptap/extension-ordered-list" "^2.1.7"
+    "@tiptap/extension-paragraph" "^2.1.7"
+    "@tiptap/extension-strike" "^2.1.7"
+    "@tiptap/extension-text" "^2.1.7"
 
 "@tiptap/suggestion@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/suggestion/-/suggestion-2.0.4.tgz#08e6c47a723200d02238d845cb09684c481f0066"
-  integrity sha512-C5LGGjH8VFET34V7vKkqlwpSzrPl+7oAcj9h+P3jvJQ076iYpmpnMtz6dNLSFGKpHp5mtyl4RoJzh7lTvlfyiA==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@tiptap/suggestion/-/suggestion-2.1.7.tgz#ac88deef2ade8d836ca9084c276cc9d64c6e604a"
+  integrity sha512-FKlXFMWf9rCnNJQsUfeX6WpS2VUs2O98ENkyhfV8ehCB7X5+57mkkxJxl/88SMbjZL+FbWPBKLaiOvsXfIUoww==
 
 "@types/debug@^4.0.0":
   version "4.1.8"
@@ -2522,9 +2495,9 @@
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
 "@types/linkify-it@*":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9"
-  integrity sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.3.tgz#15a0712296c5041733c79efe233ba17ae5a7587b"
+  integrity sha512-pTjcqY9E4nOI55Wgpz7eiI8+LzdYnw3qxXCfHyBDdPbYvbyLgWLJGh8EdPvqawwMK1Uo1794AUkkR38Fr0g+2g==
 
 "@types/lodash.debounce@^4.0.7":
   version "4.0.7"
@@ -2569,9 +2542,9 @@
   integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
 
 "@types/node@*":
-  version "20.5.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.5.0.tgz#7fc8636d5f1aaa3b21e6245e97d56b7f56702313"
-  integrity sha512-Mgq7eCtoTjT89FqNoTzzXg2XvCi5VMhRV6+I2aYanc6kQCBImeNaAYRs/DyoVqk1YEUJK5gN9VO7HRIdz4Wo3Q==
+  version "20.5.7"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.5.7.tgz#4b8ecac87fbefbc92f431d09c30e176fc0a7c377"
+  integrity sha512-dP7f3LdZIysZnmvP3ANJYTSwg+wLLl8p7RqniVlV7j+oXSXAbt9h0WIBFmJy5inWZoX9wZN6eXx+YXd9Rh3RBA==
 
 "@types/node@18.0.6":
   version "18.0.6"
@@ -2662,9 +2635,9 @@
     "@types/react" "*"
 
 "@types/react-redux@^7.1.20":
-  version "7.1.25"
-  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.25.tgz#de841631205b24f9dfb4967dd4a7901e048f9a88"
-  integrity sha512-bAGh4e+w5D8dajd6InASVIyCo4pZLJ66oLb80F9OBLO1gKESbZcRCJpTT6uLXX+HAB57zw1WTdwJdAsewuTweg==
+  version "7.1.26"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.26.tgz#84149f5614e40274bb70fcbe8f7cae6267d548b1"
+  integrity sha512-UKPo7Cm7rswYU6PH6CmTNCRv5NYF3HrgKuHEYTK8g/3czYLrUux50gQ2pkxc9c7ZpQZi+PNhgmI8oNIRoiVIxg==
   dependencies:
     "@types/hoist-non-react-statics" "^3.3.0"
     "@types/react" "*"
@@ -2679,9 +2652,9 @@
     "@types/react" "*"
 
 "@types/react@*", "@types/react@^18.0.17":
-  version "18.2.20"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.20.tgz#1605557a83df5c8a2cc4eeb743b3dfc0eb6aaeb2"
-  integrity sha512-WKNtmsLWJM/3D5mG4U84cysVY31ivmyw85dE84fOCk5Hx78wezB/XEjVPWl2JTZ5FkEeaTJf+VgUAUn3PE7Isw==
+  version "18.2.21"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.21.tgz#774c37fd01b522d0b91aed04811b58e4e0514ed9"
+  integrity sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -2725,9 +2698,9 @@
   integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
 
 "@types/semver@^7.3.12":
-  version "7.5.0"
-  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.0.tgz#591c1ce3a702c45ee15f47a42ade72c2fd78978a"
-  integrity sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.1.tgz#0480eeb7221eb9bc398ad7432c9d7e14b1a5a367"
+  integrity sha512-cJRQXpObxfNKkFAZbJl2yjWtJCqELQIdShsogr1d2MilP8dKD9TE/nEKHkJgUNHdGKCQaf9HbIynuV2csLGVLg==
 
 "@types/throttle-debounce@^2.1.0":
   version "2.1.0"
@@ -2740,9 +2713,9 @@
   integrity sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==
 
 "@types/unist@^2", "@types/unist@^2.0.0":
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.7.tgz#5b06ad6894b236a1d2bd6b2f07850ca5c59cf4d6"
-  integrity sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.8.tgz#bb197b9639aa1a04cf464a617fe800cccd92ad5c"
+  integrity sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw==
 
 "@types/uuid@^8.3.4":
   version "8.3.4"
@@ -2750,9 +2723,9 @@
   integrity sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==
 
 "@types/uuid@^9.0.1":
-  version "9.0.2"
-  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.2.tgz#ede1d1b1e451548d44919dc226253e32a6952c4b"
-  integrity sha512-kNnC1GFBLuhImSnV7w4njQkUiJi0ZXUycu1rUaouPqiKlXkh77JKgdRnTAp1x5eBwcIwbtI+3otwzuIDEuDoxQ==
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.3.tgz#6cdd939b4316b4f81625de9f06028d848c4a1533"
+  integrity sha512-taHQQH/3ZyI3zP8M/puluDEIEvtQHVYcC6y3N8ijFtAd28+Ey/G4sg1u2gB01S8MwybLOKAp9/yCMu/uR5l3Ug==
 
 "@typescript-eslint/eslint-plugin@^5.48.2", "@typescript-eslint/eslint-plugin@^5.51.0":
   version "5.62.0"
@@ -2990,15 +2963,15 @@ array-uniq@^1.0.1:
   integrity sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==
 
 array.prototype.findlastindex@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.2.tgz#bc229aef98f6bd0533a2bc61ff95209875526c9b"
-  integrity sha512-tb5thFFlUcp7NdNF6/MpDk/1r/4awWG1FIz3YqDf+/zJSTezBb+/5WViH41obXULHVpDzoiCLpJ/ZO9YbJMsdw==
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz#b37598438f97b579166940814e2c0493a4f50207"
+  integrity sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
-    get-intrinsic "^1.1.3"
+    get-intrinsic "^1.2.1"
 
 array.prototype.flat@^1.3.1:
   version "1.3.1"
@@ -3058,6 +3031,13 @@ async@^3.2.3:
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
   integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
 
+asynciterator.prototype@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/asynciterator.prototype/-/asynciterator.prototype-1.0.0.tgz#8c5df0514936cdd133604dfcc9d3fb93f09b2b62"
+  integrity sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==
+  dependencies:
+    has-symbols "^1.0.3"
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -3096,9 +3076,9 @@ axe-core@^4.6.2:
   integrity sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==
 
 axios@^1.1.3, axios@^1.3.4:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f"
-  integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.5.0.tgz#f02e4af823e2e46a9768cfc74691fdd0517ea267"
+  integrity sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==
   dependencies:
     follow-redirects "^1.15.0"
     form-data "^4.0.0"
@@ -3243,13 +3223,6 @@ builtin-modules@^3.1.0:
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
   integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==
 
-busboy@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
-  integrity sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==
-  dependencies:
-    streamsearch "^1.1.0"
-
 call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
@@ -3277,9 +3250,9 @@ camelcase-css@^2.0.1:
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
 caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517, caniuse-lite@^1.0.30001520:
-  version "1.0.30001520"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz#62e2b7a1c7b35269594cf296a80bdf8cb9565006"
-  integrity sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==
+  version "1.0.30001525"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001525.tgz#d2e8fdec6116ffa36284ca2c33ef6d53612fe1c8"
+  integrity sha512-/3z+wB4icFt3r0USMwxujAqRvaD/B7rvGTsKhbhSQErVrJvkZCLhgNLJxU8MevahQVH6hCU9FsHdNUFbiwmE7Q==
 
 capital-case@^1.0.4:
   version "1.0.4"
@@ -3375,7 +3348,7 @@ clean-webpack-plugin@^4.0.0:
   dependencies:
     del "^4.1.1"
 
-client-only@0.0.1, client-only@^0.0.1:
+client-only@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
@@ -3500,11 +3473,11 @@ cookie@^0.5.0:
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
 core-js-compat@^3.31.0:
-  version "3.32.0"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.32.0.tgz#f41574b6893ab15ddb0ac1693681bd56c8550a90"
-  integrity sha512-7a9a3D1k4UCVKnLhrgALyFcP7YCsLOQIxPd0dKjf/6GuPcgyiGP70ewWdCGrSK7evyhymi0qO4EqCmSJofDeYw==
+  version "3.32.1"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.32.1.tgz#55f9a7d297c0761a8eb1d31b593e0f5b6ffae964"
+  integrity sha512-GSvKDv4wE0bPnQtjklV101juQ85g6H3rm5PDP20mqlS5j0kXF3pP97YvAu5hl+uFHqMictp3b2VxOHljWMAtuA==
   dependencies:
-    browserslist "^4.21.9"
+    browserslist "^4.21.10"
 
 cosmiconfig@^7.0.0:
   version "7.1.0"
@@ -3847,9 +3820,9 @@ ejs@^3.1.6:
     jake "^10.8.5"
 
 electron-to-chromium@^1.4.477:
-  version "1.4.490"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.490.tgz#d99286f6e915667fa18ea4554def1aa60eb4d5f1"
-  integrity sha512-6s7NVJz+sATdYnIwhdshx/N/9O6rvMxmhVoDSDFdj6iA45gHR8EQje70+RYsF4GeB+k0IeNSBnP7yG9ZXJFr7A==
+  version "1.4.508"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.508.tgz#5641ff2f5ba11df4bd960fe6a2f9f70aa8b9af96"
+  integrity sha512-FFa8QKjQK/A5QuFr2167myhMesGrhlOBD+3cYNxO9/S4XzHEXesyTD/1/xF644gC8buFPz3ca6G1LOQD0tZrrg==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -3901,7 +3874,7 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.19.0, es-abstract@^1.20.4, es-abstract@^1.21.2:
+es-abstract@^1.20.4, es-abstract@^1.22.1:
   version "1.22.1"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.1.tgz#8b4e5fc5cefd7f1660f0f8e1a52900dfbc9d9ccc"
   integrity sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==
@@ -3946,6 +3919,26 @@ es-abstract@^1.19.0, es-abstract@^1.20.4, es-abstract@^1.21.2:
     unbox-primitive "^1.0.2"
     which-typed-array "^1.1.10"
 
+es-iterator-helpers@^1.0.12:
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.14.tgz#19cd7903697d97e21198f3293b55e8985791c365"
+  integrity sha512-JgtVnwiuoRuzLvqelrvN3Xu7H9bu2ap/kQ2CrM62iidP8SKuD99rWU3CJy++s7IVL2qb/AjXPGR/E7i9ngd/Cw==
+  dependencies:
+    asynciterator.prototype "^1.0.0"
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    es-set-tostringtag "^2.0.1"
+    function-bind "^1.1.1"
+    get-intrinsic "^1.2.1"
+    globalthis "^1.0.3"
+    has-property-descriptors "^1.0.0"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.5"
+    iterator.prototype "^1.1.0"
+    safe-array-concat "^1.0.0"
+
 es-set-tostringtag@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
@@ -4037,11 +4030,11 @@ eslint-config-prettier@^8.3.0:
   integrity sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==
 
 eslint-config-turbo@latest:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/eslint-config-turbo/-/eslint-config-turbo-1.10.12.tgz#5868252d6833dd2b5cab4414751ed31ebe2177c3"
-  integrity sha512-z3jfh+D7UGYlzMWGh+Kqz++hf8LOE96q3o5R8X4HTjmxaBWlLAWG+0Ounr38h+JLR2TJno0hU9zfzoPNkR9BdA==
+  version "1.10.13"
+  resolved "https://registry.yarnpkg.com/eslint-config-turbo/-/eslint-config-turbo-1.10.13.tgz#3743def3c76e27c3969c16222137f5bd913a10e2"
+  integrity sha512-Ffa0SxkRCPMtfUX/HDanEqsWoLwZTQTAXO9W4IsOtycb2MzJDrVcLmoFW5sMwCrg7gjqbrC4ZJoD+1SPPzIVqg==
   dependencies:
-    eslint-plugin-turbo "1.10.12"
+    eslint-plugin-turbo "1.10.13"
 
 eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.7:
   version "0.3.9"
@@ -4084,9 +4077,9 @@ eslint-module-utils@^2.7.4, eslint-module-utils@^2.8.0:
     debug "^3.2.7"
 
 eslint-plugin-import@^2.26.0:
-  version "2.28.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.28.0.tgz#8d66d6925117b06c4018d491ae84469eb3cb1005"
-  integrity sha512-B8s/n+ZluN7sxj9eUf7/pRFERX0r5bnFA2dCaLHy2ZeaQEAz0k+ZZkFWRFHJAqxfxQDx6KLv9LeIki7cFdwW+Q==
+  version "2.28.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.28.1.tgz#63b8b5b3c409bfc75ebaf8fb206b07ab435482c4"
+  integrity sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==
   dependencies:
     array-includes "^3.1.6"
     array.prototype.findlastindex "^1.2.2"
@@ -4097,13 +4090,12 @@ eslint-plugin-import@^2.26.0:
     eslint-import-resolver-node "^0.3.7"
     eslint-module-utils "^2.8.0"
     has "^1.0.3"
-    is-core-module "^2.12.1"
+    is-core-module "^2.13.0"
     is-glob "^4.0.3"
     minimatch "^3.1.2"
     object.fromentries "^2.0.6"
     object.groupby "^1.0.0"
     object.values "^1.1.6"
-    resolve "^1.22.3"
     semver "^6.3.1"
     tsconfig-paths "^3.14.2"
 
@@ -4155,14 +4147,15 @@ eslint-plugin-react@7.31.8:
     string.prototype.matchall "^4.0.7"
 
 eslint-plugin-react@^7.29.4, eslint-plugin-react@^7.31.7:
-  version "7.33.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.1.tgz#bc27cccf860ae45413a4a4150bf0977345c1ceab"
-  integrity sha512-L093k0WAMvr6VhNwReB8VgOq5s2LesZmrpPdKz/kZElQDzqS7G7+DnKoqT+w4JwuiGeAhAvHO0fvy0Eyk4ejDA==
+  version "7.33.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz#69ee09443ffc583927eafe86ffebb470ee737608"
+  integrity sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==
   dependencies:
     array-includes "^3.1.6"
     array.prototype.flatmap "^1.3.1"
     array.prototype.tosorted "^1.1.1"
     doctrine "^2.1.0"
+    es-iterator-helpers "^1.0.12"
     estraverse "^5.3.0"
     jsx-ast-utils "^2.4.1 || ^3.0.0"
     minimatch "^3.1.2"
@@ -4175,10 +4168,10 @@ eslint-plugin-react@^7.29.4, eslint-plugin-react@^7.31.7:
     semver "^6.3.1"
     string.prototype.matchall "^4.0.8"
 
-eslint-plugin-turbo@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-turbo/-/eslint-plugin-turbo-1.10.12.tgz#3f95884faf35b56e0855d939585fa6cd457bb128"
-  integrity sha512-uNbdj+ohZaYo4tFJ6dStRXu2FZigwulR1b3URPXe0Q8YaE7thuekKNP+54CHtZPH9Zey9dmDx5btAQl9mfzGOw==
+eslint-plugin-turbo@1.10.13:
+  version "1.10.13"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-turbo/-/eslint-plugin-turbo-1.10.13.tgz#d2c14c7e733ee1462c94d79dce29d75f42ced275"
+  integrity sha512-el4AAmn0zXmvHEyp1h0IQMfse10Vy8g5Vbg4IU3+vD9CSj5sDbX07iFVt8sCKg7og9Q5FAa9mXzlCf7t4vYgzg==
   dependencies:
     dotenv "16.0.3"
 
@@ -4319,14 +4312,14 @@ eslint@^7.23.0, eslint@^7.32.0:
     v8-compile-cache "^2.0.3"
 
 eslint@^8.31.0:
-  version "8.47.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.47.0.tgz#c95f9b935463fb4fad7005e626c7621052e90806"
-  integrity sha512-spUQWrdPt+pRVP1TTJLmfRNJJHHZryFmptzcafwSvHsceV81djHOdnEeDmkdotZyLNjDhrOasNK8nikkoG1O8Q==
+  version "8.48.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.48.0.tgz#bf9998ba520063907ba7bfe4c480dc8be03c2155"
+  integrity sha512-sb6DLeIuRXxeM1YljSe1KEx9/YYeZFQWcV8Rq9HfigmdDEugjLEVEa1ozDjL6YDjBpQHPJxJzze+alxi4T3OLg==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@eslint-community/regexpp" "^4.6.1"
     "@eslint/eslintrc" "^2.1.2"
-    "@eslint/js" "^8.47.0"
+    "@eslint/js" "8.48.0"
     "@humanwhocodes/config-array" "^0.11.10"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@nodelib/fs.walk" "^1.2.8"
@@ -4439,9 +4432,9 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
 fast-fifo@^1.1.0, fast-fifo@^1.2.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.0.tgz#03e381bcbfb29932d7c3afde6e15e83e05ab4d8b"
-  integrity sha512-IgfweLvEpwyA4WgiQe9Nx6VV2QkML2NkvZnk1oKnIzXgXdWxuhF7zw4DvLTPZJn6PIUneiAXPF24QmoEqHTjyw==
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.2.tgz#286e31de96eb96d38a97899815740ba2a4f3640c"
+  integrity sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==
 
 fast-glob@^3.2.12, fast-glob@^3.2.9, fast-glob@^3.3.1:
   version "3.3.1"
@@ -4537,14 +4530,15 @@ find-up@^5.0.0:
     path-exists "^4.0.0"
 
 flat-cache@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
-  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.1.0.tgz#0e54ab4a1a60fe87e2946b6b00657f1c99e1af3f"
+  integrity sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==
   dependencies:
-    flatted "^3.1.0"
+    flatted "^3.2.7"
+    keyv "^4.5.3"
     rimraf "^3.0.2"
 
-flatted@^3.1.0:
+flatted@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
@@ -4576,9 +4570,9 @@ format@^0.2.0:
   integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
 
 fraction.js@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
-  integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.4.tgz#b2bac8249a610c3396106da97c5a71da75b94b1c"
+  integrity sha512-pwiTgt0Q7t+GHZA4yaLjObx4vXmmdcS0iSJ19o8d/goUGgItX9UZWKWNnLHehxviD8wU2IWRsnR8cD5+yOJP2Q==
 
 framework-utils@^1.1.0:
   version "1.1.0"
@@ -4606,9 +4600,9 @@ fs.realpath@^1.0.0:
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
 fsevents@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
 function-bind@^1.1.1:
   version "1.1.1"
@@ -4616,21 +4610,21 @@ function-bind@^1.1.1:
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
 function.prototype.name@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
-  integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd"
+  integrity sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.0"
-    functions-have-names "^1.2.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    functions-have-names "^1.2.3"
 
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==
 
-functions-have-names@^1.2.2, functions-have-names@^1.2.3:
+functions-have-names@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
@@ -4702,11 +4696,6 @@ glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
-glob-to-regexp@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
-  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
-
 glob@7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
@@ -4803,7 +4792,7 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
-graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
+graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -4963,7 +4952,7 @@ inline-style-parser@0.1.1:
   resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
   integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
 
-internal-slot@^1.0.3, internal-slot@^1.0.5:
+internal-slot@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.5.tgz#f2a2ee21f668f8627a4667f309dc0f4fb6674986"
   integrity sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==
@@ -5011,6 +5000,13 @@ is-arrayish@^0.3.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
   integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
 
+is-async-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646"
+  integrity sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
 is-bigint@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
@@ -5043,14 +5039,14 @@ is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
 
-is-core-module@^2.11.0, is-core-module@^2.12.1, is-core-module@^2.13.0, is-core-module@^2.9.0:
+is-core-module@^2.11.0, is-core-module@^2.13.0, is-core-module@^2.9.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.0.tgz#bb52aa6e2cbd49a30c2ba68c42bf3435ba6072db"
   integrity sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==
   dependencies:
     has "^1.0.3"
 
-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
   integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
@@ -5069,11 +5065,25 @@ is-extglob@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
+is-finalizationregistry@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz#c8749b65f17c133313e661b1289b95ad3dbd62e6"
+  integrity sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==
+  dependencies:
+    call-bind "^1.0.2"
+
 is-fullwidth-code-point@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+is-generator-function@^1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72"
+  integrity sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
@@ -5081,6 +5091,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-map@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
+  integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -5164,6 +5179,11 @@ is-regexp@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
   integrity sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==
 
+is-set@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
+  integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
+
 is-shared-array-buffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
@@ -5197,6 +5217,11 @@ is-typed-array@^1.1.10, is-typed-array@^1.1.9:
   dependencies:
     which-typed-array "^1.1.11"
 
+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
 is-weakref@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
@@ -5204,6 +5229,14 @@ is-weakref@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-weakset@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.2.tgz#4569d67a747a1ce5a994dfd4ef6dcea76e7c0a1d"
+  integrity sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
 isarray@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
@@ -5219,6 +5252,16 @@ isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
 
+iterator.prototype@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.1.tgz#ab5b790e23ec00658f5974e032a2b05188bd3a5c"
+  integrity sha512-9E+nePc8C9cnQldmNl6bgpTY6zI4OPRZd97fhJ/iVZ1GifIUDVV5F6x1nEDqpe8KaMEZGT4xgrwKQDxXnjOIZQ==
+  dependencies:
+    define-properties "^1.2.0"
+    get-intrinsic "^1.2.1"
+    has-symbols "^1.0.3"
+    reflect.getprototypeof "^1.0.3"
+
 jake@^10.8.5:
   version "10.8.7"
   resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.7.tgz#63a32821177940c33f356e0ba44ff9d34e1c7d8f"
@@ -5248,9 +5291,9 @@ jest-worker@^27.4.5:
     supports-color "^8.0.0"
 
 jiti@^1.18.2:
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.19.1.tgz#fa99e4b76a23053e0e7cde098efe1704a14c16f1"
-  integrity sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==
+  version "1.19.3"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.19.3.tgz#ef554f76465b3c2b222dc077834a71f0d4a37569"
+  integrity sha512-5eEbBDQT/jF1xg6l36P+mWGGoH9Spuy0PCdSr2dtWRDGC6ph/w9ZCL4lmESW8f8F7MwT3XKescfP0wnZWAKL9w==
 
 js-cookie@^3.0.1:
   version "3.0.5"
@@ -5292,6 +5335,11 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
 
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
 json-parse-even-better-errors@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
@@ -5324,7 +5372,7 @@ json5@^1.0.2:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2, json5@^2.2.0, json5@^2.2.2:
+json5@^2.1.2, json5@^2.2.0, json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -5368,6 +5416,13 @@ keycon@^1.2.0:
     "@scena/event-emitter" "^1.0.2"
     keycode "^2.2.0"
 
+keyv@^4.5.3:
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.3.tgz#00873d2b046df737963157bd04f294ca818c9c25"
+  integrity sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==
+  dependencies:
+    json-buffer "3.0.1"
+
 kleur@^4.0.3:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
@@ -5910,16 +5965,16 @@ mkdirp@^0.5.5:
     minimist "^1.2.6"
 
 mobx-react-lite@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-4.0.3.tgz#f7aa5ac3be558ca19a53b2929d9599679769c2a8"
-  integrity sha512-wEE1oT5zvDdvplG4HnRrFgPwg5GFVVrEtl42Er85k23zeu3om8H8wbDPgdbQP88zAihVsik6xJfw6VnzUl8fQw==
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-4.0.4.tgz#eee3c55dfa6841365d5a7764971c456db12570fb"
+  integrity sha512-68uNYvQC/5Dazs3sIBv+bnpzRwcWde8y4ujHiLizhq8yeQtJ2tlNUGSh4r40gyE5M0utACIofBDsAj2hplcovQ==
   dependencies:
     use-sync-external-store "^1.2.0"
 
 mobx@^6.10.0:
-  version "6.10.0"
-  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.10.0.tgz#3537680fe98d45232cc19cc8f76280bd8bb6b0b7"
-  integrity sha512-WMbVpCMFtolbB8swQ5E2YRrU+Yu8iLozCVx3CdGjbBKlP7dFiCSuiG06uea3JCFN5DnvtAX7+G5Bp82e2xu0ww==
+  version "6.10.2"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.10.2.tgz#96e123deef140750360ca9a5b02a8b91fbffd4d9"
+  integrity sha512-B1UGC3ieK3boCjnMEcZSwxqRDMdzX65H/8zOHbuTY8ZhvrIjTUoLRR2TP2bPqIgYRfb3+dUigu8yMZufNjn0LQ==
 
 mri@^1.1.0:
   version "1.2.0"
@@ -5977,6 +6032,11 @@ next-pwa@^5.6.0:
     workbox-webpack-plugin "^6.5.4"
     workbox-window "^6.5.4"
 
+next-theme@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/next-theme/-/next-theme-0.1.5.tgz#aa6655c516892925e577349d7715a8ed54bad727"
+  integrity sha512-WR8UCLEFjWvRl+UO2lTM4pGo7R4jzGZqQ6YL3hiL1Ns587Qb91GhJZLPu/Aa4ExtGQ/5wlcDX8zDYZoCN9oDPw==
+
 next-themes@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45"
@@ -6008,30 +6068,6 @@ next@12.3.2:
     "@next/swc-win32-ia32-msvc" "12.3.2"
     "@next/swc-win32-x64-msvc" "12.3.2"
 
-next@^13.4.16:
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/next/-/next-13.4.16.tgz#327ef6885b22161ed001cd5943c20b5e409a9406"
-  integrity sha512-1xaA/5DrfpPu0eV31Iro7JfPeqO8uxQWb1zYNTe+KDKdzqkAGapLcDYHMLNKXKB7lHjZ7LfKUOf9dyuzcibrhA==
-  dependencies:
-    "@next/env" "13.4.16"
-    "@swc/helpers" "0.5.1"
-    busboy "1.6.0"
-    caniuse-lite "^1.0.30001406"
-    postcss "8.4.14"
-    styled-jsx "5.1.1"
-    watchpack "2.4.0"
-    zod "3.21.4"
-  optionalDependencies:
-    "@next/swc-darwin-arm64" "13.4.16"
-    "@next/swc-darwin-x64" "13.4.16"
-    "@next/swc-linux-arm64-gnu" "13.4.16"
-    "@next/swc-linux-arm64-musl" "13.4.16"
-    "@next/swc-linux-x64-gnu" "13.4.16"
-    "@next/swc-linux-x64-musl" "13.4.16"
-    "@next/swc-win32-arm64-msvc" "13.4.16"
-    "@next/swc-win32-ia32-msvc" "13.4.16"
-    "@next/swc-win32-x64-msvc" "13.4.16"
-
 no-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
@@ -6041,9 +6077,9 @@ no-case@^3.0.4:
     tslib "^2.0.3"
 
 node-abi@^3.3.0:
-  version "3.45.0"
-  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.45.0.tgz#f568f163a3bfca5aacfce1fbeee1fa2cc98441f5"
-  integrity sha512-iwXuFrMAcFVi/ZoZiqq8BzAdsLw9kxDfTC0HMyjXfSL/6CSDAGD5UmR7azrAgWV1zKYq7dUUMj4owusBWKLsiQ==
+  version "3.47.0"
+  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.47.0.tgz#6cbfa2916805ae25c2b7156ca640131632eb05e8"
+  integrity sha512-2s6B2CWZM//kPgwnuI0KrYwNjfdByE25zvAaEpq9IH4zcNsarH8Ihu/UuX6XMPEogDAxkuUFeZn60pXNHAqn3A==
   dependencies:
     semver "^7.3.5"
 
@@ -6053,9 +6089,9 @@ node-addon-api@^6.1.0:
   integrity sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==
 
 node-fetch@^2.6.7:
-  version "2.6.12"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.12.tgz#02eb8e22074018e3d5a83016649d04df0e348fba"
-  integrity sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
+  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
   dependencies:
     whatwg-url "^5.0.0"
 
@@ -6123,40 +6159,40 @@ object.assign@^4.1.4:
     object-keys "^1.1.1"
 
 object.entries@^1.1.5, object.entries@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.6.tgz#9737d0e5b8291edd340a3e3264bb8a3b00d5fa23"
-  integrity sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
-
-object.fromentries@^2.0.5, object.fromentries@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.6.tgz#cdb04da08c539cffa912dcd368b886e0904bfa73"
-  integrity sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
-
-object.groupby@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.0.tgz#cb29259cf90f37e7bac6437686c1ea8c916d12a9"
-  integrity sha512-70MWG6NfRH9GnbZOikuhPPYzpUpof9iW2J9E4dW7FXTqPNb6rllE6u39SKwwiNh8lCwX3DDb5OgcKGiEBrTTyw==
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.7.tgz#2b47760e2a2e3a752f39dd874655c61a7f03c131"
+  integrity sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.2.0"
-    es-abstract "^1.21.2"
+    es-abstract "^1.22.1"
+
+object.fromentries@^2.0.5, object.fromentries@^2.0.6:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.7.tgz#71e95f441e9a0ea6baf682ecaaf37fa2a8d7e616"
+  integrity sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+
+object.groupby@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.1.tgz#d41d9f3c8d6c778d9cbac86b4ee9f5af103152ee"
+  integrity sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
     get-intrinsic "^1.2.1"
 
 object.hasown@^1.1.1, object.hasown@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.2.tgz#f919e21fad4eb38a57bc6345b3afd496515c3f92"
-  integrity sha512-B5UIT3J1W+WuWIU55h0mjlwaqxiE5vYENJXIXZ4VFe05pNYrkKuK0U/6aFcb0pKywYJh7IhfoqUfKVmrJJHZHw==
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.3.tgz#6a5f2897bb4d3668b8e79364f98ccf971bda55ae"
+  integrity sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==
   dependencies:
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
 object.omit@^3.0.0:
   version "3.0.0"
@@ -6173,13 +6209,13 @@ object.pick@^1.3.0:
     isobject "^3.0.1"
 
 object.values@^1.1.5, object.values@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.6.tgz#4abbaa71eba47d63589d402856f908243eea9b1d"
-  integrity sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.7.tgz#617ed13272e7e1071b43973aa1655d9291b8442a"
+  integrity sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
@@ -6432,9 +6468,9 @@ postcss@8.4.14:
     source-map-js "^1.0.2"
 
 postcss@^8.4.14, postcss@^8.4.21, postcss@^8.4.23:
-  version "8.4.27"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.27.tgz#234d7e4b72e34ba5a92c29636734349e0d9c3057"
-  integrity sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==
+  version "8.4.29"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.29.tgz#33bc121cf3b3688d4ddef50be869b2a54185a1dd"
+  integrity sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==
   dependencies:
     nanoid "^3.3.6"
     picocolors "^1.0.0"
@@ -6469,9 +6505,9 @@ prettier@^2.8.7:
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
 prettier@latest:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.1.tgz#65271fc9320ce4913c57747a70ce635b30beaa40"
-  integrity sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643"
+  integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==
 
 pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   version "5.6.0"
@@ -6574,23 +6610,16 @@ prosemirror-markdown@^1.10.1, prosemirror-markdown@^1.11.1:
     prosemirror-model "^1.0.0"
 
 prosemirror-menu@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/prosemirror-menu/-/prosemirror-menu-1.2.2.tgz#c545a2de0b8cb79babc07682b1d93de0f273aa33"
-  integrity sha512-437HIWTq4F9cTX+kPfqZWWm+luJm95Aut/mLUy+9OMrOml0bmWDS26ceC6SNfb2/S94et1sZ186vLO7pDHzxSw==
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-menu/-/prosemirror-menu-1.2.4.tgz#3cfdc7c06d10f9fbd1bce29082c498bd11a0a79a"
+  integrity sha512-S/bXlc0ODQup6aiBbWVsX/eM+xJgCTAfMq/nLqaO5ID/am4wS0tTCIkzwytmao7ypEtjj39i7YbJjAgO20mIqA==
   dependencies:
     crelt "^1.0.0"
     prosemirror-commands "^1.0.0"
     prosemirror-history "^1.0.0"
     prosemirror-state "^1.0.0"
 
-prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.18.1, prosemirror-model@^1.8.1:
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.18.1.tgz#1d5d6b6de7b983ee67a479dc607165fdef3935bd"
-  integrity sha512-IxSVBKAEMjD7s3n8cgtwMlxAXZrC7Mlag7zYsAKDndAqnDScvSmp/UdnRTV/B33lTCVU3CCm7dyAn/rVVD0mcw==
-  dependencies:
-    orderedmap "^2.0.0"
-
-prosemirror-model@^1.19.0:
+prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.18.1, prosemirror-model@^1.19.0, prosemirror-model@^1.8.1:
   version "1.19.3"
   resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.19.3.tgz#f0d55285487fefd962d0ac695f716f4ec6705006"
   integrity sha512-tgSnwN7BS7/UM0sSARcW+IQryx2vODKX4MI7xpqY2X+iaepJdKBPc7I4aACIsDV/LTaTjt12Z56MhDr9LsyuZQ==
@@ -6643,9 +6672,9 @@ prosemirror-trailing-node@^2.0.2:
     escape-string-regexp "^4.0.0"
 
 prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.2.1, prosemirror-transform@^1.7.0, prosemirror-transform@^1.7.3:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.7.4.tgz#ea878c90563f3586064dd5ccf6cabb50b2753fd9"
-  integrity sha512-GO38mvqJ2yeI0BbL5E1CdHcly032Dlfn9nHqlnCHqlNf9e9jZwJixxp6VRtOeDZ1uTDpDIziezMKbA41LpAx3A==
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.7.5.tgz#c62aac8645bd4f8cf447d6d53dda80abe8489f03"
+  integrity sha512-U/fWB6frEzY7dzwJUo+ir8dU1JEanaI/RwL12Imy9js/527N0v/IRUKewocP1kTq998JNT18IGtThaDLwLOBxQ==
   dependencies:
     prosemirror-model "^1.0.0"
 
@@ -6968,6 +6997,18 @@ redux@^4.0.0, redux@^4.0.4:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
+reflect.getprototypeof@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz#aaccbf41aca3821b87bb71d9dcbc7ad0ba50a3f3"
+  integrity sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    get-intrinsic "^1.2.1"
+    globalthis "^1.0.3"
+    which-builtin-type "^1.1.3"
+
 regenerate-unicode-properties@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
@@ -6992,7 +7033,7 @@ regenerator-transform@^0.15.2:
   dependencies:
     "@babel/runtime" "^7.8.4"
 
-regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.4.3, regexp.prototype.flags@^1.5.0:
+regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz#fe7ce25e7e4cca8db37b6634c8a2c7009199b9cb"
   integrity sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==
@@ -7059,7 +7100,7 @@ resolve-pkg-maps@^1.0.0:
   resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f"
   integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
 
-resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.0, resolve@^1.22.2, resolve@^1.22.3, resolve@^1.22.4:
+resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.0, resolve@^1.22.2, resolve@^1.22.4:
   version "1.22.4"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34"
   integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==
@@ -7240,9 +7281,9 @@ serialize-javascript@^6.0.1:
     randombytes "^2.1.0"
 
 sharp@^0.32.1:
-  version "0.32.4"
-  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.32.4.tgz#0354653b7924f2520b2264ac9bcd10a58bf411b6"
-  integrity sha512-exUnZewqVZC6UXqXuQ8fyJJv0M968feBi04jb9GcUHrWtkRoAKnbJt8IfwT4NJs7FskArbJ14JAFGVuooszoGg==
+  version "0.32.5"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.32.5.tgz#9ddc78ead6446094f51e50355a2d4ec6e7220cd4"
+  integrity sha512-0dap3iysgDkNaPOaOL4X/0akdu0ma62GcdC2NBQ+93eqpePdDdr2/LM0sFdDSMmN7yS+odyZtPsb7tx/cYBKnQ==
   dependencies:
     color "^4.2.3"
     detect-libc "^2.0.2"
@@ -7379,11 +7420,6 @@ stacktrace-parser@^0.1.10:
   dependencies:
     type-fest "^0.7.1"
 
-streamsearch@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
-  integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
-
 streamx@^2.15.0:
   version "2.15.1"
   resolved "https://registry.yarnpkg.com/streamx/-/streamx-2.15.1.tgz#396ad286d8bc3eeef8f5cea3f029e81237c024c6"
@@ -7402,17 +7438,17 @@ string-width@^4.2.3:
     strip-ansi "^6.0.1"
 
 string.prototype.matchall@^4.0.6, string.prototype.matchall@^4.0.7, string.prototype.matchall@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz#3bf85722021816dcd1bf38bb714915887ca79fd3"
-  integrity sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.9.tgz#148779de0f75d36b13b15885fec5cadde994520d"
+  integrity sha512-6i5hL3MqG/K2G43mWXWgP+qizFW/QH/7kCNN13JrJS5q48FN5IKksLDscexKP3dnmB6cdm9jlNgAsWNLpSykmA==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
-    get-intrinsic "^1.1.3"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    get-intrinsic "^1.2.1"
     has-symbols "^1.0.3"
-    internal-slot "^1.0.3"
-    regexp.prototype.flags "^1.4.3"
+    internal-slot "^1.0.5"
+    regexp.prototype.flags "^1.5.0"
     side-channel "^1.0.4"
 
 string.prototype.trim@^1.2.7:
@@ -7497,13 +7533,6 @@ styled-jsx@5.0.7:
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.7.tgz#be44afc53771b983769ac654d355ca8d019dff48"
   integrity sha512-b3sUzamS086YLRuvnaDigdAewz1/EFYlHpYBP5mZovKEdQQOIIYq8lApylub3HHZ6xFjV051kkGU7cudJmrXEA==
 
-styled-jsx@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f"
-  integrity sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==
-  dependencies:
-    client-only "0.0.1"
-
 stylis@4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
@@ -7548,10 +7577,10 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-swr@^2.1.3:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.1.tgz#19b89a9034a62a73c30dbf06857a0a31981cd60a"
-  integrity sha512-KJVA7dGtOBeZ+2sycEuzUfVIP5lZ/cd0xjevv85n2YG0x1uHJQicjAtahVZL6xG3+TjqhbBqimwYzVo3saeVXQ==
+swr@^2.1.3, swr@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.2.tgz#abcb1f9c97e10527789884169d58b878472d4c98"
+  integrity sha512-CbR41AoMD4TQBQw9ic3GTXspgfM9Y8Mdhb5Ob4uIKXhWqnRLItwA5fpGvB7SmSw3+zEjb0PdhiEumtUvYoQ+bQ==
   dependencies:
     client-only "^0.0.1"
     use-sync-external-store "^1.2.0"
@@ -7573,9 +7602,9 @@ tailwind-merge@^1.14.0:
   integrity sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==
 
 tailwindcss-animate@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.6.tgz#c7195037481552cc47962ea50113830360fd0c28"
-  integrity sha512-4WigSGMvbl3gCCact62ZvOngA+PRqhAn7si3TQ3/ZuPuQZcIEtVap+ENSXbzWhpojKB8CpvnIsrwBu8/RnHtuw==
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"
+  integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==
 
 tailwindcss@^3.1.6, tailwindcss@^3.2.7:
   version "3.3.3"
@@ -7676,9 +7705,9 @@ terser-webpack-plugin@^5.3.3:
     terser "^5.16.8"
 
 terser@^5.0.0, terser@^5.16.8:
-  version "5.19.2"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.19.2.tgz#bdb8017a9a4a8de4663a7983f45c506534f9234e"
-  integrity sha512-qC5+dmecKJA4cpYxRa5aVkKehYsQKc+AHeKl0Oe62aYjBL8ZA33tTljktDHJSaxxMnbI5ZYw+o/S2DxxLu8OfA==
+  version "5.19.3"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.19.3.tgz#359baeba615aef13db4b8c4d77a2aa0d8814aa9e"
+  integrity sha512-pQzJ9UJzM0IgmT4FAtYI6+VqFf0lj/to58AV0Xfgg0Up37RyPG7Al+1cepC6/BVuAxR9oNb41/DL4DEoHJvTdg==
   dependencies:
     "@jridgewell/source-map" "^0.3.3"
     acorn "^8.8.2"
@@ -7796,9 +7825,9 @@ tslib@^1.8.1:
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
 tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0, "tslib@^2.4.1 || ^1.9.3":
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.1.tgz#fd8c9a0ff42590b25703c0acb3de3d3f4ede0410"
-  integrity sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
 tslib@~2.5.0:
   version "2.5.3"
@@ -7819,47 +7848,47 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
-turbo-darwin-64@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.10.12.tgz#a3d9d6bd3436e795254865bc3d76a9c79aff8085"
-  integrity sha512-vmDfGVPl5/aFenAbOj3eOx3ePNcWVUyZwYr7taRl0ZBbmv2TzjRiFotO4vrKCiTVnbqjQqAFQWY2ugbqCI1kOQ==
+turbo-darwin-64@1.10.13:
+  version "1.10.13"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.10.13.tgz#7abc33838bf74c7e7ba2955cb6acc40342d6964c"
+  integrity sha512-vmngGfa2dlYvX7UFVncsNDMuT4X2KPyPJ2Jj+xvf5nvQnZR/3IeDEGleGVuMi/hRzdinoxwXqgk9flEmAYp0Xw==
 
-turbo-darwin-arm64@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.10.12.tgz#ff1d9466935687ca68c0dee88a909c34cc654357"
-  integrity sha512-3JliEESLNX2s7g54SOBqqkqJ7UhcOGkS0ywMr5SNuvF6kWVTbuUq7uBU/sVbGq8RwvK1ONlhPvJne5MUqBCTCQ==
+turbo-darwin-arm64@1.10.13:
+  version "1.10.13"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.10.13.tgz#89f2d14a28789e5eaf276a17fecd4116d61fd16d"
+  integrity sha512-eMoJC+k7gIS4i2qL6rKmrIQGP6Wr9nN4odzzgHFngLTMimok2cGLK3qbJs5O5F/XAtEeRAmuxeRnzQwTl/iuAw==
 
-turbo-linux-64@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.10.12.tgz#d184a491cc67c07672d339e36427378d0fc6b82e"
-  integrity sha512-siYhgeX0DidIfHSgCR95b8xPee9enKSOjCzx7EjTLmPqPaCiVebRYvbOIYdQWRqiaKh9yfhUtFmtMOMScUf1gg==
+turbo-linux-64@1.10.13:
+  version "1.10.13"
+  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.10.13.tgz#803e2b351984ec81034dc4b6935cdfb0a7d7d572"
+  integrity sha512-0CyYmnKTs6kcx7+JRH3nPEqCnzWduM0hj8GP/aodhaIkLNSAGAa+RiYZz6C7IXN+xUVh5rrWTnU2f1SkIy7Gdg==
 
-turbo-linux-arm64@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.10.12.tgz#44e6ca10b20fd4c59f8c85acf8366c7c09ebca81"
-  integrity sha512-K/ZhvD9l4SslclaMkTiIrnfcACgos79YcAo4kwc8bnMQaKuUeRpM15sxLpZp3xDjDg8EY93vsKyjaOhdFG2UbA==
+turbo-linux-arm64@1.10.13:
+  version "1.10.13"
+  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.10.13.tgz#92439a927ec98801be1be266016736be5730e40c"
+  integrity sha512-0iBKviSGQQlh2OjZgBsGjkPXoxvRIxrrLLbLObwJo3sOjIH0loGmVIimGS5E323soMfi/o+sidjk2wU1kFfD7Q==
 
-turbo-windows-64@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.10.12.tgz#36380eca8e7b0505d08b87a084efab1500b2a80e"
-  integrity sha512-7FSgSwvktWDNOqV65l9AbZwcoueAILeE4L7JvjauNASAjjbuzXGCEq5uN8AQU3U5BOFj4TdXrVmO2dX+lLu8Zg==
+turbo-windows-64@1.10.13:
+  version "1.10.13"
+  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.10.13.tgz#870815cdcb20f2480296c208778f9127be61eec6"
+  integrity sha512-S5XySRfW2AmnTeY1IT+Jdr6Goq7mxWganVFfrmqU+qqq3Om/nr0GkcUX+KTIo9mPrN0D3p5QViBRzulwB5iuUQ==
 
-turbo-windows-arm64@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.10.12.tgz#757ad59b9abf1949f22280bee6e8aad253743ba5"
-  integrity sha512-gCNXF52dwom1HLY9ry/cneBPOKTBHhzpqhMylcyvJP0vp9zeMQQkt6yjYv+6QdnmELC92CtKNp2FsNZo+z0pyw==
+turbo-windows-arm64@1.10.13:
+  version "1.10.13"
+  resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.10.13.tgz#2da38b71b1716732541dfc5bd7475dc0903921f8"
+  integrity sha512-nKol6+CyiExJIuoIc3exUQPIBjP9nIq5SkMJgJuxsot2hkgGrafAg/izVDRDrRduQcXj2s8LdtxJHvvnbI8hEQ==
 
 turbo@latest:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.10.12.tgz#cd6f56b92da0600dae9fd94230483556a5c83187"
-  integrity sha512-WM3+jTfQWnB9W208pmP4oeehZcC6JQNlydb/ZHMRrhmQa+htGhWLCzd6Q9rLe0MwZLPpSPFV2/bN5egCLyoKjQ==
+  version "1.10.13"
+  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.10.13.tgz#8050bcd09f8a20d5a626f41e86cd8760e49a0df6"
+  integrity sha512-vOF5IPytgQPIsgGtT0n2uGZizR2N3kKuPIn4b5p5DdeLoI0BV7uNiydT7eSzdkPRpdXNnO8UwS658VaI4+YSzQ==
   optionalDependencies:
-    turbo-darwin-64 "1.10.12"
-    turbo-darwin-arm64 "1.10.12"
-    turbo-linux-64 "1.10.12"
-    turbo-linux-arm64 "1.10.12"
-    turbo-windows-64 "1.10.12"
-    turbo-windows-arm64 "1.10.12"
+    turbo-darwin-64 "1.10.13"
+    turbo-darwin-arm64 "1.10.13"
+    turbo-linux-64 "1.10.13"
+    turbo-linux-arm64 "1.10.13"
+    turbo-windows-64 "1.10.13"
+    turbo-windows-arm64 "1.10.13"
 
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
@@ -8138,9 +8167,9 @@ uvu@^0.5.0:
     sade "^1.7.3"
 
 v8-compile-cache@^2.0.3:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
-  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.4.0.tgz#cdada8bec61e15865f05d097c5f4fd30e94dc128"
+  integrity sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==
 
 vfile-message@^3.0.0:
   version "3.1.4"
@@ -8172,14 +8201,6 @@ warning@^4.0.2, warning@^4.0.3:
   dependencies:
     loose-envify "^1.0.0"
 
-watchpack@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
-  integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
-  dependencies:
-    glob-to-regexp "^0.4.1"
-    graceful-fs "^4.1.2"
-
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
@@ -8231,7 +8252,35 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
-which-typed-array@^1.1.10, which-typed-array@^1.1.11:
+which-builtin-type@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.1.3.tgz#b1b8443707cc58b6e9bf98d32110ff0c2cbd029b"
+  integrity sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==
+  dependencies:
+    function.prototype.name "^1.1.5"
+    has-tostringtag "^1.0.0"
+    is-async-function "^2.0.0"
+    is-date-object "^1.0.5"
+    is-finalizationregistry "^1.0.2"
+    is-generator-function "^1.0.10"
+    is-regex "^1.1.4"
+    is-weakref "^1.0.2"
+    isarray "^2.0.5"
+    which-boxed-primitive "^1.0.2"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.9"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
+which-typed-array@^1.1.10, which-typed-array@^1.1.11, which-typed-array@^1.1.9:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.11.tgz#99d691f23c72aab6768680805a271b69761ed61a"
   integrity sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==
@@ -8439,16 +8488,11 @@ yaml@^1.10.0:
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
 yaml@^2.1.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b"
-  integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.2.tgz#f522db4313c671a0ca963a75670f1c12ea909144"
+  integrity sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==
 
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
-
-zod@3.21.4:
-  version "3.21.4"
-  resolved "https://registry.yarnpkg.com/zod/-/zod-3.21.4.tgz#10882231d992519f0a10b5dd58a38c9dabbb64db"
-  integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==

From 74bf9062b4e1c48bfbd9be5022aad6c6eb9fc54b Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 1 Sep 2023 16:52:44 +0530
Subject: [PATCH 67/70] chore: bug fixes and ui/ux enhancements (#2036)

---
 .../command-palette/shortcuts-modal.tsx       |   2 -
 apps/app/components/core/activity.tsx         |  22 +++
 .../core/filters/issues-view-filter.tsx       |   2 +-
 .../components/core/image-picker-popover.tsx  |   9 +-
 .../core/views/board-view/board-header.tsx    |   4 +-
 .../core/views/board-view/single-board.tsx    |  71 ++++-----
 .../core/views/board-view/single-issue.tsx    |   2 +-
 .../core/views/list-view/single-issue.tsx     |  26 +++-
 .../core/views/list-view/single-list.tsx      |  17 ++-
 .../views/spreadsheet-view/single-issue.tsx   |   2 +-
 .../cycles/active-cycle-details.tsx           |  29 +---
 .../components/emoji-icon-picker/index.tsx    |  14 +-
 .../components/emoji-icon-picker/types.d.ts   |   1 +
 .../components/issues/delete-issue-modal.tsx  |   5 +-
 apps/app/components/issues/label.tsx          |  14 +-
 apps/app/components/issues/modal.tsx          |   2 +-
 .../my-issues/my-issues-view-options.tsx      |   2 +-
 .../issues/my-issues/my-issues-view.tsx       |   3 +
 .../profile/profile-issues-view-options.tsx   |   2 +-
 .../profile/profile-issues-view.tsx           |   3 +
 .../app/components/workspace/issues-stats.tsx | 140 ++++++++++--------
 .../projects/[projectId]/pages/[pageId].tsx   |   2 +-
 .../projects/[projectId]/settings/index.tsx   |  76 +++++-----
 .../pages/[workspaceSlug]/settings/index.tsx  |  95 ++++++------
 24 files changed, 316 insertions(+), 229 deletions(-)

diff --git a/apps/app/components/command-palette/shortcuts-modal.tsx b/apps/app/components/command-palette/shortcuts-modal.tsx
index 86b4aeb46..82f9b398c 100644
--- a/apps/app/components/command-palette/shortcuts-modal.tsx
+++ b/apps/app/components/command-palette/shortcuts-modal.tsx
@@ -22,8 +22,6 @@ const shortcuts = [
       { keys: "↓", description: "Move down" },
       { keys: "←", description: "Move left" },
       { keys: "→", description: "Move right" },
-      { keys: "Enter", description: "Select" },
-      { keys: "Esc", description: "Close" },
     ],
   },
   {
diff --git a/apps/app/components/core/activity.tsx b/apps/app/components/core/activity.tsx
index 1b9de8d25..c8f6377b7 100644
--- a/apps/app/components/core/activity.tsx
+++ b/apps/app/components/core/activity.tsx
@@ -353,6 +353,28 @@ const activityDetails: {
             .
           </>
         );
+      else if (activity.verb === "updated")
+        return (
+          <>
+            updated the{" "}
+            <a
+              href={`${activity.old_value}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              link
+              <Icon iconName="launch" className="!text-xs" />
+            </a>
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
       else
         return (
           <>
diff --git a/apps/app/components/core/filters/issues-view-filter.tsx b/apps/app/components/core/filters/issues-view-filter.tsx
index 3238a8d17..1266bd5a3 100644
--- a/apps/app/components/core/filters/issues-view-filter.tsx
+++ b/apps/app/components/core/filters/issues-view-filter.tsx
@@ -158,7 +158,7 @@ export const IssuesFilterView: React.FC = () => {
                   : "text-custom-sidebar-text-200"
               }`}
             >
-              View
+              Display
               <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
             </Popover.Button>
 
diff --git a/apps/app/components/core/image-picker-popover.tsx b/apps/app/components/core/image-picker-popover.tsx
index 402cba022..5f13d960e 100644
--- a/apps/app/components/core/image-picker-popover.tsx
+++ b/apps/app/components/core/image-picker-popover.tsx
@@ -40,9 +40,15 @@ type Props = {
   label: string | React.ReactNode;
   value: string | null;
   onChange: (data: string) => void;
+  disabled?: boolean;
 };
 
-export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange }) => {
+export const ImagePickerPopover: React.FC<Props> = ({
+  label,
+  value,
+  onChange,
+  disabled = false,
+}) => {
   const ref = useRef<HTMLDivElement>(null);
 
   const router = useRouter();
@@ -117,6 +123,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
       <Popover.Button
         className="rounded-md border border-custom-border-300 bg-custom-background-100 px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
         onClick={() => setIsOpen((prev) => !prev)}
+        disabled={disabled}
       >
         {label}
       </Popover.Button>
diff --git a/apps/app/components/core/views/board-view/board-header.tsx b/apps/app/components/core/views/board-view/board-header.tsx
index d5b11f5f0..5392774d9 100644
--- a/apps/app/components/core/views/board-view/board-header.tsx
+++ b/apps/app/components/core/views/board-view/board-header.tsx
@@ -29,6 +29,7 @@ type Props = {
   isCollapsed: boolean;
   setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
   disableUserActions: boolean;
+  disableAddIssue: boolean;
   viewProps: IIssueViewProps;
 };
 
@@ -39,6 +40,7 @@ export const BoardHeader: React.FC<Props> = ({
   isCollapsed,
   setIsCollapsed,
   disableUserActions,
+  disableAddIssue,
   viewProps,
 }) => {
   const router = useRouter();
@@ -181,7 +183,7 @@ export const BoardHeader: React.FC<Props> = ({
             <Icon iconName="open_in_full" className="text-base font-medium text-custom-text-900" />
           )}
         </button>
-        {!disableUserActions && selectedGroup !== "created_by" && (
+        {!disableAddIssue && !disableUserActions && selectedGroup !== "created_by" && (
           <button
             type="button"
             className="grid h-7 w-7 place-items-center rounded p-1 text-custom-text-200 outline-none duration-300 hover:bg-custom-background-80"
diff --git a/apps/app/components/core/views/board-view/single-board.tsx b/apps/app/components/core/views/board-view/single-board.tsx
index 3380dd1ec..52e8c27c7 100644
--- a/apps/app/components/core/views/board-view/single-board.tsx
+++ b/apps/app/components/core/views/board-view/single-board.tsx
@@ -53,6 +53,8 @@ export const SingleBoard: React.FC<Props> = ({
   const router = useRouter();
   const { cycleId, moduleId } = router.query;
 
+  const isSubscribedIssues = router.pathname.includes("subscribed");
+
   const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
 
   // Check if it has at least 4 tickets since it is enough to accommodate the Calendar height
@@ -70,6 +72,7 @@ export const SingleBoard: React.FC<Props> = ({
         isCollapsed={isCollapsed}
         setIsCollapsed={setIsCollapsed}
         disableUserActions={disableUserActions}
+        disableAddIssue={isSubscribedIssues}
         viewProps={viewProps}
       />
       {isCollapsed && (
@@ -150,41 +153,41 @@ export const SingleBoard: React.FC<Props> = ({
               </div>
               {selectedGroup !== "created_by" && (
                 <div>
-                  {type === "issue" ? (
-                    <button
-                      type="button"
-                      className="flex items-center gap-2 font-medium text-custom-primary outline-none p-1"
-                      onClick={addIssueToGroup}
-                    >
-                      <PlusIcon className="h-4 w-4" />
-                      Add Issue
-                    </button>
-                  ) : (
-                    !disableUserActions && (
-                      <CustomMenu
-                        customButton={
-                          <button
-                            type="button"
-                            className="flex items-center gap-2 font-medium text-custom-primary outline-none whitespace-nowrap"
-                          >
-                            <PlusIcon className="h-4 w-4" />
-                            Add Issue
-                          </button>
-                        }
-                        position="left"
-                        noBorder
-                      >
-                        <CustomMenu.MenuItem onClick={addIssueToGroup}>
-                          Create new
-                        </CustomMenu.MenuItem>
-                        {openIssuesListModal && (
-                          <CustomMenu.MenuItem onClick={openIssuesListModal}>
-                            Add an existing issue
+                  {type === "issue"
+                    ? !isSubscribedIssues && (
+                        <button
+                          type="button"
+                          className="flex items-center gap-2 font-medium text-custom-primary outline-none p-1"
+                          onClick={addIssueToGroup}
+                        >
+                          <PlusIcon className="h-4 w-4" />
+                          Add Issue
+                        </button>
+                      )
+                    : !disableUserActions && (
+                        <CustomMenu
+                          customButton={
+                            <button
+                              type="button"
+                              className="flex items-center gap-2 font-medium text-custom-primary outline-none whitespace-nowrap"
+                            >
+                              <PlusIcon className="h-4 w-4" />
+                              Add Issue
+                            </button>
+                          }
+                          position="left"
+                          noBorder
+                        >
+                          <CustomMenu.MenuItem onClick={addIssueToGroup}>
+                            Create new
                           </CustomMenu.MenuItem>
-                        )}
-                      </CustomMenu>
-                    )
-                  )}
+                          {openIssuesListModal && (
+                            <CustomMenu.MenuItem onClick={openIssuesListModal}>
+                              Add an existing issue
+                            </CustomMenu.MenuItem>
+                          )}
+                        </CustomMenu>
+                      )}
                 </div>
               )}
             </div>
diff --git a/apps/app/components/core/views/board-view/single-issue.tsx b/apps/app/components/core/views/board-view/single-issue.tsx
index b676e809c..455ba48e6 100644
--- a/apps/app/components/core/views/board-view/single-issue.tsx
+++ b/apps/app/components/core/views/board-view/single-issue.tsx
@@ -350,7 +350,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
               />
             )}
             {properties.labels && issue.labels.length > 0 && (
-              <ViewIssueLabel issue={issue} maxRender={2} />
+              <ViewIssueLabel labelDetails={issue.label_details} maxRender={2} />
             )}
             {properties.assignee && (
               <ViewAssigneeSelect
diff --git a/apps/app/components/core/views/list-view/single-issue.tsx b/apps/app/components/core/views/list-view/single-issue.tsx
index eafe74612..d89ef6927 100644
--- a/apps/app/components/core/views/list-view/single-issue.tsx
+++ b/apps/app/components/core/views/list-view/single-issue.tsx
@@ -36,9 +36,21 @@ import { LayerDiagonalIcon } from "components/icons";
 import { copyTextToClipboard } from "helpers/string.helper";
 import { handleIssuesMutation } from "constants/issue";
 // types
-import { ICurrentUserResponse, IIssue, IIssueViewProps, ISubIssueResponse, UserAuth } from "types";
+import {
+  ICurrentUserResponse,
+  IIssue,
+  IIssueViewProps,
+  ISubIssueResponse,
+  IUserProfileProjectSegregation,
+  UserAuth,
+} from "types";
 // fetch-keys
-import { CYCLE_DETAILS, MODULE_DETAILS, SUB_ISSUES } from "constants/fetch-keys";
+import {
+  CYCLE_DETAILS,
+  MODULE_DETAILS,
+  SUB_ISSUES,
+  USER_PROFILE_PROJECT_SEGREGATION,
+} from "constants/fetch-keys";
 
 type Props = {
   type?: string;
@@ -74,7 +86,7 @@ export const SingleListIssue: React.FC<Props> = ({
   const [contextMenuPosition, setContextMenuPosition] = useState<React.MouseEvent | null>(null);
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId, userId } = router.query;
   const isArchivedIssues = router.pathname.includes("archived-issues");
 
   const { setToastAlert } = useToast();
@@ -126,6 +138,11 @@ export const SingleListIssue: React.FC<Props> = ({
         .then(() => {
           mutateIssues();
 
+          if (userId)
+            mutate<IUserProfileProjectSegregation>(
+              USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString())
+            );
+
           if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
           if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
         });
@@ -134,6 +151,7 @@ export const SingleListIssue: React.FC<Props> = ({
       workspaceSlug,
       cycleId,
       moduleId,
+      userId,
       groupTitle,
       index,
       selectedGroup,
@@ -261,7 +279,7 @@ export const SingleListIssue: React.FC<Props> = ({
               isNotAllowed={isNotAllowed}
             />
           )}
-          {properties.labels && <ViewIssueLabel issue={issue} maxRender={3} />}
+          {properties.labels && <ViewIssueLabel labelDetails={issue.label_details} maxRender={3} />}
           {properties.assignee && (
             <ViewAssigneeSelect
               issue={issue}
diff --git a/apps/app/components/core/views/list-view/single-list.tsx b/apps/app/components/core/views/list-view/single-list.tsx
index 03ef77727..a1b80c067 100644
--- a/apps/app/components/core/views/list-view/single-list.tsx
+++ b/apps/app/components/core/views/list-view/single-list.tsx
@@ -60,6 +60,7 @@ export const SingleList: React.FC<Props> = ({
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
   const isArchivedIssues = router.pathname.includes("archived-issues");
+  const isSubscribedIssues = router.pathname.includes("subscribed");
 
   const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
 
@@ -180,13 +181,15 @@ export const SingleList: React.FC<Props> = ({
             {isArchivedIssues ? (
               ""
             ) : type === "issue" ? (
-              <button
-                type="button"
-                className="p-1  text-custom-text-200 hover:bg-custom-background-80"
-                onClick={addIssueToGroup}
-              >
-                <PlusIcon className="h-4 w-4" />
-              </button>
+              !isSubscribedIssues && (
+                <button
+                  type="button"
+                  className="p-1  text-custom-text-200 hover:bg-custom-background-80"
+                  onClick={addIssueToGroup}
+                >
+                  <PlusIcon className="h-4 w-4" />
+                </button>
+              )
             ) : disableUserActions ? (
               ""
             ) : (
diff --git a/apps/app/components/core/views/spreadsheet-view/single-issue.tsx b/apps/app/components/core/views/spreadsheet-view/single-issue.tsx
index 53869a638..731d7f921 100644
--- a/apps/app/components/core/views/spreadsheet-view/single-issue.tsx
+++ b/apps/app/components/core/views/spreadsheet-view/single-issue.tsx
@@ -323,7 +323,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         )}
         {properties.labels && (
           <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-            <ViewIssueLabel issue={issue} maxRender={1} />
+            <ViewIssueLabel labelDetails={issue.label_details} maxRender={1} />
           </div>
         )}
 
diff --git a/apps/app/components/cycles/active-cycle-details.tsx b/apps/app/components/cycles/active-cycle-details.tsx
index bec200bd9..23fd68e75 100644
--- a/apps/app/components/cycles/active-cycle-details.tsx
+++ b/apps/app/components/cycles/active-cycle-details.tsx
@@ -31,6 +31,8 @@ import {
   CompletedStateIcon,
 } from "components/icons";
 import { StarIcon } from "@heroicons/react/24/outline";
+// components
+import { ViewIssueLabel } from "components/issues";
 // helpers
 import {
   getDateRangeStatus,
@@ -441,7 +443,10 @@ export const ActiveCycleDetails: React.FC = () => {
                   issues.map((issue) => (
                     <div
                       key={issue.id}
-                      className="flex flex-wrap rounded-md items-center justify-between gap-2 border border-custom-border-200 bg-custom-background-90 px-3 py-1.5"
+                      onClick={() =>
+                        router.push(`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`)
+                      }
+                      className="flex flex-wrap cursor-pointer rounded-md items-center justify-between gap-2 border border-custom-border-200 bg-custom-background-90 px-3 py-1.5"
                     >
                       <div className="flex flex-col gap-1">
                         <div>
@@ -474,27 +479,7 @@ export const ActiveCycleDetails: React.FC = () => {
                         >
                           {getPriorityIcon(issue.priority, "text-sm")}
                         </div>
-                        {issue.label_details.length > 0 ? (
-                          <div className="flex flex-wrap gap-1">
-                            {issue.label_details.map((label) => (
-                              <span
-                                key={label.id}
-                                className="group flex items-center gap-1 rounded-2xl border border-custom-border-200 px-2 py-0.5 text-xs text-custom-text-200"
-                              >
-                                <span
-                                  className="h-1.5 w-1.5  rounded-full"
-                                  style={{
-                                    backgroundColor:
-                                      label?.color && label.color !== "" ? label.color : "#000",
-                                  }}
-                                />
-                                {label.name}
-                              </span>
-                            ))}
-                          </div>
-                        ) : (
-                          ""
-                        )}
+                        <ViewIssueLabel labelDetails={issue.label_details} maxRender={2} />
                         <div className={`flex items-center gap-2 text-custom-text-200`}>
                           {issue.assignees &&
                           issue.assignees.length > 0 &&
diff --git a/apps/app/components/emoji-icon-picker/index.tsx b/apps/app/components/emoji-icon-picker/index.tsx
index ffe8b33d6..7af3bb74f 100644
--- a/apps/app/components/emoji-icon-picker/index.tsx
+++ b/apps/app/components/emoji-icon-picker/index.tsx
@@ -23,7 +23,13 @@ const tabOptions = [
   },
 ];
 
-const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorChange }) => {
+const EmojiIconPicker: React.FC<Props> = ({
+  label,
+  value,
+  onChange,
+  onIconColorChange,
+  disabled = false,
+}) => {
   const [isOpen, setIsOpen] = useState(false);
   const [openColorPicker, setOpenColorPicker] = useState(false);
   const [activeColor, setActiveColor] = useState<string>("rgb(var(--color-text-200))");
@@ -40,7 +46,11 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
 
   return (
     <Popover className="relative z-[1]">
-      <Popover.Button onClick={() => setIsOpen((prev) => !prev)} className="outline-none">
+      <Popover.Button
+        onClick={() => setIsOpen((prev) => !prev)}
+        className="outline-none"
+        disabled={disabled}
+      >
         {label}
       </Popover.Button>
       <Transition
diff --git a/apps/app/components/emoji-icon-picker/types.d.ts b/apps/app/components/emoji-icon-picker/types.d.ts
index fed55372e..01220ed44 100644
--- a/apps/app/components/emoji-icon-picker/types.d.ts
+++ b/apps/app/components/emoji-icon-picker/types.d.ts
@@ -10,4 +10,5 @@ export type Props = {
         }
   ) => void;
   onIconColorChange?: (data: any) => void;
+  disabled?: boolean;
 };
diff --git a/apps/app/components/issues/delete-issue-modal.tsx b/apps/app/components/issues/delete-issue-modal.tsx
index d847126ed..e9907973f 100644
--- a/apps/app/components/issues/delete-issue-modal.tsx
+++ b/apps/app/components/issues/delete-issue-modal.tsx
@@ -33,16 +33,16 @@ type Props = {
   isOpen: boolean;
   handleClose: () => void;
   data: IIssue | null;
-  onSubmit?: () => Promise<void>;
   user: ICurrentUserResponse | undefined;
+  onSubmit?: () => Promise<void>;
 };
 
 export const DeleteIssueModal: React.FC<Props> = ({
   isOpen,
   handleClose,
   data,
-  onSubmit,
   user,
+  onSubmit,
 }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
@@ -138,6 +138,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
         console.log(error);
         setIsDeleteLoading(false);
       });
+    if (onSubmit) await onSubmit();
   };
 
   const handleArchivedIssueDeletion = async () => {
diff --git a/apps/app/components/issues/label.tsx b/apps/app/components/issues/label.tsx
index c5a48d0ad..75a08ba0f 100644
--- a/apps/app/components/issues/label.tsx
+++ b/apps/app/components/issues/label.tsx
@@ -6,16 +6,16 @@ import { Tooltip } from "components/ui";
 import { IIssue } from "types";
 
 type Props = {
-  issue: IIssue;
+  labelDetails: any[];
   maxRender?: number;
 };
 
-export const ViewIssueLabel: React.FC<Props> = ({ issue, maxRender = 1 }) => (
+export const ViewIssueLabel: React.FC<Props> = ({ labelDetails, maxRender = 1 }) => (
   <>
-    {issue.label_details.length > 0 ? (
-      issue.label_details.length <= maxRender ? (
+    {labelDetails.length > 0 ? (
+      labelDetails.length <= maxRender ? (
         <>
-          {issue.label_details.map((label, index) => (
+          {labelDetails.map((label) => (
             <div
               key={label.id}
               className="flex cursor-default items-center flex-shrink-0 rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
@@ -39,11 +39,11 @@ export const ViewIssueLabel: React.FC<Props> = ({ issue, maxRender = 1 }) => (
           <Tooltip
             position="top"
             tooltipHeading="Labels"
-            tooltipContent={issue.label_details.map((l) => l.name).join(", ")}
+            tooltipContent={labelDetails.map((l) => l.name).join(", ")}
           >
             <div className="flex items-center gap-1.5 text-custom-text-200">
               <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
-              {`${issue.label_details.length} Labels`}
+              {`${labelDetails.length} Labels`}
             </div>
           </Tooltip>
         </div>
diff --git a/apps/app/components/issues/modal.tsx b/apps/app/components/issues/modal.tsx
index 8f13a8047..4c4f2ba44 100644
--- a/apps/app/components/issues/modal.tsx
+++ b/apps/app/components/issues/modal.tsx
@@ -93,7 +93,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
 
   if (cycleId) prePopulateData = { ...prePopulateData, cycle: cycleId as string };
   if (moduleId) prePopulateData = { ...prePopulateData, module: moduleId as string };
-  if (router.asPath.includes("my-issues"))
+  if (router.asPath.includes("my-issues") || router.asPath.includes("assigned"))
     prePopulateData = {
       ...prePopulateData,
       assignees: [...(prePopulateData?.assignees ?? []), user?.id ?? ""],
diff --git a/apps/app/components/issues/my-issues/my-issues-view-options.tsx b/apps/app/components/issues/my-issues/my-issues-view-options.tsx
index 7c6a6fe44..d31f884dc 100644
--- a/apps/app/components/issues/my-issues/my-issues-view-options.tsx
+++ b/apps/app/components/issues/my-issues/my-issues-view-options.tsx
@@ -123,7 +123,7 @@ export const MyIssuesViewOptions: React.FC = () => {
                   : "text-custom-sidebar-text-200"
               }`}
             >
-              View
+              Display
               <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
             </Popover.Button>
 
diff --git a/apps/app/components/issues/my-issues/my-issues-view.tsx b/apps/app/components/issues/my-issues/my-issues-view.tsx
index ee38849cd..e8624e236 100644
--- a/apps/app/components/issues/my-issues/my-issues-view.tsx
+++ b/apps/app/components/issues/my-issues/my-issues-view.tsx
@@ -234,6 +234,9 @@ export const MyIssuesView: React.FC<Props> = ({
         isOpen={deleteIssueModal}
         data={issueToDelete}
         user={user}
+        onSubmit={async () => {
+          mutateMyIssues();
+        }}
       />
       {areFiltersApplied && (
         <>
diff --git a/apps/app/components/profile/profile-issues-view-options.tsx b/apps/app/components/profile/profile-issues-view-options.tsx
index 38faf500b..4d59d6ffa 100644
--- a/apps/app/components/profile/profile-issues-view-options.tsx
+++ b/apps/app/components/profile/profile-issues-view-options.tsx
@@ -149,7 +149,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
                   : "text-custom-sidebar-text-200"
               }`}
             >
-              View
+              Display
               <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
             </Popover.Button>
 
diff --git a/apps/app/components/profile/profile-issues-view.tsx b/apps/app/components/profile/profile-issues-view.tsx
index 0449546fc..fa5df1227 100644
--- a/apps/app/components/profile/profile-issues-view.tsx
+++ b/apps/app/components/profile/profile-issues-view.tsx
@@ -248,6 +248,9 @@ export const ProfileIssuesView = () => {
         isOpen={deleteIssueModal}
         data={issueToDelete}
         user={user}
+        onSubmit={async () => {
+          mutateProfileIssues();
+        }}
       />
       {areFiltersApplied && (
         <>
diff --git a/apps/app/components/workspace/issues-stats.tsx b/apps/app/components/workspace/issues-stats.tsx
index 1b327227a..2c874d503 100644
--- a/apps/app/components/workspace/issues-stats.tsx
+++ b/apps/app/components/workspace/issues-stats.tsx
@@ -6,78 +6,88 @@ import { Loader, Tooltip } from "components/ui";
 import { InformationCircleIcon } from "@heroicons/react/24/outline";
 // types
 import { IUserWorkspaceDashboard } from "types";
+import { useRouter } from "next/router";
 
 type Props = {
   data: IUserWorkspaceDashboard | undefined;
 };
 
-export const IssuesStats: React.FC<Props> = ({ data }) => (
-  <div className="grid grid-cols-1 rounded-[10px] border border-custom-border-200 bg-custom-background-100 lg:grid-cols-3">
-    <div className="grid grid-cols-1 divide-y divide-custom-border-200 border-b border-custom-border-200 lg:border-r lg:border-b-0">
-      <div className="flex">
-        <div className="basis-1/2 p-4">
-          <h4 className="text-sm">Issues assigned to you</h4>
-          <h5 className="mt-2 text-2xl font-semibold">
-            {data ? (
-              data.assigned_issues_count
-            ) : (
-              <Loader>
-                <Loader.Item height="25px" width="50%" />
-              </Loader>
-            )}
-          </h5>
+export const IssuesStats: React.FC<Props> = ({ data }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  return (
+    <div className="grid grid-cols-1 rounded-[10px] border border-custom-border-200 bg-custom-background-100 lg:grid-cols-3">
+      <div className="grid grid-cols-1 divide-y divide-custom-border-200 border-b border-custom-border-200 lg:border-r lg:border-b-0">
+        <div className="flex">
+          <div className="basis-1/2 p-4">
+            <h4 className="text-sm">Issues assigned to you</h4>
+            <h5 className="mt-2 text-2xl font-semibold">
+              {data ? (
+                <div
+                  className="cursor-pointer"
+                  onClick={() => router.push(`/${workspaceSlug}/me/my-issues`)}
+                >
+                  {data.assigned_issues_count}
+                </div>
+              ) : (
+                <Loader>
+                  <Loader.Item height="25px" width="50%" />
+                </Loader>
+              )}
+            </h5>
+          </div>
+          <div className="basis-1/2 border-l border-custom-border-200 p-4">
+            <h4 className="text-sm">Pending issues</h4>
+            <h5 className="mt-2 text-2xl font-semibold">
+              {data ? (
+                data.pending_issues_count
+              ) : (
+                <Loader>
+                  <Loader.Item height="25px" width="50%" />
+                </Loader>
+              )}
+            </h5>
+          </div>
         </div>
-        <div className="basis-1/2 border-l border-custom-border-200 p-4">
-          <h4 className="text-sm">Pending issues</h4>
-          <h5 className="mt-2 text-2xl font-semibold">
-            {data ? (
-              data.pending_issues_count
-            ) : (
-              <Loader>
-                <Loader.Item height="25px" width="50%" />
-              </Loader>
-            )}
-          </h5>
+        <div className="flex">
+          <div className="basis-1/2 p-4">
+            <h4 className="text-sm">Completed issues</h4>
+            <h5 className="mt-2 text-2xl font-semibold">
+              {data ? (
+                data.completed_issues_count
+              ) : (
+                <Loader>
+                  <Loader.Item height="25px" width="50%" />
+                </Loader>
+              )}
+            </h5>
+          </div>
+          <div className="basis-1/2 border-l border-custom-border-200 p-4">
+            <h4 className="text-sm">Issues due by this week</h4>
+            <h5 className="mt-2 text-2xl font-semibold">
+              {data ? (
+                data.issues_due_week_count
+              ) : (
+                <Loader>
+                  <Loader.Item height="25px" width="50%" />
+                </Loader>
+              )}
+            </h5>
+          </div>
         </div>
       </div>
-      <div className="flex">
-        <div className="basis-1/2 p-4">
-          <h4 className="text-sm">Completed issues</h4>
-          <h5 className="mt-2 text-2xl font-semibold">
-            {data ? (
-              data.completed_issues_count
-            ) : (
-              <Loader>
-                <Loader.Item height="25px" width="50%" />
-              </Loader>
-            )}
-          </h5>
-        </div>
-        <div className="basis-1/2 border-l border-custom-border-200 p-4">
-          <h4 className="text-sm">Issues due by this week</h4>
-          <h5 className="mt-2 text-2xl font-semibold">
-            {data ? (
-              data.issues_due_week_count
-            ) : (
-              <Loader>
-                <Loader.Item height="25px" width="50%" />
-              </Loader>
-            )}
-          </h5>
-        </div>
+      <div className="p-4 lg:col-span-2">
+        <h3 className="mb-2 font-semibold capitalize flex items-center gap-2">
+          Activity Graph
+          <Tooltip
+            tooltipContent="Your profile activity graph is a record of actions you've performed on issues across the workspace."
+            className="w-72 border border-custom-border-200"
+          >
+            <InformationCircleIcon className="h-3 w-3" />
+          </Tooltip>
+        </h3>
+        <ActivityGraph activities={data?.issue_activities} />
       </div>
     </div>
-    <div className="p-4 lg:col-span-2">
-      <h3 className="mb-2 font-semibold capitalize flex items-center gap-2">
-        Activity Graph
-        <Tooltip
-          tooltipContent="Your profile activity graph is a record of actions you've performed on issues across the workspace."
-          className="w-72 border border-custom-border-200"
-        >
-          <InformationCircleIcon className="h-3 w-3" />
-        </Tooltip>
-      </h3>
-      <ActivityGraph activities={data?.issue_activities} />
-    </div>
-  </div>
-);
+  );
+};
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index 0502e9e87..d79bfb613 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -476,7 +476,7 @@ const SinglePage: NextPage = () => {
                               : "text-custom-sidebar-text-200"
                           }`}
                         >
-                          View
+                          Display
                           <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
                         </Popover.Button>
 
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index 57bf4fa3c..882bdb41e 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -187,7 +187,7 @@ const GeneralSettings: NextPage = () => {
       />
       <form onSubmit={handleSubmit(onSubmit)} className="p-8">
         <SettingsHeader />
-        <div className="space-y-8 sm:space-y-12">
+        <div className="space-y-8 sm:space-y-12 opacity-60">
           <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-lg font-semibold">Icon & Name</h4>
@@ -206,6 +206,7 @@ const GeneralSettings: NextPage = () => {
                         label={value ? renderEmoji(value) : "Icon"}
                         value={value}
                         onChange={onChange}
+                        disabled={!isAdmin}
                       />
                     )}
                   />
@@ -225,6 +226,7 @@ const GeneralSettings: NextPage = () => {
                   validations={{
                     required: "Name is required",
                   }}
+                  disabled={!isAdmin}
                 />
               ) : (
                 <Loader>
@@ -248,6 +250,7 @@ const GeneralSettings: NextPage = () => {
                   placeholder="Enter project description"
                   validations={{}}
                   className="min-h-[46px] text-sm"
+                  disabled={!isAdmin}
                 />
               ) : (
                 <Loader className="w-full">
@@ -279,6 +282,7 @@ const GeneralSettings: NextPage = () => {
                           setValue("cover_image", imageUrl);
                         }}
                         value={watch("cover_image")}
+                        disabled={!isAdmin}
                       />
                     </div>
                   </div>
@@ -319,6 +323,7 @@ const GeneralSettings: NextPage = () => {
                       message: "Identifier must at most be of 5 characters",
                     },
                   }}
+                  disabled={!isAdmin}
                 />
               ) : (
                 <Loader>
@@ -343,6 +348,7 @@ const GeneralSettings: NextPage = () => {
                       onChange={onChange}
                       label={currentNetwork?.label ?? "Select network"}
                       input
+                      disabled={!isAdmin}
                     >
                       {NETWORK_CHOICES.map((network) => (
                         <CustomSelect.Option key={network.key} value={network.key}>
@@ -359,44 +365,48 @@ const GeneralSettings: NextPage = () => {
               )}
             </div>
           </div>
-          <div className="sm:text-right">
-            {projectDetails ? (
-              <SecondaryButton type="submit" loading={isSubmitting} disabled={!isAdmin}>
-                {isSubmitting ? "Updating Project..." : "Update Project"}
-              </SecondaryButton>
-            ) : (
-              <Loader className="mt-2 w-full">
-                <Loader.Item height="34px" width="100px" />
-              </Loader>
-            )}
-          </div>
-          {memberDetails?.role === 20 && (
-            <div className="grid grid-cols-12 gap-4 sm:gap-16">
-              <div className="col-span-12 sm:col-span-6">
-                <h4 className="text-lg font-semibold">Danger Zone</h4>
-                <p className="text-sm text-custom-text-200">
-                  The danger zone of the project delete page is a critical area that requires
-                  careful consideration and attention. When deleting a project, all of the data and
-                  resources within that project will be permanently removed and cannot be recovered.
-                </p>
-              </div>
-              <div className="col-span-12 sm:col-span-6">
+
+          {isAdmin && (
+            <>
+              <div className="sm:text-right">
                 {projectDetails ? (
-                  <div>
-                    <DangerButton
-                      onClick={() => setSelectedProject(projectDetails.id ?? null)}
-                      outline
-                    >
-                      Delete Project
-                    </DangerButton>
-                  </div>
+                  <SecondaryButton type="submit" loading={isSubmitting} disabled={!isAdmin}>
+                    {isSubmitting ? "Updating Project..." : "Update Project"}
+                  </SecondaryButton>
                 ) : (
                   <Loader className="mt-2 w-full">
-                    <Loader.Item height="46px" width="100px" />
+                    <Loader.Item height="34px" width="100px" />
                   </Loader>
                 )}
               </div>
-            </div>
+              <div className="grid grid-cols-12 gap-4 sm:gap-16">
+                <div className="col-span-12 sm:col-span-6">
+                  <h4 className="text-lg font-semibold">Danger Zone</h4>
+                  <p className="text-sm text-custom-text-200">
+                    The danger zone of the project delete page is a critical area that requires
+                    careful consideration and attention. When deleting a project, all of the data
+                    and resources within that project will be permanently removed and cannot be
+                    recovered.
+                  </p>
+                </div>
+                <div className="col-span-12 sm:col-span-6">
+                  {projectDetails ? (
+                    <div>
+                      <DangerButton
+                        onClick={() => setSelectedProject(projectDetails.id ?? null)}
+                        outline
+                      >
+                        Delete Project
+                      </DangerButton>
+                    </div>
+                  ) : (
+                    <Loader className="mt-2 w-full">
+                      <Loader.Item height="46px" width="100px" />
+                    </Loader>
+                  )}
+                </div>
+              </div>
+            </>
           )}
         </div>
       </form>
diff --git a/apps/app/pages/[workspaceSlug]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/settings/index.tsx
index a254c7a49..4fb341762 100644
--- a/apps/app/pages/[workspaceSlug]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/index.tsx
@@ -181,7 +181,7 @@ const WorkspaceSettings: NextPage = () => {
       <div className="p-8">
         <SettingsHeader />
         {activeWorkspace ? (
-          <div className="space-y-8 sm:space-y-12">
+          <div className="space-y-8 sm:space-y-12 opacity-60">
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
                 <h4 className="text-lg font-semibold">Logo</h4>
@@ -191,7 +191,11 @@ const WorkspaceSettings: NextPage = () => {
               </div>
               <div className="col-span-12 sm:col-span-6">
                 <div className="flex items-center gap-4">
-                  <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
+                  <button
+                    type="button"
+                    onClick={() => setIsImageUploadModalOpen(true)}
+                    disabled={!isAdmin}
+                  >
                     {watch("logo") && watch("logo") !== null && watch("logo") !== "" ? (
                       <div className="relative mx-auto flex h-12 w-12">
                         <img
@@ -206,23 +210,25 @@ const WorkspaceSettings: NextPage = () => {
                       </div>
                     )}
                   </button>
-                  <div className="flex gap-4">
-                    <SecondaryButton
-                      onClick={() => {
-                        setIsImageUploadModalOpen(true);
-                      }}
-                    >
-                      {isImageUploading ? "Uploading..." : "Upload"}
-                    </SecondaryButton>
-                    {activeWorkspace.logo && activeWorkspace.logo !== "" && (
-                      <DangerButton
-                        onClick={() => handleDelete(activeWorkspace.logo)}
-                        loading={isImageRemoving}
+                  {isAdmin && (
+                    <div className="flex gap-4">
+                      <SecondaryButton
+                        onClick={() => {
+                          setIsImageUploadModalOpen(true);
+                        }}
                       >
-                        {isImageRemoving ? "Removing..." : "Remove"}
-                      </DangerButton>
-                    )}
-                  </div>
+                        {isImageUploading ? "Uploading..." : "Upload"}
+                      </SecondaryButton>
+                      {activeWorkspace.logo && activeWorkspace.logo !== "" && (
+                        <DangerButton
+                          onClick={() => handleDelete(activeWorkspace.logo)}
+                          loading={isImageRemoving}
+                        >
+                          {isImageRemoving ? "Removing..." : "Remove"}
+                        </DangerButton>
+                      )}
+                    </div>
+                  )}
                 </div>
               </div>
             </div>
@@ -288,6 +294,7 @@ const WorkspaceSettings: NextPage = () => {
                       message: "Workspace name should not exceed 80 characters",
                     },
                   }}
+                  disabled={!isAdmin}
                 />
               </div>
             </div>
@@ -309,6 +316,7 @@ const WorkspaceSettings: NextPage = () => {
                       }
                       width="w-full"
                       input
+                      disabled={!isAdmin}
                     >
                       {ORGANIZATION_SIZE?.map((item) => (
                         <CustomSelect.Option key={item} value={item}>
@@ -320,32 +328,35 @@ const WorkspaceSettings: NextPage = () => {
                 />
               </div>
             </div>
-            <div className="sm:text-right">
-              <SecondaryButton
-                onClick={handleSubmit(onSubmit)}
-                loading={isSubmitting}
-                disabled={!isAdmin}
-              >
-                {isSubmitting ? "Updating..." : "Update Workspace"}
-              </SecondaryButton>
-            </div>
-            {memberDetails?.role === 20 && (
-              <div className="grid grid-cols-12 gap-4 sm:gap-16">
-                <div className="col-span-12 sm:col-span-6">
-                  <h4 className="text-lg font-semibold">Danger Zone</h4>
-                  <p className="text-sm text-custom-text-200">
-                    The danger zone of the workspace delete page is a critical area that requires
-                    careful consideration and attention. When deleting a workspace, all of the data
-                    and resources within that workspace will be permanently removed and cannot be
-                    recovered.
-                  </p>
+
+            {isAdmin && (
+              <>
+                <div className="sm:text-right">
+                  <SecondaryButton
+                    onClick={handleSubmit(onSubmit)}
+                    loading={isSubmitting}
+                    disabled={!isAdmin}
+                  >
+                    {isSubmitting ? "Updating..." : "Update Workspace"}
+                  </SecondaryButton>
                 </div>
-                <div className="col-span-12 sm:col-span-6">
-                  <DangerButton onClick={() => setIsOpen(true)} outline>
-                    Delete the workspace
-                  </DangerButton>
+                <div className="grid grid-cols-12 gap-4 sm:gap-16">
+                  <div className="col-span-12 sm:col-span-6">
+                    <h4 className="text-lg font-semibold">Danger Zone</h4>
+                    <p className="text-sm text-custom-text-200">
+                      The danger zone of the workspace delete page is a critical area that requires
+                      careful consideration and attention. When deleting a workspace, all of the
+                      data and resources within that workspace will be permanently removed and
+                      cannot be recovered.
+                    </p>
+                  </div>
+                  <div className="col-span-12 sm:col-span-6">
+                    <DangerButton onClick={() => setIsOpen(true)} outline>
+                      Delete the workspace
+                    </DangerButton>
+                  </div>
                 </div>
-              </div>
+              </>
             )}
           </div>
         ) : (

From 441e83eba609722caa8d297428d656c889d0cd22 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 1 Sep 2023 17:08:02 +0530
Subject: [PATCH 68/70] fix: notification count mutation fix (#2053)

---
 apps/app/hooks/use-user-notifications.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/app/hooks/use-user-notifications.tsx b/apps/app/hooks/use-user-notifications.tsx
index 5e6ea5d0b..5ddc9ddf5 100644
--- a/apps/app/hooks/use-user-notifications.tsx
+++ b/apps/app/hooks/use-user-notifications.tsx
@@ -299,6 +299,7 @@ const useUserNotification = () => {
       })
       .finally(() => {
         notificationMutate();
+        mutateNotificationCount();
       });
   };
 

From 54d781ef91f9fb2332fca8234d81281f81b117ed Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 1 Sep 2023 17:10:06 +0530
Subject: [PATCH 69/70] fix: auth screens (#2054)

---
 apps/space/components/issues/navbar/index.tsx | 39 +++++++++++++++++--
 .../issues/peek-overview/issue-activity.tsx   | 34 +++++++++++++---
 apps/space/pages/index.tsx                    |  4 +-
 apps/space/store/user.ts                      |  5 ++-
 4 files changed, 69 insertions(+), 13 deletions(-)

diff --git a/apps/space/components/issues/navbar/index.tsx b/apps/space/components/issues/navbar/index.tsx
index 83d79f349..c9d0f52d1 100644
--- a/apps/space/components/issues/navbar/index.tsx
+++ b/apps/space/components/issues/navbar/index.tsx
@@ -1,12 +1,17 @@
 import { useEffect } from "react";
+
+import Link from "next/link";
 import Image from "next/image";
-import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
 // components
 import { NavbarSearch } from "./search";
 import { NavbarIssueBoardView } from "./issue-board-view";
-import { NavbarIssueFilter } from "./issue-filter";
 import { NavbarTheme } from "./theme";
+// ui
+import { PrimaryButton } from "components/ui";
 // lib
 import { useMobxStore } from "lib/mobx/store-provider";
 // store
@@ -25,11 +30,13 @@ const renderEmoji = (emoji: string | { name: string; color: string }) => {
 };
 
 const IssueNavbar = observer(() => {
-  const { project: projectStore }: RootStore = useMobxStore();
+  const { project: projectStore, user: userStore }: RootStore = useMobxStore();
   // router
   const router = useRouter();
   const { workspace_slug, project_slug, board } = router.query;
 
+  const user = userStore?.currentUser;
+
   useEffect(() => {
     if (workspace_slug && project_slug) {
       projectStore.fetchProjectSettings(workspace_slug.toString(), project_slug.toString());
@@ -77,6 +84,32 @@ const IssueNavbar = observer(() => {
       <div className="flex-shrink-0 relative">
         <NavbarTheme />
       </div>
+
+      {user ? (
+        <div className="border border-custom-border-200 rounded flex items-center gap-2 p-2">
+          {user.avatar && user.avatar !== "" ? (
+            <div className="h-5 w-5 rounded-full">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={user.avatar} alt={user.display_name ?? ""} className="rounded-full" />
+            </div>
+          ) : (
+            <div className="bg-custom-background-80 h-5 w-5 rounded-full grid place-items-center text-[10px] capitalize">
+              {(user.display_name ?? "A")[0]}
+            </div>
+          )}
+          <h6 className="text-xs font-medium">{user.display_name}</h6>
+        </div>
+      ) : (
+        <div className="flex-shrink-0">
+          <Link href={`/?next_path=${router.asPath}`}>
+            <a>
+              <PrimaryButton className="flex-shrink-0" outline>
+                Sign in
+              </PrimaryButton>
+            </a>
+          </Link>
+        </div>
+      )}
     </div>
   );
 });
diff --git a/apps/space/components/issues/peek-overview/issue-activity.tsx b/apps/space/components/issues/peek-overview/issue-activity.tsx
index 9f12b9f73..47e9e4d0f 100644
--- a/apps/space/components/issues/peek-overview/issue-activity.tsx
+++ b/apps/space/components/issues/peek-overview/issue-activity.tsx
@@ -1,10 +1,16 @@
-import React, { useEffect } from "react";
+import React from "react";
+
+import Link from "next/link";
 import { useRouter } from "next/router";
+
+// mobx
 import { observer } from "mobx-react-lite";
 // lib
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { CommentCard, AddComment } from "components/issues/peek-overview";
+// ui
+import { Icon, PrimaryButton } from "components/ui";
 // types
 import { IIssue } from "types/issue";
 
@@ -20,10 +26,10 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
 
   const comments = issueDetailStore.details[issueDetailStore.peekId || ""]?.comments || [];
 
-  console.log("issueDetailStore", issueDetailStore);
+  const user = userStore?.currentUser;
 
   return (
-    <div>
+    <div className="pb-10">
       <h4 className="font-medium">Activity</h4>
       {workspace_slug && (
         <div className="mt-4">
@@ -32,9 +38,25 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
               <CommentCard key={comment.id} comment={comment} workspaceSlug={workspace_slug?.toString()} />
             ))}
           </div>
-          {projectStore.deploySettings?.comments && (
-            <div className="mt-4">
-              <AddComment disabled={!userStore.currentUser} />
+          {user ? (
+            <>
+              {projectStore.deploySettings?.comments && (
+                <div className="mt-4">
+                  <AddComment disabled={!userStore.currentUser} />
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="bg-custom-background-80 px-2 py-2.5 flex items-center justify-between gap-2 border border-custom-border-300 rounded">
+              <p className="flex gap-2 text-sm text-custom-text-200 break-words overflow-hidden">
+                <Icon iconName="lock" className="!text-sm" />
+                Sign in to add your comment
+              </p>
+              <Link href={`/?next_path=${router.asPath}`}>
+                <a>
+                  <PrimaryButton className="flex-shrink-0 !px-7">Sign in</PrimaryButton>
+                </a>
+              </Link>
             </div>
           )}
         </div>
diff --git a/apps/space/pages/index.tsx b/apps/space/pages/index.tsx
index 26949d76b..5501ea926 100644
--- a/apps/space/pages/index.tsx
+++ b/apps/space/pages/index.tsx
@@ -17,7 +17,7 @@ const HomePage = () => {
   const { user: userStore } = useMobxStore();
 
   const router = useRouter();
-  const { next_path = "/" } = router.query;
+  const { next_path } = router.query;
 
   const { setToastAlert } = useToast();
 
@@ -38,7 +38,7 @@ const HomePage = () => {
       router.push(`/onboarding?next_path=${next_path}`);
       return;
     }
-    router.push(next_path.toString());
+    router.push((next_path ?? "/").toString());
   };
 
   const handleGoogleSignIn = async ({ clientId, credential }: any) => {
diff --git a/apps/space/store/user.ts b/apps/space/store/user.ts
index 4ccc2d2bb..b1a87d133 100644
--- a/apps/space/store/user.ts
+++ b/apps/space/store/user.ts
@@ -28,8 +28,9 @@ class UserStore implements IUserStore {
   }
 
   setCurrentUser = (user: any) => {
-    // TODO: destructure user object
-    this.currentUser = user;
+    runInAction(() => {
+      this.currentUser = { ...user };
+    });
   };
 
   /**

From f71a62f1429ffd1d259d0918c8ebf9f215bbb6ff Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 1 Sep 2023 17:21:52 +0530
Subject: [PATCH 70/70] style: sign in page bg color (#2055)

---
 apps/space/components/issues/board-views/kanban/index.tsx | 7 +++++--
 apps/space/pages/_document.tsx                            | 2 +-
 apps/space/pages/index.tsx                                | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/space/components/issues/board-views/kanban/index.tsx b/apps/space/components/issues/board-views/kanban/index.tsx
index 2ba1450a0..b45b037d2 100644
--- a/apps/space/components/issues/board-views/kanban/index.tsx
+++ b/apps/space/components/issues/board-views/kanban/index.tsx
@@ -5,6 +5,8 @@ import { observer } from "mobx-react-lite";
 // components
 import { IssueListHeader } from "components/issues/board-views/kanban/header";
 import { IssueListBlock } from "components/issues/board-views/kanban/block";
+// ui
+import { Icon } from "components/ui";
 // interfaces
 import { IIssueState, IIssue } from "types/issue";
 // mobx hook
@@ -32,8 +34,9 @@ export const IssueKanbanView = observer(() => {
                   ))}
                 </div>
               ) : (
-                <div className="relative w-full h-full flex justify-center items-center p-10 text-center text-sm text-custom-text-200">
-                  No Issues are available.
+                <div className="flex justify-center items-center gap-2 pt-10 text-center text-sm text-custom-text-200 font-medium">
+                  <Icon iconName="stack" />
+                  No issues in this state
                 </div>
               )}
             </div>
diff --git a/apps/space/pages/_document.tsx b/apps/space/pages/_document.tsx
index 91cf943a3..ca023f4a4 100644
--- a/apps/space/pages/_document.tsx
+++ b/apps/space/pages/_document.tsx
@@ -5,7 +5,7 @@ class MyDocument extends Document {
     return (
       <Html>
         <Head />
-        <body className="antialiased bg-custom-background-90 w-100">
+        <body className="antialiased bg-custom-background-100 w-100">
           <Main />
           <NextScript />
         </body>
diff --git a/apps/space/pages/index.tsx b/apps/space/pages/index.tsx
index 5501ea926..8f766cde2 100644
--- a/apps/space/pages/index.tsx
+++ b/apps/space/pages/index.tsx
@@ -126,7 +126,7 @@ const HomePage = () => {
                 </div>
                 <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
                   <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
-                  <GithubLoginButton handleSignIn={handleGitHubSignIn} />
+                  {/* <GithubLoginButton handleSignIn={handleGitHubSignIn} /> */}
                 </div>
               </div>
             </>