Improve index tables and improved consistency (#97)

* Simplifies index pages

* Improved UX of more pages

lib/pinchflat_web/components/custom_components/text_components.ex

@@ -31,6 +31,20 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
     """
   end
 
+  @doc """
+  Renders a subtle link with the given href and content.
+  """
+  attr :href, :string, required: true
+  slot :inner_block
+
+  def subtle_link(assigns) do
+    ~H"""
+    <.link href={@href} class="underline decoration-bodydark decoration-1 hover:decoration-white">
+      <%= render_slot(@inner_block) %>
+    </.link>
+    """
+  end
+
   @doc """
   Renders an icon as a link with the given href.
   """

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

@@ -30,7 +30,7 @@
             method="delete"
             data-confirm="Are you sure you want to delete this record and all associated files on disk? This cannot be undone."
           >
-            <.button color="bg-meta-1" rounding="rounded-full">
+            <.button color="bg-meta-1" rounding="rounded-lg">
               Delete Files
             </.button>
           </.link>

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

@@ -2,7 +2,9 @@
   <.link href={~p"/media_profiles"}>
     <.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
   </.link>
-  <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">Edit Media Profile</h2>
+  <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
+    Editing "<%= @media_profile.name %>"
+  </h2>
 </div>
 
 <div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">

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

@@ -4,7 +4,7 @@
   </h2>
   <nav>
     <.link href={~p"/media_profiles/new"}>
-      <.button color="bg-primary" rounding="rounded-full">
+      <.button color="bg-primary" rounding="rounded-lg">
         <span class="font-bold text-xl mx-2">+</span> New <span class="hidden sm:inline pl-1">Media Profile</span>
       </.button>
     </.link>
@@ -16,10 +16,9 @@
     <div class="flex flex-col gap-10 min-w-max">
       <.table rows={@media_profiles} table_class="text-black dark:text-white">
         <:col :let={media_profile} label="Name">
-          <%= media_profile.name %>
+          <.subtle_link href={~p"/media_profiles/#{media_profile.id}"}>
-        </:col>
+            <%= media_profile.name %>
-        <:col :let={media_profile} label="Output Template">
+          </.subtle_link>
-          <code class="text-sm"><%= media_profile.output_path_template %></code>
         </:col>
         <:col :let={media_profile} label="Preferred Resolution">
           <%= media_profile.preferred_resolution %>

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

@@ -4,13 +4,13 @@
       <.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
     </.link>
     <h2 class="text-title-md2 font-bold text-black dark:text-white ml-2">
-      Media Profile <span class="hidden sm:inline">#<%= @media_profile.id %></span>
+      <%= @media_profile.name %>
     </h2>
   </div>
 
   <nav>
     <.link href={~p"/media_profiles/#{@media_profile}/edit"}>
-      <.button color="bg-primary" rounding="rounded-full">
+      <.button color="bg-primary" rounding="rounded-lg">
         <.icon name="hero-pencil-square" class="mr-2" />Edit <span class="hidden sm:inline pl-1">Media Profile</span>
       </.button>
     </.link>
@@ -31,7 +31,7 @@
             method="delete"
             data-confirm="Are you sure you want to delete this profile and all its sources (leaving files in place)? This cannot be undone."
           >
-            <.button color="bg-meta-1" rounding="rounded-full">
+            <.button color="bg-meta-1" rounding="rounded-lg">
               Delete Profile and its Sources
             </.button>
           </.link>
@@ -41,7 +41,7 @@
             data-confirm="Are you sure you want to delete this profile, all its sources, and its files on disk? This cannot be undone."
             class="mt-5 md:mt-0"
           >
-            <.button color="bg-meta-1" rounding="rounded-full">
+            <.button color="bg-meta-1" rounding="rounded-lg">
               Delete Profile, Sources, and Files
             </.button>
           </.link>

lib/pinchflat_web/controllers/pages/page_html/onboarding_checklist.html.heex

@@ -11,7 +11,7 @@
         <p class="text-md text-bodydark">Don't worry, you can create more Media Profiles later!</p>
         <div class="mt-8">
           <.link href={~p"/media_profiles/new"}>
-            <.button color="bg-primary" rounding="rounded-full" disabled={@media_profiles_exist}>
+            <.button color="bg-primary" rounding="rounded-lg" disabled={@media_profiles_exist}>
               <span class="font-bold mx-2">+</span> New Media Profile
             </.button>
           </.link>
@@ -25,7 +25,7 @@
         </p>
         <div class="mt-8">
           <.link href={~p"/sources/new"}>
-            <.button color="bg-primary" rounding="rounded-full" disabled={not @media_profiles_exist}>
+            <.button color="bg-primary" rounding="rounded-lg" disabled={not @media_profiles_exist}>
               <span class="font-bold mx-2">+</span> New Source
             </.button>
           </.link>
@@ -40,7 +40,7 @@
         <p class="text-md text-bodydark">Feel free to add more Media Profiles or Sources in the meantime!</p>
         <div class="mt-8">
           <.link href={~p"/?onboarding=0"}>
-            <.button color="bg-primary" rounding="rounded-full" disabled={not @sources_exist}>
+            <.button color="bg-primary" rounding="rounded-lg" disabled={not @sources_exist}>
               Let's Go <span class="font-bold mx-2">🚀</span>
             </.button>
           </.link>

lib/pinchflat_web/controllers/searches/search_html/show.html.heex

@@ -1,6 +1,6 @@
 <div class="mb-6 flex gap-3 flex-row items-center justify-between">
   <h2 class="text-title-md2 font-bold text-black dark:text-white">
-    <span class="hidden sm:inline">Search </span>Results for "<%= StringUtils.truncate(@search_term, 50) %>"
+    Results for "<%= StringUtils.truncate(@search_term, 50) %>"
   </h2>
 </div>
 
@@ -10,7 +10,7 @@
       <%= if match?([_|_], @search_results) do %>
         <.table rows={@search_results} table_class="text-black dark:text-white">
           <:col :let={result} label="Title">
-            <%= StringUtils.truncate(result.title, 40) %>
+            <%= result.title %>
           </:col>
           <:col :let={result} label="Excerpt">
             <.highlight_search_terms text={result.matching_search_term} />

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

@@ -2,7 +2,9 @@
   <.link href={~p"/sources"}>
     <.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
   </.link>
-  <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">Edit Source</h2>
+  <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
+    Editing "<%= @source.custom_name %>"
+  </h2>
 </div>
 
 <div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">

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

@@ -2,7 +2,7 @@
   <h2 class="text-title-md2 font-bold text-black dark:text-white">Sources</h2>
   <nav>
     <.link href={~p"/sources/new"}>
-      <.button color="bg-primary" rounding="rounded-full">
+      <.button color="bg-primary" rounding="rounded-lg">
         <span class="font-bold mx-2">+</span> New <span class="hidden sm:inline pl-1">Source</span>
       </.button>
     </.link>
@@ -14,19 +14,18 @@
     <div class="flex flex-col gap-10 min-w-max">
       <.table rows={@sources} table_class="text-black dark:text-white">
         <:col :let={source} label="Name">
-          <%= source.custom_name || source.collection_name %>
+          <.subtle_link href={~p"/sources/#{source.id}"}>
+            <%= source.custom_name || source.collection_name %>
+          </.subtle_link>
         </:col>
         <:col :let={source} label="Type"><%= source.collection_type %></:col>
         <:col :let={source} label="Should Download?">
           <.icon name={if source.download_media, do: "hero-check", else: "hero-x-mark"} />
         </:col>
         <:col :let={source} label="Media Profile">
-          <.link
+          <.subtle_link href={~p"/media_profiles/#{source.media_profile_id}"}>
-            href={~p"/media_profiles/#{source.media_profile_id}"}
-            class="hover:text-secondary duration-200 ease-in-out"
-          >
             <%= source.media_profile.name %>
-          </.link>
+          </.subtle_link>
         </:col>
         <:col :let={source} label="" class="flex place-content-evenly">
           <.icon_link href={~p"/sources/#{source.id}"} icon="hero-eye" class="mx-1" />

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

@@ -4,13 +4,13 @@
       <.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
     </.link>
     <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
-      Source <span class="hidden sm:inline">#<%= @source.id %></span>
+      <%= @source.custom_name %>
     </h2>
   </div>
 
   <nav>
     <.link href={~p"/sources/#{@source}/edit"}>
-      <.button color="bg-primary" rounding="rounded-full">
+      <.button color="bg-primary" rounding="rounded-lg">
         <.icon name="hero-pencil-square" class="mr-2" /> Edit <span class="hidden sm:inline pl-1">Source</span>
       </.button>
     </.link>
@@ -38,7 +38,7 @@
             method="delete"
             data-confirm="Are you sure you want to delete this source (leaving files in place)? This cannot be undone."
           >
-            <.button color="bg-meta-1" rounding="rounded-full">
+            <.button color="bg-meta-1" rounding="rounded-lg">
               Delete Source
             </.button>
           </.link>
@@ -48,7 +48,7 @@
             data-confirm="Are you sure you want to delete this source and it's files on disk? This cannot be undone."
             class="mt-5 md:mt-0"
           >
-            <.button color="bg-meta-1" rounding="rounded-full">
+            <.button color="bg-meta-1" rounding="rounded-lg">
               Delete Source and Files
             </.button>
           </.link>

test/pinchflat_web/controllers/media_profile_controller_test.exs

@@ -81,7 +81,7 @@ defmodule PinchflatWeb.MediaProfileControllerTest do
       media_profile: media_profile
     } do
       conn = get(conn, ~p"/media_profiles/#{media_profile}/edit")
-      assert html_response(conn, 200) =~ "Edit Media Profile"
+      assert html_response(conn, 200) =~ "Editing \"#{media_profile.name}\""
     end
   end
 
@@ -98,7 +98,7 @@ defmodule PinchflatWeb.MediaProfileControllerTest do
 
     test "renders errors when data is invalid", %{conn: conn, media_profile: media_profile} do
       conn = put(conn, ~p"/media_profiles/#{media_profile}", media_profile: @invalid_attrs)
-      assert html_response(conn, 200) =~ "Edit Media Profile"
+      assert html_response(conn, 200) =~ "Editing \"#{media_profile.name}\""
     end
   end
 

test/pinchflat_web/controllers/source_controller_test.exs

@@ -91,7 +91,7 @@ defmodule PinchflatWeb.SourceControllerTest do
 
     test "renders form for editing chosen source", %{conn: conn, source: source} do
       conn = get(conn, ~p"/sources/#{source}/edit")
-      assert html_response(conn, 200) =~ "Edit Source"
+      assert html_response(conn, 200) =~ "Editing \"#{source.custom_name}\""
     end
   end
 
@@ -114,7 +114,7 @@ defmodule PinchflatWeb.SourceControllerTest do
       invalid_attrs: invalid_attrs
     } do
       conn = put(conn, ~p"/sources/#{source}", source: invalid_attrs)
-      assert html_response(conn, 200) =~ "Edit Source"
+      assert html_response(conn, 200) =~ "Editing \"#{source.custom_name}\""
     end
   end