Fixes #30405

design discussion: CZO Link

• Fix puppeteer tests

• We want to add navigation buttons below the bottom message in the view. They should make it more convenient to perform common navigation actions, and remove the need for banners to mark messages as read.

• End, the "Scroll to bottom" button, and any other ways to jump to the bottom of the view should select this new navigation bar rather than the last message.

• All the bottom of message feed banners with a "Mark as read" button should be removed as part of this issue.

• The initial goal is to get to a testable prototype, as we expect to need to iterate on the UX once we can play with it. It's fine to leave any tricky implementation details for later if they don't seem critical (with notes on the PR).

Which buttons, when and where

• We can start by making these all be medium-attention grey buttons (don't have to 100% match the design; whatever is easy to prototype).

Home view

• - Label: Home view
• - Placement: Left
• - When to show: In all message views, unless you are already in your home view.
• - What it does: Goes to your selected home view
• - Tooltip:

If Esc goes to home view:

Go to your home view Esc
Otherwise:
Go to your home view ⌘+[

Mark as read

• - Label: Mark as read
• - What it does: Marks all messages in the current view as read.
• - Placement: Center
• - When to show: Replacing all the situations when we’d show a banner with this button; note that there's more than one type of banner.
• - Tooltip:

1st line:

Mark as read
2nd line, if the banner was due to the setting (Never or Only in conversation views):
Messages are not automatically marked as read according to your settings.
2nd line, otherwise (same as the corresponding banner):
To preserve your reading state, this view does not mark messages as read.

Next unread conversation

• Note that neither button is shown in other types of message views (search views, global feed).

This will resolve #18728.

DMs

• - Label: Next unread conversation
• - Placement: Right
• - When to show: In DM conversations and the DM feed when there are unread DM conversations.
• - What it does: P
• - Tooltip:

Go to next unread DM conversation [P]

Channel feed and topic views

• - Label: Next unread conversation
• - Placement: Right
• - When to show: In topic conversation views, /near views and channel feeds.
• - What it does: N
• - Tooltip:

Go to next unread topic [N]

Keyboard navigation behavior

Initially, the user will generally navigate to this bar as a whole (selected with the blue box). From there:

• - In a conversation view, pressing Enter should start a reply to the current conversation, as it would on a message.

• In non-conversation views, we can prototype with it doing nothing.

• - Pressing Tab should select a button in the navigation bar.

• - Pressing right arrow should select a button in the navigation bar.

• We should probably remove the selection ring on the row as a whole at that point, but we'll have to test.

• [ ]

• - If "Mark as read" button is there, select that one.

• - Otherwise, pick between "Home view" and "Next unread conversation"

• depending on which one was used more recently, if both are present.

• - Once one of the buttons is selected, right/left arrows and Tab/Shift+Tab should work to move between them, without cycling. (Maybe left from the leftmost and/or right from the rightmost would select the whole row again?)

Questions and follow-ups

• Should we add any other actions, e.g., "Next unread followed topic"?