From f74888b7cb6ef0d3c3bf54e47d3137f10c852706 Mon Sep 17 00:00:00 2001
From: maebeale <maebeale@users.noreply.github.com>
Date: Wed, 4 Mar 2026 08:20:36 -0500
Subject: [PATCH] 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>
---
 app/views/shared/_navbar_user.html.erb    | 16 ++++++++++++----
 spec/system/navbar_avatar_updates_spec.rb |  5 +++--
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/views/shared/_navbar_user.html.erb b/app/views/shared/_navbar_user.html.erb
index 16558087a..a84977ffa 100644
--- a/app/views/shared/_navbar_user.html.erb
+++ b/app/views/shared/_navbar_user.html.erb
@@ -1,7 +1,7 @@
 <div class="navbar-user-button relative" id="avatar" data-controller="dropdown">
   <% user = current_user %>
   <% person = user&.person %>
-  <% avatar_image = person&.avatar&.attached? ? person.avatar.variant(:thumbnail) : "missing.png" %>
+  <% has_avatar = person&.avatar&.attached? %>
 
   <button
     type="button"
@@ -12,9 +12,17 @@
     <span class="sr-only">Open user menu</span>
     <span class="absolute -inset-1.5"></span>
 
-    <%= image_tag avatar_image,
-                  id: "avatar-image",
-                  class: "size-10 rounded-full bg-gray-800 outline -outline-offset-1 outline-white/10" %>
+    <% if has_avatar %>
+      <%= image_tag person.avatar.variant(:thumbnail),
+                    id: "avatar-image",
+                    class: "size-10 rounded-full bg-gray-800 outline -outline-offset-1 outline-white/10" %>
+    <% else %>
+      <span id="avatar-image"
+            class="size-10 rounded-full bg-sky-200 text-sky-700 font-bold text-lg
+                   flex items-center justify-center border border-sky-300 shadow-sm">
+        <%= (person&.first_name.presence || user.first_name.presence || user.email).to_s.first.upcase %>
+      </span>
+    <% end %>
   </button>
 
   <!-- Dropdown menu -->
diff --git a/spec/system/navbar_avatar_updates_spec.rb b/spec/system/navbar_avatar_updates_spec.rb
index 67640c044..816e46791 100644
--- a/spec/system/navbar_avatar_updates_spec.rb
+++ b/spec/system/navbar_avatar_updates_spec.rb
@@ -54,8 +54,9 @@
       person.reload
       expect(person.avatar).not_to be_attached
 
-      avatar_img = find("#avatar-image")
-      expect(avatar_img[:src]).to include("missing")
+      avatar_el = find("#avatar-image")
+      expect(avatar_el.tag_name).to eq("span")
+      expect(avatar_el.text).to eq(person.first_name.first.upcase)
     end
   end
 end