@nualang/nualang-ui-components 0.1.1409 → 0.1.1410

package/dist/Assignments/AssignmentBotSelection/AssignmentBotSelection.js

@@ -54,7 +54,7 @@ function Bot({
     classroomId
   } = params;
   const [courseId, sectionId, topicId] = courseSectionTopicId ? courseSectionTopicId.split("|") : "";
-  const [lasClickedCourseId, lasClickedSectionId, lasClickedTopicId, lastClickedAssignmentId, lastClickedBotId] = lastClickedExerciseId?.split("|") || [];
+  const [lastClickedAssignmentId, lastClickedBotId] = lastClickedExerciseId?.split("|").slice(-2) || [];
   const addSearchParams = () => {
     if (!classroomId || !courseId || !sectionId || !topicId || !bot?.botId) {
       console.error("Missing required parameters for navigation");

package/dist/Assignments/AssignmentExerciseSelection/AssignmentExerciseSelection.js

@@ -221,7 +221,8 @@ function Exercise({
           completionHelpers: completionHelpers,
           username: username,
           preferred_username: preferred_username,
-          isCreator: isCreator
+          isCreator: isCreator,
+          lastClickedExerciseId: lastClickedExerciseId
         })
       })
     }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(Collapse, {

package/dist/Assignments/AssignmentPhraseListSelection/AssignmentPhraseListSelection.js

@@ -110,7 +110,8 @@ function PhraseList({
   progressHelpers,
   completionHelpers,
   username,
-  preferred_username
+  preferred_username,
+  lastClickedExerciseId
 }) {
   const navigate = useNavigate();
   const {
@@ -120,8 +121,9 @@ function PhraseList({
   const {
     classroomId
   } = params;
+  const [lastClickedAssignmentId, lastClickedPhraseListId] = lastClickedExerciseId?.split("|").slice(-2) || [];
   const [isSelected, setIsSelected] = useState(false);
-  const [isPhraseListOpen, setIsPhraseListOpen] = useState(false);
+  const [isPhraseListOpen, setIsPhraseListOpen] = useState(lastClickedPhraseListId === phraseList.phraseListId && lastClickedAssignmentId === assignment.assignmentId);
   const [isSelectAllChecked, setIsSelectAllChecked] = useState(false);
   const [indeterminate, setIndeterminate] = useState(false);
   const activePhrases = phraseList?.phrases || [];
@@ -436,7 +438,8 @@ export default function AssignmentPhraseListSelection({
   completionHelpers,
   username,
   preferred_username,
-  isCreator
+  isCreator,
+  lastClickedExerciseId
 }) {
   const selectedPhraseListIds = new Set(selectedExercises?.map(exercise => exercise.phraseListId) || []);
   const filteredPhraseLists = !viewOnly ? phraseLists : phraseLists.filter(phraseList => selectedPhraseListIds.has(phraseList.phraseListId));
@@ -458,7 +461,8 @@ export default function AssignmentPhraseListSelection({
       completionHelpers: completionHelpers,
       username: username,
       preferred_username: preferred_username,
-      isCreator: isCreator
+      isCreator: isCreator,
+      lastClickedExerciseId: lastClickedExerciseId
     }, index)), orphanedPhraseListIds.map(id => /*#__PURE__*/_jsx(Box, {
       sx: {
         display: "flex",

package/dist/Assignments/AssignmentRoleplaySelection/AssignmentRoleplaySelection.js

@@ -97,7 +97,7 @@ function Roleplay({
   const [selectedGames, setSelectedGames] = useState([]);
   const [indeterminate, setIndeterminate] = useState(false);
   const [courseId, sectionId, topicId] = courseSectionTopicId ? courseSectionTopicId.split("|") : "";
-  const [lastClickedAssignmentId, lastClickedRoleplayId] = lastClickedExerciseId?.split("|") || [];
+  const [lastClickedAssignmentId, lastClickedRoleplayId] = lastClickedExerciseId?.split("|").slice(-2) || [];
   const addSearchParams = exercise => {
     if (!classroomId || !courseId || !sectionId || !topicId || !roleplay?.roleplayId) {
       console.error("Missing required parameters for navigation");

package/dist/Containers/App/App.js

@@ -513,7 +513,18 @@ function App({
       ...user
     }) : /*#__PURE__*/_jsx(BottomBar, {
       navigation: bottomNav,
-      t: t
+      t: t,
+      nudges: [{
+        // Mobile counterpart of the sidebar profile nudge: the settings
+        // item is the one-tap route to the last-name field.
+        url: navToSettings,
+        active: !!(user && user.given_name && !user.family_name),
+        nudgeId: "add-family-name-bottom-nav",
+        tooltipTitle: t("nudge_add_family_name_title"),
+        tooltipDesc: t("nudge_add_family_name_profile_desc"),
+        placement: "top",
+        "data-cy": "nudge-add-family-name-bottom-nav"
+      }]
     }), /*#__PURE__*/_jsxs("main", {
       className: classes.main,
       children: [/*#__PURE__*/_jsx("div", {

package/dist/Dialogs/ImageBuilder/ImageBuilderControls.js

@@ -0,0 +1,250 @@
+import { makeStyles } from "tss-react/mui";
+import { Typography, ButtonBase, Box, Slider } from "@mui/material";
+import PaletteIcon from "@mui/icons-material/Palette";
+import CheckIcon from "@mui/icons-material/Check";
+import GroupsIcon from "@mui/icons-material/Groups";
+import TranslateIcon from "@mui/icons-material/Translate";
+import SchoolIcon from "@mui/icons-material/School";
+import MenuBookIcon from "@mui/icons-material/MenuBook";
+import AutoStoriesIcon from "@mui/icons-material/AutoStories";
+import RecordVoiceOverIcon from "@mui/icons-material/RecordVoiceOver";
+import ForumIcon from "@mui/icons-material/Forum";
+import MicIcon from "@mui/icons-material/Mic";
+import HeadphonesIcon from "@mui/icons-material/Headphones";
+import EditIcon from "@mui/icons-material/Edit";
+import QuizIcon from "@mui/icons-material/Quiz";
+import LanguageIcon from "@mui/icons-material/Language";
+import WavingHandIcon from "@mui/icons-material/WavingHand";
+import LightbulbIcon from "@mui/icons-material/Lightbulb";
+import FlagIcon from "@mui/icons-material/Flag";
+import TravelExploreIcon from "@mui/icons-material/TravelExplore";
+import { PRESET_COLORS, ICON_PATHS, ICON_KEYS } from "./iconPaths";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ICON_COMPONENTS = {
+  groups: GroupsIcon,
+  translate: TranslateIcon,
+  school: SchoolIcon,
+  menu_book: MenuBookIcon,
+  auto_stories: AutoStoriesIcon,
+  record_voice_over: RecordVoiceOverIcon,
+  forum: ForumIcon,
+  mic: MicIcon,
+  headphones: HeadphonesIcon,
+  edit: EditIcon,
+  quiz: QuizIcon,
+  language: LanguageIcon,
+  waving_hand: WavingHandIcon,
+  lightbulb: LightbulbIcon,
+  flag: FlagIcon,
+  travel_explore: TravelExploreIcon
+};
+
+// Build mask-image URLs for SVG-based icons (computed once at module level)
+const SVG_MASK_URLS = {};
+for (const key of ICON_KEYS) {
+  if (!ICON_COMPONENTS[key]) {
+    const iconData = ICON_PATHS[key];
+    const vb = iconData.viewBox || {
+      width: 24,
+      height: 24
+    };
+    const pathsStr = iconData.paths.map(d => `<path d="${d}"/>`).join("");
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${vb.width} ${vb.height}" fill="black">${pathsStr}</svg>`;
+    SVG_MASK_URLS[key] = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+  }
+}
+const useStyles = makeStyles()(theme => ({
+  root: {
+    width: 440,
+    flexShrink: 0,
+    padding: "28px 32px",
+    borderRight: `1px solid ${theme.palette.divider}`,
+    overflowY: "auto",
+    [theme.breakpoints.down("md")]: {
+      width: "100%",
+      borderRight: "none",
+      borderBottom: `1px solid ${theme.palette.divider}`
+    }
+  },
+  sectionLabel: {
+    fontSize: 14,
+    fontWeight: 600,
+    marginBottom: 12
+  },
+  swatchRow: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: 12,
+    marginBottom: 14
+  },
+  swatch: {
+    width: 40,
+    height: 40,
+    borderRadius: 8,
+    border: "none",
+    cursor: "pointer",
+    padding: 0,
+    transition: "box-shadow 0.15s"
+  },
+  customSwatch: {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 40,
+    height: 40,
+    borderRadius: 8,
+    cursor: "pointer",
+    overflow: "hidden"
+  },
+  colorInput: {
+    position: "absolute",
+    inset: 0,
+    opacity: 0,
+    cursor: "pointer",
+    width: "100%",
+    height: "100%",
+    border: "none"
+  },
+  iconGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(6, 1fr)",
+    gap: 10,
+    marginBottom: 8
+  },
+  iconCell: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    aspectRatio: "1",
+    borderRadius: 8,
+    cursor: "pointer",
+    padding: 0,
+    transition: "background-color 0.15s, border-color 0.15s"
+  }
+}));
+function getSwatchSx(colorValue, isSelected) {
+  return {
+    backgroundColor: colorValue,
+    boxShadow: isSelected ? theme => `0 0 0 3px ${theme.palette.background.paper}, 0 0 0 5px ${theme.palette.primary.main}` : "inset 0 0 0 1px rgba(0,0,0,0.12)"
+  };
+}
+export default function ImageBuilderControls({
+  t,
+  color,
+  onColorChange,
+  customColor,
+  onCustomColorChange,
+  iconKey,
+  onIconChange,
+  iconOpacity,
+  onIconOpacityChange
+}) {
+  const {
+    classes
+  } = useStyles();
+  const isPreset = PRESET_COLORS.some(c => c.value.toLowerCase() === color.toLowerCase());
+  return /*#__PURE__*/_jsxs(Box, {
+    className: classes.root,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      className: classes.sectionLabel,
+      children: t("background_colour")
+    }), /*#__PURE__*/_jsxs("div", {
+      className: classes.swatchRow,
+      children: [PRESET_COLORS.map(c => {
+        const selected = c.value.toLowerCase() === color.toLowerCase();
+        return /*#__PURE__*/_jsx(ButtonBase, {
+          className: classes.swatch,
+          sx: getSwatchSx(c.value, selected),
+          onClick: () => onColorChange(c.value),
+          title: c.name,
+          "aria-label": c.name,
+          children: selected && /*#__PURE__*/_jsx(CheckIcon, {
+            sx: {
+              color: "#fff",
+              fontSize: 20
+            }
+          })
+        }, c.value);
+      }), /*#__PURE__*/_jsxs(ButtonBase, {
+        className: classes.customSwatch,
+        sx: getSwatchSx(customColor, !isPreset),
+        component: "label",
+        title: t("custom_colour"),
+        "aria-label": t("custom_colour"),
+        children: [/*#__PURE__*/_jsx(PaletteIcon, {
+          sx: {
+            color: "#fff",
+            fontSize: 20,
+            mixBlendMode: "difference"
+          }
+        }), /*#__PURE__*/_jsx("input", {
+          type: "color",
+          value: customColor,
+          onChange: e => onCustomColorChange(e.target.value),
+          className: classes.colorInput
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(Typography, {
+      className: classes.sectionLabel,
+      sx: {
+        mt: 3
+      },
+      children: t("icon")
+    }), /*#__PURE__*/_jsx("div", {
+      className: classes.iconGrid,
+      children: ICON_KEYS.map(key => {
+        const IconComp = ICON_COMPONENTS[key];
+        const maskUrl = SVG_MASK_URLS[key];
+        const selected = key === iconKey;
+        return /*#__PURE__*/_jsx(ButtonBase, {
+          className: classes.iconCell,
+          sx: theme => ({
+            backgroundColor: selected ? theme.palette.primary.light + "30" : theme.palette.background.paper,
+            border: selected ? `2px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`
+          }),
+          onClick: () => onIconChange(key),
+          title: key.replace(/_/g, " "),
+          "aria-label": key.replace(/_/g, " "),
+          children: IconComp ? /*#__PURE__*/_jsx(IconComp, {
+            sx: theme => ({
+              color: selected ? theme.palette.primary.main : theme.palette.text.secondary,
+              fontSize: 24
+            })
+          }) : /*#__PURE__*/_jsx(Box, {
+            sx: theme => ({
+              width: 24,
+              height: 24,
+              backgroundColor: selected ? theme.palette.primary.main : theme.palette.text.secondary,
+              maskImage: maskUrl,
+              WebkitMaskImage: maskUrl,
+              maskSize: "contain",
+              WebkitMaskSize: "contain",
+              maskRepeat: "no-repeat",
+              WebkitMaskRepeat: "no-repeat",
+              maskPosition: "center",
+              WebkitMaskPosition: "center"
+            })
+          })
+        }, key);
+      })
+    }), /*#__PURE__*/_jsx(Typography, {
+      className: classes.sectionLabel,
+      sx: {
+        mt: 3
+      },
+      children: t("icon_opacity")
+    }), /*#__PURE__*/_jsx(Slider, {
+      value: iconOpacity,
+      min: 0.05,
+      max: 0.5,
+      step: 0.01,
+      onChange: (e, val) => onIconOpacityChange(val),
+      valueLabelDisplay: "auto",
+      valueLabelFormat: v => `${Math.round(v * 100)}%`,
+      sx: {
+        maxWidth: 360
+      }
+    })]
+  });
+}

package/dist/Dialogs/ImageBuilder/ImageBuilderDialog.js

@@ -0,0 +1,138 @@
+import { useState, useEffect, useMemo } from "react";
+import { Box, Button } from "@mui/material";
+import { makeStyles } from "tss-react/mui";
+import CheckIcon from "@mui/icons-material/Check";
+import CasinoIcon from "@mui/icons-material/Casino";
+import ImageBuilderControls from "./ImageBuilderControls";
+import ImageBuilderPreview from "./ImageBuilderPreview";
+import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
+import { PRESET_COLORS, ICON_KEYS } from "./iconPaths";
+import { generatePatternCanvas, getCenterCropDataUrl, getOptimalIconOpacity, shouldUseDarkIcons } from "./imageBuilderUtils";
+
+// Matches placeholder SVG ratio (21144 x 4890), scaled down 10x
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BANNER_W = 2114;
+const BANNER_H = 489;
+const CARD_SIZE = 489;
+const useStyles = makeStyles()(theme => ({
+  body: {
+    display: "flex",
+    [theme.breakpoints.down("md")]: {
+      flexDirection: "column"
+    }
+  }
+}));
+export default function ImageBuilderDialog({
+  t,
+  open,
+  onClose,
+  onConfirm,
+  initialColor,
+  initialIconKey
+}) {
+  const {
+    classes
+  } = useStyles();
+  const defaultColor = initialColor || PRESET_COLORS[0].value;
+  const [color, setColor] = useState(defaultColor);
+  const [customColor, setCustomColor] = useState(defaultColor);
+  const [iconKey, setIconKey] = useState(initialIconKey || "school");
+  const [iconOpacity, setIconOpacity] = useState(() => getOptimalIconOpacity(defaultColor));
+  const darkIcons = shouldUseDarkIcons(color);
+
+  // Generate preview — only recalculates when inputs change
+  const {
+    bannerDataUrl,
+    cardDataUrl
+  } = useMemo(() => {
+    if (typeof document === "undefined") {
+      return {
+        bannerDataUrl: null,
+        cardDataUrl: null
+      };
+    }
+    const canvas = generatePatternCanvas({
+      color,
+      iconKey,
+      density: "dense",
+      iconOpacity,
+      darkIcons,
+      width: BANNER_W,
+      height: BANNER_H
+    });
+    return {
+      bannerDataUrl: canvas.toDataURL("image/png"),
+      cardDataUrl: getCenterCropDataUrl(canvas, CARD_SIZE)
+    };
+  }, [color, iconKey, iconOpacity, darkIcons]);
+
+  // Reset state when dialog opens
+  useEffect(() => {
+    if (open) {
+      const c = initialColor || PRESET_COLORS[0].value;
+      setColor(c);
+      setCustomColor(c);
+      setIconKey(initialIconKey || "school");
+      setIconOpacity(getOptimalIconOpacity(c));
+    }
+  }, [open, initialColor, initialIconKey]);
+  const handleColorChange = val => {
+    setColor(val);
+    setCustomColor(val);
+    setIconOpacity(getOptimalIconOpacity(val));
+  };
+  const handleCustomColorChange = val => {
+    setCustomColor(val);
+    setColor(val);
+    setIconOpacity(getOptimalIconOpacity(val));
+  };
+  const handleRandomize = () => {
+    const c = PRESET_COLORS[Math.floor(Math.random() * PRESET_COLORS.length)].value;
+    const ic = ICON_KEYS[Math.floor(Math.random() * ICON_KEYS.length)];
+    setColor(c);
+    setCustomColor(c);
+    setIconKey(ic);
+    setIconOpacity(getOptimalIconOpacity(c));
+  };
+  const handleConfirm = () => {
+    onConfirm(bannerDataUrl, {
+      color,
+      iconKey
+    });
+  };
+  return /*#__PURE__*/_jsx(ResponsiveDialog, {
+    open: open,
+    handleClose: onClose,
+    handleSubmit: handleConfirm,
+    dialogTitle: t("image_builder"),
+    submitText: t("use_image"),
+    closeText: t("cancel"),
+    maxWidth: "lg",
+    startIcon: /*#__PURE__*/_jsx(CheckIcon, {}),
+    t: t,
+    extraActions: /*#__PURE__*/_jsx(Button, {
+      variant: "outlined",
+      onClick: handleRandomize,
+      startIcon: /*#__PURE__*/_jsx(CasinoIcon, {}),
+      children: t("randomise")
+    }),
+    children: /*#__PURE__*/_jsxs(Box, {
+      className: classes.body,
+      children: [/*#__PURE__*/_jsx(ImageBuilderControls, {
+        t: t,
+        color: color,
+        onColorChange: handleColorChange,
+        customColor: customColor,
+        onCustomColorChange: handleCustomColorChange,
+        iconKey: iconKey,
+        onIconChange: setIconKey,
+        iconOpacity: iconOpacity,
+        onIconOpacityChange: setIconOpacity
+      }), /*#__PURE__*/_jsx(ImageBuilderPreview, {
+        t: t,
+        bannerDataUrl: bannerDataUrl,
+        cardDataUrl: cardDataUrl
+      })]
+    })
+  });
+}

package/dist/Dialogs/ImageBuilder/ImageBuilderPreview.js

@@ -0,0 +1,79 @@
+import { makeStyles } from "tss-react/mui";
+import { Typography, Box } from "@mui/material";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  root: {
+    flex: 1,
+    padding: "28px 32px",
+    backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "#ffffff",
+    [theme.breakpoints.down("md")]: {
+      padding: "20px 16px"
+    }
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: 600,
+    color: theme.palette.text.secondary,
+    marginBottom: 10,
+    letterSpacing: "0.02em"
+  },
+  bannerImg: {
+    width: "100%",
+    aspectRatio: "2114 / 489",
+    borderRadius: 8,
+    overflow: "hidden",
+    border: `1px solid ${theme.palette.divider}`,
+    marginBottom: 24,
+    objectFit: "cover"
+  },
+  cardRow: {
+    display: "flex",
+    alignItems: "flex-end",
+    gap: 20
+  },
+  cardImg: {
+    width: 150,
+    height: 150,
+    flexShrink: 0,
+    borderRadius: 10,
+    border: `1px solid ${theme.palette.divider}`,
+    objectFit: "cover"
+  },
+  helperText: {
+    margin: 0,
+    fontSize: 13,
+    lineHeight: 1.5,
+    color: theme.palette.text.secondary,
+    maxWidth: 180
+  }
+}));
+export default function ImageBuilderPreview({
+  t,
+  bannerDataUrl,
+  cardDataUrl
+}) {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsxs(Box, {
+    className: classes.root,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      className: classes.label,
+      children: t("banner")
+    }), bannerDataUrl && /*#__PURE__*/_jsx("img", {
+      src: bannerDataUrl,
+      alt: t("banner_preview"),
+      className: classes.bannerImg
+    }), /*#__PURE__*/_jsx(Typography, {
+      className: classes.label,
+      children: t("card")
+    }), /*#__PURE__*/_jsx("div", {
+      className: classes.cardRow,
+      children: cardDataUrl && /*#__PURE__*/_jsx("img", {
+        src: cardDataUrl,
+        alt: t("card_preview"),
+        className: classes.cardImg
+      })
+    })]
+  });
+}