[CRT-178] Update lesson list UI

[Tyratox]

Application:

Figma:

---

Summary by cubic

Redesigned the class Lessons list and related UI to match CRT-178 Figma. Switched tables to Chakra, updated copy and icons, and added a “Share” quick action.

• New Features

  • Lessons list uses ChakraDataTable with columns: ID, Title, Start Date, Sharing Type, and Quick Action.
  • “Share” button copies the join link when you own the class; disabled otherwise.
  • Updated navigation: “Sessions” -> “Lessons”, new icons in ClassNavigation, breadcrumb separators, and tab icons.
  • Page heading spacing and font size adjusted to match Figma.
  • Updated translations: “Copy Session Link” -> “Share”, and date labels (“Start Date”, “End Date”).
  • Add “Create Session” button below the list.

• Refactors

  • Replaced Primereact DataTable with ChakraDataTable; removed useAllClassSessionsLazyTable.
  • Unified Button and Input variants to Chakra variants; removed custom typing hacks.
  • Centralized table styling via a new TableRoot recipe; smaller table text and column width support.
  • Pagination and breadcrumbs simplified; TabNavigation supports icons.
  • isClickOnRow now expects a React MouseEvent and ChakraDataTable onRowClick includes the event.

This aligns the lesson list with CRT-178’s design. “Copy existing lesson” is intentionally not included.

^{Written for commit bbfeff3. Summary will update automatically on new commits.}

[Copilot]

Pull Request Overview

This PR updates the lesson list UI by migrating from PrimeReact DataTable to a custom ChakraDataTable implementation, updating styling and layout, and improving overall user experience.

• Migrated SessionList from PrimeReact to ChakraDataTable with improved column definitions
• Removed deprecated ButtonVariant, InputVariant, and CardVariant type exports in favor of string literals
• Updated navigation tabs to include icons and improved breadcrumb separators

Reviewed Changes

Copilot reviewed 31 out of 32 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
frontend/src/components/session/SessionList.tsx	Complete migration from PrimeReact DataTable to ChakraDataTable with new column structure and simplified state management
frontend/src/components/ChakraDataTable.tsx	Updated onRowClick signature to include mouse event parameter and removed custom styled components in favor of recipe-based styling
frontend/src/components/ui/recipes/table/TableRoot.recipe.ts	Added new table recipe for consistent styling across tables
frontend/src/components/class/ClassNavigation.tsx	Added icons to navigation tabs and fixed typo in "sessionsTab" message key
frontend/src/components/Button.tsx	Removed ButtonVariant export and active prop, simplified to use Chakra's native variant prop
frontend/src/components/Breadcrumbs.tsx	Simplified breadcrumb rendering by delegating separator rendering to child components
frontend/src/utilities/table.ts	Updated isClickOnRow to accept generic React mouse event instead of PrimeReact-specific event
Multiple component files	Updated Button variant props from enum to string literals

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[cubic-dev-ai]

5 issues found across 32 files

Prompt for AI agents (all 5 issues)

Understand the root cause of the following 5 issues and fix them.


<file name="frontend/src/components/Button.tsx">

<violation number="1" location="frontend/src/components/Button.tsx:76">
ChakraButton expects an `isLoading` prop; passing `loading={isLoading}` is ignored, so the Chakra button never reflects the pending state (disabled/spinner/aria) even when the promise is running. Use `isLoading` instead of `loading`.</violation>
</file>

<file name="frontend/src/components/Pagination.tsx">

<violation number="1" location="frontend/src/components/Pagination.tsx:66">
The updated pagination items render every page button with the same outline style, so there is no visual indication of the current page. This regresses usability because the active page styling (`state === &quot;active&quot;`) was removed and `_selected` inside the `variant` prop is never applied.</violation>
</file>

<file name="frontend/src/components/Breadcrumbs.tsx">

<violation number="1" location="frontend/src/components/Breadcrumbs.tsx:19">
Rendering `{children}` directly removed the automatic `&lt;Breadcrumb.Separator /&gt;` insertion, so breadcrumb items now appear without separators. Please restore the separator-wrapping logic to keep the breadcrumb UI consistent.</violation>
</file>

<file name="frontend/src/components/ChakraDataTable.tsx">

<violation number="1" location="frontend/src/components/ChakraDataTable.tsx:127">
The last-column styling never applies because the new selector key `&quot;td#{&amp;}:last-of-type&quot;` is invalid CSS in Chakra/Emotion, so the right-alignment and nowrap rules are dropped. Use a valid selector such as `&quot;td&amp;:last-of-type&quot;` or scope via `_last` to restore the formatting.</violation>
</file>

<file name="frontend/src/components/class/ClassList.tsx">

<violation number="1" location="frontend/src/components/class/ClassList.tsx:64">
Rendering the class name with Chakra Text (which outputs a &lt;p&gt;) makes the new isClickOnRow guard think the click was outside the row, so clicking the title no longer navigates to class details.</violation>
</file>

_{Reply to cubic to teach it or ask questions. Re-run a review with @cubic-dev-ai review this PR}

[cubic-dev-ai]

No issues found across 32 files