TF-4171 Display tag in mailbox list, search list on mobile

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

@@ -8,16 +8,26 @@ class LabelTagListWidget extends StatelessWidget {
   final List<Label> tags;
   final double horizontalPadding;
   final double itemSpacing;
+  final bool autoWrapTagsByMaxWidth;
+  final bool isDesktop;
 
   const LabelTagListWidget({
     super.key,
     required this.tags,
     this.horizontalPadding = 4,
     this.itemSpacing = 12,
+    this.autoWrapTagsByMaxWidth = false,
+    this.isDesktop = false,
   });
 
   @override
   Widget build(BuildContext context) {
+    return autoWrapTagsByMaxWidth
+        ? _buildAutoWrapMode()
+        : _buildFixedDisplayMode();
+  }
+
+  Widget _buildAutoWrapMode() {
     return LayoutBuilder(
       builder: (_, constraints) {
         final maxWidth = constraints.maxWidth;
@@ -25,7 +35,7 @@ class LabelTagListWidget extends StatelessWidget {
         final tagMaxWidth =
             maxWidth - LabelUtils.defaultPlusMaxWidth - itemSpacing;
 
-        final displayedTagsDataResult = LabelUtils.safeComputeDisplayedTags(
+        final result = LabelUtils.safeComputeDisplayedTags(
           tags: tags,
           maxWidth: maxWidth,
           textStyle: ThemeUtils.textStyleContentCaption(),
@@ -38,7 +48,7 @@ class LabelTagListWidget extends StatelessWidget {
         return Wrap(
           spacing: itemSpacing,
           runSpacing: 6,
-          children: displayedTagsDataResult.displayed
+          children: result.displayed
               .map(
                 (tagDisplayed) => LabelWidget(
                   label: tagDisplayed,
@@ -51,4 +61,35 @@ class LabelTagListWidget extends StatelessWidget {
       },
     );
   }
+
+  Widget _buildFixedDisplayMode() {
+    final result = LabelUtils.safeComputeDisplayedLabelsByMaxDisplay(
+      labels: tags,
+      maxDisplay: isDesktop ? 3 : 1,
+    );
+
+    final displayedWidgets = result.displayed.map((label) {
+      return LabelWidget(
+        label: label,
+        horizontalPadding: horizontalPadding,
+        isTruncateLabel: true,
+      );
+    });
+
+    final plusWidget = (result.hiddenCount > 0)
+        ? LabelWidget(
+            label: LabelUtils.buildPlusLabel(result.hiddenCount),
+            horizontalPadding: horizontalPadding,
+          )
+        : null;
+
+    return Wrap(
+      spacing: itemSpacing,
+      runSpacing: 6,
+      children: [
+        ...displayedWidgets,
+        if (plusWidget != null) plusWidget,
+      ],
+    );
+  }
 }

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

@@ -1,3 +1,4 @@
+import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:labels/extensions/label_extension.dart';
 import 'package:labels/model/label.dart';
@@ -7,22 +8,29 @@ class LabelWidget extends StatelessWidget {
   final Label label;
   final double horizontalPadding;
   final double? maxWidth;
+  final bool isTruncateLabel;
 
   const LabelWidget({
     super.key,
     required this.label,
     this.horizontalPadding = 4,
     this.maxWidth,
+    this.isTruncateLabel = false,
   });
 
   @override
   Widget build(BuildContext context) {
+    final showTooltip =
+        PlatformInfo.isWeb && label.id?.value != LabelExtension.moreLabelId;
+
     return TagWidget(
       text: label.safeDisplayName,
       backgroundColor: label.backgroundColor,
       textColor: label.textColor,
       horizontalPadding: horizontalPadding,
       maxWidth: maxWidth,
+      isTruncateText: isTruncateLabel,
+      showTooltip: showTooltip,
     );
   }
 }