dev: implement spreadsheet navigation using cmdk

web/components/issues/issue-layouts/spreadsheet/assignee-column/assignee-column.tsx

@@ -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>
-  );
-};

web/components/issues/issue-layouts/spreadsheet/assignee-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-assignee-column";
-export * from "./assignee-column";

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
+      <MembersSelect
-        issue={issue}
+        value={issue.assignees}
-        members={members}
         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>
+    </>
   );
 };

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>
+    </>
   );
 };

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>
+    </>
   );
 };

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>
+    </>
   );
 };

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";

web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx

@@ -63,7 +63,7 @@ export const IssueColumn: React.FC<Props> = ({
   const paddingLeft = `${nestingLevel * 54}px`;
 
   return (
-    <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-r border-custom-border-100">
+    <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
       {properties.key && (
         <div
           className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"

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
+      <LabelSelect
-        issue={issue}
+        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>
+    </>
   );
 };

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 &&

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>
+    </>
   );
 };

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
+      <StateSelect
-        issue={issue}
+        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>
+    </>
   );
 };

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>
+    </>
   );
 };

web/components/issues/issue-layouts/spreadsheet/created-on-column/created-on-column.tsx

@@ -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>
-);

web/components/issues/issue-layouts/spreadsheet/created-on-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-created-on-column";
-export * from "./created-on-column";

web/components/issues/issue-layouts/spreadsheet/due-date-column/due-date-column.tsx

@@ -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>
-  );
-};

web/components/issues/issue-layouts/spreadsheet/due-date-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-due-date-column";
-export * from "./due-date-column";

web/components/issues/issue-layouts/spreadsheet/estimate-column/estimate-column.tsx

@@ -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>
-  );
-};

web/components/issues/issue-layouts/spreadsheet/estimate-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-estimate-column";
-export * from "./estimate-column";

web/components/issues/issue-layouts/spreadsheet/index.ts

@@ -1,15 +1,4 @@
-export * from "./assignee-column";
+export * from "./columns";
-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 "./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";

web/components/issues/issue-layouts/spreadsheet/label-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-label-column";
-export * from "./label-column";

web/components/issues/issue-layouts/spreadsheet/label-column/label-column.tsx

@@ -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>
-  );
-};

web/components/issues/issue-layouts/spreadsheet/priority-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-priority-column";
-export * from "./priority-column";

web/components/issues/issue-layouts/spreadsheet/priority-column/priority-column.tsx

@@ -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>
-  );
-};

web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx

@@ -7,6 +7,7 @@ import {
   ListFilter,
   MoveRight,
 } from "lucide-react";
+import { Command } from "cmdk";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 // components
@@ -165,22 +166,23 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
             )}
         </CustomMenu>
       </div>
+
       <div className="h-full min-w-[8rem] w-full">
-        {issues?.map((issue) => {
+        {issues?.map((issue) => (
-          if (property === "state")
+          <Command.Item
-            return (
+            key={`${property}-${issue.id}`}
+            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
-                key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
                 expandedIssues={expandedIssues}
                 issue={issue}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
                 states={states}
               />
-            );
+            ) : property === "priority" ? (
-
-          if (property === "priority")
-            return (
               <SpreadsheetPriorityColumn
                 key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
@@ -188,10 +190,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 issue={issue}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
               />
-            );
+            ) : property === "estimate" ? (
-
-          if (property === "estimate")
-            return (
               <SpreadsheetEstimateColumn
                 key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
@@ -199,9 +198,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 issue={issue}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
               />
-            );
+            ) : property === "assignee" ? (
-          if (property === "assignee")
-            return (
               <SpreadsheetAssigneeColumn
                 key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
@@ -210,9 +207,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 members={members}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
               />
-            );
+            ) : property === "labels" ? (
-          if (property === "labels")
-            return (
               <SpreadsheetLabelColumn
                 key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
@@ -221,9 +216,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 labels={labels}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
               />
-            );
+            ) : property === "start_date" ? (
-          if (property === "start_date")
-            return (
               <SpreadsheetStartDateColumn
                 key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
@@ -231,9 +224,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 issue={issue}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
               />
-            );
+            ) : property === "due_date" ? (
-          if (property === "due_date")
-            return (
               <SpreadsheetDueDateColumn
                 key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
@@ -241,26 +232,21 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 issue={issue}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
               />
-            );
+            ) : property === "created_on" ? (
-          if (property === "created_on")
-            return (
               <SpreadsheetCreatedOnColumn
                 key={`${property}-${issue.id}`}
                 expandedIssues={expandedIssues}
                 issue={issue}
               />
-            );
+            ) : property === "updated_on" ? (
-          if (property === "updated_on")
-            return (
               <SpreadsheetUpdatedOnColumn
                 key={`${property}-${issue.id}`}
                 expandedIssues={expandedIssues}
                 issue={issue}
               />
-            );
+            ) : null}
-
+          </Command.Item>
-          return null;
+        ))}
-        })}
       </div>
     </div>
   );

web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
+import { Command } from "cmdk";
 // components
 import {
   SpreadsheetColumnsList,
@@ -80,64 +81,74 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
   }, []);
 
   return (
-    <>
+    <Command onKeyDown={(e) => console.log(e)}>
-      <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
+      <Command.Input
-        <div className="h-full w-full flex flex-col">
+        className="w-full border-0 border-b border-custom-border-200 bg-transparent p-4 pl-11 text-custom-text-100 placeholder:text-custom-text-400 outline-none focus:ring-0 text-sm"
-          <div ref={containerRef} className="flex max-h-full h-full overflow-y-auto">
+        placeholder="Enter"
-            {issues ? (
+        autoFocus
-              <>
+        tabIndex={1}
-                <div className="sticky left-0 w-[28rem] z-[2]">
+      />
-                  <div
+      <Command.List>
-                    className="relative flex flex-col h-max w-full bg-custom-background-100 z-[2]"
+        <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
-                    style={{
+          <div className="h-full w-full flex flex-col">
-                      boxShadow: isScrolled ? "8px -9px 12px rgba(0, 0, 0, 0.05)" : "",
+            <div
-                    }}
+              ref={containerRef}
-                  >
+              className="flex max-h-full h-full overflow-y-auto divide-x-[0.5px] divide-custom-border-200"
-                    <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 && (
+              {issues ? (
-                        <span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">ID</span>
+                <>
-                      )}
+                  <div className="sticky left-0 w-[28rem] z-[2]">
-                      <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">Issue</span>
+                    <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
+            <div className="border-t border-custom-border-100">
-                  displayFilters={displayFilters}
+              <div className="mb-3 z-50 sticky bottom-0 left-0">
-                  displayProperties={displayProperties}
+                {/* <ListInlineCreateIssueForm
-                  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
                 isOpen={isInlineCreateIssueFormOpen}
                 handleClose={() => setIsInlineCreateIssueFormOpen(false)}
                 prePopulatedData={{
@@ -145,44 +156,45 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
                   ...(moduleId && { module: moduleId.toString() }),
                 }}
               /> */}
-            </div>
+              </div>
 
-            {!disableUserActions &&
+              {!disableUserActions &&
-              !isInlineCreateIssueFormOpen &&
+                !isInlineCreateIssueFormOpen &&
-              (type === "issue" ? (
+                (type === "issue" ? (
-                <button
+                  <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"
+                    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)}
+                    onClick={() => setIsInlineCreateIssueFormOpen(true)}
-                >
+                  >
-                  <PlusIcon className="h-4 w-4" />
+                    <PlusIcon className="h-4 w-4" />
-                  New Issue
+                    New Issue
-                </button>
+                  </button>
-              ) : (
+                ) : (
-                <CustomMenu
+                  <CustomMenu
-                  className="sticky left-0 z-10"
+                    className="sticky left-0 z-10"
-                  customButton={
+                    customButton={
-                    <button
+                      <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"
+                        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"
+                        type="button"
-                    >
+                      >
-                      <PlusIcon className="h-4 w-4" />
+                        <PlusIcon className="h-4 w-4" />
-                      New Issue
+                        New Issue
-                    </button>
+                      </button>
-                  }
+                    }
-                  optionsClassName="left-5 !w-36"
+                    optionsClassName="left-5 !w-36"
-                  noBorder
+                    noBorder
-                >
+                  >
-                  <CustomMenu.MenuItem onClick={() => setIsInlineCreateIssueFormOpen(true)}>
+                    <CustomMenu.MenuItem onClick={() => setIsInlineCreateIssueFormOpen(true)}>
-                    Create new
+                      Create new
-                  </CustomMenu.MenuItem>
+                    </CustomMenu.MenuItem>
-                  {openIssuesListModal && (
+                    {openIssuesListModal && (
-                    <CustomMenu.MenuItem onClick={openIssuesListModal}>Add an existing issue</CustomMenu.MenuItem>
+                      <CustomMenu.MenuItem onClick={openIssuesListModal}>Add an existing issue</CustomMenu.MenuItem>
-                  )}
+                    )}
-                </CustomMenu>
+                  </CustomMenu>
-              ))}
+                ))}
+            </div>
           </div>
         </div>
-      </div>
+      </Command.List>
-    </>
+    </Command>
   );
 });

web/components/issues/issue-layouts/spreadsheet/start-date-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-start-date-column";
-export * from "./start-date-column";

web/components/issues/issue-layouts/spreadsheet/start-date-column/start-date-column.tsx

@@ -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>
-  );
-};

web/components/issues/issue-layouts/spreadsheet/state-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-state-column";
-export * from "./state-column";

web/components/issues/issue-layouts/spreadsheet/state-column/state-column.tsx

@@ -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>
-  );
-};

web/components/issues/issue-layouts/spreadsheet/updated-on-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-updated-on-column";
-export * from "./updated-on-column";

web/components/issues/issue-layouts/spreadsheet/updated-on-column/updated-on-column.tsx

@@ -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>
-  );
-};

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}

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;
 }