reformula buscas

pages/projetos.md

@@ -298,7 +298,11 @@ permalink: /projetos/
                                       </summary>
                                       <div class="tags is-centered mt-1 mb-2 px-1" style="gap: 3px;">
                                           {% for tag in unique_insts_page %}{% if tag != "" %}
-                                              <a href="{{ '/instruments/?instrument=' | append: tag | relative_url }}" class="tag is-light is-info clickable-tag">{{ tag | truncate: 18 }}</a>
+                                              <a href="{{ '/instruments/?instrument=' | append: tag | relative_url }}" 
+                                                 class="tag is-light is-info clickable-tag"
+                                                 data-tag-value="{{ tag }}">
+                                                 {{ tag | truncate: 18 }}
+                                              </a>
                                           {% endif %}{% endfor %}
                                       </div>
                                   </details>
@@ -312,11 +316,70 @@ permalink: /projetos/
                                       </summary>
                                       <div class="tags is-centered mt-1 mb-2 px-1" style="gap: 3px;">
                                           {% for tag in page.tags.plugin %}{% if tag != "" %}
-                                              <a href="{{ '/plugin/?plugin=' | append: tag | relative_url }}" class="tag is-light is-info clickable-tag">{{ tag | truncate: 18 }}</a>
+                                              <a href="{{ '/plugin/?plugin=' | append: tag | relative_url }}" 
+                                                 class="tag is-light is-info clickable-tag"
+                                                 data-tag-value="{{ tag }}">
+                                                 {{ tag | truncate: 18 }}
+                                              </a>
                                           {% endif %}{% endfor %}
                                       </div>
                                   </details>
                               {% endif %}
+                              
+                              {% if page.tags.bassline and page.tags.bassline.size > 0 %}
+                                  <details class="category-reveal mb-1" style="width: 100%;">
+                                      <summary class="tag is-white summary-btn">
+                                          <div class="tag-label"><span>🎹</span> <span class="tag-text">BASSLINE</span></div>
+                                          <span class="icon is-small chevron"><i class="fa-solid fa-chevron-down"></i></span>
+                                      </summary>
+                                      <div class="tags is-centered mt-1 mb-2 px-1" style="gap: 3px;">
+                                          {% for tag in page.tags.bassline %}{% if tag != "" %}
+                                              <a href="{{ '/bassline/?bassline=' | append: tag | relative_url }}" 
+                                                 class="tag is-light is-info clickable-tag"
+                                                 data-tag-value="{{ tag }}">
+                                                 {{ tag | truncate: 18 }}
+                                              </a>
+                                          {% endif %}{% endfor %}
+                                      </div>
+                                  </details>
+                              {% endif %}
+
+                              {% if page.tags.automation and page.tags.automation.size > 0 %}
+                                  <details class="category-reveal mb-1" style="width: 100%;">
+                                      <summary class="tag is-white summary-btn">
+                                          <div class="tag-label"><span>🎚️</span> <span class="tag-text">AUTOMATION</span></div>
+                                          <span class="icon is-small chevron"><i class="fa-solid fa-chevron-down"></i></span>
+                                      </summary>
+                                      <div class="tags is-centered mt-1 mb-2 px-1" style="gap: 3px;">
+                                          {% for tag in page.tags.automation %}{% if tag != "" %}
+                                              <a href="{{ '/automation/?automation=' | append: tag | relative_url }}" 
+                                                 class="tag is-light is-info clickable-tag"
+                                                 data-tag-value="{{ tag }}">
+                                                 {{ tag | truncate: 18 }}
+                                              </a>
+                                          {% endif %}{% endfor %}
+                                      </div>
+                                  </details>
+                              {% endif %}
+                              
+                              {% if page.tags.sample and page.tags.sample.size > 0 %}
+                                  <details class="category-reveal mb-1" style="width: 100%;">
+                                      <summary class="tag is-white summary-btn">
+                                          <div class="tag-label"><span>🎤</span> <span class="tag-text">SAMPLES</span></div>
+                                          <span class="icon is-small chevron"><i class="fa-solid fa-chevron-down"></i></span>
+                                      </summary>
+                                      <div class="tags is-centered mt-1 mb-2 px-1" style="gap: 3px;">
+                                          {% for tag in page.tags.sample %}{% if tag != "" %}
+                                              <a href="{{ '/sample/?sample=' | append: tag | relative_url }}" 
+                                                 class="tag is-light is-info clickable-tag"
+                                                 data-tag-value="{{ tag }}">
+                                                 {{ tag | truncate: 18 }}
+                                              </a>
+                                          {% endif %}{% endfor %}
+                                      </div>
+                                  </details>
+                              {% endif %}
+
                           </div>
                         </div>
                     </a>
@@ -388,6 +451,16 @@ permalink: /projetos/
     .clickable-tag { font-size: 0.6rem; height: 1.5em; border: 1px solid #cfe8fc; text-decoration: none; padding: 0 6px; transition: all 0.2s ease; }
     .clickable-tag:hover { background-color: #3273dc !important; color: #fff !important; border-color: #3273dc !important; transform: translateY(-1px); }
 
+    /* TAG HIGHLIGHT */
+    .clickable-tag.is-matched-tag {
+        background-color: #ffdd57 !important; /* Amarelo */
+        color: #363636 !important;
+        border-color: #ffcc00 !important;
+        box-shadow: 0 0 5px rgba(255, 200, 0, 0.5);
+        font-weight: 700;
+        transform: scale(1.05);
+    }
+
     .border-tag { border: 1px solid #dbdbdb; color: #555; }
     
     /* Botões de Limpar Grupo */
@@ -604,11 +677,27 @@ document.addEventListener('DOMContentLoaded', function () {
         applyGlobalFilters();
     }
 
+    // --- MAIN FILTER LOGIC WITH HIGHLIGHTING ---
     function applyGlobalFilters() {
         let visibleCount = 0;
         let minBpm = parseInt(inputMin.value);
         let maxBpm = parseInt(inputMax.value);
         if(minBpm > maxBpm) { let t = minBpm; minBpm = maxBpm; maxBpm = t; }
+
+        // Coleta todos os termos de busca para o highlight
+        // (Junta todos os filtros de texto ativos em um único set para performance)
+        const allActiveTags = new Set([
+            ...activeSidebar.instruments,
+            ...activeSidebar.plugins,
+            ...activeSidebar.samples,
+            ...activeSidebar.bassline,
+            ...activeSidebar.automation,
+            ...activeSidebar.genres,
+            ...activeSidebar.keys
+        ].map(s => s.toLowerCase()));
+        
+        // Check if any filter (except stars/bpm) is active to trigger auto-open
+        const hasActiveTypeFilter = allActiveTags.size > 0 || (searchText.length > 2);
         
         document.querySelectorAll('.project-item').forEach(item => {
             // Leitura
@@ -646,6 +735,38 @@ document.addEventListener('DOMContentLoaded', function () {
             if (matchInst && matchPlugin && matchSample && matchBassline && matchAuto && matchBpm && matchText && matchGenres && matchKeys && matchStars) {
                 item.style.display = 'block';
                 visibleCount++;
+                
+                // --- HIGHLIGHT LOGIC ---
+                // 1. Reset highlights
+                const clickableTags = item.querySelectorAll('.clickable-tag');
+                clickableTags.forEach(t => t.classList.remove('is-matched-tag'));
+
+                // 2. Apply matches & Auto-open
+                if(hasActiveTypeFilter) {
+                    // Close all details first to reduce noise (optional strategy)
+                    item.querySelectorAll('details').forEach(d => d.open = false);
+
+                    clickableTags.forEach(tagEl => {
+                        const tagVal = (tagEl.dataset.tagValue || "").trim().toLowerCase();
+                        // Check exact match from filters OR text search partial match
+                        const isFilterMatch = allActiveTags.has(tagVal);
+                        const isTextMatch = searchText.length > 2 && tagVal.includes(searchText);
+
+                        if (isFilterMatch || isTextMatch) {
+                            tagEl.classList.add('is-matched-tag');
+                            const parentDetails = tagEl.closest('details');
+                            if(parentDetails) parentDetails.open = true; // Auto-open!
+                        }
+                    });
+                } 
+                // If no filters active, maybe leave default open state (usually instruments open)
+                else {
+                    // Reset to default (Instruments open, others closed)
+                     item.querySelectorAll('details').forEach(d => d.open = false);
+                     const instDetail = item.querySelector('details:first-of-type'); // Assuming instruments is first
+                     if(instDetail) instDetail.open = true;
+                }
+
             } else {
                 item.style.display = 'none';
             }