increase the performance, remove unnecessary code and rename selectedItem to selectedPath

app.vue

@@ -5,25 +5,24 @@ import { useDisplay } from 'vuetify/lib/framework.mjs';
 import { HistoryManager } from './composables/history-manager';
 import { FilesManager } from './composables/files-manager';
 
-
 let display = useDisplay();
 let drawer = ref(!display.mdAndDown.value);
 let loadingModel = ref(false);
 let files = ref([]);
 
 let filesList = ref<any>([]);
-let selectedItem = useSelectedItem();
+let selectedPath = useSelectedPath();
 let filesGridList = ref<any>([])
 let selectedList = ref<any>([]);
-let history = new HistoryManager(selectedItem, filesList);
+let filesManager = new FilesManager(filesList);
-let fileManager = new FilesManager(filesList);
+let history = new HistoryManager(filesManager);
 
 watchEffect(async () => {
   if (files.value?.[0]) {
     loadingModel.value = true;
     filesList.value = [];
 
-    fileManager.loadArchive(files.value?.[0]);
+    filesManager.loadArchive(files.value?.[0]);
 
     loadingModel.value = false;
   }
@@ -32,7 +31,7 @@ watchEffect(async () => {
 function onDrop(e: any) {
   if (!e.dataTransfer.files.length) return;
   files.value = e.dataTransfer.files;
-  selectedItem.value = '/';
+  selectedPath.value = '/';
 }
 
 function preventDefaults(e: any) {
@@ -54,14 +53,16 @@ onUnmounted(() => {
 })
 
 watchEffect(() => {
-  filesGridList.value = fileManager.getFile(selectedItem.value)?.content || [];
+  const file = filesManager.getFile(selectedPath.value);
+  filesGridList.value = file?.isFolder ? file.content : [];
+
   selectedList.value = [];
   for (const selectedElement of document.querySelectorAll(".selectable.selected")) {
     selectedElement.classList.remove("selected");
   }
 })
 
-let dragContainer = document.querySelector(".select-area");
+const dragContainer = document.querySelector(".select-area");
 
 function onSelectStart(e: any) {
   e.added.forEach((el: any) => {
@@ -87,10 +88,7 @@ function onSelectEnd(e: any) {
 
 // step up from current path
 function stepUp(path: string) {
-  let pathArray = path.split("/");
+  const pathArray = path.split("/");
-  if (path.endsWith("/")) {
-    pathArray.pop();
-  }
   pathArray.pop();
   return (pathArray.join("/") || "/");
 }
@@ -105,7 +103,7 @@ function stepUp(path: string) {
     <v-navigation-drawer v-model="drawer" :permanent="!display.xs">
       <v-toolbar density="comfortable" title="Files">
         <template v-slot:prepend>
-          <v-btn icon="mdi-home" @click="selectedItem = '/'"></v-btn>
+          <v-btn icon="mdi-home" @click="selectedPath = '/'"></v-btn>
         </template>
       </v-toolbar>
       <TreeView :filesList="filesList" :nav=true></TreeView>
@@ -121,12 +119,12 @@ function stepUp(path: string) {
               @click="history.redo();"></v-btn>
             <v-btn title="Refresh" aria-label="Refresh" icon="mdi-refresh" :disabled="!files.length"
               @click="history.refresh();"></v-btn>
-            <v-btn title="Parent Folder" aria-label="Parent Folder" icon="mdi-arrow-up" :disabled="selectedItem == '/'"
+            <v-btn title="Parent Folder" aria-label="Parent Folder" icon="mdi-arrow-up" :disabled="selectedPath == '/'"
-              @click="selectedItem = stepUp(selectedItem);"></v-btn>
+              @click="selectedPath = stepUp(selectedPath);"></v-btn>
           </v-col>
           <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-model="selectedPath"></v-text-field>
           </v-col>
           <v-col cols="2">
             <v-menu>
@@ -136,7 +134,7 @@ function stepUp(path: string) {
               </template>
               <v-list>
                 <v-list-item title="Close" aria-label="Close" icon="mdi-close"
-                  @click="files = []; selectedItem = '/'; selectedList = []; filesGridList = []; filesList = []; history.reset()">
+                  @click="files = []; selectedPath = '/'; selectedList = []; filesGridList = []; filesList = []; history.reset()">
                   <template v-slot:prepend>
                     <v-icon icon="mdi-close"></v-icon>
                   </template>
@@ -146,13 +144,13 @@ function stepUp(path: string) {
           </v-col>
         </v-row>
       </v-toolbar>
-      <template v-if="fileManager.getFile(selectedItem)?.isFolder || false">
+      <template v-if="filesManager.getFile(selectedPath)?.isFolder || false">
         <v-container>
-          <v-list :selected="[selectedItem]">
+          <v-list :selected="[selectedPath]">
             <v-row no-gutters>
               <v-col cols="6" lg="2" md="3" sm="6" v-for="file of filesGridList" style="text-align: center;">
                 <v-list-item class="ma-2 pa-5 selectable" active-color="light-blue-darken-4" :value="file.path" rounded
-                  @click="selectedItem = file.path">
+                  @click="selectedPath = file.path">
                   <v-avatar class="mb-2" :color="file.isFolder ? 'light-blue-accent-4' : 'blue-grey-darken-1'">
                     <v-icon color="white">{{ file.isFolder ? 'mdi-folder' : 'mdi-file' }}</v-icon>
                   </v-avatar>

components/tree-view.vue

@@ -7,15 +7,15 @@ interface Props {
 }
 
 let {filesList, nav} = defineProps<Props>()
-let selectedItem = useSelectedItem();
+let selectedPath = useSelectedPath();
 
 </script>
 <template>
-    <v-list :selected="[selectedItem]" density="compact" :nav="nav">
+    <v-list :selected="[selectedPath]" density="compact" :nav="nav">
         <template v-for="file in filesList" :key="file.path">
             <v-list-item active-color="light-blue-darken-4" :active=file.active :title="file.name" :subtitle="file.path" :value="file.path"
                 @click="() =>{
-                    selectedItem = file.path;
+                    selectedPath = file.path;
                     file.toggle = !file.toggle;
                 }">
                     <template v-slot:prepend>

composables/files-manager.ts

@@ -6,7 +6,7 @@ import SevenZip, { SevenZipModule } from "7z-wasm";
 export class FilesManager {
     sevenZip?: SevenZipModule;
     consoleOutputBuffer: string[] = [];
-    path: Ref<string> = useSelectedItem();
+    path: Ref<string> = useSelectedPath();
 
     constructor(private filesList: Ref<any[]>) {
         this.init();

composables/history-manager.ts

@@ -1,28 +1,33 @@
+import { FilesManager } from "./files-manager";
+
 // class to manage undo and redo history
 export class HistoryManager {
     // path to the current file
-    public path: Ref<String>
+    private path: Ref<string> = useSelectedPath();
+
     // history of paths
-    history: Ref<String[]>
+    history: Ref<string[]>
     // index of the current path in the history
     index: Ref<number>
 
+
     public readonly hasUndo: ComputedRef<boolean> = computed(() => this.index.value !== 0);
     public readonly hasRedo: ComputedRef<boolean> = computed(() => this.index.value !== this.history.value.length - 1);
     
     // constructor
-    constructor(path: Ref<String>, fileList: Ref<String[]>) {
+    constructor(private filesManager: FilesManager) {
-        this.path = path
+        this.history = ref([this.path.value])
-        this.history = ref([path.value])
         this.index = ref(0);
 
         watchEffect(() => {
-            this.add(path.value)
+            if(this.filesManager.getFile(this.path.value)) {
+                this.add(this.path.value)
+            }
         })
     }
 
     // add a new path to the history
-    add(path: String) {
+    add(path: string) {
         // if the path is the same as the previous path, do nothing
         if (path === this.history.value[this.index.value]) return
 

composables/states.ts

@@ -1,2 +1,2 @@
-let selectedItem = ref("/")
+let selectedPath = ref("/")
-export const useSelectedItem = () => useState("selected-item", () => selectedItem)
+export const useSelectedPath = () => useState("selected-path", () => selectedPath)