feat: add email templates with placeholder variables and composer integration

- Reusable email templates with local storage persistence - Dynamic placeholder variables ({{recipientName}}, {{date}}, etc.) with auto-fill - Template manager modal with category filtering and search - Template picker integrated in composer toolbar (Ctrl+Shift+T) - Settings tab for template management - 48 unit tests for template utilities - i18n support for all 8 languages
2026-02-17 01:35:26 +01:00
parent b65b2f26df
commit 2636a88820
23 changed files with 2422 additions and 36 deletions
@@ -0,0 +1,114 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { useTranslations } from 'next-intl';
+import { X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { substitutePlaceholders, isBuiltInPlaceholder } from '@/lib/template-utils';
+import { useFocusTrap } from '@/hooks/use-focus-trap';
+import type { EmailTemplate } from '@/lib/template-types';
+
+interface PlaceholderFillModalProps {
+  template: EmailTemplate;
+  placeholders: string[];
+  autoFilled: Record<string, string>;
+  onConfirm: (values: Record<string, string>) => void;
+  onSkip: () => void;
+  onClose: () => void;
+}
+
+export function PlaceholderFillModal({
+  template,
+  placeholders,
+  autoFilled,
+  onConfirm,
+  onSkip,
+  onClose,
+}: PlaceholderFillModalProps) {
+  const t = useTranslations('templates');
+
+  const [values, setValues] = 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 preview = useMemo(() => {
+    return substitutePlaceholders(template.body, values);
+  }, [template.body, values]);
+
+  return (
+    <div className="fixed inset-0 bg-black/50 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-2 rounded-md hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="p-6 overflow-y-auto max-h-[calc(85vh-160px)] space-y-4">
+          {placeholders.map((p) => (
+            <div key={p}>
+              <label 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
+                value={values[p]}
+                onChange={(e) => setValues((prev) => ({ ...prev, [p]: e.target.value }))}
+                placeholder={t('enter_value')}
+                className="mt-1"
+              />
+            </div>
+          ))}
+
+          {preview && (
+            <div className="mt-4 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">
+                {preview}
+              </div>
+            </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>
+  );
+}