Enhance mentorship UI with breadcrumb improvements and issues link

[Mr-Rahul-Paul]

Fixes #3606

Summary

This PR implements :

1. Hiding intermediate mentees and programs path segments from breadcrumbs for a cleaner navigation structure ,similar to how .../repositoryKeys]/repostories is handled in useBreadcrumbs.ts.
2. Adding a "View all issues" link/button on the module details page modules/[modulekey] for quick access to module issues ../[modulekey]/issues, which was not accessible for ones who dont know the endpoints).

Changes Made

1. Updated useBreadcrumbs.ts , Extended HIDDEN_SEGMENTS to include 'mentees' and 'programs' alongside the existing 'repositories' segment.
2. Enhanced Module Details Page modules/[modulekey] , added "View all issues" navigation link/button to provide access to module issues.

Disscussion

1. Do you want me to make changes to frontend tests for the breadcrumbs useBreadcrumbs.test.tsx ?

Checklist

• Required: I followed the contributing workflow
• Required: I verified that my code works as intended and resolves the issue as described
• Required: I ran make check-test locally: all warnings addressed, tests passed
• I used AI for vetting the PR and the code validity.

[coderabbitai]

Summary by CodeRabbit

• Bug Fixes
  • Updated breadcrumb navigation to hide additional path segments ('mentees', 'modules', 'programs') for a cleaner navigation experience.

Walkthrough

The breadcrumb navigation hook was updated to hide additional path segments ('mentees', 'modules', 'programs') alongside the existing 'repositories' segment. This prevents these segments from being rendered as clickable links in breadcrumb navigation, addressing broken routes that lack corresponding page implementations.

Changes

Cohort / File(s)	Summary
Breadcrumb Navigation frontend/src/hooks/useBreadcrumbs.ts	Expanded HIDDEN_SEGMENTS set from ['repositories'] to ['repositories', 'mentees', 'modules', 'programs'] to exclude these path segments from breadcrumb item generation.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested reviewers

• arkid15r

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Enhance mentorship UI with breadcrumb improvements and issues link' accurately summarizes the main changes: breadcrumb improvements and adding an issues link to the module details page.
Description check	✅ Passed	The PR description is detailed and related to the changeset. It explains the two main changes: hiding breadcrumb segments and adding an issues link, with references to the fixed issue #3606.
Linked Issues check	✅ Passed	The PR addresses the linked issue #3606 requirements: it hides 'mentees' and 'programs' segments from breadcrumbs to prevent 404 errors, and adds navigation to the module issues page.
Out of Scope Changes check	✅ Passed	All code changes are directly related to the objectives in issue #3606: updating HIDDEN_SEGMENTS in useBreadcrumbs.ts and adding issues navigation on the module details page. No out-of-scope changes detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/src/components/CardDetailsPage.tsx`:
- Around line 361-369: The link inside CardDetailsPage (within the SecondaryCard
for "Issues") uses an accessibility-poor combination: the Link element's
className currently sets bg-gray-200 with text-white; update the styling on that
Link (or its enclosing SecondaryCard if shared) to use a higher-contrast
combination — e.g., a darker background (replace bg-gray-200 with a darker
gray/blue) or darker text (use text-gray-900 or similar) and ensure hover styles
remain appropriate; update the Link className and any dark-mode classes
accordingly so the anchor meets contrast requirements while preserving existing
hover/underline behavior.

🧹 Nitpick comments (1)

frontend/src/hooks/useBreadcrumbs.ts (1)

8-33: Scoping hidden segments is a reasonable defensive practice, but not currently required.
Line 8 hides programs and mentees globally. These segments currently exist only in mentorship routes (/mentorship/programs and /my/mentorship/programs/.../mentees), so no unintended breadcrumb loss occurs today. However, if future routes reuse these segment names outside mentorship contexts, the global hiding would break their breadcrumbs. Consider scoping the visibility check to mentorship paths for better maintainability.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/src/components/CardDetailsPage.tsx`:
- Around line 361-373: The "View All Issues" Link uses text-blue-400 with
hover:bg-blue-700 which causes low contrast on hover; update the Link styling in
CardDetailsPage (inside the SecondaryCard block rendering the Issues card) to
set an accessible hover text color (e.g., add hover:text-white and
dark:hover:text-white) so the text contrasts against hover:bg-blue-700, and
ensure the normal state still shows the intended blue (keep text-blue-400 for
non-hover or replace with a neutral default if desired).

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[kasya]

Hi @Mr-Rahul-Paul ! Thanks for working on this!

I updated HIDDEN_SEGMENTS to also include modules - we don't have a page for that either 👌🏼

Also I reverted your changes for an issue button. There's a way to view issues from module card and from module page:

[cubic-dev-ai]

No issues found across 1 file

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 87.70%. Comparing base (5c983f2) to head (91d7eef).
⚠️ Report is 33 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3632      +/-   ##
==========================================
+ Coverage   85.55%   87.70%   +2.14%     
==========================================
  Files         463      462       -1     
  Lines       14303    14287      -16     
  Branches     1904     1905       +1     
==========================================
+ Hits        12237    12530     +293     
+ Misses       1687     1344     -343     
- Partials      379      413      +34     

Flag	Coverage Δ
backend	87.45% <ø> (+2.91%)	⬆️
frontend	88.39% <ø> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.
see 22 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5c983f2...91d7eef. Read the comment docs.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.