From 2ae71b76c50448d1422cb559d379024164ee1951 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Wed, 18 Oct 2023 16:19:46 +0530
Subject: [PATCH] refactor: spreadsheet column components

---
 .../assignee-column/assignee-column.tsx       |  32 ---
 .../spreadsheet/assignee-column/index.ts      |   2 -
 .../assignee-column.tsx}                      |  15 +-
 .../columns-list.tsx}                         |   0
 .../created-on-column.tsx}                    |  10 +-
 .../due-date-column.tsx}                      |  13 +-
 .../estimate-column.tsx}                      |   8 +-
 .../spreadsheet/columns/index.ts              |  11 ++
 .../{issue-column => columns/issue}/index.ts  |   0
 .../issue}/issue-column.tsx                   |   0
 .../issue}/spreadsheet-issue-column.tsx       |   0
 .../label-column.tsx}                         |  14 +-
 .../priority-column.tsx}                      |  10 +-
 .../start-date-column.tsx}                    |  13 +-
 .../state-column.tsx}                         |  14 +-
 .../updated-on-column.tsx}                    |  10 +-
 .../created-on-column/created-on-column.tsx   |  20 --
 .../spreadsheet/created-on-column/index.ts    |   2 -
 .../due-date-column/due-date-column.tsx       |  23 ---
 .../spreadsheet/due-date-column/index.ts      |   2 -
 .../estimate-column/estimate-column.tsx       |  23 ---
 .../spreadsheet/estimate-column/index.ts      |   2 -
 .../issues/issue-layouts/spreadsheet/index.ts |  13 +-
 .../spreadsheet/label-column/index.ts         |   2 -
 .../spreadsheet/label-column/label-column.tsx |  32 ---
 .../spreadsheet/priority-column/index.ts      |   2 -
 .../priority-column/priority-column.tsx       |  28 ---
 .../spreadsheet/spreadsheet-column.tsx        | 177 ++++++++---------
 .../spreadsheet/spreadsheet-view.tsx          | 186 +++++++++---------
 .../spreadsheet/start-date-column/index.ts    |   2 -
 .../start-date-column/start-date-column.tsx   |  22 ---
 .../spreadsheet/state-column/index.ts         |   2 -
 .../spreadsheet/state-column/state-column.tsx |  31 ---
 .../spreadsheet/updated-on-column/index.ts    |   2 -
 .../updated-on-column/updated-on-column.tsx   |  22 ---
 .../issues/view-select/start-date.tsx         |   2 +-
 web/styles/command-pallette.css               |   4 +-
 37 files changed, 259 insertions(+), 492 deletions(-)
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/assignee-column/assignee-column.tsx
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/assignee-column/index.ts
 rename web/components/issues/issue-layouts/spreadsheet/{assignee-column/spreadsheet-assignee-column.tsx => columns/assignee-column.tsx} (80%)
 rename web/components/issues/issue-layouts/spreadsheet/{spreadsheet-columns-list.tsx => columns/columns-list.tsx} (100%)
 rename web/components/issues/issue-layouts/spreadsheet/{created-on-column/spreadsheet-created-on-column.tsx => columns/created-on-column.tsx} (82%)
 rename web/components/issues/issue-layouts/spreadsheet/{due-date-column/spreadsheet-due-date-column.tsx => columns/due-date-column.tsx} (80%)
 rename web/components/issues/issue-layouts/spreadsheet/{estimate-column/spreadsheet-estimate-column.tsx => columns/estimate-column.tsx} (83%)
 create mode 100644 web/components/issues/issue-layouts/spreadsheet/columns/index.ts
 rename web/components/issues/issue-layouts/spreadsheet/{issue-column => columns/issue}/index.ts (100%)
 rename web/components/issues/issue-layouts/spreadsheet/{issue-column => columns/issue}/issue-column.tsx (100%)
 rename web/components/issues/issue-layouts/spreadsheet/{issue-column => columns/issue}/spreadsheet-issue-column.tsx (100%)
 rename web/components/issues/issue-layouts/spreadsheet/{label-column/spreadsheet-label-column.tsx => columns/label-column.tsx} (85%)
 rename web/components/issues/issue-layouts/spreadsheet/{priority-column/spreadsheet-priority-column.tsx => columns/priority-column.tsx} (76%)
 rename web/components/issues/issue-layouts/spreadsheet/{start-date-column/spreadsheet-start-date-column.tsx => columns/start-date-column.tsx} (80%)
 rename web/components/issues/issue-layouts/spreadsheet/{state-column/spreadsheet-state-column.tsx => columns/state-column.tsx} (83%)
 rename web/components/issues/issue-layouts/spreadsheet/{updated-on-column/spreadsheet-updated-on-column.tsx => columns/updated-on-column.tsx} (83%)
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/created-on-column/created-on-column.tsx
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/created-on-column/index.ts
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/due-date-column/due-date-column.tsx
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/due-date-column/index.ts
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/estimate-column/estimate-column.tsx
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/estimate-column/index.ts
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/label-column/index.ts
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/label-column/label-column.tsx
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/priority-column/index.ts
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/priority-column/priority-column.tsx
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/start-date-column/index.ts
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/start-date-column/start-date-column.tsx
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/state-column/index.ts
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/state-column/state-column.tsx
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/updated-on-column/index.ts
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/updated-on-column/updated-on-column.tsx

diff --git a/web/components/issues/issue-layouts/spreadsheet/assignee-column/assignee-column.tsx b/web/components/issues/issue-layouts/spreadsheet/assignee-column/assignee-column.tsx
deleted file mode 100644
index 53484b3f6..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/assignee-column/assignee-column.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-// components
-import { MembersSelect } from "components/project";
-// types
-import { IIssue, IUserLite } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (members: string[]) => void;
-  members: IUserLite[] | undefined;
-  disabled: boolean;
-};
-
-export const AssigneeColumn: React.FC<Props> = (props) => {
-  const { issue, onChange, members, disabled } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <MembersSelect
-          value={issue.assignees}
-          onChange={onChange}
-          members={members ?? []}
-          buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
-          hideDropdownArrow
-          disabled={disabled}
-          multiple
-        />
-      </span>
-    </div>
-  );
-};
diff --git a/web/components/issues/issue-layouts/spreadsheet/assignee-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/assignee-column/index.ts
deleted file mode 100644
index 8750550be..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/assignee-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-assignee-column";
-export * from "./assignee-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/assignee-column/spreadsheet-assignee-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
similarity index 80%
rename from web/components/issues/issue-layouts/spreadsheet/assignee-column/spreadsheet-assignee-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
index f0f10880b..f4878d137 100644
--- a/web/components/issues/issue-layouts/spreadsheet/assignee-column/spreadsheet-assignee-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { AssigneeColumn } from "components/issues";
+import { MembersSelect } from "components/project";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -21,12 +21,15 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onC
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <AssigneeColumn
-        issue={issue}
-        members={members}
+    <>
+      <MembersSelect
+        value={issue.assignees}
         onChange={(data) => onChange({ assignees_list: data })}
+        members={members ?? []}
+        buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
+        hideDropdownArrow
         disabled={disabled}
+        multiple
       />
 
       {isExpanded &&
@@ -43,6 +46,6 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onC
             disabled={disabled}
           />
         ))}
-    </div>
+    </>
   );
 };
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-columns-list.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx
similarity index 100%
rename from web/components/issues/issue-layouts/spreadsheet/spreadsheet-columns-list.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx
diff --git a/web/components/issues/issue-layouts/spreadsheet/created-on-column/spreadsheet-created-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
similarity index 82%
rename from web/components/issues/issue-layouts/spreadsheet/created-on-column/spreadsheet-created-on-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
index 5295a8648..54a8ffee5 100644
--- a/web/components/issues/issue-layouts/spreadsheet/created-on-column/spreadsheet-created-on-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 
-// components
-import { CreatedOnColumn } from "components/issues";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
+// helpers
+import { renderLongDetailDateFormat } from "helpers/date-time.helper";
 // types
 import { IIssue } from "types";
 
@@ -18,8 +18,8 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({ issue, expandedIss
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <CreatedOnColumn issue={issue} />
+    <>
+      {renderLongDetailDateFormat(issue.created_at)}
 
       {isExpanded &&
         !isLoading &&
@@ -28,6 +28,6 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({ issue, expandedIss
         subIssues.map((subIssue: IIssue) => (
           <SpreadsheetCreatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
         ))}
-    </div>
+    </>
   );
 };
diff --git a/web/components/issues/issue-layouts/spreadsheet/due-date-column/spreadsheet-due-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
similarity index 80%
rename from web/components/issues/issue-layouts/spreadsheet/due-date-column/spreadsheet-due-date-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index 0693ac455..41bafeadc 100644
--- a/web/components/issues/issue-layouts/spreadsheet/due-date-column/spreadsheet-due-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { DueDateColumn } from "components/issues";
+import { ViewDueDateSelect } from "components/issues";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -20,8 +20,13 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, exp
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <DueDateColumn issue={issue} onChange={(val) => onChange({ target_date: val })} disabled={disabled} />
+    <>
+      <ViewDueDateSelect
+        issue={issue}
+        onChange={(val) => onChange({ target_date: val })}
+        noBorder
+        disabled={disabled}
+      />
 
       {isExpanded &&
         !isLoading &&
@@ -36,6 +41,6 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, exp
             disabled={disabled}
           />
         ))}
-    </div>
+    </>
   );
 };
diff --git a/web/components/issues/issue-layouts/spreadsheet/estimate-column/spreadsheet-estimate-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
similarity index 83%
rename from web/components/issues/issue-layouts/spreadsheet/estimate-column/spreadsheet-estimate-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
index a8ae5beb4..156fb707f 100644
--- a/web/components/issues/issue-layouts/spreadsheet/estimate-column/spreadsheet-estimate-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
@@ -1,5 +1,5 @@
 // components
-import { EstimateColumn } from "components/issues";
+import { ViewEstimateSelect } from "components/issues";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -20,8 +20,8 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <EstimateColumn issue={issue} onChange={(data) => onChange({ estimate_point: data })} disabled={disabled} />
+    <>
+      <ViewEstimateSelect issue={issue} onChange={(data) => onChange({ estimate_point: data })} disabled={disabled} />
 
       {isExpanded &&
         !isLoading &&
@@ -36,6 +36,6 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
             disabled={disabled}
           />
         ))}
-    </div>
+    </>
   );
 };
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/index.ts b/web/components/issues/issue-layouts/spreadsheet/columns/index.ts
new file mode 100644
index 000000000..a1c4959ab
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/index.ts
@@ -0,0 +1,11 @@
+export * from "./issue";
+export * from "./assignee-column";
+export * from "./columns-list";
+export * from "./created-on-column";
+export * from "./due-date-column";
+export * from "./estimate-column";
+export * from "./label-column";
+export * from "./priority-column";
+export * from "./start-date-column";
+export * from "./state-column";
+export * from "./updated-on-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/columns/issue/index.ts
similarity index 100%
rename from web/components/issues/issue-layouts/spreadsheet/issue-column/index.ts
rename to web/components/issues/issue-layouts/spreadsheet/columns/issue/index.ts
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-column/issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
similarity index 100%
rename from web/components/issues/issue-layouts/spreadsheet/issue-column/issue-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-column/spreadsheet-issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
similarity index 100%
rename from web/components/issues/issue-layouts/spreadsheet/issue-column/spreadsheet-issue-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
diff --git a/web/components/issues/issue-layouts/spreadsheet/label-column/spreadsheet-label-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
similarity index 85%
rename from web/components/issues/issue-layouts/spreadsheet/label-column/spreadsheet-label-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
index 465326fcb..d912cad9f 100644
--- a/web/components/issues/issue-layouts/spreadsheet/label-column/spreadsheet-label-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { LabelColumn } from "components/issues";
+import { LabelSelect } from "components/project";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -23,11 +23,13 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <LabelColumn
-        issue={issue}
+    <>
+      <LabelSelect
+        value={issue.labels}
         onChange={(data) => onChange({ labels_list: data })}
-        labels={labels}
+        labels={labels ?? []}
+        hideDropdownArrow
+        maxRender={1}
         disabled={disabled}
       />
 
@@ -45,6 +47,6 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
             disabled={disabled}
           />
         ))}
-    </div>
+    </>
   );
 };
diff --git a/web/components/issues/issue-layouts/spreadsheet/priority-column/spreadsheet-priority-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
similarity index 76%
rename from web/components/issues/issue-layouts/spreadsheet/priority-column/spreadsheet-priority-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
index 1c12054f5..22ef2a0bd 100644
--- a/web/components/issues/issue-layouts/spreadsheet/priority-column/spreadsheet-priority-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { PriorityColumn } from "components/issues";
+import { PrioritySelect } from "components/project";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -21,7 +21,13 @@ export const SpreadsheetPriorityColumn: React.FC<Props> = ({ issue, onChange, ex
 
   return (
     <div>
-      <PriorityColumn issue={issue} onChange={(data) => onChange({ priority: data })} disabled={disabled} />
+      <PrioritySelect
+        value={issue.priority}
+        onChange={(data) => onChange({ priority: data })}
+        buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
+        hideDropdownArrow
+        disabled={disabled}
+      />
 
       {isExpanded &&
         !isLoading &&
diff --git a/web/components/issues/issue-layouts/spreadsheet/start-date-column/spreadsheet-start-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
similarity index 80%
rename from web/components/issues/issue-layouts/spreadsheet/start-date-column/spreadsheet-start-date-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
index 61087fa19..cdacf4e72 100644
--- a/web/components/issues/issue-layouts/spreadsheet/start-date-column/spreadsheet-start-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { StartDateColumn } from "components/issues";
+import { ViewStartDateSelect } from "components/issues";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -20,8 +20,13 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, e
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <StartDateColumn issue={issue} onChange={(val) => onChange({ start_date: val })} disabled={disabled} />
+    <>
+      <ViewStartDateSelect
+        issue={issue}
+        onChange={(val) => onChange({ start_date: val })}
+        noBorder
+        disabled={disabled}
+      />
 
       {isExpanded &&
         !isLoading &&
@@ -36,6 +41,6 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, e
             disabled={disabled}
           />
         ))}
-    </div>
+    </>
   );
 };
diff --git a/web/components/issues/issue-layouts/spreadsheet/state-column/spreadsheet-state-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
similarity index 83%
rename from web/components/issues/issue-layouts/spreadsheet/state-column/spreadsheet-state-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
index 8a30bbb8c..7873ebe02 100644
--- a/web/components/issues/issue-layouts/spreadsheet/state-column/spreadsheet-state-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { StateColumn } from "components/issues";
+import { StateSelect } from "components/states";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -23,11 +23,13 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <StateColumn
-        issue={issue}
+    <>
+      <StateSelect
+        value={issue.state_detail}
         onChange={(data) => onChange({ state: data.id, state_detail: data })}
-        states={states}
+        stateGroups={states}
+        buttonClassName="!shadow-none !border-0"
+        hideDropdownArrow
         disabled={disabled}
       />
 
@@ -45,6 +47,6 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
             disabled={disabled}
           />
         ))}
-    </div>
+    </>
   );
 };
diff --git a/web/components/issues/issue-layouts/spreadsheet/updated-on-column/spreadsheet-updated-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
similarity index 83%
rename from web/components/issues/issue-layouts/spreadsheet/updated-on-column/spreadsheet-updated-on-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
index 4752ea088..b2892f2a9 100644
--- a/web/components/issues/issue-layouts/spreadsheet/updated-on-column/spreadsheet-updated-on-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 
-// components
-import { UpdatedOnColumn } from "components/issues";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
+// helpers
+import { renderLongDetailDateFormat } from "helpers/date-time.helper";
 // types
 import { IIssue } from "types";
 
@@ -20,8 +20,8 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <UpdatedOnColumn issue={issue} />
+    <>
+      {renderLongDetailDateFormat(issue.updated_at)}
 
       {isExpanded &&
         !isLoading &&
@@ -30,6 +30,6 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
         subIssues.map((subIssue: IIssue) => (
           <SpreadsheetUpdatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
         ))}
-    </div>
+    </>
   );
 };
diff --git a/web/components/issues/issue-layouts/spreadsheet/created-on-column/created-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/created-on-column/created-on-column.tsx
deleted file mode 100644
index fe648ac86..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/created-on-column/created-on-column.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-
-// types
-import { IIssue } from "types";
-// helper
-import { renderLongDetailDateFormat } from "helpers/date-time.helper";
-
-type Props = {
-  issue: IIssue;
-};
-
-export const CreatedOnColumn: React.FC<Props> = ({ issue }) => (
-  <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-      <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>
-    </span>
-  </div>
-);
diff --git a/web/components/issues/issue-layouts/spreadsheet/created-on-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/created-on-column/index.ts
deleted file mode 100644
index 28781aa17..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/created-on-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-created-on-column";
-export * from "./created-on-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/due-date-column/due-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/due-date-column/due-date-column.tsx
deleted file mode 100644
index 0caca7cd7..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/due-date-column/due-date-column.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { FC } from "react";
-// components
-import { ViewDueDateSelect } from "components/issues";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (date: string | null) => void;
-  disabled: boolean;
-};
-
-export const DueDateColumn: FC<Props> = (props) => {
-  const { issue, onChange, disabled } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <ViewDueDateSelect issue={issue} onChange={onChange} noBorder disabled={disabled} />
-      </span>
-    </div>
-  );
-};
diff --git a/web/components/issues/issue-layouts/spreadsheet/due-date-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/due-date-column/index.ts
deleted file mode 100644
index 64b454877..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/due-date-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-due-date-column";
-export * from "./due-date-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/estimate-column/estimate-column.tsx b/web/components/issues/issue-layouts/spreadsheet/estimate-column/estimate-column.tsx
deleted file mode 100644
index f03011135..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/estimate-column/estimate-column.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { FC } from "react";
-// components
-import { ViewEstimateSelect } from "components/issues";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (data: number) => void;
-  disabled: boolean;
-};
-
-export const EstimateColumn: FC<Props> = (props) => {
-  const { issue, onChange, disabled } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <ViewEstimateSelect issue={issue} onChange={onChange} disabled={disabled} />
-      </span>
-    </div>
-  );
-};
diff --git a/web/components/issues/issue-layouts/spreadsheet/estimate-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/estimate-column/index.ts
deleted file mode 100644
index 31f07e6a7..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/estimate-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-estimate-column";
-export * from "./estimate-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/index.ts b/web/components/issues/issue-layouts/spreadsheet/index.ts
index 7a804c6de..64b02a766 100644
--- a/web/components/issues/issue-layouts/spreadsheet/index.ts
+++ b/web/components/issues/issue-layouts/spreadsheet/index.ts
@@ -1,15 +1,4 @@
-export * from "./assignee-column";
-export * from "./created-on-column";
-export * from "./due-date-column";
-export * from "./estimate-column";
-export * from "./issue-column";
-export * from "./label-column";
-export * from "./priority-column";
+export * from "./columns";
 export * from "./roots";
-export * from "./start-date-column";
-export * from "./state-column";
-export * from "./updated-on-column";
-export * from "./issue-column";
 export * from "./spreadsheet-column";
-export * from "./spreadsheet-columns-list";
 export * from "./spreadsheet-view";
diff --git a/web/components/issues/issue-layouts/spreadsheet/label-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/label-column/index.ts
deleted file mode 100644
index a1b69c1a9..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/label-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-label-column";
-export * from "./label-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/label-column/label-column.tsx b/web/components/issues/issue-layouts/spreadsheet/label-column/label-column.tsx
deleted file mode 100644
index 3d720da1b..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/label-column/label-column.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-
-// components
-import { LabelSelect } from "components/project";
-// types
-import { IIssue, IIssueLabels } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (data: string[]) => void;
-  labels: IIssueLabels[] | undefined;
-  disabled: boolean;
-};
-
-export const LabelColumn: React.FC<Props> = (props) => {
-  const { issue, onChange, labels, disabled } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <LabelSelect
-          value={issue.labels}
-          onChange={onChange}
-          labels={labels ?? []}
-          hideDropdownArrow
-          maxRender={1}
-          disabled={disabled}
-        />
-      </span>
-    </div>
-  );
-};
diff --git a/web/components/issues/issue-layouts/spreadsheet/priority-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/priority-column/index.ts
deleted file mode 100644
index fc542331e..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/priority-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-priority-column";
-export * from "./priority-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/priority-column/priority-column.tsx b/web/components/issues/issue-layouts/spreadsheet/priority-column/priority-column.tsx
deleted file mode 100644
index 21f2a5927..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/priority-column/priority-column.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-// components
-import { PrioritySelect } from "components/project";
-// types
-import { IIssue, TIssuePriorities } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (data: TIssuePriorities) => void;
-  disabled: boolean;
-};
-
-export const PriorityColumn: React.FC<Props> = (props) => {
-  const { issue, onChange, disabled } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <PrioritySelect
-          value={issue.priority}
-          onChange={onChange}
-          buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
-          hideDropdownArrow
-          disabled={disabled}
-        />
-      </span>
-    </div>
-  );
-};
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
index d6f3474f3..172194b83 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
@@ -34,6 +34,7 @@ import {
 } from "types";
 // constants
 import { SPREADSHEET_PROPERTY_DETAILS } from "constants/spreadsheet";
+import { Command } from "cmdk";
 
 type Props = {
   disableUserActions: boolean;
@@ -166,101 +167,89 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
         </CustomMenu>
       </div>
       <div className="h-full min-w-[8rem] w-full">
-        {issues?.map((issue) => {
-          if (property === "state")
-            return (
-              <SpreadsheetStateColumn
+        <Command.Group>
+          <>
+            {issues?.map((issue) => (
+              <Command.Item
                 key={`${property}-${issue.id}`}
-                disabled={disableUserActions}
-                expandedIssues={expandedIssues}
-                issue={issue}
-                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
-                states={states}
-              />
-            );
-
-          if (property === "priority")
-            return (
-              <SpreadsheetPriorityColumn
-                key={`${property}-${issue.id}`}
-                disabled={disableUserActions}
-                expandedIssues={expandedIssues}
-                issue={issue}
-                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
-              />
-            );
-
-          if (property === "estimate")
-            return (
-              <SpreadsheetEstimateColumn
-                key={`${property}-${issue.id}`}
-                disabled={disableUserActions}
-                expandedIssues={expandedIssues}
-                issue={issue}
-                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
-              />
-            );
-          if (property === "assignee")
-            return (
-              <SpreadsheetAssigneeColumn
-                key={`${property}-${issue.id}`}
-                disabled={disableUserActions}
-                expandedIssues={expandedIssues}
-                issue={issue}
-                members={members}
-                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
-              />
-            );
-          if (property === "labels")
-            return (
-              <SpreadsheetLabelColumn
-                key={`${property}-${issue.id}`}
-                disabled={disableUserActions}
-                expandedIssues={expandedIssues}
-                issue={issue}
-                labels={labels}
-                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
-              />
-            );
-          if (property === "start_date")
-            return (
-              <SpreadsheetStartDateColumn
-                key={`${property}-${issue.id}`}
-                disabled={disableUserActions}
-                expandedIssues={expandedIssues}
-                issue={issue}
-                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
-              />
-            );
-          if (property === "due_date")
-            return (
-              <SpreadsheetDueDateColumn
-                key={`${property}-${issue.id}`}
-                disabled={disableUserActions}
-                expandedIssues={expandedIssues}
-                issue={issue}
-                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
-              />
-            );
-          if (property === "created_on")
-            return (
-              <SpreadsheetCreatedOnColumn
-                key={`${property}-${issue.id}`}
-                expandedIssues={expandedIssues}
-                issue={issue}
-              />
-            );
-          if (property === "updated_on")
-            return (
-              <SpreadsheetUpdatedOnColumn
-                key={`${property}-${issue.id}`}
-                expandedIssues={expandedIssues}
-                issue={issue}
-              />
-            );
-
-          return null;
-        })}
+                value={`${property}-${issue.id}`}
+                className="h-11 flex items-center px-4 py-2.5 border-b-[0.5px] border-custom-border-200"
+              >
+                {property === "state" ? (
+                  <SpreadsheetStateColumn
+                    disabled={disableUserActions}
+                    expandedIssues={expandedIssues}
+                    issue={issue}
+                    onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+                    states={states}
+                  />
+                ) : property === "priority" ? (
+                  <SpreadsheetPriorityColumn
+                    key={`${property}-${issue.id}`}
+                    disabled={disableUserActions}
+                    expandedIssues={expandedIssues}
+                    issue={issue}
+                    onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+                  />
+                ) : property === "estimate" ? (
+                  <SpreadsheetEstimateColumn
+                    key={`${property}-${issue.id}`}
+                    disabled={disableUserActions}
+                    expandedIssues={expandedIssues}
+                    issue={issue}
+                    onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+                  />
+                ) : property === "assignee" ? (
+                  <SpreadsheetAssigneeColumn
+                    key={`${property}-${issue.id}`}
+                    disabled={disableUserActions}
+                    expandedIssues={expandedIssues}
+                    issue={issue}
+                    members={members}
+                    onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+                  />
+                ) : property === "labels" ? (
+                  <SpreadsheetLabelColumn
+                    key={`${property}-${issue.id}`}
+                    disabled={disableUserActions}
+                    expandedIssues={expandedIssues}
+                    issue={issue}
+                    labels={labels}
+                    onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+                  />
+                ) : property === "start_date" ? (
+                  <SpreadsheetStartDateColumn
+                    key={`${property}-${issue.id}`}
+                    disabled={disableUserActions}
+                    expandedIssues={expandedIssues}
+                    issue={issue}
+                    onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+                  />
+                ) : property === "due_date" ? (
+                  <SpreadsheetDueDateColumn
+                    key={`${property}-${issue.id}`}
+                    disabled={disableUserActions}
+                    expandedIssues={expandedIssues}
+                    issue={issue}
+                    onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+                  />
+                ) : property === "created_on" ? (
+                  <SpreadsheetCreatedOnColumn
+                    key={`${property}-${issue.id}`}
+                    expandedIssues={expandedIssues}
+                    issue={issue}
+                  />
+                ) : property === "updated_on" ? (
+                  <SpreadsheetUpdatedOnColumn
+                    key={`${property}-${issue.id}`}
+                    expandedIssues={expandedIssues}
+                    issue={issue}
+                  />
+                ) : null}
+              </Command.Item>
+            ))}
+          </>
+        </Command.Group>
       </div>
     </div>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index a1e642bbc..fe814f5fd 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -19,6 +19,7 @@ import {
   IStateResponse,
   IUserLite,
 } from "types";
+import { Command } from "cmdk";
 
 type Props = {
   displayProperties: IIssueDisplayProperties;
@@ -80,64 +81,68 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
   }, []);
 
   return (
-    <>
-      <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
-        <div className="h-full w-full flex flex-col">
-          <div ref={containerRef} className="flex max-h-full h-full overflow-y-auto">
-            {issues ? (
-              <>
-                <div className="sticky left-0 w-[28rem] z-[2]">
-                  <div
-                    className="relative flex flex-col h-max w-full bg-custom-background-100 z-[2]"
-                    style={{
-                      boxShadow: isScrolled ? "8px -9px 12px rgba(0, 0, 0, 0.05)" : "",
-                    }}
-                  >
-                    <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-100">
-                      {displayProperties.key && (
-                        <span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">ID</span>
-                      )}
-                      <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">Issue</span>
+    <Command>
+      <Command.List>
+        <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
+          <div className="h-full w-full flex flex-col">
+            <div
+              ref={containerRef}
+              className="flex max-h-full h-full overflow-y-auto divide-x-[0.5px] divide-custom-border-200"
+            >
+              {issues ? (
+                <>
+                  <div className="sticky left-0 w-[28rem] z-[2]">
+                    <div
+                      className="relative flex flex-col h-max w-full bg-custom-background-100 z-[2]"
+                      style={{
+                        boxShadow: isScrolled ? "8px -9px 12px rgba(0, 0, 0, 0.05)" : "",
+                      }}
+                    >
+                      <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-100">
+                        {displayProperties.key && (
+                          <span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">ID</span>
+                        )}
+                        <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">Issue</span>
+                      </div>
+
+                      {issues.map((issue: IIssue, index) => (
+                        <SpreadsheetIssuesColumn
+                          key={`${issue.id}_${index}`}
+                          issue={issue}
+                          projectId={issue.project_detail.id}
+                          expandedIssues={expandedIssues}
+                          setExpandedIssues={setExpandedIssues}
+                          properties={displayProperties}
+                          handleIssueAction={handleIssueAction}
+                          disableUserActions={disableUserActions}
+                        />
+                      ))}
                     </div>
-
-                    {issues.map((issue: IIssue, index) => (
-                      <SpreadsheetIssuesColumn
-                        key={`${issue.id}_${index}`}
-                        issue={issue}
-                        projectId={issue.project_detail.id}
-                        expandedIssues={expandedIssues}
-                        setExpandedIssues={setExpandedIssues}
-                        properties={displayProperties}
-                        handleIssueAction={handleIssueAction}
-                        disableUserActions={disableUserActions}
-                      />
-                    ))}
                   </div>
+
+                  <SpreadsheetColumnsList
+                    displayFilters={displayFilters}
+                    displayProperties={displayProperties}
+                    disableUserActions={disableUserActions}
+                    expandedIssues={expandedIssues}
+                    handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+                    handleUpdateIssue={handleUpdateIssue}
+                    issues={issues}
+                    members={members}
+                    labels={labels}
+                    states={states}
+                  />
+                </>
+              ) : (
+                <div className="grid place-items-center h-full w-full">
+                  <Spinner />
                 </div>
+              )}
+            </div>
 
-                <SpreadsheetColumnsList
-                  displayFilters={displayFilters}
-                  displayProperties={displayProperties}
-                  disableUserActions={disableUserActions}
-                  expandedIssues={expandedIssues}
-                  handleDisplayFilterUpdate={handleDisplayFilterUpdate}
-                  handleUpdateIssue={handleUpdateIssue}
-                  issues={issues}
-                  members={members}
-                  labels={labels}
-                  states={states}
-                />
-              </>
-            ) : (
-              <div className="grid place-items-center h-full w-full">
-                <Spinner />
-              </div>
-            )}
-          </div>
-
-          <div className="border-t border-custom-border-100">
-            <div className="mb-3 z-50 sticky bottom-0 left-0">
-              {/* <ListInlineCreateIssueForm
+            <div className="border-t border-custom-border-100">
+              <div className="mb-3 z-50 sticky bottom-0 left-0">
+                {/* <ListInlineCreateIssueForm
                 isOpen={isInlineCreateIssueFormOpen}
                 handleClose={() => setIsInlineCreateIssueFormOpen(false)}
                 prePopulatedData={{
@@ -145,44 +150,45 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
                   ...(moduleId && { module: moduleId.toString() }),
                 }}
               /> */}
-            </div>
+              </div>
 
-            {!disableUserActions &&
-              !isInlineCreateIssueFormOpen &&
-              (type === "issue" ? (
-                <button
-                  className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] w-full"
-                  onClick={() => setIsInlineCreateIssueFormOpen(true)}
-                >
-                  <PlusIcon className="h-4 w-4" />
-                  New Issue
-                </button>
-              ) : (
-                <CustomMenu
-                  className="sticky left-0 z-10"
-                  customButton={
-                    <button
-                      className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] border-custom-border-200 w-full"
-                      type="button"
-                    >
-                      <PlusIcon className="h-4 w-4" />
-                      New Issue
-                    </button>
-                  }
-                  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>
-              ))}
+              {!disableUserActions &&
+                !isInlineCreateIssueFormOpen &&
+                (type === "issue" ? (
+                  <button
+                    className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] w-full"
+                    onClick={() => setIsInlineCreateIssueFormOpen(true)}
+                  >
+                    <PlusIcon className="h-4 w-4" />
+                    New Issue
+                  </button>
+                ) : (
+                  <CustomMenu
+                    className="sticky left-0 z-10"
+                    customButton={
+                      <button
+                        className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] border-custom-border-200 w-full"
+                        type="button"
+                      >
+                        <PlusIcon className="h-4 w-4" />
+                        New Issue
+                      </button>
+                    }
+                    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>
-      </div>
-    </>
+      </Command.List>
+    </Command>
   );
 });
diff --git a/web/components/issues/issue-layouts/spreadsheet/start-date-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/start-date-column/index.ts
deleted file mode 100644
index 94f229498..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/start-date-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-start-date-column";
-export * from "./start-date-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/start-date-column/start-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/start-date-column/start-date-column.tsx
deleted file mode 100644
index cdb33f909..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/start-date-column/start-date-column.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-// components
-import { ViewStartDateSelect } from "components/issues";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (data: string | null) => void;
-  disabled: boolean;
-};
-
-export const StartDateColumn: React.FC<Props> = (props) => {
-  const { issue, onChange, disabled } = props;
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <ViewStartDateSelect issue={issue} onChange={onChange} noBorder disabled={disabled} />
-      </span>
-    </div>
-  );
-};
diff --git a/web/components/issues/issue-layouts/spreadsheet/state-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/state-column/index.ts
deleted file mode 100644
index f3cbef871..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/state-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-state-column";
-export * from "./state-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/state-column/state-column.tsx b/web/components/issues/issue-layouts/spreadsheet/state-column/state-column.tsx
deleted file mode 100644
index 3e290448b..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/state-column/state-column.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-// components
-import { StateSelect } from "components/states";
-// types
-import { IIssue, IState, IStateResponse } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (formData: IState) => void;
-  states: IStateResponse | undefined;
-  disabled: boolean;
-};
-
-export const StateColumn: React.FC<Props> = (props) => {
-  const { issue, onChange, states, disabled } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <StateSelect
-          value={issue.state_detail}
-          onChange={onChange}
-          stateGroups={states}
-          buttonClassName="!shadow-none !border-0"
-          hideDropdownArrow
-          disabled={disabled}
-        />
-      </span>
-    </div>
-  );
-};
diff --git a/web/components/issues/issue-layouts/spreadsheet/updated-on-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/updated-on-column/index.ts
deleted file mode 100644
index af1337a7f..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/updated-on-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-updated-on-column";
-export * from "./updated-on-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/updated-on-column/updated-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/updated-on-column/updated-on-column.tsx
deleted file mode 100644
index ed4c0294f..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/updated-on-column/updated-on-column.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-// helpers
-import { renderLongDetailDateFormat } from "helpers/date-time.helper";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  issue: IIssue;
-};
-
-export const UpdatedOnColumn: React.FC<Props> = (props) => {
-  const { issue } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <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>
-      </span>
-    </div>
-  );
-};
diff --git a/web/components/issues/view-select/start-date.tsx b/web/components/issues/view-select/start-date.tsx
index 7fd61cb44..d70c0de46 100644
--- a/web/components/issues/view-select/start-date.tsx
+++ b/web/components/issues/view-select/start-date.tsx
@@ -39,7 +39,7 @@ export const ViewStartDateSelect: React.FC<Props> = ({
           placeholder="Start date"
           value={issue?.start_date}
           onChange={onChange}
-          className={`bg-transparent ${issue?.start_date ? "w-[6.5rem]" : "w-[5rem] text-center"}`}
+          className={`bg-inherit ${issue?.start_date ? "w-[6.5rem]" : "w-[5rem] text-center"}`}
           maxDate={maxDate ?? undefined}
           noBorder={noBorder}
           handleOnOpen={handleOnOpen}
diff --git a/web/styles/command-pallette.css b/web/styles/command-pallette.css
index 12cfe18eb..83466e7b1 100644
--- a/web/styles/command-pallette.css
+++ b/web/styles/command-pallette.css
@@ -9,13 +9,13 @@
 }
 
 [cmdk-item] {
-  display: flex;
+  /* display: flex;
   align-items: center;
   justify-content: space-between;
   border-radius: 0.375rem;
   padding: 0.5rem;
   font-size: 0.825rem;
-  line-height: 1.25rem;
+  line-height: 1.25rem; */
   cursor: pointer;
 }