First UI Pass (#15)

* Added scratchpad dir

* Installed Alpine

* [WIP] began integrating Tailwind and accompanying theme

* [WIP] Set up basic views for sources

* Adds new UI to media profiles page

* Removes unneeded view

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

@@ -1,8 +1,14 @@
-<.header>
-  Edit Media profile <%= @media_profile.id %>
-  <:subtitle>Use this form to manage media_profile records in your database.</:subtitle>
-</.header>
+<div class="mb-6 flex gap-3 flex-row items-center">
+  <.link navigate={~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>
+</div>
 
-<.media_profile_form changeset={@changeset} action={~p"/media_profiles/#{@media_profile}"} />
-
-<.back navigate={~p"/media_profiles"}>Back to media_profiles</.back>
+<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">
+      <.media_profile_form changeset={@changeset} action={~p"/media_profiles/#{@media_profile}"} />
+    </div>
+  </div>
+</div>

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

@@ -1,30 +1,39 @@
-<.header>
-  Listing Media profiles
-  <:actions>
-    <.link href={~p"/media_profiles/new"}>
-      <.button>New Media profile</.button>
+<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">All Media Profiles</h2>
+  <nav>
+    <.link navigate={~p"/media_profiles/new"}>
+      <.button color="bg-primary" rounding="rounded-full">
+        <span class="font-bold mx-2">+</span> New Media Profile
+      </.button>
     </.link>
-  </:actions>
-</.header>
+  </nav>
+</div>
 
-<.table
-  id="media_profiles"
-  rows={@media_profiles}
-  row_click={&JS.navigate(~p"/media_profiles/#{&1}")}
->
-  <:col :let={media_profile} label="Name"><%= media_profile.name %></:col>
-  <:col :let={media_profile} label="Output path template">
-    <%= media_profile.output_path_template %>
-  </:col>
-  <:action :let={media_profile}>
-    <div class="sr-only">
-      <.link navigate={~p"/media_profiles/#{media_profile}"}>Show</.link>
+<div class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
+  <div class="max-w-full overflow-x-auto">
+    <div class="flex flex-col gap-10">
+      <.table rows={@media_profiles} table_class="text-black dark:text-white">
+        <:col :let={media_profile} label="Name">
+          <%= media_profile.name %>
+        </:col>
+        <:col :let={media_profile} label="Output Template">
+          <code class="text-sm"><%= media_profile.output_path_template %></code>
+        </:col>
+        <:col :let={media_profile} label="" class="flex place-content-evenly">
+          <.link
+            navigate={~p"/media_profiles/#{media_profile.id}"}
+            class="hover:text-secondary duration-200 ease-in-out mx-0.5"
+          >
+            <.icon name="hero-eye" />
+          </.link>
+          <.link
+            navigate={~p"/media_profiles/#{media_profile.id}/edit"}
+            class="hover:text-secondary duration-200 ease-in-out mx-0.5"
+          >
+            <.icon name="hero-pencil-square" />
+          </.link>
+        </:col>
+      </.table>
     </div>
-    <.link navigate={~p"/media_profiles/#{media_profile}/edit"}>Edit</.link>
-  </:action>
-  <:action :let={media_profile}>
-    <.link href={~p"/media_profiles/#{media_profile}"} method="delete" data-confirm="Are you sure?">
-      Delete
-    </.link>
-  </:action>
-</.table>
+  </div>
+</div>

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

@@ -2,29 +2,62 @@
   <.error :if={@changeset.action}>
     Oops, something went wrong! Please check the errors below.
   </.error>
-  <.input field={f[:name]} type="text" label="Name" />
-  <.input field={f[:output_path_template]} type="text" label="Output path template" />
+  <h3 class="my-4 text-2xl text-black dark:text-white">
+    General Options
+  </h3>
+  <.input field={f[:name]} type="text" label="Name" placeholder="New Profile" help="(required)" />
+  <.input
+    field={f[:output_path_template]}
+    type="text"
+    label="Output path template"
+    help="TODO: provide docs (required)"
+  />
 
-  <h3>Subtitle Options</h3>
-  <.input field={f[:download_subs]} type="checkbox" label="Download Subs" />
-  <.input field={f[:download_auto_subs]} type="checkbox" label="Download Autogenerated Subs" />
-  <.input field={f[:embed_subs]} type="checkbox" label="Embed Subs" />
-  <.input field={f[:sub_langs]} type="text" label="Sub Langs" />
+  <h3 class="mb-4 mt-8 text-2xl text-black dark:text-white">
+    Subtitle Options
+  </h3>
+  <.input field={f[:download_subs]} type="toggle" label="Download Subtitles" />
+  <.input
+    field={f[:download_auto_subs]}
+    type="toggle"
+    label="Download Autogenerated Subtitles"
+    help="Prefers normal subs but will download autogenerated if needed"
+  />
+  <.input
+    field={f[:embed_subs]}
+    type="toggle"
+    label="Embed Subtitles"
+    help="Embeds subtitles in the video file itself, if supported"
+  />
+  <.input
+    field={f[:sub_langs]}
+    type="text"
+    label="Subtitle Languages"
+    help="Use commas for multiple languages (eg: en,de)"
+  />
 
-  <h3>Thumbnail Options</h3>
-  <.input field={f[:download_thumbnail]} type="checkbox" label="Download Thumbnail" />
-  <.input field={f[:embed_thumbnail]} type="checkbox" label="Embed Thumbnail" />
+  <h3 class="mb-4 mt-8 text-2xl text-black dark:text-white">
+    Thumbnail Options
+  </h3>
+  <.input field={f[:download_thumbnail]} type="toggle" label="Download Thumbnail" />
+  <.input field={f[:embed_thumbnail]} type="toggle" label="Embed Thumbnail" />
 
-  <h3>Metadata Options</h3>
-  <.input field={f[:download_metadata]} type="checkbox" label="Download Metadata" />
-  <.input field={f[:embed_metadata]} type="checkbox" label="Embed Metadata" />
+  <h3 class="mb-4 mt-8 text-2xl text-black dark:text-white">
+    Metadata Options
+  </h3>
+  <.input field={f[:download_metadata]} type="toggle" label="Download Metadata" />
+  <.input field={f[:embed_metadata]} type="toggle" label="Embed Metadata" />
+
+  <h3 class="mb-4 mt-8 text-2xl text-black dark:text-white">
+    Release Format Options
+  </h3>
 
-  <h3>Release Format Options</h3>
   <.input
     field={f[:shorts_behaviour]}
     options={friendly_format_type_options()}
     type="select"
     label="Include Shorts?"
+    help="Experimental"
   />
   <.input
     field={f[:livestream_behaviour]}
@@ -34,6 +67,6 @@
   />
 
   <:actions>
-    <.button>Save Media profile</.button>
+    <.button class="mt-15 mb-5 sm:mb-7.5">Save Media profile</.button>
   </:actions>
 </.simple_form>

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

@@ -1,8 +1,14 @@
-<.header>
-  New Media profile
-  <:subtitle>Use this form to manage media_profile records in your database.</:subtitle>
-</.header>
+<div class="mb-6 flex gap-3 flex-row items-center">
+  <.link navigate={~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">New Media Profile</h2>
+</div>
 
-<.media_profile_form changeset={@changeset} action={~p"/media_profiles"} />
-
-<.back navigate={~p"/media_profiles"}>Back to media_profiles</.back>
+<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">
+      <.media_profile_form changeset={@changeset} action={~p"/media_profiles"} />
+    </div>
+  </div>
+</div>

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

@@ -1,13 +1,26 @@
-<.header>
-  Media profile <%= @media_profile.id %>
-  <:subtitle>This is a media_profile record from your database.</:subtitle>
-  <:actions>
-    <.link href={~p"/media_profiles/#{@media_profile}/edit"}>
-      <.button>Edit media_profile</.button>
+<div class="mb-6 flex gap-3 flex-row items-center justify-between">
+  <div class="flex gap-3 items-center">
+    <.link navigate={~p"/media_profiles"}>
+      <.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
     </.link>
-  </:actions>
-</.header>
+    <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
+      Media Profile #<%= @media_profile.id %>
+    </h2>
+  </div>
 
-<.list_items_from_map map={Map.from_struct(@media_profile)} />
-
-<.back navigate={~p"/media_profiles"}>Back to media_profiles</.back>
+  <nav>
+    <.link navigate={~p"/media_profiles/#{@media_profile}/edit"}>
+      <.button color="bg-primary" rounding="rounded-full">
+        <.icon name="hero-pencil-square" class="mr-2" /> Edit Media Profile
+      </.button>
+    </.link>
+  </nav>
+</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</h3>
+      <.list_items_from_map map={Map.from_struct(@media_profile)} />
+    </div>
+  </div>
+</div>

lib/pinchflat_web/controllers/media_sources/source_controller.ex

@@ -7,7 +7,7 @@ defmodule PinchflatWeb.MediaSources.SourceController do
   alias Pinchflat.MediaSource.Source
 
   def index(conn, _params) do
-    sources = MediaSource.list_sources()
+    sources = Repo.preload(MediaSource.list_sources(), :media_profile)
 
     render(conn, :index, sources: sources)
   end
@@ -23,7 +23,7 @@ defmodule PinchflatWeb.MediaSources.SourceController do
       {:ok, source} ->
         conn
         |> put_flash(:info, "Source created successfully.")
-        |> redirect(to: ~p"/media_sources/sources/#{source}")
+        |> redirect(to: ~p"/sources/#{source}")
 
       {:error, %Ecto.Changeset{} = changeset} ->
         render(conn, :new, changeset: changeset, media_profiles: media_profiles())
@@ -53,7 +53,7 @@ defmodule PinchflatWeb.MediaSources.SourceController do
       {:ok, source} ->
         conn
         |> put_flash(:info, "Source updated successfully.")
-        |> redirect(to: ~p"/media_sources/sources/#{source}")
+        |> redirect(to: ~p"/sources/#{source}")
 
       {:error, %Ecto.Changeset{} = changeset} ->
         render(conn, :edit,
@@ -70,7 +70,7 @@ defmodule PinchflatWeb.MediaSources.SourceController do
 
     conn
     |> put_flash(:info, "Source deleted successfully.")
-    |> redirect(to: ~p"/media_sources/sources")
+    |> redirect(to: ~p"/sources")
   end
 
   defp media_profiles do

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

@@ -1,12 +1,18 @@
-<.header>
-  Edit Source <%= @source.id %>
-  <:subtitle>Use this form to manage source records in your database.</:subtitle>
-</.header>
+<div class="mb-6 flex gap-3 flex-row items-center">
+  <.link navigate={~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>
+</div>
 
-<.source_form
-  changeset={@changeset}
-  media_profiles={@media_profiles}
-  action={~p"/media_sources/sources/#{@source}"}
-/>
-
-<.back navigate={~p"/media_sources/sources"}>Back to sources</.back>
+<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">
+      <.source_form
+        changeset={@changeset}
+        media_profiles={@media_profiles}
+        action={~p"/sources/#{@source}"}
+      />
+    </div>
+  </div>
+</div>

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

@@ -1,24 +1,48 @@
-<.header>
-  Listing Sources
-  <:actions>
-    <.link href={~p"/media_sources/sources/new"}>
-      <.button>New Source</.button>
+<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">All Sources</h2>
+  <nav>
+    <.link navigate={~p"/sources/new"}>
+      <.button color="bg-primary" rounding="rounded-full">
+        <span class="font-bold mx-2">+</span> New Source
+      </.button>
     </.link>
-  </:actions>
-</.header>
+  </nav>
+</div>
 
-<.table id="sources" rows={@sources} row_click={&JS.navigate(~p"/media_sources/sources/#{&1}")}>
-  <:col :let={source} label="Collection Name"><%= source.collection_name %></:col>
-  <:col :let={source} label="Collection ID"><%= source.collection_id %></:col>
-  <:action :let={source}>
-    <div class="sr-only">
-      <.link navigate={~p"/media_sources/sources/#{source}"}>Show</.link>
+<div class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
+  <div class="max-w-full overflow-x-auto">
+    <div class="flex flex-col gap-10">
+      <.table rows={@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="Media Profile">
+          <.link
+            navigate={~p"/media_profiles/#{source.media_profile_id}"}
+            class="hover:text-secondary duration-200 ease-in-out"
+          >
+            <%= source.media_profile.name %>
+          </.link>
+        </:col>
+        <:col :let={source} label="" class="flex place-content-evenly">
+          <.link
+            navigate={~p"/sources/#{source.id}"}
+            class="hover:text-secondary duration-200 ease-in-out mx-0.5"
+          >
+            <.icon name="hero-eye" />
+          </.link>
+          <.link
+            navigate={~p"/sources/#{source.id}/edit"}
+            class="hover:text-secondary duration-200 ease-in-out mx-0.5"
+          >
+            <.icon name="hero-pencil-square" />
+          </.link>
+        </:col>
+      </.table>
     </div>
-    <.link navigate={~p"/media_sources/sources/#{source}/edit"}>Edit</.link>
-  </:action>
-  <:action :let={source}>
-    <.link href={~p"/media_sources/sources/#{source}"} method="delete" data-confirm="Are you sure?">
-      Delete
-    </.link>
-  </:action>
-</.table>
+  </div>
+</div>

lib/pinchflat_web/controllers/media_sources/source_html/new.html.heex

@@ -1,12 +1,14 @@
-<.header>
-  New Source
-  <:subtitle>Use this form to manage source records in your database.</:subtitle>
-</.header>
+<div class="mb-6 flex gap-3 flex-row items-center">
+  <.link navigate={~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">New Source</h2>
+</div>
 
-<.source_form
-  changeset={@changeset}
-  media_profiles={@media_profiles}
-  action={~p"/media_sources/sources"}
-/>
-
-<.back navigate={~p"/media_sources/sources"}>Back to sources</.back>
+<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">
+      <.source_form changeset={@changeset} media_profiles={@media_profiles} action={~p"/sources"} />
+    </div>
+  </div>
+</div>

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

@@ -1,23 +1,38 @@
-<.header>
-  Source <%= @source.id %>
-  <:subtitle>This is a source record from your database.</:subtitle>
-  <:actions>
-    <.link href={~p"/media_sources/sources/#{@source}/edit"}>
-      <.button>Edit source</.button>
+<div class="mb-6 flex gap-3 flex-row items-center justify-between">
+  <div class="flex gap-3 items-center">
+    <.link navigate={~p"/sources"}>
+      <.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
     </.link>
-  </:actions>
-</.header>
+    <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
+      Source #<%= @source.id %>
+    </h2>
+  </div>
 
-<h3 class="mt-14">Relationships</h3>
-<.list>
-  <:item title="media_profile">
-    <.link href={~p"/media_profiles/#{@source.media_profile}"}>
-      <%= @source.media_profile.name %>
+  <nav>
+    <.link navigate={~p"/sources/#{@source}/edit"}>
+      <.button color="bg-primary" rounding="rounded-full">
+        <.icon name="hero-pencil-square" class="mr-2" /> Edit Source
+      </.button>
     </.link>
-  </:item>
-</.list>
+  </nav>
+</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="mt-14 font-bold text-xl">Relationships</h3>
+      <.list>
+        <:item title="media_profile">
+          <.link
+            navigate={~p"/media_profiles/#{@source.media_profile_id}"}
+            class="hover:text-secondary duration-200 ease-in-out"
+          >
+            <%= @source.media_profile.name %>
+          </.link>
+        </:item>
+      </.list>
 
-<h3>Attributes</h3>
-<.list_items_from_map map={Map.from_struct(@source)} />
-
-<.back navigate={~p"/media_sources/sources"}>Back to sources</.back>
+      <h3 class="font-bold text-xl">Attributes</h3>
+      <.list_items_from_map map={Map.from_struct(@source)} />
+    </div>
+  </div>
+</div>

lib/pinchflat_web/controllers/media_sources/source_html/source_form.html.heex

@@ -3,6 +3,13 @@
     Oops, something went wrong! Please check the errors below.
   </.error>
 
+  <.input
+    field={f[:original_url]}
+    type="text"
+    label="Source URL"
+    help="URL of a channel or playlist (required)"
+  />
+
   <.input field={f[:friendly_name]} type="text" label="Friendly Name" />
 
   <.input
@@ -16,21 +23,25 @@
     field={f[:collection_type]}
     options={friendly_collection_types()}
     type="select"
-    label="Collection Type"
+    label="Source Type"
   />
 
-  <.input field={f[:original_url]} type="text" label="Source URL" />
-
   <.input
     field={f[:index_frequency_minutes]}
     options={friendly_index_frequencies()}
     type="select"
     label="Index Frequency"
+    help="Roughly how often to check for media to download"
   />
 
-  <.input field={f[:download_media]} type="checkbox" label="Download Media?" />
+  <.input
+    field={f[:download_media]}
+    type="toggle"
+    label="Download Media?"
+    help="Unchecking still indexes media but it won't be downloaded"
+  />
 
   <:actions>
-    <.button>Save Source</.button>
+    <.button class="mt-15 mb-5 sm:mb-7.5">Save Source</.button>
   </:actions>
 </.simple_form>

lib/pinchflat_web/controllers/page_controller.ex

@@ -4,6 +4,6 @@ defmodule PinchflatWeb.PageController do
   def home(conn, _params) do
     # The home page is often custom made,
     # so skip the default app layout.
-    render(conn, :home, layout: false)
+    render(conn, :home)
   end
 end