Improve UI for threads and conversations in message list

[nimishavijay]

Is your feature request related to a problem? Please describe.

Currently, it is hard to distinguish between single emails and conversations with multiple people. The only indication is the "Re:" in the subject, which can be easy to miss. It's also difficult to distinguish between an unread thread that has a lot of activity vs just one reply.

Describe the solution you'd like

@jancborchardt and I tried to improve this by showing more than one person in the sender list, and adding a count of how many messages in that thread are unread. Gmail, Outlook, Protonmail and Apple Mail all do some form of indicating these.

Some points to note:

• Sender's names are unique and only the 2 most recent senders' names are shown
  For eg.
  Alice sent an email, Bob replied --> Alice and Bob
  Charlie replied --> Bob, Charlie & 1 more
  Alice replied --> Charlie, Alice & 1 more
  Dan replied --> Alice, Dan & 2 more
• Only the most recent sender's avatar is shown
• Unread counter bubble does not need to be shown in case of single emails and threads where all messages have been read
• In case of email threads it shows only the number of unread messages in that thread

Describe alternatives you've considered

No response

Additional context

• Making the timestamp shorter will make this look much better, as @GretaD proposed in Improve Moment.vue, e.g. to get short timestamps nextcloud-libraries/nextcloud-vue#2089
• Counter bubble is using --color-primary-light for bg and --color-primary for text

[ChristophWurst]

It's a very nice visual enhancement. Related to showing more info you might also want to consider #2579 for the mockup. It's something we likely will be able to provide soon.

For the counter of messages, unread status and people in the convo we'll likely also need to restructure data in the backend. This might be a bit harder than in seams on the frontend.