From b9ccd46a7f437b14358f3674c2c6f849606d811e Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 30 Jul 2024 17:44:09 +0200
Subject: [PATCH] fix(Reactions): inject reactions in grid layout, drop unused
 styles, add thumbnails to reserve space for hover buttons

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../MessagesGroup/Message/Message.vue         | 18 ++++++------
 .../Message/MessagePart/MessageBody.vue       |  4 +++
 .../Message/MessagePart/Reactions.vue         | 28 +++++++++++--------
 3 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index e16d30fa4bf..c98ebe32d1b 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -24,15 +24,15 @@
 				:is-deleting="isDeleting"
 				:has-call="conversation.hasCall"
 				:message="message"
-				:read-info="readInfo" />
-
-			<!-- reactions buttons and popover with details -->
-			<Reactions v-if="Object.keys(message.reactions).length"
-				:id="message.id"
-				:token="message.token"
-				:can-react="canReact"
-				:show-controls="isHovered || isFollowUpEmojiPickerOpen"
-				@emoji-picker-toggled="toggleFollowUpEmojiPicker" />
+				:read-info="readInfo">
+				<!-- reactions buttons and popover with details -->
+				<Reactions v-if="Object.keys(message.reactions).length"
+					:id="message.id"
+					:token="message.token"
+					:can-react="canReact"
+					:show-controls="isHovered || isFollowUpEmojiPickerOpen"
+					@emoji-picker-toggled="toggleFollowUpEmojiPicker" />
+			</MessageBody>
 		</div>
 
 		<!-- Message actions -->
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
index 4bdc05eb890..2a5bed512f6 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
@@ -109,6 +109,9 @@
 				<CheckIcon :size="16" />
 			</div>
 		</div>
+
+		<!-- Reactions slot -->
+		<slot v-if="!isDeletedMessage" />
 	</div>
 </template>
 
@@ -450,6 +453,7 @@ export default {
 .message-main {
 	display: grid;
 	grid-template-columns: minmax(0, $messages-text-max-width) $messages-info-width;
+	grid-row-gap: var(--default-grid-baseline);
 	justify-content: space-between;
 	align-items: flex-start;
 	min-width: 100%;
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue
index 1d4c664d2c5..dd72199aec7 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue
@@ -15,7 +15,7 @@
 			@after-show="fetchReactions">
 			<template #trigger>
 				<NcButton :type="userHasReacted(reaction) ? 'primary' : 'secondary'"
-					class="reaction-button"
+					size="small"
 					@click="handleReactionClick(reaction)">
 					{{ reaction }} {{ reactionsCount(reaction) }}
 				</NcButton>
@@ -39,11 +39,12 @@
 
 		<!-- all reactions button -->
 		<NcButton v-if="showControls"
-			class="reaction-button"
+			size="small"
 			:title="t('spreed', 'Show all reactions')"
 			@click="showAllReactions = true">
 			<HeartOutlineIcon :size="15" />
 		</NcButton>
+		<span v-else class="reaction-button--thumbnail" />
 
 		<!-- More reactions picker -->
 		<NcEmojiPicker v-if="canReact && showControls"
@@ -52,7 +53,7 @@
 			@select="handleReactionClick"
 			@after-show="emitEmojiPickerStatus"
 			@after-hide="emitEmojiPickerStatus">
-			<NcButton class="reaction-button"
+			<NcButton size="small"
 				:title="t('spreed', 'Add more reactions')"
 				:aria-label="t('spreed', 'Add more reactions')">
 				<template #icon>
@@ -60,6 +61,7 @@
 				</template>
 			</NcButton>
 		</NcEmojiPicker>
+		<span v-else-if="canReact" class="reaction-button--thumbnail" />
 
 		<!-- all reactions modal-->
 		<ReactionsList v-if="showAllReactions"
@@ -274,20 +276,24 @@ export default {
 </script>
 <style lang="scss" scoped>
 .reactions-wrapper {
+	--minimal-button-width: 48px;
 	display: flex;
 	flex-wrap: wrap;
-	margin: 4px 175px 4px -2px;
-}
-.reaction-button {
-	// Clear server rules
-	min-height: 0 !important;
-	margin: 2px;
-	height: 26px;
-	padding: 0 6px !important;
+	gap: var(--default-grid-baseline);
 
+	// Overwrite NcButton styles
+	:deep(.button-vue) {
+		min-width: var(--minimal-button-width);
+	}
 	:deep(.button-vue__text) {
 		font-weight: normal;
 	}
+
+	.reaction-button--thumbnail {
+		height: var(--clickable-area-small);
+		width: var(--minimal-button-width);
+		pointer-events: none;
+	}
 }
 
 .reaction-details {