feat: add UI elements for important/sensitive conversations

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

Author: Antreesy

src/components/ConversationSettings/NotificationsSettings.vue

@@ -29,6 +29,32 @@
 			@update:model-value="setNotificationCalls">
 			{{ t('spreed', 'Notify about calls in this conversation') }}
 		</NcCheckboxRadioSwitch>
+
+		<NcCheckboxRadioSwitch v-if="supportImportantConversations"
+			id="important"
+			v-model="isImportant"
+			aria-describedby="important-hint"
+			type="switch"
+			@update:model-value="toggleImportant">
+			{{ t('spreed', 'Important conversation') }}
+		</NcCheckboxRadioSwitch>
+
+		<p id="important-hint" class="notifications__hint">
+			{{ t('spreed', '"Do not disturb" user status is ignored for important conversations') }}
+		</p>
+
+		<NcCheckboxRadioSwitch v-if="supportSensitiveConversations"
+			id="sensitive"
+			v-model="isSensitive"
+			aria-describedby="sensitive-hint"
+			type="switch"
+			@update:model-value="toggleSensitive">
+			{{ t('spreed', 'Sensitive conversation') }}
+		</NcCheckboxRadioSwitch>
+
+		<p id="sensitive-hint" class="notifications__hint">
+			{{ t('spreed', 'Message preview will be disabled in conversation list and notifications') }}
+		</p>
 	</div>
 </template>
 
@@ -44,6 +70,9 @@ import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwit
 import { PARTICIPANT } from '../../constants.ts'
 import { hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 
+const supportImportantConversations = hasTalkFeature('local', 'important-conversations')
+const supportSensitiveConversations = hasTalkFeature('local', 'sensitive-conversations')
+
 const notificationLevels = [
 	{ value: PARTICIPANT.NOTIFY.ALWAYS, label: t('spreed', 'All messages') },
 	{ value: PARTICIPANT.NOTIFY.MENTION, label: t('spreed', '@-mentions only') },
@@ -67,13 +96,17 @@ export default {
 	setup() {
 		return {
 			notificationLevels,
+			supportImportantConversations,
+			supportSensitiveConversations,
 		}
 	},
 
 	data() {
 		return {
 			notifyCalls: this.conversation.notificationCalls === PARTICIPANT.NOTIFY_CALLS.ON,
 			notificationLevel: this.conversation.notificationLevel.toString(),
+			isImportant: this.conversation.isImportant,
+			isSensitive: this.conversation.isSensitive,
 		}
 	},
 
@@ -115,6 +148,24 @@ export default {
 			const notificationCalls = isChecked ? PARTICIPANT.NOTIFY_CALLS.ON : PARTICIPANT.NOTIFY_CALLS.OFF
 			await this.$store.dispatch('setNotificationCalls', { token: this.conversation.token, notificationCalls })
 		},
+
+		/**
+		 * Toggle the important flag for the conversation
+		 *
+		 * @param {boolean} isImportant The important flag to set.
+		 */
+		async toggleImportant(isImportant) {
+			await this.$store.dispatch('toggleImportant', { token: this.conversation.token, isImportant })
+		},
+
+		/**
+		 * Toggle the sensitive flag for the conversation
+		 *
+		 * @param {boolean} isSensitive The sensitive flag to set.
+		 */
+		async toggleSensitive(isSensitive) {
+			await this.$store.dispatch('toggleSensitive', { token: this.conversation.token, isSensitive })
+		}
 	},
 }
 </script>
@@ -125,4 +176,8 @@ export default {
 	align-items: center;
 	gap: calc(2 * var(--default-grid-baseline));
 }
+
+.notifications__hint {
+	color: var(--color-text-maxcontrast);
+}
 </style>

src/components/LeftSidebar/ConversationsList/Conversation.vue

@@ -163,6 +163,30 @@
 						{{ t('spreed', 'Notify about calls') }}
 					</NcActionButton>
 				</template>
+
+				<template v-if="supportImportantConversations || supportSensitiveConversations">
+					<NcActionSeparator />
+
+					<NcActionButton v-if="supportImportantConversations"
+						type="checkbox"
+						:model-value="item.isImportant"
+						@click="toggleImportant(!item.isImportant)">
+						<template #icon>
+							<IconMessageAlert :size="16" />
+						</template>
+						{{ t('spreed', 'Important conversation') }}
+					</NcActionButton>
+
+					<NcActionButton v-if="supportSensitiveConversations"
+						type="checkbox"
+						:model-value="item.isSensitive"
+						@click="toggleSensitive(!item.isSensitive)">
+						<template #icon>
+							<IconShieldLock :size="16" />
+						</template>
+						{{ t('spreed', 'Sensitive conversation') }}
+					</NcActionButton>
+				</template>
 			</template>
 		</template>
 
@@ -239,7 +263,9 @@ import IconDelete from 'vue-material-design-icons/Delete.vue'
 import IconExitToApp from 'vue-material-design-icons/ExitToApp.vue'
 import IconEye from 'vue-material-design-icons/Eye.vue'
 import IconEyeOff from 'vue-material-design-icons/EyeOff.vue'
+import IconMessageAlert from 'vue-material-design-icons/MessageAlert.vue'
 import IconPhoneRing from 'vue-material-design-icons/PhoneRing.vue'
+import IconShieldLock from 'vue-material-design-icons/ShieldLock.vue'
 import IconStar from 'vue-material-design-icons/Star.vue'
 import IconVideo from 'vue-material-design-icons/Video.vue'
 import IconVolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
@@ -263,6 +289,8 @@ import { hasTalkFeature } from '../../../services/CapabilitiesManager.ts'
 import { copyConversationLinkToClipboard } from '../../../utils/handleUrl.ts'
 
 const supportsArchive = hasTalkFeature('local', 'archived-conversations-v2')
+const supportImportantConversations = hasTalkFeature('local', 'important-conversations')
+const supportSensitiveConversations = hasTalkFeature('local', 'sensitive-conversations')
 
 const notificationLevels = [
 	{ value: PARTICIPANT.NOTIFY.ALWAYS, label: t('spreed', 'All messages') },
@@ -287,7 +315,9 @@ export default {
 		IconExitToApp,
 		IconEye,
 		IconEyeOff,
+		IconMessageAlert,
 		IconPhoneRing,
+		IconShieldLock,
 		IconStar,
 		IconVolumeHigh,
 		IconVolumeOff,
@@ -322,6 +352,7 @@ export default {
 					canDeleteConversation: false,
 					canLeaveConversation: false,
 					hasCall: false,
+					isImportant: false,
 					isSensitive: false,
 				}
 			},
@@ -345,6 +376,8 @@ export default {
 		return {
 			AVATAR,
 			supportsArchive,
+			supportImportantConversations,
+			supportSensitiveConversations,
 			submenu,
 			isLeaveDialogOpen,
 			isDeleteDialogOpen,
@@ -529,6 +562,24 @@ export default {
 			})
 		},
 
+		/**
+		 * Toggle the important flag for the conversation
+		 *
+		 * @param {boolean} isImportant The important flag to set.
+		 */
+		async toggleImportant(isImportant) {
+			await this.$store.dispatch('toggleImportant', { token: this.item.token, isImportant })
+		},
+
+		/**
+		 * Toggle the sensitive flag for the conversation
+		 *
+		 * @param {boolean} isSensitive The sensitive flag to set.
+		 */
+		async toggleSensitive(isSensitive) {
+			await this.$store.dispatch('toggleSensitive', { token: this.item.token, isSensitive })
+		},
+
 		onClick() {
 			// add as temporary item that will refresh after the joining process is complete
 			if (this.isSearchResult) {

src/store/conversationsStore.js

@@ -35,6 +35,10 @@ import {
 	createConversation,
 	addToFavorites,
 	removeFromFavorites,
+	markAsImportant,
+	markAsUnimportant,
+	markAsSensitive,
+	markAsInsensitive,
 	archiveConversation,
 	unarchiveConversation,
 	fetchConversations,
@@ -581,6 +585,36 @@ const actions = {
 		}
 	},
 
+	async toggleImportant(context, { token, isImportant }) {
+		if (!context.getters.conversations[token]) {
+			return
+		}
+
+		try {
+			const response = isImportant
+				? await markAsImportant(token)
+				: await markAsUnimportant(token)
+			context.commit('addConversation', response.data.ocs.data)
+		} catch (error) {
+			console.error('Error while changing the conversation important status: ', error)
+		}
+	},
+
+	async toggleSensitive(context, { token, isSensitive }) {
+		if (!context.getters.conversations[token]) {
+			return
+		}
+
+		try {
+			const response = isSensitive
+				? await markAsSensitive(token)
+				: await markAsInsensitive(token)
+			context.commit('addConversation', response.data.ocs.data)
+		} catch (error) {
+			console.error('Error while changing the conversation sensitive status: ', error)
+		}
+	},
+
 	async toggleLobby({ commit, getters }, { token, enableLobby }) {
 		if (!getters.conversations[token]) {
 			return