Add files via upload

components/RichTextEditor.tsx

@@ -0,0 +1,206 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { 
+  Bold, Italic, Underline, List, ListOrdered, Link, 
+  Code, Type, Eraser, AlignLeft, AlignCenter, AlignRight, Braces
+} from 'lucide-react';
+
+interface Props {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+const RichTextEditor: React.FC<Props> = ({ value, onChange, placeholder, className = '' }) => {
+  const [isSourceMode, setIsSourceMode] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const selectionRef = useRef<Range | null>(null);
+
+  // Sync value to contentEditable div
+  useEffect(() => {
+    if (contentRef.current && !isSourceMode) {
+      if (document.activeElement !== contentRef.current) {
+         if (contentRef.current.innerHTML !== value) {
+            contentRef.current.innerHTML = value;
+         }
+      }
+    }
+  }, [value, isSourceMode]);
+
+  const saveSelection = () => {
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount > 0) {
+      const range = sel.getRangeAt(0);
+      // Ensure the selection is actually inside our editor
+      if (contentRef.current && contentRef.current.contains(range.commonAncestorContainer)) {
+        selectionRef.current = range;
+      }
+    }
+  };
+
+  const restoreSelection = () => {
+    if (contentRef.current) {
+      contentRef.current.focus();
+      if (selectionRef.current) {
+        const sel = window.getSelection();
+        if (sel) {
+          sel.removeAllRanges();
+          sel.addRange(selectionRef.current);
+        }
+      } else {
+        // Fallback: move cursor to the end if no selection saved
+        const range = document.createRange();
+        range.selectNodeContents(contentRef.current);
+        range.collapse(false);
+        const sel = window.getSelection();
+        sel?.removeAllRanges();
+        sel?.addRange(range);
+      }
+    }
+  };
+
+  const execCommand = (command: string, value: string | undefined = undefined) => {
+    restoreSelection();
+    document.execCommand(command, false, value);
+    handleInput();
+  };
+
+  const handleInput = () => {
+    if (contentRef.current) {
+      onChange(contentRef.current.innerHTML);
+      saveSelection();
+    }
+  };
+
+  const insertVariable = (e: React.MouseEvent) => {
+    e.preventDefault(); // Prevent default button behavior
+    e.stopPropagation();
+
+    const varName = prompt("Enter variable name (without brackets):", "variable_name");
+    
+    if (varName) {
+      if (isSourceMode) {
+        alert("Switch to Visual mode to use the inserter, or type {{name}} manually.");
+      } else {
+        restoreSelection();
+        const text = `{{${varName}}}`;
+        
+        // Try standard command first, fallback to range manipulation
+        const success = document.execCommand('insertText', false, text);
+        
+        if (!success) {
+          const sel = window.getSelection();
+          if (sel && sel.rangeCount > 0) {
+            const range = sel.getRangeAt(0);
+            range.deleteContents();
+            const textNode = document.createTextNode(text);
+            range.insertNode(textNode);
+            // Move cursor after inserted text
+            range.setStartAfter(textNode);
+            range.setEndAfter(textNode);
+            sel.removeAllRanges();
+            sel.addRange(range);
+          }
+        }
+        
+        handleInput();
+      }
+    }
+  };
+
+  const ToolbarButton = ({ 
+    icon: Icon, 
+    command, 
+    arg, 
+    active = false,
+    title 
+  }: { icon: any, command?: string, arg?: string, active?: boolean, title: string }) => (
+    <button
+      type="button"
+      onMouseDown={(e) => e.preventDefault()} // Prevent focus loss from editor
+      onClick={() => command && execCommand(command, arg)}
+      className={`p-1.5 rounded hover:bg-slate-200 text-slate-600 transition-colors ${active ? 'bg-slate-200 text-slate-900' : ''}`}
+      title={title}
+    >
+      <Icon size={16} />
+    </button>
+  );
+
+  return (
+    <div className={`flex flex-col border border-slate-300 rounded-lg overflow-hidden bg-white ${className}`}>
+      {/* Toolbar */}
+      <div className="flex items-center gap-1 p-2 bg-slate-50 border-b border-slate-200 flex-wrap">
+        <div className="flex items-center gap-1 border-r border-slate-200 pr-2 mr-2">
+          <button
+            type="button"
+            onClick={() => setIsSourceMode(!isSourceMode)}
+            className={`flex items-center gap-1 px-2 py-1.5 rounded text-xs font-medium transition-colors ${isSourceMode ? 'bg-slate-800 text-white' : 'hover:bg-slate-200 text-slate-600'}`}
+          >
+            {isSourceMode ? <><Type size={14} /> Visual</> : <><Code size={14} /> Source</>}
+          </button>
+        </div>
+
+        {!isSourceMode && (
+          <>
+            <ToolbarButton icon={Bold} command="bold" title="Bold" />
+            <ToolbarButton icon={Italic} command="italic" title="Italic" />
+            <ToolbarButton icon={Underline} command="underline" title="Underline" />
+            <div className="w-px h-4 bg-slate-300 mx-1" />
+            <ToolbarButton icon={AlignLeft} command="justifyLeft" title="Align Left" />
+            <ToolbarButton icon={AlignCenter} command="justifyCenter" title="Align Center" />
+            <ToolbarButton icon={AlignRight} command="justifyRight" title="Align Right" />
+            <div className="w-px h-4 bg-slate-300 mx-1" />
+            <ToolbarButton icon={List} command="insertUnorderedList" title="Bullet List" />
+            <ToolbarButton icon={ListOrdered} command="insertOrderedList" title="Numbered List" />
+            <div className="w-px h-4 bg-slate-300 mx-1" />
+            <ToolbarButton icon={Eraser} command="removeFormat" title="Clear Formatting" />
+            
+            <div className="flex-1" />
+            
+            <button
+              type="button"
+              onClick={insertVariable}
+              className="flex items-center gap-1 px-2 py-1.5 rounded bg-brand-50 text-brand-600 hover:bg-brand-100 text-xs font-medium border border-brand-200"
+              title="Insert Variable Placeholder"
+            >
+              <Braces size={14} />
+              Variable
+            </button>
+          </>
+        )}
+      </div>
+
+      {/* Editor Area */}
+      <div className="relative flex-1 min-h-[300px] bg-white">
+        {isSourceMode ? (
+          <textarea
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            className="w-full h-full p-4 font-mono text-sm text-slate-800 resize-none focus:outline-none bg-slate-50"
+            spellCheck={false}
+          />
+        ) : (
+          <div
+            ref={contentRef}
+            contentEditable
+            onInput={handleInput}
+            onKeyUp={saveSelection}
+            onMouseUp={saveSelection}
+            onTouchEnd={saveSelection}
+            suppressContentEditableWarning={true}
+            className="w-full h-full p-4 focus:outline-none prose prose-sm max-w-none overflow-y-auto"
+            style={{ minHeight: '300px' }}
+          />
+        )}
+        
+        {!value && !isSourceMode && (
+          <div className="absolute top-4 left-4 text-slate-400 pointer-events-none select-none">
+            {placeholder || "Start typing..."}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default RichTextEditor;

components/TemplateEditor.tsx

@@ -0,0 +1,440 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { EmailTemplate } from '../types';
+import { saveTemplate, generateSQL, generateSelectSQL, getTemplates, generateTemplateKey, generateN8nCode } from '../services/storage';
+import { generateEmailContent } from '../services/geminiService';
+import RichTextEditor from './RichTextEditor';
+import { 
+  Save, ArrowLeft, Eye, Database, Wand2, Copy, Check, Code 
+} from 'lucide-react';
+
+interface Props {
+  templateId?: string;
+  initialTemplate?: EmailTemplate;
+  onBack: () => void;
+  onSave: () => void;
+}
+
+const DEFAULT_HEADER = `<div style="background-color: #f8fafc; padding: 20px; text-align: center;">
+  <h1 style="color: #334155; margin: 0;">My Company</h1>
+</div>`;
+
+const DEFAULT_BODY = `<div style="padding: 20px; color: #334155; font-family: sans-serif;">
+  <p>Gentile {{first_name}},</p>
+  <p>This is a default message body.</p>
+</div>`;
+
+const DEFAULT_FOOTER = `<div style="background-color: #f1f5f9; padding: 15px; text-align: center; font-size: 12px; color: #64748b;">
+  <p>&copy; 2024 My Company. All rights reserved.</p>
+</div>`;
+
+const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
+  const [name, setName] = useState(initialTemplate?.name || 'New Template');
+  const [description, setDescription] = useState(initialTemplate?.description || '');
+  const [subject, setSubject] = useState(initialTemplate?.subject || 'Welcome to our service');
+  
+  const [header, setHeader] = useState(initialTemplate?.header || DEFAULT_HEADER);
+  const [body, setBody] = useState(initialTemplate?.body || DEFAULT_BODY);
+  const [footer, setFooter] = useState(initialTemplate?.footer || DEFAULT_FOOTER);
+  
+  const [activeTab, setActiveTab] = useState<'header' | 'body' | 'footer'>('body');
+  const [showSqlModal, setShowSqlModal] = useState(false);
+  const [detectedVars, setDetectedVars] = useState<string[]>([]);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [aiPrompt, setAiPrompt] = useState('');
+  const [showAiModal, setShowAiModal] = useState(false);
+  const [nameError, setNameError] = useState('');
+
+  // Variable detection logic
+  const detectVariables = useCallback(() => {
+    const regex = /\{\{([\w\d_-]+)\}\}/g;
+    const allText = `${subject} ${header} ${body} ${footer}`;
+    const matches = [...allText.matchAll(regex)];
+    const uniqueVars = Array.from(new Set(matches.map(m => m[1])));
+    setDetectedVars(uniqueVars);
+  }, [header, body, footer, subject]);
+
+  useEffect(() => {
+    detectVariables();
+  }, [detectVariables]);
+
+  // Clear name error when typing
+  useEffect(() => {
+    if (nameError) setNameError('');
+  }, [name]);
+
+  const handleSave = async () => {
+    const newKey = generateTemplateKey(name);
+    
+    if (!newKey) {
+      setNameError('Template name cannot be empty or symbols only.');
+      alert('Template name cannot be empty.');
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+        // Check for duplicates
+        const allTemplates = await getTemplates();
+        const isDuplicate = allTemplates.some(t => {
+            // Exclude current template if we are editing
+            if (initialTemplate && t.id === initialTemplate.id) return false;
+            return generateTemplateKey(t.name) === newKey;
+        });
+
+        if (isDuplicate) {
+            setNameError('A template with this name already exists.');
+            alert('A template with this name (or resulting ID) already exists. Please choose a unique name.');
+            setIsSaving(false);
+            return;
+        }
+
+        const newTemplate: EmailTemplate = {
+            id: initialTemplate?.id || crypto.randomUUID(),
+            name,
+            description,
+            subject,
+            header,
+            body,
+            footer,
+            variables: detectedVars,
+            updatedAt: new Date().toISOString()
+        };
+        await saveTemplate(newTemplate);
+        onSave();
+    } catch (e) {
+        alert("Failed to save template. Check server logs.");
+    } finally {
+        setIsSaving(false);
+    }
+  };
+
+  const handleAiGenerate = async () => {
+    if (!aiPrompt.trim()) return;
+    setIsGenerating(true);
+    try {
+      const generated = await generateEmailContent(aiPrompt, activeTab);
+      if (activeTab === 'header') setHeader(generated);
+      if (activeTab === 'body') setBody(generated);
+      if (activeTab === 'footer') setFooter(generated);
+      setShowAiModal(false);
+      setAiPrompt('');
+    } catch (e) {
+      alert("Error generating content. Please check API Key configuration.");
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const tempTemplateObj = { 
+    id: initialTemplate?.id || 'PREVIEW', 
+    name, 
+    description, 
+    subject, 
+    header, 
+    body, 
+    footer, 
+    variables: detectedVars, 
+    updatedAt: '' 
+  };
+
+  const currentInsertSql = showSqlModal ? generateSQL(tempTemplateObj) : '';
+  const currentSelectSql = showSqlModal ? generateSelectSQL(tempTemplateObj) : '';
+  const currentN8nCode = showSqlModal ? generateN8nCode(tempTemplateObj) : '';
+
+  const getActiveContent = () => {
+    switch (activeTab) {
+      case 'header': return header;
+      case 'body': return body;
+      case 'footer': return footer;
+    }
+  };
+
+  const setActiveContent = (val: string) => {
+    switch (activeTab) {
+      case 'header': setHeader(val); break;
+      case 'body': setBody(val); break;
+      case 'footer': setFooter(val); break;
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-screen bg-slate-50">
+      {/* Top Bar */}
+      <header className="bg-white border-b border-slate-200 px-6 py-4 flex items-center justify-between sticky top-0 z-20">
+        <div className="flex items-center gap-4">
+          <button onClick={onBack} className="p-2 hover:bg-slate-100 rounded-full text-slate-500">
+            <ArrowLeft size={20} />
+          </button>
+          <div>
+            <h1 className="text-xl font-bold text-slate-800">
+              {initialTemplate ? 'Edit Template' : 'Create Template'}
+            </h1>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          <button 
+            onClick={() => setShowSqlModal(true)}
+            className="flex items-center gap-2 px-4 py-2 text-slate-600 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 font-medium transition-colors"
+          >
+            <Database size={18} />
+            Integration
+          </button>
+          <button 
+            onClick={handleSave}
+            disabled={isSaving}
+            className={`flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 font-medium transition-colors shadow-sm ${isSaving ? 'opacity-70 cursor-wait' : ''}`}
+          >
+            <Save size={18} />
+            {isSaving ? 'Saving...' : 'Save Template'}
+          </button>
+        </div>
+      </header>
+
+      <div className="flex flex-1 overflow-hidden">
+        {/* Left: Inputs */}
+        <div className="w-1/2 flex flex-col border-r border-slate-200 bg-white overflow-y-auto custom-scrollbar">
+          
+          <div className="p-6 space-y-6">
+            {/* Metadata */}
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-semibold text-slate-700 mb-1">Template Name</label>
+                <input 
+                  type="text" 
+                  value={name}
+                  onChange={e => setName(e.target.value)}
+                  className={`w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-brand-500 outline-none bg-white ${nameError ? 'border-red-500 focus:border-red-500' : 'border-slate-300 focus:border-brand-500'}`}
+                  placeholder="e.g., Welcome Email"
+                />
+                {nameError && <p className="text-red-500 text-xs mt-1">{nameError}</p>}
+                <p className="text-xs text-slate-400 mt-1">Must be unique. Used to generate the database key: <span className="font-mono bg-slate-100 px-1">{generateTemplateKey(name) || '...'}</span></p>
+              </div>
+              <div>
+                <label className="block text-sm font-semibold text-slate-700 mb-1">Email Subject</label>
+                <input 
+                  type="text" 
+                  value={subject}
+                  onChange={e => setSubject(e.target.value)}
+                  className="w-full px-3 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none bg-white"
+                  placeholder="Subject line... (supports {{placeholders}})"
+                />
+              </div>
+            </div>
+
+            {/* Variable Manager */}
+            <div className="bg-slate-50 p-4 rounded-lg border border-slate-200">
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-xs font-bold text-slate-500 uppercase tracking-wider">Active Variables</span>
+                <span className="text-xs text-slate-400">Auto-detected from text</span>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                {detectedVars.length === 0 && <span className="text-sm text-slate-400 italic">No variables detected yet. Type {'{{name}}'} to add one.</span>}
+                {detectedVars.map(v => (
+                  <span key={v} className="px-2 py-1 bg-brand-100 text-brand-700 text-sm rounded border border-brand-200 font-mono">
+                    {`{{${v}}}`}
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            {/* Tabs */}
+            <div className="flex border-b border-slate-200">
+              {(['header', 'body', 'footer'] as const).map((tab) => (
+                <button
+                  key={tab}
+                  onClick={() => setActiveTab(tab)}
+                  className={`px-4 py-2 font-medium text-sm capitalize ${
+                    activeTab === tab 
+                      ? 'text-brand-600 border-b-2 border-brand-600' 
+                      : 'text-slate-500 hover:text-slate-700'
+                  }`}
+                >
+                  {tab}
+                </button>
+              ))}
+            </div>
+
+            {/* Editor Area */}
+            <div className="relative">
+              <div className="flex justify-between items-center mb-2">
+                <label className="text-sm font-semibold text-slate-700">Content Editor</label>
+                <div className="flex gap-2">
+                   <button 
+                    onClick={() => setShowAiModal(true)}
+                    className="text-xs flex items-center gap-1 text-purple-600 hover:text-purple-700 font-medium bg-purple-50 px-2 py-1 rounded"
+                  >
+                    <Wand2 size={14} />
+                    Generate with AI
+                  </button>
+                </div>
+              </div>
+              
+              <div className="h-[400px]">
+                <RichTextEditor
+                  key={activeTab} // Force remount on tab change to sync contentEditable
+                  value={getActiveContent()}
+                  onChange={setActiveContent}
+                  placeholder={`Design your ${activeTab} here...`}
+                  className="h-full shadow-sm"
+                />
+              </div>
+
+              <p className="mt-2 text-xs text-slate-500">
+                Use the "Variable" button in the toolbar to insert placeholders like {'{{name}}'}.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Right: Live Preview */}
+        <div className="w-1/2 bg-slate-100 flex flex-col">
+          <div className="p-3 bg-white border-b border-slate-200 flex justify-between items-center shadow-sm z-10">
+            <span className="font-semibold text-slate-600 flex items-center gap-2">
+              <Eye size={18} /> Live Preview
+            </span>
+            <div className="text-xs text-slate-400">
+              Renders as standard HTML
+            </div>
+          </div>
+          <div className="flex-1 p-8 overflow-y-auto flex justify-center">
+            <div className="w-full max-w-2xl bg-white shadow-xl rounded-lg overflow-hidden min-h-[600px] flex flex-col">
+               {/* Simulate Subject Line in Preview */}
+               <div className="bg-slate-50 border-b border-slate-100 p-4">
+                  <span className="text-xs font-bold text-slate-400 uppercase">Subject:</span>
+                  <p className="text-sm font-medium text-slate-800">{subject.replace(/\{\{([\w\d_-]+)\}\}/g, (match, p1) => `<span class="bg-yellow-100 text-yellow-800 px-1 rounded">${match}</span>`)}</p>
+               </div>
+               
+               {/* Email Content */}
+               <div dangerouslySetInnerHTML={{ __html: header }} />
+               <div dangerouslySetInnerHTML={{ __html: body }} className="flex-1" />
+               <div dangerouslySetInnerHTML={{ __html: footer }} />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* SQL Modal */}
+      {showSqlModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-xl shadow-2xl w-full max-w-4xl p-6 flex flex-col max-h-[90vh]">
+             <div className="flex justify-between items-center mb-4">
+                <h3 className="text-lg font-bold text-slate-800 flex items-center gap-2">
+                  <Database size={20} className="text-brand-600"/>
+                  Integration Details
+                </h3>
+                <button onClick={() => setShowSqlModal(false)} className="text-slate-400 hover:text-slate-600">
+                  <span className="text-2xl">&times;</span>
+                </button>
+             </div>
+             
+             <div className="space-y-8 overflow-y-auto px-1 pb-4">
+                {/* INSERT Section */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div>
+                    <label className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2 block">1. Setup (Run once in DB)</label>
+                    <div className="relative">
+                      <pre className="bg-slate-900 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm font-mono custom-scrollbar h-40">
+                        {currentInsertSql}
+                      </pre>
+                      <button 
+                        onClick={() => navigator.clipboard.writeText(currentInsertSql)}
+                        className="absolute top-2 right-2 p-2 bg-slate-700 text-white rounded hover:bg-slate-600"
+                        title="Copy INSERT SQL"
+                      >
+                        <Copy size={16} />
+                      </button>
+                    </div>
+                  </div>
+
+                  <div>
+                     <label className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2 block">2. Fetch (n8n SQL Node)</label>
+                     <div className="relative">
+                      <pre className="bg-slate-800 text-slate-50 p-4 rounded-lg overflow-x-auto text-sm font-mono custom-scrollbar h-40">
+                        {currentSelectSql}
+                      </pre>
+                      <button 
+                        onClick={() => navigator.clipboard.writeText(currentSelectSql)}
+                        className="absolute top-2 right-2 p-2 bg-slate-600 text-white rounded hover:bg-slate-500"
+                        title="Copy SELECT SQL"
+                      >
+                        <Copy size={16} />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                {/* n8n Code Section */}
+                <div>
+                   <label className="text-xs font-bold text-purple-600 uppercase tracking-wider mb-2 flex items-center gap-2">
+                     <Code size={16} />
+                     3. Populate (n8n Code Node)
+                   </label>
+                   <div className="relative">
+                    <pre className="bg-slate-50 border border-slate-200 text-slate-700 p-4 rounded-lg overflow-x-auto text-sm font-mono custom-scrollbar max-h-60">
+                      {currentN8nCode}
+                    </pre>
+                    <button 
+                      onClick={() => navigator.clipboard.writeText(currentN8nCode)}
+                      className="absolute top-2 right-2 p-2 bg-white border border-slate-200 text-slate-600 rounded hover:bg-slate-50 shadow-sm"
+                      title="Copy JS Code"
+                    >
+                      <Copy size={16} />
+                    </button>
+                  </div>
+                   <p className="text-xs text-slate-500 mt-2">
+                     Paste this into a <strong>Code Node</strong> connected after your SQL node. Replace <code>REPLACE_WITH_VALUE</code> with your actual data variables (e.g. <code>$('NodeName').item.json.name</code>).
+                   </p>
+                </div>
+             </div>
+          </div>
+        </div>
+      )}
+
+      {/* AI Modal */}
+      {showAiModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-xl shadow-2xl w-full max-w-lg p-6">
+             <h3 className="text-lg font-bold text-slate-800 mb-2 flex items-center gap-2">
+               <Wand2 className="text-purple-600"/>
+               AI Content Generator
+             </h3>
+             <p className="text-sm text-slate-600 mb-4">
+               Describe what you want for the <strong>{activeTab}</strong> section. 
+               The AI will generate HTML code with placeholders.
+             </p>
+             <textarea 
+               className="w-full h-32 border border-slate-300 rounded p-3 text-sm focus:ring-2 focus:ring-purple-500 outline-none mb-4"
+               placeholder="e.g., Write a polite notification that the user's password has been changed successfully. Include a placeholder for the user's name."
+               value={aiPrompt}
+               onChange={(e) => setAiPrompt(e.target.value)}
+             />
+             <div className="flex justify-end gap-3">
+               <button 
+                 onClick={() => setShowAiModal(false)}
+                 className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded"
+               >
+                 Cancel
+               </button>
+               <button 
+                 onClick={handleAiGenerate}
+                 disabled={isGenerating || !aiPrompt}
+                 className={`px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 flex items-center gap-2 ${isGenerating ? 'opacity-70' : ''}`}
+               >
+                 {isGenerating ? 'Generating...' : 'Generate HTML'}
+                 {!isGenerating && <Wand2 size={16} />}
+               </button>
+             </div>
+             {!process.env.API_KEY && (
+               <p className="mt-3 text-xs text-red-500">
+                 Note: API_KEY not detected in environment. This feature requires a Gemini API key.
+               </p>
+             )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Editor;

components/TemplateList.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import { EmailTemplate } from '../types';
+import { Plus, Edit, Trash2, FileCode, Search, Database, ArrowRightCircle, Code } from 'lucide-react';
+import { generateSelectSQL, generateN8nCode } from '../services/storage';
+
+interface Props {
+  templates: EmailTemplate[];
+  onCreate: () => void;
+  onEdit: (t: EmailTemplate) => void;
+  onDelete: (id: string) => void;
+}
+
+const TemplateList: React.FC<Props> = ({ templates, onCreate, onEdit, onDelete }) => {
+  const [search, setSearch] = React.useState('');
+
+  const filtered = templates.filter(t => 
+    t.name.toLowerCase().includes(search.toLowerCase()) || 
+    t.subject.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const copySelectSQL = (t: EmailTemplate, e: React.MouseEvent) => {
+    e.stopPropagation();
+    const sql = generateSelectSQL(t);
+    navigator.clipboard.writeText(sql);
+    alert('SELECT query copied! Use this in your n8n SQL node.');
+  };
+
+  const copyN8nCode = (t: EmailTemplate, e: React.MouseEvent) => {
+    e.stopPropagation();
+    const code = generateN8nCode(t);
+    navigator.clipboard.writeText(code);
+    alert('JS Code copied! Paste this into your n8n Code node.');
+  };
+
+  return (
+    <div className="p-8 max-w-7xl mx-auto h-screen flex flex-col">
+      <div className="flex justify-between items-center mb-8">
+        <div>
+          <h1 className="text-3xl font-bold text-slate-900 tracking-tight">Email Templates</h1>
+          <p className="text-slate-500 mt-1">Manage HTML templates for your n8n workflows</p>
+        </div>
+        <button 
+          onClick={onCreate}
+          className="bg-brand-600 hover:bg-brand-700 text-white px-5 py-2.5 rounded-lg font-medium flex items-center gap-2 shadow-sm transition-all active:scale-95"
+        >
+          <Plus size={20} />
+          New Template
+        </button>
+      </div>
+
+      <div className="relative mb-6">
+        <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+          <Search className="h-5 w-5 text-slate-400" />
+        </div>
+        <input 
+          type="text"
+          placeholder="Search templates..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="pl-10 w-full md:w-96 px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none text-slate-700 bg-white shadow-sm"
+        />
+      </div>
+
+      {filtered.length === 0 ? (
+        <div className="flex-1 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 rounded-2xl bg-slate-50">
+          <div className="bg-white p-4 rounded-full shadow-sm mb-4">
+            <FileCode className="h-8 w-8 text-slate-400" />
+          </div>
+          <h3 className="text-lg font-medium text-slate-900">No templates found</h3>
+          <p className="text-slate-500 mt-1 max-w-sm text-center">Get started by creating your first HTML email template for automation.</p>
+          <button 
+            onClick={onCreate}
+            className="mt-6 text-brand-600 font-medium hover:text-brand-800"
+          >
+            Create one now &rarr;
+          </button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 overflow-y-auto pb-8 custom-scrollbar">
+          {filtered.map(t => (
+            <div 
+              key={t.id}
+              onClick={() => onEdit(t)}
+              className="bg-white rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow cursor-pointer group flex flex-col h-60"
+            >
+              <div className="p-5 flex-1">
+                <div className="flex justify-between items-start mb-2">
+                  <h3 className="font-bold text-lg text-slate-800 group-hover:text-brand-600 transition-colors line-clamp-1" title={t.name}>
+                    {t.name}
+                  </h3>
+                  <span className="text-xs bg-slate-100 text-slate-500 px-2 py-1 rounded">
+                    {new Date(t.updatedAt).toLocaleDateString()}
+                  </span>
+                </div>
+                <p className="text-sm text-slate-500 line-clamp-2 mb-3 h-10">
+                  {t.description || 'No description provided.'}
+                </p>
+                <div className="text-xs text-slate-400 mb-1">Subject:</div>
+                <div className="text-sm text-slate-700 font-medium bg-slate-50 p-2 rounded truncate border border-slate-100">
+                  {t.subject}
+                </div>
+                <div className="mt-3 flex flex-wrap gap-1">
+                   {t.variables.slice(0, 3).map(v => (
+                     <span key={v} className="text-[10px] bg-brand-50 text-brand-600 px-1.5 py-0.5 rounded border border-brand-100">
+                       {/* Explicitly building the string to avoid rendering issues */}
+                       {'{{' + v + '}}'}
+                     </span>
+                   ))}
+                   {t.variables.length > 3 && (
+                     <span className="text-[10px] text-slate-400 px-1 py-0.5">+ {t.variables.length - 3} more</span>
+                   )}
+                </div>
+              </div>
+              <div className="border-t border-slate-100 p-3 flex justify-between bg-slate-50/50 rounded-b-xl gap-2">
+                <div className="flex gap-1">
+                   <button 
+                    onClick={(e) => copySelectSQL(t, e)}
+                    className="flex items-center gap-1 text-xs font-medium text-slate-600 hover:text-brand-600 px-2 py-1 rounded hover:bg-white border border-transparent hover:border-slate-200 transition-all shadow-sm"
+                    title="Copy SELECT query"
+                  >
+                    <ArrowRightCircle size={14} />
+                    SQL
+                  </button>
+                  <button 
+                    onClick={(e) => copyN8nCode(t, e)}
+                    className="flex items-center gap-1 text-xs font-medium text-slate-600 hover:text-purple-600 px-2 py-1 rounded hover:bg-white border border-transparent hover:border-slate-200 transition-all shadow-sm"
+                    title="Copy n8n Code Node JS"
+                  >
+                    <Code size={14} />
+                    JS
+                  </button>
+                </div>
+                <div className="flex gap-1">
+                  <button 
+                    onClick={(e) => { e.stopPropagation(); onEdit(t); }}
+                    className="p-1.5 text-slate-500 hover:text-brand-600 hover:bg-white rounded shadow-sm transition-all"
+                    title="Edit"
+                  >
+                    <Edit size={16} />
+                  </button>
+                  <button 
+                    onClick={(e) => { e.stopPropagation(); onDelete(t.id); }}
+                    className="p-1.5 text-slate-500 hover:text-red-600 hover:bg-white rounded shadow-sm transition-all"
+                    title="Delete"
+                  >
+                    <Trash2 size={16} />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TemplateList;