✨(frontend) add floating bar with collapse button

Add sticky floating bar at top of document with leftpanelcollapse btn

Author: Ovgodd

CHANGELOG.md

@@ -6,8 +6,9 @@ and this project adheres to
 
 ## [Unreleased]
 
-### Added 
+### Added
 
+- ✨(frontend) add floating bar with leftpanel collapse button #1876
 ✨(frontend) Can print a doc #1832
 
 ### Changed

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' }).click();
+    await page.getByRole('button', { name: 'Comment', exact: true }).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' }).click();
+    await page.getByRole('button', { name: 'Comment', exact: true }).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' }).click();
+    await page.getByRole('button', { name: 'Comment', exact: true }).click();
 
     await thread.getByRole('paragraph').first().fill('This is a new comment');
     await thread.locator('[data-test="save"]').click();
@@ -249,7 +249,9 @@ test.describe('Doc Comments', () => {
       editor.getByText('Hello, I can edit the document'),
     ).toBeVisible();
     await otherEditor.getByText('Hello').selectText();
-    await otherPage.getByRole('button', { name: 'Comment' }).click();
+    await otherPage
+      .getByRole('button', { name: 'Comment', exact: true })
+      .click();
     const otherThread = otherPage.locator('.bn-thread');
     await otherThread
       .getByRole('paragraph')
@@ -280,7 +282,7 @@ test.describe('Doc Comments', () => {
     await expect(otherThread).toBeHidden();
     await otherEditor.getByText('Hello').selectText();
     await expect(
-      otherPage.getByRole('button', { name: 'Comment' }),
+      otherPage.getByRole('button', { name: 'Comment', exact: true }),
     ).toBeHidden();
 
     await otherPage.reload();
@@ -334,7 +336,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' }).click();
+    await page.getByRole('button', { name: 'Comment', exact: true }).click();
 
     const thread1 = page.locator('.bn-thread');
     await thread1.getByRole('paragraph').first().fill('Comment in Doc One');
@@ -388,7 +390,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' }).click();
+    await page.getByRole('button', { name: 'Comment', exact: true }).click();
 
     const thread = page.locator('.bn-thread');
     await thread.getByRole('paragraph').first().fill('This is a comment');

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

@@ -24,6 +24,66 @@ test.beforeEach(async ({ page }) => {
 });
 
 test.describe('Doc Editor', () => {
+  test('shows floating bar and collapse button on desktop', async ({
+    page,
+    browserName,
+  }) => {
+    await createDoc(page, 'doc-floating-bar', browserName, 1);
+
+    await expect(page.getByTestId('floating-bar')).toBeVisible();
+
+    const collapseButton = page.getByTestId('floating-bar-toggle-left-panel');
+    await expect(collapseButton).toBeVisible();
+  });
+
+  test('toggles panel collapse from floating bar button', async ({
+    page,
+    browserName,
+  }) => {
+    const [docTitle] = await createDoc(
+      page,
+      'doc-floating-bar',
+      browserName,
+      1,
+    );
+
+    const collapseButton = page.getByTestId('floating-bar-toggle-left-panel');
+    await expect(collapseButton).toBeVisible();
+    const initialExpanded = await collapseButton.getAttribute('aria-expanded');
+    expect(
+      initialExpanded === 'true' || initialExpanded === 'false',
+    ).toBeTruthy();
+    const isInitiallyExpanded = initialExpanded === 'true';
+
+    if (isInitiallyExpanded) {
+      await expect(collapseButton).not.toContainText(docTitle);
+    } else {
+      await expect(collapseButton).toContainText(docTitle);
+    }
+
+    await collapseButton.click();
+    await expect(collapseButton).toHaveAttribute(
+      'aria-expanded',
+      isInitiallyExpanded ? 'false' : 'true',
+    );
+    if (isInitiallyExpanded) {
+      await expect(collapseButton).toContainText(docTitle);
+    } else {
+      await expect(collapseButton).not.toContainText(docTitle);
+    }
+
+    await collapseButton.click();
+    await expect(collapseButton).toHaveAttribute(
+      'aria-expanded',
+      isInitiallyExpanded ? 'true' : 'false',
+    );
+    if (isInitiallyExpanded) {
+      await expect(collapseButton).not.toContainText(docTitle);
+    } else {
+      await expect(collapseButton).toContainText(docTitle);
+    }
+  });
+
   test('it checks toolbar buttons are displayed', async ({
     page,
     browserName,
@@ -410,7 +470,7 @@ test.describe('Doc Editor', () => {
     const editor = page.locator('.ProseMirror');
     await editor.getByText('Hello').selectText();
 
-    await page.getByRole('button', { name: 'AI' }).click();
+    await page.getByRole('button', { name: 'AI', exact: true }).click();
 
     await expect(
       page.getByRole('menuitem', { name: 'Use as prompt' }),
@@ -494,11 +554,13 @@ test.describe('Doc Editor', () => {
       await editor.getByText('Hello').selectText();
 
       if (!ai_transform && !ai_translate) {
-        await expect(page.getByRole('button', { name: 'AI' })).toBeHidden();
+        await expect(
+          page.getByRole('button', { name: 'AI', exact: true }),
+        ).toBeHidden();
         return;
       }
 
-      await page.getByRole('button', { name: 'AI' }).click();
+      await page.getByRole('button', { name: 'AI', exact: true }).click();
 
       if (ai_transform) {
         await expect(

src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts

@@ -118,6 +118,23 @@ export const toggleHeaderMenu = async (page: Page) => {
   await toggleButton.click();
 };
 
+/**
+ * Ensures the left panel is expanded when on a doc page.
+ * The panel can be collapsed in Playwright, which hides the "New doc" button.
+ */
+export const ensureLeftPanelExpanded = async (page: Page) => {
+  const collapseToggle = page.getByTestId('floating-bar-toggle-left-panel');
+  if (!(await collapseToggle.isVisible())) {
+    return;
+  }
+  const isExpanded =
+    (await collapseToggle.getAttribute('aria-expanded')) === 'true';
+  if (!isExpanded) {
+    await collapseToggle.click();
+    await expect(page.getByTestId('new-doc-button')).toBeVisible();
+  }
+};
+
 export const createDoc = async (
   page: Page,
   docName: string,
@@ -130,6 +147,8 @@ export const createDoc = async (
   for (let i = 0; i < randomDocs.length; i++) {
     if (isMobile) {
       await openHeaderMenu(page);
+    } else {
+      await ensureLeftPanelExpanded(page);
     }
 
     await page

src/frontend/apps/e2e/__tests__/app-impress/utils-sub-pages.ts

@@ -3,6 +3,7 @@ import { Page, expect } from '@playwright/test';
 import {
   BrowserName,
   closeHeaderMenu,
+  ensureLeftPanelExpanded,
   openHeaderMenu,
   randomName,
   updateDocTitle,
@@ -54,6 +55,7 @@ export const createRootSubPage = async (
 };
 
 export const clickOnAddRootSubPage = async (page: Page) => {
+  await ensureLeftPanelExpanded(page);
   const rootItem = page.getByTestId('doc-tree-root-item');
   await expect(rootItem).toBeVisible();
   await rootItem.hover();
@@ -71,6 +73,7 @@ export const addChild = async ({
   docParent: string;
   docName: string;
 }) => {
+  await ensureLeftPanelExpanded(page);
   let item = page.getByTestId('doc-tree-root-item');
 
   const isParent = await item

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

@@ -12,6 +12,7 @@ import {
 } from '@/docs/doc-management';
 import { TableContent } from '@/docs/doc-table-content/';
 import { useAuth } from '@/features/auth/';
+import { FloatingBar } from '@/features/floating-bar';
 import { useSkeletonStore } from '@/features/skeletons';
 import { useAnalytics } from '@/libs';
 import { useResponsiveStore } from '@/stores';
@@ -35,6 +36,7 @@ export const DocEditorContainer = ({
 
   return (
     <>
+      {isDesktop && <FloatingBar />}
       <Box
         $maxWidth="868px"
         $width="100%"

src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx

@@ -35,7 +35,7 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
     <>
       <Box
         $width="100%"
-        $padding={{ top: isDesktop ? '50px' : 'md' }}
+        $padding={{ top: isDesktop ? '0' : 'md' }}
         $gap={spacingsTokens['base']}
         aria-label={t('It is the card information about the document.')}
         className="--docs--doc-header"

src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx

@@ -61,7 +61,7 @@ export const TableContent = () => {
         $width={!isOpen ? '40px' : '200px'}
         $height={!isOpen ? '40px' : 'auto'}
         $maxHeight="calc(50vh - 60px)"
-        $zIndex={1000}
+        $zIndex={2000}
         $align="center"
         $padding={isOpen ? 'xs' : '0'}
         $justify="center"

src/frontend/apps/impress/src/features/floating-bar/assets/left-panel.svg

@@ -0,0 +1,47 @@
+import { Button } from '@gouvfr-lasuite/cunningham-react';
+import { useTranslation } from 'react-i18next';
+
+import { Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { getEmojiAndTitle, useDocStore, useTrans } from '@/docs/doc-management';
+import { useLeftPanelStore } from '@/features/left-panel';
+
+import LeftPanelIcon from '../assets/left-panel.svg';
+
+export const CollapsePanel = () => {
+  const { t } = useTranslation();
+  const { colorsTokens } = useCunninghamTheme();
+  const { isPanelOpen, togglePanel } = useLeftPanelStore();
+  const { currentDoc } = useDocStore();
+  const { untitledDocument } = useTrans();
+
+  const { emoji, titleWithoutEmoji } = getEmojiAndTitle(
+    currentDoc?.title ?? '',
+  );
+  const docTitle = titleWithoutEmoji || untitledDocument;
+  const buttonTitle = emoji ? `${emoji} ${docTitle}` : docTitle;
+
+  return (
+    <Button
+      size="medium"
+      onClick={() => togglePanel()}
+      aria-label={t(
+        isPanelOpen
+          ? 'Hide the side panel for {{title}}'
+          : 'Show the side panel for {{title}}',
+        { title: docTitle },
+      )}
+      aria-expanded={isPanelOpen}
+      color="neutral"
+      variant="tertiary"
+      icon={<LeftPanelIcon width={24} height={24} aria-hidden="true" />}
+      data-testid="floating-bar-toggle-left-panel"
+    >
+      {!isPanelOpen ? (
+        <Text $size="sm" $weight={700} $color={colorsTokens['gray-1000']}>
+          {buttonTitle}
+        </Text>
+      ) : undefined}
+    </Button>
+  );
+};