ux improvements p2

src/components/Sidebar.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useState, useEffect, Fragment } from "react"
-import { Menu } from "lucide-react"
+import { Menu, ChevronLeft, ChevronRight } from "lucide-react"
 import { Dialog, Transition } from "@headlessui/react"
 import SidebarHeader from "@/components/sidebar/SidebarHeader"
 import SidebarUserInfo from "@/components/sidebar/SidebarUserInfo"
@@ -46,11 +46,10 @@ export default function Sidebar({ isCollapsed: externalIsCollapsed, onToggleColl
           style={{ width: isCollapsed ? '4rem' : '18rem' }}
         >
           <div 
-            className="flex grow flex-col overflow-y-auto border-r border-gray-200 bg-white shadow-sm"
+            className="flex grow flex-col overflow-y-auto border-r border-gray-200 bg-white shadow-sm relative"
           >
             <SidebarHeader 
               isCollapsed={isCollapsed} 
-              onToggleCollapse={toggleCollapse} 
             />
             <SidebarNavigation isCollapsed={isCollapsed} />
             
@@ -60,6 +59,19 @@ export default function Sidebar({ isCollapsed: externalIsCollapsed, onToggleColl
               <SidebarFooter isCollapsed={isCollapsed} />
             </div>
           </div>
+          
+          {/* Botón de colapsar/expandir en el borde derecho */}
+          <button
+            onClick={toggleCollapse}
+            className="absolute top-1/2 -translate-y-1/2 -right-3 z-50 p-1.5 rounded-full bg-white border border-gray-200 shadow-md hover:shadow-lg hover:bg-gray-50 transition-all"
+            title={isCollapsed ? 'Expandir sidebar' : 'Colapsar sidebar'}
+          >
+            {isCollapsed ? (
+              <ChevronRight className="h-4 w-4 text-gray-600" />
+            ) : (
+              <ChevronLeft className="h-4 w-4 text-gray-600" />
+            )}
+          </button>
         </div>
       )}
 

src/components/chatbot/ChatInterface.tsx

@@ -67,9 +67,11 @@ export const ChatInterface = ({ chatType }: ChatInterfaceProps) => {
     setInputDisabledForSuggestions,
     medicalAlertDetected,
     showMedicalAlertBanner,
+    isMedicalAlertMinimized,
     isSchedulingFromAlert,
     handleScheduleFromAlert,
     dismissMedicalAlertBanner,
+    expandMedicalAlertBanner,
     crisisDetected,
     showCrisisBanner,
     dismissCrisisBanner,
@@ -190,7 +192,9 @@ export const ChatInterface = ({ chatType }: ChatInterfaceProps) => {
               alert={medicalAlertDetected}
               onSchedule={handleScheduleFromAlertClick}
               onDismiss={dismissMedicalAlertBanner}
+              onExpand={expandMedicalAlertBanner}
               isScheduling={isSchedulingFromAlert}
+              isMinimized={isMedicalAlertMinimized}
             />
           )}
 

src/components/chatbot/MedicalAlertBanner.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AlertTriangle, Clock, Calendar, X } from "lucide-react";
+import { AlertTriangle, Clock, Calendar, X, ChevronDown, ChevronUp } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { MedicalAlert as MedicalAlertType } from "./types";
 import { cn } from "@/lib/utils";
@@ -9,7 +9,9 @@ interface MedicalAlertBannerProps {
   alert: MedicalAlertType;
   onSchedule: () => void;
   onDismiss?: () => void;
+  onExpand?: () => void;
   isScheduling?: boolean;
+  isMinimized?: boolean;
 }
 
 const alertConfig = {
@@ -43,7 +45,9 @@ export const MedicalAlertBanner = ({
   alert,
   onSchedule,
   onDismiss,
+  onExpand,
   isScheduling,
+  isMinimized = false,
 }: MedicalAlertBannerProps) => {
   // Solo mostrar para alertas médicas
   if (alert === "NO_AGENDAR") return null;
@@ -56,6 +60,49 @@ export const MedicalAlertBanner = ({
     onSchedule();
   };
 
+  // Vista minimizada
+  if (isMinimized) {
+    return (
+      <div
+        className={cn(
+          "sticky top-0 z-10 border-b mb-2 px-4 py-2 relative cursor-pointer hover:opacity-90 transition-opacity",
+          config.className
+        )}
+        onClick={onExpand}
+      >
+        <div className="flex items-center gap-3">
+          <div
+            className={cn(
+              "w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0",
+              config.iconClassName
+            )}
+          >
+            <Icon className="w-3 h-3" />
+          </div>
+
+          <div className="flex-1 min-w-0">
+            <p className="text-xs font-medium text-foreground truncate">
+              {config.title}
+            </p>
+          </div>
+
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-6 w-6 p-0 flex-shrink-0"
+            onClick={(e) => {
+              e.stopPropagation();
+              onExpand?.();
+            }}
+          >
+            <ChevronDown className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  // Vista expandida (normal)
   return (
     <div
       className={cn(
@@ -69,8 +116,9 @@ export const MedicalAlertBanner = ({
           size="sm"
           className="absolute top-2 right-2 h-6 w-6 p-0 hover:bg-background/50"
           onClick={onDismiss}
+          title="Minimizar"
         >
-          <X className="w-4 h-4" />
+          <ChevronUp className="w-4 h-4" />
         </Button>
       )}
 

src/components/daily-log/ExportButton.tsx

@@ -20,7 +20,7 @@ export function ExportButton({ onExport }: ExportButtonProps) {
 
   return (
     <>
-      <Button
+      {/* <Button
         onClick={() => setIsOpen(true)}
         variant="outline"
         size="sm"
@@ -28,7 +28,7 @@ export function ExportButton({ onExport }: ExportButtonProps) {
       >
         <Download className="h-4 w-4" />
         Exportar CSV
-      </Button>
+      </Button> */}
 
       <ExportDialog
         isOpen={isOpen}

src/components/sidebar/SidebarHeader.tsx

@@ -1,38 +1,19 @@
 "use client"
 
 import Link from "next/link"
-import { Stethoscope, ChevronLeft, ChevronRight } from "lucide-react"
+import { Stethoscope, ChevronLeft } from "lucide-react"
 
 export default function SidebarHeader({ 
   isCollapsed, 
-  onClose, 
-  onToggleCollapse 
+  onClose
 }: { 
   isCollapsed: boolean, 
-  onClose?: () => void,
-  onToggleCollapse?: () => void 
+  onClose?: () => void
 }) {
   return (
     <div 
       className={`${isCollapsed ? 'p-4 flex justify-center' : 'p-6'} border-b border-gray-200 bg-white relative`}
     >
-      {/* Botón de colapsar (solo en desktop) */}
-      {onToggleCollapse && (
-        <button
-          onClick={onToggleCollapse}
-          className={`absolute top-4 p-1.5 rounded-md hover:bg-gray-100 transition-colors ${
-            isCollapsed ? 'left-1/2 -translate-x-1/2' : 'right-4'
-          }`}
-          title={isCollapsed ? 'Expandir sidebar' : 'Colapsar sidebar'}
-        >
-          {isCollapsed ? (
-            <ChevronRight className="h-4 w-4 text-gray-600" />
-          ) : (
-            <ChevronLeft className="h-4 w-4 text-gray-600" />
-          )}
-        </button>
-      )}
-      
       {/* Botón de cerrar (solo en móvil) */}
       {onClose && (
         <button
@@ -46,7 +27,7 @@ export default function SidebarHeader({
       
       <Link 
         href="/dashboard" 
-        className={`flex items-center ${isCollapsed ? 'justify-center' : 'space-x-3'} ${onClose ? 'pr-12' : ''} ${onToggleCollapse && !isCollapsed ? 'pr-12' : ''}`}
+        className={`flex items-center ${isCollapsed ? 'justify-center' : 'space-x-3'} ${onClose ? 'pr-12' : ''}`}
       >
         <div 
           className="w-10 h-10 rounded-xl flex items-center justify-center bg-primary flex-shrink-0"

src/hooks/useChat.ts

@@ -27,6 +27,7 @@ export const useChat = ({ chatType }: UseChatProps) => {
   const [medicalAlertDetected, setMedicalAlertDetected] = useState<MedicalAlert | null>(null);
   const [isSchedulingFromAlert, setIsSchedulingFromAlert] = useState(false);
   const [showMedicalAlertBanner, setShowMedicalAlertBanner] = useState(false);
+  const [isMedicalAlertMinimized, setIsMedicalAlertMinimized] = useState(false);
   const [crisisDetected, setCrisisDetected] = useState(false);
   const [showCrisisBanner, setShowCrisisBanner] = useState(false);
   const [sessionRecordId, setSessionRecordId] = useState<string | null>(null); // ID del reporte de la sesión actual
@@ -309,6 +310,7 @@ export const useChat = ({ chatType }: UseChatProps) => {
           console.log("🚨 [CHAT] Alerta médica detectada:", metadata.medicalAlert);
           setMedicalAlertDetected(metadata.medicalAlert as MedicalAlert);
           setShowMedicalAlertBanner(true);
+          setIsMedicalAlertMinimized(false); // Expandir banner automáticamente cuando hay nueva alerta
         }
 
         // Marcar mensaje como completado y agregar metadatos
@@ -591,7 +593,11 @@ export const useChat = ({ chatType }: UseChatProps) => {
   };
 
   const dismissMedicalAlertBanner = () => {
-    setShowMedicalAlertBanner(false);
+    setIsMedicalAlertMinimized(true); // Minimizar en lugar de ocultar
+  };
+
+  const expandMedicalAlertBanner = () => {
+    setIsMedicalAlertMinimized(false); // Expandir el banner
   };
 
   const dismissCrisisBanner = () => {
@@ -624,9 +630,11 @@ export const useChat = ({ chatType }: UseChatProps) => {
     setInputDisabledForSuggestions,
     medicalAlertDetected,
     showMedicalAlertBanner,
+    isMedicalAlertMinimized,
     isSchedulingFromAlert,
     handleScheduleFromAlert,
     dismissMedicalAlertBanner,
+    expandMedicalAlertBanner,
     crisisDetected,
     showCrisisBanner,
     dismissCrisisBanner,