Bottom tabs and main menu

[gnprice]

This is our new design for the overall navigation of the app. It replaces the current placeholder home page. In this design:

1. There is a bottom tab bar (aka "navigation bar", in Material 3 terms). It has 6 buttons: Inbox, Combined feed, Mentions, Direct messages, Channels, Menu.

   • All of those buttons except Menu go to screens we already have implemented. Menu is described below.
   • The navigation bar appears only on the screens that it leads directly to. In particular it does not appear on message lists.
   • Changes vs. RN legacy app: Search and Starred move from the top bar into the menu. There's no top bar.
   • For detailed design of the navigation bar, see Figma: here, and further details here. Screenshot:

2. The screen with the bottom tab bar is the root of the navigation stack; there's no navigating "back" or "up" from there. For how the user reaches the choose-account page (which we currently put at the root of the navigation stack), see below.

3. The menu is a modal bottom sheet. It has the same options as the navigation bar (except Menu itself), plus "Starred messages".

   • In the future the menu will gain more options as we implement them:
     • Settings: #97
     • Notifications screen: #661
     • "My profile"
     • Search (but that's a post-launch feature): #252
     • and doubtless others.
   • For now the menu will also have a "Switch account" option at the bottom, which just leads to the choose-account page.
     • As a follow-up, we'll put the current organization's name and icon at the top of the menu, paired with an "Organizations" option that does the job of "Switch account": #1037
     • As a further, post-launch follow-up, we'll replace the choose-account page with a new modal menu: #1038
   • For detailed design of the menu, see Figma: here, and further details here.
     • For this issue, leave out menu options that are in the design in Figma but aren't mentioned above, or are left as follow-ups.
     • Screenshot:

Background

This design balances two things we want:

1. It's low-risk in terms of UX, staying fairly close to what the legacy app has. We don't want to get slowed down by having to iterate a bunch.
2. Where possible consistent with point 1, it borrows straight from more-ambitious designs we've discussed. This means it won't require scrapping a bunch of work later on as we add more features, or if we implement something more fully like those more-ambitious designs.

Discussion in chat thread.

Previous issue, which this one supersedes:

• 311

[gnprice]

This is a complex issue, so we'll want someone on the Zulip core team to handle it.

[gnprice]

A previous draft PR implemented the navigation bar (roughly point 1 from the description above):

• 578

So that may be a helpful starting point.