refactor(table): add columnPicker functionality with column picker dialog, toolbar buttons, visibility state, and tests

    - Add MuiColumnPickerDialog with Apply/Export actions, locked-column enforcement, and optional dataColumnIds hint when no data columns are selected
    - Update MuiTableToolbar to render a trigger button (opens dialog) and a direct export button alongside the existing CSV download icon
    - Extend useTanStackTableBuilder with column visibility state (localStorage
      persistence, dynamic reconciliation), onExportFromPicker, onDirectExport,
      and cross-page selection helpers (selectedCount, toggleAllFiltered, etc.)
    - Add ColumnPickerTemplate interface and Body.ts selection fields
    - Add full test coverage for dialog, toolbar, and hook behaviour
    - Add lib.components.table.* locale keys (en/ko/zh)

Author: LWS49

client/app/bundles/course/duplication/pages/Duplication/DuplicateItemsConfirmation/AssessmentsListing.tsx

@@ -2,7 +2,6 @@ import { FC } from 'react';
 import { defineMessages } from 'react-intl';
 import { Card, CardContent, ListSubheader } from '@mui/material';
 
-import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
 import TypeBadge from 'course/duplication/components/TypeBadge';
 import UnpublishedIcon from 'course/duplication/components/UnpublishedIcon';
 import { selectDuplicationStore } from 'course/duplication/selectors';
@@ -12,6 +11,7 @@ import {
   DuplicationTabData,
 } from 'course/duplication/types';
 import componentTranslations from 'course/translations';
+import IndentedCheckbox from 'lib/components/core/IndentedCheckbox';
 import { useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 

client/app/bundles/course/duplication/pages/Duplication/DuplicateItemsConfirmation/MaterialsListing.tsx

@@ -2,14 +2,14 @@ import { FC } from 'react';
 import { defineMessages } from 'react-intl';
 import { Card, CardContent, ListSubheader } from '@mui/material';
 
-import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
 import TypeBadge from 'course/duplication/components/TypeBadge';
 import { selectDuplicationStore } from 'course/duplication/selectors';
 import {
   DuplicationFolderData,
   DuplicationMaterialData,
 } from 'course/duplication/types';
 import componentTranslations from 'course/translations';
+import IndentedCheckbox from 'lib/components/core/IndentedCheckbox';
 import { useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 

client/app/bundles/course/duplication/pages/Duplication/DuplicateItemsConfirmation/VideosListing.tsx

@@ -2,7 +2,6 @@ import { FC } from 'react';
 import { defineMessages } from 'react-intl';
 import { Card, CardContent, ListSubheader } from '@mui/material';
 
-import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
 import TypeBadge from 'course/duplication/components/TypeBadge';
 import UnpublishedIcon from 'course/duplication/components/UnpublishedIcon';
 import { selectDuplicationStore } from 'course/duplication/selectors';
@@ -11,6 +10,7 @@ import {
   DuplicationVideoTabData,
 } from 'course/duplication/types';
 import componentTranslations from 'course/translations';
+import IndentedCheckbox from 'lib/components/core/IndentedCheckbox';
 import { useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 

client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/AchievementsSelector.tsx

@@ -3,14 +3,14 @@ import { defineMessages } from 'react-intl';
 import { ListSubheader, Typography } from '@mui/material';
 
 import BulkSelectors from 'course/duplication/components/BulkSelectors';
-import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
 import TypeBadge from 'course/duplication/components/TypeBadge';
 import UnpublishedIcon from 'course/duplication/components/UnpublishedIcon';
 import { selectDuplicationStore } from 'course/duplication/selectors';
 import { actions } from 'course/duplication/store';
 import { DuplicationAchievementData } from 'course/duplication/types';
 import { getAchievementBadgeUrl } from 'course/helper/achievements';
 import componentTranslations from 'course/translations';
+import IndentedCheckbox from 'lib/components/core/IndentedCheckbox';
 import Thumbnail from 'lib/components/core/Thumbnail';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';

client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/AssessmentsSelector.tsx

@@ -3,7 +3,6 @@ import { defineMessages } from 'react-intl';
 import { ListSubheader, Typography } from '@mui/material';
 
 import BulkSelectors from 'course/duplication/components/BulkSelectors';
-import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
 import TypeBadge from 'course/duplication/components/TypeBadge';
 import UnpublishedIcon from 'course/duplication/components/UnpublishedIcon';
 import {
@@ -17,6 +16,7 @@ import {
   DuplicationTabData,
 } from 'course/duplication/types';
 import componentTranslations from 'course/translations';
+import IndentedCheckbox from 'lib/components/core/IndentedCheckbox';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 

client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/MaterialsSelector.tsx

@@ -3,7 +3,6 @@ import { defineMessages } from 'react-intl';
 import { ListSubheader, Typography } from '@mui/material';
 
 import BulkSelectors from 'course/duplication/components/BulkSelectors';
-import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
 import TypeBadge from 'course/duplication/components/TypeBadge';
 import { selectDuplicationStore } from 'course/duplication/selectors';
 import { actions } from 'course/duplication/store';
@@ -12,6 +11,7 @@ import {
   DuplicationMaterialData,
 } from 'course/duplication/types';
 import componentTranslations from 'course/translations';
+import IndentedCheckbox from 'lib/components/core/IndentedCheckbox';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 

client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/SurveysSelector.tsx

@@ -3,13 +3,13 @@ import { defineMessages } from 'react-intl';
 import { ListSubheader, Typography } from '@mui/material';
 
 import BulkSelectors from 'course/duplication/components/BulkSelectors';
-import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
 import TypeBadge from 'course/duplication/components/TypeBadge';
 import UnpublishedIcon from 'course/duplication/components/UnpublishedIcon';
 import { selectDuplicationStore } from 'course/duplication/selectors';
 import { actions } from 'course/duplication/store';
 import { DuplicationSurveyData } from 'course/duplication/types';
 import componentTranslations from 'course/translations';
+import IndentedCheckbox from 'lib/components/core/IndentedCheckbox';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 

client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/VideosSelector.tsx

@@ -3,7 +3,6 @@ import { defineMessages } from 'react-intl';
 import { ListSubheader, Typography } from '@mui/material';
 
 import BulkSelectors from 'course/duplication/components/BulkSelectors';
-import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
 import TypeBadge from 'course/duplication/components/TypeBadge';
 import UnpublishedIcon from 'course/duplication/components/UnpublishedIcon';
 import { selectDuplicationStore } from 'course/duplication/selectors';
@@ -13,6 +12,7 @@ import {
   DuplicationVideoTabData,
 } from 'course/duplication/types';
 import componentTranslations from 'course/translations';
+import IndentedCheckbox from 'lib/components/core/IndentedCheckbox';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 

…lication/components/IndentedCheckbox.tsx …lib/components/core/IndentedCheckbox.tsxclient/app/bundles/course/duplication/components/IndentedCheckbox.tsx renamed to client/app/lib/components/core/IndentedCheckbox.tsx client/app/bundles/course/duplication/components/IndentedCheckbox.tsx renamed to client/app/lib/components/core/IndentedCheckbox.tsx

@@ -0,0 +1,52 @@
+import { FC, ReactNode } from 'react';
+
+import IndentedCheckbox from 'lib/components/core/IndentedCheckbox';
+
+import { ColumnPickerRenderCtx } from '../builder';
+
+interface ColumnPickerTreeGroupProps {
+  label: string;
+  /** All leaf column ids that belong to this group (used to derive parent state). */
+  childIds: string[];
+  ctx: ColumnPickerRenderCtx;
+  /** Ids that are locked visible — parent checkbox is disabled when all children are locked. */
+  locked?: string[];
+  indentLevel?: number;
+  children: ReactNode;
+}
+
+/**
+ * Renders a parent checkbox whose checked/indeterminate state mirrors its children's
+ * visibility, and whose onChange bulk-toggles all children via ctx.setManyVisible.
+ * Children are rendered below (not inline), giving a vertical tree layout.
+ */
+const ColumnPickerTreeGroup: FC<ColumnPickerTreeGroupProps> = ({
+  label,
+  childIds,
+  ctx,
+  locked = [],
+  indentLevel = 0,
+  children,
+}) => {
+  const visibleCount = childIds.filter((id) => ctx.isVisible(id)).length;
+  const allVisible = childIds.length > 0 && visibleCount === childIds.length;
+  const someVisible = visibleCount > 0 && !allVisible;
+  const allLocked =
+    childIds.length > 0 && childIds.every((id) => locked.includes(id));
+
+  return (
+    <div>
+      <IndentedCheckbox
+        checked={allVisible}
+        disabled={allLocked}
+        indentLevel={indentLevel}
+        indeterminate={someVisible}
+        label={label}
+        onChange={(e) => ctx.setManyVisible(childIds, e.target.checked)}
+      />
+      <div>{children}</div>
+    </div>
+  );
+};
+
+export default ColumnPickerTreeGroup;