@nualang/nualang-ui-components 0.1.1430 → 0.1.1432

package/dist/Cards/Bot/Bot.js

@@ -135,12 +135,7 @@ function Bot({
       children: [/*#__PURE__*/_jsx(CardTop, {
         children: /*#__PURE__*/_jsx(Skeleton, {
           variant: "rectangular",
-          sx: {
-            ...classes.media,
-            ...(compact ? {
-              paddingTop: "40%"
-            } : {})
-          }
+          sx: classes.media
         })
       }), /*#__PURE__*/_jsx(CardHeader, {
         action: /*#__PURE__*/_jsx(IconButton, {
@@ -199,12 +194,7 @@ function Bot({
         onClick: selectBot,
         role: "link",
         children: [/*#__PURE__*/_jsx(ProgressiveCardMedia, {
-          sx: {
-            ...classes.media,
-            ...(compact ? {
-              paddingTop: "40%"
-            } : {})
-          },
+          sx: classes.media,
           highQualitySrc: visible || !pictureXs ? cardPicture || picture || PlaceholderImages.bot : null,
           lowQualitySrc: pictureXs,
           title: botName,

package/dist/Cards/Course/Course.js

@@ -297,13 +297,7 @@ CourseDifficulty.propTypes = {
   difficulty: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   compact: PropTypes.bool
 };
-
-// Keep compact cards' media at 16:9 even though it makes the card a little
-// taller than the old 40% (2.5:1) crop - matches how the picture actually
-// looks everywhere else it's shown.
-const COMPACT_MEDIA_ASPECT_RATIO = "56.25%";
 function CourseCardMedia({
-  compact,
   visible,
   cardPicture,
   picture,
@@ -311,10 +305,7 @@ function CourseCardMedia({
   placeholderRef
 }) {
   return /*#__PURE__*/_jsx(ProgressiveCardMedia, {
-    sx: compact ? {
-      ...classes.media,
-      paddingTop: COMPACT_MEDIA_ASPECT_RATIO
-    } : classes.media,
+    sx: classes.media,
     highQualitySrc: visible || !pictureXs ? cardPicture || picture || PlaceholderImages.course : null,
     lowQualitySrc: pictureXs,
     placeholderRef: placeholderRef
@@ -373,10 +364,7 @@ function CompactCourseLoading() {
     children: [/*#__PURE__*/_jsx(CardTop, {
       children: /*#__PURE__*/_jsx(Skeleton, {
         variant: "rectangular",
-        sx: {
-          ...classes.media,
-          paddingTop: COMPACT_MEDIA_ASPECT_RATIO
-        }
+        sx: classes.media
       })
     }), /*#__PURE__*/_jsx(CardHeader, {
       title: /*#__PURE__*/_jsx(Skeleton, {
@@ -698,7 +686,6 @@ function CourseCard({
           role: "link",
           "aria-label": `${checked ? t("selected") : t("select")} ${courseName}`,
           children: /*#__PURE__*/_jsx(CourseCardMedia, {
-            compact: true,
             visible: visible,
             cardPicture: cardPicture,
             picture: picture,

package/dist/Cards/Roleplay/Roleplay.js

@@ -135,12 +135,7 @@ function Roleplay({
       children: [/*#__PURE__*/_jsx(CardTop, {
         children: /*#__PURE__*/_jsx(Skeleton, {
           variant: "rectangular",
-          sx: {
-            ...classes.media,
-            ...(compact ? {
-              paddingTop: "40%"
-            } : {})
-          }
+          sx: classes.media
         })
       }), /*#__PURE__*/_jsx(CardHeader, {
         action: /*#__PURE__*/_jsx(IconButton, {
@@ -199,12 +194,7 @@ function Roleplay({
         role: "link",
         "aria-label": "Card Image",
         children: [/*#__PURE__*/_jsx(ProgressiveCardMedia, {
-          sx: {
-            ...classes.media,
-            ...(compact ? {
-              paddingTop: "40%"
-            } : {})
-          },
+          sx: classes.media,
           highQualitySrc: visible || !pictureXs ? cardPicture || picture || PlaceholderImages.roleplay : null,
           lowQualitySrc: pictureXs,
           placeholderRef: placeholderRef,

package/dist/Cards/Topic/Topic.js

@@ -38,12 +38,7 @@ function Topic({
       children: [/*#__PURE__*/_jsx(CardTop, {
         children: /*#__PURE__*/_jsx(Skeleton, {
           variant: "rectangular",
-          sx: {
-            ...classes.media,
-            ...(compact ? {
-              paddingTop: "40%"
-            } : {})
-          }
+          sx: classes.media
         })
       }), /*#__PURE__*/_jsx(CardHeader, {
         title: /*#__PURE__*/_jsx(Skeleton, {
@@ -94,12 +89,7 @@ function Topic({
         disabled: disableActions,
         role: "link",
         children: /*#__PURE__*/_jsx(ProgressiveCardMedia, {
-          sx: {
-            ...classes.media,
-            ...(compact ? {
-              paddingTop: "40%"
-            } : {})
-          },
+          sx: classes.media,
           highQualitySrc: visible || !pictureXs ? cardPicture || picture || PlaceholderImages.topic : null,
           lowQualitySrc: pictureXs,
           title: topicName,

package/dist/Dialogs/FindChatbotDialog/FindChatbotDialog.js

@@ -16,7 +16,7 @@ import CloseIcon from "@mui/icons-material/Close";
 import AddIcon from "@mui/icons-material/Add";
 import Bots from "../../Lists/Bots/Bots";
 import PlaceholderImages from "../../utils/placeholder-images/index";
-import { SearchFilters, Transition } from "../SearchFilters/SearchFilters";
+import { SearchFilters, Transition, applyFilters, useSearchFilters } from "../SearchFilters/SearchFilters";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function FindChatbotDialog({
   open,
@@ -43,11 +43,11 @@ export default function FindChatbotDialog({
   // Restricted users are always kept on the library tab, regardless of state.
   const effectiveTab = isCommunityAccessRestricted ? 0 : tab;
   const [selectedBotIds, setSelectedBotIds] = useState([]);
-  const [search, setSearch] = useState("");
-  const [filters, setFilters] = useState({
-    difficulty: "all",
-    sort: "newest"
-  });
+  const {
+    filters,
+    resetFilters,
+    filterProps
+  } = useSearchFilters();
   const allChatbots = [...libraryChatbots, ...communityChatbots];
   const selectedChatbots = allChatbots.filter(bot => selectedBotIds.includes(bot.botId)).filter((bot, index, arr) => arr.findIndex(b => b.botId === bot.botId) === index).map(bot => ({
     ...bot,
@@ -56,16 +56,6 @@ export default function FindChatbotDialog({
   const handleToggle = botId => {
     setSelectedBotIds(prev => prev.includes(botId) ? prev.filter(id => id !== botId) : [...prev, botId]);
   };
-  const handleFilterChange = event => {
-    const {
-      name,
-      value
-    } = event.target;
-    setFilters(prev => ({
-      ...prev,
-      [name]: value
-    }));
-  };
   const handleAdd = () => {
     onAddChatbots(selectedChatbots);
     reset();
@@ -73,11 +63,7 @@ export default function FindChatbotDialog({
   };
   const reset = () => {
     setSelectedBotIds([]);
-    setSearch("");
-    setFilters({
-      difficulty: "all",
-      sort: "newest"
-    });
+    resetFilters();
     setTab(0);
   };
   const handleDialogClose = () => {
@@ -101,37 +87,14 @@ export default function FindChatbotDialog({
   const handleTabChange = (_, v) => {
     if (isCommunityAccessRestricted) return;
     setTab(v);
-    setSearch("");
-    setFilters({
-      difficulty: "all",
-      sort: "newest"
-    });
+    resetFilters();
     if (scrollRef.current) scrollRef.current.scrollTop = 0;
   };
-  const filterChatbots = chatbots => {
-    if (!search.trim()) return chatbots;
-    const q = search.toLowerCase();
-    return chatbots.filter(bot => bot.botName?.toLowerCase().includes(q) || bot.description?.toLowerCase().includes(q) || bot.createdByName?.toLowerCase().includes(q));
-  };
-  const applyCommunityFilters = chatbots => {
-    let result = filterChatbots(chatbots);
-    if (filters.difficulty && filters.difficulty !== "all") {
-      result = result.filter(bot => bot.difficulty === filters.difficulty);
-    }
-    if (filters.sort === "newest") {
-      result = [...result].sort((a, b) => new Date(b.createdAt || 0) - new Date(a.createdAt || 0));
-    } else if (filters.sort === "oldest") {
-      result = [...result].sort((a, b) => new Date(a.createdAt || 0) - new Date(b.createdAt || 0));
-    } else {
-      result = [...result].sort((a, b) => (b.exerciseStartTotal || 0) - (a.exerciseStartTotal || 0));
-    }
-    return result;
-  };
-  const currentChatbots = effectiveTab === 0 ? filterChatbots(libraryChatbots) : applyCommunityFilters(communityChatbots);
+  const currentChatbots = applyFilters(effectiveTab === 0 ? libraryChatbots : communityChatbots, filters, "botName");
   const isLoading = effectiveTab === 0 ? isLoadingLibrary : isLoadingCommunity;
-  const sectionLabel = effectiveTab === 0 ? t("add_own_exercise_message", {
+  const libraryLabel = t("add_own_exercise_message", {
     exerciseName: t("chatbots").toLowerCase()
-  }) : t("or_select_a_community_template_desc");
+  });
   const addButtonLabel = selectedBotIds.length > 0 ? `${t("add_chatbots")} (${selectedBotIds.length})` : t("add_chatbots");
   return /*#__PURE__*/_jsxs(Dialog, {
     open: open,
@@ -190,24 +153,10 @@ export default function FindChatbotDialog({
             disabled: isCommunityAccessRestricted
           })]
         })
-      }), effectiveTab === 1 && /*#__PURE__*/_jsx(Box, {
-        sx: {
-          px: 3,
-          py: {
-            xs: 0,
-            md: 1.5
-          },
-          borderBottom: 1,
-          borderColor: "divider"
-        },
-        children: /*#__PURE__*/_jsx(SearchFilters, {
-          t: t,
-          difficulty: filters.difficulty,
-          handleFilterChange: handleFilterChange,
-          sort: filters.sort,
-          search: search,
-          setSearch: setSearch
-        })
+      }), /*#__PURE__*/_jsx(SearchFilters, {
+        t: t,
+        ...filterProps,
+        dataCyPrefix: "find-chatbots"
       }), /*#__PURE__*/_jsx(Box, {
         ref: scrollRef,
         sx: {
@@ -229,13 +178,13 @@ export default function FindChatbotDialog({
             children: t("no_chatbots_found") || "No chatbots found"
           })
         }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Typography, {
+          children: [effectiveTab === 0 && /*#__PURE__*/_jsx(Typography, {
             color: "text.secondary",
             sx: {
               display: "block",
               mb: 2
             },
-            children: sectionLabel
+            children: libraryLabel
           }), /*#__PURE__*/_jsx(Bots, {
             t: t,
             bots: currentChatbots,

package/dist/Dialogs/FindCoursesDialog/FindCoursesDialog.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useRef, forwardRef } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
 import { useInView } from "react-intersection-observer";
 import { courses as courseQuerys, ReactQuery } from "@nualang/nualang-api-and-queries/Queries";
 import { getCourses } from "@nualang/nualang-api-and-queries/APIs/Courses";
@@ -7,7 +7,6 @@ import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
-import Slide from "@mui/material/Slide";
 import Box from "@mui/material/Box";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
@@ -26,6 +25,7 @@ import SortBySelector from "../../Forms/SortBySelector/SortBySelector";
 import useDebounce from "../../hooks/useDebounce";
 import useHorizontalScroll from "../../hooks/useHorizontalScroll";
 import PlaceholderImages from "../../utils/placeholder-images/index";
+import { DIFFICULTIES, SORT_BY_OPTIONS, Transition, sortItems } from "../SearchFilters/SearchFilters";
 
 // The Community tab wraps into a grid, same as Topics.jsx's compact cards in
 // FindTopicsDialog. My library keeps horizontal scrolling rows (below) so
@@ -46,29 +46,47 @@ const courseGridSx = {
 const {
   useInfiniteQuery
 } = ReactQuery;
-
-// Same CEFR codes FindTopicsDialog's community difficulty filter uses.
-const DIFFICULTIES = ["A1", "A2", "B1", "B2", "C1", "C2"];
 const LIBRARY_PAGE_SIZE = 12;
 const nextLibraryPageParam = lastPage => lastPage.LastEvaluatedKey?.page || lastPage.LastEvaluatedKey?.courseId ? lastPage.LastEvaluatedKey : undefined;
-const SORT_BY_OPTIONS = {
-  popular: "popular",
-  newest: "newest",
-  oldest: "oldest"
-};
 const DEFAULT_FILTERS = {
   learnLang: "all",
   forLang: "all",
   difficulty: "all",
   sort: "popular"
 };
-const Transition = /*#__PURE__*/forwardRef(function Transition(props, ref) {
-  return /*#__PURE__*/_jsx(Slide, {
-    direction: "up",
-    ref: ref,
-    ...props
+const MY_LIBRARY_TAB = 0;
+// My library lists the user's own courses, so newest first is more useful
+// there than popularity. The Community tab keeps the "popular" default.
+const MY_LIBRARY_DEFAULT_SORT = "newest";
+
+// My library rows are fetched in full and filtered here, the same way the
+// Courses screen does it, so search never goes through the global course search.
+function filterLibraryCourses(courses, filters, search) {
+  const searchText = search.trim().toLowerCase();
+  const filtered = courses.filter(course => {
+    if (filters.learnLang !== "all" && course.learnLang !== filters.learnLang) {
+      return false;
+    }
+    if (filters.forLang !== "all" && course.forLang !== filters.forLang) {
+      return false;
+    }
+    if (filters.difficulty !== "all") {
+      const difficulties = Array.isArray(course.difficulty) ? course.difficulty : [course.difficulty];
+      if (!difficulties.includes(filters.difficulty)) {
+        return false;
+      }
+    }
+    if (searchText) {
+      const nameMatch = (course.courseName || "").toLowerCase().includes(searchText);
+      const descriptionMatch = (course.description || "").toLowerCase().includes(searchText);
+      if (!nameMatch && !descriptionMatch) {
+        return false;
+      }
+    }
+    return true;
   });
-});
+  return sortItems(filtered, filters.sort);
+}
 function CourseFilters({
   t,
   search,
@@ -202,7 +220,7 @@ function CourseFilters({
         children: t("all") || "All"
       }), DIFFICULTIES.map(d => /*#__PURE__*/_jsx(MenuItem, {
         value: d,
-        children: d
+        children: t(d) || d
       }, d))]
     }), /*#__PURE__*/_jsx(SortBySelector, {
       id: "course-sort",
@@ -383,6 +401,7 @@ export default function FindCoursesDialog({
   formatCourses,
   groupCourseIds = [],
   groupCoursesLimit = 100,
+  createdCoursesLimit = 1000,
   alreadyAddedCourseIds = [],
   isCommunityAccessRestricted = false,
   learnLangOptions = [],
@@ -397,16 +416,19 @@ export default function FindCoursesDialog({
   } = useInView({
     threshold: 0
   });
-  const [tab, setTab] = useState(0);
-  const effectiveTab = isCommunityAccessRestricted ? 0 : tab;
+  const [tab, setTab] = useState(MY_LIBRARY_TAB);
+  const effectiveTab = isCommunityAccessRestricted ? MY_LIBRARY_TAB : tab;
   const [selectedCourseIds, setSelectedCourseIds] = useState([]);
   const [search, setSearch] = useState("");
-  const defaultFilters = {
+  const getDefaultFilters = tabIndex => ({
     ...DEFAULT_FILTERS,
     learnLang: defaultLearnLang,
-    forLang: defaultForLang
-  };
-  const [filters, setFilters] = useState(defaultFilters);
+    forLang: defaultForLang,
+    ...(tabIndex === MY_LIBRARY_TAB && {
+      sort: MY_LIBRARY_DEFAULT_SORT
+    })
+  });
+  const [filters, setFilters] = useState(() => getDefaultFilters(MY_LIBRARY_TAB));
   // Every course object ever handed to this dialog, keyed by id. search/
   // difficulty/sort are now applied upstream (the caller only fetches
   // matching pages), so a course that's selected and then filtered out of
@@ -422,8 +444,8 @@ export default function FindCoursesDialog({
   const reset = () => {
     setSelectedCourseIds([]);
     setSearch("");
-    setFilters(defaultFilters);
-    setTab(0);
+    setFilters(getDefaultFilters(MY_LIBRARY_TAB));
+    setTab(MY_LIBRARY_TAB);
     setSearchResetKey(key => key + 1);
     setCourseCache(new Map());
   };
@@ -447,7 +469,7 @@ export default function FindCoursesDialog({
     if (isCommunityAccessRestricted) return;
     setTab(v);
     setSearch("");
-    setFilters(defaultFilters);
+    setFilters(getDefaultFilters(v));
     setSearchResetKey(key => key + 1);
   };
   const handleFilterChange = event => {
@@ -465,28 +487,19 @@ export default function FindCoursesDialog({
   // every page load - so the carousels below know when a reorder is a real
   // reset versus just more of the same sort settling in as data grows.
   const librarySortResetKey = `${search}|${filters.learnLang}|${filters.forLang}|${filters.difficulty}|${filters.sort}`;
+
+  // Search/filters/sort are applied client-side in libraryCreatedCourses, so
+  // changing them doesn't refetch
   const teachCoursesQuery = useInfiniteQuery({
-    queryKey: ["findCoursesDialog", "created", username, filters.learnLang, filters.forLang, filters.difficulty, search, filters.sort],
+    queryKey: ["findCoursesDialog", "created", username],
     queryFn: async ({
       pageParam = {}
     }) => {
       const response = await getCourses({
         createdBy: username,
         verbose: false,
-        limit: LIBRARY_PAGE_SIZE,
-        sort: filters.sort,
-        ...(filters.learnLang !== "all" && {
-          learnLang: filters.learnLang
-        }),
-        ...(filters.forLang !== "all" && {
-          forLang: filters.forLang
-        }),
-        ...(filters.difficulty !== "all" && {
-          difficulty: filters.difficulty
-        }),
-        ...(search && {
-          search
-        }),
+        // Get all using high limit, same as the Courses screen
+        limit: createdCoursesLimit,
         page: pageParam.page || 1,
         lastEvaluatedCourseId: pageParam.courseId || "",
         lastEvaluatedKey: pageParam.courseId || "",
@@ -503,6 +516,20 @@ export default function FindCoursesDialog({
     getNextPageParam: nextLibraryPageParam,
     enabled: !!username && open
   });
+  const {
+    hasNextPage: hasMoreCreated,
+    isFetchingNextPage: isFetchingMoreCreated,
+    isFetchNextPageError: isCreatedNextPageError
+  } = teachCoursesQuery;
+  useEffect(() => {
+    if (!open || !username || !hasMoreCreated || isFetchingMoreCreated || isCreatedNextPageError) {
+      return;
+    }
+    teachCoursesQuery.fetchNextPage({
+      cancelRefetch: false
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, username, hasMoreCreated, isFetchingMoreCreated, isCreatedNextPageError]);
   const learnCoursesQuery = useInfiniteQuery({
     queryKey: ["findCoursesDialog", "joined", username],
     queryFn: async ({
@@ -545,32 +572,9 @@ export default function FindCoursesDialog({
     const groupCourses = groupCoursesQuery.isSuccess && Array.isArray(groupCoursesQuery.data) ? groupCoursesQuery.data : [];
     const combined = [...learnCourses, ...groupCourses];
     const deduped = combined.filter((course, index) => combined.findIndex(c => c.courseId === course.courseId) === index);
-    const searchText = search.trim().toLowerCase();
-    const filtered = deduped.filter(course => {
-      if (filters.learnLang !== "all" && course.learnLang !== filters.learnLang) return false;
-      if (filters.forLang !== "all" && course.forLang !== filters.forLang) return false;
-      if (filters.difficulty !== "all") {
-        const difficulties = Array.isArray(course.difficulty) ? course.difficulty : [course.difficulty];
-        if (!difficulties.includes(filters.difficulty)) return false;
-      }
-      if (searchText) {
-        const nameMatch = (course.courseName || "").toLowerCase().includes(searchText);
-        const descriptionMatch = (course.description || "").toLowerCase().includes(searchText);
-        if (!nameMatch && !descriptionMatch) return false;
-      }
-      return true;
-    });
-    const sorted = [...filtered];
-    if (filters.sort === "newest") {
-      sorted.sort((a, b) => new Date(b.createdAt || 0) - new Date(a.createdAt || 0));
-    } else if (filters.sort === "oldest") {
-      sorted.sort((a, b) => new Date(a.createdAt || 0) - new Date(b.createdAt || 0));
-    } else {
-      sorted.sort((a, b) => (b.exerciseStartTotal || 0) - (a.exerciseStartTotal || 0));
-    }
-    return sorted;
-  }, [learnCoursesQuery.data, groupCoursesQuery.data, groupCoursesQuery.isSuccess, filters.learnLang, filters.forLang, filters.difficulty, search, filters.sort]);
-  const libraryCreatedCourses = useMemo(() => (teachCoursesQuery.data?.pages || []).flatMap(page => page.Items || []), [teachCoursesQuery.data]);
+    return filterLibraryCourses(deduped, filters, search);
+  }, [learnCoursesQuery.data, groupCoursesQuery.data, groupCoursesQuery.isSuccess, filters, search]);
+  const libraryCreatedCourses = useMemo(() => filterLibraryCourses((teachCoursesQuery.data?.pages || []).flatMap(page => page.Items || []), filters, search), [teachCoursesQuery.data, filters, search]);
   const communityCoursesQuery = courseQuerys.useCommunityCourses(async queryFilters => {
     const response = await getCourses(queryFilters);
     const formattedCourses = await formatCourses(response.Items, authData);
@@ -807,18 +811,11 @@ export default function FindCoursesDialog({
             isLoadingMore: learnCoursesQuery.isFetchingNextPage,
             resetKey: librarySortResetKey
           })]
-        }) : isLoadingCommunity ? /*#__PURE__*/_jsxs(Box, {
+        }) : isLoadingCommunity ? /*#__PURE__*/_jsx(Box, {
           sx: {
             p: 3
           },
-          children: [/*#__PURE__*/_jsx(Skeleton, {
-            variant: "text",
-            width: 220,
-            height: 28,
-            sx: {
-              mb: 2
-            }
-          }), /*#__PURE__*/_jsx(Box, {
+          children: /*#__PURE__*/_jsx(Box, {
             sx: courseGridSx,
             children: Array.from({
               length: 10
@@ -826,7 +823,7 @@ export default function FindCoursesDialog({
               t: t,
               compact: true
             }, i))
-          })]
+          })
         }) : isCommunityEmpty ? /*#__PURE__*/_jsx(Box, {
           display: "flex",
           justifyContent: "center",
@@ -839,14 +836,7 @@ export default function FindCoursesDialog({
           sx: {
             p: 3
           },
-          children: [/*#__PURE__*/_jsx(Typography, {
-            variant: "body2",
-            color: "text.secondary",
-            sx: {
-              mb: 2
-            },
-            children: t("courses_shared_by_other_teachers") || "Courses shared by other teachers"
-          }), communityCourses.length === 0 ? /*#__PURE__*/_jsx(Typography, {
+          children: [communityCourses.length === 0 ? /*#__PURE__*/_jsx(Typography, {
             variant: "body2",
             color: "text.secondary",
             children: t("no_community_courses_match") || "No courses match these filters"