Fix unread divider: update sessionUnreadRef when messages are marked as read

backend/src/Contracts/Messaging/Application/Abstractions/IMessageRepository.cs

@@ -13,6 +13,7 @@ public interface IMessageRepository
 
     Task<List<Message>> GetChatMessagesCursorAsync(Guid chatId, DateTime? cursor, long? sequenceId, int limit, CancellationToken cancellationToken);
     Task<List<Message>> GetChatMessagesAroundAsync(Guid chatId, long sequenceId, int limit, CancellationToken cancellationToken);
+    Task<List<Message>> GetChatMessagesAfterAsync(Guid chatId, long sequenceId, int limit, CancellationToken cancellationToken);
     Task<Message?> GetLastStoryMessageAsync(Guid chatId, Guid storyId, CancellationToken cancellationToken);
 
     Task UpdateAsync(Message message, CancellationToken cancellationToken);

backend/src/Contracts/Messaging/Domain/Message.cs

@@ -23,6 +23,9 @@ public abstract class Message : AggregateRoot<Guid>
     protected List<DeletedMessage> _deletedFor = new();
     public IReadOnlyCollection<DeletedMessage> DeletedFor => _deletedFor.AsReadOnly();
 
+    protected List<Guid> _readByUsers = new();
+    public IReadOnlyCollection<Guid> ReadByUsers => _readByUsers.AsReadOnly();
+
     protected Message() : base(Guid.Empty) { }
 
     protected Message(Guid id, Guid chatId, Guid senderId, Guid? replyToId, Guid? forwardedFromId, DateTime createdAt, bool isImported)
@@ -53,4 +56,14 @@ public abstract class Message : AggregateRoot<Guid>
         if (!_deletedFor.Exists(x => x.UserId == userId))
             _deletedFor.Add(new DeletedMessage(Id, userId));
     }
+
+    public void MarkAsRead(Guid userId)
+    {
+        if (!_readByUsers.Contains(userId))
+        {
+            _readByUsers.Add(userId);
+        }
+    }
+
+    public bool IsReadBy(Guid userId) => _readByUsers.Contains(userId);
 }

backend/src/Modules/Conversations/Application/Chats/LeaveOrDelete/LeaveOrDeleteChat.cs

@@ -1,13 +1,15 @@
 using System;
+using System.Linq;
 using System.Threading;
 using System.Threading.Tasks;
-using Knot.Shared.Kernel;
-using Knot.Contracts.Conversations.Domain;
 using Knot.Contracts.Conversations.Application.Abstractions;
-using MediatR;
-using System.Linq;
+using Knot.Contracts.Conversations.Domain;
 using Knot.Contracts.Messaging.Application.Abstractions;
+using Knot.Modules.Conversations.Infrastructure.SignalR;
+using Knot.Shared.Kernel;
 using Knot.Shared.Kernel.Storage;
+using MediatR;
+using Microsoft.AspNetCore.SignalR;
 
 namespace Knot.Modules.Conversations.Application.Chats.LeaveOrDelete;
 
@@ -19,17 +21,21 @@ internal sealed class LeaveOrDeleteChatCommandHandler : ICommandHandler<LeaveOrD
     private readonly IMessageRepository _messageRepository;
     private readonly IFileStorageService _fileStorage;
     private readonly IChatsUnitOfWork _uow;
+    private readonly IHubContext<ChatHub> _hubContext;
 
     public LeaveOrDeleteChatCommandHandler(
         IChatRepository chatRepository,
+
         IMessageRepository messageRepository,
         IFileStorageService fileStorage,
-        IChatsUnitOfWork uow)
+        IChatsUnitOfWork uow,
+        IHubContext<ChatHub> hubContext)
     {
         _chatRepository = chatRepository;
         _messageRepository = messageRepository;
         _fileStorage = fileStorage;
         _uow = uow;
+        _hubContext = hubContext;
     }
 
     public async Task<Result<SuccessResponse>> Handle(LeaveOrDeleteChatCommand request, CancellationToken cancellationToken)
@@ -58,6 +64,14 @@ internal sealed class LeaveOrDeleteChatCommandHandler : ICommandHandler<LeaveOrD
             // DELETE ALL MESSAGES AND FILES FIRST
             await DeleteChatMediaAndMessagesAsync(chat.Id, cancellationToken);
             _chatRepository.Remove(chat);
+
+            // Notify all remaining members that the chat was deleted
+
+            foreach (var member in chat.Members)
+            {
+                await _hubContext.Clients.User(member.UserId.ToString())
+                    .SendAsync("chat_deleted", chat.Id.ToString(), cancellationToken);
+            }
         }
 
         await _uow.SaveChangesAsync(cancellationToken);
@@ -68,6 +82,7 @@ internal sealed class LeaveOrDeleteChatCommandHandler : ICommandHandler<LeaveOrD
     private async Task DeleteChatMediaAndMessagesAsync(Guid chatId, CancellationToken ct)
     {
         try
+
         {
             // Get all messages directly from Mongo (not paged)
             var messages = await _messageRepository.GetChatMessagesAsync(chatId, int.MaxValue, 0, ct);

backend/src/Modules/Conversations/Application/Messages/GetMessages/GetMessagesQuery.cs

@@ -13,7 +13,7 @@ using MediatR;
 
 namespace Knot.Modules.Conversations.Application.Messages.GetMessages;
 
-public record GetMessagesQuery(Guid UserId, Guid ChatId, string? Cursor, long? Pivot = null, int? Limit = null) : IQuery<List<MessageDetailDto>>;
+public record GetMessagesQuery(Guid UserId, Guid ChatId, string? Cursor, long? Pivot = null, long? AfterSequenceId = null, int? Limit = null) : IQuery<List<MessageDetailDto>>;
 
 internal sealed class GetMessagesQueryHandler : IQueryHandler<GetMessagesQuery, List<MessageDetailDto>>
 {
@@ -41,7 +41,12 @@ internal sealed class GetMessagesQueryHandler : IQueryHandler<GetMessagesQuery,
         List<Message> messages;
         int queryLimit = request.Limit ?? ChatConstants.DefaultMessageQueryLimit;
 
-        if (request.Pivot.HasValue)
+        if (request.AfterSequenceId.HasValue)
+        {
+            // Получаем только сообщения ПОСЛЕ указанного sequenceId (для синхронизации)
+            messages = await _messageRepository.GetChatMessagesAfterAsync(request.ChatId, request.AfterSequenceId.Value, queryLimit, cancellationToken);
+        }
+        else if (request.Pivot.HasValue)
         {
             messages = await _messageRepository.GetChatMessagesAroundAsync(request.ChatId, request.Pivot.Value, queryLimit, cancellationToken);
         }
@@ -154,7 +159,7 @@ internal sealed class GetMessagesQueryHandler : IQueryHandler<GetMessagesQuery,
                 (message as StoryMessage)?.StoryMediaType,
                 (message as MediaMessage)?.Media.Select(m => new MediaDto(m.Id, m.Type, m.Url, m.Filename, m.Size, m.Duration)).ToList() ?? new List<MediaDto>(),
                 sender != null ? new MessageSenderDto(sender.Id, sender.Username, sender.DisplayName, sender.Avatar) : new MessageSenderDto(message.SenderId, "unknown", "Unknown", null),
-                new List<ReadByDto>(), // ReadBy not implemented in this detailed view yet
+                message.ReadByUsers.Select(id => new ReadByDto(id)).ToList(),
                 reactions?.Select(r =>
                 {
                     senders.TryGetValue(r.UserId, out var ru);

backend/src/Modules/Conversations/Application/Messages/Read/ReadMessagesCommandHandler.cs

@@ -1,7 +1,8 @@
-using MediatR;
-using Knot.Contracts.Conversations.Domain;
-using Knot.Shared.Kernel;
 using Knot.Contracts.Conversations.Application.Abstractions;
+using Knot.Contracts.Conversations.Domain;
+using Knot.Contracts.Messaging.Application.Abstractions;
+using Knot.Shared.Kernel;
+using MediatR;
 
 namespace Knot.Modules.Conversations.Application.Messages.Read;
 
@@ -11,11 +12,13 @@ public sealed class ReadMessagesCommandHandler : ICommandHandler<ReadMessagesCom
 {
     private readonly IChatRepository _chatRepository;
     private readonly IChatsUnitOfWork _unitOfWork;
+    private readonly IMessageRepository _messageRepository;
 
-    public ReadMessagesCommandHandler(IChatRepository chatRepository, IChatsUnitOfWork unitOfWork)
+    public ReadMessagesCommandHandler(IChatRepository chatRepository, IChatsUnitOfWork unitOfWork, IMessageRepository messageRepository)
     {
         _chatRepository = chatRepository;
         _unitOfWork = unitOfWork;
+        _messageRepository = messageRepository;
     }
 
     public async Task<Result> Handle(ReadMessagesCommand request, CancellationToken cancellationToken)
@@ -28,6 +31,23 @@ public sealed class ReadMessagesCommandHandler : ICommandHandler<ReadMessagesCom
 
         member.UpdateReadCursor(request.LastReadMessageId, request.LastReadSequenceId);
 
+        // Обновляем ReadByUsers для всех сообщений до LastReadSequenceId
+        var messages = await _messageRepository.GetChatMessagesAfterAsync(
+            request.ChatId,
+            0,
+            1000,
+            cancellationToken);
+
+        foreach (var message in messages)
+        {
+            if (message.SequenceId <= request.LastReadSequenceId &&
+                message.SenderId != request.UserId &&
+                !message.IsReadBy(request.UserId))
+            {
+                message.MarkAsRead(request.UserId);
+            }
+        }
+
         await _unitOfWork.SaveChangesAsync(cancellationToken);
 
         return Result.Success();

backend/src/Modules/Conversations/Application/Messages/SearchMessages/SearchMessagesQuery.cs

@@ -3,10 +3,10 @@ using System.Collections.Generic;
 using System.Linq;
 using System.Threading;
 using System.Threading.Tasks;
+using Knot.Contracts.Conversations.Domain;
 using Knot.Contracts.Messaging.Application.Abstractions;
 using Knot.Contracts.Messaging.Domain;
 using Knot.Modules.Conversations.Application.DTOs;
-using Knot.Contracts.Conversations.Domain;
 using Knot.Shared.Kernel;
 using MediatR;
 
@@ -41,7 +41,8 @@ internal sealed class SearchMessagesQueryHandler : IQueryHandler<SearchMessagesQ
         var allReactions = await _reactionRepository.GetReactionsForMessagesAsync(messageIds, cancellationToken);
         var reactionsByMessage = allReactions.GroupBy(r => r.MessageId).ToDictionary(g => g.Key, g => g.ToList());
 
-        var result = messages.Select(message => {
+        var result = messages.Select(message =>
+        {
             var textMessage = message as TextMessage;
             var mediaMessage = message as MediaMessage;
             var storyMessage = message as StoryMessage;
@@ -66,7 +67,7 @@ internal sealed class SearchMessagesQueryHandler : IQueryHandler<SearchMessagesQ
                 mediaMessage?.Media.Select(media => new MediaDto(media.Id, media.Type, media.Url, media.Filename, media.Size)).ToList() ?? new List<MediaDto>(),
                 senders.TryGetValue(message.SenderId, out var senderUser) ? new MessageSenderDto(senderUser.Id, senderUser.Username, senderUser.DisplayName, senderUser.Avatar) : new MessageSenderDto(message.SenderId, "unknown", "Unknown", null),
                 reactionsByMessage.TryGetValue(message.Id, out var mr) ? mr.Select(reaction => new SimpleReactionDto(reaction.UserId, reaction.Emoji)).ToList() : new List<SimpleReactionDto>(),
-                new List<ReadByDto>()
+                message.ReadByUsers.Select(id => new ReadByDto(id)).ToList()
             );
         }).ToList();
 

backend/src/Modules/Conversations/Application/Messages/Send/SendMessageCommandHandler.cs

@@ -1,8 +1,8 @@
+using Knot.Contracts.Conversations.Application.Abstractions;
+using Knot.Contracts.Conversations.Domain;
 using Knot.Contracts.Messaging.Application.Abstractions;
 using Knot.Contracts.Messaging.Domain;
 using Knot.Contracts.Settings.Application.Abstractions;
-using Knot.Contracts.Conversations.Application.Abstractions;
-using Knot.Contracts.Conversations.Domain;
 using Knot.Shared.Kernel;
 
 namespace Knot.Modules.Conversations.Application.Messages.Send;
@@ -192,6 +192,7 @@ public sealed class SendMessageCommandHandler : ICommandHandler<SendMessageComma
         var senderMember = chat.Members.First(m => m.UserId == request.SenderId);
         senderMember.UpdateReadCursor(message.Id, message.SequenceId);
         senderMember.UpdateDeliveredCursor(message.Id);
+        message.MarkAsRead(request.SenderId); // Отправитель всегда "прочитал" своё сообщение
 
         // 5. ���������
         _messageRepository.Add(message);

backend/src/Modules/Conversations/Infrastructure/SignalR/ChatHub.cs

@@ -1,26 +1,26 @@
 using System.Collections.Concurrent;
 using System.Security.Claims;
+using Knot.Contracts.Auth.Application.Abstractions;
+using Knot.Contracts.Auth.Domain;
+using Knot.Contracts.Conversations.Application.Abstractions;
+using Knot.Contracts.Conversations.Domain;
+using Knot.Contracts.Messaging.Application.Abstractions;
+using Knot.Contracts.Messaging.Domain;
+using Knot.Modules.Conversations.Application.DTOs;
+using Knot.Modules.Conversations.Application.Messages.Delete;
+using Knot.Modules.Conversations.Application.Messages.Edit;
+using Knot.Modules.Conversations.Application.Messages.Pin;
+using Knot.Modules.Conversations.Application.Messages.React;
+using Knot.Modules.Conversations.Application.Messages.Read;
+using Knot.Modules.Conversations.Application.Messages.Send;
+using Knot.Modules.Conversations.Application.Messages.Unpin;
+using Knot.Modules.Conversations.Application.Messages.Vote;
+using Knot.Shared.Kernel;
 using MediatR;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.SignalR;
-using Microsoft.Extensions.Logging;
-using Knot.Modules.Conversations.Application.Messages.Send;
-using Knot.Modules.Conversations.Application.Messages.Read;
-using Knot.Modules.Conversations.Application.Messages.Delete;
-using Knot.Modules.Conversations.Application.Messages.React;
-using Knot.Contracts.Conversations.Domain;
-using Knot.Shared.Kernel;
 using Microsoft.Extensions.Caching.Memory;
-using Knot.Contracts.Auth.Domain;
-using Knot.Contracts.Auth.Application.Abstractions;
-using Knot.Modules.Conversations.Application.Messages.Pin;
-using Knot.Modules.Conversations.Application.Messages.Unpin;
-using Knot.Modules.Conversations.Application.Messages.Vote;
-using Knot.Modules.Conversations.Application.Messages.Edit;
-using Knot.Modules.Conversations.Application.DTOs;
-using Knot.Contracts.Messaging.Application.Abstractions;
-using Knot.Contracts.Messaging.Domain;
-using Knot.Contracts.Conversations.Application.Abstractions;
+using Microsoft.Extensions.Logging;
 
 namespace Knot.Modules.Conversations.Infrastructure.SignalR;
 
@@ -158,6 +158,7 @@ public sealed class ChatHub : Hub
             await _sender.Send(command);
         }
 
+        // Отправляем событие всем в чате о том, что пользователь прочитал сообщения
         await Clients.Group(request.ChatId.ToString()).SendAsync("messages_read", new
         {
             ChatId = request.ChatId.ToString(),

backend/src/Modules/Conversations/Presentation/Endpoints/MessagesEndpoints.cs

@@ -19,9 +19,17 @@ public static class MessagesEndpoints
     {
         var group = app.MapGroup("api/messages").RequireAuthorization();
 
-        group.MapGet("chat/{chatId:guid}", async ([FromRoute] Guid chatId, [FromQuery] string? cursor, ISender sender, IUserContext userContext, CancellationToken ct) =>
+        group.MapGet("chat/{chatId:guid}", async (
+            [FromRoute] Guid chatId,
+            [FromQuery] string? cursor,
+            [FromQuery] long? afterSequenceId,
+            [FromQuery] long? pivot,
+            [FromQuery] int? limit,
+            ISender sender,
+            IUserContext userContext,
+            CancellationToken ct) =>
         {
-            var result = await sender.Send(new GetMessagesQuery(userContext.UserId, chatId, cursor), ct);
+            var result = await sender.Send(new GetMessagesQuery(userContext.UserId, chatId, cursor, pivot, afterSequenceId, limit), ct);
             return result.IsSuccess ? Results.Ok(result.Value) : Results.BadRequest(result.Error.Description);
         });
 

backend/src/Modules/Messaging/Domain/Message.cs

@@ -42,6 +42,10 @@ public abstract class Message : AggregateRoot<Guid>
     protected List<DeletedMessage> _deletedFor = new();
     public IReadOnlyCollection<DeletedMessage> DeletedFor => _deletedFor.AsReadOnly();
 
+    // ================== Прочитано ==================
+    protected List<Guid> _readByUsers = new();
+    public IReadOnlyCollection<Guid> ReadByUsers => _readByUsers.AsReadOnly();
+
     // ================== Инфраструктурный конструктор EF ==================
     protected Message() : base(Guid.Empty) { }
 
@@ -89,6 +93,16 @@ public abstract class Message : AggregateRoot<Guid>
             _deletedFor.Add(new DeletedMessage(Id, userId));
         }
     }
+
+    public void MarkAsRead(Guid userId)
+    {
+        if (!_readByUsers.Contains(userId))
+        {
+            _readByUsers.Add(userId);
+        }
+    }
+
+    public bool IsReadBy(Guid userId) => _readByUsers.Contains(userId);
 }
 
 

backend/src/Modules/Messaging/Infrastructure/Handlers/MessageSentDomainEventHandler.cs

@@ -84,7 +84,7 @@ public sealed class MessageSentDomainEventHandler : INotificationHandler<Message
                 size = m.Size
             }).ToList() ?? (object)Array.Empty<object>(),
             sender = senderObj,
-            readBy = new List<object>(),
+            readBy = message.ReadByUsers.Select(id => new { id }).ToList(),
             storyId = (message as StoryMessage)?.StoryId,
             storyMediaUrl = (message as StoryMessage)?.StoryMediaUrl,
             storyMediaType = (message as StoryMessage)?.StoryMediaType,

backend/src/Modules/Messaging/Infrastructure/Persistence/MessageRepository.cs

@@ -95,6 +95,20 @@ public sealed class MessageRepository : IMessageRepository
             .ToListAsync(cancellationToken);
     }
 
+    public async Task<List<Message>> GetChatMessagesAfterAsync(Guid chatId, long sequenceId, int limit, CancellationToken cancellationToken)
+    {
+        var builder = Builders<Message>.Filter;
+        var filter = builder.And(
+            builder.Eq(m => m.ChatId, chatId),
+            builder.Gt(m => m.SequenceId, sequenceId)
+        );
+
+        return await _messages.Find(filter)
+            .SortBy(m => m.SequenceId)
+            .Limit(limit)
+            .ToListAsync(cancellationToken);
+    }
+
     public async Task<List<Message>> GetChatMessagesAroundAsync(Guid chatId, long sequenceId, int limit, CancellationToken cancellationToken)
     {
         var builder = Builders<Message>.Filter;

client-web/src/core/infrastructure/i18n.ts

@@ -194,7 +194,8 @@ const translations = {
     clearChatConfirm: 'Очистить историю чата для себя? Собеседник сохранит свою историю.',
     clearHistory: 'Очистить историю',
     clearHistoryConfirm: 'Очистить историю?',
-    deleteChatConfirm: 'Удалить чат? Это действие нельзя отменить.',
+    deleteChatConfirm: 'Удалить чат? Это действие нельзя отменить. Чат будет удалён у всех участников.',
+    deleteGroupChatConfirm: 'Удалить чат? Это действие нельзя отменить. Чат будет удалён у всех участников.',
     pinChat: 'Закрепить чат',
     unpinChat: 'Открепить чат',
     chatCleared: 'Очищено',
@@ -574,7 +575,8 @@ const translations = {
     clearChatConfirm: 'Clear chat history for yourself? The other person will keep their history.',
     clearHistory: 'Clear history',
     clearHistoryConfirm: 'Clear history?',
-    deleteChatConfirm: 'Delete this chat? This action cannot be undone.',
+    deleteChatConfirm: 'Delete this chat? This action cannot be undone. The chat will be removed for all participants.',
+    deleteGroupChatConfirm: 'Delete this chat? This action cannot be undone. The chat will be removed for all participants.',
     pinChat: 'Pin chat',
     unpinChat: 'Unpin chat',
     chatCleared: 'Chat cleared',

client-web/src/core/presentation/layouts/GlobalNavBar.tsx

@@ -17,7 +17,7 @@ export default function GlobalNavBar({ activeTab, onTabChange }: GlobalNavBarPro
 
   return (
     <nav
-      className="lg:fixed lg:left-0 lg:top-0 lg:h-[100dvh] lg:w-20 w-full h-16 fixed bottom-0 left-0 bg-surface-container-low border-t lg:border-t-0 lg:border-r border-white/5 flex lg:flex-col flex-row items-center justify-around lg:justify-start lg:py-8 lg:gap-4 z-50 transition-all safe-area-bottom"
+      className="lg:fixed lg:left-0 lg:top-0 lg:h-[100dvh] lg:w-20 w-full h-16 fixed bottom-0 left-0 bg-surface-container-low border-t lg:border-t-0 lg:border-r border-white/5 flex lg:flex-col flex-row items-center justify-around lg:justify-start lg:pt-8 lg:pb-14 lg:gap-4 z-50 transition-all safe-area-bottom"
     >
       <div className="hidden lg:flex mb-10 flex-col items-center">
         <span className="text-2xl font-black text-primary tracking-tighter italic knot-logo-spin">Knot</span>
@@ -46,7 +46,7 @@ export default function GlobalNavBar({ activeTab, onTabChange }: GlobalNavBarPro
       </div>
 
       <div 
-        className="lg:mt-auto group cursor-pointer relative flex items-center justify-center px-4 lg:px-0"
+        className="lg:mt-auto lg:mb-4 group cursor-pointer relative flex items-center justify-center px-4 lg:px-0"
         onClick={() => onTabChange('settings')}
       >
         <div className="absolute -inset-1 bg-primary/20 rounded-2xl opacity-0 group-hover:opacity-100 blur transition-opacity" />

client-web/src/modules/chats/application/chatStore.ts

@@ -401,6 +401,7 @@ export const useChatStore = create<ChatState>((set, get) => ({
         if (m.sequenceId <= lastReadSequenceId) {
           const alreadyRead = m.readBy?.some((r) => r.userId === userId);
           if (alreadyRead) return m;
+          // Увеличиваем счётчик только если текущий пользователь читает чужие сообщения
           if (userId === currentUserId && m.senderId !== currentUserId) newlyReadCount++;
           return { ...m, readBy: [...(m.readBy || []), { userId }] };
         }
@@ -412,6 +413,7 @@ export const useChatStore = create<ChatState>((set, get) => ({
       const updatedChats = state.chats.map((chat) => {
         if (chat.id === chatId) {
           const updatedLastMessages = chat.messages?.map(updateMsg);
+          // Уменьшаем unreadCount только если текущий пользователь прочитал сообщения
           if (userId === currentUserId) {
             return { ...chat, messages: updatedLastMessages, unreadCount: Math.max(0, (chat.unreadCount || 0) - newlyReadCount) };
           }

client-web/src/modules/chats/presentation/ChatPage.tsx

@@ -65,6 +65,8 @@ export default function ChatPage() {
   const [activeTab, setActiveTab] = useState('chats');
   const { t } = useLang();
 
+  const activeChat = useChatStore((state) => state.activeChat);
+
   useEffect(() => {
     groupCallOpenRef.current = groupCallOpen;
     groupCallChatIdRef.current = groupCallChatId;
@@ -180,7 +182,12 @@ export default function ChatPage() {
     });
 
     socket.on('messages_read', (data: any) => {
-      markRead(data.chatId || data.ChatId, data.userId || data.UserId, data.lastReadSequenceId || data.LastReadSequenceId || 0);
+      const chatId = data.chatId || data.ChatId;
+      const userId = data.userId || data.UserId;
+      const lastReadSequenceId = data.lastReadSequenceId || data.LastReadSequenceId || 0;
+
+      // Обновляем стейт - добавляем userId в readBy для всех сообщений до lastReadSequenceId
+      markRead(chatId, userId, lastReadSequenceId);
     });
 
     socket.on('user_typing', (data: { chatId: string; userId: string }) => {
@@ -330,6 +337,16 @@ export default function ChatPage() {
     };
   }, [user?.id]);
 
+  // Join chat group when activeChat changes
+  useEffect(() => {
+    if (activeChat) {
+      const socket = getSocket();
+      if (socket) {
+        socket.emit('join_chat', activeChat);
+      }
+    }
+  }, [activeChat]);
+
   const handleStartCall = (targetUser: UserBasic, type: 'voice' | 'video') => {
     setCallTarget(targetUser);
     setCallType(type);
@@ -366,8 +383,6 @@ export default function ChatPage() {
     setGroupCallOpen(false);
   };
 
-  const activeChat = useChatStore((state) => state.activeChat);
-
   return (
     <motion.div
       initial={{ opacity: 0 }}

client-web/src/modules/chats/presentation/components/ChatListItem.tsx

@@ -78,7 +78,9 @@ function ChatListItem({ chat, isActive }: ChatListItemProps) {
   const isMine = !chat.isImporting && lastMessage?.senderId === user?.id;
 
   // Галочки прочтения
-  const isRead = !chat.isImporting && lastMessage?.readBy?.some((r) => r.userId !== user?.id);
+  // Для своих сообщений: проверено, есть ли в readBy другие пользователи (получатели)
+  // Для чужих сообщений: не показываем галочки
+  const isRead = !chat.isImporting && isMine && lastMessage?.readBy?.some((r) => r.userId !== user?.id);
 
   const timeStr = !chat.isImporting && lastMessage
     ? formatDistanceToNow(new Date(lastMessage.createdAt), { addSuffix: false, locale: lang === 'ru' ? ru : enUS })
@@ -188,8 +190,7 @@ function ChatListItem({ chat, isActive }: ChatListItemProps) {
       <button
         onClick={handleClick}
         onContextMenu={handleContextMenu}
-        className={`w-full flex items-center gap-4 px-4 py-3.5 transition-all duration-300 slide-on-ice text-left rounded-2xl mx-1 my-0.5 w-[calc(100%-8px)] ${
-          isActive ? 'bg-primary/10' : 'hover:bg-surface-container-highest/20'
+        className={`w-full flex items-center gap-4 px-4 py-3.5 transition-all duration-300 slide-on-ice text-left rounded-2xl mx-1 my-0.5 w-[calc(100%-8px)] ${isActive ? 'bg-primary/10' : 'hover:bg-surface-container-highest/20'
           }`}
       >
         {/* Аватар */}

client-web/src/modules/chats/presentation/components/ChatView.tsx

@@ -187,12 +187,31 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
   // Refs and logic for tracking session's first unread message to show the divider exactly once per load
   const sessionUnreadRef = useRef<{ chatId: string, msgId: string | null }>({ chatId: '', msgId: null });
 
-  if (activeChat && activeChat !== sessionUnreadRef.current.chatId && !isLoadingMessages) {
+  // Update sessionUnreadRef when chat changes OR when messages are marked as read
+  useEffect(() => {
+    if (!activeChat || isLoadingMessages) return;
+
+    // Reset on chat change
+    if (activeChat !== sessionUnreadRef.current.chatId) {
       const firstUnreadMsg = chatMessages.find(
         (m) => m.senderId !== user?.id && !m.readBy?.some((r) => r.userId === user?.id)
       );
       sessionUnreadRef.current = { chatId: activeChat, msgId: firstUnreadMsg ? firstUnreadMsg.id : null };
+    } else {
+      // Update if the first unread message was read (msgId no longer exists in unread list)
+      const firstUnreadMsg = chatMessages.find(
+        (m) => m.senderId !== user?.id && !m.readBy?.some((r) => r.userId === user?.id)
+      );
+      if (sessionUnreadRef.current.msgId && !firstUnreadMsg) {
+        // All messages are now read
+        sessionUnreadRef.current.msgId = null;
+      } else if (firstUnreadMsg && sessionUnreadRef.current.msgId !== firstUnreadMsg.id) {
+        // First unread changed (some messages were read)
+        sessionUnreadRef.current.msgId = firstUnreadMsg.id;
       }
+    }
+  }, [activeChat, chatMessages, user?.id, isLoadingMessages]);
+
   const firstUnreadId = activeChat === sessionUnreadRef.current.chatId ? sessionUnreadRef.current.msgId : null;
   const initialScrollChatId = useRef<string | null>(null);
 
@@ -573,6 +592,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
       {
         root: scrollContainerRef.current,
         threshold: 0.1,
+        rootMargin: '0px',
       }
     );
 
@@ -584,8 +604,27 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
       unreadElements.forEach((el: Element) => {
         const id = el.getAttribute('data-message-id');
         if (id && !sentReadIdsRef.current.has(id)) {
+          // Check if element is already visible
+          const rect = el.getBoundingClientRect();
+          const containerRect = scrollContainerRef.current!.getBoundingClientRect();
+          const isVisible = rect.top >= containerRect.top && rect.bottom <= containerRect.bottom;
+
+          if (isVisible) {
+            // Mark as read immediately without waiting for intersection
+            const seqId = parseInt(el.getAttribute('data-sequence-id') || '0', 10);
+            if (seqId > 0) {
+              socket.emit('read_messages', {
+                chatId: activeChat,
+                lastReadMessageId: id,
+                lastReadSequenceId: seqId,
+              });
+              useChatStore.getState().markRead(activeChat, user.id, seqId);
+              sentReadIdsRef.current.add(id);
+            }
+          } else {
             observer.observe(el);
           }
+        }
       });
     };
 
@@ -1377,11 +1416,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
         </>
       )}
 
-      {typingInChat.length > 0 && (
-        <div className="px-4 pb-1">
-          <TypingIndicator />
-        </div>
-      )}
+      {/* Typing indicator is already shown in the header, removed from here to prevent layout jumping */}
 
       {(() => {
         return (

client-web/src/modules/chats/presentation/components/MessageBubble.tsx

@@ -25,14 +25,13 @@ import {
   PhoneIncoming,
   PhoneOutgoing,
   BarChart2,
-  Music,
 } from 'lucide-react';
 import { useAuthStore } from '../../../auth/application/authStore';
 import { useChatStore } from '../../application/chatStore';
 import { getSocket } from '../../../../core/infrastructure/socket';
 import { useLang } from '../../../../core/infrastructure/i18n';
 import { extractWaveform, getMediaUrl, generateAvatarColor, getInitials } from '../../../../core/utils/utils';
-import { AUDIO_EXTENSIONS, type Message, type MediaItem, type Reaction, type ChatMember } from '../../../../core/domain/types';
+import type { Message, MediaItem, Reaction, ChatMember } from '../../../../core/domain/types';
 import ImageLightbox from '../../../../core/presentation/components/ui/ImageLightbox';
 import LinkPreview from './LinkPreview';
 import Avatar from '../../../../core/presentation/components/ui/Avatar';
@@ -290,7 +289,7 @@ function MessageBubble({
     };
   }, [showContext]);
 
-  if (message.isDeleted || message.isDeletedForUser) {
+  if (message.isDeleted) {
     return null;
   }
 
@@ -356,13 +355,11 @@ function MessageBubble({
     return false;
   };
 
-  const isAudioFile = (m: MediaItem) => m.type === 'audio' || AUDIO_EXTENSIONS.some(ext => m.filename?.toLowerCase().endsWith(ext));
-
   const hasImage = media.some((m) => m.type === 'image' || isMediaGif(m));
   const hasVoice = message.type === 'voice' || media.some((m) => m.type === 'voice');
-  const hasAudio = !hasVoice && (message.type === 'audio' || media.some(isAudioFile));
+  const hasAudio = !hasVoice && (message.type === 'audio' || media.some((m) => m.type === 'audio'));
   const hasVideo = media.some((m) => m.type === 'video' && !isMediaGif(m));
-  const hasFile = media.some((m) => m.type !== 'image' && m.type !== 'voice' && m.type !== 'video' && !isAudioFile(m) && !isMediaGif(m));
+  const hasFile = media.some((m) => m.type !== 'image' && m.type !== 'voice' && m.type !== 'video' && m.type !== 'audio' && !isMediaGif(m));
 
   const reactionGroups: Record<string, { count: number; users: string[]; isMine: boolean; avatars: { url?: string | null, initials: string, colorClass?: string }[] }> = {};
   (message.reactions || []).forEach((r) => {
@@ -491,7 +488,8 @@ function MessageBubble({
             onContextMenu={handleContextMenu}
             onDoubleClick={handleReply}
             title={t('reply') ? `${t('reply')} (Double Click)` : 'Double click to reply'}
-                className={`cursor-pointer max-w-full min-w-[60px] transition-all duration-500 overflow-hidden ${!needsFrame
+            className={`cursor-pointer max-w-full min-w-[60px] transition-all duration-500 overflow-hidden ${
+              !needsFrame
                 ? 'p-0 shadow-none border-none bg-transparent'
                 : isMine
                   ? 'bubble-sent px-4 py-3 hover:brightness-110'
@@ -502,7 +500,8 @@ function MessageBubble({
           {/* Reply */}
             {message.replyTo && (
             <div
-                    className={`mb-2 pl-3 py-2 cursor-pointer transition-all -mx-1 px-2 rounded-xl ${isMine ? 'bg-[#1a1a1a] border-l-[3px] border-l-primary hover:bg-[#202020]' : 'bg-white/5 border-l-[3px] border-l-primary hover:bg-white/10'
+              className={`mb-2 pl-3 py-2 cursor-pointer transition-all -mx-1 px-2 rounded-xl ${
+                isMine ? 'bg-[#1a1a1a] border-l-[3px] border-l-primary hover:bg-[#202020]' : 'bg-white/5 border-l-[3px] border-l-primary hover:bg-white/10'
               }`}
               onClick={(e) => {
                 e.stopPropagation();
@@ -563,7 +562,8 @@ function MessageBubble({
           {/* Story Reply Quote */}
           {message.storyId && (
             <div
-                    className={`mb-1.5 pl-2.5 py-0.5 border-l-[3px] transition-colors -mx-1 px-1 rounded-sm ${isMine ? 'border-l-white/80 hover:bg-white/10' : 'border-l-knot-500 hover:bg-knot-500/10'
+              className={`mb-1.5 pl-2.5 py-0.5 border-l-[3px] transition-colors -mx-1 px-1 rounded-sm ${
+                isMine ? 'border-l-white/80 hover:bg-white/10' : 'border-l-knot-500 hover:bg-knot-500/10'
               }`}
             >
               <p className={`text-[11px] font-bold uppercase tracking-wider mb-1 ${isMine ? 'text-white/80' : 'text-knot-500/80'}`}>
@@ -614,7 +614,8 @@ function MessageBubble({
                 ${isSingleGif ? 'max-w-[260px]' : ''}
                 overflow-hidden relative rounded-[1.25rem]
               `}>
-                      <div className={`grid gap-[2px] ${galleryMedia.length > 1 ? 'w-[80vw] sm:w-[380px] md:w-[450px]' : 'w-full'} ${galleryMedia.length === 1 ? 'grid-cols-1' : 'grid-cols-6'
+                <div className={`grid gap-[2px] ${galleryMedia.length > 1 ? 'w-[80vw] sm:w-[380px] md:w-[450px]' : 'w-full'} ${
+                  galleryMedia.length === 1 ? 'grid-cols-1' : 'grid-cols-6'
                 }`}>
                   {galleryMedia.map((m, idx) => {
                       const gif = isMediaGif(m);
@@ -764,7 +765,7 @@ function MessageBubble({
 
             {/* Аудио (mp3 файлы) */}
             {hasAudio && (() => {
-                  const audioMedia = media.find(isAudioFile);
+              const audioMedia = media.find((m) => m.type === 'audio');
               const formatSize = (bytes?: number | null) => {
                 if (!bytes) return "";
                 if (bytes < 1024) return bytes + " B";
@@ -854,7 +855,7 @@ function MessageBubble({
             {/* Файлы */}
             {hasFile &&
               media
-                    .filter((m) => m.type !== 'image' && m.type !== 'voice' && m.type !== 'video' && !isAudioFile(m) && m.type !== 'gif')
+                .filter((m) => m.type !== 'image' && m.type !== 'voice' && m.type !== 'video' && m.type !== 'audio' && m.type !== 'gif')
                 .map((m) => {
                   const formatSize = (bytes?: number | null) => {
                     if (!bytes) return "";
@@ -1067,7 +1068,8 @@ function MessageBubble({
                 <button
                   key={emoji}
                   onClick={(e) => { e.stopPropagation(); handleReaction(emoji); }}
-                  className={`flex items-center gap-2 px-2.5 py-1.5 rounded-[10px] transition-all border ${data.isMine
+                  className={`flex items-center gap-2 px-2.5 py-1.5 rounded-[10px] transition-all border ${
+                    data.isMine
                       ? 'bg-primary/20 border-primary text-white shadow-lg'
                       : 'bg-[#201F1F] border-white/5 text-zinc-300 hover:bg-[#2a2a2a]'
                   } shadow-md group/react`}

client-web/src/modules/chats/presentation/components/MessageInput.tsx

@@ -331,9 +331,7 @@ export default function MessageInput({ chatId }: MessageInputProps) {
     });
   };
 
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(e.target.files || []);
-    if (files.length > 0) {
+  const processFiles = useCallback((files: File[]) => {
     const { addNotification } = useNotificationStore.getState();
     const newAttachments: Attachment[] = [];
     
@@ -349,8 +347,15 @@ export default function MessageInput({ chatId }: MessageInputProps) {
         tooLarge = true;
         continue;
       }
+
+      const isVideo = file.type.startsWith('video/');
+      const isImage = file.type.startsWith('image/');
       const isAudio = file.type.startsWith('audio/') || AUDIO_EXTENSIONS.some(ext => file.name.toLowerCase().endsWith(ext));
-        newAttachments.push({ file, type: isAudio ? 'audio' : 'file' });
+
+      const type = isImage ? 'image' : isVideo ? 'video' : isAudio ? 'audio' : 'file';
+      const preview = isImage ? URL.createObjectURL(file) : undefined;
+
+      newAttachments.push({ file, type, preview });
     }
 
     if (tooLarge) addNotification('warning', t('fileTooLarge') || 'Some files are too large');
@@ -358,38 +363,38 @@ export default function MessageInput({ chatId }: MessageInputProps) {
     
     setAttachments(prev => [...prev, ...newAttachments]);
     inputRef.current?.focus();
-    }
+  }, [attachments, t]);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length > 0) processFiles(files);
     e.target.value = '';
     setShowAttachMenu(false);
   };
 
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = Array.from(e.target.files || []);
-    if (files.length > 0) {
-      const { addNotification } = useNotificationStore.getState();
-      const newAttachments: Attachment[] = [];
-      
-      let limitExceeded = false;
-
-      for (const file of files) {
-        if (attachments.length + newAttachments.length >= 20) {
-          limitExceeded = true;
-          break;
-        }
-        const isVideo = file.type.startsWith('video/');
-        const preview = file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined;
-        newAttachments.push({ file, preview, type: isVideo ? 'video' : 'image' });
-      }
-
-      if (limitExceeded) addNotification('warning', t('maxFilesLimit' as any) || 'Maximum 20 files');
-      
-      setAttachments(prev => [...prev, ...newAttachments]);
-      inputRef.current?.focus();
-    }
+    if (files.length > 0) processFiles(files);
     e.target.value = '';
     setShowAttachMenu(false);
   };
 
+  const handlePaste = (e: React.ClipboardEvent) => {
+    const items = Array.from(e.clipboardData.items);
+    const files = items
+      .filter(item => item.kind === 'file')
+      .map(item => item.getAsFile())
+      .filter((f): f is File => f !== null);
+
+    if (files.length > 0) {
+      processFiles(files);
+      // If we only pasted files, don't paste the filename/text representation in the textarea
+      if (items.every(item => item.kind === 'file')) {
+        e.preventDefault();
+      }
+    }
+  };
+
   // Запись голосового
   const startRecording = async () => {
     try {
@@ -569,41 +574,11 @@ export default function MessageInput({ chatId }: MessageInputProps) {
 
     if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
       const files = Array.from(e.dataTransfer.files);
-      const { addNotification } = useNotificationStore.getState();
-      const newAttachments: Attachment[] = [];
-      
-      let tooLarge = false;
-      let limitExceeded = false;
-
-      for (const file of files) {
-        if (attachments.length + newAttachments.length >= 20) {
-          limitExceeded = true;
-          break;
-        }
-        if (file.size > MAX_FILE_SIZE) {
-          tooLarge = true;
-          continue;
-        }
-
-        const isVideo = file.type.startsWith('video/');
-        const isImage = file.type.startsWith('image/');
-        const audioExts = ['.mp3', '.wav', '.ogg', '.m4a', '.aac', '.flac', '.wma', '.opus'];
-        const isAudio = file.type.startsWith('audio/') || audioExts.some(ext => file.name.toLowerCase().endsWith(ext));
-
-        const type = isImage ? 'image' : isVideo ? 'video' : isAudio ? 'audio' : 'file';
-        const preview = isImage ? URL.createObjectURL(file) : undefined;
-
-        newAttachments.push({ file, type, preview });
-      }
-
-      if (tooLarge) addNotification('warning', t('fileTooLarge') || 'Some files are too large');
-      if (limitExceeded) addNotification('warning', t('maxFilesLimit' as any) || 'Maximum 20 files');
-      
-      setAttachments(prev => [...prev, ...newAttachments]);
-      inputRef.current?.focus();
+      processFiles(files);
     }
   };
 
+
   const hasContent = text.trim() || attachments.length > 0;
 
   return (
@@ -856,6 +831,7 @@ export default function MessageInput({ chatId }: MessageInputProps) {
                 }}
                 onKeyDown={handleKeyDown}
                 onContextMenu={handleInputContextMenu}
+                onPaste={handlePaste}
                 rows={1}
                 className="w-full bg-transparent border-none focus:ring-0 text-[#efeff3] placeholder-on-surface-variant/30 text-[16px] leading-[1.3] resize-none max-h-[140px] custom-scrollbar outline-none py-1 px-0"
                 placeholder={attachments.length > 0 ? t('addCaption') : t('messagePlaceholder') || 'Сообщение...'}