add button to delete junk files

dist/index.js

@@ -516,12 +516,12 @@
       return true;
     };
     // recursion
-    recurse = (pathComponents, fn) => {
+    recurse = (rootDirectory, fn) => {
       loop_over_files: for (const key of Object.keys(localStorage)) {
         const pathComponentsOfCurrentEntity = _StorageModel.stringToPathComponents(key);
-        loop_over_path_components: for (let i = 0; i < pathComponents.length; i++) {
+        loop_over_path_components: for (let i = 0; i < rootDirectory.length; i++) {
           if (!pathComponentsOfCurrentEntity[i]) continue loop_over_files;
-          if (pathComponentsOfCurrentEntity[i] != pathComponents[i])
+          if (pathComponentsOfCurrentEntity[i] != rootDirectory[i])
             continue loop_over_files;
         }
         fn(pathComponentsOfCurrentEntity);
@@ -557,6 +557,13 @@
       if (object == null) return null;
       return object;
     };
+    // cleaning
+    removeJunk = () => {
+      this.recurse([], (path) => {
+        if (path[0] == DATA_VERSION) return;
+        this.remove(path);
+      });
+    };
     // tree
     initializeTree = () => {
       console.log("initializing tree");
@@ -2685,7 +2692,8 @@
       contentEmpty: "(empty)",
       path: "Path",
       content: "Content",
-      deleteItem: "Delete item"
+      deleteItem: "Delete item",
+      removeJunkButton: "Delete junk files"
     },
     chatPage: {
       closeChatAudioLabe: "close chat",
@@ -5487,7 +5495,11 @@
       [storageViewModel2.selectedPath],
       () => {
         if (storageViewModel2.selectedPath.value == PATH_COMPONENT_SEPARATOR)
-          return /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.storage.noItemSelected);
+          return /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.storage.noItemSelected), /* @__PURE__ */ createElement("hr", null), DangerousActionButton(
+            translations.storage.removeJunkButton,
+            "delete_forever",
+            storageViewModel2.removeJunk
+          ));
         return /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("div", { class: "tile flex-no" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.storage.path), /* @__PURE__ */ createElement(
           "span",
           {
@@ -5559,6 +5571,10 @@
       this.storageModel.removeRecursively(path);
       this.didMakeChanges.value = true;
     };
+    removeJunk = () => {
+      this.storageModel.removeJunk();
+      this.selectedPath.value = PATH_COMPONENT_SEPARATOR;
+    };
     // view
     showStorageModal = () => {
       this.isShowingStorageModal.value = true;

src/Model/Global/storageModel.ts

@@ -68,7 +68,7 @@ export default class StorageModel {
   };
 
   // recursion
-  recurse = (pathComponents: string[], fn: (path: string[]) => void): void => {
+  recurse = (rootDirectory: string[], fn: (path: string[]) => void): void => {
     loop_over_files: for (const key of Object.keys(localStorage)) {
       // get path of current entity
       const pathComponentsOfCurrentEntity: string[] =
@@ -77,11 +77,11 @@ export default class StorageModel {
       // exit if entity does not match
       loop_over_path_components: for (
         let i = 0;
-        i < pathComponents.length;
+        i < rootDirectory.length;
         i++
       ) {
         if (!pathComponentsOfCurrentEntity[i]) continue loop_over_files;
-        if (pathComponentsOfCurrentEntity[i] != pathComponents[i])
+        if (pathComponentsOfCurrentEntity[i] != rootDirectory[i])
           continue loop_over_files;
       }
 
@@ -135,6 +135,14 @@ export default class StorageModel {
     return object;
   };
 
+  // cleaning
+  removeJunk = (): void => {
+    this.recurse([], (path: string[]) => {
+      if (path[0] == DATA_VERSION) return;
+      this.remove(path);
+    })
+  }
+
   // tree
   initializeTree = (): void => {
     console.log("initializing tree");

src/View/Components/fileBrowser.tsx

@@ -14,7 +14,17 @@ export function FileBrowser(storageViewModel: StorageViewModel) {
     () => {
       if (storageViewModel.selectedPath.value == PATH_COMPONENT_SEPARATOR)
         return (
-          <span class="secondary">{translations.storage.noItemSelected}</span>
+          <div>
+            <span class="secondary">{translations.storage.noItemSelected}</span>
+
+            <hr></hr>
+
+            {DangerousActionButton(
+              translations.storage.removeJunkButton,
+              "delete_forever",
+              storageViewModel.removeJunk
+            )}
+          </div>
         );
 
       return (

src/View/translations.ts

@@ -126,6 +126,8 @@ const englishTranslations = {
     content: "Content",
 
     deleteItem: "Delete item",
+
+    removeJunkButton: "Delete junk files"
   },
 
   chatPage: {

src/ViewModel/Global/storageViewModel.ts

@@ -38,6 +38,11 @@ export default class StorageViewModel {
     this.didMakeChanges.value = true;
   };
 
+  removeJunk = (): void => {
+    this.storageModel.removeJunk();
+    this.selectedPath.value = PATH_COMPONENT_SEPARATOR;
+  };
+
   // view
   showStorageModal = (): void => {
     this.isShowingStorageModal.value = true;