diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx index a45a7ddb..d4b4a7fe 100644 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx +++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx @@ -140,36 +140,30 @@ export const DocsGrid = ({ $overflow="auto" $padding={{ vertical: 'sm', horizontal: isDesktop ? 'md' : 'xs' }} > - - - - - - {t('Name')} + + + )} - + diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx index d58b54fa..8c1ab9ba 100644 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx +++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx @@ -32,6 +32,7 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => { const { isDesktop } = useResponsiveStore(); const { flexLeft, flexRight } = useResponsiveDocGrid(); const { spacingsTokens } = useCunninghamTheme(); + const dateToDisplay = useDateToDisplay(doc, isInTrashbin); const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { @@ -46,7 +47,7 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => { $direction="row" $width="100%" $align="center" - role="row" + role="listitem" $gap="20px" $padding={{ vertical: '4xs', horizontal: isDesktop ? 'base' : 'xs' }} $css={css` @@ -65,7 +66,6 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => { > { $align="center" $justify={isDesktop ? 'space-between' : 'flex-end'} $gap="32px" - role="gridcell" > - + { ); }; -export const DocsGridItemDate = ({ - doc, - isDesktop, - isInTrashbin, -}: { - doc: Doc; - isDesktop: boolean; - isInTrashbin: boolean; -}) => { +const useDateToDisplay = (doc: Doc, isInTrashbin: boolean) => { const { data: config } = useConfig(); const { t } = useTranslation(); const { relativeDate, calculateDaysLeft } = useDate(); - if (!isDesktop) { - return null; - } - let dateToDisplay = relativeDate(doc.updated_at); if (isInTrashbin && config?.TRASHBIN_CUTOFF_DAYS && doc.deleted_at) { @@ -224,6 +218,24 @@ export const DocsGridItemDate = ({ dateToDisplay = `${daysLeft} ${t('days', { count: daysLeft })}`; } + return dateToDisplay; +}; + +export const DocsGridItemDate = ({ + doc, + isDesktop, + isInTrashbin, +}: { + doc: Doc; + isDesktop: boolean; + isInTrashbin: boolean; +}) => { + const dateToDisplay = useDateToDisplay(doc, isInTrashbin); + + if (!isDesktop) { + return null; + } + return (