Courses: card-based course catalog overhaul

[RyanS4]

Another topic related to the discussion in #10255

Relationship to #10255, #10261 & #10265

This proposal builds directly on the catalog and learner experience overhaul discussed in #10255 (Courses: course-pipeline overhaul), #10261 (Courses: Course Progress Dashboard), and #10265 (Courses: centralized myProgress learner dashboard overhaul), aligning the course catalog with the modern card design system recently introduced in Team Members.

Current Problem

• Outdated Table Layout: The courses list (/courses, CoursesComponent) currently uses a legacy multi-line mat-table where course titles, bookmark icons, progress bars, tag chips, and action menus are crammed into table row cells.
• Inconsistent Design System: Team member profiles (teams-member.component) and dashboard tiles have been upgraded to modern, elevated card tiles with colored top accent bands, badges, and clean metadata hierarchy. The courses page still reflects the older dense tabular layout.
• Poor Touch & Mobile Ergonomics: On smaller screens, wide table rows require awkward horizontal scrolling and cram checkbox selectors directly against text headers.
• Weak Visual Course Discovery: Courses are educational resources that benefit from visual hierarchy—subject badges, grade chips, step counts, and active progress should stand out at a glance rather than blending into a spreadsheet-like list.

Proposed Solution: Card-Based Course Grid

We want to restructure the courses catalog from a table into a responsive card-based grid (planet-course-card) modeled after the upgraded member card pattern:

1. Course Card Architecture (planet-course-card):

   • Top Accent Band: Colored header band reflecting course subject category or enrollment status.
   • Action Kebab Menu & Bookmark: Top-right kebab menu (more_vert) containing course actions (Manage, Feedback, Send to Community/Nation, Delete) and a bookmark toggle for myCourses.
   • Selection Checkbox: Discreet top-left selection checkbox for bulk operations (Join Selected, Leave Selected, Bulk Tagging, Manager Actions).
   • Subject / Category Badge: Centered icon/avatar representing the subject or topic.
   • Title & Tag Chips: Cleanly wrapped title with subject level, grade level, and category chips (MatChipSet).
   • Learner Progress Bar: For enrolled learners, display a clean progress bar showing step completion percentage.
   • Metadata Footer: Step count, language, and creation/update date.

2. Responsive Grid Layout:

   • Auto-fitting responsive grid (grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))) that smoothly scales from desktop multi-column grids down to single-column cards on mobile.

3. Preserved Catalog Capabilities:

   • Retains all existing title search, tag filter input (PlanetTagInputComponent), multi-faceted category search (PlanetCoursesSearchComponent), and manager batch actions.

Justification & Practical Impact

• Visual Parity & Design Consistency: Unifies the catalog interface with the upgraded team member cards and modern Planet UI patterns.
• Enhanced Mobile/Tablet UX: Eliminates table overflow and provides touch-friendly card targets for learners on tablets and mobile devices.
• Improved Course Discovery: Makes browsing, identifying grade levels, and tracking active progress intuitive and engaging for students and educators alike.