From 75f55e6507efa5a73a1d5bc3e44b2b58c490cdcb Mon Sep 17 00:00:00 2001
From: dab246 <tdvu@linagora.com>
Date: Tue, 25 Nov 2025 17:36:05 +0700
Subject: [PATCH] TF-4179 Add Label bar in sidebar

---
 .../labels/presentation/label_controller.dart |   8 ++
 .../presentation/base_mailbox_view.dart       |  28 +++++
 .../widgets/labels/labels_bar_widget.dart     | 100 ++++++++++++++++++
 .../mailbox_dashboard_controller.dart         |  10 +-
 lib/l10n/intl_messages.arb                    |  12 +++
 lib/main/localizations/app_localizations.dart |  14 +++
 6 files changed, 169 insertions(+), 3 deletions(-)
 create mode 100644 lib/features/mailbox/presentation/widgets/labels/labels_bar_widget.dart

diff --git a/lib/features/labels/presentation/label_controller.dart b/lib/features/labels/presentation/label_controller.dart
index 871bb01a5..e210efd82 100644
--- a/lib/features/labels/presentation/label_controller.dart
+++ b/lib/features/labels/presentation/label_controller.dart
@@ -5,6 +5,7 @@ import 'package:jmap_dart_client/jmap/account_id.dart';
 import 'package:jmap_dart_client/jmap/core/session/session.dart';
 import 'package:labels/model/label.dart';
 import 'package:labels/utils/labels_constants.dart';
+import 'package:model/mailbox/expand_mode.dart';
 import 'package:tmail_ui_user/features/base/base_controller.dart';
 import 'package:tmail_ui_user/features/labels/domain/state/get_all_label_state.dart';
 import 'package:tmail_ui_user/features/labels/domain/usecases/get_all_label_interactor.dart';
@@ -14,6 +15,7 @@ import 'package:tmail_ui_user/main/routes/route_navigation.dart';
 
 class LabelController extends BaseController {
   final labels = <Label>[].obs;
+  final labelListExpandMode = Rx(ExpandMode.EXPAND);
 
   GetAllLabelInteractor? _getAllLabelInteractor;
 
@@ -32,6 +34,12 @@ class LabelController extends BaseController {
     consumeState(_getAllLabelInteractor!.execute(accountId));
   }
 
+  void toggleLabelListState() {
+    labelListExpandMode.value = labelListExpandMode.value == ExpandMode.COLLAPSE
+        ? ExpandMode.EXPAND
+        : ExpandMode.COLLAPSE;
+  }
+
   @override
   void handleSuccessViewState(Success success) {
     if (success is GetAllLabelSuccess) {
diff --git a/lib/features/mailbox/presentation/base_mailbox_view.dart b/lib/features/mailbox/presentation/base_mailbox_view.dart
index 6ad8d5e28..1a2182629 100644
--- a/lib/features/mailbox/presentation/base_mailbox_view.dart
+++ b/lib/features/mailbox/presentation/base_mailbox_view.dart
@@ -17,6 +17,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_catego
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folders_bar_widget.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/labels/labels_bar_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_app_bar.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_item_widget.dart';
@@ -336,7 +337,34 @@ abstract class BaseMailboxView extends GetWidget<MailboxController>
               ? buildFolders(context)
               : const Offstage(),
         )),
+        buildLabelsBar(context, isDesktop),
       ]),
     );
   }
+
+  Widget buildLabelsBar(BuildContext context, bool isDesktop) {
+    return Obx(() {
+      if (controller.mailboxDashBoardController.isLabelCapabilitySupported) {
+        final labelController = controller
+            .mailboxDashBoardController
+            .labelController;
+
+        final labelListExpandMode = labelController.labelListExpandMode.value;
+
+        return LabelsBarWidget(
+          imagePaths: controller.imagePaths,
+          isDesktop: isDesktop,
+          height: isDesktop ? 48 : 40,
+          padding: isDesktop
+              ? null
+              : const EdgeInsetsDirectional.only(start: 24, end: 12),
+          labelStyle: isDesktop ? null : ThemeUtils.textStyleInter500(),
+          expandMode: labelListExpandMode,
+          onToggleLabelListState: labelController.toggleLabelListState,
+        );
+      } else {
+        return const SizedBox.shrink();
+      }
+    });
+  }
 }
\ No newline at end of file
diff --git a/lib/features/mailbox/presentation/widgets/labels/labels_bar_widget.dart b/lib/features/mailbox/presentation/widgets/labels/labels_bar_widget.dart
new file mode 100644
index 000000000..0f06e72eb
--- /dev/null
+++ b/lib/features/mailbox/presentation/widgets/labels/labels_bar_widget.dart
@@ -0,0 +1,100 @@
+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/tmail_button_widget.dart';
+import 'package:core/utils/direction_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:model/mailbox/expand_mode.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class LabelsBarWidget extends StatelessWidget {
+  final ImagePaths imagePaths;
+  final bool isDesktop;
+  final double? height;
+  final EdgeInsetsGeometry? padding;
+  final TextStyle? labelStyle;
+  final ExpandMode? expandMode;
+  final VoidCallback? onToggleLabelListState;
+  final VoidCallback? onAddNewLabel;
+
+  const LabelsBarWidget({
+    super.key,
+    required this.imagePaths,
+    this.isDesktop = false,
+    this.height,
+    this.padding,
+    this.labelStyle,
+    this.expandMode,
+    this.onToggleLabelListState,
+    this.onAddNewLabel,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    Widget addNewLabelIcon = TMailButtonWidget.fromIcon(
+      icon: imagePaths.icAddNewFolder,
+      backgroundColor: Colors.transparent,
+      iconColor: AppColor.steelGrayA540,
+      iconSize: 20,
+      padding: const EdgeInsets.all(5),
+      tooltipMessage: AppLocalizations.of(context).newLabel,
+      onTapActionCallback: onAddNewLabel,
+    );
+
+    if (isDesktop) {
+      addNewLabelIcon = Transform(
+        transform: Matrix4.translationValues(8, 0, 0),
+        child: addNewLabelIcon,
+      );
+    }
+
+    final labelText = Text(
+      AppLocalizations.of(context).labels,
+      style: labelStyle ?? ThemeUtils.textStyleInter700(),
+      maxLines: 1,
+      overflow: TextOverflow.ellipsis,
+    );
+
+    return Container(
+      padding: padding ??
+          EdgeInsetsDirectional.only(
+            start: isDesktop ? 10 : 26,
+            end: isDesktop ? 0 : 8,
+          ),
+      height: height ?? 48,
+      child: Row(
+        children: [
+          if (expandMode != null)
+            Expanded(
+              child: Row(
+                children: [
+                  Flexible(child: labelText),
+                  TMailButtonWidget.fromIcon(
+                    icon: expandMode!.getIcon(
+                      imagePaths,
+                      DirectionUtils.isDirectionRTLByLanguage(context),
+                    ),
+                    iconColor: Colors.black,
+                    iconSize: 17,
+                    margin: isDesktop
+                        ? const EdgeInsetsDirectional.only(start: 8)
+                        : null,
+                    backgroundColor: Colors.transparent,
+                    padding: const EdgeInsets.all(3),
+                    tooltipMessage: expandMode!
+                        .getTooltipMessage(AppLocalizations.of(context)),
+                    onTapActionCallback: onToggleLabelListState,
+                  ),
+                ],
+              ),
+            )
+          else
+            Expanded(child: labelText),
+          if (onAddNewLabel != null)
+            addNewLabelIcon,
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart b/lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart
index 63707e057..a3901301c 100644
--- a/lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart
+++ b/lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart
@@ -908,15 +908,19 @@ class MailboxDashBoardController extends ReloadableController
       ownEmailAddress: ownEmailAddress.value,
     );
 
-    final isLabelCapabilitySupported = labelController
-        .isLabelCapabilitySupported(session, currentAccountId);
-
     if (isLabelCapabilitySupported) {
       labelController.injectLabelsBindings();
       labelController.getAllLabels(currentAccountId);
     }
   }
 
+  bool get isLabelCapabilitySupported {
+    if (accountId.value == null || sessionCurrent == null) return false;
+
+    return labelController
+        .isLabelCapabilitySupported(sessionCurrent!, accountId.value!);
+  }
+
   void _handleMailtoURL(MailtoArguments arguments) {
     log('MailboxDashBoardController::_handleMailtoURL:');
     routerParameters.value = arguments.toMapRouter();
diff --git a/lib/l10n/intl_messages.arb b/lib/l10n/intl_messages.arb
index 754d2c872..532b225b4 100644
--- a/lib/l10n/intl_messages.arb
+++ b/lib/l10n/intl_messages.arb
@@ -5183,5 +5183,17 @@
     "type": "text",
     "placeholders_order": [],
     "placeholders": {}
+  },
+  "labels": "Labels",
+  "@labels": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "newLabel": "New label",
+  "@newLabel": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
   }
 }
\ No newline at end of file
diff --git a/lib/main/localizations/app_localizations.dart b/lib/main/localizations/app_localizations.dart
index cb93c9630..b3216dceb 100644
--- a/lib/main/localizations/app_localizations.dart
+++ b/lib/main/localizations/app_localizations.dart
@@ -5499,4 +5499,18 @@ class AppLocalizations {
       name: 'aiNeedsActionSettingExplanation',
     );
   }
+
+  String get labels {
+    return Intl.message(
+      'Labels',
+      name: 'labels',
+    );
+  }
+
+  String get newLabel {
+    return Intl.message(
+      'New label',
+      name: 'newLabel',
+    );
+  }
 }