From 7e8c7706026c6382c379ada49ff12c663bbc1407 Mon Sep 17 00:00:00 2001
From: Roberto Guido <info@madbob.org>
Date: Sun, 19 Jul 2026 00:57:45 +0200
Subject: [PATCH] fix: improved widget for mailbox selection

Signed-off-by: Roberto Guido <info@madbob.org>
---
 src/components/AccountDefaultsSettings.vue   | 288 +++++--------------
 src/components/MailboxInlinePicker.vue       | 114 +++-----
 src/components/mailFilter/Action.vue         |   3 -
 src/components/mailFilter/ActionFileinto.vue |  16 +-
 4 files changed, 114 insertions(+), 307 deletions(-)

diff --git a/src/components/AccountDefaultsSettings.vue b/src/components/AccountDefaultsSettings.vue
index 7dbf095205..2d27cb99e3 100644
--- a/src/components/AccountDefaultsSettings.vue
+++ b/src/components/AccountDefaultsSettings.vue
@@ -4,42 +4,52 @@
 -->
 
 <template>
-	<div>
-		<p>
-			{{ t('mail', 'Drafts are saved in:') }}
-		</p>
-		<MailboxInlinePicker v-model="draftsMailbox" :account="account" :disabled="saving" />
-
-		<p>
-			{{ t('mail', 'Sent messages are saved in:') }}
-		</p>
-
-		<MailboxInlinePicker v-model="sentMailbox" :account="account" :disabled="saving" />
-		<p>
-			{{ t('mail', 'Deleted messages are moved in:') }}
-		</p>
-
-		<MailboxInlinePicker v-model="trashMailbox" :account="account" :disabled="saving" />
-		<p>
-			{{ t('mail', 'Archived messages are moved in:') }}
-		</p>
-
-		<MailboxInlinePicker v-model="archiveMailbox" :account="account" :disabled="saving" />
-		<p>
-			{{ t('mail', 'Snoozed messages are moved in:') }}
-		</p>
-
-		<MailboxInlinePicker v-model="snoozeMailbox" :account="account" :disabled="saving" />
-
-		<p>
-			{{ t('mail', 'Junk messages are saved in:') }}
-		</p>
-		<MailboxInlinePicker v-model="junkMailbox" :account="account" :disabled="saving" />
+	<div class="default-folders">
+		<MailboxInlinePicker
+			:label="t('mail', 'Drafts are saved in:')"
+			:value="account.draftsMailboxId"
+			:account="account"
+			:disabled="saving['draftsMailboxId']"
+			@update="(folderId) => updateFolder('draftsMailboxId', folderId)" />
+
+		<MailboxInlinePicker
+			:label="t('mail', 'Sent messages are saved in:')"
+			:value="account.sentMailboxId"
+			:account="account"
+			:disabled="saving['sentMailboxId']"
+			@update="(folderId) => updateFolder('sentMailboxId', folderId)" />
+
+		<MailboxInlinePicker
+			:label="t('mail', 'Deleted messages are moved in:')"
+			:value="account.trashMailboxId"
+			:account="account"
+			:disabled="saving['trashMailboxId']"
+			@update="(folderId) => updateFolder('trashMailboxId', folderId)" />
+
+		<MailboxInlinePicker
+			:label="t('mail', 'Archived messages are moved in:')"
+			:value="account.archiveMailboxId"
+			:account="account"
+			:disabled="saving['archiveMailboxId']"
+			@update="(folderId) => updateFolder('archiveMailboxId', folderId)" />
+
+		<MailboxInlinePicker
+			:label="t('mail', 'Snoozed messages are moved in:')"
+			:value="account.snoozeMailboxId"
+			:account="account"
+			:disabled="saving['snoozeMailboxId']"
+			@update="(folderId) => updateFolder('snoozeMailboxId', folderId)" />
+
+		<MailboxInlinePicker
+			:label="t('mail', 'Junk messages are saved in:')"
+			:value="account.junkMailboxId"
+			:account="account"
+			:disabled="saving['junkMailboxId']"
+			@update="(folderId) => updateFolder('junkMailboxId', folderId)" />
 	</div>
 </template>
 
 <script>
-import { mapStores } from 'pinia'
 import MailboxInlinePicker from './MailboxInlinePicker.vue'
 import logger from '../logger.js'
 import useMainStore from '../store/mainStore.js'
@@ -59,198 +69,48 @@ export default {
 
 	data() {
 		return {
-			saving: false,
+			saving: {
+				draftsMailboxId: false,
+				sentMailboxId: false,
+				trashMailboxId: false,
+				archiveMailboxId: false,
+				snoozeMailboxId: false,
+				junkMailboxId: false,
+			},
 		}
 	},
 
 	computed: {
-		...mapStores(useMainStore),
-		draftsMailbox: {
-			get() {
-				const mb = this.mainStore.getMailbox(this.account.draftsMailboxId)
-				if (!mb) {
-					return
-				}
-				return mb.databaseId
-			},
-
-			async set(draftsMailboxId) {
-				logger.debug('setting drafts folder to ' + draftsMailboxId)
-				this.saving = true
-				try {
-					await this.mainStore.patchAccount({
-						account: this.account,
-						data: {
-							draftsMailboxId,
-						},
-					})
-				} catch (error) {
-					logger.error('could not set drafts folder', {
-						error,
-					})
-				} finally {
-					this.saving = false
-				}
-			},
+		mainStore() {
+			return useMainStore()
 		},
+	},
 
-		sentMailbox: {
-			get() {
-				const mb = this.mainStore.getMailbox(this.account.sentMailboxId)
-				if (!mb) {
-					return
-				}
-				return mb.databaseId
-			},
-
-			async set(sentMailboxId) {
-				logger.debug('setting sent folder to ' + sentMailboxId)
-				this.saving = true
-				try {
-					await this.mainStore.patchAccount({
-						account: this.account,
-						data: {
-							sentMailboxId,
-						},
-					})
-				} catch (error) {
-					logger.error('could not set sent folder', {
-						error,
-					})
-				} finally {
-					this.saving = false
-				}
-			},
-		},
-
-		trashMailbox: {
-			get() {
-				const mb = this.mainStore.getMailbox(this.account.trashMailboxId)
-				if (!mb) {
-					return
-				}
-				return mb.databaseId
-			},
-
-			async set(trashMailboxId) {
-				logger.debug('setting trash folder to ' + trashMailboxId)
-				this.saving = true
-				try {
-					await this.mainStore.patchAccount({
-						account: this.account,
-						data: {
-							trashMailboxId,
-						},
-					})
-				} catch (error) {
-					logger.error('could not set trash folder', {
-						error,
-					})
-				} finally {
-					this.saving = false
-				}
-			},
-		},
-
-		archiveMailbox: {
-			get() {
-				const mb = this.mainStore.getMailbox(this.account.archiveMailboxId)
-				if (!mb) {
-					return
-				}
-				return mb.databaseId
-			},
-
-			async set(archiveMailboxId) {
-				logger.debug('setting archive folder to ' + archiveMailboxId)
-				this.saving = true
-				try {
-					await this.mainStore.patchAccount({
-						account: this.account,
-						data: {
-							archiveMailboxId,
-						},
-					})
-				} catch (error) {
-					logger.error('could not set archive folder', {
-						error,
-					})
-				} finally {
-					this.saving = false
-				}
-			},
-		},
-
-		junkMailbox: {
-			get() {
-				const mb = this.mainStore.getMailbox(this.account.junkMailboxId)
-				if (!mb) {
-					return
-				}
-				return mb.databaseId
-			},
-
-			async set(junkMailboxId) {
-				logger.debug('setting junk folder to ' + junkMailboxId)
-				this.saving = true
-				try {
-					await this.mainStore.patchAccount({
-						account: this.account,
-						data: {
-							junkMailboxId,
-						},
-					})
-				} catch (error) {
-					logger.error('could not set junk folder', {
-						error,
-					})
-				} finally {
-					this.saving = false
-				}
-			},
-		},
-
-		snoozeMailbox: {
-			get() {
-				const mb = this.mainStore.getMailbox(this.account.snoozeMailboxId)
-				if (!mb) {
-					return
-				}
-				return mb.databaseId
-			},
-
-			async set(snoozeMailboxId) {
-				logger.debug('setting snooze folder to ' + snoozeMailboxId)
-				this.saving = true
-				try {
-					await this.mainStore.patchAccount({
-						account: this.account,
-						data: {
-							snoozeMailboxId,
-						},
-					})
-				} catch (error) {
-					logger.error('could not set snooze folder', {
-						error,
-					})
-				} finally {
-					this.saving = false
-				}
-			},
+	methods: {
+		async updateFolder(type, id) {
+			this.saving[type] = true
+			try {
+				await this.mainStore.patchAccount({
+					account: this.account,
+					data: {
+						[type]: id,
+					},
+				})
+			} catch (error) {
+				logger.error('could not set default folder', {
+					error,
+				})
+			} finally {
+				this.saving[type] = false
+			}
 		},
 	},
 }
 </script>
 
-<style lang="scss" scoped>
-.button.icon-rename {
-	background-color: transparent;
-	border: none;
-	opacity: 0.3;
-
-	&:hover,
-	&:focus {
-		opacity: 1;
-	}
+<style>
+.default-folders {
+	display: flex;
+	flex-direction: column;
 }
 </style>
diff --git a/src/components/MailboxInlinePicker.vue b/src/components/MailboxInlinePicker.vue
index f92edba294..7d94c4e791 100644
--- a/src/components/MailboxInlinePicker.vue
+++ b/src/components/MailboxInlinePicker.vue
@@ -3,27 +3,23 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<Treeselect
-		ref="Treeselect"
-		v-model="selected"
+	<NcSelect
+		:input-label="label"
 		:options="mailboxes"
-		:multiple="false"
-		:clearable="false"
-		:disabled="disabled" />
+		label="value"
+		:model-value="selectedOption"
+		:disabled="disabled"
+		@update:modelValue="update" />
 </template>
 
 <script>
-import Treeselect from '@riophae/vue-treeselect'
-import { mapStores } from 'pinia'
+import { NcSelect } from '@nextcloud/vue'
 import useMainStore from '../store/mainStore.js'
-import { mailboxHasRights } from '../util/acl.js'
-
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
 export default {
 	name: 'MailboxInlinePicker',
 	components: {
-		Treeselect,
+		NcSelect,
 	},
 
 	props: {
@@ -32,28 +28,34 @@ export default {
 			required: true,
 		},
 
-		disabled: {
-			type: Boolean,
-			default: false,
+		label: {
+			type: String,
+			default: '',
 		},
 
 		value: {
 			type: Number,
 			default: undefined,
 		},
-	},
 
-	data() {
-		return {
-			selected: this.value,
-		}
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	computed: {
-		...mapStores(useMainStore),
+		mainStore() {
+			return useMainStore()
+		},
+
 		mailboxes() {
 			return this.getMailboxes()
 		},
+
+		selectedOption() {
+			return this.mailboxes.find((option) => option.id === this.value) || null
+		},
 	},
 
 	watch: {
@@ -66,66 +68,20 @@ export default {
 	},
 
 	methods: {
-		getMailboxes(mailboxId) {
-			let mailboxes = []
-			if (!mailboxId) {
-				mailboxes = this.mainStore.getMailboxes(this.account.accountId)
-			} else {
-				mailboxes = this.mainStore.getSubMailboxes(mailboxId)
-			}
-			mailboxes = mailboxes.filter((mailbox) => mailboxHasRights(mailbox, 'i'))
-			return mailboxes.map((mailbox) => {
-				return {
+		getMailboxes() {
+			const mailboxes = []
+			for (const mailbox of this.mainStore.getRecursiveMailboxIterator(this.account.accountId)) {
+				mailboxes.push({
+					value: mailbox.name,
 					id: mailbox.databaseId,
-					label: mailbox.displayName,
-					children: mailbox.mailboxes.length > 0 ? this.getMailboxes(mailbox.databaseId) : '',
-				}
-			})
+				})
+			}
+			return mailboxes
+		},
+
+		update(value) {
+			this.$emit('update', value ? value.id : 0)
 		},
 	},
 }
 </script>
-
-<style>
-.vue-treeselect__control {
-	padding: 0;
-	border: 0;
-	width: 250px;
-}
-
-.vue-treeselect__control-arrow-container {
-	display: none;
-}
-
-.vue-treeselect--searchable .vue-treeselect__input-container {
-	padding-inline-start: 0;
-	background-color: var(--color-main-background)
-}
-
-input.vue-treeselect__input {
-	margin: 0;
-	padding: 0;
-	border: 1px solid var(--color-border-maxcontrast) !important;
-}
-
-.vue-treeselect__menu {
-	background: var(--color-main-background);
-}
-
-.vue-treeselect--single .vue-treeselect__option--selected {
-	background: var(--color-primary-element-light);
-	border-radius: var(--border-radius-large);
-}
-
-.vue-treeselect__option.vue-treeselect__option--highlight,
-.vue-treeselect__option:hover,
-.vue-treeselect__option:focus {
-	border-radius: var(--border-radius-large);
-	}
-
-.vue-treeselect__placeholder, .vue-treeselect__single-value {
-	line-height: 34px;
-	color: var(--color-main-text);
-}
-
-</style>
diff --git a/src/components/mailFilter/Action.vue b/src/components/mailFilter/Action.vue
index a67ff3d90a..db1cf305f8 100644
--- a/src/components/mailFilter/Action.vue
+++ b/src/components/mailFilter/Action.vue
@@ -130,9 +130,6 @@ export default {
 		width: 100%;
 		&__column {
 			flex: 0 1 auto;
-			&__select {
-				margin: 0
-			}
 		}
 	}
 	&__delete {
diff --git a/src/components/mailFilter/ActionFileinto.vue b/src/components/mailFilter/ActionFileinto.vue
index a73286c04d..7acffa271d 100644
--- a/src/components/mailFilter/ActionFileinto.vue
+++ b/src/components/mailFilter/ActionFileinto.vue
@@ -3,7 +3,11 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<MailboxInlinePicker :account="account" :value="mailbox" @input="onInput" />
+	<MailboxInlinePicker
+		ariaLabelCombobox="t('mail', 'Choose target folder')"
+		:account="account"
+		:value="mailbox"
+		@update="onInput" />
 </template>
 
 <script>
@@ -52,13 +56,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-:deep(.vue-treeselect__control) {
-	width: 100%; /* todo: fix MailboxInlinePicker.vue styling instead */
-}
-
-:deep(.vue-treeselect__input-container) {
-	padding-inline-end: 0; /* todo: fix MailboxInlinePicker.vue styling instead */
-}
-</style>