prepare settings modal

src/View/Modals/settingsModal.tsx

@@ -0,0 +1,20 @@
+import * as React from "bloatless-react";
+
+import { FileBrowser } from "../Components/fileBrowser";
+import StorageViewModel from "../../ViewModel/Global/storageViewModel";
+import { translations } from "../translations";
+import SettingsViewModel from "../../ViewModel/Global/settingsViewModel";
+
+export function SettingsModal(settingsViewModel: SettingsViewModel) {
+    return (
+        <div class="modal" toggle:open={settingsViewModel.isShowingSettingsModal}>
+            <div style="max-width: 64rem">
+                <main class="padding-0"></main>
+                <button on:click={settingsViewModel.hideSettingsModal}>
+                    {translations.general.closeButton}
+                    <span class="icon">close</span>
+                </button>
+            </div>
+        </div>
+    );
+}

src/View/homePage.tsx

@@ -131,7 +131,7 @@ export function HomePage(
             <hr></hr>
 
             {HomePageButton(
-                fileTransferViewModel.showDirectionSelectionModal,
+                settingsViewModel.showSettingsModal,
                 translations.homePage.settingsButton,
                 "settings",
             )}

src/ViewModel/Global/settingsViewModel.ts

@@ -10,6 +10,7 @@ export default class SettingsViewModel {
     username: React.State<string> = new React.State("");
     usernameInput: React.State<string> = new React.State("");
     firstDayOfWeekInput: React.State<string> = new React.State("0");
+    isShowingSettingsModal: React.State<boolean> = new React.State(false);
 
     // guards
     cannotSetName: React.State<boolean> = React.createProxyState(
@@ -30,6 +31,14 @@ export default class SettingsViewModel {
         this.settingsModel.setFirstDayOfWeek(this.firstDayOfWeekInput.value);
     };
 
+    showSettingsModal = (): void => {
+        this.isShowingSettingsModal.value = true;
+    }
+
+    hideSettingsModal = (): void => {
+        this.isShowingSettingsModal.value = false;
+    }
+
     // init
     constructor(
         public coreViewModel: CoreViewModel,

src/index.tsx

@@ -21,6 +21,7 @@ import { StorageModal } from "./View/Modals/storageModal";
 import StorageModel from "./Model/Global/storageModel";
 import StorageViewModel from "./ViewModel/Global/storageViewModel";
 import v1Upgrader from "./Upgrader/v1";
+import { SettingsModal } from "./View/Modals/settingsModal";
 
 // models
 const storageModel = new StorageModel();
@@ -86,4 +87,5 @@ document
         ConnectionModal(connectionViewModel),
         DataTransferModalWrapper(connectionViewModel, fileTransferViewModel),
         StorageModal(storageViewModel),
+        SettingsModal(settingsViewModel),
     );