[stable30] feat: archive conversations (frontend)

src/__mocks__/capabilities.ts

@@ -84,6 +84,7 @@ export const mockedCapabilities: Capabilities = {
 			'chat-reference-id',
 			'mention-permissions',
 			'edit-messages-note-to-self',
+			'archived-conversations',
 		],
 		'features-local': [
 			'favorites',
@@ -95,6 +96,7 @@ export const mockedCapabilities: Capabilities = {
 			'avatar',
 			'remind-me-later',
 			'note-to-self',
+			'archived-conversations',
 		],
 		config: {
 			attachments: {

src/components/ConversationSettings/ConversationSettingsDialog.vue

@@ -84,6 +84,16 @@
 				id="dangerzone"
 				:name="t('spreed', 'Danger zone')">
 				<LockingSettings v-if="canFullModerate && !isNoteToSelf" :token="token" />
+				<template v-if="supportsArchive">
+					<h4 class="app-settings-section__subtitle">
+						{{ t('spreed', 'Archive conversation') }}
+					</h4>
+					<NcCheckboxRadioSwitch type="switch"
+						:checked="isArchived"
+						@update:checked="toggleArchiveConversation">
+						{{ t('spreed', 'Archive conversation') }}
+					</NcCheckboxRadioSwitch>
+				</template>
 				<DangerZone :conversation="conversation"
 					:can-leave-conversation="canLeaveConversation"
 					:can-delete-conversation="canDeleteConversation" />
@@ -122,6 +132,8 @@ import { CALL, CONFIG, PARTICIPANT, CONVERSATION } from '../../constants.js'
 import { getTalkConfig, hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 import { useSettingsStore } from '../../stores/settings.js'
 
+const supportsArchive = hasTalkFeature('local', 'archived-conversations')
+
 export default {
 	name: 'ConversationSettingsDialog',
 
@@ -149,7 +161,10 @@ export default {
 
 	setup() {
 		const settingsStore = useSettingsStore()
-		return { settingsStore }
+		return {
+			supportsArchive,
+			settingsStore,
+		}
 	},
 
 	data() {
@@ -201,6 +216,10 @@ export default {
 			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},
 
+		isArchived() {
+			return this.conversation.isArchived
+		},
+
 		participantType() {
 			return this.conversation.participantType
 		},
@@ -273,7 +292,11 @@ export default {
 
 		setShowMediaSettings(newValue) {
 			this.settingsStore.setShowMediaSettings(this.token, newValue)
-		}
+		},
+
+		async toggleArchiveConversation() {
+			await this.$store.dispatch('toggleArchive', this.conversation)
+		},
 	},
 }
 </script>

src/components/ConversationSettings/DangerZone.vue

@@ -11,18 +11,40 @@
 				<h4 class="app-settings-section__subtitle">
 					{{ t('spreed', 'Leave conversation') }}
 				</h4>
-				<p class="danger-zone__hint">
+				<p class="app-settings-section__hint">
 					{{ t('spreed', 'Once a conversation is left, to rejoin a closed conversation, an invite is needed. An open conversation can be rejoined at any time.') }}
 				</p>
-				<NcButton type="warning" @click="leaveConversation">
+				<NcButton type="warning" @click="toggleShowLeaveConversationDialog">
 					{{ t('spreed', 'Leave conversation') }}
 				</NcButton>
+				<NcDialog class="danger-zone__dialog"
+					:open.sync="isLeaveConversationDialogOpen"
+					:name="t('spreed','Leave conversation')"
+					container=".danger-zone">
+					<template #default>
+						<p>{{ leaveConversationDialogMessage }}</p>
+						<p v-if="supportsArchive && !conversation.isArchived">
+							{{ t('spreed', 'You can archive this conversation instead.') }}
+						</p>
+					</template>
+					<template #actions>
+						<NcButton type="tertiary" @click="toggleShowLeaveConversationDialog">
+							{{ t('spreed', 'No') }}
+						</NcButton>
+						<NcButton v-if="supportsArchive && !conversation.isArchived" type="secondary" @click="toggleArchiveConversation">
+							{{ t('spreed', 'Archive conversation') }}
+						</NcButton>
+						<NcButton type="warning" @click="leaveConversation">
+							{{ t('spreed', 'Yes') }}
+						</NcButton>
+					</template>
+				</NcDialog>
 			</div>
 			<div v-if="canDeleteConversation" class="app-settings-subsection">
 				<h4 class="app-settings-section__subtitle">
 					{{ t('spreed', 'Delete conversation') }}
 				</h4>
-				<p class="danger-zone__hint">
+				<p class="app-settings-section__hint">
 					{{ t('spreed', 'Permanently delete this conversation.') }}
 				</p>
 				<NcButton type="error"
@@ -48,7 +70,7 @@
 				<h4 class="app-settings-section__subtitle">
 					{{ t('spreed', 'Delete chat messages') }}
 				</h4>
-				<p class="danger-zone__hint">
+				<p class="app-settings-section__hint">
 					{{ t('spreed', 'Permanently delete all the messages in this conversation.') }}
 				</p>
 				<NcButton type="error"
@@ -76,6 +98,8 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
@@ -84,6 +108,10 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 
+import { hasTalkFeature } from '../../services/CapabilitiesManager.ts'
+
+const supportsArchive = hasTalkFeature('local', 'archived-conversations')
+
 export default {
 	name: 'DangerZone',
 	components: {
@@ -109,10 +137,16 @@ export default {
 		},
 	},
 
-	data() {
+	setup() {
+		const isLeaveConversationDialogOpen = ref(false)
+		const isDeleteConversationDialogOpen = ref(false)
+		const isDeleteChatDialogOpen = ref(false)
+
 		return {
-			isDeleteConversationDialogOpen: false,
-			isDeleteChatDialogOpen: false,
+			supportsArchive,
+			isLeaveConversationDialogOpen,
+			isDeleteConversationDialogOpen,
+			isDeleteChatDialogOpen,
 		}
 	},
 
@@ -125,6 +159,13 @@ export default {
 			return this.conversation.token
 		},
 
+		leaveConversationDialogMessage() {
+			return t('spreed', 'Do you really want to leave "{displayName}"?', this.conversation, undefined, {
+				escape: false,
+				sanitize: false,
+			})
+		},
+
 		deleteConversationDialogMessage() {
 			return t('spreed', 'Do you really want to delete "{displayName}"?', this.conversation, undefined, {
 				escape: false,
@@ -146,10 +187,23 @@ export default {
 		hideConversationSettings() {
 			emit('hide-conversation-settings')
 		},
+
+		/**
+		 * Deletes the current user from the conversation.
+		 */
+		async toggleArchiveConversation() {
+			this.isLeaveConversationDialogOpen = false
+
+			await this.$store.dispatch('toggleArchive', this.conversation)
+			this.hideConversationSettings()
+		},
+
 		/**
 		 * Deletes the current user from the conversation.
 		 */
 		async leaveConversation() {
+			this.isLeaveConversationDialogOpen = false
+
 			try {
 				await this.$store.dispatch('removeCurrentUserFromConversation', { token: this.token })
 				this.hideConversationSettings()
@@ -198,6 +252,10 @@ export default {
 			}
 		},
 
+		toggleShowLeaveConversationDialog() {
+			this.isLeaveConversationDialogOpen = !this.isLeaveConversationDialogOpen
+		},
+
 		toggleShowDeleteConversationDialog() {
 			this.isDeleteConversationDialogOpen = !this.isDeleteConversationDialogOpen
 		},
@@ -215,9 +273,6 @@ h4 {
 }
 
 .danger-zone {
-	&__hint {
-		color: var(--color-text-maxcontrast);
-	}
 	&__dialog {
 		:deep(.modal-container) {
 			padding-block: 4px 8px;