fixup! ✨(frontend) add floating bar with collapse button

Author: Ovgodd

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

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 
 import { Box, Loading } from '@/components';
-import { DocHeader } from '@/docs/doc-header/';
+import { DocHeader, FloatingBar } from '@/docs/doc-header/';
 import {
   Doc,
   LinkReach,
@@ -12,7 +12,6 @@ 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';

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

@@ -9,10 +9,11 @@ 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 { useFloatingBarStore } from '../floating-bar';
+
 import { AlertNetwork } from './AlertNetwork';
 import { AlertPublic } from './AlertPublic';
 import { AlertRestore } from './AlertRestore';

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

@@ -0,0 +1,62 @@
+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 { useLeftPanelStore } from '@/features/left-panel';
+
+import LeftPanelIcon from '../assets/left-panel.svg';
+import { useFloatingBarStore } from '../stores';
+
+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 = isPanelOpen
+    ? t('Hide the side panel for {{title}}', { title: docTitle })
+    : t('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/docs/doc-header/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/docs/doc-header/floating-bar/components/FloatingBar.tsx

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

src/frontend/apps/impress/src/features/docs/doc-header/floating-bar/components/FloatingBarLeft.tsx

@@ -0,0 +1,3 @@
+export * from './FloatingBar';
+export * from './FloatingBarLeft';
+export * from './CollapsePanel';

src/frontend/apps/impress/src/features/docs/doc-header/floating-bar/components/index.ts

@@ -0,0 +1,6 @@
+export {
+  FloatingBar,
+  FLOATING_BAR_HEIGHT,
+  FLOATING_BAR_Z_INDEX,
+} from './components/FloatingBar';
+export * from './stores';

src/frontend/apps/impress/src/features/docs/doc-header/floating-bar/index.ts

@@ -0,0 +1 @@
+export * from './useFloatingBarStore';

src/frontend/apps/impress/src/features/docs/doc-header/floating-bar/stores/index.ts

@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+interface FloatingBarState {
+  isDocHeaderVisible: boolean;
+  setIsDocHeaderVisible: (visible: boolean) => void;
+}
+
+export const useFloatingBarStore = create<FloatingBarState>((set) => ({
+  isDocHeaderVisible: true,
+  setIsDocHeaderVisible: (visible) => {
+    set({ isDocHeaderVisible: visible });
+  },
+}));