From 5ac8831e63174be2c40bb8538b1ce61884178031 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 4 Mar 2024 15:28:51 +0100
Subject: [PATCH] feat(NewMessage): remember silent chat per conversation

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/NewMessage/NewMessage.vue | 86 ++++++++++++++++--------
 1 file changed, 57 insertions(+), 29 deletions(-)

diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
index 9a0a6ce9ffa..642d707d23c 100644
--- a/src/components/NewMessage/NewMessage.vue
+++ b/src/components/NewMessage/NewMessage.vue
@@ -108,7 +108,7 @@
 					@tribute-active-false.native="isTributePickerActive = false"
 					@input="handleTyping"
 					@paste="handlePastedFiles"
-					@submit="handleSubmit({ silent: false })" />
+					@submit="handleSubmit" />
 			</div>
 
 			<!-- Audio recorder -->
@@ -142,29 +142,27 @@
 
 			<!-- Send buttons -->
 			<template v-else>
-				<NcActions v-if="!broadcast"
-					:container="container"
-					force-menu>
-					<!-- Silent send -->
+				<NcActions v-if="!broadcast" :container="container" force-menu>
 					<NcActionButton close-after-click
-						icon="icon-upload"
-						:name="t('spreed', 'Send without notification')"
-						@click="handleSubmit({ silent: true })">
+						:name="silentSendLabel"
+						@click="setSilentChat(!silentChat)">
 						{{ silentSendInfo }}
 						<template #icon>
-							<BellOff :size="16" />
+							<BellIcon v-if="silentChat" :size="16" />
+							<BellOffIcon v-else :size="16" />
 						</template>
 					</NcActionButton>
 				</NcActions>
-				<!-- Send -->
+
 				<NcButton :disabled="disabled"
 					type="tertiary"
 					native-type="submit"
-					:title="t('spreed', 'Send message')"
-					:aria-label="t('spreed', 'Send message')"
-					@click="handleSubmit({ silent: false })">
+					:title="sendMessageLabel"
+					:aria-label="sendMessageLabel"
+					@click="handleSubmit">
 					<template #icon>
-						<Send :size="16" />
+						<SendVariantOutlineIcon v-if="silentChat" :size="18" />
+						<SendIcon v-else :size="16" />
 					</template>
 				</NcButton>
 			</template>
@@ -194,11 +192,13 @@
 <script>
 import debounce from 'debounce'
 
-import BellOff from 'vue-material-design-icons/BellOff.vue'
+import BellIcon from 'vue-material-design-icons/Bell.vue'
+import BellOffIcon from 'vue-material-design-icons/BellOff.vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
-import Send from 'vue-material-design-icons/Send.vue'
+import SendIcon from 'vue-material-design-icons/Send.vue'
+import SendVariantOutlineIcon from 'vue-material-design-icons/SendVariantOutline.vue'
 
 import { getCapabilities } from '@nextcloud/capabilities'
 import { showError } from '@nextcloud/dialogs'
@@ -221,6 +221,7 @@ import NewMessageTypingIndicator from './NewMessageTypingIndicator.vue'
 import Quote from '../Quote.vue'
 
 import { ATTENDEE, CONVERSATION, PARTICIPANT, PRIVACY } from '../../constants.js'
+import BrowserStorage from '../../services/BrowserStorage.js'
 import { EventBus } from '../../services/EventBus.js'
 import { shareFile } from '../../services/filesSharingServices.js'
 import { searchPossibleMentions } from '../../services/mentionsService.js'
@@ -255,11 +256,13 @@ export default {
 		NewMessageTypingIndicator,
 		Quote,
 		// Icons
-		BellOff,
+		BellIcon,
+		BellOffIcon,
 		CheckIcon,
 		CloseIcon,
 		EmoticonOutline,
-		Send,
+		SendIcon,
+		SendVariantOutlineIcon,
 	},
 
 	props: {
@@ -323,7 +326,7 @@ export default {
 	data() {
 		return {
 			text: '',
-			conversationIsFirstInList: false,
+			silentChat: false,
 			// True when the audio recorder component is recording
 			isRecordingAudio: false,
 			showPollEditor: false,
@@ -379,6 +382,14 @@ export default {
 			}
 		},
 
+		sendMessageLabel() {
+			if (this.silentChat) {
+				return t('spreed', 'Send message silently')
+			} else {
+				return t('spreed', 'Send message')
+			}
+		},
+
 		parentMessage() {
 			const parentId = this.chatExtrasStore.getParentIdToReply(this.token)
 			return parentId && this.$store.getters.message(this.token, parentId)
@@ -425,11 +436,21 @@ export default {
 				|| this.conversation.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER
 		},
 
+		silentSendLabel() {
+			return this.silentChat
+				? t('spreed', 'Send with notification')
+				: t('spreed', 'Send without notification')
+		},
+
 		silentSendInfo() {
 			if (this.isOneToOne) {
-				return t('spreed', 'The participant will not be notified about this message')
+				return this.silentChat
+					? t('spreed', 'The participant will be notified about new messages')
+					: t('spreed', 'The participant will not be notified about new messages')
 			} else {
-				return t('spreed', 'The participants will not be notified about this message')
+				return this.silentChat
+					? t('spreed', 'Participants will be notified about new messages')
+					: t('spreed', 'Participants will not be notified about new messages')
 			}
 		},
 
@@ -513,6 +534,7 @@ export default {
 					this.text = this.messageToEdit
 						? this.chatEditInput
 						: this.chatInput
+					this.silentChat = !!BrowserStorage.getItem('silentChat_' + this.token)
 				} else {
 					this.text = ''
 				}
@@ -603,13 +625,7 @@ export default {
 			})
 		},
 
-		/**
-		 * Sends the new message
-		 *
-		 * @param {object} options the submit options
-		 * @param {boolean} options.silent whether the message should trigger notifications
-		 */
-		async handleSubmit(options) {
+		async handleSubmit() {
 			// Submit event has enter key listener
 			// Handle edit here too
 			if (this.messageToEdit) {
@@ -628,6 +644,8 @@ export default {
 				}
 			}
 
+			const options = { silent: this.silentChat }
+
 			if (this.hasText) {
 				this.text = parseSpecialSymbols(this.text)
 			}
@@ -697,7 +715,7 @@ export default {
 
 				const loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\nDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.'
 				this.text = loremIpsum.slice(0, 25 + randomNumber)
-				await this.handleSubmit({ silent: false })
+				await this.handleSubmit()
 			}
 		},
 
@@ -989,6 +1007,16 @@ export default {
 		handleAbortEdit() {
 			this.chatExtrasStore.removeMessageIdToEdit(this.token)
 		},
+
+		setSilentChat(value) {
+			if (value) {
+				BrowserStorage.setItem('silentChat_' + this.token, 'true')
+				this.silentChat = true
+			} else {
+				BrowserStorage.removeItem('silentChat_' + this.token)
+				this.silentChat = false
+			}
+		},
 	},
 }
 </script>