⌨️ Keyboard shortcuts/navigation for create and upload (#736)

tdrive/frontend/src/app/views/client/body/drive/modals/create/index.tsx

@@ -171,12 +171,21 @@ export const CreateModal = ({
 };
 
 const CreateModalOption = (props: { testClassId?: string; icon: ReactNode; text: string; onClick: () => void }) => {
+  // on press enter
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Enter') {
+      props.onClick();
+    }
+  };
+
   const testId = props.testClassId ? `testid:${props.testClassId}` : '';
 
   return (
     <div
       onClick={props.onClick}
-      className={`flex flex-row p-4 dark:bg-zinc-900 dark:text-white bg-zinc-100 hover:bg-opacity-75 cursor-pointer rounded-md m-2 ${testId}`}
+      className={`flex flex-row p-4 dark:bg-zinc-900 dark:text-white bg-zinc-100 hover:bg-opacity-75 cursor-pointer rounded-md m-2 focus:bg-zinc-800 dark:focus:bg-zinc-800 outline-none focus:border-none ${testId}`}
+      tabIndex={0}
+      onKeyUp={handleKeyPress}
     >
       <div className="flex items-center justify-center">{props.icon}</div>
       <div className="grow flex items-center ml-2">

tdrive/frontend/src/app/views/client/body/drive/modals/upload/index.tsx

@@ -90,11 +90,25 @@ export const UploadModal = ({
   );
 };
 
-const CreateModalOption = (props: { icon: ReactNode; text: string; onClick: () => void; testClassId?: string; }) => {
+const CreateModalOption = (props: {
+  icon: ReactNode;
+  text: string;
+  onClick: () => void;
+  testClassId?: string;
+}) => {
+  // on press enter
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Enter') {
+      props.onClick();
+    }
+  };
+
   return (
     <div
       onClick={props.onClick}
-      className={`flex flex-row p-4 dark:bg-zinc-900 dark:text-white bg-zinc-100 hover:bg-opacity-75 cursor-pointer rounded-md m-2 testid:${props.testClassId}`}
+      className={`flex flex-row p-4 dark:bg-zinc-900 dark:text-white bg-zinc-100 hover:bg-opacity-75 cursor-pointer rounded-md m-2 focus:bg-zinc-800 dark:focus:bg-zinc-800 outline-none focus:border-none testid:${props.testClassId}`}
+      tabIndex={0}
+      onKeyUp={handleKeyPress}
     >
       <div className="flex items-center justify-center">{props.icon}</div>
       <div className="grow flex items-center ml-2">

tdrive/frontend/src/app/views/client/side-bar/actions.tsx

@@ -166,6 +166,7 @@ export default () => {
 
               <Button
                 onClick={() => uploadItemModal()}
+                shortcut='U'
                 size="lg"
                 theme="primary"
                 className="w-full mb-2 justify-center"
@@ -176,6 +177,7 @@ export default () => {
               </Button>
               <Button
                 onClick={() => openItemModal()}
+                shortcut='C'
                 size="lg"
                 theme="secondary"
                 className="w-full mb-2 justify-center"