From 21c8b7c097979c225ef91704ed340c615593e7e4 Mon Sep 17 00:00:00 2001
From: Dillard Blom <dillard.blom@ensembia.com>
Date: Mon, 2 Nov 2026 13:56:02 +0100
Subject: [PATCH] feat(ui): allow folding an account to a single line

Add a toggle to every account in the navigation. Folding an account
hides all its mailboxes, including the inbox and the special folders
that the existing "Collapse folders" toggle keeps visible, so many
accounts fit on one screen. A folded account shows the number of unread
messages in its inbox next to its name. Account headers that directly
follow each other have no extra spacing between them.

The toggle sits at the end of the row, after the actions menu, in the
same column as a folder's own disclosure arrow. The account name starts
flush with the row, lined up with the folder icons, and an account's
mailboxes are indented a little under its header. The item's own CSS
sets width: 100%, so the inset comes off that width too; a plain margin
would push the row's right edge past the list.

The account name now links to the account's inbox, so switching between
accounts does not require unfolding them. Other folders are still
reached by unfolding the account. While its inbox is open, a folded
account is highlighted like an active navigation entry.

The folded state is stored per account in the existing account-settings
preference, like the collapsed state, so no backend change is needed.
The toggle is disabled while saving and reverts if saving fails.
Creating a folder in a folded account unfolds and saves it.

Saves of the account-settings preference are now queued. Each save
sends the whole list, so with a toggle per account an older snapshot
could otherwise overwrite a newer one when requests finish out of
order. This also applies to the existing collapsed setting.

The account header is now a list item with a heading, a link and the
actions menu instead of an NcAppNavigationCaption, because the caption
only renders plain text and cannot hold the toggle, link and counter.
Each account's actions menu is labelled after the account ("Actions
for {email}"), so the menus are distinguishable for screen readers.

Left out on purpose: the unified inbox and provisioned accounts that are
disabled for the current session cannot be folded or linked.

Closes #9300

Assisted-by: Claude Code:claude-opus-5-5
Assisted-by: Codex:gpt-5.6-sol
Signed-off-by: Dillard Blom <dillard.blom@ensembia.com>
---
 src/components/Navigation.vue                 |  15 +-
 src/components/NavigationAccount.vue          | 187 +++++++++++++++++-
 src/store/mainStore/actions.js                |  51 ++++-
 .../components/NavigationAccount.vue.spec.js  | 184 +++++++++++++++++
 src/tests/unit/store/actions.spec.js          | 180 +++++++++++++++++
 src/tests/unit/store/mutations.spec.js        |  38 ++++
 6 files changed, 644 insertions(+), 11 deletions(-)
 create mode 100644 src/tests/unit/components/NavigationAccount.vue.spec.js

diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 15fadf3a2a..68aa24cb03 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -40,7 +40,7 @@
 							variant="tertiary">{{ t('mail', 'Change password') }}</NcButton>
 					</span>
 				</div>
-				<template v-else-if="!isDisabled(group.account)">
+				<template v-else-if="!isDisabled(group.account) && !group.account.folded">
 					<template v-for="item in group.mailboxes" :key="item.databaseId">
 						<NavigationMailbox
 							v-show="
@@ -48,10 +48,12 @@
 									|| !group.account.collapsed
 									|| !isCollapsed(group.account, item)
 							"
+							class="navigation-account-mailboxes__item"
 							:account="group.account"
 							:mailbox="item" />
 						<NavigationMailbox
 							v-if="!group.account.isUnified && item.specialRole === 'inbox'"
+							class="navigation-account-mailboxes__item"
 							:account="group.account"
 							:mailbox="item"
 							filter="starred" />
@@ -59,6 +61,7 @@
 					<NavigationAccountExpandCollapse
 						v-if="!group.account.isUnified && group.isCollapsible"
 						:key="'collapse-' + group.account.id"
+						class="navigation-account-mailboxes__item"
 						:account="group.account" />
 				</template>
 			</template>
@@ -269,6 +272,16 @@ export default {
 	}
 }
 
+.navigation-account-mailboxes {
+	&__item {
+		// The item's root has an explicit width: 100%, so the inset has to come
+		// off that width too — a margin alone would push the right edge outside
+		// the list and misalign it with the account header's trailing icons.
+		width: calc(100% - calc(var(--default-clickable-area) / 2)) !important;
+		margin-inline-start: calc(var(--default-clickable-area) / 2);
+	}
+}
+
 .mail-settings {
 	padding: calc(var(--default-grid-baseline, 4px) * 2);
 	padding-top: 0;
diff --git a/src/components/NavigationAccount.vue b/src/components/NavigationAccount.vue
index c7754f3f2f..318ca0ed81 100644
--- a/src/components/NavigationAccount.vue
+++ b/src/components/NavigationAccount.vue
@@ -4,13 +4,35 @@
 -->
 
 <template>
-	<NcAppNavigationCaption
+	<li
 		v-if="visible"
-		:id="id"
 		:key="id"
-		:name="account.emailAddress">
-		<!-- Actions -->
-		<template #actions>
+		class="navigation-account-header"
+		:class="{
+			'navigation-account-header--folded': account.folded,
+			'navigation-account-header--active': account.folded && isInboxActive,
+		}">
+		<h2 :id="id" class="navigation-account-header__name">
+			<router-link
+				v-if="inboxRoute"
+				class="navigation-account-header__link"
+				:to="inboxRoute"
+				:title="account.emailAddress">
+				{{ account.emailAddress }}
+			</router-link>
+			<span v-else class="navigation-account-header__link">{{ account.emailAddress }}</span>
+		</h2>
+		<template v-if="account.folded && inboxUnread > 0">
+			<NcCounterBubble
+				class="navigation-account-header__unread"
+				:count="inboxUnread"
+				:title="unreadLabel"
+				aria-hidden="true" />
+			<span class="hidden-visually">{{ unreadLabel }}</span>
+		</template>
+		<NcActions
+			class="navigation-account-header__actions"
+			:aria-label="t('mail', 'Actions for {email}', { email: account.emailAddress })">
 			<template v-if="isDisabled">
 				<NcActionText :name="t('mail', 'Provisioned account is disabled')">
 					<template #icon>
@@ -92,8 +114,21 @@
 					{{ t('mail', 'Remove account') }}
 				</NcActionButton>
 			</template>
-		</template>
-	</NcAppNavigationCaption>
+		</NcActions>
+		<NcButton
+			v-if="!isDisabled"
+			class="navigation-account-header__toggle"
+			variant="tertiary"
+			:aria-label="foldLabel"
+			:title="foldLabel"
+			:aria-expanded="account.folded ? 'false' : 'true'"
+			:disabled="savingFolded"
+			@click="toggleFolded">
+			<template #icon>
+				<IconChevronRight class="navigation-account-header__chevron" :size="20" />
+			</template>
+		</NcButton>
+	</li>
 	<DelegationModal v-if="showDelegationModal" :account="account" @close="showDelegationModal = false" />
 </template>
 
@@ -106,11 +141,14 @@ import { defineAsyncComponent } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
+import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionText from '@nextcloud/vue/components/NcActionText'
-import NcAppNavigationCaption from '@nextcloud/vue/components/NcAppNavigationCaption'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import MenuDown from 'vue-material-design-icons/ChevronDown.vue'
+import IconChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 import MenuUp from 'vue-material-design-icons/ChevronUp.vue'
 import IconSettings from 'vue-material-design-icons/CogOutline.vue'
 import IconFolderAdd from 'vue-material-design-icons/FolderOutline.vue'
@@ -124,7 +162,9 @@ import IconDelegation from './../../img/delegation.svg'
 export default {
 	name: 'NavigationAccount',
 	components: {
-		NcAppNavigationCaption,
+		NcActions,
+		NcButton,
+		NcCounterBubble,
 		NcActionButton,
 		NcActionCheckbox,
 		NcActionInput,
@@ -134,6 +174,7 @@ export default {
 		IconSettings,
 		NcIconSvgWrapper,
 		IconFolderAdd,
+		IconChevronRight,
 		MenuDown,
 		MenuUp,
 		IconDelete,
@@ -175,6 +216,7 @@ export default {
 			},
 
 			savingShowOnlySubscribed: false,
+			savingFolded: false,
 			quota: undefined,
 			editing: false,
 			showSaving: false,
@@ -201,6 +243,43 @@ export default {
 			return 'account-' + this.account.id
 		},
 
+		foldLabel() {
+			return this.account.folded
+				? t('mail', 'Expand account {email}', { email: this.account.emailAddress })
+				: t('mail', 'Collapse account {email}', { email: this.account.emailAddress })
+		},
+
+		inbox() {
+			return this.mainStore.getMailboxes(this.account.id)
+				.find((mailbox) => mailbox.specialRole === 'inbox')
+		},
+
+		inboxRoute() {
+			if (this.isDisabled || !this.inbox) {
+				return null
+			}
+			return {
+				name: 'mailbox',
+				params: {
+					mailboxId: this.inbox.databaseId,
+				},
+			}
+		},
+
+		isInboxActive() {
+			return this.inbox !== undefined
+				&& !this.$route?.params.filter
+				&& String(this.$route?.params.mailboxId) === String(this.inbox.databaseId)
+		},
+
+		inboxUnread() {
+			return this.inbox?.unread ?? 0
+		},
+
+		unreadLabel() {
+			return n('mail', '%n unread message in the inbox', '%n unread messages in the inbox', this.inboxUnread)
+		},
+
 		quotaText() {
 			if (this.quota) {
 				return t('mail', 'Used quota: {quota}% ({limit})', {
@@ -282,6 +361,18 @@ export default {
 			await dialog.show()
 		},
 
+		async toggleFolded() {
+			this.savingFolded = true
+			try {
+				await this.mainStore.toggleAccountFolded(this.account.id)
+			} catch (error) {
+				logger.error('could not save folded state of account', { error })
+				showError(t('mail', 'Could not save whether the account is collapsed'))
+			} finally {
+				this.savingFolded = false
+			}
+		},
+
 		changeAccountOrderUp() {
 			this.mainStore.moveAccount({ account: this.account, up: true })
 				.catch((error) => logger.error('could not move account up', { error }))
@@ -332,6 +423,84 @@ export default {
 }
 </script>
 
+<style lang="scss" scoped>
+.navigation-account-header {
+	display: flex;
+	align-items: center;
+	gap: calc(var(--default-grid-baseline) / 2);
+
+	&:not(:first-child) {
+		margin-top: calc(var(--default-clickable-area) / 2);
+	}
+
+	& + & {
+		margin-top: 0;
+	}
+
+	&__toggle {
+		flex-shrink: 0;
+	}
+
+	&__chevron {
+		transform: rotate(90deg);
+		transition: transform var(--animation-quick);
+	}
+
+	&--folded &__chevron {
+		transform: rotate(0deg);
+	}
+
+	&__name {
+		flex: 1 1 auto;
+		min-width: 0;
+		margin: 0;
+		font-size: var(--default-font-size);
+		font-weight: var(--font-weight-heading, bold);
+		line-height: var(--default-clickable-area);
+	}
+
+	&__link {
+		display: block;
+		overflow: hidden;
+		padding-inline: calc(var(--default-grid-baseline) * 2);
+		border-radius: var(--border-radius-element);
+		color: var(--color-main-text);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	a#{&}__link:hover,
+	a#{&}__link:focus-visible {
+		background-color: var(--color-background-hover);
+	}
+
+	// Same highlight as an active NcAppNavigationItem
+	&--active {
+		position: relative;
+		border-radius: var(--border-radius-element);
+		background-color: color-mix(in srgb, var(--color-primary-element) 16%, transparent);
+
+		&::before {
+			content: '';
+			position: absolute;
+			inset-block: calc(var(--default-grid-baseline) * 2);
+			inset-inline-start: 0;
+			width: calc(var(--default-grid-baseline) * 3 / 4);
+			border-radius: var(--border-radius-pill);
+			background-color: var(--color-primary-element);
+		}
+	}
+
+	&__unread {
+		flex-shrink: 0;
+	}
+
+	&__actions {
+		flex: 0 0 var(--default-clickable-area);
+	}
+}
+</style>
+
 <style lang="scss">
 // Unscoped because DialogBuilder mounts outside this component; wraps the long "Remove {email}" label
 .nc-generic-dialog .dialog__actions {
diff --git a/src/store/mainStore/actions.js b/src/store/mainStore/actions.js
index 18c9ac0fe0..35d655bee4 100644
--- a/src/store/mainStore/actions.js
+++ b/src/store/mainStore/actions.js
@@ -209,6 +209,9 @@ function transformMailboxName(account, mailbox) {
 }
 
 export default function mainStoreActions() {
+	let accountSettingsSave = Promise.resolve()
+	const foldedVersions = {}
+
 	return {
 		updateSyncTimestamp() {
 			this.syncTimestamp = Date.now()
@@ -313,7 +316,13 @@ export default function mainStoreActions() {
 					key,
 					value,
 				})
-				return await savePreference('account-settings', JSON.stringify(this.allAccountSettings))
+				// Every save sends the whole settings list, so queue them to keep an
+				// older snapshot from overwriting a newer one
+				const save = accountSettingsSave
+					.catch(() => {})
+					.then(() => savePreference('account-settings', JSON.stringify(this.allAccountSettings)))
+				accountSettingsSave = save
+				return await save
 			})
 		},
 		async deleteAccount(account) {
@@ -359,9 +368,45 @@ export default function mainStoreActions() {
 					key: 'collapsed',
 					value: false,
 				})
+				if (account.folded) {
+					foldedVersions[account.id] = (foldedVersions[account.id] ?? 0) + 1
+					this.toggleAccountFoldedMutation(account.id)
+					try {
+						await this.setAccountSetting({
+							accountId: account.id,
+							key: 'folded',
+							value: false,
+						})
+					} catch (error) {
+						logger.error(`could not save unfolded state of account ${account.id}`, { error })
+					}
+				}
 				return mailbox
 			})
 		},
+		async toggleAccountFolded(accountId) {
+			const previous = this.accountsUnmapped[accountId].folded
+			const version = (foldedVersions[accountId] ?? 0) + 1
+			foldedVersions[accountId] = version
+			this.toggleAccountFoldedMutation(accountId)
+			try {
+				await this.setAccountSetting({
+					accountId,
+					key: 'folded',
+					value: !previous,
+				})
+			} catch (error) {
+				if (foldedVersions[accountId] === version) {
+					this.toggleAccountFoldedMutation(accountId)
+					this.setAccountSettingMutation({
+						accountId,
+						key: 'folded',
+						value: previous,
+					})
+				}
+				throw error
+			}
+		},
 		async moveAccount({
 			account,
 			up,
@@ -1906,6 +1951,7 @@ export default function mainStoreActions() {
 		},
 		addAccountMutation(account) {
 			account.collapsed = account.collapsed ?? true
+			account.folded = account.folded ?? false
 
 			this.accountsUnmapped[account.id] = account
 
@@ -1942,6 +1988,9 @@ export default function mainStoreActions() {
 		toggleAccountCollapsedMutation(accountId) {
 			this.accountsUnmapped[accountId].collapsed = !this.accountsUnmapped[accountId].collapsed
 		},
+		toggleAccountFoldedMutation(accountId) {
+			this.accountsUnmapped[accountId].folded = !this.accountsUnmapped[accountId].folded
+		},
 		expandAccountMutation(accountId) {
 			this.accountsUnmapped[accountId].collapsed = false
 		},
diff --git a/src/tests/unit/components/NavigationAccount.vue.spec.js b/src/tests/unit/components/NavigationAccount.vue.spec.js
new file mode 100644
index 0000000000..b36001c71d
--- /dev/null
+++ b/src/tests/unit/components/NavigationAccount.vue.spec.js
@@ -0,0 +1,184 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { showError } from '@nextcloud/dialogs'
+import { createTestingPinia } from '@pinia/testing'
+import { RouterLinkStub, shallowMount } from '@vue/test-utils'
+import { setActivePinia } from 'pinia'
+import NavigationAccount from '../../../components/NavigationAccount.vue'
+import Nextcloud from '../../../mixins/Nextcloud.js'
+import useMainStore from '../../../store/mainStore.js'
+
+vi.mock('@nextcloud/dialogs', async (importOriginal) => ({
+	...await importOriginal(),
+	showError: vi.fn(),
+}))
+
+describe('NavigationAccount', () => {
+	let store
+
+	const mountAccount = (account, props = {}, route = { params: {} }) => shallowMount(NavigationAccount, {
+		props: {
+			account: {
+				id: 13,
+				emailAddress: 'jane@example.com',
+				quotaPercentage: null,
+				folded: false,
+				...account,
+			},
+			...props,
+		},
+		global: {
+			mixins: [Nextcloud],
+			stubs: {
+				RouterLink: RouterLinkStub,
+			},
+			mocks: {
+				$route: route,
+			},
+		},
+	})
+
+	beforeEach(() => {
+		setActivePinia(createTestingPinia())
+		store = useMainStore()
+
+		store.getMailboxes = vi.fn().mockReturnValue([
+			{ databaseId: 1, specialRole: 'inbox', unread: 4 },
+			{ databaseId: 2, specialRole: 'sent', unread: 7 },
+		])
+		store.toggleAccountFolded = vi.fn().mockResolvedValue(undefined)
+	})
+
+	it('marks an unfolded account as expanded', () => {
+		const view = mountAccount({ folded: false })
+
+		const toggle = view.find('.navigation-account-header__toggle')
+		expect(toggle.exists()).toBe(true)
+		expect(toggle.attributes('aria-expanded')).toBe('true')
+		expect(view.find('.navigation-account-header__unread').exists()).toBe(false)
+	})
+
+	it('marks a folded account as collapsed and shows the inbox unread count', () => {
+		const view = mountAccount({ folded: true })
+
+		expect(view.find('.navigation-account-header__toggle').attributes('aria-expanded')).toBe('false')
+		expect(view.vm.inboxUnread).toBe(4)
+		expect(view.find('.navigation-account-header__unread').exists()).toBe(true)
+	})
+
+	it('describes the unread count for screen readers', () => {
+		const view = mountAccount({ folded: true })
+
+		expect(view.find('.navigation-account-header__unread').attributes('aria-hidden')).toBe('true')
+		expect(view.find('.hidden-visually').text()).toBe(view.vm.unreadLabel)
+	})
+
+	it('hides the unread count of a folded account without unread messages', () => {
+		store.getMailboxes = vi.fn().mockReturnValue([
+			{ databaseId: 1, specialRole: 'inbox', unread: 0 },
+		])
+		const view = mountAccount({ folded: true })
+
+		expect(view.vm.inboxUnread).toBe(0)
+		expect(view.find('.navigation-account-header__unread').exists()).toBe(false)
+	})
+
+	it('names the actions menu after the account', () => {
+		const view = mountAccount({ folded: false })
+
+		expect(view.findComponent('.navigation-account-header__actions').props('ariaLabel')).toBe('Actions for jane@example.com')
+	})
+
+	it('toggles the folded state through the store', async () => {
+		const view = mountAccount({ folded: false })
+
+		await view.vm.toggleFolded()
+
+		expect(store.toggleAccountFolded).toHaveBeenCalledWith(13)
+	})
+
+	it('disables the toggle while the folded state is being saved', async () => {
+		let finishSaving
+		store.toggleAccountFolded = vi.fn(() => new Promise((resolve) => {
+			finishSaving = resolve
+		}))
+		const view = mountAccount({ folded: false })
+
+		const saving = view.vm.toggleFolded()
+		await view.vm.$nextTick()
+
+		expect(view.findComponent('.navigation-account-header__toggle').props('disabled')).toBe(true)
+
+		finishSaving()
+		await saving
+		await view.vm.$nextTick()
+
+		expect(view.findComponent('.navigation-account-header__toggle').props('disabled')).toBe(false)
+	})
+
+	it('shows an error when the folded state cannot be saved', async () => {
+		store.toggleAccountFolded = vi.fn().mockRejectedValue(new Error('network down'))
+		const view = mountAccount({ folded: false })
+
+		await view.vm.toggleFolded()
+
+		expect(showError).toHaveBeenCalled()
+		expect(view.vm.savingFolded).toBe(false)
+	})
+
+	it('links the account name to its inbox', () => {
+		const view = mountAccount({ folded: true })
+
+		const link = view.findComponent(RouterLinkStub)
+		expect(link.exists()).toBe(true)
+		expect(link.props('to')).toEqual({ name: 'mailbox', params: { mailboxId: 1 } })
+		expect(link.text()).toBe('jane@example.com')
+	})
+
+	it('shows the account name without a link when the inbox is not loaded', () => {
+		store.getMailboxes = vi.fn().mockReturnValue([])
+		const view = mountAccount({ folded: false })
+
+		expect(view.findComponent(RouterLinkStub).exists()).toBe(false)
+		expect(view.find('.navigation-account-header__name').text()).toBe('jane@example.com')
+	})
+
+	it('does not link the name of a disabled account', () => {
+		const view = mountAccount({ folded: false }, { isDisabled: true })
+
+		expect(view.findComponent(RouterLinkStub).exists()).toBe(false)
+	})
+
+	it('highlights a folded account while its inbox is open', () => {
+		const view = mountAccount({ folded: true }, {}, { params: { mailboxId: '1' } })
+
+		expect(view.find('.navigation-account-header').classes()).toContain('navigation-account-header--active')
+	})
+
+	it('does not highlight a folded account while another folder is open', () => {
+		const view = mountAccount({ folded: true }, {}, { params: { mailboxId: '2' } })
+
+		expect(view.find('.navigation-account-header').classes()).not.toContain('navigation-account-header--active')
+	})
+
+	it('does not highlight a folded account while its favorites are open', () => {
+		const view = mountAccount({ folded: true }, {}, { params: { mailboxId: '1', filter: 'starred' } })
+
+		expect(view.find('.navigation-account-header').classes()).not.toContain('navigation-account-header--active')
+	})
+
+	it('does not highlight an unfolded account because its inbox entry is visible', () => {
+		const view = mountAccount({ folded: false }, {}, { params: { mailboxId: '1' } })
+
+		expect(view.find('.navigation-account-header').classes()).not.toContain('navigation-account-header--active')
+	})
+
+	it('does not offer folding for a disabled account', () => {
+		const view = mountAccount({ folded: false }, { isDisabled: true })
+
+		expect(view.find('.navigation-account-header__toggle').exists()).toBe(false)
+	})
+})
diff --git a/src/tests/unit/store/actions.spec.js b/src/tests/unit/store/actions.spec.js
index 2e9eb319b3..f136cf2c28 100644
--- a/src/tests/unit/store/actions.spec.js
+++ b/src/tests/unit/store/actions.spec.js
@@ -10,6 +10,7 @@ import * as InternalAddressService from '../../../service/InternalAddressService
 import * as MailboxService from '../../../service/MailboxService.js'
 import * as MessageService from '../../../service/MessageService.js'
 import * as NotificationService from '../../../service/NotificationService.js'
+import * as PreferenceService from '../../../service/PreferenceService.js'
 import { PAGE_SIZE, UNIFIED_INBOX_ID } from '../../../store/constants.js'
 import useMainStore from '../../../store/mainStore.js'
 import { normalizedEnvelopeListId } from '../../../util/normalization.js'
@@ -19,6 +20,7 @@ vi.mock('../../../service/InternalAddressService.js')
 vi.mock('../../../service/MailboxService.js')
 vi.mock('../../../service/MessageService.js')
 vi.mock('../../../service/NotificationService.js')
+vi.mock('../../../service/PreferenceService.js')
 vi.mock('../../../util/normalization.js', () => ({
 	__esModule: true,
 	// Supply a default list id ('') to prevent annoying errors
@@ -67,6 +69,184 @@ describe('Vuex store actions', () => {
 		expect(MailboxService.create).toHaveBeenCalledWith(13, 'Important')
 	})
 
+	it('unfolds a folded account when a mailbox is created in it', async () => {
+		const account = {
+			id: 13,
+			personalNamespace: '',
+			mailboxes: [],
+			folded: true,
+		}
+		MailboxService.create.mockResolvedValue({ name: 'Important' })
+		PreferenceService.savePreference.mockResolvedValue(undefined)
+		store.addAccountMutation(account)
+
+		await store.createMailbox({ account: store.accountsUnmapped[13], name: 'Important' })
+
+		expect(store.accountsUnmapped[13].folded).toBe(false)
+		expect(PreferenceService.savePreference).toHaveBeenCalledWith(
+			'account-settings',
+			JSON.stringify([{ accountId: 13, collapsed: false, folded: false }]),
+		)
+	})
+
+	it('still creates the mailbox when saving the unfolded state fails', async () => {
+		const account = {
+			id: 13,
+			personalNamespace: '',
+			mailboxes: [],
+			folded: true,
+		}
+		const mailbox = { name: 'Important' }
+		MailboxService.create.mockResolvedValue(mailbox)
+		PreferenceService.savePreference.mockRejectedValue(new Error('network down'))
+		store.addAccountMutation(account)
+
+		const result = await store.createMailbox({ account: store.accountsUnmapped[13], name: 'Important' })
+
+		expect(result).toEqual(mailbox)
+		expect(store.accountsUnmapped[13].folded).toBe(false)
+	})
+
+	it('does not save the folded state when a mailbox is created in an unfolded account', async () => {
+		const account = {
+			id: 13,
+			personalNamespace: '',
+			mailboxes: [],
+		}
+		MailboxService.create.mockResolvedValue({ name: 'Important' })
+		store.addAccountMutation(account)
+
+		await store.createMailbox({ account: store.accountsUnmapped[13], name: 'Important' })
+
+		expect(PreferenceService.savePreference).not.toHaveBeenCalled()
+	})
+
+	it('saves account settings in order so an older save cannot overwrite a newer one', async () => {
+		store.addAccountMutation({ id: 13, personalNamespace: '', mailboxes: [] })
+		store.addAccountMutation({ id: 14, personalNamespace: '', mailboxes: [] })
+		let finishFirstSave
+		PreferenceService.savePreference
+			.mockImplementationOnce(() => new Promise((resolve) => {
+				finishFirstSave = resolve
+			}))
+			.mockResolvedValue(undefined)
+
+		const first = store.toggleAccountFolded(13)
+		const second = store.toggleAccountFolded(14)
+		await vi.waitFor(() => expect(finishFirstSave).toBeDefined())
+
+		expect(PreferenceService.savePreference).toHaveBeenCalledTimes(1)
+
+		finishFirstSave()
+		await Promise.all([first, second])
+
+		expect(PreferenceService.savePreference).toHaveBeenCalledTimes(2)
+		expect(PreferenceService.savePreference).toHaveBeenLastCalledWith(
+			'account-settings',
+			JSON.stringify([{ accountId: 13, folded: true }, { accountId: 14, folded: true }]),
+		)
+	})
+
+	it('keeps saving account settings after a failed save', async () => {
+		store.addAccountMutation({ id: 13, personalNamespace: '', mailboxes: [] })
+		store.addAccountMutation({ id: 14, personalNamespace: '', mailboxes: [] })
+		PreferenceService.savePreference
+			.mockRejectedValueOnce(new Error('network down'))
+			.mockResolvedValue(undefined)
+
+		await expect(store.toggleAccountFolded(13)).rejects.toThrow('network down')
+		await store.toggleAccountFolded(14)
+
+		expect(store.accountsUnmapped[14].folded).toBe(true)
+		expect(PreferenceService.savePreference).toHaveBeenLastCalledWith(
+			'account-settings',
+			JSON.stringify([{ accountId: 13, folded: false }, { accountId: 14, folded: true }]),
+		)
+	})
+
+	it('does not undo a newer change when an older folded save fails', async () => {
+		store.addAccountMutation({ id: 13, personalNamespace: '', mailboxes: [] })
+		MailboxService.create.mockResolvedValue({ name: 'Important' })
+		let failSave
+		PreferenceService.savePreference
+			.mockImplementationOnce(() => new Promise((resolve, reject) => {
+				failSave = reject
+			}))
+			.mockResolvedValue(undefined)
+
+		const toggle = store.toggleAccountFolded(13)
+		await vi.waitFor(() => expect(failSave).toBeDefined())
+		const unfold = store.createMailbox({ account: store.accountsUnmapped[13], name: 'Important' })
+		await vi.waitFor(() => expect(store.accountsUnmapped[13].folded).toBe(false))
+		failSave(new Error('network down'))
+
+		await expect(toggle).rejects.toThrow('network down')
+		await unfold
+		expect(store.accountsUnmapped[13].folded).toBe(false)
+	})
+
+	it('does not undo a newer change that ends in the same folded state when an older save fails', async () => {
+		store.addAccountMutation({ id: 13, personalNamespace: '', mailboxes: [] })
+		MailboxService.create.mockResolvedValue({ name: 'Important' })
+		let failSave
+		PreferenceService.savePreference
+			.mockImplementationOnce(() => new Promise((resolve, reject) => {
+				failSave = reject
+			}))
+			.mockResolvedValue(undefined)
+
+		const firstToggle = store.toggleAccountFolded(13)
+		await vi.waitFor(() => expect(failSave).toBeDefined())
+		const unfold = store.createMailbox({ account: store.accountsUnmapped[13], name: 'Important' })
+		await vi.waitFor(() => expect(store.accountsUnmapped[13].folded).toBe(false))
+		const secondToggle = store.toggleAccountFolded(13)
+		failSave(new Error('network down'))
+
+		await expect(firstToggle).rejects.toThrow('network down')
+		await Promise.all([unfold, secondToggle])
+		expect(store.accountsUnmapped[13].folded).toBe(true)
+	})
+
+	it('restores the folded state when saving it fails', async () => {
+		store.addAccountMutation({
+			id: 13,
+			personalNamespace: '',
+			mailboxes: [],
+		})
+		const error = new Error('network down')
+		PreferenceService.savePreference.mockRejectedValue(error)
+
+		await expect(store.toggleAccountFolded(13)).rejects.toThrow(error)
+
+		expect(store.accountsUnmapped[13].folded).toBe(false)
+		expect(store.allAccountSettings).toContainEqual({ accountId: 13, folded: false })
+	})
+
+	it('toggles and persists the folded state of an account', async () => {
+		store.addAccountMutation({
+			id: 13,
+			personalNamespace: '',
+			mailboxes: [],
+		})
+		PreferenceService.savePreference.mockResolvedValue(undefined)
+
+		await store.toggleAccountFolded(13)
+
+		expect(store.accountsUnmapped[13].folded).toBe(true)
+		expect(PreferenceService.savePreference).toHaveBeenCalledWith(
+			'account-settings',
+			JSON.stringify([{ accountId: 13, folded: true }]),
+		)
+
+		await store.toggleAccountFolded(13)
+
+		expect(store.accountsUnmapped[13].folded).toBe(false)
+		expect(PreferenceService.savePreference).toHaveBeenLastCalledWith(
+			'account-settings',
+			JSON.stringify([{ accountId: 13, folded: false }]),
+		)
+	})
+
 	it('creates a sub-mailbox', async () => {
 		const account = {
 			id: 13,
diff --git a/src/tests/unit/store/mutations.spec.js b/src/tests/unit/store/mutations.spec.js
index ccaf783efc..9031088812 100644
--- a/src/tests/unit/store/mutations.spec.js
+++ b/src/tests/unit/store/mutations.spec.js
@@ -107,6 +107,44 @@ describe('Pinia store mutations', () => {
 		])
 	})
 
+	it('adds an account unfolded by default', () => {
+		store.addAccountMutation({
+			accountId: 13,
+			id: 13,
+			mailboxes: [],
+			aliases: [],
+		})
+
+		expect(store.accountsUnmapped[13].folded).toBe(false)
+	})
+
+	it('keeps a persisted folded state when adding an account', () => {
+		store.addAccountMutation({
+			accountId: 13,
+			id: 13,
+			mailboxes: [],
+			aliases: [],
+			folded: true,
+		})
+
+		expect(store.accountsUnmapped[13].folded).toBe(true)
+	})
+
+	it('toggles the folded state of an account', () => {
+		store.addAccountMutation({
+			accountId: 13,
+			id: 13,
+			mailboxes: [],
+			aliases: [],
+		})
+
+		store.toggleAccountFoldedMutation(13)
+		expect(store.accountsUnmapped[13].folded).toBe(true)
+
+		store.toggleAccountFoldedMutation(13)
+		expect(store.accountsUnmapped[13].folded).toBe(false)
+	})
+
 	it('adds an account with one level of mailboxes', () => {
 		store.addAccountMutation({
 			accountId: 13,