action_sheet: Add channel action sheet with mark as read option

chimnayajith · chimnayajith · commit 72ac73de0f98 · 2025-02-06T20:06:24.000+05:30
Fixes: zulip#1226
diff --git a/assets/l10n/app_en.arb b/assets/l10n/app_en.arb
@@ -76,6 +76,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."
@@ -245,6 +249,10 @@
       "url": {"type":  "String", "example":  "https://chat.example.com"}
     }
   },
+  "errorMarkChannelAsReadFailed": "Failed to mark channel as read",
+  "@errorMarkChannelAsReadFailed": {
+    "description": "Error message when marking a channel as read."
+  },
   "errorMuteTopicFailed": "Failed to mute topic",
   "@errorMuteTopicFailed": {
     "description": "Error message when muting a topic failed."
diff --git a/lib/generated/l10n/zulip_localizations.dart b/lib/generated/l10n/zulip_localizations.dart
@@ -219,6 +219,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:
@@ -423,6 +429,12 @@ abstract class ZulipLocalizations {
   /// **'Link could not be opened: {url}'**
   String errorCouldNotOpenLink(String url);
 
+  /// Error message when marking a channel as read.
+  ///
+  /// In en, this message translates to:
+  /// **'Failed to mark channel as read'**
+  String get errorMarkChannelAsReadFailed;
+
   /// Error message when muting a topic failed.
   ///
   /// In en, this message translates to:
diff --git a/lib/generated/l10n/zulip_localizations_ar.dart b/lib/generated/l10n/zulip_localizations_ar.dart
@@ -67,6 +67,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';
 
@@ -199,6 +202,9 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
     return 'Link could not be opened: $url';
   }
 
+  @override
+  String get errorMarkChannelAsReadFailed => 'Failed to mark channel as read';
+
   @override
   String get errorMuteTopicFailed => 'Failed to mute topic';
 
diff --git a/lib/generated/l10n/zulip_localizations_en.dart b/lib/generated/l10n/zulip_localizations_en.dart
@@ -67,6 +67,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';
 
@@ -199,6 +202,9 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
     return 'Link could not be opened: $url';
   }
 
+  @override
+  String get errorMarkChannelAsReadFailed => 'Failed to mark channel as read';
+
   @override
   String get errorMuteTopicFailed => 'Failed to mute topic';
 
diff --git a/lib/generated/l10n/zulip_localizations_ja.dart b/lib/generated/l10n/zulip_localizations_ja.dart
@@ -67,6 +67,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';
 
@@ -199,6 +202,9 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
     return 'Link could not be opened: $url';
   }
 
+  @override
+  String get errorMarkChannelAsReadFailed => 'Failed to mark channel as read';
+
   @override
   String get errorMuteTopicFailed => 'Failed to mute topic';
 
diff --git a/lib/generated/l10n/zulip_localizations_nb.dart b/lib/generated/l10n/zulip_localizations_nb.dart
@@ -67,6 +67,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';
 
@@ -199,6 +202,9 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
     return 'Link could not be opened: $url';
   }
 
+  @override
+  String get errorMarkChannelAsReadFailed => 'Failed to mark channel as read';
+
   @override
   String get errorMuteTopicFailed => 'Failed to mute topic';
 
diff --git a/lib/generated/l10n/zulip_localizations_pl.dart b/lib/generated/l10n/zulip_localizations_pl.dart
@@ -67,6 +67,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';
 
@@ -199,6 +202,9 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
     return 'Link could not be opened: $url';
   }
 
+  @override
+  String get errorMarkChannelAsReadFailed => 'Failed to mark channel as read';
+
   @override
   String get errorMuteTopicFailed => 'Wyciszenie bez powodzenia';
 
diff --git a/lib/generated/l10n/zulip_localizations_ru.dart b/lib/generated/l10n/zulip_localizations_ru.dart
@@ -67,6 +67,9 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
   @override
   String get permissionsDeniedReadExternalStorage => 'Для загрузки файлов, пожалуйста, предоставьте Zulip дополнительные разрешения в настройках.';
 
+  @override
+  String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
+
   @override
   String get actionSheetOptionMuteTopic => 'Отключить тему';
 
@@ -199,6 +202,9 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
     return 'Link could not be opened: $url';
   }
 
+  @override
+  String get errorMarkChannelAsReadFailed => 'Failed to mark channel as read';
+
   @override
   String get errorMuteTopicFailed => 'Не удалось отключить тему';
 
diff --git a/lib/generated/l10n/zulip_localizations_sk.dart b/lib/generated/l10n/zulip_localizations_sk.dart
@@ -67,6 +67,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';
 
@@ -199,6 +202,9 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
     return 'Link could not be opened: $url';
   }
 
+  @override
+  String get errorMarkChannelAsReadFailed => 'Failed to mark channel as read';
+
   @override
   String get errorMuteTopicFailed => 'Nepodarilo sa ztíšiť tému';
 
diff --git a/lib/widgets/action_sheet.dart b/lib/widgets/action_sheet.dart
@@ -162,6 +162,58 @@ 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 channel".
+    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 {
+    final narrow = ChannelNarrow(streamId);
+    await ZulipAction.markNarrowAsRead(pageContext, narrow);
+  }
+}
+
 /// Show a sheet of actions you can take on a topic.
 void showTopicActionSheet(BuildContext context, {
   required int channelId,
diff --git a/lib/widgets/inbox.dart b/lib/widgets/inbox.dart
@@ -255,6 +255,7 @@ abstract class _HeaderItem extends StatelessWidget {
   }
 
   Future<void> onRowTap();
+  Future<void> onLongPress();
 
   @override
   Widget build(BuildContext context) {
@@ -272,6 +273,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,
@@ -330,6 +332,12 @@ class _AllDmsHeaderItem extends _HeaderItem {
     pageState.allDmsCollapsed = !collapsed;
   }
   @override Future<void> onRowTap() => onCollapseButtonTap(); // TODO open all-DMs narrow?
+
+  @override
+  Future<void> onLongPress() async {
+    // TODO(#1272) action sheet for DM conversation
+    return;
+  }
 }
 
 class _AllDmsSection extends StatelessWidget {
@@ -464,6 +472,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 {
diff --git a/lib/widgets/subscription_list.dart b/lib/widgets/subscription_list.dart
@@ -4,6 +4,7 @@ import '../api/model/model.dart';
 import '../generated/l10n/zulip_localizations.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(
diff --git a/test/widgets/action_sheet_test.dart b/test/widgets/action_sheet_test.dart
