From 63fc0e197b6a868fb7ac098182bdcda401a2edef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A5=D0=B0=D0=BB=D0=B8=D0=BC=D0=BE=D0=B2=20=D0=A0=D1=83?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=BC?= <rhalimov@elveesneotek.com>
Date: Mon, 20 Apr 2026 22:28:21 +0300
Subject: [PATCH 01/13] =?UTF-8?q?=D0=A3=D0=B2=D0=B5=D0=B4=D0=BE=D0=BC?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BE=D0=B1=20=D1=83=D0=B4?=
 =?UTF-8?q?=D0=B0=D0=BB=D0=B5=D0=BD=D0=B8=D0=B8=20=D1=87=D0=B0=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Chats/LeaveOrDelete/LeaveOrDeleteChat.cs  | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/backend/src/Modules/Conversations/Application/Chats/LeaveOrDelete/LeaveOrDeleteChat.cs b/backend/src/Modules/Conversations/Application/Chats/LeaveOrDelete/LeaveOrDeleteChat.cs
index 53d3acc..59e79a5 100644
--- a/backend/src/Modules/Conversations/Application/Chats/LeaveOrDelete/LeaveOrDeleteChat.cs
+++ b/backend/src/Modules/Conversations/Application/Chats/LeaveOrDelete/LeaveOrDeleteChat.cs
@@ -1,13 +1,14 @@
 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.Messaging.Application.Abstractions;
+using Knot.Contracts.Conversations.Domain;
+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 +20,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, 
+        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 +63,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);
@@ -67,7 +80,8 @@ internal sealed class LeaveOrDeleteChatCommandHandler : ICommandHandler<LeaveOrD
 
     private async Task DeleteChatMediaAndMessagesAsync(Guid chatId, CancellationToken ct)
     {
-        try 
+        try
+
         {
             // Get all messages directly from Mongo (not paged)
             var messages = await _messageRepository.GetChatMessagesAsync(chatId, int.MaxValue, 0, ct);

From 33ea792941a869165a563801e39d3379fa730aa0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A5=D0=B0=D0=BB=D0=B8=D0=BC=D0=BE=D0=B2=20=D0=A0=D1=83?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=BC?= <rhalimov@elveesneotek.com>
Date: Thu, 16 Apr 2026 23:36:12 +0300
Subject: [PATCH 02/13] =?UTF-8?q?=D0=94=D1=83=D0=B1=D0=BB=D0=B8=D0=BA?=
 =?UTF-8?q?=D0=B0=D1=82=20=D0=BF=D0=B5=D1=87=D0=B0=D1=82=D0=B8,=20=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B7=D0=BC=D0=B5=D1=82=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client-web/src/core/presentation/layouts/GlobalNavBar.tsx   | 4 ++--
 .../src/modules/chats/presentation/components/ChatView.tsx  | 6 +-----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/client-web/src/core/presentation/layouts/GlobalNavBar.tsx b/client-web/src/core/presentation/layouts/GlobalNavBar.tsx
index ad05e93..30128ce 100644
--- a/client-web/src/core/presentation/layouts/GlobalNavBar.tsx
+++ b/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" />
diff --git a/client-web/src/modules/chats/presentation/components/ChatView.tsx b/client-web/src/modules/chats/presentation/components/ChatView.tsx
index e8b90d5..dcb1991 100644
--- a/client-web/src/modules/chats/presentation/components/ChatView.tsx
+++ b/client-web/src/modules/chats/presentation/components/ChatView.tsx
@@ -1377,11 +1377,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 (

From c92289f07473b80f78fe4198fac1a4034060f3c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A5=D0=B0=D0=BB=D0=B8=D0=BC=D0=BE=D0=B2=20=D0=A0=D1=83?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=BC?= <rhalimov@elveesneotek.com>
Date: Thu, 16 Apr 2026 23:42:54 +0300
Subject: [PATCH 03/13] =?UTF-8?q?=D0=92=D1=81=D1=82=D0=B0=D0=B2=D0=BA?=
 =?UTF-8?q?=D0=B0=20=D0=B8=20=D0=BF=D0=B5=D1=80=D0=B5=D1=82=D0=B0=D1=81?=
 =?UTF-8?q?=D0=BA=D0=B8=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=B2=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BB=D0=B5=20=D0=B2=D0=B2=D0=BE=D0=B4=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../presentation/components/MessageInput.tsx  | 130 +++++++-----------
 1 file changed, 53 insertions(+), 77 deletions(-)

diff --git a/client-web/src/modules/chats/presentation/components/MessageInput.tsx b/client-web/src/modules/chats/presentation/components/MessageInput.tsx
index fd7786c..39e0be3 100644
--- a/client-web/src/modules/chats/presentation/components/MessageInput.tsx
+++ b/client-web/src/modules/chats/presentation/components/MessageInput.tsx
@@ -331,65 +331,70 @@ export default function MessageInput({ chatId }: MessageInputProps) {
     });
   };
 
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(e.target.files || []);
-    if (files.length > 0) {
-      const { addNotification } = useNotificationStore.getState();
-      const newAttachments: Attachment[] = [];
-      
-      let tooLarge = false;
-      let limitExceeded = false;
+  const processFiles = useCallback((files: File[]) => {
+    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 isAudio = file.type.startsWith('audio/') || AUDIO_EXTENSIONS.some(ext => file.name.toLowerCase().endsWith(ext));
-        newAttachments.push({ file, type: isAudio ? 'audio' : 'file' });
+    for (const file of files) {
+      if (attachments.length + newAttachments.length >= 20) {
+        limitExceeded = true;
+        break;
+      }
+      if (file.size > MAX_FILE_SIZE) {
+        tooLarge = true;
+        continue;
       }
 
-      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();
+      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));
+
+      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();
+  }, [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') || 'Сообщение...'}

From 2b51375fbf16bfcafe3fbcc30b50a2cc55edb311 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A5=D0=B0=D0=BB=D0=B8=D0=BC=D0=BE=D0=B2=20=D0=A0=D1=83?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=BC?= <rhalimov@elveesneotek.com>
Date: Mon, 20 Apr 2026 22:37:25 +0300
Subject: [PATCH 04/13] =?UTF-8?q?=D0=9E=D1=82=D1=81=D1=82=D1=83=D0=BF?=
 =?UTF-8?q?=D1=8B=20=D0=B2=20=D0=B1=D0=B0=D0=B1=D0=BB=D0=B0=D1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../presentation/components/MessageBubble.tsx | 213 +++++++++---------
 1 file changed, 111 insertions(+), 102 deletions(-)

diff --git a/client-web/src/modules/chats/presentation/components/MessageBubble.tsx b/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
index dc23f80..94e3e46 100644
--- a/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
+++ b/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
@@ -612,9 +612,9 @@ function MessageBubble({
                   const isSingleGif = galleryMedia.length === 1 && isMediaGif(galleryMedia[0]);
                   const hasReactions = Object.keys(reactionGroups).length > 0;
 
-                  return (
-                    <div className={`
-                ${needsFrame ? `-mx-[14px] ${message.forwardedFrom || message.replyTo || message.storyId ? 'mt-2' : '-mt-[8px]'} ${message.content ? 'mb-2' : hasReactions ? 'mb-1' : '-mb-[8px]'}` : ''}
+              return (
+              <div className={`
+                ${needsFrame ? `-mx-[14px] ${message.forwardedFrom || message.replyTo || message.storyId ? 'mt-2' : '-mt-[8px]'} ${message.content || hasVoice || hasAudio || hasFile || message.type === 'poll' ? 'mb-3' : hasReactions ? 'mb-1' : '-mb-[8px]'}` : ''}
                 ${isSingleGif ? 'max-w-[260px]' : ''}
                 overflow-hidden relative rounded-[1.25rem]
               `}>
@@ -703,6 +703,89 @@ function MessageBubble({
                           </span>
                         </div>
                       )}
+                    </span>
+                  </div>
+                )}
+              </div>
+              );
+            })()}
+
+            {/* Голосовое - Optimized Kinetic Layout */}
+            {hasVoice && (
+              <div className={`flex items-center gap-3 min-w-[200px] py-0.5 ${hasImage || hasVideo || message.forwardedFrom || message.replyTo || message.storyId ? 'mt-3' : ''}`}>
+                <audio
+                  ref={audioRef}
+                  src={media.find((m) => m.type === 'voice')?.url}
+                  preload="auto"
+                />
+                <button
+                  onClick={toggleAudio}
+                  className={`w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 ${isMine ? 'bg-white text-primary' : 'bg-primary text-white'} shadow-sm transition-all active:scale-95`}
+                >
+                  {isPlaying ? (
+                    <Pause size={16} fill="currentColor" />
+                  ) : (
+                    <Play size={16} fill="currentColor" className="ml-0.5" />
+                  )}
+                </button>
+                <div className="flex-1 min-w-0">
+                  <div
+                    className="flex items-center gap-[2px] h-6 cursor-pointer"
+                    onClick={(e) => {
+                      const audio = audioRef.current;
+                      if (!audio || !audio.duration) return;
+                      const rect = e.currentTarget.getBoundingClientRect();
+                      const pct = (e.clientX - rect.left) / rect.width;
+                      audio.currentTime = pct * audio.duration;
+                      setAudioProgress(pct * 100);
+                      if (!isPlaying) toggleAudio();
+                    }}
+                  >
+                    {(waveformBars || Array(28).fill(0.5)).map((val, i) => {
+                      const barHeight = Math.max(10, val * 85);
+                      const progress = audioProgress / 100;
+                      const barProgress = i / 28;
+                      const isActive = barProgress < progress;
+                      return (
+                        <div
+                          key={i}
+                          className={`flex-1 rounded-full transition-all duration-200 ${isActive
+                            ? isMine ? 'bg-[#000000] opacity-70' : 'bg-primary'
+                            : isMine ? 'bg-[#000000] opacity-20' : 'bg-white/30'
+                            }`}
+                          style={{ height: `${barHeight}%` }}
+                        />
+                      );
+                    })}
+                  </div>
+                  <div className="flex justify-end mt-0.5">
+                    <span className={`text-[10px] font-bold tabular-nums ${isMine ? 'text-[#0a0a0a]/60' : 'text-white/60'}`}>
+                      {isPlaying
+                        ? formatDuration(audioRef.current?.currentTime || 0)
+                        : formatDuration(audioDuration || message.media?.find((m) => m.type === 'voice')?.duration || 0)}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Аудио (mp3 файлы) */}
+            {hasAudio && (() => {
+              const audioMedia = media.find(isAudioFile);
+              const formatSize = (bytes?: number | null) => {
+                if (!bytes) return "";
+                if (bytes < 1024) return bytes + " B";
+                if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+                if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+                return (bytes / (1024 * 1024 * 1024)).toFixed(1) + " GB";
+              };
+              
+              return (
+                <div className={`min-w-[220px] ${hasImage || hasVideo || hasVoice || message.forwardedFrom || message.replyTo || message.storyId ? 'mt-3' : ''}`}>
+                  {audioMedia?.filename && (
+                    <div className="flex items-center gap-2 mb-2 min-w-0">
+                      <Volume2 size={14} className={isMine ? 'text-[#0a0a0a]/60' : 'text-zinc-400'} />
+                      <span className={`text-[11px] font-bold truncate ${isMine ? 'text-[#0a0a0a]/80' : 'text-zinc-200'}`}>{audioMedia.filename}</span>
                     </div>
                   );
                 })()}
@@ -778,78 +861,18 @@ function MessageBubble({
                   };
 
                   return (
-                    <div className="min-w-[220px]">
-                      {audioMedia?.filename && (
-                        <div className="flex items-center gap-2 mb-2 min-w-0">
-                          <Volume2 size={14} className={isMine ? 'text-[#0a0a0a]/60' : 'text-zinc-400'} />
-                          <span className={`text-[11px] font-bold truncate ${isMine ? 'text-[#0a0a0a]/80' : 'text-zinc-200'}`}>{audioMedia.filename}</span>
-                        </div>
-                      )}
-                      <div className="flex items-center gap-3">
-                        <audio
-                          ref={audioRef}
-                          src={getMediaUrl(audioMedia?.url)}
-                          preload="auto"
-                        />
-                        <button
-                          onClick={toggleAudio}
-                          className={`w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 ${isMine ? 'bg-[#0a0a0a]/10 hover:bg-[#0a0a0a]/20 text-[#0a0a0a]' : 'bg-primary text-white shadow-lg'} transition-all active:scale-95`}
-                        >
-                          {isPlaying ? (
-                            <Pause size={16} fill="currentColor" />
-                          ) : (
-                            <Play size={16} fill="currentColor" className="ml-0.5" />
-                          )}
-                        </button>
-                        <div className="flex-1 min-w-0">
-                          <div className="flex items-center gap-[2px] h-6 cursor-pointer"
-                            onClick={(e) => {
-                              const audio = audioRef.current;
-                              if (!audio || !audio.duration) return;
-                              const rect = e.currentTarget.getBoundingClientRect();
-                              const pct = (e.clientX - rect.left) / rect.width;
-                              audio.currentTime = pct * audio.duration;
-                              setAudioProgress(pct * 100);
-                            }}>
-                            {Array.from({ length: 28 }).map((_, i) => {
-                              const barHeight = [40, 65, 35, 80, 50, 90, 45, 70, 55, 85, 30, 75, 60, 95, 40, 80, 50, 70, 35, 90, 55, 65, 45, 85, 60, 75, 50, 40][i] || 50;
-                              const progress = audioProgress / 100;
-                              const barProgress = i / 28;
-                              const isActive = barProgress < progress;
-                              return (
-                                <div
-                                  key={i}
-                                  className={`flex-1 rounded-full transition-all duration-150 ${isActive
-                                    ? isMine ? 'bg-[#0a0a0a]/70' : 'bg-primary'
-                                    : isMine ? 'bg-[#0a0a0a]/10' : 'bg-white/20'
-                                    }`}
-                                  style={{ height: `${barHeight}%` }}
-                                />
-                              );
-                            })}
-                          </div>
-                          <div className="flex justify-between items-center mt-0.5">
-                            <span className={`text-[10px] font-bold tabular-nums ${isMine ? 'text-[#0a0a0a]/60' : 'text-zinc-500'}`}>
-                              {isPlaying
-                                ? formatDuration(audioRef.current?.currentTime || 0)
-                                : (typeof audioMedia?.duration === 'number'
-                                  ? formatDuration(audioMedia.duration)
-                                  : (audioMedia?.duration || formatDuration(audioDuration || 0)))}
-                            </span>
-                            <div className="flex items-center gap-2">
-                              <span className={`text-[10px] font-black uppercase tracking-tighter ${isMine ? 'text-[#0a0a0a]/40' : 'text-zinc-500'}`}>{formatSize(audioMedia?.size)}</span>
-                              <a
-                                href={getMediaUrl(audioMedia?.url)}
-                                download={audioMedia?.filename || 'audio'}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className={`flex items-center justify-center p-1 rounded-md transition-all ${isMine ? 'hover:bg-[#0a0a0a]/10 text-[#0a0a0a]/40 hover:text-[#0a0a0a]' : 'hover:bg-white/10 text-zinc-500 hover:text-white'}`}
-                              >
-                                <Download size={12} />
-                              </a>
-                            </div>
-                          </div>
-                        </div>
+                    <a
+                      key={m.id}
+                      href={getMediaUrl(m.url)}
+                      download={m.filename || 'file'}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={`flex items-center gap-3 p-3 rounded-2xl ${isMine ? 'bg-[#0a0a0a]/5 hover:bg-[#0a0a0a]/10' : 'bg-zinc-900/50 hover:bg-zinc-800/80 border border-white/5'
+                        } transition-all mb-1 group/file ${hasImage || hasVideo || hasVoice || hasAudio || message.forwardedFrom || message.replyTo || message.storyId ? 'mt-3' : ''}`}
+                    >
+                      <div className={`w-11 h-11 rounded-xl flex items-center justify-center ${isMine ? 'bg-[#0a0a0a]/10' : 'bg-primary/20'
+                        } group-hover/file:scale-110 transition-transform`}>
+                        <FileText size={22} className={isMine ? 'text-[#0a0a0a]' : 'text-primary'} />
                       </div>
                     </div>
                   );
@@ -1029,33 +1052,19 @@ function MessageBubble({
                   </div>
                 )}
 
-                {/* Текст */}
-                {message.content && message.type !== 'poll' && (() => {
-                  const onlyEmojiRegex = /^[\p{Extended_Pictographic}\s]+$/u;
-                  const isOnlyEmojis = onlyEmojiRegex.test(message.content) && message.content.length <= 15;
-                  return (
-                    <div className="flex items-end gap-2 text-sm w-full">
-                      <div className="flex-1 min-w-0 w-full">
-                        <p className={`whitespace-pre-wrap break-words leading-relaxed w-full ${isOnlyEmojis ? 'text-5xl my-1' : ''} ${isMine ? 'text-[#0a0a0a] font-normal' : 'text-zinc-200'}`}>
-                          {renderFormattedText(message.content)}
-                        </p>
-                        {firstUrl && !hasImage && !hasVideo && !hasFile && (
-                          <div className="w-full mt-1 mb-1 relative overflow-hidden">
-                            <LinkPreview url={firstUrl} />
-                          </div>
-                        )}
-                      </div>
-                      <span className={`text-[10px] font-bold flex-shrink-0 flex items-center gap-0.5 self-end float-right leading-none ${isOnlyEmojis ? '-mb-1' : 'mb-0.5'} ${isMine ? 'text-[#0a0a0a]/50' : 'text-on-surface-variant/40'}`}>
-                        {message.isEdited && <span className="mr-0.5">{t('edited')}</span>}
-                        {message.scheduledAt && <span className="material-symbols-outlined text-[12px] text-amber-400 mr-0.5">schedule</span>}
-                        {isPinned && <Pin size={10} className={`rotate-45 ${isMine ? 'text-[#0a0a0a]/60 fill-[#0a0a0a]/20' : 'text-primary fill-primary/20'} mr-0.5`} />}
-                        {timeStr}
-                        {isMine && !message.scheduledAt && (
-                          <span className={`material-symbols-outlined text-[14px] ${isRead ? 'text-[#0a0a0a]/80 fill-1' : 'text-[#0a0a0a]/40'}`} style={{ fontVariationSettings: `'FILL' ${isRead ? 1 : 0}` }}>
-                            {isRead ? 'done_all' : 'done'}
-                          </span>
-                        )}
-                      </span>
+            {/* Текст */}
+            {message.content && message.type !== 'poll' && (() => {
+              const onlyEmojiRegex = /^[\p{Extended_Pictographic}\s]+$/u;
+              const isOnlyEmojis = onlyEmojiRegex.test(message.content) && message.content.length <= 15;
+              return (
+              <div className={`flex items-end gap-2 text-sm w-full ${hasImage || hasVideo || hasVoice || hasAudio || hasFile || message.forwardedFrom || message.replyTo || message.storyId ? 'mt-3' : ''}`}>
+                <div className="flex-1 min-w-0 w-full">
+                  <p className={`whitespace-pre-wrap break-words leading-relaxed w-full ${isOnlyEmojis ? 'text-5xl my-1' : ''} ${isMine ? 'text-[#0a0a0a] font-normal' : 'text-zinc-200'}`}>
+                    {renderFormattedText(message.content)}
+                  </p>
+                  {firstUrl && !hasImage && !hasVideo && !hasFile && (
+                    <div className="w-full mt-1 mb-1 relative overflow-hidden">
+                      <LinkPreview url={firstUrl} />
                     </div>
                   );
                 })()}

From 72325f48e561b9223b88d2f0c106cbff48c693e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A5=D0=B0=D0=BB=D0=B8=D0=BC=D0=BE=D0=B2=20=D0=A0=D1=83?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=BC?= <rhalimov@elveesneotek.com>
Date: Thu, 16 Apr 2026 23:54:19 +0300
Subject: [PATCH 05/13] =?UTF-8?q?=D0=A3=D0=B1=D1=80=D0=B0=D0=BB=20=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=B0=D1=82=D0=B0=D1=80=D1=8B=20=D0=B8=20=D0=B8=D0=BC?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D0=B2=D0=BD=D1=83=D1=82=D1=80=D0=B8=20?=
 =?UTF-8?q?=D1=87=D0=B0=D1=82=D0=B0=20=D0=BB=D0=B8=D1=87=D0=BD=D1=8B=D1=85?=
 =?UTF-8?q?=20=D1=87=D0=B0=D1=82=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/chats/presentation/components/MessageBubble.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client-web/src/modules/chats/presentation/components/MessageBubble.tsx b/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
index 94e3e46..86fed6d 100644
--- a/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
+++ b/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
@@ -459,7 +459,7 @@ function MessageBubble({
           </div>
         )}
 
-        {!isMine && (
+        {!isMine && activeChat?.type !== 'personal' && activeChat?.type !== 'favorites' && (
           <div className="w-8 flex-shrink-0 mr-2 self-end">
             {showAvatar ? (
               <button onClick={() => onViewProfile?.(message.senderId)}>
@@ -476,7 +476,7 @@ function MessageBubble({
         )}
 
         <div className={`max-[500px]:max-w-[85%] max-w-[75%] lg:max-w-[65%] min-w-0 ${isMine ? 'items-end' : 'items-start'} flex flex-col`}>
-          {!isMine && showAvatar && (
+          {!isMine && showAvatar && activeChat?.type !== 'personal' && activeChat?.type !== 'favorites' && (
             <button
               className="text-xs font-medium text-knot-400 ml-3 mb-0.5 hover:underline"
               onClick={() => onViewProfile?.(message.senderId)}
@@ -1096,7 +1096,7 @@ function MessageBubble({
           )}
         </div>
 
-        {isMine && (
+        {isMine && activeChat?.type !== 'personal' && activeChat?.type !== 'favorites' && (
           <div className="w-8 flex-shrink-0 ml-2 self-end">
             {showAvatar ? (
               <button onClick={() => onViewProfile?.(message.senderId)}>

From 7eea8ff6d197c14fe10dacbd63375dc45e24b5e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A5=D0=B0=D0=BB=D0=B8=D0=BC=D0=BE=D0=B2=20=D0=A0=D1=83?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=BC?= <rhalimov@elveesneotek.com>
Date: Mon, 20 Apr 2026 22:48:25 +0300
Subject: [PATCH 06/13] =?UTF-8?q?=D0=9F=D1=80=D0=B0=D0=B2=D0=BA=D0=B0=20?=
 =?UTF-8?q?=D1=83=D0=B2=D0=B5=D0=B4=D0=BE=D0=BC=D0=BB=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client-web/src/core/infrastructure/i18n.ts    |   4 +-
 .../presentation/components/ChatListItem.tsx  |   6 +-
 .../presentation/components/ChatView.tsx      | 118 +++++++++---------
 3 files changed, 67 insertions(+), 61 deletions(-)

diff --git a/client-web/src/core/infrastructure/i18n.ts b/client-web/src/core/infrastructure/i18n.ts
index 547d5d3..9143940 100644
--- a/client-web/src/core/infrastructure/i18n.ts
+++ b/client-web/src/core/infrastructure/i18n.ts
@@ -194,7 +194,8 @@ const translations = {
     clearChatConfirm: 'Очистить историю чата для себя? Собеседник сохранит свою историю.',
     clearHistory: 'Очистить историю',
     clearHistoryConfirm: 'Очистить историю?',
-    deleteChatConfirm: 'Удалить чат? Это действие нельзя отменить.',
+    deleteChatConfirm: 'Удалить чат? Это действие нельзя отменить. Чат будет удалён у всех участников.',
+    deleteGroupChatConfirm: 'Удалить чат? Это действие нельзя отменить. Чат будет удалён у всех участников.',
     pinChat: 'Закрепить чат',
     unpinChat: 'Открепить чат',
     chatCleared: 'Очищено',
@@ -575,6 +576,7 @@ const translations = {
     clearHistory: 'Clear history',
     clearHistoryConfirm: 'Clear history?',
     deleteChatConfirm: 'Delete this chat? This action cannot be undone.',
+    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',
diff --git a/client-web/src/modules/chats/presentation/components/ChatListItem.tsx b/client-web/src/modules/chats/presentation/components/ChatListItem.tsx
index 93d35bc..6bcfcca 100644
--- a/client-web/src/modules/chats/presentation/components/ChatListItem.tsx
+++ b/client-web/src/modules/chats/presentation/components/ChatListItem.tsx
@@ -283,7 +283,11 @@ function ChatListItem({ chat, isActive }: ChatListItemProps) {
 
       <ConfirmModal
         open={showDeleteConfirm}
-        message={isFavorites ? t('clearHistoryConfirm') : t('deleteChatConfirm')}
+        message={
+          isFavorites ? t('clearHistoryConfirm') :
+            chat.type === 'group' ? t('deleteGroupChatConfirm') :
+              t('deleteChatConfirm')
+        }
         onConfirm={confirmDelete}
         onCancel={() => setShowDeleteConfirm(false)}
       />
diff --git a/client-web/src/modules/chats/presentation/components/ChatView.tsx b/client-web/src/modules/chats/presentation/components/ChatView.tsx
index dcb1991..ae66ab1 100644
--- a/client-web/src/modules/chats/presentation/components/ChatView.tsx
+++ b/client-web/src/modules/chats/presentation/components/ChatView.tsx
@@ -98,13 +98,13 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
     NotificationStore.useNotificationStore.getState().addNotification('info', (t as any)('searchingHistory') || 'Searching message in history...');
 
     const chatStore = useChatStore.getState();
-    
+
     if (sequenceId !== undefined) {
       await chatStore.jumpToMessage(activeChat, sequenceId);
       // Wait a bit for React to render
       setTimeout(() => {
         if (!tryScroll()) {
-           NotificationStore.useNotificationStore.getState().addNotification('warning', (t as any)('messageNotFound') || 'Message not found');
+          NotificationStore.useNotificationStore.getState().addNotification('warning', (t as any)('messageNotFound') || 'Message not found');
         }
       }, 300);
     } else {
@@ -137,25 +137,25 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
 
   useEffect(() => {
     if (!chat?.isImporting || !chat?.importJobId) {
-        setImportStatus(null);
-        return;
+      setImportStatus(null);
+      return;
     }
 
     const poll = async () => {
-        try {
-            const data = await httpClient.request<any>(`/import/telegram/status/${chat.importJobId}`);
-            setImportStatus({ processed: data.processedMessages, total: data.totalMessages, status: data.status });
-            if (data.status === 'Completed' || data.status === 'Failed') {
-                setImportStatus(null);
-                loadChats();
-            }
-        } catch (e: any) {
-            if (e.status === 404) {
-                console.warn('Import job not found');
-            } else {
-                console.error('Failed to poll status', e);
-            }
+      try {
+        const data = await httpClient.request<any>(`/import/telegram/status/${chat.importJobId}`);
+        setImportStatus({ processed: data.processedMessages, total: data.totalMessages, status: data.status });
+        if (data.status === 'Completed' || data.status === 'Failed') {
+          setImportStatus(null);
+          loadChats();
         }
+      } catch (e: any) {
+        if (e.status === 404) {
+          console.warn('Import job not found');
+        } else {
+          console.error('Failed to poll status', e);
+        }
+      }
     };
 
     poll();
@@ -270,19 +270,19 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
   const saveScrollPosition = useCallback((targetChatId?: string) => {
     const container = scrollContainerRef.current;
     const chatId = targetChatId || activeChat;
-    
+
     if (!container || !chatId || !scrollReady || isInitializingRef.current || isScrollingToBottomRef.current) return;
 
     // Проверка: сообщения в стейте должны быть от целевого чата
     if (chatMessages.length > 0 && chatMessages[0].chatId !== chatId) return;
-    
+
     const isAtBottomNow = container.scrollHeight - container.scrollTop - container.clientHeight < 40;
     isAtBottomRef.current = isAtBottomNow;
-    
+
     if (isAtBottomNow) {
-       localStorage.setItem(`chat_at_bottom_${chatId}`, 'true');
-       localStorage.removeItem(`chat_anchor_${chatId}`);
-       return;
+      localStorage.setItem(`chat_at_bottom_${chatId}`, 'true');
+      localStorage.removeItem(`chat_anchor_${chatId}`);
+      return;
     }
 
     const messageElements = container.querySelectorAll('[data-message-id]');
@@ -304,8 +304,8 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
     }
 
     if (anchor && anchor.id) {
-       localStorage.setItem(`chat_anchor_${chatId}`, JSON.stringify(anchor));
-       localStorage.removeItem(`chat_at_bottom_${chatId}`);
+      localStorage.setItem(`chat_anchor_${chatId}`, JSON.stringify(anchor));
+      localStorage.removeItem(`chat_at_bottom_${chatId}`);
     }
   }, [activeChat, scrollReady, chatMessages]);
 
@@ -313,7 +313,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
   const restoreScrollPosition = useCallback(() => {
     const container = scrollContainerRef.current;
     if (!container || !activeChat) return false;
-    
+
     if (chatMessages.length > 0 && chatMessages[0].chatId !== activeChat) return false;
     if (chatMessages.length === 0) return true;
 
@@ -330,16 +330,16 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
       try {
         const { id, offset } = JSON.parse(saved);
         let el = container.querySelector(`[data-message-id="${id}"]`) as HTMLElement;
-        
+
         // Поиск ближайшего, если точное сообщение еще не загружено
         if (!el) {
-           const msgIndex = chatMessages.findIndex(m => m.id === id);
-           if (msgIndex !== -1) {
-              for (let i = msgIndex; i < chatMessages.length; i++) {
-                 const nextEl = container.querySelector(`[data-message-id="${chatMessages[i].id}"]`) as HTMLElement;
-                 if (nextEl) { el = nextEl; break; }
-              }
-           }
+          const msgIndex = chatMessages.findIndex(m => m.id === id);
+          if (msgIndex !== -1) {
+            for (let i = msgIndex; i < chatMessages.length; i++) {
+              const nextEl = container.querySelector(`[data-message-id="${chatMessages[i].id}"]`) as HTMLElement;
+              if (nextEl) { el = nextEl; break; }
+            }
+          }
         }
 
         if (el) {
@@ -368,7 +368,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
   useEffect(() => {
     if (isLoadingMessages || !scrollContainerRef.current || !activeChat) return;
     const container = scrollContainerRef.current;
-    
+
     const observer = new ResizeObserver(() => {
       if (isInitializingRef.current) return;
 
@@ -405,18 +405,18 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
 
       // Сохраняем позицию старого чата
       if (prevChatIdRef.current && scrollContainerRef.current && scrollReady) {
-          saveScrollPosition(prevChatIdRef.current);
+        saveScrollPosition(prevChatIdRef.current);
       }
-      
+
       setScrollReady(false);
       prevChatIdRef.current = activeChat;
-      
+
       if (scrollContainerRef.current) {
-          scrollContainerRef.current.scrollTop = 0;
+        scrollContainerRef.current.scrollTop = 0;
       }
 
       const timer = setTimeout(() => {
-          isInitializingRef.current = false;
+        isInitializingRef.current = false;
       }, 600);
 
       return () => clearTimeout(timer);
@@ -443,7 +443,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
 
       if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
       scrollTimeoutRef.current = setTimeout(() => saveScrollPosition(), 150);
-      
+
       const st = container.scrollTop;
       const isScrollingUp = st < lastScrollTopRef.current;
       const stChanged = st !== lastScrollTopRef.current;
@@ -473,7 +473,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
 
       const containerRect = container.getBoundingClientRect();
       const messageElements = container.querySelectorAll('[data-message-id]');
-      
+
       let currentTopMsgId = null;
       for (const el of messageElements) {
         const rect = el.getBoundingClientRect();
@@ -506,15 +506,15 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
         // Принудительный сброс режима (Второй Клик)
         localStorage.setItem(`chat_at_bottom_${activeChat}`, 'true');
         localStorage.removeItem(`chat_anchor_${activeChat}`);
-        
+
         isScrollingToBottomRef.current = true;
         if (scrollContainerRef.current) {
-            scrollContainerRef.current.scrollTo({
-                top: scrollContainerRef.current.scrollHeight,
-                behavior: 'smooth'
-            });
+          scrollContainerRef.current.scrollTo({
+            top: scrollContainerRef.current.scrollHeight,
+            behavior: 'smooth'
+          });
         }
-        
+
         setTimeout(() => {
           isScrollingToBottomRef.current = false;
         }, 1000);
@@ -646,7 +646,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
       <section className="flex-1 h-full flex flex-col items-center justify-center bg-[#010101] relative overflow-hidden">
         {/* Background Knot Texture */}
         <div className="absolute inset-0 opacity-[0.04] pointer-events-none flex items-center justify-center">
-            <span className="material-symbols-outlined text-white text-[500px] select-none">cloud_download</span>
+          <span className="material-symbols-outlined text-white text-[500px] select-none">cloud_download</span>
         </div>
 
         {/* Chat Empty State View */}
@@ -1060,7 +1060,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
                           setShowTopMenu(false);
                           if (activeChat) {
                             setConfirmAction({
-                              message: t('deleteChatConfirm'),
+                              message: chat.type === 'group' ? t('deleteGroupChatConfirm') : t('deleteChatConfirm'),
                               action: async () => {
                                 try {
                                   await ChatApi.deleteChat(activeChat);
@@ -1152,16 +1152,16 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
             <div className="space-y-4">
               <div className="flex items-center justify-between mb-2 px-1">
                 <span className="text-xs font-black uppercase tracking-widest text-primary">
-                  {importStatus?.status === 'Processing' ? 'Обработка' : 
-                   importStatus?.status === 'Queued' ? 'В очереди' : 'Загрузка'}
+                  {importStatus?.status === 'Processing' ? 'Обработка' :
+                    importStatus?.status === 'Queued' ? 'В очереди' : 'Загрузка'}
                 </span>
                 <span className="text-xs font-black text-on-surface tabular-nums">
                   {importStatus?.processed || 0} / {importStatus?.total || 0}
                 </span>
               </div>
-              
+
               <div className="h-3 w-full bg-surface-container-highest rounded-full overflow-hidden border border-outline/10 p-0.5">
-                <motion.div 
+                <motion.div
                   initial={{ width: 0 }}
                   animate={{ width: `${Math.min(100, Math.round(((importStatus?.processed || 0) / (importStatus?.total || 1)) * 100))}%` }}
                   transition={{ type: 'spring', damping: 20 }}
@@ -1199,9 +1199,9 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
               {chatPinnedMessages.length > 1 && (
                 <div className="absolute left-1 top-1.5 bottom-1.5 w-0.5 rounded-full bg-white/5 flex flex-col gap-0.5 overflow-hidden">
                   {chatPinnedMessages.map((_, idx) => (
-                    <div 
-                      key={idx} 
-                      className={`flex-1 transition-colors duration-300 ${idx === pinnedIndex % chatPinnedMessages.length ? 'bg-primary' : 'bg-primary/20'}`} 
+                    <div
+                      key={idx}
+                      className={`flex-1 transition-colors duration-300 ${idx === pinnedIndex % chatPinnedMessages.length ? 'bg-primary' : 'bg-primary/20'}`}
                     />
                   ))}
                 </div>
@@ -1226,8 +1226,8 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
                     {t('pinnedMessage')} {chatPinnedMessages.length > 1 ? `#${(pinnedIndex % chatPinnedMessages.length) + 1}` : ''}
                   </p>
                   <p className="text-sm text-zinc-300 truncate font-medium">
-                    {chatPinnedMessages[pinnedIndex % chatPinnedMessages.length]?.content || 
-                     (chatPinnedMessages[pinnedIndex % chatPinnedMessages.length]?.media?.length > 0 ? t('media') : '...')}
+                    {chatPinnedMessages[pinnedIndex % chatPinnedMessages.length]?.content ||
+                      (chatPinnedMessages[pinnedIndex % chatPinnedMessages.length]?.media?.length > 0 ? t('media') : '...')}
                   </p>
                 </div>
               </button>

From 9bfc5555bc601c68450b9a939462545d41e2ee17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A5=D0=B0=D0=BB=D0=B8=D0=BC=D0=BE=D0=B2=20=D0=A0=D1=83?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=BC?= <rhalimov@elveesneotek.com>
Date: Mon, 20 Apr 2026 22:58:23 +0300
Subject: [PATCH 07/13] =?UTF-8?q?=D0=9F=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client-web/src/core/infrastructure/i18n.ts                  | 2 +-
 .../modules/chats/presentation/components/ChatListItem.tsx  | 6 +-----
 .../src/modules/chats/presentation/components/ChatView.tsx  | 2 +-
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/client-web/src/core/infrastructure/i18n.ts b/client-web/src/core/infrastructure/i18n.ts
index 9143940..51982ca 100644
--- a/client-web/src/core/infrastructure/i18n.ts
+++ b/client-web/src/core/infrastructure/i18n.ts
@@ -575,7 +575,7 @@ 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',
diff --git a/client-web/src/modules/chats/presentation/components/ChatListItem.tsx b/client-web/src/modules/chats/presentation/components/ChatListItem.tsx
index 6bcfcca..93d35bc 100644
--- a/client-web/src/modules/chats/presentation/components/ChatListItem.tsx
+++ b/client-web/src/modules/chats/presentation/components/ChatListItem.tsx
@@ -283,11 +283,7 @@ function ChatListItem({ chat, isActive }: ChatListItemProps) {
 
       <ConfirmModal
         open={showDeleteConfirm}
-        message={
-          isFavorites ? t('clearHistoryConfirm') :
-            chat.type === 'group' ? t('deleteGroupChatConfirm') :
-              t('deleteChatConfirm')
-        }
+        message={isFavorites ? t('clearHistoryConfirm') : t('deleteChatConfirm')}
         onConfirm={confirmDelete}
         onCancel={() => setShowDeleteConfirm(false)}
       />
diff --git a/client-web/src/modules/chats/presentation/components/ChatView.tsx b/client-web/src/modules/chats/presentation/components/ChatView.tsx
index ae66ab1..861d295 100644
--- a/client-web/src/modules/chats/presentation/components/ChatView.tsx
+++ b/client-web/src/modules/chats/presentation/components/ChatView.tsx
@@ -1060,7 +1060,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
                           setShowTopMenu(false);
                           if (activeChat) {
                             setConfirmAction({
-                              message: chat.type === 'group' ? t('deleteGroupChatConfirm') : t('deleteChatConfirm'),
+                              message: t('deleteChatConfirm'),
                               action: async () => {
                                 try {
                                   await ChatApi.deleteChat(activeChat);

From a5d40f28c8db4750da93dfce88aa2da66b802602 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A5=D0=B0=D0=BB=D0=B8=D0=BC=D0=BE=D0=B2=20=D0=A0=D1=83?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=BC?= <rhalimov@elveesneotek.com>
Date: Mon, 20 Apr 2026 23:00:30 +0300
Subject: [PATCH 08/13] Fix MessageBubble.tsx JSX syntax errors

---
 .../presentation/components/MessageBubble.tsx | 905 +++++++++---------
 1 file changed, 447 insertions(+), 458 deletions(-)

diff --git a/client-web/src/modules/chats/presentation/components/MessageBubble.tsx b/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
index 86fed6d..7ba4ba9 100644
--- a/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
+++ b/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';
@@ -79,11 +78,7 @@ function MessageBubble({
   const [quotedText, setQuotedText] = useState<string | null>(null);
 
   // Прочитано
-  // Для своих сообщений: проверено, есть ли в readBy другие пользователи (получатели)
-  // Для чужих сообщений: проверено, есть ли в readBy текущий пользователь
-  const isRead = isMine
-    ? message.readBy?.some((r) => r.userId !== user?.id)  // Кто-то кроме меня прочитал
-    : message.readBy?.some((r) => r.userId === user?.id); // Я прочитал
+  const isRead = message.readBy?.some((r) => r.userId !== user?.id);
 
   const timeStr = new Date(message.createdAt).toLocaleTimeString(lang === 'ru' ? 'ru-RU' : 'en-US', {
     hour: '2-digit',
@@ -294,64 +289,64 @@ function MessageBubble({
     };
   }, [showContext]);
 
-  if (message.isDeleted || message.isDeletedForUser) {
+  if (message.isDeleted) {
     return null;
   }
 
   if (message.type === 'call') {
     const isMissed = message.callStatus === 'missed' || message.callStatus === 'declined' || message.callStatus === 'cancelled';
-    const statusText = isMissed
-      ? (message.callStatus === 'missed' ? t('missedCall') : message.callStatus === 'declined' ? t('declinedCall') : t('cancelledCall'))
-      : t('completedCall');
-
+    const statusText = isMissed 
+        ? (message.callStatus === 'missed' ? t('missedCall') : message.callStatus === 'declined' ? t('declinedCall') : t('cancelledCall'))
+        : t('completedCall');
+    
     const StatusIcon = isMissed ? PhoneMissed : (isMine ? PhoneOutgoing : PhoneIncoming);
     const CallIcon = message.callType === 'video' ? Video : StatusIcon;
-
+    
     return (
       <div className={`flex ${isMine ? 'justify-end' : 'justify-start'} mb-3 px-4 group scroll-mt-20`} data-message-id={message.id}>
-        <div
+        <div 
           onContextMenu={handleContextMenu}
           className={`group/call relative flex items-center gap-3.5 px-4 py-3 rounded-[1.25rem] border backdrop-blur-sm transition-all duration-300 cursor-default select-none
-            ${isMine
-              ? 'bg-primary/10 border-primary/20 hover:bg-primary/20 shadow-[0_4px_12px_rgba(48,150,229,0.08)]'
-              : 'bg-surface-variant/10 border-white/5 hover:bg-surface-variant/15 shadow-[0_4px_12px_rgba(0,0,0,0.15)]'}`}>
-
-          <div className={`w-11 h-11 rounded-2xl flex items-center justify-center shrink-0 shadow-inner group-hover/call:scale-105 transition-transform duration-500
+            ${isMine 
+               ? 'bg-primary/10 border-primary/20 hover:bg-primary/20 shadow-[0_4px_12px_rgba(48,150,229,0.08)]' 
+               : 'bg-surface-variant/10 border-white/5 hover:bg-surface-variant/15 shadow-[0_4px_12px_rgba(0,0,0,0.15)]'}`}>
+           
+           <div className={`w-11 h-11 rounded-2xl flex items-center justify-center shrink-0 shadow-inner group-hover/call:scale-105 transition-transform duration-500
              ${isMissed ? 'bg-red-500/15 text-red-400' : 'bg-emerald-500/15 text-emerald-400'}`}>
-            <CallIcon size={22} strokeWidth={2.5} className={isMissed && message.callStatus === 'missed' ? 'animate-wiggle' : ''} />
-          </div>
+              <CallIcon size={22} strokeWidth={2.5} className={isMissed && message.callStatus === 'missed' ? 'animate-wiggle' : ''} />
+           </div>
 
-          <div className="flex-1 min-w-0 pr-4">
-            <h4 className="text-[15px] font-bold text-white tracking-tight leading-tight mb-0.5 truncate">
-              {message.callType === 'video' ? t('videoCall') : t('audioCall')}
-            </h4>
-            <div className="flex items-center gap-1.5 opacity-80">
-              <span className={`text-[13px] font-medium ${isMissed ? 'text-red-400' : 'text-zinc-400'}`}>
-                {statusText} {message.duration && message.duration > 0 ? `• ${formatDuration(message.duration)}` : ''}
-              </span>
-            </div>
-          </div>
-
-          <div className="flex flex-col items-end justify-between self-stretch pt-0.5">
-            <div className="text-[10px] font-bold tracking-tight text-white/30 tabular-nums uppercase flex items-center gap-1">
-              {isPinned && <Pin size={10} className="rotate-45 text-primary fill-primary/20" />}
-              {timeStr}
-            </div>
-            {isMine && (
-              <div className="opacity-60 flex gap-0.5">
-                {isRead ? <CheckCheck size={12} className="text-primary" /> : <Check size={12} className="text-zinc-500" />}
+           <div className="flex-1 min-w-0 pr-4">
+              <h4 className="text-[15px] font-bold text-white tracking-tight leading-tight mb-0.5 truncate">
+                 {message.callType === 'video' ? t('videoCall') : t('audioCall')}
+              </h4>
+              <div className="flex items-center gap-1.5 opacity-80">
+                 <span className={`text-[13px] font-medium ${isMissed ? 'text-red-400' : 'text-zinc-400'}`}>
+                    {statusText} {message.duration && message.duration > 0 ? `• ${formatDuration(message.duration)}` : ''}
+                 </span>
               </div>
-            )}
-          </div>
+           </div>
 
-          <div className="absolute inset-0 rounded-[1.25rem] bg-white/[0.03] opacity-0 group-hover/call:opacity-100 transition-opacity pointer-events-none" />
+           <div className="flex flex-col items-end justify-between self-stretch pt-0.5">
+              <div className="text-[10px] font-bold tracking-tight text-white/30 tabular-nums uppercase flex items-center gap-1">
+                 {isPinned && <Pin size={10} className="rotate-45 text-primary fill-primary/20" />}
+                 {timeStr}
+              </div>
+              {isMine && (
+                 <div className="opacity-60 flex gap-0.5">
+                    {isRead ? <CheckCheck size={12} className="text-primary" /> : <Check size={12} className="text-zinc-500" />}
+                 </div>
+              )}
+           </div>
+
+           <div className="absolute inset-0 rounded-[1.25rem] bg-white/[0.03] opacity-0 group-hover/call:opacity-100 transition-opacity pointer-events-none" />
         </div>
       </div>
     );
   }
 
   const media = message.media || [];
-
+  
   const isMediaGif = (m: MediaItem) => {
     if (m.type === 'gif') return true;
     if (m.url?.toLowerCase().includes('klipy') || m.url?.toLowerCase().endsWith('.gif')) return true;
@@ -360,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) => {
@@ -459,7 +452,7 @@ function MessageBubble({
           </div>
         )}
 
-        {!isMine && activeChat?.type !== 'personal' && activeChat?.type !== 'favorites' && (
+        {!isMine && (
           <div className="w-8 flex-shrink-0 mr-2 self-end">
             {showAvatar ? (
               <button onClick={() => onViewProfile?.(message.senderId)}>
@@ -476,7 +469,7 @@ function MessageBubble({
         )}
 
         <div className={`max-[500px]:max-w-[85%] max-w-[75%] lg:max-w-[65%] min-w-0 ${isMine ? 'items-end' : 'items-start'} flex flex-col`}>
-          {!isMine && showAvatar && activeChat?.type !== 'personal' && activeChat?.type !== 'favorites' && (
+          {!isMine && showAvatar && (
             <button
               className="text-xs font-medium text-knot-400 ml-3 mb-0.5 hover:underline"
               onClick={() => onViewProfile?.(message.senderId)}
@@ -490,218 +483,219 @@ function MessageBubble({
             const needsFrame = !!message.content || !!message.forwardedFrom || !!message.replyTo || hasVoice || hasAudio || hasFile || !!message.storyId;
 
             return (
-              <div
-                id={`msg-${message.id}`}
-                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
-                  ? 'p-0 shadow-none border-none bg-transparent'
-                  : isMine
-                    ? 'bubble-sent px-4 py-3 hover:brightness-110'
-                    : 'bubble-received px-4 py-3 hover:brightness-110'
-                  }`}
-              >
+          <div
+            id={`msg-${message.id}`}
+            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
+                ? 'p-0 shadow-none border-none bg-transparent'
+                : isMine
+                  ? 'bubble-sent px-4 py-3 hover:brightness-110'
+                  : 'bubble-received px-4 py-3 hover:brightness-110'
+              }`}
+          >
 
-                {/* 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'
-                      }`}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      const el = document.getElementById(`msg-${message.replyToId}`);
-                      if (el) {
-                        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                        el.classList.add('highlight-message');
-                        setTimeout(() => el.classList.remove('highlight-message'), 5000);
-                      }
-                    }}
-                  >
-                    <p className={`text-[12px] font-black uppercase tracking-wider mb-0.5 truncate ${isMine ? 'text-primary' : 'text-primary'}`}>
-                      {message.replyTo.sender?.displayName || message.replyTo.sender?.userName || message.replyTo.sender?.username || ''}
-                    </p>
-                    <div className="flex items-center gap-1.5">
-                      {message.replyTo.isDeleted ? (
-                        <p className="text-[13px] text-zinc-500 italic truncate">{t('messageDeleted')}</p>
-                      ) : (
-                        <>
-                          {message.replyTo.media && message.replyTo.media.length > 0 && !message.quote && (() => {
-                            const m = message.replyTo.media[0];
-                            const isMp4 = m.type === 'image' && m.url?.toLowerCase().endsWith('.mp4');
-                            return (
-                              <div className="w-8 h-8 rounded bg-black/20 overflow-hidden flex-shrink-0 relative">
-                                {m.type === 'image' ? (
-                                  isMp4 ? (
-                                    <video src={getMediaUrl(m.url)} className="w-full h-full object-cover" muted playsInline />
-                                  ) : (
-                                    <img src={getMediaUrl(m.url)} className="w-full h-full object-cover" alt="" />
-                                  )
-                                ) : m.type === 'video' ? (
-                                  <>
-                                    <video src={getMediaUrl(m.url)} className="w-full h-full object-cover" muted playsInline />
-                                    <div className="absolute inset-0 flex items-center justify-center bg-black/40"><Play size={10} className="text-white" /></div>
-                                  </>
-                                ) : (
-                                  <div className="w-full h-full flex items-center justify-center"><FileText size={10} className="text-white/50" /></div>
-                                )}
-                              </div>
-                            );
-                          })()}
-                          <p className={`text-[13px] line-clamp-1 break-words italic ${isMine ? 'text-zinc-200' : 'text-zinc-400'}`}>
-                            {message.quote || message.replyTo.content || (message.replyTo.media && message.replyTo.media.length > 0 ? (() => {
-                              const m = message.replyTo.media[0];
-                              if (m.type === 'image' && m.url?.toLowerCase().endsWith('.mp4')) return 'GIF';
-                              if (m.type === 'image') return t('photo');
-                              if (m.type === 'video') return t('video');
-                              if (m.type === 'voice') return t('voice');
-                              return t('media');
-                            })() : '')}
-                          </p>
-                        </>
-                      )}
-                    </div>
-                  </div>
-                )}
-
-                {/* 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'
-                      }`}
-                  >
-                    <p className={`text-[11px] font-bold uppercase tracking-wider mb-1 ${isMine ? 'text-white/80' : 'text-knot-500/80'}`}>
-                      {t('story')}
-                    </p>
-                    <div className="flex items-center gap-2">
-                      {message.storyMediaUrl && (
-                        <div className="w-8 h-8 rounded bg-black/20 overflow-hidden flex-shrink-0">
-                          {message.storyMediaType === 'video' ? (
-                            <div className="w-full h-full relative">
-                              <video src={getMediaUrl(message.storyMediaUrl)} className="w-full h-full object-cover" />
-                              <div className="absolute inset-0 flex items-center justify-center bg-black/20"><Play size={10} className="text-white fill-white" /></div>
-                            </div>
-                          ) : message.storyMediaType === 'image' ? (
-                            <img src={getMediaUrl(message.storyMediaUrl)} className="w-full h-full object-cover" alt="" />
+          {/* 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'
+              }`}
+              onClick={(e) => {
+                e.stopPropagation();
+                const el = document.getElementById(`msg-${message.replyToId}`);
+                if (el) {
+                  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                  el.classList.add('highlight-message');
+                  setTimeout(() => el.classList.remove('highlight-message'), 5000);
+                }
+              }}
+            >
+              <p className={`text-[12px] font-black uppercase tracking-wider mb-0.5 truncate ${isMine ? 'text-primary' : 'text-primary'}`}>
+                {message.replyTo.sender?.displayName || message.replyTo.sender?.userName || message.replyTo.sender?.username || ''}
+              </p>
+              <div className="flex items-center gap-1.5">
+                {message.replyTo.isDeleted ? (
+                  <p className="text-[13px] text-zinc-500 italic truncate">{t('messageDeleted')}</p>
+                ) : (
+                  <>
+                    {message.replyTo.media && message.replyTo.media.length > 0 && !message.quote && (() => {
+                      const m = message.replyTo.media[0];
+                      const isMp4 = m.type === 'image' && m.url?.toLowerCase().endsWith('.mp4');
+                      return (
+                      <div className="w-8 h-8 rounded bg-black/20 overflow-hidden flex-shrink-0 relative">
+                        {m.type === 'image' ? (
+                          isMp4 ? (
+                            <video src={getMediaUrl(m.url)} className="w-full h-full object-cover" muted playsInline />
                           ) : (
-                            <div className="w-full h-full flex items-center justify-center bg-knot-500/20"><FileText size={10} className="text-knot-400" /></div>
-                          )}
-                        </div>
-                      )}
-                      <p className={`text-[13px] line-clamp-2 break-words whitespace-pre-wrap ${isMine ? 'text-[#0a0a0a]/70' : 'text-zinc-600 dark:text-zinc-300'}`}>
-                        {message.quote}
-                      </p>
-                    </div>
-                  </div>
-                )}
-                {/* Рендер пересланного сообщения */}
-                {message.forwardedFrom && (
-                  <div
-                    className="mb-1 text-[13.5px] cursor-pointer hover:bg-white/5 transition-colors -mx-1 px-1 rounded-sm"
-                    onClick={() => onViewProfile?.(message.forwardedFromId!)}
-                  >
-                    <div className={`font-medium ${isMine ? 'text-white/90' : 'text-knot-500'}`}>
-                      {(t('forwardedFrom' as any) === 'forwardedFrom' ? 'Переслано от' : t('forwardedFrom' as any))} <span className="font-semibold">{message.forwardedFrom.displayName || message.forwardedFrom.userName || message.forwardedFrom.username || ''}</span>
-                    </div>
-                  </div>
+                            <img src={getMediaUrl(m.url)} className="w-full h-full object-cover" alt="" />
+                          )
+                        ) : m.type === 'video' ? (
+                          <>
+                            <video src={getMediaUrl(m.url)} className="w-full h-full object-cover" muted playsInline />
+                            <div className="absolute inset-0 flex items-center justify-center bg-black/40"><Play size={10} className="text-white" /></div>
+                          </>
+                        ) : (
+                          <div className="w-full h-full flex items-center justify-center"><FileText size={10} className="text-white/50" /></div>
+                        )}
+                      </div>
+                      );
+                    })()}
+                    <p className={`text-[13px] line-clamp-1 break-words italic ${isMine ? 'text-zinc-200' : 'text-zinc-400'}`}>
+                      {message.quote || message.replyTo.content || (message.replyTo.media && message.replyTo.media.length > 0 ? (() => {
+                        const m = message.replyTo.media[0];
+                        if (m.type === 'image' && m.url?.toLowerCase().endsWith('.mp4')) return 'GIF';
+                        if (m.type === 'image') return t('photo');
+                        if (m.type === 'video') return t('video');
+                        if (m.type === 'voice') return t('voice');
+                        return t('media');
+                      })() : '')}
+                    </p>
+                  </>
                 )}
+              </div>
+            </div>
+          )}
 
-                {/* Изображения и Видео (Галерея) */}
-                {(hasImage || hasVideo) && (() => {
-                  const galleryMedia = media.filter(m => m.type === 'image' || m.type === 'video' || isMediaGif(m));
-                  const isSingleGif = galleryMedia.length === 1 && isMediaGif(galleryMedia[0]);
-                  const hasReactions = Object.keys(reactionGroups).length > 0;
+          {/* 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'
+              }`}
+            >
+              <p className={`text-[11px] font-bold uppercase tracking-wider mb-1 ${isMine ? 'text-white/80' : 'text-knot-500/80'}`}>
+                {t('story')}
+              </p>
+              <div className="flex items-center gap-2">
+                {message.storyMediaUrl && (
+                  <div className="w-8 h-8 rounded bg-black/20 overflow-hidden flex-shrink-0">
+                    {message.storyMediaType === 'video' ? (
+                       <div className="w-full h-full relative">
+                          <video src={getMediaUrl(message.storyMediaUrl)} className="w-full h-full object-cover" />
+                          <div className="absolute inset-0 flex items-center justify-center bg-black/20"><Play size={10} className="text-white fill-white" /></div>
+                       </div>
+                    ) : message.storyMediaType === 'image' ? (
+                       <img src={getMediaUrl(message.storyMediaUrl)} className="w-full h-full object-cover" alt="" />
+                    ) : (
+                       <div className="w-full h-full flex items-center justify-center bg-knot-500/20"><FileText size={10} className="text-knot-400" /></div>
+                    )}
+                  </div>
+                )}
+                <p className={`text-[13px] line-clamp-2 break-words whitespace-pre-wrap ${isMine ? 'text-[#0a0a0a]/70' : 'text-zinc-600 dark:text-zinc-300'}`}>
+                  {message.quote}
+                </p>
+              </div>
+            </div>
+          )}
+            {/* Рендер пересланного сообщения */}
+            {message.forwardedFrom && (
+              <div
+                className="mb-1 text-[13.5px] cursor-pointer hover:bg-white/5 transition-colors -mx-1 px-1 rounded-sm"
+                onClick={() => onViewProfile?.(message.forwardedFromId!)}
+              >
+                <div className={`font-medium ${isMine ? 'text-white/90' : 'text-knot-500'}`}>
+                  {(t('forwardedFrom' as any) === 'forwardedFrom' ? 'Переслано от' : t('forwardedFrom' as any))} <span className="font-semibold">{message.forwardedFrom.displayName || message.forwardedFrom.userName || message.forwardedFrom.username || ''}</span>
+                </div>
+              </div>
+            )}
+
+            {/* Изображения и Видео (Галерея) */}
+            {(hasImage || hasVideo) && (() => {
+              const galleryMedia = media.filter(m => m.type === 'image' || m.type === 'video' || isMediaGif(m));
+              const isSingleGif = galleryMedia.length === 1 && isMediaGif(galleryMedia[0]);
+              const hasReactions = Object.keys(reactionGroups).length > 0;
 
               return (
               <div className={`
-                ${needsFrame ? `-mx-[14px] ${message.forwardedFrom || message.replyTo || message.storyId ? 'mt-2' : '-mt-[8px]'} ${message.content || hasVoice || hasAudio || hasFile || message.type === 'poll' ? 'mb-3' : hasReactions ? 'mb-1' : '-mb-[8px]'}` : ''}
+                ${needsFrame ? `-mx-[14px] ${message.forwardedFrom || message.replyTo || message.storyId ? 'mt-2' : '-mt-[8px]'} ${message.content ? 'mb-2' : hasReactions ? 'mb-1' : '-mb-[8px]'}` : ''}
                 ${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'
-                        }`}>
-                        {galleryMedia.map((m, idx) => {
-                          const gif = isMediaGif(m);
+                <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);
+                      
+                      let cellClass = '';
+                      const count = galleryMedia.length;
+                      
+                      if (count === 1) {
+                         cellClass = isSingleGif ? 'max-h-[260px] aspect-auto' : 'max-h-[350px] sm:max-h-[450px] md:max-h-[500px] h-auto aspect-auto';
+                      } else if (count === 2) {
+                         cellClass = 'col-span-3 aspect-square';
+                      } else if (count === 3) {
+                         cellClass = idx === 0 ? 'col-span-6 aspect-[2/1] max-h-[300px]' : 'col-span-3 aspect-square';
+                      } else if (count === 4) {
+                         cellClass = 'col-span-3 aspect-square';
+                      } else if (count === 5) {
+                         cellClass = idx < 2 ? 'col-span-3 aspect-square' : 'col-span-2 aspect-square';
+                      } else if (count === 6) {
+                         cellClass = idx === 0 ? 'col-span-6 aspect-[2/1] max-h-[300px]' : idx < 3 ? 'col-span-3 aspect-[4/3]' : 'col-span-2 aspect-square';
+                      } else {
+                         // 7+
+                         cellClass = 'col-span-2 aspect-square';
+                      }
 
-                          let cellClass = '';
-                          const count = galleryMedia.length;
-
-                          if (count === 1) {
-                            cellClass = isSingleGif ? 'max-h-[260px] aspect-auto' : 'max-h-[350px] sm:max-h-[450px] md:max-h-[500px] h-auto aspect-auto';
-                          } else if (count === 2) {
-                            cellClass = 'col-span-3 aspect-square';
-                          } else if (count === 3) {
-                            cellClass = idx === 0 ? 'col-span-6 aspect-[2/1] max-h-[300px]' : 'col-span-3 aspect-square';
-                          } else if (count === 4) {
-                            cellClass = 'col-span-3 aspect-square';
-                          } else if (count === 5) {
-                            cellClass = idx < 2 ? 'col-span-3 aspect-square' : 'col-span-2 aspect-square';
-                          } else if (count === 6) {
-                            cellClass = idx === 0 ? 'col-span-6 aspect-[2/1] max-h-[300px]' : idx < 3 ? 'col-span-3 aspect-[4/3]' : 'col-span-2 aspect-square';
-                          } else {
-                            // 7+
-                            cellClass = 'col-span-2 aspect-square';
-                          }
-
-                          return (
-                            <div
-                              key={m.id}
-                              className={`relative cursor-pointer group/video overflow-hidden transition-all hover:brightness-90 bg-zinc-900 ${cellClass}`}
-                              onClick={() => setLightboxData({ index: idx })}
-                            >
-                              {gif ? (
-                                (m.url?.toLowerCase().endsWith('.gif') || m.filename?.toLowerCase().endsWith('.gif')) ? (
-                                  <img
-                                    src={getMediaUrl(m.url)}
-                                    alt=""
-                                    className={`w-full h-full object-cover ${galleryMedia.length === 1 ? 'relative h-auto' : 'absolute inset-0'}`}
-                                  />
-                                ) : (
-                                  <video
-                                    src={getMediaUrl(m.url)}
-                                    autoPlay loop muted playsInline preload="metadata"
-                                    className={`w-full h-full object-cover min-h-[150px] min-w-[200px] bg-zinc-900 shadow-inner rounded-[1.25rem] ${galleryMedia.length === 1 ? 'relative h-auto' : 'absolute inset-0'}`}
-                                  />
-                                )
-                              ) : m.type === 'video' ? (
-                                <>
-                                  {m.thumbnail ? (
-                                    <img src={getMediaUrl(m.thumbnail)} className={`w-full h-full object-cover ${galleryMedia.length === 1 ? 'relative h-auto' : 'absolute inset-0'}`} alt="" />
-                                  ) : (
-                                    <video
-                                      src={getMediaUrl(m.url)}
-                                      preload="metadata"
-                                      className={`w-full h-full object-cover bg-zinc-900 ${galleryMedia.length === 1 ? 'relative h-auto min-h-[160px]' : 'absolute inset-0'}`}
-                                    />
-                                  )}
-                                  <div className={`absolute inset-0 flex items-center justify-center bg-black/20 group-hover/video:bg-black/40 transition-colors`}>
-                                    <Play size={galleryMedia.length > 1 ? 24 : 48} className="text-white opacity-80" />
-                                  </div>
-                                </>
+                      return (
+                        <div
+                          key={m.id}
+                          className={`relative cursor-pointer group/video overflow-hidden transition-all hover:brightness-90 bg-zinc-900 ${cellClass}`}
+                          onClick={() => setLightboxData({ index: idx })}
+                        >
+                          {gif ? (
+                            (m.url?.toLowerCase().endsWith('.gif') || m.filename?.toLowerCase().endsWith('.gif')) ? (
+                              <img
+                                src={getMediaUrl(m.url)}
+                                alt=""
+                                className={`w-full h-full object-cover ${galleryMedia.length === 1 ? 'relative h-auto' : 'absolute inset-0'}`}
+                              />
+                            ) : (
+                              <video
+                                src={getMediaUrl(m.url)}
+                                autoPlay loop muted playsInline preload="metadata"
+                                className={`w-full h-full object-cover min-h-[150px] min-w-[200px] bg-zinc-900 shadow-inner rounded-[1.25rem] ${galleryMedia.length === 1 ? 'relative h-auto' : 'absolute inset-0'}`}
+                              />
+                            )
+                          ) : m.type === 'video' ? (
+                            <>
+                              {m.thumbnail ? (
+                                <img src={getMediaUrl(m.thumbnail)} className={`w-full h-full object-cover ${galleryMedia.length === 1 ? 'relative h-auto' : 'absolute inset-0'}`} alt="" />
                               ) : (
-                                <img
+                                <video
                                   src={getMediaUrl(m.url)}
-                                  alt=""
-                                  className={`w-full h-full object-cover ${galleryMedia.length === 1 ? 'relative h-auto' : 'absolute inset-0'}`}
+                                  preload="metadata"
+                                  className={`w-full h-full object-cover bg-zinc-900 ${galleryMedia.length === 1 ? 'relative h-auto min-h-[160px]' : 'absolute inset-0'}`}
                                 />
                               )}
-                            </div>
-                          );
-                        })}
-                      </div>
-
-                      {!message.content && (
-                        <div className="absolute bottom-1.5 right-1.5 z-10 pointer-events-none flex justify-end">
-                          <span className="text-[10px] font-bold text-on-surface-variant/40 bg-surface-container-highest/40 px-2 py-0.5 rounded-full flex items-center gap-1 backdrop-blur-md pointer-events-auto">
-                            {isPinned && <Pin size={10} className="rotate-45 text-primary fill-primary/40" />}
-                            {timeStr}
-                            {isMine && !message.scheduledAt && (
-                              <span className={`material-symbols-outlined text-[14px] ${isRead ? 'text-primary fill-1' : 'text-on-surface-variant/40'}`} style={{ fontVariationSettings: `'FILL' ${isRead ? 1 : 0}` }}>
-                                {isRead ? 'done_all' : 'done'}
-                              </span>
-                            )}
-                          </span>
+                              <div className={`absolute inset-0 flex items-center justify-center bg-black/20 group-hover/video:bg-black/40 transition-colors`}>
+                                <Play size={galleryMedia.length > 1 ? 24 : 48} className="text-white opacity-80" />
+                              </div>
+                            </>
+                          ) : (
+                            <img
+                              src={getMediaUrl(m.url)}
+                              alt=""
+                              className={`w-full h-full object-cover ${galleryMedia.length === 1 ? 'relative h-auto' : 'absolute inset-0'}`}
+                            />
+                          )}
                         </div>
+                      );
+                    })}
+                </div>
+                
+                {!message.content && (
+                  <div className="absolute bottom-1.5 right-1.5 z-10 pointer-events-none flex justify-end">
+                    <span className="text-[10px] font-bold text-on-surface-variant/40 bg-surface-container-highest/40 px-2 py-0.5 rounded-full flex items-center gap-1 backdrop-blur-md pointer-events-auto">
+                      {isPinned && <Pin size={10} className="rotate-45 text-primary fill-primary/40" />}
+                      {timeStr}
+                      {isMine && !message.scheduledAt && (
+                        <span className={`material-symbols-outlined text-[14px] ${isRead ? 'text-primary fill-1' : 'text-on-surface-variant/40'}`} style={{ fontVariationSettings: `'FILL' ${isRead ? 1 : 0}` }}>
+                          {isRead ? 'done_all' : 'done'}
+                        </span>
                       )}
                     </span>
                   </div>
@@ -712,7 +706,7 @@ function MessageBubble({
 
             {/* Голосовое - Optimized Kinetic Layout */}
             {hasVoice && (
-              <div className={`flex items-center gap-3 min-w-[200px] py-0.5 ${hasImage || hasVideo || message.forwardedFrom || message.replyTo || message.storyId ? 'mt-3' : ''}`}>
+              <div className="flex items-center gap-3 min-w-[200px] py-0.5">
                 <audio
                   ref={audioRef}
                   src={media.find((m) => m.type === 'voice')?.url}
@@ -771,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";
@@ -781,26 +775,22 @@ function MessageBubble({
               };
               
               return (
-                <div className={`min-w-[220px] ${hasImage || hasVideo || hasVoice || message.forwardedFrom || message.replyTo || message.storyId ? 'mt-3' : ''}`}>
+                <div className="min-w-[220px]">
                   {audioMedia?.filename && (
                     <div className="flex items-center gap-2 mb-2 min-w-0">
                       <Volume2 size={14} className={isMine ? 'text-[#0a0a0a]/60' : 'text-zinc-400'} />
                       <span className={`text-[11px] font-bold truncate ${isMine ? 'text-[#0a0a0a]/80' : 'text-zinc-200'}`}>{audioMedia.filename}</span>
                     </div>
-                  );
-                })()}
-
-                {/* Голосовое - Optimized Kinetic Layout */}
-                {hasVoice && (
-                  <div className="flex items-center gap-3 min-w-[200px] py-0.5">
+                  )}
+                  <div className="flex items-center gap-3">
                     <audio
                       ref={audioRef}
-                      src={media.find((m) => m.type === 'voice')?.url}
+                      src={getMediaUrl(audioMedia?.url)}
                       preload="auto"
                     />
                     <button
                       onClick={toggleAudio}
-                      className={`w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 ${isMine ? 'bg-white text-primary' : 'bg-primary text-white'} shadow-sm transition-all active:scale-95`}
+                      className={`w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 ${isMine ? 'bg-[#0a0a0a]/10 hover:bg-[#0a0a0a]/20 text-[#0a0a0a]' : 'bg-primary text-white shadow-lg'} transition-all active:scale-95`}
                     >
                       {isPlaying ? (
                         <Pause size={16} fill="currentColor" />
@@ -809,49 +799,64 @@ function MessageBubble({
                       )}
                     </button>
                     <div className="flex-1 min-w-0">
-                      <div
-                        className="flex items-center gap-[2px] h-6 cursor-pointer"
-                        onClick={(e) => {
-                          const audio = audioRef.current;
-                          if (!audio || !audio.duration) return;
-                          const rect = e.currentTarget.getBoundingClientRect();
-                          const pct = (e.clientX - rect.left) / rect.width;
-                          audio.currentTime = pct * audio.duration;
-                          setAudioProgress(pct * 100);
-                          if (!isPlaying) toggleAudio();
-                        }}
-                      >
-                        {(waveformBars || Array(28).fill(0.5)).map((val, i) => {
-                          const barHeight = Math.max(10, val * 85);
+                      <div className="flex items-center gap-[2px] h-6 cursor-pointer" 
+                           onClick={(e) => {
+                             const audio = audioRef.current;
+                             if (!audio || !audio.duration) return;
+                             const rect = e.currentTarget.getBoundingClientRect();
+                             const pct = (e.clientX - rect.left) / rect.width;
+                             audio.currentTime = pct * audio.duration;
+                             setAudioProgress(pct * 100);
+                           }}>
+                        {Array.from({ length: 28 }).map((_, i) => {
+                          const barHeight = [40, 65, 35, 80, 50, 90, 45, 70, 55, 85, 30, 75, 60, 95, 40, 80, 50, 70, 35, 90, 55, 65, 45, 85, 60, 75, 50, 40][i] || 50;
                           const progress = audioProgress / 100;
                           const barProgress = i / 28;
                           const isActive = barProgress < progress;
                           return (
                             <div
                               key={i}
-                              className={`flex-1 rounded-full transition-all duration-200 ${isActive
-                                ? isMine ? 'bg-[#000000] opacity-70' : 'bg-primary'
-                                : isMine ? 'bg-[#000000] opacity-20' : 'bg-white/30'
+                              className={`flex-1 rounded-full transition-all duration-150 ${isActive
+                                ? isMine ? 'bg-[#0a0a0a]/70' : 'bg-primary'
+                                : isMine ? 'bg-[#0a0a0a]/10' : 'bg-white/20'
                                 }`}
                               style={{ height: `${barHeight}%` }}
                             />
                           );
                         })}
                       </div>
-                      <div className="flex justify-end mt-0.5">
-                        <span className={`text-[10px] font-bold tabular-nums ${isMine ? 'text-[#0a0a0a]/60' : 'text-white/60'}`}>
+                      <div className="flex justify-between items-center mt-0.5">
+                        <span className={`text-[10px] font-bold tabular-nums ${isMine ? 'text-[#0a0a0a]/60' : 'text-zinc-500'}`}>
                           {isPlaying
                             ? formatDuration(audioRef.current?.currentTime || 0)
-                            : formatDuration(audioDuration || message.media?.find((m) => m.type === 'voice')?.duration || 0)}
+                            : (typeof audioMedia?.duration === 'number' 
+                                ? formatDuration(audioMedia.duration) 
+                                : (audioMedia?.duration || formatDuration(audioDuration || 0)))}
                         </span>
+                        <div className="flex items-center gap-2">
+                           <span className={`text-[10px] font-black uppercase tracking-tighter ${isMine ? 'text-[#0a0a0a]/40' : 'text-zinc-500'}`}>{formatSize(audioMedia?.size)}</span>
+                           <a 
+                             href={getMediaUrl(audioMedia?.url)} 
+                             download={audioMedia?.filename || 'audio'}
+                             target="_blank"
+                             rel="noopener noreferrer"
+                             className={`flex items-center justify-center p-1 rounded-md transition-all ${isMine ? 'hover:bg-[#0a0a0a]/10 text-[#0a0a0a]/40 hover:text-[#0a0a0a]' : 'hover:bg-white/10 text-zinc-500 hover:text-white'}`}
+                           >
+                             <Download size={12} />
+                           </a>
+                        </div>
                       </div>
                     </div>
                   </div>
-                )}
+                </div>
+              );
+            })()}
 
-                {/* Аудио (mp3 файлы) */}
-                {hasAudio && (() => {
-                  const audioMedia = media.find(isAudioFile);
+            {/* Файлы */}
+            {hasFile &&
+              media
+                .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 "";
                     if (bytes < 1024) return bytes + " B";
@@ -859,7 +864,6 @@ function MessageBubble({
                     if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + " MB";
                     return (bytes / (1024 * 1024 * 1024)).toFixed(1) + " GB";
                   };
-
                   return (
                     <a
                       key={m.id}
@@ -868,196 +872,166 @@ function MessageBubble({
                       target="_blank"
                       rel="noopener noreferrer"
                       className={`flex items-center gap-3 p-3 rounded-2xl ${isMine ? 'bg-[#0a0a0a]/5 hover:bg-[#0a0a0a]/10' : 'bg-zinc-900/50 hover:bg-zinc-800/80 border border-white/5'
-                        } transition-all mb-1 group/file ${hasImage || hasVideo || hasVoice || hasAudio || message.forwardedFrom || message.replyTo || message.storyId ? 'mt-3' : ''}`}
+                        } transition-all mb-1 group/file`}
                     >
                       <div className={`w-11 h-11 rounded-xl flex items-center justify-center ${isMine ? 'bg-[#0a0a0a]/10' : 'bg-primary/20'
                         } group-hover/file:scale-110 transition-transform`}>
                         <FileText size={22} className={isMine ? 'text-[#0a0a0a]' : 'text-primary'} />
                       </div>
-                    </div>
-                  );
-                })()}
-
-                {/* Файлы */}
-                {hasFile &&
-                  media
-                    .filter((m) => m.type !== 'image' && m.type !== 'voice' && m.type !== 'video' && !isAudioFile(m) && m.type !== 'gif')
-                    .map((m) => {
-                      const formatSize = (bytes?: number | null) => {
-                        if (!bytes) return "";
-                        if (bytes < 1024) return bytes + " B";
-                        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
-                        if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + " MB";
-                        return (bytes / (1024 * 1024 * 1024)).toFixed(1) + " GB";
-                      };
-                      return (
-                        <a
-                          key={m.id}
-                          href={getMediaUrl(m.url)}
-                          download={m.filename || 'file'}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className={`flex items-center gap-3 p-3 rounded-2xl ${isMine ? 'bg-[#0a0a0a]/5 hover:bg-[#0a0a0a]/10' : 'bg-zinc-900/50 hover:bg-zinc-800/80 border border-white/5'
-                            } transition-all mb-1 group/file`}
-                        >
-                          <div className={`w-11 h-11 rounded-xl flex items-center justify-center ${isMine ? 'bg-[#0a0a0a]/10' : 'bg-primary/20'
-                            } group-hover/file:scale-110 transition-transform`}>
-                            <FileText size={22} className={isMine ? 'text-[#0a0a0a]' : 'text-primary'} />
-                          </div>
-                          <div className="flex-1 min-w-0">
-                            <p className={`text-[13px] font-bold truncate ${isMine ? 'text-[#0a0a0a]' : 'text-zinc-200'}`}>{m.filename || t('fileLabel')}</p>
-                            <p className={`text-[11px] font-medium ${isMine ? 'text-[#0a0a0a]/50' : 'text-zinc-500'}`}>
-                              {formatSize(m.size) || t('download')}
-                            </p>
-                          </div>
-                          <Download size={18} className={isMine ? 'text-[#0a0a0a]/30' : 'text-zinc-500'} />
-                        </a>
-                      );
-                    })}
-
-                {/* Опрос */}
-                {message.type === 'poll' && message.pollOptions && (
-                  <div className={`p-1.5 space-y-4 min-w-[260px] max-w-full ${isMine ? 'text-[#0a0a0a]' : 'text-zinc-200'}`}>
-                    <div className="space-y-1">
-                      <h4 className="text-[15px] font-bold leading-tight flex items-start gap-2 whitespace-pre-wrap break-words">
-                        <BarChart2 size={18} className="mt-0.5 shrink-0 opacity-60" />
-                        {message.content}
-                      </h4>
-                      <div className="flex items-center justify-between pl-7 pr-2">
-                        <p className="text-[11px] font-medium opacity-50 uppercase tracking-widest">
-                          {message.pollIsMultipleChoice ? t('multipleAnswers') : t('singleAnswer')}
+                      <div className="flex-1 min-w-0">
+                        <p className={`text-[13px] font-bold truncate ${isMine ? 'text-[#0a0a0a]' : 'text-zinc-200'}`}>{m.filename || t('fileLabel')}</p>
+                        <p className={`text-[11px] font-medium ${isMine ? 'text-[#0a0a0a]/50' : 'text-zinc-500'}`}>
+                          {formatSize(m.size) || t('download')}
                         </p>
-                        {message.pollIsAnonymous && (
-                          <span className="text-[10px] font-black uppercase tracking-tighter bg-black/5 px-2 py-0.5 rounded-sm opacity-40">
-                            {t('anonymous')}
-                          </span>
-                        )}
                       </div>
-                    </div>
+                      <Download size={18} className={isMine ? 'text-[#0a0a0a]/30' : 'text-zinc-500'} />
+                    </a>
+                  );
+                })}
 
-                    <div className="space-y-2">
-                      {(() => {
-                        const hasVoted = (message.userVotedOptionIds && message.userVotedOptionIds.length > 0) ||
-                          message.pollOptions?.some(o => o.voterIds?.includes(user?.id || ''));
-                        const totalVotes = message.pollOptions!.reduce((sum, o) => sum + (o.voteCount || 0), 0);
+            {/* Опрос */}
+            {message.type === 'poll' && message.pollOptions && (
+              <div className={`p-1.5 space-y-4 min-w-[260px] max-w-full ${isMine ? 'text-[#0a0a0a]' : 'text-zinc-200'}`}>
+                <div className="space-y-1">
+                  <h4 className="text-[15px] font-bold leading-tight flex items-start gap-2 whitespace-pre-wrap break-words">
+                    <BarChart2 size={18} className="mt-0.5 shrink-0 opacity-60" />
+                    {message.content}
+                  </h4>
+                  <div className="flex items-center justify-between pl-7 pr-2">
+                    <p className="text-[11px] font-medium opacity-50 uppercase tracking-widest">
+                      {message.pollIsMultipleChoice ? t('multipleAnswers') : t('singleAnswer')}
+                    </p>
+                    {message.pollIsAnonymous && (
+                      <span className="text-[10px] font-black uppercase tracking-tighter bg-black/5 px-2 py-0.5 rounded-sm opacity-40">
+                         {t('anonymous')}
+                      </span>
+                    )}
+                  </div>
+                </div>
 
-                        return message.pollOptions.map((opt, idx) => {
-                          const isVotedByMe = (message.userVotedOptionIds?.includes(opt.id)) ||
-                            opt.voterIds?.includes(user?.id || '');
-                          const percent = totalVotes > 0 ? Math.round(((opt.voteCount || 0) / totalVotes) * 100) : 0;
+                <div className="space-y-2">
+                  {(() => {
+                    const hasVoted = (message.userVotedOptionIds && message.userVotedOptionIds.length > 0) || 
+                                     message.pollOptions?.some(o => o.voterIds?.includes(user?.id || ''));
+                    const totalVotes = message.pollOptions!.reduce((sum, o) => sum + (o.voteCount || 0), 0);
 
-                          return (
-                            <button
-                              key={opt.id || idx}
-                              disabled={hasVoted && !message.pollIsMultipleChoice} // If already voted and not multiple choice, disable. 
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                if (hasVoted && !message.pollIsMultipleChoice) return;
+                    return message.pollOptions.map((opt, idx) => {
+                      const isVotedByMe = (message.userVotedOptionIds?.includes(opt.id)) || 
+                                          opt.voterIds?.includes(user?.id || '');
+                      const percent = totalVotes > 0 ? Math.round(((opt.voteCount || 0) / totalVotes) * 100) : 0;
+                      
+                      return (
+                        <button
+                          key={opt.id || idx}
+                          disabled={hasVoted && !message.pollIsMultipleChoice} // If already voted and not multiple choice, disable. 
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            if (hasVoted && !message.pollIsMultipleChoice) return;
 
-                                // Optimistic update for better UX
-                                const currentVoted = message.userVotedOptionIds || [];
-                                if (!currentVoted.includes(opt.id)) {
-                                  useChatStore.getState().updateMessage({
+                            // Optimistic update for better UX
+                            const currentVoted = message.userVotedOptionIds || [];
+                            if (!currentVoted.includes(opt.id)) {
+                                useChatStore.getState().updateMessage({
                                     ...message,
                                     userVotedOptionIds: message.pollIsMultipleChoice ? [...currentVoted, opt.id] : [opt.id]
-                                  });
-                                }
+                                });
+                            }
 
-                                const socket = getSocket();
-                                if (socket) {
-                                  socket.emit('vote_poll', {
-                                    messageId: message.id,
-                                    chatId: message.chatId,
-                                    optionId: opt.id
-                                  });
-                                }
-                              }}
-                              className={`w-full group/opt relative rounded-2xl border transition-all duration-300 text-left p-3 flex flex-col gap-1.5
-                            ${isMine
-                                  ? 'bg-[#0a0a0a]/5 border-[#0a0a0a]/10 hover:bg-[#0a0a0a]/10 active:scale-[0.98] hover:z-20'
-                                  : 'bg-white/5 border-white/5 hover:bg-white/10 active:scale-[0.98] hover:z-20'}`}
-                            >
-                              <div className="flex items-center justify-between relative z-10">
-                                <div className="flex items-center gap-2 truncate flex-1">
-                                  {isVotedByMe && <Check size={14} className={isMine ? 'text-[#0a0a0a]' : 'text-primary'} />}
-                                  <span className="text-[14px] font-semibold truncate">{opt.text}</span>
+                            const socket = getSocket();
+                            if (socket) {
+                              socket.emit('vote_poll', {
+                                messageId: message.id,
+                                chatId: message.chatId,
+                                optionId: opt.id
+                              });
+                            }
+                          }}
+                          className={`w-full group/opt relative rounded-2xl border transition-all duration-300 text-left p-3 flex flex-col gap-1.5
+                            ${isMine 
+                              ? 'bg-[#0a0a0a]/5 border-[#0a0a0a]/10 hover:bg-[#0a0a0a]/10 active:scale-[0.98] hover:z-20' 
+                              : 'bg-white/5 border-white/5 hover:bg-white/10 active:scale-[0.98] hover:z-20'}`}
+                        >
+                          <div className="flex items-center justify-between relative z-10">
+                            <div className="flex items-center gap-2 truncate flex-1">
+                               {isVotedByMe && <Check size={14} className={isMine ? 'text-[#0a0a0a]' : 'text-primary'} />}
+                               <span className="text-[14px] font-semibold truncate">{opt.text}</span>
+                            </div>
+                            {hasVoted && (
+                               <span className="text-[13px] font-black tabular-nums opacity-80">{percent}%</span>
+                            )}
+                          </div>
+                          
+                          {hasVoted && (
+                             <>
+                                <div className="relative h-1.5 w-full bg-white/5 rounded-full overflow-hidden z-10">
+                                  <motion.div 
+                                    initial={false}
+                                    animate={{ width: `${percent}%` }}
+                                    transition={{ duration: 0.8, ease: "easeOut" }}
+                                    className={`absolute inset-0 rounded-full ${isMine ? 'bg-[#0a0a0a]/40' : 'bg-primary'}`}
+                                  />
                                 </div>
-                                {hasVoted && (
-                                  <span className="text-[13px] font-black tabular-nums opacity-80">{percent}%</span>
-                                )}
-                              </div>
-
-                              {hasVoted && (
-                                <>
-                                  <div className="relative h-1.5 w-full bg-white/5 rounded-full overflow-hidden z-10">
-                                    <motion.div
-                                      initial={false}
-                                      animate={{ width: `${percent}%` }}
-                                      transition={{ duration: 0.8, ease: "easeOut" }}
-                                      className={`absolute inset-0 rounded-full ${isMine ? 'bg-[#0a0a0a]/40' : 'bg-primary'}`}
-                                    />
-                                  </div>
-
-                                  <div className="flex items-center justify-between relative z-10 font-bold uppercase tracking-widest text-[10px]">
-                                    <span className="opacity-40">{opt.voteCount || 0} {t('votes')}</span>
-                                    {opt.voters && opt.voters.length > 0 && (
-                                      <div className="relative group/voters flex -space-x-1.5 hover:space-x-0.5 transition-all duration-300">
-                                        {opt.voters.slice(0, 5).map((voter) => (
-                                          <Avatar
-                                            key={voter.id}
-                                            src={voter.avatar}
-                                            name={voter.displayName}
-                                            size="xs"
-                                            className="ring-1 ring-white/20 shadow-lg"
-                                          />
-                                        ))}
-                                        {opt.voters.length > 5 && (
+                                
+                                <div className="flex items-center justify-between relative z-10 font-bold uppercase tracking-widest text-[10px]">
+                                   <span className="opacity-40">{opt.voteCount || 0} {t('votes')}</span>
+                                   {opt.voters && opt.voters.length > 0 && (
+                                     <div className="relative group/voters flex -space-x-1.5 hover:space-x-0.5 transition-all duration-300">
+                                       {opt.voters.slice(0, 5).map((voter) => (
+                                         <Avatar 
+                                           key={voter.id}
+                                           src={voter.avatar}
+                                           name={voter.displayName}
+                                           size="xs"
+                                           className="ring-1 ring-white/20 shadow-lg"
+                                         />
+                                       ))}
+                                       {opt.voters.length > 5 && (
                                           <div className="w-4 h-4 rounded-lg bg-white/10 flex items-center justify-center text-[7px] font-black tabular-nums ring-1 ring-white/20 text-white/50">
                                             +{opt.voters.length - 5}
                                           </div>
-                                        )}
-
-                                        {/* Подробный список при наведении */}
-                                        <div className="absolute bottom-full right-0 mb-3 opacity-0 group-hover/voters:opacity-100 transition-all duration-300 pointer-events-none scale-95 group-hover/voters:scale-100 origin-bottom-right z-50">
-                                          <div className="bg-[#1b1b1b] shadow-2xl rounded-2xl p-2 border border-white/10 min-w-[160px] backdrop-blur-xl">
-                                            <div className="space-y-1">
+                                       )}
+        
+                                       {/* Подробный список при наведении */}
+                                       <div className="absolute bottom-full right-0 mb-3 opacity-0 group-hover/voters:opacity-100 transition-all duration-300 pointer-events-none scale-95 group-hover/voters:scale-100 origin-bottom-right z-50">
+                                         <div className="bg-[#1b1b1b] shadow-2xl rounded-2xl p-2 border border-white/10 min-w-[160px] backdrop-blur-xl">
+                                           <div className="space-y-1">
                                               {opt.voters.map(v => (
-                                                <div key={v.id} className="flex items-center gap-2.5 p-1.5 hover:bg-white/10 rounded-xl transition-colors">
-                                                  <Avatar src={v.avatar} name={v.displayName} size="xs" />
-                                                  <span className="text-[11px] font-bold text-white/90 truncate">{v.displayName}</span>
-                                                </div>
+                                                 <div key={v.id} className="flex items-center gap-2.5 p-1.5 hover:bg-white/10 rounded-xl transition-colors">
+                                                    <Avatar src={v.avatar} name={v.displayName} size="xs" />
+                                                    <span className="text-[11px] font-bold text-white/90 truncate">{v.displayName}</span>
+                                                 </div>
                                               ))}
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    )}
-                                  </div>
-                                </>
-                              )}
-                            </button>
-                          );
-                        });
-                      })()}
-                    </div>
-                    {(() => {
-                      const hasVoted = (message.userVotedOptionIds && message.userVotedOptionIds.length > 0) ||
-                        message.pollOptions?.some(o => o.voterIds?.includes(user?.id || ''));
-                      const totalVotes = message.pollOptions!.reduce((sum, o) => sum + (o.voteCount || 0), 0);
-                      if (hasVoted) {
+                                           </div>
+                                         </div>
+                                       </div>
+                                     </div>
+                                   )}
+                                </div>
+                             </>
+                          )}
+                        </button>
+                      );
+                    });
+                  })()}
+                </div>
+                {(() => {
+                    const hasVoted = (message.userVotedOptionIds && message.userVotedOptionIds.length > 0) || 
+                                     message.pollOptions?.some(o => o.voterIds?.includes(user?.id || ''));
+                    const totalVotes = message.pollOptions!.reduce((sum, o) => sum + (o.voteCount || 0), 0);
+                    if (hasVoted) {
                         return <div className="text-[10px] font-black opacity-30 mt-2 px-2">ВСЕГО ПРОГОЛОСОВАЛО: {totalVotes}</div>
-                      }
-                      return null;
-                    })()}
-                  </div>
-                )}
+                    }
+                    return null;
+                })()}
+              </div>
+            )}
 
             {/* Текст */}
             {message.content && message.type !== 'poll' && (() => {
               const onlyEmojiRegex = /^[\p{Extended_Pictographic}\s]+$/u;
               const isOnlyEmojis = onlyEmojiRegex.test(message.content) && message.content.length <= 15;
               return (
-              <div className={`flex items-end gap-2 text-sm w-full ${hasImage || hasVideo || hasVoice || hasAudio || hasFile || message.forwardedFrom || message.replyTo || message.storyId ? 'mt-3' : ''}`}>
+              <div className="flex items-end gap-2 text-sm w-full">
                 <div className="flex-1 min-w-0 w-full">
                   <p className={`whitespace-pre-wrap break-words leading-relaxed w-full ${isOnlyEmojis ? 'text-5xl my-1' : ''} ${isMine ? 'text-[#0a0a0a] font-normal' : 'text-zinc-200'}`}>
                     {renderFormattedText(message.content)}
@@ -1066,12 +1040,26 @@ function MessageBubble({
                     <div className="w-full mt-1 mb-1 relative overflow-hidden">
                       <LinkPreview url={firstUrl} />
                     </div>
-                  );
-                })()}
-
-
+                  )}
+                </div>
+                <span className={`text-[10px] font-bold flex-shrink-0 flex items-center gap-0.5 self-end float-right leading-none ${isOnlyEmojis ? '-mb-1' : 'mb-0.5'} ${isMine ? 'text-[#0a0a0a]/50' : 'text-on-surface-variant/40'}`}>
+                  {message.isEdited && <span className="mr-0.5">{t('edited')}</span>}
+                  {message.scheduledAt && <span className="material-symbols-outlined text-[12px] text-amber-400 mr-0.5">schedule</span>}
+                  {isPinned && <Pin size={10} className={`rotate-45 ${isMine ? 'text-[#0a0a0a]/60 fill-[#0a0a0a]/20' : 'text-primary fill-primary/20'} mr-0.5`} />}
+                  {timeStr}
+                  {isMine && !message.scheduledAt && (
+                    <span className={`material-symbols-outlined text-[14px] ${isRead ? 'text-[#0a0a0a]/80 fill-1' : 'text-[#0a0a0a]/40'}`} style={{ fontVariationSettings: `'FILL' ${isRead ? 1 : 0}` }}>
+                      {isRead ? 'done_all' : 'done'}
+                    </span>
+                  )}
+                </span>
               </div>
-            );
+              );
+            })()}
+
+
+          </div>
+          );
           })()}
 
           {Object.keys(reactionGroups).length > 0 && (
@@ -1080,10 +1068,11 @@ 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
-                    ? 'bg-primary/20 border-primary text-white shadow-lg'
-                    : 'bg-[#201F1F] border-white/5 text-zinc-300 hover:bg-[#2a2a2a]'
-                    } shadow-md group/react`}
+                  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`}
                   title={data.users.join(', ')}
                 >
                   <span className="text-[14px] leading-none">{emoji}</span>
@@ -1096,7 +1085,7 @@ function MessageBubble({
           )}
         </div>
 
-        {isMine && activeChat?.type !== 'personal' && activeChat?.type !== 'favorites' && (
+        {isMine && (
           <div className="w-8 flex-shrink-0 ml-2 self-end">
             {showAvatar ? (
               <button onClick={() => onViewProfile?.(message.senderId)}>
@@ -1248,9 +1237,9 @@ function MessageBubble({
       <AnimatePresence>
         {lightboxData && (
           <ImageLightbox
-            images={media.filter(m => m.type === 'image' || m.type === 'video' || isMediaGif?.(m) || m.type === 'gif').map(m => ({
-              url: getMediaUrl(m.url),
-              type: (isMediaGif?.(m) || m.type === 'gif' || (m.type === 'image' && m.url?.toLowerCase().endsWith('.mp4'))) ? 'gif' : m.type
+            images={media.filter(m => m.type === 'image' || m.type === 'video' || isMediaGif?.(m) || m.type === 'gif').map(m => ({ 
+              url: getMediaUrl(m.url), 
+              type: (isMediaGif?.(m) || m.type === 'gif' || (m.type === 'image' && m.url?.toLowerCase().endsWith('.mp4'))) ? 'gif' : m.type 
             }))}
             initialIndex={lightboxData.index}
             onClose={() => setLightboxData(null)}

From 71b3d2b491bb7c2dca2e0a5dcbc1ee32c6f9f8ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A5=D0=B0=D0=BB=D0=B8=D0=BC=D0=BE=D0=B2=20=D0=A0=D1=83?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=BC?= <rhalimov@elveesneotek.com>
Date: Mon, 20 Apr 2026 23:04:42 +0300
Subject: [PATCH 09/13] Fix IMessageRepository import in LeaveOrDeleteChat.cs

---
 .../Application/Chats/LeaveOrDelete/LeaveOrDeleteChat.cs         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/backend/src/Modules/Conversations/Application/Chats/LeaveOrDelete/LeaveOrDeleteChat.cs b/backend/src/Modules/Conversations/Application/Chats/LeaveOrDelete/LeaveOrDeleteChat.cs
index 59e79a5..aadf4a8 100644
--- a/backend/src/Modules/Conversations/Application/Chats/LeaveOrDelete/LeaveOrDeleteChat.cs
+++ b/backend/src/Modules/Conversations/Application/Chats/LeaveOrDelete/LeaveOrDeleteChat.cs
@@ -4,6 +4,7 @@ using System.Threading;
 using System.Threading.Tasks;
 using Knot.Contracts.Conversations.Application.Abstractions;
 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;

From c166f1d186ab65c44ef77b84b96a91af97910722 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A5=D0=B0=D0=BB=D0=B8=D0=BC=D0=BE=D0=B2=20=D0=A0=D1=83?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=BC?= <rhalimov@elveesneotek.com>
Date: Mon, 20 Apr 2026 23:14:31 +0300
Subject: [PATCH 10/13] Fix read receipts: join chat group when activeChat
 changes

---
 .../src/modules/chats/presentation/ChatPage.tsx    | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/client-web/src/modules/chats/presentation/ChatPage.tsx b/client-web/src/modules/chats/presentation/ChatPage.tsx
index 28205cb..1d1ce7b 100644
--- a/client-web/src/modules/chats/presentation/ChatPage.tsx
+++ b/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;
@@ -335,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);
@@ -371,8 +383,6 @@ export default function ChatPage() {
     setGroupCallOpen(false);
   };
 
-  const activeChat = useChatStore((state) => state.activeChat);
-
   return (
     <motion.div
       initial={{ opacity: 0 }}

From 4940f1212f1cbf95d036216691be5bdea9979042 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A5=D0=B0=D0=BB=D0=B8=D0=BC=D0=BE=D0=B2=20=D0=A0=D1=83?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=BC?= <rhalimov@elveesneotek.com>
Date: Mon, 20 Apr 2026 23:20:39 +0300
Subject: [PATCH 11/13] Fix read receipts: mark visible messages as read
 immediately

---
 .../presentation/components/ChatView.tsx      | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/client-web/src/modules/chats/presentation/components/ChatView.tsx b/client-web/src/modules/chats/presentation/components/ChatView.tsx
index 861d295..5c95b42 100644
--- a/client-web/src/modules/chats/presentation/components/ChatView.tsx
+++ b/client-web/src/modules/chats/presentation/components/ChatView.tsx
@@ -573,6 +573,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
       {
         root: scrollContainerRef.current,
         threshold: 0.1,
+        rootMargin: '0px',
       }
     );
 
@@ -584,7 +585,26 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
       unreadElements.forEach((el: Element) => {
         const id = el.getAttribute('data-message-id');
         if (id && !sentReadIdsRef.current.has(id)) {
-          observer.observe(el);
+          // 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);
+          }
         }
       });
     };

From 786eaffb3343766193f17eb20de03403beb749f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A5=D0=B0=D0=BB=D0=B8=D0=BC=D0=BE=D0=B2=20=D0=A0=D1=83?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=BC?= <rhalimov@elveesneotek.com>
Date: Mon, 20 Apr 2026 23:21:50 +0300
Subject: [PATCH 12/13] Fix unread divider: update sessionUnreadRef when
 messages are marked as read

---
 .../presentation/components/ChatView.tsx      | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/client-web/src/modules/chats/presentation/components/ChatView.tsx b/client-web/src/modules/chats/presentation/components/ChatView.tsx
index 5c95b42..e5d4587 100644
--- a/client-web/src/modules/chats/presentation/components/ChatView.tsx
+++ b/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) {
-    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 };
-  }
+  // 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);
 

From 67d5764f6ef912206d464254d9e312af7dffab52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A5=D0=B0=D0=BB=D0=B8=D0=BC=D0=BE=D0=B2=20=D0=A0=D1=83?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=BC?= <rhalimov@elveesneotek.com>
Date: Thu, 16 Apr 2026 23:54:19 +0300
Subject: [PATCH 13/13] =?UTF-8?q?=D0=A3=D0=B1=D1=80=D0=B0=D0=BB=20=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=B0=D1=82=D0=B0=D1=80=D1=8B=20=D0=B8=20=D0=B8=D0=BC?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D0=B2=D0=BD=D1=83=D1=82=D1=80=D0=B8=20?=
 =?UTF-8?q?=D1=87=D0=B0=D1=82=D0=B0=20=D0=BB=D0=B8=D1=87=D0=BD=D1=8B=D1=85?=
 =?UTF-8?q?=20=D1=87=D0=B0=D1=82=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/chats/presentation/components/MessageBubble.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client-web/src/modules/chats/presentation/components/MessageBubble.tsx b/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
index 7ba4ba9..393d4cb 100644
--- a/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
+++ b/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
@@ -452,7 +452,7 @@ function MessageBubble({
           </div>
         )}
 
-        {!isMine && (
+        {!isMine && activeChat?.type !== 'personal' && activeChat?.type !== 'favorites' && (
           <div className="w-8 flex-shrink-0 mr-2 self-end">
             {showAvatar ? (
               <button onClick={() => onViewProfile?.(message.senderId)}>
@@ -469,7 +469,7 @@ function MessageBubble({
         )}
 
         <div className={`max-[500px]:max-w-[85%] max-w-[75%] lg:max-w-[65%] min-w-0 ${isMine ? 'items-end' : 'items-start'} flex flex-col`}>
-          {!isMine && showAvatar && (
+          {!isMine && showAvatar && activeChat?.type !== 'personal' && activeChat?.type !== 'favorites' && (
             <button
               className="text-xs font-medium text-knot-400 ml-3 mb-0.5 hover:underline"
               onClick={() => onViewProfile?.(message.senderId)}
@@ -1085,7 +1085,7 @@ function MessageBubble({
           )}
         </div>
 
-        {isMine && (
+        {isMine && activeChat?.type !== 'personal' && activeChat?.type !== 'favorites' && (
           <div className="w-8 flex-shrink-0 ml-2 self-end">
             {showAvatar ? (
               <button onClick={() => onViewProfile?.(message.senderId)}>