From 635135d1ed1a00ca9ad9230de723e5e97eafbc67 Mon Sep 17 00:00:00 2001 From: Nathan Vasse Date: Wed, 22 Jul 2026 16:44:37 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20reuse=20the=20le?= =?UTF-8?q?ft=20panel=20footer=20on=20public=20layouts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The home and simple layouts rendered their own mobile-only panel with just the gaufre. Reusing the explorer footer keeps the settings entry and user profile consistent everywhere and removes the duplicate component. The index page is also reformatted by prettier on the way. --- .../components/explorer/ExplorerLayout.scss | 15 ++++++ .../left-panel/LeftPanelMobile.scss | 18 -------- .../components/left-panel/LeftPanelMobile.tsx | 18 -------- .../components/simple/SimpleLayout.tsx | 4 +- .../ui/components/user/UserProfile.tsx | 4 +- src/frontend/apps/drive/src/pages/index.tsx | 46 +++++++++---------- .../apps/drive/src/styles/globals.scss | 1 - 7 files changed, 40 insertions(+), 66 deletions(-) delete mode 100644 src/frontend/apps/drive/src/features/layouts/components/left-panel/LeftPanelMobile.scss delete mode 100644 src/frontend/apps/drive/src/features/layouts/components/left-panel/LeftPanelMobile.tsx diff --git a/src/frontend/apps/drive/src/features/layouts/components/explorer/ExplorerLayout.scss b/src/frontend/apps/drive/src/features/layouts/components/explorer/ExplorerLayout.scss index 43785486..875f2461 100644 --- a/src/frontend/apps/drive/src/features/layouts/components/explorer/ExplorerLayout.scss +++ b/src/frontend/apps/drive/src/features/layouts/components/explorer/ExplorerLayout.scss @@ -1,8 +1,17 @@ +@use "sass:map"; +@use "@/styles/cunningham-tokens-sass" as *; + +$tablet: map.get($themes, "default", "globals", "breakpoints", "tablet"); + .c__left-panel__footer__drive { padding: 12px; display: flex; gap: 4px; align-items: center; + + @media (max-width: $tablet) { + justify-content: space-between; + } } // Toast component from cunningham-react is not used in the drive app, so we hide it. @@ -29,3 +38,9 @@ .c__tooltip__content { word-break: break-word; } + +.user-profile { + display: flex; + align-items: center; + gap: 4px; +} \ No newline at end of file diff --git a/src/frontend/apps/drive/src/features/layouts/components/left-panel/LeftPanelMobile.scss b/src/frontend/apps/drive/src/features/layouts/components/left-panel/LeftPanelMobile.scss deleted file mode 100644 index 37b9d7d6..00000000 --- a/src/frontend/apps/drive/src/features/layouts/components/left-panel/LeftPanelMobile.scss +++ /dev/null @@ -1,18 +0,0 @@ -.drive__home__left-panel { - display: flex; - justify-content: center; - align-items: center; - padding: 0.75rem 0; - gap: 12px; -} - -.drive__home__left-panel__gaufre { - position: absolute; - bottom: 0; - padding: 8px 10px; - border-top: 1px solid var(--c--contextuals--border--surface--primary); - display: flex; - align-items: center; - justify-content: flex-end; - width: 100%; -} diff --git a/src/frontend/apps/drive/src/features/layouts/components/left-panel/LeftPanelMobile.tsx b/src/frontend/apps/drive/src/features/layouts/components/left-panel/LeftPanelMobile.tsx deleted file mode 100644 index 0badec63..00000000 --- a/src/frontend/apps/drive/src/features/layouts/components/left-panel/LeftPanelMobile.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Gaufre } from "@/features/ui/components/gaufre/Gaufre"; -import { useResponsive } from "@gouvfr-lasuite/ui-kit"; - -export const LeftPanelMobile = () => { - const { isTablet } = useResponsive(); - - if (!isTablet) { - return null; - } - - return ( -
-
- -
-
- ); -}; diff --git a/src/frontend/apps/drive/src/features/layouts/components/simple/SimpleLayout.tsx b/src/frontend/apps/drive/src/features/layouts/components/simple/SimpleLayout.tsx index c29d3f86..2ec58552 100644 --- a/src/frontend/apps/drive/src/features/layouts/components/simple/SimpleLayout.tsx +++ b/src/frontend/apps/drive/src/features/layouts/components/simple/SimpleLayout.tsx @@ -2,7 +2,7 @@ import { MainLayout } from "@gouvfr-lasuite/ui-kit"; import { GlobalLayout } from "../global/GlobalLayout"; import { HeaderRight } from "../header/Header"; import { Toaster } from "@/features/ui/components/toaster/Toaster"; -import { LeftPanelMobile } from "@/features/layouts/components/left-panel/LeftPanelMobile"; +import { LeftPanelFooter } from "../explorer/ExplorerLayout"; export const getSimpleLayout = (page: React.ReactElement) => { return {page}; @@ -20,7 +20,7 @@ export const SimpleLayout = ({ children }: { children: React.ReactNode }) => { } + leftPanelFooter={} rightHeaderContent={} > {children} diff --git a/src/frontend/apps/drive/src/features/ui/components/user/UserProfile.tsx b/src/frontend/apps/drive/src/features/ui/components/user/UserProfile.tsx index bb2361f2..8f467055 100644 --- a/src/frontend/apps/drive/src/features/ui/components/user/UserProfile.tsx +++ b/src/frontend/apps/drive/src/features/ui/components/user/UserProfile.tsx @@ -19,7 +19,7 @@ import { useClipboard } from "@/hooks/useCopyToClipboard"; export const UserProfile = () => { const { user } = useAuth(); return ( - <> +
{user ? ( { )} - +
); }; diff --git a/src/frontend/apps/drive/src/pages/index.tsx b/src/frontend/apps/drive/src/pages/index.tsx index 00f4891a..84489a55 100644 --- a/src/frontend/apps/drive/src/pages/index.tsx +++ b/src/frontend/apps/drive/src/pages/index.tsx @@ -14,11 +14,10 @@ import { } from "@/features/ui/components/toaster/Toaster"; import { Button } from "@gouvfr-lasuite/cunningham-react"; import { useConfig } from "@/features/config/ConfigProvider"; -import { LeftPanelMobile } from "@/features/layouts/components/left-panel/LeftPanelMobile"; import { useThemeCustomization } from "@/hooks/useThemeCustomization"; import { Feedback } from "@/features/feedback/Feedback"; import { useRedirectAfterLogin } from "@/hooks/useRedirectAfterLogin"; - +import { LeftPanelFooter } from "@/features/layouts/components/explorer/ExplorerLayout"; export default function HomePage() { const { t } = useTranslation(); @@ -28,14 +27,14 @@ export default function HomePage() { useEffect(() => { const failure = new URLSearchParams(window.location.search).get( - "auth_error" + "auth_error", ); if (failure === "alpha") { addToast( science {t("authentication.error.alpha")} - + , ); } if (failure === "user_cannot_access_app") { @@ -43,7 +42,7 @@ export default function HomePage() { lock {t("authentication.error.user_cannot_access_app")} - + , ); } }, []); @@ -58,10 +57,10 @@ export default function HomePage() { /** * If the FRONTEND_EXTERNAL_HOME_URL is set, we redirect to it. * Otherwise, we display the home page. - * + * * Redirection to FRONTEND_EXTERNAL_HOME_URL is done in this component * to avoid conflicts with the useEffect and redirection logic in the HomePage component. - * + * * HomePage: if there is a user, redirect to the explorer. * HomePageContent: if the FRONTEND_EXTERNAL_HOME_URL is set, we redirect to it. * Otherwise, we display the home page. @@ -70,7 +69,7 @@ const HomePageContent = () => { const { t } = useTranslation(); const { config } = useConfig(); const footerCustommization = useThemeCustomization("footer"); - const [redirectFailed, setRedirectFailed] = useState(false) + const [redirectFailed, setRedirectFailed] = useState(false); useEffect(() => { const checkSiteAndRedirect = async () => { @@ -80,18 +79,18 @@ const HomePageContent = () => { try { // Make sure the site is reachable before redirecting. Resilience. await fetch(config.FRONTEND_EXTERNAL_HOME_URL, { - method: 'HEAD', // Use HEAD to avoid downloading the full page - mode: 'no-cors', // Needed for cross-origin requests - }) - window.location.replace(config.FRONTEND_EXTERNAL_HOME_URL) + method: "HEAD", // Use HEAD to avoid downloading the full page + mode: "no-cors", // Needed for cross-origin requests + }); + window.location.replace(config.FRONTEND_EXTERNAL_HOME_URL); } catch (error) { - console.warn('Site is not reachable:', error) - setRedirectFailed(true) + console.warn("Site is not reachable:", error); + setRedirectFailed(true); } - } + }; - checkSiteAndRedirect() - }, [config?.FRONTEND_EXTERNAL_HOME_URL]) + checkSiteAndRedirect(); + }, [config?.FRONTEND_EXTERNAL_HOME_URL]); if (config?.FRONTEND_EXTERNAL_HOME_URL && !redirectFailed) { return null; @@ -137,15 +136,14 @@ const HomePageContent = () => {