@nualang/nualang-ui-components 0.1.1414 → 0.1.1416

package/dist/Cards/Course/Course.js

@@ -2,8 +2,10 @@ import { useState, memo } from "react";
 import PropTypes from "prop-types";
 import { useInView } from "react-intersection-observer";
 // Mui
-import { Button, Box, Typography, IconButton, Menu, MenuItem, Checkbox, Tooltip, CardActions, CardActionArea, Divider } from "@mui/material";
+import { Button, Box, Typography, IconButton, Menu, MenuItem, Checkbox, Tooltip, CardActions, CardActionArea, Divider, Chip } from "@mui/material";
 import Skeleton from "@mui/material/Skeleton";
+import { styled } from "@mui/material/styles";
+import { tooltipClasses } from "@mui/material/Tooltip";
 import Group from "@mui/icons-material/Group";
 import ExitToApp from "@mui/icons-material/ExitToApp";
 import Close from "@mui/icons-material/Close";
@@ -159,6 +161,141 @@ function OverflowMenu({
     })]
   });
 }
+const DIFFICULTY_ORDER = ["A1", "A2", "B1", "B2", "C1", "C2"];
+const MAX_VISIBLE_DIFFICULTIES = 2;
+const DifficultyOverflowTooltip = styled(({
+  className,
+  ...props
+}) => /*#__PURE__*/_jsx(Tooltip, {
+  ...props,
+  classes: {
+    popper: className
+  }
+}))(({
+  theme
+}) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    boxShadow: theme.shadows[4],
+    padding: theme.spacing(1.5, 2),
+    minWidth: 160,
+    maxWidth: 260
+  }
+}));
+function normalizeDifficulties(difficulty) {
+  const values = Array.isArray(difficulty) ? difficulty : difficulty ? [difficulty] : [];
+  return DIFFICULTY_ORDER.filter(level => values.includes(level));
+}
+function difficultyChipSx(theme, compact) {
+  return {
+    height: compact ? 20 : 24,
+    backgroundColor: theme.palette.action.selected,
+    color: theme.palette.text.secondary,
+    "& .MuiChip-label": {
+      fontSize: compact ? "0.7rem" : "0.75rem",
+      px: 0.75
+    }
+  };
+}
+function CourseDifficulty({
+  t,
+  difficulty,
+  compact
+}) {
+  const levels = normalizeDifficulties(difficulty);
+  if (levels.length === 0) {
+    return null;
+  }
+  const levelLabels = levels.map(level => t(`card_${level}`));
+  const visibleLabels = levelLabels.slice(0, MAX_VISIBLE_DIFFICULTIES);
+  const overflowLabels = levelLabels.slice(MAX_VISIBLE_DIFFICULTIES);
+  return /*#__PURE__*/_jsxs(Box, {
+    component: "span",
+    role: "group",
+    "aria-label": `${t("difficulty")}: ${levelLabels.join(", ")}`,
+    sx: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 0.5
+    },
+    "data-cy": "course-difficulty",
+    children: [/*#__PURE__*/_jsx(DifficultyIcon, {
+      sx: {
+        ...classes.infoIcon,
+        fontSize: compact ? 18 : undefined
+      },
+      fontSize: "small"
+    }), visibleLabels.map((label, index) => /*#__PURE__*/_jsx(Chip, {
+      label: label,
+      size: "small",
+      "data-cy": `course-difficulty-chip-${index}`,
+      sx: theme => difficultyChipSx(theme, compact)
+    }, label)), overflowLabels.length > 0 && /*#__PURE__*/_jsx(DifficultyOverflowTooltip, {
+      placement: "bottom-start",
+      title: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          minWidth: 140
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          sx: {
+            display: "block",
+            color: "text.secondary",
+            fontWeight: 700,
+            letterSpacing: 0.5,
+            textTransform: "uppercase",
+            pb: 1,
+            borderBottom: "1px solid",
+            borderColor: "divider"
+          },
+          children: t("difficulties")
+        }), levelLabels.map((label, index) => /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1,
+            py: 0.75,
+            borderBottom: index < levelLabels.length - 1 ? "1px solid" : "none",
+            borderColor: "divider"
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            component: "span",
+            sx: {
+              color: "text.disabled",
+              fontSize: "1.3rem",
+              lineHeight: 1
+            },
+            children: "\u2022"
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            sx: {
+              color: "text.primary"
+            },
+            children: label
+          })]
+        }, label))]
+      }),
+      children: /*#__PURE__*/_jsx(Chip, {
+        label: `+${overflowLabels.length}`,
+        size: "small",
+        "aria-label": `${t("difficulty")}: ${levelLabels.join(", ")}`,
+        "data-cy": "course-difficulty-overflow",
+        sx: theme => ({
+          ...difficultyChipSx(theme, compact),
+          fontWeight: 600
+        })
+      })
+    })]
+  });
+}
+CourseDifficulty.propTypes = {
+  t: PropTypes.func.isRequired,
+  difficulty: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  compact: PropTypes.bool
+};
 function CourseLoading({
   compact = false
 }) {
@@ -278,7 +415,7 @@ function CourseCard({
       limit: 1000
     }
   }, {
-    enabled: !!course?.courseId && isOutlineOpen
+    enabled: !!course?.courseId && (isOutlineOpen || visible)
   });
   const {
     membersQuery,
@@ -356,6 +493,7 @@ function CourseCard({
     handleLeaveCourse(courseId);
   };
   const courseSections = sectionsQuery.isSuccess ? sectionsQuery.data.Items : [];
+  const topicDifficulties = sectionsQuery.isSuccess ? [...new Set(courseSections.flatMap(section => section.topics || []).map(topic => topic.difficulty).filter(Boolean))] : [];
   const deleteCourse = async () => {
     const confirmed = await confirm(t("delete_course"), t("delete_course_confirmation"), "", true, t("course_deletion_note", {
       sectionCount: courseSections ? courseSections.length : 0
@@ -497,16 +635,10 @@ function CourseCard({
           columnGap: 1.5,
           rowGap: 0.5
         },
-        children: [course?.difficulty && /*#__PURE__*/_jsxs(CardInfoSectionItem, {
-          variant: "caption",
-          component: "span",
-          children: [/*#__PURE__*/_jsx(DifficultyIcon, {
-            sx: {
-              ...classes.infoIcon,
-              fontSize: compact ? 18 : undefined
-            },
-            fontSize: "small"
-          }), t(`card_${course.difficulty}`)]
+        children: [/*#__PURE__*/_jsx(CourseDifficulty, {
+          t: t,
+          difficulty: topicDifficulties.length > 0 ? topicDifficulties : course?.difficulty,
+          compact: compact
         }), (course?.pdf || course.topicsWithPdf && Object.keys(course?.topicsWithPdf)?.length > 0) && /*#__PURE__*/_jsxs(CardInfoSectionItem, {
           variant: "caption",
           component: "span",
@@ -673,7 +805,7 @@ MemoizedCourse.propTypes = {
   courseId: PropTypes.string.isRequired,
   courseName: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
-  difficulty: PropTypes.string,
+  difficulty: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   picture: PropTypes.string.isRequired,
   learnLang: PropTypes.string.isRequired,
   forLang: PropTypes.string.isRequired,

package/dist/Chat/Messages/Message/Message.js

@@ -272,6 +272,7 @@ export default function Message({
   speak,
   stopSpeaking,
   voice,
+  voiceLanguageCode,
   voicePitch,
   voiceSpeed,
   handleEditMessage,
@@ -471,6 +472,7 @@ export default function Message({
             forLang: forLang,
             handleSpeak: handleSpeak,
             voice: voice,
+            voiceLanguageCode: voiceLanguageCode,
             voicePitch: voicePitch,
             voiceSpeed: voiceSpeed,
             disableTranslation: disableTranslation,
@@ -538,6 +540,7 @@ export default function Message({
               forLang: forLang,
               handleSpeak: handleSpeak,
               voice: voice,
+              voiceLanguageCode: voiceLanguageCode,
               voicePitch: voicePitch,
               voiceSpeed: voiceSpeed,
               disableTranslation: disableTranslation,
@@ -623,7 +626,7 @@ export default function Message({
                   children: /*#__PURE__*/_jsx(IconButton, {
                     color: "inherit",
                     disabled: isSpeaking || recognizing || muteSound || isMessagePlaying || showTranslation,
-                    onClick: () => speak(text, voice, false, messageContainerIdSelector, null, false, voicePitch),
+                    onClick: () => speak(text, voice, false, messageContainerIdSelector, voiceLanguageCode, false, voicePitch),
                     size: "small",
                     "aria-label": messageIndex !== -1 ? accessibilityText ? accessibilityText : `Speak message ${messageIndex + 1}` : accessibilityText ? accessibilityText : `Speak message`,
                     sx: {

package/dist/Chat/Messages/Message/Message.test.js

@@ -0,0 +1,55 @@
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import Message from "./Message";
+
+// Messages spreads each message over these props, so a roleplay message carries
+// its own actor's voice and accent; a bot chat supplies one voice for the
+// whole chat. Replaying must use whichever applies, not the language default.
+import { jsx as _jsx } from "react/jsx-runtime";
+const renderMessage = (overrides = {}) => {
+  const theme = createTheme();
+  const speak = vi.fn();
+  render(/*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: /*#__PURE__*/_jsx(Message, {
+      t: k => k,
+      text: "Kia ora",
+      speak: speak,
+      messageIndex: 0,
+      index: 0,
+      messageCount: 1,
+      messages: [{
+        text: "Kia ora"
+      }],
+      ...overrides
+    })
+  }));
+  return speak;
+};
+describe("Message replay", () => {
+  afterEach(cleanup);
+  it("speaks with the accent the message carries", () => {
+    const speak = renderMessage({
+      voice: "Aria",
+      voiceLanguageCode: "en-NZ"
+    });
+    fireEvent.click(screen.getByRole("button", {
+      name: /Speak message/i
+    }));
+
+    // 5th positional argument of speak() is the accent.
+    expect(speak).toHaveBeenCalled();
+    expect(speak.mock.calls[0][1]).toBe("Aria");
+    expect(speak.mock.calls[0][4]).toBe("en-NZ");
+  });
+  it("sends no accent when nothing supplies one", () => {
+    const speak = renderMessage({
+      voice: "Joanna"
+    });
+    fireEvent.click(screen.getByRole("button", {
+      name: /Speak message/i
+    }));
+    expect(speak.mock.calls[0][4]).toBeUndefined();
+  });
+});

package/dist/Containers/App/App.js

@@ -217,6 +217,7 @@ function App({
   isCollapsed,
   setIsCollapsed,
   isUserInternal,
+  isCommunityAccessRestricted,
   handleQuickCreateClassroom,
   handleQuickCreateCourse,
   learnLang,
@@ -303,6 +304,18 @@ function App({
   };
   const isSearchActive = searchText || isMobileSearchExpanded;
   const isTeacher = user && user["custom:role"] === "teach";
+  const isSearchAllowed = isTeacher && !isCommunityAccessRestricted;
+
+  // If the restriction flag loads/flips async while search is already active
+  // (e.g. mobile search expanded, or text typed in), force-close it rather
+  // than only gating the initial render - otherwise a user already mid-search
+  // keeps access until they manually close it.
+  useEffect(() => {
+    if (!isSearchAllowed && (searchText || isMobileSearchExpanded)) {
+      setSearchText("");
+      setIsMobileSearchExpanded(false);
+    }
+  }, [isSearchAllowed, searchText, isMobileSearchExpanded]);
   const isUpgradePossible = subscription && subscription.isUpgradePossible;
   const hidden = useMediaQuery(theme => theme.breakpoints.down("sm"));
   return /*#__PURE__*/_jsxs("div", {
@@ -334,7 +347,7 @@ function App({
         })]
       }) : /*#__PURE__*/_jsxs(_Fragment, {
         children: [isLgScreen ? /*#__PURE__*/_jsx(_Fragment, {
-          children: isTeacher && /*#__PURE__*/_jsxs(_Fragment, {
+          children: isSearchAllowed && /*#__PURE__*/_jsxs(_Fragment, {
             children: [/*#__PURE__*/_jsx(AppSearch, {
               t: t,
               navigate: navigate,
@@ -348,7 +361,7 @@ function App({
             })]
           })
         }) : /*#__PURE__*/_jsx(_Fragment, {
-          children: isTeacher && /*#__PURE__*/_jsx(_Fragment, {
+          children: isSearchAllowed && /*#__PURE__*/_jsx(_Fragment, {
             children: /*#__PURE__*/_jsx(Tooltip, {
               title: t("search"),
               enterDelay: 300,
@@ -386,16 +399,20 @@ function App({
           startIcon: /*#__PURE__*/_jsx(Add, {}),
           color: "secondary",
           id: "appbar-create-button",
+          disabled: !subscription?.isSubscriptionLoaded,
           children: t("create")
         }) : /*#__PURE__*/_jsx(Tooltip, {
           title: t("create"),
           enterDelay: 300,
-          children: /*#__PURE__*/_jsx(IconButton, {
-            color: "inherit",
-            "aria-label": t("create"),
-            "aria-haspopup": "true",
-            onClick: handleClickCreate,
-            children: /*#__PURE__*/_jsx(Add, {})
+          children: /*#__PURE__*/_jsx("span", {
+            children: /*#__PURE__*/_jsx(IconButton, {
+              color: "inherit",
+              "aria-label": t("create"),
+              "aria-haspopup": "true",
+              onClick: handleClickCreate,
+              disabled: !subscription?.isSubscriptionLoaded,
+              children: /*#__PURE__*/_jsx(Add, {})
+            })
           })
         })), isLgScreen && /*#__PURE__*/_jsx(WhatsNew, {
           t: t,

package/dist/Dialogs/FindChatbotDialog/FindChatbotDialog.js

@@ -29,6 +29,7 @@ export default function FindChatbotDialog({
   onLoadMoreCommunity,
   hasMoreCommunity = false,
   isLoadingMoreCommunity = false,
+  isCommunityAccessRestricted = false,
   t = text => text
 }) {
   const scrollRef = useRef(null);
@@ -39,6 +40,8 @@ export default function FindChatbotDialog({
     threshold: 0
   });
   const [tab, setTab] = useState(0);
+  // 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({
@@ -81,12 +84,22 @@ export default function FindChatbotDialog({
     reset();
     handleClose();
   };
+
+  // If restriction flips on while the dialog is already open (e.g. the flag
+  // loads async), a previously-selected community chatbot could otherwise
+  // stay selected/added even though the Community tab is now locked out.
   useEffect(() => {
-    if (sentinelInView && tab === 1 && hasMoreCommunity && !isLoadingMoreCommunity) {
+    if (isCommunityAccessRestricted) {
+      reset();
+    }
+  }, [isCommunityAccessRestricted]);
+  useEffect(() => {
+    if (sentinelInView && effectiveTab === 1 && hasMoreCommunity && !isLoadingMoreCommunity) {
       onLoadMoreCommunity?.();
     }
-  }, [sentinelInView, tab, hasMoreCommunity, isLoadingMoreCommunity, onLoadMoreCommunity]);
+  }, [sentinelInView, effectiveTab, hasMoreCommunity, isLoadingMoreCommunity, onLoadMoreCommunity]);
   const handleTabChange = (_, v) => {
+    if (isCommunityAccessRestricted) return;
     setTab(v);
     setSearch("");
     setFilters({
@@ -114,9 +127,9 @@ export default function FindChatbotDialog({
     }
     return result;
   };
-  const currentChatbots = tab === 0 ? filterChatbots(libraryChatbots) : applyCommunityFilters(communityChatbots);
-  const isLoading = tab === 0 ? isLoadingLibrary : isLoadingCommunity;
-  const sectionLabel = tab === 0 ? t("add_own_exercise_message", {
+  const currentChatbots = effectiveTab === 0 ? filterChatbots(libraryChatbots) : applyCommunityFilters(communityChatbots);
+  const isLoading = effectiveTab === 0 ? isLoadingLibrary : isLoadingCommunity;
+  const sectionLabel = effectiveTab === 0 ? 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");
@@ -166,17 +179,18 @@ export default function FindChatbotDialog({
           borderColor: "divider"
         },
         children: /*#__PURE__*/_jsxs(Tabs, {
-          value: tab,
+          value: effectiveTab,
           onChange: handleTabChange,
           indicatorColor: "primary",
           textColor: "primary",
           children: [/*#__PURE__*/_jsx(Tab, {
             label: t("my_library") || "My Library"
           }), /*#__PURE__*/_jsx(Tab, {
-            label: t("community") || "Community"
+            label: t("community") || "Community",
+            disabled: isCommunityAccessRestricted
           })]
         })
-      }), tab === 1 && /*#__PURE__*/_jsx(Box, {
+      }), effectiveTab === 1 && /*#__PURE__*/_jsx(Box, {
         sx: {
           px: 3,
           py: {
@@ -232,7 +246,7 @@ export default function FindChatbotDialog({
             isSelected: bot => selectedBotIds.includes(bot.botId),
             compact: true,
             handleViewUserProfile: () => {}
-          }), tab === 1 && /*#__PURE__*/_jsx(Box, {
+          }), effectiveTab === 1 && /*#__PURE__*/_jsx(Box, {
             ref: sentinelRef,
             sx: {
               height: 40,

package/dist/Dialogs/FindScenarioDialog/FindScenarioDialog.js

@@ -17,6 +17,7 @@ export default function FindScenarioDialog({
   onLoadMoreCommunity,
   hasMoreCommunity = false,
   isLoadingMoreCommunity = false,
+  isCommunityAccessRestricted = false,
   t = text => text
 }) {
   const scrollRef = useRef(null);
@@ -27,6 +28,8 @@ export default function FindScenarioDialog({
     threshold: 0
   });
   const [tab, setTab] = useState(0);
+  // Restricted users are always kept on the library tab, regardless of state.
+  const effectiveTab = isCommunityAccessRestricted ? 0 : tab;
   const [selectedRoleplayIds, setSelectedRoleplayIds] = useState([]);
   const [search, setSearch] = useState("");
   const [filters, setFilters] = useState({
@@ -69,12 +72,22 @@ export default function FindScenarioDialog({
     reset();
     handleClose();
   };
+
+  // If restriction flips on while the dialog is already open (e.g. the flag
+  // loads async), a previously-selected community scenario could otherwise
+  // stay selected/added even though the Community tab is now locked out.
   useEffect(() => {
-    if (sentinelInView && tab === 1 && hasMoreCommunity && !isLoadingMoreCommunity) {
+    if (isCommunityAccessRestricted) {
+      reset();
+    }
+  }, [isCommunityAccessRestricted]);
+  useEffect(() => {
+    if (sentinelInView && effectiveTab === 1 && hasMoreCommunity && !isLoadingMoreCommunity) {
       onLoadMoreCommunity?.();
     }
-  }, [sentinelInView, tab, hasMoreCommunity, isLoadingMoreCommunity, onLoadMoreCommunity]);
+  }, [sentinelInView, effectiveTab, hasMoreCommunity, isLoadingMoreCommunity, onLoadMoreCommunity]);
   const handleTabChange = (_, v) => {
+    if (isCommunityAccessRestricted) return;
     setTab(v);
     setSearch("");
     setFilters({
@@ -102,9 +115,9 @@ export default function FindScenarioDialog({
     }
     return result;
   };
-  const currentScenarios = tab === 0 ? filterScenarios(libraryScenarios) : applyCommunityFilters(communityScenarios);
-  const isLoading = tab === 0 ? isLoadingLibrary : isLoadingCommunity;
-  const sectionLabel = tab === 0 ? t("add_own_exercise_message", {
+  const currentScenarios = effectiveTab === 0 ? filterScenarios(libraryScenarios) : applyCommunityFilters(communityScenarios);
+  const isLoading = effectiveTab === 0 ? isLoadingLibrary : isLoadingCommunity;
+  const sectionLabel = effectiveTab === 0 ? t("add_own_exercise_message", {
     exerciseName: t("scenarios").toLowerCase()
   }) : t("or_select_a_community_template_desc");
   const addButtonLabel = selectedRoleplayIds.length > 0 ? `${t("add_scenarios")} (${selectedRoleplayIds.length})` : t("add_scenarios");
@@ -154,17 +167,18 @@ export default function FindScenarioDialog({
           borderColor: "divider"
         },
         children: /*#__PURE__*/_jsxs(Tabs, {
-          value: tab,
+          value: effectiveTab,
           onChange: handleTabChange,
           indicatorColor: "primary",
           textColor: "primary",
           children: [/*#__PURE__*/_jsx(Tab, {
             label: t("my_library") || "My Library"
           }), /*#__PURE__*/_jsx(Tab, {
-            label: t("community") || "Community"
+            label: t("community") || "Community",
+            disabled: isCommunityAccessRestricted
           })]
         })
-      }), tab === 1 && /*#__PURE__*/_jsx(Box, {
+      }), effectiveTab === 1 && /*#__PURE__*/_jsx(Box, {
         sx: {
           px: 3,
           py: {
@@ -220,7 +234,7 @@ export default function FindScenarioDialog({
             isSelected: roleplay => selectedRoleplayIds.includes(roleplay.roleplayId),
             compact: true,
             handleViewUserProfile: () => {}
-          }), tab === 1 && /*#__PURE__*/_jsx(Box, {
+          }), effectiveTab === 1 && /*#__PURE__*/_jsx(Box, {
             ref: sentinelRef,
             sx: {
               height: 40,

package/dist/Dialogs/FindTopicsDialog/FindTopicsDialog.js

@@ -150,6 +150,7 @@ export default function FindTopicsDialog({
   onLoadMoreCommunity,
   hasMoreCommunity = false,
   isLoadingMoreCommunity = false,
+  isCommunityAccessRestricted = false,
   t = text => text
 }) {
   const scrollRef = useRef(null);
@@ -160,6 +161,8 @@ export default function FindTopicsDialog({
     threshold: 0
   });
   const [tab, setTab] = useState(0);
+  // Restricted users are always kept on the library tab, regardless of state.
+  const effectiveTab = isCommunityAccessRestricted ? 0 : tab;
   const [selectedTopicIds, setSelectedTopicIds] = useState([]);
   const [search, setSearch] = useState("");
   const [filters, setFilters] = useState({
@@ -202,12 +205,22 @@ export default function FindTopicsDialog({
     reset();
     handleClose();
   };
+
+  // If restriction flips on while the dialog is already open (e.g. the flag
+  // loads async), a previously-selected community topic could otherwise stay
+  // selected/added even though the Community tab is now locked out - clear it.
   useEffect(() => {
-    if (sentinelInView && tab === 1 && hasMoreCommunity && !isLoadingMoreCommunity) {
+    if (isCommunityAccessRestricted) {
+      reset();
+    }
+  }, [isCommunityAccessRestricted]);
+  useEffect(() => {
+    if (sentinelInView && effectiveTab === 1 && hasMoreCommunity && !isLoadingMoreCommunity) {
       onLoadMoreCommunity?.();
     }
-  }, [sentinelInView, tab, hasMoreCommunity, isLoadingMoreCommunity, onLoadMoreCommunity]);
+  }, [sentinelInView, effectiveTab, hasMoreCommunity, isLoadingMoreCommunity, onLoadMoreCommunity]);
   const handleTabChange = (_, v) => {
+    if (isCommunityAccessRestricted) return;
     setTab(v);
     setSearch("");
     setFilters({
@@ -235,9 +248,9 @@ export default function FindTopicsDialog({
     }
     return result;
   };
-  const currentTopics = tab === 0 ? filterTopics(libraryTopics) : applyCommunityFilters(communityTopics);
-  const isLoading = tab === 0 ? isLoadingLibrary : isLoadingCommunity;
-  const sectionLabel = tab === 0 ? t("add_own_exercise_message", {
+  const currentTopics = effectiveTab === 0 ? filterTopics(libraryTopics) : applyCommunityFilters(communityTopics);
+  const isLoading = effectiveTab === 0 ? isLoadingLibrary : isLoadingCommunity;
+  const sectionLabel = effectiveTab === 0 ? t("add_own_exercise_message", {
     exerciseName: t("topic").toLowerCase()
   }) : t("or_select_a_community_template_desc") || "Community Topics";
   const addButtonLabel = selectedTopicIds.length > 0 ? `${t("add_topics") || "Add Topics"} (${selectedTopicIds.length})` : t("add_topics") || "Add Topics";
@@ -281,7 +294,7 @@ export default function FindTopicsDialog({
           borderColor: "divider"
         },
         children: /*#__PURE__*/_jsxs(Tabs, {
-          value: tab,
+          value: effectiveTab,
           onChange: handleTabChange,
           indicatorColor: "primary",
           textColor: "primary",
@@ -291,10 +304,11 @@ export default function FindTopicsDialog({
             "data-cy": "find-topics-tab-library"
           }), /*#__PURE__*/_jsx(Tab, {
             label: t("community") || "Community",
+            disabled: isCommunityAccessRestricted,
             "data-cy": "find-topics-tab-community"
           })]
         })
-      }), tab === 1 && /*#__PURE__*/_jsx(Box, {
+      }), effectiveTab === 1 && /*#__PURE__*/_jsx(Box, {
         sx: {
           px: 3,
           py: {
@@ -350,7 +364,7 @@ export default function FindTopicsDialog({
             selectionEnabled: true,
             isSelected: topic => selectedTopicIds.includes(topic.topicId),
             compact: true
-          }), tab === 1 && /*#__PURE__*/_jsx(Box, {
+          }), effectiveTab === 1 && /*#__PURE__*/_jsx(Box, {
             ref: sentinelRef,
             sx: {
               height: 40,