[Enhancement] Record and display errors related to downloading (#610)

* Added last_error to media item table

* Error messages are now persisted to the last_error field

* Minor layout updates

* Added help tooltip to source content view

* Added error information to homepage tables

* Remove unneeded index

* Added docs to tooltip component

lib/pinchflat_web/components/custom_components/button_components.ex

@@ -3,6 +3,7 @@ defmodule PinchflatWeb.CustomComponents.ButtonComponents do
   use Phoenix.Component, global_prefixes: ~w(x-)
 
   alias PinchflatWeb.CoreComponents
+  alias PinchflatWeb.CustomComponents.TextComponents
 
   @doc """
   Render a button
@@ -104,7 +105,7 @@ defmodule PinchflatWeb.CustomComponents.ButtonComponents do
 
   def icon_button(assigns) do
     ~H"""
-    <div class="group relative inline-block">
+    <TextComponents.tooltip position="bottom" tooltip={@tooltip} tooltip_class="text-nowrap">
       <button
         class={[
           "flex justify-center items-center rounded-lg ",
@@ -117,18 +118,7 @@ defmodule PinchflatWeb.CustomComponents.ButtonComponents do
       >
         <CoreComponents.icon name={@icon_name} class="text-stroke" />
       </button>
-      <div
-        :if={@tooltip}
-        class={[
-          "hidden absolute left-1/2 top-full z-20 mt-3 -translate-x-1/2 whitespace-nowrap rounded-md",
-          "px-4.5 py-1.5 text-sm font-medium opacity-0 drop-shadow-4 group-hover:opacity-100 group-hover:block bg-meta-4"
-        ]}
-      >
-        <span class="border-light absolute -top-1 left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm bg-meta-4">
-        </span>
-        <span>{@tooltip}</span>
-      </div>
-    </div>
+    </TextComponents.tooltip>
     """
   end
 end

lib/pinchflat_web/components/custom_components/text_components.ex

@@ -146,4 +146,60 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
     <.localized_number number={@num} /> {@suffix}
     """
   end
+
+  @doc """
+  Renders a tooltip with the given content
+  """
+
+  attr :tooltip, :string, required: true
+  attr :position, :string, default: ""
+  attr :tooltip_class, :any, default: ""
+  attr :tooltip_arrow_class, :any, default: ""
+  slot :inner_block
+
+  def tooltip(%{position: "bottom-right"} = assigns) do
+    ~H"""
+    <.tooltip tooltip={@tooltip} tooltip_class={@tooltip_class} tooltip_arrow_class={["-top-1", @tooltip_arrow_class]}>
+      {render_slot(@inner_block)}
+    </.tooltip>
+    """
+  end
+
+  def tooltip(%{position: "bottom"} = assigns) do
+    ~H"""
+    <.tooltip
+      tooltip={@tooltip}
+      tooltip_class={["left-1/2 -translate-x-1/2", @tooltip_class]}
+      tooltip_arrow_class={["-top-1 left-1/2 -translate-x-1/2", @tooltip_arrow_class]}
+    >
+      {render_slot(@inner_block)}
+    </.tooltip>
+    """
+  end
+
+  def tooltip(assigns) do
+    ~H"""
+    <div class="group relative inline-block cursor-pointer">
+      <div>
+        {render_slot(@inner_block)}
+      </div>
+      <div
+        :if={@tooltip}
+        class={[
+          "hidden absolute top-full z-20 mt-3 whitespace-nowrap rounded-md",
+          "p-1.5 text-sm font-medium opacity-0 drop-shadow-4 group-hover:opacity-100 group-hover:block bg-meta-4",
+          "border border-form-strokedark text-wrap",
+          @tooltip_class
+        ]}
+      >
+        <span class={[
+          "border-t border-l border-form-strokedark absolute -z-10 h-2 w-2 rotate-45 rounded-sm bg-meta-4",
+          @tooltip_arrow_class
+        ]}>
+        </span>
+        <div class="px-3">{@tooltip}</div>
+      </div>
+    </div>
+    """
+  end
 end

lib/pinchflat_web/controllers/media_items/media_item_html/show.html.heex

@@ -16,7 +16,7 @@
     </.link>
   </nav>
 </div>
-<div class="rounded-sm border border-stroke bg-white py-5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark px-7.5">
+<div class="rounded-sm border py-5 pt-6 shadow-default border-strokedark bg-boxdark px-7.5">
   <div class="max-w-full">
     <.tabbed_layout>
       <:tab_append>
@@ -24,7 +24,15 @@
       </:tab_append>
 
       <:tab title="Media" id="media">
-        <div class="flex flex-col gap-10 dark:text-white">
+        <div class="flex flex-col gap-10 text-white">
+          <section :if={@media_item.last_error} class="mt-6">
+            <div class="flex items-center gap-1 mb-2">
+              <.icon name="hero-exclamation-circle-solid" class="text-red-500" />
+              <h3 class="font-bold text-xl">Last Error</h3>
+            </div>
+            <span>{@media_item.last_error}</span>
+          </section>
+
           <%= if media_file_exists?(@media_item) do %>
             <section class="grid grid-cols-1 xl:gap-6 mt-6">
               <div>
@@ -54,19 +62,21 @@
             </section>
           <% end %>
 
-          <h3 class="font-bold text-xl mt-6">Raw Attributes</h3>
           <section>
-            <strong>Source:</strong>
-            <.subtle_link href={~p"/sources/#{@media_item.source_id}"}>
-              {@media_item.source.custom_name}
-            </.subtle_link>
-            <.list_items_from_map map={Map.from_struct(@media_item)} />
+            <h3 class="font-bold text-xl mb-2">Raw Attributes</h3>
+            <section>
+              <strong>Source:</strong>
+              <.subtle_link href={~p"/sources/#{@media_item.source_id}"}>
+                {@media_item.source.custom_name}
+              </.subtle_link>
+              <.list_items_from_map map={Map.from_struct(@media_item)} />
+            </section>
           </section>
         </div>
       </:tab>
       <:tab title="Tasks" id="tasks">
         <%= if match?([_|_], @media_item.tasks) do %>
-          <.table rows={@media_item.tasks} table_class="text-black dark:text-white">
+          <.table rows={@media_item.tasks} table_class="text-white">
             <:col :let={task} label="Worker">
               {task.job.worker}
             </:col>

lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex

@@ -25,8 +25,10 @@
 
       <:tab title="Media Profile" id="media-profile">
         <div class="flex flex-col gap-10 text-white">
-          <h3 class="font-bold text-xl mt-6">Raw Attributes</h3>
-          <.list_items_from_map map={Map.from_struct(@media_profile)} />
+          <section>
+            <h3 class="font-bold text-xl mt-6 mb-2">Raw Attributes</h3>
+            <.list_items_from_map map={Map.from_struct(@media_profile)} />
+          </section>
         </div>
       </:tab>
       <:tab title="Sources" id="sources">

lib/pinchflat_web/controllers/pages/page_html/history_table_live.ex

@@ -28,10 +28,22 @@ defmodule Pinchflat.Pages.HistoryTableLive do
       </span>
       <div class="max-w-full overflow-x-auto">
         <.table rows={@records} table_class="text-white">
-          <:col :let={media_item} label="Title" class="truncate max-w-xs">
-            <.subtle_link href={~p"/sources/#{media_item.source_id}/media/#{media_item}"}>
-              {media_item.title}
-            </.subtle_link>
+          <:col :let={media_item} label="Title" class="max-w-xs">
+            <section class="flex items-center space-x-1">
+              <.tooltip
+                :if={media_item.last_error}
+                tooltip={media_item.last_error}
+                position="bottom-right"
+                tooltip_class="w-64"
+              >
+                <.icon name="hero-exclamation-circle-solid" class="text-red-500" />
+              </.tooltip>
+              <span class="truncate">
+                <.subtle_link href={~p"/sources/#{media_item.source_id}/media/#{media_item.id}"}>
+                  {media_item.title}
+                </.subtle_link>
+              </span>
+            </section>
           </:col>
           <:col :let={media_item} label="Upload Date">
             {DateTime.to_date(media_item.uploaded_at)}

lib/pinchflat_web/controllers/sources/source_html/media_item_table_live.ex

@@ -46,10 +46,22 @@ defmodule PinchflatWeb.Sources.MediaItemTableLive do
         </div>
       </header>
       <.table rows={@records} table_class="text-white">
-        <:col :let={media_item} label="Title" class="truncate max-w-xs">
-          <.subtle_link href={~p"/sources/#{@source.id}/media/#{media_item.id}"}>
-            {media_item.title}
-          </.subtle_link>
+        <:col :let={media_item} label="Title" class="max-w-xs">
+          <section class="flex items-center space-x-1">
+            <.tooltip
+              :if={media_item.last_error}
+              tooltip={media_item.last_error}
+              position="bottom-right"
+              tooltip_class="w-64"
+            >
+              <.icon name="hero-exclamation-circle-solid" class="text-red-500" />
+            </.tooltip>
+            <span class="truncate">
+              <.subtle_link href={~p"/sources/#{@source.id}/media/#{media_item.id}"}>
+                {media_item.title}
+              </.subtle_link>
+            </span>
+          </section>
         </:col>
         <:col :let={media_item} :if={@media_state == "other"} label="Manually Ignored?">
           <.icon name={if media_item.prevent_download, do: "hero-check", else: "hero-x-mark"} />
@@ -205,6 +217,6 @@ defmodule PinchflatWeb.Sources.MediaItemTableLive do
 
   # Selecting only what we need GREATLY speeds up queries on large tables
   defp select_fields do
-    [:id, :title, :uploaded_at, :prevent_download]
+    [:id, :title, :uploaded_at, :prevent_download, :last_error]
   end
 end

lib/pinchflat_web/controllers/sources/source_html/show.html.heex

@@ -24,16 +24,18 @@
       </:tab_append>
 
       <:tab title="Source" id="source">
-        <div class="flex flex-col gap-10 text-white">
-          <h3 class="font-bold text-xl mt-6">Raw Attributes</h3>
+        <div class="flex flex-col text-white gap-10">
           <section>
-            <strong>Media Profile:</strong>
-            <.subtle_link href={~p"/media_profiles/#{@source.media_profile_id}"}>
-              {@source.media_profile.name}
-            </.subtle_link>
-          </section>
+            <h3 class="font-bold text-xl mb-2 mt-6">Raw Attributes</h3>
+            <section>
+              <strong>Media Profile:</strong>
+              <.subtle_link href={~p"/media_profiles/#{@source.media_profile_id}"}>
+                {@source.media_profile.name}
+              </.subtle_link>
+            </section>
 
-          <.list_items_from_map map={Map.from_struct(@source)} />
+            <.list_items_from_map map={Map.from_struct(@source)} />
+          </section>
         </div>
       </:tab>
       <:tab title="Pending" id="pending">