all_channels: Replace three dot menu with long press gesture and add on tap to feed #1915

chungwwei · 2025-10-11T09:10:19Z

Fixes #1914

Page View

Before	After

Long Press View

Long Press on Public Channel	Long Press on Private Channel

screen-20251018-105741.mp4

gnprice

Thanks @chungwwei for writing this PR! Generally this looks good. Various small comments below.

gnprice · 2025-10-15T23:19:14Z

lib/widgets/all_channels.dart

+        onLongPress: () {
+          if (!hasContentAccess) {
+            return;
+          }
+          showChannelActionSheet(context, channelId: channel.streamId);


What's the motivation for the hasContentAccess condition here?

For some reason, I thought all_channels are all channels belong to the org, but all_channels are channels a user has access to. Removing the hasContentAccess for both gestures.

I think hasContentAccess is right for whether to try to go to the channel feed. This list has all channels the user has metadata access to, but that's broader than having content access:
https://zulip.com/help/channel-permissions#private-channels

Should onTap toast a message that says viewing channel is not allowed? I'm unsure how the UI should indicate that tapping is disabled on channels a user doesn't have access to. I modify the entry widget a bit and have it as empty SizedBox instead of the toggle there.

I believe onLongPress currently launches a sheet that has buttons that give you access to a private channel. Those buttons should probably be conditionally rendered with hasContentAccess. The CopyChannelLinkButton is the only button that shouldn't conditionally rendered for now.

zulip-flutter/lib/widgets/action_sheet.dart

Lines 507 to 513 in efc41b3

if (unreadCount > 0)

MarkChannelAsReadButton(pageContext: pageContext, channelId: channelId),

if (showTopicListButton)

TopicListButton(pageContext: pageContext, channelId: channelId),

if (!isOnChannelFeed)

ChannelFeedButton(pageContext: pageContext, channelId: channelId),

CopyChannelLinkButton(channelId: channelId, pageContext: pageContext)

Yeah, I think making those buttons conditional within the action sheet would be a good follow-up change, thanks. Should go in a separate commit.

I'm unsure how the UI should indicate that tapping is disabled on channels a user doesn't have access to.

I think the fact that the toggle is absent is probably enough of a hint that those channels have a different status.

buttons that give you access to a private channel

Just to be explicit: those buttons won't actually give access to a channel you don't have content access to, because the server won't give you any of the channel's messages or other information you don't have permission to see. But they won't do anything useful, so it'd be best to not offer them.

gnprice · 2025-10-15T23:21:39Z

lib/widgets/all_channels.dart

+        onTap: () {
+          if (!hasContentAccess) {
+            return;
+          }
+          Navigator.push(context, MessageListPage.buildRoute(


When the gesture isn't going to do anything, the handler should be null rather than a no-op function. Otherwise, the GestureDetector will tell screen-readers and other accessibility software that there's a gesture available there.

I hadn't thought of that, learning something new here.

test/widgets/all_channels_test.dart

gnprice · 2025-10-15T23:36:41Z

The screencast video is helpful, thanks.

Please also include a still screenshot. See discussion in our instructions:
https://zulip.readthedocs.io/en/latest/contributing/reviewable-prs.html#demonstrating-visual-changes

The interactions in the screencast are somewhat hard to follow, because the viewer can't see where on the screen you were tapping. When you take a screen recording, there's an option to have it show touches on the screen (here's Android docs); you should basically always enable that option when making a screencast to demonstrate some UI behavior.

gnprice · 2025-10-17T00:34:41Z

Thanks for the revision. One reply in a subthread above: #1915 (comment)

Please also add a screenshot, and a screen recording with touches visible, so that we can review the visual changes. See details in my comment above: #1915 (comment)

gnprice · 2025-10-17T00:37:00Z

Oh and please see our Git style guide:
https://zulip.readthedocs.io/en/latest/contributing/commit-discipline.html#each-commit-must-be-coherent

In this PR, the two commits should be squashed together, rather than have one commit for the first revision and then another commit that adjusts those changes.

gnprice · 2025-10-18T02:46:03Z

Thanks for the revision.

Please see our Git style guide (linked above and in our README) for how to write clear commit messages. See also the reply above at #1915 (comment) .

In the screenshots, the toggles are much too close to the right edge of the screen. (Notice that they're visually much closer than the content at the left is to the left edge, and much closer than the three-dots icon is in main.) They should get appropriate padding.

chungwwei · 2025-10-18T14:09:39Z

Thanks Greg for the review! Hopefully the commits are following the style guide now.

I believe that GestureDetector was probably not the best fit to use in the PR. Other parts of the app like the Channel Page uses InkWell, which has the rippling effect when long press.

…on tap to feed Make the All channels view UI consistent with the Channels view. Specifically, onTap on a row item should lead to channel feed page and onLongPress should launch the channel bottom sheet. - all_channels: Add empty SizedBox as placeholder when toggle isn't shown for layout consistency - all_channels: Add on tap to channel feed if user has content access - all_channels: Add additional end padding for row item Fixes zulip#1914

…bottom sheet MarkChannelAsReadButton, TopicListButton, and ChannelFeedButton should not be displayed for a user without content access, as the server won't provide any information the user doesn't have permission to view.

gnprice

Thanks for the revision, and the updated screenshots. Some comments below.

The commit messages are mostly good now, but the body should get line-wrapped. See this section:
https://zulip.readthedocs.io/en/latest/contributing/commit-discipline.html#formatting-guidelines

To demonstrate why, here's how the first commit message looks when I'm reviewing the changes (with git log --stat -p):

gnprice · 2025-10-20T23:53:15Z

lib/widgets/all_channels.dart

-            showChannelActionSheet(context, channelId: channel.streamId);
-          }),
-      ]));
+    return InkWell(


I believe that GestureDetector was probably not the best fit to use in the PR. Other parts of the app like the Channel Page uses InkWell, which has the rippling effect when long press.

Yeah, agreed that this is best.

Our designer isn't always a fan of the inkwell effect. But here we're specifically aiming to make this page more like the channels/subscriptions page, and that uses the effect so this should too. (And even where we don't, we generally have some other form of touch feedback.)

gnprice · 2025-10-20T23:55:02Z

lib/widgets/all_channels.dart

+      onTap: hasContentAccess ? () {
+        Navigator.push(context, MessageListPage.buildRoute(
+          context: context,
+          narrow: ChannelNarrow(channel.streamId)));
+      } : null,


nit: put the short "null" case first, and the longer case after:

Suggested change

onTap: hasContentAccess ? () {

Navigator.push(context, MessageListPage.buildRoute(

context: context,

narrow: ChannelNarrow(channel.streamId)));

} : null,

onTap: !hasContentAccess ? null : () {

Navigator.push(context, MessageListPage.buildRoute(

context: context,

narrow: ChannelNarrow(channel.streamId)));

},

That way the reader isn't "kept in suspense" wondering how the false case is handled while they're reading through the true case.

separate nit: format more compactly, and similar to other places; e.g. see call sites of MessageListPage.buildRoute (or other "buildRoute" methods):

Suggested change

onTap: hasContentAccess ? () {

Navigator.push(context, MessageListPage.buildRoute(

context: context,

narrow: ChannelNarrow(channel.streamId)));

} : null,

onTap: !hasContentAccess ? null : () => Navigator.push(context,

MessageListPage.buildRoute(context: context,

narrow: ChannelNarrow(channel.streamId))),

gnprice · 2025-10-21T00:00:21Z

lib/widgets/all_channels.dart

+        child: SizedBox(
+          height: 38,


Hmm, I just noticed this part — a fixed height like this can't be right.

Try setting your system's font size setting to larger text, and you'll see why.

This is also too short. Touch targets should be at least 44px high so it's not too difficult to tap the right one. In your screenshots, these rows are getting shorter; they should stay the same height unless there's a clear reason we're choosing to change the height.

gnprice added maintainer review PR ready for review by Zulip maintainers integration review Added by maintainers when PR may be ready for integration and removed maintainer review PR ready for review by Zulip maintainers labels Oct 15, 2025

gnprice reviewed Oct 15, 2025

View reviewed changes

gnprice mentioned this pull request Oct 16, 2025

docs: Request showing touches/clicks in screencast videos zulip/zulip#36287

Merged

chungwwei requested a review from gnprice October 16, 2025 12:01

chungwwei force-pushed the all-channels-ui branch 3 times, most recently from 1a64215 to a3105d0 Compare October 17, 2025 16:58

chungwwei force-pushed the all-channels-ui branch 3 times, most recently from 698f215 to 4ae4515 Compare October 18, 2025 12:24

chungwwei added 2 commits October 18, 2025 14:10

chungwwei force-pushed the all-channels-ui branch from 508fa04 to 173bf47 Compare October 18, 2025 18:12

gnprice reviewed Oct 21, 2025

View reviewed changes

	if (unreadCount > 0)
	MarkChannelAsReadButton(pageContext: pageContext, channelId: channelId),
	if (showTopicListButton)
	TopicListButton(pageContext: pageContext, channelId: channelId),
	if (!isOnChannelFeed)
	ChannelFeedButton(pageContext: pageContext, channelId: channelId),
	CopyChannelLinkButton(channelId: channelId, pageContext: pageContext)

all_channels: Replace three dot menu with long press gesture and add on tap to feed #1915

Are you sure you want to change the base?

all_channels: Replace three dot menu with long press gesture and add on tap to feed #1915

Uh oh!

Conversation

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

Uh oh!

Page View

Long Press View

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gnprice commented Oct 15, 2025

Uh oh!

gnprice commented Oct 17, 2025

Uh oh!

gnprice commented Oct 17, 2025

Uh oh!

gnprice commented Oct 18, 2025

Uh oh!

chungwwei commented Oct 18, 2025

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

chungwwei commented Oct 11, 2025 •

edited

Loading