Merge pull request #11592 from nextcloud/feat/4610/sticky-date-separator

Feat(MessagesList): Soft update messages list AND add sticky date separator.
nextcloud · Feb 28, 2024 · f158f92 · f158f92
2 parents 18c2d40 + 8f599c2
commit f158f92
Show file tree

Hide file tree

Showing 5 changed files with 271 additions and 89 deletions.
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<!-- reactions buttons and popover with details -->
-	<div class="reactions-wrapper">
+	<div v-if="reactionsCount && reactionsSorted" class="reactions-wrapper">
 		<NcPopover v-for="reaction in reactionsSorted"
 			:key="reaction"
 			:delay="200"
@@ -175,11 +175,14 @@ export default {
 		},
 
 		reactionsSorted() {
-			return this.detailedReactions
-				? Object.keys(this.detailedReactions)
+			if (this.detailedReactions) {
+				return Object.keys(this.detailedReactions)
 					.sort((a, b) => this.detailedReactions[b].length - this.detailedReactions[a].length)
-				: Object.keys(this.plainReactions)
+			} else if (this.plainReactions) {
+				return Object.keys(this.plainReactions)
 					.sort((a, b) => this.plainReactions[b] - this.plainReactions[a])
+			}
+			return undefined
 		},
 
 		/**
@@ -243,6 +246,9 @@ export default {
 		},
 
 		reactionsCount(reaction) {
+			if (!this.detailedReactions || !this.plainReactions) {
+				return undefined
+			}
 			return this.detailedReactions
 				? this.detailedReactions[reaction]?.length
 				: this.plainReactions[reaction]

diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<div class="wrapper">
+	<li class="wrapper">
 		<div class="messages__avatar">
 			<AvatarWrapper :id="actorId"
 				:name="actorDisplayName"
@@ -47,7 +47,7 @@
 				:actor-type="actorType"
 				:actor-id="actorId" />
 		</ul>
-	</div>
+	</li>
 </template>
 
 <script>

diff --git a/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<div class="wrapper wrapper--system">
+	<li class="wrapper wrapper--system">
 		<div v-for="messagesCollapsed in messagesGroupedBySystemMessage"
 			:key="messagesCollapsed.id"
 			class="messages-group__system">
@@ -45,7 +45,7 @@
 					:previous-message-id="getPrevMessageId(message)" />
 			</ul>
 		</div>
-	</div>
+	</li>
 </template>
 
 <script>