From ed4b2692f1def54321f3e387782c1f6665d67367 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Wed, 22 Jul 2026 17:07:55 +0200 Subject: [PATCH 1/3] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20refacto=20of?= =?UTF-8?q?=20the=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 | 9 +- .../__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 | 152 +++++++-- .../docs-grid/components/DocsGridItem.tsx | 114 ++++--- .../docs-grid/components/DocsGridLoader.tsx | 43 --- .../components/DocsGridTrashbinActions.tsx | 100 ------ .../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, 1050 insertions(+), 479 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 ac490d64ab..29645d353b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,13 +11,14 @@ and this project adheres to - ♿️(frontend) restore skip to content link after header redesign #2510 - 🌐(i18n) rename cn_CN to zh_CN, add eo_PL and zh_TW locales #2486 -### Fixed - -- 🐛(frontend) redirect homepage to login when homepage feat is disabled #2521 - ### Changed - ♿️(frontend) use semantic `
` structure in document info card #2379 +- ♻️(frontend) refacto of the grid documents #2534 + +### Fixed + +- 🐛(frontend) redirect homepage to login when homepage feat is disabled #2521 ## [v5.4.1] - 2026-07-09 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 3cef7cd755..bf6fdb858a 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 @@ -315,7 +315,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 0000000000..e465be1eca --- /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 0000000000..c249407867 --- /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 0000000000..6a6fd9f153 --- /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 0000000000..d711089621 --- /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 baf380345b..a034ea1b5c 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 22c6d61dee..b77a6cb174 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 @@ -91,7 +91,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 1dc0c2e0b6..fb3dd9e168 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 ? ( +