[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/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">