Add visual feedback for unread messages in the menu. Implement a pulsing animation and color change for the inbox button when there are unread chats. Also, add sound notification for new messages received, enhancing user experience.

client/src/components/MenuBar.vue

@@ -7,7 +7,7 @@
       </span>
       <button @click="handleLeave">{{ $t('menu_leave') }}</button>
       <button @click="handleSearch">{{ $t('menu_search') }}</button>
-      <button @click="handleInbox">
+      <button @click="handleInbox" :class="{ 'has-unread': chatStore.unreadChatsCount > 0 }">
         {{ $t('menu_inbox') }}<span v-if="chatStore.unreadChatsCount > 0"> ({{ chatStore.unreadChatsCount }})</span>
       </button>
       <button @click="handleHistory">{{ $t('menu_history') }}</button>

client/src/stores/chat.js

@@ -229,6 +229,19 @@ export const useChatStore = defineStore('chat', () => {
           console.log('[Bild empfangen] Von:', data.from, 'URL:', data.imageUrl || data.message);
         }
         
+        // Sound abspielen bei neuer Nachricht (nur wenn nicht selbst gesendet)
+        if (!data.self) {
+          try {
+            const audio = new Audio('/static/newmessage.mp3');
+            audio.play().catch(err => {
+              // Ignoriere Fehler (z.B. wenn Browser Auto-Play blockiert)
+              console.log('Sound konnte nicht abgespielt werden:', err);
+            });
+          } catch (error) {
+            console.log('Fehler beim Abspielen des Sounds:', error);
+          }
+        }
+        
         if (currentConversation.value === data.from) {
           const newMessage = {
             from: data.from,

client/src/style.css

@@ -67,6 +67,24 @@ html, body, #app {
   background-color: #52a052;
 }
 
+.menu button.has-unread {
+  background-color: #ff6b6b;
+  animation: pulse 2s infinite;
+}
+
+.menu button.has-unread:hover {
+  background-color: #ff5252;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
 .menu span {
   display: inline-block;
   padding: 0.375em 0.4em;