TF-3759 Update style popup context menu for filter message option on thread view

Signed-off-by: dab246 <tdvu@linagora.com>

lib/features/base/model/popup_menu_item_action.dart

@@ -30,7 +30,29 @@ mixin OptionalPopupIcon {
   double get actionIconSize => 20.0;
 }
 
-abstract class PopupMenuItemActionRequiredIcon<T>
+mixin OptionalPopupSelectedIcon<T> {
-    extends PopupMenuItemAction<T> with OptionalPopupIcon {
+  String get selectedIcon;
+
+  Color get selectedIconColor => AppColor.primaryMain;
+
+  double get selectedIconSize => 16.0;
+}
+
+abstract class PopupMenuItemActionRequiredIcon<T> extends PopupMenuItemAction<T>
+    with OptionalPopupIcon {
   PopupMenuItemActionRequiredIcon(super.action);
-}
+}
+
+abstract class PopupMenuItemActionRequiredSelectedIcon<T>
+    extends PopupMenuItemAction<T> with OptionalPopupSelectedIcon<T> {
+  final T? selectedAction;
+
+  PopupMenuItemActionRequiredSelectedIcon(super.action, this.selectedAction);
+}
+
+abstract class PopupMenuItemActionRequiredFull<T> extends PopupMenuItemAction<T>
+    with OptionalPopupIcon, OptionalPopupSelectedIcon<T> {
+  final T selectedAction;
+
+  PopupMenuItemActionRequiredFull(super.action, this.selectedAction);
+}

lib/features/base/widget/popup_menu/popup_menu_item_action_widget.dart

@@ -18,6 +18,8 @@ class PopupMenuItemActionWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     Widget? iconWidget;
+    Widget? selectedIconWidget;
+    bool isSelected = false;
 
     if (menuAction is PopupMenuItemActionRequiredIcon) {
       final specificMenuAction = menuAction as PopupMenuItemActionRequiredIcon;
@@ -31,6 +33,42 @@ class PopupMenuItemActionWidget extends StatelessWidget {
           fit: BoxFit.fill,
         ),
       );
+    } else if (menuAction is PopupMenuItemActionRequiredSelectedIcon) {
+      final specificMenuAction = menuAction as PopupMenuItemActionRequiredSelectedIcon;
+      selectedIconWidget = Padding(
+        padding: const EdgeInsetsDirectional.only(start: 16),
+        child: SvgPicture.asset(
+          specificMenuAction.selectedIcon,
+          width: specificMenuAction.selectedIconSize,
+          height: specificMenuAction.selectedIconSize,
+          colorFilter: specificMenuAction.selectedIconColor.asFilter(),
+          fit: BoxFit.fill,
+        ),
+      );
+      isSelected = specificMenuAction.selectedAction == menuAction.action;
+    } else if (menuAction is PopupMenuItemActionRequiredFull) {
+      final specificMenuAction = menuAction as PopupMenuItemActionRequiredFull;
+      iconWidget = Padding(
+        padding: const EdgeInsetsDirectional.only(end: 16),
+        child: SvgPicture.asset(
+          specificMenuAction.actionIcon,
+          width: specificMenuAction.actionIconSize,
+          height: specificMenuAction.actionIconSize,
+          colorFilter: specificMenuAction.actionIconColor.asFilter(),
+          fit: BoxFit.fill,
+        ),
+      );
+      selectedIconWidget = Padding(
+        padding: const EdgeInsetsDirectional.only(start: 16),
+        child: SvgPicture.asset(
+          specificMenuAction.selectedIcon,
+          width: specificMenuAction.selectedIconSize,
+          height: specificMenuAction.selectedIconSize,
+          colorFilter: specificMenuAction.selectedIconColor.asFilter(),
+          fit: BoxFit.fill,
+        ),
+      );
+      isSelected = specificMenuAction.selectedAction == menuAction.action;
     }
 
     return PointerInterceptor(
@@ -55,6 +93,8 @@ class PopupMenuItemActionWidget extends StatelessWidget {
                     overflow: TextOverflow.ellipsis,
                   ),
                 ),
+                if (isSelected && selectedIconWidget != null)
+                  selectedIconWidget,
               ],
             ),
           ),

lib/features/thread/presentation/extensions/handle_open_context_menu_filter_email_action_extension.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/features/base/widget/popup_menu/popup_menu_item_action_widget.dart';
+import 'package:tmail_ui_user/features/thread/domain/model/filter_message_option.dart';
+import 'package:tmail_ui_user/features/thread/presentation/model/popup_menu_item_filter_message_action.dart';
+import 'package:tmail_ui_user/features/thread/presentation/thread_controller.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/main/routes/route_navigation.dart';
+
+extension HandleOpenContextMenuFilterEmailActionExtension on ThreadController {
+  void handleOpenContextMenuFilterEmailAction(
+    BuildContext context,
+    RelativeRect position,
+    FilterMessageOption selectedFilterOption,
+  ) {
+    final popupMenuItems = [
+      FilterMessageOption.attachments,
+      FilterMessageOption.unread,
+      FilterMessageOption.starred,
+    ].map((filterOption) {
+      return PopupMenuItem(
+        padding: EdgeInsets.zero,
+        child: PopupMenuItemActionWidget(
+          menuAction: PopupMenuItemFilterMessageAction(
+            filterOption,
+            selectedFilterOption,
+            AppLocalizations.of(context),
+            imagePaths,
+          ),
+          menuActionClick: (menuAction) {
+            popBack();
+            filterMessagesAction(menuAction.action);
+          },
+        ),
+      );
+    }).toList();
+
+    openPopupMenuAction(context, position, popupMenuItems);
+  }
+}

lib/features/thread/presentation/model/popup_menu_item_filter_message_action.dart

@@ -0,0 +1,26 @@
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:tmail_ui_user/features/base/model/popup_menu_item_action.dart';
+import 'package:tmail_ui_user/features/thread/domain/model/filter_message_option.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class PopupMenuItemFilterMessageAction
+    extends PopupMenuItemActionRequiredFull<FilterMessageOption> {
+  final AppLocalizations appLocalizations;
+  final ImagePaths imagePaths;
+
+  PopupMenuItemFilterMessageAction(
+    super.action,
+    super.selectedAction,
+    this.appLocalizations,
+    this.imagePaths,
+  );
+
+  @override
+  String get actionIcon => action.getContextMenuIcon(imagePaths);
+
+  @override
+  String get actionName => action.getName(appLocalizations);
+
+  @override
+  String get selectedIcon => imagePaths.icFilterSelected;
+}

lib/features/thread/presentation/thread_view.dart

@@ -29,6 +29,7 @@ import 'package:tmail_ui_user/features/thread/domain/state/empty_spam_folder_sta
 import 'package:tmail_ui_user/features/thread/domain/state/empty_trash_folder_state.dart';
 import 'package:tmail_ui_user/features/thread/domain/state/get_all_email_state.dart';
 import 'package:tmail_ui_user/features/thread/domain/state/search_email_state.dart';
+import 'package:tmail_ui_user/features/thread/presentation/extensions/handle_open_context_menu_filter_email_action_extension.dart';
 import 'package:tmail_ui_user/features/thread/presentation/extensions/handle_pull_to_refresh_list_email_extension.dart';
 import 'package:tmail_ui_user/features/thread/presentation/extensions/handle_select_message_filter_extension.dart';
 import 'package:tmail_ui_user/features/thread/presentation/model/delete_action_type.dart';
@@ -89,15 +90,7 @@ class ThreadView extends GetWidget<ThreadController>
                                 ? (filterOption) => controller.handleSelectMessageFilter(context, filterOption)
                                 : null,
                               onPopupMenuFilterEmailAction: !controller.responsiveUtils.isScreenWithShortestSide(context)
-                                ? (filterOption, position) => controller.openPopupMenuAction(
+                                ? (filterOption, position) => controller.handleOpenContextMenuFilterEmailAction(context, position, filterOption)
-                                    context,
-                                    position,
-                                    popupMenuFilterEmailActionTile(
-                                      context,
-                                      filterOption,
-                                      controller.filterMessagesAction
-                                    )
-                                  )
                                 : null
                             );
                           }),