[stable5.11] fix(settings): mount account-settings dialog at app root

src/components/AccountSettings.vue

@@ -206,7 +206,6 @@ export default {
 	data() {
 		return {
 			trapElements: [],
-			fetchActiveSieveScript: this.account.sieveEnabled,
 			loadingClassificationToggle: false,
 			systemVersion: parseInt(OC.config.version.split('.')[0], 10),
 		}
@@ -224,24 +223,26 @@ export default {
 	},
 
 	watch: {
-		open(newState, oldState) {
-			if (newState === true && this.fetchActiveSieveScript === true) {
-				logger.debug(`Load active sieve script for account ${this.account.accountId}`)
-				this.fetchActiveSieveScript = false
-				this.mainStore.fetchActiveSieveScript({
-					accountId: this.account.id,
+		scrollToSection: {
+			immediate: true,
+			handler(newState) {
+				this.$nextTick(() => {
+					this.$refs[newState]?.$el?.scrollIntoView({
+						behavior: 'smooth',
+						block: 'start',
+					})
 				})
-			}
+			},
 		},
+	},
 
-		scrollToSection(newState) {
-			this.$nextTick(() => {
-				this.$refs[newState]?.$el?.scrollIntoView({
-					behavior: 'smooth',
-					block: 'start',
-				})
+	mounted() {
+		if (this.account.sieveEnabled) {
+			logger.debug(`Load active sieve script for account ${this.account.accountId}`)
+			this.mainStore.fetchActiveSieveScript({
+				accountId: this.account.id,
 			})
-		},
+		}
 	},
 
 	methods: {
@@ -251,8 +252,8 @@ export default {
 			})
 		},
 
-		updateOpen() {
-			this.$emit('update:open')
+		onClose() {
+			this.$emit('close')
 		},
 
 		async onToggleClassification(classificationEnabled) {

src/components/Navigation.vue

@@ -120,11 +120,17 @@ export default {
 		return {
 			refreshing: false,
 			showSettings: false,
+			settingsAccountId: null,
+			settingsSection: undefined,
 		}
 	},
 
 	computed: {
 		...mapStores(useOutboxStore, useMainStore),
+		settingsAccount() {
+			return this.settingsAccountId ? this.mainStore.getAccount(this.settingsAccountId) : null
+		},
+
 		menu() {
 			return this.mainStore.getAccounts
 				.filter((account) => account.id !== UNIFIED_ACCOUNT_ID)
@@ -164,7 +170,23 @@ export default {
 		},
 	},
 
+	watch: {
+		'mainStore.showAccountSettings': function(settings) {
+			if (settings?.accountId) {
+				this.settingsAccountId = settings.accountId
+				this.settingsSection = settings.section
+			} else {
+				this.settingsAccountId = null
+				this.settingsSection = undefined
+			}
+		},
+	},
+
 	methods: {
+		onCloseAccountSettings() {
+			this.mainStore.showSettingsForAccountMutation(null)
+		},
+
 		showMailSettings() {
 			this.showSettings = true
 		},

src/components/NavigationAccount.vue

@@ -30,7 +30,7 @@
 					</ActionText>
 					<ActionButton
 						:close-after-click="true"
-						@click="showAccountSettings(true)">
+						@click="showAccountSettings">
 						<template #icon>
 							<IconSettings :size="20" />
 						</template>
@@ -96,11 +96,6 @@
 				</template>
 			</template>
 		</NcAppNavigationCaption>
-		<AccountSettings
-			:open="showSettings"
-			:account="account"
-			:scroll-to-section="showSettingsSection"
-			@update:open="showAccountSettings($event)" />
 		<DelegationModal v-if="showDelegationModal" :account="account" @close="showDelegationModal = false" />
 	</Fragment>
 </template>
@@ -193,14 +188,6 @@ export default {
 
 	computed: {
 		...mapStores(useMainStore),
-		showSettings() {
-			return this.mainStore.showSettingsForAccount(this.account.id)
-		},
-
-		showSettingsSection() {
-			return this.mainStore.showSettingsSectionForAccount(this.account.id)
-		},
-
 		visible() {
 			return this.account.isUnified !== true && this.account.visible !== false
 		},
@@ -344,17 +331,8 @@ export default {
 			}
 		},
 
-		/**
-		 * Show the settings for the given account
-		 *
-		 * @param {boolean} show true to show, false to hide
-		 */
-		showAccountSettings(show) {
-			if (show) {
-				this.mainStore.showSettingsForAccountMutation(this.account.id)
-			} else {
-				this.mainStore.showSettingsForAccountMutation(null)
-			}
+		showAccountSettings() {
+			this.mainStore.showSettingsForAccountMutation(this.account.id)
 		},
 	},
 }

src/store/mainStore/actions.js

@@ -2512,15 +2512,6 @@ export default function mainStoreActions() {
 		getInbox(accountId) {
 			return this.findMailboxBySpecialRole(accountId, 'inbox')
 		},
-		showSettingsForAccount(accountId) {
-			return this.showAccountSettings?.accountId === accountId
-		},
-		showSettingsSectionForAccount(accountId) {
-			if (this.showAccountSettings?.accountId !== accountId) {
-				return undefined
-			}
-			return this.showAccountSettings.section
-		},
 		getMyTextBlocks() {
 			return this.myTextBlocks
 		},