add indicator when disconnected = shortcut to connection modal

src/View/chatPage.tsx

@@ -49,6 +49,19 @@ export function ChatPage(chatViewModel: ChatViewModel) {
                     >
                         <span class="icon">close</span>
                     </button>
+                    <button
+                        class="danger"
+                        aria-label={translations.general.restoreConnection}
+                        on:click={
+                            chatViewModel.connectionViewModel
+                                .showConnectionModal
+                        }
+                        toggle:hidden={
+                            chatViewModel.connectionViewModel.isConnected
+                        }
+                    >
+                        <span class="icon">signal_disconnected</span>
+                    </button>
 
                     <span>
                         {ChatViewToggleButton(

src/View/translations.ts

@@ -21,6 +21,8 @@ const englishTranslations = {
 
         fileVersionLabel: "Version",
         searchLabel: "Search",
+
+        restoreConnection: "Restore connection",
     },
 
     regional: {
@@ -295,6 +297,8 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
 
             fileVersionLabel: "Version",
             searchLabel: "Suche",
+
+            restoreConnection: "Verbindung wiederherstellen",
         },
 
         regional: {
@@ -537,6 +541,8 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
 
             fileVersionLabel: "Versión",
             searchLabel: "Buscar",
+
+            restoreConnection: "Conectar de nuevo",
         },
 
         regional: {

src/ViewModel/Chat/chatListViewModel.ts

@@ -7,11 +7,13 @@ import CoreViewModel from "../Global/coreViewModel";
 import { IndexManager } from "../../Model/Utility/utility";
 import SettingsViewModel from "../Global/settingsViewModel";
 import StorageModel from "../../Model/Global/storageModel";
+import ConnectionViewModel from "../Global/connectionViewModel";
 
 export default class ChatListViewModel {
     storageModel: StorageModel;
     chatListModel: ChatListModel;
     settingsViewModel: SettingsViewModel;
+    connectionViewModel: ConnectionViewModel;
 
     // data
     chatIndexManager: IndexManager<ChatViewModel> = new IndexManager(
@@ -61,6 +63,7 @@ export default class ChatListViewModel {
             this.storageModel,
             chatModel,
             this.settingsViewModel,
+            this.connectionViewModel,
             this,
         );
     };
@@ -97,10 +100,12 @@ export default class ChatListViewModel {
         storageModel: StorageModel,
         chatListModel: ChatListModel,
         settingsViewModel: SettingsViewModel,
+        connectionViewModel: ConnectionViewModel,
     ) {
         this.storageModel = storageModel;
         this.chatListModel = chatListModel;
         this.settingsViewModel = settingsViewModel;
+        this.connectionViewModel = connectionViewModel;
 
         this.loadChats();
     }

src/ViewModel/Chat/chatViewModel.ts

@@ -18,11 +18,13 @@ import SettingsPageViewModel from "../Pages/settingsPageViewModel";
 import SettingsViewModel from "../Global/settingsViewModel";
 import TaskPageViewModel from "../Pages/taskPageViewModel";
 import { translations } from "../../View/translations";
+import ConnectionViewModel from "../Global/connectionViewModel";
 
 export default class ChatViewModel {
     chatModel: ChatModel;
     storageModel: StorageModel;
     settingsViewModel: SettingsViewModel;
+    connectionViewModel: ConnectionViewModel;
     chatListViewModel: ChatListViewModel;
 
     calendarViewModel: CalendarPageViewModel;
@@ -109,12 +111,14 @@ export default class ChatViewModel {
         storageModel: StorageModel,
         chatModel: ChatModel,
         settingsViewModel: SettingsViewModel,
+        connectionViewModel: ConnectionViewModel,
         chatListViewModel: ChatListViewModel,
     ) {
         // models
         this.storageModel = storageModel;
         this.chatModel = chatModel;
         this.settingsViewModel = settingsViewModel;
+        this.connectionViewModel = connectionViewModel;
         this.chatListViewModel = chatListViewModel;
 
         // page viewModels

src/index.tsx

@@ -50,6 +50,7 @@ const chatListViewModel = new ChatListViewModel(
     storageModel,
     chatListModel,
     settingsViewModel,
+    connectionViewModel,
 );
 const fileTransferViewModel = new FileTransferViewModel(
     fileTransferModel,