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

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

* style(eslint): fixed

backend/models/databases/supabase/chats.py

@@ -46,6 +46,7 @@ class Chats(Repository):
             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,9 +1,10 @@
+/* eslint-disable complexity */
 "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 { cn, isToday, isWithinLast30Days, isWithinLast7Days, isYesterday } from "@/lib/utils";
 
 import { ChatsListItem } from "./components/ChatsListItem";
 import { MiniFooter } from "./components/ChatsListItem/components/MiniFooter";
@@ -16,6 +17,13 @@ export const ChatsList = (): JSX.Element => {
   const { open, setOpen } = useChatsList();
   useSelectedChatPage();
 
+ 
+  // 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 +56,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>

frontend/lib/utils.ts

@@ -4,3 +4,33 @@ import { twMerge } from "tailwind-merge";
 export const cn = (...inputs: ClassValue[]): string => {
   return twMerge(clsx(inputs));
 };
+
+
+const isToday = (date: Date): boolean => {
+  const today = new Date();
+
+  return date.toDateString() === today.toDateString();
+};
+
+const isYesterday = (date: Date): boolean => {
+  const yesterday = new Date();
+  yesterday.setDate(yesterday.getDate() - 1);
+
+  return date.toDateString() === yesterday.toDateString();
+};
+
+const isWithinLast7Days = (date: Date): boolean => {
+  const weekAgo = new Date();
+  weekAgo.setDate(weekAgo.getDate() - 7);
+
+  return date > weekAgo && !isToday(date) && !isYesterday(date);
+};
+
+const isWithinLast30Days = (date: Date): boolean => {
+  const monthAgo = new Date();
+  monthAgo.setDate(monthAgo.getDate() - 30);
+
+  return date > monthAgo && !isToday(date) && !isYesterday(date) && !isWithinLast7Days(date);
+};
+
+export { isToday, isWithinLast30Days, isWithinLast7Days, isYesterday };