🩹 fixed folder creation & other small fixes

loloToster · Dec 20, 2024 · fe772e5 · fe772e5
1 parent 355d878
commit fe772e5
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 56 deletions.
diff --git a/app.ts b/app.ts
@@ -142,19 +142,25 @@ function addFiles(files: Express.Multer.File[], ip: string, folder?: string, fol
             }
         }
 
-        const paramsPlaceholders = newDbItems.map(() => "(?, ?, ?, ?, ?)").join(", ")
-        const params = newDbItems.map(item => {
-            let parsedItem = Object.values(item)
-            // remove created_at & trashed & pinned
-            parsedItem.splice(-3)
-            return parsedItem
-        }).flat()
-
-        db.run(
-            `INSERT INTO items(type, id, title, ip, folder) VALUES ${paramsPlaceholders}`,
-            params,
-            err => err ? rej(err) : res(newFolder ? [newFolder] : newDbItems)
-        )
+        if (files.length) {
+            const paramsPlaceholders = newDbItems.map(() => "(?, ?, ?, ?, ?)").join(", ")
+            const params = newDbItems.map(item => {
+                let parsedItem = Object.values(item)
+                // remove created_at & trashed & pinned
+                parsedItem.splice(-3)
+                return parsedItem
+            }).flat()
+
+            db.run(
+                `INSERT INTO items(type, id, title, ip, folder) VALUES ${paramsPlaceholders}`,
+                params,
+                err => err ? rej(err) : res(newFolder ? [newFolder] : newDbItems)
+            )
+        } else if (newFolder) {
+            res([newFolder])
+        } else {
+            console.warn("invalid use of addFiles")
+        }
     })
 }
 
@@ -173,7 +179,7 @@ apiRouter.post("/file", upload.array("files"), async (req, res) => {
     if (typeof bodyFolderId === "string")
         folderId = bodyFolderId
 
-    if (!Array.isArray(files) || !files.length)
+    if (!Array.isArray(files) || (!files.length && typeof folder !== "string"))
         return res.status(400).send()
 
     const newItems = await addFiles(files, ip || "unknown", folder, folderId)

diff --git a/client/src/components/FileItem/FileItem.scss b/client/src/components/FileItem/FileItem.scss
@@ -28,15 +28,16 @@
 
     $options-size: 50px;
     $options-gap: 5px;
+    $options-height: $options-size + $options-gap;
 
     &__options {
         position: absolute;
-        display: none;
+        display: flex;
         gap: $options-gap;
         top: 0;
         left: 0;
         width: 100%;
-        height: $options-size + $options-gap;
+        height: $options-height;
         padding: $options-gap;
         padding-bottom: 0;
 
@@ -47,16 +48,6 @@
         }
     }
 
-    &:hover &__options {
-        display: flex;
-    }
-
-    @media (hover: none) {
-        &__options {
-            display: flex;
-        }
-    }
-
     &__metadata {
         display: flex;
         flex-direction: column;
@@ -73,6 +64,11 @@
         color: white;
         overflow: hidden;
         text-overflow: ellipsis;
+
+        .material-symbols-rounded {
+            color: c.$main;
+            font-size: 16px;
+        }
     }
 
     &__user {
@@ -104,14 +100,17 @@
         }
     }
 
+    $pinned-padding: 6px;
+    $pinned-size: 36px;
+
     &__pinned {
         position: absolute;
-        top: 6px;
-        left: 6px;
+        top: $pinned-padding;
+        left: $pinned-padding;
         border-radius: 50%;
         background-color: #212121dd;
-        width: 36px;
-        height: 36px;
+        width: $pinned-size;
+        height: $pinned-size;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -120,7 +119,25 @@
             color: c.$main;
         }
 
-        .file-item:hover & {
+        .file-item & {
+            display: none;
+        }
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+        & &__options {
+            display: none;
+        }
+
+        &:hover &__options {
+            display: flex;
+        }
+
+        & &__pinned {
+            display: flex;
+        }
+
+        &:hover &__pinned {
             display: none;
         }
     }

diff --git a/client/src/components/FileItem/FileItem.tsx b/client/src/components/FileItem/FileItem.tsx
@@ -76,7 +76,12 @@ function FileItem(props: { item: ClientFileJson }) {
       </div>
       <div className="file-item__options">
         <div className="file-item__metadata">
-          <div className="file-item__title">{item.title}</div>
+          <div className="file-item__title">
+            {Boolean(item.pinned) && (
+              <span className="material-symbols-rounded">keep</span>
+            )}
+            <span>{item.title}</span>
+          </div>
           <div className="file-item__user">{item.ip}</div>
         </div>
         {item.trashed ? (

diff --git a/client/src/components/ItemList/ItemList.tsx b/client/src/components/ItemList/ItemList.tsx
@@ -25,7 +25,7 @@ export type UploadContent =
     }
   | {
       isText: false;
-      files: FileList;
+      files: FileList | null;
     };
 
 function ItemListInner() {
@@ -43,6 +43,7 @@ function ItemListInner() {
 
   const [uploads, setUploads] = useState<Upload[]>([]);
 
+  const [createEmptyFolder, setCreateEmptyFolder] = useState(false);
   const [folderModalOpen, setFolderModalOpen] = useState(false);
   const [folderName, setFolderName] = useState("");
   const [uploadContent, setUploadContent] = useState<UploadContent | null>(
@@ -62,13 +63,13 @@ function ItemListInner() {
     } else {
       let data = new FormData();
 
-      Array.from(content.files).forEach((f) => data.append("files", f));
+      Array.from(content.files ?? []).forEach((f) => data.append("files", f));
 
       if (typeof folder !== "undefined") data.append("folder", folder);
       if (typeof folderId !== "undefined") data.append("folderId", folderId);
 
       let upload: Upload = {
-        numberOfFiles: content.files.length,
+        numberOfFiles: content.files?.length ?? 0,
         progress: 0,
       };
 
@@ -95,9 +96,10 @@ function ItemListInner() {
   };
 
   const handleUploadAction = (content: UploadContent) => {
-    if (content.isText || content.files.length <= 1)
+    if (content.isText || (content.files && content.files.length <= 1))
       return handleUpload(content);
 
+    setCreateEmptyFolder(!content.files);
     setUploadContent(content);
     setFolderModalOpen(true);
   };
@@ -180,15 +182,19 @@ function ItemListInner() {
             />
             <ActionBtn
               onClick={handleUploadAsFolder}
-              text="Upload as Folder"
-              className="items__upload-modal__btn"
-            />
-            <div className="items__upload-modal__splitter">or</div>
-            <ActionBtn
-              onClick={handleUploadStandalone}
-              text="Upload Files"
+              text={createEmptyFolder ? "Create Folder" : "Upload as Folder"}
               className="items__upload-modal__btn"
             />
+            {!createEmptyFolder && (
+              <>
+                <div className="items__upload-modal__splitter">or</div>
+                <ActionBtn
+                  onClick={handleUploadStandalone}
+                  text="Upload Files"
+                  className="items__upload-modal__btn"
+                />
+              </>
+            )}
             <div className="items__upload-modal__splitter">or</div>
             <ActionBtn
               onClick={handleCancelUpload}

diff --git a/client/src/components/QuickActions/QuickActions.scss b/client/src/components/QuickActions/QuickActions.scss
@@ -34,6 +34,20 @@ $icon-size: 48px;
         }
     }
 
+    &__action-row {
+        display: flex;
+        width: calc(100%);
+        height: calc(50% - ($quick-actions-gap / 2));
+        margin-bottom: $quick-actions-gap;
+        transition: all 100ms ease-in;
+
+        &.hidden {
+            height: 0;
+            border-width: 0;
+            margin-bottom: 0;
+        }
+    }
+
     &__action {
         position: relative;
         display: flex;
@@ -107,7 +121,7 @@ $icon-size: 48px;
             margin-bottom: 0;
         }
 
-        &.hidden {
+        .hidden & {
             height: 0;
             border-width: 0;
             margin-bottom: 0;
@@ -121,4 +135,14 @@ $icon-size: 48px;
             display: flex;
         }
     }
+
+    &__action-row &__action {
+        width: calc(50% - ($quick-actions-gap / 2));
+        height: calc(100%);
+        margin-right: $quick-actions-gap;
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
 }
diff --git a/client/src/components/QuickActions/QuickActions.tsx b/client/src/components/QuickActions/QuickActions.tsx
@@ -76,7 +76,11 @@ function QuickActions(props: { upload: uploadFunc }) {
     });
   };
 
-  const firstActionBtn = useRef<HTMLButtonElement>(null);
+  const handleNewFolder = () => {
+    upload({ isText: false, files: null });
+  };
+
+  const firstActionRow = useRef<HTMLDivElement>(null);
   const secondActionBtn = useRef<HTMLDivElement>(null);
 
   const [savingQuickText, setSavingQuickText] = useState(false);
@@ -86,13 +90,13 @@ function QuickActions(props: { upload: uploadFunc }) {
   const handleQuickTextOpen = () => {
     if (secondActionBtn.current?.classList.contains("active")) return;
 
-    firstActionBtn.current?.classList.add("hidden");
+    firstActionRow.current?.classList.add("hidden");
     secondActionBtn.current?.classList.add("active");
     textarea.current?.focus();
   };
 
   const handleQuickTextClose = (e?: React.MouseEvent) => {
-    firstActionBtn.current?.classList.remove("hidden");
+    firstActionRow.current?.classList.remove("hidden");
     secondActionBtn.current?.classList.remove("active");
     if (textarea.current) textarea.current.value = "";
     e?.stopPropagation();
@@ -126,14 +130,22 @@ function QuickActions(props: { upload: uploadFunc }) {
           <h1>Upload files</h1>
         </div>
       </FileDrop>
-      <button
-        ref={firstActionBtn}
-        onClick={handleQuickUpload}
-        title="Upload Files"
-        className="quick-actions__action"
-      >
-        <span className="material-symbols-rounded">upload</span>
-      </button>
+      <div ref={firstActionRow} className="quick-actions__action-row">
+        <button
+          onClick={handleQuickUpload}
+          title="Upload Files"
+          className="quick-actions__action"
+        >
+          <span className="material-symbols-rounded">upload</span>
+        </button>
+        <button
+          onClick={handleNewFolder}
+          title="New Folder"
+          className="quick-actions__action"
+        >
+          <span className="material-symbols-rounded">create_new_folder</span>
+        </button>
+      </div>
       <div
         role="button"
         ref={secondActionBtn}

diff --git a/client/src/components/UploadItem/UploadItem.tsx b/client/src/components/UploadItem/UploadItem.tsx
@@ -22,7 +22,13 @@ function UploadItem(props: Upload) {
   return (
     <Item className="upload-item">
       <div className="upload-item__title">
-        Uploading {numberOfFiles} {fileNaming}
+        {numberOfFiles ? (
+          <>
+            Uploading {numberOfFiles} {fileNaming}
+          </>
+        ) : (
+          "Creating folder"
+        )}
         <span className="upload-item__loading-item">.</span>
         <span className="upload-item__loading-item">.</span>
         <span className="upload-item__loading-item">.</span>