Message view redesign

[cketti]

We're currently working on a new design for the message view. A (non-final) preview can be seen below.

Current state

Preview

Notes on the image:

• The chip containing "Thunderbird Ryan" is the name of the account the message belongs to. The chip is colored using the account color. It will only be displayed if there's more than one account.
• The text below the chip is the subject of the message.
• The circle-shaped image is the contact picture of the sender of the message.
• The text at the top of the gray area, to the right of the contact picture is the name of the sender.
• To the right we have a reply action and an overflow menu containing more actions.
• Below the sender name there's information about the recipients. If the account only has one identity and the message was addressed to it, "to me" will be displayed. If the account has multiple identities the text that is shown will be "to <name of identity>". If the message was addressed to someone else their display name will be shows. For now at most two recipient names will be displayed. If there's more recipients "+x" will be shown.
• If a crypto provider is enabled for the account, an encryption indicator is displayed in front of the recipient text.
• The "Important, Todo, Work" text is labels added to the message. This won't be relevant until #769 is implemented.
• The "show remote images" button is not final and might move and/or change appearance.

Tapping any part of the gray area other than the action buttons on the right (reply, overflow menu), will open a bottom sheet containing details about the message.

If there are a lot of recipients the bottom sheet can be dragged up to make it cover the whole screen. In that case we intend to provide a way to search/filter the recipient list.

Feedback

We're still working on the design. But if you're missing a feature or have other feedback, please let us know in a comment.

---

Initial design considerations

A message view redesign should include the following features:

• #6180

And it should keep in mind these features that we want to add further down the line:

• #6181 Email addresses need to be far enough apart so tapping them reliably is not a problem.
• #1119 We probably want to display the email address below the name and then hide the recipient addresses.
• #769 Figure out where to display them.
• #762 Figure out where to display the folder name(s) (JMAP supports messages living in multiple folders).
• #6197 All of the per-message information/actions should live in the message header area, because at some point we'll want to display more than one message in this view. We need some touch area that collapses/expands the whole message.
• #1397 We need an overflow menu or some other place to put (less important) per-message actions like this.

This is what the message view looks like in other apps…

Gmail:

Outlook:

FairEmail:

EDIT 2022-09-18: Updated with latest design.

[michaelblyons]

What do you think about moving the "Load Images" button above the Line of Death? Granted, showing images is already loading offsite resources, but it's not potentially taking you in your browser to some arbitrary link.

I imagine someone could CSS up a link that looks pretty close (although not exactly) like your button at the top of an email's body without using any images. (Maybe with Unicode characters?)

[cketti]

We'll make sure there will be a line of death. The current plan is to add some margin at the top of the web view. So if a message manages to display a "show remote images" button that looks exactly like the one in the app, it would be displayed something like this:

[litLizard69]

This looks good! I would vote for implementing this in the future.

[dbolton]

I like that the new proposed design better than the current design. I like the larger icons. Larger icons and having the icons closer to the thumbs are two things I miss from Samsung email (screenshot below).

Having the three-dot menu button twice on the same view (in the proposed design) seems odd.

[litLizard69]

I think a vote on implementing this and other UI enhancements should be started.

[allanwind]

Just a heads-up that I filed #6827 for the new message view being so bloated that it's a serious UX regression of the primary use case of reading mail. Sorry.