From 9daafc2a3e4efae7361077ccb355fe81d40bfa0c Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 18 Oct 2025 03:33:09 -0600
Subject: [PATCH] =?UTF-8?q?Feat:=20Reorganizar=20controles=20de=20sesi?=
 =?UTF-8?q?=C3=B3n=20y=20mejorar=20UX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Mover botón Finalizar Sesión del flotante al header
- Cambiar botón flotante para colapsar/expandir todos los acordiones
- Agregar opción Finalizar Sesión al menú desplegable móvil
- Implementar función toggleCollapseAll para control de acordiones
- Agregar computed todosColapsados para estado de acordiones
- Usar iconos maximize-2/minimize-2 según estado
- Hacer botón flotante circular para mejor identificación

- Arreglar hover de acordiones para usar color personalizado
- Agregar estilos :deep() para .accordion-trigger:hover
- Usar color-mix con var(--cata-primary) en hover
- Aplicar 5% opacidad en modo claro, 10% en modo oscuro
---
 nuxt4/app/pages/cata/sesion.vue | 54 +++++++++++++++++++++++++++++----
 1 file changed, 48 insertions(+), 6 deletions(-)

diff --git a/nuxt4/app/pages/cata/sesion.vue b/nuxt4/app/pages/cata/sesion.vue
index 0b9b9dd..e0cb420 100644
--- a/nuxt4/app/pages/cata/sesion.vue
+++ b/nuxt4/app/pages/cata/sesion.vue
@@ -51,6 +51,13 @@
               >
                 <UIcon name="i-lucide-download" class="w-5 h-5" />
               </button>
+              <button
+                class="cata-button p-2 flex items-center justify-center hidden sm:flex"
+                title="Finalizar sesión"
+                @click="finalizarSesion"
+              >
+                <UIcon name="i-lucide-check-circle" class="w-5 h-5" />
+              </button>
               <button
                 class="cata-button p-2 flex items-center justify-center"
                 @click="toggleTheme"
@@ -97,6 +104,13 @@
               <UIcon name="i-lucide-download" class="w-4 h-4 inline mr-2" />
               Exportar Sesión
             </button>
+            <button
+              class="menu-item cata-text w-full text-left px-3 py-2 hover:bg-primary/10 rounded"
+              @click="finalizarSesion"
+            >
+              <UIcon name="i-lucide-check-circle" class="w-4 h-4 inline mr-2" />
+              Finalizar Sesión
+            </button>
             <button
               class="menu-item cata-text w-full text-left px-3 py-2 hover:bg-primary/10 rounded text-error"
               @click="confirmarEliminar"
@@ -136,7 +150,7 @@
           :items="accordionItems"
           :ui="{
             item: 'mb-4 last:mb-0 cata-outline-box rounded-lg overflow-hidden',
-            trigger: 'w-full px-4 py-3 hover:bg-primary/5 transition-colors',
+            trigger: 'accordion-trigger w-full px-4 py-3 transition-colors',
             content: 'border-t border-default',
           }"
         >
@@ -164,14 +178,17 @@
         </UAccordion>
       </div>
 
-      <!-- Botón flotante de finalizar -->
+      <!-- Botón flotante para colapsar/expandir -->
       <div class="floating-action">
         <button
-          class="cata-button px-6 py-3 shadow-lg"
-          @click="finalizarSesion"
+          class="cata-button p-3 rounded-full shadow-lg"
+          @click="toggleCollapseAll"
+          :title="todosColapsados ? 'Expandir todas las muestras' : 'Colapsar todas las muestras'"
         >
-          <UIcon name="i-lucide-check-circle" class="w-5 h-5 inline mr-2" />
-          Finalizar Sesión
+          <UIcon
+            :name="todosColapsados ? 'i-lucide-maximize-2' : 'i-lucide-minimize-2'"
+            class="w-6 h-6"
+          />
         </button>
       </div>
     </div>
@@ -252,6 +269,22 @@ const obtenerMuestraPorValue = (value: string): Muestra | null => {
   return sesionActiva.value.muestras.find(m => m.muestraId === muestraId) || null
 }
 
+// Verificar si todos los acordiones están colapsados
+const todosColapsados = computed(() => {
+  return accordionAbierto.value.length === 0
+})
+
+// Colapsar o expandir todos los acordiones
+const toggleCollapseAll = () => {
+  if (todosColapsados.value) {
+    // Expandir todos: agregar todos los values
+    accordionAbierto.value = accordionItems.value.map(item => item.value)
+  } else {
+    // Colapsar todos: vaciar el array
+    accordionAbierto.value = []
+  }
+}
+
 // Inicializar al montar
 onMounted(async () => {
   await inicializar()
@@ -385,6 +418,15 @@ onMounted(() => {
   gap: 0.25rem;
 }
 
+/* Accordion hover usando color personalizado */
+:deep(.accordion-trigger:hover) {
+  background-color: color-mix(in srgb, var(--cata-primary) 5%, transparent);
+}
+
+:deep(.dark .accordion-trigger:hover) {
+  background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
+}
+
 /* Floating action button */
 .floating-action {
   position: fixed;