feat(header): expand UserMenu trigger to show avatar, name

[mohammedeissa7]

Proposed change

Resolves #3746

The authenticated user button in the navbar previously rendered only a bare avatar circle, giving no visible identity context. This change expands the UserMenu trigger to display the user's avatar, display name, GitHub handle, and an animated chevron

Changes in UserMenu.tsx:

• session.user.name rendered
• @login handle rendered
• Inline chevron SVG added and animation of rotate when it pushed

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 all required checks and tests locally; all warnings addressed and failures resolved
• I used AI for code, documentation, tests, or communication related to this PR

[github-actions]

Contribution validation failed:

• commit_signature: One or more commits are not signed.

  • 39858ed

• commit_sign_off: One or more commits are missing or have an invalid Signed-off-by trailer.

  • 39858ed

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Advanced

Run ID: 9d35fd43-3f7e-4d4d-895d-bc806dbe684c

📥 Commits

Reviewing files that changed from the base of the PR and between bd173d2 and 39858ed.

📒 Files selected for processing (1)

• frontend/src/components/UserMenu.tsx

Included review availability: Your plan provides up to 2 included reviews per hour; 1 remains after this review.

---

Summary by CodeRabbit

• UI Improvements
  • The authenticated user menu now displays the user’s name and handle alongside their avatar.
  • Added a chevron indicator that rotates when the dropdown menu is open.

Walkthrough

The authenticated user menu now displays the user's name and handle beside the avatar. A chevron indicates the dropdown state and rotates when the menu opens.

Changes

User menu display

Layer / File(s)	Summary
Profile button layout frontend/src/components/UserMenu.tsx	The authenticated user button uses a flex layout with spacing. It displays the user's name and a handle from login or the email prefix. The chevron rotates when the dropdown is open.

Priority: ⬇️ Low — Defer this narrow UserMenu presentation change because it only improves authenticated profile details and dropdown styling in the navbar.

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

Severity of issue fixed: Low

Merge Risk: ⚪ Minimal · up to 3e997

The authenticated navbar menu now shows profile details and an open-state chevron. No concrete merge-blocking risk remains.

🚥 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%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files.	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 clearly describes the primary change: expanding the UserMenu trigger to show the avatar and user name.
Description check	✅ Passed	The description directly explains the UserMenu changes and their purpose, including the avatar, user identity, GitHub handle, and chevron animation.
Linked Issues check	✅ Passed	The changes satisfy issue #3746 by making the GitHub profile section more informative and visually balanced through the displayed name, handle, avatar, and menu-state chevron.
Out of Scope Changes check	✅ Passed	The changes are limited to the UserMenu trigger and directly support the linked issue. No unrelated changes are identified.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[cubic-dev-ai]

2 issues found across 1 file

Confidence score: 4/5

• In frontend/src/components/UserMenu.tsx, sessions without a public display name or login can show an empty name row and misrepresent the email local-part as a GitHub handle; add a neutral identity fallback and render the handle only when available.
• The added JSX in frontend/src/components/UserMenu.tsx is inconsistently indented and will fail the repository formatter check; reformat the wrapper, SVG, and path to match surrounding JSX.

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


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

<violation number="1" location="frontend/src/components/UserMenu.tsx:89">
P3: The new JSX is inconsistently indented, which fails the repository's formatter check. Reformat the added wrapper, SVG, and path to match the surrounding JSX indentation.</violation>

<violation number="2" location="frontend/src/components/UserMenu.tsx:94">
P3: When a session has no public display name or `login`, the trigger shows an empty name row and presents the email local-part as a GitHub handle. Fall back the display name to a neutral identity value and render the `@` label only for an actual `session.user.login`.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[github-actions]

Contribution validation failed:

• commit_signature: One or more commits are not signed.
  • 6317fa3

[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