♻️(frontend) extract shared footer actions and bar

Footer actions lived in the left panel and could not be reused elsewhere.

src/frontend/apps/impress/src/features/footer/components/FooterActions.tsx

@@ -0,0 +1,51 @@
+import { UserMenu } from '@gouvfr-lasuite/ui-components';
+import { useTranslation } from 'react-i18next';
+import { createGlobalStyle } from 'styled-components';
+
+import { Box } from '@/components';
+import { Waffle } from '@/components/Waffle';
+import { ButtonLogin, gotoLogout, useAuth } from '@/features/auth';
+import { HelpMenu } from '@/features/help';
+import { LanguagePicker } from '@/features/language/components/LanguagePicker';
+
+const FooterActionsGlobalStyle = createGlobalStyle`
+  .user-menu__actions .c__language-picker{
+    width: auto;
+  }
+`;
+
+export const FooterActions = () => {
+  const { t } = useTranslation();
+  const { user } = useAuth();
+
+  const userMenu = user || {
+    full_name: t('Guest'),
+    email: '',
+  };
+
+  return (
+    <>
+      <FooterActionsGlobalStyle />
+      <Box
+        $padding={{ horizontal: 'sm' }}
+        $direction="row"
+        $align="center"
+        $gap="3xs"
+        $justify="space-between"
+        className="--docs--footer-actions"
+      >
+        <Box $direction="row" $align="center" $gap="3xs">
+          <UserMenu
+            user={userMenu}
+            logout={user ? gotoLogout : undefined}
+            actions={<LanguagePicker />}
+            withMobileView={false}
+          />
+          <Waffle />
+          <ButtonLogin />
+        </Box>
+        <HelpMenu />
+      </Box>
+    </>
+  );
+};

src/frontend/apps/impress/src/features/footer/components/FooterBar.tsx

@@ -0,0 +1,17 @@
+import { Box } from '@/components';
+
+import { FooterActions } from './FooterActions';
+
+export const FooterBar = () => {
+  return (
+    <Box
+      as="footer"
+      className="--docs--footer-bar"
+      $width="fit-content"
+      $shrink={0}
+      $padding={{ vertical: 'sm' }}
+    >
+      <FooterActions />
+    </Box>
+  );
+};

src/frontend/apps/impress/src/features/footer/components/index.ts

@@ -0,0 +1,2 @@
+export * from './FooterActions';
+export * from './FooterBar';

src/frontend/apps/impress/src/features/footer/index.tsx

@@ -1,2 +1,3 @@
+export * from './components';
 export * from './Footer';
 export * from './types';

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

@@ -1,50 +1,10 @@
-import { UserMenu } from '@gouvfr-lasuite/ui-components';
-import { useTranslation } from 'react-i18next';
-import { createGlobalStyle } from 'styled-components';
-
-import { Box, SeparatedSection } from '@/components';
-import { Waffle } from '@/components/Waffle';
-import { ButtonLogin } from '@/features/auth';
-import { useAuth } from '@/features/auth/hooks/useAuth';
-import { gotoLogout } from '@/features/auth/utils';
-import { HelpMenu } from '@/features/help';
-import { LanguagePicker } from '@/features/language/components/LanguagePicker';
-
-const LeftPanelFooterGlobalStyle = createGlobalStyle`
-  .user-menu__actions .c__language-picker{
-    width: auto;
-  }
-`;
+import { SeparatedSection } from '@/components';
+import { FooterActions } from '@/features/footer';
 
 export const LeftPanelFooter = () => {
-  const { t } = useTranslation();
-  const { user } = useAuth();
-
-  const userMenu = user || {
-    full_name: t('Guest'),
-    email: '',
-  };
-
   return (
     <SeparatedSection showSeparator="top" $margin={{ top: 'auto' }}>
-      <LeftPanelFooterGlobalStyle />
-      <Box
-        $padding={{ horizontal: 'sm' }}
-        $justify="space-between"
-        $direction="row"
-      >
-        <Box $direction="row" $align="center" $gap="0.2rem">
-          <UserMenu
-            user={userMenu}
-            logout={user ? gotoLogout : undefined}
-            actions={<LanguagePicker />}
-            withMobileView={false}
-          />
-          <Waffle />
-          <ButtonLogin />
-        </Box>
-        <HelpMenu />
-      </Box>
+      <FooterActions />
     </SeparatedSection>
   );
 };