feat: Visually indicate that avatar is editable

lib/postland_web/live/profile_live.ex

@@ -7,14 +7,25 @@ defmodule PostlandWeb.ProfileLive do
   def render(assigns) do
     ~H"""
     <div class="flex items-start space-x-4">
-      <div>
+      <div class="flex-shrink-0 relative">
         <img
           class="h-16 w-16 rounded-full drop-shadow-lg"
           src={@account.icon || url(~p"/images/avatar.png")}
           alt=""
         />
+        <div
+          :if={@editing}
+          class="absolute top-0 left-0 h-16 w-16 rounded-full backdrop-brightness-50 flex justify-center items-center"
+        >
+          <.icon name="hero-pencil" class="text-violet-100" />
+        </div>
         <.form for={@form} phx-submit="avatar" phx-change="avatar">
-          <.live_file_input :if={@editing} upload={@uploads.avatar} />
+          <.live_file_input
+            :if={@editing}
+            id="avatar-upload"
+            class="opacity-0 absolute top-0 left-0 bottom-0 right-0"
+            upload={@uploads.avatar}
+          />
         </.form>
       </div>
       <div class="flex flex-col bg-white rounded-lg shadow container">