TW-4308 Add labels for several messages part 2 (#4431)

Add ChooseLabelModal, delegate, and update label UI components

Wire add-labels action across Thread, Search, and Dashboard

core/lib/presentation/views/button/default_close_button_widget.dart

@@ -6,18 +6,21 @@ import 'package:flutter/material.dart';
 class DefaultCloseButtonWidget extends StatelessWidget {
   final String iconClose;
   final VoidCallback onTapActionCallback;
+  final bool isAlignTopEnd;
 
   const DefaultCloseButtonWidget({
     super.key,
     required this.iconClose,
     required this.onTapActionCallback,
+    this.isAlignTopEnd = true,
   });
 
   @override
   Widget build(BuildContext context) {
     return PositionedDirectional(
       top: 4,
-      end: 4,
+      end: isAlignTopEnd ? 4 : null,
+      start: isAlignTopEnd ? null : 4,
       child: TMailButtonWidget.fromIcon(
         icon: iconClose,
         iconSize: 24,

lib/features/email/domain/state/labels/add_list_label_to_list_email_state.dart

@@ -3,21 +3,29 @@ import 'package:core/presentation/state/success.dart';
 import 'package:jmap_dart_client/jmap/mail/email/email.dart';
 import 'package:jmap_dart_client/jmap/mail/email/keyword_identifier.dart';
 
+typedef OnSyncListLabelForListEmail = void Function(
+  List<EmailId> emailIds,
+  List<KeyWordIdentifier> labelKeywords,
+  {bool shouldRemove}
+);
+
 class AddingListLabelsToListEmails extends LoadingState {}
 
 class AddListLabelsToListEmailsSuccess extends UIState {
   final List<EmailId> emailIds;
   final List<KeyWordIdentifier> labelKeywords;
   final List<String> labelDisplays;
+  final OnSyncListLabelForListEmail? onSync;
 
   AddListLabelsToListEmailsSuccess(
     this.emailIds,
     this.labelKeywords,
-    this.labelDisplays,
+    this.labelDisplays, {
-  );
+    this.onSync,
+  });
 
   @override
-  List<Object> get props => [emailIds, labelKeywords, labelDisplays];
+  List<Object?> get props => [emailIds, labelKeywords, labelDisplays];
 }
 
 class AddListLabelsToListEmailsHasSomeFailure
@@ -25,11 +33,12 @@ class AddListLabelsToListEmailsHasSomeFailure
   AddListLabelsToListEmailsHasSomeFailure(
     super.emailIds,
     super.labelKeywords,
-    super.labelDisplays,
+    super.labelDisplays, {
-  );
+    super.onSync,
+  });
 
   @override
-  List<Object> get props => [...super.props, 'hasSomeFailure'];
+  List<Object?> get props => [...super.props, 'hasSomeFailure'];
 }
 
 class AddListLabelsToListEmailsFailure extends FeatureFailure {

lib/features/email/domain/usecases/labels/add_list_label_to_list_emails_interactor.dart

@@ -3,12 +3,11 @@ import 'package:core/presentation/state/success.dart';
 import 'package:dartz/dartz.dart';
 import 'package:jmap_dart_client/jmap/account_id.dart';
 import 'package:jmap_dart_client/jmap/core/session/session.dart';
-import 'package:jmap_dart_client/jmap/mail/email/email.dart';
-import 'package:jmap_dart_client/jmap/mail/email/keyword_identifier.dart';
 import 'package:tmail_ui_user/features/composer/domain/exceptions/set_method_exception.dart';
 import 'package:tmail_ui_user/features/email/domain/exceptions/email_exceptions.dart';
 import 'package:tmail_ui_user/features/email/domain/repository/email_repository.dart';
 import 'package:tmail_ui_user/features/email/domain/state/labels/add_list_label_to_list_email_state.dart';
+import 'package:tmail_ui_user/features/labels/domain/model/add_list_labels_to_list_emails_params.dart';
 
 class AddListLabelToListEmailsInteractor {
   final EmailRepository _emailRepository;
@@ -18,15 +17,13 @@ class AddListLabelToListEmailsInteractor {
   Stream<Either<Failure, Success>> execute(
     Session session,
     AccountId accountId,
-    List<EmailId> emailIds,
+    AddListLabelsToListEmailsParams params,
-    List<KeyWordIdentifier> labelKeywords,
-    List<String> labelDisplays,
   ) async* {
     try {
-      if (emailIds.isEmpty) {
+      if (params.emailIds.isEmpty) {
         yield Left(AddListLabelsToListEmailsFailure(
           exception: EmailIdsSuccessIsEmptyException(),
-          labelDisplays: labelDisplays,
+          labelDisplays: params.labelDisplays,
         ));
         return;
       }
@@ -34,33 +31,35 @@ class AddListLabelToListEmailsInteractor {
       final result = await _emailRepository.addListLabelToListEmail(
         session,
         accountId,
-        emailIds,
+        params.emailIds,
-        labelKeywords,
+        params.labelKeywords,
       );
-      if (emailIds.length == result.emailIdsSuccess.length) {
+      if (params.emailIds.length == result.emailIdsSuccess.length) {
         yield Right(AddListLabelsToListEmailsSuccess(
           result.emailIdsSuccess,
-          labelKeywords,
+          params.labelKeywords,
-          labelDisplays,
+          params.labelDisplays,
+          onSync: params.onSync,
         ));
       } else if (result.emailIdsSuccess.isEmpty) {
         yield Left(AddListLabelsToListEmailsFailure(
           exception: result.mapErrors.isNotEmpty
               ? SetMethodException(result.mapErrors)
               : EmailIdsSuccessIsEmptyException(),
-          labelDisplays: labelDisplays,
+          labelDisplays: params.labelDisplays,
         ));
       } else {
         yield Right(AddListLabelsToListEmailsHasSomeFailure(
           result.emailIdsSuccess,
-          labelKeywords,
+          params.labelKeywords,
-          labelDisplays,
+          params.labelDisplays,
+          onSync: params.onSync,
         ));
       }
     } catch (e) {
       yield Left(AddListLabelsToListEmailsFailure(
         exception: e,
-        labelDisplays: labelDisplays,
+        labelDisplays: params.labelDisplays,
       ));
     }
   }

lib/features/labels/domain/model/add_list_labels_to_list_emails_params.dart

@@ -0,0 +1,25 @@
+import 'package:equatable/equatable.dart';
+import 'package:jmap_dart_client/jmap/mail/email/email.dart';
+import 'package:jmap_dart_client/jmap/mail/email/keyword_identifier.dart';
+import 'package:labels/extensions/list_label_extension.dart';
+import 'package:labels/model/label.dart';
+import 'package:tmail_ui_user/features/email/domain/state/labels/add_list_label_to_list_email_state.dart';
+
+class AddListLabelsToListEmailsParams extends Equatable {
+  final List<Label> labels;
+  final List<EmailId> emailIds;
+  final OnSyncListLabelForListEmail onSync;
+
+  const AddListLabelsToListEmailsParams({
+    required this.labels,
+    required this.emailIds,
+    required this.onSync,
+  });
+
+  List<KeyWordIdentifier> get labelKeywords => labels.keywords;
+
+  List<String> get labelDisplays => labels.displayNameNotNullList;
+
+  @override
+  List<Object?> get props => [labels, emailIds, onSync];
+}

lib/features/labels/presentation/delegates/add_list_label_to_list_emails_delegate.dart

@@ -0,0 +1,93 @@
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/state/failure.dart';
+import 'package:core/presentation/state/success.dart';
+import 'package:flutter/material.dart';
+import 'package:model/email/presentation_email.dart';
+import 'package:model/extensions/list_presentation_email_extension.dart';
+import 'package:tmail_ui_user/features/base/base_controller.dart';
+import 'package:tmail_ui_user/features/email/domain/state/labels/add_list_label_to_list_email_state.dart';
+import 'package:tmail_ui_user/features/email/domain/usecases/labels/add_list_label_to_list_emails_interactor.dart';
+import 'package:tmail_ui_user/features/home/data/exceptions/session_exceptions.dart';
+import 'package:tmail_ui_user/features/labels/domain/exceptions/label_exceptions.dart';
+import 'package:jmap_dart_client/jmap/mail/email/keyword_identifier.dart';
+import 'package:tmail_ui_user/features/labels/domain/model/add_list_labels_to_list_emails_params.dart';
+import 'package:tmail_ui_user/features/labels/presentation/label_controller.dart';
+import 'package:tmail_ui_user/features/labels/presentation/widgets/choose_label_modal.dart';
+import 'package:tmail_ui_user/main/routes/dialog_router.dart';
+
+class AddListLabelToListEmailsDelegate extends BaseController {
+  final LabelController _labelController;
+  final AddListLabelToListEmailsInteractor _interactor;
+
+  AddListLabelToListEmailsDelegate(this._labelController, this._interactor);
+
+  Future<void> openChooseLabelModal({
+    required List<PresentationEmail> selectedEmails,
+    required ImagePaths imagePaths,
+    required VoidCallback onCancel,
+    required OnSyncListLabelForListEmail onSync,
+  }) async {
+    if (_labelController.labels.isEmpty) return;
+
+    await DialogRouter().openDialogModal(
+      child: ChooseLabelModal(
+        labels: _labelController.labels,
+        onLabelAsToEmailsAction: (labels) {
+          onCancel();
+          _addLabels(
+            AddListLabelsToListEmailsParams(
+              labels: labels,
+              emailIds: selectedEmails.listEmailIds,
+              onSync: onSync,
+            ),
+          );
+        },
+        imagePaths: imagePaths,
+      ),
+      dialogLabel: 'choose-label-modal',
+    );
+  }
+
+  void _addLabels(
+    AddListLabelsToListEmailsParams params,
+  ) {
+    final session = _labelController.session;
+    final accountId = _labelController.accountId;
+
+    final exception = _validateParams(params.labelKeywords);
+    if (exception != null) {
+      emitFailure(
+        controller: this,
+        failure: AddListLabelsToListEmailsFailure(
+          exception: exception,
+          labelDisplays: params.labelDisplays,
+        ),
+      );
+      return;
+    }
+
+    consumeState(_interactor.execute(session!, accountId!, params));
+  }
+
+  Exception? _validateParams(List<KeyWordIdentifier> keywords) {
+    if (_labelController.session == null) return NotFoundSessionException();
+    if (_labelController.accountId == null) return NotFoundAccountIdException();
+    if (keywords.isEmpty) return const LabelKeywordIsNull();
+    return null;
+  }
+
+  @override
+  void handleSuccessViewState(Success success) {
+    if (success is AddListLabelsToListEmailsSuccess) {
+      toastManager.showMessageSuccess(success);
+      success.onSync?.call(success.emailIds, success.labelKeywords, shouldRemove: false);
+    }
+  }
+
+  @override
+  void handleFailureViewState(Failure failure) {
+    if (failure is AddListLabelsToListEmailsFailure) {
+      toastManager.showMessageFailure(failure);
+    }
+  }
+}

lib/features/labels/presentation/widgets/choose_label_modal.dart

@@ -0,0 +1,199 @@
+import 'dart:math' as math;
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/presentation/views/button/default_close_button_widget.dart';
+import 'package:core/presentation/views/dialog/modal_list_action_button_widget.dart';
+import 'package:flutter/material.dart';
+import 'package:labels/labels.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/labels/label_list_item.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/main/routes/route_navigation.dart';
+
+typedef OnLabelAsToEmailsAction = Function(List<Label> labels);
+
+class ChooseLabelModal extends StatefulWidget {
+  final List<Label> labels;
+  final ImagePaths imagePaths;
+  final OnLabelAsToEmailsAction onLabelAsToEmailsAction;
+
+  const ChooseLabelModal({
+    super.key,
+    required this.labels,
+    required this.imagePaths,
+    required this.onLabelAsToEmailsAction,
+  });
+
+  @override
+  State<ChooseLabelModal> createState() => _ChooseLabelModalState();
+}
+
+class _ChooseLabelModalState extends State<ChooseLabelModal> {
+  final ValueNotifier<bool> _addLabelStateNotifier = ValueNotifier(false);
+  final ValueNotifier<List<Label>> _selectedLabelStateNotifier =
+      ValueNotifier([]);
+
+  @override
+  Widget build(BuildContext context) {
+    final appLocalizations = AppLocalizations.of(context);
+
+    return LayoutBuilder(builder: (_, constraints) {
+      final currentScreenWidth = constraints.maxWidth;
+      final currentScreenHeight = constraints.maxHeight;
+
+      Widget bodyWidget = Container(
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: const BorderRadius.all(Radius.circular(16)),
+          boxShadow: [
+            BoxShadow(
+              color: Colors.black.withValues(alpha: 0.08),
+              blurRadius: 24,
+              offset: const Offset(0, 2),
+            ),
+            BoxShadow(
+              color: Colors.black.withValues(alpha: 0.08),
+              blurRadius: 2,
+            ),
+          ],
+        ),
+        width: math.min(
+          currentScreenWidth - 32,
+          554,
+        ),
+        constraints: BoxConstraints(maxHeight: currentScreenHeight - 100),
+        clipBehavior: Clip.antiAlias,
+        child: Stack(
+          children: [
+            Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                _buildTitle(appLocalizations),
+                const Divider(height: 1, color: Colors.black12),
+                _buildSubtitle(appLocalizations),
+                Flexible(child: _buildLabelListView()),
+                ValueListenableBuilder(
+                  valueListenable: _addLabelStateNotifier,
+                  builder: (_, value, __) {
+                    return ModalListActionButtonWidget(
+                      positiveLabel: appLocalizations.addLabel,
+                      negativeLabel: appLocalizations.cancel,
+                      padding: const EdgeInsets.symmetric(
+                        vertical: 25,
+                        horizontal: 25,
+                      ),
+                      isPositiveActionEnabled: value,
+                      onPositiveAction: _onAddLabel,
+                      onNegativeAction: _onCloseModal,
+                    );
+                  },
+                ),
+              ],
+            ),
+            DefaultCloseButtonWidget(
+              iconClose: widget.imagePaths.icCloseDialog,
+              isAlignTopEnd: false,
+              onTapActionCallback: _onCloseModal,
+            ),
+          ],
+        ),
+      );
+
+      return Center(child: bodyWidget);
+    });
+  }
+
+  Widget _buildTitle(AppLocalizations appLocalizations) {
+    return Container(
+      height: 52,
+      alignment: Alignment.center,
+      padding: const EdgeInsetsDirectional.symmetric(horizontal: 32),
+      child: Text(
+        appLocalizations.chooseLabel,
+        style: ThemeUtils.textStyleHeadingH6().copyWith(
+          color: Colors.black,
+        ),
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+      ),
+    );
+  }
+
+  Widget _buildSubtitle(AppLocalizations appLocalizations) {
+    return Container(
+      height: 32,
+      alignment: AlignmentDirectional.centerStart,
+      padding: const EdgeInsetsDirectional.symmetric(horizontal: 16),
+      child: Text(
+        appLocalizations.selectLabel,
+        style: ThemeUtils.textStyleInter400.copyWith(
+          color: AppColor.steelGray400,
+        ),
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+      ),
+    );
+  }
+
+  Widget _buildLabelListView() {
+    final labelList = widget.labels;
+    return ListView.builder(
+      shrinkWrap: true,
+      padding: EdgeInsets.zero,
+      itemCount: labelList.length,
+      itemBuilder: (context, index) {
+        final label = labelList[index];
+        return ValueListenableBuilder(
+          valueListenable: _selectedLabelStateNotifier,
+          builder: (_, selectedLabels, __) {
+            final isSelected = selectedLabels.contains(label);
+            return LabelListItem(
+              label: label,
+              imagePaths: widget.imagePaths,
+              padding: const EdgeInsetsDirectional.only(
+                start: 4,
+                end: 16,
+              ),
+              enableSelectedIcon: true,
+              isSelected: isSelected,
+              onOpenLabelCallback: _onToggleLabel,
+            );
+          },
+        );
+      },
+    );
+  }
+
+  void _onToggleLabel(Label selectedLabel) {
+    final currentLabels = _selectedLabelStateNotifier.value;
+
+    final isAlreadySelected = currentLabels.any((label) => label.id == selectedLabel.id);
+    if (isAlreadySelected) {
+      _selectedLabelStateNotifier.value =
+          currentLabels.where((label) => label.id != selectedLabel.id).toList();
+    } else {
+      _selectedLabelStateNotifier.value = [...currentLabels, selectedLabel];
+    }
+
+    _addLabelStateNotifier.value = _selectedLabelStateNotifier.value.isNotEmpty;
+  }
+
+  void _onAddLabel() {
+    widget.onLabelAsToEmailsAction(_selectedLabelStateNotifier.value);
+
+    popBack();
+  }
+
+  void _onCloseModal() {
+    popBack();
+  }
+
+  @override
+  void dispose() {
+    _addLabelStateNotifier.dispose();
+    _selectedLabelStateNotifier.dispose();
+    super.dispose();
+  }
+}

lib/features/mailbox/presentation/widgets/labels/label_list_item.dart

@@ -18,6 +18,8 @@ class LabelListItem extends StatefulWidget {
   final bool isSelected;
   final bool shouldAskReadOnly;
   final bool isMobileResponsive;
+  final bool enableSelectedIcon;
+  final EdgeInsetsGeometry? padding;
   final OnOpenLabelCallback onOpenLabelCallback;
   final OnOpenLabelContextMenuAction? onOpenContextMenu;
   final OnLongPressLabelItemAction? onLongPressLabelItemAction;
@@ -31,6 +33,8 @@ class LabelListItem extends StatefulWidget {
     this.isSelected = false,
     this.shouldAskReadOnly = false,
     this.isMobileResponsive = false,
+    this.enableSelectedIcon = false,
+    this.padding,
     this.onOpenContextMenu,
     this.onLongPressLabelItemAction,
   });
@@ -62,7 +66,7 @@ class _LabelListItemState extends State<LabelListItem> {
       ),
     );
 
-    _itemPadding = EdgeInsetsDirectional.symmetric(
+    _itemPadding = widget.padding ?? EdgeInsetsDirectional.symmetric(
       horizontal: isDesktop
           ? MailboxItemWidgetStyles.itemPadding
           : MailboxItemWidgetStyles.mobileItemPadding,
@@ -103,8 +107,8 @@ class _LabelListItemState extends State<LabelListItem> {
     return Material(
       type: MaterialType.transparency,
       child: InkWell(
-        borderRadius: _borderRadius,
+        borderRadius: widget.enableSelectedIcon ? null : _borderRadius,
-        onHover: _handleHoverChanged,
+        onHover: widget.enableSelectedIcon ? null : _handleHoverChanged,
         onTap: () => widget.onOpenLabelCallback(widget.label),
         onLongPress: _isOnLongPressActive
           ? () => widget.onLongPressLabelItemAction?.call(widget.label)
@@ -113,11 +117,23 @@ class _LabelListItemState extends State<LabelListItem> {
           height: _itemHeight,
           padding: _itemPadding,
           decoration: BoxDecoration(
-            borderRadius: _borderRadius,
+            borderRadius: widget.enableSelectedIcon ? null : _borderRadius,
             color: _backgroundColorItem,
           ),
           child: Row(
             children: [
+              if (widget.enableSelectedIcon)
+                _SelectedIcon(
+                  icon: widget.isSelected
+                      ? widget.imagePaths.icCheckboxSelected
+                      : widget.imagePaths.icCheckboxUnselected,
+                  color: widget.isSelected
+                      ? AppColor.primaryMain
+                      : AppColor.steelGray200,
+                  onSelectAction: () => widget.onOpenLabelCallback(
+                    widget.label,
+                  ),
+                ),
               _LabelIcon(
                 icon: widget.imagePaths.icLabel,
                 color: widget.label.backgroundColor,
@@ -143,7 +159,9 @@ class _LabelListItemState extends State<LabelListItem> {
   }
 
   Color get _backgroundColorItem =>
-      widget.isSelected ? AppColor.blue100 : Colors.transparent;
+      widget.isSelected && !widget.enableSelectedIcon
+          ? AppColor.blue100
+          : Colors.transparent;
 
   Color _menuButtonBackgroundColor(BuildContext context) {
     if (_isContextMenuVisible) {
@@ -202,6 +220,30 @@ class _LabelIcon extends StatelessWidget {
   }
 }
 
+class _SelectedIcon extends StatelessWidget {
+  final String icon;
+  final Color? color;
+  final VoidCallback onSelectAction;
+
+  const _SelectedIcon({
+    required this.icon,
+    required this.color,
+    required this.onSelectAction,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return TMailButtonWidget.fromIcon(
+      icon: icon,
+      iconColor: color,
+      iconSize: 20,
+      padding: const EdgeInsets.all(10),
+      backgroundColor: Colors.transparent,
+      onTapActionCallback: onSelectAction,
+    );
+  }
+}
+
 class _ContextMenuButton extends StatelessWidget {
   final bool visible;
   final Color backgroundColor;

lib/features/mailbox_dashboard/presentation/bindings/email_action_interactor_bindings.dart

@@ -2,6 +2,7 @@ import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/email/domain/repository/email_repository.dart';
 import 'package:tmail_ui_user/features/email/domain/usecases/add_a_label_to_an_email_interactor.dart';
 import 'package:tmail_ui_user/features/email/domain/usecases/remove_a_label_from_an_email_interactor.dart';
+import 'package:tmail_ui_user/features/email/domain/usecases/labels/add_list_label_to_list_emails_interactor.dart';
 
 class EmailActionInteractorBindings extends Bindings {
 
@@ -13,5 +14,6 @@ class EmailActionInteractorBindings extends Bindings {
   void dependencies() {
     Get.lazyPut(() => AddALabelToAnEmailInteractor(_emailRepository));
     Get.lazyPut(() => RemoveALabelFromAnEmailInteractor(_emailRepository));
+    Get.lazyPut(() => AddListLabelToListEmailsInteractor(_emailRepository));
   }
 }

lib/features/mailbox_dashboard/presentation/bindings/mailbox_dashboard_bindings.dart

@@ -58,6 +58,8 @@ import 'package:tmail_ui_user/features/identity_creator/data/datasource_impl/loc
 import 'package:tmail_ui_user/features/identity_creator/data/repository/identity_creator_repository_impl.dart';
 import 'package:tmail_ui_user/features/identity_creator/domain/repository/identity_creator_repository.dart';
 import 'package:tmail_ui_user/features/identity_creator/domain/usecase/get_identity_cache_on_web_interactor.dart';
+import 'package:tmail_ui_user/features/email/domain/usecases/labels/add_list_label_to_list_emails_interactor.dart';
+import 'package:tmail_ui_user/features/labels/presentation/delegates/add_list_label_to_list_emails_delegate.dart';
 import 'package:tmail_ui_user/features/labels/presentation/label_controller.dart';
 import 'package:tmail_ui_user/features/mailbox/data/datasource/mailbox_datasource.dart';
 import 'package:tmail_ui_user/features/mailbox/data/datasource/state_datasource.dart';
@@ -212,6 +214,10 @@ class MailboxDashBoardBindings extends BaseBindings {
       Get.find<GetSpamMailboxCachedInteractor>()));
 
     Get.put(LabelController());
+    Get.put(AddListLabelToListEmailsDelegate(
+      Get.find<LabelController>(),
+      Get.find<AddListLabelToListEmailsInteractor>(),
+    ));
 
     Get.lazyPut(() => ComposerManager());
 

lib/features/mailbox_dashboard/presentation/extensions/labels/handle_logic_label_extension.dart

@@ -75,11 +75,32 @@ extension HandleLogicLabelExtension on MailboxDashBoardController  {
     updateEmailFlagByEmailIds(
       [emailId],
       isLabelAdded: !shouldRemove,
-      labelKeyword: labelKeyword,
+      labelKeywords: [labelKeyword],
     );
   }
 
   void _refreshLabelSettingEnabled() {
     labelController.isLabelSettingEnabled.refresh();
   }
+
+  void syncListLabelForListEmail(
+    List<EmailId> emailIds,
+    List<KeyWordIdentifier> labelKeywords,
+    {bool shouldRemove = false}
+  ) {
+    _syncLabelsForEmailList(emailIds, labelKeywords, shouldRemove);
+    _refreshLabelSettingEnabled();
+  }
+
+  void _syncLabelsForEmailList(
+    List<EmailId> emailIds,
+    List<KeyWordIdentifier> labelKeywords,
+    bool shouldRemove,
+  ) {
+    updateEmailFlagByEmailIds(
+      emailIds,
+      labelKeywords: labelKeywords,
+      isLabelAdded: !shouldRemove,
+    );
+  }
 }

lib/features/mailbox_dashboard/presentation/extensions/update_current_emails_flags_extension.dart

@@ -15,13 +15,13 @@ extension UpdateCurrentEmailsFlagsExtension on MailboxDashBoardController {
     bool markAsAnswered = false,
     bool markAsForwarded = false,
     bool isLabelAdded = false,
-    KeyWordIdentifier? labelKeyword,
+    List<KeyWordIdentifier>? labelKeywords,
   }) {
     if (readAction == null &&
         markStarAction == null &&
         !markAsAnswered &&
         !markAsForwarded &&
-        labelKeyword == null) {
+        labelKeywords?.isNotEmpty != true) {
       return;
     }
 
@@ -64,8 +64,8 @@ extension UpdateCurrentEmailsFlagsExtension on MailboxDashBoardController {
         _updateKeyword(email, KeyWordIdentifier.emailForwarded, true);
       }
 
-      if (labelKeyword != null) {
+      if (labelKeywords?.isNotEmpty == true) {
-        _updateKeyword(email, labelKeyword, isLabelAdded);
+        _updateListKeywords(email, labelKeywords!, isLabelAdded);
       }
     }
 
@@ -84,6 +84,16 @@ extension UpdateCurrentEmailsFlagsExtension on MailboxDashBoardController {
     }
   }
 
+  void _updateListKeywords(
+    PresentationEmail presentationEmail,
+    List<KeyWordIdentifier> keywords,
+    bool value,
+  ) {
+    for (var keyword in keywords) {
+      _updateKeyword(presentationEmail, keyword, value);
+    }
+  }
+
   void updateEmailAnswered(EmailId emailId) {
     dispatchThreadDetailUIAction(UpdatedEmailKeywordsAction(
       emailId,

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

@@ -395,6 +395,8 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
                   listEmailSelected,
                   controller.mapMailboxById,
                   controller.imagePaths,
+                  isLabelAvailable: controller.isLabelAvailable,
+                  labels: controller.labelController.labels,
                   onCancelSelection: () =>
                     controller.dispatchAction(CancelSelectionAllEmailAction()),
                   onEmailActionTypeAction: (listEmails, actionType) =>

lib/features/mailbox_dashboard/presentation/widgets/top_bar_thread_selection.dart

@@ -4,6 +4,7 @@ import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:flutter/material.dart';
 import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
+import 'package:labels/model/label.dart';
 import 'package:model/email/email_action_type.dart';
 import 'package:model/email/presentation_email.dart';
 import 'package:model/extensions/list_presentation_email_extension.dart';
@@ -20,6 +21,8 @@ class TopBarThreadSelection extends StatelessWidget{
   final OnEmailActionTypeAction? onEmailActionTypeAction;
   final VoidCallback? onCancelSelection;
   final ImagePaths imagePaths;
+  final bool isLabelAvailable;
+  final List<Label> labels;
 
   const TopBarThreadSelection (
     this.listEmail,
@@ -27,6 +30,8 @@ class TopBarThreadSelection extends StatelessWidget{
     this.imagePaths,
     {
       super.key,
+      required this.isLabelAvailable,
+      required this.labels,
       this.onEmailActionTypeAction,
       this.onCancelSelection,
     }
@@ -104,6 +109,18 @@ class TopBarThreadSelection extends StatelessWidget{
           EmailActionType.moveToMailbox,
         ),
       ),
+      if (isLabelAvailable && labels.isNotEmpty)
+        TMailButtonWidget.fromIcon(
+          icon: imagePaths.icTag,
+          iconSize: TopBarThreadSelectionStyle.iconSize,
+          iconColor: TopBarThreadSelectionStyle.iconColor,
+          tooltipMessage: AppLocalizations.of(context).labelAs,
+          backgroundColor: Colors.transparent,
+          onTapActionCallback: () => onEmailActionTypeAction?.call(
+            List.from(listEmail),
+            EmailActionType.labelAs,
+          ),
+        ),
       TMailButtonWidget.fromIcon(
         icon: !isMarkAsSpamEnabled ? imagePaths.icNotSpam : imagePaths.icSpam,
         backgroundColor: Colors.transparent,

lib/features/search/email/presentation/extension/handle_press_email_selection_action.dart

@@ -17,12 +17,18 @@ extension HandlePressEmailSelectionActionExtension on SearchEmailController {
     EmailSelectionActionType type,
     List<PresentationEmail> emails,
     Map<MailboxId, PresentationMailbox> mapMailboxById,
+    bool isLabelAvailable,
   ) {
     final emailActionType = type.toEmailActionType();
     if (emailActionType != null) {
       handleSelectionEmailAction(emailActionType, emails);
     } else if (type == EmailSelectionActionType.moreAction) {
-      _showMoreActionMenu(context, emails, mapMailboxById);
+      _showMoreActionMenu(
+        context,
+        emails,
+        mapMailboxById,
+        isLabelAvailable,
+      );
     } else if (type == EmailSelectionActionType.selectAll) {
       _showSelectAllEmails();
     }
@@ -31,6 +37,7 @@ extension HandlePressEmailSelectionActionExtension on SearchEmailController {
   List<EmailSelectionActionType> _createEmailSelectionActionTypes(
     List<PresentationEmail> emails,
     Map<MailboxId, PresentationMailbox> mapMailboxById,
+    bool isLabelAvailable,
   ) {
     return <EmailSelectionActionType>[
       if (emails.isAllEmailRead)
@@ -42,6 +49,8 @@ extension HandlePressEmailSelectionActionExtension on SearchEmailController {
       else
         EmailSelectionActionType.markAsStarred,
       EmailSelectionActionType.moveToFolder,
+      if (isLabelAvailable)
+        EmailSelectionActionType.labelAs,
       if (emails.isDeletePermanentlyDisabled(mapMailboxById))
         EmailSelectionActionType.moveToTrash,
       if (emails.isMarkAsSpamEnabled(mapMailboxById))
@@ -59,10 +68,12 @@ extension HandlePressEmailSelectionActionExtension on SearchEmailController {
     BuildContext context,
     List<PresentationEmail> emails,
     Map<MailboxId, PresentationMailbox> mapMailboxById,
+    bool isLabelAvailable,
   ) async {
     final emailActions = _createEmailSelectionActionTypes(
       emails,
       mapMailboxById,
+      isLabelAvailable,
     ).emailActionTypes;
 
     final contextMenuActions = emailActions

lib/features/search/email/presentation/search_email_controller.dart

@@ -41,6 +41,8 @@ import 'package:tmail_ui_user/features/email/presentation/action/email_ui_action
 import 'package:tmail_ui_user/features/email/presentation/utils/email_utils.dart';
 import 'package:tmail_ui_user/features/home/data/exceptions/session_exceptions.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
+import 'package:tmail_ui_user/features/labels/presentation/delegates/add_list_label_to_list_emails_delegate.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/extensions/labels/handle_logic_label_extension.dart';
 import 'package:tmail_ui_user/features/labels/presentation/mixin/label_sub_menu_mixin.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/model/recent_search.dart';
@@ -1061,6 +1063,14 @@ class SearchEmailController extends BaseController
         cancelSelectionMode();
         unSpamSelectedMultipleEmail(listEmails);
         break;
+      case EmailActionType.labelAs:
+        Get.find<AddListLabelToListEmailsDelegate>().openChooseLabelModal(
+          selectedEmails: listEmails,
+          imagePaths: imagePaths,
+          onCancel: cancelSelectionMode,
+          onSync: mailboxDashBoardController.syncListLabelForListEmail,
+        );
+        break;
       default:
         break;
     }

lib/features/search/email/presentation/search_email_view.dart

@@ -85,6 +85,8 @@ class SearchEmailView extends GetWidget<SearchEmailController>
               if (controller.selectionMode.value == SelectMode.ACTIVE) {
                 final mapMailboxById = controller.mailboxDashBoardController.mapMailboxById;
                 final selectedEmails = controller.listResultSearch.listEmailSelected;
+                final isLabelAvailable =
+                    controller.mailboxDashBoardController.isLabelAvailable;
 
                 final actionTypes = _createEmailSelectionActionTypes(
                   mapMailboxById,
@@ -104,6 +106,7 @@ class SearchEmailView extends GetWidget<SearchEmailController>
                         type,
                         emails,
                         mapMailboxById,
+                        isLabelAvailable,
                       ),
                 );
               } else {

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

@@ -17,12 +17,13 @@ extension HandlePressEmailSelectionActionExtension on ThreadController {
     EmailSelectionActionType type,
     List<PresentationEmail> emails,
     PresentationMailbox? selectedMailbox,
+    bool isLabelAvailable,
   ) {
     final emailActionType = type.toEmailActionType();
     if (emailActionType != null) {
       pressEmailSelectionAction(emailActionType, emails);
     } else if (type == EmailSelectionActionType.moreAction) {
-      _showMoreActionMenu(context, emails, selectedMailbox);
+      _showMoreActionMenu(context, emails, selectedMailbox, isLabelAvailable);
     } else if (type == EmailSelectionActionType.selectAll) {
       _showSelectAllEmails();
     }
@@ -31,6 +32,7 @@ extension HandlePressEmailSelectionActionExtension on ThreadController {
   List<EmailSelectionActionType> _createEmailSelectionActionTypes(
     List<PresentationEmail> emails,
     PresentationMailbox? selectedMailbox,
+    bool isLabelAvailable,
   ) {
     return <EmailSelectionActionType>[
       if (emails.isAllEmailRead)
@@ -42,6 +44,8 @@ extension HandlePressEmailSelectionActionExtension on ThreadController {
       else
         EmailSelectionActionType.markAsStarred,
       EmailSelectionActionType.moveToFolder,
+      if (isLabelAvailable)
+        EmailSelectionActionType.labelAs,
       if (selectedMailbox?.isDeletePermanentlyEnabled != true)
         EmailSelectionActionType.moveToTrash,
       if (selectedMailbox?.isSpam == true)
@@ -61,10 +65,12 @@ extension HandlePressEmailSelectionActionExtension on ThreadController {
     BuildContext context,
     List<PresentationEmail> emails,
     PresentationMailbox? selectedMailbox,
+    bool isLabelAvailable,
   ) async {
     final emailActions = _createEmailSelectionActionTypes(
       emails,
       selectedMailbox,
+      isLabelAvailable,
     ).emailActionTypes;
 
     final contextMenuActions = emailActions

lib/features/thread/presentation/thread_controller.dart

@@ -39,6 +39,8 @@ import 'package:tmail_ui_user/features/network_connection/presentation/network_c
   if (dart.library.html) 'package:tmail_ui_user/features/network_connection/presentation/web_network_connection_controller.dart';
 import 'package:tmail_ui_user/features/push_notification/presentation/websocket/web_socket_message.dart';
 import 'package:tmail_ui_user/features/push_notification/presentation/websocket/web_socket_queue_handler.dart';
+import 'package:tmail_ui_user/features/labels/presentation/delegates/add_list_label_to_list_emails_delegate.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/extensions/labels/handle_logic_label_extension.dart';
 import 'package:tmail_ui_user/features/search/email/presentation/search_email_bindings.dart';
 import 'package:tmail_ui_user/features/thread/domain/constants/thread_constants.dart';
 import 'package:tmail_ui_user/features/thread/domain/model/filter_message_option.dart';
@@ -1275,63 +1277,76 @@ class ThreadController extends BaseController with EmailActionController {
     EmailActionType actionType,
     List<PresentationEmail> selectionEmail
   ) {
-    switch(actionType) {
+    final handlers = <EmailActionType, void Function(List<PresentationEmail>)>{
-      case EmailActionType.markAsRead:
+      EmailActionType.markAsRead: (emails) {
         cancelSelectEmail();
-        markAsReadSelectedMultipleEmail(selectionEmail, ReadActions.markAsRead);
+        markAsReadSelectedMultipleEmail(emails, ReadActions.markAsRead);
-        break;
+      },
-      case EmailActionType.markAsUnread:
+      EmailActionType.markAsUnread: (emails) {
         cancelSelectEmail();
-        markAsReadSelectedMultipleEmail(selectionEmail, ReadActions.markAsUnread);
+        markAsReadSelectedMultipleEmail(emails, ReadActions.markAsUnread);
-        break;
+      },
-      case EmailActionType.markAsStarred:
+      EmailActionType.markAsStarred: (emails) {
         cancelSelectEmail();
-        markAsStarSelectedMultipleEmail(selectionEmail, MarkStarAction.markStar);
+        markAsStarSelectedMultipleEmail(emails, MarkStarAction.markStar);
-        break;
+      },
-      case EmailActionType.unMarkAsStarred:
+      EmailActionType.unMarkAsStarred: (emails) {
         cancelSelectEmail();
-        markAsStarSelectedMultipleEmail(selectionEmail, MarkStarAction.unMarkStar);
+        markAsStarSelectedMultipleEmail(emails, MarkStarAction.unMarkStar);
-        break;
+      },
-      case EmailActionType.moveToMailbox:
+      EmailActionType.moveToMailbox: (emails) =>
-        moveEmailsToMailbox(selectionEmail, onCallbackAction: cancelSelectEmail);
+          moveEmailsToMailbox(emails, onCallbackAction: cancelSelectEmail),
-        break;
+      EmailActionType.moveToTrash: (emails) {
-      case EmailActionType.moveToTrash:
         cancelSelectEmail();
-        moveEmailsToTrash(selectionEmail);
+        moveEmailsToTrash(emails);
-        break;
+      },
-      case EmailActionType.deletePermanently:
+      EmailActionType.deletePermanently:
-        final mailboxContainCurrent = isSearchActive
+          _handleDeletePermanentlySelectionEmails,
-            ? selectionEmail.getCurrentMailboxContain(mailboxDashBoardController.mapMailboxById)
+      EmailActionType.moveToSpam: (emails) {
-            : selectedMailbox;
-        if (mailboxContainCurrent != null && currentContext != null) {
-          deleteSelectionEmailsPermanently(
-            currentContext!,
-            DeleteActionType.multiple,
-            listEmails: selectionEmail,
-            mailboxCurrent: mailboxContainCurrent,
-            onCancelSelectionEmail: () => cancelSelectEmail());
-        }
-        break;
-      case EmailActionType.moveToSpam:
         cancelSelectEmail();
-        moveEmailsToSpam(selectionEmail);
+        moveEmailsToSpam(emails);
-        break;
+      },
-      case EmailActionType.unSpam:
+      EmailActionType.unSpam: (emails) {
         cancelSelectEmail();
-        unSpamSelectedMultipleEmail(selectionEmail);
+        unSpamSelectedMultipleEmail(emails);
-        break;
+      },
-      case EmailActionType.archiveMessage:
+      EmailActionType.archiveMessage: (emails) {
         cancelSelectEmail();
-        moveEmailsToArchive(selectionEmail);
+        moveEmailsToArchive(emails);
-        break;
+      },
-      case EmailActionType.compose:
+      EmailActionType.compose: (_) =>
-        mailboxDashBoardController.openComposer(ComposerArguments());
+          mailboxDashBoardController.openComposer(ComposerArguments()),
-        break;
+      EmailActionType.labelAs: (emails) {
-      default:
+        openChooseLabelModal(emails);
-        break;
+      },
+    };
+    handlers[actionType]?.call(selectionEmail);
+  }
+
+  void _handleDeletePermanentlySelectionEmails(List<PresentationEmail> selectionEmail) {
+    final mailboxContainCurrent = isSearchActive
+        ? selectionEmail.getCurrentMailboxContain(mailboxDashBoardController.mapMailboxById)
+        : selectedMailbox;
+    if (mailboxContainCurrent != null && currentContext != null) {
+      deleteSelectionEmailsPermanently(
+        currentContext!,
+        DeleteActionType.multiple,
+        listEmails: selectionEmail,
+        mailboxCurrent: mailboxContainCurrent,
+        onCancelSelectionEmail: cancelSelectEmail,
+      );
     }
   }
 
+  void openChooseLabelModal(List<PresentationEmail> selectionEmail) {
+    Get.find<AddListLabelToListEmailsDelegate>().openChooseLabelModal(
+      selectedEmails: selectionEmail,
+      imagePaths: imagePaths,
+      onCancel: cancelSelectEmail,
+      onSync: mailboxDashBoardController.syncListLabelForListEmail,
+    );
+  }
+
   void handleEmailActionType(
     EmailActionType actionType,
     PresentationEmail selectedEmail,

lib/features/thread/presentation/thread_view.dart

@@ -83,6 +83,9 @@ class ThreadView extends GetWidget<ThreadController>
                     if (!controller.responsiveUtils.isWebDesktop(context))
                       ... [
                         Obx(() {
+                          final isLabelAvailable =
+                              controller.mailboxDashBoardController.isLabelAvailable;
+
                           return MobileAppBarThreadWidget(
                             responsiveUtils: controller.responsiveUtils,
                             imagePaths: controller.imagePaths,
@@ -104,6 +107,7 @@ class ThreadView extends GetWidget<ThreadController>
                                   type,
                                   emails,
                                   controller.selectedMailbox,
+                                  isLabelAvailable,
                                 ),
                             );
                         }),

lib/features/thread_detail/presentation/extension/labels/add_label_to_thread_extension.dart

@@ -212,7 +212,7 @@ extension AddLabelToThreadExtension on ThreadDetailController {
     mailboxDashBoardController.updateEmailFlagByEmailIds(
       emailIds,
       isLabelAdded: !remove,
-      labelKeyword: labelKeyword,
+      labelKeywords: [labelKeyword],
     );
   }