[Feature] Update Sidebar UI

[tlesicka]

Verified feature request does not already exist?

• I have searched and found no existing issue

💻

• Would you like to implement this feature?

Pitch: what problem are you trying to solve?

When a budget has a lot of accounts, the whole sidebar scrolls. This creates extra scroll work when working with Off-Budget or Closed accounts.

Describe your ideal solution to this problem

I would suggest only the accounts should scroll and the "Budget", "Reports", and "Schedules" buttons should be fixed at the top. Additionally, the "+ Add Account" button should be fixed at the bottom. This separates the sidebar into four separate areas: Budget Name/Menu, Action Buttons, Account List, Add Account Button. As shown here:

On budget without a lot of accounts, there would be no visual change.

Settings is doubled in both the menu and the "> More" action button and should be removed from one location. I chose to remove "> More" action button and move "Payees" & "Rules" into the menu to visually clean up the sidebar.

I have already started the change and would like feedback before submitting the PR.
I am open to other ideas, such as:

• Nested Menu Items
• Move All Accounts from scrollable account list to an action button (after reading [Bug]: side-nav visual hierarchy #2944 I'm not sure this would be a preferred option)
• Alternating row color for accounts
• Remove "Rename budget" from the menu and instead put a pencil icon next to the name like on account view
• other ideas to help clean up the sidebar

Teaching and learning

This is a primary interaction element. The only teaching that would be necessary is to inform previous users of the change of location for "Payees" and "Rules".

[github-actions]

✨ Thanks for sharing your idea! ✨

This repository uses lodash style issue management for enhancements. That means enhancement issues are automatically closed. This doesn’t mean we don’t accept feature requests, though! We will consider implementing ones that receive many upvotes, and we welcome contributions for any feature requests marked as needing votes (just post a comment first so we can help you make a successful contribution).

The enhancement backlog can be found here: https://github.com/actualbudget/actual/issues?q=label%3A%22needs+votes%22+sort%3Areactions-%2B1-desc+

Don’t forget to upvote the top comment with 👍!

[jfdoming]

Thanks for the feedback! I think the scrolling is a good change. I'm not convinced that moving payees/rules to the top menu is the best idea though; rules in particular are quite useful to have easily accessible.

[tlesicka]

I don't disagree that rules are quite useful. My thought pattern went like this:

1. Hey, Settings is in two places. It really only needs to be in one place. Where should we remove it from?
2. We have two drop downs, one from the budget name and one titled "> More".
3. I think if we removed "> More" it would give a cleaner look to the interface. So, what should be done with Payees and Rules?
4. If we stick Payees and Rules in the budget name menu it's still the same number of operations to access them.
5. Layout changes for a cleaner look and functionality stays the same.

In my thinking, Rules would be an intermediate skill item and Payees would useful to an advanced user, so both should be progressive reveal items. Currently they are progressive reveal, I was just trying to clean up the sidebar.

What about adding a menu separator above and below Payees and Rules to visually distinguish between other menu items?

[jfdoming]

Hmm, my concern is mostly around the availability of those options for power users. For a power user, if you use Rules or Payees frequently, you can leave "More" expanded and then the button is easily accessible. With this change that is no longer the case. I don't disagree with the Settings option being moved, though—no reason to have duplicates.

[tlesicka]

Thanks for the feedback. I've just barely started using AB and using this sidebar update to learn the AB structure. I'll open an idea on Discord to try to gather upvotes before submitting a PR. Here's a re-design keeping Payees and Rules on the sidebar, but a little cleaner. "Rename budget" was removed from the menu and a pencil icon was added next to the budget name.

[jfdoming]

Thanks for the feedback. I've just barely started using AB and using this sidebar update to learn the AB structure. I'll open an idea on Discord to try to gather upvotes before submitting a PR. Here's a re-design keeping Payees and Rules on the sidebar, but a little cleaner. "Rename budget" was removed from the menu and a pencil icon was added next to the budget name.

I like the ideas! Posting on discord sounds like an excellent idea, we're all super responsive there and ready to chime in

[Teprifer]

Reading through, first thought is I think the 'all accounts' line should be fixed in place and the scroll begins below that. This would give the scrollable section a nice header.

Not sure what my opinion is on the Rules and Payees moving to the budget menu, maybe a slight preference to keeping as-is?
Agree with moving settings as it's lower traffic, and as you point out, duplication.
Although... if settings is removed from the side bar, promoting Payees and Rules to full side bar entries and removing More entirely would only be 1 row bigger than a collapsed More, and less vertical space than current state More (with settings listed) being expanded, thoughts?

I kinda get the idea of removing rename budget as a menu item, but by the same token making it a pencil icon forces the side bar min width to be wider.

[tlesicka]

Like the idea of fixing the All Accounts and scrolling below. Trying to figure out a way to sticky On Budget/Off Budget as they scroll to the top. This isn't a high priority, but would be a neat feature.
Reworked the More section and think I found a way to expand without taking up as much real estate with a simple up/down chevron.
The pencil next to the budget name would be hidden until you hover over the budget name. Same as account renaming on the account page.

[Teprifer]

There's a slight difference in that the side bar can be resized to have no space on the right, would the pencil still show on mouse over if side bar was at it's min-width?

Just looking at mine at the moment:

No mouse over:

With mouse over:

What're your thoughts on putting up a PR to take a look at? Could help with the minor Q's.
You can include in the description it is for feedback only and leave it as WIP, and later close off in favour of a fresh one, or move forward with it.

[tlesicka]

Yes, pencil still shows at min-width. The pencil is hidden until hovering over budget name, then appears. Added a PR (#3457) for others to review or for maintainers to adopt. Here is the latest look of the new sidebar: