Update `Direct Messages` and `Rooms` headers from UI

This issue is: Ready to build

Problem

What would you like to do?

Remove the Direct Messages and Rooms expandable headers from the DMs and Rooms tabs respectively.

Why would you like to do it?

It is annoyingly frequent that I accidentally tap the header and hide the chat list when I’m intending to open the top chat.

Moreover, I don’t see the point of these headers. Not only are they buggy (switching the tab and switching back expands them again), but seemingly redundant. The title bar of the app already tells you which tab you have opened. The headers seem to have been copied from the Element Web UI directly, without an actual use case.

The only expandable header that makes sense is Invites, because you might get a lot at once, and want to hide them so you can focus on your existing chat list.

How would you like to achieve it?

I would like to see the 2 headers removed completely. The Invites header can have a distinctly visible UI boundary so that it’s clear when the invites end and the existing DMs/Rooms start.

Solution

Based on our chat, here is the proposed solution. The changes I have made are:

• Created a band under collapsible /expandable headers
• Added no. of items in the list (similar to ios)
• Changed type style of header to make it clearer

Link to Figma file: https://www.figma.com/file/QugKzfgL4gISlsmluw9EVb/Change-expandable-headers?node-id=4%3A2593

Also, sections should only appear here if they have items in them.

[amshakal]

^ Just what @daniellekirkwood said

[amshakal]

Based on our chat, here is the proposed solution. The changes I have made are:

• Created a band under collapsible /expandable headers
• Added no. of items in the list (similar to ios)
• Changed type style of header to make it clearer

Link to Figma file: https://www.figma.com/file/QugKzfgL4gISlsmluw9EVb/Change-expandable-headers?node-id=4%3A2593