Improve relationship UI handling (#42)

* Added tabbed view; improved relationships for media profile

* Adds new maybe_limit method for queries

* Improves UI for media items, associated tasks

lib/pinchflat_web/controllers/media_profiles/media_profile_controller.ex

@@ -1,6 +1,7 @@
 defmodule PinchflatWeb.MediaProfiles.MediaProfileController do
   use PinchflatWeb, :controller
 
+  alias Pinchflat.Repo
   alias Pinchflat.Profiles
   alias Pinchflat.Profiles.MediaProfile
 
@@ -39,7 +40,11 @@ defmodule PinchflatWeb.MediaProfiles.MediaProfileController do
   end
 
   def show(conn, %{"id" => id}) do
-    media_profile = Profiles.get_media_profile!(id)
+    media_profile =
+      id
+      |> Profiles.get_media_profile!()
+      |> Repo.preload(:sources)
+
     render(conn, :show, media_profile: media_profile)
   end
 

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

@@ -10,9 +10,9 @@
       </li>
       <li>
         <code class="text-sm">yt-dlp</code>-style
-        <.reference_link href="https://github.com/yt-dlp/yt-dlp?tab=readme-ov-file#output-template">
+        <.inline_link href="https://github.com/yt-dlp/yt-dlp?tab=readme-ov-file#output-template">
           <.icon name="hero-arrow-top-right-on-square" class="h-4 w-4" />
-        </.reference_link>:
+        </.inline_link>:
         <.inline_code>/%(channel)s/%(duration>%H-%M-%S)s-%(id)s.%(ext)s</.inline_code>
       </li>
       <li>
@@ -50,9 +50,9 @@
     <p>
       Any single-word <code class="text-sm">yt-dlp</code>
       option
-      <.reference_link href="https://github.com/yt-dlp/yt-dlp?tab=readme-ov-file#output-template">
+      <.inline_link href="https://github.com/yt-dlp/yt-dlp?tab=readme-ov-file#output-template">
         <.icon name="hero-arrow-top-right-on-square" class="h-4 w-4" />
-      </.reference_link>
+      </.inline_link>
       can be used with the curly braced liquid-style syntax.
       This is just a list of the most common options as well as some custom aliases
     </p>

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

@@ -18,31 +18,50 @@
 </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">
   <div class="max-w-full overflow-x-auto">
-    <div class="flex flex-col gap-10 dark:text-white">
-      <h3 class="font-bold text-xl">Attributes for "<%= @media_profile.name %>"</h3>
-      <.list_items_from_map map={Map.from_struct(@media_profile)} />
-    </div>
+    <.tabbed_layout>
+      <:tab title="Attributes">
+        <div class="flex flex-col gap-10 text-white">
+          <h3 class="font-bold text-xl">Attributes for "<%= @media_profile.name %>"</h3>
+          <.list_items_from_map map={Map.from_struct(@media_profile)} />
+        </div>
 
-    <section class="flex flex-col md:flex-row items-center md:justify-around my-10">
-      <.link
-        href={~p"/media_profiles/#{@media_profile}"}
-        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">
-          Delete Profile and its Sources
-        </.button>
-      </.link>
-      <.link
-        href={~p"/media_profiles/#{@media_profile}?delete_files=true"}
-        method="delete"
-        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">
-          Delete Profile, Sources, and Files
-        </.button>
-      </.link>
-    </section>
+        <section class="flex flex-col md:flex-row items-center md:justify-around my-10">
+          <.link
+            href={~p"/media_profiles/#{@media_profile}"}
+            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">
+              Delete Profile and its Sources
+            </.button>
+          </.link>
+          <.link
+            href={~p"/media_profiles/#{@media_profile}?delete_files=true"}
+            method="delete"
+            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">
+              Delete Profile, Sources, and Files
+            </.button>
+          </.link>
+        </section>
+      </:tab>
+      <:tab title="Sources">
+        <.table rows={@media_profile.sources} table_class="text-black dark:text-white">
+          <:col :let={source} label="Name">
+            <%= source.friendly_name || source.collection_name %>
+          </: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="" class="flex place-content-evenly">
+            <.icon_link href={~p"/sources/#{source.id}"} icon="hero-eye" class="mx-1" />
+            <.icon_link href={~p"/sources/#{source.id}/edit"} icon="hero-pencil-square" class="mx-1" />
+          </:col>
+        </.table>
+      </:tab>
+    </.tabbed_layout>
   </div>
 </div>