home: Add icons label on main navigation bar. #1879

MritunjayTiwari14 · 2025-09-28T12:16:16Z

Key Changes: (Screenshots Outdated)

Dark Theme	Light Theme

I have kept the height of the Navigation to be fixed because a fully dynamic navigation bar height that adjusts based on label content across languages is not feasibly after having done some feasibility study. The UI jitter when the bar changes its size suddenly when the user changes the app language is extremely unlikely to be solved and can negatively impact user experience hence even in day to day app these types of dynamic navigation bar are not used.

integration of the page bodies and semantics has been done

Link to Figma Design was not found rather, the screenshot that was shared by Vlad Korobov in the following discuss was used to implement the UI : #mobile > Flutter feedback - Icons in app @ 💬

Language Consistency for all language for the added labels will be fixed after receiving feedback from the Moderators about the Implementation of the solution.

Thank you

Figma Design Link

Fixes #1857

MritunjayTiwari14 · 2025-09-28T13:01:11Z

@gnprice I would be extremely grateful if you could give a review to this PR for the Issue that you stated.

gnprice · 2025-09-28T21:12:24Z

There is a lot of text to read in that PR description. Did you use ChatGPT or another LLM to write it? If so, we'd much rather see whatever prompt you used, instead of the LLM output — the LLM fundamentally doesn't add any information that wasn't there already, and the prompt should be a lot shorter and so less work to read.

There's also no need to repeat information that's there in the diffs, like the names of files you touched and identifiers you added there.

gnprice · 2025-09-28T21:20:39Z

Please also add a test for this change, and organize into clear and coherent commits according to the Zulip style — those are our two general requirements for a PR. See the repo's README for details, and links to further details.

Once those are met, this will be ready for a review. After another maintainer has reviewed it and you've revised to address their comments, I'll review the PR.

MritunjayTiwari14 · 2025-09-29T04:42:18Z

There is a lot of text to read in that PR description. Did you use ChatGPT or another LLM to write it? If so, we'd much rather see whatever prompt you used, instead of the LLM output — the LLM fundamentally doesn't add any information that wasn't there already, and the prompt should be a lot shorter and so less work to read.

There's also no need to repeat information that's there in the diffs, like the names of files you touched and identifiers you added there.

Although i did write the whole description in a paragraph, I use LLM to fine tune my description into a formatted output like a pointer and reformat it output again myself. I have changed the description to a brief one.

MritunjayTiwari14 · 2025-09-29T04:43:58Z

Please also add a test for this change, and organize into clear and coherent commits according to the Zulip style — those are our two general requirements for a PR. See the repo's README for details, and links to further details.

Once those are met, this will be ready for a review. After another maintainer has reviewed it and you've revised to address their comments, I'll review the PR.

Alright Greg

Added Gesture Detector over Column, Temporary set the onPressed of the Icon Button to null. Fixes: zulip#1808 home: Improve performace and fix bug. Replaced IconButton widgets to Icon improve significantly performace of switching screens and wrote test for the semantic labels for App Bar. Fixes: zulip#1879

MritunjayTiwari14 · 2025-10-05T10:33:40Z

@chrisbobbe This is the PR for which we discussed in the chats

For Design reference i have attached the difference.

I have made the commits coherent as well as minimal as request by Greg.

MritunjayTiwari14 · 2025-10-09T09:46:19Z

Before	After(Font Size-12)	After(Font Size-14)

Thank you @gnprice for the advice in the mobile-design chats, i found the figma design for the labeled bottom navigation bar here, i have given the difference of implemented UI and design in the table above.

chrisbobbe · 2025-10-10T00:03:44Z

lib/widgets/home.dart

-            // TODO(#535): Decide if we find it helpful to use something like
-            //   [SemanticsProperties.namesRoute] to structure this UI better
-            //   for screen-reader software.
-            Offstage(offstage: tab != _tab.value, child: body),
+            Offstage(
+              offstage: tab != _tab.value,
+              child: Semantics(
+                namesRoute: true,
+                child: body))


It looks like you read the TODO and decided that SemanticsProperties.namesRoute is helpful. Could you explain what you considered when making that decision?

MritunjayTiwari14 · 2025-10-10T05:10:10Z

Thank you @chrisbobbe for pointing out the issue in sematics!

I have updated the semantic using SematicServices.sendAnnouncement for better interoperability. I can provide the TalkBack working on android recording for confirmation.

chrisbobbe · 2025-10-10T22:11:00Z

Thank you @chrisbobbe for pointing out the issue in sematics!

Hmm, in #1879 (comment) , I didn't intend to point out any issue. 🙂 I just meant to ask for information that could help us understand your proposal.

Did you find some issue with SemanticsProperties.namesRoute that made you decide to fix the TODO with that "send announcement" method instead? I don't think we've used that before.

MritunjayTiwari14 · 2025-10-11T07:40:08Z

Hmm, in #1879 (comment) , I didn't intend to point out any issue. 🙂 I just meant to ask for information that could help us understand your proposal.

Did you find some issue with SemanticsProperties.namesRoute that made you decide to fix the TODO with that "send announcement" method instead? I don't think we've used that before.

Thank you @chrisbobbe for the review, I think the main reason is offstage do not allow the semantic to access its property for semantic widget to correctly get the label to speak out, I also tested it using TalkBack and the semantic widget even with a label was not able to make TalkBack trigger when the change in page body was detected.

chrisbobbe · 2025-10-17T00:51:03Z

It sounds like you were expected to hear something from TalkBack when you changed tabs, and you didn't hear anything, so you assumed it wasn't a valid fix for the TODO.

I these are the main requirements to resolve the TODO:

We use the Semantics APIs as documented. Some questions for investigation:
- These panels (Inbox, Channels, etc.) are on the Home page…are they really "routes"? Is "Home" a route? What's a "route", as far as this API is concerned?
- Do we need to use SemanticsProperty.scopesRoute somewhere too? The dartdoc for that links to SemanticsConfiguration.explicitChildNodes; do we need to use that too?
If we make a change, then it shouldn't make the experience obviously worse, in manual testing with TalkBack or VoiceOver.

It's entirely possible that a namesRoute approach is helpful to users in some less obvious way than causing TalkBack to announce the name of a tab when you tap on it. For example maybe VoiceOver does that, or maybe it enables screen-reader software to answer the question "What route am I on?", and we would learn that if we used the software long enough. 🙂 It's our job to give screen-reader software the information it expects, but it's that software's job to decide what to do with it.

If it gets at all complicated, let's not try to resolve the TODO in this PR, to keep it focused on #1857.

MritunjayTiwari14 · 2025-10-18T12:01:14Z

Before Implementing the Nav Bar Label

Normal	Oversized System Font

After Implementing the Nav Bar Label

Before	After	After with Oversized System Font

Case of Text Overflow( Upto 2 Lines )

Text Overflow Light	Text Overflow Dark

Thank you @chrisbobbe for your review. I feels like it better to concentrate on a single task right now (i.e the nav bar labelling).
I have made the commit history clear and coherent as well as uploaded the detailed updated screenshot comparison of the design.

This solution also fixes the constant size of nav bar even when the system font size was increased which was a user dissatisfier, it would allow the uses to easily identify the corresponding page using the enlarged label fitted within nav bar.

MritunjayTiwari14 · 2025-10-21T08:46:25Z

Screenshots

Screenshot Comparison

Light Theme	Dark Theme

Video Recording of implementation

video.mp4

Possible enhancement: Adding a padding in the top which was not implemented as it was not described in Figma Design of the same.

Thanks for the patience, the PR is ready for review! @chrisbobbe, the Ink splash effect on the button has been restored using material and inkwell combination which also includes the padding as per the Figma design.

This allows the height of bottom nav bar to dyanmically change on the basis of system font size, maxHeight has been set after calibration.

Replaced Iconbutton with Material and InkWell widgets latter ensures InkSplash effect on icon as well as text label in the upcomming commit

Introduced Flexible instead of Expandible To make sure Text widget cover only required area not till maxheight of ConstrainedBox.

https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=11677-62355&t=4RpHwmhsJHyVR9UX-4

… button

chrisbobbe

Thanks!

For the changes proposed in these 7 commits, I think it's actually better to squash them into one single commit. The desired changes aren't very complicated, and it's helpful to see them all together in a coherent whole. 🙂 This approach would also clean up the "noise" of a commit like this one:

nits: Remove comma after color property of Icon in home bottom navbar button

That kind of commit never needs to exist. If there's a problem introduced in an earlier commit in the PR, the solution is to change the earlier commit to not introduce the problem, rather than adding a new commit, which just adds work in PR review and when reading Git history.

Please also add a test for this change, as Greg pointed out above.

chrisbobbe · 2025-10-23T20:20:41Z

lib/widgets/home.dart

-            narrow: const CombinedFeedNarrow()))),
-      button(_HomePageTab.channels,       ZulipIcons.hash_italic),
+            narrow: const CombinedFeedNarrow())), 
+        label: zulipLocalizations.navBarFeedLabel),


Let's match the name of the page, so say "Combined feed" instead of "Feed" here, using zulipLocalizations.combinedFeedPageTitle. It looks like there's a plan to accommodate long labels: #mobile-design > design comparison for nav bar label @ 💬

(And remove the addition of navBarFeedLabel from your PR.)

chrisbobbe · 2025-10-23T20:26:35Z

lib/widgets/home.dart

+      button(_HomePageTab.directMessages, ZulipIcons.two_person,
+        zulipLocalizations.navBarDmLabel),


Same as above—use zulipLocalizations.recentDmConversationsPageTitle here, to say "Direct messages" instead of "DMs".

(And remove the addition of navBarDmLabel from your PR.)

chrisbobbe · 2025-10-23T20:40:44Z

lib/widgets/home.dart

+            // TODO(design): determine a suitable max width for bottom nav bar
+            constraints: const BoxConstraints(maxWidth: 600, minHeight: 48, maxHeight: 85),


With this explicit maxHeight, it looks broken when the text size is very large:

I think your goal was to make sure the nav bar doesn't consume valuable space when it doesn't need to, as the text-size setting increases. We should accomplish that in a different way:

ui: Sweep through UI text, clamping max scale factor for less-important content #1023

I.e., don't use maxHeight. Instead, on the label text (which is what responds to the text-size setting), we should use TextScaler.clamp with maxScaleFactor as we do in several places already. (1.5 is probably a good value for maxScaleFactor.)

chrisbobbe · 2025-10-23T20:41:59Z

assets/l10n/app_en.arb

+  "navBarMenuLabel": "Menu",
+  "@navBarMenuLabel": {
+    "description": "Label for the Menu button on the bottom navigation bar."
+  },


When we add entries to this file, we do it in the same commit that uses them. That way it's easier to see them together, and make sure they're used as intended.

chrisbobbe · 2025-10-23T21:18:54Z

lib/widgets/home.dart

+          child: Padding(
+            padding: const EdgeInsets.only(bottom: 3.0),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                SizedBox(height: 34,
+                  child: Center(
+                    child: Icon(icon, size: 24, color: color))),


Proposed change (including the code comment, to explain to future readers):

Suggested change

child: Padding(

padding: const EdgeInsets.only(bottom: 3.0),

child: Column(

mainAxisSize: MainAxisSize.min,

children: [

SizedBox(height: 34,

child: Center(

child: Icon(icon, size: 24, color: color))),

// (Added 3px horizontal padding not present in Figma, to make the

// text wrap before getting too close to the button's edge, which is

// visible on tap-down.)

padding: const EdgeInsets.fromLTRB(3, 6, 3, 3),

child: Column(

spacing: 3,

mainAxisSize: MainAxisSize.min,

children: [

Icon(icon, size: 24, color: color),

For the issue the comment is about, see screenshots with and without the 3px horizontal padding:

Without With

My proposal also fixes the vertical position of the icon to match the Figma.

chrisbobbe · 2025-10-23T21:20:43Z

lib/widgets/home.dart

+                    style: TextStyle(
+                      fontSize: 12,
+                      color: color,
+                      height: 1.0,),


nit:

Suggested change

style: TextStyle(

fontSize: 12,

color: color,

height: 1.0,),

style: TextStyle(fontSize: 12, color: color, height: 12 / 12),

chrisbobbe · 2025-10-23T21:31:30Z

lib/widgets/home.dart

+                    maxLines: 2,
+                    overflow: TextOverflow.ellipsis)),


Did we decide on max 2 lines and ellipsis overflow somewhere, or is it in the Figma? Greg pointed to an Android first-party app where the label wrapped onto three lines: #mobile-design > design comparison for nav bar label @ 💬

I think I prefer no max-lines limit at all. If a translated label is annoyingly long, I'd rather not add to the annoyance by cutting it short and adding "…". Instead I'd ask a volunteer translator if they can choose a shorter label.

chrisbobbe · 2025-10-23T21:40:27Z

lib/widgets/home.dart

          // TODO(#417): Disable splash effects for all buttons globally.
+          borderRadius: BorderRadius.all(Radius.circular(4)),
          splashFactory: NoSplash.splashFactory,


nit: don't separate the TODO from the line of code it is about

MritunjayTiwari14 force-pushed the issue_1857 branch 4 times, most recently from 55f7e12 to 1f1a1ee Compare October 5, 2025 10:31

gnprice added the maintainer review PR ready for review by Zulip maintainers label Oct 8, 2025

MritunjayTiwari14 force-pushed the issue_1857 branch 3 times, most recently from e8fc538 to 406a86f Compare October 9, 2025 09:26

chrisbobbe reviewed Oct 10, 2025

View reviewed changes

MritunjayTiwari14 force-pushed the issue_1857 branch from 406a86f to 88de8b2 Compare October 10, 2025 05:03

MritunjayTiwari14 force-pushed the issue_1857 branch 2 times, most recently from 2d51fd6 to adc6013 Compare October 10, 2025 10:29

MritunjayTiwari14 requested a review from chrisbobbe October 10, 2025 10:30

MritunjayTiwari14 force-pushed the issue_1857 branch from adc6013 to ed0b571 Compare October 18, 2025 11:16

MritunjayTiwari14 added 2 commits October 21, 2025 14:41

l10n: Add text label for dm, feed and menu icons in home bottom nav bar

329626a

home: Add label as a required String to _NavigationBarButton

22e7f3d

MritunjayTiwari14 force-pushed the issue_1857 branch from d85e622 to ef68b0c Compare October 21, 2025 09:12

MritunjayTiwari14 added 5 commits October 22, 2025 16:35

home: Replace SizeBox with ConstrainedBox in bottom nav bar

586c667

This allows the height of bottom nav bar to dyanmically change on the basis of system font size, maxHeight has been set after calibration.

home: Replace IconButton with Material, InkWell and Icon widgets

e6c3f5c

Replaced Iconbutton with Material and InkWell widgets latter ensures InkSplash effect on icon as well as text label in the upcomming commit

home: Add Text label below Icons using Flexible

141b7bb

Introduced Flexible instead of Expandible To make sure Text widget cover only required area not till maxheight of ConstrainedBox.

home: Add bottom padding on nav bar buttons, as per Figma

aa14c5d

https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=11677-62355&t=4RpHwmhsJHyVR9UX-4

nits: Remove comma after color property of Icon in home bottom navbar…

4499f3f

… button

MritunjayTiwari14 force-pushed the issue_1857 branch from ef68b0c to 4499f3f Compare October 22, 2025 11:07

chrisbobbe requested changes Oct 23, 2025

View reviewed changes

chrisbobbe self-assigned this Oct 23, 2025

		button(_HomePageTab.directMessages, ZulipIcons.two_person,
		zulipLocalizations.navBarDmLabel),

		// TODO(design): determine a suitable max width for bottom nav bar
		constraints: const BoxConstraints(maxWidth: 600, minHeight: 48, maxHeight: 85),

home: Add icons label on main navigation bar. #1879

Are you sure you want to change the base?

home: Add icons label on main navigation bar. #1879

Uh oh!

Conversation

MritunjayTiwari14 commented Sep 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MritunjayTiwari14 commented Sep 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gnprice commented Sep 28, 2025

Uh oh!

gnprice commented Sep 28, 2025

Uh oh!

MritunjayTiwari14 commented Sep 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MritunjayTiwari14 commented Sep 29, 2025

Uh oh!

MritunjayTiwari14 commented Oct 5, 2025

Uh oh!

MritunjayTiwari14 commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MritunjayTiwari14 commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chrisbobbe commented Oct 10, 2025

Uh oh!

MritunjayTiwari14 commented Oct 11, 2025

Uh oh!

chrisbobbe commented Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MritunjayTiwari14 commented Oct 18, 2025

Before Implementing the Nav Bar Label

After Implementing the Nav Bar Label

Uh oh!

MritunjayTiwari14 commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Screenshot Comparison

Video Recording of implementation

Uh oh!

chrisbobbe left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MritunjayTiwari14 commented Sep 28, 2025 •

edited

Loading

MritunjayTiwari14 commented Sep 28, 2025 •

edited

Loading

MritunjayTiwari14 commented Sep 29, 2025 •

edited

Loading

MritunjayTiwari14 commented Oct 9, 2025 •

edited

Loading

MritunjayTiwari14 commented Oct 10, 2025 •

edited

Loading

chrisbobbe commented Oct 17, 2025 •

edited

Loading

MritunjayTiwari14 commented Oct 21, 2025 •

edited

Loading