From ec01d1baeacedca301da14f99490f878143f3e02 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>
Date: Thu, 24 Aug 2023 20:15:41 +0530
Subject: [PATCH 1/7] feat: peak overview for issues

---
 .../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 |  80 ++++
 .../components/inbox/inbox-main-content.tsx   |  17 +-
 apps/app/components/inbox/index.ts            |   1 +
 apps/app/components/issues/activity.tsx       |  70 +---
 .../components/issues/description-form.tsx    |  81 ++--
 apps/app/components/issues/index.ts           |   1 +
 apps/app/components/issues/main-content.tsx   |  67 +++-
 .../issues/peak-overview/header.tsx           |  78 ++++
 .../components/issues/peak-overview/index.ts  |   5 +
 .../issues/peak-overview/issue-activity.tsx   |  66 ++++
 .../issues/peak-overview/issue-details.tsx    |  34 ++
 .../issues/peak-overview/issue-properties.tsx | 186 +++++++++
 .../issues/peak-overview/layout.tsx           | 112 ++++++
 .../issues/sidebar-select/assignee.tsx        |  60 +--
 .../issues/sidebar-select/estimate.tsx        |  86 ++--
 .../issues/sidebar-select/priority.tsx        |  75 ++--
 .../issues/sidebar-select/state.tsx           | 109 +++--
 apps/app/components/issues/sidebar.tsx        | 129 +++---
 21 files changed, 1086 insertions(+), 549 deletions(-)
 create mode 100644 apps/app/components/inbox/inbox-issue-activity.tsx
 create mode 100644 apps/app/components/issues/peak-overview/header.tsx
 create mode 100644 apps/app/components/issues/peak-overview/index.ts
 create mode 100644 apps/app/components/issues/peak-overview/issue-activity.tsx
 create mode 100644 apps/app/components/issues/peak-overview/issue-details.tsx
 create mode 100644 apps/app/components/issues/peak-overview/issue-properties.tsx
 create mode 100644 apps/app/components/issues/peak-overview/layout.tsx

diff --git a/apps/app/components/core/views/issues-view.tsx b/apps/app/components/core/views/issues-view.tsx
index d3d76f80552..48b47d0818a 100644
--- a/apps/app/components/core/views/issues-view.tsx
+++ b/apps/app/components/core/views/issues-view.tsx
@@ -546,7 +546,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 7e8fd0d26bc..37a7817bf55 100644
--- a/apps/app/components/core/views/spreadsheet-view/single-issue.tsx
+++ b/apps/app/components/core/views/spreadsheet-view/single-issue.tsx
@@ -7,6 +7,7 @@ import { mutate } from "swr";
 
 // components
 import {
+  IssuePeakOverview,
   ViewAssigneeSelect,
   ViewDueDateSelect,
   ViewEstimateSelect,
@@ -75,6 +76,11 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
   nestingLevel,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+
+  // issue peak overview
+  const [issuePeakOverview, setIssuePeakOverview] = useState(false);
+  const [issuePeakOverviewData, setIssuePeakOverviewData] = useState<IIssue | null>(null);
+
   const router = useRouter();
 
   const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
@@ -95,7 +101,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 +122,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           },
           false
         );
-      } else {
+      else
         mutate<IIssue[]>(
           fetchKey,
           (prevData) =>
@@ -131,7 +137,6 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             }),
           false
         );
-      }
 
       issuesService
         .patchIssue(
@@ -158,6 +163,11 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
     [workspaceSlug, projectId, cycleId, moduleId, viewId, params, user]
   );
 
+  const openPeakOverview = useCallback((issue: IIssue) => {
+    setIssuePeakOverviewData(issue);
+    setIssuePeakOverview(true);
+  }, []);
+
   const handleCopyText = () => {
     const originURL =
       typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
@@ -179,190 +189,202 @@ 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);
-                        }}
+    <>
+      <IssuePeakOverview
+        handleUpdateIssue={async (formData) => partialUpdateIssue(formData, issue)}
+        issue={issuePeakOverviewData}
+        isOpen={issuePeakOverview}
+        onClose={() => setIssuePeakOverview(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={() => openPeakOverview(issue)}
+          >
             {issue.name}
-          </a>
-        </Link>
-      </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} />
+          </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.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.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 a4f426a2369..0b2e785d68f 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 00000000000..6d586449cee
--- /dev/null
+++ b/apps/app/components/inbox/inbox-issue-activity.tsx
@@ -0,0 +1,80 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// components
+import { AddComment, IssueActivitySection } from "components/issues";
+// services
+import issuesService from "services/issues.service";
+// hooks
+import useUser from "hooks/use-user";
+// 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 { 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());
+  };
+
+  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 issueId={issueDetails.id} user={user} />
+    </div>
+  );
+};
diff --git a/apps/app/components/inbox/inbox-main-content.tsx b/apps/app/components/inbox/inbox-main-content.tsx
index bd4f0ab01fd..6d4a4337c0f 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 38cea0348af..8301d25700c 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 8dd948e083e..5a82907f2f8 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 { 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());
-  };
+  const { workspaceSlug } = router.query;
 
-  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/description-form.tsx b/apps/app/components/issues/description-form.tsx
index 5561b1b99ec..48c42c47fb1 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 1c9fa9ddbbb..72c38cfcc29 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 "./peak-overview";
diff --git a/apps/app/components/issues/main-content.tsx b/apps/app/components/issues/main-content.tsx
index da48969e32b..3525fef3f0e 100644
--- a/apps/app/components/issues/main-content.tsx
+++ b/apps/app/components/issues/main-content.tsx
@@ -25,9 +25,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;
@@ -50,15 +50,58 @@ 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());
+  };
+
   return (
     <>
       <div className="rounded-lg">
@@ -97,8 +140,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,8 +190,9 @@ 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}
+          activity={issueActivity}
+          handleCommentUpdate={handleCommentUpdate}
+          handleCommentDelete={handleCommentDelete}
         />
         <AddComment
           issueId={(archivedIssueId as string) ?? (issueId as string)}
diff --git a/apps/app/components/issues/peak-overview/header.tsx b/apps/app/components/issues/peak-overview/header.tsx
new file mode 100644
index 00000000000..d03c0b2a1d8
--- /dev/null
+++ b/apps/app/components/issues/peak-overview/header.tsx
@@ -0,0 +1,78 @@
+// ui
+import { CustomSelect, Icon } from "components/ui";
+// types
+import { IIssue } from "types";
+import { TPeakOverviewModes } from "./layout";
+
+type Props = {
+  handleClose: () => void;
+  issue: IIssue;
+  mode: TPeakOverviewModes;
+  setMode: (mode: TPeakOverviewModes) => void;
+};
+
+const peekModes: {
+  key: TPeakOverviewModes;
+  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 PeakOverviewHeader: React.FC<Props> = ({ issue, handleClose, mode, setMode }) => (
+  <div className="flex justify-between items-center">
+    <div className="flex items-center gap-4">
+      {mode === "side" && (
+        <button type="button" onClick={handleClose}>
+          <Icon iconName="arrow_right_alt" className="!text-base" />
+        </button>
+      )}
+      {mode === "modal" ? (
+        <button type="button" onClick={() => setMode("side")}>
+          <Icon iconName="close_fullscreen" />
+        </button>
+      ) : (
+        <button type="button" onClick={() => setMode("modal")}>
+          <Icon iconName="open_in_full" />
+        </button>
+      )}
+      <CustomSelect
+        value={mode}
+        onChange={(val: TPeakOverviewModes) => setMode(val)}
+        customButton={
+          <button type="button" className="grid place-items-center">
+            <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.label}
+            </div>
+          </CustomSelect.Option>
+        ))}
+      </CustomSelect>
+    </div>
+    <div className="flex items-center gap-2">
+      <button type="button" className="-rotate-45">
+        <Icon iconName="link" />
+      </button>
+      <button type="button">
+        <Icon iconName="delete" />
+      </button>
+    </div>
+  </div>
+);
diff --git a/apps/app/components/issues/peak-overview/index.ts b/apps/app/components/issues/peak-overview/index.ts
new file mode 100644
index 00000000000..9f3b470c95e
--- /dev/null
+++ b/apps/app/components/issues/peak-overview/index.ts
@@ -0,0 +1,5 @@
+export * from "./header";
+export * from "./issue-activity";
+export * from "./issue-details";
+export * from "./issue-properties";
+export * from "./layout";
diff --git a/apps/app/components/issues/peak-overview/issue-activity.tsx b/apps/app/components/issues/peak-overview/issue-activity.tsx
new file mode 100644
index 00000000000..f74dbef3177
--- /dev/null
+++ b/apps/app/components/issues/peak-overview/issue-activity.tsx
@@ -0,0 +1,66 @@
+import useSWR from "swr";
+
+// services
+import issuesService from "services/issues.service";
+// components
+import { IssueActivitySection } from "components/issues";
+// types
+import { IIssue, IIssueComment } from "types";
+// fetch-keys
+import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+import useUser from "hooks/use-user";
+
+type Props = {
+  workspaceSlug: string;
+  issue: IIssue;
+  readOnly: boolean;
+};
+
+export const PeakOverviewIssueActivity: React.FC<Props> = ({ workspaceSlug, issue, readOnly }) => {
+  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());
+  };
+
+  return (
+    <div>
+      <h4 className="font-medium">Activity</h4>
+      <div className="mt-6">
+        <IssueActivitySection
+          activity={issueActivity}
+          handleCommentUpdate={handleCommentUpdate}
+          handleCommentDelete={handleCommentDelete}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/issues/peak-overview/issue-details.tsx b/apps/app/components/issues/peak-overview/issue-details.tsx
new file mode 100644
index 00000000000..56f699e27db
--- /dev/null
+++ b/apps/app/components/issues/peak-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 PeakOverviewIssueDetails: 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/peak-overview/issue-properties.tsx b/apps/app/components/issues/peak-overview/issue-properties.tsx
new file mode 100644
index 00000000000..b54113cbd3a
--- /dev/null
+++ b/apps/app/components/issues/peak-overview/issue-properties.tsx
@@ -0,0 +1,186 @@
+// headless ui
+import { Disclosure } from "@headlessui/react";
+// components
+import {
+  SidebarAssigneeSelect,
+  SidebarEstimateSelect,
+  SidebarPrioritySelect,
+  SidebarStateSelect,
+} from "components/issues";
+// icons
+import { CustomDatePicker, Icon } from "components/ui";
+// helpers
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  onChange: (issueProperty: Partial<IIssue>) => void;
+  readOnly: boolean;
+};
+
+export const PeakOverviewIssueProperties: React.FC<Props> = ({ issue, onChange, readOnly }) => {
+  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());
+
+  return (
+    <div className="space-y-4">
+      <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" />
+          State
+        </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" />
+          Assignees
+        </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" />
+          Priority
+        </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" />
+          Start date
+        </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" />
+          Due date
+        </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" />
+          Estimate
+        </div>
+        <div className="w-3/4">
+          <SidebarEstimateSelect
+            value={issue.estimate_point}
+            onChange={(val: number | null) => onChange({ estimate_point: 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="supervised_user_circle" className="!text-base" />
+          Parent
+        </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">
+              <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" />
+                  State
+                </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" />
+                  Assignees
+                </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" />
+                  Due date
+                </div>
+                <div>
+                  {issue.target_date ? (
+                    renderShortDateWithYearFormat(issue.target_date)
+                  ) : (
+                    <span className="text-custom-text-200">Empty</span>
+                  )}
+                </div>
+              </div>
+            </Disclosure.Panel>
+          </>
+        )}
+      </Disclosure>
+    </div>
+  );
+};
diff --git a/apps/app/components/issues/peak-overview/layout.tsx b/apps/app/components/issues/peak-overview/layout.tsx
new file mode 100644
index 00000000000..65d08eb0850
--- /dev/null
+++ b/apps/app/components/issues/peak-overview/layout.tsx
@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+import {
+  PeakOverviewHeader,
+  PeakOverviewIssueActivity,
+  PeakOverviewIssueDetails,
+  PeakOverviewIssueProperties,
+} from "components/issues";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  handleUpdateIssue: (issue: Partial<IIssue>) => Promise<void>;
+  issue: IIssue | null;
+  isOpen: boolean;
+  onClose: () => void;
+  workspaceSlug: string;
+  readOnly: boolean;
+};
+
+export type TPeakOverviewModes = "side" | "modal" | "full";
+
+export const IssuePeakOverview: React.FC<Props> = ({
+  handleUpdateIssue,
+  issue,
+  isOpen,
+  onClose,
+  workspaceSlug,
+  readOnly,
+}) => {
+  const [peakOverviewMode, setPeakOverviewMode] = useState<TPeakOverviewModes>("side");
+
+  const handleClose = () => {
+    onClose();
+    setPeakOverviewMode("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 */}
+        {(peakOverviewMode === "modal" || peakOverviewMode === "full") && (
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+        )}
+
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="translate-x-full sm:translate-x-0"
+          enterTo="translate-x-0"
+          leave="ease-in duration-300"
+          leaveFrom="translate-x-0"
+          leaveTo="translate-x-full sm:translate-x-0"
+        >
+          <Dialog.Panel
+            className={`fixed z-20 bg-custom-background-100 ${
+              peakOverviewMode === "side"
+                ? "top-0 right-0 h-full w-1/2"
+                : peakOverviewMode === "modal"
+                ? "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[70%] w-3/5 rounded-lg"
+                : "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[95%] w-[95%] rounded-lg"
+            }`}
+          >
+            <div className="flex flex-col h-full w-full overflow-hidden">
+              <div className="p-5">
+                <PeakOverviewHeader
+                  handleClose={handleClose}
+                  issue={issue}
+                  mode={peakOverviewMode}
+                  setMode={setPeakOverviewMode}
+                />
+              </div>
+              <div className="px-6 py-5 h-full w-full overflow-y-auto">
+                {/* issue title and description */}
+                <div className="w-full">
+                  <PeakOverviewIssueDetails
+                    handleUpdateIssue={handleUpdateIssue}
+                    issue={issue}
+                    readOnly={readOnly}
+                    workspaceSlug={workspaceSlug}
+                  />
+                </div>
+                {/* issue properties */}
+                <div className="mt-10 w-full">
+                  <PeakOverviewIssueProperties
+                    issue={issue}
+                    onChange={handleUpdateIssue}
+                    readOnly={readOnly}
+                  />
+                </div>
+                {/* divider */}
+                <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
+                {/* issue activity/comments */}
+                <div className="w-full">
+                  <PeakOverviewIssueActivity
+                    workspaceSlug={workspaceSlug}
+                    issue={issue}
+                    readOnly={readOnly}
+                  />
+                </div>
+              </div>
+            </div>
+          </Dialog.Panel>
+        </Transition.Child>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/apps/app/components/issues/sidebar-select/assignee.tsx b/apps/app/components/issues/sidebar-select/assignee.tsx
index 323d201e8eb..fb24b56b58d 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,26 @@ 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}
+      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>
-          }
-          options={options}
-          onChange={onChange}
-          position="right"
-          multiple
-          disabled={isNotAllowed}
-        />
-      </div>
-    </div>
+          ) : (
+            "No assignees"
+          )}
+        </div>
+      }
+      options={options}
+      onChange={onChange}
+      position="right"
+      multiple
+      disabled={disabled}
+    />
   );
 };
diff --git a/apps/app/components/issues/sidebar-select/estimate.tsx b/apps/app/components/issues/sidebar-select/estimate.tsx
index ab8bfac1541..0f1e39bc33f 100644
--- a/apps/app/components/issues/sidebar-select/estimate.tsx
+++ b/apps/app/components/issues/sidebar-select/estimate.tsx
@@ -6,75 +6,57 @@ 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.Option value={null}>
+    <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={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 a97fe06fbbf..c1a55246245 100644
--- a/apps/app/components/issues/sidebar-select/priority.tsx
+++ b/apps/app/components/issues/sidebar-select/priority.tsx
@@ -3,62 +3,41 @@ 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>
+export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabled = false }) => (
+  <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>
-    </div>
-  );
-};
+    }
+    value={value}
+    onChange={onChange}
+    width="w-full"
+    position="right"
+    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 b1751b070c0..f090d9f32d6 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,50 @@ 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>
-            )
-          ) : (
-            <Spinner />
-          )}
-        </CustomSelect>
-      </div>
-    </div>
+    <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={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 6ae7eccb8d6..366e57ba7a6 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 97342277cc55dbbf9dae6d6509a44547409846a6 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>
Date: Thu, 24 Aug 2023 23:53:22 +0530
Subject: [PATCH 2/7] fix: peek spelling

---
 .../views/spreadsheet-view/single-issue.tsx   | 25 +++++++-------
 apps/app/components/issues/index.ts           |  2 +-
 .../header.tsx                                | 12 +++----
 .../{peak-overview => peek-overview}/index.ts |  0
 .../issue-activity.tsx                        |  2 +-
 .../issue-details.tsx                         |  2 +-
 .../issue-properties.tsx                      |  2 +-
 .../layout.tsx                                | 34 +++++++++----------
 8 files changed, 39 insertions(+), 40 deletions(-)
 rename apps/app/components/issues/{peak-overview => peek-overview}/header.tsx (87%)
 rename apps/app/components/issues/{peak-overview => peek-overview}/index.ts (100%)
 rename apps/app/components/issues/{peak-overview => peek-overview}/issue-activity.tsx (96%)
 rename apps/app/components/issues/{peak-overview => peek-overview}/issue-details.tsx (93%)
 rename apps/app/components/issues/{peak-overview => peek-overview}/issue-properties.tsx (99%)
 rename apps/app/components/issues/{peak-overview => peek-overview}/layout.tsx (80%)

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 37a7817bf55..3d7cb575e5e 100644
--- a/apps/app/components/core/views/spreadsheet-view/single-issue.tsx
+++ b/apps/app/components/core/views/spreadsheet-view/single-issue.tsx
@@ -1,13 +1,12 @@
 import React, { useCallback, useState } from "react";
 
-import Link from "next/link";
 import { useRouter } from "next/router";
 
 import { mutate } from "swr";
 
 // components
 import {
-  IssuePeakOverview,
+  IssuePeekOverview,
   ViewAssigneeSelect,
   ViewDueDateSelect,
   ViewEstimateSelect,
@@ -77,9 +76,9 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  // issue peak overview
-  const [issuePeakOverview, setIssuePeakOverview] = useState(false);
-  const [issuePeakOverviewData, setIssuePeakOverviewData] = useState<IIssue | null>(null);
+  // issue peek overview
+  const [issuePeekOverview, setIssuePeekOverview] = useState(false);
+  const [issuePeekOverviewData, setIssuePeekOverviewData] = useState<IIssue | null>(null);
 
   const router = useRouter();
 
@@ -163,9 +162,9 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
     [workspaceSlug, projectId, cycleId, moduleId, viewId, params, user]
   );
 
-  const openPeakOverview = useCallback((issue: IIssue) => {
-    setIssuePeakOverviewData(issue);
-    setIssuePeakOverview(true);
+  const openPeekOverview = useCallback((issue: IIssue) => {
+    setIssuePeekOverviewData(issue);
+    setIssuePeekOverview(true);
   }, []);
 
   const handleCopyText = () => {
@@ -190,11 +189,11 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
 
   return (
     <>
-      <IssuePeakOverview
+      <IssuePeekOverview
         handleUpdateIssue={async (formData) => partialUpdateIssue(formData, issue)}
-        issue={issuePeakOverviewData}
-        isOpen={issuePeakOverview}
-        onClose={() => setIssuePeakOverview(false)}
+        issue={issuePeekOverviewData}
+        isOpen={issuePeekOverview}
+        onClose={() => setIssuePeekOverview(false)}
         workspaceSlug={workspaceSlug?.toString() ?? ""}
         readOnly={isNotAllowed}
       />
@@ -286,7 +285,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={() => openPeakOverview(issue)}
+            onClick={() => openPeekOverview(issue)}
           >
             {issue.name}
           </button>
diff --git a/apps/app/components/issues/index.ts b/apps/app/components/issues/index.ts
index 72c38cfcc29..d0ab71e1caa 100644
--- a/apps/app/components/issues/index.ts
+++ b/apps/app/components/issues/index.ts
@@ -15,4 +15,4 @@ export * from "./sidebar";
 export * from "./sub-issues-list";
 export * from "./label";
 export * from "./issue-reaction";
-export * from "./peak-overview";
+export * from "./peek-overview";
diff --git a/apps/app/components/issues/peak-overview/header.tsx b/apps/app/components/issues/peek-overview/header.tsx
similarity index 87%
rename from apps/app/components/issues/peak-overview/header.tsx
rename to apps/app/components/issues/peek-overview/header.tsx
index d03c0b2a1d8..5c6a14389c1 100644
--- a/apps/app/components/issues/peak-overview/header.tsx
+++ b/apps/app/components/issues/peek-overview/header.tsx
@@ -2,17 +2,17 @@
 import { CustomSelect, Icon } from "components/ui";
 // types
 import { IIssue } from "types";
-import { TPeakOverviewModes } from "./layout";
+import { TPeekOverviewModes } from "./layout";
 
 type Props = {
   handleClose: () => void;
   issue: IIssue;
-  mode: TPeakOverviewModes;
-  setMode: (mode: TPeakOverviewModes) => void;
+  mode: TPeekOverviewModes;
+  setMode: (mode: TPeekOverviewModes) => void;
 };
 
 const peekModes: {
-  key: TPeakOverviewModes;
+  key: TPeekOverviewModes;
   icon: string;
   label: string;
 }[] = [
@@ -29,7 +29,7 @@ const peekModes: {
   },
 ];
 
-export const PeakOverviewHeader: React.FC<Props> = ({ issue, handleClose, mode, setMode }) => (
+export const PeekOverviewHeader: React.FC<Props> = ({ issue, handleClose, mode, setMode }) => (
   <div className="flex justify-between items-center">
     <div className="flex items-center gap-4">
       {mode === "side" && (
@@ -48,7 +48,7 @@ export const PeakOverviewHeader: React.FC<Props> = ({ issue, handleClose, mode,
       )}
       <CustomSelect
         value={mode}
-        onChange={(val: TPeakOverviewModes) => setMode(val)}
+        onChange={(val: TPeekOverviewModes) => setMode(val)}
         customButton={
           <button type="button" className="grid place-items-center">
             <Icon iconName={peekModes.find((m) => m.key === mode)?.icon ?? ""} />
diff --git a/apps/app/components/issues/peak-overview/index.ts b/apps/app/components/issues/peek-overview/index.ts
similarity index 100%
rename from apps/app/components/issues/peak-overview/index.ts
rename to apps/app/components/issues/peek-overview/index.ts
diff --git a/apps/app/components/issues/peak-overview/issue-activity.tsx b/apps/app/components/issues/peek-overview/issue-activity.tsx
similarity index 96%
rename from apps/app/components/issues/peak-overview/issue-activity.tsx
rename to apps/app/components/issues/peek-overview/issue-activity.tsx
index f74dbef3177..9e3ccf78811 100644
--- a/apps/app/components/issues/peak-overview/issue-activity.tsx
+++ b/apps/app/components/issues/peek-overview/issue-activity.tsx
@@ -16,7 +16,7 @@ type Props = {
   readOnly: boolean;
 };
 
-export const PeakOverviewIssueActivity: React.FC<Props> = ({ workspaceSlug, issue, readOnly }) => {
+export const PeekOverviewIssueActivity: React.FC<Props> = ({ workspaceSlug, issue, readOnly }) => {
   const { user } = useUser();
 
   const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
diff --git a/apps/app/components/issues/peak-overview/issue-details.tsx b/apps/app/components/issues/peek-overview/issue-details.tsx
similarity index 93%
rename from apps/app/components/issues/peak-overview/issue-details.tsx
rename to apps/app/components/issues/peek-overview/issue-details.tsx
index 56f699e27db..5b9db8dbd5e 100644
--- a/apps/app/components/issues/peak-overview/issue-details.tsx
+++ b/apps/app/components/issues/peek-overview/issue-details.tsx
@@ -10,7 +10,7 @@ type Props = {
   workspaceSlug: string;
 };
 
-export const PeakOverviewIssueDetails: React.FC<Props> = ({
+export const PeekOverviewIssueDetails: React.FC<Props> = ({
   handleUpdateIssue,
   issue,
   readOnly,
diff --git a/apps/app/components/issues/peak-overview/issue-properties.tsx b/apps/app/components/issues/peek-overview/issue-properties.tsx
similarity index 99%
rename from apps/app/components/issues/peak-overview/issue-properties.tsx
rename to apps/app/components/issues/peek-overview/issue-properties.tsx
index b54113cbd3a..688096733cf 100644
--- a/apps/app/components/issues/peak-overview/issue-properties.tsx
+++ b/apps/app/components/issues/peek-overview/issue-properties.tsx
@@ -20,7 +20,7 @@ type Props = {
   readOnly: boolean;
 };
 
-export const PeakOverviewIssueProperties: React.FC<Props> = ({ issue, onChange, readOnly }) => {
+export const PeekOverviewIssueProperties: React.FC<Props> = ({ issue, onChange, readOnly }) => {
   const startDate = issue.start_date;
   const targetDate = issue.target_date;
 
diff --git a/apps/app/components/issues/peak-overview/layout.tsx b/apps/app/components/issues/peek-overview/layout.tsx
similarity index 80%
rename from apps/app/components/issues/peak-overview/layout.tsx
rename to apps/app/components/issues/peek-overview/layout.tsx
index 65d08eb0850..d83f6a07e8e 100644
--- a/apps/app/components/issues/peak-overview/layout.tsx
+++ b/apps/app/components/issues/peek-overview/layout.tsx
@@ -3,10 +3,10 @@ import React, { useState } from "react";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 import {
-  PeakOverviewHeader,
-  PeakOverviewIssueActivity,
-  PeakOverviewIssueDetails,
-  PeakOverviewIssueProperties,
+  PeekOverviewHeader,
+  PeekOverviewIssueActivity,
+  PeekOverviewIssueDetails,
+  PeekOverviewIssueProperties,
 } from "components/issues";
 // types
 import { IIssue } from "types";
@@ -20,9 +20,9 @@ type Props = {
   readOnly: boolean;
 };
 
-export type TPeakOverviewModes = "side" | "modal" | "full";
+export type TPeekOverviewModes = "side" | "modal" | "full";
 
-export const IssuePeakOverview: React.FC<Props> = ({
+export const IssuePeekOverview: React.FC<Props> = ({
   handleUpdateIssue,
   issue,
   isOpen,
@@ -30,11 +30,11 @@ export const IssuePeakOverview: React.FC<Props> = ({
   workspaceSlug,
   readOnly,
 }) => {
-  const [peakOverviewMode, setPeakOverviewMode] = useState<TPeakOverviewModes>("side");
+  const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
 
   const handleClose = () => {
     onClose();
-    setPeakOverviewMode("side");
+    setPeekOverviewMode("side");
   };
 
   if (!issue || !isOpen) return null;
@@ -43,7 +43,7 @@ export const IssuePeakOverview: React.FC<Props> = ({
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         {/* add backdrop conditionally */}
-        {(peakOverviewMode === "modal" || peakOverviewMode === "full") && (
+        {(peekOverviewMode === "modal" || peekOverviewMode === "full") && (
           <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         )}
 
@@ -58,26 +58,26 @@ export const IssuePeakOverview: React.FC<Props> = ({
         >
           <Dialog.Panel
             className={`fixed z-20 bg-custom-background-100 ${
-              peakOverviewMode === "side"
+              peekOverviewMode === "side"
                 ? "top-0 right-0 h-full w-1/2"
-                : peakOverviewMode === "modal"
+                : peekOverviewMode === "modal"
                 ? "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[70%] w-3/5 rounded-lg"
                 : "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[95%] w-[95%] rounded-lg"
             }`}
           >
             <div className="flex flex-col h-full w-full overflow-hidden">
               <div className="p-5">
-                <PeakOverviewHeader
+                <PeekOverviewHeader
                   handleClose={handleClose}
                   issue={issue}
-                  mode={peakOverviewMode}
-                  setMode={setPeakOverviewMode}
+                  mode={peekOverviewMode}
+                  setMode={setPeekOverviewMode}
                 />
               </div>
               <div className="px-6 py-5 h-full w-full overflow-y-auto">
                 {/* issue title and description */}
                 <div className="w-full">
-                  <PeakOverviewIssueDetails
+                  <PeekOverviewIssueDetails
                     handleUpdateIssue={handleUpdateIssue}
                     issue={issue}
                     readOnly={readOnly}
@@ -86,7 +86,7 @@ export const IssuePeakOverview: React.FC<Props> = ({
                 </div>
                 {/* issue properties */}
                 <div className="mt-10 w-full">
-                  <PeakOverviewIssueProperties
+                  <PeekOverviewIssueProperties
                     issue={issue}
                     onChange={handleUpdateIssue}
                     readOnly={readOnly}
@@ -96,7 +96,7 @@ export const IssuePeakOverview: React.FC<Props> = ({
                 <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
                 {/* issue activity/comments */}
                 <div className="w-full">
-                  <PeakOverviewIssueActivity
+                  <PeekOverviewIssueActivity
                     workspaceSlug={workspaceSlug}
                     issue={issue}
                     readOnly={readOnly}

From d3b303c3cd2940d3f66ea9042f0da29fa7f5b2c8 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>
Date: Thu, 24 Aug 2023 23:58:47 +0530
Subject: [PATCH 3/7] chore: truncate issue property labels

---
 .../issues/peek-overview/issue-properties.tsx | 58 +++++--------------
 1 file changed, 13 insertions(+), 45 deletions(-)

diff --git a/apps/app/components/issues/peek-overview/issue-properties.tsx b/apps/app/components/issues/peek-overview/issue-properties.tsx
index 688096733cf..a44784dc377 100644
--- a/apps/app/components/issues/peek-overview/issue-properties.tsx
+++ b/apps/app/components/issues/peek-overview/issue-properties.tsx
@@ -9,8 +9,6 @@ import {
 } from "components/issues";
 // icons
 import { CustomDatePicker, Icon } from "components/ui";
-// helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
 import { IIssue } from "types";
 
@@ -34,8 +32,8 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issue, onChange,
     <div className="space-y-4">
       <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" />
-          State
+          <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
@@ -47,8 +45,8 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issue, onChange,
       </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" />
-          Assignees
+          <Icon iconName="group" className="!text-base flex-shrink-0" />
+          <span className="flex-grow truncate">Assignees</span>
         </div>
         <div className="w-3/4">
           <SidebarAssigneeSelect
@@ -60,8 +58,8 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issue, onChange,
       </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" />
-          Priority
+          <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
@@ -73,8 +71,8 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issue, onChange,
       </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" />
-          Start date
+          <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
+          <span className="flex-grow truncate">Start date</span>
         </div>
         <div>
           {issue.start_date ? (
@@ -98,8 +96,8 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issue, onChange,
       </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" />
-          Due date
+          <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
+          <span className="flex-grow truncate">Due date</span>
         </div>
         <div>
           {issue.target_date ? (
@@ -123,8 +121,8 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issue, onChange,
       </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" />
-          Estimate
+          <Icon iconName="change_history" className="!text-base flex-shrink-0" />
+          <span className="flex-grow truncate">Estimate</span>
         </div>
         <div className="w-3/4">
           <SidebarEstimateSelect
@@ -134,12 +132,6 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issue, onChange,
           />
         </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="supervised_user_circle" className="!text-base" />
-          Parent
-        </div>
-      </div>
       <Disclosure as="div">
         {({ open }) => (
           <>
@@ -152,31 +144,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issue, onChange,
               <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-base" />
             </Disclosure.Button>
             <Disclosure.Panel as="div" className="mt-4 space-y-4">
-              <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" />
-                  State
-                </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" />
-                  Assignees
-                </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" />
-                  Due date
-                </div>
-                <div>
-                  {issue.target_date ? (
-                    renderShortDateWithYearFormat(issue.target_date)
-                  ) : (
-                    <span className="text-custom-text-200">Empty</span>
-                  )}
-                </div>
-              </div>
+              Disclosure Panel
             </Disclosure.Panel>
           </>
         )}

From 6c1ba9997a87ba3a8e5503c7bd997e032d37d1d2 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 25 Aug 2023 13:35:52 +0530
Subject: [PATCH 4/7] style: full screen view designed

---
 .../peek-overview/full-screen-peek-view.tsx   |  68 +++++
 .../issues/peek-overview/header.tsx           |  32 ++-
 .../components/issues/peek-overview/index.ts  |   2 +
 .../issues/peek-overview/issue-activity.tsx   |   2 +-
 .../issues/peek-overview/issue-properties.tsx | 246 ++++++++++--------
 .../issues/peek-overview/layout.tsx           | 107 ++++----
 .../issues/peek-overview/side-peek-view.tsx   |  64 +++++
 .../issues/sidebar-select/priority.tsx        |  27 +-
 .../issues/sidebar-select/state.tsx           |  40 +--
 9 files changed, 381 insertions(+), 207 deletions(-)
 create mode 100644 apps/app/components/issues/peek-overview/full-screen-peek-view.tsx
 create mode 100644 apps/app/components/issues/peek-overview/side-peek-view.tsx

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 00000000000..906e1e4435a
--- /dev/null
+++ b/apps/app/components/issues/peek-overview/full-screen-peek-view.tsx
@@ -0,0 +1,68 @@
+import {
+  PeekOverviewHeader,
+  PeekOverviewIssueActivity,
+  PeekOverviewIssueDetails,
+  PeekOverviewIssueProperties,
+  TPeekOverviewModes,
+} from "components/issues";
+import { IIssue } from "types";
+
+type Props = {
+  handleClose: () => 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,
+  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} issue={issue} mode={mode} setMode={setMode} />
+      </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
+          issue={issue}
+          mode="full"
+          onChange={handleUpdateIssue}
+          readOnly={readOnly}
+        />
+      </div>
+    </div>
+  </div>
+);
diff --git a/apps/app/components/issues/peek-overview/header.tsx b/apps/app/components/issues/peek-overview/header.tsx
index 5c6a14389c1..0b3ca98e42a 100644
--- a/apps/app/components/issues/peek-overview/header.tsx
+++ b/apps/app/components/issues/peek-overview/header.tsx
@@ -37,7 +37,7 @@ export const PeekOverviewHeader: React.FC<Props> = ({ issue, handleClose, mode,
           <Icon iconName="arrow_right_alt" className="!text-base" />
         </button>
       )}
-      {mode === "modal" ? (
+      {mode === "modal" || mode === "full" ? (
         <button type="button" onClick={() => setMode("side")}>
           <Icon iconName="close_fullscreen" />
         </button>
@@ -50,7 +50,10 @@ export const PeekOverviewHeader: React.FC<Props> = ({ issue, handleClose, mode,
         value={mode}
         onChange={(val: TPeekOverviewModes) => setMode(val)}
         customButton={
-          <button type="button" className="grid place-items-center">
+          <button
+            type="button"
+            className={`grid place-items-center ${mode === "full" ? "rotate-45" : ""}`}
+          >
             <Icon iconName={peekModes.find((m) => m.key === mode)?.icon ?? ""} />
           </button>
         }
@@ -59,20 +62,27 @@ export const PeekOverviewHeader: React.FC<Props> = ({ issue, handleClose, mode,
         {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" />
+              <Icon
+                iconName={mode.icon}
+                className={`!text-base flex-shrink-0 -my-1 ${
+                  mode.key === "full" ? "rotate-45" : ""
+                }`}
+              />
               {mode.label}
             </div>
           </CustomSelect.Option>
         ))}
       </CustomSelect>
     </div>
-    <div className="flex items-center gap-2">
-      <button type="button" className="-rotate-45">
-        <Icon iconName="link" />
-      </button>
-      <button type="button">
-        <Icon iconName="delete" />
-      </button>
-    </div>
+    {(mode === "side" || mode === "modal") && (
+      <div className="flex items-center gap-2">
+        <button type="button" className="-rotate-45">
+          <Icon iconName="link" />
+        </button>
+        <button type="button">
+          <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
index 9f3b470c95e..45edd51473d 100644
--- a/apps/app/components/issues/peek-overview/index.ts
+++ b/apps/app/components/issues/peek-overview/index.ts
@@ -1,5 +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
index 9e3ccf78811..c75515826a2 100644
--- a/apps/app/components/issues/peek-overview/issue-activity.tsx
+++ b/apps/app/components/issues/peek-overview/issue-activity.tsx
@@ -54,7 +54,7 @@ export const PeekOverviewIssueActivity: React.FC<Props> = ({ workspaceSlug, issu
   return (
     <div>
       <h4 className="font-medium">Activity</h4>
-      <div className="mt-6">
+      <div className="mt-4">
         <IssueActivitySection
           activity={issueActivity}
           handleCommentUpdate={handleCommentUpdate}
diff --git a/apps/app/components/issues/peek-overview/issue-properties.tsx b/apps/app/components/issues/peek-overview/issue-properties.tsx
index a44784dc377..de4420339dd 100644
--- a/apps/app/components/issues/peek-overview/issue-properties.tsx
+++ b/apps/app/components/issues/peek-overview/issue-properties.tsx
@@ -1,11 +1,13 @@
 // 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";
@@ -14,11 +16,17 @@ import { IIssue } from "types";
 
 type Props = {
   issue: IIssue;
+  mode: TPeekOverviewModes;
   onChange: (issueProperty: Partial<IIssue>) => void;
   readOnly: boolean;
 };
 
-export const PeekOverviewIssueProperties: React.FC<Props> = ({ issue, onChange, readOnly }) => {
+export const PeekOverviewIssueProperties: React.FC<Props> = ({
+  issue,
+  mode,
+  onChange,
+  readOnly,
+}) => {
   const startDate = issue.start_date;
   const targetDate = issue.target_date;
 
@@ -29,126 +37,144 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issue, onChange,
   maxDate?.setDate(maxDate.getDate());
 
   return (
-    <div className="space-y-4">
-      <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 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" className="-rotate-45">
+              <Icon iconName="link" />
+            </button>
+            <button type="button">
+              <Icon iconName="delete" />
+            </button>
+          </div>
         </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}
+      )}
+      <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}
             />
-          ) : (
-            <span className="text-custom-text-200">Empty</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 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>
-          {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}
+        <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}
             />
-          ) : (
-            <span className="text-custom-text-200">Empty</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="change_history" className="!text-base flex-shrink-0" />
-          <span className="flex-grow truncate">Estimate</span>
+        <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="w-3/4">
-          <SidebarEstimateSelect
-            value={issue.estimate_point}
-            onChange={(val: number | null) => onChange({ estimate_point: val })}
-            disabled={readOnly}
-          />
+        <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>
-      <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>
   );
 };
diff --git a/apps/app/components/issues/peek-overview/layout.tsx b/apps/app/components/issues/peek-overview/layout.tsx
index d83f6a07e8e..476549fc47d 100644
--- a/apps/app/components/issues/peek-overview/layout.tsx
+++ b/apps/app/components/issues/peek-overview/layout.tsx
@@ -2,12 +2,7 @@ import React, { useState } from "react";
 
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
-import {
-  PeekOverviewHeader,
-  PeekOverviewIssueActivity,
-  PeekOverviewIssueDetails,
-  PeekOverviewIssueProperties,
-} from "components/issues";
+import { FullScreenPeekView, SidePeekView } from "components/issues";
 // types
 import { IIssue } from "types";
 
@@ -44,68 +39,64 @@ export const IssuePeekOverview: React.FC<Props> = ({
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         {/* add backdrop conditionally */}
         {(peekOverviewMode === "modal" || peekOverviewMode === "full") && (
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
-        )}
-
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="translate-x-full sm:translate-x-0"
-          enterTo="translate-x-0"
-          leave="ease-in duration-300"
-          leaveFrom="translate-x-0"
-          leaveTo="translate-x-full sm:translate-x-0"
-        >
-          <Dialog.Panel
-            className={`fixed z-20 bg-custom-background-100 ${
-              peekOverviewMode === "side"
-                ? "top-0 right-0 h-full w-1/2"
-                : peekOverviewMode === "modal"
-                ? "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[70%] w-3/5 rounded-lg"
-                : "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[95%] w-[95%] rounded-lg"
-            }`}
+          <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="flex flex-col h-full w-full overflow-hidden">
-              <div className="p-5">
-                <PeekOverviewHeader
-                  handleClose={handleClose}
-                  issue={issue}
-                  mode={peekOverviewMode}
-                  setMode={setPeekOverviewMode}
-                />
-              </div>
-              <div className="px-6 py-5 h-full w-full overflow-y-auto">
-                {/* issue title and description */}
-                <div className="w-full">
-                  <PeekOverviewIssueDetails
+            <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}
                     handleUpdateIssue={handleUpdateIssue}
                     issue={issue}
+                    mode={peekOverviewMode}
                     readOnly={readOnly}
+                    setMode={(mode) => setPeekOverviewMode(mode)}
                     workspaceSlug={workspaceSlug}
                   />
-                </div>
-                {/* issue properties */}
-                <div className="mt-10 w-full">
-                  <PeekOverviewIssueProperties
+                )}
+                {peekOverviewMode === "full" && (
+                  <FullScreenPeekView
+                    handleClose={handleClose}
+                    handleUpdateIssue={handleUpdateIssue}
                     issue={issue}
-                    onChange={handleUpdateIssue}
+                    mode={peekOverviewMode}
                     readOnly={readOnly}
-                  />
-                </div>
-                {/* divider */}
-                <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
-                {/* issue activity/comments */}
-                <div className="w-full">
-                  <PeekOverviewIssueActivity
+                    setMode={(mode) => setPeekOverviewMode(mode)}
                     workspaceSlug={workspaceSlug}
-                    issue={issue}
-                    readOnly={readOnly}
                   />
-                </div>
-              </div>
-            </div>
-          </Dialog.Panel>
-        </Transition.Child>
+                )}
+              </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 00000000000..cee282ba45f
--- /dev/null
+++ b/apps/app/components/issues/peek-overview/side-peek-view.tsx
@@ -0,0 +1,64 @@
+import {
+  PeekOverviewHeader,
+  PeekOverviewIssueActivity,
+  PeekOverviewIssueDetails,
+  PeekOverviewIssueProperties,
+  TPeekOverviewModes,
+} from "components/issues";
+import { IIssue } from "types";
+
+type Props = {
+  handleClose: () => 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,
+  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} issue={issue} mode={mode} setMode={setMode} />
+    </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
+          issue={issue}
+          mode={mode}
+          onChange={handleUpdateIssue}
+          readOnly={readOnly}
+        />
+      </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>
+);
diff --git a/apps/app/components/issues/sidebar-select/priority.tsx b/apps/app/components/issues/sidebar-select/priority.tsx
index c1a55246245..4fd1975e56c 100644
--- a/apps/app/components/issues/sidebar-select/priority.tsx
+++ b/apps/app/components/issues/sidebar-select/priority.tsx
@@ -15,15 +15,26 @@ type Props = {
 
 export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabled = false }) => (
   <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")}
+    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"
+            : "border-custom-border-200"
+        }`}
+      >
+        <span className="grid place-items-center -my-1">
+          {getPriorityIcon(value ?? "None", "!text-sm")}
         </span>
-        <span className={`${value ? "text-custom-text-100" : "text-custom-text-200"}`}>
-          {value ?? "None"}
-        </span>
-      </div>
+        <span>{value ?? "None"}</span>
+      </button>
     }
     value={value}
     onChange={onChange}
diff --git a/apps/app/components/issues/sidebar-select/state.tsx b/apps/app/components/issues/sidebar-select/state.tsx
index f090d9f32d6..d9db3b15930 100644
--- a/apps/app/components/issues/sidebar-select/state.tsx
+++ b/apps/app/components/issues/sidebar-select/state.tsx
@@ -38,25 +38,27 @@ export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, disabled
 
   return (
     <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"
-        )
+      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>
+          ) : (
+            "None"
+          )}
+        </button>
       }
       value={value}
       onChange={onChange}

From 76f9572c165a5f50d38d7c91014a586d27b618e4 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 25 Aug 2023 14:50:47 +0530
Subject: [PATCH 5/7] chore: add comment section

---
 .../views/spreadsheet-view/single-issue.tsx   | 10 +--
 .../components/inbox/inbox-issue-activity.tsx | 30 ++++++++-
 .../components/issues/comment/add-comment.tsx | 65 +++++--------------
 apps/app/components/issues/main-content.tsx   | 34 ++++++++--
 .../issues/peek-overview/issue-activity.tsx   | 30 ++++++++-
 .../issues/peek-overview/issue-properties.tsx |  8 +--
 .../issues/peek-overview/side-peek-view.tsx   |  2 +-
 .../issues/sidebar-select/assignee.tsx        | 15 +++--
 .../issues/sidebar-select/estimate.tsx        | 15 ++---
 .../issues/sidebar-select/priority.tsx        |  3 +-
 .../issues/sidebar-select/state.tsx           |  4 +-
 11 files changed, 124 insertions(+), 92 deletions(-)

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 3d7cb575e5e..51ab4094039 100644
--- a/apps/app/components/core/views/spreadsheet-view/single-issue.tsx
+++ b/apps/app/components/core/views/spreadsheet-view/single-issue.tsx
@@ -78,7 +78,6 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
 
   // issue peek overview
   const [issuePeekOverview, setIssuePeekOverview] = useState(false);
-  const [issuePeekOverviewData, setIssuePeekOverviewData] = useState<IIssue | null>(null);
 
   const router = useRouter();
 
@@ -162,11 +161,6 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
     [workspaceSlug, projectId, cycleId, moduleId, viewId, params, user]
   );
 
-  const openPeekOverview = useCallback((issue: IIssue) => {
-    setIssuePeekOverviewData(issue);
-    setIssuePeekOverview(true);
-  }, []);
-
   const handleCopyText = () => {
     const originURL =
       typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
@@ -191,7 +185,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
     <>
       <IssuePeekOverview
         handleUpdateIssue={async (formData) => partialUpdateIssue(formData, issue)}
-        issue={issuePeekOverviewData}
+        issue={issue}
         isOpen={issuePeekOverview}
         onClose={() => setIssuePeekOverview(false)}
         workspaceSlug={workspaceSlug?.toString() ?? ""}
@@ -285,7 +279,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={() => openPeekOverview(issue)}
+            onClick={() => setIssuePeekOverview(true)}
           >
             {issue.name}
           </button>
diff --git a/apps/app/components/inbox/inbox-issue-activity.tsx b/apps/app/components/inbox/inbox-issue-activity.tsx
index 6d586449cee..efa2371626b 100644
--- a/apps/app/components/inbox/inbox-issue-activity.tsx
+++ b/apps/app/components/inbox/inbox-issue-activity.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
 
-import useSWR from "swr";
+import useSWR, { mutate } from "swr";
 
 // components
 import { AddComment, IssueActivitySection } from "components/issues";
@@ -8,6 +8,7 @@ import { AddComment, IssueActivitySection } from "components/issues";
 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
@@ -19,6 +20,8 @@ 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(
@@ -66,6 +69,29 @@ export const InboxIssueActivity: React.FC<Props> = ({ issueDetails }) => {
       .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>
@@ -74,7 +100,7 @@ export const InboxIssueActivity: React.FC<Props> = ({ issueDetails }) => {
         handleCommentUpdate={handleCommentUpdate}
         handleCommentDelete={handleCommentDelete}
       />
-      <AddComment issueId={issueDetails.id} user={user} />
+      <AddComment onSubmit={handleAddComment} />
     </div>
   );
 };
diff --git a/apps/app/components/issues/comment/add-comment.tsx b/apps/app/components/issues/comment/add-comment.tsx
index 9d00bf784a4..540577447dc 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,
-    setValue,
-    watch,
     formState: { isSubmitting },
+    handleSubmit,
     reset,
+    setValue,
+    watch,
   } = 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/main-content.tsx b/apps/app/components/issues/main-content.tsx
index 3525fef3f0e..ed559beb798 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
@@ -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();
 
@@ -102,6 +105,29 @@ export const IssueMainContent: React.FC<Props> = ({
       .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">
@@ -194,11 +220,7 @@ export const IssueMainContent: React.FC<Props> = ({
           handleCommentUpdate={handleCommentUpdate}
           handleCommentDelete={handleCommentDelete}
         />
-        <AddComment
-          issueId={(archivedIssueId as string) ?? (issueId as string)}
-          user={user}
-          disabled={uneditable}
-        />
+        <AddComment onSubmit={handleAddComment} disabled={uneditable} />
       </div>
     </>
   );
diff --git a/apps/app/components/issues/peek-overview/issue-activity.tsx b/apps/app/components/issues/peek-overview/issue-activity.tsx
index c75515826a2..975b01fb070 100644
--- a/apps/app/components/issues/peek-overview/issue-activity.tsx
+++ b/apps/app/components/issues/peek-overview/issue-activity.tsx
@@ -1,14 +1,16 @@
-import useSWR from "swr";
+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 { IssueActivitySection } from "components/issues";
+import { AddComment, IssueActivitySection } from "components/issues";
 // types
 import { IIssue, IIssueComment } from "types";
 // fetch-keys
 import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-import useUser from "hooks/use-user";
 
 type Props = {
   workspaceSlug: string;
@@ -17,6 +19,8 @@ type Props = {
 };
 
 export const PeekOverviewIssueActivity: React.FC<Props> = ({ workspaceSlug, issue, readOnly }) => {
+  const { setToastAlert } = useToast();
+
   const { user } = useUser();
 
   const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
@@ -51,6 +55,23 @@ export const PeekOverviewIssueActivity: React.FC<Props> = ({ workspaceSlug, issu
       .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>
@@ -60,6 +81,9 @@ export const PeekOverviewIssueActivity: React.FC<Props> = ({ workspaceSlug, issu
           handleCommentUpdate={handleCommentUpdate}
           handleCommentDelete={handleCommentDelete}
         />
+        <div className="mt-4">
+          <AddComment onSubmit={handleAddComment} />
+        </div>
       </div>
     </div>
   );
diff --git a/apps/app/components/issues/peek-overview/issue-properties.tsx b/apps/app/components/issues/peek-overview/issue-properties.tsx
index de4420339dd..7824452b30e 100644
--- a/apps/app/components/issues/peek-overview/issue-properties.tsx
+++ b/apps/app/components/issues/peek-overview/issue-properties.tsx
@@ -144,7 +144,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
             )}
           </div>
         </div>
-        <div className="flex items-center gap-2 text-sm">
+        {/* <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>
@@ -156,8 +156,8 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
               disabled={readOnly}
             />
           </div>
-        </div>
-        <Disclosure as="div">
+        </div> */}
+        {/* <Disclosure as="div">
           {({ open }) => (
             <>
               <Disclosure.Button
@@ -173,7 +173,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
               </Disclosure.Panel>
             </>
           )}
-        </Disclosure>
+        </Disclosure> */}
       </div>
     </div>
   );
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 cee282ba45f..f253eb3db2b 100644
--- a/apps/app/components/issues/peek-overview/side-peek-view.tsx
+++ b/apps/app/components/issues/peek-overview/side-peek-view.tsx
@@ -52,7 +52,7 @@ export const SidePeekView: React.FC<Props> = ({
       {/* divider */}
       <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
       {/* issue activity/comments */}
-      <div className="w-full">
+      <div className="w-full pb-5">
         <PeekOverviewIssueActivity
           workspaceSlug={workspaceSlug}
           issue={issue}
diff --git a/apps/app/components/issues/sidebar-select/assignee.tsx b/apps/app/components/issues/sidebar-select/assignee.tsx
index fb24b56b58d..ad7db744f48 100644
--- a/apps/app/components/issues/sidebar-select/assignee.tsx
+++ b/apps/app/components/issues/sidebar-select/assignee.tsx
@@ -43,21 +43,22 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabl
   return (
     <CustomSearchSelect
       value={value}
-      label={
-        <div className="flex items-center gap-2 text-custom-text-200">
+      customButton={
+        <>
           {value && value.length > 0 && Array.isArray(value) ? (
-            <div className="-my-0.5 flex items-center justify-center gap-2">
+            <div className="-my-0.5 flex items-center gap-2">
               <AssigneesList userIds={value} length={3} showLength={false} />
-              <span className="text-custom-text-100">{value.length} Assignees</span>
+              <span className="text-custom-text-100 text-sm">{value.length} Assignees</span>
             </div>
           ) : (
-            "No assignees"
+            <button type="button" className="bg-custom-background-80 px-2.5 py-0.5 text-sm rounded">
+              No assignees
+            </button>
           )}
-        </div>
+        </>
       }
       options={options}
       onChange={onChange}
-      position="right"
       multiple
       disabled={disabled}
     />
diff --git a/apps/app/components/issues/sidebar-select/estimate.tsx b/apps/app/components/issues/sidebar-select/estimate.tsx
index 0f1e39bc33f..06369414143 100644
--- a/apps/app/components/issues/sidebar-select/estimate.tsx
+++ b/apps/app/components/issues/sidebar-select/estimate.tsx
@@ -21,21 +21,20 @@ export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabl
   return (
     <CustomSelect
       value={value}
-      label={
-        <div className="flex items-center gap-2 text-xs">
+      customButton={
+        <button
+          type="button"
+          className="flex items-center gap-1.5 !text-sm bg-custom-background-80 rounded px-2.5 py-0.5"
+        >
           <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>
+          {estimatePoints?.find((e) => e.key === value)?.value ?? "No estimate"}
+        </button>
       }
       onChange={onChange}
-      position="right"
-      width="w-full"
       disabled={disabled}
     >
       <CustomSelect.Option value={null}>
diff --git a/apps/app/components/issues/sidebar-select/priority.tsx b/apps/app/components/issues/sidebar-select/priority.tsx
index 4fd1975e56c..e946bf6e8e0 100644
--- a/apps/app/components/issues/sidebar-select/priority.tsx
+++ b/apps/app/components/issues/sidebar-select/priority.tsx
@@ -38,8 +38,7 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabl
     }
     value={value}
     onChange={onChange}
-    width="w-full"
-    position="right"
+    optionsClassName="w-min"
     disabled={disabled}
   >
     {PRIORITIES.map((option) => (
diff --git a/apps/app/components/issues/sidebar-select/state.tsx b/apps/app/components/issues/sidebar-select/state.tsx
index d9db3b15930..a3874221f80 100644
--- a/apps/app/components/issues/sidebar-select/state.tsx
+++ b/apps/app/components/issues/sidebar-select/state.tsx
@@ -62,8 +62,8 @@ export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, disabled
       }
       value={value}
       onChange={onChange}
-      width="w-full"
-      position="right"
+      optionsClassName="w-min"
+      position="left"
       disabled={disabled}
     >
       {states ? (

From 0b514f2f30c20e10ce384636c354a2f2dcd31306 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 25 Aug 2023 15:14:28 +0530
Subject: [PATCH 6/7] chore: copy link and delete options added

---
 .../views/spreadsheet-view/single-issue.tsx   |   1 +
 .../peek-overview/full-screen-peek-view.tsx   |  13 +-
 .../issues/peek-overview/header.tsx           | 142 +++++++++++-------
 .../issues/peek-overview/issue-properties.tsx |  27 +++-
 .../issues/peek-overview/layout.tsx           |   4 +
 .../issues/peek-overview/side-peek-view.tsx   |  13 +-
 .../issues/sidebar-select/priority.tsx        |   2 +-
 7 files changed, 142 insertions(+), 60 deletions(-)

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 51ab4094039..11a8c42c55e 100644
--- a/apps/app/components/core/views/spreadsheet-view/single-issue.tsx
+++ b/apps/app/components/core/views/spreadsheet-view/single-issue.tsx
@@ -184,6 +184,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
   return (
     <>
       <IssuePeekOverview
+        handleDeleteIssue={() => handleDeleteIssue(issue)}
         handleUpdateIssue={async (formData) => partialUpdateIssue(formData, issue)}
         issue={issue}
         isOpen={issuePeekOverview}
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 906e1e4435a..d470f491088 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
@@ -9,6 +9,7 @@ import { IIssue } from "types";
 
 type Props = {
   handleClose: () => void;
+  handleDeleteIssue: () => void;
   handleUpdateIssue: (issue: Partial<IIssue>) => Promise<void>;
   issue: IIssue;
   mode: TPeekOverviewModes;
@@ -19,6 +20,7 @@ type Props = {
 
 export const FullScreenPeekView: React.FC<Props> = ({
   handleClose,
+  handleDeleteIssue,
   handleUpdateIssue,
   issue,
   mode,
@@ -29,7 +31,14 @@ export const FullScreenPeekView: React.FC<Props> = ({
   <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} issue={issue} mode={mode} setMode={setMode} />
+        <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 */}
@@ -57,10 +66,12 @@ export const FullScreenPeekView: React.FC<Props> = ({
       {/* 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>
diff --git a/apps/app/components/issues/peek-overview/header.tsx b/apps/app/components/issues/peek-overview/header.tsx
index 0b3ca98e42a..755561524bd 100644
--- a/apps/app/components/issues/peek-overview/header.tsx
+++ b/apps/app/components/issues/peek-overview/header.tsx
@@ -1,14 +1,20 @@
+// 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";
 
 type Props = {
   handleClose: () => void;
+  handleDeleteIssue: () => void;
   issue: IIssue;
   mode: TPeekOverviewModes;
   setMode: (mode: TPeekOverviewModes) => void;
+  workspaceSlug: string;
 };
 
 const peekModes: {
@@ -29,60 +35,86 @@ const peekModes: {
   },
 ];
 
-export const PeekOverviewHeader: React.FC<Props> = ({ issue, handleClose, mode, setMode }) => (
-  <div className="flex justify-between items-center">
-    <div className="flex items-center gap-4">
-      {mode === "side" && (
-        <button type="button" onClick={handleClose}>
-          <Icon iconName="arrow_right_alt" className="!text-base" />
-        </button>
-      )}
-      {mode === "modal" || mode === "full" ? (
-        <button type="button" onClick={() => setMode("side")}>
-          <Icon iconName="close_fullscreen" />
-        </button>
-      ) : (
-        <button type="button" onClick={() => setMode("modal")}>
-          <Icon iconName="open_in_full" />
-        </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 ?? ""} />
+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}>
+            <Icon iconName="arrow_right_alt" className="!text-base" />
           </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" className="-rotate-45">
-          <Icon iconName="link" />
-        </button>
-        <button type="button">
-          <Icon iconName="delete" />
-        </button>
+        )}
+        {mode === "modal" || mode === "full" ? (
+          <button type="button" onClick={() => setMode("side")}>
+            <Icon iconName="close_fullscreen" />
+          </button>
+        ) : (
+          <button type="button" onClick={() => setMode("modal")}>
+            <Icon iconName="open_in_full" />
+          </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>
-    )}
-  </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/issue-properties.tsx b/apps/app/components/issues/peek-overview/issue-properties.tsx
index 7824452b30e..bf1ecefd993 100644
--- a/apps/app/components/issues/peek-overview/issue-properties.tsx
+++ b/apps/app/components/issues/peek-overview/issue-properties.tsx
@@ -11,22 +11,30 @@ import {
 } 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;
 
@@ -36,6 +44,21 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
   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" && (
@@ -45,10 +68,10 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
             {issue.project_detail.identifier}-{issue.sequence_id}
           </h6>
           <div className="flex items-center gap-2">
-            <button type="button" className="-rotate-45">
+            <button type="button" onClick={handleCopyLink} className="-rotate-45">
               <Icon iconName="link" />
             </button>
-            <button type="button">
+            <button type="button" onClick={handleDeleteIssue}>
               <Icon iconName="delete" />
             </button>
           </div>
diff --git a/apps/app/components/issues/peek-overview/layout.tsx b/apps/app/components/issues/peek-overview/layout.tsx
index 476549fc47d..7196052f8db 100644
--- a/apps/app/components/issues/peek-overview/layout.tsx
+++ b/apps/app/components/issues/peek-overview/layout.tsx
@@ -7,6 +7,7 @@ import { FullScreenPeekView, SidePeekView } from "components/issues";
 import { IIssue } from "types";
 
 type Props = {
+  handleDeleteIssue: () => void;
   handleUpdateIssue: (issue: Partial<IIssue>) => Promise<void>;
   issue: IIssue | null;
   isOpen: boolean;
@@ -18,6 +19,7 @@ type Props = {
 export type TPeekOverviewModes = "side" | "modal" | "full";
 
 export const IssuePeekOverview: React.FC<Props> = ({
+  handleDeleteIssue,
   handleUpdateIssue,
   issue,
   isOpen,
@@ -74,6 +76,7 @@ export const IssuePeekOverview: React.FC<Props> = ({
                 {(peekOverviewMode === "side" || peekOverviewMode === "modal") && (
                   <SidePeekView
                     handleClose={handleClose}
+                    handleDeleteIssue={handleDeleteIssue}
                     handleUpdateIssue={handleUpdateIssue}
                     issue={issue}
                     mode={peekOverviewMode}
@@ -85,6 +88,7 @@ export const IssuePeekOverview: React.FC<Props> = ({
                 {peekOverviewMode === "full" && (
                   <FullScreenPeekView
                     handleClose={handleClose}
+                    handleDeleteIssue={handleDeleteIssue}
                     handleUpdateIssue={handleUpdateIssue}
                     issue={issue}
                     mode={peekOverviewMode}
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 f253eb3db2b..f938c38056f 100644
--- a/apps/app/components/issues/peek-overview/side-peek-view.tsx
+++ b/apps/app/components/issues/peek-overview/side-peek-view.tsx
@@ -9,6 +9,7 @@ import { IIssue } from "types";
 
 type Props = {
   handleClose: () => void;
+  handleDeleteIssue: () => void;
   handleUpdateIssue: (issue: Partial<IIssue>) => Promise<void>;
   issue: IIssue;
   mode: TPeekOverviewModes;
@@ -19,6 +20,7 @@ type Props = {
 
 export const SidePeekView: React.FC<Props> = ({
   handleClose,
+  handleDeleteIssue,
   handleUpdateIssue,
   issue,
   mode,
@@ -28,7 +30,14 @@ export const SidePeekView: React.FC<Props> = ({
 }) => (
   <div className="h-full w-full flex flex-col overflow-hidden">
     <div className="w-full p-5">
-      <PeekOverviewHeader handleClose={handleClose} issue={issue} mode={mode} setMode={setMode} />
+      <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 */}
@@ -43,10 +52,12 @@ export const SidePeekView: React.FC<Props> = ({
       {/* issue properties */}
       <div className="w-full mt-10">
         <PeekOverviewIssueProperties
+          handleDeleteIssue={handleDeleteIssue}
           issue={issue}
           mode={mode}
           onChange={handleUpdateIssue}
           readOnly={readOnly}
+          workspaceSlug={workspaceSlug}
         />
       </div>
       {/* divider */}
diff --git a/apps/app/components/issues/sidebar-select/priority.tsx b/apps/app/components/issues/sidebar-select/priority.tsx
index e946bf6e8e0..dfaa712e21f 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"
-            : "border-custom-border-200"
+            : "bg-custom-background-80 border-custom-border-200"
         }`}
       >
         <span className="grid place-items-center -my-1">

From 855ce65a649bb3dabcf3b04da2e6e86182c89591 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 25 Aug 2023 15:27:29 +0530
Subject: [PATCH 7/7] chore: update icons

---
 .../issues/peek-overview/header.tsx           | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/app/components/issues/peek-overview/header.tsx b/apps/app/components/issues/peek-overview/header.tsx
index 755561524bd..29e23a262af 100644
--- a/apps/app/components/issues/peek-overview/header.tsx
+++ b/apps/app/components/issues/peek-overview/header.tsx
@@ -7,6 +7,7 @@ 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;
@@ -65,16 +66,28 @@ export const PeekOverviewHeader: React.FC<Props> = ({
       <div className="flex items-center gap-4">
         {mode === "side" && (
           <button type="button" onClick={handleClose}>
-            <Icon iconName="arrow_right_alt" className="!text-base" />
+            <East
+              sx={{
+                fontSize: "14px",
+              }}
+            />
           </button>
         )}
         {mode === "modal" || mode === "full" ? (
           <button type="button" onClick={() => setMode("side")}>
-            <Icon iconName="close_fullscreen" />
+            <CloseFullscreen
+              sx={{
+                fontSize: "14px",
+              }}
+            />
           </button>
         ) : (
           <button type="button" onClick={() => setMode("modal")}>
-            <Icon iconName="open_in_full" />
+            <OpenInFull
+              sx={{
+                fontSize: "14px",
+              }}
+            />
           </button>
         )}
         <CustomSelect