♻️(front) update pages and app structure

Update calendar page to use new Scheduler and CalendarContext.
Update styles, error pages, and app wrapper for new components.
Minor updates to Header, Toaster and Feedback components.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/frontend/apps/calendars/src/features/feedback/Feedback.tsx

@@ -5,7 +5,7 @@ import {
   Modal,
   ModalSize,
   useModal,
-} from "@openfun/cunningham-react";
+} from "@gouvfr-lasuite/cunningham-react";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useConfig } from "../config/ConfigProvider";

src/frontend/apps/calendars/src/features/layouts/components/header/Header.tsx

@@ -17,7 +17,6 @@ export const HeaderIcon = () => {
 };
 
 export const HeaderRight = () => {
-  const { user } = useAuth();
   const { isTablet } = useResponsive();
 
   return (

src/frontend/apps/calendars/src/features/ui/components/toaster/Toaster.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@openfun/cunningham-react";
+import { Button } from "@gouvfr-lasuite/cunningham-react";
 import clsx from "clsx";
 import { ToastContainer, ToastContentProps, toast } from "react-toastify";
 

src/frontend/apps/calendars/src/pages/401.tsx

@@ -1,7 +1,7 @@
 import { login } from "@/features/auth/Auth";
 import { getSimpleLayout } from "@/features/layouts/components/simple/SimpleLayout";
 import { GenericDisclaimer } from "@/features/ui/components/generic-disclaimer/GenericDisclaimer";
-import { Button } from "@openfun/cunningham-react";
+import { Button } from "@gouvfr-lasuite/cunningham-react";
 import { useTranslation } from "react-i18next";
 
 export default function UnauthorizedPage() {

src/frontend/apps/calendars/src/pages/403.tsx

@@ -1,7 +1,7 @@
 import { getSimpleLayout } from "@/features/layouts/components/simple/SimpleLayout";
 import { GenericDisclaimer } from "@/features/ui/components/generic-disclaimer/GenericDisclaimer";
 import { Icon } from "@gouvfr-lasuite/ui-kit";
-import { Button } from "@openfun/cunningham-react";
+import { Button } from "@gouvfr-lasuite/cunningham-react";
 import { useTranslation } from "react-i18next";
 
 export default function UnauthorizedPage() {

src/frontend/apps/calendars/src/pages/_app.tsx

@@ -1,15 +1,12 @@
 import {
   createContext,
-  useContext,
+  useContext, useState,
-  useMemo,
-  useState,
   type ReactElement,
-  type ReactNode,
+  type ReactNode
 } from "react";
 import type { NextPage } from "next";
 import type { AppProps } from "next/app";
 import { CunninghamProvider } from "@gouvfr-lasuite/ui-kit";
-import { ModalProvider } from "@openfun/cunningham-react";
 import {
   MutationCache,
   Query,
@@ -34,9 +31,7 @@ import {
   removeQuotes,
   useCunninghamTheme,
 } from "@/features/ui/cunningham/useCunninghamTheme";
-import { ResponsiveDivs } from "@/features/ui/components/responsive/ResponsiveDivs";
 import { FeedbackFooterMobile } from "@/features/feedback/Feedback";
-import { useRouter } from "next/router";
 
 export type NextPageWithLayout<P = object, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: ReactElement) => ReactNode;
@@ -119,7 +114,6 @@ const MyAppInner = ({ Component, pageProps }: AppPropsWithLayout) => {
   const getLayout = Component.getLayout ?? ((page) => page);
   const { t, i18n } = useTranslation();
   const { theme } = useAppContext();
-  const router = useRouter();
   const themeTokens = useCunninghamTheme();
 
   return (
@@ -137,15 +131,14 @@ const MyAppInner = ({ Component, pageProps }: AppPropsWithLayout) => {
           currentLocale={capitalizeRegion(i18n.language)}
           theme={theme}
         >
-          <ModalProvider>
+          
             <ConfigProvider>
               <AnalyticsProvider>
                 {getLayout(<Component {...pageProps} />)}
-                <ResponsiveDivs />
                 <FeedbackFooterMobile />
               </AnalyticsProvider>
             </ConfigProvider>
-          </ModalProvider>
+          
         </CunninghamProvider>
       </QueryClientProvider>
     </>

src/frontend/apps/calendars/src/pages/calendar.scss

@@ -19,7 +19,7 @@
     flex: 1;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
+    // overflow: hidden;
   }
 }
 

src/frontend/apps/calendars/src/pages/calendar.tsx

@@ -2,53 +2,42 @@
  * Calendar page - Main calendar view with sidebar.
  */
 
-import { useCallback, useState } from "react";
+import { useCallback } from "react";
 
 import { MainLayout } from "@gouvfr-lasuite/ui-kit";
 import Head from "next/head";
 import { useTranslation } from "next-i18next";
 
 import { login, useAuth } from "@/features/auth/Auth";
-import { CalendarView, LeftPanel } from "@/features/calendar/components";
+import { LeftPanel } from "@/features/calendar/components";
-import { useCreateCalendarModal } from "@/features/calendar/components/CreateCalendarModal";
-import { useCreateEventModal } from "@/features/calendar/hooks/useCreateEventModal";
 import { useCalendars } from "@/features/calendar/hooks/useCalendars";
 import { GlobalLayout } from "@/features/layouts/components/global/GlobalLayout";
 import { HeaderRight } from "@/features/layouts/components/header/Header";
 import { SpinnerPage } from "@/features/ui/components/spinner/SpinnerPage";
 import { Toaster } from "@/features/ui/components/toaster/Toaster";
+import { Scheduler } from "@/features/calendar/components/scheduler/Scheduler";
+import { CalendarContextProvider, useCalendarContext } from "@/features/calendar/contexts";
 
 export default function CalendarPage() {
   const { t } = useTranslation();
   const { user } = useAuth();
 
-  // Calendar state
+  // Use selectedDate from context (the specific day user has clicked/selected)
-  const [selectedDate, setSelectedDate] = useState(new Date());
+  // Note: currentDate (for view sync) is used directly by MiniCalendar
+  const { selectedDate, setSelectedDate } = useCalendarContext();
 
   // Fetch calendars for the sidebar
-  const { data: calendars = [], isLoading: isLoadingCalendars } = useCalendars();
+  const { data: calendars = [] } = useCalendars();
 
-  // Create calendar modal
-  const createCalendarModal = useCreateCalendarModal();
-
-  // Create event modal
-  const createEventModal = useCreateEventModal({ 
-    calendars: calendars || [], 
-    selectedDate 
-  });
 
   // Handlers
   const handleDateSelect = useCallback((date: Date) => {
     setSelectedDate(date);
-  }, []);
+  }, [setSelectedDate]);
 
   const handleCreateEvent = useCallback(() => {
-    createEventModal.open();
+    console.log("handleCreateEvent");
-  }, [createEventModal]);
+  }, []);
-
-  const handleCreateCalendar = useCallback(() => {
-    createCalendarModal.open();
-  }, [createCalendarModal]);
 
   // Redirect to login if not authenticated
   if (!user) {
@@ -67,26 +56,24 @@ export default function CalendarPage() {
         <link rel="icon" href="/favicon.png" />
       </Head>
 
-      <div className="calendar-page">
+      
-        <div className="calendar-page__sidebar">
+        <div className="calendar-page">
-          <LeftPanel
+          <div className="calendar-page__sidebar">
-            calendars={calendars}
+            <LeftPanel
-            selectedDate={selectedDate}
+              calendars={calendars}
-            onDateSelect={handleDateSelect}
+              selectedDate={selectedDate}
-            onCreateEvent={handleCreateEvent}
+              onDateSelect={handleDateSelect}
-            onCreateCalendar={handleCreateCalendar}
+              onCreateEvent={handleCreateEvent}
-          />
+            />
+          </div>
+          <div className="calendar-page__main">
+            <Scheduler />
+     
+          </div>
         </div>
-        <div className="calendar-page__main">
+      
-          <CalendarView
-            selectedDate={selectedDate}
-            onSelectDate={handleDateSelect}
-          />
-        </div>
-      </div>
 
-      {createCalendarModal.Modal}
+      
-      {createEventModal.Modal}
       <Toaster />
     </>
   );
@@ -94,6 +81,7 @@ export default function CalendarPage() {
 
 CalendarPage.getLayout = function getLayout(page: React.ReactElement) {
   return (
+    <CalendarContextProvider>
     <div className="calendars__calendar">
       <GlobalLayout>
         <MainLayout
@@ -111,5 +99,6 @@ CalendarPage.getLayout = function getLayout(page: React.ReactElement) {
         </MainLayout>
       </GlobalLayout>
     </div>
+    </CalendarContextProvider>
   );
 };

src/frontend/apps/calendars/src/pages/index.tsx

@@ -11,7 +11,7 @@ import {
   Toaster,
   ToasterItem,
 } from "@/features/ui/components/toaster/Toaster";
-import { Button } from "@openfun/cunningham-react";
+import { Button } from "@gouvfr-lasuite/cunningham-react";
 import { useConfig } from "@/features/config/ConfigProvider";
 import { LeftPanelMobile } from "@/features/layouts/components/left-panel/LeftPanelMobile";
 import { SESSION_STORAGE_REDIRECT_AFTER_LOGIN_URL } from "@/features/api/fetchApi";
@@ -77,7 +77,7 @@ export default function HomePage() {
       <HomeGutter>
         <Hero
           logo={<div className="calendars__logo-icon" />}
-          /* banner={banner.src} */
+          banner={banner.src}
           title={t("home.title")}
           subtitle={t("home.subtitle")}
           mainButton={

src/frontend/apps/calendars/src/styles/cunningham-tokens.css

@@ -663,7 +663,7 @@
 	--c--components--gaufre--widgetpath: 'https://static.suite.anct.gouv.fr/widgets/lagaufre.js';
 	--c--components--gaufre--apiurl: 'https://lasuite.numerique.gouv.fr/api/services';
 	--c--components--favicon--src: '/assets/favicon.png';
-	--c--components--logo--src: url('/assets/logo_alpha.svg');
+	--c--components--logo--src: url('/assets/logo_beta.svg');
 	--c--components--logo-icon--src: url('/assets/logo-icon_beta.svg');
 }
 .cunningham-theme--dark{

src/frontend/apps/calendars/src/styles/globals.scss

@@ -4,20 +4,17 @@
 @use "./../features/layouts/components/global/GlobalLayout.scss";
 @use "./../features/feedback/Feedback.scss";
 @use "./../features/layouts/components/header/index.scss";
-@use "./../features/ui/components/breadcrumbs";
 @use "./../features/ui/components/toaster";
 @use "./../features/ui/components/generic-disclaimer/GenericDisclaimer.scss";
-@use "./../features/ui/components/info/InfoRow.scss";
-@use "./../features/ui/components/responsive";
 @use "./../features/ui/components/spinner/SpinnerPage.scss";
-@use "./../features/ui/components/infinite-scroll/InfiniteScroll.scss";
 @use "./../features/layouts/components/left-panel/LeftPanelMobile.scss";
 @use "./../features/calendar/components/MiniCalendar.scss";
 @use "./../features/calendar/components/CalendarList.scss";
 @use "./../features/calendar/components/LeftPanel.scss";
-@use "./../features/calendar/components/CalendarView.scss";
 @use "./../features/calendar/components/EventModal.scss";
 @use "./../features/calendar/components/RecurrenceEditor.scss";
+@use "./../features/calendar/components/AttendeesInput.scss";
+@use "./../features/calendar/components/scheduler/Scheduler.scss";
 @use "./../pages/index.scss" as *;
 @use "./../pages/calendar.scss" as *;
 html,
@@ -77,7 +74,5 @@ body {
 
 .c__datagrid--empty,
 .c__datagrid thead {
-  transition:
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
-    background-color 0.3s ease,
-    box-shadow 0.3s ease;
 }

src/frontend/apps/calendars/src/utils/useQueries.ts

@@ -1,12 +1,4 @@
 import { UseQueryOptions } from "@tanstack/react-query";
 
-
-export type HookUseQueryOptions2 = {
-  enabled?: boolean;
-}
-
-
-
-
 export type HookUseQueryOptions<T> = Omit<UseQueryOptions<T>, "queryKey" | "queryFn">;