From 7cf42e6404b95e75a31ec297f899b8bad095f9d9 Mon Sep 17 00:00:00 2001
From: buildwithricky <nwakezepatrick@gmail.com>
Date: Fri, 31 Oct 2025 21:26:48 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20fix=20doc=20timestamp?=
 =?UTF-8?q?=20display?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../e2e/__tests__/app-impress/doc-search.spec.ts |  2 +-
 .../doc-management/components/SimpleDocItem.tsx  |  5 +++--
 .../__tests__/DocsGridItemDate.test.tsx          |  4 ++++
 src/frontend/apps/impress/src/hooks/useDate.tsx  | 16 ++++++++++++++--
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts
index 97d36cc8..c9df5094 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts
+++ b/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),
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
index 8873f76b..1f8f6b71 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
+++ b/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>
         )}
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/__tests__/DocsGridItemDate.test.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/__tests__/DocsGridItemDate.test.tsx
index eb9546a8..1652e1e8 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/__tests__/DocsGridItemDate.test.tsx
+++ b/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',
diff --git a/src/frontend/apps/impress/src/hooks/useDate.tsx b/src/frontend/apps/impress/src/hooks/useDate.tsx
index 14b09dbd..752cdced 100644
--- a/src/frontend/apps/impress/src/hooks/useDate.tsx
+++ b/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 =>