@armoyu/ui 1.0.0 → 1.0.2

package/dist/components/modules/chat/ChatContainer.js

@@ -1,197 +1,197 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect } from 'react';
-import { useAuth } from '../../../context/AuthContext';
-import { ChatList } from './ChatList';
-import { Chat, User, Session, ChatMessage as ChatMessageModel } from '@armoyu/core';
-import { ChatMessage } from './ChatMessage';
-import { ChatInput } from './ChatInput';
-import { useChat } from '../../../context/ChatContext';
-import { useSocket } from '../../../context/SocketContext';
-// Mock Data
-import { userList } from '../../../lib/constants/seedData';
-export function ChatContainer() {
-    const { user, session, updateSession } = useAuth();
-    const { closeChat } = useChat();
-    const { emit, on, isConnected } = useSocket();
-    // Eğer null ise liste görünümü açık, ID var ise mesajlaşma açık.
-    const [activeContactId, setActiveContactId] = useState(null);
-    const [localMessages, setLocalMessages] = useState([]);
-    const [localContacts, setLocalContacts] = useState([]);
-    const [isTyping, setIsTyping] = useState(false);
-    const messagesEndRef = React.useRef(null);
-    const scrollToBottom = () => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-    };
-    // Scroll to bottom when messages or typing status changes
-    useEffect(() => {
-        scrollToBottom();
-    }, [localMessages, isTyping]);
-    // Sync with session's chatList (chatList lives on Session, not User)
-    useEffect(() => {
-        if (session?.chatList) {
-            setLocalContacts(session.chatList);
-        }
-    }, [session?.chatList]);
-    // Socket Connection for Real-time Messages & Typing
-    useEffect(() => {
-        const offMsg = on('message', (incomingMsg) => {
-            console.log('[ChatContainer] Incoming socket message:', incomingMsg);
-            const msgModel = new ChatMessageModel({
-                id: incomingMsg.id,
-                sender: incomingMsg.sender ? new User(incomingMsg.sender) : undefined,
-                content: incomingMsg.content,
-                timestamp: incomingMsg.timestamp,
-                isSystem: incomingMsg.isSystem || false
-            });
-            // Update contacts list
-            setLocalContacts(prev => {
-                const contactId = incomingMsg.chatId || incomingMsg.sender?.username;
-                const contactExists = prev.some(c => c.id === contactId);
-                if (!contactExists && incomingMsg.sender?.username !== user?.username) {
-                    // CREATE NEW CHAT: If sender isn't in our list, create the chat box for them!
-                    const newChat = new Chat({
-                        id: contactId,
-                        name: incomingMsg.sender?.displayName || incomingMsg.sender?.username || 'Bilinmeyen',
-                        avatar: incomingMsg.sender?.avatar || '',
-                        lastMessage: msgModel,
-                        time: msgModel.timestamp,
-                        updatedAt: Date.now(),
-                        messages: [msgModel],
-                        unreadCount: (activeContactId !== contactId) ? 1 : 0,
-                        isOnline: true // Assume online since they just sent a message
-                    });
-                    // PERSIST to Session!
-                    if (session) {
-                        const updatedChatList = [newChat, ...(session.chatList || [])];
-                        updateSession(new Session({ ...session, chatList: updatedChatList }));
-                    }
-                    return [newChat, ...prev];
-                }
-                // UPDATE EXISTING CHAT
-                return prev.map(c => {
-                    if (c.id === contactId) {
-                        // Only add if not already in messages to avoid duplicates from echo
-                        const messageExists = c.messages.some(m => m.id === msgModel.id);
-                        const updatedChat = new Chat({
-                            ...c,
-                            lastMessage: msgModel,
-                            time: msgModel.timestamp,
-                            updatedAt: Date.now(),
-                            messages: messageExists ? c.messages : [...(c.messages || []), msgModel],
-                            unreadCount: (activeContactId !== c.id && incomingMsg.sender?.username !== user?.username) ? c.unreadCount + 1 : c.unreadCount
-                        });
-                        // Note: We don't necessarily need to update the whole session on every message to avoid excessive renders,
-                        // as local state handles the UI. But for NEW chats, we must.
-                        return updatedChat;
-                    }
-                    return c;
-                });
-            });
-            // If this is the active chat, update visible messages
-            if (activeContactId === incomingMsg.chatId || activeContactId === incomingMsg.sender?.username) {
-                setLocalMessages(prev => {
-                    if (prev.some(m => m.id === incomingMsg.id))
-                        return prev;
-                    return [...prev, msgModel];
-                });
-                setIsTyping(false); // Stop typing on message receive
-            }
-        });
-        const offTyping = on('typing', (data) => {
-            // console.log('[ChatContainer] Incoming typing event:', data);
-            // If we are recipient (data.chatId is US) and the sender IS the one we are currently viewing
-            const isChattingWithSender = data.username === activeContactId && data.chatId === user?.username;
-            // Special case for system bot
-            const isBotTyping = data.username === 'system' && data.chatId === user?.username;
-            if (isChattingWithSender || isBotTyping) {
-                setIsTyping(data.isTyping);
-            }
-        });
-        return () => {
-            offMsg();
-            offTyping();
-        };
-    }, [on, activeContactId, user?.username]);
-    const handleSelectContact = (id) => {
-        // Check if the contact is already in our list
-        let contact = localContacts.find((c) => c.id === id);
-        // If NOT in our list (clicked from "New Contacts" search), we must create it!
-        if (!contact) {
-            const newUser = userList.find((u) => u.username === id);
-            if (newUser) {
-                contact = new Chat({
-                    id: newUser.username,
-                    name: newUser.displayName,
-                    avatar: newUser.avatar,
-                    updatedAt: Date.now(),
-                    messages: [],
-                    isOnline: true, // Mock online status for now
-                    unreadCount: 0
-                });
-                const updatedContacts = [contact, ...localContacts];
-                setLocalContacts(updatedContacts);
-                // Persist to session so it stays in the list!
-                if (session) {
-                    const updatedChatList = [contact, ...(session.chatList || [])];
-                    updateSession(new Session({ ...session, chatList: updatedChatList }));
-                }
-            }
-        }
-        setActiveContactId(id);
-        setLocalMessages(contact?.messages || []);
-        setIsTyping(false);
-        // Clear unread on select (if it was an existing contact)
-        if (contact && contact.unreadCount > 0) {
-            setLocalContacts(prev => prev.map(c => c.id === id ? { ...c, unreadCount: 0 } : c));
-        }
-    };
-    const handleSendMessage = (text) => {
-        if (!text.trim() || !activeContactId)
-            return;
-        const messageData = {
-            id: Date.now().toString(),
-            chatId: activeContactId,
-            sender: {
-                username: user?.username,
-                displayName: user?.displayName,
-                avatar: user?.avatar
-            },
-            content: text,
-            timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
-        };
-        // Update local state immediately for instant feedback
-        const newMessage = new ChatMessageModel({
-            id: messageData.id,
-            sender: user || undefined,
-            content: text,
-            timestamp: messageData.timestamp,
-            isSystem: false
-        });
-        setLocalMessages(prev => [...prev, newMessage]);
-        setLocalContacts(prev => prev.map(c => {
-            if (c.id === activeContactId) {
-                return new Chat({
-                    ...c,
-                    lastMessage: newMessage,
-                    time: newMessage.timestamp,
-                    updatedAt: Date.now(),
-                    messages: [...(c.messages || []), newMessage]
-                });
-            }
-            return c;
-        }));
-        // Emit via socket for others
-        emit('message', messageData);
-    };
-    if (!user) {
-        return (_jsx("div", { className: "flex items-center justify-center h-full text-armoyu-text-muted bg-armoyu-card-bg rounded-3xl border border-gray-200 dark:border-white/10", children: "Sohbetleri g\u00F6rmek i\u00E7in giri\u015F yapmal\u0131s\u0131n\u0131z." }));
-    }
-    const activeContact = activeContactId ? localContacts.find((c) => c.id === activeContactId) : null;
-    return (_jsxs("div", { className: "flex h-full w-full bg-armoyu-header-bg overflow-hidden relative z-10", children: [!activeContactId && (_jsx("div", { className: "w-full h-full flex flex-col animate-in fade-in slide-in-from-left-4 duration-300", children: _jsx(ChatList, { contacts: localContacts, activeId: '', onSelect: handleSelectContact }) })), activeContactId && activeContact && (_jsxs("div", { className: "w-full h-full flex flex-col bg-armoyu-bg relative animate-in fade-in slide-in-from-right-4 duration-300", children: [_jsxs("div", { className: "h-[76px] border-b border-gray-200 dark:border-white/5 bg-armoyu-card-bg flex items-center px-4 gap-3 z-10 shrink-0", children: [_jsx("button", { onClick: () => setActiveContactId(null), className: "p-2 -ml-2 text-armoyu-text-muted hover:text-armoyu-text hover:bg-black/5 dark:hover:bg-white/5 transition-colors rounded-full focus:outline-none", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "15 18 9 12 15 6" }) }) }), _jsx("img", { src: activeContact.avatar, className: "w-10 h-10 rounded-full border border-black/5 dark:border-white/10 shadow-sm", alt: "" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-bold text-armoyu-text truncate text-base", children: activeContact.name }), _jsx("div", { className: "flex items-center gap-1.5 mt-0.5", children: activeContact.isOnline ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_5px_rgba(16,185,129,0.6)] animate-pulse" }), _jsx("span", { className: "text-xs font-bold text-emerald-500 shadow-sm", children: "\u00C7evrimi\u00E7i" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600" }), _jsxs("span", { className: "text-xs font-bold text-armoyu-text-muted", children: ["Son g\u00F6r\u00FClme ", activeContact.lastSeen] })] })) })] }), _jsxs("div", { className: "flex gap-1", children: [_jsx("button", { className: "p-2 text-armoyu-text-muted hover:text-blue-500 rounded-full hover:bg-blue-500/10 transition-colors", title: "Ara", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) }) }), _jsx("button", { onClick: closeChat, className: "p-2 text-armoyu-text-muted hover:text-red-500 rounded-full hover:bg-red-500/10 transition-colors", title: "Sohbeti Kapat", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-4 md:p-6 space-y-2 relative hide-scrollbar", children: [_jsx("div", { className: "text-center mb-8", children: _jsx("span", { className: "inline-block bg-black/5 dark:bg-white/5 text-armoyu-text-muted text-xs font-bold px-3 py-1 rounded-full border border-black/5 dark:border-white/5", children: "Bug\u00FCn" }) }), localMessages.map(msg => (_jsx(ChatMessage, { id: msg.id, sender: {
-                                    name: msg.sender?.displayName || 'Bilinmiyor',
-                                    avatar: msg.sender?.avatar || '',
-                                    isSelf: msg.sender?.username === user?.username
-                                }, content: msg.content, timestamp: msg.timestamp }, msg.id))), isTyping && (_jsx("div", { className: "flex gap-2 items-center px-4 animate-in fade-in slide-in-from-bottom-2 duration-300", children: _jsxs("div", { className: "flex gap-1 items-center bg-black/5 dark:bg-white/5 px-3 py-1.5 rounded-2xl border border-black/5 dark:border-white/5", children: [_jsxs("div", { className: "flex gap-0.5 mt-0.5", children: [_jsx("span", { className: "w-1 h-1 rounded-full bg-blue-500 animate-bounce [animation-delay:-0.3s]" }), _jsx("span", { className: "w-1 h-1 rounded-full bg-blue-500 animate-bounce [animation-delay:-0.15s]" }), _jsx("span", { className: "w-1 h-1 rounded-full bg-blue-500 animate-bounce" })] }), _jsx("span", { className: "text-[10px] font-bold text-armoyu-text-muted italic ml-1", children: "Yaz\u0131yor..." })] }) })), _jsx("div", { ref: messagesEndRef, className: "h-2" })] }), _jsx(ChatInput, { onSend: handleSendMessage, chatId: activeContactId })] }))] }));
-}
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+import { useAuth } from '../../../context/AuthContext';
+import { ChatList } from './ChatList';
+import { Chat, User, Session, ChatMessage as ChatMessageModel } from '@armoyu/core';
+import { ChatMessage } from './ChatMessage';
+import { ChatInput } from './ChatInput';
+import { useChat } from '../../../context/ChatContext';
+import { useSocket } from '../../../context/SocketContext';
+// Mock Data
+import { userList } from '../../../lib/constants/seedData';
+export function ChatContainer() {
+    const { user, session, updateSession } = useAuth();
+    const { closeChat } = useChat();
+    const { emit, on, isConnected } = useSocket();
+    // Eğer null ise liste görünümü açık, ID var ise mesajlaşma açık.
+    const [activeContactId, setActiveContactId] = useState(null);
+    const [localMessages, setLocalMessages] = useState([]);
+    const [localContacts, setLocalContacts] = useState([]);
+    const [isTyping, setIsTyping] = useState(false);
+    const messagesEndRef = React.useRef(null);
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    };
+    // Scroll to bottom when messages or typing status changes
+    useEffect(() => {
+        scrollToBottom();
+    }, [localMessages, isTyping]);
+    // Sync with session's chatList (chatList lives on Session, not User)
+    useEffect(() => {
+        if (session?.chatList) {
+            setLocalContacts(session.chatList);
+        }
+    }, [session?.chatList]);
+    // Socket Connection for Real-time Messages & Typing
+    useEffect(() => {
+        const offMsg = on('message', (incomingMsg) => {
+            console.log('[ChatContainer] Incoming socket message:', incomingMsg);
+            const msgModel = new ChatMessageModel({
+                id: incomingMsg.id,
+                sender: incomingMsg.sender ? new User(incomingMsg.sender) : undefined,
+                content: incomingMsg.content,
+                timestamp: incomingMsg.timestamp,
+                isSystem: incomingMsg.isSystem || false
+            });
+            // Update contacts list
+            setLocalContacts(prev => {
+                const contactId = incomingMsg.chatId || incomingMsg.sender?.username;
+                const contactExists = prev.some(c => c.id === contactId);
+                if (!contactExists && incomingMsg.sender?.username !== user?.username) {
+                    // CREATE NEW CHAT: If sender isn't in our list, create the chat box for them!
+                    const newChat = new Chat({
+                        id: contactId,
+                        name: incomingMsg.sender?.displayName || incomingMsg.sender?.username || 'Bilinmeyen',
+                        avatar: incomingMsg.sender?.avatar || '',
+                        lastMessage: msgModel,
+                        time: msgModel.timestamp,
+                        updatedAt: Date.now(),
+                        messages: [msgModel],
+                        unreadCount: (activeContactId !== contactId) ? 1 : 0,
+                        isOnline: true // Assume online since they just sent a message
+                    });
+                    // PERSIST to Session!
+                    if (session) {
+                        const updatedChatList = [newChat, ...(session.chatList || [])];
+                        updateSession(new Session({ ...session, chatList: updatedChatList }));
+                    }
+                    return [newChat, ...prev];
+                }
+                // UPDATE EXISTING CHAT
+                return prev.map(c => {
+                    if (c.id === contactId) {
+                        // Only add if not already in messages to avoid duplicates from echo
+                        const messageExists = c.messages.some(m => m.id === msgModel.id);
+                        const updatedChat = new Chat({
+                            ...c,
+                            lastMessage: msgModel,
+                            time: msgModel.timestamp,
+                            updatedAt: Date.now(),
+                            messages: messageExists ? c.messages : [...(c.messages || []), msgModel],
+                            unreadCount: (activeContactId !== c.id && incomingMsg.sender?.username !== user?.username) ? c.unreadCount + 1 : c.unreadCount
+                        });
+                        // Note: We don't necessarily need to update the whole session on every message to avoid excessive renders,
+                        // as local state handles the UI. But for NEW chats, we must.
+                        return updatedChat;
+                    }
+                    return c;
+                });
+            });
+            // If this is the active chat, update visible messages
+            if (activeContactId === incomingMsg.chatId || activeContactId === incomingMsg.sender?.username) {
+                setLocalMessages(prev => {
+                    if (prev.some(m => m.id === incomingMsg.id))
+                        return prev;
+                    return [...prev, msgModel];
+                });
+                setIsTyping(false); // Stop typing on message receive
+            }
+        });
+        const offTyping = on('typing', (data) => {
+            // console.log('[ChatContainer] Incoming typing event:', data);
+            // If we are recipient (data.chatId is US) and the sender IS the one we are currently viewing
+            const isChattingWithSender = data.username === activeContactId && data.chatId === user?.username;
+            // Special case for system bot
+            const isBotTyping = data.username === 'system' && data.chatId === user?.username;
+            if (isChattingWithSender || isBotTyping) {
+                setIsTyping(data.isTyping);
+            }
+        });
+        return () => {
+            offMsg();
+            offTyping();
+        };
+    }, [on, activeContactId, user?.username]);
+    const handleSelectContact = (id) => {
+        // Check if the contact is already in our list
+        let contact = localContacts.find((c) => c.id === id);
+        // If NOT in our list (clicked from "New Contacts" search), we must create it!
+        if (!contact) {
+            const newUser = userList.find((u) => u.username === id);
+            if (newUser) {
+                contact = new Chat({
+                    id: newUser.username,
+                    name: newUser.displayName,
+                    avatar: newUser.avatar,
+                    updatedAt: Date.now(),
+                    messages: [],
+                    isOnline: true, // Mock online status for now
+                    unreadCount: 0
+                });
+                const updatedContacts = [contact, ...localContacts];
+                setLocalContacts(updatedContacts);
+                // Persist to session so it stays in the list!
+                if (session) {
+                    const updatedChatList = [contact, ...(session.chatList || [])];
+                    updateSession(new Session({ ...session, chatList: updatedChatList }));
+                }
+            }
+        }
+        setActiveContactId(id);
+        setLocalMessages(contact?.messages || []);
+        setIsTyping(false);
+        // Clear unread on select (if it was an existing contact)
+        if (contact && contact.unreadCount > 0) {
+            setLocalContacts(prev => prev.map(c => c.id === id ? { ...c, unreadCount: 0 } : c));
+        }
+    };
+    const handleSendMessage = (text) => {
+        if (!text.trim() || !activeContactId)
+            return;
+        const messageData = {
+            id: Date.now().toString(),
+            chatId: activeContactId,
+            sender: {
+                username: user?.username,
+                displayName: user?.displayName,
+                avatar: user?.avatar
+            },
+            content: text,
+            timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+        };
+        // Update local state immediately for instant feedback
+        const newMessage = new ChatMessageModel({
+            id: messageData.id,
+            sender: user || undefined,
+            content: text,
+            timestamp: messageData.timestamp,
+            isSystem: false
+        });
+        setLocalMessages(prev => [...prev, newMessage]);
+        setLocalContacts(prev => prev.map(c => {
+            if (c.id === activeContactId) {
+                return new Chat({
+                    ...c,
+                    lastMessage: newMessage,
+                    time: newMessage.timestamp,
+                    updatedAt: Date.now(),
+                    messages: [...(c.messages || []), newMessage]
+                });
+            }
+            return c;
+        }));
+        // Emit via socket for others
+        emit('message', messageData);
+    };
+    if (!user) {
+        return (_jsx("div", { className: "flex items-center justify-center h-full text-armoyu-text-muted bg-armoyu-card-bg rounded-3xl border border-gray-200 dark:border-white/10", children: "Sohbetleri g\u00F6rmek i\u00E7in giri\u015F yapmal\u0131s\u0131n\u0131z." }));
+    }
+    const activeContact = activeContactId ? localContacts.find((c) => c.id === activeContactId) : null;
+    return (_jsxs("div", { className: "flex h-full w-full bg-armoyu-header-bg overflow-hidden relative z-10", children: [!activeContactId && (_jsx("div", { className: "w-full h-full flex flex-col animate-in fade-in slide-in-from-left-4 duration-300", children: _jsx(ChatList, { contacts: localContacts, activeId: '', onSelect: handleSelectContact }) })), activeContactId && activeContact && (_jsxs("div", { className: "w-full h-full flex flex-col bg-armoyu-bg relative animate-in fade-in slide-in-from-right-4 duration-300", children: [_jsxs("div", { className: "h-[76px] border-b border-gray-200 dark:border-white/5 bg-armoyu-card-bg flex items-center px-4 gap-3 z-10 shrink-0", children: [_jsx("button", { onClick: () => setActiveContactId(null), className: "p-2 -ml-2 text-armoyu-text-muted hover:text-armoyu-text hover:bg-black/5 dark:hover:bg-white/5 transition-colors rounded-full focus:outline-none", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "15 18 9 12 15 6" }) }) }), _jsx("img", { src: activeContact.avatar, className: "w-10 h-10 rounded-full border border-black/5 dark:border-white/10 shadow-sm", alt: "" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-bold text-armoyu-text truncate text-base", children: activeContact.name }), _jsx("div", { className: "flex items-center gap-1.5 mt-0.5", children: activeContact.isOnline ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_5px_rgba(16,185,129,0.6)] animate-pulse" }), _jsx("span", { className: "text-xs font-bold text-emerald-500 shadow-sm", children: "\u00C7evrimi\u00E7i" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600" }), _jsxs("span", { className: "text-xs font-bold text-armoyu-text-muted", children: ["Son g\u00F6r\u00FClme ", activeContact.lastSeen] })] })) })] }), _jsxs("div", { className: "flex gap-1", children: [_jsx("button", { className: "p-2 text-armoyu-text-muted hover:text-blue-500 rounded-full hover:bg-blue-500/10 transition-colors", title: "Ara", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) }) }), _jsx("button", { onClick: closeChat, className: "p-2 text-armoyu-text-muted hover:text-red-500 rounded-full hover:bg-red-500/10 transition-colors", title: "Sohbeti Kapat", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-4 md:p-6 space-y-2 relative hide-scrollbar", children: [_jsx("div", { className: "text-center mb-8", children: _jsx("span", { className: "inline-block bg-black/5 dark:bg-white/5 text-armoyu-text-muted text-xs font-bold px-3 py-1 rounded-full border border-black/5 dark:border-white/5", children: "Bug\u00FCn" }) }), localMessages.map(msg => (_jsx(ChatMessage, { id: msg.id, sender: {
+                                    name: msg.sender?.displayName || 'Bilinmiyor',
+                                    avatar: msg.sender?.avatar || '',
+                                    isSelf: msg.sender?.username === user?.username
+                                }, content: msg.content, timestamp: msg.timestamp }, msg.id))), isTyping && (_jsx("div", { className: "flex gap-2 items-center px-4 animate-in fade-in slide-in-from-bottom-2 duration-300", children: _jsxs("div", { className: "flex gap-1 items-center bg-black/5 dark:bg-white/5 px-3 py-1.5 rounded-2xl border border-black/5 dark:border-white/5", children: [_jsxs("div", { className: "flex gap-0.5 mt-0.5", children: [_jsx("span", { className: "w-1 h-1 rounded-full bg-blue-500 animate-bounce [animation-delay:-0.3s]" }), _jsx("span", { className: "w-1 h-1 rounded-full bg-blue-500 animate-bounce [animation-delay:-0.15s]" }), _jsx("span", { className: "w-1 h-1 rounded-full bg-blue-500 animate-bounce" })] }), _jsx("span", { className: "text-[10px] font-bold text-armoyu-text-muted italic ml-1", children: "Yaz\u0131yor..." })] }) })), _jsx("div", { ref: messagesEndRef, className: "h-2" })] }), _jsx(ChatInput, { onSend: handleSendMessage, chatId: activeContactId })] }))] }));
+}
 //# sourceMappingURL=ChatContainer.js.map

package/dist/components/modules/chat/ChatInput.js

@@ -1,31 +1,31 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Button } from '../../Button';
-import { useSocket } from '../../../context/SocketContext';
-export function ChatInput({ onSend, chatId }) {
-    const [text, setText] = useState('');
-    const { emit } = useSocket();
-    const handleSend = (e) => {
-        e.preventDefault();
-        if (text.trim()) {
-            onSend(text);
-            setText('');
-            if (chatId)
-                emit('typing', { chatId, isTyping: false });
-        }
-    };
-    const handleChange = (val) => {
-        setText(val);
-        if (chatId) {
-            const isTyping = val.length > 0;
-            // Include username to help receiver filter out self
-            emit('typing', {
-                chatId,
-                isTyping,
-                username: typeof window !== 'undefined' ? localStorage.getItem('armoyu_username') : undefined
-            });
-        }
-    };
-    return (_jsxs("form", { onSubmit: handleSend, className: "p-3 border-t border-gray-200 dark:border-white/5 flex items-center gap-3 bg-armoyu-card-bg", children: [_jsx("button", { type: "button", className: "text-gray-400 hover:text-blue-500 p-2 transition-colors shrink-0", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }), _jsx("line", { x1: "9", y1: "9", x2: "9.01", y2: "9" }), _jsx("line", { x1: "15", y1: "9", x2: "15.01", y2: "9" })] }) }), _jsx("button", { type: "button", className: "text-gray-400 hover:text-blue-500 p-2 transition-colors hidden sm:block shrink-0", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) }) }), _jsx("input", { type: "text", value: text, onChange: (e) => handleChange(e.target.value), placeholder: "Bir mesaj yaz\u0131n...", className: "flex-1 min-w-0 bg-black/5 dark:bg-black/40 border border-black/10 dark:border-white/10 rounded-full px-4 py-2.5 text-sm text-armoyu-text placeholder-armoyu-text-muted focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all shadow-inner" }), _jsx(Button, { variant: "primary", className: "rounded-full w-10 h-10 p-0 flex items-center justify-center shadow-[0_0_15px_rgba(37,99,235,0.3)] shrink-0 group", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className: "translate-x-0.5 group-hover:translate-x-1 group-hover:-translate-y-0.5 transition-transform", children: [_jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), _jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }) })] }));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../../Button';
+import { useSocket } from '../../../context/SocketContext';
+export function ChatInput({ onSend, chatId }) {
+    const [text, setText] = useState('');
+    const { emit } = useSocket();
+    const handleSend = (e) => {
+        e.preventDefault();
+        if (text.trim()) {
+            onSend(text);
+            setText('');
+            if (chatId)
+                emit('typing', { chatId, isTyping: false });
+        }
+    };
+    const handleChange = (val) => {
+        setText(val);
+        if (chatId) {
+            const isTyping = val.length > 0;
+            // Include username to help receiver filter out self
+            emit('typing', {
+                chatId,
+                isTyping,
+                username: typeof window !== 'undefined' ? localStorage.getItem('armoyu_username') : undefined
+            });
+        }
+    };
+    return (_jsxs("form", { onSubmit: handleSend, className: "p-3 border-t border-gray-200 dark:border-white/5 flex items-center gap-3 bg-armoyu-card-bg", children: [_jsx("button", { type: "button", className: "text-gray-400 hover:text-blue-500 p-2 transition-colors shrink-0", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }), _jsx("line", { x1: "9", y1: "9", x2: "9.01", y2: "9" }), _jsx("line", { x1: "15", y1: "9", x2: "15.01", y2: "9" })] }) }), _jsx("button", { type: "button", className: "text-gray-400 hover:text-blue-500 p-2 transition-colors hidden sm:block shrink-0", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) }) }), _jsx("input", { type: "text", value: text, onChange: (e) => handleChange(e.target.value), placeholder: "Bir mesaj yaz\u0131n...", className: "flex-1 min-w-0 bg-black/5 dark:bg-black/40 border border-black/10 dark:border-white/10 rounded-full px-4 py-2.5 text-sm text-armoyu-text placeholder-armoyu-text-muted focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all shadow-inner" }), _jsx(Button, { variant: "primary", className: "rounded-full w-10 h-10 p-0 flex items-center justify-center shadow-[0_0_15px_rgba(37,99,235,0.3)] shrink-0 group", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className: "translate-x-0.5 group-hover:translate-x-1 group-hover:-translate-y-0.5 transition-transform", children: [_jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), _jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }) })] }));
+}
 //# sourceMappingURL=ChatInput.js.map

package/dist/components/modules/chat/ChatList.js

@@ -1,52 +1,52 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useChat } from '../../../context/ChatContext';
-import { useSocket } from '../../../context/SocketContext';
-import { ChatNotes } from './ChatNotes';
-import { useState } from 'react';
-import { userList } from '../../../lib/constants/seedData';
-import { useAuth } from '../../../context/AuthContext';
-export function ChatList({ contacts, activeId, onSelect }) {
-    const { user } = useAuth();
-    const { closeChat } = useChat();
-    const { isConnected } = useSocket();
-    const [searchQuery, setSearchQuery] = useState('');
-    const [activeFilter, setActiveFilter] = useState('all');
-    const filteredActiveContacts = contacts
-        .filter(c => {
-        // 1. Search Query Filter
-        const matchesSearch = c.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-            (c.lastMessage?.content || '').toLowerCase().includes(searchQuery.toLowerCase());
-        if (!matchesSearch)
-            return false;
-        // 2. Category Filter
-        if (activeFilter === 'unread')
-            return c.unreadCount > 0;
-        if (activeFilter === 'favorites')
-            return c.isFavorite;
-        if (activeFilter === 'groups')
-            return c.isGroup;
-        return true; // 'all'
-    })
-        .sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0));
-    // 3. New Contact Search (Only when searching)
-    const additionalContacts = searchQuery.length >= 2
-        ? userList.filter((u) => {
-            const matchesSearch = u.displayName.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                u.username.toLowerCase().includes(searchQuery.toLowerCase());
-            const isNotSelf = u.username !== user?.username;
-            const notInContacts = !contacts.some(c => c.id === u.username);
-            return matchesSearch && isNotSelf && notInContacts;
-        }).slice(0, 10)
-        : [];
-    return (_jsxs("div", { className: "w-full h-full flex flex-col bg-armoyu-bg border-r border-gray-200 dark:border-white/5", children: [_jsxs("div", { className: "p-4 md:p-5 border-b border-gray-200 dark:border-white/5", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h2", { className: "text-xl font-bold text-armoyu-text tracking-tight flex items-center gap-2", children: "Sohbetler" }), _jsxs("div", { className: "flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5", children: [_jsx("div", { className: `w-1.5 h-1.5 rounded-full ${isConnected ? 'bg-emerald-500 shadow-[0_0_5px_rgba(16,185,129,0.8)]' : 'bg-red-500'} animate-pulse` }), _jsx("span", { className: "text-[10px] font-black text-armoyu-text-muted uppercase tracking-tighter", children: isConnected ? 'Sockete Bağlı' : 'Bağlanıyor...' })] })] }), _jsx("button", { onClick: closeChat, className: "p-2 -mr-2 text-armoyu-text-muted hover:text-red-500 hover:bg-red-500/10 transition-colors rounded-full", title: "Sohbeti Kapat", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), _jsxs("div", { className: "relative mt-4", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-500", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })] }), _jsx("input", { type: "text", placeholder: "Ki\u015Fi ara...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full bg-white/5 dark:bg-black/20 border border-black/10 dark:border-white/10 rounded-xl pl-10 pr-4 py-2.5 text-sm text-slate-900 dark:text-white placeholder-gray-500 hover:border-black/20 dark:hover:border-white/20 focus:outline-none focus:border-blue-500 transition-all" })] })] }), _jsx(ChatNotes, {}), _jsx("div", { className: "px-4 pb-4 flex gap-2 overflow-x-auto no-scrollbar shrink-0", children: [
-                    { id: 'all', label: 'Tümü' },
-                    { id: 'unread', label: 'Okunmamış' },
-                    { id: 'favorites', label: 'Favoriler' },
-                    { id: 'groups', label: 'Gruplar' }
-                ].map((filter) => (_jsx("button", { onClick: () => setActiveFilter(filter.id), className: `px-4 py-2 rounded-xl text-xs font-black transition-all whitespace-nowrap border ${activeFilter === filter.id
-                        ? 'bg-blue-500 text-white border-blue-500 shadow-md shadow-blue-500/20 scale-105'
-                        : 'bg-black/5 dark:bg-white/5 text-armoyu-text-muted border-transparent hover:bg-black/10 dark:hover:bg-white/10'}`, children: filter.label }, filter.id))) }), _jsxs("div", { className: "flex-1 overflow-y-auto no-scrollbar p-3 space-y-1.5", children: [_jsxs("div", { className: "space-y-1.5", children: [searchQuery.length > 0 && filteredActiveContacts.length > 0 && (_jsx("div", { className: "px-3 py-1 text-[10px] font-black text-armoyu-text-muted uppercase tracking-[0.2em] opacity-50", children: "Sohbet Ge\u00E7mi\u015Fi" })), filteredActiveContacts.map(c => (_jsxs("button", { onClick: () => onSelect(c.id), className: `w-full flex items-center gap-4 p-3 rounded-2xl transition-all cursor-pointer text-left ${activeId === c.id
-                                    ? 'bg-blue-500/10 dark:bg-blue-500/20 border border-blue-500/20 shadow-inner'
-                                    : 'hover:bg-black/5 dark:hover:bg-white/5 border border-transparent'}`, children: [_jsxs("div", { className: "relative shrink-0", children: [_jsx("img", { src: c.avatar, alt: c.name, className: "w-12 h-12 rounded-full object-cover border border-white/10 shadow-sm" }), c.isOnline && (_jsx("div", { className: "absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-green-500 rounded-full border-2 border-white dark:border-[#0a0a0e] shadow-sm" }))] }), _jsxs("div", { className: "flex-1 overflow-hidden", children: [_jsxs("div", { className: "flex justify-between items-center mb-1", children: [_jsx("span", { className: "font-black text-slate-900 dark:text-gray-200 text-sm truncate max-w-[130px]", children: c.name }), _jsx("span", { className: "text-xs text-gray-500 font-black", children: c.time })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: `text-xs truncate max-w-[120px] font-bold ${c.unreadCount > 0 ? 'text-slate-950 dark:text-white' : 'text-slate-500'}`, children: c.lastMessage?.content || 'Mesaj yok' }), c.unreadCount > 0 && (_jsx("span", { className: "bg-blue-500 text-white text-[10px] font-black px-1.5 py-0.5 rounded-md leading-none shadow-md animate-in zoom-in duration-300", children: c.unreadCount > 9 ? '9+' : c.unreadCount }))] })] })] }, c.id)))] }), additionalContacts.length > 0 && (_jsxs("div", { className: "space-y-1.5 mt-6 animate-in fade-in slide-in-from-top-2 duration-500", children: [_jsx("div", { className: "px-3 py-1 text-[10px] font-black text-blue-500 uppercase tracking-[0.2em]", children: "Yeni Sohbet Ba\u015Flat" }), additionalContacts.map((u) => (_jsxs("button", { onClick: () => onSelect(u.username), className: "w-full flex items-center gap-4 p-3 rounded-2xl hover:bg-white/5 border border-transparent transition-all group", children: [_jsx("div", { className: "relative shrink-0", children: _jsx("img", { src: u.avatar, alt: u.displayName, className: "w-12 h-12 rounded-full object-cover border border-white/10 shadow-sm opacity-60 group-hover:opacity-100 transition-opacity" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-black text-slate-900 dark:text-gray-200 text-sm truncate", children: u.displayName }), _jsxs("div", { className: "text-[10px] font-bold text-armoyu-text-muted uppercase tracking-tighter", children: ["@", u.username] })] }), _jsx("div", { className: "w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500 scale-0 group-hover:scale-100 transition-all duration-300", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }) })] }, u.username)))] })), searchQuery.length > 0 && filteredActiveContacts.length === 0 && additionalContacts.length === 0 && (_jsx("div", { className: "py-12 text-center", children: _jsx("div", { className: "text-armoyu-text-muted text-sm font-bold opacity-30", children: "Sonu\u00E7 bulunamad\u0131" }) }))] })] }));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChat } from '../../../context/ChatContext';
+import { useSocket } from '../../../context/SocketContext';
+import { ChatNotes } from './ChatNotes';
+import { useState } from 'react';
+import { userList } from '../../../lib/constants/seedData';
+import { useAuth } from '../../../context/AuthContext';
+export function ChatList({ contacts, activeId, onSelect }) {
+    const { user } = useAuth();
+    const { closeChat } = useChat();
+    const { isConnected } = useSocket();
+    const [searchQuery, setSearchQuery] = useState('');
+    const [activeFilter, setActiveFilter] = useState('all');
+    const filteredActiveContacts = contacts
+        .filter(c => {
+        // 1. Search Query Filter
+        const matchesSearch = c.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            (c.lastMessage?.content || '').toLowerCase().includes(searchQuery.toLowerCase());
+        if (!matchesSearch)
+            return false;
+        // 2. Category Filter
+        if (activeFilter === 'unread')
+            return c.unreadCount > 0;
+        if (activeFilter === 'favorites')
+            return c.isFavorite;
+        if (activeFilter === 'groups')
+            return c.isGroup;
+        return true; // 'all'
+    })
+        .sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0));
+    // 3. New Contact Search (Only when searching)
+    const additionalContacts = searchQuery.length >= 2
+        ? userList.filter((u) => {
+            const matchesSearch = u.displayName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                u.username.toLowerCase().includes(searchQuery.toLowerCase());
+            const isNotSelf = u.username !== user?.username;
+            const notInContacts = !contacts.some(c => c.id === u.username);
+            return matchesSearch && isNotSelf && notInContacts;
+        }).slice(0, 10)
+        : [];
+    return (_jsxs("div", { className: "w-full h-full flex flex-col bg-armoyu-bg border-r border-gray-200 dark:border-white/5", children: [_jsxs("div", { className: "p-4 md:p-5 border-b border-gray-200 dark:border-white/5", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h2", { className: "text-xl font-bold text-armoyu-text tracking-tight flex items-center gap-2", children: "Sohbetler" }), _jsxs("div", { className: "flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5", children: [_jsx("div", { className: `w-1.5 h-1.5 rounded-full ${isConnected ? 'bg-emerald-500 shadow-[0_0_5px_rgba(16,185,129,0.8)]' : 'bg-red-500'} animate-pulse` }), _jsx("span", { className: "text-[10px] font-black text-armoyu-text-muted uppercase tracking-tighter", children: isConnected ? 'Sockete Bağlı' : 'Bağlanıyor...' })] })] }), _jsx("button", { onClick: closeChat, className: "p-2 -mr-2 text-armoyu-text-muted hover:text-red-500 hover:bg-red-500/10 transition-colors rounded-full", title: "Sohbeti Kapat", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), _jsxs("div", { className: "relative mt-4", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-500", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })] }), _jsx("input", { type: "text", placeholder: "Ki\u015Fi ara...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full bg-white/5 dark:bg-black/20 border border-black/10 dark:border-white/10 rounded-xl pl-10 pr-4 py-2.5 text-sm text-slate-900 dark:text-white placeholder-gray-500 hover:border-black/20 dark:hover:border-white/20 focus:outline-none focus:border-blue-500 transition-all" })] })] }), _jsx(ChatNotes, {}), _jsx("div", { className: "px-4 pb-4 flex gap-2 overflow-x-auto no-scrollbar shrink-0", children: [
+                    { id: 'all', label: 'Tümü' },
+                    { id: 'unread', label: 'Okunmamış' },
+                    { id: 'favorites', label: 'Favoriler' },
+                    { id: 'groups', label: 'Gruplar' }
+                ].map((filter) => (_jsx("button", { onClick: () => setActiveFilter(filter.id), className: `px-4 py-2 rounded-xl text-xs font-black transition-all whitespace-nowrap border ${activeFilter === filter.id
+                        ? 'bg-blue-500 text-white border-blue-500 shadow-md shadow-blue-500/20 scale-105'
+                        : 'bg-black/5 dark:bg-white/5 text-armoyu-text-muted border-transparent hover:bg-black/10 dark:hover:bg-white/10'}`, children: filter.label }, filter.id))) }), _jsxs("div", { className: "flex-1 overflow-y-auto no-scrollbar p-3 space-y-1.5", children: [_jsxs("div", { className: "space-y-1.5", children: [searchQuery.length > 0 && filteredActiveContacts.length > 0 && (_jsx("div", { className: "px-3 py-1 text-[10px] font-black text-armoyu-text-muted uppercase tracking-[0.2em] opacity-50", children: "Sohbet Ge\u00E7mi\u015Fi" })), filteredActiveContacts.map(c => (_jsxs("button", { onClick: () => onSelect(c.id), className: `w-full flex items-center gap-4 p-3 rounded-2xl transition-all cursor-pointer text-left ${activeId === c.id
+                                    ? 'bg-blue-500/10 dark:bg-blue-500/20 border border-blue-500/20 shadow-inner'
+                                    : 'hover:bg-black/5 dark:hover:bg-white/5 border border-transparent'}`, children: [_jsxs("div", { className: "relative shrink-0", children: [_jsx("img", { src: c.avatar, alt: c.name, className: "w-12 h-12 rounded-full object-cover border border-white/10 shadow-sm" }), c.isOnline && (_jsx("div", { className: "absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-green-500 rounded-full border-2 border-white dark:border-[#0a0a0e] shadow-sm" }))] }), _jsxs("div", { className: "flex-1 overflow-hidden", children: [_jsxs("div", { className: "flex justify-between items-center mb-1", children: [_jsx("span", { className: "font-black text-slate-900 dark:text-gray-200 text-sm truncate max-w-[130px]", children: c.name }), _jsx("span", { className: "text-xs text-gray-500 font-black", children: c.time })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: `text-xs truncate max-w-[120px] font-bold ${c.unreadCount > 0 ? 'text-slate-950 dark:text-white' : 'text-slate-500'}`, children: c.lastMessage?.content || 'Mesaj yok' }), c.unreadCount > 0 && (_jsx("span", { className: "bg-blue-500 text-white text-[10px] font-black px-1.5 py-0.5 rounded-md leading-none shadow-md animate-in zoom-in duration-300", children: c.unreadCount > 9 ? '9+' : c.unreadCount }))] })] })] }, c.id)))] }), additionalContacts.length > 0 && (_jsxs("div", { className: "space-y-1.5 mt-6 animate-in fade-in slide-in-from-top-2 duration-500", children: [_jsx("div", { className: "px-3 py-1 text-[10px] font-black text-blue-500 uppercase tracking-[0.2em]", children: "Yeni Sohbet Ba\u015Flat" }), additionalContacts.map((u) => (_jsxs("button", { onClick: () => onSelect(u.username), className: "w-full flex items-center gap-4 p-3 rounded-2xl hover:bg-white/5 border border-transparent transition-all group", children: [_jsx("div", { className: "relative shrink-0", children: _jsx("img", { src: u.avatar, alt: u.displayName, className: "w-12 h-12 rounded-full object-cover border border-white/10 shadow-sm opacity-60 group-hover:opacity-100 transition-opacity" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-black text-slate-900 dark:text-gray-200 text-sm truncate", children: u.displayName }), _jsxs("div", { className: "text-[10px] font-bold text-armoyu-text-muted uppercase tracking-tighter", children: ["@", u.username] })] }), _jsx("div", { className: "w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500 scale-0 group-hover:scale-100 transition-all duration-300", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }) })] }, u.username)))] })), searchQuery.length > 0 && filteredActiveContacts.length === 0 && additionalContacts.length === 0 && (_jsx("div", { className: "py-12 text-center", children: _jsx("div", { className: "text-armoyu-text-muted text-sm font-bold opacity-30", children: "Sonu\u00E7 bulunamad\u0131" }) }))] })] }));
+}
 //# sourceMappingURL=ChatList.js.map