From 63ac641c5f490a220ace0a2734bd3ee7654acbd8 Mon Sep 17 00:00:00 2001
From: admtracksteel <admtracksteel@gmail.com>
Date: Tue, 26 May 2026 17:52:00 +0000
Subject: [PATCH] feat: alinha tags da sidebar dinamicamente e implementa cards
 de sugestao tematica de boas-vindas

---
 public/app.js     | 44 ++++++++++++++++++++++++++++++++++++--------
 public/index.html | 23 +++++++++++++++++++++++
 2 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/public/app.js b/public/app.js
index 3deb8e0..d8b53fc 100644
--- a/public/app.js
+++ b/public/app.js
@@ -150,9 +150,18 @@ const initApp = () => {
   updateModelBadge();
 
   // ==========================================================================
-  // MODAL DE TAGS
+  // MODAL DE TAGS & SIDEBAR TAGS
   // ==========================================================================
-  const AVAILABLE_TAGS = ['HTPC', 'ATA', 'Planejamento', 'Formação', 'Projeto', 'Relatório', 'Sugestão', 'Dúvida'];
+  const AVAILABLE_TAGS = [
+    { id: 'relatorios', label: '📋 Relatórios' },
+    { id: 'planejamento', label: '📝 Planejamento' },
+    { id: 'mindlab', label: '🧠 Mind Lab' },
+    { id: 'estudos', label: '📚 Estudos' },
+    { id: 'htpc', label: '💻 HTPC' },
+    { id: 'ata', label: '📝 ATA' },
+    { id: 'sugestao', label: '💡 Sugestão' },
+    { id: 'duvida', label: '❓ Dúvida' }
+  ];
   const modalTagOverlay = document.getElementById('modalTagOverlay');
   const modalTagList = document.getElementById('modalTagList');
   const modalTagClose = document.getElementById('modalTagClose');
@@ -175,9 +184,9 @@ const initApp = () => {
 
   const renderTagModalList = () => {
     modalTagList.innerHTML = AVAILABLE_TAGS.map(tag => `
-      <div class="modal-tag-item ${selectedTagsState.includes(tag) ? 'selected' : ''}" data-tag="${tag}">
-        <input type="checkbox" ${selectedTagsState.includes(tag) ? 'checked' : ''}>
-        <span>${tag}</span>
+      <div class="modal-tag-item ${selectedTagsState.includes(tag.id) ? 'selected' : ''}" data-tag="${tag.id}">
+        <input type="checkbox" ${selectedTagsState.includes(tag.id) ? 'checked' : ''}>
+        <span>${tag.label}</span>
       </div>
     `).join('');
 
@@ -194,6 +203,17 @@ const initApp = () => {
     });
   };
 
+  const renderSidebarTags = () => {
+    if (!sidebarTags) return;
+    let tagsHtml = `<button class="tag-filter ${activeTag === 'all' ? 'active' : ''}" data-tag="all">Todas</button>`;
+    tagsHtml += AVAILABLE_TAGS.map(tag => `
+      <button class="tag-filter ${activeTag === tag.id ? 'active' : ''}" data-tag="${tag.id}">
+        ${tag.label}
+      </button>
+    `).join('');
+    sidebarTags.innerHTML = tagsHtml;
+  };
+
   modalTagClose.addEventListener('click', closeTagModal);
   modalTagCancel.addEventListener('click', closeTagModal);
   modalTagOverlay.addEventListener('click', (e) => {
@@ -270,8 +290,6 @@ const initApp = () => {
   sidebarTags.addEventListener('click', (e) => {
     const tagBtn = e.target.closest('.tag-filter');
     if (!tagBtn) return;
-    document.querySelectorAll('.tag-filter').forEach(b => b.classList.remove('active'));
-    tagBtn.classList.add('active');
     activeTag = tagBtn.dataset.tag;
     renderHistory();
   });
@@ -667,12 +685,22 @@ const initApp = () => {
 
   // Emoji para cada tag
   const getTagEmoji = (tag) => {
-    const emojis = { relatorios: '📋', planejamento: '📝', mindlab: '🧠', estudos: '📚' };
+    const emojis = { 
+      relatorios: '📋', 
+      planejamento: '📝', 
+      mindlab: '🧠', 
+      estudos: '📚',
+      htpc: '💻',
+      ata: '📝',
+      sugestao: '💡',
+      duvida: '❓'
+    };
     return emojis[tag] || '🏷️';
   };
 
   // Renderizar histórico completo
   const renderHistory = () => {
+    renderSidebarTags(); // Renderizar tags da sidebar de forma dinâmica e atualizada
     historyItems.innerHTML = '';
 
     if (chats.length === 0) {
diff --git a/public/index.html b/public/index.html
index bb05e78..0274d24 100644
--- a/public/index.html
+++ b/public/index.html
@@ -147,6 +147,29 @@
             </div>
           </div>
           <h2>Olá! Sou sua assistente virtual e me chamo Kemily. Como posso ajudar?</h2>
+
+          <div class="welcome-grid">
+            <div class="suggestion-card" data-prompt="Escreva um relatório de observação semanal de um aluno de educação infantil focado em socialização e interação.">
+              <div class="card-icon">📋</div>
+              <div class="card-title">Relatório Semanal</div>
+              <div class="card-desc">Observação de desenvolvimento e socialização na educação infantil.</div>
+            </div>
+            <div class="suggestion-card" data-prompt="Crie um planejamento de aula inspirado no Mind Lab para trabalhar educação socioemocional e cooperação.">
+              <div class="card-icon">🧠</div>
+              <div class="card-title">Planejamento Mind Lab</div>
+              <div class="card-desc">Atividades lúdicas para desenvolvimento de habilidades socioemocionais.</div>
+            </div>
+            <div class="suggestion-card" data-prompt="Crie uma música pedagógica infantil alegre e animada sobre animais e sons da fazenda.">
+              <div class="card-icon">🎵</div>
+              <div class="card-title">Criar Música / Cantiga</div>
+              <div class="card-desc">Gere músicas divertidas com melodia e letra educativa.</div>
+            </div>
+            <div class="suggestion-card" data-prompt="Crie um planejamento pedagógico de artes alinhado à BNCC para o campo 'Traços, sons, cores e formas'.">
+              <div class="card-icon">🎨</div>
+              <div class="card-title">Atividade BNCC</div>
+              <div class="card-desc">Planos de aula estruturados de acordo com as normas da BNCC.</div>
+            </div>
+          </div>
         </div>
 
         <!-- Lista de mensagens geradas dinamicamente -->