From 741c44a02aeed9dc7fc3b6398af9bedb4f31beff Mon Sep 17 00:00:00 2001
From: Grigory Vodyanov <scratchx@gmx.com>
Date: Wed, 2 Sep 2026 17:52:21 +0200
Subject: [PATCH 1/7] feat(vue3): drop the unused v-tooltip plugin

The directive was registered globally in the entry point but never used
in a template or stylesheet. @nextcloud/vue 9 removes its own tooltip
directive anyway, so there is nothing to migrate to later.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Grigory Vodyanov <scratchx@gmx.com>
---
 package-lock.json | 22 ----------------------
 package.json      |  1 -
 src/main.js       |  2 --
 3 files changed, 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c934c0ee35..4778b048ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,7 +55,6 @@
         "raw-loader": "^4.0.2",
         "stylelint": "^17.14.1",
         "uuid": "^14.0.2",
-        "v-tooltip": "^2.1.3",
         "vue": "^2.7.16",
         "vue-autosize": "^1.0.2",
         "vue-dndrop": "^1.3.4",
@@ -14035,16 +14034,6 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
-    "node_modules/popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -17523,17 +17512,6 @@
         "uuid": "dist-node/bin/uuid"
       }
     },
-    "node_modules/v-tooltip": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.1.3.tgz",
-      "integrity": "sha512-xXngyxLQTOx/yUEy50thb8te7Qo4XU6h4LZB6cvEfVd9mnysUxLEoYwGWDdqR+l69liKsy3IPkdYff3J1gAJ5w==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "lodash": "^4.17.21",
-        "popper.js": "^1.16.1",
-        "vue-resize": "^1.0.1"
-      }
-    },
     "node_modules/vanilla-colorful": {
       "version": "0.7.2",
       "resolved": "https://registry.npmjs.org/vanilla-colorful/-/vanilla-colorful-0.7.2.tgz",
diff --git a/package.json b/package.json
index fb3ada3b9f..2f0709742e 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,6 @@
     "raw-loader": "^4.0.2",
     "stylelint": "^17.14.1",
     "uuid": "^14.0.2",
-    "v-tooltip": "^2.1.3",
     "vue": "^2.7.16",
     "vue-autosize": "^1.0.2",
     "vue-dndrop": "^1.3.4",
diff --git a/src/main.js b/src/main.js
index bc815d8fbf..712a2bb2a2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,7 +7,6 @@ import { getRequestToken } from '@nextcloud/auth'
 import { registerDavProperty } from '@nextcloud/files'
 import { generateFilePath } from '@nextcloud/router'
 import { createPinia, PiniaVuePlugin } from 'pinia'
-import vToolTip from 'v-tooltip'
 import Vue from 'vue'
 import VueShortKey from 'vue-shortkey'
 import App from './App.vue'
@@ -27,7 +26,6 @@ const pinia = createPinia()
 Vue.mixin(Nextcloud)
 
 Vue.use(VueShortKey, { prevent: ['input', 'div', 'textarea'] })
-Vue.use(vToolTip)
 
 registerDavProperty('nc:share-attributes', { nc: 'http://nextcloud.org/ns' })
 

From 065fe2e912aaf925e8b423670e429eba82e223cb Mon Sep 17 00:00:00 2001
From: Grigory Vodyanov <scratchx@gmx.com>
Date: Wed, 2 Sep 2026 17:52:30 +0200
Subject: [PATCH 2/7] feat(vue3): swap the isMobile mixin for useIsMobile

The isMobile mixin is deprecated and removed in @nextcloud/vue 9. Both
read the same module-level ref, so this is behaviour-identical on 8.41.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Grigory Vodyanov <scratchx@gmx.com>
---
 src/components/MailboxThread.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/MailboxThread.vue b/src/components/MailboxThread.vue
index 02e492eca3..1dd0907624 100644
--- a/src/components/MailboxThread.vue
+++ b/src/components/MailboxThread.vue
@@ -200,7 +200,8 @@
 </template>
 
 <script>
-import { isMobile, NcAppContent, NcAppContentList, NcButton, NcPopover } from '@nextcloud/vue'
+import { NcAppContent, NcAppContentList, NcButton, NcPopover } from '@nextcloud/vue'
+import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
 import addressParser from 'address-rfc2822'
 import mitt from 'mitt'
 import { mapStores } from 'pinia'
@@ -247,7 +248,6 @@ export default {
 		Thread,
 	},
 
-	mixins: [isMobile],
 	props: {
 		account: {
 			type: Object,
@@ -260,6 +260,12 @@ export default {
 		},
 	},
 
+	setup() {
+		return {
+			isMobile: useIsMobile(),
+		}
+	},
+
 	data() {
 		return {
 

From a6a6b8648ab76f6f2ec305e78b3a11c72e6aee09 Mon Sep 17 00:00:00 2001
From: Grigory Vodyanov <scratchx@gmx.com>
Date: Wed, 2 Sep 2026 17:52:30 +0200
Subject: [PATCH 3/7] feat(vue3): import emoji helpers from their subpath

v9 drops emojiSearch and emojiAddRecent from the root barrel and only
exposes them under functions/emoji, which already resolves in 8.41.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Grigory Vodyanov <scratchx@gmx.com>
---
 src/components/TextEditor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TextEditor.vue b/src/components/TextEditor.vue
index 3b9a54b139..b144bd9599 100644
--- a/src/components/TextEditor.vue
+++ b/src/components/TextEditor.vue
@@ -24,7 +24,7 @@
 <script>
 import CKEditor from '@ckeditor/ckeditor5-vue2'
 import { getLanguage } from '@nextcloud/l10n'
-import { emojiAddRecent, emojiSearch } from '@nextcloud/vue'
+import { emojiAddRecent, emojiSearch } from '@nextcloud/vue/functions/emoji'
 import {
 	Alignment,
 	Base64UploadAdapter,

From f7fa0af95f49a8ac1201b44c3bad0e91d852d720 Mon Sep 17 00:00:00 2001
From: Grigory Vodyanov <scratchx@gmx.com>
Date: Wed, 2 Sep 2026 17:52:41 +0200
Subject: [PATCH 4/7] feat(vue3): swap the FilePicker component for the builder
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@nextcloud/dialogs 7 drops the FilePickerVue export so the library can
serve Vue 2 and Vue 3 apps alike; only the builder functions survive.
Five components rendered the component behind a data flag — the plan
lists four, Envelope.vue was missed.

Four of them configure the same directory-only dialog, so that moves to
a shared pickFolder() helper. ComposerAttachments keeps its own builder
because it needs two buttons and has to know which one was pressed.

Spawning the dialog on the body also fixes it outliving the NcActions
popover it used to be rendered inside, which unmounts on click.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Grigory Vodyanov <scratchx@gmx.com>
---
 src/components/ComposerAttachments.vue | 47 ++++++++++++--------------
 src/components/Envelope.vue            | 32 ++++++------------
 src/components/MenuEnvelope.vue        | 32 ++++++------------
 src/components/MessageAttachment.vue   | 33 ++++++------------
 src/components/MessageAttachments.vue  | 43 +++++++++--------------
 src/tests/unit/util/filePicker.spec.js | 43 +++++++++++++++++++++++
 src/util/filePicker.js                 | 28 +++++++++++++++
 7 files changed, 142 insertions(+), 116 deletions(-)
 create mode 100644 src/tests/unit/util/filePicker.spec.js
 create mode 100644 src/util/filePicker.js

diff --git a/src/components/ComposerAttachments.vue b/src/components/ComposerAttachments.vue
index b0f22a047c..089a048a58 100644
--- a/src/components/ComposerAttachments.vue
+++ b/src/components/ComposerAttachments.vue
@@ -37,19 +37,12 @@
 			multiple
 			style="display: none;"
 			@change="onLocalAttachmentSelected">
-		<FilePicker
-			v-if="isAttachmentPickerOpen"
-			:name="t('mail', 'Choose a file')"
-			:buttons="attachmentPickerButtons"
-			:filter-fn="filterAttachements"
-			@close="() => isAttachmentPickerOpen = false" />
 	</div>
 </template>
 
 <script>
 import { getRequestToken } from '@nextcloud/auth'
-import { showWarning } from '@nextcloud/dialogs'
-import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
+import { getFilePickerBuilder, showWarning } from '@nextcloud/dialogs'
 import { formatFileSize } from '@nextcloud/files'
 import { n, t } from '@nextcloud/l10n'
 import map from 'lodash/fp/map.js'
@@ -76,7 +69,6 @@ const mimes = [
 export default {
 	name: 'ComposerAttachments',
 	components: {
-		FilePicker,
 		ComposerAttachment,
 		ChevronDown,
 		ChevronUp,
@@ -112,20 +104,6 @@ export default {
 			attachments: [],
 			isToggle: false,
 			hasNextLine: false,
-			isAttachmentPickerOpen: false,
-			attachmentPickerButtons: [
-				{
-					label: t('mail', 'Add as attachment'),
-					callback: this.onAddCloudAttachment,
-					type: 'primary',
-				},
-				{
-					label: t('mail', 'Add as share link'),
-					callback: this.onAddCloudAttachmentLink,
-					type: 'primary',
-				},
-			],
-
 		}
 	},
 
@@ -206,8 +184,27 @@ export default {
 			return (node.permissions & OC.PERMISSION_READ) && downloadPermissions
 		},
 
-		openAttachementPicker() {
-			this.isAttachmentPickerOpen = true
+		async openAttachementPicker() {
+			const picker = getFilePickerBuilder(t('mail', 'Choose a file'))
+				.setMultiSelect(true)
+				.setFilter(this.filterAttachements)
+				.addButton({
+					label: t('mail', 'Add as attachment'),
+					variant: 'primary',
+					callback: this.onAddCloudAttachment,
+				})
+				.addButton({
+					label: t('mail', 'Add as share link'),
+					variant: 'primary',
+					callback: this.onAddCloudAttachmentLink,
+				})
+				.build()
+
+			try {
+				await picker.pickNodes()
+			} catch (error) {
+				logger.debug('file picker closed without picking a file', { error })
+			}
 		},
 
 		onAddLocalAttachment() {
diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue
index c41631c243..19fd34d736 100644
--- a/src/components/Envelope.vue
+++ b/src/components/Envelope.vue
@@ -194,14 +194,6 @@
 				fill-color="var(--color-primary-element)" />
 		</template>
 		<template #actions>
-			<FilePicker
-				v-if="isFilePickerOpen"
-				:name="t('mail', 'Choose a folder to store the message in')"
-				:buttons="saveMessageButtons"
-				:allow-pick-directory="true"
-				:multiselect="false"
-				:mimetype-filter="['httpd/unix-directory']"
-				@close="() => isFilePickerOpen = false" />
 			<EnvelopePrimaryActions v-if="!moreActionsOpen && !snoozeOptions" id="primary-actions">
 				<NcActionButton
 					v-if="hasWriteAcl"
@@ -441,7 +433,7 @@
 					class="message-save-to-cloud"
 					:disabled="savingToCloud"
 					:close-after-click="true"
-					@click="() => isFilePickerOpen = true">
+					@click="saveToCloud">
 					<template #icon>
 						<IconSave :size="20" />
 					</template>
@@ -537,7 +529,6 @@
 
 <script>
 import { showError, showSuccess, showWarning } from '@nextcloud/dialogs'
-import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
 import { isRTL } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
@@ -601,6 +592,7 @@ import { saveMessage } from '../service/MessageService.js'
 import { FOLLOW_UP_TAG_LABEL } from '../store/constants.js'
 import useMainStore from '../store/mainStore.js'
 import { mailboxHasRights } from '../util/acl.js'
+import { pickFolder } from '../util/filePicker.js'
 import { flatRelativeDatetime, groupedRelativeDatetime, messageDateTime } from '../util/relativeDatetime.js'
 import { translateTagDisplayName } from '../util/tag.js'
 import { hiddenTags } from './tags.js'
@@ -621,7 +613,6 @@ export default {
 		EnvelopePrimaryActions,
 		EventModal,
 		IconSave,
-		FilePicker,
 		ImportantIcon,
 		ImportantOutlineIcon,
 		TaskModal,
@@ -721,14 +712,6 @@ export default {
 			quickActionLoading: false,
 			possibleAttachmentsCount: 0,
 			savingToCloud: false,
-			isFilePickerOpen: false,
-			saveMessageButtons: [
-				{
-					label: t('mail', 'Choose'),
-					callback: this.saveToCloud,
-					type: 'primary',
-				},
-			],
 		}
 	},
 
@@ -1467,8 +1450,15 @@ export default {
 			this.showTagModal = false
 		},
 
-		async saveToCloud(dest) {
-			const path = dest[0].path
+		async saveToCloud() {
+			let path
+			try {
+				path = await pickFolder(t('mail', 'Choose a folder to store the message in'))
+			} catch (error) {
+				logger.debug('file picker closed without picking a folder', { error })
+				return
+			}
+
 			this.savingToCloud = true
 			const id = this.data.databaseId
 
diff --git a/src/components/MenuEnvelope.vue b/src/components/MenuEnvelope.vue
index 885215cd88..e58f11e0c7 100644
--- a/src/components/MenuEnvelope.vue
+++ b/src/components/MenuEnvelope.vue
@@ -5,14 +5,6 @@
 <!-- Standard Actions menu for Envelopes -->
 <template>
 	<div>
-		<FilePicker
-			v-if="isFilePickerOpen"
-			:name="t('mail', 'Choose a folder to store the message in')"
-			:buttons="saveMessageButtons"
-			:allow-pick-directory="true"
-			:multiselect="false"
-			:mimetype-filter="['httpd/unix-directory']"
-			@close="() => isFilePickerOpen = false" />
 		<template v-if="!localMoreActionsOpen && !snoozeActionsOpen">
 			<NcActionButton
 				v-if="hasWriteAcl"
@@ -214,7 +206,7 @@
 				class="message-save-to-cloud"
 				:disabled="savingToCloud"
 				:close-after-click="true"
-				@click="() => isFilePickerOpen = true">
+				@click="saveToCloud">
 				<template #icon>
 					<IconSave v-if="!savingToCloud" :size="20" />
 					<NcLoadingIcon v-else-if="savingToCloud" :size="20" />
@@ -294,7 +286,6 @@
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
 import {
@@ -332,6 +323,7 @@ import { buildRecipients as buildReplyRecipients } from '../ReplyBuilder.js'
 import { saveMessage } from '../service/MessageService.js'
 import useMainStore from '../store/mainStore.js'
 import { mailboxHasRights } from '../util/acl.js'
+import { pickFolder } from '../util/filePicker.js'
 
 export default {
 	name: 'MenuEnvelope',
@@ -350,7 +342,6 @@ export default {
 		TranslationIcon,
 		DownloadIcon,
 		IconSave,
-		FilePicker,
 		InformationIcon,
 		OpenInNewIcon,
 		PlusIcon,
@@ -412,14 +403,6 @@ export default {
 			copied: false,
 			copyResetTimer: null,
 			savingToCloud: false,
-			isFilePickerOpen: false,
-			saveMessageButtons: [
-				{
-					label: t('mail', 'Choose'),
-					callback: this.saveToCloud,
-					type: 'primary',
-				},
-			],
 		}
 	},
 
@@ -720,8 +703,15 @@ export default {
 			}
 		},
 
-		async saveToCloud(dest) {
-			const path = dest[0].path
+		async saveToCloud() {
+			let path
+			try {
+				path = await pickFolder(t('mail', 'Choose a folder to store the message in'))
+			} catch (error) {
+				logger.debug('file picker closed without picking a folder', { error })
+				return
+			}
+
 			this.savingToCloud = true
 			const id = this.envelope.databaseId
 
diff --git a/src/components/MessageAttachment.vue b/src/components/MessageAttachment.vue
index ffeba2b636..068ba1d2eb 100644
--- a/src/components/MessageAttachment.vue
+++ b/src/components/MessageAttachment.vue
@@ -19,14 +19,6 @@
 			</span>
 			<span class="attachment-size">{{ humanReadable(size) }}</span>
 		</div>
-		<FilePicker
-			v-if="isFilePickerOpen"
-			:name="t('mail', 'Choose a folder to store the attachment in')"
-			:buttons="saveAttachementButtons"
-			:allow-pick-directory="true"
-			:multiselect="false"
-			:mimetype-filter="['httpd/unix-directory']"
-			@close="() => isFilePickerOpen = false" />
 		<NcActions :boundaries-element="boundariesElement">
 			<template v-if="!showCalendarPopover">
 				<NcActionButton
@@ -53,7 +45,7 @@
 					class="attachment-save-to-cloud"
 					:disabled="savingToCloud"
 					:close-after-click="true"
-					@click="() => isFilePickerOpen = true">
+					@click="saveToCloud">
 					<template #icon>
 						<IconSave v-if="!savingToCloud" :size="20" />
 						<NcLoadingIcon v-else-if="savingToCloud" :size="20" />
@@ -82,7 +74,6 @@
 <script>
 
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
 import { formatFileSize } from '@nextcloud/files'
 import { t } from '@nextcloud/l10n'
 import { NcActionButton, NcActions, NcLoadingIcon } from '@nextcloud/vue'
@@ -93,11 +84,11 @@ import IconDownload from 'vue-material-design-icons/TrayArrowDown.vue'
 import Logger from '../logger.js'
 import { downloadAttachment, saveAttachmentToFiles } from '../service/AttachmentService.js'
 import { getUserCalendars, importCalendarEvent } from '../service/DAVService.js'
+import { pickFolder } from '../util/filePicker.js'
 
 export default {
 	name: 'MessageAttachment',
 	components: {
-		FilePicker,
 		NcActions,
 		NcActionButton,
 		IconAdd,
@@ -161,15 +152,6 @@ export default {
 			loadingCalendars: false,
 			calendars: [],
 			showCalendarPopover: false,
-			saveAttachementButtons: [
-				{
-					label: t('mail', 'Choose'),
-					callback: this.saveToCloud,
-					type: 'primary',
-				},
-			],
-
-			isFilePickerOpen: false,
 		}
 	},
 
@@ -225,8 +207,15 @@ export default {
 			return formatFileSize(size)
 		},
 
-		async saveToCloud(dest) {
-			const path = dest[0].path
+		async saveToCloud() {
+			let path
+			try {
+				path = await pickFolder(t('mail', 'Choose a folder to store the attachment in'))
+			} catch (error) {
+				Logger.debug('file picker closed without picking a folder', { error })
+				return
+			}
+
 			this.savingToCloud = true
 			const id = this.$route.params.threadId
 
diff --git a/src/components/MessageAttachments.vue b/src/components/MessageAttachments.vue
index 64cc2afa63..2b9933a125 100644
--- a/src/components/MessageAttachments.vue
+++ b/src/components/MessageAttachments.vue
@@ -44,21 +44,12 @@
 		</NcButton>
 
 		<p v-if="moreThanOne" class="attachments-button-wrapper">
-			<FilePicker
-				v-if="isFilePickerOpen"
-				:name="t('mail', 'Choose a folder to store the attachments in')"
-				:buttons="saveAttachementButtons"
-				:allow-pick-directory="true"
-				:multiselect="false"
-				:mimetype-filter="['httpd/unix-directory']"
-				@close="() => isFilePickerOpen = false" />
-
 			<NcButton
 				variant="tertiary"
 				size="small"
 				:disabled="savingToCloud"
 				class="attachment-button"
-				@click="() => isFilePickerOpen = true">
+				@click="saveAll">
 				<template #icon>
 					<CloudDownload v-if="!savingToCloud" />
 					<NcLoadingIcon v-else class="spin" />
@@ -82,7 +73,6 @@
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
 import { generateUrl } from '@nextcloud/router'
 import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
@@ -93,6 +83,7 @@ import MessageAttachment from './MessageAttachment.vue'
 import Logger from '../logger.js'
 import AttachmentMixin from '../mixins/AttachmentMixin.js'
 import { saveAttachmentsToFiles } from '../service/AttachmentService.js'
+import { pickFolder } from '../util/filePicker.js'
 
 export default {
 	name: 'MessageAttachments',
@@ -104,7 +95,6 @@ export default {
 		CloudDownload,
 		ChevronDown,
 		ChevronUp,
-		FilePicker,
 	},
 
 	mixins: [AttachmentMixin],
@@ -128,15 +118,6 @@ export default {
 			attachmentImageURL: '',
 			hasNextLine: false,
 			isToggled: false,
-			saveAttachementButtons: [
-				{
-					label: t('mail', 'Choose'),
-					callback: this.saveAll,
-					type: 'primary',
-				},
-			],
-
-			isFilePickerOpen: false,
 		}
 	},
 
@@ -176,20 +157,28 @@ export default {
 
 	methods: {
 
-		saveAll(dest) {
-			const path = dest[0].path
+		async saveAll() {
+			let path
+			try {
+				path = await pickFolder(t('mail', 'Choose a folder to store the attachments in'))
+			} catch (error) {
+				Logger.debug('file picker closed without picking a folder', { error })
+				return
+			}
+
 			this.savingToCloud = true
 			const id = this.$route.params.threadId
 
-			saveAttachmentsToFiles(id, path).then(() => {
+			try {
+				await saveAttachmentsToFiles(id, path)
 				Logger.info('saved')
 				showSuccess(t('mail', 'Attachments saved to Files'))
-			}).catch((error) => {
+			} catch (error) {
 				Logger.error('not saved', error)
 				showError(t('mail', 'Error while saving attachments'))
-			}).finally(() => {
+			} finally {
 				this.savingToCloud = false
-			})
+			}
 		},
 
 		downloadZip() {
diff --git a/src/tests/unit/util/filePicker.spec.js b/src/tests/unit/util/filePicker.spec.js
new file mode 100644
index 0000000000..c8e7193657
--- /dev/null
+++ b/src/tests/unit/util/filePicker.spec.js
@@ -0,0 +1,43 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { getFilePickerBuilder } from '@nextcloud/dialogs'
+import { pickFolder } from '../../../util/filePicker.js'
+
+vi.mock('@nextcloud/dialogs')
+
+describe('pickFolder', () => {
+	let builder
+	let picker
+
+	beforeEach(() => {
+		picker = { pick: vi.fn().mockResolvedValue('/Documents') }
+		builder = {
+			allowDirectories: vi.fn(() => builder),
+			setMultiSelect: vi.fn(() => builder),
+			setMimeTypeFilter: vi.fn(() => builder),
+			addButton: vi.fn(() => builder),
+			build: vi.fn(() => picker),
+		}
+		getFilePickerBuilder.mockReturnValue(builder)
+	})
+
+	it('picks a single folder', async () => {
+		const path = await pickFolder('Choose a folder')
+
+		expect(getFilePickerBuilder).toHaveBeenCalledWith('Choose a folder')
+		expect(builder.allowDirectories).toHaveBeenCalledWith(true)
+		expect(builder.setMultiSelect).toHaveBeenCalledWith(false)
+		expect(builder.setMimeTypeFilter).toHaveBeenCalledWith(['httpd/unix-directory'])
+		expect(path).toBe('/Documents')
+	})
+
+	it('propagates the rejection of a dismissed picker', async () => {
+		const closed = new Error('FilePicker: No nodes selected')
+		picker.pick.mockRejectedValue(closed)
+
+		await expect(pickFolder('Choose a folder')).rejects.toThrow(closed)
+	})
+})
diff --git a/src/util/filePicker.js b/src/util/filePicker.js
new file mode 100644
index 0000000000..2064984b33
--- /dev/null
+++ b/src/util/filePicker.js
@@ -0,0 +1,28 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { getFilePickerBuilder } from '@nextcloud/dialogs'
+import { t } from '@nextcloud/l10n'
+
+/**
+ * Let the user pick a folder from Files.
+ *
+ * @param {string} name Title of the file picker
+ * @return {Promise<string>} Path of the picked folder
+ * @throws {import('@nextcloud/dialogs').FilePickerClosed} If the picker was closed without picking
+ */
+export function pickFolder(name) {
+	return getFilePickerBuilder(name)
+		.allowDirectories(true)
+		.setMultiSelect(false)
+		.setMimeTypeFilter(['httpd/unix-directory'])
+		.addButton({
+			label: t('mail', 'Choose'),
+			variant: 'primary',
+			callback: () => {},
+		})
+		.build()
+		.pick()
+}

From 223f2f96b54325cdb706a7e2f38feba8468d0e84 Mon Sep 17 00:00:00 2001
From: Grigory Vodyanov <scratchx@gmx.com>
Date: Wed, 2 Sep 2026 17:52:58 +0200
Subject: [PATCH 5/7] feat(vue3): remove the unused vue-autosize directive

vue-autosize is Vue-2-only with no successor, but v-autosize was
registered globally and applied to nothing, so no replacement is needed.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Grigory Vodyanov <scratchx@gmx.com>
---
 package-lock.json           | 20 --------------------
 package.json                |  1 -
 src/components/Composer.vue |  4 ----
 3 files changed, 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4778b048ba..ee93edb57c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -56,7 +56,6 @@
         "stylelint": "^17.14.1",
         "uuid": "^14.0.2",
         "vue": "^2.7.16",
-        "vue-autosize": "^1.0.2",
         "vue-dndrop": "^1.3.4",
         "vue-frag": "^1.4.3",
         "vue-material-design-icons": "^5.3.1",
@@ -6720,16 +6719,6 @@
         "postcss": "^8.1.0"
       }
     },
-    "node_modules/autosize": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/autosize/-/autosize-4.0.4.tgz",
-      "integrity": "sha512-5yxLQ22O0fCRGoxGfeLSNt3J8LB1v+umtpMnPW6XjkTWXKoN0AmXAIhelJcDtFT/Y/wYWmfE+oqU10Q0b8FhaQ=="
-    },
-    "node_modules/autosize-input": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/autosize-input/-/autosize-input-0.4.0.tgz",
-      "integrity": "sha512-ibGSCkkw/Seo5BU2vS1ffj5q/s8YxCCzpvmL4fkGf52McrZhCo+t88w2wMPPME6EjYjEESdo0KsuW4N5EpmmMA=="
-    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -17769,15 +17758,6 @@
         "csstype": "^3.1.0"
       }
     },
-    "node_modules/vue-autosize": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/vue-autosize/-/vue-autosize-1.0.2.tgz",
-      "integrity": "sha512-bw99eTjiCK9HI80w9vkv8tl+/wJWELl0rn3QlWfH0I4K37XGjJj0sZX0MDFh1O8Yb7lNq096nWlKJR2Nj0a4mg==",
-      "dependencies": {
-        "autosize": "^4.0.0",
-        "autosize-input": "^0.4.0"
-      }
-    },
     "node_modules/vue-color": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.8.1.tgz",
diff --git a/package.json b/package.json
index 2f0709742e..86f7fe5b4a 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,6 @@
     "stylelint": "^17.14.1",
     "uuid": "^14.0.2",
     "vue": "^2.7.16",
-    "vue-autosize": "^1.0.2",
     "vue-dndrop": "^1.3.4",
     "vue-frag": "^1.4.3",
     "vue-material-design-icons": "^5.3.1",
diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index c5fcd8e07b..06d806aaae 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -558,8 +558,6 @@ import trimStart from 'lodash/fp/trimCharsStart.js'
 import uniqBy from 'lodash/fp/uniqBy.js'
 import mitt from 'mitt'
 import { mapState, mapStores } from 'pinia'
-import Vue from 'vue'
-import Autosize from 'vue-autosize'
 import { NcReferencePickerModal } from '@nextcloud/vue/components/NcRichText'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
 import IconFolder from 'vue-material-design-icons/FolderOutline.vue'
@@ -594,8 +592,6 @@ const debouncedSearch = debouncePromise(findRecipient, 500)
 
 const NO_ALIAS_SET = -1
 
-Vue.use(Autosize)
-
 export default {
 	name: 'Composer',
 	components: {

From abe81198dbee93cc1939b29bfec4dc92920525d7 Mon Sep 17 00:00:00 2001
From: Grigory Vodyanov <scratchx@gmx.com>
Date: Wed, 2 Sep 2026 17:52:59 +0200
Subject: [PATCH 6/7] feat(vue3): replace vue-treeselect with NcSelect
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@riophae/vue-treeselect is Vue-2-only and unmaintained since 2020. The
mailbox tree becomes a flat list whose options carry their depth, and
the option slot indents by it, so nesting stays visible; the ~25 lines
of CSS reaching into .vue-treeselect__* internals go away with it.

The component keeps its value/input contract — moving it to modelValue
is Vue 3's concern, not this wave's — so only the deep selector in
ActionFileinto has to follow, from .vue-treeselect__control to
.v-select.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Grigory Vodyanov <scratchx@gmx.com>
---
 package-lock.json                             |  44 -------
 package.json                                  |   1 -
 src/components/MailboxInlinePicker.vue        | 115 ++++++------------
 src/components/mailFilter/ActionFileinto.vue  |   6 +-
 .../MailboxInlinePicker.vue.spec.js           |  71 +++++++++++
 5 files changed, 107 insertions(+), 130 deletions(-)
 create mode 100644 src/tests/unit/components/MailboxInlinePicker.vue.spec.js

diff --git a/package-lock.json b/package-lock.json
index ee93edb57c..d958c34def 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,7 +29,6 @@
         "@nextcloud/timezones": "^1.0.2",
         "@nextcloud/vue": "^8.41.0",
         "@pinia/testing": "^0.1.7",
-        "@riophae/vue-treeselect": "^0.4.0",
         "address-rfc2822": "^2.2.4",
         "ckeditor5": "^47.6.2-alpha.0",
         "cldr-core": "^48.2.0",
@@ -4978,24 +4977,6 @@
         "node": ">=20"
       }
     },
-    "node_modules/@riophae/vue-treeselect": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@riophae/vue-treeselect/-/vue-treeselect-0.4.0.tgz",
-      "integrity": "sha512-J4atYmBqXQmiPFK/0B5sXKjtnGc21mBJEiyKIDZwk0Q9XuynVFX6IJ4EpaLmUgL5Tve7HAS7wkiGGSti6Uaxcg==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "babel-helper-vue-jsx-merge-props": "^2.0.3",
-        "easings-css": "^1.0.0",
-        "fuzzysearch": "^1.0.3",
-        "is-promise": "^2.1.0",
-        "lodash": "^4.0.0",
-        "material-colors": "^1.2.6",
-        "watch-size": "^2.0.0"
-      },
-      "peerDependencies": {
-        "vue": "^2.2.0"
-      }
-    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.60.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.0.tgz",
@@ -6755,11 +6736,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/babel-helper-vue-jsx-merge-props": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
-      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
-    },
     "node_modules/babel-loader": {
       "version": "10.1.1",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-10.1.1.tgz",
@@ -8391,11 +8367,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/easings-css": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/easings-css/-/easings-css-1.0.0.tgz",
-      "integrity": "sha512-7Uq7NdazNfVtr0RNmPAys8it0zKCuaqxJStYKEl72D3j4gbvXhhaM7iWNbqhA4C94ygCye6VuyhzBRQC4szeBg=="
-    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -9946,11 +9917,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/fuzzysearch": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/fuzzysearch/-/fuzzysearch-1.0.3.tgz",
-      "integrity": "sha512-s+kNWQuI3mo9OALw0HJ6YGmMbLqEufCh2nX/zzV5CrICQ/y4AwPxM+6TIiF9ItFCHXFCyM/BfCCmN57NTIJuPg=="
-    },
     "node_modules/fuzzysort": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/fuzzysort/-/fuzzysort-3.1.0.tgz",
@@ -11404,11 +11370,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/is-promise": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
-      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
-    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -18059,11 +18020,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/watch-size": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/watch-size/-/watch-size-2.0.0.tgz",
-      "integrity": "sha512-M92R89dNoTPWyCD+HuUEDdhaDnh9jxPGOwlDc0u51jAgmjUvzqaEMynXSr3BaWs+QdHYk4KzibPy1TFtjLmOZQ=="
-    },
     "node_modules/watchpack": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.2.tgz",
diff --git a/package.json b/package.json
index 86f7fe5b4a..b4682a5765 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,6 @@
     "@nextcloud/timezones": "^1.0.2",
     "@nextcloud/vue": "^8.41.0",
     "@pinia/testing": "^0.1.7",
-    "@riophae/vue-treeselect": "^0.4.0",
     "address-rfc2822": "^2.2.4",
     "ckeditor5": "^47.6.2-alpha.0",
     "cldr-core": "^48.2.0",
diff --git a/src/components/MailboxInlinePicker.vue b/src/components/MailboxInlinePicker.vue
index f92edba294..4021177421 100644
--- a/src/components/MailboxInlinePicker.vue
+++ b/src/components/MailboxInlinePicker.vue
@@ -3,27 +3,35 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<Treeselect
-		ref="Treeselect"
-		v-model="selected"
+	<NcSelect
+		:model-value="value"
 		:options="mailboxes"
-		:multiple="false"
+		:reduce="(option) => option.id"
 		:clearable="false"
-		:disabled="disabled" />
+		:disabled="disabled"
+		:aria-label-combobox="t('mail', 'Select a mailbox')"
+		label="label"
+		@update:model-value="$emit('input', $event)">
+		<template #option="option">
+			<NcEllipsisedOption
+				class="mailbox-option"
+				:style="{ '--mailbox-depth': option.depth }"
+				:name="option.label" />
+		</template>
+	</NcSelect>
 </template>
 
 <script>
-import Treeselect from '@riophae/vue-treeselect'
+import { NcEllipsisedOption, NcSelect } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 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,
+		NcEllipsisedOption,
+		NcSelect,
 	},
 
 	props: {
@@ -43,12 +51,6 @@ export default {
 		},
 	},
 
-	data() {
-		return {
-			selected: this.value,
-		}
-	},
-
 	computed: {
 		...mapStores(useMainStore),
 		mailboxes() {
@@ -56,76 +58,29 @@ export default {
 		},
 	},
 
-	watch: {
-		selected(val) {
-			if (val !== this.value) {
-				this.$emit('input', val)
-				this.selected = val
-			}
-		},
-	},
-
 	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 {
-					id: mailbox.databaseId,
-					label: mailbox.displayName,
-					children: mailbox.mailboxes.length > 0 ? this.getMailboxes(mailbox.databaseId) : '',
-				}
-			})
+		getMailboxes(mailboxId, depth = 0) {
+			const mailboxes = mailboxId
+				? this.mainStore.getSubMailboxes(mailboxId)
+				: this.mainStore.getMailboxes(this.account.accountId)
+
+			return mailboxes
+				.filter((mailbox) => mailboxHasRights(mailbox, 'i'))
+				.flatMap((mailbox) => [
+					{
+						id: mailbox.databaseId,
+						label: mailbox.displayName,
+						depth,
+					},
+					...this.getMailboxes(mailbox.databaseId, depth + 1),
+				])
 		},
 	},
 }
 </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)
+<style lang="scss" scoped>
+.mailbox-option {
+	padding-inline-start: calc(var(--mailbox-depth) * var(--default-grid-baseline) * 3);
 }
-
-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/ActionFileinto.vue b/src/components/mailFilter/ActionFileinto.vue
index a73286c04d..0992b37d55 100644
--- a/src/components/mailFilter/ActionFileinto.vue
+++ b/src/components/mailFilter/ActionFileinto.vue
@@ -54,11 +54,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-:deep(.vue-treeselect__control) {
+:deep(.v-select) {
 	width: 100%; /* todo: fix MailboxInlinePicker.vue styling instead */
 }
-
-:deep(.vue-treeselect__input-container) {
-	padding-inline-end: 0; /* todo: fix MailboxInlinePicker.vue styling instead */
-}
 </style>
diff --git a/src/tests/unit/components/MailboxInlinePicker.vue.spec.js b/src/tests/unit/components/MailboxInlinePicker.vue.spec.js
new file mode 100644
index 0000000000..69969e72c8
--- /dev/null
+++ b/src/tests/unit/components/MailboxInlinePicker.vue.spec.js
@@ -0,0 +1,71 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createTestingPinia } from '@pinia/testing'
+import { createLocalVue, shallowMount } from '@vue/test-utils'
+import { PiniaVuePlugin, setActivePinia } from 'pinia'
+import MailboxInlinePicker from '../../../components/MailboxInlinePicker.vue'
+import Nextcloud from '../../../mixins/Nextcloud.js'
+import useMainStore from '../../../store/mainStore.js'
+
+const localVue = createLocalVue()
+localVue.use(PiniaVuePlugin)
+localVue.mixin(Nextcloud)
+
+describe('MailboxInlinePicker', () => {
+	let store
+
+	const mount = () => shallowMount(MailboxInlinePicker, {
+		propsData: {
+			account: { accountId: 1 },
+		},
+		localVue,
+	})
+
+	beforeEach(() => {
+		setActivePinia(createTestingPinia())
+		store = useMainStore()
+	})
+
+	it('flattens nested mailboxes into indented options', () => {
+		store.getMailboxes = vi.fn().mockReturnValue([
+			{ databaseId: 1, displayName: 'INBOX' },
+			{ databaseId: 4, displayName: 'Sent' },
+		])
+		store.getSubMailboxes = vi.fn().mockImplementation((id) => {
+			switch (id) {
+				case 1:
+					return [{ databaseId: 2, displayName: 'Archive' }]
+				case 2:
+					return [{ databaseId: 3, displayName: '2020' }]
+				default:
+					return []
+			}
+		})
+
+		const view = mount()
+
+		expect(view.vm.mailboxes).toEqual([
+			{ id: 1, label: 'INBOX', depth: 0 },
+			{ id: 2, label: 'Archive', depth: 1 },
+			{ id: 3, label: '2020', depth: 2 },
+			{ id: 4, label: 'Sent', depth: 0 },
+		])
+	})
+
+	it('skips mailboxes the user may not insert into', () => {
+		store.getMailboxes = vi.fn().mockReturnValue([
+			{ databaseId: 1, displayName: 'INBOX' },
+			{ databaseId: 2, displayName: 'Shared', myAcls: 'lr' },
+		])
+		store.getSubMailboxes = vi.fn().mockReturnValue([])
+
+		const view = mount()
+
+		expect(view.vm.mailboxes).toEqual([
+			{ id: 1, label: 'INBOX', depth: 0 },
+		])
+	})
+})

From aa1a500ffb0de6a17a755d634e19965791b773cd Mon Sep 17 00:00:00 2001
From: Grigory Vodyanov <scratchx@gmx.com>
Date: Wed, 2 Sep 2026 17:53:01 +0200
Subject: [PATCH 7/7] feat(vue3): replace vue-tabs-component with NcRadioGroup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

vue-tabs-component is Vue-2-only. NcTabs does not exist in the 8.x line
and 8.41 is its last release, so the tabs become a segmented control —
the same NcRadioGroup pattern the app settings dialog already uses.

Panels stay mounted under v-show, matching what the tabs library did,
and the manual-mode prefill becomes an immediate watcher because the
library used to emit its changed event once on mount.

Most of the diff is one tab level of re-indentation from dropping the
Tabs wrapper; git diff -w shows the actual change.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Grigory Vodyanov <scratchx@gmx.com>
---
 package-lock.json              |   9 -
 package.json                   |   1 -
 src/components/AccountForm.vue | 496 ++++++++++++++++-----------------
 3 files changed, 239 insertions(+), 267 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d958c34def..9151b8b9b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -60,7 +60,6 @@
         "vue-material-design-icons": "^5.3.1",
         "vue-router": "^3.6.5",
         "vue-shortkey": "^3.1.7",
-        "vue-tabs-component": "^1.5.0",
         "webdav": "5.10.0"
       },
       "devDependencies": {
@@ -17941,14 +17940,6 @@
         "node": ">=4.0.0"
       }
     },
-    "node_modules/vue-tabs-component": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/vue-tabs-component/-/vue-tabs-component-1.5.0.tgz",
-      "integrity": "sha512-ld4p+hv49Fimw+zv/7GQqMhbjAHjpbWF3UiJtmMaSnvLKbsB1ysfs9dQH0SZ8NvdYpqqKay/VLIqR9yXgse1Sg==",
-      "peerDependencies": {
-        "vue": "^2.3.0"
-      }
-    },
     "node_modules/vue-template-compiler": {
       "version": "2.7.16",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
diff --git a/package.json b/package.json
index b4682a5765..b61e2659c3 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,6 @@
     "vue-material-design-icons": "^5.3.1",
     "vue-router": "^3.6.5",
     "vue-shortkey": "^3.1.7",
-    "vue-tabs-component": "^1.5.0",
     "webdav": "5.10.0"
   },
   "devDependencies": {
diff --git a/src/components/AccountForm.vue b/src/components/AccountForm.vue
index b48e25995e..287f590736 100644
--- a/src/components/AccountForm.vue
+++ b/src/components/AccountForm.vue
@@ -4,234 +4,236 @@
 -->
 <template>
 	<form id="account-form" @submit.prevent="onSubmit">
-		<Tabs
-			:options="{ useUrlFragment: false, defaultTabHash: settingsPage ? 'manual' : 'auto' }"
-			cache-lifetime="0"
-			@changed="onModeChanged">
-			<Tab id="auto" key="auto" :name="t('mail', 'Auto')">
-				<NcInputField
-					id="auto-name"
-					v-model="accountName"
-					:label="t('mail', 'Name')"
-					type="text"
-					:placeholder="t('mail', 'Name')"
-					:disabled="loading"
-					autofocus />
-				<NcInputField
-					id="auto-address"
-					v-model="emailAddress"
-					:label="t('mail', 'Mail address')"
-					:disabled="loading"
-					:placeholder="t('mail', 'name@example.org')"
-					required
-					type="email"
-					@change="clearFeedback" />
-				<p v-if="!isValidEmail(emailAddress)" class="account-form--error">
-					{{ t('mail', 'Please enter an email of the format name@example.com') }}
-				</p>
-				<NcPasswordField
-					id="auto-password"
-					v-model="autoConfig.password"
-					:disabled="loading"
-					type="password"
-					:label="t('mail', 'Password')"
-					:required="!hasPasswordAlternatives"
-					@change="clearFeedback" />
+		<NcRadioGroup
+			v-model="mode"
+			:label="t('mail', 'Mail server configuration mode')"
+			hide-label>
+			<NcRadioGroupButton :label="t('mail', 'Auto')" value="auto" :disabled="loading" />
+			<NcRadioGroupButton :label="t('mail', 'Manual')" value="manual" :disabled="loading" />
+		</NcRadioGroup>
+		<div v-show="mode === 'auto'" class="account-form__panel">
+			<NcInputField
+				id="auto-name"
+				v-model="accountName"
+				:label="t('mail', 'Name')"
+				type="text"
+				:placeholder="t('mail', 'Name')"
+				:disabled="loading"
+				autofocus />
+			<NcInputField
+				id="auto-address"
+				v-model="emailAddress"
+				:label="t('mail', 'Mail address')"
+				:disabled="loading"
+				:placeholder="t('mail', 'name@example.org')"
+				required
+				type="email"
+				@change="clearFeedback" />
+			<p v-if="!isValidEmail(emailAddress)" class="account-form--error">
+				{{ t('mail', 'Please enter an email of the format name@example.com') }}
+			</p>
+			<NcPasswordField
+				id="auto-password"
+				v-model="autoConfig.password"
+				:disabled="loading"
+				type="password"
+				:label="t('mail', 'Password')"
+				:required="!hasPasswordAlternatives"
+				@change="clearFeedback" />
+			<NcCheckboxRadioSwitch
+				id="auto-classification-enabled"
+				v-model="classificationEnabled"
+				:disabled="loading">
+				{{ t('mail', 'Enable mark as important classification') }}
+			</NcCheckboxRadioSwitch>
+		</div>
+		<div v-show="mode === 'manual'" class="account-form__panel">
+			<NcInputField
+				id="man-name"
+				v-model="accountName"
+				:label="t('mail', 'Name')"
+				type="text"
+				:placeholder="t('mail', 'Name')"
+				:disabled="loading" />
+			<NcInputField
+				id="man-address"
+				v-model="emailAddress"
+				:label="t('mail', 'Mail address')"
+				type="email"
+				:placeholder="t('mail', 'name@example.org')"
+				:disabled="loading"
+				required
+				@change="clearFeedback" />
+			<p v-if="!isValidEmail(emailAddress)" class="account-form--error">
+				{{ t('mail', 'Please enter an email of the format name@example.com') }}
+			</p>
+
+			<h4>{{ t('mail', 'IMAP Settings') }}</h4>
+			<NcInputField
+				id="man-imap-host"
+				v-model="manualConfig.imapHost"
+				:label="t('mail', 'IMAP Host')"
+				type="text"
+				:placeholder="t('mail', 'IMAP Host')"
+				:disabled="loading"
+				required
+				@change="syncCredentials" />
+			<h4 class="account-form__heading--required">
+				{{ t('mail', 'IMAP Security') }}
+			</h4>
+			<div class="flex-row">
 				<NcCheckboxRadioSwitch
-					id="auto-classification-enabled"
-					v-model="classificationEnabled"
-					:disabled="loading">
-					{{ t('mail', 'Enable mark as important classification') }}
-				</NcCheckboxRadioSwitch>
-			</Tab>
-			<Tab id="manual" key="manual" :name="t('mail', 'Manual')">
-				<NcInputField
-					id="man-name"
-					v-model="accountName"
-					:label="t('mail', 'Name')"
-					type="text"
-					:placeholder="t('mail', 'Name')"
-					:disabled="loading" />
-				<NcInputField
-					id="man-address"
-					v-model="emailAddress"
-					:label="t('mail', 'Mail address')"
-					type="email"
-					:placeholder="t('mail', 'name@example.org')"
+					id="man-imap-sec-none"
+					:button-variant="true"
+					:model-value="manualConfig.imapSslMode"
+					type="radio"
+					name="man-imap-sec"
 					:disabled="loading"
-					required
-					@change="clearFeedback" />
-				<p v-if="!isValidEmail(emailAddress)" class="account-form--error">
-					{{ t('mail', 'Please enter an email of the format name@example.com') }}
-				</p>
-
-				<h4>{{ t('mail', 'IMAP Settings') }}</h4>
-				<NcInputField
-					id="man-imap-host"
-					v-model="manualConfig.imapHost"
-					:label="t('mail', 'IMAP Host')"
-					type="text"
-					:placeholder="t('mail', 'IMAP Host')"
-					:disabled="loading"
-					required
-					@change="syncCredentials" />
-				<h4 class="account-form__heading--required">
-					{{ t('mail', 'IMAP Security') }}
-				</h4>
-				<div class="flex-row">
-					<NcCheckboxRadioSwitch
-						id="man-imap-sec-none"
-						:button-variant="true"
-						:model-value="manualConfig.imapSslMode"
-						type="radio"
-						name="man-imap-sec"
-						:disabled="loading"
-						value="none"
-						button-variant-grouped="horizontal"
-						@update:checked="onImapSslModeChange">
-						{{ t('mail', 'None') }}
-					</NcCheckboxRadioSwitch>
-					<NcCheckboxRadioSwitch
-						id="man-imap-sec-ssl"
-						:button-variant="true"
-						:model-value="manualConfig.imapSslMode"
-						type="radio"
-						name="man-imap-sec"
-						:disabled="loading"
-						value="ssl"
-						button-variant-grouped="horizontal"
-						@update:checked="onImapSslModeChange">
-						{{ t('mail', 'SSL/TLS') }}
-					</NcCheckboxRadioSwitch>
-					<NcCheckboxRadioSwitch
-						id="man-imap-sec-tls"
-						:button-variant="true"
-						:model-value="manualConfig.imapSslMode"
-						type="radio"
-						name="man-imap-sec"
-						:disabled="loading"
-						value="tls"
-						button-variant-grouped="horizontal"
-						@update:checked="onImapSslModeChange">
-						{{ t('mail', 'STARTTLS') }}
-					</NcCheckboxRadioSwitch>
-				</div>
-				<NcInputField
-					id="man-imap-port"
-					v-model="manualConfig.imapPort"
-					:label="t('mail', 'IMAP Port')"
-					type="number"
-					:placeholder="t('mail', 'IMAP Port')"
-					:disabled="loading"
-					required
-					@change="clearFeedback" />
-				<NcInputField
-					id="man-imap-user"
-					v-model="manualConfig.imapUser"
-					:label="t('mail', 'IMAP User')"
-					type="text"
-					:placeholder="t('mail', 'IMAP User')"
-					:disabled="loading"
-					required
-					@change="syncCredentials" />
-				<NcPasswordField
-					v-if="!useOauth"
-					id="man-imap-password"
-					v-model="manualConfig.imapPassword"
-					type="password"
-					:label="t('mail', 'IMAP Password')"
-					:disabled="loading"
-					required
-					@change="syncCredentials" />
-
-				<h4>{{ t('mail', 'SMTP Settings') }}</h4>
-				<NcInputField
-					id="man-smtp-host"
-					v-model="manualConfig.smtpHost"
-					:label="t('mail', 'SMTP Host')"
-					type="text"
-					name="smtp-host"
-					:placeholder="t('mail', 'SMTP Host')"
+					value="none"
+					button-variant-grouped="horizontal"
+					@update:checked="onImapSslModeChange">
+					{{ t('mail', 'None') }}
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch
+					id="man-imap-sec-ssl"
+					:button-variant="true"
+					:model-value="manualConfig.imapSslMode"
+					type="radio"
+					name="man-imap-sec"
 					:disabled="loading"
-					required
-					@change="unsyncCredentials" />
-				<h4 class="account-form__heading--required">
-					{{ t('mail', 'SMTP Security') }}
-				</h4>
-				<div class="flex-row">
-					<NcCheckboxRadioSwitch
-						id="man-imap-sec-none"
-						:button-variant="true"
-						:model-value="manualConfig.smtpSslMode"
-						type="radio"
-						name="man-smtp-sec"
-						:disabled="loading"
-						value="none"
-						button-variant-grouped="horizontal"
-						@update:checked="onSmtpSslModeChange">
-						{{ t('mail', 'None') }}
-					</NcCheckboxRadioSwitch>
-					<NcCheckboxRadioSwitch
-						id="man-imap-sec-ssl"
-						:button-variant="true"
-						:model-value="manualConfig.smtpSslMode"
-						type="radio"
-						name="man-smtp-sec"
-						:disabled="loading"
-						value="ssl"
-						button-variant-grouped="horizontal"
-						@update:checked="onSmtpSslModeChange">
-						{{ t('mail', 'SSL/TLS') }}
-					</NcCheckboxRadioSwitch>
-					<NcCheckboxRadioSwitch
-						id="man-imap-sec-tls"
-						:button-variant="true"
-						:model-value="manualConfig.smtpSslMode"
-						type="radio"
-						name="man-smtp-sec"
-						:disabled="loading"
-						value="tls"
-						button-variant-grouped="horizontal"
-						@update:checked="onSmtpSslModeChange">
-						{{ t('mail', 'STARTTLS') }}
-					</NcCheckboxRadioSwitch>
-				</div>
-				<NcInputField
-					id="man-smtp-port"
-					v-model="manualConfig.smtpPort"
-					:label="t('mail', 'SMTP Port')"
-					type="number"
-					:placeholder="t('mail', 'SMTP Port')"
+					value="ssl"
+					button-variant-grouped="horizontal"
+					@update:checked="onImapSslModeChange">
+					{{ t('mail', 'SSL/TLS') }}
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch
+					id="man-imap-sec-tls"
+					:button-variant="true"
+					:model-value="manualConfig.imapSslMode"
+					type="radio"
+					name="man-imap-sec"
 					:disabled="loading"
-					required
-					@change="clearFeedback" />
-				<NcInputField
-					id="man-smtp-user"
-					v-model="manualConfig.smtpUser"
-					:label="t('mail', 'SMTP User')"
-					type="text"
-					:placeholder="t('mail', 'SMTP User')"
+					value="tls"
+					button-variant-grouped="horizontal"
+					@update:checked="onImapSslModeChange">
+					{{ t('mail', 'STARTTLS') }}
+				</NcCheckboxRadioSwitch>
+			</div>
+			<NcInputField
+				id="man-imap-port"
+				v-model="manualConfig.imapPort"
+				:label="t('mail', 'IMAP Port')"
+				type="number"
+				:placeholder="t('mail', 'IMAP Port')"
+				:disabled="loading"
+				required
+				@change="clearFeedback" />
+			<NcInputField
+				id="man-imap-user"
+				v-model="manualConfig.imapUser"
+				:label="t('mail', 'IMAP User')"
+				type="text"
+				:placeholder="t('mail', 'IMAP User')"
+				:disabled="loading"
+				required
+				@change="syncCredentials" />
+			<NcPasswordField
+				v-if="!useOauth"
+				id="man-imap-password"
+				v-model="manualConfig.imapPassword"
+				type="password"
+				:label="t('mail', 'IMAP Password')"
+				:disabled="loading"
+				required
+				@change="syncCredentials" />
+
+			<h4>{{ t('mail', 'SMTP Settings') }}</h4>
+			<NcInputField
+				id="man-smtp-host"
+				v-model="manualConfig.smtpHost"
+				:label="t('mail', 'SMTP Host')"
+				type="text"
+				name="smtp-host"
+				:placeholder="t('mail', 'SMTP Host')"
+				:disabled="loading"
+				required
+				@change="unsyncCredentials" />
+			<h4 class="account-form__heading--required">
+				{{ t('mail', 'SMTP Security') }}
+			</h4>
+			<div class="flex-row">
+				<NcCheckboxRadioSwitch
+					id="man-imap-sec-none"
+					:button-variant="true"
+					:model-value="manualConfig.smtpSslMode"
+					type="radio"
+					name="man-smtp-sec"
 					:disabled="loading"
-					required
-					@change="unsyncCredentials" />
-				<NcPasswordField
-					v-if="!useOauth"
-					id="man-smtp-password"
-					v-model="manualConfig.smtpPassword"
-					:label="t('mail', 'SMTP Password')"
-					type="password"
+					value="none"
+					button-variant-grouped="horizontal"
+					@update:checked="onSmtpSslModeChange">
+					{{ t('mail', 'None') }}
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch
+					id="man-imap-sec-ssl"
+					:button-variant="true"
+					:model-value="manualConfig.smtpSslMode"
+					type="radio"
+					name="man-smtp-sec"
 					:disabled="loading"
-					required
-					@change="unsyncCredentials" />
+					value="ssl"
+					button-variant-grouped="horizontal"
+					@update:checked="onSmtpSslModeChange">
+					{{ t('mail', 'SSL/TLS') }}
+				</NcCheckboxRadioSwitch>
 				<NcCheckboxRadioSwitch
-					v-if="isSetup"
-					id="auto-classification-enabled"
-					v-model="classificationEnabled"
-					:disabled="loading">
-					{{ t('mail', 'Enable mark as important classification') }}
+					id="man-imap-sec-tls"
+					:button-variant="true"
+					:model-value="manualConfig.smtpSslMode"
+					type="radio"
+					name="man-smtp-sec"
+					:disabled="loading"
+					value="tls"
+					button-variant-grouped="horizontal"
+					@update:checked="onSmtpSslModeChange">
+					{{ t('mail', 'STARTTLS') }}
 				</NcCheckboxRadioSwitch>
-			</Tab>
-		</Tabs>
+			</div>
+			<NcInputField
+				id="man-smtp-port"
+				v-model="manualConfig.smtpPort"
+				:label="t('mail', 'SMTP Port')"
+				type="number"
+				:placeholder="t('mail', 'SMTP Port')"
+				:disabled="loading"
+				required
+				@change="clearFeedback" />
+			<NcInputField
+				id="man-smtp-user"
+				v-model="manualConfig.smtpUser"
+				:label="t('mail', 'SMTP User')"
+				type="text"
+				:placeholder="t('mail', 'SMTP User')"
+				:disabled="loading"
+				required
+				@change="unsyncCredentials" />
+			<NcPasswordField
+				v-if="!useOauth"
+				id="man-smtp-password"
+				v-model="manualConfig.smtpPassword"
+				:label="t('mail', 'SMTP Password')"
+				type="password"
+				:disabled="loading"
+				required
+				@change="unsyncCredentials" />
+			<NcCheckboxRadioSwitch
+				v-if="isSetup"
+				id="auto-classification-enabled"
+				v-model="classificationEnabled"
+				:disabled="loading">
+				{{ t('mail', 'Enable mark as important classification') }}
+			</NcCheckboxRadioSwitch>
+		</div>
 		<div v-if="isGoogleAccount && !googleOauthUrl" class="account-form__google-sso">
 			{{ t('mail', 'Google requires OAuth authentication. If your Nextcloud admin has not configured Google OAuth, you can use a Google App Password instead.') }}
 		</div>
@@ -277,9 +279,8 @@
 <script>
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
-import { NcButton, NcCheckboxRadioSwitch, NcInputField, NcLoadingIcon, NcPasswordField } from '@nextcloud/vue'
+import { NcButton, NcCheckboxRadioSwitch, NcInputField, NcLoadingIcon, NcPasswordField, NcRadioGroup, NcRadioGroupButton } from '@nextcloud/vue'
 import { mapState, mapStores } from 'pinia'
-import { Tab, Tabs } from 'vue-tabs-component'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import { CONSENT_ABORTED, getUserConsent } from '../integration/oauth.js'
 import logger from '../logger.js'
@@ -297,8 +298,8 @@ export default {
 		NcPasswordField,
 		NcInputField,
 		NcCheckboxRadioSwitch,
-		Tab,
-		Tabs,
+		NcRadioGroup,
+		NcRadioGroupButton,
 		NcButton,
 		NcLoadingIcon,
 		IconCheck,
@@ -334,7 +335,7 @@ export default {
 		return {
 			loading: false,
 			loadingMessage: undefined,
-			mode: 'auto',
+			mode: this.account !== undefined ? 'manual' : 'auto',
 			accountName: this.displayName,
 			emailAddress: this.email,
 			classificationEnabled: fromAccountOr('classificationEnabled', loadState('mail', 'importance_classification_default', true)),
@@ -368,10 +369,6 @@ export default {
 			'microsoftOauthUrl',
 		]),
 
-		settingsPage() {
-			return this.account !== undefined
-		},
-
 		isSetup() {
 			return this.account === undefined
 		},
@@ -441,11 +438,14 @@ export default {
 		},
 	},
 
-	methods: {
-		onModeChanged(e) {
-			this.mode = e.tab.id
+	watch: {
+		mode: {
+			immediate: true,
+			handler(mode) {
+				if (mode !== 'manual') {
+					return
+				}
 
-			if (this.mode === 'manual') {
 				// IMAP
 				if (this.manualConfig.imapUser === '') {
 					this.manualConfig.imapUser = this.emailAddress
@@ -461,9 +461,11 @@ export default {
 				if (this.manualConfig.smtpPassword === '') {
 					this.manualConfig.smtpPassword = this.autoConfig.password
 				}
-			}
+			},
 		},
+	},
 
+	methods: {
 		onImapSslModeChange(value) {
 			this.clearFeedback()
 			this.manualConfig.imapSslMode = value
@@ -754,38 +756,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-:deep(.tabs-component-tabs) {
-	display: flex;
-}
-
-:deep(.tabs-component-tab) {
-	flex-grow: 1;
-	text-align: center;
-	color: var(--color-text-lighter);
-	margin-bottom: calc(var(--default-grid-baseline) * 2 + var(--default-grid-baseline) / 2);
-}
-
-:deep(.tabs-component-tab.is-active) {
-	border-bottom: var(--border-width-input) solid black;
-	font-weight: bold;
-}
-
 :deep(.input-field) {
 	margin: calc(var(--default-grid-baseline) * 3) 0;
 }
 
-.tabs-component-panels {
-	padding-top: calc(var(--default-grid-baseline) * 5);
-}
-
-.tabs-component-panels label {
+.account-form__panel label {
 	text-align: start;
 	width: 100%;
 	display: inline-block;
 }
 
-.tabs-component-panels input,
-.tabs-component-panels select {
+.account-form__panel input,
+.account-form__panel select {
 	margin-bottom: calc(var(--default-grid-baseline) * 2);
 }
 </style>