SteelBase/public/docs-historicos/DEBUG-CATALOGO-PERFIS.md

Debug: Catálogo de Perfis - Subitens Não Aparecem

Problema

Os 10 subitens do "Catálogo de Perfis" não aparecem mesmo após clicar para expandir.

Análise do Console

O console mostrava:

• "Removed expanded class" - indicando que ao clicar, a classe estava sendo removida
• O elemento tinha class="sidebar-subcategory expanded" no HTML
• Quando clicado, a função toggleCategory via que já tinha expanded e a removia

Mudanças Aplicadas

1. HTML (index.html)

Removida a classe expanded dos elementos no HTML:

• <div class="sidebar-category expanded"> → <div class="sidebar-category">
• <div class="sidebar-subcategory expanded"> → <div class="sidebar-subcategory">

Agora o JavaScript adiciona a classe durante a inicialização.

2. CSS (style.css)

Melhorado o CSS para garantir visibilidade:

.sidebar-subcategory-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-normal) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard);
  padding-left: var(--space-12);
  opacity: 0;
  visibility: hidden;  /* NOVO */
}

.sidebar-subcategory.expanded .sidebar-subcategory-content {
  max-height: 5000px !important;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  opacity: 1 !important;
  visibility: visible !important;  /* NOVO */
}

3. JavaScript (app.js)

A. Ordem de Execução Corrigida

ANTES:

applyAdminConfig();
filterToolsByMode();  // ← Esconde itens ANTES de expandir
// ... expandir categorias

DEPOIS:

// Expandir categorias PRIMEIRO
const firstCategory = document.querySelector('.sidebar-category');
// ... código de expansão

// Aplicar filtros DEPOIS
applyAdminConfig();
filterToolsByMode();

B. Expansão Automática Melhorada

// Initialize sidebar categories FIRST
const firstCategory = document.querySelector('.sidebar-category');
if (firstCategory) {
    firstCategory.classList.add('expanded');
    
    // Expand all subcategories within the first category
    const subcategories = firstCategory.querySelectorAll('.sidebar-subcategory');
    
    subcategories.forEach((subcat, index) => {
        subcat.classList.add('expanded');
        
        const content = subcat.querySelector('.sidebar-subcategory-content');
        if (content) {
            // Force display
            content.style.maxHeight = '5000px';
            content.style.opacity = '1';
            content.style.visibility = 'visible';
            
            // Count items
            const items = content.querySelectorAll('.sidebar-item');
            console.log(`   └─ ${items.length} itens encontrados`);
        }
    });
}

C. Debug Melhorado

Adicionado logging detalhado em filterToolsByMode():

function filterToolsByMode() {
    const allItems = document.querySelectorAll('.sidebar-item');
    console.log(`🔍 filterToolsByMode: ${allItems.length} itens encontrados`);
    console.log(`   Expert Mode: ${appState.expertMode}`);
    
    let hiddenCount = 0;
    let visibleCount = 0;
    
    // ... código de filtragem com contadores
    
    console.log(`   ✅ Visíveis: ${visibleCount}, ❌ Escondidos: ${hiddenCount}`);
}

D. Configuração toolsVisibility

Todos os itens do catálogo configurados como true:

// Catálogo de Perfis
'cantoneiras': true,
'barras-redondas': true,
'tubos-circulares': true,
'perfis-i': true,
'perfis-w': true,
'tubos-rhs': true,
'chapas': true,
'perfis-hp': true,
'barras-roscadas': true,
'barras-chatas': true,

Como Testar

1. Abra o index.html no navegador

2. Abra o Console do navegador (F12)

3. Verifique os logs:

   • "✅ Primeira categoria expandida: 🏗️ AÇOS ESTRUTURAIS"
   • "📂 Subcategorias encontradas: 2"
   • "✅ Subcategoria 1 expandida: 🤖 Assistente Inteligente"
   • " └─ 5 itens encontrados em "🤖 Assistente Inteligente""
   • "✅ Subcategoria 2 expandida: 📐 Catálogo de Perfis"
   • " └─ 10 itens encontrados em "📐 Catálogo de Perfis""
   • "🔍 Aplicando filtro de ferramentas..."
   • "🔍 filterToolsByMode: X itens encontrados"
   • " ✅ Visíveis: Y, ❌ Escondidos: Z"

4. Verifique visualmente que os 10 itens aparecem:

   • 📐 Cantoneiras
   • ⭕ Barras Redondas
   • 🔘 Tubos Circulares
   • 🏛️ Perfis I (IPE)
   • 🏗️ Perfis W
   • ▭ Tubos RHS
   • 📄 Chapas
   • 🏛️ Perfis HP
   • 🔩 Barras Roscadas
   • ▬ Barras Chatas

Próximos Passos

Se ainda não funcionar, verificar:

1. Se há CSS conflitante de outros arquivos
2. Se há JavaScript de outros arquivos sobrescrevendo
3. Se o navegador está cacheando arquivos antigos (Ctrl+Shift+R para hard refresh)