From 675483dce228eebb0176df21556c0679a0dc5b56 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Fri, 31 Jul 2026 11:16:48 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20update=20ui=20doc=20to?= =?UTF-8?q?olbox?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We updated the UI of the doc toolbox to fit with the design system. The icons have been updated, we moved it to the doc management folder in order to use it to different places in the app. --- .../__tests__/app-impress/doc-version.spec.ts | 10 +- .../impress/src/assets/icons/ui-kit/copy.svg | 20 ++- .../impress/src/assets/icons/ui-kit/link.svg | 18 ++- .../src/assets/icons/ui-kit/shared.svg | 12 +- .../impress/src/assets/icons/ui-kit/trash.svg | 13 +- .../doc-header/components/DocFloatingBar.tsx | 4 +- .../__tests__/DocToolBoxLicence.spec.tsx | 0 .../__tests__/DocToolBoxLicenceMIT.spec.tsx | 0 .../components/DocToolBox.tsx | 149 ++++++++++-------- .../hooks/useCopyCurrentEditorToClipboard.tsx | 0 10 files changed, 137 insertions(+), 89 deletions(-) rename src/frontend/apps/impress/src/features/docs/{doc-header => doc-management}/__tests__/DocToolBoxLicence.spec.tsx (100%) rename src/frontend/apps/impress/src/features/docs/{doc-header => doc-management}/__tests__/DocToolBoxLicenceMIT.spec.tsx (100%) rename src/frontend/apps/impress/src/features/docs/{doc-header => doc-management}/components/DocToolBox.tsx (79%) rename src/frontend/apps/impress/src/features/docs/{doc-header => doc-management}/hooks/useCopyCurrentEditorToClipboard.tsx (100%) diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts index 7a698b027..4812d6d6d 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts @@ -19,7 +19,7 @@ test.describe('Doc Version', () => { // Initially, there is no version await page.getByLabel('Open the document options').click(); - await page.getByRole('menuitem', { name: 'Version history' }).click(); + await page.getByRole('menuitem', { name: 'History' }).click(); await expect(page.getByText('History', { exact: true })).toBeVisible(); const modal = page.getByRole('dialog', { name: 'Version history' }); @@ -64,7 +64,7 @@ test.describe('Doc Version', () => { ).toBeVisible(); await page.getByLabel('Open the document options').click(); - await page.getByRole('menuitem', { name: 'Version history' }).click(); + await page.getByRole('menuitem', { name: 'History' }).click(); await expect(panel).toBeVisible(); await expect(page.getByText('History', { exact: true })).toBeVisible(); @@ -114,9 +114,7 @@ test.describe('Doc Version', () => { await verifyDocName(page, 'Mocked document'); await page.getByLabel('Open the document options').click(); - await expect( - page.getByRole('menuitem', { name: 'Version history' }), - ).toBeHidden(); + await expect(page.getByRole('menuitem', { name: 'History' })).toBeHidden(); }); test('it restores the doc version', async ({ page, browserName }) => { @@ -151,7 +149,7 @@ test.describe('Doc Version', () => { await expect(thread).toBeHidden(); await page.getByLabel('Open the document options').click(); - await page.getByRole('menuitem', { name: 'Version history' }).click(); + await page.getByRole('menuitem', { name: 'History' }).click(); const modal = page.getByRole('dialog', { name: 'Version history' }); const panel = modal.getByLabel('Version list'); diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/copy.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/copy.svg index d99e7bf79..6cd02f095 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/copy.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/copy.svg @@ -1,3 +1,19 @@ - - + + + + + + + + + + diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/link.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/link.svg index 787f1e16a..d9dda3818 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/link.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/link.svg @@ -1,3 +1,17 @@ - - + + + + + + + + + + diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/shared.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/shared.svg index 7097f5b67..40143f8f2 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/shared.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/shared.svg @@ -1,20 +1,16 @@ - + - diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/trash.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/trash.svg index b63de38cb..17a8d7d85 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/trash.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/trash.svg @@ -1,3 +1,12 @@ - - + + + diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocFloatingBar.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocFloatingBar.tsx index 648caefed..06589d107 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocFloatingBar.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocFloatingBar.tsx @@ -1,11 +1,11 @@ import { Box } from '@/components'; import { CardFloatingBar, FloatingBar } from '@/components/FloatingBar'; +import { DocToolBox } from '@/docs/doc-management/components/DocToolBox'; import { useDocStore } from '@/docs/doc-management/stores/useDocStore'; -import { DocShareButton } from '@/features/docs/doc-share/components/DocShareButton'; +import { DocShareButton } from '@/docs/doc-share/components/DocShareButton'; import { RightPanelCollapseButton } from '@/features/right-panel/components/RightPanelCollapseButton'; import { DocLeftPanelCollapseButton } from './DocLeftPanelCollapseButton'; -import { DocToolBox } from './DocToolBox'; export const DocFloatingBar = () => { const { currentDoc } = useDocStore(); diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/__tests__/DocToolBoxLicence.spec.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/__tests__/DocToolBoxLicence.spec.tsx similarity index 100% rename from src/frontend/apps/impress/src/features/docs/doc-header/__tests__/DocToolBoxLicence.spec.tsx rename to src/frontend/apps/impress/src/features/docs/doc-management/__tests__/DocToolBoxLicence.spec.tsx diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/__tests__/DocToolBoxLicenceMIT.spec.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/__tests__/DocToolBoxLicenceMIT.spec.tsx similarity index 100% rename from src/frontend/apps/impress/src/features/docs/doc-header/__tests__/DocToolBoxLicenceMIT.spec.tsx rename to src/frontend/apps/impress/src/features/docs/doc-management/__tests__/DocToolBoxLicenceMIT.spec.tsx diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocToolBox.tsx similarity index 79% rename from src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx rename to src/frontend/apps/impress/src/features/docs/doc-management/components/DocToolBox.tsx index 9a5ad9315..ee64a9749 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocToolBox.tsx @@ -10,31 +10,31 @@ import { useRouter } from 'next/router'; import { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import AddLinkSVG from '@/assets/icons/ui-kit/add_link.svg'; -import ContentCopySVG from '@/assets/icons/ui-kit/content_copy.svg'; -import DeleteSVG from '@/assets/icons/ui-kit/delete.svg'; +import ContentCopyIcon from '@/assets/icons/ui-kit/copy.svg'; import DownloadSVG from '@/assets/icons/ui-kit/download.svg'; -import SharedSVG from '@/assets/icons/ui-kit/group.svg'; import HistorySVG from '@/assets/icons/ui-kit/history.svg'; import KeepSVG from '@/assets/icons/ui-kit/keep.svg'; import KeepOffSVG from '@/assets/icons/ui-kit/keep_off.svg'; import LeaveSVG from '@/assets/icons/ui-kit/leave.svg'; +import LinkIcon from '@/assets/icons/ui-kit/link.svg'; import MoreSVG from '@/assets/icons/ui-kit/more_horiz.svg'; -import { - Doc, - KEY_DOC, - KEY_LIST_DOC, - KEY_LIST_FAVORITE_DOC, - useCopyDocLink, - useCreateFavoriteDoc, - useDeleteFavoriteDoc, - useDocUtils, - useDuplicateDoc, -} from '@/docs/doc-management'; +import SharedIcon from '@/assets/icons/ui-kit/shared.svg'; +import DeleteIcon from '@/assets/icons/ui-kit/trash.svg'; import { usePresenterStore } from '@/docs/doc-presenter/stores'; import { useAuth } from '@/features/auth'; import { useFocusStore, useResponsiveStore } from '@/stores'; +import { + KEY_DOC, + KEY_LIST_DOC, + KEY_LIST_FAVORITE_DOC, + useCreateFavoriteDoc, + useDeleteFavoriteDoc, + useDuplicateDoc, +} from '../api'; +import { useCopyDocLink } from '../hooks'; +import { Doc } from '../types'; + const ModalRemoveDoc = dynamic( () => import('@/docs/doc-management/components/ModalRemoveDoc').then((mod) => ({ @@ -88,7 +88,6 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { const { t } = useTranslation(); const treeContext = useTreeContext(); const router = useRouter(); - const { isTopRoot } = useDocUtils(doc); const isTopParent = doc.id === treeContext?.root?.id; // it can be a child but not for the current user const { authenticated } = useAuth(); const [openDropdown, setOpenDropdown] = useState(false); @@ -101,8 +100,6 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { const { restoreFocus, addLastFocus } = useFocusStore(); const { isMobile } = useResponsiveStore(); const copyDocLink = useCopyDocLink(doc.id); - // Deep-link (#2397) and slide/URL sync live in PresenterRoot; here we only - // trigger the manual "Present" action. const openPresenter = usePresenterStore((state) => state.open); const { mutate: duplicateDoc } = useDuplicateDoc({ onSuccess: (data) => { @@ -117,12 +114,53 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { }); const options: DropdownMenuItem[] = [ + { + label: t('Copy link', { + description: 'Dropdown menu item to copy the document link', + }), + icon: , + callback: copyDocLink, + }, + { + label: t('Share', { + description: 'Dropdown menu item to share the document', + }), + icon: , + callback: () => { + setIsModalShareOpen(true); + }, + isHidden: !authenticated, + }, + { type: 'separator' }, + { + label: t('Present', { + description: + 'Dropdown menu item to open the document in presentation mode', + }), + icon: , + callback: () => { + openPresenter(0); + }, + isHidden: Boolean(doc.deleted_at) || isMobile, + testId: `docs-actions-present-${doc.id}`, + }, + { + label: t('Download', { + description: 'Dropdown menu item to download the document', + }), + icon: , + callback: () => { + setIsModalExportOpen(true); + }, + isHidden: !ModalExport, + }, + { type: 'separator' }, { label: doc.is_favorite ? t('Unpin') : t('Pin'), icon: doc.is_favorite ? ( - + ) : ( - + ), callback: () => { if (doc.is_favorite) { @@ -134,50 +172,11 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { isHidden: !doc.abilities.favorite, testId: `docs-actions-${doc.is_favorite ? 'unpin' : 'pin'}-${doc.id}`, }, - { type: 'separator' }, { - label: t('Present'), - icon: , - callback: () => { - openPresenter(0); - }, - isHidden: Boolean(doc.deleted_at) || isMobile, - testId: `docs-actions-present-${doc.id}`, - }, - { - label: t('Copy link'), - icon: , - callback: copyDocLink, - }, - { - label: t('Share'), - icon: , - callback: () => { - setIsModalShareOpen(true); - }, - isHidden: !isTopRoot || !authenticated, - }, - { - label: t('Download'), - icon: , - callback: () => { - setIsModalExportOpen(true); - }, - isHidden: !ModalExport, - }, - { - label: t('Version history'), - icon: , - isDisabled: !doc.abilities.versions_list, - callback: () => { - setIsModalHistoryOpen(true); - }, - isHidden: isMobile || !doc.abilities.versions_list, - showSeparator: true, - }, - { - label: t('Duplicate'), - icon: , + label: t('Duplicate', { + description: 'Dropdown menu item to duplicate the document', + }), + icon: , isDisabled: !doc.abilities.duplicate, callback: () => { duplicateDoc({ @@ -187,11 +186,25 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { }); }, isHidden: !doc.abilities.duplicate, + }, + { type: 'separator' }, + { + label: t('History', { + description: 'Dropdown menu item to view the document history', + }), + icon: , + isDisabled: !doc.abilities.versions_list, + callback: () => { + setIsModalHistoryOpen(true); + }, + isHidden: isMobile || !doc.abilities.versions_list, showSeparator: true, }, { - label: t('Leave'), - icon: , + label: t('Leave', { + description: 'Dropdown menu item to leave the document', + }), + icon: , callback: () => { setIsModalLeaveOpen(true); }, @@ -203,8 +216,10 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { isHidden: !isTopParent, }, { - label: t('Delete'), - icon: , + label: t('Delete', { + description: 'Dropdown menu item to delete the document', + }), + icon: , callback: () => { setIsModalRemoveOpen(true); }, diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/hooks/useCopyCurrentEditorToClipboard.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/hooks/useCopyCurrentEditorToClipboard.tsx similarity index 100% rename from src/frontend/apps/impress/src/features/docs/doc-header/hooks/useCopyCurrentEditorToClipboard.tsx rename to src/frontend/apps/impress/src/features/docs/doc-management/hooks/useCopyCurrentEditorToClipboard.tsx