diff --git a/surfsense_web/components/assistant-ui/connector-popup/components/date-range-selector.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/date-range-selector.tsx index 7490aa959..9d7044bb4 100644 --- a/surfsense_web/components/assistant-ui/connector-popup/components/date-range-selector.tsx +++ b/surfsense_web/components/assistant-ui/connector-popup/components/date-range-selector.tsx @@ -7,6 +7,7 @@ import { Button } from "@/components/ui/button"; import { Calendar } from "@/components/ui/calendar"; import { Label } from "@/components/ui/label"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; +import { formatRelativeDate } from "@/lib/format-date"; import { cn } from "@/lib/utils"; interface DateRangeSelectorProps { @@ -26,19 +27,10 @@ export const DateRangeSelector: FC = ({ allowFutureDates = false, lastIndexedAt, }) => { - // Get the placeholder text for start date based on whether connector was previously indexed - const getStartDatePlaceholder = () => { - if (lastIndexedAt) { - const date = new Date(lastIndexedAt); - const currentYear = new Date().getFullYear(); - const indexedYear = date.getFullYear(); - // Show year only if different from current year - const formatStr = indexedYear === currentYear ? "MMM d, HH:mm" : "MMM d, yyyy HH:mm"; - const formattedDate = format(date, formatStr); - return `Since (${formattedDate})`; - } - return "Default (1 year ago)"; - }; + const startDatePlaceholder = lastIndexedAt + ? `From ${formatRelativeDate(lastIndexedAt)}` + : "Default (1 year)"; + const handleLast30Days = () => { const today = new Date(); onStartDateChange(subDays(today, 30)); @@ -88,7 +80,7 @@ export const DateRangeSelector: FC = ({ )} > - {startDate ? format(startDate, "PPP") : getStartDatePlaceholder()} + {startDate ? format(startDate, "PPP") : startDatePlaceholder} diff --git a/surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx index bf151ab43..2f0e0eb5e 100644 --- a/surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx +++ b/surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx @@ -1,6 +1,5 @@ "use client"; -import { differenceInDays, differenceInMinutes, format, isToday, isYesterday } from "date-fns"; import { ArrowLeft, Plus, Server } from "lucide-react"; import type { FC } from "react"; import { Button } from "@/components/ui/button"; @@ -8,6 +7,7 @@ import { Spinner } from "@/components/ui/spinner"; import { EnumConnectorName } from "@/contracts/enums/connector"; import { getConnectorIcon } from "@/contracts/enums/connectorIcons"; import type { SearchSourceConnector } from "@/contracts/types/connector.types"; +import { formatRelativeDate } from "@/lib/format-date"; import { cn } from "@/lib/utils"; import { useConnectorStatus } from "../hooks/use-connector-status"; import { getConnectorDisplayName } from "../tabs/all-connectors-tab"; @@ -32,38 +32,6 @@ function isIndexableConnector(connectorType: string): boolean { return !nonIndexableTypes.includes(connectorType); } -/** - * Format last indexed date with contextual messages - */ -function formatLastIndexedDate(dateString: string): string { - const date = new Date(dateString); - const now = new Date(); - const minutesAgo = differenceInMinutes(now, date); - const daysAgo = differenceInDays(now, date); - - if (minutesAgo < 1) { - return "Just now"; - } - - if (minutesAgo < 60) { - return `${minutesAgo} ${minutesAgo === 1 ? "minute" : "minutes"} ago`; - } - - if (isToday(date)) { - return `Today at ${format(date, "h:mm a")}`; - } - - if (isYesterday(date)) { - return `Yesterday at ${format(date, "h:mm a")}`; - } - - if (daysAgo < 7) { - return `${daysAgo} ${daysAgo === 1 ? "day" : "days"} ago`; - } - - return format(date, "MMM d, yyyy"); -} - export const ConnectorAccountsListView: FC = ({ connectorType, connectorTitle, @@ -215,7 +183,7 @@ export const ConnectorAccountsListView: FC = ({

{isIndexableConnector(connector.connector_type) ? connector.last_indexed_at - ? `Last indexed: ${formatLastIndexedDate(connector.last_indexed_at)}` + ? `Last indexed: ${formatRelativeDate(connector.last_indexed_at)}` : "Never indexed" : "Active"}

diff --git a/surfsense_web/lib/format-date.ts b/surfsense_web/lib/format-date.ts new file mode 100644 index 000000000..c7d8ca85e --- /dev/null +++ b/surfsense_web/lib/format-date.ts @@ -0,0 +1,25 @@ +import { differenceInDays, differenceInMinutes, format, isToday, 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" + * - 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); + + 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`; + return format(date, "MMM d, yyyy"); +} +