From e264b0e038d8561211a1b899d2a888de14c9548b Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 25 Nov 2024 10:19:18 +0100
Subject: [PATCH 1/3] fix: introduce submenu logic in Conversation component

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../ConversationsList/Conversation.vue        | 130 +++++++++---------
 1 file changed, 67 insertions(+), 63 deletions(-)

diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index a859a462cde..8a78f2ee549 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -25,69 +25,71 @@
 			<span v-html="conversationInformation" />
 		</template>
 		<template v-if="!isSearchResult" #actions>
-			<NcActionButton v-if="canFavorite"
-				key="toggle-favorite"
-				close-after-click
-				@click="toggleFavoriteConversation">
-				<template #icon>
-					<IconStar :size="16" :fill-color="!item.isFavorite ? '#FFCC00' : undefined" />
-				</template>
-				{{ labelFavorite }}
-			</NcActionButton>
-
-			<NcActionButton key="copy-link" @click.stop="handleCopyLink">
-				<template #icon>
-					<IconContentCopy :size="16" />
-				</template>
-				{{ t('spreed', 'Copy link') }}
-			</NcActionButton>
-
-			<NcActionButton key="toggle-read" close-after-click @click="toggleReadConversation">
-				<template #icon>
-					<IconEye v-if="item.unreadMessages" :size="16" />
-					<IconEyeOff v-else :size="16" />
-				</template>
-				{{ labelRead }}
-			</NcActionButton>
-
-			<NcActionButton key="show-settings" close-after-click @click="showConversationSettings">
-				<template #icon>
-					<IconCog :size="16" />
-				</template>
-				{{ t('spreed', 'Conversation settings') }}
-			</NcActionButton>
-
-			<NcActionButton v-if="supportsArchive"
-				key="toggle-archive"
-				close-after-click
-				@click="toggleArchiveConversation">
-				<template #icon>
-					<IconArchive v-if="!item.isArchived" :size="16" />
-					<IconArchiveOff v-else :size="16" />
-				</template>
-				{{ labelArchive }}
-			</NcActionButton>
-
-			<NcActionButton v-if="item.canLeaveConversation"
-				key="leave-conversation"
-				close-after-click
-				@click="isLeaveDialogOpen = true">
-				<template #icon>
-					<IconExitToApp :size="16" />
-				</template>
-				{{ t('spreed', 'Leave conversation') }}
-			</NcActionButton>
-
-			<NcActionButton v-if="item.canDeleteConversation"
-				key="delete-conversation"
-				close-after-click
-				class="critical"
-				@click="isDeleteDialogOpen = true">
-				<template #icon>
-					<IconDelete :size="16" />
-				</template>
-				{{ t('spreed', 'Delete conversation') }}
-			</NcActionButton>
+			<template v-if="submenu === null">
+				<NcActionButton v-if="canFavorite"
+					key="toggle-favorite"
+					close-after-click
+					@click="toggleFavoriteConversation">
+					<template #icon>
+						<IconStar :size="16" :fill-color="!item.isFavorite ? '#FFCC00' : undefined" />
+					</template>
+					{{ labelFavorite }}
+				</NcActionButton>
+
+				<NcActionButton key="copy-link" @click.stop="handleCopyLink">
+					<template #icon>
+						<IconContentCopy :size="16" />
+					</template>
+					{{ t('spreed', 'Copy link') }}
+				</NcActionButton>
+
+				<NcActionButton key="toggle-read" close-after-click @click="toggleReadConversation">
+					<template #icon>
+						<IconEye v-if="item.unreadMessages" :size="16" />
+						<IconEyeOff v-else :size="16" />
+					</template>
+					{{ labelRead }}
+				</NcActionButton>
+
+				<NcActionButton key="show-settings" close-after-click @click="showConversationSettings">
+					<template #icon>
+						<IconCog :size="16" />
+					</template>
+					{{ t('spreed', 'Conversation settings') }}
+				</NcActionButton>
+
+				<NcActionButton v-if="supportsArchive"
+					key="toggle-archive"
+					close-after-click
+					@click="toggleArchiveConversation">
+					<template #icon>
+						<IconArchive v-if="!item.isArchived" :size="16" />
+						<IconArchiveOff v-else :size="16" />
+					</template>
+					{{ labelArchive }}
+				</NcActionButton>
+
+				<NcActionButton v-if="item.canLeaveConversation"
+					key="leave-conversation"
+					close-after-click
+					@click="isLeaveDialogOpen = true">
+					<template #icon>
+						<IconExitToApp :size="16" />
+					</template>
+					{{ t('spreed', 'Leave conversation') }}
+				</NcActionButton>
+
+				<NcActionButton v-if="item.canDeleteConversation"
+					key="delete-conversation"
+					close-after-click
+					class="critical"
+					@click="isDeleteDialogOpen = true">
+					<template #icon>
+						<IconDelete :size="16" />
+					</template>
+					{{ t('spreed', 'Delete conversation') }}
+				</NcActionButton>
+			</template>
 		</template>
 
 		<template v-else-if="item.token" #actions>
@@ -231,6 +233,7 @@ export default {
 	emits: ['click'],
 
 	setup(props) {
+		const submenu = ref(null)
 		const isLeaveDialogOpen = ref(false)
 		const isDeleteDialogOpen = ref(false)
 		const { item, isSearchResult } = toRefs(props)
@@ -238,6 +241,7 @@ export default {
 
 		return {
 			supportsArchive,
+			submenu,
 			isLeaveDialogOpen,
 			isDeleteDialogOpen,
 			counterType,

From ec323f5ad923f7612568eac570f766f9110e3fd8 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 25 Nov 2024 10:24:47 +0100
Subject: [PATCH 2/3] fix: add notifications submenu

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

diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index 8a78f2ee549..cf8b2eaac94 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -51,6 +51,15 @@
 					{{ labelRead }}
 				</NcActionButton>
 
+				<NcActionButton key="show-notifications"
+					is-menu
+					@click="submenu = 'notifications'">
+					<template #icon>
+						<IconBell :size="16" />
+					</template>
+					{{ t('spreed', 'Notifications') }}
+				</NcActionButton>
+
 				<NcActionButton key="show-settings" close-after-click @click="showConversationSettings">
 					<template #icon>
 						<IconCog :size="16" />
@@ -90,6 +99,17 @@
 					{{ t('spreed', 'Delete conversation') }}
 				</NcActionButton>
 			</template>
+			<template v-else-if="submenu === 'notifications'">
+				<NcActionButton :aria-label="t('spreed', 'Back')"
+					@click.stop="submenu = null">
+					<template #icon>
+						<IconArrowLeft :size="16" />
+					</template>
+					{{ t('spreed', 'Back') }}
+				</NcActionButton>
+
+				<NcActionSeparator />
+			</template>
 		</template>
 
 		<template v-else-if="item.token" #actions>
@@ -155,7 +175,9 @@ import { isNavigationFailure, NavigationFailureType } from 'vue-router'
 
 import IconArchive from 'vue-material-design-icons/Archive.vue'
 import IconArchiveOff from 'vue-material-design-icons/ArchiveOff.vue'
+import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import IconBell from 'vue-material-design-icons/Bell.vue'
 import IconCog from 'vue-material-design-icons/Cog.vue'
 import IconContentCopy from 'vue-material-design-icons/ContentCopy.vue'
 import IconDelete from 'vue-material-design-icons/Delete.vue'
@@ -169,6 +191,7 @@ import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
@@ -186,21 +209,24 @@ export default {
 	name: 'Conversation',
 
 	components: {
-		NcButton,
 		ConversationIcon,
-		NcActionButton,
-		NcDialog,
-		NcListItem,
 		IconArchive,
 		IconArchiveOff,
+		IconArrowLeft,
 		IconArrowRight,
+		IconBell,
 		IconCog,
 		IconContentCopy,
 		IconDelete,
 		IconExitToApp,
-		IconEyeOff,
 		IconEye,
+		IconEyeOff,
 		IconStar,
+		NcActionButton,
+		NcActionSeparator,
+		NcButton,
+		NcDialog,
+		NcListItem,
 	},
 
 	props: {
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
index e474bc49da0..8458d12860c 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -67,7 +67,7 @@
 					<NcActionSeparator />
 
 					<NcActionButton v-if="supportReminders"
-						class="action--nested"
+						is-menu
 						@click.stop="submenu = 'reminder'">
 						<template #icon>
 							<AlarmIcon :size="20" />
@@ -753,16 +753,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.action--nested {
-	:deep(.action-button::after) {
-		content: " ";
-		width: 20px;
-		height: var(--default-clickable-area);
-		margin-left: auto;
-		background: no-repeat center var(--icon-triangle-e-dark);
-	}
-}
-
 .edit-timestamp :deep(.action-text__longtext-wrapper) {
 	padding: 0;
 }

From 2b314098053c4c06e25d8f4e8327b60a6a438bda Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 25 Nov 2024 12:46:41 +0100
Subject: [PATCH 3/3] fix: add notifications submenu actions

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../ConversationsList/Conversation.vue        | 70 ++++++++++++++++++-
 1 file changed, 69 insertions(+), 1 deletion(-)

diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index cf8b2eaac94..afd86719aa2 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -109,6 +109,29 @@
 				</NcActionButton>
 
 				<NcActionSeparator />
+
+				<NcActionButton v-for="level in notificationLevels"
+					:key="level.value"
+					:model-value="notificationLevel.toString()"
+					:value="level.value.toString()"
+					type="radio"
+					@click="setNotificationLevel(level.value)">
+					<template #icon>
+						<component :is="notificationLevelIcon(level.value)" :size="16" />
+					</template>
+					{{ level.label }}
+				</NcActionButton>
+
+				<NcActionSeparator />
+
+				<NcActionButton type="checkbox"
+					:model-value="notifyCalls"
+					@click="setNotificationCalls(!notifyCalls)">
+					<template #icon>
+						<IconPhoneRing :size="16" />
+					</template>
+					{{ t('spreed', 'Notify about calls') }}
+				</NcActionButton>
 			</template>
 		</template>
 
@@ -173,6 +196,7 @@
 import { toRefs, ref } from 'vue'
 import { isNavigationFailure, NavigationFailureType } from 'vue-router'
 
+import IconAccount from 'vue-material-design-icons/Account.vue'
 import IconArchive from 'vue-material-design-icons/Archive.vue'
 import IconArchiveOff from 'vue-material-design-icons/ArchiveOff.vue'
 import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
@@ -184,7 +208,10 @@ 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 IconPhoneRing from 'vue-material-design-icons/PhoneRing.vue'
 import IconStar from 'vue-material-design-icons/Star.vue'
+import IconVolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
+import IconVolumeOff from 'vue-material-design-icons/VolumeOff.vue'
 
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
@@ -205,11 +232,18 @@ import { copyConversationLinkToClipboard } from '../../../utils/handleUrl.ts'
 
 const supportsArchive = hasTalkFeature('local', 'archived-conversations-v2')
 
+const notificationLevels = [
+	{ value: PARTICIPANT.NOTIFY.ALWAYS, label: t('spreed', 'All messages') },
+	{ value: PARTICIPANT.NOTIFY.MENTION, label: t('spreed', '@-mentions only') },
+	{ value: PARTICIPANT.NOTIFY.NEVER, label: t('spreed', 'Off') },
+]
+
 export default {
 	name: 'Conversation',
 
 	components: {
 		ConversationIcon,
+		IconAccount,
 		IconArchive,
 		IconArchiveOff,
 		IconArrowLeft,
@@ -221,7 +255,10 @@ export default {
 		IconExitToApp,
 		IconEye,
 		IconEyeOff,
+		IconPhoneRing,
 		IconStar,
+		IconVolumeHigh,
+		IconVolumeOff,
 		NcActionButton,
 		NcActionSeparator,
 		NcButton,
@@ -247,7 +284,6 @@ export default {
 					type: 0,
 					displayName: '',
 					isFavorite: false,
-					notificationLevel: 0,
 					lastMessage: {},
 					canDeleteConversation: false,
 					canLeaveConversation: false,
@@ -265,6 +301,9 @@ export default {
 		const { item, isSearchResult } = toRefs(props)
 		const { counterType, conversationInformation } = useConversationInfo({ item, isSearchResult })
 
+		const notificationLevel = ref(item.value.notificationLevel)
+		const notifyCalls = ref(item.value.notificationCalls === PARTICIPANT.NOTIFY_CALLS.ON)
+
 		return {
 			supportsArchive,
 			submenu,
@@ -272,6 +311,9 @@ export default {
 			isDeleteDialogOpen,
 			counterType,
 			conversationInformation,
+			notificationLevels,
+			notificationLevel,
+			notifyCalls,
 		}
 	},
 
@@ -385,6 +427,18 @@ export default {
 			this.$store.dispatch('toggleArchive', this.item)
 		},
 
+		notificationLevelIcon(value) {
+			switch (value) {
+			case PARTICIPANT.NOTIFY.ALWAYS:
+				return IconVolumeHigh
+			case PARTICIPANT.NOTIFY.MENTION:
+				return IconAccount
+			case PARTICIPANT.NOTIFY.NEVER:
+			default:
+				return IconVolumeOff
+			}
+		},
+
 		/**
 		 * Set the notification level for the conversation
 		 *
@@ -395,6 +449,20 @@ export default {
 				token: this.item.token,
 				notificationLevel: level,
 			})
+			this.notificationLevel = level
+		},
+
+		/**
+		 * Set the call notification level for the conversation
+		 *
+		 * @param {boolean} value Whether or not call notifications are enabled
+		 */
+		async setNotificationCalls(value) {
+			await this.$store.dispatch('setNotificationCalls', {
+				token: this.item.token,
+				notificationCalls: value ? PARTICIPANT.NOTIFY_CALLS.ON : PARTICIPANT.NOTIFY_CALLS.OFF,
+			})
+			this.notifyCalls = value
 		},
 
 		onClick() {