From e9c9fd587569f9e869115ad6a7ed34449ee490c9 Mon Sep 17 00:00:00 2001
From: JotaChina <sousacj1@gmail.com>
Date: Mon, 15 Dec 2025 19:02:32 -0300
Subject: [PATCH] =?UTF-8?q?reforma=20da=20interface=20da=20p=C3=A1gina=20d?=
 =?UTF-8?q?e=20projetos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/projetos.md | 61 ++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 60 insertions(+), 1 deletion(-)

diff --git a/pages/projetos.md b/pages/projetos.md
index a902cf3a..9bcbca7e 100755
--- a/pages/projetos.md
+++ b/pages/projetos.md
@@ -82,6 +82,32 @@ permalink: /projetos/
                    </div>
                  </div>
 
+                 <div class="control has-icons-left">
+                  <div class="select is-small is-rounded">
+                    <select id="key-filter">
+                      <option value="all">🎹 Todos os Tons</option>
+                      <option value="C">C (Dó Maior)</option>
+                      <option value="Db">Db (Réb Maior)</option>
+                      <option value="D">D (Ré Maior)</option>
+                      <option value="Eb">Eb (Mib Maior)</option>
+                      <option value="E">E (Mi Maior)</option>
+                      <option value="F">F (Fá Maior)</option>
+                      <option value="Gb">Gb (Solb Maior)</option>
+                      <option value="G">G (Sol Maior)</option>
+                      <option value="Ab">Ab (Láb Maior)</option>
+                      <option value="A">A (Lá Maior)</option>
+                      <option value="Bb">Bb (Sib Maior)</option>
+                      <option value="B">B (Si Maior)</option>
+                      <option value="Cm">Cm (Dó Menor)</option>
+                      <option value="C#m">C#m (Dó# Menor)</option>
+                      <option value="Dm">Dm (Ré Menor)</option>
+                      </select>
+                  </div>
+                  <div class="icon is-small is-left has-text-info">
+                    <i class="fa-solid fa-music"></i>
+                  </div>
+                </div>
+
                </div>
             </div>
 
@@ -471,6 +497,17 @@ document.addEventListener('DOMContentLoaded', () => {
       card.dataset.stars = estrelas;
       card.dataset.intensity = intensidade;
       card.dataset.bpm_real = bpm;
+      // Dentro do enrichCards, salve o tom 'cru' no dataset
+      let tomRaw = "Unknown";
+      if (info.analise_tecnica?.tom) {
+          // Ex: "Ab"
+          tomRaw = info.analise_tecnica.tom;
+          // Se a escala for minor, adiciona 'm'. Ex: "Ab" + "m" -> "Abm"
+          if (info.analise_tecnica.escala === 'minor') {
+              tomRaw += 'm'; 
+          }
+      }
+      card.dataset.key = tomRaw; // Salva no HTML: data-key="Ab" ou "Cm"
 
       // Injeta HTML
       const bpmContainer = card.querySelector('.bpm-container');
@@ -500,6 +537,22 @@ document.addEventListener('DOMContentLoaded', () => {
               if(genero === 'Electronic') color = 'is-info';
               if(genero === 'Hip Hop') color = 'is-warning';
               if(genero === 'Rock') color = 'is-danger';
+              let subTagsHTML = "";
+              if (info.analise_ia?.nuvem_tags && Array.isArray(info.analise_ia.nuvem_tags)) {
+                  // Pega os 2 primeiros
+                  const topTags = info.analise_ia.nuvem_tags.slice(0, 2);
+                  
+                  topTags.forEach(t => {
+                      // Dica: Use title para mostrar o score no hover (mouse em cima)
+                      const scorePercent = Math.round(t.score * 100);
+                      subTagsHTML += `
+                          <span class="tag is-white is-rounded border-tag" 
+                                title="Confiança IA: ${scorePercent}%" 
+                                style="font-size: 0.65rem; color: #666;">
+                            #${t.tag}
+                          </span>`;
+                  });
+              }
               
               // Tag de Gênero
               tagsRow.innerHTML += `<span class="tag ${color} is-light is-rounded" style="font-size: 0.7rem;">🤖 ${genero}</span>`;
@@ -564,11 +617,17 @@ document.addEventListener('DOMContentLoaded', () => {
         const col = c.closest('.project-column');
         const g = c.dataset.genre;
         const s = parseInt(c.dataset.stars || 0);
+        const k = c.dataset.key; // Pega o que salvamos ("Ab", "Cm", etc)
         
+        const matchG = (currentGenre === 'all' || g === currentGenre);
+        const matchS = (currentMinStars === 'all' || s === parseInt(currentMinStars)); // Lembra do === da resposta anterior
+        // Novo Match de Tom
+        // A lógica aqui é simples: se for 'all', passa. Se não, tem que ser igual.
+        const matchK = (currentKey === 'all' || k === currentKey);
         const matchG = (currentGenre === 'all' || g === currentGenre);
         const matchS = (currentMinStars === 'all' || s === parseInt(currentMinStars));
 
-        col.style.display = (matchG && matchS) ? 'block' : 'none';
+        col.style.display = (matchG && matchS && matchK) ? 'block' : 'none';
       });
   }