✨(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,45 @@ 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,
+  }) => {
+    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';
+
+    await collapseButton.click();
+    await expect(collapseButton).toHaveAttribute(
+      'aria-expanded',
+      isInitiallyExpanded ? 'false' : 'true',
+    );
+
+    await collapseButton.click();
+    await expect(collapseButton).toHaveAttribute(
+      'aria-expanded',
+      isInitiallyExpanded ? 'true' : 'false',
+    );
+  });
+
   test('it checks toolbar buttons are displayed', async ({
     page,
     browserName,
@@ -410,7 +449,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 +533,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

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, HorizontalSeparator } from '@/components';
@@ -8,6 +9,8 @@ import {
   getDocLinkReach,
   useIsCollaborativeEditable,
 } from '@/docs/doc-management';
+import { useFloatingBarStore } from '@/features/floating-bar';
+import { MAIN_LAYOUT_ID } from '@/layouts/conf';
 import { useResponsiveStore } from '@/stores';
 
 import { AlertNetwork } from './AlertNetwork';
@@ -23,19 +26,49 @@ interface DocHeaderProps {
 }
 
 export const DocHeader = ({ doc }: DocHeaderProps) => {
+  const headerRef = useRef<HTMLDivElement>(null);
   const { spacingsTokens } = useCunninghamTheme();
   const { isDesktop } = useResponsiveStore();
   const { t } = useTranslation();
+  const { setIsDocHeaderVisible } = useFloatingBarStore();
   const { isEditable } = useIsCollaborativeEditable(doc);
   const docIsPublic = getDocLinkReach(doc) === LinkReach.PUBLIC;
   const docIsAuth = getDocLinkReach(doc) === LinkReach.AUTHENTICATED;
   const isDeletedDoc = !!doc.deleted_at;
 
+  useEffect(() => {
+    const mainContent = document.getElementById(MAIN_LAYOUT_ID);
+    const header = headerRef.current;
+
+    if (!mainContent || !header) {
+      setIsDocHeaderVisible(false);
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsDocHeaderVisible(entry.isIntersecting);
+      },
+      {
+        root: mainContent,
+        threshold: 0.05,
+      },
+    );
+
+    observer.observe(header);
+
+    return () => {
+      observer.disconnect();
+      setIsDocHeaderVisible(true);
+    };
+  }, [doc.id, setIsDocHeaderVisible]);
+
   return (
     <>
       <Box
+        ref={headerRef}
         $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,65 @@
+import { Button } from '@gouvfr-lasuite/cunningham-react';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { Box, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { getEmojiAndTitle, useDocStore, useTrans } from '@/docs/doc-management';
+import { useFloatingBarStore } from '@/features/floating-bar';
+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 { isDocHeaderVisible } = useFloatingBarStore();
+  const { currentDoc } = useDocStore();
+  const { untitledDocument } = useTrans();
+
+  const { emoji, titleWithoutEmoji } = getEmojiAndTitle(
+    currentDoc?.title ?? '',
+  );
+  const docTitle = titleWithoutEmoji || untitledDocument;
+  const buttonTitle = emoji ? `${emoji} ${docTitle}` : docTitle;
+  const shouldShowButtonTitle = !isPanelOpen && !isDocHeaderVisible;
+  const ariaLabel = t(
+    isPanelOpen
+      ? 'Hide the side panel for {{title}}'
+      : 'Show the side panel for {{title}}',
+    { title: docTitle },
+  );
+
+  return (
+    <Box
+      $css={css`
+        display: inline-flex;
+        padding: var(--c--globals--spacings--xxxs);
+        align-items: center;
+        gap: var(--c--globals--spacings--xxxs);
+        border-radius: var(--c--globals--spacings--xs);
+        border: 1px solid var(--c--contextuals--border--surface--primary);
+        background: var(--c--contextuals--background--surface--primary);
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+      `}
+    >
+      <Button
+        size="small"
+        onClick={() => togglePanel()}
+        aria-label={ariaLabel}
+        aria-expanded={isPanelOpen}
+        color="neutral"
+        variant="tertiary"
+        icon={<LeftPanelIcon width={24} height={24} aria-hidden="true" />}
+        data-testid="floating-bar-toggle-left-panel"
+      >
+        {shouldShowButtonTitle ? (
+          <Text $size="sm" $weight={700} $color={colorsTokens['gray-1000']}>
+            {buttonTitle}
+          </Text>
+        ) : undefined}
+      </Button>
+    </Box>
+  );
+};

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

@@ -0,0 +1,77 @@
+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 = '1px';
+const FLOATING_BAR_GRADIENT =
+  'linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0) 100%)';
+
+/**
+ * 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,
+): RuleSet => css`
+  position: sticky;
+  top: calc(-${mainContentPadding});
+  left: 0;
+  right: 0;
+  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: ${FLOATING_BAR_GRADIENT};
+  backdrop-filter: blur(${blurRadius});
+  -webkit-backdrop-filter: blur(${blurRadius});
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+`;
+
+export const FloatingBar = () => {
+  const { spacingsTokens } = useCunninghamTheme();
+  const { isDesktop } = useResponsiveStore();
+  const mainContentPadding =
+    spacingsTokens['base'] || 'var(--c--globals--spacings--base)';
+  const barSpacing = spacingsTokens['sm'] || 'var(--c--globals--spacings--sm)';
+
+  if (!isDesktop) {
+    return null;
+  }
+
+  return (
+    <Box
+      data-testid="floating-bar"
+      $css={getFloatingBarStyles(
+        mainContentPadding,
+        barSpacing,
+        FLOATING_BAR_BLUR_RADIUS,
+      )}
+    >
+      <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 />;
+};