From 283880dc7d92a2218e21323d65742b6aafc851e4 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Fri, 5 Dec 2025 11:54:33 +0100
Subject: [PATCH] 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 |  2 +-
 client/src/stores/chat.js         | 13 +++++++++++++
 client/src/style.css              | 18 ++++++++++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/client/src/components/MenuBar.vue b/client/src/components/MenuBar.vue
index d376a37..973d4a9 100644
--- a/client/src/components/MenuBar.vue
+++ b/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>
diff --git a/client/src/stores/chat.js b/client/src/stores/chat.js
index 9a65b6b..5f12e72 100644
--- a/client/src/stores/chat.js
+++ b/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,
diff --git a/client/src/style.css b/client/src/style.css
index 18df29c..81a1e96 100644
--- a/client/src/style.css
+++ b/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;