Improve navigation UX when switching between personal billing and personal usage

[gtsiolis]

Problem to solve

Following up from #14161, this issue acts as a placeholder for discussing improvements for the navigation UX when switching between personal billing and personal usage. Cc @jldec

From relevant discussion (internal):

@gtsiolis: While adding the sidebar menu makes the usage page more visible, it breaks the navigation model for the user as they are dropped in a different context and layout, without a way to get back to back to billing or user settings.

@gtsiolis: We could 🅰️ bring back the tabs for personal account to include two tabs (Usage & Settings) or 🅱️ explore the idea of moving the period selection and other data like total credits used on the top of the usage page so that the sidebar is no longer needed which could limit the surface area to experiment with more filters, data, etc.

From the same discussion but also moving #13968 (comment) to avoid discussing this on a closed issue. Cc @jankeromnes

@svenefftinge: For the navigation, I would remove the menu entry for usage in the settings, so that we can only navigate there from the button on the billing page. We could add a "<- back to settings" link on top if you think that is necessary. 🅰️ would also mean we need the selector for the individual account again. 🅱️ wastes screen estate, which will be very precious in future versions of the usage view.

@svenefftinge: If we really need a top-level menu entry for personal usage it should go under the context menu on the avatar not settings.

Proposal

Some potential good MVCs forward include:

1. Adding a link to the personal usage page from the user context menu. 🛹
2. Add a bidirectional link back to billing from usage. 🛹

TBD (To be discussed)

[jldec]

without a way to get back to back to billing or user settings.

The browser back button behavior works.

adding the sidebar menu ... breaks the navigation model

The layout change (sidebar disappearing) was already happening when users clicked on the button in the billing page.

Improve navigation UX when switching between personal billing and personal usage

The issue title suggests that this usage page should be part of personal billing. The intent of the original issue was to make the page discoverable.

[gtsiolis]

Closing this as usage links has been removed from the sidebar and a link to usage has been also added in the user menu as described in the proposal.

Further improvements could include 🅰️ adding a bidirectional link back to billing from usage page and 🅱️ improving the navigation, see #15012.