From 6ee619337cfbb71a8209781b9dbd87c5ff73a9f2 Mon Sep 17 00:00:00 2001
From: aafaris <77536240+aafaris@users.noreply.github.com>
Date: Tue, 22 Oct 2024 09:19:02 +0800
Subject: [PATCH] Update sidebar-item to include message count and datetime
 (#65)

---
 frontend/components/sidebar/sidebar-item.tsx | 21 +++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/components/sidebar/sidebar-item.tsx b/frontend/components/sidebar/sidebar-item.tsx
index 1a2fafb8..1cdf9295 100644
--- a/frontend/components/sidebar/sidebar-item.tsx
+++ b/frontend/components/sidebar/sidebar-item.tsx
@@ -35,7 +35,7 @@ export function SidebarItem({ search: search, children }: SidebarItemProps) {
     };
 
     return (
-        <div className="relative h-8">
+        <div className="relative h-9">
             <button
                 onClick={handleClick}
                 className={cn(
@@ -44,8 +44,23 @@ export function SidebarItem({ search: search, children }: SidebarItemProps) {
                     isActive && 'bg-zinc-200 pr-16 font-semibold dark:bg-zinc-800',
                 )}
             >
-                <div className="relative flex w-full items-center justify-start overflow-hidden" title={search.title}>
-                    <span className="truncate text-left">{search.title}</span>
+                <div className="relative flex w-full items-center justify-start" title={search.title}>
+                    <div className="flex flex-col w-full overflow-hidden">
+                        <span className="truncate text-left">{search.title}</span>
+                        <div className="flex flex-row justify-between text-xs font-normal">
+                            <span>
+                                {search.messages.length} {search.messages.length > 1 ? 'messages' : 'message'}
+                            </span>
+                            <span>
+                                {`${search.createdAt.toLocaleDateString('en-US')}, ${search.createdAt.toLocaleTimeString('en-US', {
+                                    hour: '2-digit',
+                                    minute: '2-digit',
+                                    second: '2-digit',
+                                    hour12: true,
+                                })}`}
+                            </span>
+                        </div>
+                    </div>
                 </div>
             </button>
             {isActive && <div className="absolute right-2 top-1">{children}</div>}