add connection modal

src/View/Modals/connectionModal.tsx

@@ -0,0 +1,21 @@
+import * as React from "bloatless-react";
+
+import ConnectionViewModel from "../../ViewModel/connectionViewModel";
+import { translations } from "../translations";
+
+export function ConnectionModal(connectionViewModel: ConnectionViewModel) {
+  return (
+    <div
+      class="modal"
+      toggle:open={connectionViewModel.isShowingConnectionModal}
+    >
+      <div>
+        <main></main>
+        <button on:click={connectionViewModel.hideConnectionModal}>
+          {translations.general.closeButton}
+          <span class="icon">close</span>
+        </button>
+      </div>
+    </div>
+  );
+}

src/View/homePage.tsx

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

src/ViewModel/connectionViewModel.tsx

@@ -10,6 +10,8 @@ export default class ConnectionViewModel {
   serverAddressInput: React.State<string> = new React.State("");
   isConnected: React.State<boolean> = new React.State(false);
 
+  isShowingConnectionModal: React.State<boolean> = new React.State(false);
+
   // toggles
   cannotConnect: React.State<boolean> = React.createProxyState(
     [this.serverAddressInput, this.isConnected],
@@ -26,7 +28,7 @@ export default class ConnectionViewModel {
   // handlers
   connectionChangeHandler = (): void => {
     this.isConnected.value = this.connectionModel.isConnected;
-    if (this.connectionModel.address) {
+if (this.connectionModel.address) {
       this.serverAddressInput.value = this.connectionModel.address;
     }
   };
@@ -42,6 +44,15 @@ export default class ConnectionViewModel {
     this.connectionModel.disconnect();
   };
 
+  // view methods
+  showConnectionModal = (): void => {
+    this.isShowingConnectionModal.value = true;
+  }
+
+  hideConnectionModal = (): void => {
+    this.isShowingConnectionModal.value = false;
+  }
+
   // init
   constructor() {
     const connectionModel = new ConnectionModel({

src/index.tsx

@@ -1,3 +1,4 @@
+import { ConnectionModal } from "./View/Modals/connectionModal";
 import ConnectionViewModel from "./ViewModel/connectionViewModel";
 import { HomePage } from "./View/homePage";
 import SettingsViewModel from "./ViewModel/settingsViewModel";
@@ -13,4 +14,7 @@ const connectionViewModel = new ConnectionViewModel();
 // view
 document
   .querySelector("main")!
-  .append(HomePage(settingsViewModel, connectionViewModel));
+  .append(
+    HomePage(settingsViewModel, connectionViewModel),
+    ConnectionModal(connectionViewModel)
+  );