nav: Add bottom tabs and main menu

This is an initial implementation because some features were considered
out-of-scope as of now for #1035.

Compared to the Figma, we swapped the order of _ChannelsButton and
_DirectMessagesButton in the menu so they match their order on the
navigation bar. See:
  https://chat.zulip.org/#narrow/channel/48-mobile/topic/Buttons.20on.20the.20bottom.20tabs.20and.20main.20menu

We also added _CombinedFeedButton, using the same icon we have for
"Combined feed" on the web app's topleft sidebar, added a "Switch
account" button, and renamed "Streams" to "Channels".

For now, we do not aim to fully implement the app bar redesign; we keep a
simple one in this implementation. We maintain a 16px padding for the title
text on the app bar for both ChooseAccountPage (when it is at the root
navigation level) and HomePage (which is expected to be at the root level
all the time).

We allow user to navigate to the choose-account page from the loading screen
after a certain timeout.  This is helpful when loading the account data takes
a while, and that the user, for example, wants to try another account.
See: #1076 (comment)

Signed-off-by: Zixuan James Li <[email protected]>

assets/l10n/app_en.arb

@@ -19,6 +19,19 @@
   "@chooseAccountPageTitle": {
     "description": "Title for the page to choose between Zulip accounts."
   },
+  "switchAccountButton": "Switch account",
+  "@switchAccountButton": {
+    "description": "Label for main-menu button leading to the choose-account page."
+  },
+  "tryAnotherAccountMessage": "Your account at {url} is taking a while to load.",
+  "@tryAnotherAccountMessage": {
+    "description": "Message that appears on the loading screen after waiting for some time.",
+    "url": {"type": "String", "example": "http://chat.example.com/"}
+  },
+  "tryAnotherAccountButton": "Try another account",
+  "@tryAnotherAccountButton": {
+    "description": "Label for loading screen button prompting user to try another account."
+  },
   "chooseAccountPageLogOutButton": "Log out",
   "@chooseAccountPageLogOutButton": {
     "description": "Label for the 'Log out' button for an account on the choose-account page"
@@ -529,6 +542,10 @@
   "@userRoleUnknown": {
     "description": "Label for UserRole.unknown"
   },
+  "inboxPageTitle": "Inbox",
+  "@inboxPageTitle": {
+    "description": "Title for the page with unreads."
+  },
   "recentDmConversationsPageTitle": "Direct messages",
   "@recentDmConversationsPageTitle": {
     "description": "Title for the page with a list of DM conversations."
@@ -545,6 +562,14 @@
   "@starredMessagesPageTitle": {
     "description": "Page title for the 'Starred messages' message view."
   },
+  "channelsPageTitle": "Channels",
+  "@channelsPageTitle": {
+    "description": "Title for the page with a list of subscribed channels."
+  },
+  "mainMenuMyProfile": "My profile",
+  "@mainMenuMyProfile": {
+    "description": "Label for main-menu button leading to the user's own profile."
+  },
   "channelFeedButtonTooltip": "Channel feed",
   "@channelFeedButtonTooltip": {
     "description": "Tooltip for button to navigate to a given channel's feed"

lib/generated/l10n/zulip_localizations.dart

@@ -127,6 +127,24 @@ abstract class ZulipLocalizations {
   /// **'Choose account'**
   String get chooseAccountPageTitle;
 
+  /// Label for main-menu button leading to the choose-account page.
+  ///
+  /// In en, this message translates to:
+  /// **'Switch account'**
+  String get switchAccountButton;
+
+  /// Message that appears on the loading screen after waiting for some time.
+  ///
+  /// In en, this message translates to:
+  /// **'Your account at {url} is taking a while to load.'**
+  String tryAnotherAccountMessage(Object url);
+
+  /// Label for loading screen button prompting user to try another account.
+  ///
+  /// In en, this message translates to:
+  /// **'Try another account'**
+  String get tryAnotherAccountButton;
+
   /// Label for the 'Log out' button for an account on the choose-account page
   ///
   /// In en, this message translates to:
@@ -799,6 +817,12 @@ abstract class ZulipLocalizations {
   /// **'Unknown'**
   String get userRoleUnknown;
 
+  /// Title for the page with unreads.
+  ///
+  /// In en, this message translates to:
+  /// **'Inbox'**
+  String get inboxPageTitle;
+
   /// Title for the page with a list of DM conversations.
   ///
   /// In en, this message translates to:
@@ -823,6 +847,18 @@ abstract class ZulipLocalizations {
   /// **'Starred messages'**
   String get starredMessagesPageTitle;
 
+  /// Title for the page with a list of subscribed channels.
+  ///
+  /// In en, this message translates to:
+  /// **'Channels'**
+  String get channelsPageTitle;
+
+  /// Label for main-menu button leading to the user's own profile.
+  ///
+  /// In en, this message translates to:
+  /// **'My profile'**
+  String get mainMenuMyProfile;
+
   /// Tooltip for button to navigate to a given channel's feed
   ///
   /// In en, this message translates to:

lib/generated/l10n/zulip_localizations_ar.dart

@@ -23,6 +23,17 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   @override
   String get chooseAccountPageTitle => 'Choose account';
 
+  @override
+  String get switchAccountButton => 'Switch account';
+
+  @override
+  String tryAnotherAccountMessage(Object url) {
+    return 'Your account at $url is taking a while to load.';
+  }
+
+  @override
+  String get tryAnotherAccountButton => 'Try another account';
+
   @override
   String get chooseAccountPageLogOutButton => 'Log out';
 
@@ -419,6 +430,9 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   @override
   String get userRoleUnknown => 'Unknown';
 
+  @override
+  String get inboxPageTitle => 'Inbox';
+
   @override
   String get recentDmConversationsPageTitle => 'Direct messages';
 
@@ -431,6 +445,12 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   @override
   String get starredMessagesPageTitle => 'Starred messages';
 
+  @override
+  String get channelsPageTitle => 'Channels';
+
+  @override
+  String get mainMenuMyProfile => 'My profile';
+
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
 

lib/generated/l10n/zulip_localizations_en.dart

@@ -23,6 +23,17 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   @override
   String get chooseAccountPageTitle => 'Choose account';
 
+  @override
+  String get switchAccountButton => 'Switch account';
+
+  @override
+  String tryAnotherAccountMessage(Object url) {
+    return 'Your account at $url is taking a while to load.';
+  }
+
+  @override
+  String get tryAnotherAccountButton => 'Try another account';
+
   @override
   String get chooseAccountPageLogOutButton => 'Log out';
 
@@ -419,6 +430,9 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   @override
   String get userRoleUnknown => 'Unknown';
 
+  @override
+  String get inboxPageTitle => 'Inbox';
+
   @override
   String get recentDmConversationsPageTitle => 'Direct messages';
 
@@ -431,6 +445,12 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   @override
   String get starredMessagesPageTitle => 'Starred messages';
 
+  @override
+  String get channelsPageTitle => 'Channels';
+
+  @override
+  String get mainMenuMyProfile => 'My profile';
+
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
 

lib/generated/l10n/zulip_localizations_ja.dart

@@ -23,6 +23,17 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   @override
   String get chooseAccountPageTitle => 'アカウントを選択';
 
+  @override
+  String get switchAccountButton => 'Switch account';
+
+  @override
+  String tryAnotherAccountMessage(Object url) {
+    return 'Your account at $url is taking a while to load.';
+  }
+
+  @override
+  String get tryAnotherAccountButton => 'Try another account';
+
   @override
   String get chooseAccountPageLogOutButton => 'Log out';
 
@@ -419,6 +430,9 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   @override
   String get userRoleUnknown => '不明';
 
+  @override
+  String get inboxPageTitle => 'Inbox';
+
   @override
   String get recentDmConversationsPageTitle => 'Direct messages';
 
@@ -431,6 +445,12 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   @override
   String get starredMessagesPageTitle => 'Starred messages';
 
+  @override
+  String get channelsPageTitle => 'Channels';
+
+  @override
+  String get mainMenuMyProfile => 'My profile';
+
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
 

lib/widgets/app.dart

@@ -13,7 +13,6 @@ import 'about_zulip.dart';
 import 'actions.dart';
 import 'dialog.dart';
 import 'home.dart';
-import 'inbox.dart';
 import 'login.dart';
 import 'page.dart';
 import 'store.dart';
@@ -209,11 +208,10 @@ class _ZulipAppState extends State<ZulipApp> with WidgetsBindingObserver {
 
           onGenerateInitialRoutes: (_) {
             return [
-              MaterialWidgetRoute(page: const ChooseAccountPage()),
-              if (initialAccountId != null) ...[
+              if (initialAccountId == null)
+                MaterialWidgetRoute(page: const ChooseAccountPage())
+              else
                 HomePage.buildRoute(accountId: initialAccountId),
-                InboxPage.buildRoute(accountId: initialAccountId),
-              ],
             ];
           });
         }));
@@ -271,8 +269,7 @@ class ChooseAccountPage extends StatelessWidget {
         // The default trailing padding with M3 is 24px. Decrease by 12 because
         // IconButton (the "…" button) comes with 12px padding on all sides.
         contentPadding: const EdgeInsetsDirectional.only(start: 16, end: 12),
-        onTap: () => Navigator.push(context,
-          HomePage.buildRoute(accountId: accountId))));
+        onTap: () => HomePage.navigate(context, accountId: accountId)));
   }
 
   @override
@@ -281,13 +278,19 @@ class ChooseAccountPage extends StatelessWidget {
     final zulipLocalizations = ZulipLocalizations.of(context);
     assert(!PerAccountStoreWidget.debugExistsOf(context));
     final globalStore = GlobalStoreWidget.of(context);
+
+    // Borrowed from [AppBar.build].
+    // See documentation on [ModalRoute.impliesAppBarDismissal]:
+    // > Whether an [AppBar] in the route should automatically add a back button or
+    // > close button.
+    final hasBackButton = ModalRoute.of(context)?.impliesAppBarDismissal ?? false;
     return MenuButtonTheme(
       data: MenuButtonThemeData(style: MenuItemButton.styleFrom(
         backgroundColor: colorScheme.secondaryContainer,
         foregroundColor: colorScheme.onSecondaryContainer)),
       child: Scaffold(
         appBar: AppBar(
-          titleSpacing: 16,
+          titleSpacing: hasBackButton ? null : 16,
           title: Text(zulipLocalizations.chooseAccountPageTitle),
           actions: const [ChooseAccountPageOverflowButton()]),
         body: SafeArea(