TW-613: Update icon and title when select multi

assets/l10n/intl_en.arb

@@ -2723,5 +2723,7 @@
     "markThisMessageAsUnRead": "Mark this message as unread",
     "muteThisMessage": "Mute this message",
     "unmuteThisMessage": "Unmute this message",
-    "read": "Read"
+    "read": "Read",
+    "unread": "Unread",
+    "unmute": "Unmute"
 }

lib/pages/chat_list/chat_list.dart

@@ -300,19 +300,26 @@ class ChatListController extends State<ChatList>
   void toggleSelectMode() {
     selectModeNotifier.value =
         isSelectMode ? SelectMode.normal : SelectMode.select;
-    clearSelection();
+    _handleClearSelectionItem();
   }
 
-  void clearSelection() {
+  void _handleClearSelectionItem() {
     conversationSelectionNotifier.value = [];
   }
 
-  void toggleUnread() async {
+  void onClickClearSelection() {
+    if (conversationSelectionNotifier.value.isNotEmpty) {
+      _handleClearSelectionItem();
+    } else {
+      toggleSelectMode();
+    }
+  }
+
+  Future<void> toggleUnread() async {
     await showFutureLoadingDialog(
       context: context,
       future: () async {
         final markUnread = anySelectedRoomNotMarkedUnread;
-        final client = Matrix.of(context).client;
         for (final conversation in conversationSelectionNotifier.value) {
           final room = client.getRoomById(conversation.roomId)!;
           if (room.markedUnread == markUnread) continue;
@@ -322,12 +329,11 @@ class ChatListController extends State<ChatList>
     );
   }
 
-  void toggleFavouriteRoom() async {
+  Future<void> toggleFavouriteRoom() async {
     await showFutureLoadingDialog(
       context: context,
       future: () async {
         final makeFavorite = anySelectedRoomNotFavorite;
-        final client = Matrix.of(context).client;
         for (final conversation in conversationSelectionNotifier.value) {
           final room = client.getRoomById(conversation.roomId)!;
           if (room.isFavourite == makeFavorite) continue;
@@ -339,14 +345,13 @@ class ChatListController extends State<ChatList>
     );
   }
 
-  void toggleMuted() async {
+  Future<void> toggleMuted() async {
     await showFutureLoadingDialog(
       context: context,
       future: () async {
         final newState = anySelectedRoomNotMuted
             ? PushRuleState.mentionsOnly
             : PushRuleState.notify;
-        final client = Matrix.of(context).client;
         for (final conversation in conversationSelectionNotifier.value) {
           final room = client.getRoomById(conversation.roomId)!;
           if (room.pushRuleState == newState) continue;
@@ -399,7 +404,6 @@ class ChatListController extends State<ChatList>
   }
 
   Future<void> _archiveSelectedRooms() async {
-    final client = Matrix.of(context).client;
     while (conversationSelectionNotifier.value.isNotEmpty) {
       final conversation = conversationSelectionNotifier.value.first;
       try {
@@ -481,7 +485,6 @@ class ChatListController extends State<ChatList>
   bool waitForFirstSync = false;
 
   Future<void> _waitForFirstSync() async {
-    final client = Matrix.of(context).client;
     await client.roomsLoading;
     await client.accountDataLoading;
     if (client.prevBatch == null) {
@@ -613,15 +616,15 @@ class ChatListController extends State<ChatList>
   ) async {
     switch (chatListBottomNavigatorBar) {
       case ChatListSelectionActions.read:
-        toggleUnread();
+        await toggleUnread();
         toggleSelectMode();
         return;
       case ChatListSelectionActions.mute:
-        toggleMuted();
+        await toggleMuted();
         toggleSelectMode();
         return;
       case ChatListSelectionActions.pin:
-        toggleFavouriteRoom();
+        await toggleFavouriteRoom();
         toggleSelectMode();
         return;
       case ChatListSelectionActions.more:
@@ -757,6 +760,90 @@ class ChatListController extends State<ChatList>
     }
   }
 
+  List<ChatListSelectionActions> _getNavigationDestinations() {
+    return [
+      ChatListSelectionActions.read,
+      ChatListSelectionActions.mute,
+      ChatListSelectionActions.pin,
+      ChatListSelectionActions.more,
+    ];
+  }
+
+  List<Widget> bottomNavigationActionsWidget({
+    required EdgeInsetsDirectional paddingIcon,
+    double? width,
+    double? iconSize,
+  }) {
+    return _getNavigationDestinations().map((item) {
+      return InkWell(
+        onTap: () => _onTapBottomNavigation(item),
+        child: SizedBox(
+          width: width,
+          child: Column(
+            children: [
+              Padding(
+                padding: paddingIcon,
+                child: Icon(
+                  _getIconBottomNavigation(item),
+                  size: iconSize,
+                  color: Theme.of(context).colorScheme.primary,
+                ),
+              ),
+              Text(
+                _getTitleBottomNavigation(item),
+                style: Theme.of(context).textTheme.labelMedium?.copyWith(
+                      color: Theme.of(context).colorScheme.primary,
+                    ),
+              ),
+            ],
+          ),
+        ),
+      );
+    }).toList();
+  }
+
+  String _getTitleBottomNavigation(
+    ChatListSelectionActions actionBottomNavigation,
+  ) {
+    switch (actionBottomNavigation) {
+      case ChatListSelectionActions.read:
+        if (anySelectedRoomNotMarkedUnread) {
+          return L10n.of(context)!.unread;
+        } else {
+          return L10n.of(context)!.read;
+        }
+      case ChatListSelectionActions.mute:
+        if (anySelectedRoomNotMuted) {
+          return L10n.of(context)!.mute;
+        } else {
+          return L10n.of(context)!.unmute;
+        }
+      case ChatListSelectionActions.pin:
+        if (anySelectedRoomNotFavorite) {
+          return L10n.of(context)!.pin;
+        } else {
+          return L10n.of(context)!.unpin;
+        }
+      case ChatListSelectionActions.more:
+        return L10n.of(context)!.more;
+    }
+  }
+
+  IconData _getIconBottomNavigation(
+    ChatListSelectionActions actionBottomNavigation,
+  ) {
+    switch (actionBottomNavigation) {
+      case ChatListSelectionActions.read:
+        return Icons.mark_email_read;
+      case ChatListSelectionActions.mute:
+        return Icons.notifications_off;
+      case ChatListSelectionActions.pin:
+        return Icons.push_pin;
+      case ChatListSelectionActions.more:
+        return Icons.more_vert;
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return ChatListView(

lib/pages/chat_list/chat_list_bottom_navigator.dart

@@ -6,13 +6,13 @@ import 'package:flutter/material.dart';
 typedef ChatListBottomNavigatorBarIcon = Function(ChatListSelectionActions);
 
 class ChatListBottomNavigator extends StatelessWidget {
+  final List<Widget> bottomNavigationActionsWidget;
+
   const ChatListBottomNavigator({
     super.key,
-    required this.onTapBottomNavigation,
+    required this.bottomNavigationActionsWidget,
   });
 
-  final ChatListBottomNavigatorBarIcon onTapBottomNavigation;
-
   @override
   Widget build(BuildContext context) {
     return Container(
@@ -21,44 +21,8 @@ class ChatListBottomNavigator extends StatelessWidget {
       color: Theme.of(context).colorScheme.surface,
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        children: _getNavigationDestinations.map(
-          (item) {
-            return InkWell(
-              onTap: () => onTapBottomNavigation(item),
-              child: SizedBox(
-                width: ChatListBottomNavigatorStyle.width,
-                child: Column(
-                  children: [
-                    Padding(
-                      padding: ChatListBottomNavigatorStyle.paddingIcon,
-                      child: Icon(
-                        item.getIcon(context),
-                        size: ChatListBottomNavigatorStyle.iconSize,
-                        color: Theme.of(context).colorScheme.primary,
-                      ),
-                    ),
-                    Text(
-                      item.getTitleForMobile(context),
-                      style: Theme.of(context).textTheme.labelMedium?.copyWith(
-                            color: Theme.of(context).colorScheme.primary,
-                          ),
-                    ),
-                  ],
-                ),
-              ),
-            );
-          },
-        ).toList(),
+        children: bottomNavigationActionsWidget,
       ),
     );
   }
-
-  List<ChatListSelectionActions> get _getNavigationDestinations {
-    return [
-      ChatListSelectionActions.read,
-      ChatListSelectionActions.mute,
-      ChatListSelectionActions.pin,
-      ChatListSelectionActions.more,
-    ];
-  }
 }

lib/pages/chat_list/chat_list_view.dart

@@ -1,6 +1,7 @@
 import 'package:fluffychat/pages/chat_list/chat_list.dart';
 import 'package:fluffychat/pages/chat_list/chat_list_body_stream.dart';
 import 'package:fluffychat/pages/chat_list/chat_list_bottom_navigator.dart';
+import 'package:fluffychat/pages/chat_list/chat_list_bottom_navigator_style.dart';
 import 'package:fluffychat/pages/chat_list/chat_list_header.dart';
 import 'package:fluffychat/pages/chat_list/chat_list_view_style.dart';
 import 'package:fluffychat/widgets/twake_components/twake_fab.dart';
@@ -15,7 +16,6 @@ class ChatListView extends StatelessWidget {
   final Widget? bottomNavigationBar;
   final VoidCallback? onOpenSearchPage;
   final ChatListBottomNavigatorBarIcon onTapBottomNavigation;
-
   const ChatListView({
     Key? key,
     required this.controller,
@@ -42,15 +42,20 @@ class ChatListView extends StatelessWidget {
           onOpenSearchPage: onOpenSearchPage,
           conversationSelectionNotifier:
               controller.conversationSelectionNotifier,
-          onClearSelection: controller.clearSelection,
+          onClearSelection: controller.onClickClearSelection,
         ),
       ),
       bottomNavigationBar: ValueListenableBuilder(
-        valueListenable: controller.selectModeNotifier,
-        builder: (context, _, __) {
-          if (controller.isSelectMode) {
+        valueListenable: controller.conversationSelectionNotifier,
+        builder: (context, conversationSelection, __) {
+          if (conversationSelection.isNotEmpty) {
             return ChatListBottomNavigator(
-              onTapBottomNavigation: onTapBottomNavigation,
+              bottomNavigationActionsWidget:
+                  controller.bottomNavigationActionsWidget(
+                paddingIcon: ChatListBottomNavigatorStyle.paddingIcon,
+                iconSize: ChatListBottomNavigatorStyle.iconSize,
+                width: ChatListBottomNavigatorStyle.width,
+              ),
             );
           } else {
             return bottomNavigationBar ?? const SizedBox();

lib/presentation/enum/chat_list/chat_list_enum.dart

@@ -1,6 +1,3 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_gen/gen_l10n/l10n.dart';
-
 enum SelectMode {
   normal,
   select,
@@ -21,47 +18,4 @@ enum ActiveFilter {
   spaces,
 }
 
-enum ChatListSelectionActions {
-  read,
-  mute,
-  pin,
-  more;
-
-  String getTitleForMobile(BuildContext context) {
-    switch (this) {
-      case ChatListSelectionActions.read:
-        return L10n.of(context)!.contacts;
-      case ChatListSelectionActions.mute:
-        return L10n.of(context)!.mute;
-      case ChatListSelectionActions.pin:
-        return L10n.of(context)!.pin;
-      case ChatListSelectionActions.more:
-        return L10n.of(context)!.more;
-    }
-  }
-
-  IconData getIcon(
-    BuildContext context, {
-    bool isMobile = true,
-  }) {
-    switch (this) {
-      case ChatListSelectionActions.read:
-        if (isMobile) {
-          return Icons.mark_email_read;
-        } else {
-          return Icons.mark_chat_read;
-        }
-      case ChatListSelectionActions.mute:
-        if (isMobile) {
-          return Icons.notifications_off;
-        } else {
-          return Icons.volume_off;
-        }
-
-      case ChatListSelectionActions.pin:
-        return Icons.push_pin;
-      case ChatListSelectionActions.more:
-        return Icons.more_vert;
-    }
-  }
-}
+enum ChatListSelectionActions { read, mute, pin, more }