improve the performance and increase 3 dots column a little

app.vue

@@ -124,11 +124,11 @@ function stepUp(path: string) {
             <v-btn title="Parent Folder" aria-label="Parent Folder" icon="mdi-arrow-up" :disabled="selectedItem == '/'"
               @click="selectedItem = stepUp(selectedItem);"></v-btn>
           </v-col>
-          <v-col cols="11" lg="9" md="11">
+          <v-col cols="10" lg="8" md="10">
             <v-text-field :disabled="!files.length" hide-details title="Location" single-line placeholder="location"
               v-model="selectedItem"></v-text-field>
           </v-col>
-          <v-col cols="1">
+          <v-col cols="2">
             <v-menu>
               <template v-slot:activator="{ props }">
                 <v-btn :disabled="!files.length" title="Menu" aria-label="Menu" icon="mdi-dots-vertical"

composables/files-manager.ts

@@ -59,29 +59,44 @@ export class FilesManager {
 
         // sort unorganized files by depth
         unorganizedFiles = unorganizedFiles.sort((a, b) => {
-            if (a.path.split("/").length > b.path.split("/").length) return -1;
+            const aPathArray = a.path.split("/");
-            if (a.path.split("/").length < b.path.split("/").length) return 1;
+            const bPathArray = b.path.split("/");
+            if (aPathArray.length > bPathArray.length) return -1;
+            if (aPathArray.length < bPathArray.length) return 1;
             return 0;
         });
 
         // sort files and folder inside each folder
+        const pathArrays: any = {};
         for (let file of unorganizedFiles) {
             // get parent folder file
-            let parentFolderFile = unorganizedFiles.find(_file => _file.path == file.path.substring(0, file.path.lastIndexOf("/")));
+            const parentPath = file.path.substring(0, file.path.lastIndexOf("/"));
+            const parentFolderFile = pathArrays[parentPath] || unorganizedFiles.find(_file => _file.path === parentPath);
             if (!parentFolderFile) continue;
 
             // add file to parent folder content
-            parentFolderFile.content!.push(file);
+            if (!parentFolderFile.content) parentFolderFile.content = [];
+            parentFolderFile.content.push(file);
+
+            // cache split path array to avoid calling split() multiple times
+            const pathArray = pathArrays[file.path] || file.path.split("/");
+            pathArrays[file.path] = pathArray;
+
+            parentFolderFile.content = parentFolderFile.content.sort((a:any, b:any) => {
+                // sort by folder and from a to z
+                if (a.isFolder && !b.isFolder) return -1;
+                if (!a.isFolder && b.isFolder) return 1;
+                if (a.name < b.name) return -1;
+                if (a.name > b.name) return 1;
+                return 0;
+            });
         }
 
         // remove folders from root
-        console.log(unorganizedFiles);
+        const files = unorganizedFiles.filter(file => (file.path.match(/\//g) || []).length == 1);
-        let files = unorganizedFiles.filter(file => file.path.split("/").length <= 2);
+        console.log({files});
-        console.log(files);
-
         this.filesList.value = files;
 
-
         return files;
     }
 
@@ -106,26 +121,26 @@ export class FilesManager {
     }
 
     getFile(path: string, innerList = undefined): any {
-      if (path == "/") {
+        if (path == "/") {
-        return {
+            return {
-          content: this.filesList.value,
+                content: this.filesList.value,
-          isFolder: true,
+                isFolder: true,
-        };
+            };
-      }
-
-      for (const file of (innerList || this.filesList.value)) {
-        if (file.path == path) {
-          return file;
         }
 
-        if (file.isFolder && path.includes(file.path)) {
+        for (const file of (innerList || this.filesList.value)) {
-          let recursiveFile = this.getFile(path, file.content);
+            if (file.path == path) {
-          if (recursiveFile) {
+                return file;
-            return recursiveFile;
+            }
-          }
-        }
-      }
 
-      return undefined;
+            if (file.isFolder && path.includes(file.path)) {
+                let recursiveFile = this.getFile(path, file.content);
+                if (recursiveFile) {
+                    return recursiveFile;
+                }
+            }
+        }
+
+        return undefined;
     }
 }