From 409da8afdab10393f729278c247cb172b433d3c8 Mon Sep 17 00:00:00 2001
From: esdrasrenan <esdras@renan.dev>
Date: Sun, 7 Dec 2025 14:37:28 -0300
Subject: [PATCH] Fix duration format and minimized chat layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Format duration as hours+minutes when > 60min (e.g., 2h 26min)
- Change minimized chat to compact chip style (matching web)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/desktop/src/chat/ChatWidget.tsx          | 26 +++++++------------
 .../tickets/ticket-chat-history.tsx           | 14 +++++++++-
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/apps/desktop/src/chat/ChatWidget.tsx b/apps/desktop/src/chat/ChatWidget.tsx
index bf4518e..56c5c96 100644
--- a/apps/desktop/src/chat/ChatWidget.tsx
+++ b/apps/desktop/src/chat/ChatWidget.tsx
@@ -332,28 +332,20 @@ export function ChatWidget({ ticketId }: ChatWidgetProps) {
     )
   }
 
-  // Versao minimizada (recolhida)
+  // Versao minimizada (chip compacto igual web)
   if (isMinimized) {
     return (
-      <div className="flex h-screen flex-col bg-white">
+      <div className="flex h-screen flex-col items-center justify-end bg-transparent p-4">
         <button
           onClick={() => setIsMinimized(false)}
-          data-tauri-drag-region
-          className="flex w-full items-center gap-3 border-b border-slate-200 bg-slate-50 px-4 py-3 text-left hover:bg-slate-100"
+          className="flex items-center gap-2 rounded-full bg-black px-4 py-2 text-white shadow-lg hover:bg-black/90"
         >
-          <div className="flex size-10 items-center justify-center rounded-full bg-black text-white">
-            <MessageCircle className="size-5" />
-          </div>
-          <div className="flex-1">
-            <div className="flex items-center gap-2">
-              <p className="text-sm font-semibold text-slate-900">
-                Chat #{ticketInfo?.ref}
-              </p>
-              <span className="size-2 rounded-full bg-emerald-500" />
-            </div>
-            <p className="text-xs text-slate-500">Clique para expandir</p>
-          </div>
-          <ChevronUp className="size-4 text-slate-400" />
+          <MessageCircle className="size-4" />
+          <span className="text-sm font-medium">
+            Chat #{ticketInfo?.ref}
+          </span>
+          <span className="size-2 rounded-full bg-emerald-400" />
+          <ChevronUp className="size-4" />
         </button>
       </div>
     )
diff --git a/src/components/tickets/ticket-chat-history.tsx b/src/components/tickets/ticket-chat-history.tsx
index abd9c26..1b66a06 100644
--- a/src/components/tickets/ticket-chat-history.tsx
+++ b/src/components/tickets/ticket-chat-history.tsx
@@ -54,6 +54,18 @@ type ChatSession = {
 
 const MESSAGES_PER_PAGE = 20
 
+function formatDuration(minutes: number): string {
+  if (minutes < 60) {
+    return `${minutes} min`
+  }
+  const hours = Math.floor(minutes / 60)
+  const mins = minutes % 60
+  if (mins === 0) {
+    return `${hours}h`
+  }
+  return `${hours}h ${mins}min`
+}
+
 function MessageAttachmentPreview({ attachment }: { attachment: { storageId: string; name: string; type: string | null } }) {
   const getFileUrl = useAction(api.files.getUrl)
   const [loading, setLoading] = useState(false)
@@ -147,7 +159,7 @@ function ChatSessionCard({ session, isExpanded, onToggle }: { session: ChatSessi
               <span>-</span>
               <span>{session.messageCount} mensagens</span>
               <span>-</span>
-              <span>{duration} min</span>
+              <span>{formatDuration(duration)}</span>
             </div>
           </div>
         </div>