From b5c164a5b39dfd9574a5c225fd2311f6b9eed436 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 23 Jun 2025 18:26:34 +0200
Subject: [PATCH] fix(vue3): provide keys for components, that could be reused

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../ConversationsList/Conversation.vue        | 16 +++--
 .../MessageButtonsBar/MessageButtonsBar.vue   | 58 ++++++++++++++-----
 2 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index e75fb16d876..c2cd8ad3d2d 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -129,7 +129,9 @@
 				</NcActionButton>
 			</template>
 			<template v-else-if="submenu === 'notifications'">
-				<NcActionButton :aria-label="t('spreed', 'Back')"
+				<NcActionButton
+					key="action-back"
+					:aria-label="t('spreed', 'Back')"
 					@click.stop="submenu = null">
 					<template #icon>
 						<IconArrowLeft class="bidirectional-icon" :size="16" />
@@ -154,7 +156,9 @@
 				<template v-if="showCallNotificationSettings">
 					<NcActionSeparator />
 
-					<NcActionButton type="checkbox"
+					<NcActionButton
+						key="notification-calls"
+						type="checkbox"
 						:model-value="notificationCalls"
 						@click="setNotificationCalls(!notificationCalls)">
 						<template #icon>
@@ -167,7 +171,9 @@
 				<template v-if="supportImportantConversations || supportSensitiveConversations">
 					<NcActionSeparator />
 
-					<NcActionButton v-if="supportImportantConversations"
+					<NcActionButton
+						v-if="supportImportantConversations"
+						key="toggle-important"
 						type="checkbox"
 						:description="labelImportantHint"
 						:model-value="item.isImportant"
@@ -177,7 +183,9 @@
 						</template>
 						{{ t('spreed', 'Important conversation') }}
 					</NcActionButton>
-					<NcActionButton v-if="supportSensitiveConversations"
+					<NcActionButton
+						v-if="supportSensitiveConversations"
+						key="toggle-sensitive"
 						type="checkbox"
 						:description="t('spreed', 'Hide message text')"
 						:model-value="item.isSensitive"
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
index ee5ba80848e..0d298f4f9e3 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -66,7 +66,9 @@
 					</NcActionText>
 					<NcActionSeparator />
 
-					<NcActionButton v-if="supportReminders"
+					<NcActionButton
+						v-if="supportReminders"
+						key="set-reminder-menu"
 						is-menu
 						@click.stop="submenu = 'reminder'">
 						<template #icon>
@@ -74,7 +76,9 @@
 						</template>
 						{{ t('spreed', 'Set reminder') }}
 					</NcActionButton>
-					<NcActionButton v-if="isPrivateReplyable"
+					<NcActionButton
+						v-if="isPrivateReplyable"
+						key="reply-privately"
 						close-after-click
 						@click.stop="handlePrivateReply">
 						<template #icon>
@@ -82,7 +86,9 @@
 						</template>
 						{{ t('spreed', 'Reply privately') }}
 					</NcActionButton>
-					<NcActionButton v-if="isEditable"
+					<NcActionButton
+						v-if="isEditable"
+						key="edit-message"
 						:aria-label="t('spreed', 'Edit message')"
 						close-after-click
 						@click.stop="editMessage">
@@ -91,7 +97,9 @@
 						</template>
 						{{ t('spreed', 'Edit message') }}
 					</NcActionButton>
-					<NcActionButton v-if="!isFileShareWithoutCaption"
+					<NcActionButton
+						v-if="!isFileShareWithoutCaption"
+						key="copy-message"
 						close-after-click
 						@click.stop="handleCopyMessageText">
 						<template #icon>
@@ -99,14 +107,18 @@
 						</template>
 						{{ t('spreed', 'Copy message') }}
 					</NcActionButton>
-					<NcActionButton close-after-click
+					<NcActionButton
+						key="copy-message-link"
+						close-after-click
 						@click.stop="handleCopyMessageLink">
 						<template #icon>
 							<OpenInNewIcon :size="20" />
 						</template>
 						{{ t('spreed', 'Copy message link') }}
 					</NcActionButton>
-					<NcActionButton close-after-click
+					<NcActionButton
+						key="mark-as-unread"
+						close-after-click
 						@click.stop="handleMarkAsUnread">
 						<template #icon>
 							<EyeOffOutline :size="16" />
@@ -128,7 +140,9 @@
 							{{ t('spreed', 'Download file') }}
 						</NcActionLink>
 					</template>
-					<NcActionButton v-if="canForwardMessage && !isInNoteToSelf"
+					<NcActionButton
+						v-if="canForwardMessage && !isInNoteToSelf"
+						key="forward-to-note"
 						close-after-click
 						@click="forwardToNote">
 						<template #icon>
@@ -136,7 +150,9 @@
 						</template>
 						{{ t('spreed', 'Note to self') }}
 					</NcActionButton>
-					<NcActionButton v-if="canForwardMessage"
+					<NcActionButton
+						v-if="canForwardMessage"
+						key="forward-message"
 						close-after-click
 						@click.stop="openForwarder">
 						<template #icon>
@@ -145,14 +161,17 @@
 						{{ t('spreed', 'Forward message') }}
 					</NcActionButton>
 					<NcActionSeparator v-if="messageActions.length > 0" />
-					<NcActionButton v-for="action in messageActions"
+					<NcActionButton
+						v-for="action in messageActions"
 						:key="action.label"
 						:icon="action.icon"
 						close-after-click
 						@click="handleMessageAction(action)">
 						{{ action.label }}
 					</NcActionButton>
-					<NcActionButton v-if="isTranslationAvailable && !isFileShareWithoutCaption"
+					<NcActionButton
+						v-if="isTranslationAvailable && !isFileShareWithoutCaption"
+						key="translate-message"
 						close-after-click
 						@click.stop="$emit('showTranslateDialog', true)"
 						@close="$emit('showTranslateDialog', false)">
@@ -163,7 +182,9 @@
 					</NcActionButton>
 					<template v-if="isDeleteable">
 						<NcActionSeparator />
-						<NcActionButton close-after-click
+						<NcActionButton
+							key="delete-message"
+							close-after-click
 							@click.stop="handleDelete">
 							<template #icon>
 								<DeleteIcon :size="16" />
@@ -174,7 +195,9 @@
 				</template>
 
 				<template v-else-if="supportReminders && submenu === 'reminder'">
-					<NcActionButton :aria-label="t('spreed', 'Back')"
+					<NcActionButton
+						key="action-back"
+						:aria-label="t('spreed', 'Back')"
 						@click.stop="submenu = null">
 						<template #icon>
 							<IconArrowLeft class="bidirectional-icon" />
@@ -182,7 +205,9 @@
 						{{ t('spreed', 'Back') }}
 					</NcActionButton>
 
-					<NcActionButton v-if="currentReminder"
+					<NcActionButton
+						v-if="currentReminder"
+						key="remove-reminder"
 						close-after-click
 						@click.stop="removeReminder">
 						<template #icon>
@@ -193,7 +218,8 @@
 
 					<NcActionSeparator />
 
-					<NcActionButton v-for="option in reminderOptions"
+					<NcActionButton
+						v-for="option in reminderOptions"
 						:key="option.key"
 						:aria-label="option.ariaLabel"
 						close-after-click
@@ -213,7 +239,9 @@
 						</template>
 					</NcActionInput>
 
-					<NcActionButton :aria-label="t('spreed', 'Set custom reminder')"
+					<NcActionButton
+						key="set-reminder"
+						:aria-label="t('spreed', 'Set custom reminder')"
 						close-after-click
 						@click.stop="setReminder(customReminderTimestamp)">
 						<template #icon>