fix removing items

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: {