HOLD: Show initial-letter avatar when no photo uploaded

[maebeale]

What is the goal of this PR and why is this important?

• Users without an avatar photo saw a generic missing.png placeholder in the navbar
• Replace it with a styled circle showing the first letter of their name, which is more personal and visually consistent with the existing person_profile_button pattern

How did you approach the change?

• In _navbar_user.html.erb, conditionally render either the attached avatar image or a <span> circle with the user's first initial
• Fallback chain: person.first_name -> user.first_name -> user.email so there's always a letter
• Styled with bg-sky-200 text-sky-700 to match the existing avatar fallback in person_helper.rb
• Updated system spec to expect a <span> element with the initial instead of an <img> with "missing" src

UI Testing Checklist

• Log in as a user with an avatar photo — avatar image displays normally
• Log in as a user without an avatar — sky-blue circle with first initial displays
• Verify the initial circle looks good on the dark navbar background
• Click the avatar circle — dropdown menu opens correctly

Anything else to add?

• The id="avatar-image" is preserved on both the <img> and <span> paths so the dropdown controller continues to work

🤖 Generated with Claude Code