add list of files to transfer

src/View/Modals/fileTransferModal.tsx

@@ -0,0 +1,76 @@
+import * as React from "bloatless-react";
+
+import FileTransferViewModel, {
+  FileTransferOption,
+} from "../../ViewModel/Global/fileTransferViewModel";
+
+import StorageModel from "../../Model/Global/storageModel";
+import { translations } from "../translations";
+
+export function FileTransferModal(
+  fileTransferViewModel: FileTransferViewModel
+) {
+  return (
+    <div
+      class="modal"
+      toggle:open={fileTransferViewModel.isShowingTransferModal}
+    >
+      <div>
+        <main>
+          <h2>{translations.fileTransferModal.transferFilesHeadline}</h2>
+          <span class="secondary">
+            {translations.fileTransferModal.selectionDescription}
+          </span>
+
+          <hr></hr>
+
+          <h3>{translations.fileTransferModal.generalHeadline}</h3>
+          <div
+            class="flex-column gap content-margin-bottom"
+            children:append={[
+              fileTransferViewModel.generalFileOptions,
+              FileOption,
+            ]}
+          ></div>
+
+          <h3>{translations.fileTransferModal.chatsHeadline}</h3>
+          <div
+            class="flex-column gap"
+            children:append={[
+              fileTransferViewModel.chatFileOptions,
+              FileOption,
+            ]}
+          ></div>
+        </main>
+        <div class="flex-row width-100">
+          <button
+            class="flex"
+            on:click={fileTransferViewModel.hideTransferModal}
+          >
+            {translations.general.cancelButton}
+          </button>
+          <button
+            class="primary flex"
+            on:click={fileTransferViewModel.hideTransferModal}
+          >
+            {translations.general.continueButton}
+            <span class="icon">arrow_forward</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FileOption(fileOption: FileTransferOption) {
+  return (
+    <button class="tile">
+      <div>
+        <b class="ellipsis">{fileOption.label}</b>
+        <span class="secondary ellipsis">
+          {StorageModel.pathComponentsToString(...fileOption.path)}
+        </span>
+      </div>
+    </button>
+  );
+}

src/View/homePage.tsx

@@ -7,6 +7,7 @@ import { Option, StringToOption } from "./Components/option";
 import ChatListViewModel from "../ViewModel/Chat/chatListViewModel";
 import { ChatViewModelToChatEntry } from "./Components/chatEntry";
 import ConnectionViewModel from "../ViewModel/Global/connectionViewModel";
+import FileTransferViewModel from "../ViewModel/Global/fileTransferViewModel";
 import SettingsViewModel from "../ViewModel/Global/settingsViewModel";
 import StorageViewModel from "../ViewModel/Global/storageViewModel";
 import { translations } from "./translations";
@@ -15,6 +16,7 @@ export function HomePage(
   storageViewModel: StorageViewModel,
   settingsViewModel: SettingsViewModel,
   connectionViewModel: ConnectionViewModel,
+  fileTransferViewModel: FileTransferViewModel,
   chatListViewModel: ChatListViewModel
 ) {
   // sections
@@ -116,6 +118,16 @@ export function HomePage(
 
       <hr></hr>
 
+      <button
+        class="tile flex-no"
+        on:click={fileTransferViewModel.showTransferModal}
+      >
+        <span class="icon">sync_alt</span>
+        <div>
+          <span>{translations.homePage.transferFilesButton}</span>
+        </div>
+      </button>
+
       <button class="tile flex-no" on:click={storageViewModel.showStorageModal}>
         <span class="icon">hard_drive_2</span>
         <div>

src/View/translations.ts

@@ -8,8 +8,10 @@ const englishTranslations = {
     searchButtonAudioLabel: "search",
 
     abortButton: "Abort",
+    cancelButton: "Cancel",
     closeButton: "Close",
 
+    continueButton: "Continue",
     confirmButton: "Confirm",
     saveButton: "Save",
     setButton: "Set",
@@ -54,6 +56,8 @@ const englishTranslations = {
 
     manageStorageButton: "Manage storage",
 
+    transferFilesButton: "Transfer Files",
+
     scrollToChatButton: "Chats",
 
     ///
@@ -74,6 +78,32 @@ const englishTranslations = {
     connectButtonAudioLabel: "connect",
   },
 
+  fileTransferModal: {
+    transferFilesHeadline: "Transfer Files",
+    selectionDescription: "Select the files that you want to transfer.",
+
+    ///
+
+    fromThisDeviceButton: "From this device",
+    toThisDeviceButton: "To this device",
+
+    ///
+
+    generalHeadline: "General",
+    
+    connectionData: "Connection Data",
+    settingsData: "Settings Data",
+
+    ///
+
+    chatsHeadline: "Chats",
+
+    ///
+
+    transferChannelHeadline: "Transfer Chanel",
+    transferKeyHeadline: "Transfer Encryption Key",
+  },
+
   storage: {
     noItemSelected: "No item selected",
     notAFile: "(not a file)",