feat(mail): rich text editor for signatures + placeholder variables

- Replace textarea in SignatureManager with TipTap RichTextEditor
- Add placeholder variable buttons: {{user.name}}, {{user.first_name}},
  {{user.last_name}}, {{user.email}}, {{user.role}}, {{tenant.name}}, {{date}}
- Add replaceSignatureVariables() utility in mail API
- ComposeModal now replaces variables with actual user/tenant data when inserting signature
- Variables resolved from auth store (user name, email, role, tenant name)

frontend/src/components/mail/ComposeModal.tsx

@@ -12,7 +12,8 @@ import { Select } from '@/components/ui/Select';
 import { TemplatePicker } from './TemplatePicker';
 import { RichTextEditor } from './RichTextEditor';
 import type { Mail, MailSignature, SendMailPayload, ReplyPayload, ForwardPayload, MailDraftPayload } from '@/api/mail';
-import { uploadAttachment, type UploadedAttachment } from '@/api/mail';
+import { uploadAttachment, type UploadedAttachment, replaceSignatureVariables } from '@/api/mail';
+import { useAuthStore } from '@/store/authStore';
 
 export type ComposeMode = 'new' | 'reply' | 'forward' | 'draft';
 
@@ -42,6 +43,8 @@ export function ComposeModal({
   onClose,
 }: ComposeModalProps) {
   const { t } = useTranslation();
+  const authUser = useAuthStore((s) => s.user);
+  const authTenant = useAuthStore((s) => s.currentTenant);
   const [to, setTo] = useState('');
   const [cc, setCc] = useState('');
   const [bcc, setBcc] = useState('');
@@ -87,9 +90,14 @@ export function ComposeModal({
     setSelectedSignatureId(signatureId);
     const sig = signatures.find((s) => s.id === signatureId);
     if (sig) {
-      setBody((prev) => `${prev}<br/><br/>---<br/>${sig.body_html}`);
+      const processedHtml = replaceSignatureVariables(
+        sig.body_html,
+        { name: authUser?.name, email: authUser?.email, role: authUser?.role, first_name: authUser?.first_name, last_name: authUser?.last_name },
+        { name: authTenant?.name },
+      );
+      setBody((prev) => `${prev}<br/><br/>---<br/>${processedHtml}`);
     }
-  }, [signatures]);
+  }, [signatures, authUser, authTenant]);
 
   const handleTemplateSelect = useCallback((templateBody: string, templateSubject: string) => {
     setBody(templateBody);