✨(frontend) add floating bar with collapse button

Add sticky floating bar at top of document with leftpanelcollapse btn

Author: Ovgodd

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to
 
 ### Added
 
+- ✨(frontend) add floating bar with leftpanel collapse button #1876
 - ✨(frontend) Can print a doc #1832
 - ✨(backend) manage reconciliation requests for user accounts #1878
 

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/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>
+  );
+};

src/frontend/apps/impress/src/features/floating-bar/components/CollapsePanel.tsx

@@ -0,0 +1,102 @@
+import { RuleSet, css } from 'styled-components';
+
+import { Box } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { useResponsiveStore } from '@/stores';
+
+import { FloatingBarLeft } from './FloatingBarLeft';
+
+export const FLOATING_BAR_HEIGHT = '64px';
+export const FLOATING_BAR_Z_INDEX = 1000;
+const FLOATING_BAR_BLUR_RADIUS = '12px';
+
+/**
+ * Sticky bar trick (desktop):
+ * - MainContent has padding `base`; we extend the bar width and apply
+ *   matching negative margins (mainContentPadding) so it aligns with the
+ *   scroll area edges.
+ * - `top: calc(-mainContentPadding)` keeps sticky positioning visually
+ *   aligned with the content start.
+ *
+ * Mobile: returns null to avoid header overlap.
+ */
+const getFloatingBarStyles = (
+  mainContentPadding: string,
+  barSpacing: string,
+  blurRadius: string,
+  whiteColor: string,
+): RuleSet => css`
+  position: sticky;
+  top: calc(-${mainContentPadding});
+  left: 0;
+  right: 0;
+  align-self: stretch;
+  width: calc(100% + ${mainContentPadding} + ${mainContentPadding});
+  min-height: ${FLOATING_BAR_HEIGHT};
+  padding: ${barSpacing};
+  margin-left: calc(-${mainContentPadding});
+  margin-right: calc(-${mainContentPadding});
+  margin-top: calc(-${mainContentPadding});
+  z-index: ${FLOATING_BAR_Z_INDEX};
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  background: linear-gradient(
+    180deg,
+    ${whiteColor} 0%,
+    color-mix(in srgb, ${whiteColor} 70%, transparent) 100%
+  );
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    backdrop-filter: blur(${blurRadius});
+    -webkit-backdrop-filter: blur(${blurRadius});
+    mask: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
+    -webkit-mask: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 1) 0%,
+      rgba(0, 0, 0, 0) 100%
+    );
+    pointer-events: none;
+  }
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+`;
+
+export const FloatingBar = () => {
+  const { colorsTokens, spacingsTokens } = useCunninghamTheme();
+  const { isDesktop } = useResponsiveStore();
+  const mainContentPadding =
+    spacingsTokens['base'] || 'var(--c--globals--spacings--base)';
+  const barSpacing = spacingsTokens['sm'] || 'var(--c--globals--spacings--sm)';
+  const whiteColor =
+    colorsTokens['gray-000'] ||
+    'var(--c--contextuals--background--surface--primary)';
+
+  if (!isDesktop) {
+    return null;
+  }
+
+  return (
+    <Box
+      data-testid="floating-bar"
+      $css={getFloatingBarStyles(
+        mainContentPadding,
+        barSpacing,
+        FLOATING_BAR_BLUR_RADIUS,
+        whiteColor,
+      )}
+    >
+      <FloatingBarLeft />
+    </Box>
+  );
+};

src/frontend/apps/impress/src/features/floating-bar/components/FloatingBar.tsx

@@ -0,0 +1,5 @@
+import { CollapsePanel } from './CollapsePanel';
+
+export const FloatingBarLeft = () => {
+  return <CollapsePanel />;
+};