⚡️(frontend) improve Comments feature

Improve the comments feature to reduce annoyance:
- gives focus on input when opening comment threads
- hide comment button when mobile view
- improve contrast of overline commented text
- remove thread if last comment deleted
- scroll to bottom thread when adding new comment

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

@@ -1,6 +1,11 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, getOtherBrowserName, verifyDocName } from './utils-common';
+import {
+  closeHeaderMenu,
+  createDoc,
+  getOtherBrowserName,
+  verifyDocName,
+} from './utils-common';
 import { writeInEditor } from './utils-editor';
 import {
   addNewMember,
@@ -116,8 +121,7 @@ test.describe('Doc Comments', () => {
     await createDoc(page, 'comment-interaction', browserName, 1);
 
     // Checks add react reaction
-    const editor = page.locator('.ProseMirror');
-    await editor.locator('.bn-block-outer').last().fill('Hello World');
+    const editor = await writeInEditor({ page, text: 'Hello' });
     await editor.getByText('Hello').selectText();
     await page.getByRole('button', { name: 'Comment' }).click();
 
@@ -181,6 +185,28 @@ test.describe('Doc Comments', () => {
       'background-color',
       'rgba(0, 0, 0, 0)',
     );
+
+    /* Delete the last comment remove the thread */
+    await editor.getByText('Hello').selectText();
+    await page.getByRole('button', { name: 'Comment' }).click();
+
+    await thread.getByRole('paragraph').first().fill('This is a new comment');
+    await thread.locator('[data-test="save"]').click();
+
+    await expect(editor.getByText('Hello')).toHaveCSS(
+      'background-color',
+      'rgba(237, 180, 0, 0.4)',
+    );
+    await editor.getByText('Hello').click();
+
+    await thread.getByText('This is a new comment').first().hover();
+    await thread.locator('[data-test="moreactions"]').first().click();
+    await thread.getByRole('menuitem', { name: 'Delete comment' }).click();
+
+    await expect(editor.getByText('Hello')).toHaveCSS(
+      'background-color',
+      'rgba(0, 0, 0, 0)',
+    );
   });
 
   test('it checks the comments abilities', async ({ page, browserName }) => {
@@ -293,3 +319,27 @@ test.describe('Doc Comments', () => {
     await cleanup();
   });
 });
+
+test.describe('Doc Comments mobile', () => {
+  test.use({ viewport: { width: 500, height: 1200 } });
+
+  test('Comments are not visible on mobile', async ({ page, browserName }) => {
+    const [title] = await createDoc(
+      page,
+      'comment-mobile',
+      browserName,
+      1,
+      true,
+    );
+
+    await closeHeaderMenu(page);
+
+    await verifyDocName(page, title);
+
+    // Checks add react reaction
+    const editor = await writeInEditor({ page, text: 'Hello' });
+    await editor.getByText('Hello').selectText();
+    await expect(page.getByRole('button', { name: 'Comment' })).toBeHidden();
+    await expect(page.getByRole('button', { name: 'Paragraph' })).toBeVisible();
+  });
+});