aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--apps/mobile/components/highlights/HighlightCard.tsx7
-rw-r--r--apps/mobile/package.json1
-rw-r--r--apps/web/components/dashboard/bookmarks/BookmarkFormattedCreatedAt.tsx10
-rw-r--r--apps/web/components/dashboard/highlights/AllHighlights.tsx4
-rw-r--r--apps/web/lib/hooks/relative-time.ts7
-rw-r--r--apps/web/package.json1
-rw-r--r--pnpm-lock.yaml11
7 files changed, 13 insertions, 28 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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0cc750d9..04361d9c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -356,6 +356,9 @@ importers:
clsx:
specifier: ^2.1.0
version: 2.1.0
+ date-fns:
+ specifier: ^3.6.0
+ version: 3.6.0
expo:
specifier: ~54.0.31
version: 54.0.31(@babel/core@7.26.0)(@expo/metro-runtime@6.1.2)(expo-router@6.0.21)(react-native-webview@13.15.0(react-native@0.81.5(@babel/core@7.26.0)(@types/react@19.2.5)(react@19.2.3))(react@19.2.3))(react-native@0.81.5(@babel/core@7.26.0)(@types/react@19.2.5)(react@19.2.3))(react@19.2.3)
@@ -651,9 +654,6 @@ importers:
date-fns:
specifier: ^3.6.0
version: 3.6.0
- dayjs:
- specifier: ^1.11.10
- version: 1.11.10
drizzle-orm:
specifier: ^0.44.2
version: 0.44.2(@opentelemetry/api@1.9.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@11.3.0)(gel@2.1.0)(kysely@0.28.5)
@@ -7941,9 +7941,6 @@ packages:
date-fns@4.1.0:
resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
- dayjs@1.11.10:
- resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}
-
de-indent@1.0.2:
resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
@@ -24348,8 +24345,6 @@ snapshots:
date-fns@4.1.0: {}
- dayjs@1.11.10: {}
-
de-indent@1.0.2: {}
debounce@1.2.1: {}