style: clean up code formatting and remove trailing whitespace

refactor: reorganize imports and fix type imports

components/chat/ChatHeader.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { useState } from "react";
-import { Package, MapPin, DollarSign, Coins, User } from "lucide-react";
-import { Badge } from "@/components/ui/badge";
+import { Coins, DollarSign, MapPin, Package, User } from "lucide-react";
 import Image from "next/image";
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
 import type { Chat } from "@/lib/hooks/use-chat";
 
 interface ChatHeaderProps {
@@ -17,20 +17,23 @@ export function ChatHeader({ chat, currentUserId }: ChatHeaderProps) {
     chat.buyer_id === currentUserId ? chat.seller_cache : chat.buyer_cache;
   const [imageError, setImageError] = useState(false);
 
-  const formatPrice = (price: number | null | undefined, type: "pix" | "tc" | "gp"): string => {
+  const formatPrice = (
+    price: number | null | undefined,
+    type: "pix" | "tc" | "gp",
+  ): string => {
     if (price === null || price === undefined) return "N/A";
-    
+
     if (type === "pix") {
       return new Intl.NumberFormat("pt-BR", {
         style: "currency",
         currency: "BRL",
       }).format(price);
     }
-    
+
     if (type === "tc") {
       return `${price.toLocaleString("pt-BR")} TC`;
     }
-    
+
     if (type === "gp") {
       const gold = price / 1000000;
       if (gold >= 1) {
@@ -38,7 +41,7 @@ export function ChatHeader({ chat, currentUserId }: ChatHeaderProps) {
       }
       return `${price.toLocaleString("pt-BR")} gp`;
     }
-    
+
     return price.toLocaleString("pt-BR");
   };
 
@@ -63,7 +66,9 @@ export function ChatHeader({ chat, currentUserId }: ChatHeaderProps) {
 
         {/* Detalhes do anúncio */}
         <div className="flex-1 min-w-0">
-          <h3 className="font-semibold text-lg truncate">{listing.item_name}</h3>
+          <h3 className="font-semibold text-lg truncate">
+            {listing.item_name}
+          </h3>
           <div className="flex items-center gap-3 text-sm text-muted-foreground mt-1">
             <div className="flex items-center gap-1">
               <MapPin className="h-3 w-3" />
@@ -102,9 +107,7 @@ export function ChatHeader({ chat, currentUserId }: ChatHeaderProps) {
       {/* Informações do outro usuário */}
       <div className="flex items-center gap-2 pt-2 border-t">
         <User className="h-4 w-4 text-muted-foreground" />
-        <span className="text-sm text-muted-foreground">
-          Conversando com:{" "}
-        </span>
+        <span className="text-sm text-muted-foreground">Conversando com: </span>
         <span className="text-sm font-medium">
           {otherUser.character_name || otherUser.username}
         </span>
@@ -112,4 +115,3 @@ export function ChatHeader({ chat, currentUserId }: ChatHeaderProps) {
     </div>
   );
 }
-

components/chat/ChatModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import {
   Dialog,
   DialogContent,
@@ -8,12 +8,12 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { ChatHeader } from "./ChatHeader";
-import { MessageList } from "./MessageList";
-import { MessageInput } from "./MessageInput";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useChat } from "@/lib/hooks/use-chat";
 import { useSession } from "@/lib/hooks/use-session";
-import { Skeleton } from "@/components/ui/skeleton";
+import { ChatHeader } from "./ChatHeader";
+import { MessageInput } from "./MessageInput";
+import { MessageList } from "./MessageList";
 
 interface ChatModalProps {
   open: boolean;
@@ -104,9 +104,7 @@ export function ChatModal({
       <DialogContent className="max-w-2xl h-[80vh] flex flex-col p-0 gap-0">
         <DialogHeader className="sr-only">
           <DialogTitle>Chat com vendedor</DialogTitle>
-          <DialogDescription>
-            Conversa sobre o anúncio
-          </DialogDescription>
+          <DialogDescription>Conversa sobre o anúncio</DialogDescription>
         </DialogHeader>
 
         {isCreatingChat || (isLoading && !chat) ? (
@@ -144,4 +142,3 @@ export function ChatModal({
     </Dialog>
   );
 }
-

components/chat/MessageBubble.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { cn } from "@/lib/utils";
 import type { ChatMessage } from "@/lib/hooks/use-chat";
+import { cn } from "@/lib/utils";
 
 interface MessageBubbleProps {
   message: ChatMessage;
@@ -31,7 +31,7 @@ export function MessageBubble({ message, isOwn }: MessageBubbleProps) {
     <div
       className={cn(
         "flex w-full mb-2",
-        isOwn ? "justify-end" : "justify-start"
+        isOwn ? "justify-end" : "justify-start",
       )}
     >
       <div
@@ -39,7 +39,7 @@ export function MessageBubble({ message, isOwn }: MessageBubbleProps) {
           "max-w-[70%] rounded-lg px-4 py-2",
           isOwn
             ? "bg-primary text-primary-foreground"
-            : "bg-muted text-foreground"
+            : "bg-muted text-foreground",
         )}
       >
         <p className="text-sm whitespace-pre-wrap break-words">
@@ -48,16 +48,13 @@ export function MessageBubble({ message, isOwn }: MessageBubbleProps) {
         <div
           className={cn(
             "flex items-center gap-1 mt-1 text-xs",
-            isOwn ? "text-primary-foreground/70" : "text-muted-foreground"
+            isOwn ? "text-primary-foreground/70" : "text-muted-foreground",
           )}
         >
           <span>{formatTime(message.created_at)}</span>
-          {isOwn && message.read_at && (
-            <span className="opacity-70">✓✓</span>
-          )}
+          {isOwn && message.read_at && <span className="opacity-70">✓✓</span>}
         </div>
       </div>
     </div>
   );
 }
-

components/chat/MessageInput.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { useState, KeyboardEvent } from "react";
+import { Loader2, Send } from "lucide-react";
+import { type KeyboardEvent, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import { Send, Loader2 } from "lucide-react";
 import { useChatTyping } from "@/lib/hooks/use-chat";
 import { useSocket } from "@/lib/hooks/use-socket";
 
@@ -25,7 +25,7 @@ export function MessageInput({
   const { handleTypingStart, handleTypingStop } = useChatTyping(
     socket,
     isConnected,
-    chatId
+    chatId,
   );
 
   const handleSubmit = async () => {
@@ -46,7 +46,7 @@ export function MessageInput({
 
   const handleChange = (value: string) => {
     setContent(value);
-    
+
     if (value.trim().length > 0) {
       handleTypingStart();
     } else {
@@ -85,4 +85,3 @@ export function MessageInput({
     </div>
   );
 }
-

components/chat/MessageList.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useEffect, useRef } from "react";
-import { MessageBubble } from "./MessageBubble";
 import { Skeleton } from "@/components/ui/skeleton";
 import type { ChatMessage } from "@/lib/hooks/use-chat";
+import { MessageBubble } from "./MessageBubble";
 
 interface MessageListProps {
   messages: ChatMessage[];
@@ -40,7 +40,7 @@ export function MessageList({
     if (messages.length > 0 && !isLoading) {
       messagesEndRef.current?.scrollIntoView({ behavior: "auto" });
     }
-  }, [isLoading]);
+  }, [isLoading, messages.length]);
 
   // Detectar scroll no topo para carregar mais
   const handleScroll = () => {
@@ -50,7 +50,7 @@ export function MessageList({
     if (container.scrollTop === 0) {
       const previousScrollHeight = container.scrollHeight;
       onLoadMore();
-      
+
       // Ajustar scroll após carregar mais mensagens
       setTimeout(() => {
         const newScrollHeight = container.scrollHeight;
@@ -75,7 +75,9 @@ export function MessageList({
         <div className="flex items-center justify-center h-full text-center text-muted-foreground">
           <div>
             <p className="text-sm">Nenhuma mensagem ainda</p>
-            <p className="text-xs mt-1">Envie a primeira mensagem para começar a conversa</p>
+            <p className="text-xs mt-1">
+              Envie a primeira mensagem para começar a conversa
+            </p>
           </div>
         </div>
       ) : (
@@ -115,4 +117,3 @@ export function MessageList({
     </div>
   );
 }
-