From a2e21994d0d360aa040a59725911739746955f49 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Thu, 6 Apr 2023 08:21:10 +0200
Subject: [PATCH] Middle Column / Pinned: Fix disappearing albums (#2943)

---
 src/components/middle/hooks/useMessageObservers.ts | 5 +++--
 src/components/middle/message/Message.tsx          | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/middle/hooks/useMessageObservers.ts b/src/components/middle/hooks/useMessageObservers.ts
index 4f96cdb2c..a97c1981f 100644
--- a/src/components/middle/hooks/useMessageObservers.ts
+++ b/src/components/middle/hooks/useMessageObservers.ts
@@ -49,13 +49,14 @@ export default function useMessageObservers(
 
       const { dataset } = target as HTMLDivElement;
       const messageId = Number(dataset.lastMessageId || dataset.messageId);
+      const albumMainId = dataset.albumMainId ? Number(dataset.albumMainId) : undefined;
 
       if (!isIntersecting) {
         if (dataset.isPinned) {
           if (rootBounds && boundingClientRect.bottom < rootBounds.top) {
             isReversed = true;
           }
-          viewportPinnedIdsToRemove.push(messageId);
+          viewportPinnedIdsToRemove.push(albumMainId || messageId);
         }
         return;
       }
@@ -73,7 +74,7 @@ export default function useMessageObservers(
       }
 
       if (dataset.isPinned) {
-        viewportPinnedIdsToAdd.push(messageId);
+        viewportPinnedIdsToAdd.push(albumMainId || messageId);
       }
     });
 
diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx
index 8249ad8da..9e236a845 100644
--- a/src/components/middle/message/Message.tsx
+++ b/src/components/middle/message/Message.tsx
@@ -413,7 +413,7 @@ const Message: FC<OwnProps & StateProps> = ({
 
   useEffect(() => {
     if (!isPinned) return undefined;
-    const id = album ? album.messages[album.messages.length - 1].id : messageId;
+    const id = album ? album.mainMessage.id : messageId;
 
     return () => {
       onPinnedIntersectionChange({ viewportPinnedIdsToRemove: [id], isUnmount: true });
@@ -1188,6 +1188,7 @@ const Message: FC<OwnProps & StateProps> = ({
         className="bottom-marker"
         data-message-id={messageId}
         data-last-message-id={album ? album.messages[album.messages.length - 1].id : undefined}
+        data-album-main-id={album ? album.mainMessage.id : undefined}
         data-has-unread-mention={message.hasUnreadMention || undefined}
         data-has-unread-reaction={hasUnreadReaction || undefined}
         data-is-pinned={isPinned || undefined}