fe: danh sach cuoc tro chuyen theo nhom, ca nhan

frontend/src/App.tsx

@@ -4,8 +4,16 @@ import ChatAppPage from "./pages/ChatAppPage";
 import { Toaster } from "sonner";
 import SignUpPage from "./pages/SignUpPage";
 import ProtectedRoute from "./components/auth/ProtectedRoute";
+import { useThemeStore } from "./stores/useThemeStore";
+import { useEffect } from "react";
 
 function App() {
+
+  const { isDark, setTheme } = useThemeStore();
+  useEffect(() => {
+    setTheme(isDark)
+  }, [isDark])
+
   return (
     <>
       <Toaster richColors />

frontend/src/components/auth/Logout.tsx

@@ -1,5 +1,6 @@
 import { Button } from "../ui/button";
 import { useAuthStore } from "@/stores/useAuthStore";
+import { LogOut } from "lucide-react";
 import { useNavigate } from "react-router";
 
 const Logout = () => {
@@ -14,7 +15,9 @@ const Logout = () => {
     }
   };
 
-  return <Button onClick={handleLogout}>Logout</Button>;
+  return <Button variant="completeGhost" onClick={handleLogout}>
+    <LogOut className="text-destructive" /> Logout
+  </Button>;
 };
 
 export default Logout;

frontend/src/components/chat/modals/AddFriendModal.tsx

@@ -0,0 +1,7 @@
+const AddFriendModal = () => {
+  return (
+    <div>AddFriendModal</div>
+  )
+}
+
+export default AddFriendModal

frontend/src/components/chat/modals/CreateNewChat.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const CreateNewChat = () => {
+  return (
+    <div>CreateNewChat</div>
+  )
+}
+
+export default CreateNewChat

frontend/src/components/chat/modals/NewGroupChatModal.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const NewGroupChatModal = () => {
+  return (
+    <div>NewGroupChatModal</div>
+  )
+}
+
+export default NewGroupChatModal

frontend/src/components/chat/shared/ChatCard.tsx

@@ -0,0 +1,40 @@
+import { Card } from "@/components/ui/card";
+import { formatOnlineTime, cn } from "@/lib/utils";
+import { MoreHorizontal } from "lucide-react";
+
+interface ChatCardProps {
+    convoId: string,
+    name: string,
+    timestamp?: Date,
+    isActive: boolean,
+    onSelect: (id: string) => void,
+    unreadCounts?: number,
+    leftSection: React.ReactNode,
+    subtitle: React.ReactNode
+}
+const ChatCard = ({ convoId, name, timestamp, isActive, onSelect, unreadCounts, leftSection, subtitle }: ChatCardProps) => {
+    return (
+        <Card key={convoId}
+            className={cn("border-none p-3 cursor-pointer transaction-smooth glass hover:bg-muted/30", isActive && "ring-2 ring-primary/50 bg-gradient-to-tr from-primary-glow/10 to-primary-foreground")}
+            onClick={() => onSelect(convoId)}
+        >
+            <div className="flex items-center gap-3">
+                <div className="relative">{leftSection}</div>
+                <div className="flex-1 min-w-0 ">
+                    <div className="flex items-center justify-between mb-1">
+                        <h3 className={cn("font-semibold text-sm truncate", unreadCounts && unreadCounts > 0 && "text-foreground")}>
+                            {name}
+                        </h3>
+                        <span className="text-xs text-muted-foreground">{timestamp ? formatOnlineTime(timestamp) : ""}</span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-1 flex-1 min-w-0">{subtitle}</div>
+                        <MoreHorizontal className="size-4 text-muted-foreground opacity-0 group-hover:opacity-100 hover:size-5 transition-smooth"/>
+                    </div>
+                </div>
+            </div>
+        </Card>
+    )
+}
+
+export default ChatCard

frontend/src/components/chat/shared/StatusBadge.tsx

@@ -0,0 +1,14 @@
+import { cn } from "@/lib/utils"
+
+const StatusBadge = ({status} : {status: "online" | "offline"}) => {
+  return (
+    <div className={cn("absolute -bottom-0.5 -right-0.5 size-4 rounded-full border-2 border-card",
+        status === "online" && "status-online",
+        status === "offline" && "status-offline"
+    )}>
+
+    </div>
+  )
+}
+
+export default StatusBadge

frontend/src/components/chat/shared/UnreadCountBadge.tsx

@@ -0,0 +1,13 @@
+import { Badge } from "../../ui/badge"
+
+const UnreadCountBadge = ({unreadCount} : {unreadCount : number}) => {
+  return (
+    <div className="pulse-ring absolute z-20 -top-1 -right-1">
+        <Badge className="size-5 text-xs bg-gradient-chat border border-background">
+            {unreadCount > 9 ? "9+" : unreadCount}
+        </Badge>
+    </div>
+  )
+}
+
+export default UnreadCountBadge

frontend/src/components/chat/shared/UserAvatar.tsx

@@ -0,0 +1,30 @@
+import { cn } from "@/lib/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar";
+
+interface IUserAvatarProps {
+    type: "sidebar" | "chat" | "profile";
+    name: string;
+    avatarUrl?: string;
+    className?: string
+}
+const UserAvatar = ({ type, name, avatarUrl, className }: IUserAvatarProps) => {
+    const bgColor = !avatarUrl ? "bg-blue-500" : "";
+    if (!name) {
+        name = "Chatify";
+    }
+
+    return (
+        <Avatar className={cn(className ?? "", 
+            type === "sidebar" && "size-12 text-base",
+            type === "chat" && "size-8 text-sm",
+            type === "profile" && "size-24 text-3xl shadow-md"
+         )}>
+            <AvatarImage src={avatarUrl} alt={name} />
+            <AvatarFallback className={`${bgColor} text-white font-semibold`}>
+                {name.charAt(0)}
+            </AvatarFallback>
+        </Avatar>
+    )
+}
+
+export default UserAvatar

frontend/src/components/chat/sidebar/DirectMesageList.tsx

@@ -0,0 +1,25 @@
+import { useChatStore } from '@/stores/useChatStore'
+import DirectMessageCard from './DirectMessageCard';
+
+const DirectMesageList = () => {
+  const { conversations } = useChatStore();
+
+  if (!conversations) return;
+
+  const directConversations = conversations.filter((convo) => convo.type === "direct");
+
+  return (
+    <div className='flex-1 overflow-y-auto p-2 space-y-2'>
+      {
+        directConversations.map((convo) => (
+          <DirectMessageCard
+            key={convo._id}
+            convo={convo}
+          />
+        ))
+      }
+    </div>
+  )
+}
+
+export default DirectMesageList

frontend/src/components/chat/sidebar/DirectMessageCard.tsx

@@ -0,0 +1,55 @@
+import type { Conversation } from "@/types/chat"
+import ChatCard from "../shared/ChatCard"
+import { useAuthStore } from "@/stores/useAuthStore"
+import { useChatStore } from "@/stores/useChatStore";
+import { cn } from "@/lib/utils";
+import UserAvatar from "../shared/UserAvatar";
+import StatusBadge from "../shared/StatusBadge";
+import UnreadCountBadge from "../shared/UnreadCountBadge";
+
+const DirectMessageCard = ({convo} : {convo:Conversation}) => {
+    const {user} = useAuthStore();
+    const {activeConversationId ,  setActiveConversation , messages} = useChatStore();
+
+    if(!user) return null;
+
+    const otherUser = convo.participants.find((p) => p._id !== user._id);
+    if(!otherUser) return null;
+
+    const unreadCounts = convo.unreadCounts[user._id];
+    const lastMessage  = convo.lastMessage?.content ?? "";
+
+    const handleSelectConversation = async (id:string) => {
+        setActiveConversation(id);
+        if(!messages[id]){
+            //fetch message
+        }
+    }
+  return (
+    <ChatCard
+        convoId={convo._id}
+        name={otherUser.displayName ?? ""}
+        timestamp={
+            convo.lastMessage?.createdAt ? new Date(convo.lastMessage?.createdAt) : undefined
+        }
+        isActive={activeConversationId === convo._id}
+        onSelect={handleSelectConversation}
+        unreadCounts={unreadCounts}
+        leftSection={
+            <>
+                <UserAvatar type="sidebar" name={otherUser.displayName ?? ""} avatarUrl={otherUser.avatarUrl ?? undefined} />
+                {/* Soket io */}
+                <StatusBadge status="offline"/>
+                {unreadCounts > 0 && <UnreadCountBadge unreadCount={unreadCounts}/>}
+            </>
+        }
+        subtitle={
+            <p className={cn("text-sm truncate", unreadCounts > 0 ? "font-medium text-foreground" : "text-muted=foreground")}>
+                {lastMessage} 
+            </p>
+        }
+    />
+  )
+}
+
+export default DirectMessageCard

frontend/src/components/chat/sidebar/GropuMessageCard.tsx

@@ -0,0 +1,46 @@
+import { useAuthStore } from '@/stores/useAuthStore'
+import { useChatStore } from '@/stores/useChatStore';
+import type { Conversation } from '@/types/chat'
+import ChatCard from '../shared/ChatCard';
+import UnreadCountBadge from '../shared/UnreadCountBadge';
+import GroupChatAvatar from './GroupChatAvatar';
+
+const GropuMessageCard = ({ convo }: { convo: Conversation }) => {
+    const { user } = useAuthStore();
+    const { activeConversationId, setActiveConversation, messages } = useChatStore();
+
+    if (!user) return null;
+
+    const unreadCounts = convo.unreadCounts[user._id];
+    const name = convo.group?.name ?? "";
+
+    const handleSelectConversation = async (id: string) => {
+        setActiveConversation(id);
+        if (!messages[id]) {
+            //fetch message
+        }
+    }
+    return (
+        <ChatCard
+            convoId={convo._id}
+            name={name}
+            timestamp={
+                convo.lastMessage?.createdAt ? new Date(convo.lastMessage.createdAt) : undefined
+            }
+            isActive={activeConversationId === convo._id}
+            onSelect={handleSelectConversation}
+            unreadCounts={unreadCounts}
+            leftSection={
+               <>
+                {unreadCounts>0 && <UnreadCountBadge unreadCount={unreadCounts} />}
+                <GroupChatAvatar participants={convo.participants } type="chat" />
+               </>
+            }
+            subtitle={
+                <p className='text-sm truncate text-muted-foreground'>{convo.participants.length} thành viên</p>
+            }
+        />
+    )
+}
+
+export default GropuMessageCard

frontend/src/components/chat/sidebar/GroupChatAvatar.tsx

@@ -0,0 +1,40 @@
+import type { Participant } from "@/types/chat"
+import UserAvatar from "../shared/UserAvatar";
+import { Ellipse } from "lucide-react";
+
+interface GroupChatAvatarProps {
+    participants: Participant[];
+    type: "chat" | "sidebar";
+
+}
+
+const GroupChatAvatar = ({ participants, type }: GroupChatAvatarProps) => {
+    const avatars = [];
+    const limit = Math.min(participants.length, 4);
+
+    for (let i = 0; i < limit; i++) {
+        const member = participants[i];
+        avatars.push(
+            <UserAvatar
+                key={1}
+                type={type}
+                name={member.displayName}
+                avatarUrl={member.avatarUrl ?? undefined}
+            />
+        );
+    }
+    return (
+        <div className="relative flex -space-x-2  *:data-[slot=avatar]:ring-background *data-[slot=avatar]:ring-2 ">
+            {avatars}
+            {/* Neu thanh vien trong nhom nhieu hon 4 thi hien thi dau 3 cham */}
+            {participants.length > limit && (
+                <div className="flex items-center z-10 justify-center size-8 rounded-full bg-muted ring-2 ring-background text-muted-foreground">
+                <Ellipse className="size-4" />
+            </div>
+            )}
+
+        </div>
+    )
+}
+
+export default GroupChatAvatar

frontend/src/components/chat/sidebar/GroupChatList.tsx

@@ -0,0 +1,25 @@
+import { useChatStore } from '@/stores/useChatStore'
+import GropuMessageCard from './GropuMessageCard';
+
+const GroupChatList = () => {
+  const { conversations } = useChatStore();
+
+  if (!conversations) return;
+
+  const groupConversations = conversations.filter((convo) => convo.type === "group");
+
+  return (
+    <div className='flex-1 overflow-y-auto p-2 space-y-2'>
+      {
+        groupConversations.map((convo) => (
+          <GropuMessageCard
+            key={convo._id}
+            convo={convo}
+          />
+        ))
+      }
+    </div>
+  )
+}
+
+export default GroupChatList