From 9397cb9cbc90f4101482b3cf55dbaf67b4e87b4e Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Tue, 26 Sep 2023 12:43:55 +0530
Subject: [PATCH 1/8] fix: 'Last Drafted Issue' making sidebar look weird on
 collapsed

---
 .../workspace/sidebar-quick-action.tsx        | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/web/components/workspace/sidebar-quick-action.tsx b/web/components/workspace/sidebar-quick-action.tsx
index 8923abc141e..1c614f6940f 100644
--- a/web/components/workspace/sidebar-quick-action.tsx
+++ b/web/components/workspace/sidebar-quick-action.tsx
@@ -44,7 +44,9 @@ export const WorkspaceSidebarQuickAction = () => {
         >
           <button
             type="button"
-            className="relative flex items-center gap-2 flex-grow rounded flex-shrink-0 py-1.5"
+            className={`relative flex items-center gap-2 flex-grow rounded flex-shrink-0 py-1.5 ${
+              store?.theme?.sidebarCollapsed ? "justify-center" : ""
+            }`}
             onClick={() => {
               const e = new KeyboardEvent("keydown", { key: "c" });
               document.dispatchEvent(e);
@@ -61,11 +63,17 @@ export const WorkspaceSidebarQuickAction = () => {
 
           {storedValue && Object.keys(JSON.parse(storedValue)).length > 0 && (
             <>
-              <div className="h-8 w-0.5 bg-custom-sidebar-background-80" />
+              <div
+                className={`h-8 w-0.5 bg-custom-sidebar-background-80 ${
+                  store?.theme?.sidebarCollapsed ? "hidden" : "block"
+                }`}
+              />
 
               <button
                 type="button"
-                className="flex items-center justify-center rounded flex-shrink-0 py-1.5 ml-1.5"
+                className={`flex items-center justify-center rounded flex-shrink-0 py-1.5 ml-1.5 ${
+                  store?.theme?.sidebarCollapsed ? "hidden" : "block"
+                }`}
               >
                 <ChevronDown
                   size={16}
@@ -73,7 +81,11 @@ export const WorkspaceSidebarQuickAction = () => {
                 />
               </button>
 
-              <div className="absolute w-full h-10 pt-2 top-full left-0 opacity-0 group-hover:opacity-100 mt-0 pointer-events-none group-hover:pointer-events-auto">
+              <div
+                className={`fixed h-10 pt-2 w-[203px] left-4 opacity-0 group-hover:opacity-100 mt-0 pointer-events-none group-hover:pointer-events-auto ${
+                  store?.theme?.sidebarCollapsed ? "top-[5.5rem]" : "top-24"
+                }`}
+              >
                 <div className="w-full h-full">
                   <button
                     onClick={() => setIsDraftIssueModalOpen(true)}

From ae64f8b0788d928e047a8393479b29f2d7888231 Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Tue, 26 Sep 2023 15:03:41 +0530
Subject: [PATCH 2/8] feat: scroll to the bottom when issue is created

---
 .../core/views/inline-issue-create-wrapper.tsx     | 10 +++++-----
 web/components/gantt-chart/sidebar.tsx             | 14 ++++++++++++++
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/web/components/core/views/inline-issue-create-wrapper.tsx b/web/components/core/views/inline-issue-create-wrapper.tsx
index 3c01c50ced0..ace407ae11b 100644
--- a/web/components/core/views/inline-issue-create-wrapper.tsx
+++ b/web/components/core/views/inline-issue-create-wrapper.tsx
@@ -218,11 +218,11 @@ export const InlineCreateIssueFormWrapper: React.FC<Props> = (props) => {
           );
 
         if (isDraftIssues)
-          mutate(PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS(projectId.toString() ?? "", params));
-        if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
-        if (displayFilters.layout === "gantt_chart") mutate(ganttFetchKey);
-        if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
-        if (groupedIssues) mutateMyIssues();
+          await mutate(PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS(projectId.toString() ?? "", params));
+        if (displayFilters.layout === "calendar") await mutate(calendarFetchKey);
+        if (displayFilters.layout === "gantt_chart") await mutate(ganttFetchKey);
+        if (displayFilters.layout === "spreadsheet") await mutate(spreadsheetFetchKey);
+        if (groupedIssues) await mutateMyIssues();
 
         setToastAlert({
           type: "success",
diff --git a/web/components/gantt-chart/sidebar.tsx b/web/components/gantt-chart/sidebar.tsx
index 35b253ef9d5..fc2cea1e0a5 100644
--- a/web/components/gantt-chart/sidebar.tsx
+++ b/web/components/gantt-chart/sidebar.tsx
@@ -92,6 +92,7 @@ export const GanttSidebar: React.FC<Props> = (props) => {
       <StrictModeDroppable droppableId="gantt-sidebar">
         {(droppableProvided) => (
           <div
+            id={`gantt-sidebar-${cycleId}`}
             className="h-full overflow-y-auto pl-2.5"
             ref={droppableProvided.innerRef}
             {...droppableProvided.droppableProps}
@@ -162,6 +163,19 @@ export const GanttSidebar: React.FC<Props> = (props) => {
         <GanttInlineCreateIssueForm
           isOpen={isCreateIssueFormOpen}
           handleClose={() => setIsCreateIssueFormOpen(false)}
+          onSuccess={() => {
+            const ganttSidebar = document.getElementById(`gantt-sidebar-${cycleId}`);
+
+            const timeoutId = setTimeout(() => {
+              if (ganttSidebar)
+                ganttSidebar.scrollBy({
+                  top: ganttSidebar.scrollHeight,
+                  left: 0,
+                  behavior: "smooth",
+                });
+              clearTimeout(timeoutId);
+            }, 10);
+          }}
           prePopulatedData={{
             start_date: new Date(Date.now()).toISOString().split("T")[0],
             target_date: new Date(Date.now() + 86400000).toISOString().split("T")[0],

From a33340a883c7b3a28902eb385d044e76a2e2be42 Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Tue, 26 Sep 2023 15:48:50 +0530
Subject: [PATCH 3/8] fix: 'Add Issue' button overlapping issue card in
 spreadsheet view

---
 .../spreadsheet-view/spreadsheet-view.tsx     | 106 +++++++++---------
 .../projects/[projectId]/cycles/[cycleId].tsx |   2 +-
 2 files changed, 56 insertions(+), 52 deletions(-)

diff --git a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
index 2315c21c31f..8de90e358b3 100644
--- a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
+++ b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
@@ -89,62 +89,66 @@ export const SpreadsheetView: React.FC<Props> = ({
                 userAuth={userAuth}
               />
             ))}
-
-            <div className="absolute bottom-0 left-0 z-10 group pb-2 hover:rounded-sm bg-custom-background-100 hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max">
-              <ListInlineCreateIssueForm
-                isOpen={isInlineCreateIssueFormOpen}
-                handleClose={() => setIsInlineCreateIssueFormOpen(false)}
-                prePopulatedData={{
-                  ...(cycleId && { cycle: cycleId.toString() }),
-                  ...(moduleId && { module: moduleId.toString() }),
-                }}
-              />
-
-              {type === "issue"
-                ? !disableUserActions &&
-                  !isInlineCreateIssueFormOpen && (
-                    <button
-                      className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 border-custom-border-200 w-full"
-                      onClick={() => setIsInlineCreateIssueFormOpen(true)}
-                    >
-                      <PlusIcon className="h-4 w-4" />
-                      Add Issue
-                    </button>
-                  )
-                : !disableUserActions &&
-                  !isInlineCreateIssueFormOpen && (
-                    <CustomMenu
-                      className="sticky left-0 z-[1]"
-                      customButton={
-                        <button
-                          className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 border-custom-border-200 w-full"
-                          type="button"
-                        >
-                          <PlusIcon className="h-4 w-4" />
-                          Add Issue
-                        </button>
-                      }
-                      position="left"
-                      verticalPosition="top"
-                      optionsClassName="left-5 !w-36"
-                      noBorder
-                    >
-                      <CustomMenu.MenuItem onClick={() => setIsInlineCreateIssueFormOpen(true)}>
-                        Create new
-                      </CustomMenu.MenuItem>
-                      {openIssuesListModal && (
-                        <CustomMenu.MenuItem onClick={openIssuesListModal}>
-                          Add an existing issue
-                        </CustomMenu.MenuItem>
-                      )}
-                    </CustomMenu>
-                  )}
-            </div>
           </div>
         ) : (
           <Spinner />
         )}
       </div>
+
+      <div
+        className={`absolute bottom-0 left-0 z-10 group hover:rounded-sm bg-custom-background-100 hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max ${
+          isInlineCreateIssueFormOpen ? "pb-2" : ""
+        }`}
+      >
+        <ListInlineCreateIssueForm
+          isOpen={isInlineCreateIssueFormOpen}
+          handleClose={() => setIsInlineCreateIssueFormOpen(false)}
+          prePopulatedData={{
+            ...(cycleId && { cycle: cycleId.toString() }),
+            ...(moduleId && { module: moduleId.toString() }),
+          }}
+        />
+
+        {type === "issue"
+          ? !disableUserActions &&
+            !isInlineCreateIssueFormOpen && (
+              <button
+                className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 border-custom-border-200 w-full"
+                onClick={() => setIsInlineCreateIssueFormOpen(true)}
+              >
+                <PlusIcon className="h-4 w-4" />
+                Add Issue
+              </button>
+            )
+          : !disableUserActions &&
+            !isInlineCreateIssueFormOpen && (
+              <CustomMenu
+                className="sticky left-0 z-[1] !w-full"
+                customButton={
+                  <button
+                    className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 border-custom-border-200 w-full"
+                    type="button"
+                  >
+                    <PlusIcon className="h-4 w-4" />
+                    Add Issue
+                  </button>
+                }
+                position="left"
+                verticalPosition="top"
+                optionsClassName="left-5 !w-36"
+                noBorder
+              >
+                <CustomMenu.MenuItem onClick={() => setIsInlineCreateIssueFormOpen(true)}>
+                  Create new
+                </CustomMenu.MenuItem>
+                {openIssuesListModal && (
+                  <CustomMenu.MenuItem onClick={openIssuesListModal}>
+                    Add an existing issue
+                  </CustomMenu.MenuItem>
+                )}
+              </CustomMenu>
+            )}
+      </div>
     </>
   );
 };
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index f2962938483..65007db3c89 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -189,7 +189,7 @@ const SingleCycle: React.FC = () => {
               {cycleStatus === "completed" && (
                 <TransferIssues handleClick={() => setTransferIssuesModal(true)} />
               )}
-              <div className="relative overflow-y-auto">
+              <div className="relative overflow-y-auto w-full h-full">
                 <IssuesView
                   openIssuesListModal={openIssuesListModal}
                   disableUserActions={cycleStatus === "completed" ?? false}

From ea1e433a16ce5066df1561e7c72ef4e398eb08e6 Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Tue, 26 Sep 2023 16:23:53 +0530
Subject: [PATCH 4/8] fix: wrong placement of quick-add in calender layout

---
 .../core/views/calendar-view/calendar.tsx     |  5 +++-
 .../inline-create-issue-form.tsx              | 23 ++++++++++++++-----
 .../core/views/calendar-view/single-date.tsx  |  1 +
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/web/components/core/views/calendar-view/calendar.tsx b/web/components/core/views/calendar-view/calendar.tsx
index 030f8b7475d..8fbe3530534 100644
--- a/web/components/core/views/calendar-view/calendar.tsx
+++ b/web/components/core/views/calendar-view/calendar.tsx
@@ -183,7 +183,10 @@ export const CalendarView: React.FC<Props> = ({
       {calendarIssues ? (
         <div className="h-full overflow-y-auto">
           <DragDropContext onDragEnd={onDragEnd}>
-            <div className="h-full rounded-lg p-8 text-custom-text-200">
+            <div
+              id={`calendar-view-${cycleId ?? moduleId ?? viewId}`}
+              className="h-full rounded-lg p-8 text-custom-text-200"
+            >
               <CalendarHeader
                 isMonthlyView={isMonthlyView}
                 setIsMonthlyView={setIsMonthlyView}
diff --git a/web/components/core/views/calendar-view/inline-create-issue-form.tsx b/web/components/core/views/calendar-view/inline-create-issue-form.tsx
index add0acd4c80..6c874cd85a0 100644
--- a/web/components/core/views/calendar-view/inline-create-issue-form.tsx
+++ b/web/components/core/views/calendar-view/inline-create-issue-form.tsx
@@ -1,5 +1,8 @@
 import { useEffect, useRef, useState } from "react";
 
+// next
+import { useRouter } from "next/router";
+
 // react hook form
 import { useFormContext } from "react-hook-form";
 
@@ -16,21 +19,29 @@ type Props = {
   handleClose: () => void;
   onSuccess?: (data: IIssue) => Promise<void> | void;
   prePopulatedData?: Partial<IIssue>;
+  dependencies: any[];
 };
 
-const useCheckIfThereIsSpaceOnRight = (ref: React.RefObject<HTMLDivElement>) => {
+const useCheckIfThereIsSpaceOnRight = (ref: React.RefObject<HTMLDivElement>, deps: any[]) => {
   const [isThereSpaceOnRight, setIsThereSpaceOnRight] = useState(true);
 
+  const router = useRouter();
+  const { moduleId, cycleId, viewId } = router.query;
+
+  const container = document.getElementById(`calendar-view-${cycleId ?? moduleId ?? viewId}`);
+
   useEffect(() => {
     if (!ref.current) return;
 
     const { right } = ref.current.getBoundingClientRect();
 
-    const width = right + 250;
+    const width = right;
+
+    const innerWidth = container?.getBoundingClientRect().width ?? window.innerWidth;
 
-    if (width > window.innerWidth) setIsThereSpaceOnRight(false);
+    if (width > innerWidth) setIsThereSpaceOnRight(false);
     else setIsThereSpaceOnRight(true);
-  }, [ref]);
+  }, [ref, deps, container]);
 
   return isThereSpaceOnRight;
 };
@@ -63,11 +74,11 @@ const InlineInput = () => {
 };
 
 export const CalendarInlineCreateIssueForm: React.FC<Props> = (props) => {
-  const { isOpen } = props;
+  const { isOpen, dependencies } = props;
 
   const ref = useRef<HTMLDivElement>(null);
 
-  const isSpaceOnRight = useCheckIfThereIsSpaceOnRight(ref);
+  const isSpaceOnRight = useCheckIfThereIsSpaceOnRight(ref, dependencies);
 
   return (
     <>
diff --git a/web/components/core/views/calendar-view/single-date.tsx b/web/components/core/views/calendar-view/single-date.tsx
index 1781512045c..02ea56678f9 100644
--- a/web/components/core/views/calendar-view/single-date.tsx
+++ b/web/components/core/views/calendar-view/single-date.tsx
@@ -83,6 +83,7 @@ export const SingleCalendarDate: React.FC<Props> = (props) => {
 
           <CalendarInlineCreateIssueForm
             isOpen={isCreateIssueFormOpen}
+            dependencies={[showWeekEnds]}
             handleClose={() => setIsCreateIssueFormOpen(false)}
             prePopulatedData={{
               target_date: date.date,

From 233b2c0d69837ca84d036ccaec70dd230962d0f2 Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Tue, 26 Sep 2023 16:33:22 +0530
Subject: [PATCH 5/8] fix: spacing for issue card in spreadsheet view

---
 .../core/views/spreadsheet-view/spreadsheet-view.tsx        | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
index 8de90e358b3..d11fe85d624 100644
--- a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
+++ b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
@@ -68,7 +68,11 @@ export const SpreadsheetView: React.FC<Props> = ({
         workspaceSlug={workspaceSlug?.toString() ?? ""}
         readOnly={disableUserActions}
       />
-      <div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
+      <div
+        className={`h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100 ${
+          isInlineCreateIssueFormOpen ? "mb-24" : "mb-12"
+        }`}
+      >
         <div className="sticky z-[2] top-0 border-b border-custom-border-200 bg-custom-background-90 w-full min-w-max">
           <SpreadsheetColumns columnData={columnData} gridTemplateColumns={gridTemplateColumns} />
         </div>

From 7be313f7eba5e748c6657eeb0b18635aabea4c24 Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Tue, 26 Sep 2023 18:20:13 +0530
Subject: [PATCH 6/8] style: gantt layout quick-add padding

style: removed 'State group' from draft issue
---
 web/components/core/filters/issues-view-filter.tsx       | 9 +++++++--
 .../views/gantt-chart-view/inline-create-issue-form.tsx  | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/components/core/filters/issues-view-filter.tsx b/web/components/core/filters/issues-view-filter.tsx
index f5b0f477a54..72c2fc83bd4 100644
--- a/web/components/core/filters/issues-view-filter.tsx
+++ b/web/components/core/filters/issues-view-filter.tsx
@@ -67,7 +67,7 @@ export const IssuesFilterView: React.FC = () => {
   const router = useRouter();
   const { workspaceSlug, projectId, viewId } = router.query;
   const isArchivedIssues = router.pathname.includes("archived-issues");
-  const isDraftIssues = router.pathname.includes("draft-issues");
+  const isDraftIssues = router.pathname?.split("/")?.[4] === "draft-issues";
 
   const {
     displayFilters,
@@ -93,7 +93,9 @@ export const IssuesFilterView: React.FC = () => {
             <Tooltip
               key={option.type}
               tooltipContent={
-                <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} Layout</span>
+                <span className="capitalize">
+                  {replaceUnderscoreIfSnakeCase(option.type)} Layout
+                </span>
               }
               position="bottom"
             >
@@ -228,6 +230,9 @@ export const IssuesFilterView: React.FC = () => {
                                   return null;
                                 if (option.key === "project") return null;
 
+                                if (isDraftIssues && option.key === "state_detail.group")
+                                  return null;
+
                                 return (
                                   <CustomMenu.MenuItem
                                     key={option.key}
diff --git a/web/components/core/views/gantt-chart-view/inline-create-issue-form.tsx b/web/components/core/views/gantt-chart-view/inline-create-issue-form.tsx
index 936905dd465..a5bc85f6ec3 100644
--- a/web/components/core/views/gantt-chart-view/inline-create-issue-form.tsx
+++ b/web/components/core/views/gantt-chart-view/inline-create-issue-form.tsx
@@ -39,7 +39,7 @@ const InlineInput = () => {
         {...register("name", {
           required: "Issue title is required.",
         })}
-        className="w-full px-2 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+        className="w-full px-2 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
       />
     </>
   );

From abbf06636150c213fd0652c7880f92f823ea60c1 Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Tue, 26 Sep 2023 23:40:43 +0530
Subject: [PATCH 7/8] style: decrese shadow, quick-add position on calender
 layout, and 'add issue' sticky

---
 .../board-view/inline-create-issue-form.tsx   |   2 +-
 .../core/views/calendar-view/calendar.tsx     |   2 +-
 .../inline-create-issue-form.tsx              |   6 +-
 .../core/views/calendar-view/single-date.tsx  |  32 ++--
 .../list-view/inline-create-issue-form.tsx    |   2 +-
 .../spreadsheet-view/spreadsheet-view.tsx     | 147 +++++++++++++-----
 web/components/gantt-chart/chart/index.tsx    |  48 ++++++
 web/components/gantt-chart/sidebar.tsx        |  47 +-----
 8 files changed, 182 insertions(+), 104 deletions(-)

diff --git a/web/components/core/views/board-view/inline-create-issue-form.tsx b/web/components/core/views/board-view/inline-create-issue-form.tsx
index f4810164d32..651a0c0c1bc 100644
--- a/web/components/core/views/board-view/inline-create-issue-form.tsx
+++ b/web/components/core/views/board-view/inline-create-issue-form.tsx
@@ -48,7 +48,7 @@ const InlineInput = () => {
 export const BoardInlineCreateIssueForm: React.FC<Props> = (props) => (
   <>
     <InlineCreateIssueFormWrapper
-      className="flex flex-col justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px] mb-3 rounded bg-custom-background-100 shadow"
+      className="flex flex-col justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px] mb-3 rounded bg-custom-background-100 shadow-custom-shadow-sm"
       {...props}
     >
       <InlineInput />
diff --git a/web/components/core/views/calendar-view/calendar.tsx b/web/components/core/views/calendar-view/calendar.tsx
index 8fbe3530534..f339f7cf291 100644
--- a/web/components/core/views/calendar-view/calendar.tsx
+++ b/web/components/core/views/calendar-view/calendar.tsx
@@ -184,7 +184,7 @@ export const CalendarView: React.FC<Props> = ({
         <div className="h-full overflow-y-auto">
           <DragDropContext onDragEnd={onDragEnd}>
             <div
-              id={`calendar-view-${cycleId ?? moduleId ?? viewId}`}
+              id={`calendar-view-${cycleId ?? moduleId ?? viewId ?? ""}`}
               className="h-full rounded-lg p-8 text-custom-text-200"
             >
               <CalendarHeader
diff --git a/web/components/core/views/calendar-view/inline-create-issue-form.tsx b/web/components/core/views/calendar-view/inline-create-issue-form.tsx
index 6c874cd85a0..832a6add93b 100644
--- a/web/components/core/views/calendar-view/inline-create-issue-form.tsx
+++ b/web/components/core/views/calendar-view/inline-create-issue-form.tsx
@@ -84,13 +84,13 @@ export const CalendarInlineCreateIssueForm: React.FC<Props> = (props) => {
     <>
       <div
         ref={ref}
-        className={`absolute -translate-x-1 top-5 transition-all z-20 ${
+        className={`absolute w-60 top-5 transition-all z-20 ${
           isOpen ? "opacity-100 scale-100" : "opacity-0 pointer-events-none scale-95"
-        } ${isSpaceOnRight ? "left-full" : "right-0"}`}
+        } right-0`}
       >
         <InlineCreateIssueFormWrapper
           {...props}
-          className="flex w-60 p-1 px-1.5 rounded items-center gap-x-3 bg-custom-background-100 shadow-custom-shadow-md transition-opacity"
+          className="flex w-full p-1 px-1.5 rounded z-50 items-center gap-x-3 bg-custom-background-100 shadow-custom-shadow-sm transition-opacity"
         >
           <InlineInput />
         </InlineCreateIssueFormWrapper>
diff --git a/web/components/core/views/calendar-view/single-date.tsx b/web/components/core/views/calendar-view/single-date.tsx
index 02ea56678f9..3e38155f1b0 100644
--- a/web/components/core/views/calendar-view/single-date.tsx
+++ b/web/components/core/views/calendar-view/single-date.tsx
@@ -39,6 +39,8 @@ export const SingleCalendarDate: React.FC<Props> = (props) => {
   const [showAllIssues, setShowAllIssues] = useState(false);
   const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
 
+  const [formPosition, setFormPosition] = useState({ x: 0, y: 0 });
+
   const totalIssues = date.issues.length;
 
   return (
@@ -81,16 +83,23 @@ export const SingleCalendarDate: React.FC<Props> = (props) => {
               </Draggable>
             ))}
 
-          <CalendarInlineCreateIssueForm
-            isOpen={isCreateIssueFormOpen}
-            dependencies={[showWeekEnds]}
-            handleClose={() => setIsCreateIssueFormOpen(false)}
-            prePopulatedData={{
-              target_date: date.date,
-              ...(cycleId && { cycle: cycleId.toString() }),
-              ...(moduleId && { module: moduleId.toString() }),
+          <div
+            className="fixed top-0 left-0 z-50"
+            style={{
+              transform: `translate(${formPosition.x}px, ${formPosition.y}px)`,
             }}
-          />
+          >
+            <CalendarInlineCreateIssueForm
+              isOpen={isCreateIssueFormOpen}
+              dependencies={[showWeekEnds]}
+              handleClose={() => setIsCreateIssueFormOpen(false)}
+              prePopulatedData={{
+                target_date: date.date,
+                ...(cycleId && { cycle: cycleId.toString() }),
+                ...(moduleId && { module: moduleId.toString() }),
+              }}
+            />
+          </div>
 
           {totalIssues > 4 && (
             <button
@@ -106,8 +115,11 @@ export const SingleCalendarDate: React.FC<Props> = (props) => {
             className={`absolute top-2 right-2 flex items-center justify-center rounded-md bg-custom-background-80 p-1 text-xs text-custom-text-200 opacity-0 group-hover:opacity-100`}
           >
             <button
+              onClick={(e) => {
+                setIsCreateIssueFormOpen(true);
+                setFormPosition({ x: e.clientX, y: e.clientY });
+              }}
               className="flex items-center justify-center gap-1 text-center"
-              onClick={() => setIsCreateIssueFormOpen(true)}
             >
               <PlusSmallIcon className="h-4 w-4 text-custom-text-200" />
               Add issue
diff --git a/web/components/core/views/list-view/inline-create-issue-form.tsx b/web/components/core/views/list-view/inline-create-issue-form.tsx
index ddd17d34826..2f7e1287e4a 100644
--- a/web/components/core/views/list-view/inline-create-issue-form.tsx
+++ b/web/components/core/views/list-view/inline-create-issue-form.tsx
@@ -48,7 +48,7 @@ const InlineInput = () => {
 export const ListInlineCreateIssueForm: React.FC<Props> = (props) => (
   <>
     <InlineCreateIssueFormWrapper
-      className="flex py-3 px-4 items-center gap-x-5 bg-custom-background-100 shadow-custom-shadow-md"
+      className="flex py-3 px-4 items-center gap-x-5 bg-custom-background-100 shadow-custom-shadow-sm z-10"
       {...props}
     >
       <InlineInput />
diff --git a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
index 797aa7785e7..c9ca7879f67 100644
--- a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
+++ b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
@@ -7,6 +7,7 @@ import { KeyedMutator, mutate } from "swr";
 
 // components
 import {
+  ListInlineCreateIssueForm,
   SpreadsheetAssigneeColumn,
   SpreadsheetCreatedOnColumn,
   SpreadsheetDueDateColumn,
@@ -18,7 +19,7 @@ import {
   SpreadsheetStateColumn,
   SpreadsheetUpdatedOnColumn,
 } from "components/core";
-import { Spinner } from "components/ui";
+import { CustomMenu, Spinner } from "components/ui";
 import { IssuePeekOverview } from "components/issues";
 // hooks
 import useIssuesProperties from "hooks/use-issue-properties";
@@ -38,6 +39,7 @@ import {
 import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
 import projectIssuesServices from "services/issues.service";
 // icon
+import { PlusIcon } from "lucide-react";
 
 type Props = {
   spreadsheetIssues: IIssue[];
@@ -66,9 +68,13 @@ export const SpreadsheetView: React.FC<Props> = ({
   const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
   const [currentProjectId, setCurrentProjectId] = useState<string | null>(null);
 
+  const [isInlineCreateIssueFormOpen, setIsInlineCreateIssueFormOpen] = useState(false);
+
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId, viewId, workspaceViewId } = router.query;
 
+  const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
+
   const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
 
   const workspaceIssuesPath = [
@@ -232,51 +238,106 @@ export const SpreadsheetView: React.FC<Props> = ({
         workspaceSlug={workspaceSlug?.toString() ?? ""}
         readOnly={disableUserActions}
       />
-      <div className="relative flex  h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
-        {spreadsheetIssues ? (
-          <>
-            <div className="sticky left-0 w-[28rem] z-[2]">
-              <div className="relative flex flex-col h-max w-full bg-custom-background-100 rounded-sm z-[2]">
-                <div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-200">
-                  <span className="flex items-center px-4 py-2.5 h-full w-20 flex-shrink-0">
-                    ID
-                  </span>
-                  <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">
-                    Issue
-                  </span>
-                </div>
+      <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
+        <div className="h-full w-full flex flex-col">
+          <div className="flex max-h-full overflow-y-auto">
+            {spreadsheetIssues ? (
+              <>
+                <div className="sticky left-0 w-[28rem] z-[2]">
+                  <div className="relative flex flex-col h-max w-full bg-custom-background-100 rounded-sm z-[2]">
+                    <div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-200">
+                      <span className="flex items-center px-4 py-2.5 h-full w-20 flex-shrink-0">
+                        ID
+                      </span>
+                      <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">
+                        Issue
+                      </span>
+                    </div>
 
-                {spreadsheetIssues.map((issue: IIssue, index) => (
-                  <SpreadsheetIssuesColumn
-                    key={`${issue.id}_${index}`}
-                    issue={issue}
-                    projectId={issue.project_detail.id}
-                    expandedIssues={expandedIssues}
-                    setExpandedIssues={setExpandedIssues}
-                    setCurrentProjectId={setCurrentProjectId}
-                    properties={properties}
-                    handleIssueAction={handleIssueAction}
-                    disableUserActions={disableUserActions}
-                    userAuth={userAuth}
-                  />
-                ))}
+                    {spreadsheetIssues.map((issue: IIssue, index) => (
+                      <SpreadsheetIssuesColumn
+                        key={`${issue.id}_${index}`}
+                        issue={issue}
+                        projectId={issue.project_detail.id}
+                        expandedIssues={expandedIssues}
+                        setExpandedIssues={setExpandedIssues}
+                        setCurrentProjectId={setCurrentProjectId}
+                        properties={properties}
+                        handleIssueAction={handleIssueAction}
+                        disableUserActions={disableUserActions}
+                        userAuth={userAuth}
+                      />
+                    ))}
+                  </div>
+                </div>
+                {renderColumn("State", SpreadsheetStateColumn)}
+                {renderColumn("Priority", SpreadsheetPriorityColumn)}
+                {renderColumn("Assignees", SpreadsheetAssigneeColumn)}
+                {renderColumn("Label", SpreadsheetLabelColumn)}
+                {renderColumn("Start Date", SpreadsheetStartDateColumn)}
+                {renderColumn("Due Date", SpreadsheetDueDateColumn)}
+                {renderColumn("Estimate", SpreadsheetEstimateColumn)}
+                {renderColumn("Created On", SpreadsheetCreatedOnColumn)}
+                {renderColumn("Updated On", SpreadsheetUpdatedOnColumn)}
+              </>
+            ) : (
+              <div className="flex flex-col justify-center items-center h-full w-full">
+                <Spinner />
               </div>
-            </div>
-            {renderColumn("State", SpreadsheetStateColumn)}
-            {renderColumn("Priority", SpreadsheetPriorityColumn)}
-            {renderColumn("Assignees", SpreadsheetAssigneeColumn)}
-            {renderColumn("Label", SpreadsheetLabelColumn)}
-            {renderColumn("Start Date", SpreadsheetStartDateColumn)}
-            {renderColumn("Due Date", SpreadsheetDueDateColumn)}
-            {renderColumn("Estimate", SpreadsheetEstimateColumn)}
-            {renderColumn("Created On", SpreadsheetCreatedOnColumn)}
-            {renderColumn("Updated On", SpreadsheetUpdatedOnColumn)}
-          </>
-        ) : (
-          <div className="flex flex-col justify-center items-center h-full w-full">
-            <Spinner />
+            )}
+          </div>
+
+          <div>
+            <ListInlineCreateIssueForm
+              isOpen={isInlineCreateIssueFormOpen}
+              handleClose={() => setIsInlineCreateIssueFormOpen(false)}
+              prePopulatedData={{
+                ...(cycleId && { cycle: cycleId.toString() }),
+                ...(moduleId && { module: moduleId.toString() }),
+              }}
+            />
+
+            {type === "issue"
+              ? !disableUserActions &&
+                !isInlineCreateIssueFormOpen && (
+                  <button
+                    className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 border-custom-border-200 w-full"
+                    onClick={() => setIsInlineCreateIssueFormOpen(true)}
+                  >
+                    <PlusIcon className="h-4 w-4" />
+                    Add Issue
+                  </button>
+                )
+              : !disableUserActions &&
+                !isInlineCreateIssueFormOpen && (
+                  <CustomMenu
+                    className="sticky left-0 z-10"
+                    customButton={
+                      <button
+                        className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 border-custom-border-200 w-full"
+                        type="button"
+                      >
+                        <PlusIcon className="h-4 w-4" />
+                        Add Issue
+                      </button>
+                    }
+                    position="left"
+                    verticalPosition="top"
+                    optionsClassName="left-5 !w-36"
+                    noBorder
+                  >
+                    <CustomMenu.MenuItem onClick={() => setIsInlineCreateIssueFormOpen(true)}>
+                      Create new
+                    </CustomMenu.MenuItem>
+                    {openIssuesListModal && (
+                      <CustomMenu.MenuItem onClick={openIssuesListModal}>
+                        Add an existing issue
+                      </CustomMenu.MenuItem>
+                    )}
+                  </CustomMenu>
+                )}
           </div>
-        )}
+        </div>
       </div>
     </>
   );
diff --git a/web/components/gantt-chart/chart/index.tsx b/web/components/gantt-chart/chart/index.tsx
index aa79ae19c8e..a8f541b0b0f 100644
--- a/web/components/gantt-chart/chart/index.tsx
+++ b/web/components/gantt-chart/chart/index.tsx
@@ -1,4 +1,6 @@
 import { FC, useEffect, useState } from "react";
+// next
+import { useRouter } from "next/router";
 // icons
 import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/20/solid";
 // components
@@ -11,6 +13,8 @@ import { GanttSidebar } from "../sidebar";
 import { MonthChartView } from "./month";
 // import { QuarterChartView } from "./quarter";
 // import { YearChartView } from "./year";
+// icons
+import { PlusIcon } from "lucide-react";
 // views
 import {
   // generateHourChart,
@@ -25,6 +29,7 @@ import {
   getNumberOfDaysBetweenTwoDatesInYear,
   getMonthChartItemPositionWidthInMonth,
 } from "../views";
+import { GanttInlineCreateIssueForm } from "components/core/views/gantt-chart-view/inline-create-issue-form";
 // types
 import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
 // data
@@ -64,12 +69,17 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   const [itemsContainerWidth, setItemsContainerWidth] = useState<number>(0);
   const [fullScreenMode, setFullScreenMode] = useState<boolean>(false);
 
+  const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
+
   // blocks state management starts
   const [chartBlocks, setChartBlocks] = useState<IGanttBlock[] | null>(null);
 
   const { currentView, currentViewData, renderView, dispatch, allViews, updateScrollLeft } =
     useChart();
 
+  const router = useRouter();
+  const { cycleId, moduleId } = router.query;
+
   const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) =>
     blocks && blocks.length > 0
       ? blocks.map((block: any) => ({
@@ -304,6 +314,44 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             SidebarBlockRender={SidebarBlockRender}
             enableReorder={enableReorder}
           />
+          {chartBlocks && (
+            <div className="pl-2.5">
+              <GanttInlineCreateIssueForm
+                isOpen={isCreateIssueFormOpen}
+                handleClose={() => setIsCreateIssueFormOpen(false)}
+                onSuccess={() => {
+                  const ganttSidebar = document.getElementById(`gantt-sidebar-${cycleId}`);
+
+                  const timeoutId = setTimeout(() => {
+                    if (ganttSidebar)
+                      ganttSidebar.scrollBy({
+                        top: ganttSidebar.scrollHeight,
+                        left: 0,
+                        behavior: "smooth",
+                      });
+                    clearTimeout(timeoutId);
+                  }, 10);
+                }}
+                prePopulatedData={{
+                  start_date: new Date(Date.now()).toISOString().split("T")[0],
+                  target_date: new Date(Date.now() + 86400000).toISOString().split("T")[0],
+                  ...(cycleId && { cycle: cycleId.toString() }),
+                  ...(moduleId && { module: moduleId.toString() }),
+                }}
+              />
+
+              {!isCreateIssueFormOpen && (
+                <button
+                  type="button"
+                  onClick={() => setIsCreateIssueFormOpen(true)}
+                  className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
+                >
+                  <PlusIcon className="h-4 w-4" />
+                  <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+                </button>
+              )}
+            </div>
+          )}
         </div>
         <div
           className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto horizontal-scroll-enable"
diff --git a/web/components/gantt-chart/sidebar.tsx b/web/components/gantt-chart/sidebar.tsx
index fc2cea1e0a5..4a804f79563 100644
--- a/web/components/gantt-chart/sidebar.tsx
+++ b/web/components/gantt-chart/sidebar.tsx
@@ -1,5 +1,3 @@
-import { useState } from "react";
-// next
 import { useRouter } from "next/router";
 // react-beautiful-dnd
 import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
@@ -10,9 +8,6 @@ import { useChart } from "./hooks";
 import { Loader } from "components/ui";
 // icons
 import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
-import { PlusIcon } from "lucide-react";
-// components
-import { GanttInlineCreateIssueForm } from "components/core/views/gantt-chart-view/inline-create-issue-form";
 // types
 import { IBlockUpdateData, IGanttBlock } from "./types";
 
@@ -28,12 +23,10 @@ export const GanttSidebar: React.FC<Props> = (props) => {
   const { title, blockUpdateHandler, blocks, SidebarBlockRender, enableReorder } = props;
 
   const router = useRouter();
-  const { cycleId, moduleId } = router.query;
+  const { cycleId } = router.query;
 
   const { activeBlock, dispatch } = useChart();
 
-  const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
-
   // update the active block on hover
   const updateActiveBlock = (block: IGanttBlock | null) => {
     dispatch({
@@ -93,7 +86,7 @@ export const GanttSidebar: React.FC<Props> = (props) => {
         {(droppableProvided) => (
           <div
             id={`gantt-sidebar-${cycleId}`}
-            className="h-full overflow-y-auto pl-2.5"
+            className="max-h-full overflow-y-auto pl-2.5"
             ref={droppableProvided.innerRef}
             {...droppableProvided.droppableProps}
           >
@@ -159,42 +152,6 @@ export const GanttSidebar: React.FC<Props> = (props) => {
           </div>
         )}
       </StrictModeDroppable>
-      <div className="pl-2.5">
-        <GanttInlineCreateIssueForm
-          isOpen={isCreateIssueFormOpen}
-          handleClose={() => setIsCreateIssueFormOpen(false)}
-          onSuccess={() => {
-            const ganttSidebar = document.getElementById(`gantt-sidebar-${cycleId}`);
-
-            const timeoutId = setTimeout(() => {
-              if (ganttSidebar)
-                ganttSidebar.scrollBy({
-                  top: ganttSidebar.scrollHeight,
-                  left: 0,
-                  behavior: "smooth",
-                });
-              clearTimeout(timeoutId);
-            }, 10);
-          }}
-          prePopulatedData={{
-            start_date: new Date(Date.now()).toISOString().split("T")[0],
-            target_date: new Date(Date.now() + 86400000).toISOString().split("T")[0],
-            ...(cycleId && { cycle: cycleId.toString() }),
-            ...(moduleId && { module: moduleId.toString() }),
-          }}
-        />
-
-        {!isCreateIssueFormOpen && (
-          <button
-            type="button"
-            onClick={() => setIsCreateIssueFormOpen(true)}
-            className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md mt-3"
-          >
-            <PlusIcon className="h-4 w-4" />
-            <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
-          </button>
-        )}
-      </div>
     </DragDropContext>
   );
 };

From 2ed6fffb58f4bef6718d99e262080744a97cbc63 Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Tue, 26 Sep 2023 23:46:02 +0530
Subject: [PATCH 8/8] style: button color

---
 .../core/views/spreadsheet-view/spreadsheet-view.tsx          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
index c9ca7879f67..66dc97f2c8a 100644
--- a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
+++ b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
@@ -301,7 +301,7 @@ export const SpreadsheetView: React.FC<Props> = ({
               ? !disableUserActions &&
                 !isInlineCreateIssueFormOpen && (
                   <button
-                    className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 border-custom-border-200 w-full"
+                    className="flex gap-1.5 items-center text-custom-primary-100 pl-7 py-2.5 text-sm sticky left-0 z-[1] border-custom-border-200 w-full"
                     onClick={() => setIsInlineCreateIssueFormOpen(true)}
                   >
                     <PlusIcon className="h-4 w-4" />
@@ -314,7 +314,7 @@ export const SpreadsheetView: React.FC<Props> = ({
                     className="sticky left-0 z-10"
                     customButton={
                       <button
-                        className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 border-custom-border-200 w-full"
+                        className="flex gap-1.5 items-center text-custom-primary-100 pl-7 py-2.5 text-sm sticky left-0 z-[1] border-custom-border-200 w-full"
                         type="button"
                       >
                         <PlusIcon className="h-4 w-4" />