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>

Author: maebeale

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

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