TF-3945 Change style for signature composer

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

lib/features/composer/presentation/extensions/sanitize_signature_in_email_content_extension.dart

@@ -10,7 +10,7 @@ extension SanitizeSignatureInEmailContentExtension on ComposerController {
       if (emailContent == null) return;
 
       final emailDocument = parse(emailContent);
-      final existedSignatureButton = emailDocument.querySelector('button.tmail-signature-button');
+      final existedSignatureButton = emailDocument.querySelector('.tmail-signature-button');
       if (existedSignatureButton != null) return;
 
       final signature = emailDocument.querySelector('div.tmail-signature');
@@ -26,7 +26,7 @@ extension SanitizeSignatureInEmailContentExtension on ComposerController {
   void synchronizeInitEmailDraftHash(String? emailContent) {
     try {
       final emailDocument = parse(emailContent);
-      final signatureButton = emailDocument.querySelector('button.tmail-signature-button');
+      final signatureButton = emailDocument.querySelector('.tmail-signature-button');
       if (signatureButton == null) return;
 
       restoringSignatureButton = false;

lib/features/composer/presentation/widgets/web/signature_tooltip_widget.dart

@@ -0,0 +1,40 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:flutter/material.dart';
+
+class SignatureTooltipWidget extends StatelessWidget {
+  final String message;
+
+  const SignatureTooltipWidget({super.key, required this.message});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+      decoration: BoxDecoration(
+        color: AppColor.black4D4D4D,
+        borderRadius: const BorderRadius.all(Radius.circular(10)),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withValues(alpha: 0.16),
+            blurRadius: 24,
+          ),
+          BoxShadow(
+            color: Colors.black.withValues(alpha: 0.08),
+            blurRadius: 2,
+          )
+        ]
+      ),
+      child: Text(
+        message,
+        style: ThemeUtils.textStyleInter600().copyWith(
+          color: Colors.white,
+          fontSize: 12,
+          height: 20 / 12,
+        ),
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+      ),
+    );
+  }
+}

lib/features/composer/presentation/widgets/web/web_editor_widget.dart

@@ -6,6 +6,8 @@ import 'package:core/utils/html/html_template.dart';
 import 'package:core/utils/html/html_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:html_editor_enhanced/html_editor.dart';
+import 'package:tmail_ui_user/features/composer/presentation/widgets/web/signature_tooltip_widget.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 import 'package:universal_html/html.dart' hide VoidCallback;
 
 typedef OnChangeContentEditorAction = Function(String? text);
@@ -74,6 +76,11 @@ class _WebEditorState extends State<WebEditorWidget> {
   late HtmlEditorController _editorController;
   bool _dropListenerRegistered = false;
   Function(Event)? _dropListener;
+  
+  OverlayEntry? _signatureTooltipEntry;
+  final GlobalKey _signatureTooltipKey = GlobalKey();
+  double _signatureTooltipLeft = 0;
+  bool _signatureTooltipReady = false;
 
   @override
   void initState() {
@@ -108,6 +115,7 @@ class _WebEditorState extends State<WebEditorWidget> {
       window.removeEventListener("message", _dropListener!);
       _dropListener = null;
     }
+    _hideSignatureTooltip();
     super.dispose();
   }
 
@@ -179,7 +187,92 @@ class _WebEditorState extends State<WebEditorWidget> {
         onImageUpload: widget.onPasteImageSuccessAction,
         onImageUploadError: widget.onPasteImageFailureAction,
         onInitialTextLoadComplete: widget.onInitialContentLoadComplete,
+        onSignatureHoverIn: (position, isContentVisible) {
+          log('_WebEditorState::build: onSignatureHoverIn position: $position');
+          _showSignatureTooltipAtPosition(
+            position,
+            isContentVisible
+              ? AppLocalizations.of(context).hideSignature 
+              : AppLocalizations.of(context).showSignature,
+          );
+        },
+        onSignatureHoverOut: () {
+          log('_WebEditorState::build: onSignatureHoverOut');
+          _hideSignatureTooltip();
+        },
       ),
     );
   }
+
+  void _showSignatureTooltipAtPosition(
+    SignaturePosition position,
+    String message,
+  ) {
+    try {
+      final overlay = Overlay.maybeOf(context);
+      _signatureTooltipEntry?.remove();
+
+      _signatureTooltipReady = false;
+      _signatureTooltipLeft = position.left;
+
+      _signatureTooltipEntry = OverlayEntry(
+        builder: (context) {
+          return Positioned(
+            top: position.top + position.height + 8,
+            left: _signatureTooltipLeft,
+            child: Material(
+              color: Colors.transparent,
+              child: Opacity(
+                opacity: _signatureTooltipReady ? 1 : 0,
+                child: SignatureTooltipWidget(
+                  key: _signatureTooltipKey,
+                  message: message,
+                ),
+              ),
+            ),
+          );
+        },
+      );
+
+      overlay?.insert(_signatureTooltipEntry!);
+
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        try {
+          final renderBox = _signatureTooltipKey.currentContext
+              ?.findRenderObject() as RenderBox?;
+          if (renderBox == null) return;
+
+          final tooltipWidth = renderBox.size.width;
+          final screenWidth = MediaQuery.of(context).size.width;
+
+          final centerLeft =
+              position.left + (position.width / 2) - (tooltipWidth / 2);
+          final leftAligned = position.left;
+          final rightAligned = position.left + position.width - tooltipWidth;
+
+          if (centerLeft < 8) {
+            _signatureTooltipLeft = leftAligned;
+          } else if (centerLeft + tooltipWidth > screenWidth - 8) {
+            _signatureTooltipLeft = rightAligned;
+          } else {
+            _signatureTooltipLeft = centerLeft;
+          }
+
+          _signatureTooltipReady = true;
+          _signatureTooltipEntry?.markNeedsBuild();
+        } catch (e) {
+          logError(
+            '_WebEditorState::_showTooltipAtPosition:addPostFrameCallback:Exception = $e',
+          );
+        }
+      });
+    } catch (e) {
+      logError('_WebEditorState::_showTooltipAtPosition:Exception = $e');
+    }
+  }
+
+  void _hideSignatureTooltip() {
+    _signatureTooltipEntry?.remove();
+    _signatureTooltipEntry = null;
+  }
 }