@capytale/meta-player 0.5.3 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,7 +16,7 @@
     }
   },
   "dependencies": {
-    "@capytale/activity.js": "^3.1.10",
+    "@capytale/activity.js": "^3.1.14",
     "@capytale/capytale-anti-triche": "^0.2.1",
     "@capytale/capytale-rich-text-editor": "^0.4.3",
     "@reduxjs/toolkit": "^2.0.1",

package/src/App.tsx

@@ -22,7 +22,7 @@ import {
   selectMode,
 } from "./features/activityData/activityDataSlice";
 import settings from "./settings";
-import ReviewNavbar from "./features/navbar/ReviewNavbar";
+import ReviewNavbar from "./features/navbar/review-navbar";
 import { useSave } from "./features/activityData/hooks";
 
 type AppProps = PropsWithChildren<{}>;
@@ -45,9 +45,7 @@ const App: FC<AppProps> = (props) => {
     (e: KeyboardEvent<HTMLDivElement>) => {
       if ((e.ctrlKey || e.metaKey) && e.key === "s") {
         e.preventDefault();
-        if (isDirty) {
-          save();
-        }
+        save(); // Checks if can save inside of save()
       }
     },
     [isDirty, save],

package/src/demo.tsx

@@ -2,8 +2,8 @@ import React, { FC } from "react";
 import { createRoot } from "react-dom/client";
 
 import { MetaPlayer } from ".";
-import { ActivityQuickActionsSetter } from "./features/navbar/ActivityQuickActions";
-import { ActivitySidebarActionsSetter } from "./features/navbar/ActivitySidebarActions";
+import { ActivityQuickActionsSetter } from "./features/navbar/activity-menu/ActivityQuickActions";
+import { ActivitySidebarActionsSetter } from "./features/navbar/sidebars/ActivitySidebarActions";
 // import { useActivityJS } from "./features/activityJS/ActivityJSProvider";
 import BeforeSaveAction from "./features/activityJS/BeforeSaveAction";
 import MetaPlayerOptionsSetter from "./features/activityData/MetaPlayerOptionsSetter";

package/src/features/activityData/activityDataSlice.ts

@@ -1,113 +1,22 @@
 import type { PayloadAction } from "@reduxjs/toolkit";
 import { createAppSlice } from "../../app/createAppSlice";
-import { ActivityMode } from "@capytale/activity.js/activity/activitySession";
-import { TimeRange } from "@capytale/activity.js/common/field";
 import { InitialEditorStateType } from "@capytale/capytale-rich-text-editor";
 import {
   MetaPlayerOptions,
   defaultMetaPlayerOptions,
 } from "./metaPlayerOptions";
 import { wf } from "@capytale/activity.js/activity/field/workflow";
+import { ActivityJSData, defaultActivityJSData, EditorType } from "./activityJsData";
+import { defaultUIState, SaveState, UIState } from "./uiState";
 
-export type StudentInfo = {
-  firstName: string;
-  lastName: string;
-  class: string;
-};
-
-export type Instructions = {
-  value: InitialEditorStateType | null;
-  htmlValue: string | null;
-  format: "html" | "markdown" | "lexical";
-};
-
-export type Icon = {
-  path: string;
-  style?: any;
-};
-
-export type EditorType = "rich" | "none";
 
-interface ActivityJSData {
-  title: string;
-  mode: ActivityMode;
-  returnUrl: string;
-  helpUrl: string;
-  code: string | null;
-  nid: number;
-  activityNid: number;
-  accessTrMode: string;
-  accessTimerange: TimeRange | null;
-  studentInfo: StudentInfo | null;
-  instructions: Instructions | null;
-  instructionsType: EditorType;
-  pdfInstructions: Blob | null;
-  sharedNotesContent: InitialEditorStateType | null;
-  sharedNotesType: EditorType;
-  codeLink: string | null;
-  icon: Icon | null;
-  friendlyType: string;
-  comments: string | null;
-  grading: string | null;
-  workflow: wf | null | undefined;
-  antiCheat?: null | {
-    passwordHash?: string | null;
-    startLocked: boolean;
-  };
-}
 
-type SaveState = "idle" | "should-save" | "saving";
-
-interface UIState {
-  canSaveInstructions: boolean;
-  canSaveSharedNotes: boolean;
-  saveState: SaveState;
-  isPlayerDirty: boolean;
-  isMPDirty: boolean;
-  isAntiCheatExitDetectionDisabled: boolean;
-}
-
-export interface ActivityDataState
-  extends ActivityJSData,
-    MetaPlayerOptions,
-    UIState {}
+export type ActivityDataState = ActivityJSData & MetaPlayerOptions & UIState;
 
 const initialState: ActivityDataState = {
-  title: "",
-  mode: "view",
-  returnUrl: "",
-  helpUrl: "",
-  code: null,
-  nid: 0,
-  activityNid: 0,
-  accessTrMode: "",
-  accessTimerange: null,
-  studentInfo: {
-    firstName: "",
-    lastName: "",
-    class: "",
-  },
-  instructions: null,
-  instructionsType: "rich",
-  pdfInstructions: null,
-  sharedNotesContent: null,
-  sharedNotesType: "none",
-  codeLink: null,
-  icon: null,
-  friendlyType: "",
-  comments: null,
-  grading: null,
-  workflow: null,
-
+  ...defaultActivityJSData,
   ...defaultMetaPlayerOptions,
-
-  canSaveInstructions: true,
-  canSaveSharedNotes: true,
-  saveState: "idle",
-  isPlayerDirty: false,
-  isMPDirty: false,
-
-  isAntiCheatExitDetectionDisabled: false,
+  ...defaultUIState,
 };
 
 // If you are not using async thunks you can use the standalone `createSlice`.
@@ -144,6 +53,7 @@ export const activityDataSlice = createAppSlice({
         state.activityNid = action.payload.activityNid;
         state.workflow = action.payload.workflow;
         state.antiCheat = action.payload.antiCheat;
+        state.hasEvaluations = action.payload.hasEvaluations;
       },
     ),
     setPlayerSettings: create.reducer(
@@ -153,6 +63,7 @@ export const activityDataSlice = createAppSlice({
         state.pedagoLayout = action.payload.pedagoLayout;
         state.supportsLightTheme = action.payload.supportsLightTheme;
         state.supportsDarkTheme = action.payload.supportsDarkTheme;
+        state.preventEditIfHasEvaluations = action.payload.preventEditIfHasEvaluations;
       },
     ),
     setCanSaveInstructions: create.reducer(
@@ -243,6 +154,7 @@ export const activityDataSlice = createAppSlice({
     selectCanReset: (data) => data.canReset,
     selectPedagoLayout: (data) => data.pedagoLayout,
     selectHasGradingOrComments: (data) => !!(data.grading || data.comments),
+    selectPreventEditIfHasEvaluations: (data) => data.preventEditIfHasEvaluations,
     selectSaveState: (data) => data.saveState,
     selectReturnUrl: (data) => data.returnUrl,
     selectNid: (data) => data.nid,
@@ -275,6 +187,7 @@ export const activityDataSlice = createAppSlice({
       ),
     selectIsAntiCheatExitDetectionDisabled: (data) =>
       data.isAntiCheatExitDetectionDisabled,
+    selectHasEvaluations: (data) => data.hasEvaluations,
   },
 });
 
@@ -315,6 +228,7 @@ export const {
   selectCanReset,
   selectPedagoLayout,
   selectHasGradingOrComments,
+  selectPreventEditIfHasEvaluations,
   selectSaveState,
   selectReturnUrl,
   selectNid,
@@ -332,4 +246,5 @@ export const {
   selectAntiCheat,
   selectHasAntiCheat,
   selectIsAntiCheatExitDetectionDisabled,
+  selectHasEvaluations,
 } = activityDataSlice.selectors;

package/src/features/activityData/activityJsData.ts

@@ -0,0 +1,81 @@
+import { ActivityMode } from "@capytale/activity.js/activity/activitySession";
+import { TimeRange } from "@capytale/activity.js/common/field";
+import { InitialEditorStateType } from "@capytale/capytale-rich-text-editor";
+import { wf } from "@capytale/activity.js/activity/field/workflow";
+
+export type StudentInfo = {
+  firstName: string;
+  lastName: string;
+  class: string;
+};
+
+export type Instructions = {
+  value: InitialEditorStateType | null;
+  htmlValue: string | null;
+  format: "html" | "markdown" | "lexical";
+};
+
+export type Icon = {
+  path: string;
+  style?: any;
+};
+
+export type EditorType = "rich" | "none";
+
+export type ActivityJSData = {
+  title: string;
+  mode: ActivityMode;
+  returnUrl: string;
+  helpUrl: string;
+  code: string | null;
+  nid: number;
+  activityNid: number;
+  accessTrMode: string;
+  accessTimerange: TimeRange | null;
+  studentInfo: StudentInfo | null;
+  instructions: Instructions | null;
+  instructionsType: EditorType;
+  pdfInstructions: Blob | null;
+  sharedNotesContent: InitialEditorStateType | null;
+  sharedNotesType: EditorType;
+  codeLink: string | null;
+  icon: Icon | null;
+  friendlyType: string;
+  comments: string | null;
+  grading: string | null;
+  workflow: wf | null | undefined;
+  antiCheat?: null | {
+    passwordHash?: string | null;
+    startLocked: boolean;
+  };
+  hasEvaluations: boolean | null;
+}
+
+export const defaultActivityJSData: ActivityJSData = {
+  title: "",
+  mode: "view",
+  returnUrl: "",
+  helpUrl: "",
+  code: null,
+  nid: 0,
+  activityNid: 0,
+  accessTrMode: "",
+  accessTimerange: null,
+  studentInfo: {
+    firstName: "",
+    lastName: "",
+    class: "",
+  },
+  instructions: null,
+  instructionsType: "rich",
+  pdfInstructions: null,
+  sharedNotesContent: null,
+  sharedNotesType: "none",
+  codeLink: null,
+  icon: null,
+  friendlyType: "",
+  comments: null,
+  grading: null,
+  workflow: null,
+  hasEvaluations: null,
+};

package/src/features/activityData/hooks.ts

@@ -1,14 +1,48 @@
-import { useAppDispatch } from "../../app/hooks";
-import { setIsPlayerDirty, setSaveState } from "./activityDataSlice";
+import { useCallback } from "react";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { selectShowSaveForStudents } from "../layout/layoutSlice";
+import { selectHasEvaluations, selectIsDirty, selectMode, selectPreventEditIfHasEvaluations, selectShowSaveButton, setIsPlayerDirty, setSaveState } from "./activityDataSlice";
 
-const useNotifyIsDirty = () => {
+export const useNotifyIsDirty = () => {
   const dispatch = useAppDispatch();
   return (isDirty: boolean = true) => dispatch(setIsPlayerDirty(isDirty));
 };
 
-const useSave = () => {
+export const useCanSave = () => {
+  const isDirty = useAppSelector(selectIsDirty);
+  const preventEditIfHasEvaluations = useAppSelector(
+    selectPreventEditIfHasEvaluations,
+  );
+  const hasEvaluations = useAppSelector(selectHasEvaluations);
+
+  const mode = useAppSelector(selectMode);
+  const showSaveButton = useAppSelector(selectShowSaveButton);
+  const showSaveForStudents = useAppSelector(selectShowSaveForStudents);
+  const hasSaveButton =
+    showSaveButton && !(mode === "assignment" && !showSaveForStudents);
+
+  if (!hasSaveButton) {
+    return false;
+  }
+
+  if (mode === "create" && hasEvaluations && preventEditIfHasEvaluations) {
+    return false;
+  }
+
+  if (!isDirty) {
+    return false;
+  }
+
+  return true;
+}
+
+export const useSave = () => {
   const dispatch = useAppDispatch();
-  return () => dispatch(setSaveState("should-save"));
+  const canSave = useCanSave();
+  const setShouldSave = useCallback(() => {
+    if (canSave) {
+      dispatch(setSaveState("should-save"))
+    }
+  }, [dispatch, canSave]);
+  return setShouldSave;
 };
-
-export { useNotifyIsDirty, useSave };

package/src/features/activityData/metaPlayerOptions.ts

@@ -1,11 +1,12 @@
 export type MetaPlayerOptions = {
   hasInstructions: boolean;
   canReset: boolean;
+  preventEditIfHasEvaluations: boolean;
   pedagoLayout:
-    | "horizontal"
-    | "vertical"
-    | "default-horizontal"
-    | "default-vertical";
+  | "horizontal"
+  | "vertical"
+  | "default-horizontal"
+  | "default-vertical";
   supportsLightTheme: boolean;
   supportsDarkTheme: boolean;
 };
@@ -13,6 +14,7 @@ export type MetaPlayerOptions = {
 export const defaultMetaPlayerOptions: MetaPlayerOptions = {
   hasInstructions: true,
   canReset: true,
+  preventEditIfHasEvaluations: false,
   pedagoLayout: "default-horizontal",
   supportsLightTheme: true,
   supportsDarkTheme: false,

package/src/features/activityData/uiState.ts

@@ -0,0 +1,21 @@
+export type SaveState = "idle" | "should-save" | "saving";
+
+export type UIState = {
+  canSaveInstructions: boolean;
+  canSaveSharedNotes: boolean;
+  saveState: SaveState;
+  isPlayerDirty: boolean;
+  isMPDirty: boolean;
+  
+  isAntiCheatExitDetectionDisabled: boolean;
+}
+
+export const defaultUIState: UIState = {
+  canSaveInstructions: true,
+  canSaveSharedNotes: true,
+  saveState: "idle",
+  isPlayerDirty: false,
+  isMPDirty: false,
+
+  isAntiCheatExitDetectionDisabled: false,
+};

package/src/features/activityJS/ActivityJSProvider.tsx

@@ -97,6 +97,7 @@ export const ActivityJSProvider: FC<ActivityJSProviderProps> = (props) => {
               startLocked: !ab.assignmentNode?.isNew,
             }
           : null,
+        hasEvaluations: ab.activityNode.has_evaluation.value,
       }),
     );
     tracker.trackActivity(data);

package/src/features/navbar/{ActivityInfo.tsx → activity-info/index.tsx}

@@ -1,10 +1,10 @@
-import { useAppSelector } from "../../app/hooks";
+import { useAppSelector } from "../../../app/hooks";
 import {
   selectActivityInfo,
   selectIcon,
   selectMode,
-} from "../activityData/activityDataSlice";
-import { studentNameFromInfo } from "./student-utils";
+} from "../../activityData/activityDataSlice";
+import { studentNameFromInfo } from "../student-utils";
 import styles from "./style.module.scss";
 
 const ActivityInfo: React.FC = () => {

package/src/features/navbar/activity-info/style.module.scss

@@ -0,0 +1,38 @@
+.activityInfo {
+  flex-shrink: 1;
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  gap: 12px;
+}
+
+.activityInfoText {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  & > * {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+}
+
+.activityInfoTitle {
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.activityLogo {
+  width: 35px;
+  height: 37px;
+  border-radius: 6px;
+  flex-shrink: 0;
+  @media only screen and (max-width: 992px) {
+    display: none;
+  }
+}

package/src/features/navbar/{ActivityQuickActions.tsx → activity-menu/ActivityQuickActions.tsx}

@@ -1,13 +1,13 @@
 import { FC, useEffect } from "react";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { useAppDispatch, useAppSelector } from "../../../app/hooks";
 import {
   QuickAction,
   selectQuickActions,
   setQuickActions,
   usePerformQuickAction,
-} from "./navbarSlice";
+} from "../navbarSlice";
 import { Button } from "primereact/button";
-import settings from "../../settings";
+import settings from "../../../settings";
 
 const ActivityQuickActions: FC<{}> = () => {
   const quickActions = useAppSelector(selectQuickActions);

package/src/features/navbar/{ActivityMenu.tsx → activity-menu/index.tsx}

@@ -3,22 +3,22 @@ import styles from "./style.module.scss";
 
 import { Button } from "primereact/button";
 import { Sidebar } from "primereact/sidebar";
-import SettingsSidebarContent from "./SettingsSidebarContent";
-import settings from "../../settings";
+import SettingsSidebarContent from "../sidebars/SettingsSidebarContent";
+import settings from "../../../settings";
 import ActivityQuickActions from "./ActivityQuickActions";
-import useFullscreen from "../../utils/useFullscreen";
-import { useActivityJS } from "../activityJS/ActivityJSProvider";
+import useFullscreen from "../../../utils/useFullscreen";
+import { useActivityJS } from "../../activityJS/ActivityJSProvider";
 import { Dialog } from "primereact/dialog";
 import capytaleUI from "@capytale/activity.js/backend/capytale/ui";
-import { useAppSelector } from "../../app/hooks";
-import { selectHasAntiCheat } from "../activityData/activityDataSlice";
-import AttachedFilesSidebarContent from "./AttachedFilesSidebarContent";
+import { useAppSelector } from "../../../app/hooks";
+import { selectHasAntiCheat } from "../../activityData/activityDataSlice";
+import AttachedFilesSidebarContent from "../sidebars/AttachedFilesSidebarContent";
 import { Badge } from "primereact/badge";
-import { useAttachedFiles } from "../functionalities/hooks";
+import { useAttachedFiles } from "../../functionalities/hooks";
 import {
   selectAttachedFilesEnabled,
   selectAttachedFilesOptions,
-} from "../functionalities/functionalitiesSlice";
+} from "../../functionalities/functionalitiesSlice";
 
 const ActivityMenu: React.FC = memo(() => {
   const [settingsSidebarVisible, setSettingsSidebarVisible] = useState(false);

package/src/features/navbar/activity-menu/style.module.scss

@@ -0,0 +1,7 @@
+.activityMenu {
+  padding-right: 16px;
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  align-items: center;
+}

package/src/features/navbar/{Countdown.tsx → capytale-menu/Countdown.tsx}

@@ -1,12 +1,12 @@
 import { FC, ReactNode, useCallback, useMemo, useRef, useState } from "react";
 import { useInterval } from "primereact/hooks";
 import { Toast } from "primereact/toast";
-import { useActivityJS } from "../activityJS/ActivityJSProvider";
-import { useAppSelector } from "../../app/hooks";
-import { selectIsDirty, selectMode } from "../activityData/activityDataSlice";
+import { useActivityJS } from "../../activityJS/ActivityJSProvider";
+import { useAppSelector } from "../../../app/hooks";
+import { selectIsDirty, selectMode } from "../../activityData/activityDataSlice";
 import { Button } from "primereact/button";
-import { useSave } from "../activityData/hooks";
-import serverClock from "../../utils/server-clock";
+import { useSave } from "../../activityData/hooks";
+import serverClock from "../../../utils/server-clock";
 
 // TODO use https://capytale2.ac-paris.fr/vanilla/time-s.php
 // https://forge.apps.education.fr/capytale/activity-js/-/blob/main/src/backend/capytale/clock.ts?ref_type=heads

package/src/features/navbar/capytale-menu/CountdownAndSaveButton.tsx

@@ -0,0 +1,115 @@
+import { FC, useMemo, useState } from "react";
+import Countdown from "./Countdown";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { ML } from "../../../utils/breakpoints";
+import { useAppDispatch, useAppSelector } from "../../../app/hooks";
+import {
+  selectHasEvaluations,
+  selectIsDirty,
+  selectMode,
+  selectPreventEditIfHasEvaluations,
+  selectSaveState,
+  selectShowSaveButton,
+  setSaveState,
+} from "../../activityData/activityDataSlice";
+import { useWindowSize } from "@uidotdev/usehooks";
+import { selectShowSaveForStudents } from "../../layout/layoutSlice";
+import settings from "../../../settings";
+
+const CountdownAndSaveButton: FC = () => {
+  const dispatch = useAppDispatch();
+  const saveState = useAppSelector(selectSaveState);
+  const windowsSize = useWindowSize();
+  const isQuiteSmall = useMemo(
+    () => windowsSize.width && windowsSize.width < ML,
+    [windowsSize.width],
+  );
+  const isDirty = useAppSelector(selectIsDirty);
+  const preventEditIfHasEvaluations = useAppSelector(
+    selectPreventEditIfHasEvaluations,
+  );
+  const hasEvaluations = useAppSelector(selectHasEvaluations);
+
+  const mode = useAppSelector(selectMode);
+  const showSaveButton = useAppSelector(selectShowSaveButton);
+  const showSaveForStudents = useAppSelector(selectShowSaveForStudents);
+  const hasSaveButton =
+    showSaveButton && !(mode === "assignment" && !showSaveForStudents);
+
+  const [editForbiddenDialogVisible, setEditForbiddenDialogVisible] =
+    useState(false);
+
+  if (!hasSaveButton) {
+    return null;
+  }
+
+  if (mode === "create" && hasEvaluations && preventEditIfHasEvaluations) {
+    return (
+      <>
+        <Button
+          label={isQuiteSmall ? undefined : "Modification interdite"}
+          aria-label="Modification interdite"
+          severity="danger"
+          size="small"
+          icon="pi pi-save"
+          loading={saveState !== "idle"}
+          onClick={() => {
+            setEditForbiddenDialogVisible(true);
+          }}
+          tooltip={"Évaluations déjà attribuées"}
+          tooltipOptions={{
+            position: "bottom",
+            showDelay: settings.TOOLTIP_SHOW_DELAY,
+            showOnDisabled: true,
+          }}
+        />
+        <Dialog
+          header="Modification interdite"
+          visible={editForbiddenDialogVisible}
+          onHide={() => {
+            if (!editForbiddenDialogVisible) return;
+            setEditForbiddenDialogVisible(false);
+          }}
+          style={{ maxWidth: "35rem" }}
+        >
+          <p className="m-0">
+            Vous avez déjà donné des évaluations à vos élèves. Ce type
+            d'activité ne supporte pas la modification dans ce cas car cela
+            rendrait les résultats des élèves incohérents.
+          </p>
+          <p className="m-0 mt-1">
+            Si vous souhaitez modifier cette activité, vous pouvez la clôner et
+            modifier la copie, que vous pouvez ensuite proposer à vos élèves.
+          </p>
+        </Dialog>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Countdown />
+      <Button
+        label={isQuiteSmall ? undefined : "Enregistrer"}
+        aria-label="Enregistrer"
+        disabled={!isDirty}
+        severity={"warning"}
+        size="small"
+        icon="pi pi-save"
+        loading={saveState !== "idle"}
+        onClick={() => {
+          dispatch(setSaveState("should-save"));
+        }} /**
+        tooltip={isDirty ? "Enregistrer l'activité" : "Rien à enregistrer"}
+        tooltipOptions={{
+          position: "bottom",
+          showDelay: settings.TOOLTIP_SHOW_DELAY,
+          showOnDisabled: true,
+        }} */
+      />
+    </>
+  );
+};
+
+export default CountdownAndSaveButton;

package/src/features/navbar/{CapytaleMenu.tsx → capytale-menu/index.tsx}

@@ -7,52 +7,36 @@ import { OverlayPanel } from "primereact/overlaypanel";
 import styles from "./style.module.scss";
 import { useMemo, useRef } from "react";
 import { useWindowSize } from "@uidotdev/usehooks";
-import { ML, XL } from "../../utils/breakpoints";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { XL } from "../../../utils/breakpoints";
+import { useAppDispatch, useAppSelector } from "../../../app/hooks";
 import {
-  selectIsDirty,
   selectMode,
-  selectSaveState,
   selectSharingInfo,
-  selectShowSaveButton,
   selectWorkflow,
   setSaveState,
-} from "../activityData/activityDataSlice";
-import { copyToClipboard } from "../../utils/clipboard";
-import settings from "../../settings";
+} from "../../activityData/activityDataSlice";
+import { copyToClipboard } from "../../../utils/clipboard";
+import settings from "../../../settings";
 import { wf } from "@capytale/activity.js/activity/field/workflow";
 import capytaleUI from "@capytale/activity.js/backend/capytale/ui";
-import ButtonDoubleIcon from "../../utils/ButtonDoubleIcon";
-import CardSelector from "../../utils/CardSelector";
-import { useActivityJS } from "../activityJS/ActivityJSProvider";
-import {
-  selectShowSaveForStudents,
-  selectShowWorkflow,
-} from "../layout/layoutSlice";
-import Countdown from "./Countdown";
+import ButtonDoubleIcon from "../../../utils/ButtonDoubleIcon";
+import CardSelector from "../../../utils/CardSelector";
+import { useActivityJS } from "../../activityJS/ActivityJSProvider";
+import { selectShowWorkflow } from "../../layout/layoutSlice";
+import CountdownAndSaveButton from "./CountdownAndSaveButton";
 
 const CapytaleMenu: React.FC = () => {
   const dispatch = useAppDispatch();
   const activityJS = useActivityJS();
   const sharingInfo = useAppSelector(selectSharingInfo);
-  const saveState = useAppSelector(selectSaveState);
   const windowsSize = useWindowSize();
   const mode = useAppSelector(selectMode);
   const workflow = useAppSelector(selectWorkflow);
-  const isDirty = useAppSelector(selectIsDirty);
-  const showSaveButton = useAppSelector(selectShowSaveButton);
-  const showSaveForStudents = useAppSelector(selectShowSaveForStudents);
-  const hasSaveButton =
-    showSaveButton && !(mode === "assignment" && !showSaveForStudents);
   const showWorkflow = useAppSelector(selectShowWorkflow);
   const isLarge = useMemo(
     () => windowsSize.width && windowsSize.width >= XL,
     [windowsSize.width],
   );
-  const isQuiteSmall = useMemo(
-    () => windowsSize.width && windowsSize.width < ML,
-    [windowsSize.width],
-  );
   const isInIframe = useMemo(() => capytaleUI.isInCapytaletIframe(), []);
   const toast = useRef<Toast>(null);
   const changeWorkflow = (value: wf) => {
@@ -91,31 +75,7 @@ const CapytaleMenu: React.FC = () => {
             }}
           />
         )}
-        {
-          hasSaveButton && (
-            <>
-              <Countdown />
-              <Button
-                label={isQuiteSmall ? undefined : "Enregistrer"}
-                aria-label="Enregistrer"
-                disabled={!isDirty}
-                severity={"warning"}
-                size="small"
-                icon="pi pi-save"
-                loading={saveState !== "idle"}
-                onClick={() => {
-                  dispatch(setSaveState("should-save"));
-                }}
-              />
-            </>
-          ) /**
-            tooltip={isDirty ? "Enregistrer l'activité" : "Rien à enregistrer"}
-            tooltipOptions={{
-              position: "bottom",
-              showDelay: settings.TOOLTIP_SHOW_DELAY,
-              showOnDisabled: true,
-            }} */
-        }
+        <CountdownAndSaveButton />
 
         {mode === "create" && sharingInfo.code && (
           <ButtonGroup>
@@ -172,6 +132,7 @@ const CapytaleMenu: React.FC = () => {
             {mode === "assignment" && workflow === "current" && (
               <Button
                 aria-label="Rendre la copie"
+                size="small"
                 outlined
                 label="Rendre"
                 icon="pi pi-envelope"

package/src/features/navbar/capytale-menu/style.module.scss

@@ -0,0 +1,9 @@
+.capytaleMenu {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+}
+
+.overlayPanelWorkflowTitle {
+  margin-top: 0;
+}

package/src/features/navbar/index.tsx

@@ -1,8 +1,8 @@
 import { MD } from "../../utils/breakpoints";
 import { useWindowSize } from "@uidotdev/usehooks";
-import ActivityInfo from "./ActivityInfo";
-import ActivityMenu from "./ActivityMenu";
-import CapytaleMenu from "./CapytaleMenu";
+import ActivityInfo from "./activity-info";
+import ActivityMenu from "./activity-menu";
+import CapytaleMenu from "./capytale-menu";
 import styles from "./style.module.scss";
 import { useMemo } from "react";
 import { useAppSelector } from "../../app/hooks";

package/src/features/navbar/{GradingNav.tsx → review-navbar/GradingNav.tsx}

@@ -2,19 +2,21 @@ import { useState, useEffect, useMemo } from "react";
 import evalApi from "@capytale/activity.js/backend/capytale/evaluation";
 import { Dropdown } from "primereact/dropdown";
 
-import { useAppSelector } from "../../app/hooks";
+import { useAppSelector } from "../../../app/hooks";
 import {
+  selectActivityInfo,
   selectActivityNid,
   selectMode,
   selectNid,
-} from "../activityData/activityDataSlice";
-import { studentNameFromInfo } from "./student-utils";
+} from "../../activityData/activityDataSlice";
+import { studentNameFromInfo } from "../student-utils";
 
 import { SaInfo } from "@capytale/activity.js/activity/evaluation/evaluation";
 import { SelectItem, SelectItemOptionsType } from "primereact/selectitem";
 import { Button } from "primereact/button";
 
 const GradingNav: React.FC = () => {
+  const activityInfo = useAppSelector(selectActivityInfo);
   const [studentList, setStudentList] = useState<SaInfo[]>([]);
   const nid = useAppSelector(selectNid) as number;
   const mode = useAppSelector(selectMode);
@@ -71,7 +73,7 @@ const GradingNav: React.FC = () => {
   }, [studentList]);
 
   if (studentList.length === 0) {
-    return <Dropdown loading placeholder="Chargement..." />;
+    return <span>{studentNameFromInfo(activityInfo.studentInfo)}</span>;
   }
 
   const firstNid = studentList[0].nid as number;

package/src/features/navbar/review-navbar/style.module.scss

@@ -0,0 +1,22 @@
+.reviewNavbar {
+  color-scheme: dark;
+  background-color: var(--surface-500);
+  --review-navbar-text-color: rgba(255, 255, 255, 0.95);
+  color: var(--review-navbar-text-color);
+  padding: 4px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  & :global(.p-button-secondary) {
+    border-color: var(--review-navbar-text-color);
+    color: var(--review-navbar-text-color);
+  }
+  & :global(.p-dropdown) {
+    border-color: var(--review-navbar-text-color);
+    border-left-width: 0;
+    border-right-width: 0;
+  }
+  :global(.dark-theme) & {
+    background-color: var(--surface-100);
+  }
+}

package/src/features/navbar/{ActivitySidebarActions.tsx → sidebars/ActivitySidebarActions.tsx}

@@ -1,13 +1,13 @@
 import { FC, useEffect } from "react";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { useAppDispatch, useAppSelector } from "../../../app/hooks";
 import {
   QuickAction,
   selectSidebarActions,
   setSidebarActions,
   usePerformQuickAction,
-} from "./navbarSlice";
+} from "../navbarSlice";
 import { Button } from "primereact/button";
-import settings from "../../settings";
+import settings from "../../../settings";
 
 const ActivitySidebarActions: FC<{}> = () => {
   const sidebarActions = useAppSelector(selectSidebarActions);

package/src/features/navbar/{AttachedFilesSidebarContent.tsx → sidebars/AttachedFilesSidebarContent.tsx}

@@ -1,16 +1,16 @@
 import { FC, useRef } from "react";
-import { useAttachedFiles } from "../functionalities/hooks";
-import { useAppSelector } from "../../app/hooks";
+import { useAttachedFiles } from "../../functionalities/hooks";
+import { useAppSelector } from "../../../app/hooks";
 import {
   AttachedFileData,
   selectAttachedFilesOptions,
-} from "../functionalities/functionalitiesSlice";
+} from "../../functionalities/functionalitiesSlice";
 import { Button } from "primereact/button";
 import { Toast } from "primereact/toast";
 
 import styles from "./AttachedFilesSidebarContent.module.scss";
-import { copyToClipboard } from "../../utils/clipboard";
-import { downloadFile } from "../../utils/download";
+import { copyToClipboard } from "../../../utils/clipboard";
+import { downloadFile } from "../../../utils/download";
 import { useFileUpload } from "use-file-upload";
 
 const AttachedFilesSidebarContent: FC = () => {

package/src/features/navbar/{SettingsSidebarContent.tsx → sidebars/SettingsSidebarContent.tsx}

@@ -2,8 +2,8 @@ import { FC } from "react";
 
 import { Fieldset } from "primereact/fieldset";
 
-import { selectOrientation, setLayout } from "../layout/layoutSlice";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { selectOrientation, setLayout } from "../../layout/layoutSlice";
+import { useAppDispatch, useAppSelector } from "../../../app/hooks";
 import { RadioButton } from "primereact/radiobutton";
 
 import styles from "./style.module.scss";
@@ -11,19 +11,19 @@ import {
   selectThemeNameOrAuto,
   setAutoSwitch,
   switchToTheme,
-} from "../theming/themingSlice";
-import { selectSidebarActions } from "./navbarSlice";
+} from "../../theming/themingSlice";
+import { selectSidebarActions } from "../navbarSlice";
 import ActivitySidebarActions from "./ActivitySidebarActions";
 import { classNames } from "primereact/utils";
 import {
   selectCanChoosePedagoLayout,
   selectCanChooseTheme,
-} from "../activityData/activityDataSlice";
-import { ActivitySettingsDisplay } from "../activitySettings";
+} from "../../activityData/activityDataSlice";
+import { ActivitySettingsDisplay } from "../../activitySettings";
 import { Button } from "primereact/button";
 import { ConfirmPopup, confirmPopup } from "primereact/confirmpopup";
-import settings from "../../settings";
-import { useReset } from "../activityJS/hooks";
+import settings from "../../../settings";
+import { useReset } from "../../activityJS/hooks";
 
 type SettingsSidebarContentProps = {
   showHelp?: () => void;

package/src/features/navbar/sidebars/style.module.scss

@@ -0,0 +1,15 @@
+.sidebarCapytaleActions {
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  & > button {
+    width: 100%;
+  }
+}
+
+.sidebarFieldsetButtons :global(.p-fieldset-content) {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}

package/src/features/navbar/student-utils.ts

@@ -1,4 +1,4 @@
-import { StudentInfo } from "../activityData/activityDataSlice";
+import { StudentInfo } from "../activityData/activityJsData";
 
 export function studentNameFromInfo(studentInfo: StudentInfo | null) {
   if (!studentInfo || (!studentInfo.firstName && !studentInfo.lastName)) {

package/src/features/navbar/style.module.scss

@@ -31,29 +31,6 @@
   }
 }
 
-.reviewNavbar {
-  color-scheme: dark;
-  background-color: var(--surface-500);
-  --review-navbar-text-color: rgba(255, 255, 255, 0.95);
-  color: var(--review-navbar-text-color);
-  padding: 4px 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  & :global(.p-button-secondary) {
-    border-color: var(--review-navbar-text-color);
-    color: var(--review-navbar-text-color);
-  }
-  & :global(.p-dropdown) {
-    border-color: var(--review-navbar-text-color);
-    border-left-width: 0;
-    border-right-width: 0;
-  }
-  :global(.dark-theme) & {
-    background-color: var(--surface-100);
-  }
-}
-
 .navbarContainer {
   height: 60px;
   flex-grow: 1;
@@ -86,76 +63,3 @@
     }
   }
 }
-
-.capytaleMenu {
-  align-items: center;
-  display: flex;
-  gap: 8px;
-}
-
-.activityInfo {
-  flex-shrink: 1;
-  flex-grow: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  gap: 12px;
-}
-
-.activityInfoText {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  & > * {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 100%;
-  }
-}
-
-.activityInfoTitle {
-  font-size: 20px;
-  font-weight: 500;
-}
-
-.activityLogo {
-  width: 35px;
-  height: 37px;
-  border-radius: 6px;
-  flex-shrink: 0;
-  @media only screen and (max-width: 992px) {
-    display: none;
-  }
-}
-
-.activityMenu {
-  padding-right: 16px;
-  display: flex;
-  gap: 8px;
-  justify-content: center;
-  align-items: center;
-}
-
-.sidebarFieldsetButtons :global(.p-fieldset-content) {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.sidebarCapytaleActions {
-  margin-bottom: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  & > button {
-    width: 100%;
-  }
-}
-
-.overlayPanelWorkflowTitle {
-  margin-top: 0;
-}

package/src/features/pedago/PedagoCommands.tsx

@@ -215,6 +215,8 @@ const HorizontalDocumentSelector = () => {
       {items.map((item) => (
         <div
           className={styles.pedagoHorizontalTab}
+          role="button"
+          aria-label={`Basculer vers l'onglet ${item.name}`}
           onClick={() => dispatch(setPedagoTab(item.value))}
           data-selected={item.value === pedagoTab}
           key={item.value}

package/src/features/pedago/index.tsx

@@ -57,6 +57,13 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
       <PedagoCommands />
       <div
         className={styles.pedagoContent}
+        aria-label={
+          pedagoTab === "instructions"
+            ? "Consignes"
+            : pedagoTab === "pdf"
+              ? "PDF"
+              : "Notes partagées"
+        }
         data-grading-visible={isGradingVisible}
       >
         {!isGradingVisible && (
@@ -90,6 +97,13 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
               >
                 <Panel
                   className={styles.fullSizePanel}
+                  aria-label={
+                    pedagoTab === "instructions"
+                      ? "Consignes"
+                      : pedagoTab === "pdf"
+                        ? "PDF"
+                        : "Notes partagées"
+                  }
                   header={
                     pedagoTab === "instructions"
                       ? "Consignes"

package/src/index.tsx

@@ -13,17 +13,21 @@ import {
   useActivityJS,
   useActivityJsEssentials,
 } from "./features/activityJS/ActivityJSProvider";
-import { useNotifyIsDirty, useSave } from "./features/activityData/hooks";
+import { useNotifyIsDirty, useCanSave, useSave } from "./features/activityData/hooks";
 import { useOrientation } from "./features/layout/hooks";
-import { ActivitySidebarActionsSetter } from "./features/navbar/ActivitySidebarActions";
-import { ActivityQuickActionsSetter } from "./features/navbar/ActivityQuickActions";
+import { ActivitySidebarActionsSetter } from "./features/navbar/sidebars/ActivitySidebarActions";
+import { ActivityQuickActionsSetter } from "./features/navbar/activity-menu/ActivityQuickActions";
 import ActivitySettingsSetter from "./features/activitySettings/ActivitySettingsSetter";
 import IsDirtySetter from "./features/activityData/IsDirtySetter";
 import AttachedFilesFunctionality from "./features/functionalities/AttachedFilesFunctionality";
 import { useRefreshAttachedFiles } from "./features/functionalities/hooks";
+import { useActivitySettings } from "./features/activitySettings/hooks";
 import { Toast } from "./external/prime";
 import type { ToastMessage } from "./external/prime";
-import type { AttachedFileData, UploadedFileInfo } from "./features/functionalities/functionalitiesSlice";
+import type {
+  AttachedFileData,
+  UploadedFileInfo,
+} from "./features/functionalities/functionalitiesSlice";
 
 export {
   MetaPlayer,
@@ -37,9 +41,11 @@ export {
   useActivityJS,
   useActivityJsEssentials,
   useNotifyIsDirty,
+  useCanSave,
   useSave,
   useOrientation,
   useThemeType,
+  useActivitySettings,
   ActivitySidebarActionsSetter,
   ActivityQuickActionsSetter,
   ActivitySettingsSetter,