dev: implement spreadsheet navigation using cmdk

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
@@ -168,8 +169,9 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
 
       <div className="h-full min-w-[8rem] w-full">
         {issues?.map((issue) => (
-          <div
+          <Command.Item
             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" ? (
@@ -243,7 +245,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 issue={issue}
               />
             ) : null}
-          </div>
+          </Command.Item>
         ))}
       </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,6 +81,14 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
   }, []);
 
   return (
+    <Command onKeyDown={(e) => console.log(e)}>
+      <Command.Input
+        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"
+        placeholder="Enter"
+        autoFocus
+        tabIndex={1}
+      />
+      <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
@@ -185,5 +194,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
             </div>
           </div>
         </div>
+      </Command.List>
+    </Command>
   );
 });