add upload progress to works and disable loading buttons (#803)

Also tossed a small css change in there

Author: zkat

assets/css/app.css

@@ -36,7 +36,7 @@
   &.phx-keyup-loading,
   &.phx-keydown-loading,
   &.phx-loading {
-    @apply loading;
+    @apply loading btn-disabled;
   }
 }
 

lib/banchan_web/live/work_live/components/work_uploads/work_uploads.css

@@ -3,7 +3,7 @@
 }
 
 .preview-item {
-  @apply relative bg-base-100 mx-auto my-auto w-full h-full flex flex-col justify-center items-center cursor-pointer;
+  @apply relative bg-base-100 mx-auto my-auto w-full h-full flex flex-col justify-center items-center cursor-pointer min-h-40;
 
   &:first-child:nth-last-child(1) {
     @apply md:col-span-6 w-full;
@@ -33,3 +33,7 @@
 .remove-upload {
   @apply absolute z-20 btn btn-sm btn-circle left-2 top-2;
 }
+
+.upload-progress {
+  @apply absolute z-10 radial-progress text-primary bg-primary-content opacity-80;
+}

lib/banchan_web/live/work_live/components/work_uploads/work_uploads.ex

@@ -116,6 +116,12 @@ defmodule BanchanWeb.WorkLive.Components.WorkUploads do
     send(pid, {:canceled_upload, id, ref})
   end
 
+  defp get_upload_entry(entries, wupload) do
+    Enum.find(entries, fn entry ->
+      entry.ref == wupload.ref
+    end)
+  end
+
   def render(assigns) do
     ~F"""
     <bc-work-uploads id={@id} class={@class} :hook="SortableHook">
@@ -130,6 +136,12 @@ defmodule BanchanWeb.WorkLive.Components.WorkUploads do
                 wupload.ref
               end}
             >
+              {#if type == :live}
+                <div
+                  class="upload-progress"
+                  style={"--value:#{get_upload_entry(@live_entries, wupload).progress}"}
+                >{get_upload_entry(@live_entries, wupload).progress}%</div>
+              {/if}
               {#if @editing}
                 <button type="button" class="remove-upload" phx-value-idx={idx} :on-click="remove_upload">✕</button>
               {/if}