✨(frontend) add docs onboarding and help memu

Introduce an onboarding to guide users through core features.

Author: Ovgodd

CHANGELOG.md

@@ -8,7 +8,8 @@ and this project adheres to
 
 ### Fixed
 
-🐛(frontend) fix broadcast store sync #1846
+- 🐛(frontend) fix broadcast store sync #1846
+- ✨(frontend) add onboarding modal with help menu button #1868
 
 ## [v4.5.0] - 2026-01-28
 

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHelpMenu.tsx

@@ -1,112 +1,5 @@
-import { Button } from '@gouvfr-lasuite/cunningham-react';
-import {
-  DropdownMenu,
-  DropdownMenuOption,
-  OnboardingModal,
-  OnboardingStep,
-} from '@gouvfr-lasuite/ui-kit';
-import { type MouseEvent, useCallback, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { css } from 'styled-components';
-
-import WandAndStarsIcon from '@/assets/icons/wand-and-stars.svg';
-import { Box, Icon } from '@/components';
+import { OnBoarding } from '@/features/on-boarding/components/OnBoarding';
 
 export const LeftPanelHelpMenu = () => {
-  const { t } = useTranslation();
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  const openModal = useCallback(() => {
-    setIsModalOpen(true);
-  }, []);
-
-  const closeModal = useCallback(() => {
-    setIsModalOpen(false);
-  }, []);
-
-  const toggleMenu = useCallback(
-    (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-      setIsMenuOpen((open) => !open);
-    },
-    [],
-  );
-
-  const steps = useMemo<OnboardingStep[]>(
-    () => [
-      {
-        icon: <Icon iconName="edit" $size="20px" aria-hidden="true" />,
-        title: t('Onboarding step 1 title'),
-        description: t('Onboarding step 1 description'),
-      },
-      {
-        icon: <Icon iconName="account_tree" $size="20px" aria-hidden="true" />,
-        title: t('Onboarding step 2 title'),
-        description: t('Onboarding step 2 description'),
-      },
-      {
-        icon: <Icon iconName="share" $size="20px" aria-hidden="true" />,
-        title: t('Onboarding step 3 title'),
-        description: t('Onboarding step 3 description'),
-      },
-    ],
-    [t],
-  );
-
-  const options = useMemo<DropdownMenuOption[]>(
-    () => [
-      {
-        label: t('Onboarding'),
-        icon: <WandAndStarsIcon aria-hidden="true" />,
-        callback: openModal,
-      },
-    ],
-    [openModal, t],
-  );
-
-  return (
-    <>
-      <Box
-        $css={css`
-          .c__dropdown-menu-trigger {
-            display: flex;
-            justify-content: flex-start;
-          }
-        `}
-      >
-        <DropdownMenu
-          options={options}
-          isOpen={isMenuOpen}
-          onOpenChange={setIsMenuOpen}
-        >
-          <Button
-            aria-label={t('Open onboarding menu')}
-            color="neutral"
-            variant="tertiary"
-            iconPosition="left"
-            icon={
-              <Icon
-                $withThemeInherited
-                iconName="help_outline"
-                aria-hidden="true"
-              />
-            }
-            onClick={toggleMenu}
-          />
-        </DropdownMenu>
-      </Box>
-
-      <OnboardingModal
-        isOpen={isModalOpen}
-        appName={t('Docs')}
-        mainTitle={t('Docs onboarding title')}
-        steps={steps}
-        hideContent
-        onClose={closeModal}
-        onComplete={closeModal}
-      />
-    </>
-  );
+  return <OnBoarding />;
 };