add warning text in DataTransferModal when disconnected

dist/index.js

@@ -2511,6 +2511,7 @@
       dataEntryDescription: "Enter this data on the other device.",
       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",
       toThisDeviceButton: "To this device",
@@ -2695,6 +2696,7 @@
         dataEntryDescription: "Gib diese Informationen auf dem anderen Ger\xE4t ein.",
         dataEntryInputDescription: "Gib die auf dem anderen Ger\xE4t angezeigten Informationen ein.",
         readyToReceiveDescription: "Klicke auf dem anderen Ger\xE4t auf 'Senden'.",
+        notConnectedError: "Du bist mit keinem Server verbunden.",
         fromThisDeviceButton: "Von diesem Ger\xE4t",
         toThisDeviceButton: "An dieses Ger\xE4t",
         generalHeadline: "Allgemein",
@@ -2863,6 +2865,7 @@
         dataEntryDescription: "Introduce estos datos en el otro dispositivo.",
         dataEntryInputDescription: "Introduce los datos mostrados en el otro dispositivo.",
         readyToReceiveDescription: "Haz clic en 'enviar' en el otro dispositivo.",
+        notConnectedError: "No est\xE1s conectado a ning\xFAn servidor.",
         fromThisDeviceButton: "Desde este dispositivo",
         toThisDeviceButton: "A este dispositivo",
         generalHeadline: "General",
@@ -4985,15 +4988,25 @@
   };
 
   // src/View/Modals/dataTransferModal.tsx
-  function DataTransferModalWrapper(fileTransferViewModel2) {
+  function DataTransferModalWrapper(connectionViewModel2, fileTransferViewModel2) {
-    return /* @__PURE__ */ createElement("div", null, DirectionSelectionModal(fileTransferViewModel2), FileSelectionModal(fileTransferViewModel2), TransferDataDisplayModal(fileTransferViewModel2), TransferDisplayModal(fileTransferViewModel2), TransferDataInputModal(fileTransferViewModel2), DataReceptionModal(fileTransferViewModel2));
+    return /* @__PURE__ */ createElement("div", null, DirectionSelectionModal(connectionViewModel2, fileTransferViewModel2), FileSelectionModal(fileTransferViewModel2), TransferDataDisplayModal(fileTransferViewModel2), TransferDisplayModal(fileTransferViewModel2), TransferDataInputModal(fileTransferViewModel2), DataReceptionModal(fileTransferViewModel2));
   }
-  function DirectionSelectionModal(fileTransferViewModel2) {
+  function DirectionSelectionModal(connectionViewModel2, fileTransferViewModel2) {
     const isPresented = createProxyState(
       [fileTransferViewModel2.presentedModal],
       () => fileTransferViewModel2.presentedModal.value == 0 /* DirectionSelection */
     );
-    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.dataTransferModal.transferDataHeadline), /* @__PURE__ */ createElement("div", { class: "flex-column gap content-margin-bottom" }, /* @__PURE__ */ createElement(
+    const isDisconnected = createProxyState(
+      [connectionViewModel2.isConnected],
+      () => connectionViewModel2.isConnected.value == false
+    );
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.dataTransferModal.transferDataHeadline), /* @__PURE__ */ createElement("p", { class: "error", "toggle:hidden": connectionViewModel2.isConnected }, translations.dataTransferModal.notConnectedError), /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "flex-column gap content-margin-bottom",
+        "toggle:hidden": isDisconnected
+      },
+      /* @__PURE__ */ createElement(
         "button",
         {
           class: "tile",
@@ -5002,7 +5015,8 @@
         /* @__PURE__ */ createElement("span", { class: "icon" }, "upload"),
         /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.dataTransferModal.fromThisDeviceButton)),
         /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
-    ), /* @__PURE__ */ createElement(
+      ),
+      /* @__PURE__ */ createElement(
         "button",
         {
           class: "tile",
@@ -5011,7 +5025,8 @@
         /* @__PURE__ */ createElement("span", { class: "icon" }, "download"),
         /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.dataTransferModal.toThisDeviceButton)),
         /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
-    ))), /* @__PURE__ */ createElement("button", { "on:click": fileTransferViewModel2.hideModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
+      )
+    )), /* @__PURE__ */ createElement("button", { "on:click": fileTransferViewModel2.hideModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
   }
   function FileSelectionModal(fileTransferViewModel2) {
     const OptionConverter = (fileOption) => {
@@ -5910,7 +5925,7 @@
     ),
     ChatPageWrapper(chatListViewModel),
     ConnectionModal(connectionViewModel),
-    DataTransferModalWrapper(fileTransferViewModel),
+    DataTransferModalWrapper(connectionViewModel, fileTransferViewModel),
     StorageModal(storageViewModel)
   );
 })();

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: {
@@ -348,14 +350,14 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
 
     dataTransferModal: {
       transferDataHeadline: "Datenübertragung",
-      selectionDescription:
+      selectionDescription: "Wähle die Daten aus, die du übertragen möchtest.",
-        "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:
+      readyToReceiveDescription: "Klicke auf dem anderen Gerät auf 'Senden'.",
-        "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)
   );