From 22638bb857037c1d96541f6cd2835db854ee763c Mon Sep 17 00:00:00 2001 From: Cyril Date: Fri, 17 Jul 2026 11:11:01 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20error=20page=20head?= =?UTF-8?q?er=20and=20footer=20layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Use Docs logo header and bottom actions without sidebar on error pages. --- .../apps/impress/src/assets/icons/DOCS.svg | 6 ++ .../src/components/ErrorPageFooter.tsx | 59 +++++++++++++++++ .../src/components/ErrorPageHeader.tsx | 64 +++++++++++++++++++ .../apps/impress/src/components/index.ts | 2 + .../apps/impress/src/layouts/PageLayout.tsx | 9 ++- src/frontend/apps/impress/src/pages/401.tsx | 19 +++++- src/frontend/apps/impress/src/pages/404.tsx | 13 +++- src/frontend/apps/impress/src/pages/500.tsx | 13 +++- .../apps/impress/src/pages/_error.tsx | 9 ++- .../apps/impress/src/pages/offline/index.tsx | 13 +++- .../active/[id]/index.tsx | 12 +++- .../inactive/[id]/index.tsx | 12 +++- 12 files changed, 217 insertions(+), 14 deletions(-) create mode 100644 src/frontend/apps/impress/src/assets/icons/DOCS.svg create mode 100644 src/frontend/apps/impress/src/components/ErrorPageFooter.tsx create mode 100644 src/frontend/apps/impress/src/components/ErrorPageHeader.tsx diff --git a/src/frontend/apps/impress/src/assets/icons/DOCS.svg b/src/frontend/apps/impress/src/assets/icons/DOCS.svg new file mode 100644 index 000000000..50b68e8b6 --- /dev/null +++ b/src/frontend/apps/impress/src/assets/icons/DOCS.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/frontend/apps/impress/src/components/ErrorPageFooter.tsx b/src/frontend/apps/impress/src/components/ErrorPageFooter.tsx new file mode 100644 index 000000000..b7f5d88a7 --- /dev/null +++ b/src/frontend/apps/impress/src/components/ErrorPageFooter.tsx @@ -0,0 +1,59 @@ +import { UserMenu } from '@gouvfr-lasuite/ui-kit'; +import { useTranslation } from 'react-i18next'; +import { css } from 'styled-components'; + +import { Box } from '@/components'; +import { Waffle } from '@/components/Waffle'; +import { useAuth } from '@/features/auth/hooks/useAuth'; +import { gotoLogout } from '@/features/auth/utils'; +import { HelpMenu } from '@/features/help'; + +const footerButtonStyles = css` + display: flex; + height: var(--Height, 32px); + min-width: var(--Height, 32px); + padding: 4px; + justify-content: center; + align-items: center; + gap: 7px; + border-radius: 4px; + color: var(--c--contextuals--content--semantic--neutral--tertiary); +`; + +export const ErrorPageFooter = () => { + const { t } = useTranslation(); + const { user } = useAuth(); + + const userMenu = user || { + full_name: t('Guest'), + email: '', + }; + + return ( + + {user && ( + + )} + + + + ); +}; diff --git a/src/frontend/apps/impress/src/components/ErrorPageHeader.tsx b/src/frontend/apps/impress/src/components/ErrorPageHeader.tsx new file mode 100644 index 000000000..9d0ba5bbf --- /dev/null +++ b/src/frontend/apps/impress/src/components/ErrorPageHeader.tsx @@ -0,0 +1,64 @@ +import Image from 'next/image'; +import { useTranslation } from 'react-i18next'; +import { css } from 'styled-components'; + +import DocsTitleSvg from '@/assets/icons/DOCS.svg'; +import { Box, StyledLink } from '@/components'; +import { useConfig } from '@/core'; + +export const ErrorPageHeader = () => { + const { t } = useTranslation(); + const { data: config } = useConfig(); + const icon = config?.theme_customization?.header?.icon; + + return ( + + + + {icon && ( + + )} + + + + ); +}; diff --git a/src/frontend/apps/impress/src/components/index.ts b/src/frontend/apps/impress/src/components/index.ts index 9075311ab..c55597410 100644 --- a/src/frontend/apps/impress/src/components/index.ts +++ b/src/frontend/apps/impress/src/components/index.ts @@ -5,6 +5,8 @@ export * from './DropButton'; export * from './dropdown-menu/DropdownMenu'; export * from './Emoji/EmojiPicker'; export * from './ErrorPage'; +export * from './ErrorPageFooter'; +export * from './ErrorPageHeader'; export * from './quick-search'; export * from './Icon'; export * from './InfiniteScroll'; diff --git a/src/frontend/apps/impress/src/layouts/PageLayout.tsx b/src/frontend/apps/impress/src/layouts/PageLayout.tsx index ceae98326..8a9f4490b 100644 --- a/src/frontend/apps/impress/src/layouts/PageLayout.tsx +++ b/src/frontend/apps/impress/src/layouts/PageLayout.tsx @@ -1,4 +1,4 @@ -import { PropsWithChildren } from 'react'; +import { PropsWithChildren, ReactNode } from 'react'; import { Box } from '@/components'; import { Footer } from '@/features/footer'; @@ -10,19 +10,24 @@ import { MainContent } from './MainLayout'; interface PageLayoutProps { withFooter?: boolean; withLeftPanel?: boolean; + headerSlot?: ReactNode; + footerSlot?: ReactNode; } export function PageLayout({ children, withFooter = true, withLeftPanel = true, + headerSlot, + footerSlot, }: PropsWithChildren) { return ( {withLeftPanel && } - + {headerSlot !== undefined ? headerSlot : } {children} + {footerSlot} {withFooter &&