Melhore as funcionalidades e o UX conforme as melhores práticas

index.html

@@ -25,18 +25,30 @@
 
         <!-- Controles -->
         <div class="flex flex-wrap justify-between items-center gap-4 mb-6 pb-4 border-b no-print">
-            <div class="flex gap-2">
-                <input type="text" id="newEntityInput" placeholder="Nome do Réu, Prova, Testemunha..." class="border border-gray-300 rounded px-4 py-2 w-72 focus:ring-2 focus:ring-primary outline-none transition" />
-                <button id="addEntityBtn" class="bg-primary hover:bg-primary-dark text-white font-semibold py-2 px-4 rounded transition duration-200">➕ Adicionar</button>
+            <div class="flex gap-2 flex-grow">
+                <input type="text" id="newEntityInput" placeholder="Nome do Réu, Prova, Testemunha..." 
+                    class="border border-gray-300 rounded px-4 py-2 w-full max-w-md focus:ring-2 focus:ring-primary outline-none transition" 
+                    autocomplete="off" />
+                <button id="addEntityBtn" class="bg-primary hover:bg-primary-dark text-white font-semibold py-2 px-4 rounded transition duration-200 flex items-center gap-1">
+                    <span class="text-lg">➕</span> Adicionar
+                </button>
             </div>
-            <div class="flex gap-2">
-                <button onclick="exportMatrix()" class="bg-secondary hover:bg-secondary-dark text-white font-semibold py-2 px-4 rounded transition duration-200">📤 Exportar</button>
-                <button onclick="importMatrix()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded transition duration-200">📥 Importar</button>
-                <button onclick="window.print()" class="bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded transition duration-200">🖨️ Imprimir / Salvar PDF</button>
+            <div class="flex gap-2 flex-wrap">
+                <button onclick="exportMatrix()" class="bg-secondary hover:bg-secondary-dark text-white font-semibold py-2 px-4 rounded transition duration-200 flex items-center gap-1">
+                    <span class="text-lg">📤</span> Exportar
+                </button>
+                <button onclick="importMatrix()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded transition duration-200 flex items-center gap-1">
+                    <span class="text-lg">📥</span> Importar
+                </button>
+                <button onclick="window.print()" class="bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded transition duration-200 flex items-center gap-1">
+                    <span class="text-lg">🖨️</span> Imprimir
+                </button>
+                <button onclick="clearAllData()" class="bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded transition duration-200 flex items-center gap-1">
+                    <span class="text-lg">🗑️</span> Limpar Tudo
+                </button>
             </div>
         </div>
-
-        <!-- Tabela -->
+<!-- Tabela -->
         <div class="overflow-x-auto">
             <table id="matrix-table" class="min-w-full border-collapse"></table>
         </div>

script.js

@@ -7,15 +7,13 @@ document.addEventListener('DOMContentLoaded', () => {
     const noteTextarea = document.getElementById('note-textarea');
     const noteContext = document.getElementById('note-context');
     let currentNoteCell = null;
-
     const RELATION_STATES = [
-        { class: 'bg-green-100 text-green-800', symbol: '✔', tooltip: 'Vínculo Confirmado' },
-        { class: 'bg-yellow-100 text-yellow-800', symbol: '∼', tooltip: 'Vínculo Possível' },
-        { class: 'bg-red-100 text-red-800', symbol: '✖', tooltip: 'Vínculo Excluído' },
-        { class: 'bg-gray-100 text-gray-600', symbol: '•', tooltip: 'Não Analisado' }
+        { class: 'bg-green-100 text-green-800 hover:bg-green-200', symbol: '✔', tooltip: 'Vínculo Confirmado' },
+        { class: 'bg-yellow-100 text-yellow-800 hover:bg-yellow-200', symbol: '∼', tooltip: 'Vínculo Possível' },
+        { class: 'bg-red-100 text-red-800 hover:bg-red-200', symbol: '✖', tooltip: 'Vínculo Excluído' },
+        { class: 'bg-gray-100 text-gray-600 hover:bg-gray-200', symbol: '•', tooltip: 'Não Analisado' }
     ];
-
-    let data = { entities: [], relations: {} };
+let data = { entities: [], relations: {} };
 
     function saveData() {
         localStorage.setItem('triangularMatrixData', JSON.stringify(data));
@@ -92,33 +90,75 @@ document.addEventListener('DOMContentLoaded', () => {
 
         saveData();
     }
-
     function addEntity() {
         const name = newEntityInput.value.trim();
-        if (!name) { alert('Por favor, digite o nome da entidade.'); return; }
-        if (data.entities.includes(name)) { alert('Essa entidade já está na lista.'); return; }
+        if (!name) {
+            showToast('Por favor, digite o nome da entidade.', 'error');
+            newEntityInput.focus();
+            return;
+        }
+        if (data.entities.includes(name)) {
+            showToast('Essa entidade já está na lista.', 'warning');
+            return;
+        }
         data.entities.push(name);
         newEntityInput.value = '';
         renderMatrix();
+        showToast('Entidade adicionada com sucesso!', 'success');
     }
 
+    function showToast(message, type = 'info') {
+        const toast = document.createElement('div');
+        toast.className = `fixed bottom-4 right-4 px-4 py-2 rounded-md shadow-lg text-white ${
+            type === 'error' ? 'bg-red-500' : 
+            type === 'success' ? 'bg-green-500' : 
+            type === 'warning' ? 'bg-yellow-500' : 'bg-blue-500'
+        }`;
+        toast.textContent = message;
+        document.body.appendChild(toast);
+        setTimeout(() => {
+            toast.classList.add('opacity-0', 'transition-opacity', 'duration-300');
+            setTimeout(() => toast.remove(), 300);
+        }, 3000);
+    }
     function deleteEntity(index) {
         const entityName = data.entities[index];
-        if (!confirm(`Tem certeza que deseja remover "${entityName}"? Todos os seus vínculos serão perdidos.`)) return;
-        data.entities.splice(index, 1);
-        const newRelations = {};
-        for (const key in data.relations) {
-            const [r, c] = key.split('-').map(Number);
-            if (r === index || c === index) continue;
-            let newR = r > index ? r - 1 : r;
-            let newC = c > index ? c - 1 : c;
-            newRelations[`${newR}-${newC}`] = data.relations[key];
-        }
-        data.relations = newRelations;
-        renderMatrix();
+        const modal = document.createElement('div');
+        modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
+        modal.innerHTML = `
+            <div class="bg-white rounded-lg shadow-lg max-w-md w-full p-6">
+                <h2 class="text-xl font-bold mb-4">Confirmar Exclusão</h2>
+                <p class="mb-6">Tem certeza que deseja remover <strong>"${entityName}"</strong>? Todos os seus vínculos serão perdidos.</p>
+                <div class="flex justify-end gap-2">
+                    <button class="cancel-btn px-4 py-2 bg-gray-300 hover:bg-gray-400 rounded-md transition">Cancelar</button>
+                    <button class="confirm-btn px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md transition">Excluir</button>
+                </div>
+            </div>
+        `;
+        
+        document.body.appendChild(modal);
+        
+        modal.querySelector('.cancel-btn').addEventListener('click', () => {
+            modal.remove();
+        });
+        
+        modal.querySelector('.confirm-btn').addEventListener('click', () => {
+            data.entities.splice(index, 1);
+            const newRelations = {};
+            for (const key in data.relations) {
+                const [r, c] = key.split('-').map(Number);
+                if (r === index || c === index) continue;
+                let newR = r > index ? r - 1 : r;
+                let newC = c > index ? c - 1 : c;
+                newRelations[`${newR}-${newC}`] = data.relations[key];
+            }
+            data.relations = newRelations;
+            renderMatrix();
+            modal.remove();
+            showToast('Entidade removida com sucesso!', 'success');
+        });
     }
-
-    function getRelationKey(cell) { return `${cell.dataset.row}-${cell.dataset.col}`; }
+function getRelationKey(cell) { return `${cell.dataset.row}-${cell.dataset.col}`; }
 
     window.openNoteModal = (cell) => {
         currentNoteCell = cell;
@@ -155,10 +195,37 @@ document.addEventListener('DOMContentLoaded', () => {
         a.click();
         URL.revokeObjectURL(a.href);
     };
+    window.clearAllData = () => {
+        const modal = document.createElement('div');
+        modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
+        modal.innerHTML = `
+            <div class="bg-white rounded-lg shadow-lg max-w-md w-full p-6">
+                <h2 class="text-xl font-bold mb-4">Confirmar Limpeza</h2>
+                <p class="mb-6">Tem certeza que deseja limpar TODOS os dados? Esta ação não pode ser desfeita.</p>
+                <div class="flex justify-end gap-2">
+                    <button class="cancel-btn px-4 py-2 bg-gray-300 hover:bg-gray-400 rounded-md transition">Cancelar</button>
+                    <button class="confirm-btn px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md transition">Limpar Tudo</button>
+                </div>
+            </div>
+        `;
+        
+        document.body.appendChild(modal);
+        
+        modal.querySelector('.cancel-btn').addEventListener('click', () => {
+            modal.remove();
+        });
+        
+        modal.querySelector('.confirm-btn').addEventListener('click', () => {
+            data = { entities: [], relations: {} };
+            localStorage.removeItem('triangularMatrixData');
+            renderMatrix();
+            modal.remove();
+            showToast('Todos os dados foram limpos!', 'success');
+        });
+    };
 
     window.importMatrix = () => { importInput.click(); };
-
-    importInput.addEventListener('change', (e) => {
+importInput.addEventListener('change', (e) => {
         const file = e.target.files[0];
         if (!file) return;
         const reader = new FileReader();
@@ -180,14 +247,22 @@ document.addEventListener('DOMContentLoaded', () => {
 
     addEntityBtn.addEventListener('click', addEntity);
     newEntityInput.addEventListener('keypress', e => { if (e.key === 'Enter') addEntity(); });
-
     matrixTable.addEventListener('click', e => {
         const cell = e.target.closest('.relation-cell');
         if (cell) {
+            cell.classList.add('scale-90');
+            setTimeout(() => cell.classList.remove('scale-90'), 200);
+            
             const key = getRelationKey(cell);
             if (!data.relations[key]) data.relations[key] = { state: 3, note: '' };
             data.relations[key].state = (data.relations[key].state + 1) % RELATION_STATES.length;
-            renderMatrix();
+            
+            // Feedback visual imediato antes do re-render
+            const newState = RELATION_STATES[data.relations[key].state];
+            cell.className = `relation-cell border-b border-gray-300 text-center cursor-pointer relative text-3xl w-16 h-16 ${newState.class} scale-90`;
+            cell.innerHTML = `${newState.symbol}<span class="note-indicator"></span>`;
+            
+            setTimeout(() => renderMatrix(), 200); // Re-render após animação
             return;
         }
         const deleteBtn = e.target.closest('.btn-delete');
@@ -195,8 +270,7 @@ document.addEventListener('DOMContentLoaded', () => {
             deleteEntity(parseInt(deleteBtn.dataset.index));
         }
     });
-
-    matrixTable.addEventListener('contextmenu', e => {
+matrixTable.addEventListener('contextmenu', e => {
         const cell = e.target.closest('.relation-cell');
         if (cell) {
             e.preventDefault();

style.css

@@ -8,9 +8,19 @@
     background-color: #3b82f6;
     border-radius: 50%;
     display: none;
+    transition: all 0.2s ease;
 }
 .has-note .note-indicator {
     display: block;
+    animation: pulse 1.5s infinite;
+}
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.3); }
+    100% { transform: scale(1); }
+}
+.relation-cell {
+    transition: all 0.2s ease;
 }
 .btn-delete {
     visibility: hidden;