final fix hopefully

Author: jp8-isep

backend/routes/chat_rooms.py

@@ -812,10 +812,11 @@ def convert_objectids(obj):
                 socketio.emit('new_chat_room_message', new_message, room=room_name)
                 logger.info(f"Emitted new_chat_room_message event to room {room_name} for message {message_id}")
                 # Also emit to sender's personal room so the sender always sees the message (even if not joined)
-                try:
-                    socketio.emit('new_chat_room_message', new_message, room=f"user_{user_id}")
-                except Exception:
-                    pass
+                # FIX: Removed - this causes double messages for the sender if they are already in the room
+                # try:
+                #    socketio.emit('new_chat_room_message', new_message, room=f"user_{user_id}")
+                # except Exception:
+                #    pass
         except Exception as e:
             logger.warning(f"Failed to emit socket event for message {message_id}: {str(e)}")
 
@@ -832,23 +833,27 @@ def convert_objectids(obj):
             members = [str(m) for m in room_data.get('members', [])] if room_data else []
             room_name = room.get('name', 'Chat Room')
 
+            # Check for @everyone or @todos
+            is_everyone_mention = ('@everyone' in content or '@todos' in content) and not room.get('is_public', True)
+            
             # Notify each member (except the sender)
             for member_id in members:
                 if member_id == user_id:
                     continue  # Don't notify the sender
 
                 # Check if topic is muted FIRST (topic silencing overrides everything)
-                if topic_id and notification_settings.is_topic_muted(member_id, topic_id):
+                # @everyone bypasses mute settings in private chats usually, but let's respect topic mute if critical
+                if not is_everyone_mention and topic_id and notification_settings.is_topic_muted(member_id, topic_id):
                     logger.info(f"Skipping notification for member {member_id} - topic {topic_id} is muted")
                     continue
 
                 # Check if chat room itself is muted
-                if notification_settings.is_chat_room_muted(member_id, room_id):
+                if not is_everyone_mention and notification_settings.is_chat_room_muted(member_id, room_id):
                     logger.info(f"Skipping notification for member {member_id} - chatroom {room_id} is muted")
                     continue
 
                 # Check if user is following the chatroom
-                if not notification_settings.is_following_chat_room(member_id, room_id):
+                if not is_everyone_mention and not notification_settings.is_following_chat_room(member_id, room_id):
                     logger.info(f"Skipping notification for member {member_id} - chatroom {room_id} is not followed")
                     continue
 

frontend/components/ChatRoom/ChatRoomContainer.tsx

@@ -20,13 +20,13 @@ import MessageDeleteDialog from '@/components/UI/MessageDeleteDialog';
 import MessageContextMenu from '@/components/UI/MessageContextMenu';
 import ChatIcon from '@/components/UI/ChatIcon';
 import ChatRoomContextMenu from '@/components/UI/ChatRoomContextMenu';
-import { VoipButton, VoipControlBar } from '@/components/Voip';
+import { VoipButton } from '@/components/Voip';
+import { Mic, Send, Bell, BellOff, Volume2, VolumeX, Trash2, Image, Paperclip, Share2, Square, X } from 'lucide-react';
+import AudioPlayer from '@/components/UI/AudioPlayer';
 import { api, API_ENDPOINTS } from '@/utils/api';
 import { toast } from 'react-hot-toast';
 import { getAnonymousModeState, saveAnonymousModeState, getLastAnonymousName } from '@/utils/anonymousStorage';
 import { analyzeImageBrightness, getTextColorClass } from '@/utils/imageBrightness';
-import AudioPlayer from '@/components/UI/AudioPlayer';
-import { Mic, Square, Send, X, Trash2, Image, Paperclip, Share2, Bell, BellOff } from 'lucide-react';
 
 interface Message {
   id: string;
@@ -177,8 +177,9 @@ const ChatRoomContainer: React.FC<ChatRoomContainerProps> = ({
   const [mentionUsers, setMentionUsers] = useState<Array<{ id: string, username: string }>>([]);
   const [showMentionDropdown, setShowMentionDropdown] = useState(false);
   const [mentionSearch, setMentionSearch] = useState('');
-  const [selectedMentionIndex, setSelectedMentionIndex] = useState(0);
+  const [selectedMentionIndex, setSelectedMentionIndex] = useState(0); // State for mention selection
   const [mentionCursorPosition, setMentionCursorPosition] = useState(0);
+  const [hiddenMessageIds, setHiddenMessageIds] = useState<string[]>([]);
 
   // Debounced global search for mentions
   useEffect(() => {
@@ -802,7 +803,7 @@ const ChatRoomContainer: React.FC<ChatRoomContainerProps> = ({
       }
 
       const response = await api.post(API_ENDPOINTS.CHAT_ROOMS.SEND_MESSAGE(room.id), {
-        content: messageInput.trim() || (selectedGifUrl ? '[GIF]' : '') || (audioBlob ? (t('voip.audioMessage') || 'Voice Message') : '') || (attachments.length > 0 ? '[Attachment]' : ''),
+        content: messageInput.trim(),
         message_type: messageType,
         gif_url: selectedGifUrl,
         attachments: attachments.length > 0 ? attachments : undefined,
@@ -1082,7 +1083,7 @@ const ChatRoomContainer: React.FC<ChatRoomContainerProps> = ({
                   <p>{t('chat.noMessages')}</p>
                 </div>
               ) : (
-                messages.map(message => (
+                messages.filter(m => !hiddenMessageIds.includes(m.id)).map(message => (
                   <div
                     key={message.id}
                     className="flex gap-3"
@@ -1221,6 +1222,15 @@ const ChatRoomContainer: React.FC<ChatRoomContainerProps> = ({
                                     }}
                                   />
                                 );
+                              } else if (attachment.type === 'audio') {
+                                return (
+                                  <div key={idx} className="w-full max-w-md min-w-[200px]">
+                                    <AudioPlayer
+                                      src={attachment.url}
+                                      filename={attachment.filename}
+                                    />
+                                  </div>
+                                );
                               } else {
                                 return (
                                   <FileCard
@@ -1653,6 +1663,10 @@ const ChatRoomContainer: React.FC<ChatRoomContainerProps> = ({
             x={messageContextMenu.x}
             y={messageContextMenu.y}
             onClose={() => setMessageContextMenu(null)}
+            onHide={() => {
+              setHiddenMessageIds(prev => [...prev, messageContextMenu.messageId]);
+              setMessageContextMenu(null);
+            }}
             onReportMessage={(messageId, userId, username) => {
               if (userId && username) {
                 handleReportUserFromMessage(messageId, userId, username);

frontend/components/Layout/Layout.tsx

@@ -256,7 +256,7 @@ const Layout: React.FC<LayoutProps> = ({ children, transparentHeader = false })
                 }}
               >
                 <span className="text-sm font-medium theme-text-primary">{t('userMenu.settings') || 'Settings'}</span>
-                <div className="p-2 rounded-full theme-bg-secondary">
+                <div className="p-2 rounded-lg theme-bg-secondary">
                   <Settings size={18} className="theme-text-primary" />
                 </div>
               </button>
@@ -297,7 +297,7 @@ const Layout: React.FC<LayoutProps> = ({ children, transparentHeader = false })
                   className="w-full flex items-center justify-between p-2 rounded-lg hover:theme-bg-tertiary transition-colors text-left"
                 >
                   <span className="text-sm font-medium theme-text-primary">{t('supportWidget.title') || 'Support'}</span>
-                  <div className="p-2 rounded-full theme-bg-secondary">
+                  <div className="p-2 rounded-lg theme-bg-secondary">
                     <LifeBuoy size={18} className="theme-text-primary" />
                   </div>
                 </button>

frontend/components/PrivateMessages/PrivateMessagesSimplified.tsx

@@ -1212,10 +1212,7 @@ const PrivateMessagesSimplified: React.FC<PrivateMessagesSimplifiedProps> = ({
         }
       }
 
-      const attachmentPlaceholder = `[${t('privateMessages.attachment')}]`;
-      const audioPlaceholder = t('voip.audioMessage') || 'Voice Message';
-
-      const finalContent = content || (messageType === 'gif' ? '[GIF]' : '') || (messageType === 'audio' ? audioPlaceholder : '') || (attachments.length > 0 ? attachmentPlaceholder : '');
+      const finalContent = content;
 
       const response = await api.post(API_ENDPOINTS.MESSAGES.SEND_PRIVATE, {
         to_user_id: selectedConversation,

frontend/components/Settings/MutedItemsModal.tsx

@@ -97,10 +97,10 @@ const MutedItemsModal: React.FC<MutedItemsModalProps> = ({ isOpen, onClose }) =>
     };
 
     const formatRemainingTime = (until: string | null | undefined) => {
-        if (!until) return t('mute.forever') || 'Forever';
+        if (!until) return t('settings.mute.forever') || 'Forever';
         const date = new Date(until);
         const now = new Date();
-        if (date <= now) return t('mute.expired') || 'Expired';
+        if (date <= now) return t('settings.mute.expired') || 'Expired';
 
         const diff = date.getTime() - now.getTime();
         const days = Math.floor(diff / (1000 * 60 * 60 * 24));
@@ -114,6 +114,27 @@ const MutedItemsModal: React.FC<MutedItemsModalProps> = ({ isOpen, onClose }) =>
 
     if (!isOpen) return null;
 
+    const getTypeLabel = (type: string) => {
+        switch (type) {
+            case 'topic': return t('settings.mute.types.topic') || 'Topic';
+            case 'chatroom': return t('settings.mute.types.chatroom') || 'Chatroom';
+            case 'post': return t('settings.mute.types.post') || 'Post';
+            default: return type;
+        }
+    };
+
+    const getTypeIcon = (type: string) => {
+        // You might need to import these icons if they aren't already available
+        // assuming standard lucide-react imports
+        return (
+            <svg className="w-3 h-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                {type === 'topic' && <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14" />}
+                {type === 'chatroom' && <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />}
+                {type === 'post' && <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />}
+            </svg>
+        );
+    };
+
     return (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" onClick={onClose}>
             <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] flex flex-col" onClick={(e) => e.stopPropagation()}>
@@ -155,36 +176,37 @@ const MutedItemsModal: React.FC<MutedItemsModalProps> = ({ isOpen, onClose }) =>
                                 <div key={`${item.type}-${item.id}`} className="p-3 rounded-lg border theme-border theme-bg-tertiary flex items-center justify-between">
                                     <div className="flex-1 min-w-0 pr-4">
                                         <div className="flex items-center gap-2 mb-1">
-                                            <span className={`text-xs px-2 py-0.5 rounded-full uppercase font-bold tracking-wider 
-                            ${item.type === 'topic' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' :
-                                                    item.type === 'chatroom' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' :
-                                                        'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
+                                            <span className={`inline-flex items-center text-xs px-2.5 py-1 rounded-full uppercase font-bold tracking-wider 
+                            ${item.type === 'topic' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-200' :
+                                                    item.type === 'chatroom' ? 'bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200' :
+                                                        'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/50 dark:text-indigo-200'
                                                 }`}>
-                                                {item.type}
+                                                {getTypeIcon(item.type)}
+                                                {getTypeLabel(item.type)}
                                             </span>
-                                            <h3 className="font-medium theme-text-primary truncate">{item.name}</h3>
+                                            <h3 className="font-medium theme-text-primary truncate ml-1">{item.name}</h3>
                                         </div>
-                                        <div className="flex items-center gap-4 text-xs theme-text-muted">
+                                        <div className="flex items-center gap-4 text-xs theme-text-muted mt-2">
                                             {item.topic_title && (
-                                                <span className="flex items-center gap-1 font-medium bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded text-gray-600 dark:text-gray-300">
-                                                    in {item.topic_title}
+                                                <span className="flex items-center gap-1 font-medium bg-gray-100 dark:bg-gray-700/50 px-2 py-0.5 rounded text-gray-600 dark:text-gray-300">
+                                                    {t('settings.mute.in', { context: item.topic_title }) || `in ${item.topic_title}`}
                                                 </span>
                                             )}
                                             {item.silenced_until && (
                                                 <span className="flex items-center gap-1 text-orange-500">
                                                     <Clock size={12} />
-                                                    {formatRemainingTime(item.silenced_until)} remaining
+                                                    {formatRemainingTime(item.silenced_until)} {t('settings.mute.remaining') || 'remaining'}
                                                 </span>
                                             )}
-                                            {!item.silenced_until && <span>Indefinitely</span>}
+                                            {!item.silenced_until && <span>{t('settings.mute.indefinitely') || 'Indefinitely'}</span>}
                                         </div>
                                     </div>
                                     <button
                                         onClick={() => handleUnmute(item)}
                                         disabled={processingId === item.id}
-                                        className="px-3 py-1.5 text-xs font-medium bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+                                        className="px-3 py-1.5 text-xs font-medium bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                                     >
-                                        {processingId === item.id ? <LoadingSpinner size="sm" /> : (t('common.unmute') || 'Unmute')}
+                                        {processingId === item.id ? <LoadingSpinner size="sm" /> : (t('mute.unmute') || 'Unmute')}
                                     </button>
                                 </div>
                             ))}

frontend/components/UI/UserBanner.tsx

@@ -68,6 +68,18 @@ const UserBanner: React.FC<UserBannerProps> = ({
       return;
     }
 
+    // Handle @everyone and @todos special mentions
+    if (initialUsername === 'everyone' || initialUsername === 'todos') {
+      setUser({
+        id: '',
+        username: initialUsername === 'everyone' ? (t('chat.tagEveryone') || 'Everyone') : 'Todos',
+        // Optional: Set a specific banner or leave empty to use gradient
+        created_at: new Date().toISOString(),
+      });
+      setLoading(false);
+      return;
+    }
+
     if (!userId && !initialUsername) {
       setError(t('errors.userNotFound') || 'User not found');
       setLoading(false);

frontend/contexts/SocketContext.tsx

@@ -66,19 +66,31 @@ export const SocketProvider: React.FC<SocketProviderProps> = ({ children }) => {
       // On server: use BACKEND_IP or NEXT_PUBLIC_API_URL
       let socketUrl: string;
       if (typeof window !== 'undefined') {
-        const isProduction = window.location.hostname === 'topicsflow.me' || 
-                             window.location.hostname === 'www.topicsflow.me' ||
-                             window.location.hostname.includes('azurestaticapps.net');
+        const isProduction = window.location.hostname === 'topicsflow.me' ||
+          window.location.hostname === 'www.topicsflow.me' ||
+          window.location.hostname.includes('azurestaticapps.net');
+
+        const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+
         const backendUrl = process.env.BACKEND_IP || process.env.NEXT_PUBLIC_API_URL;
-        
-        if (isProduction && backendUrl) {
-          // Production: Use backend URL directly
-          socketUrl = backendUrl;
-        } else if (isProduction) {
-          // Production but no backend URL: use api.topicsflow.me as default
-          socketUrl = 'https://api.topicsflow.me';
+
+        if (isProduction) {
+          // Production: Always use backend URL or default to api.topicsflow.me
+          if (backendUrl) {
+            socketUrl = backendUrl;
+          } else {
+            socketUrl = 'https://api.topicsflow.me';
+          }
+        } else if (isLocalhost) {
+          // Local Development: Prioritize localhost:5000
+          if (backendUrl && (backendUrl.includes('topicsflow.me') || backendUrl.includes('azurestaticapps.net'))) {
+            socketUrl = 'http://localhost:5000';
+            console.warn('[SocketContext] Environment variables point to production but running on localhost. Forcing socket to http://localhost:5000');
+          } else {
+            socketUrl = backendUrl || 'http://localhost:5000';
+          }
         } else {
-          // Local Development: Always use localhost:5000 directly (no proxy)
+          // Other environments
           socketUrl = backendUrl || 'http://localhost:5000';
         }
       } else {

frontend/locales/en.json

@@ -1555,7 +1555,16 @@
     "24hours": "24 hours",
     "forever": "Until I turn it back on",
     "silenced": "Topic silenced",
-    "unsilenced": "Topic unsilenced"
+    "unsilenced": "Topic unsilenced",
+    "expired": "Expired",
+    "remaining": "remaining",
+    "indefinitely": "Indefinitely",
+    "in": "in {context}",
+    "types": {
+      "topic": "Topic",
+      "chatroom": "Chatroom",
+      "post": "Post"
+    }
   },
   "messages": {
     "deleteMessage": "Delete Message",

frontend/locales/pt.json

@@ -1536,7 +1536,16 @@
     "24hours": "24 horas",
     "forever": "Até eu voltar a ligar",
     "silenced": "Tópico silenciado",
-    "unsilenced": "Tópico não silenciado"
+    "unsilenced": "Tópico não silenciado",
+    "expired": "Expirado",
+    "remaining": "restantes",
+    "indefinitely": "Indefinidamente",
+    "in": "em {context}",
+    "types": {
+      "topic": "Tópico",
+      "chatroom": "Sala de Chat",
+      "post": "Publicação"
+    }
   },
   "userBanner": {
     "joined": "Entrou",