From a466fdcf5d5dd54393a1f65cf85bd25210ee3c94 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 15 Jul 2026 21:12:51 +0530
Subject: [PATCH] refactor(AllChatsSidebar): replace timestamp formatting with
 relative date display and adjust button styles

---
 .../layout/ui/sidebar/AllChatsSidebar.tsx     | 102 ++++++++----------
 surfsense_web/lib/format-date.ts              |  22 ++--
 2 files changed, 56 insertions(+), 68 deletions(-)

diff --git a/surfsense_web/components/layout/ui/sidebar/AllChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllChatsSidebar.tsx
index 04780bf3e..e7cdb7d5e 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllChatsSidebar.tsx
@@ -37,14 +37,13 @@ import {
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useActivateChatThread } from "@/hooks/use-activate-chat-thread";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { useLongPress } from "@/hooks/use-long-press";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { useArchiveThread, useDeleteThread, useRenameThread } from "@/hooks/use-thread-mutations";
 import { fetchThreads, searchThreads, type ThreadListItem } from "@/lib/chat/thread-persistence";
-import { formatThreadTimestamp } from "@/lib/format-date";
+import { formatRelativeDate } from "@/lib/format-date";
 import { cn } from "@/lib/utils";
 
 interface AllChatsContentProps {
@@ -288,7 +287,7 @@ function AllChatsContent({ workspaceId, className }: AllChatsContentProps) {
 						placeholder={t("search_chats") || "Search chats..."}
 						value={searchQuery}
 						onChange={(e) => setSearchQuery(e.target.value)}
-						className="h-12 border-0 bg-muted pl-10 pr-9 text-base shadow-none"
+						className="h-10 border-0 bg-muted pl-10 pr-9 text-base shadow-none"
 					/>
 					{searchQuery && (
 						<Button
@@ -360,7 +359,7 @@ function AllChatsContent({ workspaceId, className }: AllChatsContentProps) {
 												"h-auto w-full justify-start gap-2.5 overflow-hidden px-3 py-2.5 text-left text-base font-normal",
 												"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
 												"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-												thread.visibility === "SEARCH_SPACE" && "pr-16",
+												thread.visibility === "SEARCH_SPACE" ? "pr-44" : "pr-36",
 												isActive && "bg-accent text-accent-foreground",
 												isBusy && "opacity-50 pointer-events-none"
 											)}
@@ -368,35 +367,24 @@ function AllChatsContent({ workspaceId, className }: AllChatsContentProps) {
 											<span className="min-w-0 flex-1 truncate">{thread.title || "New Chat"}</span>
 										</Button>
 									) : (
-										<Tooltip delayDuration={600}>
-											<TooltipTrigger asChild>
-												<Button
-													type="button"
-													variant="ghost"
-													onClick={() => handleThreadClick(thread)}
-													onMouseEnter={() => prefetchChatThread(thread.id)}
-													onFocus={() => prefetchChatThread(thread.id)}
-													disabled={isBusy}
-													className={cn(
-														"h-auto w-full justify-start gap-2.5 overflow-hidden px-3 py-2.5 text-left text-base font-normal",
-														"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
-														"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-														thread.visibility === "SEARCH_SPACE" && "pr-16",
-														isActive && "bg-accent text-accent-foreground",
-														isBusy && "opacity-50 pointer-events-none"
-													)}
-												>
-													<span className="min-w-0 flex-1 truncate">
-														{thread.title || "New Chat"}
-													</span>
-												</Button>
-											</TooltipTrigger>
-											<TooltipContent side="bottom" align="start">
-												<p>
-													{t("updated") || "Updated"}: {formatThreadTimestamp(thread.updatedAt)}
-												</p>
-											</TooltipContent>
-										</Tooltip>
+										<Button
+											type="button"
+											variant="ghost"
+											onClick={() => handleThreadClick(thread)}
+											onMouseEnter={() => prefetchChatThread(thread.id)}
+											onFocus={() => prefetchChatThread(thread.id)}
+											disabled={isBusy}
+											className={cn(
+												"h-auto w-full justify-start gap-2.5 overflow-hidden px-3 py-2.5 text-left text-base font-normal",
+												"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
+												"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+												thread.visibility === "SEARCH_SPACE" ? "pr-44" : "pr-36",
+												isActive && "bg-accent text-accent-foreground",
+												isBusy && "opacity-50 pointer-events-none"
+											)}
+										>
+											<span className="min-w-0 flex-1 truncate">{thread.title || "New Chat"}</span>
+										</Button>
 									)}
 
 									<div
@@ -405,28 +393,30 @@ function AllChatsContent({ workspaceId, className }: AllChatsContentProps) {
 											isActive
 												? "bg-gradient-to-l from-accent from-60% to-transparent"
 												: "bg-gradient-to-l from-sidebar from-60% to-transparent group-hover/item:from-accent",
-											isMobile
-												? "opacity-0"
-												: thread.visibility === "SEARCH_SPACE" || openDropdownId === thread.id
-													? "opacity-100"
-													: "opacity-0 group-hover/item:opacity-100"
+											"opacity-100"
 										)}
 									>
-										<div className="relative flex h-7 w-14 items-center justify-end">
-											{thread.visibility === "SEARCH_SPACE" ? (
-												<Badge
-													variant="secondary"
-													className={cn(
-														"absolute right-0 h-5 shrink-0 rounded-sm border-0 bg-popover-foreground/10 px-1.5 text-[11px] text-popover-foreground transition-opacity hover:bg-popover-foreground/10",
-														!isMobile &&
-															(openDropdownId === thread.id
-																? "opacity-0"
-																: "opacity-100 group-hover/item:opacity-0")
-													)}
-												>
-													Shared
-												</Badge>
-											) : null}
+										<div className="relative flex h-7 w-40 items-center justify-end">
+											<div
+												className={cn(
+													"absolute right-1 flex items-center justify-end gap-2 transition-opacity",
+													openDropdownId === thread.id
+														? "opacity-0"
+														: "opacity-100 group-hover/item:opacity-0"
+												)}
+											>
+												{thread.visibility === "SEARCH_SPACE" ? (
+													<Badge
+														variant="secondary"
+														className="h-5 shrink-0 rounded-sm border-0 bg-popover-foreground/10 px-1.5 text-[11px] text-popover-foreground hover:bg-popover-foreground/10"
+													>
+														Shared
+													</Badge>
+												) : null}
+												<span className="whitespace-nowrap text-xs text-muted-foreground">
+													{formatRelativeDate(thread.updatedAt)}
+												</span>
+											</div>
 											<DropdownMenu
 												open={openDropdownId === thread.id}
 												onOpenChange={(isOpen) => setOpenDropdownId(isOpen ? thread.id : null)}
@@ -436,11 +426,9 @@ function AllChatsContent({ workspaceId, className }: AllChatsContentProps) {
 														variant="ghost"
 														size="icon"
 														className={cn(
-															"pointer-events-auto h-7 w-7 hover:bg-transparent",
+															"pointer-events-auto absolute right-0 h-7 w-7 hover:bg-transparent",
 															openDropdownId === thread.id && "bg-accent hover:bg-accent",
-															!isMobile &&
-																openDropdownId !== thread.id &&
-																"opacity-0 group-hover/item:opacity-100"
+															openDropdownId !== thread.id && "opacity-0 group-hover/item:opacity-100"
 														)}
 														disabled={isBusy}
 													>
diff --git a/surfsense_web/lib/format-date.ts b/surfsense_web/lib/format-date.ts
index a062b08fa..06ae77c64 100644
--- a/surfsense_web/lib/format-date.ts
+++ b/surfsense_web/lib/format-date.ts
@@ -5,29 +5,29 @@ import {
 	isThisYear,
 	isToday,
 	isTomorrow,
-	isYesterday,
 } from "date-fns";
 
 /**
  * Format a date string as a human-readable relative time
  * - < 1 min: "Just now"
- * - < 60 min: "15m ago"
- * - Today: "Today, 2:30 PM"
- * - Yesterday: "Yesterday, 2:30 PM"
- * - < 7 days: "3d ago"
+ * - < 60 min: "15 minutes ago"
+ * - < 24 hours: "21 hours ago"
+ * - < 7 days: "2 days ago"
+ * - Older this year: "Jan 15"
  * - Older: "Jan 15, 2026"
  */
 export function formatRelativeDate(dateString: string): string {
 	const date = new Date(dateString);
 	const now = new Date();
-	const minutesAgo = differenceInMinutes(now, date);
-	const daysAgo = differenceInDays(now, date);
+	const minutesAgo = Math.max(0, differenceInMinutes(now, date));
+	const hoursAgo = Math.floor(minutesAgo / 60);
+	const daysAgo = Math.floor(hoursAgo / 24);
 
 	if (minutesAgo < 1) return "Just now";
-	if (minutesAgo < 60) return `${minutesAgo}m ago`;
-	if (isToday(date)) return `Today, ${format(date, "h:mm a")}`;
-	if (isYesterday(date)) return `Yesterday, ${format(date, "h:mm a")}`;
-	if (daysAgo < 7) return `${daysAgo}d ago`;
+	if (minutesAgo < 60) return `${minutesAgo} minute${minutesAgo === 1 ? "" : "s"} ago`;
+	if (hoursAgo < 24) return `${hoursAgo} hour${hoursAgo === 1 ? "" : "s"} ago`;
+	if (daysAgo < 7) return `${daysAgo} day${daysAgo === 1 ? "" : "s"} ago`;
+	if (isThisYear(date)) return format(date, "MMM d");
 	return format(date, "MMM d, yyyy");
 }