style: clean up code formatting and remove trailing whitespace

refactor: reorganize imports and fix type imports

components/messages/ChatListItem.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { Card } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { Package, Clock } from "lucide-react";
+import { Clock, Package } from "lucide-react";
 import Image from "next/image";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
 import type { Chat } from "@/lib/hooks/use-chat";
 import { formatTimeAgo } from "@/lib/utils";
 
@@ -20,9 +20,7 @@ export function ChatListItem({
   onChatClick,
 }: ChatListItemProps) {
   const otherUser =
-    chat.buyer_id === currentUserId
-      ? chat.seller_cache
-      : chat.buyer_cache;
+    chat.buyer_id === currentUserId ? chat.seller_cache : chat.buyer_cache;
 
   const unreadCount =
     chat.buyer_id === currentUserId
@@ -53,7 +51,10 @@ export function ChatListItem({
               {otherUser.character_name || otherUser.username}
             </h4>
             {unreadCount > 0 && (
-              <Badge variant="destructive" className="h-5 min-w-5 px-1.5 text-xs">
+              <Badge
+                variant="destructive"
+                className="h-5 min-w-5 px-1.5 text-xs"
+              >
                 {unreadCount}
               </Badge>
             )}

components/messages/MessagesBell.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { useState, useEffect } from "react";
 import { MessageCircle } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { useEffect, useState } from "react";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { useSession } from "@/lib/hooks/use-session";
 import { MessagesPanel } from "./MessagesPanel";
 
@@ -46,14 +46,14 @@ export function MessagesBell({ className }: MessagesBellProps) {
     }, 30000); // 30 segundos
 
     return () => clearInterval(interval);
-  }, [user]);
+  }, [user, fetchUnreadCount]);
 
   // Atualizar contagem quando abrir/fechar
   useEffect(() => {
     if (isOpen) {
       fetchUnreadCount();
     }
-  }, [isOpen]);
+  }, [isOpen, fetchUnreadCount]);
 
   // Marcar como visto quando abrir
   const handleOpenChange = (open: boolean) => {
@@ -82,7 +82,7 @@ export function MessagesBell({ className }: MessagesBellProps) {
           </Badge>
         )}
       </Button>
-      
+
       <MessagesPanel
         open={isOpen}
         onOpenChange={handleOpenChange}

components/messages/MessagesPanel.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
+import { ChatModal } from "@/components/chat/ChatModal";
 import {
   Sheet,
   SheetContent,
@@ -8,11 +9,10 @@ import {
   SheetHeader,
   SheetTitle,
 } from "@/components/ui/sheet";
-import { ChatListItem } from "./ChatListItem";
 import { Skeleton } from "@/components/ui/skeleton";
-import { useSession } from "@/lib/hooks/use-session";
-import { ChatModal } from "@/components/chat/ChatModal";
 import type { Chat } from "@/lib/hooks/use-chat";
+import { useSession } from "@/lib/hooks/use-session";
+import { ChatListItem } from "./ChatListItem";
 
 interface MessagesPanelProps {
   open: boolean;
@@ -44,7 +44,7 @@ export function MessagesPanel({
         const data = await res.json();
         if (data.success) {
           setChats(data.chats || []);
-          
+
           // Calcular contagem de usuários únicos com não lidas
           const uniqueUsersWithUnread = new Set<number>();
           data.chats.forEach((chat: Chat) => {
@@ -53,15 +53,13 @@ export function MessagesPanel({
                 ? chat.buyer_unread_count
                 : chat.seller_unread_count;
             const otherUserId =
-              chat.buyer_id === user.userId
-                ? chat.seller_id
-                : chat.buyer_id;
-            
+              chat.buyer_id === user.userId ? chat.seller_id : chat.buyer_id;
+
             if (unreadCount > 0) {
               uniqueUsersWithUnread.add(otherUserId);
             }
           });
-          
+
           onUnreadCountChange(uniqueUsersWithUnread.size);
         }
       }
@@ -78,7 +76,12 @@ export function MessagesPanel({
       // Marcar todos como lidos ao abrir
       markAllAsRead();
     }
-  }, [open, user]);
+  }, [
+    open,
+    user,
+    fetchChats, // Marcar todos como lidos ao abrir
+    markAllAsRead,
+  ]);
 
   const markAllAsRead = async () => {
     try {
@@ -94,7 +97,7 @@ export function MessagesPanel({
             chat.buyer_id === user?.userId ? 0 : chat.buyer_unread_count,
           seller_unread_count:
             chat.seller_id === user?.userId ? 0 : chat.seller_unread_count,
-        }))
+        })),
       );
       onUnreadCountChange(0);
     } catch (error) {
@@ -102,7 +105,7 @@ export function MessagesPanel({
     }
   };
 
-  const handleChatClick = (chatId: string, listingId: number) => {
+  const handleChatClick = (chatId: string, _listingId: number) => {
     setSelectedChatId(chatId);
     setShowChatModal(true);
     onOpenChange(false);
@@ -123,7 +126,10 @@ export function MessagesPanel({
             </SheetDescription>
           </SheetHeader>
 
-          <div className="mt-4 px-4 overflow-y-auto" style={{ maxHeight: "calc(100vh - 120px)" }}>
+          <div
+            className="mt-4 px-4 overflow-y-auto"
+            style={{ maxHeight: "calc(100vh - 120px)" }}
+          >
             {isLoading ? (
               <div className="space-y-4">
                 {Array.from({ length: 5 }).map((_, i) => (
@@ -144,7 +150,9 @@ export function MessagesPanel({
                     key={chat.chat_id}
                     chat={chat}
                     currentUserId={user.userId}
-                    onChatClick={() => handleChatClick(chat.chat_id, chat.listing_id)}
+                    onChatClick={() =>
+                      handleChatClick(chat.chat_id, chat.listing_id)
+                    }
                   />
                 ))}
               </div>