feat: move client filter to sidebar submenu and dynamically show patient/doctor info as mainTitle

dental-server/public/app.js

@@ -105,7 +105,7 @@ let fineTuneAngle = 0;
 // ================================================================
 
 const searchInput        = document.getElementById('searchInput');
-const clientFilter       = document.getElementById('clientFilter');
+const clientFilter       = document.getElementById('clientFilter'); // Pode ser null se removido do header
 const toggleDisabledBtn  = document.getElementById('toggleDisabledBtn');
 const toggleText         = document.getElementById('toggleText');
 const imagesGrid         = document.getElementById('imagesGrid');
@@ -170,10 +170,12 @@ function setupEventListeners() {
         else loadPatientImages(selectedPatient.patient_name);
     }, 400));
 
+    if (clientFilter) {
         clientFilter.addEventListener('change', e => {
             selectedClient = e.target.value;
             if (view === 'patients') loadPatients();
         });
+    }
 
     toggleDisabledBtn.addEventListener('click', () => {
         showDisabled = !showDisabled;
@@ -225,6 +227,8 @@ async function loadClientsList() {
 }
 
 function updateClientsDropdown() {
+    // Se por acaso o elemento clientFilter ainda existir no DOM em alguma outra tela, atualiza ele
+    if (clientFilter) {
         const current = clientFilter.value;
         clientFilter.innerHTML = '<option value="">📋 Todos os Clientes</option>';
         const sorted = [...clientsList].sort((a, b) => {
@@ -247,6 +251,50 @@ function updateClientsDropdown() {
         clientFilter.value = current || selectedClient;
     }
 
+    // Renderizar o submenu dinâmico na sidebar
+    const submenu = document.getElementById('clientsSubmenu');
+    if (!submenu) return;
+
+    const sorted = [...clientsList].sort((a, b) => {
+        const o = { identified: 1, connected: 2, historic: 3 };
+        return (o[a.status] || 99) - (o[b.status] || 99);
+    });
+
+    submenu.innerHTML = '';
+
+    // Adiciona o item "Todos os Clientes"
+    const allItem = document.createElement('div');
+    allItem.className = `submenu-item${selectedClient === '' ? ' active' : ''}`;
+    allItem.innerHTML = '📋 Todos os Clientes';
+    allItem.onclick = () => selectClientFilter('');
+    submenu.appendChild(allItem);
+
+    sorted.forEach(c => {
+        const item = document.createElement('div');
+        item.className = `submenu-item${selectedClient === c.name ? ' active' : ''}`;
+        let lbl = c.name;
+        if (c.name === 'Upload Web') {
+            lbl = 'Upload Web 💻';
+        } else {
+            if (c.status === 'identified') lbl += ' ✅';
+            else if (c.status === 'historic') lbl += ' 📚';
+        }
+        item.textContent = lbl;
+        item.onclick = () => selectClientFilter(c.name);
+        submenu.appendChild(item);
+    });
+}
+
+function selectClientFilter(clientName) {
+    selectedClient = clientName;
+    if (view === 'patients') {
+        loadPatients();
+    } else {
+        showPatientsView();
+    }
+    updateClientsDropdown();
+}
+
 // ================================================================
 // VIEW: PATIENTS LIST
 // ================================================================
@@ -256,6 +304,11 @@ function showPatientsView() {
     selectedPatient = null;
     backBtn.style.display = 'none';
     patientHeader.style.display = 'none';
+    
+    // Restaurar título do header
+    const mainTitle = document.getElementById('mainTitle');
+    if (mainTitle) mainTitle.textContent = 'Galeria de Imagens';
+    
     loadPatients();
 }
 
@@ -425,9 +478,18 @@ function openPatient(patient) {
     selectedPatient = patient;
     view = 'patient-images';
     backBtn.style.display = 'inline-flex';
-    patientHeader.style.display = 'block';
     
+    // Ocultar o patientHeader para manter o header na mesma altura de 70px
+    patientHeader.style.display = 'none';
+
+    // Mudar o título principal para o nome do paciente - dentista
     const fullName = patient.patient_name || 'Sem nome';
+    const doctorName = patient.doctor ? ` - ${patient.doctor}` : '';
+    const mainTitle = document.getElementById('mainTitle');
+    if (mainTitle) {
+        mainTitle.textContent = `${fullName}${doctorName}`;
+    }
+
     patientTitle.textContent = fullName;
     patientMeta.textContent  = `${patient.image_count || 0} imagem(ns) · ${patient.doctor || '—'}`;
 

dental-server/public/index.html

@@ -6,7 +6,7 @@
     <title>Gerenciador de Imagens Dentais</title>
     <meta name="description" content="Sistema de gerenciamento de imagens de raio-X dental">
     <link rel="icon" href="/favicon.svg" type="image/svg+xml">
-    <link rel="stylesheet" href="/style.css?v=2.8">
+    <link rel="stylesheet" href="/style.css?v=2.9">
 </head>
 <body>
     <div class="app-container">
@@ -19,6 +19,7 @@
                 <a href="/" class="nav-item active">
                     <span class="icon">🖼️</span> Pacientes
                 </a>
+                <div id="clientsSubmenu" class="sidebar-submenu"></div>
                 <a href="#" class="nav-item" onclick="openCreatePatientModal(); return false;">
                     <span class="icon">➕</span> Novo Paciente
                 </a>
@@ -56,9 +57,6 @@
                         <h1 id="mainTitle">Galeria de Imagens</h1>
                     </div>
                     <div class="header-actions">
-                        <select id="clientFilter" class="client-filter">
-                            <option value="">📋 Todos os Clientes</option>
-                        </select>
                         <input
                             type="search"
                             id="searchInput"
@@ -457,6 +455,6 @@
 
     <!-- Application Script -->
     <script src="/socket.io/socket.io.js"></script>
-    <script src="/app.js?v=2.4"></script>
+    <script src="/app.js?v=2.9"></script>
 </body>
 </html>

dental-server/public/style.css

@@ -1456,3 +1456,38 @@ body {
         box-sizing: border-box !important;
     }
 }
+
+/* Submenu de Clientes na Sidebar */
+.sidebar-submenu {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin-bottom: 8px;
+}
+
+.submenu-item {
+    display: flex;
+    align-items: center;
+    padding: 6px 15px 6px 42px; /* Alinha o texto do submenu abaixo do ícone do menu pai */
+    color: var(--text-color);
+    text-decoration: none;
+    font-size: 0.82rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    border-left: 3px solid transparent;
+    cursor: pointer;
+    border-radius: 4px;
+    margin: 0 15px;
+}
+
+.submenu-item:hover {
+    background-color: rgba(102, 126, 234, 0.06);
+    color: var(--primary-color);
+}
+
+.submenu-item.active {
+    background-color: rgba(102, 126, 234, 0.1);
+    color: var(--primary-color);
+    border-left-color: var(--primary-color);
+    font-weight: 600;
+}