✨(frontend) add onboarding modal with help menu button

integrate onboarding feature accessible from left panel help menu

✨(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/package.json

@@ -36,7 +36,7 @@
     "@fontsource/material-icons": "5.2.7",
     "@gouvfr-lasuite/cunningham-react": "4.1.0",
     "@gouvfr-lasuite/integration": "1.0.3",
-    "@gouvfr-lasuite/ui-kit": "0.18.7",
+    "@gouvfr-lasuite/ui-kit": "0.19.5",
     "@hocuspocus/provider": "3.4.3",
     "@mantine/core": "8.3.12",
     "@mantine/hooks": "8.3.12",

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

@@ -14,6 +14,7 @@ import { useLeftPanelStore } from '../stores';
 
 import { LeftPanelContent } from './LeftPanelContent';
 import { LeftPanelHeader } from './LeftPanelHeader';
+import { LeftPanelHelpMenu } from './LeftPanelHelpMenu';
 
 const MobileLeftPanelStyle = createGlobalStyle`
   body {
@@ -57,6 +58,14 @@ export const LeftPanel = () => {
             <LeftPanelHeader />
           </Box>
           <LeftPanelContent />
+          <SeparatedSection showSeparator={false}>
+            <Box
+              $padding={{ horizontal: 'sm', vertical: 'xs' }}
+              $justify="flex-start"
+            >
+              <LeftPanelHelpMenu />
+            </Box>
+          </SeparatedSection>
         </Box>
       )}
 
@@ -91,6 +100,14 @@ export const LeftPanel = () => {
             >
               <LeftPanelHeader />
               <LeftPanelContent />
+              <SeparatedSection showSeparator={false}>
+                <Box
+                  $padding={{ horizontal: 'sm', vertical: 'xs' }}
+                  $justify="flex-start"
+                >
+                  <LeftPanelHelpMenu />
+                </Box>
+              </SeparatedSection>
               <SeparatedSection showSeparator={false}>
                 <Box
                   $justify="center"

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

@@ -0,0 +1,5 @@
+import { OnBoarding } from '@/features/on-boarding/components/OnBoarding';
+
+export const LeftPanelHelpMenu = () => {
+  return <OnBoarding />;
+};