make creating a folder much more discoverable in the +New page

Author: williamstein

src/packages/frontend/project/new/new-file-page.tsx

@@ -4,8 +4,7 @@
  */
 
 import { Button, Input, Modal, Space } from "antd";
-import { useState } from "react";
-
+import { useEffect, useRef, useState } from "react";
 import { default_filename } from "@cocalc/frontend/account";
 import { Alert, Col, Row } from "@cocalc/frontend/antd-bootstrap";
 import {
@@ -41,6 +40,25 @@ interface Props {
 }
 
 export default function NewFilePage(props: Props) {
+  const [createFolderModal, setCreateFolderModal] = useState<boolean>(false);
+  const createFolderModalRef = useRef<any>(null);
+  useEffect(() => {
+    setTimeout(() => {
+      if (createFolderModal && createFolderModalRef.current) {
+        createFolderModalRef.current.focus();
+        createFolderModalRef.current.select();
+      }
+    }, 1);
+  }, [createFolderModal]);
+  const inputRef = useRef<any>(null);
+  useEffect(() => {
+    setTimeout(() => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+        inputRef.current.select();
+      }
+    }, 1);
+  }, []);
   const { project_id } = props;
   const compute_server_id = useTypedRedux({ project_id }, "compute_server_id");
   const actions = useActions({ project_id });
@@ -273,7 +291,42 @@ export default function NewFilePage(props: Props) {
             path={current_path}
             onUpload={() => getActions().fetch_directory_listing()}
           />{" "}
-          New File or Folder
+          New File or{" "}
+          <a
+            onClick={() => {
+              setCreateFolderModal(true);
+            }}
+          >
+            Folder
+          </a>
+          <Modal
+            open={createFolderModal}
+            title={"Create New Folder"}
+            onCancel={() => setCreateFolderModal(false)}
+            onOk={() => {
+              setCreateFolderModal(false);
+              if (filename) {
+                createFolder();
+              }
+            }}
+          >
+            <div style={{ textAlign: "center" }}>
+              <Input
+                ref={createFolderModalRef}
+                style={{ margin: "15px 0" }}
+                autoFocus
+                size="large"
+                value={filename}
+                onChange={(e) => setFilename(e.target.value)}
+                onPressEnter={() => {
+                  setCreateFolderModal(false);
+                  if (filename) {
+                    createFolder();
+                  }
+                }}
+              />
+            </div>
+          </Modal>
         </>
       }
       subtitle={
@@ -330,6 +383,7 @@ export default function NewFilePage(props: Props) {
             >
               <Input
                 size="large"
+                ref={inputRef}
                 autoFocus
                 value={filename}
                 disabled={extensionWarning}