From b25a7f3f9e428e3f5e58e97b3b28ce4dc45e950e Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Wed, 22 Jul 2026 17:07:55 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20refacto=20of=20t?= =?UTF-8?q?he=20grid=20documents?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We have refactored the document grid feature to fit the new design system and to improve the code quality. --- CHANGELOG.md | 1 + .../__tests__/app-impress/doc-grid.spec.ts | 2 +- .../impress/src/assets/icons/ui-kit/Docs.svg | 311 ++++++++++++++++++ .../src/assets/icons/ui-kit/Subdocs.svg | 153 +++++++++ .../impress/src/assets/icons/ui-kit/bin.svg | 130 ++++++++ .../src/assets/icons/ui-kit/pinned.svg | 23 ++ .../apps/impress/src/components/ErrorPage.tsx | 1 + .../apps/impress/src/components/Loading.tsx | 9 +- .../doc-header/components/AlertRestore.tsx | 2 +- .../components/SimpleDocItem.tsx | 95 +++--- .../components/DocGridContentList.tsx | 110 +++++-- .../docs-grid/components/DocMoveModal.tsx | 1 - .../docs/docs-grid/components/DocsGrid.tsx | 132 +++++--- .../docs-grid/components/DocsGridActions.tsx | 156 +++++++-- .../docs-grid/components/DocsGridItem.tsx | 114 ++++--- .../docs-grid/components/DocsGridLoader.tsx | 43 --- .../components/DocsGridTrashbinActions.tsx | 105 ------ .../docs/docs-grid/components/Draggable.tsx | 29 -- .../docs/docs-grid/components/Droppable.tsx | 54 --- .../__tests__/DocsGridItemDate.test.tsx | 20 -- .../docs/docs-grid/components/index.ts | 1 - .../docs-grid/hooks/useResponsiveDocGrid.tsx | 29 -- .../left-panel/components/LeftPanel.tsx | 5 +- src/frontend/apps/impress/src/pages/404.tsx | 1 + .../apps/impress/src/pages/docs/index.tsx | 3 +- 25 files changed, 1048 insertions(+), 482 deletions(-) create mode 100644 src/frontend/apps/impress/src/assets/icons/ui-kit/Docs.svg create mode 100644 src/frontend/apps/impress/src/assets/icons/ui-kit/Subdocs.svg create mode 100644 src/frontend/apps/impress/src/assets/icons/ui-kit/bin.svg create mode 100644 src/frontend/apps/impress/src/assets/icons/ui-kit/pinned.svg delete mode 100644 src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridLoader.tsx delete mode 100644 src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridTrashbinActions.tsx delete mode 100644 src/frontend/apps/impress/src/features/docs/docs-grid/components/Draggable.tsx delete mode 100644 src/frontend/apps/impress/src/features/docs/docs-grid/components/Droppable.tsx delete mode 100644 src/frontend/apps/impress/src/features/docs/docs-grid/hooks/useResponsiveDocGrid.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 22cf94a5c..610e959c4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ and this project adheres to - 💄(frontend) use the same highlight color for cells and moves #2575 - ⚡️(backend) optimize media_auth endpoint - 🚸(frontend) print from document options menu #2550 +- ♻️(frontend) refacto of the grid documents #2534 ### Fixed diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts index f4cb20c90..a426e26b7 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts @@ -325,7 +325,7 @@ test.describe('Documents Grid', () => { const thead = page.getByTestId('docs-grid-header'); await expect(thead.getByText(/Name/i)).toBeVisible(); - await expect(thead.getByText(/Updated at/i)).toBeVisible(); + await expect(thead.getByText(/Last modified/i)).toBeVisible(); await Promise.all( docs.map(async (doc) => { diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/Docs.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/Docs.svg new file mode 100644 index 000000000..e465be1ec --- /dev/null +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/Docs.svg @@ -0,0 +1,311 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/Subdocs.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/Subdocs.svg new file mode 100644 index 000000000..c24940786 --- /dev/null +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/Subdocs.svg @@ -0,0 +1,153 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/bin.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/bin.svg new file mode 100644 index 000000000..6a6fd9f15 --- /dev/null +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/bin.svg @@ -0,0 +1,130 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/pinned.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/pinned.svg new file mode 100644 index 000000000..d71108962 --- /dev/null +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/pinned.svg @@ -0,0 +1,23 @@ + + + + + diff --git a/src/frontend/apps/impress/src/components/ErrorPage.tsx b/src/frontend/apps/impress/src/components/ErrorPage.tsx index baf380345..a034ea1b5 100644 --- a/src/frontend/apps/impress/src/components/ErrorPage.tsx +++ b/src/frontend/apps/impress/src/components/ErrorPage.tsx @@ -79,6 +79,7 @@ export const ErrorPage = ({ maxWidth: '100%', height: 'auto', }} + loading="eager" /> ( +export const Loading = ({ + loaderProps, + ...props +}: BoxProps & { loaderProps?: LoaderProps }) => ( - + ); diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx index 667b01c0c..29671089a 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx @@ -97,7 +97,7 @@ export const AlertRestore = ({ doc }: { doc: Doc }) => { /> } > - Restore + {t('Restore')} )} 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 1dc0c2e0b..fb3dd9e16 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,15 +1,14 @@ import { useTranslation } from 'react-i18next'; import { css } from 'styled-components'; -import ArrowSVG from '@/assets/icons/ui-kit/arrow-corner-down-right.svg'; -import { Box, Text } from '@/components'; -import { useCunninghamTheme } from '@/cunningham'; +import { Box, Icon, Text } from '@/components'; import { useDate } from '@/hooks/useDate'; +import DocsIcon from '@/icons/Docs.svg'; +import SubdocsIcon from '@/icons/Subdocs.svg'; +import ArrowIcon from '@/icons/arrow-corner-down-right.svg'; +import PinnedIcon from '@/icons/pinned.svg'; import { useResponsiveStore } from '@/stores'; -import ChildDocument from '../assets/child-document.svg'; -import PinnedDocumentIcon from '../assets/pinned-document.svg'; -import SimpleFileIcon from '../assets/simple-document.svg'; import { useDocUtils, useTrans } from '../hooks'; import { Doc } from '../types'; @@ -39,7 +38,6 @@ export const SimpleDocItem = ({ }: SimpleDocItemProps) => { const { t } = useTranslation(); const { isSmallMobile } = useResponsiveStore(); - const { spacingsTokens } = useCunninghamTheme(); const { untitledDocument } = useTrans(); const { isChild } = useDocUtils(doc); const { relativeDate, formatDate } = useDate(); @@ -55,45 +53,66 @@ export const SimpleDocItem = ({ return ( - + + ) : isChild ? ( +