♻️(frontend) replace default comment toolbar button

Replace the default comment toolbar button with
a custom one to follow the design system.

Author: AntoLC

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

@@ -36,7 +36,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: 'Add comment' }).click();
+    await page.getByRole('button', { name: 'Comment' }).click();
 
     const thread = page.locator('.bn-thread');
     await thread.getByRole('paragraph').first().fill('This is a comment');
@@ -119,7 +119,7 @@ test.describe('Doc Comments', () => {
     const editor = page.locator('.ProseMirror');
     await editor.locator('.bn-block-outer').last().fill('Hello World');
     await editor.getByText('Hello').selectText();
-    await page.getByRole('button', { name: 'Add comment' }).click();
+    await page.getByRole('button', { name: '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

@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next';
 
 import { useConfig } from '@/core/config/api';
 
+import { CommentToolbarButton } from '../comments/CommentToolbarButton';
 import { getCalloutFormattingToolbarItems } from '../custom-blocks';
 
 import { AIGroupButton } from './AIButton';
@@ -25,17 +26,21 @@ export const BlockNoteToolbar = () => {
   const { data: conf } = useConfig();
 
   const toolbarItems = useMemo(() => {
-    const toolbarItems = getFormattingToolbarItems([
+    let toolbarItems = getFormattingToolbarItems([
       ...blockTypeSelectItems(dict),
       getCalloutFormattingToolbarItems(t),
     ]);
+
+    // Find the index of the file download button
     const fileDownloadButtonIndex = toolbarItems.findIndex(
       (item) =>
         typeof item === 'object' &&
         item !== null &&
         'key' in item &&
         (item as { key: string }).key === 'fileDownloadButton',
     );
+
+    // Replace the default file download button with our custom FileDownloadButton
     if (fileDownloadButtonIndex !== -1) {
       toolbarItems.splice(
         fileDownloadButtonIndex,
@@ -50,12 +55,22 @@ export const BlockNoteToolbar = () => {
       );
     }
 
+    // Remove default Comment button
+    toolbarItems = toolbarItems.filter((item) => {
+      if (typeof item === 'object' && item !== null && 'key' in item) {
+        return item.key !== 'addCommentButton';
+      }
+      return true;
+    });
+
     return toolbarItems;
   }, [dict, t]);
 
   const formattingToolbar = useCallback(() => {
     return (
       <FormattingToolbar>
+        <CommentToolbarButton />
+
         {toolbarItems}
 
         {/* Extra button to do some AI powered actions */}

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

@@ -0,0 +1,81 @@
+import { useBlockNoteEditor, useComponentsContext } from '@blocknote/react';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { Box, Icon } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { useDocStore } from '@/features/docs/doc-management';
+
+import {
+  DocsBlockSchema,
+  DocsInlineContentSchema,
+  DocsStyleSchema,
+} from '../../types';
+
+export const CommentToolbarButton = () => {
+  const Components = useComponentsContext();
+  const { currentDoc } = useDocStore();
+  const { t } = useTranslation();
+  const { spacingsTokens, colorsTokens } = useCunninghamTheme();
+  const editor = useBlockNoteEditor<
+    DocsBlockSchema,
+    DocsInlineContentSchema,
+    DocsStyleSchema
+  >();
+
+  const hasActiveUnresolvedThread = editor._tiptapEditor.isActive('comment', {
+    orphan: false,
+  });
+
+  if (
+    !editor.isEditable ||
+    !Components ||
+    !currentDoc?.abilities.comment ||
+    hasActiveUnresolvedThread
+  ) {
+    return null;
+  }
+
+  return (
+    <Box $direction="row" className="--docs--comment-toolbar-button">
+      <Components.Generic.Toolbar.Button
+        className="bn-button"
+        onClick={() => {
+          editor.comments?.startPendingComment();
+        }}
+        isDisabled={hasActiveUnresolvedThread}
+      >
+        <Box
+          $direction="row"
+          $align="center"
+          $gap={spacingsTokens['xs']}
+          $padding={{ right: '2xs' }}
+        >
+          <Icon
+            iconName="comment"
+            className="--docs--icon-bg"
+            $theme="greyscale"
+            $variation="600"
+            $padding="0.15rem"
+            $size="16px"
+            $color={
+              hasActiveUnresolvedThread
+                ? `${colorsTokens['greyscale-600']}77`
+                : colorsTokens['greyscale-600']
+            }
+          />
+          {t('Comment')}
+        </Box>
+      </Components.Generic.Toolbar.Button>
+      <Box
+        $background={colorsTokens['greyscale-100']}
+        $width="1px"
+        $height="70%"
+        $margin={{ left: '2px' }}
+        $css={css`
+          align-self: center;
+        `}
+      />
+    </Box>
+  );
+};

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/index.ts

@@ -1,2 +1,3 @@
+export * from './CommentToolbarButton';
 export * from './styles';
 export * from './useComments';