add warning text in DataTransferModal when disconnected

src/View/Modals/dataTransferModal.tsx

@@ -5,17 +5,19 @@ import FileTransferViewModel, {
   FileTransferOption,
 } from "../../ViewModel/Global/fileTransferViewModel";
 
+import ConnectionViewModel from "../../ViewModel/Global/connectionViewModel";
 import StorageModel from "../../Model/Global/storageModel";
 import { StringToTextSpan } from "../Components/textSpan";
 import { reload } from "../utility";
 import { translations } from "../translations";
 
 export function DataTransferModalWrapper(
+  connectionViewModel: ConnectionViewModel,
   fileTransferViewModel: FileTransferViewModel
 ) {
   return (
     <div>
-      {DirectionSelectionModal(fileTransferViewModel)}
+      {DirectionSelectionModal(connectionViewModel, fileTransferViewModel)}
       {FileSelectionModal(fileTransferViewModel)}
       {TransferDataDisplayModal(fileTransferViewModel)}
       {TransferDisplayModal(fileTransferViewModel)}
@@ -25,7 +27,10 @@ export function DataTransferModalWrapper(
   );
 }
 
-function DirectionSelectionModal(fileTransferViewModel: FileTransferViewModel) {
+function DirectionSelectionModal(
+  connectionViewModel: ConnectionViewModel,
+  fileTransferViewModel: FileTransferViewModel
+) {
   const isPresented = React.createProxyState(
     [fileTransferViewModel.presentedModal],
     () =>
@@ -33,13 +38,25 @@ function DirectionSelectionModal(fileTransferViewModel: FileTransferViewModel) {
       FileTransferModal.DirectionSelection
   );
 
+  const isDisconnected = React.createProxyState(
+    [connectionViewModel.isConnected],
+    () => connectionViewModel.isConnected.value == false
+  );
+
   return (
     <div class="modal" toggle:open={isPresented}>
       <div>
         <main>
           <h2>{translations.dataTransferModal.transferDataHeadline}</h2>
 
-          <div class="flex-column gap content-margin-bottom">
+          <p class="error" toggle:hidden={connectionViewModel.isConnected}>
+            {translations.dataTransferModal.notConnectedError}
+          </p>
+
+          <div
+            class="flex-column gap content-margin-bottom"
+            toggle:hidden={isDisconnected}
+          >
             <button
               class="tile"
               on:click={fileTransferViewModel.showFileSelectionModal}