add placeholder for chats in file transfer

dist/index.js

@@ -318,6 +318,7 @@
       refreshButton: "Refresh",
       saveButton: "Save",
       setButton: "Set",
+      selectAllLabel: "Select all",
       filterOrCreateLabel: (type) => `Search or create ${type}`,
       createLabel: (query) => `Create "${query}"`,
       reloadAppButton: "Reload App",
@@ -430,6 +431,7 @@
       connectionData: "Connection data",
       settingsData: "Identity & personal data",
       chatsHeadline: "Chats",
+      noChatsPlaceholder: "No chats",
       ///
       transferChannelHeadline: "Transfer Chanel",
       transferKeyHeadline: "Transfer Encryption Key",
@@ -590,6 +592,7 @@
         refreshButton: "Aktualisieren",
         saveButton: "Speichern",
         setButton: "OK",
+        selectAllLabel: "Alle ausw\xE4hlen",
         filterOrCreateLabel: (type) => `${type} suchen oder erstellen`,
         createLabel: (query) => `"${query}" erstellen`,
         reloadAppButton: "Neu laden",
@@ -697,6 +700,7 @@
         connectionData: "Verbindungsdaten",
         settingsData: "Identit\xE4t und pers\xF6nliche Daten",
         chatsHeadline: "Chats",
+        noChatsPlaceholder: "Keine Chats",
         transferChannelHeadline: "\xDCbertragungskanal",
         transferKeyHeadline: "Schl\xFCssel",
         sendButton: "Senden",
@@ -841,6 +845,7 @@
         refreshButton: "Actualizar",
         saveButton: "Guardar",
         setButton: "OK",
+        selectAllLabel: "Seleccionar todos",
         filterOrCreateLabel: (type) => `Buscar o crear ${type}`,
         createLabel: (query) => `Crear "${query}"`,
         reloadAppButton: "Recargar app",
@@ -948,6 +953,7 @@
         connectionData: "Datos de conexi\xF3n",
         settingsData: "Identidad y datos personales",
         chatsHeadline: "Chats",
+        noChatsPlaceholder: "No hay chats",
         transferChannelHeadline: "Canal de Transferencia",
         transferKeyHeadline: "Clave de encriptaci\xF3n de transferencia",
         sendButton: "Enviar",
@@ -2282,6 +2288,7 @@
       this.generalFileOptions = new ListState();
       this.chatFileOptions = new ListState();
       this.selectedPaths = new ListState();
+      this.allOptionsSelected = new State(false);
       this.transferChannel = new State("");
       this.transferKey = new State("");
       this.receivingTransferChannel = new State("");
@@ -8196,11 +8203,42 @@
         fileTransferViewModel2.selectedPaths.remove(fileOption.path);
       }
     });
+    fileTransferViewModel2.allOptionsSelected.subscribe((allSelected) => {
+      isSelected.value = allSelected;
+    });
     function toggle() {
       isSelected.value = !isSelected.value;
     }
     return /* @__PURE__ */ createElement("button", { class: "tile", "toggle:selected": isSelected, "on:click": toggle }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { class: "ellipsis" }, fileOption.label), /* @__PURE__ */ createElement("span", { class: "secondary ellipsis" }, StorageModel.pathComponentsToString(...fileOption.path))));
   }
+  function FileSelectionDetail(coreViewModel2, fileTransferViewModel2) {
+    const OptionConverter = (fileOption) => {
+      return OptionEntry(fileOption, fileTransferViewModel2);
+    };
+    const chatList = createProxyState(
+      [fileTransferViewModel2.chatFileOptions],
+      () => fileTransferViewModel2.chatFileOptions.value.size == 0 ? /* @__PURE__ */ createElement("span", { class: "secondary" }, coreViewModel2.translations.dataTransferModal.noChatsPlaceholder) : /* @__PURE__ */ createElement(
+        "div",
+        {
+          class: "flex-column gap",
+          "children:append": [
+            fileTransferViewModel2.chatFileOptions,
+            OptionConverter
+          ]
+        }
+      )
+    );
+    return /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("h3", null, coreViewModel2.translations.dataTransferModal.generalHeadline), /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "flex-column gap content-margin-bottom",
+        "children:append": [
+          fileTransferViewModel2.generalFileOptions,
+          OptionConverter
+        ]
+      }
+    ), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("h3", null, coreViewModel2.translations.dataTransferModal.chatsHeadline), /* @__PURE__ */ createElement("div", { "children:set": chatList }), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "inline" }, /* @__PURE__ */ createElement("input", { type: "checkbox", "bind:checked": fileTransferViewModel2.allOptionsSelected }), coreViewModel2.translations.general.selectAllLabel));
+  }
   function DirectionSelectionModal(coreViewModel2, connectionViewModel2, fileTransferViewModel2) {
     const isPresented = createProxyState(
       [fileTransferViewModel2.presentedModal],
@@ -8259,32 +8297,11 @@
     )));
   }
   function FileSelectionModal(coreViewModel2, fileTransferViewModel2) {
-    const OptionConverter = (fileOption) => {
-      return OptionEntry(fileOption, fileTransferViewModel2);
-    };
     const isPresented = createProxyState(
       [fileTransferViewModel2.presentedModal],
       () => fileTransferViewModel2.presentedModal.value == 1 /* FileSelection */
     );
-    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.dataTransferModal.sendHeadline), /* @__PURE__ */ createElement("span", { class: "secondary" }, coreViewModel2.translations.dataTransferModal.selectionDescription), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("h3", null, coreViewModel2.translations.dataTransferModal.generalHeadline), /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.dataTransferModal.sendHeadline), /* @__PURE__ */ createElement("span", { class: "secondary" }, coreViewModel2.translations.dataTransferModal.selectionDescription), /* @__PURE__ */ createElement("hr", null), FileSelectionDetail(coreViewModel2, fileTransferViewModel2)), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement(
-      "div",
-      {
-        class: "flex-column gap content-margin-bottom",
-        "children:append": [
-          fileTransferViewModel2.generalFileOptions,
-          OptionConverter
-        ]
-      }
-    ), /* @__PURE__ */ createElement("h3", null, coreViewModel2.translations.dataTransferModal.chatsHeadline), /* @__PURE__ */ createElement(
-      "div",
-      {
-        class: "flex-column gap",
-        "children:append": [
-          fileTransferViewModel2.chatFileOptions,
-          OptionConverter
-        ]
-      }
-    )), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement(
       "button",
       {
         class: "flex",
@@ -8457,25 +8474,7 @@
       [fileTransferViewModel2.presentedModal],
       () => fileTransferViewModel2.presentedModal.value == 6 /* ExportFileSelection */
     );
-    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.dataTransferModal.exportHeadline), /* @__PURE__ */ createElement("span", { class: "secondary" }, coreViewModel2.translations.dataTransferModal.exportSelectionDescription), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("h3", null, coreViewModel2.translations.dataTransferModal.generalHeadline), /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.dataTransferModal.exportHeadline), /* @__PURE__ */ createElement("span", { class: "secondary" }, coreViewModel2.translations.dataTransferModal.exportSelectionDescription), /* @__PURE__ */ createElement("hr", null), FileSelectionDetail(coreViewModel2, fileTransferViewModel2)), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement(
-      "div",
-      {
-        class: "flex-column gap content-margin-bottom",
-        "children:append": [
-          fileTransferViewModel2.generalFileOptions,
-          OptionConverter
-        ]
-      }
-    ), /* @__PURE__ */ createElement("h3", null, coreViewModel2.translations.dataTransferModal.chatsHeadline), /* @__PURE__ */ createElement(
-      "div",
-      {
-        class: "flex-column gap",
-        "children:append": [
-          fileTransferViewModel2.chatFileOptions,
-          OptionConverter
-        ]
-      }
-    )), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement(
       "button",
       {
         class: "flex",

dist/sw.js

@@ -1,4 +1,4 @@
-const VERSION = "2610 Beta 21.15"
+const VERSION = "2610 Beta 21.17"
 
 function processUrl(event) {
     const url = event.request.url;

dist/version.txt

@@ -1 +1 @@
-2610 Beta 21.15
+2610 Beta 21.17

src/View/Modals/dataTransferModal.tsx

@@ -53,9 +53,9 @@ function OptionEntry(
             fileTransferViewModel.selectedPaths.remove(fileOption.path);
         }
     });
-    fileTransferViewModel.allOptionsSelected.subscribe(allSelected => {
+    fileTransferViewModel.allOptionsSelected.subscribe((allSelected) => {
-	isSelected.value = allSelected;
+        isSelected.value = allSelected;
-    })
+    });
     function toggle() {
         isSelected.value = !isSelected.value;
     }
@@ -72,6 +72,69 @@ function OptionEntry(
     );
 }
 
+function FileSelectionDetail(
+    coreViewModel: CoreViewModel,
+    fileTransferViewModel: FileTransferViewModel,
+) {
+    const OptionConverter: React.StateItemConverter<FileTransferOption> = (
+        fileOption: FileTransferOption,
+    ) => {
+        return OptionEntry(fileOption, fileTransferViewModel);
+    };
+
+    const chatList = React.createProxyState(
+        [fileTransferViewModel.chatFileOptions],
+        () =>
+            fileTransferViewModel.chatFileOptions.value.size == 0 ? (
+                <span class="secondary">
+                    {
+                        coreViewModel.translations.dataTransferModal
+                            .noChatsPlaceholder
+                    }
+                </span>
+            ) : (
+                <div
+                    class="flex-column gap"
+                    children:append={[
+                        fileTransferViewModel.chatFileOptions,
+                        OptionConverter,
+                    ]}
+                ></div>
+            ),
+    );
+
+    return (
+        <div>
+            <h3>
+                {coreViewModel.translations.dataTransferModal.generalHeadline}
+            </h3>
+            <div
+                class="flex-column gap content-margin-bottom"
+                children:append={[
+                    fileTransferViewModel.generalFileOptions,
+                    OptionConverter,
+                ]}
+            ></div>
+
+            <hr></hr>
+
+            <h3>
+                {coreViewModel.translations.dataTransferModal.chatsHeadline}
+            </h3>
+            <div children:set={chatList}></div>
+            <hr></hr>
+
+            <label class="inline">
+                <input
+                    type="checkbox"
+                    bind:checked={fileTransferViewModel.allOptionsSelected}
+                ></input>
+                {coreViewModel.translations.general.selectAllLabel}
+            </label>
+        </div>
+    );
+}
+
 // MODALS
 function DirectionSelectionModal(
     coreViewModel: CoreViewModel,
@@ -193,12 +256,6 @@ function FileSelectionModal(
     coreViewModel: CoreViewModel,
     fileTransferViewModel: FileTransferViewModel,
 ) {
-    const OptionConverter: React.StateItemConverter<FileTransferOption> = (
-        fileOption: FileTransferOption,
-    ) => {
-        return OptionEntry(fileOption, fileTransferViewModel);
-    };
-
     // state
     const isPresented = React.createProxyState(
         [fileTransferViewModel.presentedModal],
@@ -226,40 +283,7 @@ function FileSelectionModal(
 
                     <hr></hr>
 
-                    <h3>
+                    {FileSelectionDetail(coreViewModel, fileTransferViewModel)}
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .generalHeadline
-                        }
-                    </h3>
-                    <div
-                        class="flex-column gap content-margin-bottom"
-                        children:append={[
-                            fileTransferViewModel.generalFileOptions,
-                            OptionConverter,
-                        ]}
-                    ></div>
-
-                    <h3>
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .chatsHeadline
-                        }
-                    </h3>
-                    <div
-                        class="flex-column gap"
-                        children:append={[
-                            fileTransferViewModel.chatFileOptions,
-                            OptionConverter,
-                        ]}
-		    ></div>
-		
-		<hr></hr>
-
-		<label class="inline">
-		    <input type="checkbox" bind:checked={fileTransferViewModel.allOptionsSelected}></input>
-		    {coreViewModel.translations.general.selectAllLabel}
-		</label>
                 </main>
                 <div class="flex-row width-100">
                     <button
@@ -688,40 +712,7 @@ function ExportFileSelectionModal(
 
                     <hr></hr>
 
-                    <h3>
+                    {FileSelectionDetail(coreViewModel, fileTransferViewModel)}
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .generalHeadline
-                        }
-                    </h3>
-                    <div
-                        class="flex-column gap content-margin-bottom"
-                        children:append={[
-                            fileTransferViewModel.generalFileOptions,
-                            OptionConverter,
-                        ]}
-                    ></div>
-
-                    <h3>
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .chatsHeadline
-                        }
-                    </h3>
-                    <div
-                        class="flex-column gap"
-                        children:append={[
-                            fileTransferViewModel.chatFileOptions,
-                            OptionConverter,
-                        ]}
-                    ></div>
-		
-		<hr></hr>
-
-		<label class="inline">
-		    <input type="checkbox" bind:checked={fileTransferViewModel.allOptionsSelected}></input>
-		    {coreViewModel.translations.general.selectAllLabel}
-		</label>
                 </main>
                 <div class="flex-row width-100">
                     <button

src/View/translations.ts

@@ -22,7 +22,7 @@ const englishTranslations = {
         saveButton: "Save",
         setButton: "Set",
 
-	selectAllLabel: "Select all",
+        selectAllLabel: "Select all",
 
         filterOrCreateLabel: (type: string) => `Search or create ${type}`,
         createLabel: (query: string) => `Create "${query}"`,
@@ -172,6 +172,7 @@ const englishTranslations = {
         settingsData: "Identity & personal data",
 
         chatsHeadline: "Chats",
+        noChatsPlaceholder: "No chats",
 
         ///
 
@@ -404,7 +405,7 @@ export const allTranslations: {
             saveButton: "Speichern",
             setButton: "OK",
 
-	    selectAllLabel: "Alle auswählen",
+            selectAllLabel: "Alle auswählen",
 
             filterOrCreateLabel: (type: string) =>
                 `${type} suchen oder erstellen`,
@@ -548,6 +549,7 @@ export const allTranslations: {
             settingsData: "Identität und persönliche Daten",
 
             chatsHeadline: "Chats",
+            noChatsPlaceholder: "Keine Chats",
 
             transferChannelHeadline: "Übertragungskanal",
             transferKeyHeadline: "Schlüssel",
@@ -751,7 +753,7 @@ export const allTranslations: {
             saveButton: "Guardar",
             setButton: "OK",
 
-	    selectAllLabel: "Seleccionar todos",
+            selectAllLabel: "Seleccionar todos",
 
             filterOrCreateLabel: (type: string) => `Buscar o crear ${type}`,
             createLabel: (query: string) => `Crear "${query}"`,
@@ -894,6 +896,7 @@ export const allTranslations: {
             settingsData: "Identidad y datos personales",
 
             chatsHeadline: "Chats",
+            noChatsPlaceholder: "No hay chats",
 
             transferChannelHeadline: "Canal de Transferencia",
             transferKeyHeadline: "Clave de encriptación de transferencia",