Update TemplateList.tsx

components/TemplateList.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { EmailTemplate } from '../types';
-import { Plus, Edit, Trash2, FileCode, Search, Database, ArrowRightCircle, Code, CopyPlus } from 'lucide-react';
-import { generateSelectSQL, generateN8nCode } from '../services/storage';
+import { Plus, Edit, Trash2, FileCode, Search, Database, ArrowRightCircle, Code, CopyPlus, Key } from 'lucide-react';
+import { generateSelectSQL, generateN8nCode, generateTemplateKey } from '../services/storage';
 
 interface Props {
   templates: EmailTemplate[];
@@ -33,6 +33,13 @@ const TemplateList: React.FC<Props> = ({ templates, onCreate, onEdit, onClone, o
     alert('JS Code copied! Paste this into your n8n Code node.');
   };
 
+  const copyTemplateKey = (t: EmailTemplate, e: React.MouseEvent) => {
+    e.stopPropagation();
+    const key = generateTemplateKey(t.name);
+    navigator.clipboard.writeText(key);
+    alert(`Template Key '${key}' copied to clipboard!`);
+  };
+
   return (
     <div className="p-8 max-w-7xl mx-auto h-screen flex flex-col">
       <div className="flex justify-between items-center mb-8">
@@ -130,6 +137,14 @@ const TemplateList: React.FC<Props> = ({ templates, onCreate, onEdit, onClone, o
                     <Code size={14} />
                     JS
                   </button>
+                  <button 
+                    onClick={(e) => copyTemplateKey(t, e)}
+                    className="flex items-center gap-1 text-xs font-medium text-slate-600 hover:text-orange-600 px-2 py-1 rounded hover:bg-white border border-transparent hover:border-slate-200 transition-all shadow-sm"
+                    title="Copy Template Key"
+                  >
+                    <Key size={14} />
+                    Key
+                  </button>
                 </div>
                 <div className="flex gap-1">
                   <button