Overhaul styles for learning-resources settings page

[apinkert]

For RHCLOUD-49626.

Visual Design & Layout

• Added page header icon with vertical divider separator (matching other Settings pages pattern)
• Applied secondary gray background to collapsible section containers while keeping resource cards white
• Extended search box to fill available horizontal space
• Moved filter controls to align with "Jump to section" sidebar (both at same vertical position)
• Added divider line between page header and content area

Navigation & Interaction

• Fixed expandable section arrows to rotate correctly (right when collapsed → down when expanded)
• Removed pagination from Bookmarks section - now shows all bookmarked items like other sections
• Made Bookmarks expandable with collapse/expand functionality matching other sections
• Cleaned up breadcrumbs - removed duplicate, kept Chrome shell breadcrumb only

Content & Accessibility

• Internationalized all text using FormattedMessage and added translations to Messages.ts
• Fixed hyperlink in description to point to correct /learning-resources route
• Styled items count with bold text and proper spacing for better readability

Before:

After:

[coderabbitai]

Summary by CodeRabbit

• New Features

  • Added a refreshed, localized catalog header with a learning resources icon and catalog link.
  • Catalog sections now display all bookmarks without pagination.
  • Improved catalog filtering with an expanded search field and clearer result counts.

• Style

  • Updated catalog layouts, spacing, backgrounds, icons, expandable sections, and separators.
  • Quickstart resource cards now use full-height presentation.

Walkthrough

The catalog view adds localized header content, removes bookmark pagination, moves the header and filter into the initial section, removes section dividers, and updates catalog section, filter, header, and quickstart card styling.

Changes

Catalog layout

Layer / File(s)	Summary
Localized catalog header src/Messages.ts, src/components/CatalogHeader.tsx, src/components/CatalogHeader.scss	Adds localized header messages and renders the learning-resources icon, title, description, and external catalog link.
Catalog view integration src/Viewer.tsx, src/components/CatalogFilter.tsx, src/components/CatalogFilter.scss	Moves the header and filter into the initial section, renders all bookmarks without pagination, removes section dividers, and updates filter sizing and count styling.
Section and card presentation src/components/CatalogSection.scss, src/components/GlobalLearningResourcesPage/GlobalLearningResourcesQuickstartItem.tsx	Adds catalog section spacing, background, borders, and toggle rotation. Quickstart cards now use full-height styling.

Estimated code review effort: 2 (Simple) | ~15 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Viewer
  participant CatalogHeader
  participant Messages
  participant CatalogFilter
  Viewer->>CatalogHeader: render localized catalog header
  CatalogHeader->>Messages: load title and description messages
  Messages-->>CatalogHeader: return localized content
  Viewer->>CatalogFilter: render catalog filter
  CatalogFilter-->>Viewer: return expanded search layout and count
  Viewer-->>Viewer: render complete bookmark collection

Loading

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly summarizes the primary visual and layout overhaul to the Learning Resources settings page.
Description check	✅ Passed	The description explains the changes, links the related issues, and includes required before-and-after screenshots for the visible UI changes.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/CatalogHeader.tsx`:
- Around line 26-29: Update the img element in CatalogHeader to use an empty alt
attribute, marking the header icon as decorative because the adjacent h1 already
identifies the page.

In `@src/Messages.ts`:
- Around line 468-475: Update src/Messages.ts lines 468-475 by including the
rich-text <a>All Learning catalog</a>. segment in catalogHeaderDescription, then
remove catalogHeaderAllLearningCatalogLink. In src/components/CatalogHeader.tsx
lines 37-51, pass the a rich-text formatter using /learning-resources,
target="_blank", and rel="noopener noreferrer" to the description message, and
remove the separate JSX link.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Enterprise

Run ID: 81e6f4ed-bf2b-4d8a-abc5-fa367fc5a365

📥 Commits

Reviewing files that changed from the base of the PR and between 960e6b2 and e07968e.

📒 Files selected for processing (8)

• src/Messages.ts
• src/Viewer.tsx
• src/components/CatalogFilter.scss
• src/components/CatalogFilter.tsx
• src/components/CatalogHeader.scss
• src/components/CatalogHeader.tsx
• src/components/CatalogSection.scss
• src/components/GlobalLearningResourcesPage/GlobalLearningResourcesQuickstartItem.tsx

[apinkert]

/retest