reformula buscas

pages/projetos.md

@@ -44,7 +44,7 @@ permalink: /projetos/
         <div class="column">
           <h1 class="title is-3 has-text-grey-dark">📁 Projetos Disponíveis</h1>
           <p class="subtitle is-6 has-text-grey">
-            Use o menu lateral para filtrar projetos por BPM, Plugin, Instrumento, etc.
+            Busca avançada: Digite termos ou selecione filtros para refinar.
           </p>
         </div>
         <div class="column is-narrow">
@@ -60,6 +60,17 @@ permalink: /projetos/
       <div class="column is-3">
           <div class="box p-3" style="background: #fcfcfc; border: 1px solid #eee;">
               
+              <div class="field mb-5">
+                  <label class="label is-small has-text-grey">Busca Inteligente (IA)</label>
+                  <div class="control has-icons-left">
+                      <input class="input is-small" type="text" id="search-input" placeholder="Nome, plugin, tag, bpm...">
+                      <span class="icon is-small is-left">
+                          <i class="fa-solid fa-magnifying-glass"></i>
+                      </span>
+                  </div>
+              </div>
+              <hr class="my-3">
+
               <div class="filter-group mb-4">
                   <p class="menu-label has-text-weight-bold mb-2">BPM</p>
                   <div class="field is-grouped is-grouped-multiline">
@@ -156,8 +167,11 @@ permalink: /projetos/
                 {% assign p_automation = page.tags.automation | join: ',' %}
                 {% assign p_samples = page.tags.sample | join: ',' %}
                 {% assign p_instruments = page.tags.instruments | default: page.tags.instrument | join: ',' %}
+                
+                {% assign p_name = page.title | default: page.name | downcase %}
 
                 <div class="column is-12-mobile is-6-tablet is-4-desktop is-4-widescreen project-item"
+                     data-name="{{ p_name }}"
                      data-bpm="{{ p_bpm }}"
                      data-plugins="{{ p_plugins }}"
                      data-bassline="{{ p_bassline }}"
@@ -355,6 +369,7 @@ permalink: /projetos/
 <script>
 document.addEventListener('DOMContentLoaded', function () {
     const checkboxes = document.querySelectorAll('.filter-checkbox');
+    const searchInput = document.getElementById('search-input');
     const projects = document.querySelectorAll('.project-item');
     const resetBtn = document.getElementById('reset-all-filters');
     const countBar = document.getElementById('results-count-bar');
@@ -363,10 +378,13 @@ document.addEventListener('DOMContentLoaded', function () {
 
     // Estado do Filtro
     let activeFilters = { bpm: [], instruments: [], plugins: [], samples: [], bassline: [], automation: [] };
+    let searchText = "";
 
     function updateState() {
+        // Reseta Arrays
         activeFilters = { bpm: [], instruments: [], plugins: [], samples: [], bassline: [], automation: [] };
         
+        // Lê Checkboxes
         checkboxes.forEach(cb => {
             if (cb.checked) {
                 const category = cb.getAttribute('data-category');
@@ -377,6 +395,9 @@ document.addEventListener('DOMContentLoaded', function () {
             }
         });
 
+        // Lê Campo de Texto (IA Filter)
+        searchText = searchInput.value.toLowerCase().trim();
+
         applyFilters();
     }
 
@@ -384,7 +405,8 @@ document.addEventListener('DOMContentLoaded', function () {
         let visibleCount = 0;
 
         projects.forEach(project => {
-            // Lê dados do elemento (Fallback para string vazia)
+            // Lê dados do elemento
+            const pName = project.getAttribute('data-name') || "";
             const pBpm = project.getAttribute('data-bpm') || "";
             const pInsts = (project.getAttribute('data-instruments') || "").split(',');
             const pPlugins = (project.getAttribute('data-plugins') || "").split(',');
@@ -392,6 +414,7 @@ document.addEventListener('DOMContentLoaded', function () {
             const pBassline = (project.getAttribute('data-bassline') || "").split(',');
             const pAutomation = (project.getAttribute('data-automation') || "").split(',');
 
+            // 1. Checa Filtros de Categoria (Checkbox)
             const matchBpm = activeFilters.bpm.length === 0 || activeFilters.bpm.includes(pBpm);
             const matchInst = activeFilters.instruments.length === 0 || activeFilters.instruments.some(f => pInsts.includes(f));
             const matchPlugin = activeFilters.plugins.length === 0 || activeFilters.plugins.some(f => pPlugins.includes(f));
@@ -399,7 +422,12 @@ document.addEventListener('DOMContentLoaded', function () {
             const matchBassline = activeFilters.bassline.length === 0 || activeFilters.bassline.some(f => pBassline.includes(f));
             const matchAutomation = activeFilters.automation.length === 0 || activeFilters.automation.some(f => pAutomation.includes(f));
 
-            if (matchBpm && matchInst && matchPlugin && matchSample && matchBassline && matchAutomation) {
+            // 2. Checa Busca de Texto (IA Filter)
+            // Concatena tudo para buscar em qualquer campo
+            const fullMeta = [pName, pBpm, pInsts.join(' '), pPlugins.join(' '), pSamples.join(' '), pBassline.join(' '), pAutomation.join(' ')].join(' ').toLowerCase();
+            const matchText = searchText === "" || fullMeta.includes(searchText);
+
+            if (matchBpm && matchInst && matchPlugin && matchSample && matchBassline && matchAutomation && matchText) {
                 project.style.display = 'block';
                 visibleCount++;
             } else {
@@ -412,17 +440,28 @@ document.addEventListener('DOMContentLoaded', function () {
         noResults.classList.toggle('is-hidden', visibleCount > 0);
     }
 
+    // Eventos
     checkboxes.forEach(cb => cb.addEventListener('change', updateState));
+    searchInput.addEventListener('input', updateState);
+
+    // Suporte para parâmetros de URL (q=...)
+    const urlParams = new URLSearchParams(window.location.search);
+    const qParam = urlParams.get('q');
+    if(qParam) {
+        searchInput.value = qParam;
+        updateState();
+    }
 
     resetBtn.addEventListener('click', () => {
         checkboxes.forEach(cb => {
             cb.checked = false;
             if(cb.parentElement.classList.contains('tag')) cb.parentElement.classList.remove('is-checked');
         });
+        searchInput.value = "";
         updateState();
     });
 
-    // --- Lógica do Modal (Existente) ---
+    // --- Modal Logic ---
     const modal = document.getElementById('preview-modal');
     const iframe = document.getElementById('preview-iframe');
     const modalTitle = document.getElementById('modal-title');