🐛(frontend) fix doc timestamp display

Implemented the logic to show 'Just now' instead
of '0 seconds ago' when the difference is under
one second.

Signed-off-by: buildwithricky <nwakezepatrick@gmail.com>

Author: buildwithricky

src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts

@@ -45,7 +45,7 @@ test.describe('Document search', () => {
     const listSearch = page.getByRole('listbox').getByRole('group');
     const rowdoc = listSearch.getByRole('option').first();
     await expect(rowdoc.getByText('keyboard_return')).toBeVisible();
-    await expect(rowdoc.getByText(/seconds? ago/)).toBeVisible();
+    await expect(rowdoc.getByText(/just now/)).toBeVisible();
 
     await expect(
       listSearch.getByRole('option').getByText(doc1Title),

src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx

@@ -1,9 +1,9 @@
-import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import { Box, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
+import { useDate } from '@/hooks/useDate';
 import { useResponsiveStore } from '@/stores';
 
 import ChildDocument from '../assets/child-document.svg';
@@ -38,6 +38,7 @@ export const SimpleDocItem = ({
   const { isDesktop } = useResponsiveStore();
   const { untitledDocument } = useTrans();
   const { isChild } = useDocUtils(doc);
+  const { relativeDate } = useDate();
 
   return (
     <Box
@@ -100,7 +101,7 @@ export const SimpleDocItem = ({
             aria-hidden="true"
           >
             <Text $size="xs" $variation="tertiary">
-              {DateTime.fromISO(doc.updated_at).toRelative()}
+              {relativeDate(doc.updated_at)}
             </Text>
           </Box>
         )}

src/frontend/apps/impress/src/features/docs/docs-grid/components/__tests__/DocsGridItemDate.test.tsx

@@ -31,6 +31,10 @@ describe('DocsGridItemDate', () => {
   });
 
   [
+    {
+      updated_at: DateTime.now().minus({ seconds: 1 }).toISO(),
+      rendered: 'just now',
+    },
     {
       updated_at: DateTime.now().minus({ minutes: 1 }).toISO(),
       rendered: '1 minute ago',

src/frontend/apps/impress/src/hooks/useDate.tsx

@@ -10,7 +10,7 @@ const formatDefault: DateTimeFormatOptions = {
 };
 
 export const useDate = () => {
-  const { i18n } = useTranslation();
+  const { i18n, t } = useTranslation();
 
   const formatDate = (
     date: string,
@@ -22,7 +22,19 @@ export const useDate = () => {
   };
 
   const relativeDate = (date: string): string => {
-    return DateTime.fromISO(date).setLocale(i18n.language).toRelative() || '';
+    const dateToCompare = DateTime.fromISO(date);
+
+    if (!dateToCompare.isValid) {
+      return '';
+    }
+
+    const dateNow = DateTime.now();
+
+    const differenceInSeconds = dateNow.diff(dateToCompare).as('seconds');
+
+    return Math.abs(differenceInSeconds) >= 5
+      ? dateToCompare.toRelative({ base: dateNow, locale: i18n.language })
+      : t('just now');
   };
 
   const calculateDaysLeft = (date: string, daysLimit: number): number =>