chore: replace dayjs with data-fns

6 files changed, 10 insertions, 20 deletions

diff --git a/apps/mobile/components/highlights/HighlightCard.tsx b/apps/mobile/components/highlights/HighlightCard.tsx
index fd5ff752..31b3c829 100644
--- a/apps/mobile/components/highlights/HighlightCard.tsx
+++ b/apps/mobile/components/highlights/HighlightCard.tsx
@@ -3,8 +3,7 @@ import * as Haptics from "expo-haptics";
 import { useRouter } from "expo-router";
 import { Text } from "@/components/ui/Text";
 import { useQuery } from "@tanstack/react-query";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
+import { formatDistanceToNow } from "date-fns";
 import { ExternalLink, Trash2 } from "lucide-react-native";
 
 import type { ZHighlight } from "@karakeep/shared/types/highlights";
@@ -13,8 +12,6 @@ import { useTRPC } from "@karakeep/shared-react/trpc";
 
 import { useToast } from "../ui/Toast";
 
-dayjs.extend(relativeTime);
-
 // Color map for highlights (mapped to Tailwind CSS classes used in NativeWind)
 const HIGHLIGHT_COLOR_MAP = {
   red: "#fecaca", // bg-red-200
@@ -108,7 +105,7 @@ export default function HighlightCard({
         <View className="flex flex-row items-center justify-between">
           <View className="flex flex-row items-center gap-2">
             <Text className="text-xs text-muted-foreground">
-              {dayjs(highlight.createdAt).fromNow()}
+              {formatDistanceToNow(highlight.createdAt, { addSuffix: true })}
             </Text>
             {bookmark && (
               <>
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index 47ef533d..7f85a2f7 100644
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -29,6 +29,7 @@
     "@tanstack/react-query": "5.90.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "date-fns": "^3.6.0",
     "expo": "~54.0.31",
     "expo-build-properties": "~1.0.10",
     "expo-checkbox": "~5.0.8",
diff --git a/apps/web/components/dashboard/bookmarks/BookmarkFormattedCreatedAt.tsx b/apps/web/components/dashboard/bookmarks/BookmarkFormattedCreatedAt.tsx
index a3e5d3b3..7c254336 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkFormattedCreatedAt.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkFormattedCreatedAt.tsx
@@ -1,8 +1,8 @@
-import dayjs from "dayjs";
+import { format, isAfter, subYears } from "date-fns";
 
 export default function BookmarkFormattedCreatedAt(prop: { createdAt: Date }) {
-  const createdAt = dayjs(prop.createdAt);
-  const oneYearAgo = dayjs().subtract(1, "year");
-  const formatString = createdAt.isAfter(oneYearAgo) ? "MMM D" : "MMM D, YYYY";
-  return createdAt.format(formatString);
+  const createdAt = prop.createdAt;
+  const oneYearAgo = subYears(new Date(), 1);
+  const formatString = isAfter(createdAt, oneYearAgo) ? "MMM d" : "MMM d, yyyy";
+  return format(createdAt, formatString);
 }
diff --git a/apps/web/components/dashboard/highlights/AllHighlights.tsx b/apps/web/components/dashboard/highlights/AllHighlights.tsx
index 0b90714a..c7e809ec 100644
--- a/apps/web/components/dashboard/highlights/AllHighlights.tsx
+++ b/apps/web/components/dashboard/highlights/AllHighlights.tsx
@@ -7,8 +7,6 @@ import { Input } from "@/components/ui/input";
 import useRelativeTime from "@/lib/hooks/relative-time";
 import { Separator } from "@radix-ui/react-dropdown-menu";
 import { useInfiniteQuery } from "@tanstack/react-query";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
 import { Dot, LinkIcon, Search, X } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { useInView } from "react-intersection-observer";
@@ -22,8 +20,6 @@ import {
 
 import HighlightCard from "./HighlightCard";
 
-dayjs.extend(relativeTime);
-
 function Highlight({ highlight }: { highlight: ZHighlight }) {
   const { fromNow, localCreatedAt } = useRelativeTime(highlight.createdAt);
   const { t } = useTranslation();
diff --git a/apps/web/lib/hooks/relative-time.ts b/apps/web/lib/hooks/relative-time.ts
index f7c38497..8fefa233 100644
--- a/apps/web/lib/hooks/relative-time.ts
+++ b/apps/web/lib/hooks/relative-time.ts
@@ -1,8 +1,5 @@
 import { useEffect, useState } from "react";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-
-dayjs.extend(relativeTime);
+import { formatDistanceToNow } from "date-fns";
 
 export default function useRelativeTime(date: Date) {
   const [state, setState] = useState({
@@ -13,7 +10,7 @@ export default function useRelativeTime(date: Date) {
   // This is to avoid hydration errors when server and clients are in different timezones
   useEffect(() => {
     setState({
-      fromNow: dayjs(date).fromNow(),
+      fromNow: formatDistanceToNow(date, { addSuffix: true }),
       localCreatedAt: date.toLocaleString(),
     });
   }, [date]);
diff --git a/apps/web/package.json b/apps/web/package.json
index affbb48f..c89a5bca 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -64,7 +64,6 @@
     "cmdk": "^1.1.1",
     "csv-parse": "^5.5.6",
     "date-fns": "^3.6.0",
-    "dayjs": "^1.11.10",
     "drizzle-orm": "^0.44.2",
     "fastest-levenshtein": "^1.0.16",
     "i18next": "^23.16.5",