fix(chats): now in order and with a little bonus ;)

backend/models/databases/supabase/chats.py

@@ -46,6 +46,7 @@ def get_user_chats(self, user_id: str):
             self.db.from_("chats")
             .select("chat_id,user_id,creation_time,chat_name")
             .filter("user_id", "eq", user_id)
+            .order("creation_time", desc=False)
             .execute()
         )
         return response

frontend/app/chat/components/ChatsList/components/ChatsListItem/ChatsListItem.tsx

@@ -25,7 +25,7 @@ export const ChatsListItem = ({ chat }: ChatsListItemProps): JSX.Element => {
   return (
     <div
       className={cn(
-        "w-full border-b border-black/10 dark:border-white/25 last:border-none relative group flex overflow-x-hidden hover:bg-gray-100 dark:hover:bg-gray-800",
+        "w-full relative group flex overflow-x-hidden hover:bg-gray-100 dark:hover:bg-gray-800",
         selected
           ? "bg-gray-100 dark:bg-gray-800 text-primary dark:text-white"
           : ""

frontend/app/chat/components/ChatsList/index.tsx

@@ -1,21 +1,58 @@
+/* eslint-disable  */
 "use client";
 import { motion, MotionConfig } from "framer-motion";
 import { MdChevronRight } from "react-icons/md";
 
 import { useChatsContext } from "@/lib/context/ChatsProvider/hooks/useChatsContext";
 import { cn } from "@/lib/utils";
 
+import { useSelectedChatPage } from "../../[chatId]/hooks/useSelectedChatPage";
 import { ChatsListItem } from "./components/ChatsListItem";
 import { MiniFooter } from "./components/ChatsListItem/components/MiniFooter";
 import { NewChatButton } from "./components/NewChatButton";
 import { useChatsList } from "./hooks/useChatsList";
-import { useSelectedChatPage } from "../../[chatId]/hooks/useSelectedChatPage";
 
 export const ChatsList = (): JSX.Element => {
   const { allChats } = useChatsContext();
   const { open, setOpen } = useChatsList();
   useSelectedChatPage();
 
+  // Utility functions for chat categorization
+  const isToday = (date: Date) => {
+    const today = new Date();
+
+    return date.toDateString() === today.toDateString();
+  };
+
+  const isYesterday = (date: Date) => {
+    const yesterday = new Date();
+    yesterday.setDate(yesterday.getDate() - 1);
+
+    return date.toDateString() === yesterday.toDateString();
+  };
+
+  const isWithinLast7Days = (date: Date) => {
+    const today = new Date();
+    const weekAgo = new Date();
+    weekAgo.setDate(weekAgo.getDate() - 7);
+
+    return date > weekAgo && !isToday(date) && !isYesterday(date);
+  };
+
+  const isWithinLast30Days = (date: Date) => {
+    const today = new Date();
+    const monthAgo = new Date();
+    monthAgo.setDate(monthAgo.getDate() - 30);
+
+    return date > monthAgo && !isToday(date) && !isYesterday(date) && !isWithinLast7Days(date);
+  };
+
+  // Filtering chats into different groups
+  const todayChats = allChats.filter(chat => isToday(new Date(chat.creation_time)));
+  const yesterdayChats = allChats.filter(chat => isYesterday(new Date(chat.creation_time)));
+  const last7DaysChats = allChats.filter(chat => isWithinLast7Days(new Date(chat.creation_time)));
+  const last30DaysChats = allChats.filter(chat => isWithinLast30Days(new Date(chat.creation_time)));
+
   return (
     <MotionConfig transition={{ mass: 1, damping: 10 }}>
       <motion.div
@@ -48,9 +85,26 @@ export const ChatsList = (): JSX.Element => {
               data-testid="chats-list-items"
               className="flex-1 overflow-auto scrollbar h-full"
             >
-              {allChats.map((chat) => (
+              {todayChats.length > 0 && <div className="bg-gray-100 text-black rounded-md px-3 py-1 mt-2">Today</div>}
+              {todayChats.map((chat) => (
                 <ChatsListItem key={chat.chat_id} chat={chat} />
               ))}
+
+              {yesterdayChats.length > 0 && <div className="bg-gray-100 text-black rounded-md px-3 py-1 mt-2">Yesterday</div>}
+              {yesterdayChats.map((chat) => (
+                <ChatsListItem key={chat.chat_id} chat={chat} />
+              ))}
+
+              {last7DaysChats.length > 0 && <div className="bg-gray-100 text-black rounded-md px-3 py-1 mt-2">Previous 7 Days</div>}
+              {last7DaysChats.map((chat) => (
+                <ChatsListItem key={chat.chat_id} chat={chat} />
+              ))}
+
+              {last30DaysChats.length > 0 && <div className="bg-gray-100 text-black rounded-md px-3 py-1 mt-2">Previous 30 Days</div>}
+              {last30DaysChats.map((chat) => (
+                <ChatsListItem key={chat.chat_id} chat={chat} />
+              ))}
+
             </div>
             <MiniFooter />
           </div>