From 7e79056b6d0b224d31ebfff895c31a2c0977db53 Mon Sep 17 00:00:00 2001
From: Brayan Ceron <brayan.ceron@edunext.co>
Date: Fri, 9 Jan 2026 12:35:06 -0500
Subject: [PATCH 01/14] feat: enable to select collections as components in the
 problems picker modal

---
 .../LibraryAuthoringPage.tsx                  |   3 +-
 src/library-authoring/LibraryContent.tsx      |  13 +-
 .../common/context/ComponentPickerContext.tsx | 150 ++++++++++++++++--
 .../components/AddComponentWidget.tsx         |  77 ++++++++-
 .../components/CollectionCard.tsx             |  12 +-
 .../components/ComponentCard.tsx              |   7 +-
 6 files changed, 239 insertions(+), 23 deletions(-)

diff --git a/src/library-authoring/LibraryAuthoringPage.tsx b/src/library-authoring/LibraryAuthoringPage.tsx
index b49ae07e76..77ff30cc16 100644
--- a/src/library-authoring/LibraryAuthoringPage.tsx
+++ b/src/library-authoring/LibraryAuthoringPage.tsx
@@ -233,10 +233,9 @@ const LibraryAuthoringPage = ({
 
   const activeTypeFilters = {
     components: 'type = "library_block"',
-    collections: 'type = "collection"',
     units: 'block_type = "unit"',
   };
-  if (activeKey !== ContentType.home) {
+  if (activeKey !== ContentType.home && activeKey !== ContentType.collections) {
     extraFilter.push(activeTypeFilters[activeKey]);
   }
 
diff --git a/src/library-authoring/LibraryContent.tsx b/src/library-authoring/LibraryContent.tsx
index 53fdb23ecd..98d959fce1 100644
--- a/src/library-authoring/LibraryContent.tsx
+++ b/src/library-authoring/LibraryContent.tsx
@@ -43,6 +43,17 @@ const LibraryContent = ({ contentType = ContentType.home }: LibraryContentProps)
   const { openCreateCollectionModal } = useLibraryContext();
   const { openAddContentSidebar, openComponentInfoSidebar } = useSidebarContext();
 
+  /**
+   * Filter collections on the frontend to display only collection cards in the Collections tab.
+   * This approach is used instead of backend filtering to ensure that all components (including those
+   * within collections) remain available in the 'hits' array. This is necessary for the component
+   * selection workflow when adding components to xblocks by choosing the while collection in Collections tab.
+   * Note: LibraryAuthoringPage.tsx has been modified to skip backend filtering for this purpose.
+   */
+  const filteredHits = contentType === ContentType.collections
+    ? hits.filter((hit) => hit.type === 'collection')
+    : hits;
+
   useEffect(() => {
     if (usageKey) {
       openComponentInfoSidebar(usageKey);
@@ -76,7 +87,7 @@ const LibraryContent = ({ contentType = ContentType.home }: LibraryContentProps)
 
   return (
     <div className="library-cards-grid">
-      {hits.map((contentHit) => {
+      {filteredHits.map((contentHit) => {
         const CardComponent = LibraryItemCard[contentHit.type] || ComponentCard;
 
         return <CardComponent key={contentHit.id} hit={contentHit} />;
diff --git a/src/library-authoring/common/context/ComponentPickerContext.tsx b/src/library-authoring/common/context/ComponentPickerContext.tsx
index 83c258ec1d..514df45027 100644
--- a/src/library-authoring/common/context/ComponentPickerContext.tsx
+++ b/src/library-authoring/common/context/ComponentPickerContext.tsx
@@ -9,9 +9,20 @@ import {
 export interface SelectedComponent {
   usageKey: string;
   blockType: string;
+  collectionKeys?: string[];
 }
 
-export type ComponentSelectedEvent = (selectedComponent: SelectedComponent) => void;
+export type CollectionStatus = 'selected' | 'indeterminate';
+
+export interface SelectedCollection {
+  key: string;
+  status: CollectionStatus;
+}
+
+export type ComponentSelectedEvent = (
+  selectedComponent: SelectedComponent,
+  collectionComponents?: SelectedComponent[] | number
+) => void;
 export type ComponentSelectionChangedEvent = (selectedComponents: SelectedComponent[]) => void;
 
 type NoComponentPickerType = {
@@ -21,6 +32,7 @@ type NoComponentPickerType = {
    */
   onComponentSelected?: never;
   selectedComponents?: never;
+  selectedCollections?: never;
   addComponentToSelectedComponents?: never;
   removeComponentFromSelectedComponents?: never;
   restrictToLibrary?: never;
@@ -30,6 +42,7 @@ type ComponentPickerSingleType = {
   componentPickerMode: 'single';
   onComponentSelected: ComponentSelectedEvent;
   selectedComponents?: never;
+  selectedCollections?: never;
   addComponentToSelectedComponents?: never;
   removeComponentFromSelectedComponents?: never;
   restrictToLibrary: boolean;
@@ -39,6 +52,7 @@ type ComponentPickerMultipleType = {
   componentPickerMode: 'multiple';
   onComponentSelected?: never;
   selectedComponents: SelectedComponent[];
+  selectedCollections: SelectedCollection[];
   addComponentToSelectedComponents: ComponentSelectedEvent;
   removeComponentFromSelectedComponents: ComponentSelectedEvent;
   restrictToLibrary: boolean;
@@ -85,16 +99,105 @@ export const ComponentPickerProvider = ({
   onChangeComponentSelection,
 }: ComponentPickerProviderProps) => {
   const [selectedComponents, setSelectedComponents] = useState<SelectedComponent[]>([]);
+  const [selectedCollections, setSelectedCollections] = useState<SelectedCollection[]>([]);
+
+  /**
+   * Updates the selectedCollections state based on how many components are selected.
+   * @param collectionKey - The key of the collection to update
+   * @param selectedCount - Number of components currently selected in the collection
+   * @param totalCount - Total number of components in the collection
+   */
+  const updateCollectionStatus = useCallback((
+    collectionKey: string,
+    selectedCount: number,
+    totalCount: number,
+  ) => {
+    setSelectedCollections((prevSelectedCollections) => {
+      const filteredCollections = prevSelectedCollections.filter(
+        (collection) => collection.key !== collectionKey,
+      );
+
+      if (selectedCount === 0) {
+        return filteredCollections;
+      }
+      if (selectedCount >= totalCount) {
+        return [...filteredCollections, { key: collectionKey, status: 'selected' as CollectionStatus }];
+      }
+      return [...filteredCollections, { key: collectionKey, status: 'indeterminate' as CollectionStatus }];
+    });
+  }, []);
+
+  /**
+   * Finds the common collection key between a component and selected components.
+   */
+  const findCommonCollectionKey = useCallback((
+    componentKeys: string[] | undefined,
+    components: SelectedComponent[],
+  ): string | undefined => {
+    if (!componentKeys?.length || !components.length) {
+      return undefined;
+    }
+
+    for (const component of components) {
+      const commonKey = component.collectionKeys?.find((key) => componentKeys.includes(key));
+      if (commonKey) {
+        return commonKey;
+      }
+    }
+
+    return undefined;
+  }, []);
 
   const addComponentToSelectedComponents = useCallback<ComponentSelectedEvent>((
     selectedComponent: SelectedComponent,
+    collectionComponents?: SelectedComponent[] | number,
   ) => {
+    const componentsToAdd = Array.isArray(collectionComponents) && collectionComponents.length
+      ? collectionComponents
+      : [selectedComponent];
+
     setSelectedComponents((prevSelectedComponents) => {
-      // istanbul ignore if: this should never happen
-      if (prevSelectedComponents.some((component) => component.usageKey === selectedComponent.usageKey)) {
+      const existingKeys = new Set(prevSelectedComponents.map((c) => c.usageKey));
+      const newComponents = componentsToAdd.filter((c) => !existingKeys.has(c.usageKey));
+
+      if (newComponents.length === 0) {
         return prevSelectedComponents;
       }
-      const newSelectedComponents = [...prevSelectedComponents, selectedComponent];
+
+      const newSelectedComponents = [...prevSelectedComponents, ...newComponents];
+
+      // Handle collection selection (when selecting entire collection)
+      if (Array.isArray(collectionComponents) && collectionComponents.length) {
+        updateCollectionStatus(
+          selectedComponent.usageKey,
+          collectionComponents.length,
+          collectionComponents.length,
+        );
+      }
+
+      // Handle individual component selection (with total count)
+      if (typeof collectionComponents === 'number') {
+        const componentCollectionKeys = selectedComponent.collectionKeys;
+        const selectedCollectionComponents = newSelectedComponents.filter(
+          (component) => component.collectionKeys?.some(
+            (key) => componentCollectionKeys?.includes(key),
+          ),
+        );
+
+        const collectionKey = findCommonCollectionKey(
+          componentCollectionKeys,
+          selectedCollectionComponents,
+        );
+
+        if (collectionKey) {
+          updateCollectionStatus(
+            collectionKey,
+            selectedCollectionComponents.length,
+            collectionComponents,
+          );
+        }
+      }
+
       onChangeComponentSelection?.(newSelectedComponents);
       return newSelectedComponents;
     });
@@ -102,15 +205,41 @@ export const ComponentPickerProvider = ({
 
   const removeComponentFromSelectedComponents = useCallback<ComponentSelectedEvent>((
     selectedComponent: SelectedComponent,
+    collectionComponents?: SelectedComponent[] | number,
   ) => {
+    const componentsToRemove = Array.isArray(collectionComponents) && collectionComponents.length
+      ? collectionComponents
+      : [selectedComponent];
+    const usageKeysToRemove = new Set(componentsToRemove.map((c) => c.usageKey));
+
     setSelectedComponents((prevSelectedComponents) => {
-      // istanbul ignore if: this should never happen
-      if (!prevSelectedComponents.some((component) => component.usageKey === selectedComponent.usageKey)) {
-        return prevSelectedComponents;
-      }
       const newSelectedComponents = prevSelectedComponents.filter(
-        (component) => component.usageKey !== selectedComponent.usageKey,
+        (component) => !usageKeysToRemove.has(component.usageKey),
       );
+
+      if (typeof collectionComponents === 'number') {
+        const componentCollectionKeys = selectedComponent.collectionKeys;
+        const collectionKey = findCommonCollectionKey(componentCollectionKeys, componentsToRemove);
+
+        if (collectionKey) {
+          const remainingCollectionComponents = newSelectedComponents.filter(
+            (component) => component.collectionKeys?.includes(collectionKey),
+          );
+          updateCollectionStatus(
+            collectionKey,
+            remainingCollectionComponents.length,
+            collectionComponents,
+          );
+        }
+      } else {
+        // Fallback: remove collections that have no remaining components
+        setSelectedCollections((prevSelectedCollections) => prevSelectedCollections.filter(
+          (collection) => newSelectedComponents.some(
+            (component) => component.collectionKeys?.includes(collection.key),
+          ),
+        ));
+      }
+
       onChangeComponentSelection?.(newSelectedComponents);
       return newSelectedComponents;
     });
@@ -128,6 +257,7 @@ export const ComponentPickerProvider = ({
         return {
           componentPickerMode,
           restrictToLibrary,
+          selectedCollections,
           selectedComponents,
           addComponentToSelectedComponents,
           removeComponentFromSelectedComponents,
@@ -143,7 +273,7 @@ export const ComponentPickerProvider = ({
     addComponentToSelectedComponents,
     removeComponentFromSelectedComponents,
     selectedComponents,
-    onChangeComponentSelection,
+    selectedCollections,
   ]);
 
   return (
diff --git a/src/library-authoring/components/AddComponentWidget.tsx b/src/library-authoring/components/AddComponentWidget.tsx
index a6e1c0f9ba..197d0c1a02 100644
--- a/src/library-authoring/components/AddComponentWidget.tsx
+++ b/src/library-authoring/components/AddComponentWidget.tsx
@@ -1,20 +1,56 @@
+import { useMemo } from 'react';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
 import {
   AddCircleOutline,
   CheckBoxIcon,
+  IndeterminateCheckBox,
   CheckBoxOutlineBlank,
 } from '@openedx/paragon/icons';
 
-import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
+import { ContentHit, useSearchContext } from '../../search-manager';
+import { SelectedComponent, useComponentPickerContext } from '../common/context/ComponentPickerContext';
 import messages from './messages';
 
 interface AddComponentWidgetProps {
   usageKey: string;
   blockType: string;
+  collectionKeys?: string[];
+  isCollection?: boolean;
 }
 
-const AddComponentWidget = ({ usageKey, blockType }: AddComponentWidgetProps) => {
+/**
+ * Builds an array of SelectedComponent from collection hits.
+ */
+const buildCollectionComponents = (
+  hits: ReturnType<typeof useSearchContext>['hits'],
+  collectionUsageKey: string,
+): SelectedComponent[] => hits
+  .filter((hit) => hit.type === 'library_block' && hit.collections?.key?.includes(collectionUsageKey))
+  .map((hit: ContentHit) => ({
+    usageKey: hit.usageKey,
+    blockType: hit.blockType,
+    collectionKeys: (hit as ContentHit).collections?.key,
+  }));
+
+/**
+ * Counts the number of hits that share a collection key with the given component.
+ */
+const countCollectionHits = (
+  hits: ReturnType<typeof useSearchContext>['hits'],
+  componentCollectionKey: string[] | undefined,
+): number => {
+  if (!componentCollectionKey?.length) {
+    return 0;
+  }
+  return hits.filter(
+    (hit) => (hit as ContentHit).collections?.key?.some((key) => componentCollectionKey.includes(key)),
+  ).length;
+};
+
+const AddComponentWidget = ({
+  usageKey, blockType, collectionKeys, isCollection,
+}: AddComponentWidgetProps) => {
   const intl = useIntl();
 
   const {
@@ -23,8 +59,22 @@ const AddComponentWidget = ({ usageKey, blockType }: AddComponentWidgetProps) =>
     addComponentToSelectedComponents,
     removeComponentFromSelectedComponents,
     selectedComponents,
+    selectedCollections,
   } = useComponentPickerContext();
 
+  const { hits } = useSearchContext();
+
+  const collectionData = useMemo(() => {
+    // When selecting a collection: retrieve all its components to enable bulk selection
+    if (isCollection) {
+      return buildCollectionComponents(hits, usageKey);
+    }
+    // When selecting an individual component: get the total count of components in its collection
+    // This count is used to determine if the entire collection should be marked as selected
+    const componentCollectionKey = (hits.find((hit) => hit.usageKey === usageKey) as ContentHit)?.collections?.key;
+    return countCollectionHits(hits, componentCollectionKey);
+  }, [hits, usageKey, isCollection]);
+
   // istanbul ignore if: this should never happen
   if (!usageKey) {
     throw new Error('usageKey is required');
@@ -50,24 +100,37 @@ const AddComponentWidget = ({ usageKey, blockType }: AddComponentWidgetProps) =>
   }
 
   if (componentPickerMode === 'multiple') {
-    const isChecked = selectedComponents.some((component) => component.usageKey === usageKey);
+    const collectionStatus = selectedCollections.find((c) => c.key === usageKey)?.status;
+
+    const isChecked = isCollection
+      ? collectionStatus === 'selected'
+      : selectedComponents.some((component) => component.usageKey === usageKey);
+
+    const isIndeterminate = isCollection && collectionStatus === 'indeterminate';
+
+    const getIcon = () => {
+      if (isChecked) { return CheckBoxIcon; }
+      if (isIndeterminate) { return IndeterminateCheckBox; }
+      return CheckBoxOutlineBlank;
+    };
 
     const handleChange = () => {
-      const selectedComponent = {
+      const selectedComponent: SelectedComponent = {
         usageKey,
         blockType,
+        collectionKeys,
       };
       if (!isChecked) {
-        addComponentToSelectedComponents(selectedComponent);
+        addComponentToSelectedComponents(selectedComponent, collectionData);
       } else {
-        removeComponentFromSelectedComponents(selectedComponent);
+        removeComponentFromSelectedComponents(selectedComponent, collectionData);
       }
     };
 
     return (
       <Button
         variant="outline-primary"
-        iconBefore={isChecked ? CheckBoxIcon : CheckBoxOutlineBlank}
+        iconBefore={getIcon()}
         onClick={handleChange}
       >
         {intl.formatMessage(messages.componentPickerMultipleSelectTitle)}
diff --git a/src/library-authoring/components/CollectionCard.tsx b/src/library-authoring/components/CollectionCard.tsx
index 21d5ef5d4f..ee978d7935 100644
--- a/src/library-authoring/components/CollectionCard.tsx
+++ b/src/library-authoring/components/CollectionCard.tsx
@@ -20,6 +20,7 @@ import { ToastContext } from '../../generic/toast-context';
 import { useDeleteCollection, useRestoreCollection } from '../data/apiHooks';
 import DeleteModal from '../../generic/delete-modal/DeleteModal';
 import messages from './messages';
+import AddComponentWidget from './AddComponentWidget';
 
 type CollectionMenuProps = {
   hit: CollectionHit,
@@ -155,9 +156,16 @@ const CollectionCard = ({ hit } : CollectionCardProps) => {
       description={description}
       tags={tags}
       numChildren={numChildrenCount}
-      actions={!componentPickerMode && (
+      actions={(
         <ActionRow>
-          <CollectionMenu hit={hit} />
+          {componentPickerMode ? (
+            <AddComponentWidget
+              isCollection
+              usageKey={collectionId}
+              blockType={itemType}
+            />
+          ) : (
+            <CollectionMenu hit={hit} />)}
         </ActionRow>
       )}
       onSelect={openCollection}
diff --git a/src/library-authoring/components/ComponentCard.tsx b/src/library-authoring/components/ComponentCard.tsx
index 4b58147fbf..757e4b79e1 100644
--- a/src/library-authoring/components/ComponentCard.tsx
+++ b/src/library-authoring/components/ComponentCard.tsx
@@ -26,6 +26,7 @@ const ComponentCard = ({ hit }: ComponentCardProps) => {
     formatted,
     tags,
     usageKey,
+    collections,
     publishStatus,
   } = hit;
   const componentDescription: string = (
@@ -56,7 +57,11 @@ const ComponentCard = ({ hit }: ComponentCardProps) => {
       actions={(
         <ActionRow>
           {componentPickerMode ? (
-            <AddComponentWidget usageKey={usageKey} blockType={blockType} />
+            <AddComponentWidget
+              usageKey={usageKey}
+              blockType={blockType}
+              collectionKeys={collections?.key ?? undefined}
+            />
           ) : (
             <ComponentMenu usageKey={usageKey} />
           )}

From c3750b0a809a23e063b080d9b22594c8ed6d77d4 Mon Sep 17 00:00:00 2001
From: Brayan Ceron <brayan.ceron@edunext.co>
Date: Tue, 13 Jan 2026 10:16:15 -0500
Subject: [PATCH 02/14] refactor: remove unused ContentType import and simplify
 LibraryContent usage

---
 .../collections/LibraryCollectionComponents.tsx                | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/library-authoring/collections/LibraryCollectionComponents.tsx b/src/library-authoring/collections/LibraryCollectionComponents.tsx
index 6fcd79aa5c..b0d071071d 100644
--- a/src/library-authoring/collections/LibraryCollectionComponents.tsx
+++ b/src/library-authoring/collections/LibraryCollectionComponents.tsx
@@ -4,7 +4,6 @@ import { useSearchContext } from '../../search-manager';
 import messages from './messages';
 import { useSidebarContext } from '../common/context/SidebarContext';
 import LibraryContent from '../LibraryContent';
-import { ContentType } from '../routes';
 
 const LibraryCollectionComponents = () => {
   const { totalHits: componentCount, isFiltered } = useSearchContext();
@@ -25,7 +24,7 @@ const LibraryCollectionComponents = () => {
   return (
     <Stack direction="vertical" gap={3}>
       <h3 className="text-gray">Content ({componentCount})</h3>
-      <LibraryContent contentType={ContentType.collections} />
+      <LibraryContent />
     </Stack>
   );
 };

From eb08ffde1c82ce280d40afb91b795a7f815b1701 Mon Sep 17 00:00:00 2001
From: Brayan Ceron <brayan.ceron@edunext.co>
Date: Tue, 13 Jan 2026 14:45:48 -0500
Subject: [PATCH 03/14] feat: add block_id to collections in library search
 mock data

---
 src/library-authoring/__mocks__/library-search.json          | 5 +++++
 .../component-picker/ComponentPicker.test.tsx                | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/library-authoring/__mocks__/library-search.json b/src/library-authoring/__mocks__/library-search.json
index ba27af2185..8299bb5f21 100644
--- a/src/library-authoring/__mocks__/library-search.json
+++ b/src/library-authoring/__mocks__/library-search.json
@@ -67,6 +67,7 @@
         },
         {
           "display_name": "Collection 2",
+          "block_id": "col2",
           "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 58",
           "id": 2,
           "type": "collection",
@@ -99,6 +100,7 @@
         },
         {
           "display_name": "Collection 3",
+          "block_id": "col3",
           "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 57",
           "id": 3,
           "type": "collection",
@@ -131,6 +133,7 @@
         },
         {
           "display_name": "Collection 4",
+          "block_id": "col4",
           "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 56",
           "id": 4,
           "type": "collection",
@@ -163,6 +166,7 @@
         },
         {
           "display_name": "Collection 5",
+          "block_id": "col5",
           "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 55",
           "id": 5,
           "type": "collection",
@@ -195,6 +199,7 @@
         },
         {
           "display_name": "Collection 6",
+          "block_id": "col6",
           "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 54",
           "id": 6,
           "type": "collection",
diff --git a/src/library-authoring/component-picker/ComponentPicker.test.tsx b/src/library-authoring/component-picker/ComponentPicker.test.tsx
index cd7f497a37..5b66152915 100644
--- a/src/library-authoring/component-picker/ComponentPicker.test.tsx
+++ b/src/library-authoring/component-picker/ComponentPicker.test.tsx
@@ -230,7 +230,7 @@ describe('<ComponentPicker />', () => {
     onChange.mockClear();
 
     // Select another component
-    fireEvent.click(screen.queryAllByRole('button', { name: 'Select' })[1]);
+    fireEvent.click(screen.queryAllByRole('button', { name: 'Select' })[7]);
     await waitFor(() => expect(onChange).toHaveBeenCalledWith([
       {
         usageKey: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',

From ee3db5258cfa786c4d545688d30dd674538b891f Mon Sep 17 00:00:00 2001
From: Brayan Ceron <brayan.ceron@edunext.co>
Date: Mon, 19 Jan 2026 16:53:06 -0500
Subject: [PATCH 04/14] perf: enhance collection indexing and selection

---
 .../common/context/ComponentPickerContext.tsx | 273 +++++++++++-------
 .../components/AddComponentWidget.tsx         |  91 +++---
 2 files changed, 219 insertions(+), 145 deletions(-)

diff --git a/src/library-authoring/common/context/ComponentPickerContext.tsx b/src/library-authoring/common/context/ComponentPickerContext.tsx
index 514df45027..274d4cbd31 100644
--- a/src/library-authoring/common/context/ComponentPickerContext.tsx
+++ b/src/library-authoring/common/context/ComponentPickerContext.tsx
@@ -5,6 +5,8 @@ import {
   useMemo,
   useState,
 } from 'react';
+import { ContentHit } from 'search-manager';
+import { useSearchContext } from 'search-manager/SearchManager';
 
 export interface SelectedComponent {
   usageKey: string;
@@ -19,9 +21,14 @@ export interface SelectedCollection {
   status: CollectionStatus;
 }
 
+export interface CollectionData {
+  components: SelectedComponent[];
+  affectedCollectionSizes: Map<string, number>;
+}
+
 export type ComponentSelectedEvent = (
   selectedComponent: SelectedComponent,
-  collectionComponents?: SelectedComponent[] | number
+  collectionComponents?: CollectionData | Map<string, number>
 ) => void;
 export type ComponentSelectionChangedEvent = (selectedComponents: SelectedComponent[]) => void;
 
@@ -88,6 +95,87 @@ type ComponentPickerProviderProps = {
   children?: React.ReactNode;
 } & ComponentPickerProps;
 
+/**
+ * Pre-computed collection indexing data for O(1) lookups
+ */
+export interface CollectionIndexData {
+  /** Map: collectionKey → components in that collection */
+  collectionToComponents: Map<string, SelectedComponent[]>;
+  /** Map: componentUsageKey → collection keys it belongs to */
+  componentToCollections: Map<string, string[]>;
+  /** Map: collectionKey → Map of all affected collections with their sizes */
+  collectionToAffectedSizes: Map<string, Map<string, number>>;
+  /** Map: collectionKey → total component count (for quick size lookup) */
+  collectionSizes: Map<string, number>;
+}
+
+/**
+ * Hook to build indexing maps for collections and components.
+ * Pre-computes all relationships for O(1) lookups during selection operations.
+ * @param hits - Search hits from which to build the indexes
+ * @returns Pre-computed collection index data
+ */
+export const useCollectionIndexing = (
+  hits: ReturnType<typeof useSearchContext>['hits'],
+): CollectionIndexData => useMemo(() => {
+  const collectionToComponents = new Map<string, SelectedComponent[]>();
+  const componentToCollections = new Map<string, string[]>();
+  const collectionSizes = new Map<string, number>();
+
+  // First pass: build basic indexes
+  hits.forEach((hit) => {
+    if (hit.type === 'library_block') {
+      const collectionKeys = (hit as ContentHit).collections?.key ?? [];
+
+      // Index component → collections mapping
+      if (hit.usageKey) {
+        componentToCollections.set(hit.usageKey, collectionKeys);
+      }
+
+      // Index collection → components mapping
+      collectionKeys.forEach((collectionKey: string) => {
+        if (!collectionToComponents.has(collectionKey)) {
+          collectionToComponents.set(collectionKey, []);
+        }
+        collectionToComponents.get(collectionKey)!.push({
+          usageKey: hit.usageKey,
+          blockType: hit.blockType,
+          collectionKeys,
+        });
+      });
+    }
+  });
+
+  // Second pass: compute collection sizes
+  collectionToComponents.forEach((components, collectionKey) => {
+    collectionSizes.set(collectionKey, components.length);
+  });
+
+  // Third pass: pre-compute affected collections for each collection
+  const collectionToAffectedSizes = new Map<string, Map<string, number>>();
+  collectionToComponents.forEach((components, collectionKey) => {
+    const affectedSizes = new Map<string, number>();
+
+    // For each component in this collection, find all collections it belongs to
+    components.forEach((component) => {
+      component.collectionKeys?.forEach((affectedKey) => {
+        if (!affectedSizes.has(affectedKey)) {
+          affectedSizes.set(affectedKey, collectionSizes.get(affectedKey) ?? 0);
+        }
+      });
+    });
+
+    collectionToAffectedSizes.set(collectionKey, affectedSizes);
+  });
+
+  return {
+    collectionToComponents,
+    componentToCollections,
+    collectionToAffectedSizes,
+    collectionSizes,
+  };
+}, [hits]);
+
 /**
  * React component to provide `ComponentPickerContext`
  */
@@ -101,59 +189,13 @@ export const ComponentPickerProvider = ({
   const [selectedComponents, setSelectedComponents] = useState<SelectedComponent[]>([]);
   const [selectedCollections, setSelectedCollections] = useState<SelectedCollection[]>([]);
 
-  /**
-   * Updates the selectedCollections state based on how many components are selected.
-   * @param collectionKey - The key of the collection to update
-   * @param selectedCount - Number of components currently selected in the collection
-   * @param totalCount - Total number of components in the collection
-   */
-  const updateCollectionStatus = useCallback((
-    collectionKey: string,
-    selectedCount: number,
-    totalCount: number,
-  ) => {
-    setSelectedCollections((prevSelectedCollections) => {
-      const filteredCollections = prevSelectedCollections.filter(
-        (collection) => collection.key !== collectionKey,
-      );
-
-      if (selectedCount === 0) {
-        return filteredCollections;
-      }
-      if (selectedCount >= totalCount) {
-        return [...filteredCollections, { key: collectionKey, status: 'selected' as CollectionStatus }];
-      }
-      return [...filteredCollections, { key: collectionKey, status: 'indeterminate' as CollectionStatus }];
-    });
-  }, []);
-
-  /**
-   * Finds the common collection key between a component and selected components.
-   */
-  const findCommonCollectionKey = useCallback((
-    componentKeys: string[] | undefined,
-    components: SelectedComponent[],
-  ): string | undefined => {
-    if (!componentKeys?.length || !components.length) {
-      return undefined;
-    }
-
-    for (const component of components) {
-      const commonKey = component.collectionKeys?.find((key) => componentKeys.includes(key));
-      if (commonKey) {
-        return commonKey;
-      }
-    }
-
-    return undefined;
-  }, []);
-
   const addComponentToSelectedComponents = useCallback<ComponentSelectedEvent>((
     selectedComponent: SelectedComponent,
-    collectionComponents?: SelectedComponent[] | number,
+    collectionComponents?: CollectionData | Map<string, number>,
   ) => {
-    const componentsToAdd = Array.isArray(collectionComponents) && collectionComponents.length
-      ? collectionComponents
+    const isCollectionSelection = collectionComponents && 'components' in collectionComponents;
+    const componentsToAdd = isCollectionSelection
+      ? collectionComponents.components
       : [selectedComponent];
 
     setSelectedComponents((prevSelectedComponents) => {
@@ -166,49 +208,55 @@ export const ComponentPickerProvider = ({
 
       const newSelectedComponents = [...prevSelectedComponents, ...newComponents];
 
-      // Handle collection selection (when selecting entire collection)
-      if (Array.isArray(collectionComponents) && collectionComponents.length) {
-        updateCollectionStatus(
-          selectedComponent.usageKey,
-          collectionComponents.length,
-          collectionComponents.length,
-        );
-      }
-
-      // Handle individual component selection (with total count)
-      if (typeof collectionComponents === 'number') {
-        const componentCollectionKeys = selectedComponent.collectionKeys;
-        const selectedCollectionComponents = newSelectedComponents.filter(
-          (component) => component.collectionKeys?.some(
-            (key) => componentCollectionKeys?.includes(key),
-          ),
-        );
-
-        const collectionKey = findCommonCollectionKey(
-          componentCollectionKeys,
-          selectedCollectionComponents,
-        );
-
-        if (collectionKey) {
-          updateCollectionStatus(
-            collectionKey,
-            selectedCollectionComponents.length,
-            collectionComponents,
+      const collectionSizes = isCollectionSelection
+        ? collectionComponents.affectedCollectionSizes
+        : collectionComponents;
+
+      if (collectionSizes instanceof Map && collectionSizes.size > 0) {
+        const selectedByCollection = new Map<string, number>();
+
+        newSelectedComponents.forEach((component) => {
+          component.collectionKeys?.forEach((key) => {
+            if (collectionSizes.has(key)) {
+              selectedByCollection.set(key, (selectedByCollection.get(key) ?? 0) + 1);
+            }
+          });
+        });
+
+        // Batch update all collection statuses
+        setSelectedCollections((prevSelectedCollections) => {
+          const collectionMap = new Map(
+            prevSelectedCollections.map((c) => [c.key, c]),
           );
-        }
+
+          collectionSizes.forEach((totalCount, collectionKey) => {
+            const selectedCount = selectedByCollection.get(collectionKey) ?? 0;
+
+            if (selectedCount === 0) {
+              collectionMap.delete(collectionKey);
+            } else if (selectedCount >= totalCount) {
+              collectionMap.set(collectionKey, { key: collectionKey, status: 'selected' });
+            } else {
+              collectionMap.set(collectionKey, { key: collectionKey, status: 'indeterminate' });
+            }
+          });
+
+          return Array.from(collectionMap.values());
+        });
       }
 
       onChangeComponentSelection?.(newSelectedComponents);
       return newSelectedComponents;
     });
-  }, []);
+  }, [onChangeComponentSelection]);
 
   const removeComponentFromSelectedComponents = useCallback<ComponentSelectedEvent>((
     selectedComponent: SelectedComponent,
-    collectionComponents?: SelectedComponent[] | number,
+    collectionComponents?: CollectionData | Map<string, number>,
   ) => {
-    const componentsToRemove = Array.isArray(collectionComponents) && collectionComponents.length
-      ? collectionComponents
+    const isCollectionSelection = collectionComponents && 'components' in collectionComponents;
+    const componentsToRemove = isCollectionSelection
+      ? collectionComponents.components
       : [selectedComponent];
     const usageKeysToRemove = new Set(componentsToRemove.map((c) => c.usageKey));
 
@@ -217,33 +265,48 @@ export const ComponentPickerProvider = ({
         (component) => !usageKeysToRemove.has(component.usageKey),
       );
 
-      if (typeof collectionComponents === 'number') {
-        const componentCollectionKeys = selectedComponent.collectionKeys;
-        const collectionKey = findCommonCollectionKey(componentCollectionKeys, componentsToRemove);
-
-        if (collectionKey) {
-          const remainingCollectionComponents = newSelectedComponents.filter(
-            (component) => component.collectionKeys?.includes(collectionKey),
+      const collectionSizes = isCollectionSelection
+        ? collectionComponents.affectedCollectionSizes
+        : collectionComponents;
+
+      if (collectionSizes instanceof Map && collectionSizes.size > 0) {
+        const selectedByCollection = new Map<string, number>();
+
+        // Only count components for collections we care about
+        newSelectedComponents.forEach((component) => {
+          component.collectionKeys?.forEach((key) => {
+            if (collectionSizes.has(key)) {
+              selectedByCollection.set(key, (selectedByCollection.get(key) ?? 0) + 1);
+            }
+          });
+        });
+
+        // Batch update all collection statuses
+        setSelectedCollections((prevSelectedCollections) => {
+          const collectionMap = new Map(
+            prevSelectedCollections.map((c) => [c.key, c]),
           );
-          updateCollectionStatus(
-            collectionKey,
-            remainingCollectionComponents.length,
-            collectionComponents,
-          );
-        }
-      } else {
-        // Fallback: remove collections that have no remaining components
-        setSelectedCollections((prevSelectedCollections) => prevSelectedCollections.filter(
-          (collection) => newSelectedComponents.some(
-            (component) => component.collectionKeys?.includes(collection.key),
-          ),
-        ));
+
+          collectionSizes.forEach((totalCount, collectionKey) => {
+            const selectedCount = selectedByCollection.get(collectionKey) ?? 0;
+
+            if (selectedCount === 0) {
+              collectionMap.delete(collectionKey);
+            } else if (selectedCount >= totalCount) {
+              collectionMap.set(collectionKey, { key: collectionKey, status: 'selected' });
+            } else {
+              collectionMap.set(collectionKey, { key: collectionKey, status: 'indeterminate' });
+            }
+          });
+
+          return Array.from(collectionMap.values());
+        });
       }
 
       onChangeComponentSelection?.(newSelectedComponents);
       return newSelectedComponents;
     });
-  }, []);
+  }, [onChangeComponentSelection]);
 
   const context = useMemo<ComponentPickerContextData>(() => {
     switch (componentPickerMode) {
diff --git a/src/library-authoring/components/AddComponentWidget.tsx b/src/library-authoring/components/AddComponentWidget.tsx
index 197d0c1a02..539cd76b83 100644
--- a/src/library-authoring/components/AddComponentWidget.tsx
+++ b/src/library-authoring/components/AddComponentWidget.tsx
@@ -8,8 +8,13 @@ import {
   CheckBoxOutlineBlank,
 } from '@openedx/paragon/icons';
 
-import { ContentHit, useSearchContext } from '../../search-manager';
-import { SelectedComponent, useComponentPickerContext } from '../common/context/ComponentPickerContext';
+import { useSearchContext } from '../../search-manager';
+import {
+  SelectedComponent,
+  useComponentPickerContext,
+  useCollectionIndexing,
+} from '../common/context/ComponentPickerContext';
+
 import messages from './messages';
 
 interface AddComponentWidgetProps {
@@ -19,35 +24,6 @@ interface AddComponentWidgetProps {
   isCollection?: boolean;
 }
 
-/**
- * Builds an array of SelectedComponent from collection hits.
- */
-const buildCollectionComponents = (
-  hits: ReturnType<typeof useSearchContext>['hits'],
-  collectionUsageKey: string,
-): SelectedComponent[] => hits
-  .filter((hit) => hit.type === 'library_block' && hit.collections?.key?.includes(collectionUsageKey))
-  .map((hit: ContentHit) => ({
-    usageKey: hit.usageKey,
-    blockType: hit.blockType,
-    collectionKeys: (hit as ContentHit).collections?.key,
-  }));
-
-/**
- * Counts the number of hits that share a collection key with the given component.
- */
-const countCollectionHits = (
-  hits: ReturnType<typeof useSearchContext>['hits'],
-  componentCollectionKey: string[] | undefined,
-): number => {
-  if (!componentCollectionKey?.length) {
-    return 0;
-  }
-  return hits.filter(
-    (hit) => (hit as ContentHit).collections?.key?.some((key) => componentCollectionKey.includes(key)),
-  ).length;
-};
-
 const AddComponentWidget = ({
   usageKey, blockType, collectionKeys, isCollection,
 }: AddComponentWidgetProps) => {
@@ -63,17 +39,43 @@ const AddComponentWidget = ({
   } = useComponentPickerContext();
 
   const { hits } = useSearchContext();
+  const {
+    collectionToComponents,
+    componentToCollections,
+    collectionToAffectedSizes,
+    collectionSizes,
+  } = useCollectionIndexing(hits);
 
   const collectionData = useMemo(() => {
-    // When selecting a collection: retrieve all its components to enable bulk selection
     if (isCollection) {
-      return buildCollectionComponents(hits, usageKey);
+      return {
+        components: collectionToComponents.get(usageKey) ?? [],
+        affectedCollectionSizes: collectionToAffectedSizes.get(usageKey) ?? new Map<string, number>(),
+      };
     }
-    // When selecting an individual component: get the total count of components in its collection
-    // This count is used to determine if the entire collection should be marked as selected
-    const componentCollectionKey = (hits.find((hit) => hit.usageKey === usageKey) as ContentHit)?.collections?.key;
-    return countCollectionHits(hits, componentCollectionKey);
-  }, [hits, usageKey, isCollection]);
+
+    const componentCollectionKeys = componentToCollections.get(usageKey);
+    if (!componentCollectionKeys?.length) {
+      return new Map<string, number>();
+    }
+
+    const sizes = new Map<string, number>();
+    componentCollectionKeys.forEach((collectionKey) => {
+      const size = collectionSizes.get(collectionKey);
+      if (size !== undefined) {
+        sizes.set(collectionKey, size);
+      }
+    });
+
+    return sizes;
+  }, [
+    collectionToComponents,
+    componentToCollections,
+    collectionToAffectedSizes,
+    collectionSizes,
+    usageKey,
+    isCollection,
+  ]);
 
   // istanbul ignore if: this should never happen
   if (!usageKey) {
@@ -120,10 +122,19 @@ const AddComponentWidget = ({
         blockType,
         collectionKeys,
       };
+
+      const isCollectionData = isCollection && 'components' in collectionData;
+
       if (!isChecked) {
-        addComponentToSelectedComponents(selectedComponent, collectionData);
+        addComponentToSelectedComponents(
+          selectedComponent,
+          isCollectionData ? collectionData : collectionData as Map<string, number>,
+        );
       } else {
-        removeComponentFromSelectedComponents(selectedComponent, collectionData);
+        removeComponentFromSelectedComponents(
+          selectedComponent,
+          isCollectionData ? collectionData : collectionData as Map<string, number>,
+        );
       }
     };
 

From b6908d13749632c5bb7cf9ee680fb45916fee6c0 Mon Sep 17 00:00:00 2001
From: Brayan Ceron <brayan.ceron@edunext.co>
Date: Tue, 20 Jan 2026 09:08:03 -0500
Subject: [PATCH 05/14] fix: solve typo

---
 src/library-authoring/LibraryContent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/library-authoring/LibraryContent.tsx b/src/library-authoring/LibraryContent.tsx
index 98d959fce1..810aae3fd4 100644
--- a/src/library-authoring/LibraryContent.tsx
+++ b/src/library-authoring/LibraryContent.tsx
@@ -47,7 +47,7 @@ const LibraryContent = ({ contentType = ContentType.home }: LibraryContentProps)
    * Filter collections on the frontend to display only collection cards in the Collections tab.
    * This approach is used instead of backend filtering to ensure that all components (including those
    * within collections) remain available in the 'hits' array. This is necessary for the component
-   * selection workflow when adding components to xblocks by choosing the while collection in Collections tab.
+   * selection workflow when adding components to xblocks by choosing the whole collection in Collections tab.
    * Note: LibraryAuthoringPage.tsx has been modified to skip backend filtering for this purpose.
    */
   const filteredHits = contentType === ContentType.collections

From 496c5da5a691edcbb92bf6a2b31be82ec927bb5a Mon Sep 17 00:00:00 2001
From: Brayan Ceron <brayan.ceron@edunext.co>
Date: Tue, 20 Jan 2026 09:32:01 -0500
Subject: [PATCH 06/14] test: clarify selection logic for components in
 collection

---
 .../component-picker/ComponentPicker.test.tsx                 | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/library-authoring/component-picker/ComponentPicker.test.tsx b/src/library-authoring/component-picker/ComponentPicker.test.tsx
index 5b66152915..6394eee202 100644
--- a/src/library-authoring/component-picker/ComponentPicker.test.tsx
+++ b/src/library-authoring/component-picker/ComponentPicker.test.tsx
@@ -230,6 +230,10 @@ describe('<ComponentPicker />', () => {
     onChange.mockClear();
 
     // Select another component
+    /**
+    * Due to collections have "Select" buttons as well, we need to target the 8th button in the list
+    * to select the second component in the search results, taking into account the `library-search.json` mock data.
+    */
     fireEvent.click(screen.queryAllByRole('button', { name: 'Select' })[7]);
     await waitFor(() => expect(onChange).toHaveBeenCalledWith([
       {

From 9accc83b01cb752a7a7078f849028848ee430d78 Mon Sep 17 00:00:00 2001
From: Brayan Ceron <brayan.ceron@edunext.co>
Date: Tue, 20 Jan 2026 10:00:16 -0500
Subject: [PATCH 07/14] feat: integrate CollectionIndexProvider for optimized
 collection indexing

---
 .../LibraryAuthoringPage.tsx                  | 66 ++++++++++---------
 .../collections/LibraryCollectionPage.tsx     | 36 +++++-----
 .../common/context/ComponentPickerContext.tsx | 42 +++++++++++-
 .../components/AddComponentWidget.tsx         |  6 +-
 4 files changed, 95 insertions(+), 55 deletions(-)

diff --git a/src/library-authoring/LibraryAuthoringPage.tsx b/src/library-authoring/LibraryAuthoringPage.tsx
index 77ff30cc16..4b5b2074b2 100644
--- a/src/library-authoring/LibraryAuthoringPage.tsx
+++ b/src/library-authoring/LibraryAuthoringPage.tsx
@@ -38,7 +38,7 @@ import {
 } from '../search-manager';
 import LibraryContent from './LibraryContent';
 import { LibrarySidebar } from './library-sidebar';
-import { useComponentPickerContext } from './common/context/ComponentPickerContext';
+import { useComponentPickerContext, CollectionIndexProvider } from './common/context/ComponentPickerContext';
 import { useLibraryContext } from './common/context/LibraryContext';
 import { SidebarBodyComponentId, useSidebarContext } from './common/context/SidebarContext';
 import { allLibraryPageTabs, ContentType, useLibraryRoutes } from './routes';
@@ -284,38 +284,40 @@ const LibraryAuthoringPage = ({
             extraFilter={extraFilter}
             overrideTypesFilter={overrideTypesFilter}
           >
-            <SubHeader
-              title={<SubHeaderTitle title={libraryData.title} />}
-              subtitle={!componentPickerMode ? intl.formatMessage(messages.headingSubtitle) : undefined}
-              breadcrumbs={breadcumbs}
-              headerActions={<HeaderActions />}
-              hideBorder
-            />
-            <Tabs
-              variant="tabs"
-              activeKey={activeKey}
-              onSelect={handleTabChange}
-              className="my-3"
-            >
-              {visibleTabsToRender}
-            </Tabs>
-            <ActionRow className="my-3">
-              <SearchKeywordsField className="mr-3" />
-              <FilterByTags />
-              {!(insideCollections || insideUnits) && <FilterByBlockType />}
-              <LibraryFilterByPublished key={
-                // It is necessary to re-render `LibraryFilterByPublished` every time `FilterByBlockType`
-                // appears or disappears, this is because when the menu is opened it is rendered
-                // in a previous state, causing an inconsistency in its position.
-                // By changing the key we can re-render the component.
-                !(insideCollections || insideUnits) ? 'filter-published-1' : 'filter-published-2'
-              }
+            <CollectionIndexProvider>
+              <SubHeader
+                title={<SubHeaderTitle title={libraryData.title} />}
+                subtitle={!componentPickerMode ? intl.formatMessage(messages.headingSubtitle) : undefined}
+                breadcrumbs={breadcumbs}
+                headerActions={<HeaderActions />}
+                hideBorder
               />
-              <ClearFiltersButton />
-              <ActionRow.Spacer />
-              <SearchSortWidget />
-            </ActionRow>
-            <LibraryContent contentType={activeKey} />
+              <Tabs
+                variant="tabs"
+                activeKey={activeKey}
+                onSelect={handleTabChange}
+                className="my-3"
+              >
+                {visibleTabsToRender}
+              </Tabs>
+              <ActionRow className="my-3">
+                <SearchKeywordsField className="mr-3" />
+                <FilterByTags />
+                {!(insideCollections || insideUnits) && <FilterByBlockType />}
+                <LibraryFilterByPublished key={
+                  // It is necessary to re-render `LibraryFilterByPublished` every time `FilterByBlockType`
+                  // appears or disappears, this is because when the menu is opened it is rendered
+                  // in a previous state, causing an inconsistency in its position.
+                  // By changing the key we can re-render the component.
+                  !(insideCollections || insideUnits) ? 'filter-published-1' : 'filter-published-2'
+                }
+                />
+                <ClearFiltersButton />
+                <ActionRow.Spacer />
+                <SearchSortWidget />
+              </ActionRow>
+              <LibraryContent contentType={activeKey} />
+            </CollectionIndexProvider>
           </SearchContextProvider>
         </Container>
         {!componentPickerMode && <StudioFooterSlot containerProps={{ size: undefined }} />}
diff --git a/src/library-authoring/collections/LibraryCollectionPage.tsx b/src/library-authoring/collections/LibraryCollectionPage.tsx
index 943664788d..314ed76cbd 100644
--- a/src/library-authoring/collections/LibraryCollectionPage.tsx
+++ b/src/library-authoring/collections/LibraryCollectionPage.tsx
@@ -29,7 +29,7 @@ import {
 } from '../../search-manager';
 import { SubHeaderTitle } from '../LibraryAuthoringPage';
 import { useCollection, useContentLibrary } from '../data/apiHooks';
-import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
+import { useComponentPickerContext, CollectionIndexProvider } from '../common/context/ComponentPickerContext';
 import { useLibraryContext } from '../common/context/LibraryContext';
 import { SidebarBodyComponentId, useSidebarContext } from '../common/context/SidebarContext';
 import messages from './messages';
@@ -208,22 +208,24 @@ const LibraryCollectionPage = () => {
           <SearchContextProvider
             extraFilter={extraFilter}
           >
-            <SubHeader
-              title={<SubHeaderTitle title={collectionData.title} />}
-              breadcrumbs={breadcrumbs}
-              headerActions={<HeaderActions />}
-              hideBorder
-            />
-            <ActionRow className="my-3">
-              <SearchKeywordsField className="mr-3" />
-              <FilterByTags />
-              <FilterByBlockType />
-              <LibraryFilterByPublished />
-              <ClearFiltersButton />
-              <ActionRow.Spacer />
-              <SearchSortWidget />
-            </ActionRow>
-            <LibraryCollectionComponents />
+            <CollectionIndexProvider>
+              <SubHeader
+                title={<SubHeaderTitle title={collectionData.title} />}
+                breadcrumbs={breadcrumbs}
+                headerActions={<HeaderActions />}
+                hideBorder
+              />
+              <ActionRow className="my-3">
+                <SearchKeywordsField className="mr-3" />
+                <FilterByTags />
+                <FilterByBlockType />
+                <LibraryFilterByPublished />
+                <ClearFiltersButton />
+                <ActionRow.Spacer />
+                <SearchSortWidget />
+              </ActionRow>
+              <LibraryCollectionComponents />
+            </CollectionIndexProvider>
           </SearchContextProvider>
         </Container>
         {!componentPickerMode && <StudioFooterSlot containerProps={{ size: undefined }} />}
diff --git a/src/library-authoring/common/context/ComponentPickerContext.tsx b/src/library-authoring/common/context/ComponentPickerContext.tsx
index 274d4cbd31..f1aefbc0e8 100644
--- a/src/library-authoring/common/context/ComponentPickerContext.tsx
+++ b/src/library-authoring/common/context/ComponentPickerContext.tsx
@@ -5,8 +5,12 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { ContentHit } from 'search-manager';
-import { useSearchContext } from 'search-manager/SearchManager';
+import { ContentHit, useSearchContext } from 'search-manager';
+
+/**
+ * Provides pre-computed collection indexing data to avoid repeated computation.
+ */
+const CollectionIndexContext = createContext<CollectionIndexData | undefined>(undefined);
 
 export interface SelectedComponent {
   usageKey: string;
@@ -176,6 +180,40 @@ export const useCollectionIndexing = (
   };
 }, [hits]);
 
+type CollectionIndexProviderProps = {
+  children: React.ReactNode;
+};
+
+/**
+ * React component to provide pre-computed collection indexing data.
+ * Must be rendered inside a SearchContextProvider.
+ * This provider ensures collection indexing is computed once and shared
+ * with all AddComponentWidget instances, avoiding O(n*m) complexity.
+ */
+export const CollectionIndexProvider = ({ children }: CollectionIndexProviderProps) => {
+  const { hits } = useSearchContext();
+  const collectionIndexData = useCollectionIndexing(hits);
+
+  return (
+    <CollectionIndexContext.Provider value={collectionIndexData}>
+      {children}
+    </CollectionIndexContext.Provider>
+  );
+};
+
+/**
+ * Hook to access pre-computed collection indexing data.
+ * Must be used within a CollectionIndexProvider.
+ * @returns CollectionIndexData with pre-computed maps
+ */
+export const useCollectionIndexContext = (): CollectionIndexData => {
+  const ctx = useContext(CollectionIndexContext);
+  if (ctx === undefined) {
+    throw new Error('useCollectionIndexContext must be used within a CollectionIndexProvider');
+  }
+  return ctx;
+};
+
 /**
  * React component to provide `ComponentPickerContext`
  */
diff --git a/src/library-authoring/components/AddComponentWidget.tsx b/src/library-authoring/components/AddComponentWidget.tsx
index 539cd76b83..b23dea7973 100644
--- a/src/library-authoring/components/AddComponentWidget.tsx
+++ b/src/library-authoring/components/AddComponentWidget.tsx
@@ -8,11 +8,10 @@ import {
   CheckBoxOutlineBlank,
 } from '@openedx/paragon/icons';
 
-import { useSearchContext } from '../../search-manager';
 import {
   SelectedComponent,
   useComponentPickerContext,
-  useCollectionIndexing,
+  useCollectionIndexContext,
 } from '../common/context/ComponentPickerContext';
 
 import messages from './messages';
@@ -38,13 +37,12 @@ const AddComponentWidget = ({
     selectedCollections,
   } = useComponentPickerContext();
 
-  const { hits } = useSearchContext();
   const {
     collectionToComponents,
     componentToCollections,
     collectionToAffectedSizes,
     collectionSizes,
-  } = useCollectionIndexing(hits);
+  } = useCollectionIndexContext();
 
   const collectionData = useMemo(() => {
     if (isCollection) {

From 2615c3c2b16bdd5575cc10e0d35f434dbb3dc916 Mon Sep 17 00:00:00 2001
From: Brayan Ceron <brayan.ceron@edunext.co>
Date: Tue, 20 Jan 2026 10:00:59 -0500
Subject: [PATCH 08/14] fix: remove unnecessary nullish coalescing for
 collectionKeys in AddComponentWidget

---
 src/library-authoring/components/ComponentCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/library-authoring/components/ComponentCard.tsx b/src/library-authoring/components/ComponentCard.tsx
index 757e4b79e1..cc3aa3fd3f 100644
--- a/src/library-authoring/components/ComponentCard.tsx
+++ b/src/library-authoring/components/ComponentCard.tsx
@@ -60,7 +60,7 @@ const ComponentCard = ({ hit }: ComponentCardProps) => {
             <AddComponentWidget
               usageKey={usageKey}
               blockType={blockType}
-              collectionKeys={collections?.key ?? undefined}
+              collectionKeys={collections?.key}
             />
           ) : (
             <ComponentMenu usageKey={usageKey} />

From 7c59886593645532ee226e5a98844004c005106e Mon Sep 17 00:00:00 2001
From: Brayan Ceron <brayan.ceron@edunext.co>
Date: Tue, 20 Jan 2026 10:13:21 -0500
Subject: [PATCH 09/14] fix: update import path for useSearchContext in
 ComponentPickerContext

---
 src/library-authoring/common/context/ComponentPickerContext.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/library-authoring/common/context/ComponentPickerContext.tsx b/src/library-authoring/common/context/ComponentPickerContext.tsx
index f1aefbc0e8..2b4f95ce37 100644
--- a/src/library-authoring/common/context/ComponentPickerContext.tsx
+++ b/src/library-authoring/common/context/ComponentPickerContext.tsx
@@ -5,7 +5,7 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { ContentHit, useSearchContext } from 'search-manager';
+import { ContentHit, useSearchContext } from '../../../search-manager';
 
 /**
  * Provides pre-computed collection indexing data to avoid repeated computation.

From 7d5d64eea26ed3f62594d3c678d09659cf00971b Mon Sep 17 00:00:00 2001
From: Brayan Ceron <brayan.ceron@edunext.co>
Date: Tue, 20 Jan 2026 11:05:53 -0500
Subject: [PATCH 10/14] feat: optimize filtered hits calculation using useMemo
 in LibraryContent

---
 src/library-authoring/LibraryContent.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/library-authoring/LibraryContent.tsx b/src/library-authoring/LibraryContent.tsx
index 810aae3fd4..882c182615 100644
--- a/src/library-authoring/LibraryContent.tsx
+++ b/src/library-authoring/LibraryContent.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { LoadingSpinner } from '../generic/Loading';
 import { useSearchContext } from '../search-manager';
 import { NoComponents, NoSearchResults } from './EmptyStates';
@@ -50,9 +50,12 @@ const LibraryContent = ({ contentType = ContentType.home }: LibraryContentProps)
    * selection workflow when adding components to xblocks by choosing the whole collection in Collections tab.
    * Note: LibraryAuthoringPage.tsx has been modified to skip backend filtering for this purpose.
    */
-  const filteredHits = contentType === ContentType.collections
-    ? hits.filter((hit) => hit.type === 'collection')
-    : hits;
+  const filteredHits = useMemo(
+    () => (contentType === ContentType.collections
+      ? hits.filter((hit) => hit.type === 'collection')
+      : hits),
+    [hits, contentType],
+  );
 
   useEffect(() => {
     if (usageKey) {

From 9cea757c1d711ec11c4b7a99e45372f2916e16ad Mon Sep 17 00:00:00 2001
From: Brayan Ceron <brayan.ceron@edunext.co>
Date: Fri, 23 Jan 2026 09:12:07 -0500
Subject: [PATCH 11/14] feat: implement fetchAllSearchResults for comprehensive
 search result retrieval

---
 src/search-manager/data/api.ts      | 52 +++++++++++++++++++++++++++++
 src/search-manager/data/apiHooks.ts |  4 +--
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/src/search-manager/data/api.ts b/src/search-manager/data/api.ts
index d829b8a527..a059187ec7 100644
--- a/src/search-manager/data/api.ts
+++ b/src/search-manager/data/api.ts
@@ -310,6 +310,58 @@ export async function fetchSearchResults({
   };
 }
 
+/* eslint-disable no-await-in-loop */
+export async function fetchAllSearchResults(
+  params: FetchSearchParams,
+): Promise<{
+  hits: HitType[];
+  totalHits: number;
+  blockTypes: Record<string, number>;
+  problemTypes: Record<string, number>;
+  publishStatus: Record<string, number>;
+}> {
+  const allHits: HitType[] = [];
+  const limit = params.limit ?? 20;
+
+  let offset = 0;
+  let nextOffset: number | undefined;
+
+  // Facets + totals only need to be read once (from the first page)
+  let totalHits = 0;
+  let blockTypes: Record<string, number> = {};
+  let problemTypes: Record<string, number> = {};
+  let publishStatus: Record<string, number> = {};
+
+  do {
+    const page = await fetchSearchResults({
+      ...params,
+      offset,
+      limit,
+    });
+
+    allHits.push(...page.hits);
+
+    if (offset === 0) {
+      totalHits = page.totalHits;
+      blockTypes = page.blockTypes;
+      problemTypes = page.problemTypes;
+      publishStatus = page.publishStatus;
+    }
+
+    nextOffset = page.nextOffset;
+    offset = nextOffset ?? offset;
+  } while (nextOffset !== undefined);
+
+  return {
+    hits: allHits,
+    totalHits,
+    blockTypes,
+    problemTypes,
+    publishStatus,
+  };
+}
+/* eslint-enable no-await-in-loop */
+
 /**
  * Fetch the block types facet distribution for the search results.
  */
diff --git a/src/search-manager/data/apiHooks.ts b/src/search-manager/data/apiHooks.ts
index a5ead78dcf..10eeaaafee 100644
--- a/src/search-manager/data/apiHooks.ts
+++ b/src/search-manager/data/apiHooks.ts
@@ -6,7 +6,7 @@ import {
   SearchSortOption,
   TAG_SEP,
   fetchAvailableTagOptions,
-  fetchSearchResults,
+  fetchAllSearchResults,
   fetchTagsThatMatchKeyword,
   getContentSearchConfig,
   fetchBlockTypes,
@@ -106,7 +106,7 @@ export const useContentSearchResults = ({
       if (client === undefined || indexName === undefined) {
         throw new Error('Required data unexpectedly undefined. Check "enable" condition of useQuery.');
       }
-      return fetchSearchResults({
+      return fetchAllSearchResults({
         client,
         extraFilter,
         indexName,

From d0cb659e75586af6e9a104e0ba168ad105c89558 Mon Sep 17 00:00:00 2001
From: Brayan Ceron <brayan.ceron@edunext.co>
Date: Fri, 23 Jan 2026 16:44:15 -0500
Subject: [PATCH 12/14] feat: increase default limit for search results from 20
 to 100

---
 src/search-manager/data/api.ts | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/search-manager/data/api.ts b/src/search-manager/data/api.ts
index a059187ec7..1cd7c1cf11 100644
--- a/src/search-manager/data/api.ts
+++ b/src/search-manager/data/api.ts
@@ -310,29 +310,28 @@ export async function fetchSearchResults({
   };
 }
 
-/* eslint-disable no-await-in-loop */
 export async function fetchAllSearchResults(
   params: FetchSearchParams,
 ): Promise<{
-  hits: HitType[];
-  totalHits: number;
-  blockTypes: Record<string, number>;
-  problemTypes: Record<string, number>;
-  publishStatus: Record<string, number>;
-}> {
+    hits: HitType[];
+    totalHits: number;
+    blockTypes: Record<string, number>;
+    problemTypes: Record<string, number>;
+    publishStatus: Record<string, number>;
+  }> {
   const allHits: HitType[] = [];
-  const limit = params.limit ?? 20;
+  const limit = params.limit ?? 100;
 
   let offset = 0;
   let nextOffset: number | undefined;
 
-  // Facets + totals only need to be read once (from the first page)
   let totalHits = 0;
   let blockTypes: Record<string, number> = {};
   let problemTypes: Record<string, number> = {};
   let publishStatus: Record<string, number> = {};
 
   do {
+    // eslint-disable-next-line no-await-in-loop
     const page = await fetchSearchResults({
       ...params,
       offset,
@@ -360,7 +359,6 @@ export async function fetchAllSearchResults(
     publishStatus,
   };
 }
-/* eslint-enable no-await-in-loop */
 
 /**
  * Fetch the block types facet distribution for the search results.

From 315fa60109aa389c8dd2efd5da0ca3f302b49e06 Mon Sep 17 00:00:00 2001
From: Brayan Ceron <brayan.ceron@edunext.co>
Date: Wed, 28 Jan 2026 10:14:33 -0500
Subject: [PATCH 13/14] fix: remove unused getNextPageParam from
 useContentSearchResults

---
 src/search-manager/data/apiHooks.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/search-manager/data/apiHooks.ts b/src/search-manager/data/apiHooks.ts
index 10eeaaafee..77507dc90f 100644
--- a/src/search-manager/data/apiHooks.ts
+++ b/src/search-manager/data/apiHooks.ts
@@ -123,7 +123,6 @@ export const useContentSearchResults = ({
         limit,
       });
     },
-    getNextPageParam: (lastPage) => lastPage.nextOffset,
     // Avoid flickering results when user is typing... keep old results until new is available.
     keepPreviousData: true,
     refetchOnWindowFocus: false, // This doesn't need to be refreshed when the user switches back to this tab.

From 60133a82b3f9fefde734a8a2b168cf5c420ed3bd Mon Sep 17 00:00:00 2001
From: Brayan Ceron <brayan.ceron@edunext.co>
Date: Wed, 28 Jan 2026 15:22:07 -0500
Subject: [PATCH 14/14] feat: enhance fetchAllSearchResults to handle
 pagination more robustly

---
 src/search-manager/data/api.ts | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/search-manager/data/api.ts b/src/search-manager/data/api.ts
index 1cd7c1cf11..afde2c68cb 100644
--- a/src/search-manager/data/api.ts
+++ b/src/search-manager/data/api.ts
@@ -330,7 +330,9 @@ export async function fetchAllSearchResults(
   let problemTypes: Record<string, number> = {};
   let publishStatus: Record<string, number> = {};
 
-  do {
+  let hasNextPage = true;
+
+  while (hasNextPage) {
     // eslint-disable-next-line no-await-in-loop
     const page = await fetchSearchResults({
       ...params,
@@ -348,8 +350,19 @@ export async function fetchAllSearchResults(
     }
 
     nextOffset = page.nextOffset;
-    offset = nextOffset ?? offset;
-  } while (nextOffset !== undefined);
+
+    // Stop conditions
+    if (
+      nextOffset === undefined
+    || nextOffset <= offset
+    || allHits.length >= totalHits
+    ) {
+      hasNextPage = false;
+      break;
+    }
+
+    offset = nextOffset;
+  }
 
   return {
     hits: allHits,