Improve initials + profile pictures

app/components/menu_component.html.erb

@@ -6,7 +6,7 @@
   <% elsif variant == :avatar %>
     <button data-menu-target="button">
       <div class="w-9 h-9 cursor-pointer">
-        <%= render "settings/user_avatar", avatar_url: avatar_url %>
+        <%= render "settings/user_avatar", avatar_url: avatar_url, initials: initials %>
       </div>
     </button>
   <% end %>

app/components/menu_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class MenuComponent < ViewComponent::Base
-  attr_reader :variant, :avatar_url, :placement, :offset, :icon_vertical, :no_padding, :testid
+  attr_reader :variant, :avatar_url, :initials, :placement, :offset, :icon_vertical, :no_padding, :testid
 
   renders_one :button, ->(**button_options, &block) do
     options_with_target = button_options.merge(data: { menu_target: "button" })
@@ -23,9 +23,10 @@ class MenuComponent < ViewComponent::Base
 
   VARIANTS = %i[icon button avatar].freeze
 
-  def initialize(variant: "icon", avatar_url: nil, placement: "bottom-end", offset: 12, icon_vertical: false, no_padding: false, testid: nil)
+  def initialize(variant: "icon", avatar_url: nil, initials: nil, placement: "bottom-end", offset: 12, icon_vertical: false, no_padding: false, testid: nil)
     @variant = variant.to_sym
     @avatar_url = avatar_url
+    @initials = initials
     @placement = placement
     @offset = offset
     @icon_vertical = icon_vertical

app/controllers/application_controller.rb

@@ -6,6 +6,7 @@ class ApplicationController < ActionController::Base
 
   before_action :detect_os
   before_action :set_default_chat
+  before_action :set_active_storage_url_options
 
   private
     def require_upgrade?
@@ -40,4 +41,12 @@ class ApplicationController < ActionController::Base
       @last_viewed_chat = Current.user&.last_viewed_chat
       @chat = @last_viewed_chat
     end
+
+    def set_active_storage_url_options
+      ActiveStorage::Current.url_options = {
+        protocol: request.protocol.delete("://"),
+        host: request.host,
+        port: request.optional_port
+      }
+    end
 end

app/models/user.rb

@@ -21,7 +21,7 @@ class User < ApplicationRecord
 
   has_one_attached :profile_image do |attachable|
     attachable.variant :thumbnail, resize_to_fill: [ 300, 300 ], convert: :webp, saver: { quality: 80 }
-    attachable.variant :small, resize_to_fill: [ 72, 72 ], convert: :webp, saver: { quality: 80 }
+    attachable.variant :small, resize_to_fill: [ 72, 72 ], convert: :webp, saver: { quality: 80 }, preprocessed: true
   end
 
   validate :profile_image_size

app/views/settings/_user_avatar_field.html.erb

@@ -21,7 +21,7 @@
          class="h-full w-full flex justify-center items-center <%= user.profile_image.attached? ? "" : "hidden" %>">
       <% if user.profile_image.attached? %>
         <div class="h-full w-full">
-          <%= render "settings/user_avatar", avatar_url: user.profile_image.url %>
+          <%= render "settings/user_avatar", avatar_url: user.profile_image.url, initials: user.initials %>
         </div>
       <% end %>
     </div>

app/views/settings/profiles/show.html.erb

@@ -41,9 +41,9 @@
         <p class="uppercase text-xs text-secondary font-medium"><%= Current.family.name %> &middot; <%= Current.family.users.size %></p>
       </div>
       <% @users.each do |user| %>
-        <div class="flex gap-2 items-center bg-container p-4 border border-alpha-black-25 rounded-lg">
+        <div class="flex gap-2 mt-2 items-center bg-container p-4 border border-alpha-black-25 rounded-lg">
           <div class="w-9 h-9 shrink-0">
-            <%= render "settings/user_avatar", avatar_url: user.profile_image.url %>
+            <%= render "settings/user_avatar", avatar_url: user.profile_image&.variant(:small)&.url, initials: user.initials %>
           </div>
           <p class="text-primary font-medium text-sm"><%= user.display_name %></p>
           <div class="rounded-md bg-surface px-1.5 py-0.5">

app/views/users/_user_menu.html.erb

@@ -1,11 +1,11 @@
 <%# locals: (user:, placement: "right-start", offset: 16) %>
 
 <div data-testid="user-menu">
-  <%= render MenuComponent.new(variant: "avatar", avatar_url: user.profile_image&.variant(:small)&.url, placement: placement, offset: offset) do |menu| %>
+  <%= render MenuComponent.new(variant: "avatar", avatar_url: user.profile_image&.variant(:small)&.url, initials: user.initials, placement: placement, offset: offset) do |menu| %>
     <%= menu.with_header do %>
       <div class="px-4 py-3 flex items-center gap-3">
         <div class="w-9 h-9 shrink-0">
-          <%= render "settings/user_avatar", avatar_url: user.profile_image&.variant(:small)&.url, lazy: true %>
+          <%= render "settings/user_avatar", avatar_url: user.profile_image&.variant(:small)&.url, initials: user.initials, lazy: true %>
         </div>
 
         <div class="overflow-hidden text-ellipsis text-sm">