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}

src/View/translations.ts

@@ -88,6 +88,8 @@ const englishTranslations = {
     dataEntryInputDescription: "Enter the data displayed on the other device.",
     readyToReceiveDescription: "Click 'send' on the other device.",
 
+    notConnectedError: "You are not connected to any server.",
+
     ///
 
     fromThisDeviceButton: "From this device",
@@ -128,7 +130,7 @@ const englishTranslations = {
 
     deleteItem: "Delete item",
 
-    removeJunkButton: "Delete junk files"
+    removeJunkButton: "Delete junk files",
   },
 
   chatPage: {
@@ -242,7 +244,7 @@ const englishTranslations = {
       eventsBoard: "Events",
 
       ///
-      
+
       todayButtonAudioLabel: "go to today",
 
       previousMonthButtonAudioLabel: "previous month",
@@ -348,14 +350,14 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
 
     dataTransferModal: {
       transferDataHeadline: "Datenübertragung",
-      selectionDescription:
-        "Wähle die Daten aus, die du übertragen möchtest.",
+      selectionDescription: "Wähle die Daten aus, die du übertragen möchtest.",
       dataEntryDescription:
         "Gib diese Informationen auf dem anderen Gerät ein.",
       dataEntryInputDescription:
         "Gib die auf dem anderen Gerät angezeigten Informationen ein.",
-      readyToReceiveDescription:
-        "Klicke auf dem anderen Gerät auf 'Senden'.",
+      readyToReceiveDescription: "Klicke auf dem anderen Gerät auf 'Senden'.",
+
+      notConnectedError: "Du bist mit keinem Server verbunden.",
 
       fromThisDeviceButton: "Von diesem Gerät",
       toThisDeviceButton: "An dieses Gerät",
@@ -389,7 +391,7 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
 
       deleteItem: "Element löschen",
 
-      removeJunkButton: "Datenmüll löschen"
+      removeJunkButton: "Datenmüll löschen",
     },
 
     chatPage: {
@@ -591,6 +593,8 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
         "Introduce los datos mostrados en el otro dispositivo.",
       readyToReceiveDescription: "Haz clic en 'enviar' en el otro dispositivo.",
 
+      notConnectedError: "No estás conectado a ningún servidor.",
+
       fromThisDeviceButton: "Desde este dispositivo",
       toThisDeviceButton: "A este dispositivo",
 
@@ -623,7 +627,7 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
 
       deleteItem: "Eliminar elemento",
 
-      removeJunkButton: "Eliminar archivos basura"
+      removeJunkButton: "Eliminar archivos basura",
     },
 
     chatPage: {

src/index.tsx

@@ -83,6 +83,6 @@ document
     ),
     ChatPageWrapper(chatListViewModel),
     ConnectionModal(connectionViewModel),
-    DataTransferModalWrapper(fileTransferViewModel),
+    DataTransferModalWrapper(connectionViewModel, fileTransferViewModel),
     StorageModal(storageViewModel)
   );