add button to delete junk files

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;