feat: implement relative date formatting for last indexed timestamps in connector views

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<DateRangeSelectorProps> = ({
 	allowFutureDates = false,
 	lastIndexedAt,
 }) => {
-	// Get the placeholder text for start date based on whether connector was previously indexed
+	const startDatePlaceholder = lastIndexedAt
-	const getStartDatePlaceholder = () => {
+		? `From ${formatRelativeDate(lastIndexedAt)}`
-		if (lastIndexedAt) {
+		: "Default (1 year)";
-			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 handleLast30Days = () => {
 		const today = new Date();
 		onStartDateChange(subDays(today, 30));
@@ -88,7 +80,7 @@ export const DateRangeSelector: FC<DateRangeSelectorProps> = ({
 								)}
 							>
 								<CalendarIcon className="mr-2 h-4 w-4" />
-								{startDate ? format(startDate, "PPP") : getStartDatePlaceholder()}
+								{startDate ? format(startDate, "PPP") : startDatePlaceholder}
 							</Button>
 						</PopoverTrigger>
 						<PopoverContent className="w-auto p-0 z-[100]" align="start">

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<ConnectorAccountsListViewProps> = ({
 	connectorType,
 	connectorTitle,
@@ -215,7 +183,7 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 											<p className="text-[10px] text-muted-foreground mt-1 whitespace-nowrap truncate">
 												{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"}
 											</p>

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");
+}
+