Show current organization's name and logo atop main menu #1937

rajveermalviya · 2025-10-22T14:39:33Z

Light	Dark

Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=2940-48987&p=f&m=dev
Fixes: #1037

alya · 2025-10-23T17:14:30Z

Hm, looking at this now, I don't like the "Organizations" button there. It's not immediately apparent what organizations it's referring to/why.

Where does it go? The account switcher?

rajveermalviya · 2025-10-23T18:03:36Z

Where does it go? The account switcher?

Correct in the current revision it goes to the account switcher button, also the Figma design doesn't have a separate "Switch account" button in the main menu.

alya · 2025-10-23T18:08:32Z

Can you just click on the org name itself to switch accounts?

alya · 2025-10-23T18:09:00Z

(If we're moving the account switching action to this new top line, we'll want to remove the "switch account" option in the same PR.)

chrisbobbe

Thanks! Comments below, and see also Alya's feedback (mentioning it so it doesn't get lost in the thread).

chrisbobbe · 2025-10-23T22:58:26Z

lib/model/store.dart

-  String? get realmName => account.realmName;
-
-  Uri? get realmIcon => account.realmIcon;
+  // The `account` is populated with the `realmName` before
+  // PerAccountStore is created, so this should never be null.
+  // See `UpdateMachine.load`.
+  String get realmName => account.realmName!;
+
+  // The `account` is populated with the `realmIcon` before
+  // PerAccountStore is created, so this should never be null.
+  // See `UpdateMachine.load`.
+  Uri get realmIcon => account.realmIcon!;


store: Make realmName and realmIcon getters non-null

Commit-message nit: "non-nullable", right? Also the commit message repeats reasoning that's already clear from added code comments, so we can remove it from the commit message.

chrisbobbe · 2025-10-23T23:02:12Z

test/widgets/home_test.dart

    testWidgets('_AboutZulipButton', (tester) async {
+      tester.view.physicalSize = Size(1080, 1920);
+      prepareBoringImageHttpClient();
      await prepare(tester);
      await tapOpenMenuAndAwait(tester);
      await tapButtonAndAwaitTransition(tester, find.byIcon(ZulipIcons.info));
      check(find.byType(AboutZulipPage)).findsOne();
+      debugNetworkImageHttpClientProvider = null;
    });


Rather than thinking through what's accomplished with the numbers 1080 and 1920 and whether they're correct, I'd rather just scroll until the button is in view:

testWidgets('_AboutZulipButton', (tester) async { prepareBoringImageHttpClient(); await prepare(tester); await tapOpenMenuAndAwait(tester); await tester.ensureVisible(find.byIcon(ZulipIcons.info)); await tapButtonAndAwaitTransition(tester, find.byIcon(ZulipIcons.info)); check(find.byType(AboutZulipPage)).findsOne(); debugNetworkImageHttpClientProvider = null; });

That's simpler and more transparent, and also adds some coverage of the scrolling logic; it seems like a win-win :)

chrisbobbe · 2025-10-23T23:04:44Z

lib/widgets/home.dart

+    final designVariables = DesignVariables.of(context);
+    final store = PerAccountStoreWidget.of(context);
+
+    final realmIconUrl = store.tryResolveUrl(store.realmIcon.toString());


Most of this line seems like code we'd rather not need to recite whenever we need the realm icon—should be possible to encapsulate it in PerAccountStore (maybe even Account?) where we have access to the realm URL.

chrisbobbe · 2025-10-23T23:05:49Z

lib/widgets/home.dart

+      padding: const EdgeInsets.only(top: 6),
+      child: Row(children: [
+        Expanded(child: Padding(
+          padding: const EdgeInsets.fromLTRB(12, 6, 4, 6),


Use EdgeInsetsDirectional.fromSTEB here, for RTL support.

chrisbobbe · 2025-10-23T23:09:32Z

lib/widgets/home.dart

+                MaterialWidgetRoute(page: const ChooseAccountPage()));
+            },
+            style: TextButton.styleFrom(
+              padding: const EdgeInsets.fromLTRB(8, 7, 14, 7),


(Same comment about EdgeInsetsDirectional.fromSTEB.)

chrisbobbe · 2025-10-23T23:37:08Z

lib/widgets/home.dart

+                ? RealmContentNetworkImage(realmIconUrl)
+                : const SizedBox.shrink()),


When the icon URL doesn't parse for whatever reason, and also when it does but the network request fails, how about we show an empty rounded square colored by DesignVariables.avatarPlaceholderBg? Maybe we could have a reusable RealmIconImage widget that takes care of that, much like AvatarImage takes care of choosing a placeholder (which it'll do in more cases with #1558).

chrisbobbe · 2025-10-23T23:42:25Z

lib/widgets/home.dart

+/// The main-menu sheet.
+///
+/// Figma link:
+///   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=11367-20647&t=lSnHudU6l7NWx0Fa-0


This URL is taking me to the "Read receipts" sheet; do you reproduce? (Could be a Figma issue)

chrisbobbe · 2025-10-23T23:47:00Z

lib/widgets/home.dart

+              backgroundColor: Colors.transparent,
+              overlayColor: Colors.transparent,
+              splashFactory: NoSplash.splashFactory,
+              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),


This border radius shouldn't make a difference, with a transparent background/overlay/etc., right? I see it in the Figma, but it looks accidental there, too; I think we can leave it out without comment.

rajveermalviya · 2025-10-28T15:21:39Z

Thanks for the reviews @chrisbobbe, @alya.
Pushed an update, and also updated the screenshots in the description, PTAL.

This helper will be used soon to display organization logo in various places.

Fixes: zulip#1037

alya · 2025-10-28T21:54:59Z

Seems reasonable to me, thanks! Open to feedback from @terpimost if he has another suggestion.

chrisbobbe

Thanks! Comments below.

chrisbobbe · 2025-11-04T00:24:10Z

lib/model/store.dart

  ///
  /// This returns null if [reference] fails to parse as a URL.
-  Uri? tryResolveUrl(String reference) => _tryResolveUrl(realmUrl, reference);
+  Uri? tryResolveUrl(String reference) => _tryResolveUrlStr(realmUrl, reference);


store [nfc]: Rename _tryResolveUrl to _tryResolveUrlStr

flutter analyze is complaining to me at this commit:

Analyzing zulip-flutter... info • Unnecessary 'this.' qualifier • lib/model/emoji.dart:229:25 • unnecessary_this info • Unnecessary 'this.' qualifier • lib/model/emoji.dart:234:26 • unnecessary_this 2 issues found. (ran in 3.5s)

chrisbobbe · 2025-11-04T00:40:02Z

lib/model/store.dart

 /// Like [Uri.resolve], but on failure return null instead of throwing.
-Uri? tryResolveUrl(Uri baseUrl, String reference) {
+Uri? tryResolveUrlStr(Uri baseUrl, String reference) {


Can we move this helper to a different file, like maybe lib/basic.dart? It's a convenience function encapsulating some control flow (a try/catch) and doesn't depend on details of a store.

Ditto the new, parallel helper that you're adding, which takes a Uri instead of String for reference.

Or, alternatively, I think we could just make both of these helpers private.

chrisbobbe · 2025-11-04T00:41:36Z

test/widgets/content_test.dart

      check(() => Uri.parse(expectedImages.single.srcUrl)).throws<void>();
-      check(tryResolveUrl(eg.realmUrl, expectedImages.single.srcUrl)).isNull();
+      check(tryResolveUrlStr(eg.realmUrl, expectedImages.single.srcUrl)).isNull();


The rename brings attention to this existing check 🙂 which looks redundant with the one above it (.throws<void>()). I think we're free to remove it.

chrisbobbe · 2025-11-04T00:55:25Z

lib/widgets/home.dart

+
+    return Padding(
+      padding: const EdgeInsets.only(top: 6),
+      child: AnimatedScaleOnTap(


I think this would look better without the AnimatedScaleOnTap effect. It looks like two things that are moving, rather than one thing that's resizing.

I think we should reserve this effect for buttons that are a rounded-rectangle surface:

Thoughts @alya?

For touch feedback here, how about opacity? Per Vlad's suggestion at #mobile-design > all channels view design @ 💬:

we could use opacity by default to indicate touch if its not provided

Agreed that the effect in that screen capture isn't working. Trying Vlad's suggestion sounds good to me.

chrisbobbe · 2025-11-04T03:23:46Z

lib/widgets/home.dart

+              child: Icon(ZulipIcons.arrow_left_right,
+                size: 19,
+                color: designVariables.icon)),


I wonder if this would be a good place to use ZulipIconButton.

chrisbobbe · 2025-11-04T03:30:18Z

lib/widgets/home.dart

+                  ).merge(weightVariableTextStyle(context, wght: 600)))),
+              ]))),
+            Padding(
+              padding: EdgeInsetsDirectional.fromSTEB(8, 7, 14, 7),


I wonder if the end padding should be 12px, to match the padding before the org icon?

This 14px value comes from the Figma, but the Figma uses end-aligned text, and I think the 14px value might be tailored to that case. Also maybe the 7px vertical padding? Seems like it would be simpler, and logical, if we just wrapped the whole row with 12px horizontal padding and 6px vertical padding, and said spacing: 12 (or some other appropriate value) on the Row.

rajveermalviya added the maintainer review PR ready for review by Zulip maintainers label Oct 22, 2025

rajveermalviya assigned chrisbobbe Oct 22, 2025

rajveermalviya requested a review from chrisbobbe October 22, 2025 14:39

chrisbobbe reviewed Oct 24, 2025

View reviewed changes

rajveermalviya added 2 commits October 28, 2025 15:43

store: Make realmName and realmIcon getters non-nullable

87ddd72

store [nfc]: Rename _tryResolveUrl to _tryResolveUrlStr

c40a8d9

rajveermalviya force-pushed the pr-org-name-menu branch from 4e5d5f9 to 0d41609 Compare October 28, 2025 15:15

rajveermalviya requested a review from chrisbobbe October 28, 2025 15:21

store: Add resolveRealmIconUrl

83f3f9e

This helper will be used soon to display organization logo in various places.

rajveermalviya force-pushed the pr-org-name-menu branch from 0d41609 to 1dc1fb7 Compare October 28, 2025 15:25

home: Show current organization's name and logo atop main menu

c9c67d6

Fixes: zulip#1037

rajveermalviya force-pushed the pr-org-name-menu branch from 1dc1fb7 to c9c67d6 Compare October 28, 2025 19:02

chrisbobbe reviewed Nov 4, 2025

View reviewed changes

		? RealmContentNetworkImage(realmIconUrl)
		: const SizedBox.shrink()),

Show current organization's name and logo atop main menu #1937

Are you sure you want to change the base?

Show current organization's name and logo atop main menu #1937

Uh oh!

Conversation

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

rajveermalviya commented Oct 23, 2025

Uh oh!

alya commented Oct 23, 2025

Uh oh!

alya commented Oct 23, 2025

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!

rajveermalviya commented Oct 28, 2025

Uh oh!

alya commented Oct 28, 2025

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!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rajveermalviya commented Oct 22, 2025 •

edited

Loading

alya commented Oct 23, 2025 •

edited

Loading