Use channel folders in the "Inbox" view by chrisbobbe · Pull Request #2186 · zulip/zulip-flutter

chrisbobbe · 2026-02-28T01:55:44Z

Note on the screenshots: I think the view looks "busy" because the channel-header and unread-marker backgrounds are so bold. I'd like to follow up with a PR to finish updating the "Inbox" design to follow Figma, which will make these elements more subtle:

https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=13188-51396&m=dev

Screenshots

Before	After

As discussed at #mobile-design > channel folders in inbox: sticky headers @ 💬, here's a proposal for showing the channel folder in a channel header's name, but only in the sticky-header position. As discussed, we'd ideally make folder headers and channel headers both be sticky headers, but we haven't really defined what that means, and it's probably nontrivial to implement.

We also discussed that this part isn't crucial, so I've made a separate commit for it that we can drop if desired.

Screenshots of this detail:

Light	Dark

alya · 2026-02-28T07:06:10Z

I'd like to follow up with a PR to finish updating the "Inbox" design to follow Figma, which will make these elements more subtle:

Mmm, let's make sure to discuss once more in #mobile-design before you do that work, since it's been a while since the design was proposed, to make sure we're still happy with all the ideas.

Moving the buttons to collapse/expand channels to the right will be nice for getting more space for topic names (less left-side margin), and matching web better.

alya · 2026-02-28T07:10:34Z

Left a comment on the extra folder name commit at #mobile-design > channel folders in inbox: sticky headers @ 💬 (I'm worried it won't work well).

alya · 2026-02-28T07:14:32Z

I think the top DM row should be vertically closer to its "folder" label. Currently, it looks to be equidistant, which I don't think feels right semantically.

alya · 2026-02-28T07:15:02Z

I guess folders aren't collapsible at this point? We should probably track making them collapsible as a follow-up.

alya · 2026-02-28T07:15:51Z

Overall, the screenshots look reasonable to me -- I'm excited for this feature!

rajveermalviya

Thanks @chrisbobbe! Sorry for the delay! All LGTM, moving over to Greg's review.

gnprice

Thanks for building this! Generally this looks great; mostly small comments below.

The two parts I haven't read are the last commit (mentioned below) and the tests of the main, second-to-last commit:
e601570 inbox: Group channels by folder, including realm-level folders

gnprice · 2026-03-11T21:18:51Z

lib/widgets/inbox.dart

    return Semantics(container: true,
      child: result);


This Semantics widget seems to disappear from InboxChannelHeaderItem in the _HeaderItem refactor:
3d92f97 inbox [nfc]: Merge _HeaderItem base class into its only remaining subclass

A second one appears in an earlier commit on InboxFolderHeaderItem. Is it intended to move from one to the other, or should it be on both?

Ah sounds like I misresolved a conflict with #2120 :) thanks for spotting!

(It should be on both.)

gnprice · 2026-03-11T21:21:01Z

lib/widgets/inbox.dart

+  final DmNarrow narrow;
  final int count;
  final bool hasMention;
-  final List<(DmNarrow, int, bool)> items;


The count and the mention icon effectively get removed from the DMs header in this commit:
a6bb747 inbox: Use folder-style header for all-DMs, too

I see in the screenshots that's intentional, and I guess it's implied by "folder-style" since we don't put those on folders. Would be good to briefly mention in the commit message.

gnprice · 2026-03-11T21:24:14Z

lib/widgets/inbox.dart

+            case _InboxListItemDmConversation(:final narrow, :final count, :final hasMention):
+              return InboxDmItem(narrow: narrow, count: count, hasMention: hasMention);


nit: This way is fine, but it can make things a bit simpler to pass the whole item object down instead of each of its fields separately:

Suggested change

case _InboxListItemDmConversation(:final narrow, :final count, :final hasMention):

return InboxDmItem(narrow: narrow, count: count, hasMention: hasMention);

case _InboxListItemDmConversation():

return InboxDmItem(data: item);

In particular that makes fewer places that need to be updated when we add or alter a field on the data class.

(This is the same pattern seen in our content widgets, which generally take a whole node object of some relevant subclass of ContentNode.)

Ah yeah, agreed. I'd like to defer this for now if that's OK.

gnprice · 2026-03-11T21:28:22Z

test/widgets/inbox_test.dart

  Finder findChannelHeader(int channelId) => find.byWidgetPredicate((widget) =>
-    widget is InboxChannelHeaderItem && widget.channelId == channelId).first;
+    widget is InboxChannelHeaderItem && widget.subscription.streamId == channelId).first;


nit: this seems to happen in the commit before the one it's relevant to:
a6bb747 inbox: Use folder-style header for all-DMs, too
3d92f97 inbox [nfc]: Merge _HeaderItem base class into its only remaining subclass

gnprice · 2026-03-11T21:29:38Z

assets/l10n/app_en.arb

+  "unknownChannelFolderName": "(unknown channel folder)",
+  "@unknownChannelFolderName": {
+    "description": "Name placeholder to use for a channel folder when we don't know its name."


Huh, can this situation happen?

gnprice · 2026-03-11T21:47:06Z

test/model/channel_test.dart

+    final sorted = unsorted.toList()
+      .sorted((a, b) => store.compareUiChannelFolders(a, b));


nit: simplify a bit with a tearoff

Suggested change

final sorted = unsorted.toList()

.sorted((a, b) => store.compareUiChannelFolders(a, b));

final sorted = unsorted.toList()

.sorted(store.compareUiChannelFolders);

(which might then fit on one line?)

gnprice · 2026-03-11T21:51:11Z

lib/widgets/inbox.dart

+      final channelSections = channelSectionsByFolder[folder]!.toList();
+      channelSections.sort((a, b) {


No need for the toList() copy; we can sort the existing list. (Just like we sort the pinnedChannelSections and otherChannelSections lists as of the commit before this one.)

gnprice · 2026-03-11T21:53:02Z

lib/widgets/inbox.dart

+      final uiChannelFolder = store.uiChannelFolder(streamId);
+      (channelSectionsByFolder[uiChannelFolder] ??= [])


There's a user setting to control whether folders apply to their inbox, right? Do we want to implement that setting before we ship this?

Probably isn't hard to add.

Yyyes, but it's marked as "web/desktop" in the API doc:

https://zulip.com/api/register-queue

web_inbox_show_channel_folders: boolean

Determines whether channel folders are used to organize how conversations with unread messages are displayed in the web/desktop application's Inbox view.

Changes: New in Zulip 12.0 (feature level 431).

gnprice · 2026-03-11T21:55:37Z

lib/widgets/inbox.dart

+  // TODO(design) this is kind of a hack; we'd really like to keep the
+  //   folder name onscreen by making it sticky too, i.e. make
+  //   both folder headers and channel headers sticky headers.
+  //   See discussion for defining and implementing that behavior:
+  //     https://chat.zulip.org/#narrow/channel/530-mobile-design/topic/channel.20folders.20in.20inbox.3A.20sticky.20headers/near/2367795
+  final bool showChannelFolderName;


I'm skipping reading the code in this last commit:
7f1ada4 inbox: Show channel-folder name in channel header, only in "sticky" position

because it sounds like Alya's view above is that we don't want it product/design-wise.

gnprice · 2026-03-11T21:58:43Z

test/widgets/inbox_test.dart

+      testWidgets('only pinned channels: shows pinned header, no other header', (tester) async {
+        final channel = eg.stream();
+        await setupPage(tester,
+          streams: [channel],
+          subscriptions: [eg.subscription(channel, pinToTop: true)],
+          unreadMessages: [eg.streamMessage(stream: channel)]);
+        checkFolderHeader('Pinned channels');
+        checkNoFolderHeader('Other channels');
+      });
+
+      testWidgets('only unpinned channels: shows other header, no pinned header', (tester) async {


These two test cases would be sharper if in each of them a channel in the other situation existed but didn't have any messages. That shows the logic for which headers to show is based on the (unread) messages appearing in the inbox, not on the full roster of channels.

…orten it

This is equivalent except that it puts channels that start with an emoji first; see implementation comment in the method. Test written with help from Claude. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

This more generic semantics can accommodate list items that aren't whole sections, such as folder headers (coming soon) and eventually topic items, for zulip#389 .

…uctor

Tests written with Claude. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

This removes the unread count and @-mention icon from the all-DMs header, which the channel-folder headers will also leave out for now.

…class This _HeaderItem class had two subclasses before: (a) one for the all-DMs section header, InboxAllDmsHeaderItem (b) one for channel section headers, InboxChannelHeaderItem We recently restyled the all-DMs section header as a folder-style header, dropping (a). Now, simplify InboxChannelHeaderItem by having it absorb all that _HeaderItem was doing.

Clients are actually expected to show "PINNED" and "OTHER" sections in the Inbox, with the same styling as channel folders that admins can create for the org with Zulip Server 11+. We can think of these two entities as "pseudo" channel folders. "UI channel folder" seems like a reasonable umbrella term for these "pseudo" channel folders and the realm/org-level channel folders. Also replace the existing compareChannelFolders function, which acted only on realm-level folders, with a new function compareUiChannelFolders that's actually what we'll want for the inbox. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Fixes zulip#1765. Tests written with help from Claude. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

chrisbobbe requested a review from rajveermalviya February 28, 2026 01:55

chrisbobbe assigned rajveermalviya Feb 28, 2026

chrisbobbe added the maintainer review PR ready for review by Zulip maintainers label Feb 28, 2026

rajveermalviya approved these changes Mar 11, 2026

View reviewed changes

rajveermalviya added integration review Added by maintainers when PR may be ready for integration and removed maintainer review PR ready for review by Zulip maintainers labels Mar 11, 2026

rajveermalviya assigned gnprice and unassigned rajveermalviya Mar 11, 2026

rajveermalviya requested a review from gnprice March 11, 2026 19:57

gnprice reviewed Mar 11, 2026

View reviewed changes

chrisbobbe and others added 12 commits March 13, 2026 00:20

inbox [nfc]: Refactor condition for including _AllDmsSectionData

9366da5

inbox [nfc]: Group a channel-level metadata line with another one; sh…

16da46d

…orten it

inbox: Use ChannelStore.compareChannelsByName for channel sorting

40bd34b

This is equivalent except that it puts channels that start with an emoji first; see implementation comment in the method. Test written with help from Claude. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

inbox [nfc]: Build list of channel-section data first, then sort after

9c88765

inbox [nfc]: Refactor how we put pinned before non-pinned channels

bdde511

inbox [nfc]: Call list items "items", not "sections"

d2bf8ca

This more generic semantics can accommodate list items that aren't whole sections, such as folder headers (coming soon) and eventually topic items, for zulip#389 .

inbox [nfc]: Use named params for _InboxListItemChannelSection constr…

1ce8a28

…uctor

inbox: Introduce folder-style headers, just for PINNED and OTHER

6058f48

Tests written with Claude. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

inbox: Use folder-style header for all-DMs, too

25235ca

This removes the unread count and @-mention icon from the all-DMs header, which the channel-folder headers will also leave out for now.

inbox: Group channels by folder, including realm-level folders

0b772ba

Fixes zulip#1765. Tests written with help from Claude. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

chrisbobbe force-pushed the pr-inbox-channel-folders branch from 7f1ada4 to 0b772ba Compare March 13, 2026 08:17

chrisbobbe mentioned this pull request Mar 13, 2026

inbox: Make channel folders collapsible #2220

Open

		case _InboxListItemDmConversation(:final narrow, :final count, :final hasMention):
		return InboxDmItem(narrow: narrow, count: count, hasMention: hasMention);

		final sorted = unsorted.toList()
		.sorted((a, b) => store.compareUiChannelFolders(a, b));

		final channelSections = channelSectionsByFolder[folder]!.toList();
		channelSections.sort((a, b) {

		final uiChannelFolder = store.uiChannelFolder(streamId);
		(channelSectionsByFolder[uiChannelFolder] ??= [])

Conversation

chrisbobbe commented Feb 28, 2026

Screenshots

Uh oh!

alya commented Feb 28, 2026

Uh oh!

alya commented Feb 28, 2026

Uh oh!

alya commented Feb 28, 2026

Uh oh!

alya commented Feb 28, 2026

Uh oh!

alya commented Feb 28, 2026

Uh oh!

rajveermalviya left a comment

Choose a reason for hiding this comment

Uh oh!

gnprice 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!

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!

4 participants