Fix: Profile Picture upload

lib/atomic/accounts.ex

@@ -485,6 +485,7 @@ defmodule Atomic.Accounts do
   def update_user_picture(%User{} = user, attrs \\ %{}) do
     user
     |> User.picture_changeset(attrs)
+    |> IO.inspect()
     |> Repo.update()
   end
 
@@ -500,10 +501,11 @@ defmodule Atomic.Accounts do
       {:error, %Ecto.Changeset{}}
 
   """
-  def update_user(%User{} = user, attrs \\ %{}, _after_save \\ &{:ok, &1}) do
+  def update_user(%User{} = user, attrs \\ %{}, after_save \\ &{:ok, &1}) do
     user
     |> User.changeset(attrs)
     |> Repo.update()
+    |> after_save(after_save)
   end
 
   @doc """

lib/atomic_web/components/sidebar.ex

@@ -5,6 +5,7 @@ defmodule AtomicWeb.Components.Sidebar do
   alias Phoenix.LiveView.JS
   import AtomicWeb.Components.Icon
   alias Atomic.Organizations
+  import AtomicWeb.Components.Avatar
 
   attr :current_user, :map, required: true
   attr :current_organization, :map, required: true
@@ -122,7 +123,7 @@ defmodule AtomicWeb.Components.Sidebar do
       <AtomicWeb.Components.Dropdown.dropdown orientation={@orientation} items={dropdown_items(@current_user)} id="user-menu-button">
         <:wrapper>
           <button class="flex w-full select-none flex-row items-center gap-x-2 px-4 py-3 text-sm font-semibold leading-6 text-zinc-700 lg:px-0">
-            <AtomicWeb.Components.Avatar.avatar name={@current_user.name} src={user_image(@current_user)} size={:xs} color={:light_gray} class="!text-sm" />
+            <.avatar name={@current_user.name} color={:light_gray} class="!text-sm" type={:user} src={Uploaders.ProfilePicture.url({@current_user.profile_picture, @current_user}, :original)} />
             <span class="text-sm font-semibold leading-6" aria-hidden="true"><%= @current_user.name %></span>
             <.icon name="hero-chevron-right-solid" class="size-5" />
           </button>
@@ -190,9 +191,9 @@ defmodule AtomicWeb.Components.Sidebar do
 
   defp user_image(user) do
     if user.profile_picture do
-      Uploaders.ProfilePicture.url({user, user.profile_picture}, :original)
+      Atomic.Uploaders.ProfilePicture.url({user, user.profile_picture}, :original)
     else
-      nil
+      ""
     end
   end
 

lib/atomic_web/live/profile_live/form_component.ex

@@ -13,12 +13,9 @@ defmodule AtomicWeb.ProfileLive.FormComponent do
         <!-- Grid layout for profile picture, name, phone number, email, and social media fields -->
         <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
           <!-- Section for profile picture upload -->
-          <div class="flex flex-col items-center">
+          <div class="flex flex-col items-center pr-4 ">
             <%= label(f, :name, "Profile Picture", class: "mt-3 mb-1 text-sm font-medium text-gray-700") %>
-            <!-- Profile picture upload (with square shape) -->
-            <div class="rounded-lg">
-              <.live_component module={ImageUploader} id="uploader-profile-picture" uploads={@uploads} target={@myself} />
-            </div>
+            <.live_component module={ImageUploader} id="uploader-profile-picture" uploads={@uploads} target={@myself} />
           </div>
 
           <div class="flex flex-col gap-6">
@@ -48,22 +45,13 @@ defmodule AtomicWeb.ProfileLive.FormComponent do
     """
   end
 
-  @impl true
-  def mount(socket) do
-    {:ok,
-     socket
-     |> allow_upload(:image,
-       accept: Uploaders.ProfilePicture.extension_whitelist(),
-       max_entries: 1
-     )}
-  end
-
   @impl true
   def update(%{user: user} = assigns, socket) do
     changeset = Accounts.change_user(user)
 
     {:ok,
      socket
+     |> allow_upload(:image, accept: Uploaders.ProfilePicture.extension_whitelist(), max_entries: 1)
      |> assign(assigns)
      |> assign(:changeset, changeset)}
   end