Änderung: Verbesserung der Verbindungsverwaltung und Benutzeroberfläche in mehreren Komponenten

Änderungen:
- Hinzufügung eines Verbindungsstatus-Indicators in der AppHeader.vue, der den aktuellen Verbindungsstatus anzeigt.
- Erweiterung der MultiChatDialog.vue um verbesserte Netzwerkereignisbehandlungen und eine Herzschlag-Logik zur Aufrechterhaltung der WebSocket-Verbindung.
- Anpassungen im Store zur Verwaltung des Verbindungsstatus und zur Implementierung von Wiederverbindungslogik mit exponentiellem Backoff.
- Diese Anpassungen verbessern die Benutzererfahrung durch klare Statusanzeigen und erhöhen die Stabilität der WebSocket-Verbindungen.

frontend/src/components/AppHeader.vue

@@ -2,12 +2,40 @@
   <header>
     <div class="logo"><img src="/images/logos/logo.png" /></div>
     <div class="advertisement">Advertisement</div>
+    <div class="connection-status" v-if="isLoggedIn">
+      <div class="status-indicator" :class="connectionStatusClass">
+        <span class="status-dot"></span>
+        <span class="status-text">{{ connectionStatusText }}</span>
+      </div>
+    </div>
   </header>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
-  name: 'AppHeader'
+  name: 'AppHeader',
+  computed: {
+    ...mapGetters(['isLoggedIn', 'connectionStatus']),
+    connectionStatusClass() {
+      return {
+        'status-connected': this.connectionStatus === 'connected',
+        'status-connecting': this.connectionStatus === 'connecting',
+        'status-disconnected': this.connectionStatus === 'disconnected',
+        'status-error': this.connectionStatus === 'error'
+      };
+    },
+    connectionStatusText() {
+      switch (this.connectionStatus) {
+        case 'connected': return 'Verbunden';
+        case 'connecting': return 'Verbinde...';
+        case 'disconnected': return 'Getrennt';
+        case 'error': return 'Fehler';
+        default: return 'Unbekannt';
+      }
+    }
+  }
 };
 </script>
 
@@ -27,4 +55,69 @@ header {
 .logo > img {
   max-height: 50px;
 }
+
+.connection-status {
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 6px;
+  animation: pulse 2s infinite;
+}
+
+.status-connected .status-dot {
+  background-color: #4caf50;
+}
+
+.status-connecting .status-dot {
+  background-color: #ff9800;
+}
+
+.status-disconnected .status-dot {
+  background-color: #f44336;
+}
+
+.status-error .status-dot {
+  background-color: #f44336;
+}
+
+.status-connected {
+  background-color: rgba(76, 175, 80, 0.1);
+  color: #2e7d32;
+}
+
+.status-connecting {
+  background-color: rgba(255, 152, 0, 0.1);
+  color: #f57c00;
+}
+
+.status-disconnected {
+  background-color: rgba(244, 67, 54, 0.1);
+  color: #d32f2f;
+}
+
+.status-error {
+  background-color: rgba(244, 67, 54, 0.1);
+  color: #d32f2f;
+}
+
+@keyframes pulse {
+  0% { opacity: 1; }
+  50% { opacity: 0.5; }
+  100% { opacity: 1; }
+}
 </style>