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

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

action_sheet: Refine button visibility conditions in channel bottom sheet onLongPress

all_channels: Add additional end padding for row item

Fixes #1914

Author: chungwwei

lib/widgets/action_sheet.dart

@@ -451,16 +451,16 @@ void showChannelActionSheet(BuildContext context, {
   final unreadCount = store.unreads.countInChannelNarrow(channelId);
   final channel = store.streams[channelId];
   final isSubscribed = channel is Subscription;
+  final hasContentAccess = channel != null && store.selfHasContentAccess(channel);
   final buttonSections = [
-    if (!isSubscribed
-        && channel != null && store.selfHasContentAccess(channel))
+    if (!isSubscribed && hasContentAccess)
       [SubscribeButton(pageContext: pageContext, channelId: channelId)],
     [
-      if (unreadCount > 0)
+      if (hasContentAccess && unreadCount > 0)
         MarkChannelAsReadButton(pageContext: pageContext, channelId: channelId),
-      if (showTopicListButton)
+      if (hasContentAccess && showTopicListButton)
         TopicListButton(pageContext: pageContext, channelId: channelId),
-      if (!isOnChannelFeed)
+      if (hasContentAccess && !isOnChannelFeed)
         ChannelFeedButton(pageContext: pageContext, channelId: channelId),
       CopyChannelLinkButton(channelId: channelId, pageContext: pageContext)
     ],

lib/widgets/all_channels.dart

@@ -5,11 +5,13 @@ import '../api/route/channels.dart';
 import '../generated/l10n/zulip_localizations.dart';
 import '../log.dart';
 import '../model/channel.dart';
+import '../model/narrow.dart';
 import 'action_sheet.dart';
 import 'actions.dart';
 import 'app_bar.dart';
 import 'button.dart';
 import 'icons.dart';
+import 'message_list.dart';
 import 'page.dart';
 import 'remote_settings.dart';
 import 'store.dart';
@@ -97,27 +99,33 @@ class AllChannelsListEntry extends StatelessWidget {
     final hasContentAccess = store.selfHasContentAccess(channel);
 
     return Padding(
-      padding: EdgeInsetsDirectional.only(start: 8, end: 4),
-      child: Row(spacing: 6, children: [
-        Icon(
-          size: 20,
-          color: colorSwatchFor(context, subscription).iconOnPlainBackground,
-          iconDataForStream(channel)),
-        Expanded(
-          child: Text(
-            style: TextStyle(
-              color: designVariables.textMessage,
-              fontSize: 17,
-              height: 20 / 17,
-            ).merge(weightVariableTextStyle(context, wght: 600)),
-            channel.name)),
-        if (hasContentAccess) _SubscribeToggle(channel: channel),
-        ZulipIconButton(
-          icon: ZulipIcons.more_horizontal,
-          onPressed: () {
-            showChannelActionSheet(context, channelId: channel.streamId);
-          }),
-      ]));
+      padding: EdgeInsetsDirectional.only(start: 8, end: 12),
+      child: GestureDetector(
+        onTap: hasContentAccess ? () {
+          Navigator.push(context, MessageListPage.buildRoute(
+            context: context,
+            narrow: ChannelNarrow(channel.streamId)));
+        } : null,
+        onLongPress: () {
+          showChannelActionSheet(context, channelId: channel.streamId);
+        },
+        child: SizedBox(
+          height: 38,
+          child: Row(spacing: 6, children: [
+            Icon(
+              size: 20,
+              color: colorSwatchFor(context, subscription).iconOnPlainBackground,
+              iconDataForStream(channel)),
+            Expanded(
+              child: Text(
+                style: TextStyle(
+                  color: designVariables.textMessage,
+                  fontSize: 17,
+                  height: 20 / 17,
+                ).merge(weightVariableTextStyle(context, wght: 600)),
+                channel.name)),
+            hasContentAccess ? _SubscribeToggle(channel: channel) : const SizedBox.shrink(),
+          ]))));
   }
 }
 

test/widgets/all_channels_test.dart

@@ -12,6 +12,7 @@ import 'package:zulip/widgets/app_bar.dart';
 import 'package:zulip/widgets/button.dart';
 import 'package:zulip/widgets/home.dart';
 import 'package:zulip/widgets/icons.dart';
+import 'package:zulip/widgets/message_list.dart';
 import 'package:zulip/widgets/page.dart';
 import 'package:zulip/widgets/remote_settings.dart';
 import 'package:zulip/widgets/theme.dart';
@@ -202,21 +203,35 @@ void main() {
       } else {
         check(maybeToggle).isNull();
       }
-
-      check(findInRow(find.byIcon(ZulipIcons.more_horizontal))).findsOne();
     }
   });
 
-  testWidgets('tapping three-dots button opens channel action sheet', (tester) async {
+  testWidgets('open channel action sheet on long press', (tester) async {
     await setupAllChannelsPage(tester, channels: [eg.stream()]);
 
-    await tester.tap(find.byIcon(ZulipIcons.more_horizontal));
+    await tester.longPress(find.byType(AllChannelsListEntry));
     await tester.pump();
     await transitionDurationObserver.pumpPastTransition(tester);
 
     check(find.byType(BottomSheet)).findsOne();
   });
 
+  testWidgets('navigate to channel feed on tap', (tester) async {
+    final channel = eg.stream(name: 'some-channel');
+    await setupAllChannelsPage(tester, channels: [channel]);
+
+    connection.prepare(json: eg.newestGetMessagesResult(
+      foundOldest: true, messages: [eg.streamMessage(stream: channel)]).toJson());
+    await tester.tap(find.byType(AllChannelsListEntry));
+    await tester.pump();
+    await transitionDurationObserver.pumpPastTransition(tester);
+
+    check(find.descendant(
+      of: find.byType(MessageListPage),
+      matching: find.text('some-channel')),
+    ).findsOne();
+  });
+
   testWidgets('use toggle switch to subscribe/unsubscribe', (tester) async {
     final channel = eg.stream();
     await setupAllChannelsPage(tester, channels: [channel]);