Full-width mail list

[marcoambrosini]

Feature Request

As a Nextcloud Mail user I may prefer to see as much information about a messages/thread as possible before I open it. The current view, for example, shows only a small part of the subject and preview text:

Describe the solution you'd like

Allow me to switch to a full-width message/thread list. In other words, the three column design (nav + list + content) becomes two column: nav + list or nav + content. The user will see the list. When they navigate to a message/thread, the content shows.

To switch between the views we need a three way button or actions menu. This button is places next to the button for advanced search.

References

This is the trend in some of the major email apps as UX people realize that the idea of multitasking was a bit overrated.

Product	Screenshot
Hey
Gmail
Spark Mail

Implementation

Right now Mail uses the following structure:

<NcContent>
  <Navigation />
  <AppContent>
    <div slot="list">
      <SearchMessages />
      <AppContentList>
        <Mailbox />
      </AppContentList>
    </div>
    <AppContentDetails />
  </AppContent>
</NcContent>

Ideally, we can keep the structure as-is, but enhance AppContent and ListItem to work with one or two columns:

List + content	List only	Content only
<NcContent> <Navigation /> <AppContent layout="vertical-split"> <div slot="list"> <SearchMessages /> <AppContentList> <ListItem layout="compact" /> </AppContentList> </div> <AppContentDetails /> </AppContent> </NcContent>	<NcContent> <Navigation /> <AppContent layout="list"> <div slot="list"> <SearchMessages /> <AppContentList> <ListItem layout="wide" /> </AppContentList> </div> <AppContentDetails /><!-- not rendered --> </AppContent> </NcContent>	<NcContent> <Navigation /> <AppContent layout="content"> <div slot="list"><!-- not rendered --> <SearchMessages /> <AppContentList> <ListItem layout="wide" /> </AppContentList> </div> <AppContentDetails /> </AppContent> </NcContent>

Long code snipped short, we don't control the rendering, we just tell AppContent and ListItem the layout to render.

This gives us the following advantages

1. We do not have to rip apart the ListItem with deep selectors or write a completely new component.
2. The new layouts streamlines mobile view with desktop view.
3. Other apps can use this too, e.g. to offer a better mobile view or a layout switch, if desired.
4. It will be easy to implement Allow stacking message list and reading pane vertically #8309

Challenges

• The table(-like) structure of AppContentList and ListItem for the list-only mode and potential wrapping components between (currently Mailbox, EnvelopeList and transition)

[dugite-code]

I used to do fix this with CSS forcing a horizontal layout. Unfortunately this no longer really works well at all. That said this could be added to the app as the splitpanes supports changing the pane orientation out of the box: https://antoniandre.github.io/splitpanes/#change-direction

My previous issue regarding this: #367

[marcoambrosini]

Another argument for having this view and making it default is how tall emails have actually gotten over time. My 16-inch laptop fits only a handful. The situation worsens if we use tags. On top of the usability issue, I think this elements just look ugly and disproportionate.

With all that space taken up, I think it's unacceptable that we're truncating subjects over 4-5 words

If we adopt full-width mail elements, we'll be able to use 1 or 2 line tops elements and fit everything in there without wrapping

ref: current state

[HLFH]

That'd be awesome. That would make life easier for people migrating from Google Workspace to Nextcloud, and being too much used to the Gmail UI.

[GretaD]

@nextcloud/designers I would like to start working on this asap, please add it for review on your backlog and please send me the mockups/insights when you have them :)