From f68154d75b8d7058332bae6b4ab5c296a1797e66 Mon Sep 17 00:00:00 2001 From: WofWca Date: Sat, 6 Jul 2024 18:29:27 +0400 Subject: [PATCH] fix: chat "scrolling up" upon reaction Closes #3753 This removes `scrollToBottom` JS on each new message, which is now unnecessary. However, the old code used `ifClose: true`, which would still scroll the chat if it was scrolled up less than 7 pixels up. The new implementation still has similar behavior as the new scroll anchor is not at the very bottom of the scrollable area, so the chat will still show the new message as long as the bottom edge of the previous oldest message was still visible when the new one arrived. --- CHANGELOG.md | 1 + scss/message/_message-list.scss | 54 +++++++++++++++++++ .../ReactionsBar/ReactionsBarContext.tsx | 3 ++ .../ReactionsBar/useReactionsBar.ts | 2 +- src/renderer/components/message/Message.tsx | 6 +-- .../components/message/MessageList.tsx | 42 ++++++++++----- .../components/message/MessageWrapper.tsx | 13 ++++- src/renderer/stores/chat/chat_view_reducer.ts | 16 ------ src/renderer/stores/messagelist.ts | 1 - 9 files changed, 102 insertions(+), 36 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4474721f87..d9eaa6373e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,7 @@ - Fix the problem of Quit menu item on WebXDC apps closes the whole DC app #3995 - minor performance improvements #3981 - fix chat list items (e.g. Archive) and contacts not showing up sometimes #4004 +- fix chat "scrolling up" when someone adds a reaction #4012 diff --git a/scss/message/_message-list.scss b/scss/message/_message-list.scss index a3a9da09cf..01906d70ff 100644 --- a/scss/message/_message-list.scss +++ b/scss/message/_message-list.scss @@ -91,6 +91,60 @@ width: 100%; padding: 0 0.5em; + // The following code block is to prevent + // https://github.com/deltachat/deltachat-desktop/issues/3753 + // which is 'Adding a reaction makes the chat "scroll up" + // (then you have to scroll to see new messages)'. + // Signal messenger implements the same measure: + // https://github.com/signalapp/Signal-Desktop/blob/29c404266863491a3b26a73b24602d36d7a3ac46/stylesheets/_modules.scss#L5573-L5587 + // which they have looked up here: + // https://css-tricks.com/books/greatest-css-tricks/pin-scrolling-to-bottom/ + // Spec: + // https://drafts.csswg.org/css-scroll-anchoring + // + // TODO there is a concern: whether this makes the chat list jumpy + // when it is scrolled up, making the scroll anchor + // (which is at the bottom of chat list) go way off screen. + // This doesn't appear to be the case. + // Also whether we're gonna jump to bottom if the user is reading old + // messages as is waiting for the newer ones to load + // while scrolled to bottom. This would be unexpected. + // I suppose this is why Signal has `--have-newest`. + // But I also haven't managed to see this happen. + // But, for example, if you scroll up a bit, and then someone + // adds a reaction to a message that is rendered, but is above the messages + // that are currently in view, the view will shift down. + // + // Perhaps a more reasonable approch would be to set the last message + // _in view_ as the anchor, and only explicitly scroll to latest message + // when it is freshly received, + // but this will (probably?) require quite some JS. + // Or simply only alternate scroll anchoring behavior when + // we're scrolled to bottom. + // Ah, if only there was a way to "flip" overflow anchor selection + // algorithm to just select bottom-most visible element + // and not the top-most. + // Maybe we could though? E.g. with `order` CSS property? + // + // Anyways, it's not often that already sent messages change in Delta Chat, + // because there is no "delete for everyone" and no "Edit". + & > ul { + // But the scrollable element is not `