feat: improve thread date formatting with relative time display (#130)

* Apply patch

* Apply patch

* Apply patch

* formatting
This commit is contained in:
Brace Sproul 2025-06-11 18:20:53 -07:00 • committed by GitHub
parent 13518b7269
commit 8ea2540032
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -1,5 +1,11 @@
"use client";
import { memo } from "react";
import {
formatDistanceToNow,
differenceInHours,
differenceInMinutes,
format,
} from "date-fns";
import { GitBranch, ArrowRight, ListTodo } from "lucide-react";
import { ThreadWithTasks, useThreads } from "@/providers/Thread";
import { cn } from "@/lib/utils";
@ -14,6 +20,27 @@ interface ThreadItemProps {
className?: string;
}
function formatRelativeDate(dateString: string): string {
const date = new Date(dateString);
const now = new Date();
const minutesAgo = differenceInMinutes(now, date);
const hoursAgo = differenceInHours(now, date);
// Within the last hour - show minutes ago
if (minutesAgo < 60) {
return `${minutesAgo} min ago`;
}
// Between 1-24 hours ago - show hours ago
if (hoursAgo < 24) {
return `${hoursAgo} hour${hoursAgo === 1 ? "" : "s"} ago`;
}
// More than 24 hours ago - show month, day format
return format(date, "MMM do");
}
export const ThreadItem = memo(function ThreadItem({
thread,
onClick,
@ -26,10 +53,7 @@ export const ThreadItem = memo(function ThreadItem({
const isSidebar = variant === "sidebar";
const isRecentlyUpdated = recentlyUpdatedThreads.has(thread.thread_id);
const displayDate = new Date(thread.created_at).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
});
const displayDate = formatRelativeDate(thread.created_at);
return (
<div