Update App.tsx

App.tsx

@@ -1,8 +1,9 @@
+
 import React, { useState, useEffect } from 'react';
 import TemplateList from './components/TemplateList';
 import TemplateEditor from './components/TemplateEditor';
 import { ViewState, EmailTemplate, SQL_SCHEMA } from './types';
-import { getTemplates, deleteTemplate } from './services/storage';
+import { getTemplates, deleteTemplate, generateUUID } from './services/storage';
 import { Database } from 'lucide-react';
 
 const App: React.FC = () => {
@@ -18,9 +19,14 @@ const App: React.FC = () => {
 
   const refreshTemplates = async () => {
     setIsLoading(true);
-    const data = await getTemplates();
-    setTemplates(data);
-    setIsLoading(false);
+    try {
+      const data = await getTemplates();
+      setTemplates(data);
+    } catch (err) {
+      console.error("Refresh Error:", err);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   const handleCreate = () => {
@@ -34,10 +40,9 @@ const App: React.FC = () => {
   };
 
   const handleClone = (t: EmailTemplate) => {
-    // Create a copy of the template with a new ID and updated name
     const clonedTemplate: EmailTemplate = {
       ...t,
-      id: crypto.randomUUID(), // Generate new ID so it's treated as a new insert
+      id: generateUUID(),
       name: `${t.name} (Copia)`,
       updatedAt: new Date().toISOString()
     };
@@ -64,7 +69,7 @@ const App: React.FC = () => {
         <>
           {isLoading ? (
             <div className="flex h-screen items-center justify-center text-slate-500">
-              Caricamento template...
+              Caricamento...
             </div>
           ) : (
             <TemplateList 
@@ -95,17 +100,13 @@ const App: React.FC = () => {
         />
       )}
 
-      {/* Database Schema Modal (Global Help) */}
       {showSchema && (
         <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
           <div className="bg-white rounded-xl shadow-2xl max-w-2xl w-full p-6">
             <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
               <Database className="text-brand-600"/> 
-              Configurazione Database per n8n
+              Configurazione DB
             </h2>
-            <p className="text-slate-600 text-sm mb-4">
-              Per far funzionare questa app con il tuo software interno, crea questa tabella nel tuo database MySQL o PostgreSQL.
-            </p>
             <div className="bg-slate-900 text-slate-100 p-4 rounded-lg overflow-x-auto custom-scrollbar mb-4">
               <pre className="text-xs font-mono leading-relaxed">{SQL_SCHEMA}</pre>
             </div>
@@ -113,7 +114,7 @@ const App: React.FC = () => {
               <button 
                 onClick={() => {
                   navigator.clipboard.writeText(SQL_SCHEMA);
-                  alert("Schema copiato!");
+                  alert("Copiato!");
                 }}
                 className="px-4 py-2 bg-slate-100 text-slate-700 font-medium rounded hover:bg-slate-200"
               >