feat(ui): allow folding an account to a single line

[dillardblom]

Closes #9300

Summary

With several accounts, the navigation stays long even with "Collapse folders", because the inbox, favourites, drafts, sent and trash of every account remain visible. This adds a chevron in front of every account to fold it to a single line:

• A folded account hides all its mailboxes and shows the number of unread messages in its inbox next to its name.
• The account name links to the account's inbox, so you can switch between accounts without 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.
• Account headers that directly follow each other have no extra spacing, so a list of folded accounts stays compact.
• The folded state is stored per account in the existing account-settings preference, like the collapsed state, so there is no backend change. The toggle is disabled while saving and reverts if saving fails. Creating a folder in a folded account unfolds it.
• Saves of the account-settings preference are now queued. Every 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 chevron, the link and the counter. The existing "Collapse folders" toggle is unchanged.

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

Screenshots

Unfolded (before)	One account folded	All accounts folded

Testing

• Unit tests for the store (default, toggle, persistence, rollback on a failed save, unfolding on folder creation, folder creation still succeeding when saving the unfolded state fails) and for NavigationAccount (toggle state, counter and its screen reader label, inbox link, active highlight, disabled accounts).
• Tested manually on Nextcloud 34 with Mail 5.12.2 and two IMAP accounts: folding, unfolding, the unread counter, switching accounts through the name link, the active highlight, and the state surviving a reload.

🤖 AI (if applicable)

• The content of this PR was partly or fully generated using AI

[welcome]

Thanks for opening your first pull request in this repository! ✌️

[kesselb]

Thanks for your PR 👍

[kra-mo]

The feature makes sense. The account name labels should be aligned with the other labels, though:

Although I do wonder whether this should be done in nextcloud-vue instead? Like to have a collapsible header component we can reuse. @ShGKme?

[kra-mo]

I do also wonder whether we should keep "Collapse folders" even with this.

[kra-mo]

Or maybe the icons should be aligned to the end like for folders:

[dillardblom]

Thanks for the review! Good point on the alignment. I made a few mockups (CSS only, same data) to compare the options before changing the code:

B: chevron at the end, like folders	E: chevron at the end, folders indented under the name

F: chevron at the end, name aligned with the icons	D: account label instead of the address

• B follows your suggestion: the chevron moves to the end, as for folders with subfolders, and the name lines up with the folder labels.
• E also indents the folders of the account, so the inbox icon sits under the account name. That makes it clear at a glance which folders belong to which account.
• F moves the chevron to the end and drops the space it left at the start: the name lines up with the folder icons, so the folders sit under the name without extra indentation.
• D shows an account label (e.g. "Personal", "Office") instead of the email address. We're working on a separate change that lets users give an account a label; showing it here would be an option the user switches on per account, with the email address remaining the default. It's not part of this PR.

My preference would be F, as it groups the folders under the account without spending horizontal space on an indent. All of these are a few lines of CSS, so I'll go with whatever you prefer.

With accounts that can be folded, "Collapse folders" might become redundant, but I'll leave that decision to you.

[kra-mo]

Yeah, seeing them like that, I think F works the best as well.

[dillardblom]

Okay, I will adjust according to F and update this PR!

[dillardblom]

Updated to F: the toggle now sits at the end of the row, so the account name lines up with the folder icons with no extra indentation.

[dillardblom]

One correction to the F update: the toggle was still landing between the name and the actions menu. It now sits after the actions menu, so it lines up with a folder's own disclosure arrow.

[dillardblom]

Pushed one more revision of F, now with a small indent so an account's mailboxes read as belonging to it rather than a flat continuation of the list. Screenshots (account names redacted):

Collapsed:

Expanded — mailboxes indented under the account, chevron still lined up with the other accounts' (the scrollbar appearing after expanding accounts for the extra rows):

Also squashed the two follow-up fixes (toggle position, this indent) into the original commit so the history stays readable.

[kesselb]

Thanks @dillardblom,

could you please take a look at the conflicts. The app was migrated to vue3 and so a lot of code changed.

[dillardblom]

Thanks for the reminder @kesselb, I'm going to take a look and fix it!

[dillardblom]

Conflicts with the Vue 3 migration are resolved. The account header now works without vue-frag, uses the @nextcloud/vue 9 props and subpath imports, and fetches the quota the same way main does. The component spec is ported to @vue/test-utils 2. I also gave each account's actions menu an accessible label that names the account ("Actions for {email}"), so the menus are distinguishable for screen readers. Checked again in the browser with three accounts: folding, the unread counter, the inbox link with its highlight, and the state surviving a reload.