action_sheet: Add channel action sheet with mark as read option

Fixes: zulip#1226

Author: chimnayajith

assets/l10n/app_en.arb

@@ -72,6 +72,10 @@
   "@permissionsDeniedReadExternalStorage": {
     "description": "Message for dialog asking the user to grant permissions for external storage read access."
   },
+  "actionSheetOptionMarkChannelAsRead": "Mark channel as read",
+  "@actionSheetOptionMarkChannelAsRead":  {
+    "description": "Label for marking a channel as read."
+  },
   "actionSheetOptionMuteTopic": "Mute topic",
   "@actionSheetOptionMuteTopic":  {
     "description": "Label for muting a topic on action sheet."

lib/generated/l10n/zulip_localizations.dart

@@ -213,6 +213,12 @@ abstract class ZulipLocalizations {
   /// **'To upload files, please grant Zulip additional permissions in Settings.'**
   String get permissionsDeniedReadExternalStorage;
 
+  /// Label for marking a channel as read.
+  ///
+  /// In en, this message translates to:
+  /// **'Mark channel as read'**
+  String get actionSheetOptionMarkChannelAsRead;
+
   /// Label for muting a topic on action sheet.
   ///
   /// In en, this message translates to:

lib/generated/l10n/zulip_localizations_ar.dart

@@ -64,6 +64,9 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   @override
   String get permissionsDeniedReadExternalStorage => 'To upload files, please grant Zulip additional permissions in Settings.';
 
+  @override
+  String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
+
   @override
   String get actionSheetOptionMuteTopic => 'Mute topic';
 

lib/generated/l10n/zulip_localizations_en.dart

@@ -64,6 +64,9 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   @override
   String get permissionsDeniedReadExternalStorage => 'To upload files, please grant Zulip additional permissions in Settings.';
 
+  @override
+  String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
+
   @override
   String get actionSheetOptionMuteTopic => 'Mute topic';
 

lib/generated/l10n/zulip_localizations_ja.dart

@@ -64,6 +64,9 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   @override
   String get permissionsDeniedReadExternalStorage => 'To upload files, please grant Zulip additional permissions in Settings.';
 
+  @override
+  String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
+
   @override
   String get actionSheetOptionMuteTopic => 'Mute topic';
 

lib/generated/l10n/zulip_localizations_nb.dart

@@ -64,6 +64,9 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
   @override
   String get permissionsDeniedReadExternalStorage => 'To upload files, please grant Zulip additional permissions in Settings.';
 
+  @override
+  String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
+
   @override
   String get actionSheetOptionMuteTopic => 'Mute topic';
 

lib/generated/l10n/zulip_localizations_pl.dart

@@ -64,6 +64,9 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
   @override
   String get permissionsDeniedReadExternalStorage => 'Aby odebrać pliki Zulip musi uzyskać dodatkowe uprawnienia w Ustawieniach.';
 
+  @override
+  String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
+
   @override
   String get actionSheetOptionMuteTopic => 'Wycisz wątek';
 

lib/generated/l10n/zulip_localizations_ru.dart

@@ -64,6 +64,9 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
   @override
   String get permissionsDeniedReadExternalStorage => 'Для загрузки файлов, пожалуйста, предоставьте Zulip дополнительные разрешения в настройках.';
 
+  @override
+  String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
+
   @override
   String get actionSheetOptionMuteTopic => 'Отключить тему';
 

lib/generated/l10n/zulip_localizations_sk.dart

@@ -64,6 +64,9 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
   @override
   String get permissionsDeniedReadExternalStorage => 'To upload files, please grant Zulip additional permissions in Settings.';
 
+  @override
+  String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
+
   @override
   String get actionSheetOptionMuteTopic => 'Stlmiť tému';
 

lib/widgets/action_sheet.dart

@@ -162,6 +162,67 @@ class ActionSheetCancelButton extends StatelessWidget {
   }
 }
 
+/// Show a sheet of actions you can take on a channel.
+void showChannelActionSheet(BuildContext context, {
+  required int streamId,
+}) {
+  final store = PerAccountStoreWidget.of(context);
+
+  final optionButtons = <ActionSheetMenuItemButton>[];
+  final unreadCount = store.unreads.countInChannelNarrow(streamId);
+  if(unreadCount > 0){
+    optionButtons.add(
+      MarkChannelAsReadButton(
+        streamId: streamId,
+        pageContext: context,
+        )
+    );
+  }
+   if (optionButtons.isEmpty) {
+    // TODO(a11y): This case makes a no-op gesture handler; as a consequence,
+    //   we're presenting some UI (to people who use screen-reader software) as
+    //   though it offers a gesture interaction that it doesn't meaningfully
+    //   offer, which is confusing. The solution here is probably to remove this
+    //   is-empty case by having at least one button that's always present,
+    //   such as "copy link to topic".
+    return;
+  }
+  _showActionSheet(context, optionButtons: optionButtons);
+}
+
+class MarkChannelAsReadButton extends ActionSheetMenuItemButton {
+  const MarkChannelAsReadButton({
+    super.key,
+    required this.streamId,
+    required super.pageContext
+  });
+  final int streamId;
+
+  @override
+  IconData get icon => ZulipIcons.message_checked;
+
+  @override
+  String label(ZulipLocalizations zulipLocalizations) {
+    return zulipLocalizations.actionSheetOptionMarkChannelAsRead;
+  }
+
+  @override
+  void onPressed() async {
+    try {
+      final narrow = ChannelNarrow(streamId);
+      await markNarrowAsRead(pageContext, narrow);
+    } catch (e) {
+      if (!pageContext.mounted) return;
+
+      showErrorDialog(
+        context: pageContext,
+        title: "Failed to mark channel as read",
+        message: e.toString(),
+      );
+    }
+  }
+}
+
 /// Show a sheet of actions you can take on a topic.
 void showTopicActionSheet(BuildContext context, {
   required int channelId,

lib/widgets/inbox.dart

@@ -254,6 +254,7 @@ abstract class _HeaderItem extends StatelessWidget {
   }
 
   Future<void> onRowTap();
+  Future<void> onLongPress();
 
   @override
   Widget build(BuildContext context) {
@@ -270,6 +271,7 @@ abstract class _HeaderItem extends StatelessWidget {
         //   But that's in tension with the Figma, which gives these header rows
         //   40px min height.
         onTap: onCollapseButtonTap,
+        onLongPress: onLongPress,
         child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
           Padding(padding: const EdgeInsets.all(10),
             child: Icon(size: 20, color: designVariables.sectionCollapseIcon,
@@ -327,6 +329,8 @@ class _AllDmsHeaderItem extends _HeaderItem {
     pageState.allDmsCollapsed = !collapsed;
   }
   @override Future<void> onRowTap() => onCollapseButtonTap(); // TODO open all-DMs narrow?
+
+  @override Future<void> onLongPress() async {}
 }
 
 class _AllDmsSection extends StatelessWidget {
@@ -456,6 +460,11 @@ class _StreamHeaderItem extends _HeaderItem {
     }
   }
   @override Future<void> onRowTap() => onCollapseButtonTap(); // TODO open channel narrow
+
+  @override
+  Future<void> onLongPress() async {
+    showChannelActionSheet(sectionContext, streamId: subscription.streamId);
+  }
 }
 
 class _StreamSection extends StatelessWidget {

lib/widgets/subscription_list.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import '../api/model/model.dart';
 import '../model/narrow.dart';
 import '../model/unreads.dart';
+import 'action_sheet.dart';
 import 'icons.dart';
 import 'message_list.dart';
 import 'store.dart';
@@ -230,6 +231,7 @@ class SubscriptionItem extends StatelessWidget {
             MessageListPage.buildRoute(context: context,
               narrow: ChannelNarrow(subscription.streamId)));
         },
+        onLongPress: () => showChannelActionSheet(context, streamId: subscription.streamId),
         child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
           const SizedBox(width: 16),
           Padding(

test/widgets/action_sheet_test.dart

@@ -30,6 +30,7 @@ import 'package:zulip/widgets/icons.dart';
 import 'package:zulip/widgets/inbox.dart';
 import 'package:zulip/widgets/message_list.dart';
 import 'package:share_plus_platform_interface/method_channel/method_channel_share.dart';
+import 'package:zulip/widgets/subscription_list.dart';
 import '../api/fake_api.dart';
 
 import '../example_data.dart' as eg;
@@ -1084,6 +1085,120 @@ void main() {
       });
     });
   });
+  group('channel action sheet', () {
+    late ZulipStream someChannel;
+    late PerAccountStore store;
+
+    Future<void> setupToChannelActionSheet(WidgetTester tester, {
+      required ZulipStream channel,
+      required UnreadMessagesSnapshot unreadMsgs,
+    }) async {
+      someChannel = channel;
+      addTearDown(testBinding.reset);
+
+      await testBinding.globalStore.add(eg.selfAccount, eg.initialSnapshot(
+        realmUsers: [eg.selfUser, eg.otherUser],
+        streams: [someChannel],
+        subscriptions: [eg.subscription(someChannel)],
+        unreadMsgs: unreadMsgs));
+      store = await testBinding.globalStore.perAccount(eg.selfAccount.id);
+      connection = store.connection as FakeApiConnection;
+    }
+
+    Future<void> showFromInbox(WidgetTester tester) async {
+      await tester.pumpWidget(TestZulipApp(accountId: eg.selfAccount.id,
+        child: const HomePage()));
+      await tester.pumpAndSettle();
+      check(find.byType(InboxPageBody)).findsOne();
+
+      await tester.pump();
+      await tester.longPress(find.text(someChannel.name).hitTestable());
+      await tester.pump(const Duration(milliseconds: 250));
+    }
+
+    Future<void> showFromSubscriptionList(WidgetTester tester) async {
+      await tester.pumpWidget(TestZulipApp(accountId: eg.selfAccount.id,
+        child: const SubscriptionListPageBody()));
+      await tester.pumpAndSettle();
+      check(find.byType(SubscriptionListPageBody)).findsOne();
+
+      await tester.pump();
+      await tester.longPress(find.text(someChannel.name).hitTestable());
+      await tester.pump(const Duration(milliseconds: 250));
+    }
+
+    final actionSheetFinder = find.byType(BottomSheet);
+    Finder findButtonForLabel(String label) =>
+      find.descendant(of: actionSheetFinder, matching: find.text(label));
+
+    void checkActionSheet() {
+      check(actionSheetFinder).findsOne();
+    }
+
+    void checkButton(String label) {
+      check(findButtonForLabel(label)).findsOne();
+    }
+
+    group('showChannelActionSheet', () {
+      testWidgets('button shown when channel has unread messages', (tester) async {
+        final stream = eg.stream();
+        final unreadMsgs = eg.unreadMsgs(channels: [
+          eg.unreadChannelMsgs(streamId: stream.streamId, topic: 'topic', unreadMessageIds: [1, 2])
+        ]);
+
+        await setupToChannelActionSheet(tester,
+          channel: stream,
+          unreadMsgs: unreadMsgs);
+        await showFromInbox(tester);
+
+        checkActionSheet();
+        checkButton('Mark channel as read');
+      });
+
+      testWidgets('show from inbox with unread messages', (tester) async {
+        final stream = eg.stream();
+        final unreadMsgs = eg.unreadMsgs(channels: [
+          eg.unreadChannelMsgs(streamId: stream.streamId, topic: 'topic', unreadMessageIds: [1, 2])
+        ]);
+
+        await setupToChannelActionSheet(tester,
+          channel: stream,
+          unreadMsgs: unreadMsgs);
+        await showFromInbox(tester);
+
+        checkActionSheet();
+        checkButton('Mark channel as read');
+      });
+
+      testWidgets('show from subscription list', (tester) async {
+        final stream = eg.stream();
+        final unreadMsgs = eg.unreadMsgs(channels: [
+          eg.unreadChannelMsgs(streamId: stream.streamId, topic: 'topic', unreadMessageIds: [1])
+        ]);
+
+        await setupToChannelActionSheet(tester,
+          channel: stream,
+          unreadMsgs: unreadMsgs);
+        await showFromSubscriptionList(tester);
+
+        checkActionSheet();
+        checkButton('Mark channel as read');
+      });
+
+      // This should be changed when default item is added to the sheet
+      testWidgets('show from subscription list with no unread messages does not show action sheet', (tester) async {
+        final stream = eg.stream();
+        final unreadMsgs = eg.unreadMsgs();
+
+        await setupToChannelActionSheet(tester,
+          channel: stream,
+          unreadMsgs: unreadMsgs);
+        await showFromSubscriptionList(tester);
+
+        check(actionSheetFinder).findsNothing();
+      });
+    });
+  });
 }
 
 extension UnicodeEmojiWidgetChecks on Subject<UnicodeEmojiWidget> {