style: rivisto menu informazioni contatti e link. style: ora l'invio delle email considera il vero corpo. altri leggeri fixxamenti.

public/css/style.css

@@ -2698,3 +2698,20 @@ body {
   display: flex;
   gap: 6px;
 }
+
+/* Hover popover per dettagli articolo (pulsante i) */
+.article-info-popover-wrapper:hover .article-info-popover,
+.article-info-popover:hover {
+  display: block !important;
+}
+
+.article-info-popover::before {
+  content: '';
+  position: absolute;
+  top: -25px;
+  bottom: -25px;
+  left: -30px;
+  right: -80px;
+  background: transparent;
+  pointer-events: auto;
+}

public/js/views/emailCompose.js

@@ -96,14 +96,30 @@ const EmailCompose = (() => {
         border: 1px solid var(--border-subtle);
         border-radius: var(--radius-md);
         overflow: hidden;
-        background: var(--bg-tertiary);
+        background: #ffffff;
+        color: #1e293b;
+      }
+      [data-theme="dark"] #email-compose-modal .ec-editor-wrapper,
+      body.dark-mode #email-compose-modal .ec-editor-wrapper {
+        background: #0f172a;
+        color: #f8fafc;
       }
       #email-compose-modal .ec-editor-wrapper .ql-toolbar {
         border: none; border-bottom: 1px solid var(--border-subtle);
         background: var(--bg-secondary);
       }
       #email-compose-modal .ec-editor-wrapper .ql-container {
-        border: none; min-height: 220px; font-size: 0.9rem;
+        border: none; min-height: 260px; font-size: 0.92rem; font-family: Inter, -apple-system, sans-serif;
+      }
+      #email-compose-modal .ec-editor-wrapper .ql-editor {
+        min-height: 260px;
+        padding: 16px;
+        line-height: 1.6;
+        color: inherit;
+      }
+      #email-compose-modal .ec-editor-wrapper .ql-editor.ql-blank::before {
+        color: var(--text-muted);
+        font-style: normal;
       }
       #email-compose-modal .ec-attachments-zone {
         border: 2px dashed var(--border-subtle);

public/js/views/ticketDetail.js

@@ -1962,7 +1962,7 @@ const TicketDetailView = {
         const extractedLinks = this.extractLinks(processedBody || a.a_body || '');
 
         return `
-                    <div class="article-card sender-${(a.sender_type || 'system').toLowerCase()}">
+                    <div class="article-card sender-${(a.sender_type || 'system').toLowerCase()}" style="margin-bottom: var(--space-md);">
                       <div class="article-header">
                         <div class="article-sender">
                           <span class="article-sender-badge ${(a.sender_type || 'system').toLowerCase()}">${a.sender_type || 'System'}</span>
@@ -1972,6 +1972,74 @@ const TicketDetailView = {
                           <button class="btn-delete-article" data-article-id="${a.article_id}" style="background:var(--bg-tertiary); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); cursor:pointer; padding:3px 6px; margin-left:var(--space-xs); display:inline-flex; align-items:center; justify-content:center; color:var(--danger); transition:all 0.15s ease; opacity:1;" title="Elimina Articolo">
                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px; height:14px;"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
                           </button>
+
+                          <!-- Pulsante Info (i) a destra del cestino con popover al passaggio del mouse -->
+                          <div class="article-info-popover-wrapper" style="position: relative; display: inline-flex; margin-left: var(--space-xs); padding: 15px 60px 45px 20px; margin-top: -15px; margin-bottom: -45px; margin-right: -60px; margin-left: -20px;">
+                            <button class="btn-article-info" style="background:var(--bg-tertiary); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); cursor:pointer; padding:3px 6px; display:inline-flex; align-items:center; justify-content:center; color:var(--accent-primary); transition:all 0.15s ease; font-weight:700; font-size:0.75rem; width:22px; height:22px; position:relative; z-index:2;" title="Dettagli e Persone Email">
+                              ℹ️
+                            </button>
+
+                            <div class="article-info-popover" style="position: absolute; top: calc(100% - 25px); left: 10px; width: 340px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 12px; font-size: 0.78rem; box-shadow: var(--shadow-lg); z-index: 120; display: none; text-align: left;">
+                              <div style="font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 4px; display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem;">
+                                <span style="display: flex; align-items: center; gap: 4px;">
+                                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;color:var(--accent-primary);"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+                                  Dettagli Email #${a.article_id}
+                                </span>
+                              </div>
+                              
+                              <div style="margin-bottom: 6px; word-break: break-all; line-height: 1.35; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;">
+                                <div>
+                                  <strong style="color: var(--text-muted);">Da:</strong>
+                                  <span style="color: var(--text-primary); font-family: inherit;">${App.escapeHtml(a.a_from || a.creator_first + ' ' + a.creator_last || '—')}</span>
+                                </div>
+                                ${(a.a_from) ? `
+                                  <button class="btn-copy-email-addr" data-copy-text="${App.escapeHtml(a.a_from)}" title="Copia Da" style="background:var(--bg-tertiary); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); cursor:pointer; padding:2px 5px; font-size:0.7rem; flex-shrink:0; color:var(--text-secondary);">📋 Copia</button>
+                                ` : ''}
+                              </div>
+
+                              ${a.a_to ? `
+                                <div style="margin-bottom: 6px; word-break: break-all; line-height: 1.35; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;">
+                                  <div>
+                                    <strong style="color: var(--text-muted);">A:</strong>
+                                    <span style="color: var(--text-primary); font-family: inherit;">${App.escapeHtml(a.a_to)}</span>
+                                  </div>
+                                  <button class="btn-copy-email-addr" data-copy-text="${App.escapeHtml(a.a_to)}" title="Copia A" style="background:var(--bg-tertiary); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); cursor:pointer; padding:2px 5px; font-size:0.7rem; flex-shrink:0; color:var(--text-secondary);">📋 Copia</button>
+                                </div>
+                              ` : ''}
+
+                              ${a.a_cc ? `
+                                <div style="margin-bottom: 6px; word-break: break-all; line-height: 1.35; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;">
+                                  <div>
+                                    <strong style="color: var(--text-muted);">Cc:</strong>
+                                    <span style="color: var(--text-primary); font-family: inherit;">${App.escapeHtml(a.a_cc)}</span>
+                                  </div>
+                                  <button class="btn-copy-email-addr" data-copy-text="${App.escapeHtml(a.a_cc)}" title="Copia Cc" style="background:var(--bg-tertiary); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); cursor:pointer; padding:2px 5px; font-size:0.7rem; flex-shrink:0; color:var(--text-secondary);">📋 Copia</button>
+                                </div>
+                              ` : ''}
+
+                              <div style="font-weight: 700; color: var(--text-secondary); margin-top: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 4px; display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem;">
+                                <span style="display: flex; align-items: center; gap: 4px;">
+                                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:13px;height:13px;color:var(--accent-primary);"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+                                  Link contenuti
+                                </span>
+                                <span class="badge" style="font-size: 0.7rem; padding: 1px 6px; background: var(--bg-tertiary);">${extractedLinks.length}</span>
+                              </div>
+
+                              ${extractedLinks.length > 0 ? `
+                                <div class="article-links-minilist" style="display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; padding-right: 2px;">
+                                  ${extractedLinks.map(link => `
+                                    <a href="${App.escapeHtml(link.url)}" target="_blank" rel="noopener noreferrer" title="${App.escapeHtml(link.url)}" style="color: var(--accent-primary); text-decoration: none; word-break: break-all; font-size: 0.75rem; display: flex; align-items: flex-start; gap: 4px; line-height: 1.3; background: var(--bg-tertiary); padding: 4px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);">
+                                      <span style="flex-shrink:0; font-size: 0.7rem;">🌐</span>
+                                      <span style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word;">${App.escapeHtml(link.text || link.url)}</span>
+                                    </a>
+                                  `).join('')}
+                                </div>
+                              ` : `
+                                <div style="color: var(--text-muted); font-size: 0.75rem; font-style: italic;">Nessun link presente</div>
+                              `}
+                            </div>
+                          </div>
+
                           <button class="btn-email-article" data-article-id="${a.article_id}" style="background:var(--bg-tertiary); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); cursor:pointer; padding:3px 6px; margin-left:var(--space-xs); display:inline-flex; align-items:center; justify-content:center; color:var(--accent-secondary); transition:all 0.15s ease; opacity:1;" title="Rispondi via email (Quota questo articolo)">
                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px; height:14px;"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                           </button>
@@ -2007,65 +2075,20 @@ const TicketDetailView = {
                       </div>
                       ${a.a_subject ? `<div class="article-subject" style="font-weight:700; font-size:0.95rem; color:var(--text-primary); margin-bottom:var(--space-xs);">${App.escapeHtml(a.a_subject)}</div>` : ''}
                       
-                      <div class="article-content-layout" style="display: flex; gap: var(--space-md); align-items: flex-start; flex-wrap: wrap;">
+                      <div class="article-body-main" style="width: 100%;">
-                        <div class="article-body-main" style="flex: 1; min-width: 280px; width: 0;">
+                        ${displayBody}
-                          ${displayBody}
                         
-                          ${visibleAttachments.length > 0 ? `
+                        ${visibleAttachments.length > 0 ? `
-                            <div class="article-attachments">
+                          <div class="article-attachments">
-                              ${visibleAttachments.map(att => `
+                            ${visibleAttachments.map(att => `
-                                <a href="/api/tickets/attachments/${att.id}" class="attachment-badge" target="_blank" download="${att.filename}" data-is-image="${(att.content_type || '').startsWith('image/')}">
+                              <a href="/api/tickets/attachments/${att.id}" class="attachment-badge" target="_blank" download="${att.filename}" data-is-image="${(att.content_type || '').startsWith('image/')}">
-                                  <span>📎</span>
+                                <span>📎</span>
-                                  <strong>${App.escapeHtml(att.filename)}</strong>
+                                <strong>${App.escapeHtml(att.filename)}</strong>
-                                  <span class="attachment-size">(${Math.round(att.content_size / 1024)} KB)</span>
+                                <span class="attachment-size">(${Math.round(att.content_size / 1024)} KB)</span>
-                                </a>
+                              </a>
-                              `).join('')}
+                            `).join('')}
-                            </div>
-                          ` : ''}
-                        </div>
-
-                        <!-- Scheda a lato per ogni mail con Da: A: Cc: e lista Link -->
-                        <div class="article-email-side-card" style="width: 260px; min-width: 220px; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 12px; font-size: 0.78rem; align-self: flex-start; box-shadow: var(--shadow-sm);">
-                          <div style="font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 4px; display: flex; align-items: center; gap: 4px; font-size: 0.8rem;">
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;color:var(--accent-primary);"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-                            Dettagli Mail
                           </div>
-                          <div style="margin-bottom: 6px; word-break: break-all; line-height: 1.35;">
+                        ` : ''}
-                            <strong style="color: var(--text-muted);">Da:</strong>
-                            <span style="color: var(--text-primary); font-family: inherit;">${App.escapeHtml(a.a_from || '—')}</span>
-                          </div>
-                          <div style="margin-bottom: 6px; word-break: break-all; line-height: 1.35;">
-                            <strong style="color: var(--text-muted);">A:</strong>
-                            <span style="color: var(--text-primary); font-family: inherit;">${App.escapeHtml(a.a_to || '—')}</span>
-                          </div>
-                          ${a.a_cc ? `
-                            <div style="margin-bottom: 6px; word-break: break-all; line-height: 1.35;">
-                              <strong style="color: var(--text-muted);">Cc:</strong>
-                              <span style="color: var(--text-primary); font-family: inherit;">${App.escapeHtml(a.a_cc)}</span>
-                            </div>
-                          ` : ''}
-
-                          <div style="font-weight: 700; color: var(--text-secondary); margin-top: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 4px; display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem;">
-                            <span style="display: flex; align-items: center; gap: 4px;">
-                              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;color:var(--accent-primary);"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
-                              Link contenuti
-                            </span>
-                            <span class="badge" style="font-size: 0.7rem; padding: 1px 6px; background: var(--bg-card);">${extractedLinks.length}</span>
-                          </div>
-
-                          ${extractedLinks.length > 0 ? `
-                            <div class="article-links-minilist" style="display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; padding-right: 2px;">
-                              ${extractedLinks.map(link => `
-                                <a href="${App.escapeHtml(link.url)}" target="_blank" rel="noopener noreferrer" title="${App.escapeHtml(link.url)}" style="color: var(--accent-primary); text-decoration: none; word-break: break-all; font-size: 0.75rem; display: flex; align-items: flex-start; gap: 4px; line-height: 1.3; background: var(--bg-card); padding: 4px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); transition: border-color 0.15s ease;">
-                                  <span style="flex-shrink:0; font-size: 0.7rem;">🌐</span>
-                                  <span style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word;">${App.escapeHtml(link.text || link.url)}</span>
-                                </a>
-                              `).join('')}
-                            </div>
-                          ` : `
-                            <div style="color: var(--text-muted); font-size: 0.75rem; font-style: italic;">Nessun link presente</div>
-                          `}
-                        </div>
                       </div>
                     </div>
                   `;
@@ -2695,9 +2718,10 @@ const TicketDetailView = {
         if (!article) return;
 
         if (window.EmailCompose) {
-          const hasHtml = (article.a_content_type || '').toLowerCase().includes('html') || article.a_body.includes('</') || article.a_body.includes('/>');
+          const rawQuotedBody = article.html_body || article.a_body || '';
+          const hasHtml = article.has_html || (article.a_content_type || '').toLowerCase().includes('html') || rawQuotedBody.includes('</') || rawQuotedBody.includes('/>');
 
-          let processedQuoted = article.a_body || '';
+          let processedQuoted = rawQuotedBody;
           if (hasHtml) {
             const articleAttachments = (attachments || []).filter(att => att.article_id === article.article_id);
             articleAttachments.forEach(att => {
@@ -2721,8 +2745,8 @@ const TicketDetailView = {
 
           const initialBodyHtml = `
             <p><br></p>
-            <p>Il ${App.formatDateTime(article.create_time)}, <strong>${App.escapeHtml(article.a_from || 'Sistema')}</strong> ha scritto:</p>
+            <p style="font-size:0.88rem; color:var(--text-muted); margin-bottom:8px;">Il ${App.formatDateTime(article.create_time)}, <strong>${App.escapeHtml(article.a_from || 'Sistema')}</strong> ha scritto:</p>
-            <blockquote style="border-left: 2px solid var(--border-subtle, #444); padding-left: 12px; margin-left: 8px; color: var(--text-secondary);">
+            <blockquote style="border-left: 3px solid var(--accent-primary, #3b82f6); background: rgba(255, 255, 255, 0.03); border-radius: 0 6px 6px 0; padding: 10px 14px; margin: 4px 0 12px 0; color: inherit;">
               ${quotedBody}
             </blockquote>
             <p><br></p>
@@ -2786,6 +2810,27 @@ const TicketDetailView = {
       });
     });
 
+    // Event listener for email address copy buttons inside popover
+    container.querySelectorAll('.btn-copy-email-addr').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const textToCopy = btn.dataset.copyText || '';
+        if (textToCopy) {
+          navigator.clipboard.writeText(textToCopy).then(() => {
+            const origText = btn.textContent;
+            btn.textContent = '✓ Copiato!';
+            btn.style.color = 'var(--success)';
+            setTimeout(() => {
+              btn.textContent = origText;
+              btn.style.color = 'var(--text-secondary)';
+            }, 1500);
+          }).catch(err => {
+            Toast.error('Impossibile copiare: ' + err.message);
+          });
+        }
+      });
+    });
+
     // Retrodate Ticket Event Listeners
     const btnEditTicketDate = document.getElementById('btn-edit-ticket-date');
     const ticketDateEditor = document.getElementById('ticket-date-editor');