chore: header greeting use display name instead of email (#162) #177

New Issue

egullickson · 2026-02-13T22:25:14Z

egullickson commented

2026-02-13 22:25:14 +00:00

Relates to #162

Severity: Minor

Problem

The top-right shows "Welcome back, eric.gullickson@gmail.com". Using the full email is impersonal when there's a Display Name ("Eric Gullickson") available in settings.

Recommendation

Use the display name: "Welcome back, Eric" (first name only or full display name).

Acceptance Criteria

Header greeting uses the user's display name instead of email
Falls back to email if no display name is set
Tested on mobile (320px, 768px) and desktop (1920px)

Relates to #162 ## Severity: Minor ## Problem The top-right shows "Welcome back, eric.gullickson@gmail.com". Using the full email is impersonal when there's a Display Name ("Eric Gullickson") available in settings. ## Recommendation Use the display name: "Welcome back, Eric" (first name only or full display name). ## Acceptance Criteria - Header greeting uses the user's display name instead of email - Falls back to email if no display name is set - Tested on mobile (320px, 768px) and desktop (1920px)

egullickson added the

labels 2026-02-13 22:25:43 +00:00

egullickson added this to the Sprint 2026-02-02 milestone 2026-02-13 22:25:59 +00:00

egullickson referenced this issue

2026-02-13 22:26:28 +00:00

chore: UX design audit cleanup #162

egullickson referenced this issue

2026-02-13 22:36:38 +00:00

chore: UX design audit cleanup #162

egullickson referenced this issue

2026-02-13 22:40:17 +00:00

chore: UX design audit cleanup #162

egullickson commented

2026-02-14 01:17:10 +00:00

Implementation Plan (from #162 -- Milestone 17)

Phase: 8 (Header and minor polish) | Priority: Minor | Depends on: None | Blocks: None

Context

The header greeting currently shows the user's email address instead of their display name. The existing logic is user?.name || user?.email, but Auth0's user.name may not always be populated or may contain the full name when a first name would be more compact.

Implementation

1. In frontend/src/components/Layout.tsx:

Change greeting logic to extract first name with fallback chain:

const displayName = user?.given_name 
  || user?.name?.split(' ')[0] 
  || user?.nickname 
  || user?.email;

Greeting displays as: "Welcome back, Eric" (first name only for compact greeting)

Files

frontend/src/components/Layout.tsx

Commit Convention

chore: use display name instead of email in header greeting (refs #177)

Test Criteria

Greeting shows first name (e.g., "Welcome back, Eric")
Falls back gracefully: given_name -> first word of name -> nickname -> email
Works with various Auth0 user profile configurations
Verify on mobile (320px, 768px) and desktop (1920px) viewports

Branch

Work on branch issue-162-ux-design-audit-cleanup (shared with all #162 sub-issues)

## Implementation Plan (from #162 -- Milestone 17) **Phase**: 8 (Header and minor polish) | **Priority**: Minor | **Depends on**: None | **Blocks**: None ### Context The header greeting currently shows the user's email address instead of their display name. The existing logic is `user?.name || user?.email`, but Auth0's `user.name` may not always be populated or may contain the full name when a first name would be more compact. ### Implementation **1. In `frontend/src/components/Layout.tsx`:** - Change greeting logic to extract first name with fallback chain: ```typescript const displayName = user?.given_name || user?.name?.split(' ')[0] || user?.nickname || user?.email; ``` - Greeting displays as: "Welcome back, Eric" (first name only for compact greeting) ### Files - `frontend/src/components/Layout.tsx` ### Commit Convention ``` chore: use display name instead of email in header greeting (refs #177) ``` ### Test Criteria - Greeting shows first name (e.g., "Welcome back, Eric") - Falls back gracefully: given_name -> first word of name -> nickname -> email - Works with various Auth0 user profile configurations - Verify on mobile (320px, 768px) and desktop (1920px) viewports ### Branch Work on branch `issue-162-ux-design-audit-cleanup` (shared with all #162 sub-issues)

egullickson added

and removed

labels 2026-02-14 02:01:25 +00:00

egullickson commented

2026-02-14 02:02:02 +00:00

Milestone: Implementation Complete

Phase: Execution | Agent: Developer | Status: PASS

Changes

Changed greeting fallback chain in Layout.tsx from user?.name || user?.email to user?.given_name || user?.name?.split(' ')[0] || user?.nickname || user?.email
Now shows "Welcome back, Eric" instead of "Welcome back, eric.gullickson@gmail.com"

Verification

ESLint: PASS (0 errors, pre-existing warning only)
TypeScript: PASS
Commit: da4cd85

Verdict: PASS | Next: Move to status/done

## Milestone: Implementation Complete **Phase**: Execution | **Agent**: Developer | **Status**: PASS ### Changes - Changed greeting fallback chain in `Layout.tsx` from `user?.name || user?.email` to `user?.given_name || user?.name?.split(' ')[0] || user?.nickname || user?.email` - Now shows "Welcome back, Eric" instead of "Welcome back, eric.gullickson@gmail.com" ### Verification - ESLint: PASS (0 errors, pre-existing warning only) - TypeScript: PASS - Commit: `da4cd85` *Verdict*: PASS | *Next*: Move to status/done

egullickson added

and removed

labels 2026-02-14 02:02:03 +00:00

egullickson referenced this issue from a commit

2026-02-14 03:03:26 +00:00

chore: use display name instead of email in header greeting (refs #177)

egullickson referenced a pull request that will close this issue

2026-02-14 03:03:39 +00:00