fix: put the template, placeholder and composer dialogs on the shared dialog: close X at the end, Escape, outside click, and a discard prompt for typed changes

2026-11-03 16:16:59 +00:00 · 2026-10-28 07:13:34 +01:00
parent e2908676ec
commit 30a863c79d
35 changed files with 617 additions and 492 deletions
@@ -226,4 +226,12 @@ describe('composer title', () => {
    render(<EmailComposer initialData={{ ...DATA, mode: 'compose' }} />);
    expect(screen.getByRole('button', { name: 'close' })).toBeInTheDocument();
  });
+
+  // R4: Close at the top end. On a phone it moves to the start (Send is at the end there).
+  it('puts Close at the end of the header, and at the start only on a phone', () => {
+    render(<EmailComposer initialData={{ ...DATA, mode: 'compose' }} />);
+    const close = screen.getByRole('button', { name: 'close' });
+    expect(close.parentElement!.lastElementChild).toBe(close);
+    expect(close.className).toContain('max-md:order-first');
+  });
 });
@@ -2,10 +2,12 @@

 import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import { useMvComposeWindow } from "@/components/email/mv-compose-context";
-import { useFocusTrap } from "@/hooks/use-focus-trap";
 import { useTranslations } from "next-intl";
 import { Button, TOUCH_HIT_AREA } from "@/components/ui/button";
 import { ConfirmDialog } from "@/components/ui/confirm-dialog";
+import { Dialog } from "@/components/ui/dialog";
+import { IconButton } from "@/components/ui/icon-button";
+import { useDiscardChanges } from "@/components/settings/use-discard-changes";
 import { useConfirmDialog } from "@/hooks/use-confirm-dialog";
 import { Input } from "@/components/ui/input";
 import {
@@ -970,35 +972,14 @@ export function EmailComposer({
  const sendMenuRef = useRef<HTMLDivElement>(null);
  const mobileSendMenuRef = useRef<HTMLDivElement>(null);

-  const saveTemplateModalRef = useFocusTrap({
-    isActive: showSaveAsTemplate,
-    onEscape: () => setShowSaveAsTemplate(false),
-    restoreFocus: true,
-  });
-
-  const closeDialogRef = useFocusTrap({
-    isActive: showCloseDialog,
-    onEscape: () => dismissCloseDialog(),
-    restoreFocus: true,
-  });
-
-  const attachmentWarningRef = useFocusTrap({
-    isActive: showAttachmentWarning,
-    onEscape: () => setShowAttachmentWarning(false),
-    restoreFocus: true,
-  });
-
-  const emptySubjectWarningRef = useFocusTrap({
-    isActive: showEmptySubjectWarning,
-    onEscape: () => setShowEmptySubjectWarning(false),
-    restoreFocus: true,
-  });
-
-  const placeholderWarningRef = useFocusTrap({
-    isActive: showPlaceholderWarning,
-    onEscape: () => setShowPlaceholderWarning(false),
-    restoreFocus: true,
-  });
+  // Save as template: changes made in its form are asked about before it closes (R5).
+  const [saveTemplateDirty, setSaveTemplateDirty] = useState(false);
+  const { confirmDiscard: confirmDiscardTemplate, discardDialog: discardTemplateDialog } = useDiscardChanges();
+  const closeSaveAsTemplate = async () => {
+    if (!(await confirmDiscardTemplate(saveTemplateDirty))) return;
+    setSaveTemplateDirty(false);
+    setShowSaveAsTemplate(false);
+  };

  const { client: activeClient } = useAuthStore();
  const composerOwnClientRef = useRef(activeClient);
@@ -3861,11 +3842,8 @@ export function EmailComposer({
          </button>
        </div>
      ) : (
-      <div className="flex items-center justify-between px-4 py-2 md:py-3 border-b bg-background">
-        <div className="flex items-center gap-3">
-          <Button variant="ghost" size="icon" onClick={() => handleClose()} className="h-11 w-11 -ms-2 md:ms-0 md:h-8 md:w-8" aria-label={tCommon('close')} title={tCommon('close')}>
-            <X className="w-5 h-5 md:w-4 md:h-4" />
-          </Button>
+      <div className="flex items-center gap-3 px-4 py-2 md:py-3 border-b bg-background">
+        <div className="flex-1 min-w-0 flex items-center gap-3">
          <div className="flex items-center gap-2" data-testid="composer-save-status" data-status={saveStatus}>
            <h3 className="font-semibold text-base">
              {mode === 'reply' ? t('reply') : mode === 'replyAll' ? t('reply_all') : mode === 'forward' ? t('forward') : t('new_message')}
@@ -3952,6 +3930,16 @@ export function EmailComposer({
            {t('send')}
          </Button>
        )}
+        {/* Close at the top end (R4). On a phone it moves to the start, as
+            the phone's mail apps have it, with Send at the end. */}
+        <IconButton
+          onClick={() => handleClose()}
+          className="-me-2 max-md:order-first max-md:me-0 max-md:-ms-2 max-md:h-11 max-md:w-11"
+          label={tCommon('close')}
+          data-testid="composer-close"
+        >
+          <X className="w-5 h-5 md:w-4 md:h-4" />
+        </IconButton>
      </div>
      )}

@@ -4709,14 +4697,15 @@ export function EmailComposer({
      )}

      {showSaveAsTemplate && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 animate-in fade-in duration-150">
-          <div
-            ref={saveTemplateModalRef}
-            role="dialog"
-            aria-modal="true"
-            className="bg-background border border-border rounded-lg shadow-xl w-full max-w-lg p-6 animate-in zoom-in-95 duration-200"
-          >
-            <h3 className="text-lg font-semibold text-foreground mb-4">{t('save_as_template')}</h3>
+        <Dialog
+          isOpen
+          onClose={() => void closeSaveAsTemplate()}
+          title={t('save_as_template')}
+          size="lg"
+          dirty={saveTemplateDirty}
+          testId="save-as-template"
+        >
+          <div className="pt-4">
            <TemplateForm
              initialData={{
                subject,
@@ -4727,13 +4716,16 @@ export function EmailComposer({
              }}
              onSave={(data) => {
                addTemplate(data);
+                setSaveTemplateDirty(false);
                setShowSaveAsTemplate(false);
              }}
-              onCancel={() => setShowSaveAsTemplate(false)}
+              onCancel={() => void closeSaveAsTemplate()}
+              onDirtyChange={setSaveTemplateDirty}
            />
          </div>
-        </div>
+        </Dialog>
      )}
+      {discardTemplateDialog}

      <ScheduleSendDialog
        isOpen={showScheduleDialog}
@@ -4744,62 +4736,34 @@ export function EmailComposer({
        disabled={!canSend || isSending}
      />

-      {showAttachmentWarning && (
-        <div
-          className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150"
-          onClick={() => setShowAttachmentWarning(false)}
-        >
-          <div
-            ref={attachmentWarningRef}
-            role="alertdialog"
-            aria-modal="true"
-            onClick={(e) => e.stopPropagation()}
-            className="bg-background border border-border rounded-lg shadow-xl w-full max-w-md animate-in zoom-in-95 duration-200"
-          >
-            <div className="p-6">
-              <h2 className="text-lg font-semibold text-foreground">{t('forgot_attachment.title')}</h2>
-              <p className="mt-2 text-sm text-muted-foreground">
-                {t('forgot_attachment.message', { keyword: attachmentWarningKeyword })}
-              </p>
-            </div>
-            <div className="flex items-center justify-end gap-3 px-6 pb-6">
-              <Button variant="outline" onClick={() => setShowAttachmentWarning(false)}>
-                {t('forgot_attachment.back')}
-              </Button>
-              <Button onClick={() => { setShowAttachmentWarning(false); handleSend({ skipAttachmentCheck: true, skipSubjectCheck: true, delayedUntil: attachmentWarningDelayedUntil }); setAttachmentWarningDelayedUntil(undefined); }}>
-                {t('forgot_attachment.send_anyway')}
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
+      <Dialog
+        isOpen={showAttachmentWarning}
+        onClose={() => setShowAttachmentWarning(false)}
+        role="alertdialog"
+        showClose={false}
+        title={t('forgot_attachment.title')}
+        description={t('forgot_attachment.message', { keyword: attachmentWarningKeyword })}
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setShowAttachmentWarning(false)}>
+              {t('forgot_attachment.back')}
+            </Button>
+            <Button onClick={() => { setShowAttachmentWarning(false); handleSend({ skipAttachmentCheck: true, skipSubjectCheck: true, delayedUntil: attachmentWarningDelayedUntil }); setAttachmentWarningDelayedUntil(undefined); }}>
+              {t('forgot_attachment.send_anyway')}
+            </Button>
+          </>
+        }
+      />

-      {showEmptySubjectWarning && (
-        <div
-          className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150"
-          onClick={() => setShowEmptySubjectWarning(false)}
-        >
-          <div
-            ref={emptySubjectWarningRef}
-            role="alertdialog"
-            aria-modal="true"
-            onClick={(e) => e.stopPropagation()}
-            className="bg-background border border-border rounded-lg shadow-xl w-full max-w-md animate-in zoom-in-95 duration-200"
-          >
-            <div className="p-6">
-              <h2 className="text-lg font-semibold text-foreground">{t('empty_subject.title')}</h2>
-              <p className="mt-2 text-sm text-muted-foreground">{t('empty_subject.message')}</p>
-              <label className="mt-4 flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={emptySubjectDontAskAgain}
-                  onChange={(e) => setEmptySubjectDontAskAgain(e.target.checked)}
-                  className="rounded border-input"
-                />
-                {t('empty_subject.dont_ask_again')}
-              </label>
-            </div>
-            <div className="flex items-center justify-end gap-3 px-6 pb-6">
+      <Dialog
+        isOpen={showEmptySubjectWarning}
+        onClose={() => setShowEmptySubjectWarning(false)}
+        role="alertdialog"
+        showClose={false}
+        title={t('empty_subject.title')}
+        description={t('empty_subject.message')}
+        footer={
+            <>
              <Button
                variant="outline"
                onClick={() => {
@@ -4823,50 +4787,31 @@ export function EmailComposer({
              >
                {t('empty_subject.send_anyway')}
              </Button>
-            </div>
-          </div>
-        </div>
-      )}
+            </>
+        }
+      >
+        <label className="mt-4 flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
+          <input
+            type="checkbox"
+            checked={emptySubjectDontAskAgain}
+            onChange={(e) => setEmptySubjectDontAskAgain(e.target.checked)}
+            className="rounded border-input"
+          />
+          {t('empty_subject.dont_ask_again')}
+        </label>
+      </Dialog>

      <ConfirmDialog {...noDelayDialogProps} />

-      {showPlaceholderWarning && (
-        <div
-          className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150"
-          onClick={() => setShowPlaceholderWarning(false)}
-        >
-          <div
-            ref={placeholderWarningRef}
-            role="alertdialog"
-            aria-modal="true"
-            aria-labelledby="placeholder-warning-title"
-            onClick={(e) => e.stopPropagation()}
-            className="bg-background border border-border rounded-lg shadow-xl w-full max-w-md animate-in zoom-in-95 duration-200"
-          >
-            <div className="p-6">
-              <h2 id="placeholder-warning-title" className="text-lg font-semibold text-foreground">{t('placeholder_warning.title')}</h2>
-              <p className="mt-2 text-sm text-muted-foreground">{t('placeholder_warning.message')}</p>
-              <ul className="mt-3 flex flex-wrap items-center gap-1.5" aria-label={t('placeholder_warning.found')}>
-                {placeholderWarningMatches.slice(0, 5).map((p) => (
-                  <li key={p} className="max-w-full truncate rounded bg-muted px-2 py-0.5 font-mono text-xs text-foreground">{p}</li>
-                ))}
-                {placeholderWarningMatches.length > 5 && (
-                  <li className="text-xs text-muted-foreground">
-                    {t('placeholder_warning.more', { count: placeholderWarningMatches.length - 5 })}
-                  </li>
-                )}
-              </ul>
-              <label className="mt-4 flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={placeholderDontAskAgain}
-                  onChange={(e) => setPlaceholderDontAskAgain(e.target.checked)}
-                  className="rounded border-input"
-                />
-                {t('placeholder_warning.dont_ask_again')}
-              </label>
-            </div>
-            <div className="flex items-center justify-end gap-3 px-6 pb-6">
+      <Dialog
+        isOpen={showPlaceholderWarning}
+        onClose={() => setShowPlaceholderWarning(false)}
+        role="alertdialog"
+        showClose={false}
+        title={t('placeholder_warning.title')}
+        description={t('placeholder_warning.message')}
+        footer={
+            <>
              <Button
                variant="outline"
                onClick={() => {
@@ -4891,48 +4836,54 @@ export function EmailComposer({
              >
                {t('placeholder_warning.send_anyway')}
              </Button>
-            </div>
-          </div>
-        </div>
-      )}
+            </>
+        }
+      >
+        <ul className="mt-3 flex flex-wrap items-center gap-1.5" aria-label={t('placeholder_warning.found')}>
+          {placeholderWarningMatches.slice(0, 5).map((p) => (
+            <li key={p} className="max-w-full truncate rounded bg-muted px-2 py-0.5 font-mono text-xs text-foreground">{p}</li>
+          ))}
+          {placeholderWarningMatches.length > 5 && (
+            <li className="text-xs text-muted-foreground">
+              {t('placeholder_warning.more', { count: placeholderWarningMatches.length - 5 })}
+            </li>
+          )}
+        </ul>
+        <label className="mt-4 flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
+          <input
+            type="checkbox"
+            checked={placeholderDontAskAgain}
+            onChange={(e) => setPlaceholderDontAskAgain(e.target.checked)}
+            className="rounded border-input"
+          />
+          {t('placeholder_warning.dont_ask_again')}
+        </label>
+      </Dialog>

-      {showCloseDialog && (
-        <div
-          className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150"
-          onClick={() => dismissCloseDialog()}
-        >
-          <div
-            ref={closeDialogRef}
-            role="alertdialog"
-            aria-modal="true"
-            onClick={(e) => e.stopPropagation()}
-            className="bg-background border border-border rounded-lg shadow-xl w-full max-w-md animate-in zoom-in-95 duration-200"
-          >
-            <div className="p-6">
-              <h2 className="text-lg font-semibold text-foreground">
-                {closeDialogKind === 'discard' ? t('discard_draft_title') : t('close_draft_title')}
-              </h2>
-              <p className="mt-2 text-sm text-muted-foreground">
-                {closeDialogKind === 'discard' ? t('discard_draft_message') : t('close_draft_message')}
-              </p>
-            </div>
-            <div className="flex items-center justify-end gap-3 px-6 pb-6">
-              <Button variant="outline" onClick={() => dismissCloseDialog()}>
-                {t('cancel')}
+      <Dialog
+        isOpen={showCloseDialog}
+        onClose={() => dismissCloseDialog()}
+        role="alertdialog"
+        showClose={false}
+        title={closeDialogKind === 'discard' ? t('discard_draft_title') : t('close_draft_title')}
+        description={closeDialogKind === 'discard' ? t('discard_draft_message') : t('close_draft_message')}
+        footer={
+          <>
+            <Button variant="outline" onClick={() => dismissCloseDialog()}>
+              {t('cancel')}
+            </Button>
+            <Button variant="destructive" onClick={handleDiscardAndClose}>
+              {t('discard')}
+            </Button>
+            {closeDialogKind === 'close' && (
+              <Button onClick={handleSaveDraftAndClose}>
+                <Save className="w-4 h-4 me-2" />
+                {tCommon('save')}
              </Button>
-              <Button variant="destructive" onClick={handleDiscardAndClose}>
-                {t('discard')}
-              </Button>
-              {closeDialogKind === 'close' && (
-                <Button onClick={handleSaveDraftAndClose}>
-                  <Save className="w-4 h-4 me-2" />
-                  {tCommon('save')}
-                </Button>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
+            )}
+          </>
+        }
+      />

      {previewAttachment && (
        <FilePreviewModal
@@ -0,0 +1,132 @@
+import { fireEvent, render, screen, act } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useTemplateStore } from '@/stores/template-store';
+import type { EmailTemplate } from '@/lib/template-types';
+
+// The template dialogs sit on the Dialog shell (R4): close X, Escape,
+// outside click, and "Discard changes?" when they hold unsaved input (R5).
+
+const { TemplateManagerModal } = await import('../template-manager-modal');
+const { PlaceholderFillModal } = await import('../placeholder-fill-modal');
+
+const template: EmailTemplate = {
+  id: 'tpl-1',
+  name: 'Follow-up',
+  subject: 'Hello {{recipient_name}}',
+  body: 'Hi {{recipient_name}}',
+  isHTML: false,
+  category: '',
+  isFavorite: false,
+  createdAt: '2026-01-01T00:00:00Z',
+  updatedAt: '2026-01-01T00:00:00Z',
+} as unknown as EmailTemplate;
+
+async function flush() {
+  await act(async () => {
+    await Promise.resolve();
+  });
+}
+
+describe('TemplateManagerModal', () => {
+  beforeEach(() => {
+    useTemplateStore.setState({ templates: [template] } as never);
+  });
+
+  it('has the Dialog close X and closes on it when nothing was changed', async () => {
+    const onClose = vi.fn();
+    render(<TemplateManagerModal isOpen onClose={onClose} />);
+    const dialog = screen.getByRole('dialog', { name: 'title' });
+    fireEvent.click(screen.getByRole('button', { name: 'close' }));
+    await flush();
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(dialog).toBeTruthy();
+  });
+
+  it('asks before the X drops a template being written, and keeps it on Keep editing', async () => {
+    const onClose = vi.fn();
+    render(<TemplateManagerModal isOpen onClose={onClose} />);
+    fireEvent.click(screen.getByRole('button', { name: 'add' }));
+    fireEvent.change(screen.getByPlaceholderText('name_placeholder'), { target: { value: 'New one' } });
+
+    fireEvent.click(screen.getByRole('button', { name: 'close' }));
+    await flush();
+    expect(onClose).not.toHaveBeenCalled();
+    expect(screen.getByRole('alertdialog', { name: 'discard_changes' })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('button', { name: 'keep_editing' }));
+    await flush();
+    expect(onClose).not.toHaveBeenCalled();
+    expect((screen.getByPlaceholderText('name_placeholder') as HTMLInputElement).value).toBe('New one');
+  });
+
+  it('ignores a click outside while the form holds changes', async () => {
+    const onClose = vi.fn();
+    render(<TemplateManagerModal isOpen onClose={onClose} />);
+    fireEvent.click(screen.getByRole('button', { name: 'add' }));
+    fireEvent.change(screen.getByPlaceholderText('name_placeholder'), { target: { value: 'x' } });
+    const backdrop = screen.getByTestId('template-manager').parentElement!;
+    fireEvent.mouseDown(backdrop);
+    fireEvent.click(backdrop);
+    await flush();
+    expect(onClose).not.toHaveBeenCalled();
+    expect(screen.queryByRole('alertdialog')).toBeNull();
+  });
+
+  it('asks before deleting a template instead of an inline Delete strip', async () => {
+    render(<TemplateManagerModal isOpen onClose={vi.fn()} />);
+    fireEvent.click(screen.getByRole('button', { name: 'delete' }));
+    await flush();
+    const confirm = screen.getByRole('alertdialog', { name: 'delete_title' });
+    expect(useTemplateStore.getState().templates).toHaveLength(1);
+    fireEvent.click(confirm.querySelector('button.bg-destructive') as HTMLElement);
+    await flush();
+    expect(useTemplateStore.getState().templates).toHaveLength(0);
+  });
+
+  it('names its row buttons', () => {
+    render(<TemplateManagerModal isOpen onClose={vi.fn()} />);
+    expect(screen.getByRole('button', { name: 'edit' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'duplicate' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'favorite' })).toBeTruthy();
+  });
+});
+
+describe('PlaceholderFillModal', () => {
+  function renderFill(onClose = vi.fn()) {
+    render(
+      <PlaceholderFillModal
+        template={template}
+        placeholders={['recipient_name']}
+        autoFilled={{}}
+        onConfirm={vi.fn()}
+        onSkip={vi.fn()}
+        onClose={onClose}
+      />,
+    );
+    return onClose;
+  }
+
+  it('closes on Escape at once while nothing was typed', async () => {
+    const onClose = renderFill();
+    fireEvent.keyDown(screen.getByRole('dialog', { name: 'fill_placeholders' }), { key: 'Escape' });
+    await flush();
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('asks before Escape drops typed values', async () => {
+    const onClose = renderFill();
+    fireEvent.change(screen.getByPlaceholderText('enter_value'), { target: { value: 'Ada' } });
+    fireEvent.keyDown(screen.getByRole('dialog', { name: 'fill_placeholders' }), { key: 'Escape' });
+    await flush();
+    expect(onClose).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole('button', { name: 'discard' }));
+    await flush();
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('has an outline secondary button and the close X', () => {
+    renderFill();
+    expect(screen.getByRole('button', { name: 'insert_raw' }).className).toContain('border-input');
+    expect(screen.getByRole('button', { name: 'close' })).toBeTruthy();
+  });
+});
@@ -2,13 +2,12 @@

 import { useState, useMemo } from 'react';
 import { useTranslations } from 'next-intl';
-import { X } from '@/components/icons';
-import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { Dialog } from '@/components/ui/dialog';
+import { useDiscardChanges } from '@/components/settings/use-discard-changes';
 import { substitutePlaceholders, isBuiltInPlaceholder } from '@/lib/template-utils';
 import { sanitizeEmailHtml } from '@/lib/email-sanitization';
-import { useFocusTrap } from '@/hooks/use-focus-trap';
 import type { EmailTemplate } from '@/lib/template-types';

 interface PlaceholderFillModalProps {
@@ -29,60 +28,62 @@ export function PlaceholderFillModal({
  onClose,
 }: PlaceholderFillModalProps) {
  const t = useTranslations('templates');
+  const { confirmDiscard, discardDialog } = useDiscardChanges();

-  const [values, setValues] = useState<Record<string, string>>(() => {
+  const [initialValues] = useState<Record<string, string>>(() => {
    const initial: Record<string, string> = {};
    for (const p of placeholders) {
      initial[p] = autoFilled[p] || '';
    }
    return initial;
  });
-
-  const modalRef = useFocusTrap({
-    isActive: true,
-    onEscape: onClose,
-    restoreFocus: true,
-  });
+  const [values, setValues] = useState<Record<string, string>>(initialValues);
+  // Typed values would be lost: Escape, the X and outside clicks ask first (R5).
+  const dirty = placeholders.some((p) => values[p] !== initialValues[p]);

  const preview = useMemo(() => {
    return substitutePlaceholders(template.body, values);
  }, [template.body, values]);

-  return (
-    <div className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150">
-      <div
-        ref={modalRef}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="placeholder-fill-title"
-        className={cn(
-          'bg-background border border-border rounded-lg shadow-xl',
-          'w-full max-w-lg max-h-[85vh] overflow-hidden',
-          'animate-in zoom-in-95 duration-200'
-        )}
-      >
-        <div className="flex items-center justify-between px-6 py-4 border-b border-border">
-          <h2 id="placeholder-fill-title" className="text-lg font-semibold text-foreground">
-            {t('fill_placeholders')}
-          </h2>
-          <button
-            onClick={onClose}
-            className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground"
-          >
-            <X className="w-5 h-5" />
-          </button>
-        </div>
+  const requestClose = async () => {
+    if (await confirmDiscard(dirty)) onClose();
+  };

-        <div className="p-6 overflow-y-auto max-h-[calc(85vh-160px)] space-y-4">
+  return (
+    <>
+      <Dialog
+        isOpen
+        onClose={() => void requestClose()}
+        title={t('fill_placeholders')}
+        dirty={dirty}
+        size="md"
+        testId="placeholder-fill"
+        onSubmit={(e) => {
+          e.preventDefault();
+          onConfirm(values);
+        }}
+        footer={
+          <>
+            <Button type="button" variant="outline" onClick={onSkip}>
+              {t('insert_raw')}
+            </Button>
+            <Button type="submit">
+              {t('insert_with_values')}
+            </Button>
+          </>
+        }
+      >
+        <div className="space-y-4 pt-4">
          {placeholders.map((p) => (
            <div key={p}>
-              <label className="text-sm font-medium text-foreground flex items-center gap-2">
+              <label htmlFor={`placeholder-${p}`} className="text-sm font-medium text-foreground flex items-center gap-2">
                <span className="font-mono text-xs text-primary">{`{{${p}}}`}</span>
                {isBuiltInPlaceholder(p) && (
                  <span className="text-xs text-muted-foreground">{t(`placeholders.${p}`)}</span>
                )}
              </label>
              <Input
+                id={`placeholder-${p}`}
                value={values[p]}
                onChange={(e) => setValues((prev) => ({ ...prev, [p]: e.target.value }))}
                placeholder={t('enter_value')}
@@ -92,7 +93,7 @@ export function PlaceholderFillModal({
          ))}

          {preview && (
-            <div className="mt-4 pt-4 border-t border-border">
+            <div className="pt-4 border-t border-border">
              <p className="text-xs font-medium text-muted-foreground mb-2">{t('preview')}</p>
              <div className="text-sm text-foreground whitespace-pre-wrap p-3 rounded-md bg-muted/50 border border-border max-h-32 overflow-y-auto">
                {/* The body may come from an imported file or a synced blob; it is markup in the app document here. */}
@@ -101,16 +102,8 @@ export function PlaceholderFillModal({
            </div>
          )}
        </div>
-
-        <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-border">
-          <Button variant="ghost" size="sm" onClick={onSkip}>
-            {t('insert_raw')}
-          </Button>
-          <Button size="sm" onClick={() => onConfirm(values)}>
-            {t('insert_with_values')}
-          </Button>
-        </div>
-      </div>
-    </div>
+      </Dialog>
+      {discardDialog}
+    </>
  );
 }
@@ -1,10 +1,12 @@
 'use client';

-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect, useRef } from 'react';
 import { useTranslations } from 'next-intl';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Star, Plus, Square, CheckSquare } from '@/components/icons';
+import { ContextMenu, ContextMenuItem } from '@/components/ui/context-menu';
+import { useContextMenu } from '@/hooks/use-context-menu';
 import { cn } from '@/lib/utils';
 import { validateTemplateName } from '@/lib/template-utils';
 import { BUILT_IN_PLACEHOLDERS } from '@/lib/template-types';
@@ -24,9 +26,11 @@ interface TemplateFormProps {
  };
  onSave: (data: Omit<EmailTemplate, 'id' | 'createdAt' | 'updatedAt'>) => void;
  onCancel: () => void;
+  /** Told whenever the form gets or loses changes, so its host can ask before closing (R5). */
+  onDirtyChange?: (dirty: boolean) => void;
 }

-export function TemplateForm({ template, initialData, onSave, onCancel }: TemplateFormProps) {
+export function TemplateForm({ template, initialData, onSave, onCancel, onDirtyChange }: TemplateFormProps) {
  const t = useTranslations('templates');
  const tSettings = useTranslations('settings.templates');
  const tComposer = useTranslations('email_composer');
@@ -51,7 +55,19 @@ export function TemplateForm({ template, initialData, onSave, onCancel }: Templa
  const [identityId, setIdentityId] = useState(template?.identityId || '');
  const [isFavorite, setIsFavorite] = useState(template?.isFavorite || false);
  const [nameError, setNameError] = useState<string | null>(null);
-  const [showPlaceholderMenu, setShowPlaceholderMenu] = useState<'subject' | 'body' | null>(null);
+  const placeholderMenu = useContextMenu<'subject' | 'body'>();
+
+  // Changed from what the form opened with.
+  const snapshot = JSON.stringify([name, category, subject, body, isHTML, toRecipients, ccRecipients, bccRecipients, identityId, isFavorite]);
+  const [initialSnapshot] = useState(snapshot);
+  const dirty = snapshot !== initialSnapshot;
+  const onDirtyChangeRef = useRef(onDirtyChange);
+  useEffect(() => {
+    onDirtyChangeRef.current = onDirtyChange;
+  });
+  useEffect(() => {
+    onDirtyChangeRef.current?.(dirty);
+  }, [dirty]);

  const existingCategories = useMemo(() => {
    const cats = new Set(templates.map((t) => t.category).filter(Boolean));
@@ -94,9 +110,22 @@ export function TemplateForm({ template, initialData, onSave, onCancel }: Templa
    } else {
      setBody((prev) => prev + tag);
    }
-    setShowPlaceholderMenu(null);
  };

+  const placeholderButton = (field: 'subject' | 'body') => (
+    <Button
+      type="button"
+      variant="ghost"
+      size="xs"
+      aria-haspopup="menu"
+      aria-expanded={placeholderMenu.contextMenu.isOpen && placeholderMenu.contextMenu.data === field}
+      onClick={(e) => placeholderMenu.openContextMenuFrom(e.currentTarget, field, 'end')}
+    >
+      <Plus className="w-3.5 h-3.5 me-1" />
+      {t('placeholder')}
+    </Button>
+  );
+
  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
@@ -105,7 +134,7 @@ export function TemplateForm({ template, initialData, onSave, onCancel }: Templa
          value={name}
          onChange={(e) => { setName(e.target.value); setNameError(null); }}
          placeholder={tSettings('name_placeholder')}
-          className={cn('mt-1', nameError && 'border-red-500')}
+          className={cn('mt-1', nameError && 'border-destructive')}
          autoFocus
        />
        {nameError && (
@@ -136,24 +165,7 @@ export function TemplateForm({ template, initialData, onSave, onCancel }: Templa
      <div>
        <div className="flex items-center justify-between">
          <label className="text-sm font-medium text-foreground">{tSettings('subject')}</label>
-          <div className="relative">
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className="h-6 px-2 text-xs"
-              onClick={() => setShowPlaceholderMenu(showPlaceholderMenu === 'subject' ? null : 'subject')}
-            >
-              <Plus className="w-3 h-3 me-1" />
-              {t('placeholder')}
-            </Button>
-            {showPlaceholderMenu === 'subject' && (
-              <PlaceholderDropdown
-                onSelect={(p) => insertPlaceholder(p, 'subject')}
-                onClose={() => setShowPlaceholderMenu(null)}
-              />
-            )}
-          </div>
+          {placeholderButton('subject')}
        </div>
        <Input
          value={subject}
@@ -166,24 +178,7 @@ export function TemplateForm({ template, initialData, onSave, onCancel }: Templa
      <div>
        <div className="flex items-center justify-between">
          <label className="text-sm font-medium text-foreground">{tSettings('body')}</label>
-          <div className="relative">
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className="h-6 px-2 text-xs"
-              onClick={() => setShowPlaceholderMenu(showPlaceholderMenu === 'body' ? null : 'body')}
-            >
-              <Plus className="w-3 h-3 me-1" />
-              {t('placeholder')}
-            </Button>
-            {showPlaceholderMenu === 'body' && (
-              <PlaceholderDropdown
-                onSelect={(p) => insertPlaceholder(p, 'body')}
-                onClose={() => setShowPlaceholderMenu(null)}
-              />
-            )}
-          </div>
+          {placeholderButton('body')}
        </div>
        <textarea
          value={body}
@@ -261,7 +256,7 @@ export function TemplateForm({ template, initialData, onSave, onCancel }: Templa
        </button>

        <div className="flex gap-2">
-          <Button type="button" variant="ghost" size="sm" onClick={onCancel}>
+          <Button type="button" variant="outline" size="sm" onClick={onCancel}>
            {tSettings('cancel')}
          </Button>
          <Button type="submit" size="sm">
@@ -269,37 +264,25 @@ export function TemplateForm({ template, initialData, onSave, onCancel }: Templa
          </Button>
        </div>
      </div>
+      <ContextMenu
+        ref={placeholderMenu.menuRef}
+        isOpen={placeholderMenu.contextMenu.isOpen}
+        position={placeholderMenu.contextMenu.position}
+        onClose={placeholderMenu.closeContextMenu}
+      >
+        {BUILT_IN_PLACEHOLDERS.map((p) => (
+          <ContextMenuItem
+            key={p}
+            label={`{{${p}}}`}
+            hint={t(`placeholders.${p}`)}
+            onClick={() => {
+              const field = placeholderMenu.contextMenu.data;
+              placeholderMenu.closeContextMenu();
+              if (field) insertPlaceholder(p, field);
+            }}
+          />
+        ))}
+      </ContextMenu>
    </form>
  );
 }
-
-function PlaceholderDropdown({
-  onSelect,
-  onClose,
-}: {
-  onSelect: (name: string) => void;
-  onClose: () => void;
-}) {
-  const t = useTranslations('templates');
-
-  return (
-    <>
-      <div className="fixed inset-0 z-40" onClick={onClose} />
-      <div className="absolute end-0 top-full mt-1 z-50 bg-background border border-border rounded-md shadow-lg min-w-[180px]">
-        <div className="p-1">
-          {BUILT_IN_PLACEHOLDERS.map((p) => (
-            <button
-              key={p}
-              type="button"
-              className="w-full text-start px-3 py-1.5 text-sm rounded hover:bg-muted transition-colors"
-              onClick={() => onSelect(p)}
-            >
-              <span className="font-mono text-xs text-primary">{`{{${p}}}`}</span>
-              <span className="ms-2 text-muted-foreground">{t(`placeholders.${p}`)}</span>
-            </button>
-          ))}
-        </div>
-      </div>
-    </>
-  );
-}
@@ -2,13 +2,18 @@

 import { useState } from 'react';
 import { useTranslations } from 'next-intl';
-import { X, FileText, Pencil, Trash2, Star, Copy, Search } from '@/components/icons';
+import { FileText, Pencil, Trash2, Star, CopyPlus, Search } from '@/components/icons';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
+import { IconButton } from '@/components/ui/icon-button';
 import { Input } from '@/components/ui/input';
+import { Dialog } from '@/components/ui/dialog';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
+import { EmptyState } from '@/components/ui/empty-state';
+import { useConfirmDialog } from '@/hooks/use-confirm-dialog';
+import { useDiscardChanges } from '@/components/settings/use-discard-changes';
 import { TemplateForm } from './template-form';
 import { useTemplateStore } from '@/stores/template-store';
-import { useFocusTrap } from '@/hooks/use-focus-trap';
 import type { EmailTemplate } from '@/lib/template-types';

 interface TemplateManagerModalProps {
@@ -19,6 +24,7 @@ interface TemplateManagerModalProps {
 export function TemplateManagerModal({ isOpen, onClose }: TemplateManagerModalProps) {
  const t = useTranslations('templates');
  const tSettings = useTranslations('settings.templates');
+  const tCommon = useTranslations('common');

  const {
    templates,
@@ -32,214 +38,179 @@ export function TemplateManagerModal({ isOpen, onClose }: TemplateManagerModalPr

  const [editingId, setEditingId] = useState<string | null>(null);
  const [isCreating, setIsCreating] = useState(false);
-  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+  const [formDirty, setFormDirty] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
-
-  const modalRef = useFocusTrap({
-    isActive: isOpen,
-    onEscape: () => {
-      if (isCreating || editingId) {
-        setIsCreating(false);
-        setEditingId(null);
-      } else {
-        onClose();
-      }
-    },
-    restoreFocus: true,
-  });
+  const { confirmDiscard, discardDialog } = useDiscardChanges();
+  const { dialogProps: deleteDialogProps, confirm: confirmDelete } = useConfirmDialog();

  const filtered = searchQuery ? searchTemplates(searchQuery) : templates;
+  const formOpen = isCreating || !!editingId;
+
+  const closeForm = () => {
+    setIsCreating(false);
+    setEditingId(null);
+    setFormDirty(false);
+  };
+
+  // Escape, the X and Cancel ask first while the form holds changes (R5).
+  const requestClose = async () => {
+    if (!(await confirmDiscard(formDirty))) return;
+    closeForm();
+    onClose();
+  };
+  const requestCloseForm = async () => {
+    if (!(await confirmDiscard(formDirty))) return;
+    closeForm();
+  };

  const handleSave = (data: Omit<EmailTemplate, 'id' | 'createdAt' | 'updatedAt'>) => {
    if (editingId) {
      updateTemplate(editingId, data);
-      setEditingId(null);
    } else {
      addTemplate(data);
-      setIsCreating(false);
    }
+    closeForm();
  };

-  const handleDelete = (id: string) => {
-    deleteTemplate(id);
-    setDeleteConfirmId(null);
+  const handleDelete = async (template: EmailTemplate) => {
+    const ok = await confirmDelete({
+      title: t('delete_title'),
+      message: t('delete_message', { name: template.name }),
+      confirmText: tCommon('delete'),
+      cancelText: tCommon('cancel'),
+      variant: 'destructive',
+    });
+    if (ok) deleteTemplate(template.id);
  };

-  if (!isOpen) return null;
-
  return (
-    <div className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-50 p-4 animate-in fade-in duration-150">
-      <div
-        ref={modalRef}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="template-manager-title"
-        className={cn(
-          'bg-background border border-border rounded-lg shadow-xl',
-          'w-full max-w-3xl max-h-[90vh] overflow-hidden',
-          'animate-in zoom-in-95 duration-200'
-        )}
+    <>
+      <Dialog
+        isOpen={isOpen}
+        onClose={() => void requestClose()}
+        title={tSettings('title')}
+        size="lg"
+        dirty={formDirty}
+        testId="template-manager"
      >
-        <div className="flex items-center justify-between px-6 py-4 border-b border-border">
-          <div className="flex items-center gap-3">
-            <FileText className="w-5 h-5 text-muted-foreground" />
-            <h2 id="template-manager-title" className="text-lg font-semibold text-foreground">
-              {tSettings('title')}
-            </h2>
+        {!formOpen && (
+          <div className="flex items-center gap-3 mb-4">
+            <div className="flex-1 relative">
+              <Search className="absolute start-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <Input
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder={t('search_placeholder')}
+                aria-label={t('search_placeholder')}
+                className="ps-9"
+              />
+            </div>
+            <Button onClick={() => setIsCreating(true)} size="sm">
+              {tSettings('add')}
+            </Button>
          </div>
-          <button
-            onClick={onClose}
-            className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground"
-          >
-            <X className="w-5 h-5" />
-          </button>
-        </div>
+        )}

-        <div className="p-6 overflow-y-auto max-h-[calc(90vh-80px)]">
-          {!isCreating && !editingId && (
-            <div className="flex items-center gap-3 mb-4">
-              <div className="flex-1 relative">
-                <Search className="absolute start-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-                <Input
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  placeholder={t('search_placeholder')}
-                  className="ps-9"
+        {isCreating && (
+          <div className="mb-6 p-4 border border-border rounded-lg bg-muted/30">
+            <h3 className="text-sm font-semibold mb-4">{tSettings('add')}</h3>
+            <TemplateForm
+              onSave={handleSave}
+              onCancel={() => void requestCloseForm()}
+              onDirtyChange={setFormDirty}
+            />
+          </div>
+        )}
+
+        {editingId && (
+          <div className="mb-6 p-4 border border-border rounded-lg bg-muted/30">
+            <h3 className="text-sm font-semibold mb-4">{tSettings('edit')}</h3>
+            <TemplateForm
+              template={templates.find((tpl) => tpl.id === editingId)}
+              onSave={handleSave}
+              onCancel={() => void requestCloseForm()}
+              onDirtyChange={setFormDirty}
+            />
+          </div>
+        )}
+
+        <div className="space-y-2">
+          {filtered.map((template) => (
+            <div
+              key={template.id}
+              className="flex items-center gap-3 p-3 rounded-md border border-border hover:bg-muted/50 transition-colors"
+            >
+              <IconButton
+                label={tSettings('favorite')}
+                aria-pressed={!!template.isFavorite}
+                onClick={() => toggleFavorite(template.id)}
+                className="flex-shrink-0 -ms-1.5"
+              >
+                <Star
+                  className={cn(
+                    'w-4 h-4 transition-colors',
+                    template.isFavorite ? 'fill-amber-400 text-amber-400' : 'text-muted-foreground'
+                  )}
                />
+              </IconButton>
+
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <p className="text-sm font-medium text-foreground truncate" dir="auto" title={template.name}>
+                    {template.name}
+                  </p>
+                  {template.category && (
+                    <span className="text-xs px-2 py-0.5 rounded-full bg-primary/10 text-primary font-medium flex-shrink-0">
+                      {template.category}
+                    </span>
+                  )}
+                </div>
+                {template.subject && (
+                  <p className="text-xs text-muted-foreground truncate mt-0.5" dir="auto" title={template.subject}>
+                    {template.subject}
+                  </p>
+                )}
              </div>
-              <Button
-                onClick={() => setIsCreating(true)}
-                size="sm"
-              >
-                {tSettings('add')}
-              </Button>
-            </div>
-          )}

-          {isCreating && (
-            <div className="mb-6 p-4 border border-border rounded-lg bg-muted/30">
-              <h3 className="text-sm font-semibold mb-4">{tSettings('add')}</h3>
-              <TemplateForm
-                onSave={handleSave}
-                onCancel={() => setIsCreating(false)}
-              />
-            </div>
-          )}
-
-          {editingId && (
-            <div className="mb-6 p-4 border border-border rounded-lg bg-muted/30">
-              <h3 className="text-sm font-semibold mb-4">{tSettings('edit')}</h3>
-              <TemplateForm
-                template={templates.find((t) => t.id === editingId)}
-                onSave={handleSave}
-                onCancel={() => setEditingId(null)}
-              />
-            </div>
-          )}
-
-          <div className="space-y-2">
-            {filtered.map((template) => (
-              <div
-                key={template.id}
-                className="flex items-center gap-3 p-3 rounded-md border border-border hover:bg-muted/50 transition-colors"
-              >
-                <button
-                  type="button"
-                  onClick={() => toggleFavorite(template.id)}
-                  className="flex-shrink-0"
+              <div className="flex items-center gap-1 flex-shrink-0">
+                <IconButton
+                  label={tSettings('edit')}
+                  onClick={() => { setEditingId(template.id); setIsCreating(false); }}
+                  disabled={formOpen}
                >
-                  <Star
-                    className={cn(
-                      'w-4 h-4 transition-colors',
-                      template.isFavorite
-                        ? 'fill-amber-400 text-amber-400'
-                        : 'text-muted-foreground hover:text-amber-400'
-                    )}
-                  />
-                </button>
-
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
-                    <p className="text-sm font-medium text-foreground truncate">
-                      {template.name}
-                    </p>
-                    {template.category && (
-                      <span className="text-xs px-2 py-0.5 rounded-full bg-primary/10 text-primary font-medium flex-shrink-0">
-                        {template.category}
-                      </span>
-                    )}
-                  </div>
-                  {template.subject && (
-                    <p className="text-xs text-muted-foreground truncate mt-0.5">
-                      {template.subject}
-                    </p>
-                  )}
-                </div>
-
-                <div className="flex items-center gap-1 flex-shrink-0">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => { setEditingId(template.id); setIsCreating(false); }}
-                    disabled={!!editingId || isCreating}
-                    className="h-8 w-8 p-0"
-                  >
-                    <Pencil className="w-3.5 h-3.5" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => duplicateTemplate(template.id, t('copy_suffix'))}
-                    disabled={!!editingId || isCreating}
-                    className="h-8 w-8 p-0"
-                  >
-                    <Copy className="w-3.5 h-3.5" />
-                  </Button>
-                  {deleteConfirmId === template.id ? (
-                    <div className="flex items-center gap-1">
-                      <Button
-                        variant="destructive"
-                        size="sm"
-                        onClick={() => handleDelete(template.id)}
-                        className="h-7 text-xs"
-                      >
-                        {tSettings('confirm_delete')}
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setDeleteConfirmId(null)}
-                        className="h-7 text-xs"
-                      >
-                        {tSettings('cancel')}
-                      </Button>
-                    </div>
-                  ) : (
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => setDeleteConfirmId(template.id)}
-                      disabled={!!editingId || isCreating}
-                      className="h-8 w-8 p-0 hover:text-red-600 dark:hover:text-red-400"
-                    >
-                      <Trash2 className="w-3.5 h-3.5" />
-                    </Button>
-                  )}
-                </div>
+                  <Pencil />
+                </IconButton>
+                <IconButton
+                  label={t('duplicate')}
+                  onClick={() => duplicateTemplate(template.id, t('copy_suffix'))}
+                  disabled={formOpen}
+                >
+                  <CopyPlus />
+                </IconButton>
+                <IconButton
+                  label={tCommon('delete')}
+                  onClick={() => void handleDelete(template)}
+                  disabled={formOpen}
+                >
+                  <Trash2 />
+                </IconButton>
              </div>
-            ))}
+            </div>
+          ))}

-            {filtered.length === 0 && !isCreating && (
-              <div className="flex flex-col items-center py-8 text-muted-foreground">
-                <FileText className="w-10 h-10 mb-3 opacity-40" />
-                <p className="text-sm">
-                  {searchQuery ? t('no_results') : tSettings('no_templates')}
-                </p>
-              </div>
-            )}
-          </div>
+          {filtered.length === 0 && !isCreating && (
+            <EmptyState
+              icon={FileText}
+              title={searchQuery ? t('no_results') : tSettings('no_templates')}
+              actions={searchQuery ? undefined : (
+                <Button size="sm" onClick={() => setIsCreating(true)}>{tSettings('add')}</Button>
+              )}
+            />
+          )}
        </div>
-      </div>
-    </div>
+      </Dialog>
+      {discardDialog}
+      <ConfirmDialog {...deleteDialogProps} />
+    </>
  );
 }
@@ -3167,6 +3167,9 @@
    "insert_with_values": "الإدراج بالقيم",
    "insert_raw": "الإدراج كما هو",
    "copy_suffix": "(نسخة)",
+    "duplicate": "تكرار",
+    "delete_title": "حذف القالب؟",
+    "delete_message": "سيُحذف القالب \"{name}\" نهائيًا.",
    "placeholder": "متغيّر",
    "placeholders": {
      "recipient_name": "اسم المستلم",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Insereix amb els valors",
    "insert_raw": "Insereix sense processar",
    "copy_suffix": "(còpia)",
+    "duplicate": "Duplica",
+    "delete_title": "Voleu suprimir la plantilla?",
+    "delete_message": "La plantilla \"{name}\" se suprimirà definitivament.",
    "placeholder": "Variable",
    "placeholders": {
      "recipient_name": "Nom del destinatari",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Vložit s hodnotami",
    "insert_raw": "Vložit beze změn",
    "copy_suffix": "(kopie)",
+    "duplicate": "Duplikovat",
+    "delete_title": "Smazat šablonu?",
+    "delete_message": "Šablona „{name}“ bude trvale smazána.",
    "placeholder": "Proměnná",
    "placeholders": {
      "recipient_name": "Jméno příjemce",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Indsæt med værdier",
    "insert_raw": "Indsæt rå",
    "copy_suffix": "(kopi)",
+    "duplicate": "Duplikér",
+    "delete_title": "Slet skabelon?",
+    "delete_message": "Skabelonen \"{name}\" slettes permanent.",
    "placeholder": "Variabel",
    "placeholders": {
      "recipient_name": "Modtagers navn",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Mit Werten einfügen",
    "insert_raw": "Unverändert einfügen",
    "copy_suffix": "(Kopie)",
+    "duplicate": "Duplizieren",
+    "delete_title": "Vorlage löschen?",
+    "delete_message": "Die Vorlage „{name}“ wird endgültig gelöscht.",
    "placeholder": "Variable",
    "placeholders": {
      "recipient_name": "Name des Empfängers",
@@ -3153,7 +3153,7 @@
    "delete_confirm_title": "Delete identity?"
  },
  "templates": {
-    "picker_title": "Choose a Template",
+    "picker_title": "Choose a template",
    "manage": "Manage templates",
    "search_placeholder": "Search templates...",
    "section_favorites": "Favorites",
@@ -3161,12 +3161,15 @@
    "section_uncategorized": "Other",
    "no_templates": "No templates yet",
    "no_results": "No templates found",
-    "fill_placeholders": "Fill Placeholder Values",
+    "fill_placeholders": "Fill placeholder values",
    "enter_value": "Enter a value...",
    "preview": "Preview",
-    "insert_with_values": "Insert with Values",
-    "insert_raw": "Insert Raw",
+    "insert_with_values": "Insert with values",
+    "insert_raw": "Insert raw",
    "copy_suffix": "(copy)",
+    "duplicate": "Duplicate",
+    "delete_title": "Delete template?",
+    "delete_message": "The template \"{name}\" is deleted for good.",
    "placeholder": "Variable",
    "placeholders": {
      "recipient_name": "Recipient name",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Insertar con valores",
    "insert_raw": "Insertar sin completar",
    "copy_suffix": "(copia)",
+    "duplicate": "Duplicar",
+    "delete_title": "¿Eliminar la plantilla?",
+    "delete_message": "La plantilla \"{name}\" se eliminará de forma definitiva.",
    "placeholder": "Variable",
    "placeholders": {
      "recipient_name": "Nombre del destinatario",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Lisa väärtustega",
    "insert_raw": "Lisa täitmata kujul",
    "copy_suffix": "(koopia)",
+    "duplicate": "Dubleeri",
+    "delete_title": "Kas kustutada mall?",
+    "delete_message": "Mall „{name}“ kustutatakse jäädavalt.",
    "placeholder": "Muutuja",
    "placeholders": {
      "recipient_name": "Saaja nimi",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "درج با مقادیر",
    "insert_raw": "درج خام",
    "copy_suffix": "(کپی)",
+    "duplicate": "تکثیر",
+    "delete_title": "الگو حذف شود؟",
+    "delete_message": "الگوی «{name}» برای همیشه حذف می‌شود.",
    "placeholder": "متغیر",
    "placeholders": {
      "recipient_name": "نام گیرنده",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Insérer avec les valeurs",
    "insert_raw": "Insérer brut",
    "copy_suffix": "(copie)",
+    "duplicate": "Dupliquer",
+    "delete_title": "Supprimer le modèle ?",
+    "delete_message": "Le modèle « {name} » sera supprimé définitivement.",
    "placeholder": "Variable",
    "placeholders": {
      "recipient_name": "Nom du destinataire",
@@ -3085,6 +3085,9 @@
    "insert_with_values": "הוסף עם ערכים",
    "insert_raw": "הכנס Raw",
    "copy_suffix": "(העתק)",
+    "duplicate": "שכפול",
+    "delete_title": "למחוק את התבנית?",
+    "delete_message": "התבנית \"{name}\" תימחק לצמיתות.",
    "placeholder": "משתנה",
    "placeholders": {
      "recipient_name": "שם הנמען",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Beszúrás értékekkel",
    "insert_raw": "Nyers beszúrás",
    "copy_suffix": "(másolat)",
+    "duplicate": "Duplikálás",
+    "delete_title": "Törli a sablont?",
+    "delete_message": "A(z) „{name}” sablon véglegesen törlődik.",
    "placeholder": "Változó",
    "placeholders": {
      "recipient_name": "Címzett neve",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Inserisci con valori",
    "insert_raw": "Inserisci grezzo",
    "copy_suffix": "(copia)",
+    "duplicate": "Duplica",
+    "delete_title": "Eliminare il modello?",
+    "delete_message": "Il modello \"{name}\" verrà eliminato definitivamente.",
    "placeholder": "Variabile",
    "placeholders": {
      "recipient_name": "Nome del destinatario",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "値を挿入",
    "insert_raw": "そのまま挿入",
    "copy_suffix": "(コピー)",
+    "duplicate": "複製",
+    "delete_title": "テンプレートを削除しますか?",
+    "delete_message": "テンプレート「{name}」は完全に削除されます。",
    "placeholder": "変数",
    "placeholders": {
      "recipient_name": "宛先の名前",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "값과 함께 삽입",
    "insert_raw": "원본 삽입",
    "copy_suffix": "(복사본)",
+    "duplicate": "복제",
+    "delete_title": "템플릿을 삭제할까요?",
+    "delete_message": "템플릿 \"{name}\"이(가) 영구적으로 삭제됩니다.",
    "placeholder": "변수",
    "placeholders": {
      "recipient_name": "받는 사람 이름",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Ievietot ar vērtībām",
    "insert_raw": "Ievietot bez izmaiņām",
    "copy_suffix": "(kopija)",
+    "duplicate": "Dublēt",
+    "delete_title": "Vai dzēst veidni?",
+    "delete_message": "Veidne “{name}” tiks neatgriezeniski dzēsta.",
    "placeholder": "Mainīgais",
    "placeholders": {
      "recipient_name": "Saņēmēja vārds",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Утгатай оруулах",
    "insert_raw": "Түүхий оруулах",
    "copy_suffix": "(хуулбар)",
+    "duplicate": "Хуулбарлах",
+    "delete_title": "Загварыг устгах уу?",
+    "delete_message": "\"{name}\" загвар бүрмөсөн устгагдана.",
    "placeholder": "Хувьсагч",
    "placeholders": {
      "recipient_name": "Хүлээн авагчийн нэр",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Sett inn ferdig utfylt",
    "insert_raw": "Sett inn uten å fylle ut",
    "copy_suffix": "(kopi)",
+    "duplicate": "Dupliser",
+    "delete_title": "Slette malen?",
+    "delete_message": "Malen «{name}» slettes for godt.",
    "placeholder": "Variabel",
    "placeholders": {
      "recipient_name": "Mottakerens navn",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Invoegen met waarden",
    "insert_raw": "Onbewerkt invoegen",
    "copy_suffix": "(kopie)",
+    "duplicate": "Dupliceren",
+    "delete_title": "Sjabloon verwijderen?",
+    "delete_message": "Het sjabloon \"{name}\" wordt definitief verwijderd.",
    "placeholder": "Variabele",
    "placeholders": {
      "recipient_name": "Naam ontvanger",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Wstaw z wartościami",
    "insert_raw": "Wstaw bez zmian",
    "copy_suffix": "(kopia)",
+    "duplicate": "Duplikuj",
+    "delete_title": "Usunąć szablon?",
+    "delete_message": "Szablon „{name}” zostanie trwale usunięty.",
    "placeholder": "Zmienna",
    "placeholders": {
      "recipient_name": "Nazwa odbiorcy",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Inserir com valores",
    "insert_raw": "Inserir bruto",
    "copy_suffix": "(cópia)",
+    "duplicate": "Duplicar",
+    "delete_title": "Eliminar o modelo?",
+    "delete_message": "O modelo \"{name}\" será eliminado definitivamente.",
    "placeholder": "Variável",
    "placeholders": {
      "recipient_name": "Nome do destinatário",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Inserați cu valori",
    "insert_raw": "Inserați Raw",
    "copy_suffix": "(copiere)",
+    "duplicate": "Duplicare",
+    "delete_title": "Ștergeți șablonul?",
+    "delete_message": "Șablonul „{name}” va fi șters definitiv.",
    "placeholder": "Variabilă",
    "placeholders": {
      "recipient_name": "Numele destinatarului",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Вставить со значениями",
    "insert_raw": "Вставить без изменений",
    "copy_suffix": "(копия)",
+    "duplicate": "Дублировать",
+    "delete_title": "Удалить шаблон?",
+    "delete_message": "Шаблон «{name}» будет удалён без возможности восстановления.",
    "placeholder": "Переменная",
    "placeholders": {
      "recipient_name": "Имя получателя",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Vložiť s hodnotami",
    "insert_raw": "Vložiť bez zmien",
    "copy_suffix": "(kópia)",
+    "duplicate": "Duplikovať",
+    "delete_title": "Odstrániť šablónu?",
+    "delete_message": "Šablóna „{name}“ bude natrvalo odstránená.",
    "placeholder": "Premenná",
    "placeholders": {
      "recipient_name": "Meno príjemcu",
@@ -782,6 +782,9 @@
    "insert_with_values": "แทรกพร้อมแทนที่ค่า",
    "insert_raw": "แทรกข้อความต้นฉบับ",
    "copy_suffix": "(สำเนา)",
+    "duplicate": "สร้างสำเนา",
+    "delete_title": "ลบเทมเพลตหรือไม่",
+    "delete_message": "เทมเพลต \"{name}\" จะถูกลบอย่างถาวร",
    "placeholder": "ตัวแปร",
    "placeholders": {
      "recipient_name": "ชื่อผู้รับ",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Değerlerle Ekle",
    "insert_raw": "Ham Ekle",
    "copy_suffix": "(kopya)",
+    "duplicate": "Çoğalt",
+    "delete_title": "Şablon silinsin mi?",
+    "delete_message": "\"{name}\" şablonu kalıcı olarak silinecek.",
    "placeholder": "Değişken",
    "placeholders": {
      "recipient_name": "Alıcı adı",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "Вставити зі значеннями",
    "insert_raw": "Вставити Raw",
    "copy_suffix": "(копія)",
+    "duplicate": "Дублювати",
+    "delete_title": "Видалити шаблон?",
+    "delete_message": "Шаблон «{name}» буде видалено назавжди.",
    "placeholder": "змінна",
    "placeholders": {
      "recipient_name": "Ім'я одержувача",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "填入值後插入",
    "insert_raw": "直接插入範本",
    "copy_suffix": "（複製）",
+    "duplicate": "建立副本",
+    "delete_title": "刪除範本?",
+    "delete_message": "範本「{name}」將被永久刪除。",
    "placeholder": "變數",
    "placeholders": {
      "recipient_name": "收件者姓名",
@@ -3167,6 +3167,9 @@
    "insert_with_values": "插入并填充",
    "insert_raw": "插入原始模板",
    "copy_suffix": "（复制）",
+    "duplicate": "创建副本",
+    "delete_title": "删除模板?",
+    "delete_message": "模板“{name}”将被永久删除。",
    "placeholder": "变量",
    "placeholders": {
      "recipient_name": "收件人姓名",