feat: P2.1 extended signatures — multiple per identity + TipTap editor

- New stores/signature-store.ts: Zustand persist with CRUD, default/reply
  signature IDs, per-identity signature mapping
- New signature-settings.tsx: list management with add/edit/delete/duplicate
- New signature-editor-modal.tsx: TipTap rich text editor for signatures
- email-composer.tsx: auto-insert signature based on mode (compose/reply)
  + signature selector dropdown in toolbar
- identity-form.tsx: per-identity default/reply signature dropdowns
- settings/page.tsx: Signatures tab in Mail settings group

app/(main)/[locale]/settings/page.tsx

@@ -46,6 +46,7 @@ import { LayoutSettings } from '@/components/settings/layout-settings';
 import { LanguageSettings } from '@/components/settings/language-settings';
 import { ReadingSettings } from '@/components/settings/reading-settings';
 import { ComposingSettings } from '@/components/settings/composing-settings';
+import { SignatureSettings } from '@/components/settings/signature-settings';
 import { ContentSendersSettings } from '@/components/settings/content-senders-settings';
 import { AccountSettings } from '@/components/settings/account-settings';
 import { IdentitySettings } from '@/components/settings/identity-settings';
@@ -98,6 +99,7 @@ type Tab =
   | 'composing'
   | 'downloads'
   | 'identities'
+  | 'signatures'
   | 'vacation'
   | 'filters'
   | 'templates'
@@ -141,6 +143,7 @@ const tabIcons: Record<Tab, LucideIcon> = {
   composing: PenLine,
   downloads: Download,
   identities: UserPen,
+  signatures: PenLine,
   vacation: PalmtreeIcon,
   filters: Filter,
   templates: FileText,
@@ -219,6 +222,7 @@ const tabSearchPaths: Record<Tab, string[]> = {
   ],
   downloads: ['settings.downloads'],
   identities: ['settings.identities'],
+  signatures: ['signatures'],
   vacation: ['settings.vacation'],
   filters: ['settings.filters'],
   templates: ['settings.templates'],
@@ -254,6 +258,7 @@ const tabKeywords: Record<Tab, string> = {
   composing: 'editor signature plain text reply forward draft compose',
   downloads: 'download filename template eml attachment save export',
   identities: 'from address signature email',
+  signatures: 'signature rich text html editor',
   vacation: 'auto reply away out of office holiday responder',
   filters: 'sieve rules block junk forward',
   templates: 'snippet quick reply',
@@ -631,6 +636,7 @@ export default function SettingsPage() {
     { id: 'composing', label: t('tabs.composing'), icon: tabIcons.composing, group: 'mail' },
     { id: 'downloads', label: t('tabs.downloads'), icon: tabIcons.downloads, group: 'mail' },
     { id: 'identities', label: t('tabs.identities'), icon: tabIcons.identities, group: 'mail' },
+    { id: 'signatures', label: t('tabs.signatures'), icon: tabIcons.signatures, group: 'mail' },
     ...(supportsVacation ? [{ id: 'vacation' as Tab, label: t('tabs.vacation'), icon: tabIcons.vacation, group: 'mail' as TabGroup }] : []),
     ...(supportsSieve ? [{ id: 'filters' as Tab, label: t('tabs.filters'), icon: tabIcons.filters, group: 'mail' as TabGroup }] : []),
     ...(isFeatureEnabled('templatesEnabled') ? [{ id: 'templates' as Tab, label: t('tabs.templates'), icon: tabIcons.templates, group: 'mail' as TabGroup }] : []),
@@ -761,6 +767,7 @@ export default function SettingsPage() {
       {effectiveActiveTab === 'composing' && <ComposingSettings />}
       {effectiveActiveTab === 'downloads' && <DownloadsSettings />}
       {effectiveActiveTab === 'identities' && <IdentitySettings />}
+      {effectiveActiveTab === 'signatures' && <SignatureSettings />}
       {effectiveActiveTab === 'vacation' && <VacationSettings />}
       {effectiveActiveTab === 'filters' && <FilterSettings />}
       {effectiveActiveTab === 'templates' && <TemplateSettings />}

components/email/email-composer.tsx

@@ -5,7 +5,7 @@ import { useFocusTrap } from "@/hooks/use-focus-trap";
 import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { X, Paperclip, Send, Save, Check, Loader2, AlertCircle, FileText, BookmarkPlus, CalendarClock, ChevronDown, MailCheck, Search, Users } from "lucide-react";
+import { X, Paperclip, Send, Save, Check, Loader2, AlertCircle, FileText, BookmarkPlus, CalendarClock, ChevronDown, MailCheck, Search, Users, PenLine } from "lucide-react";
 import { cn, formatFileSize, formatDateTime, generateUUID } from "@/lib/utils";
 import { debug } from "@/lib/debug";
 import { toast } from "@/stores/toast-store";
@@ -24,6 +24,7 @@ import { useIdentityStore } from "@/stores/identity-store";
 import { useProMultiAccountIdentities, stripCrossAccountIdentityPrefix } from "@/hooks/use-pro-multi-account-identities";
 import { useAccountStore } from "@/stores/account-store";
 import { useSettingsStore } from "@/stores/settings-store";
+import { useSignatureStore } from "@/stores/signature-store";
 import { PluginSlot } from "@/components/plugins/plugin-slot";
 import { Avatar } from "@/components/ui/avatar";
 import { FilePreviewModal } from "@/components/files/file-preview-modal";
@@ -298,6 +299,34 @@ export function EmailComposer({
   const { isFeatureEnabled } = usePolicyStore();
   const templatesEnabled = isFeatureEnabled('templatesEnabled');
 
+  const {
+    signatures,
+    defaultSignatureId,
+    replySignatureId,
+    getSignatureById,
+    getIdentityDefaultSignatureId,
+    getIdentityReplySignatureId,
+  } = useSignatureStore();
+
+  const resolveStoreSignatureId = (): string | null => {
+    const perIdentityId = selectedIdentityId || initialData?.selectedIdentityId || null;
+    if (mode === 'compose') {
+      if (perIdentityId) {
+        const id = getIdentityDefaultSignatureId(perIdentityId);
+        if (id) return id;
+      }
+      return defaultSignatureId;
+    }
+    if (perIdentityId) {
+      const id = getIdentityReplySignatureId(perIdentityId);
+      if (id) return id;
+    }
+    return replySignatureId ?? defaultSignatureId;
+  };
+
+  const [selectedSignatureId, setSelectedSignatureId] = useState<string | null>(resolveStoreSignatureId);
+  const selectedSignature = selectedSignatureId ? getSignatureById(selectedSignatureId) ?? null : null;
+
   // The signature identity used when embedding the signature into the initial
   // body for "above quote" mode. Mirrors the signatureIdentity derivation
   // below, but uses initialData (or primary) since selectedIdentityId state
@@ -592,6 +621,7 @@ export function EmailComposer({
   // when the user switches identity in "above quote" mode without rebuilding
   // the whole body (which would lose user edits to the surrounding draft).
   const editorRef = useRef<Editor | null>(null);
+  const [editorReady, setEditorReady] = useState(false);
   const prevSignatureIdentityIdRef = useRef<string | null | undefined>(signatureIdentity?.id);
   const prevSignatureSeparatorRef = useRef<boolean>(signatureSeparatorEnabled);
 
@@ -668,6 +698,28 @@ export function EmailComposer({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [signatureIdentity?.id, signatureIdentity?.htmlSignature, signatureIdentity?.textSignature, signatureSeparatorEnabled, signaturePosition, mode, plainTextMode]);
 
+  const sigInsertedRef = useRef(false);
+  useEffect(() => {
+    if (plainTextMode) return;
+    const editor = editorRef.current;
+    if (!editor) return;
+    if (!selectedSignatureId) return;
+    if (sigInsertedRef.current) return;
+    const sig = getSignatureById(selectedSignatureId);
+    if (!sig) return;
+    const currentHtml = serializeEditorContent(editor);
+    if (currentHtml.includes(sig.body)) {
+      sigInsertedRef.current = true;
+      return;
+    }
+    sigInsertedRef.current = true;
+    if (mode === 'compose') {
+      editor.chain().focus('end').insertContent(`<p></p>${sig.body}`).run();
+    } else if ((mode === 'reply' || mode === 'replyAll' || mode === 'forward') && signaturePosition === 'above_quote') {
+      editor.chain().focus('start').insertContent(sig.body).run();
+    }
+  }, [selectedSignatureId, plainTextMode, mode, signaturePosition, getSignatureById, editorReady]);
+
   useEffect(() => {
     const handleClickOutsideSendMenu = (event: MouseEvent) => {
       if (!sendMenuRef.current?.contains(event.target as Node)) {
@@ -2498,7 +2550,7 @@ export function EmailComposer({
               onImageUpload={handleImageUpload}
               placeholder={t('body_placeholder')}
               hasError={validationErrors.body}
-              onEditorReady={(ed) => { editorRef.current = ed; }}
+              onEditorReady={(ed) => { editorRef.current = ed; setEditorReady(true); }}
             />
           </div>
         )}
@@ -2657,8 +2709,53 @@ export function EmailComposer({
             <PluginSlot name="composer-toolbar" />
           </div>
 
-          {/* Right side - Discard + Send (desktop) */}
+          {/* Right side - Signature selector + Discard + Send (desktop) */}
           <div className="flex items-center gap-2">
+            {signatures.length > 0 && (
+              <div className="relative hidden md:inline-flex">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    if (!editorRef.current) return;
+                    const sig = selectedSignature;
+                    if (sig) {
+                      editorRef.current.chain().focus().insertContent(sig.body).run();
+                    }
+                  }}
+                  title={t('insert_signature')}
+                  className="h-8 px-2 text-xs gap-1"
+                  disabled={!selectedSignature}
+                >
+                  <PenLine className="w-4 h-4" />
+                  {selectedSignature?.name ?? t('no_signature')}
+                </Button>
+                <select
+                  value={selectedSignatureId ?? ''}
+                  onChange={(e) => {
+                    const id = e.target.value;
+                    setSelectedSignatureId(id || null);
+                    if (id && editorRef.current) {
+                      const sig = getSignatureById(id);
+                      if (sig) {
+                        editorRef.current.chain().focus().insertContent(sig.body).run();
+                      }
+                    }
+                  }}
+                  className="absolute inset-0 opacity-0 cursor-pointer"
+                  title={t('select_signature')}
+                  aria-label={t('select_signature')}
+                >
+                  <option value="">{t('no_signature')}</option>
+                  {signatures.map((sig) => (
+                    <option key={sig.id} value={sig.id}>
+                      {sig.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
             <button
               type="button"
               onClick={handleClose}

components/identity/identity-form.tsx

@@ -7,6 +7,7 @@ import { Input } from '@/components/ui/input';
 import type { Identity, EmailAddress } from '@/lib/jmap/types';
 import { sanitizeSignatureHtml, sanitizeSignatureHtmlForDisplay } from '@/lib/email-sanitization';
 import { getEmailValidationError, validateEmailList } from '@/lib/validation';
+import { useSignatureStore } from '@/stores/signature-store';
 
 // Stalwarts JMAP Identity/set caps signature fields at 2047 UTF-8 bytes
 const SIGNATURE_MAX_BYTES = 2047;
@@ -73,6 +74,15 @@ export function IdentityForm({ identity, onSave, onCancel }: IdentityFormProps)
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [errors, setErrors] = useState<Record<string, string>>({});
 
+  const {
+    signatures,
+    identitySignatureMap,
+    setIdentitySignature,
+  } = useSignatureStore();
+  const identitySigMapping = identity?.id ? (identitySignatureMap[identity.id] ?? {}) : {};
+  const [sigDefaultId, setSigDefaultId] = useState<string>(identitySigMapping.defaultId ?? '');
+  const [sigReplyId, setSigReplyId] = useState<string>(identitySigMapping.replyId ?? '');
+
   const parseEmailList = (input: string): EmailAddress[] | undefined => {
     if (!input.trim()) return undefined;
 
@@ -134,6 +144,10 @@ export function IdentityForm({ identity, onSave, onCancel }: IdentityFormProps)
       };
 
       await onSave(sanitizedData);
+      if (identity?.id) {
+        setIdentitySignature(identity.id, 'default', sigDefaultId || null);
+        setIdentitySignature(identity.id, 'reply', sigReplyId || null);
+      }
     } finally {
       setIsSubmitting(false);
     }
@@ -266,6 +280,57 @@ export function IdentityForm({ identity, onSave, onCancel }: IdentityFormProps)
         )}
       </div>
 
+      {/* Signature Store Mapping (per-identity) */}
+      {isEditing && signatures.length > 0 && (
+        <div className="border border-border rounded-md p-4 space-y-3 bg-muted/30">
+          <p className="text-sm font-medium text-foreground">{t('signature_store_mapping')}</p>
+          <div>
+            <label htmlFor="identity-sig-default" className="block text-xs text-muted-foreground mb-1">
+              {t('signature_store_default')}
+            </label>
+            <select
+              id="identity-sig-default"
+              value={sigDefaultId}
+              onChange={(e) => {
+                setSigDefaultId(e.target.value);
+                if (identity?.id) {
+                  setIdentitySignature(identity.id, 'default', e.target.value || null);
+                }
+              }}
+              disabled={isSubmitting}
+              className="w-full px-3 py-1.5 text-sm rounded-md bg-muted border border-border text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+            >
+              <option value="">{t('use_global_default')}</option>
+              {signatures.map((sig) => (
+                <option key={sig.id} value={sig.id}>{sig.name}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label htmlFor="identity-sig-reply" className="block text-xs text-muted-foreground mb-1">
+              {t('signature_store_reply')}
+            </label>
+            <select
+              id="identity-sig-reply"
+              value={sigReplyId}
+              onChange={(e) => {
+                setSigReplyId(e.target.value);
+                if (identity?.id) {
+                  setIdentitySignature(identity.id, 'reply', e.target.value || null);
+                }
+              }}
+              disabled={isSubmitting}
+              className="w-full px-3 py-1.5 text-sm rounded-md bg-muted border border-border text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+            >
+              <option value="">{t('use_global_default')}</option>
+              {signatures.map((sig) => (
+                <option key={sig.id} value={sig.id}>{sig.name}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+      )}
+
       {/* Text Signature */}
       <div>
         <label htmlFor="identity-text-sig" className="block text-sm font-medium mb-1">

components/settings/signature-editor-modal.tsx

@@ -0,0 +1,399 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { useTranslations } from 'next-intl';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Paragraph from '@tiptap/extension-paragraph';
+import Underline from '@tiptap/extension-underline';
+import Link from '@tiptap/extension-link';
+import TextAlign from '@tiptap/extension-text-align';
+import { TextStyle } from '@tiptap/extension-text-style';
+import Color from '@tiptap/extension-color';
+import { useFocusTrap } from '@/hooks/use-focus-trap';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+import { htmlToPlainText } from '@/lib/html-to-text';
+import type { Signature } from '@/stores/signature-store';
+import {
+  Bold,
+  Italic,
+  Underline as UnderlineIcon,
+  Strikethrough,
+  List,
+  ListOrdered,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  Link as LinkIcon,
+  Baseline,
+  X,
+} from 'lucide-react';
+
+interface SignatureEditorModalProps {
+  signature?: Signature | null;
+  onSave: (data: { name: string; body: string; plainText: string }) => void;
+  onClose: () => void;
+}
+
+const StyledParagraph = Paragraph.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      style: {
+        default: null as string | null,
+        parseHTML: (el: HTMLElement) => el.getAttribute('style'),
+        renderHTML: (attrs: Record<string, string | null>) =>
+          attrs.style ? { style: attrs.style } : {},
+      },
+      class: {
+        default: null as string | null,
+        parseHTML: (el: HTMLElement) => el.getAttribute('class'),
+        renderHTML: (attrs: Record<string, string | null>) =>
+          attrs.class ? { class: attrs.class } : {},
+      },
+    };
+  },
+});
+
+const TEXT_COLORS = [
+  '#000000', '#5f6368', '#9aa0a6', '#c5221f', '#e8710a', '#f9ab00', '#188038', '#1967d2',
+  '#7627bb', '#c2185b', '#795548', '#fa5252', '#fd7e14', '#40c057', '#4dabf7', '#e64980',
+];
+
+function ToolbarButton({
+  active,
+  onClick,
+  children,
+  title,
+  disabled,
+}: {
+  active?: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+  title: string;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      title={title}
+      className={cn(
+        'p-1.5 rounded hover:bg-accent transition-colors',
+        active && 'bg-accent text-accent-foreground',
+        disabled && 'opacity-40 cursor-not-allowed'
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+function ToolbarSeparator() {
+  return <div className="w-px h-5 bg-border mx-0.5" />;
+}
+
+export function SignatureEditorModal({
+  signature,
+  onSave,
+  onClose,
+}: SignatureEditorModalProps) {
+  const t = useTranslations('signatures');
+  const tCommon = useTranslations('common');
+  const isEditing = !!signature;
+
+  const [name, setName] = useState(signature?.name ?? '');
+  const [nameError, setNameError] = useState('');
+  const [showPreview, setShowPreview] = useState(false);
+  const [colorMenuOpen, setColorMenuOpen] = useState(false);
+
+  const dialogRef = useFocusTrap({
+    isActive: true,
+    onEscape: onClose,
+    restoreFocus: true,
+  });
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        heading: false,
+        paragraph: false,
+        link: false,
+        underline: false,
+        codeBlock: false,
+      }),
+      StyledParagraph,
+      Underline,
+      Link.configure({
+        openOnClick: false,
+        HTMLAttributes: { rel: 'noopener noreferrer nofollow' },
+      }),
+      TextAlign.configure({
+        types: ['paragraph'],
+      }),
+      TextStyle,
+      Color,
+    ],
+    content: signature?.body ?? '<p></p>',
+    editorProps: {
+      attributes: {
+        class: 'tiptap min-h-[120px] px-3 py-2 text-sm text-foreground focus:outline-none',
+      },
+    },
+    immediatelyRender: false,
+  });
+
+  const addLink = useCallback(() => {
+    if (!editor) return;
+    const previousUrl = editor.getAttributes('link').href;
+    const url = window.prompt('URL', previousUrl);
+    if (url === null) return;
+    if (url === '') {
+      editor.chain().focus().extendMarkRange('link').unsetLink().run();
+      return;
+    }
+    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+  }, [editor]);
+
+  const handleSave = () => {
+    const trimmedName = name.trim();
+    if (!trimmedName) {
+      setNameError(t('name_required'));
+      return;
+    }
+    const html = editor?.getHTML() ?? '<p></p>';
+    const plainText = htmlToPlainText(html);
+    onSave({ name: trimmedName, body: html, plainText });
+  };
+
+  const bodyHtml = editor?.getHTML() ?? '';
+  const bodyPlainText = htmlToPlainText(bodyHtml);
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-start justify-center z-[60] p-4 pt-[10vh] animate-in fade-in duration-150">
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        className="bg-background border border-border rounded-lg shadow-xl w-full max-w-2xl animate-in zoom-in-95 duration-200"
+      >
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+          <h2 className="text-lg font-semibold text-foreground">
+            {isEditing ? t('edit_signature') : t('new_signature')}
+          </h2>
+          <Button variant="ghost" size="icon" onClick={onClose} className="h-8 w-8">
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+
+        <div className="p-6 space-y-4 max-h-[70vh] overflow-y-auto">
+          <div>
+            <label htmlFor="sig-name" className="block text-sm font-medium mb-1">
+              {t('name_label')}
+            </label>
+            <Input
+              id="sig-name"
+              type="text"
+              value={name}
+              onChange={(e) => {
+                setName(e.target.value);
+                if (nameError) setNameError('');
+              }}
+              placeholder={t('name_placeholder')}
+              className={cn(nameError && 'border-destructive')}
+              aria-invalid={!!nameError}
+              aria-describedby={nameError ? 'sig-name-error' : undefined}
+            />
+            {nameError && (
+              <p id="sig-name-error" className="text-sm text-destructive mt-1" role="alert">
+                {nameError}
+              </p>
+            )}
+          </div>
+
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-sm font-medium">{t('editor_label')}</span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowPreview(!showPreview)}
+                className="h-7 text-xs"
+              >
+                {showPreview ? t('show_editor') : t('show_preview')}
+              </Button>
+            </div>
+
+            {showPreview ? (
+              <div className="border border-border rounded-md bg-muted/30 p-4 min-h-[200px]">
+                <div className="text-xs text-muted-foreground mb-2 font-medium">
+                  {t('html_preview_label')}
+                </div>
+                <div
+                  className="text-sm text-foreground [&_a]:text-primary [&_a]:underline-offset-2"
+                  dangerouslySetInnerHTML={{ __html: bodyHtml }}
+                />
+                <div className="mt-4 pt-4 border-t border-border">
+                  <div className="text-xs text-muted-foreground mb-2 font-medium">
+                    {t('plain_text_preview_label')}
+                  </div>
+                  <pre className="text-sm text-foreground whitespace-pre-wrap font-sans">
+                    {bodyPlainText}
+                  </pre>
+                </div>
+              </div>
+            ) : (
+              <div className={cn('flex flex-col border border-border rounded-md overflow-hidden')}>
+                <div className="flex flex-wrap items-center gap-0.5 px-3 py-1.5 border-b border-border/50 bg-muted/30">
+                  <ToolbarButton
+                    active={editor?.isActive('bold')}
+                    onClick={() => editor?.chain().focus().toggleBold().run()}
+                    title={t('toolbar.bold')}
+                  >
+                    <Bold className="w-4 h-4" />
+                  </ToolbarButton>
+                  <ToolbarButton
+                    active={editor?.isActive('italic')}
+                    onClick={() => editor?.chain().focus().toggleItalic().run()}
+                    title={t('toolbar.italic')}
+                  >
+                    <Italic className="w-4 h-4" />
+                  </ToolbarButton>
+                  <ToolbarButton
+                    active={editor?.isActive('underline')}
+                    onClick={() => editor?.chain().focus().toggleUnderline().run()}
+                    title={t('toolbar.underline')}
+                  >
+                    <UnderlineIcon className="w-4 h-4" />
+                  </ToolbarButton>
+                  <ToolbarButton
+                    active={editor?.isActive('strike')}
+                    onClick={() => editor?.chain().focus().toggleStrike().run()}
+                    title={t('toolbar.strikethrough')}
+                  >
+                    <Strikethrough className="w-4 h-4" />
+                  </ToolbarButton>
+
+                  <div className="relative">
+                    <ToolbarButton
+                      active={!!editor?.getAttributes('textStyle').color}
+                      onClick={() => setColorMenuOpen((v) => !v)}
+                      title={t('toolbar.text_color')}
+                    >
+                      <Baseline
+                        className="w-4 h-4"
+                        style={{ color: editor?.getAttributes('textStyle').color || undefined }}
+                      />
+                    </ToolbarButton>
+                    {colorMenuOpen && (
+                      <div className="absolute z-50 top-full start-0 mt-1 bg-popover border border-border rounded-md shadow-md p-2">
+                        <div
+                          className="grid gap-0.5"
+                          style={{ gridTemplateColumns: 'repeat(8, 1fr)' }}
+                        >
+                          {TEXT_COLORS.map((color) => (
+                            <button
+                              key={color}
+                              type="button"
+                              title={color}
+                              onClick={() => {
+                                editor?.chain().focus().setColor(color).run();
+                                setColorMenuOpen(false);
+                              }}
+                              className={cn(
+                                'w-4 h-4 border border-border/60 rounded-[2px] transition-transform hover:scale-110',
+                                editor?.getAttributes('textStyle').color === color &&
+                                  'ring-1 ring-ring ring-offset-1'
+                              )}
+                              style={{ backgroundColor: color }}
+                            />
+                          ))}
+                        </div>
+                        <div className="h-px bg-border my-1.5" />
+                        <button
+                          type="button"
+                          className="flex items-center gap-2 px-2 py-1 text-sm rounded hover:bg-accent text-start w-full"
+                          onClick={() => {
+                            editor?.chain().focus().unsetColor().run();
+                            setColorMenuOpen(false);
+                          }}
+                        >
+                          {t('toolbar.remove_color')}
+                        </button>
+                      </div>
+                    )}
+                  </div>
+
+                  <ToolbarSeparator />
+
+                  <ToolbarButton
+                    active={editor?.isActive('bulletList')}
+                    onClick={() => editor?.chain().focus().toggleBulletList().run()}
+                    title={t('toolbar.bullet_list')}
+                  >
+                    <List className="w-4 h-4" />
+                  </ToolbarButton>
+                  <ToolbarButton
+                    active={editor?.isActive('orderedList')}
+                    onClick={() => editor?.chain().focus().toggleOrderedList().run()}
+                    title={t('toolbar.ordered_list')}
+                  >
+                    <ListOrdered className="w-4 h-4" />
+                  </ToolbarButton>
+
+                  <ToolbarSeparator />
+
+                  <ToolbarButton
+                    active={editor?.isActive({ textAlign: 'left' })}
+                    onClick={() => editor?.chain().focus().setTextAlign('left').run()}
+                    title={t('toolbar.align_left')}
+                  >
+                    <AlignLeft className="w-4 h-4" />
+                  </ToolbarButton>
+                  <ToolbarButton
+                    active={editor?.isActive({ textAlign: 'center' })}
+                    onClick={() => editor?.chain().focus().setTextAlign('center').run()}
+                    title={t('toolbar.align_center')}
+                  >
+                    <AlignCenter className="w-4 h-4" />
+                  </ToolbarButton>
+                  <ToolbarButton
+                    active={editor?.isActive({ textAlign: 'right' })}
+                    onClick={() => editor?.chain().focus().setTextAlign('right').run()}
+                    title={t('toolbar.align_right')}
+                  >
+                    <AlignRight className="w-4 h-4" />
+                  </ToolbarButton>
+
+                  <ToolbarSeparator />
+
+                  <ToolbarButton
+                    active={editor?.isActive('link')}
+                    onClick={addLink}
+                    title={t('toolbar.link')}
+                  >
+                    <LinkIcon className="w-4 h-4" />
+                  </ToolbarButton>
+                </div>
+                <EditorContent editor={editor} />
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end gap-3 px-6 pb-6">
+          <Button variant="outline" onClick={onClose}>
+            {tCommon('cancel')}
+          </Button>
+          <Button onClick={handleSave}>
+            {tCommon('save')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

components/settings/signature-settings.tsx

@@ -0,0 +1,273 @@
+'use client';
+
+import { useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { Button } from '@/components/ui/button';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
+import { SettingsSection, SettingItem, Select } from './settings-section';
+import { SignatureEditorModal } from './signature-editor-modal';
+import { useSignatureStore, type Signature } from '@/stores/signature-store';
+import { useIdentityStore } from '@/stores/identity-store';
+import { truncateText } from '@/lib/utils';
+import {
+  Plus,
+  Pencil,
+  Copy,
+  Trash2,
+  ChevronRight,
+} from 'lucide-react';
+
+export function SignatureSettings() {
+  const t = useTranslations('signatures');
+  const tCommon = useTranslations('common');
+  const {
+    signatures,
+    defaultSignatureId,
+    replySignatureId,
+    identitySignatureMap,
+    addSignature,
+    updateSignature,
+    deleteSignature,
+    duplicateSignature,
+    setDefaultSignatureId,
+    setReplySignatureId,
+    setIdentitySignature,
+  } = useSignatureStore();
+  const identities = useIdentityStore((s) => s.identities);
+
+  const [editingSignature, setEditingSignature] = useState<Signature | null>(null);
+  const [showEditor, setShowEditor] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<Signature | null>(null);
+
+  const handleAdd = () => {
+    setEditingSignature(null);
+    setShowEditor(true);
+  };
+
+  const handleEdit = (sig: Signature) => {
+    setEditingSignature(sig);
+    setShowEditor(true);
+  };
+
+  const handleDuplicate = (id: string) => {
+    duplicateSignature(id);
+  };
+
+  const handleDeleteConfirm = () => {
+    if (deleteTarget) {
+      deleteSignature(deleteTarget.id);
+      setDeleteTarget(null);
+    }
+  };
+
+  const handleSave = (data: { name: string; body: string; plainText: string }) => {
+    if (editingSignature) {
+      updateSignature(editingSignature.id, data);
+    } else {
+      addSignature(data);
+    }
+    setShowEditor(false);
+    setEditingSignature(null);
+  };
+
+  const signatureOptions = [
+    { value: '', label: t('no_signature') },
+    ...signatures.map((sig) => ({ value: sig.id, label: sig.name })),
+  ];
+
+  return (
+    <>
+      <SettingsSection title={t('title')} description={t('description')}>
+        <SettingItem
+          label={t('default_signature.label')}
+          description={t('default_signature.description')}
+        >
+          <div className="flex items-center gap-2">
+            <Select
+              value={defaultSignatureId ?? ''}
+              onChange={(value) => setDefaultSignatureId(value || null)}
+              options={signatureOptions}
+              ariaLabel={t('default_signature.label')}
+            />
+          </div>
+        </SettingItem>
+
+        <SettingItem
+          label={t('reply_signature.label')}
+          description={t('reply_signature.description')}
+        >
+          <div className="flex items-center gap-2">
+            <Select
+              value={replySignatureId ?? ''}
+              onChange={(value) => setReplySignatureId(value || null)}
+              options={signatureOptions}
+              ariaLabel={t('reply_signature.label')}
+            />
+          </div>
+        </SettingItem>
+
+        {identities.length > 0 && (
+          <SettingItem
+            label={t('per_identity_signatures.label')}
+            description={t('per_identity_signatures.description')}
+          >
+            <div className="space-y-2 max-w-xs">
+              {identities.map((identity) => {
+                const mapping = identitySignatureMap[identity.id] ?? {};
+                const identitySigOptions = [
+                  { value: '', label: t('use_global_default') },
+                  ...signatures.map((sig) => ({ value: sig.id, label: sig.name })),
+                ];
+                return (
+                  <div key={identity.id} className="border border-border rounded-md p-3 space-y-2">
+                    <span className="text-sm font-medium block truncate">
+                      {identity.name ? `${identity.name} <${identity.email}>` : identity.email}
+                    </span>
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs text-muted-foreground w-16 shrink-0">
+                        {t('default')}
+                      </span>
+                      <select
+                        value={mapping.defaultId ?? ''}
+                        onChange={(e) =>
+                          setIdentitySignature(identity.id, 'default', e.target.value || null)
+                        }
+                        className="flex-1 px-2 py-1 text-xs rounded-md bg-muted border border-border text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                      >
+                        {identitySigOptions.map((opt) => (
+                          <option key={opt.value} value={opt.value}>
+                            {opt.label}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs text-muted-foreground w-16 shrink-0">
+                        {t('reply')}
+                      </span>
+                      <select
+                        value={mapping.replyId ?? ''}
+                        onChange={(e) =>
+                          setIdentitySignature(identity.id, 'reply', e.target.value || null)
+                        }
+                        className="flex-1 px-2 py-1 text-xs rounded-md bg-muted border border-border text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                      >
+                        {identitySigOptions.map((opt) => (
+                          <option key={opt.value} value={opt.value}>
+                            {opt.label}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </SettingItem>
+        )}
+
+        <div className="pt-2">
+          <div className="flex items-center justify-between mb-3">
+            <h4 className="text-sm font-medium text-foreground">
+              {t('your_signatures', { count: signatures.length })}
+            </h4>
+            <Button size="sm" onClick={handleAdd}>
+              <Plus className="w-4 h-4 me-1" />
+              {t('add_signature')}
+            </Button>
+          </div>
+
+          {signatures.length === 0 ? (
+            <p className="text-sm text-muted-foreground py-4 text-center">
+              {t('no_signatures')}
+            </p>
+          ) : (
+            <div className="border border-border rounded-md divide-y divide-border">
+              {signatures.map((sig) => (
+                <div
+                  key={sig.id}
+                  className="flex items-center justify-between px-4 py-3 hover:bg-muted/50 transition-colors"
+                >
+                  <button
+                    type="button"
+                    className="flex-1 flex items-center gap-3 min-w-0 text-start"
+                    onClick={() => handleEdit(sig)}
+                  >
+                    <div className="min-w-0 flex-1">
+                      <div className="text-sm font-medium text-foreground truncate">
+                        {sig.name}
+                      </div>
+                      <div className="text-xs text-muted-foreground truncate mt-0.5">
+                        {truncateText(sig.plainText, 80)}
+                      </div>
+                    </div>
+                    <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
+                  </button>
+                  <div className="flex items-center gap-0.5 ml-2 shrink-0">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDuplicate(sig.id);
+                      }}
+                      title={t('duplicate')}
+                      className="h-8 w-8 p-0"
+                    >
+                      <Copy className="w-4 h-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleEdit(sig);
+                      }}
+                      title={tCommon('edit')}
+                      className="h-8 w-8 p-0"
+                    >
+                      <Pencil className="w-4 h-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setDeleteTarget(sig);
+                      }}
+                      title={tCommon('delete')}
+                      className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </SettingsSection>
+
+      {showEditor && (
+        <SignatureEditorModal
+          signature={editingSignature}
+          onSave={handleSave}
+          onClose={() => {
+            setShowEditor(false);
+            setEditingSignature(null);
+          }}
+        />
+      )}
+
+      <ConfirmDialog
+        isOpen={!!deleteTarget}
+        onClose={() => setDeleteTarget(null)}
+        onConfirm={handleDeleteConfirm}
+        title={t('delete_title')}
+        message={t('delete_message', { name: deleteTarget?.name ?? '' })}
+        variant="destructive"
+        confirmText={tCommon('delete')}
+      />
+    </>
+  );
+}

stores/signature-store.ts

@@ -0,0 +1,131 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { generateUUID } from '@/lib/utils';
+
+export interface Signature {
+  id: string;
+  name: string;
+  body: string;
+  plainText: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface SignatureState {
+  signatures: Signature[];
+  defaultSignatureId: string | null;
+  replySignatureId: string | null;
+  identitySignatureMap: Record<string, { defaultId?: string; replyId?: string }>;
+  addSignature: (sig: Omit<Signature, 'id' | 'createdAt' | 'updatedAt'>) => Signature;
+  updateSignature: (id: string, updates: Partial<Pick<Signature, 'name' | 'body' | 'plainText'>>) => void;
+  deleteSignature: (id: string) => void;
+  duplicateSignature: (id: string) => Signature;
+  setDefaultSignatureId: (id: string | null) => void;
+  setReplySignatureId: (id: string | null) => void;
+  getSignatureById: (id: string) => Signature | undefined;
+  setIdentitySignature: (identityId: string, type: 'default' | 'reply', signatureId: string | null) => void;
+  getIdentityDefaultSignatureId: (identityId: string) => string | null;
+  getIdentityReplySignatureId: (identityId: string) => string | null;
+}
+
+export const useSignatureStore = create<SignatureState>()(
+  persist(
+    (set, get) => ({
+      signatures: [],
+      defaultSignatureId: null,
+      replySignatureId: null,
+      identitySignatureMap: {},
+
+      addSignature: (sig) => {
+        const now = new Date().toISOString();
+        const newSig: Signature = {
+          ...sig,
+          id: generateUUID(),
+          createdAt: now,
+          updatedAt: now,
+        };
+        set((state) => ({
+          signatures: [...state.signatures, newSig],
+        }));
+        return newSig;
+      },
+
+      updateSignature: (id, updates) => {
+        set((state) => ({
+          signatures: state.signatures.map((s) =>
+            s.id === id
+              ? { ...s, ...updates, updatedAt: new Date().toISOString() }
+              : s
+          ),
+        }));
+      },
+
+      deleteSignature: (id) => {
+        set((state) => ({
+          signatures: state.signatures.filter((s) => s.id !== id),
+          defaultSignatureId: state.defaultSignatureId === id ? null : state.defaultSignatureId,
+          replySignatureId: state.replySignatureId === id ? null : state.replySignatureId,
+        }));
+      },
+
+      duplicateSignature: (id) => {
+        const original = get().signatures.find((s) => s.id === id);
+        if (!original) {
+          throw new Error(`Signature with id ${id} not found`);
+        }
+        const now = new Date().toISOString();
+        const duplicate: Signature = {
+          ...original,
+          id: generateUUID(),
+          name: `${original.name} (copy)`,
+          createdAt: now,
+          updatedAt: now,
+        };
+        set((state) => ({
+          signatures: [...state.signatures, duplicate],
+        }));
+        return duplicate;
+      },
+
+      setDefaultSignatureId: (id) => {
+        set({ defaultSignatureId: id });
+      },
+
+      setReplySignatureId: (id) => {
+        set({ replySignatureId: id });
+      },
+
+      getSignatureById: (id) => {
+        return get().signatures.find((s) => s.id === id);
+      },
+
+      setIdentitySignature: (identityId, type, signatureId) => {
+        set((state) => {
+          const current = state.identitySignatureMap[identityId] ?? {};
+          const updated = {
+            ...current,
+            [type === 'default' ? 'defaultId' : 'replyId']: signatureId ?? undefined,
+          };
+          if (updated.defaultId === undefined && updated.replyId === undefined) {
+            const { [identityId]: _, ...rest } = state.identitySignatureMap;
+            return { identitySignatureMap: rest };
+          }
+          return { identitySignatureMap: { ...state.identitySignatureMap, [identityId]: updated } };
+        });
+      },
+
+      getIdentityDefaultSignatureId: (identityId) => {
+        const entry = get().identitySignatureMap[identityId];
+        return entry?.defaultId ?? get().defaultSignatureId;
+      },
+
+      getIdentityReplySignatureId: (identityId) => {
+        const entry = get().identitySignatureMap[identityId];
+        return entry?.replyId ?? get().replySignatureId ?? get().defaultSignatureId;
+      },
+    }),
+    {
+      name: 'signature-storage',
+    }
+  )
+);