fix removing items

dist/index.js

@@ -186,7 +186,8 @@
   // src/View/translations.ts
   var englishTranslations = {
     general: {
-      closeButton: "close"
+      closeButtonAudioLabel: "close",
+      deleteItemButtonAudioLabel: "delete item"
     },
     regional: {
       weekdays: {
@@ -247,15 +248,42 @@
   var language = navigator.language.substring(0, 2);
   var translations = allTranslations[language] || allTranslations.en;
 
+  // src/View/Components/deletableListItem.tsx
+  function DeletableListItem(text, ondelete) {
+    return /* @__PURE__ */ createElement("div", { class: "tile flex-row justify-apart align-center padding-0" }, /* @__PURE__ */ createElement("span", { class: "padding-h" }, text), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "danger",
+        "aria-label": translations.general.deleteItemButtonAudioLabel,
+        "on:click": ondelete
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "delete")
+    ));
+  }
+
   // src/View/Modals/connectionModal.tsx
   function ConnectionModal(connectionViewModel2) {
+    const previousAddressConverter = (address) => {
+      return DeletableListItem(address, () => {
+        connectionViewModel2.removePreviousAddress(address);
+      });
+    };
     return /* @__PURE__ */ createElement(
       "div",
       {
         class: "modal",
         "toggle:open": connectionViewModel2.isShowingConnectionModal
       },
-      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.connectionModal.connectionModalHeadline)), /* @__PURE__ */ createElement("button", { "on:click": connectionViewModel2.hideConnectionModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))
+      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.connectionModal.connectionModalHeadline), /* @__PURE__ */ createElement(
+        "div",
+        {
+          class: "flex-column gap",
+          "children:append": [
+            connectionViewModel2.previousAddresses,
+            previousAddressConverter
+          ]
+        }
+      )), /* @__PURE__ */ createElement("button", { "on:click": connectionViewModel2.hideConnectionModal }, translations.general.closeButtonAudioLabel, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))
     );
   }
 
@@ -287,6 +315,7 @@
     remove = (pathComponents) => {
       const key = _StorageModel.pathComponentsToKey(...pathComponents);
       localStorage.removeItem(key);
+      this.initializeTree();
     };
     list = (pathComponents) => {
       let currentParent = this.storageEntryTree;
@@ -309,12 +338,16 @@
     };
     // init
     constructor() {
+      this.initializeTree();
+    }
+    // utility
+    initializeTree = () => {
+      this.storageEntryTree = {};
       for (const key of Object.keys(localStorage)) {
         const components = _StorageModel.keyToPathComponents(key);
         this.updateTree(...components);
       }
-    }
-    // utility
+    };
     updateTree = (...pathComponents) => {
       let currentParent = this.storageEntryTree;
       for (const pathPart of pathComponents) {
@@ -569,6 +602,10 @@
     disconnect = () => {
       this.connectionModel.disconnect();
     };
+    removePreviousAddress = (address) => {
+      this.connectionModel.removeAddress(address);
+      this.updatePreviousAddresses();
+    };
     // view methods
     showConnectionModal = () => {
       this.isShowingConnectionModal.value = true;
@@ -636,7 +673,7 @@
         "aria-label": translations.homePage.manageConnectionsAudioLabel,
         "on:click": connectionViewModel2.showConnectionModal
       },
-      /* @__PURE__ */ createElement("span", { class: "icon" }, "build")
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "edit")
     ), /* @__PURE__ */ createElement(
       "button",
       {
@@ -754,7 +791,13 @@
   };
 
   // src/index.tsx
+  localStorage.clear();
   var storageModel = new StorageModel();
+  storageModel.store(["a", "b", "b1"], "");
+  storageModel.store(["a", "b", "b2"], "");
+  console.log(JSON.stringify(storageModel.storageEntryTree, null, 4));
+  storageModel.remove(["a", "b", "b2"]);
+  console.log(JSON.stringify(storageModel.storageEntryTree, null, 4));
   var settingsViewModel = new SettingsViewModel(storageModel);
   var connectionViewModel = new ConnectionViewModel(storageModel);
   document.querySelector("main").append(

src/Model/storageModel.ts

@@ -24,6 +24,7 @@ export default class StorageModel {
   remove = (pathComponents: string[]): void => {
     const key: string = StorageModel.pathComponentsToKey(...pathComponents);
     localStorage.removeItem(key);
+    this.initializeTree();
   };
 
   list = (pathComponents: string[]): string[] => {
@@ -52,14 +53,19 @@ export default class StorageModel {
 
   // init
   constructor() {
+    this.initializeTree();
+  }
+
+  // utility
+  initializeTree = (): void => {
+    this.storageEntryTree = {};
     for (const key of Object.keys(localStorage)) {
       const components: string[] = StorageModel.keyToPathComponents(key);
       this.updateTree(...components);
     }
-  }
+  };
 
-  // utility
-  updateTree = (...pathComponents: string[]) => {
+  updateTree = (...pathComponents: string[]): void => {
     let currentParent: StorageEntry = this.storageEntryTree;
     for (const pathPart of pathComponents) {
       if (!currentParent[pathPart]) {

src/View/Components/deletableListItem.tsx

@@ -0,0 +1,19 @@
+import * as React from "bloatless-react";
+
+import { translations } from "../translations";
+
+export function DeletableListItem(text: string, ondelete: () => void) {
+  return (
+    <div class="tile flex-row justify-apart align-center padding-0">
+      <span class="padding-h">{text}</span>
+
+      <button
+        class="danger"
+        aria-label={translations.general.deleteItemButtonAudioLabel}
+        on:click={ondelete}
+      >
+        <span class="icon">delete</span>
+      </button>
+    </div>
+  );
+}

src/View/Modals/connectionModal.tsx

@@ -1,9 +1,18 @@
 import * as React from "bloatless-react";
 
 import ConnectionViewModel from "../../ViewModel/connectionViewModel";
+import { DeletableListItem } from "../Components/deletableListItem";
 import { translations } from "../translations";
 
 export function ConnectionModal(connectionViewModel: ConnectionViewModel) {
+  const previousAddressConverter: React.StateItemConverter<string> = (
+    address: string
+  ) => {
+    return DeletableListItem(address, () => {
+      connectionViewModel.removePreviousAddress(address);
+    });
+  };
+
   return (
     <div
       class="modal"
@@ -13,10 +22,16 @@ export function ConnectionModal(connectionViewModel: ConnectionViewModel) {
         <main>
           <h2>{translations.connectionModal.connectionModalHeadline}</h2>
 
-          
+          <div
+            class="flex-column gap"
+            children:append={[
+              connectionViewModel.previousAddresses,
+              previousAddressConverter,
+            ]}
+          ></div>
         </main>
         <button on:click={connectionViewModel.hideConnectionModal}>
-          {translations.general.closeButton}
+          {translations.general.closeButtonAudioLabel}
           <span class="icon">close</span>
         </button>
       </div>

src/View/homePage.tsx

@@ -52,7 +52,7 @@ export function HomePage(
           aria-label={translations.homePage.manageConnectionsAudioLabel}
           on:click={connectionViewModel.showConnectionModal}
         >
-          <span class="icon">build</span>
+          <span class="icon">edit</span>
         </button>
         <button
           class="primary flex justify-center"

src/View/translations.ts

@@ -1,6 +1,7 @@
 const englishTranslations = {
   general: {
-    closeButton: "close",
+    closeButtonAudioLabel: "close",
+    deleteItemButtonAudioLabel: "delete item",
   },
 
   regional: {

src/ViewModel/connectionViewModel.tsx

@@ -50,6 +50,11 @@ export default class ConnectionViewModel {
     this.connectionModel.disconnect();
   };
 
+  removePreviousAddress = (address: string): void => {
+    this.connectionModel.removeAddress(address);
+    this.updatePreviousAddresses();
+  }
+
   // view methods
   showConnectionModal = (): void => {
     this.isShowingConnectionModal.value = true;