From 7dc07c2a806d6352d2a84c333f09974d997918b0 Mon Sep 17 00:00:00 2001
From: Rafael Lopes <rafael.lopes@sothis.com.br>
Date: Tue, 19 May 2026 09:45:00 -0300
Subject: [PATCH] =?UTF-8?q?FEAT:=20Ajustado=20espa=C3=A7o=20delimitador=20?=
 =?UTF-8?q?da=20tela=20de=20chat=20e=20conversas=20ativas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chat/components/ChatConversationList.jsx  | 36 ++++++++++++++-
 src/modules/chat/components/ChatWindow.jsx    | 45 ++++++++++++++++---
 src/modules/chat/hooks/useChat.js             | 11 ++++-
 src/modules/chat/pages/ChatPage.jsx           |  4 +-
 4 files changed, 86 insertions(+), 10 deletions(-)

diff --git a/src/modules/chat/components/ChatConversationList.jsx b/src/modules/chat/components/ChatConversationList.jsx
index feda181..914ade2 100644
--- a/src/modules/chat/components/ChatConversationList.jsx
+++ b/src/modules/chat/components/ChatConversationList.jsx
@@ -23,6 +23,29 @@ function ChannelBadge({ channel }) {
   );
 }
 
+function PresenceDot({ status }) {
+  const color =
+    status === 'online'
+      ? '#16a34a'
+      : status === 'away'
+        ? '#e5a22a'
+        : '#dc2626';
+
+  return (
+    <span
+      aria-hidden="true"
+      style={{
+        width: 10,
+        height: 10,
+        borderRadius: 999,
+        background: color,
+        boxShadow: `0 0 0 3px ${color}22`,
+        flex: '0 0 auto',
+      }}
+    />
+  );
+}
+
 export function ChatConversationList({
   contacts,
   activeContactId,
@@ -37,7 +60,10 @@ export function ChatConversationList({
         borderRadius: '28px',
         padding: '1rem',
         display: 'grid',
+        gridTemplateRows: 'auto minmax(0, 1fr)',
         gap: '0.85rem',
+        height: isMobile ? 'auto' : 'min(760px, calc(100vh - 190px))',
+        minHeight: 0,
       }}
     >
       <div>
@@ -52,6 +78,9 @@ export function ChatConversationList({
           display: 'grid',
           gap: '0.75rem',
           gridTemplateColumns: isMobile ? '1fr' : '1fr',
+          overflowY: 'auto',
+          minHeight: 0,
+          paddingRight: '0.15rem',
         }}
       >
         {contacts.map((contact) => {
@@ -74,7 +103,12 @@ export function ChatConversationList({
               }}
             >
               <div style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
-                <strong>{contact.name}</strong>
+                <span style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', minWidth: 0 }}>
+                  <PresenceDot status={contact.status} />
+                  <strong style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    {contact.name}
+                  </strong>
+                </span>
                 <span style={{ fontSize: '0.82rem', color: 'var(--color-text-soft)' }}>
                   {contact.time}
                 </span>
diff --git a/src/modules/chat/components/ChatWindow.jsx b/src/modules/chat/components/ChatWindow.jsx
index dcfe2fd..08bd8a9 100644
--- a/src/modules/chat/components/ChatWindow.jsx
+++ b/src/modules/chat/components/ChatWindow.jsx
@@ -179,6 +179,40 @@ function AttachmentPreview({ file, onRemove }) {
   );
 }
 
+function ContactPresence({ contact }) {
+  const status = contact.status || 'offline';
+  const color =
+    status === 'online'
+      ? '#16a34a'
+      : status === 'away'
+        ? '#e5a22a'
+        : '#dc2626';
+  const label = status === 'online' ? 'Online agora' : contact.lastSeen || 'Offline';
+
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+        color: 'var(--color-text-soft)',
+      }}
+    >
+      <span
+        aria-hidden="true"
+        style={{
+          width: 10,
+          height: 10,
+          borderRadius: 999,
+          background: color,
+          boxShadow: `0 0 0 3px ${color}22`,
+        }}
+      />
+      {label}
+    </span>
+  );
+}
+
 export function ChatWindow({
   contact,
   messages,
@@ -217,8 +251,10 @@ export function ChatWindow({
         borderRadius: '28px',
         overflow: 'hidden',
         display: 'grid',
-        gridTemplateRows: 'auto 1fr auto',
-        minHeight: 680,
+        gridTemplateRows: 'auto minmax(0, 1fr) auto',
+        height: isMobile ? 'auto' : 'min(760px, calc(100vh - 190px))',
+        minHeight: isMobile ? 640 : 0,
+        minWidth: 0,
       }}
     >
       <header
@@ -233,9 +269,7 @@ export function ChatWindow({
       >
         <div>
           <strong style={{ display: 'block', fontSize: '1.15rem' }}>{contact.name}</strong>
-          <span style={{ color: 'var(--color-text-soft)' }}>
-            {contact.status === 'online' ? 'Online' : 'Offline'} • {contact.lastSeen}
-          </span>
+          <ContactPresence contact={contact} />
         </div>
 
         <div
@@ -286,6 +320,7 @@ export function ChatWindow({
           gap: '0.9rem',
           alignContent: 'start',
           overflowY: 'auto',
+          minHeight: 0,
           background:
             'radial-gradient(circle at top left, rgba(0, 164, 183, 0.06), transparent 22%), linear-gradient(180deg, rgba(245, 248, 251, 0.8), rgba(255, 255, 255, 0.95))',
         }}
diff --git a/src/modules/chat/hooks/useChat.js b/src/modules/chat/hooks/useChat.js
index 47bbcb3..e41006c 100644
--- a/src/modules/chat/hooks/useChat.js
+++ b/src/modules/chat/hooks/useChat.js
@@ -40,13 +40,20 @@ function getPreviewFromMessage(message) {
 
 function normalizeChat(chat) {
   const id = getSerializedId(chat.id);
+  const lastActivitySeconds = chat.timestamp ? Math.floor(Date.now() / 1000) - chat.timestamp : null;
+  const isRecentlyActive = lastActivitySeconds !== null && lastActivitySeconds < 300;
+
   return {
     id,
     name: getContactName(chat),
     channel: 'WhatsApp',
-    status: 'online',
+    status: isRecentlyActive ? 'online' : 'away',
     area: chat.assignment?.area_id ? String(chat.assignment.area_id) : 'Suporte',
-    lastSeen: chat.timestamp ? `Visto as ${formatTime(chat.timestamp)}` : 'Online agora',
+    lastSeen: isRecentlyActive
+      ? 'Online agora'
+      : chat.timestamp
+        ? `Visto as ${formatTime(chat.timestamp)}`
+        : 'Sem atividade recente',
     preview: chat.preview || chat.lastMessage?.body || '',
     time: formatTime(chat.timestamp) || 'Agora',
     unread: chat.unreadCount || 0,
diff --git a/src/modules/chat/pages/ChatPage.jsx b/src/modules/chat/pages/ChatPage.jsx
index a18b7ad..d0f2e2a 100644
--- a/src/modules/chat/pages/ChatPage.jsx
+++ b/src/modules/chat/pages/ChatPage.jsx
@@ -103,7 +103,7 @@ export function ChatPage() {
             display: 'grid',
             gridTemplateColumns,
             gap: '1rem',
-            alignItems: 'start',
+            alignItems: 'stretch',
           }}
         >
           <ChatConversationList
@@ -113,7 +113,7 @@ export function ChatPage() {
             isMobile={isMobile}
           />
 
-          <div style={{ display: 'grid', gap: '1rem', minWidth: 0 }}>
+          <div style={{ display: 'grid', gap: '1rem', minWidth: 0, alignContent: 'start' }}>
             <ChatWindow
               contact={activeContact}
               messages={messages}