Skip to content

Commit f74888b

Browse files
maebealeclaude
andcommitted
Show initial-letter avatar circle when no photo uploaded
Replace missing.png fallback in navbar with a styled circle showing the first letter of the user's name, matching the pattern already used in person_profile_button. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent f44e149 commit f74888b

2 files changed

Lines changed: 15 additions & 6 deletions

File tree

app/views/shared/_navbar_user.html.erb

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="navbar-user-button relative" id="avatar" data-controller="dropdown">
22
<% user = current_user %>
33
<% person = user&.person %>
4-
<% avatar_image = person&.avatar&.attached? ? person.avatar.variant(:thumbnail) : "missing.png" %>
4+
<% has_avatar = person&.avatar&.attached? %>
55

66
<button
77
type="button"
@@ -12,9 +12,17 @@
1212
<span class="sr-only">Open user menu</span>
1313
<span class="absolute -inset-1.5"></span>
1414

15-
<%= image_tag avatar_image,
16-
id: "avatar-image",
17-
class: "size-10 rounded-full bg-gray-800 outline -outline-offset-1 outline-white/10" %>
15+
<% if has_avatar %>
16+
<%= image_tag person.avatar.variant(:thumbnail),
17+
id: "avatar-image",
18+
class: "size-10 rounded-full bg-gray-800 outline -outline-offset-1 outline-white/10" %>
19+
<% else %>
20+
<span id="avatar-image"
21+
class="size-10 rounded-full bg-sky-200 text-sky-700 font-bold text-lg
22+
flex items-center justify-center border border-sky-300 shadow-sm">
23+
<%= (person&.first_name.presence || user.first_name.presence || user.email).to_s.first.upcase %>
24+
</span>
25+
<% end %>
1826
</button>
1927

2028
<!-- Dropdown menu -->

spec/system/navbar_avatar_updates_spec.rb

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,9 @@
5454
person.reload
5555
expect(person.avatar).not_to be_attached
5656

57-
avatar_img = find("#avatar-image")
58-
expect(avatar_img[:src]).to include("missing")
57+
avatar_el = find("#avatar-image")
58+
expect(avatar_el.tag_name).to eq("span")
59+
expect(avatar_el.text).to eq(person.first_name.first.upcase)
5960
end
6061
end
6162
end

0 commit comments

Comments
 (0)