Chat flow experience

[nickvergessen]

After a little discussion we decided to handle the chat like the following:

The conversation list contains the last read message id, from there on the flow should be the following:

• A -- 🆕 -- marker is shown at 1/3 of the screen
• Below it a set of new messages is loaded (covering the bottom 2/3rds of the screen)
• Above the marker old messages are being loaded, serving context for the new messages

More details:

• When there are too few "new" messages available, of course the -- 🆕 -- marker should be moved down (and hidden when there are none at all) and more old messages should be shown instead.
• When you scroll up, the read marker is not changed.
• When you scroll down, the read marker should be set to the last message id that was displayed on the screen.
• If you scroll up, after scrolling down, ideally the -- 🆕 -- marker is moved after the message that is the last one that was on the screen.
• If you are far in the past or not "at the bottom" and there is a new chat message written just now, a "⏬" button should be displayed, which allows you to jump to the bottom of the conversation. (current implementations of iOS and Android are fine)
• If there are unread mentions between -- 🆕 -- and the bottom of the conversation (room API unreadMention), a @ button should be displayed, which allows you to jump to the next unread mention.

  old
  old
-- 🆕 --
  new
  new
  new     
  new     @  ⏬

Sub issues

• Add unread message marker in the chat view #3825