make it easier to create a folder

- based on user feedback and testing

Author: williamstein

src/packages/frontend/course/assignments/assignment.tsx

@@ -692,7 +692,7 @@ export function Assignment({
             to a backup file ending in a tilde, or possibly only be available in
             snapshots. Select "Replace student files!" in case you do <b>not</b>{" "}
             want to create any backups and also <b>delete</b> all other files in
-            the assignment directory of their projects.{" "}
+            the assignment folder of their projects.{" "}
             <a
               target="_blank"
               href="https://github.com/sagemathinc/cocalc/wiki/CourseCopy"

src/packages/frontend/course/common/multiple-add-search.tsx

@@ -59,7 +59,7 @@ export function MultipleAddSearch({
             boxShadow: "8px 8px 4px #888",
             ...selectorStyle,
           }}
-          title={`Select one or more ${itemName} directories`}
+          title={`Select one or more ${itemName} folders`}
           onMultiSelect={setSelectedItems}
           onClose={clear}
           isExcluded={(path) => {

src/packages/frontend/file-associations.ts

@@ -17,7 +17,6 @@ Maybe that could be useful at some point.
 */
 
 import { IconName } from "./components/icon";
-
 import imageExtensions from "image-extensions";
 import videoExtensions from "video-extensions";
 import audioExtensions from "audio-extensions";
@@ -27,6 +26,13 @@ export function filenameMode(path: string, fallback = "text"): string {
   return file_associations[filename_extension(path)]?.opts?.mode ?? fallback;
 }
 
+export function filenameIcon(
+  path: string,
+  fallback = "file" as IconName,
+): IconName {
+  return file_associations[filename_extension(path)]?.icon ?? fallback;
+}
+
 const codemirror_associations: { [ext: string]: string } = {
   adb: "ada",
   asm: "text/x-gas",

src/packages/frontend/project/directory-selector.tsx

@@ -10,7 +10,7 @@ Component that allows a user to select a directory in a project.
 */
 
 import { join } from "path";
-import { Button, Card, Checkbox, Input, InputRef, Modal, Tooltip } from "antd";
+import { Button, Card, Checkbox, Input, InputRef, Modal } from "antd";
 import {
   CSSProperties,
   ReactNode,
@@ -452,19 +452,20 @@ function Subdirs(props) {
     }
     paths.sort();
     newPaths.sort();
+    const createProps = {
+      project_id,
+      path,
+      computeServerId,
+      directoryListings,
+      toggleSelection,
+    };
+    w.push(<CreateDirectory key="create1" {...createProps} />);
     for (const name of paths.concat(newPaths)) {
       w.push(<Directory key={name} {...props} path={join(base, name)} />);
     }
-    w.push(
-      <CreateDirectory
-        key="\\createdirectory\\"
-        project_id={project_id}
-        path={path}
-        computeServerId={computeServerId}
-        directoryListings={directoryListings}
-        toggleSelection={toggleSelection}
-      />,
-    );
+    if (w.length > 10) {
+      w.push(<CreateDirectory key="create2" {...createProps} />);
+    }
     return (
       <div key={path} style={style}>
         {w}
@@ -517,15 +518,16 @@ function CreateDirectory({
     const target = path + (path != "" ? "/" : "") + value;
     (async () => {
       try {
-        setValue(
-          await getValidPath(
-            project_id,
-            target,
-            directoryListings,
-            computeServerId,
-          ),
+        const path1 = await getValidPath(
+          project_id,
+          target,
+          directoryListings,
+          computeServerId,
         );
-        input_ref.current?.select();
+        setValue(path_split(path1).tail);
+        setTimeout(() => {
+          input_ref.current?.select();
+        }, 1);
       } catch (err) {
         setError(`${err}`);
       }
@@ -539,6 +541,7 @@ function CreateDirectory({
         command: "mkdir",
         args: ["-p", value],
         project_id,
+        path,
         compute_server_id: computeServerId,
         filesystem: true,
       });
@@ -550,35 +553,35 @@ function CreateDirectory({
 
   return (
     <div style={{ color: "#666" }} key={"...-create-dir"}>
-      <Tooltip
-        title="Create a new directory (double click to rename)"
-        placement="left"
-        mouseEnterDelay={0.9}
+      <Modal
+        title={
+          <>
+            <Icon name="plus-circle" style={{ marginRight: "5px" }} /> New Folder
+          </>
+        }
+        open={open}
+        onOk={createFolder}
+        onCancel={() => setOpen(false)}
       >
-        <Modal open={open} onOk={createFolder} onCancel={() => setOpen(false)}>
-          <Input
-            ref={input_ref}
-            title="Create Folder"
-            style={{ marginTop: "30px" }}
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-            onPressEnter={createFolder}
-            autoFocus
-          />
-        </Modal>
-        <Button
-          size="small"
-          type="text"
-          style={{ color: "#666" }}
-          disabled={open}
-          onClick={() => {
-            setOpen(true);
-          }}
-        >
-          <Icon name="plus" style={{ marginRight: "5px" }} /> Create{" "}
-          {NEW_FOLDER}...
-        </Button>
-      </Tooltip>
+        <Input
+          ref={input_ref}
+          title="New Folder"
+          style={{ marginTop: "30px" }}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onPressEnter={createFolder}
+          autoFocus
+        />
+      </Modal>
+      <Button
+        disabled={open}
+        onClick={() => {
+          setOpen(true);
+        }}
+        style={{ margin: "5px 0" }}
+      >
+        <Icon name="plus-circle" style={{ marginRight: "5px" }} /> New Folder ...
+      </Button>
       <ShowError error={error} setError={setError} />
     </div>
   );

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

@@ -6,9 +6,9 @@
 import { Button, Input, Modal, Space } from "antd";
 import { useEffect, useRef, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-
 import { default_filename } from "@cocalc/frontend/account";
 import { Alert, Col, Row } from "@cocalc/frontend/antd-bootstrap";
+import { filenameIcon } from "@cocalc/frontend/file-associations";
 import {
   ProjectActions,
   useActions,
@@ -259,6 +259,7 @@ export default function NewFilePage(props: Props) {
 
   const renderCreate = () => {
     let desc: string;
+    const ext = filename_extension(filename);
     if (filename.endsWith("/")) {
       desc = intl.formatMessage(labels.folder);
     } else if (
@@ -267,20 +268,19 @@ export default function NewFilePage(props: Props) {
     ) {
       desc = intl.formatMessage(labels.download);
     } else {
-      const ext = filename_extension(filename);
       if (ext) {
         desc = intl.formatMessage(
           {
             id: "project.new.new-file-page.create.desc_file",
             defaultMessage: "{ext} file",
-            description: "An extension-nameed file on a button",
+            description: "An extension-named file on a button",
           },
           { ext },
         );
       } else {
         desc = intl.formatMessage({
           id: "project.new.new-file-page.create.desc_no_ext",
-          defaultMessage: "file with no extension",
+          defaultMessage: "File with no extension",
           description: "A filename without an extension",
         });
       }
@@ -295,27 +295,34 @@ export default function NewFilePage(props: Props) {
     );
 
     return (
-      <Tip
-        icon="file"
-        title={title}
-        tip={intl.formatMessage(
-          {
-            id: "project.new.new-file-page.create.tooltip",
-            defaultMessage: `{title}.  You can also press return.`,
-            description:
-              "Informing the user in this tooltip, that it is also possible to press the return key",
-          },
-          { title },
+      <Space>
+        {!ext && !filename.endsWith("/") && (
+          <Button size="large" onClick={() => createFolder()}>
+            <Icon name="folder" /> Create Folder
+          </Button>
         )}
-      >
-        <Button
-          size="large"
-          disabled={filename.trim() == ""}
-          onClick={() => submit()}
+        <Tip
+          icon="file"
+          title={title}
+          tip={intl.formatMessage(
+            {
+              id: "project.new.new-file-page.create.tooltip",
+              defaultMessage: `{title}.  You can also press return.`,
+              description:
+                "Informing the user in this tooltip, that it is also possible to press the return key",
+            },
+            { title },
+          )}
         >
-          Create {desc}
-        </Button>
-      </Tip>
+          <Button
+            size="large"
+            disabled={filename.trim() == ""}
+            onClick={() => submit()}
+          >
+            <Icon name={filenameIcon(filename)} /> Create {desc}
+          </Button>
+        </Tip>
+      </Space>
     );
   };