+1 -1

apps/web/package.json

··· 32 32 "browser-image-compression": "^2.0.2", 33 33 "class-variance-authority": "^0.7.1", 34 34 "clsx": "^2.1.1", 35 35 - "date-fns": "^4.1.0", 35 35 + "dayjs": "^1.11.13", 36 36 "family": "^0.1.3", 37 37 "hast": "^1.0.0", 38 38 "mdast-util-to-markdown": "^2.1.2",

+2 -2

apps/web/src/components/Account/Details.tsx

··· 4 4 import getAccount from "@hey/helpers/getAccount"; 5 5 import getAvatar from "@hey/helpers/getAvatar"; 6 6 import type { AccountFragment } from "@hey/indexer"; 7 7 - import { format } from "date-fns"; 7 7 + import dayjs from "dayjs"; 8 8 import type { ReactNode } from "react"; 9 9 import { useCallback, useState } from "react"; 10 10 import { Link, useNavigate } from "react-router"; ··· 183 183 /> 184 184 )} 185 185 <MetaDetails icon={<CalendarIcon className="size-4" />}> 186 186 - Joined {format(new Date(account.createdAt), "MMM yyyy")} 186 186 + Joined {dayjs(account.createdAt).format("MMM YYYY")} 187 187 </MetaDetails> 188 188 </div> 189 189 </div>

+8 -17

apps/web/src/components/Composer/Actions/CollectSettings/TimeLimitConfig.tsx

··· 1 1 import { ClockIcon } from "@heroicons/react/24/outline"; 2 2 import type { CollectActionType } from "@hey/types/hey"; 3 3 - import { addDays, differenceInCalendarDays, format } from "date-fns"; 3 3 + import dayjs from "dayjs"; 4 4 import { motion } from "motion/react"; 5 5 import ToggleWithHelper from "@/components/Shared/ToggleWithHelper"; 6 6 import { RangeSlider } from "@/components/Shared/UI"; ··· 25 25 setCollectType({ 26 26 endsAt: collectAction.endsAt 27 27 ? null 28 28 - : addDays(new Date(), 1).toISOString() 28 28 + : dayjs().add(1, "day").toISOString() 29 29 }) 30 30 } 31 31 /> ··· 43 43 <div> 44 44 Number of days -{" "} 45 45 <b> 46 46 - {format( 47 47 - new Date(collectAction.endsAt), 48 48 - "MMM d, yyyy - hh:mm:ss aa" 49 49 - )} 46 46 + {dayjs(collectAction.endsAt).format("MMM D, YYYY - hh:mm:ss A")} 50 47 </b> 51 48 </div> 52 49 <RangeSlider 53 53 - defaultValue={[ 54 54 - differenceInCalendarDays( 55 55 - new Date(collectAction.endsAt), 56 56 - new Date() 57 57 - ) 58 58 - ]} 59 59 - displayValue={differenceInCalendarDays( 60 60 - new Date(collectAction.endsAt), 61 61 - new Date() 62 62 - ).toString()} 50 50 + defaultValue={[dayjs(collectAction.endsAt).diff(dayjs(), "day")]} 51 51 + displayValue={dayjs(collectAction.endsAt) 52 52 + .diff(dayjs(), "day") 53 53 + .toString()} 63 54 max={100} 64 55 min={1} 65 56 onValueChange={(value) => 66 57 setCollectType({ 67 67 - endsAt: addDays(new Date(), Number(value[0])).toISOString() 58 58 + endsAt: dayjs().add(Number(value[0]), "day").toISOString() 68 59 }) 69 60 } 70 61 showValueInThumb

+2 -2

apps/web/src/components/Post/FullPost.tsx

··· 1 1 import { QueueListIcon } from "@heroicons/react/24/outline"; 2 2 import { isRepost } from "@hey/helpers/postHelpers"; 3 3 import type { AnyPostFragment } from "@hey/indexer"; 4 4 - import { format } from "date-fns"; 4 4 + import dayjs from "dayjs"; 5 5 import PostWarning from "@/components/Shared/Post/PostWarning"; 6 6 import { Tooltip } from "@/components/Shared/UI"; 7 7 import cn from "@/helpers/cn"; ··· 57 57 post={targetPost} 58 58 /> 59 59 <div className="my-3 flex items-center text-gray-500 text-sm dark:text-gray-200"> 60 60 - {format(new Date(timestamp), "hh:mm aa · MMM d, yyyy")} 60 60 + {dayjs(timestamp).format("hh:mm A · MMM D, YYYY")} 61 61 {targetPost.isEdited ? " · Edited" : null} 62 62 {targetPost.app?.metadata?.name 63 63 ? ` · ${targetPost.app?.metadata?.name}`

+2 -2

apps/web/src/components/Post/OpenAction/CollectAction/CollectActionBody.tsx

··· 17 17 useCollectActionQuery 18 18 } from "@hey/indexer"; 19 19 import { useCounter } from "@uidotdev/usehooks"; 20 20 - import { format } from "date-fns"; 20 20 + import dayjs from "dayjs"; 21 21 import plur from "plur"; 22 22 import { type Dispatch, type SetStateAction, useMemo, useState } from "react"; 23 23 import { Link } from "react-router"; ··· 220 220 <span>{isSaleEnded ? "Sale ended on:" : "Sale ends:"}</span> 221 221 <span className="font-bold text-gray-600"> 222 222 {isSaleEnded ? ( 223 223 - `${format(new Date(endTimestamp), "MMM d, yyyy, hh:mm aa")}` 223 223 + `${dayjs(endTimestamp).format("MMM D, YYYY, hh:mm A")}` 224 224 ) : ( 225 225 <CountdownTimer targetDate={endTimestamp} /> 226 226 )}

+4 -13

apps/web/src/components/Settings/Sessions/List.tsx

··· 6 6 useRevokeAuthenticationMutation 7 7 } from "@hey/indexer"; 8 8 import type { ApolloClientError } from "@hey/types/errors"; 9 9 - import { format } from "date-fns"; 9 9 + import dayjs from "dayjs"; 10 10 import { memo, useCallback, useState } from "react"; 11 11 import { toast } from "sonner"; 12 12 import { WindowVirtualizer } from "virtua"; ··· 120 120 ) : null} 121 121 <div> 122 122 <b>Registered -</b>{" "} 123 123 - {format( 124 124 - new Date(session.createdAt), 125 125 - "MMM d, yyyy - hh:mm:ss aa" 126 126 - )} 123 123 + {dayjs(session.createdAt).format("MMM D, YYYY - hh:mm:ss A")} 127 124 </div> 128 125 <div> 129 126 <b>Last accessed -</b>{" "} 130 130 - {format( 131 131 - new Date(session.updatedAt), 132 132 - "MMM d, yyyy - hh:mm:ss aa" 133 133 - )} 127 127 + {dayjs(session.updatedAt).format("MMM D, YYYY - hh:mm:ss A")} 134 128 </div> 135 129 <div> 136 130 <b>Expires at -</b>{" "} 137 137 - {format( 138 138 - new Date(session.expiresAt), 139 139 - "MMM d, yyyy - hh:mm:ss aa" 140 140 - )} 131 131 + {dayjs(session.expiresAt).format("MMM D, YYYY - hh:mm:ss A")} 141 132 </div> 142 133 </div> 143 134 </div>

+9 -17

apps/web/src/helpers/datetime/formatRelativeOrAbsolute.ts

··· 1 1 - import { 2 2 - differenceInDays, 3 3 - differenceInHours, 4 4 - differenceInMinutes, 5 5 - differenceInSeconds, 6 6 - format, 7 7 - isSameYear 8 8 - } from "date-fns"; 1 1 + import dayjs from "dayjs"; 9 2 10 3 const formatRelativeOrAbsolute = (date: Date | string) => { 11 11 - const now = new Date(); 12 12 - const targetDate = new Date(date); 13 13 - const diffInDays = differenceInDays(now, targetDate); 14 14 - const diffInHours = differenceInHours(now, targetDate); 15 15 - const diffInMinutes = differenceInMinutes(now, targetDate); 16 16 - const diffInSeconds = differenceInSeconds(now, targetDate); 4 4 + const now = dayjs(); 5 5 + const targetDate = dayjs(date); 6 6 + const diffInDays = now.diff(targetDate, "day"); 7 7 + const diffInHours = now.diff(targetDate, "hour"); 8 8 + const diffInMinutes = now.diff(targetDate, "minute"); 9 9 + const diffInSeconds = now.diff(targetDate, "second"); 17 10 18 11 if (diffInDays >= 1) { 19 12 // More than a day 20 13 return diffInDays < 7 21 14 ? `${diffInDays}d` 22 22 - : format( 23 23 - targetDate, 24 24 - isSameYear(now, targetDate) ? "MMM d" : "MMM d, yyyy" 15 15 + : targetDate.format( 16 16 + now.isSame(targetDate, "year") ? "MMM D" : "MMM D, YYYY" 25 17 ); 26 18 } 27 19

+8 -13

pnpm-lock.yaml

··· 101 101 dependencies: 102 102 '@apollo/client': 103 103 specifier: ^3.13.8 104 104 - version: 3.13.8(@types/react@19.1.8)(graphql-ws@6.0.5(crossws@0.3.5)(graphql@16.11.0)(ws@8.18.0(bufferutil@4.0.9)(utf-8-validate@5.0.10)))(graphql@16.11.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) 104 104 + version: 3.13.8(@types/react@19.1.8)(graphql-ws@6.0.5(crossws@0.3.5)(graphql@16.11.0)(ws@8.18.2(bufferutil@4.0.9)(utf-8-validate@5.0.10)))(graphql@16.11.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) 105 105 '@aws-sdk/client-s3': 106 106 specifier: ^3.842.0 107 107 version: 3.842.0 ··· 162 162 clsx: 163 163 specifier: ^2.1.1 164 164 version: 2.1.1 165 165 - date-fns: 166 166 - specifier: ^4.1.0 167 167 - version: 4.1.0 165 165 + dayjs: 166 166 + specifier: ^1.11.13 167 167 + version: 1.11.13 168 168 family: 169 169 specifier: ^0.1.3 170 170 version: 0.1.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(viem@2.31.7(bufferutil@4.0.9)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.75))(wagmi@2.15.6(@tanstack/query-core@5.81.5)(@tanstack/react-query@5.81.5(react@19.1.0))(@types/react@19.1.8)(bufferutil@4.0.9)(immer@10.1.1)(react@19.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.31.7(bufferutil@4.0.9)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.75))(zod@3.25.75)) ··· 3522 3522 date-fns@2.30.0: 3523 3523 resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==} 3524 3524 engines: {node: '>=0.11'} 3525 3525 - 3526 3526 - date-fns@4.1.0: 3527 3527 - resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==} 3528 3525 3529 3526 dayjs@1.11.13: 3530 3527 resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==} ··· 6421 6418 '@jridgewell/gen-mapping': 0.3.12 6422 6419 '@jridgewell/trace-mapping': 0.3.29 6423 6420 6424 6424 - '@apollo/client@3.13.8(@types/react@19.1.8)(graphql-ws@6.0.5(crossws@0.3.5)(graphql@16.11.0)(ws@8.18.0(bufferutil@4.0.9)(utf-8-validate@5.0.10)))(graphql@16.11.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)': 6421 6421 + '@apollo/client@3.13.8(@types/react@19.1.8)(graphql-ws@6.0.5(crossws@0.3.5)(graphql@16.11.0)(ws@8.18.2(bufferutil@4.0.9)(utf-8-validate@5.0.10)))(graphql@16.11.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)': 6425 6422 dependencies: 6426 6423 '@graphql-typed-document-node/core': 3.2.0(graphql@16.11.0) 6427 6424 '@wry/caches': 1.0.1 ··· 6438 6435 tslib: 2.8.1 6439 6436 zen-observable-ts: 1.2.5 6440 6437 optionalDependencies: 6441 6441 - graphql-ws: 6.0.5(crossws@0.3.5)(graphql@16.11.0)(ws@8.18.0(bufferutil@4.0.9)(utf-8-validate@5.0.10)) 6438 6438 + graphql-ws: 6.0.5(crossws@0.3.5)(graphql@16.11.0)(ws@8.18.2(bufferutil@4.0.9)(utf-8-validate@5.0.10)) 6442 6439 react: 19.1.0 6443 6440 react-dom: 19.1.0(react@19.1.0) 6444 6441 transitivePeerDependencies: ··· 11308 11305 dependencies: 11309 11306 '@babel/runtime': 7.27.6 11310 11307 11311 11311 - date-fns@4.1.0: {} 11312 11312 - 11313 11308 dayjs@1.11.13: {} 11314 11309 11315 11310 debounce@1.2.1: {} ··· 11770 11765 graphql: 16.11.0 11771 11766 tslib: 2.8.1 11772 11767 11773 11773 - graphql-ws@6.0.5(crossws@0.3.5)(graphql@16.11.0)(ws@8.18.0(bufferutil@4.0.9)(utf-8-validate@5.0.10)): 11768 11768 + graphql-ws@6.0.5(crossws@0.3.5)(graphql@16.11.0)(ws@8.18.2(bufferutil@4.0.9)(utf-8-validate@5.0.10)): 11774 11769 dependencies: 11775 11770 graphql: 16.11.0 11776 11771 optionalDependencies: 11777 11772 crossws: 0.3.5 11778 11778 - ws: 8.18.0(bufferutil@4.0.9)(utf-8-validate@5.0.10) 11773 11773 + ws: 8.18.2(bufferutil@4.0.9)(utf-8-validate@5.0.10) 11779 11774 optional: true 11780 11775 11781 11776 graphql-ws@6.0.5(crossws@0.3.5)(graphql@16.11.0)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10)):