feat: Course outline restructure with new plugin slots

src/courseware/course/sidebar/ARCHITECTURE.md

@@ -8,9 +8,9 @@ The Learning MFE uses a **two-sidebar system** where a left sidebar (Course Outl
 
 ### LEFT SIDEBAR (Course Outline)
 - **Location**: Left side of screen, adjacent to course content
-- **Component**: `CourseOutlineTray` (rendered via `CourseOutlineSidebarSlot`)
+- **Component**: `CourseOutlineTray` (rendered via `CourseOutlineSidebarSlot`). This is now a thin wrapper (`CourseOutlineTray.tsx`) that gates on sidebar state and renders the presentational `CourseOutline` (`CourseOutline.tsx`).
 - **Purpose**: Navigation - displays course structure, sequences, and units
-- **State Management**: Uses `useCourseOutlineSidebar()` hook
+- **State Management**: Split across two hooks — `useCourseOutlineData()` (course data + unit-click tracking) and `useCourseOutlineSidebar()` (sidebar open/collapse state)
 - **ID**: `WIDGETS.COURSE_OUTLINE`
 - **Rendering**: Only renders when `currentSidebar === 'COURSE_OUTLINE'`
 - **Trigger**: `CourseOutlineTrigger` (separate location in mobile/desktop toolbar)
@@ -200,22 +200,36 @@ if (!firstAvailable) {
 }
 ```
 
-### useCourseOutlineSidebar Hook
+### Course Outline Hooks (`hooks.js`)
+
+The former single `useCourseOutlineSidebar` hook is split into two, separating
+course data from sidebar context so the outline can be reused outside a sidebar:
+
+#### `useCourseOutlineData()`
+
+**Responsibilities:**
+- Provide course outline data from Redux: `sections`, `sequences`, `units`, `courseOutlineStatus`, `activeSequenceId`, `sequenceStatus`
+- Provide `isEnabledCompletionTracking` and `isActiveEntranceExam`
+- Provide `handleUnitClick` (analytics + `checkBlockCompletion`) and trigger the outline-structure load effect
+- Reads Redux + `useParams` only — **does not** read `SidebarContext`, so it is reusable outside a sidebar
+
+#### `useCourseOutlineSidebar()`
 
 **Responsibilities:**
-- Detect when RIGHT sidebar has no available panels (`!initialSidebar`)
-- Auto-open Course Outline as fallback (unless manually collapsed)
-- Handle Course Outline specific interactions (unit clicks, toggle, resize)
+- Expose sidebar context state: `currentSidebar`, `shouldDisplayFullScreen`, `handleToggleCollapse`
+- Handle the resize → collapse behaviour when the viewport drops below the desktop breakpoint
 
 **Key Logic:**
 ```javascript
-const isOpenSidebar = !initialSidebar && !isCollapsedOutlineSidebar;
-
-useEffect(() => {
-  if (isOpenSidebar && currentSidebar !== ID) {
-    toggleSidebar('COURSE_OUTLINE');
-  }
-}, [initialSidebar, unitId]);
+useLayoutEffect(() => {
+  const handleResize = () => {
+    if (currentSidebar === ID && global.innerWidth < breakpoints.large.maxWidth) {
+      collapseSidebar();
+    }
+  };
+  global.addEventListener('resize', handleResize);
+  return () => global.removeEventListener('resize', handleResize);
+}, [currentSidebar]);
 ```
 
 ### Sidebar.jsx (RIGHT Sidebar Renderer)
@@ -231,15 +245,44 @@ if (!currentSidebar || !SIDEBARS || !SIDEBARS[currentSidebar]) {
 }
 ```
 
-### CourseOutlineTray.jsx (LEFT Sidebar Renderer)
+### CourseOutlineTray.tsx / CourseOutline.tsx (LEFT Sidebar Renderer)
 
-**Responsibilities:**
-- Render course outline navigation
-- Only show when `currentSidebar === 'COURSE_OUTLINE'`
+The renderer is split into a sidebar-aware wrapper and a presentational component:
+
+**`CourseOutlineTray.tsx` (wrapper):**
+- Reads `useCourseOutlineSidebar()`
+- Only renders when `currentSidebar === 'COURSE_OUTLINE'`, otherwise `null`
+- Renders `<CourseOutline>`, passing `shouldDisplayFullScreen` and `onToggleCollapse`
+- Still carries `CourseOutlineTray.ID` and is the component registered in the slot
 
-**Key Logic:**
 ```javascript
-if (isActiveEntranceExam || currentSidebar !== ID) {
+if (currentSidebar !== ID) {
   return null;
 }
+return <CourseOutline shouldDisplayFullScreen={shouldDisplayFullScreen} onToggleCollapse={handleToggleCollapse} />;
 ```
+
+**`CourseOutline.tsx` (presentational):**
+- Reads course data via `useCourseOutlineData()` + `useParams()`
+- Returns `null` only when `isActiveEntranceExam`
+- Renders the heading through `CourseOutlineSidebarHeadingSlot` (see Extension Points below)
+
+### Course Outline Extension Points (Plugin Slots)
+
+The refactor extracts the heading and completion icon into standalone components
+exposed through plugin slots, so operators can customise them via `env.config.jsx`:
+
+- **`CourseOutlineSidebarHeadingSlot`** — ID `org.openedx.frontend.learning.course_outline_sidebar_heading.v1`. Wraps the extracted `components/CourseOutlineHeading.tsx`. Props: `isDisplaySequenceLevel`, `backButton?`, `onToggleCollapse?`. See `src/plugin-slots/CourseOutlineSidebarHeadingSlot/README.md`.
+- **`CourseOutlineSidebarCompletionIconSlot`** — ID `org.openedx.frontend.learning.course_outline_sidebar_completion_icon.v1`. Wraps `CompletionIcon.tsx` (now TypeScript, exporting `CompletionIconProps`). Consumed by **both** `SidebarSection` and `SidebarSequence`; the `variant` prop (`'section' | 'sequence'`) tells a plugin which location it is rendering, and `active` reflects whether that section/sequence is current. See `src/plugin-slots/CourseOutlineSidebarCompletionIconSlot/README.md`.
+
+The mobile "collapse the outline after selecting a unit" behaviour now lives in
+`components/UnitLinkWrapper.tsx`, which consumes both hooks (data for the click
+handler, sidebar for `shouldDisplayFullScreen`/`handleToggleCollapse`).
+
+### Styling
+
+The outline sidebar styling (`CourseOutlineTray.scss`) uses Paragon theme tokens
+rather than hard-coded colours — e.g. borders use `var(--pgn-color-light-700)`.
+The active-section highlight is driven by an `.active-section` class on
+`.course-sidebar-section` (`background-color: var(--pgn-color-info-100)`) instead
+of an inline `bg-info-100` class on the button.

src/courseware/course/sidebar/sidebars/course-outline/CourseOutline.tsx

@@ -2,33 +2,43 @@
 import { useToggle } from '@openedx/paragon';
 import { LOADING } from '@src/constants';
 
+import {
+  useCourseOutlineData,
+} from '@src/courseware/course/sidebar/sidebars/course-outline/hooks';
 import PageLoading from '@src/generic/PageLoading';
 import { CourseOutlineSidebarHeadingSlot } from '@src/plugin-slots/CourseOutlineSidebarHeadingSlot';
 import classNames from 'classnames';
 import { useState } from 'react';
-import SidebarSection from './components/SidebarSection';
+import { useParams } from 'react-router-dom';
 import SidebarSequence from './components/SidebarSequence';
-import { ID } from './constants';
-import { useCourseOutlineSidebar } from './hooks';
+import SidebarSection from './components/SidebarSection';
 import messages from './messages';
 
-export const CourseOutline = () => {
+interface CourseOutlineProps {
+  shouldDisplayFullScreen?: boolean;
+  onToggleCollapse?: () => void;
+}
+
+interface CoursePageParams extends Record<string, string> {
+  courseId: string;
+  unitId: string;
+}
+
+export const CourseOutline = ({
+  shouldDisplayFullScreen = false,
+  onToggleCollapse,
+}: CourseOutlineProps) => {
   const intl = useIntl();
   const [selectedSection, setSelectedSection] = useState<string | null>(null);
   const [isDisplaySequenceLevel, setDisplaySequenceLevel, setDisplaySectionLevel] = useToggle(true);
-
+  const { unitId, courseId } = useParams<CoursePageParams>();
   const {
-    courseId,
-    unitId,
-    currentSidebar,
-    isActiveEntranceExam,
     courseOutlineStatus,
     activeSequenceId,
     sections,
     sequences,
-    shouldDisplayFullScreen,
-    handleToggleCollapse,
-  } = useCourseOutlineSidebar();
+    isActiveEntranceExam,
+  } = useCourseOutlineData();
 
   const resolvedSectionId = selectedSection
         || Object.keys(sections).find(
@@ -47,19 +57,16 @@
     setDisplaySequenceLevel();
     setSelectedSection(id);
   };
-
   const sidebarHeading = (
     <CourseOutlineSidebarHeadingSlot
-      onToggleCollapse={handleToggleCollapse}
+      onToggleCollapse={onToggleCollapse}
       isDisplaySequenceLevel={isDisplaySequenceLevel}
       backButton={backButtonTitle ? { title: backButtonTitle, onClick: handleBackToSectionLevel } : undefined}
     />
   );
-
-  if (isActiveEntranceExam || currentSidebar !== ID) {
+  if (isActiveEntranceExam) {
     return null;
   }
-
   if (courseOutlineStatus === LOADING) {
     return (
       <div className={classNames('outline-sidebar-wrapper', {
@@ -90,10 +97,10 @@
             ? sequenceIds.map((sequenceId: string) => (
               <SidebarSequence
                 key={sequenceId}
-                courseId={courseId!}
+                courseId={courseId}
                 sequence={sequences[sequenceId]}
                 defaultOpen={sequenceId === activeSequenceId}
-                activeUnitId={unitId!}
+                activeUnitId={unitId}
               />
             ))
             : sectionsIds.map((sectionId) => (
@@ -108,5 +115,3 @@
     </div>
   );
 };
-
-export default CourseOutline;

src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.test.jsx

@@ -1,4 +1,5 @@
 import { MemoryRouter } from 'react-router-dom';
+import { Routes, Route } from 'react-router';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { AppProvider } from '@edx/frontend-platform/react';
@@ -18,6 +19,7 @@ describe('<CourseOutlineTray />', () => {
   let unit;
   let unitId;
   let courseId;
+  let sequenceId;
   let mockData;
 
   const initTestStore = async (options) => {
@@ -27,29 +29,30 @@ describe('<CourseOutlineTray />', () => {
     [unitId] = Object.keys(state.models.units);
 
     if (Object.keys(state.courseware.courseOutline).length) {
-      const [activeSequenceId] = Object.keys(state.courseware.courseOutline.sequences);
-      sequence = state.courseware.courseOutline.sequences[activeSequenceId];
+      [sequenceId] = Object.keys(state.courseware.courseOutline.sequences);
+      sequence = state.courseware.courseOutline.sequences[sequenceId];
       const activeSectionId = Object.keys(state.courseware.courseOutline.sections)[0];
       section = state.courseware.courseOutline.sections[activeSectionId];
       [unitId] = sequence.unitIds;
       unit = state.courseware.courseOutline.units[unitId];
     }
 
     mockData = {
-      courseId,
-      unitId,
       currentSidebar: outlineSidebarId,
       toggleSidebar: jest.fn(),
     };
   };
 
   function renderWithProvider(testData = {}) {
+    const path = `/course/${courseId}/${sequenceId}/${unitId}`;
     const { container } = render(
       <AppProvider store={store} wrapWithRouter={false}>
         <IntlProvider locale="en">
           <SidebarContext.Provider value={{ ...mockData, ...testData }}>
-            <MemoryRouter>
-              <CourseOutlineTray />
+            <MemoryRouter initialEntries={[path]}>
+              <Routes>
+                <Route path="/course/:courseId/:sequenceId/:unitId" element={<CourseOutlineTray />} />
+              </Routes>
             </MemoryRouter>
           </SidebarContext.Provider>
         </IntlProvider>
@@ -124,4 +127,14 @@ describe('<CourseOutlineTray />', () => {
     await user.click(screen.getByRole('button', { name: new RegExp(`${section.title} , ${courseOutlineMessages.incompleteSection.defaultMessage}`) }));
     expect(screen.queryByRole('button', { name: section.title })).toBeInTheDocument();
   });
+
+  it('highlights the unit matching teh current unitId', async () => {
+    await initTestStore();
+    renderWithProvider();
+    // Check that there is only one link with the highlight class and it's
+    // the one with the active unit title.
+    const highlightedItems = screen.getAllByRole('listitem').filter(li => li.classList.contains('bg-info-100'));
+    expect(highlightedItems).toHaveLength(1);
+    expect(highlightedItems[0]).toHaveTextContent(unit.title);
+  });
 });

src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.tsx

@@ -5,12 +5,14 @@ import { useCourseOutlineSidebar } from './hooks';
 const CourseOutlineTray = () => {
   const {
     currentSidebar,
+    shouldDisplayFullScreen,
+    handleToggleCollapse,
   } = useCourseOutlineSidebar();
 
   if (currentSidebar !== ID) {
     return null;
   }
-  return <CourseOutline />;
+  return <CourseOutline shouldDisplayFullScreen={shouldDisplayFullScreen} onToggleCollapse={handleToggleCollapse} />;
 };
 
 CourseOutlineTray.ID = ID;

src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger.jsx

@@ -4,17 +4,17 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { IconButton } from '@openedx/paragon';
 import { MenuOpen as MenuOpenIcon } from '@openedx/paragon/icons';
 
-import { useCourseOutlineSidebar } from './hooks';
+import { useCourseOutlineData, useCourseOutlineSidebar } from './hooks';
 import { ID } from './constants';
 import messages from './messages';
 
 const CourseOutlineTrigger = ({ isMobileView }) => {
   const intl = useIntl();
+  const { isActiveEntranceExam } = useCourseOutlineData();
   const {
     currentSidebar,
     shouldDisplayFullScreen,
     handleToggleCollapse,
-    isActiveEntranceExam,
   } = useCourseOutlineSidebar();
 
   const isDisplayForDesktopView = !isMobileView && !shouldDisplayFullScreen && currentSidebar !== ID;

src/courseware/course/sidebar/sidebars/course-outline/README.md

@@ -29,4 +29,5 @@ Unlike right-sidebar widgets, the course outline is **not** registered in the `S
 | `CourseOutlineTray` | Main tray panel component |
 | `CourseOutlineTrigger` | Collapse/expand trigger button |
 | `ID` | Widget sentinel ID: `'COURSE_OUTLINE'` |
-| `useCourseOutlineSidebar` | Hook providing all tray state and handlers |
+| `useCourseOutlineData` | Hook providing course outline data (sections, sequences, units, status) and unit-click tracking; usable outside a sidebar context |
+| `useCourseOutlineSidebar` | Hook providing sidebar open/collapse state and handlers (reads `SidebarContext`) |

src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSection.jsx

@@ -8,7 +8,7 @@ import { Button, Icon } from '@openedx/paragon';
 import { ChevronRight as ChevronRightIcon } from '@openedx/paragon/icons';
 
 import courseOutlineMessages from '@src/course-home/outline-tab/messages';
-import { useCourseOutlineSidebar } from '../hooks';
+import { useCourseOutlineData } from '../hooks';
 
 const SidebarSection = ({ section, handleSelectSection }) => {
   const intl = useIntl();
@@ -20,7 +20,7 @@ const SidebarSection = ({ section, handleSelectSection }) => {
     completionStat,
   } = section;
 
-  const { activeSequenceId, isEnabledCompletionTracking } = useCourseOutlineSidebar();
+  const { activeSequenceId, isEnabledCompletionTracking } = useCourseOutlineData();
   const isActiveSection = sequenceIds.includes(activeSequenceId);
 
   const sectionTitle = (

src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.jsx

@@ -8,7 +8,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { Collapsible } from '@openedx/paragon';
 
 import courseOutlineMessages from '@src/course-home/outline-tab/messages';
-import { useCourseOutlineSidebar } from '../hooks';
+import { useCourseOutlineData } from '../hooks';
 import SidebarUnit from './SidebarUnit';
 import { UNIT_ICON_TYPES } from './UnitIcon';
 
@@ -30,7 +30,7 @@ const SidebarSequence = ({
   } = sequence;
 
   const [open, setOpen] = useState(defaultOpen);
-  const { activeSequenceId, units, isEnabledCompletionTracking } = useCourseOutlineSidebar();
+  const { activeSequenceId, units, isEnabledCompletionTracking } = useCourseOutlineData();
   const isActiveSequence = id === activeSequenceId;
 
   const sectionTitle = (

src/courseware/course/sidebar/sidebars/course-outline/components/UnitLinkWrapper.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
-import { useCourseOutlineSidebar } from '../hooks';
+import { useCourseOutlineData, useCourseOutlineSidebar } from '../hooks';
 
 interface Props {
   courseId: string;
@@ -26,17 +26,25 @@ const UnitLinkWrapper: React.FC<Props> = ({
   courseId,
   children,
 }) => {
-  const { handleUnitClick } = useCourseOutlineSidebar();
+  const { handleUnitClick } = useCourseOutlineData();
+  const { shouldDisplayFullScreen, handleToggleCollapse } = useCourseOutlineSidebar();
   const { pathname } = useLocation();
   const isPreview = pathname.startsWith('/preview');
   const baseUrl = `/course/${courseId}/${sequenceId}/${id}`;
   const link = isPreview ? `/preview${baseUrl}` : baseUrl;
+  const handleClick = React.useCallback(() => {
+    // Hide the sidebar after selecting a unit on a mobile device.
+    if (shouldDisplayFullScreen) {
+      handleToggleCollapse();
+    }
+    handleUnitClick({ sequenceId, activeUnitId, id });
+  }, [handleUnitClick, sequenceId, activeUnitId, id, shouldDisplayFullScreen, handleToggleCollapse]);
 
   return (
     <Link
       to={link}
       className="row w-100 m-0 d-flex align-items-center text-gray-700"
-      onClick={() => handleUnitClick({ sequenceId, activeUnitId, id })}
+      onClick={handleClick}
     >
       {children}
     </Link>