mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-07-26 23:51:14 +02:00
refactor(AllChatsSidebar): replace timestamp formatting with relative date display and adjust button styles
This commit is contained in:
Anish Sarkar
parent
7889babb8e
commit
a466fdcf5d
2 changed files with 56 additions and 68 deletions
|
|
@ -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}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue