fix: improved widget for mailbox selection

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>