add button to connect to previous connection

src/View/Components/deletableListItem.tsx

@@ -2,18 +2,26 @@ import * as React from "bloatless-react";
 
 import { translations } from "../translations";
 
-export function DeletableListItem(text: string, ondelete: () => void) {
+export function DeletableListItem(
+  text: string,
+  primaryButton: HTMLElement,
+  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 class="flex-row justify-end">
+        {primaryButton}
+
+        <button
+          class="danger"
+          aria-label={translations.general.deleteItemButtonAudioLabel}
+          on:click={ondelete}
+        >
+          <span class="icon">delete</span>
+        </button>
+      </div>
     </div>
   );
-}
+}

src/View/Modals/connectionModal.tsx

@@ -8,9 +8,29 @@ export function ConnectionModal(connectionViewModel: ConnectionViewModel) {
   const previousAddressConverter: React.StateItemConverter<string> = (
     address: string
   ) => {
-    return DeletableListItem(address, () => {
-      connectionViewModel.removePreviousAddress(address);
-    });
+    function connnect() {
+      connectionViewModel.connectToAddress(address);
+    }
+
+    const cannotConnect = React.createProxyState(
+      [connectionViewModel.isConnected],
+      () => connectionViewModel.connectionModel.address == address
+    );
+
+    return DeletableListItem(
+      address,
+      <button
+        class="primary"
+        on:click={connnect}
+        toggle:disabled={cannotConnect}
+        aria-label={translations.connectionModal.connectButtonAudioLabel}
+      >
+        <span class="icon">link</span>
+      </button>,
+      () => {
+        connectionViewModel.removePreviousAddress(address);
+      }
+    );
   };
 
   return (

src/View/translations.ts

@@ -69,6 +69,8 @@ const englishTranslations = {
     connectionModalHeadline: "Manage Connections",
 
     ///
+
+    connectButtonAudioLabel: "connect",
   },
 };
 

src/ViewModel/connectionViewModel.tsx

@@ -43,9 +43,13 @@ export default class ConnectionViewModel {
 
   // methods
   connect = (): void => {
-    this.connectionModel.connect(this.serverAddressInput.value);
+    this.connectToAddress(this.serverAddressInput.value);
   };
-
+  
+  connectToAddress = (address: string): void => {
+    this.connectionModel.connect(address);
+  }
+  
   disconnect = (): void => {
     this.connectionModel.disconnect();
   };