refactor: use RelativeTime instead of TimeAgo

dev/test-studio/plugins/locale-no-nb/bundles/studio.ts

@@ -111,7 +111,7 @@ const studioResources: Record<StudioLocaleResourceKeys, string> = {
   'inputs.reference.action.open-in-new-tab': 'Åpne i ny fane',
 
   /** Text for tooltip showing when a document was published, using relative time (eg "how long ago was it published?") */
-  'inputs.reference.preview.published-at-time': 'Publisert <TimeAgo/>',
+  'inputs.reference.preview.published-at-time': 'Publisert <RelativeTime/>',
 
   /** Text for tooltip indicating that a document has not yet been published */
   'inputs.reference.preview.not-published': 'Ikke publisert',
@@ -123,7 +123,7 @@ const studioResources: Record<StudioLocaleResourceKeys, string> = {
   'inputs.reference.preview.is-not-published-aria-label': 'Ikke publisert',
 
   /** Text for tooltip showing when a document was edited, using relative time (eg "how long ago was it edited?") */
-  'inputs.reference.preview.edited-at-time': 'Redigert <TimeAgo/>',
+  'inputs.reference.preview.edited-at-time': 'Redigert <RelativeTime/>',
 
   /** Text for tooltip indicating that a document has no unpublished edits */
   'inputs.reference.preview.no-unpublished-edits': 'Ingen upubliserte endringer',

packages/sanity/src/core/components/RelativeTime.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import {type RelativeTimeOptions, useRelativeTime} from '../hooks/useRelativeTime'
+
+export interface RelativeTimeProps extends RelativeTimeOptions {
+  time: string | Date
+}
+
+export function RelativeTime({time, ...options}: RelativeTimeProps) {
+  const timestamp = time instanceof Date ? time : new Date(time)
+  const timeAgo = useRelativeTime(timestamp, options)
+
+  return (
+    <time dateTime={timestamp.toISOString()} title={timeAgo}>
+      {timeAgo}
+    </time>
+  )
+}

packages/sanity/src/core/field/diff/components/DiffTooltip.tsx

@@ -2,7 +2,7 @@ import {Path} from '@sanity/types'
 import {Tooltip, TooltipProps, Text, Stack, Flex, Inline, Label} from '@sanity/ui'
 import React from 'react'
 import {LegacyLayerProvider, UserAvatar} from '../../../components'
-import {useTimeAgo} from '../../../hooks'
+import {useRelativeTime} from '../../../hooks'
 import {useUser} from '../../../store'
 import {AnnotationDetails, Diff} from '../../types'
 import {getAnnotationAtPath, useAnnotationColor} from '../annotations'
@@ -74,7 +74,7 @@ function AnnotationItem({annotation}: {annotation: AnnotationDetails}) {
   const {author, timestamp} = annotation
   const [user] = useUser(author)
   const color = useAnnotationColor(annotation)
-  const timeAgo = useTimeAgo(timestamp, {minimal: true})
+  const timeAgo = useRelativeTime(timestamp, {minimal: true})
   const {t} = useTranslation()
 
   return (

packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx

@@ -2,12 +2,12 @@ import React, {useMemo} from 'react'
 import {ObjectSchemaType} from '@sanity/types'
 import {Box, Flex, Inline, Label, Text, Tooltip, useRootTheme} from '@sanity/ui'
 import {EditIcon, PublishIcon} from '@sanity/icons'
+import {RelativeTime} from '../../../components/RelativeTime'
 import {Translate, useTranslation} from '../../../i18n'
 import {RenderPreviewCallback} from '../../types'
 import {PreviewLayoutKey, TextWithTone} from '../../../components'
 import {useDocumentPresence} from '../../../store'
 import {DocumentPreviewPresence} from '../../../presence'
-import {TimeAgo} from './utils/TimeAgo'
 import {ReferenceInfo} from './types'
 
 /**
@@ -85,7 +85,11 @@ export function ReferencePreview(props: {
                         <Translate
                           t={t}
                           i18nKey="inputs.reference.preview.published-at-time"
-                          components={{TimeAgo: () => <TimeAgo time={publishedAt} />}}
+                          components={{
+                            RelativeTime: () => (
+                              <RelativeTime time={publishedAt} useTemporalPhrase />
+                            ),
+                          }}
                         />
                       ) : (
                         <>{t('inputs.reference.preview.not-published')}</>
@@ -121,7 +125,11 @@ export function ReferencePreview(props: {
                         <Translate
                           t={t}
                           i18nKey="inputs.reference.preview.edited-at-time"
-                          components={{TimeAgo: () => <TimeAgo time={draftEditedAt} />}}
+                          components={{
+                            RelativeTime: () => (
+                              <RelativeTime time={draftEditedAt} useTemporalPhrase />
+                            ),
+                          }}
                         />
                       ) : (
                         <>{t('inputs.reference.preview.no-unpublished-edits')}</>

packages/sanity/src/core/form/studio/assetSource/AssetRow.tsx

@@ -5,7 +5,7 @@ import {Button, Box, Card, Flex, Stack, Label, Text, Tooltip, Grid, useToast} fr
 import {DocumentIcon, ChevronUpIcon, ChevronDownIcon, LinkIcon, TrashIcon} from '@sanity/icons'
 import {Asset as AssetType} from '@sanity/types'
 import {FIXME} from '../../../FIXME'
-import {useClient, useTimeAgo} from '../../../hooks'
+import {useClient, useRelativeTime} from '../../../hooks'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../studioClient'
 import {prettyBytes} from './prettyBytes'
 import {AssetUsageDialog} from './AssetUsageDialog'
@@ -129,7 +129,7 @@ export const AssetRow = (props: RowProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const {asset, onClick, onKeyPress, onDeleteFinished, isSelected, isMobile} = props
   const {originalFilename, _id, mimeType, size, _createdAt} = asset
-  const formattedTime = useTimeAgo(_createdAt, {agoSuffix: true})
+  const formattedTime = useRelativeTime(_createdAt, {useTemporalPhrase: true})
   const formattedMimeType = formatMimeType(mimeType)
   const formattedSize = prettyBytes(size)
   const showTooltip = (originalFilename || '').length > 37