🚸(frontend) change position elements toolbar

The AI and comment toolbar buttons are now
positioned at the end of the toolbar.
They were taking too much space on the left
which was not ideal for user experience.

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to
 
 - 📝(docs) improve README and add documentation hub #1870
 - ♿️(frontend) restore focus to triggers after closing menus and modals #1863
+- 🚸(frontend) change position elements toolbar #1957
 
 ### Fixed
 
@@ -21,7 +22,7 @@ and this project adheres to
 - 🐛(frontend) fix home collapsing panel #1954
 - 🐛(frontend) fix disabled color on icon Dropdown #1950
 - 🐛(frontend) fix zIndex table of content #1949
-- 🐛(frontend) fix bug when language not supported by BN #1949
+- 🐛(frontend) fix bug when language not supported by BN #1957
 
 
 ## [v4.6.0] - 2026-03-03

src/frontend/apps/e2e/__tests__/app-impress/doc-comments.spec.ts

@@ -41,7 +41,7 @@ test.describe('Doc Comments', () => {
     // We add a comment with the first user
     const editor = await writeInEditor({ page, text: 'Hello World' });
     await editor.getByText('Hello').selectText();
-    await page.getByRole('button', { name: 'Comment', exact: true }).click();
+    await page.getByRole('button', { name: 'Add comment' }).click();
 
     const thread = page.locator('.bn-thread');
     await thread.getByRole('paragraph').first().fill('This is a comment');
@@ -124,7 +124,7 @@ test.describe('Doc Comments', () => {
     // Checks add react reaction
     const editor = await writeInEditor({ page, text: 'Hello' });
     await editor.getByText('Hello').selectText();
-    await page.getByRole('button', { name: 'Comment', exact: true }).click();
+    await page.getByRole('button', { name: 'Add comment' }).click();
 
     const thread = page.locator('.bn-thread');
     await thread.getByRole('paragraph').first().fill('This is a comment');
@@ -191,7 +191,7 @@ test.describe('Doc Comments', () => {
 
     /* Delete the last comment remove the thread */
     await editor.getByText('Hello').selectText();
-    await page.getByRole('button', { name: 'Comment', exact: true }).click();
+    await page.getByRole('button', { name: 'Add comment' }).click();
 
     await thread.getByRole('paragraph').first().fill('This is a new comment');
     await thread.locator('[data-test="save"]').click();
@@ -249,9 +249,7 @@ test.describe('Doc Comments', () => {
       editor.getByText('Hello, I can edit the document'),
     ).toBeVisible();
     await otherEditor.getByText('Hello').selectText();
-    await otherPage
-      .getByRole('button', { name: 'Comment', exact: true })
-      .click();
+    await otherPage.getByRole('button', { name: 'Add comment' }).click();
     const otherThread = otherPage.locator('.bn-thread');
     await otherThread
       .getByRole('paragraph')
@@ -282,7 +280,7 @@ test.describe('Doc Comments', () => {
     await expect(otherThread).toBeHidden();
     await otherEditor.getByText('Hello').selectText();
     await expect(
-      otherPage.getByRole('button', { name: 'Comment', exact: true }),
+      otherPage.getByRole('button', { name: 'Add comment' }),
     ).toBeHidden();
 
     await otherPage.reload();
@@ -336,7 +334,7 @@ test.describe('Doc Comments', () => {
     // We add a comment in the first document
     const editor1 = await writeInEditor({ page, text: 'Document One' });
     await editor1.getByText('Document One').selectText();
-    await page.getByRole('button', { name: 'Comment', exact: true }).click();
+    await page.getByRole('button', { name: 'Add comment' }).click();
 
     const thread1 = page.locator('.bn-thread');
     await thread1.getByRole('paragraph').first().fill('Comment in Doc One');
@@ -390,7 +388,7 @@ test.describe('Doc Comments mobile', () => {
     // Checks add react reaction
     const editor = await writeInEditor({ page, text: 'Hello' });
     await editor.getByText('Hello').selectText();
-    await page.getByRole('button', { name: 'Comment', exact: true }).click();
+    await page.getByRole('button', { name: 'Add comment' }).click();
 
     const thread = page.locator('.bn-thread');
     await thread.getByRole('paragraph').first().fill('This is a comment');

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/BlockNoteToolbar.tsx

@@ -72,11 +72,11 @@ export const BlockNoteToolbar = ({ aiAllowed }: { aiAllowed: boolean }) => {
   const formattingToolbar = useCallback(() => {
     return (
       <FormattingToolbar>
-        {aiAllowed && AIToolbarButton && <AIToolbarButton />}
+        {toolbarItems}
 
         <CommentToolbarButton />
 
-        {toolbarItems}
+        {aiAllowed && AIToolbarButton && <AIToolbarButton />}
 
         {/* Extra button to do some AI powered actions - only if AIToolbarButton is not available because of MIT license */}
         {conf?.AI_FEATURE_ENABLED && conf?.AI_FEATURE_LEGACY_ENABLED && (

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentToolbarButton.tsx

@@ -29,7 +29,7 @@ export const CommentToolbarButton = () => {
   const Components = useComponentsContext();
   const { currentDoc } = useDocStore();
   const { t } = useTranslation();
-  const { spacingsTokens, colorsTokens } = useCunninghamTheme();
+  const { colorsTokens } = useCunninghamTheme();
   const comments = useExtension('comments') as unknown as ReturnType<
     ReturnType<typeof CommentsExtension>
   >;
@@ -78,22 +78,16 @@ export const CommentToolbarButton = () => {
         }}
         aria-haspopup="dialog"
         data-test="comment-toolbar-button"
+        aria-label={t('Add comment')}
+        mainTooltip={t('Add comment')}
       >
-        <Box
-          $direction="row"
-          $align="center"
-          $gap={spacingsTokens['xs']}
-          $padding={{ right: '2xs' }}
-        >
-          <Icon
-            iconName="comment"
-            className="--docs--icon-bg"
-            $theme="gray"
-            $padding="0.15rem"
-            $size="md"
-          />
-          {t('Comment')}
-        </Box>
+        <Icon
+          iconName="comment"
+          className="--docs--icon-bg"
+          $theme="gray"
+          $padding="0.15rem"
+          $size="md"
+        />
       </Components.Generic.Toolbar.Button>
       <Box
         $background={colorsTokens['gray-100']}