Feat(MessagesList): Soft update messages list AND add sticky date separator.

[DorraJaouad]

☑️ Resolves

• Fix Make last date divider sticky #4610

• Refactor messages groups. It is now broken down by Date then by Author+time .

• Light refactoring for MessagesList, it was necessary 😶.

• Soft update messages list, keep the same object and modify only what was changed.

• Added sticky date separator.

Note

As the date is sticky and the loading spinner needs to be in absolute position, it will be overlapped. Therefore, the loading spinner should be in another position other than middle, change the loading visualisation, or removed ( like in other messengers where the date separator is sticky)

Issues found to fix:

• Need more accurate calculation in the comparison between viewport and ul top values ( there is a slight positive gap that should be taken into account)
• The loading spinner ( see above )

🖌️ UI Checklist

🖼️ Screenshots / Screencasts

Recording.2024-02-21.190948.mp4

🚧 Tasks

• Check Soft update thoroughly
• Reduce the opacity when it is shown sticky and/or make it darker in order to not to blend with system messages?

Follow-up

• Date separators label are updating when today becomes yesterday ( leave chat open and pass midnight).
• Spinner position is not perfect

🏁 Checklist

• 🌏 Tested with Chrome, Firefox and Safari or should not be risky to browser differences
• 🖌️ Design was reviewed, approved or inspired by the design team
• ⛑️ Tests are included or not possible
• 📗 User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required

[Antreesy]

Here goes the first part. Haven't check soft update and sticky update yet

[Antreesy]

Hopefully, the finish line

[Antreesy]

All the important code is good, if there's any regressions, we'll find them soon)

Couple of things:

• all grouping code I'd move to composable, but not neccessary now
• sticky date could remain longer on the screen
• currentDay isn't reliable as-is
• loading spinner is still badly visible. Maybe we could adjust it like this, aligned with avatars:

.scroller {
	padding-top: 4px;

	&__loading {
		top: 4px;
		left: // adjust;
		height: 32px;
		width: 32px;
	}
}

[Antreesy]

Time to face inevitable