Order and visualization of meetings

Is your feature request related to a problem? Please describe.
When visiting a meetings component it is not clear whether an event has already taken place or is in the future. Furthermore, the order of events is always the same, sorted by start_date from in reverse order (this change has been done recently), meaning the further in time an event happens, the sooner appears in the list.

Describe the solution you'd like
We propose 3 improvements to the meetings components:

Divide the default sorting of proposals into 2 categories:

1. if it's in the past, order them by start_date in ascendant mode (user sees first what happened more recently).
2. If it's in the future, order them in descendent mode (user sees first the next coming event first).

This casuistic raises the question on what happens when the user want's to see all events, past and future. In this case I'd maintain the described order and put the future events in top ordered ASC and then the past ones ordered DESC (technically, this would mean to merge to queries to sort them differently).

In addition, we would like to also improve the visualization these two types of events (past and future) by adding the success and muted classes to the card--meeting so the user has quick visual clue on what's more relevant.

This would look like this:

Describe alternatives you've considered
Instead of using colors to differenciate the past and future meetings, use a separator element between them (for instance a bar or an hr html element).

Additional context

The third improvement is to add images to the meeting card (as already happens in proposals). This just uses the current system of attachments and, if one of them is a photo, uses it as a card-image:

Does this issue could impact on users private data?

NO

Funded by

Yes, Som Energia & Platoniq