From fcc40dfa8d48fe9f262f9ba7aa821692b9031817 Mon Sep 17 00:00:00 2001
From: Kieran Eglin <kieran.eglin@gmail.com>
Date: Wed, 7 Feb 2024 20:29:05 -0800
Subject: [PATCH] [WIP] Set up basic views for sources

---
 assets/css/satoshi.css                        |  42 +---
 lib/pinchflat_web.ex                          |   4 +-
 .../components/core_components.ex             | 210 ++++++++++--------
 .../custom_components/button_components.ex    |  33 +++
 .../custom_components/table_components.ex     |  53 +++++
 lib/pinchflat_web/components/layouts.ex       |   2 +-
 .../components/layouts/app.html.heex          |   4 +-
 .../layouts/partials/sidebar.html.heex        |   2 +-
 .../components/layouts/root.html.heex         |   8 +-
 .../media_profile_html/index.html.heex        |  22 --
 .../media_sources/source_controller.ex        |   8 +-
 .../media_sources/source_html/edit.html.heex  |  28 ++-
 .../media_sources/source_html/index.html.heex |  66 ++++--
 .../media_sources/source_html/new.html.heex   |  24 +-
 .../media_sources/source_html/show.html.heex  |  53 +++--
 .../source_html/source_form.html.heex         |  21 +-
 lib/pinchflat_web/router.ex                   |   5 +-
 .../controllers/source_controller_test.exs    |  32 +--
 18 files changed, 370 insertions(+), 247 deletions(-)
 create mode 100644 lib/pinchflat_web/components/custom_components/button_components.ex
 create mode 100644 lib/pinchflat_web/components/custom_components/table_components.ex

diff --git a/assets/css/satoshi.css b/assets/css/satoshi.css
index da755ca..272640a 100644
--- a/assets/css/satoshi.css
+++ b/assets/css/satoshi.css
@@ -22,9 +22,7 @@
 
 @font-face {
   font-family: 'Satoshi';
-  src:
-    url('/fonts/satoshi/Satoshi-Light.woff2'),
-    url('/fonts/satoshi/Satoshi-Light.woff'),
+  src: url('/fonts/satoshi/Satoshi-Light.woff2'), url('/fonts/satoshi/Satoshi-Light.woff'),
     url('/fonts/satoshi/Satoshi-Light.ttf');
   font-weight: 300;
   font-display: swap;
@@ -33,10 +31,8 @@
 
 @font-face {
   font-family: 'Satoshi';
-  src:
-    url('/fonts/satoshi/Satoshi-LightItalic.woff2'),
-    url('/fonts/satoshi/Satoshi-LightItalic.woff'),
-    url('/fonts/satoshi/Satoshi-LightItalic.ttf');
+  src: url('/fonts/satoshi/Satoshi-LightItalic.woff2'),
+    url('/fonts/satoshi/Satoshi-LightItalic.woff'), url('/fonts/satoshi/Satoshi-LightItalic.ttf');
   font-weight: 300;
   font-display: swap;
   font-style: italic;
@@ -44,9 +40,7 @@
 
 @font-face {
   font-family: 'Satoshi';
-  src:
-    url('/fonts/satoshi/Satoshi-Regular.woff2'),
-    url('/fonts/satoshi/Satoshi-Regular.woff'),
+  src: url('/fonts/satoshi/Satoshi-Regular.woff2'), url('/fonts/satoshi/Satoshi-Regular.woff'),
     url('/fonts/satoshi/Satoshi-Regular.ttf');
   font-weight: 400;
   font-display: swap;
@@ -55,9 +49,7 @@
 
 @font-face {
   font-family: 'Satoshi';
-  src:
-    url('/fonts/satoshi/Satoshi-Italic.woff2'),
-    url('/fonts/satoshi/Satoshi-Italic.woff'),
+  src: url('/fonts/satoshi/Satoshi-Italic.woff2'), url('/fonts/satoshi/Satoshi-Italic.woff'),
     url('/fonts/satoshi/Satoshi-Italic.ttf');
   font-weight: 400;
   font-display: swap;
@@ -66,9 +58,7 @@
 
 @font-face {
   font-family: 'Satoshi';
-  src:
-    url('/fonts/satoshi/Satoshi-Medium.woff2'),
-    url('/fonts/satoshi/Satoshi-Medium.woff'),
+  src: url('/fonts/satoshi/Satoshi-Medium.woff2'), url('/fonts/satoshi/Satoshi-Medium.woff'),
     url('/fonts/satoshi/Satoshi-Medium.ttf');
   font-weight: 500;
   font-display: swap;
@@ -77,10 +67,8 @@
 
 @font-face {
   font-family: 'Satoshi';
-  src:
-    url('/fonts/satoshi/Satoshi-MediumItalic.woff2'),
-    url('/fonts/satoshi/Satoshi-MediumItalic.woff'),
-    url('/fonts/satoshi/Satoshi-MediumItalic.ttf');
+  src: url('/fonts/satoshi/Satoshi-MediumItalic.woff2'),
+    url('/fonts/satoshi/Satoshi-MediumItalic.woff'), url('/fonts/satoshi/Satoshi-MediumItalic.ttf');
   font-weight: 500;
   font-display: swap;
   font-style: italic;
@@ -88,9 +76,7 @@
 
 @font-face {
   font-family: 'Satoshi';
-  src:
-    url('/fonts/satoshi/Satoshi-Bold.woff2'),
-    url('/fonts/satoshi/Satoshi-Bold.woff'),
+  src: url('/fonts/satoshi/Satoshi-Bold.woff2'), url('/fonts/satoshi/Satoshi-Bold.woff'),
     url('/fonts/satoshi/Satoshi-Bold.ttf');
   font-weight: 700;
   font-display: swap;
@@ -99,9 +85,7 @@
 
 @font-face {
   font-family: 'Satoshi';
-  src:
-    url('/fonts/satoshi/Satoshi-BoldItalic.woff2'),
-    url('/fonts/satoshi/Satoshi-BoldItalic.woff'),
+  src: url('/fonts/satoshi/Satoshi-BoldItalic.woff2'), url('/fonts/satoshi/Satoshi-BoldItalic.woff'),
     url('/fonts/satoshi/Satoshi-BoldItalic.ttf');
   font-weight: 700;
   font-display: swap;
@@ -110,10 +94,8 @@
 
 @font-face {
   font-family: 'Satoshi';
-  src:
-    url('/fonts/satoshi/Satoshi-BlackItalic.woff2'),
-    url('/fonts/satoshi/Satoshi-BlackItalic.woff'),
-    url('/fonts/satoshi/Satoshi-BlackItalic.ttf');
+  src: url('/fonts/satoshi/Satoshi-BlackItalic.woff2'),
+    url('/fonts/satoshi/Satoshi-BlackItalic.woff'), url('/fonts/satoshi/Satoshi-BlackItalic.ttf');
   font-weight: 900;
   font-display: swap;
   font-style: italic;
diff --git a/lib/pinchflat_web.ex b/lib/pinchflat_web.ex
index 036a9b1..05187a1 100644
--- a/lib/pinchflat_web.ex
+++ b/lib/pinchflat_web.ex
@@ -84,8 +84,10 @@ defmodule PinchflatWeb do
       # HTML escaping functionality
       import Phoenix.HTML
       # Core UI components and translation
-      import PinchflatWeb.CoreComponents
       import PinchflatWeb.Gettext
+      import PinchflatWeb.CoreComponents
+      import PinchflatWeb.CustomComponents.TableComponents
+      import PinchflatWeb.CustomComponents.ButtonComponents
 
       # Shortcut for generating JS commands
       alias Phoenix.LiveView.JS
diff --git a/lib/pinchflat_web/components/core_components.ex b/lib/pinchflat_web/components/core_components.ex
index 6f80c9f..cc65540 100644
--- a/lib/pinchflat_web/components/core_components.ex
+++ b/lib/pinchflat_web/components/core_components.ex
@@ -201,46 +201,14 @@ defmodule PinchflatWeb.CoreComponents do
   def simple_form(assigns) do
     ~H"""
     <.form :let={f} for={@for} as={@as} {@rest}>
-      <div class="mt-10 space-y-8 bg-white">
-        <%= render_slot(@inner_block, f) %>
-        <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
-          <%= render_slot(action, f) %>
-        </div>
+      <%= render_slot(@inner_block, f) %>
+      <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
+        <%= render_slot(action, f) %>
       </div>
     </.form>
     """
   end
 
-  @doc """
-  Renders a button.
-
-  ## Examples
-
-      <.button>Send!</.button>
-      <.button phx-click="go" class="ml-2">Send!</.button>
-  """
-  attr :type, :string, default: nil
-  attr :class, :string, default: nil
-  attr :rest, :global, include: ~w(disabled form name value)
-
-  slot :inner_block, required: true
-
-  def button(assigns) do
-    ~H"""
-    <button
-      type={@type}
-      class={[
-        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
-        "text-sm font-semibold leading-6 text-white active:text-white/80",
-        @class
-      ]}
-      {@rest}
-    >
-      <%= render_slot(@inner_block) %>
-    </button>
-    """
-  end
-
   @doc """
   Renders an input with label and error messages.
 
@@ -270,11 +238,12 @@ defmodule PinchflatWeb.CoreComponents do
   attr :name, :any
   attr :label, :string, default: nil
   attr :value, :any
+  attr :help, :string, default: nil
 
   attr :type, :string,
     default: "text",
     values: ~w(checkbox color date datetime-local email file hidden month number password
-               range radio search select tel text textarea time url week)
+               toggle range radio search select tel text textarea time url week)
 
   attr :field, Phoenix.HTML.FormField,
     doc: "a form field struct retrieved from the form, for example: @form[:email]"
@@ -308,7 +277,7 @@ defmodule PinchflatWeb.CoreComponents do
 
     ~H"""
     <div phx-feedback-for={@name}>
-      <label class="flex items-center gap-4 text-sm leading-6 text-zinc-600">
+      <label class="flex items-center gap-4 text-sm leading-6">
         <input type="hidden" name={@name} value="false" />
         <input
           type="checkbox"
@@ -316,16 +285,54 @@ defmodule PinchflatWeb.CoreComponents do
           name={@name}
           value="true"
           checked={@checked}
-          class="rounded border-zinc-300 text-zinc-900 focus:ring-0"
+          class="rounded focus:ring-0"
           {@rest}
         />
         <%= @label %>
       </label>
+      <.help :if={@help}><%= @help %></.help>
       <.error :for={msg <- @errors}><%= msg %></.error>
     </div>
     """
   end
 
+  def input(%{type: "toggle"} = assigns) do
+    assigns =
+      assign_new(assigns, :checked, fn ->
+        Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value])
+      end)
+
+    ~H"""
+    <div x-data={"{ enabled: #{@checked}}"}>
+      <.label for={@id}><%= @label %></.label>
+      <div class="relative">
+        <input type="hidden" name={@name} value="false" />
+        <input
+          type="checkbox"
+          id={@id}
+          name={@name}
+          value="true"
+          x-bind:checked="enabled"
+          class="sr-only"
+          @change="enabled = !enabled"
+          {@rest}
+        />
+        <div class="inline-block cursor-pointer" @click="enabled = !enabled">
+          <div x-bind:class="enabled && '!bg-primary'" class="block h-8 w-14 rounded-full bg-black">
+          </div>
+          <div
+            x-bind:class="enabled && '!right-1 !translate-x-full'"
+            class="absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition"
+          >
+          </div>
+        </div>
+        <.help :if={@help}><%= @help %></.help>
+        <.error :for={msg <- @errors}><%= msg %></.error>
+      </div>
+    </div>
+    """
+  end
+
   def input(%{type: "select"} = assigns) do
     ~H"""
     <div phx-feedback-for={@name}>
@@ -333,13 +340,17 @@ defmodule PinchflatWeb.CoreComponents do
       <select
         id={@id}
         name={@name}
-        class="mt-2 block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
+        class={[
+          "relative z-20 w-full appearance-none rounded border border-stroke bg-transparent py-3 pl-5 pr-12 outline-none transition",
+          "focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input text-black dark:text-white"
+        ]}
         multiple={@multiple}
         {@rest}
       >
         <option :if={@prompt} value=""><%= @prompt %></option>
         <%= Phoenix.HTML.Form.options_for_select(@options, @value) %>
       </select>
+      <.help :if={@help}><%= @help %></.help>
       <.error :for={msg <- @errors}><%= msg %></.error>
     </div>
     """
@@ -360,6 +371,7 @@ defmodule PinchflatWeb.CoreComponents do
         ]}
         {@rest}
       ><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
+      <.help :if={@help}><%= @help %></.help>
       <.error :for={msg <- @errors}><%= msg %></.error>
     </div>
     """
@@ -376,18 +388,32 @@ defmodule PinchflatWeb.CoreComponents do
         id={@id}
         value={Phoenix.HTML.Form.normalize_value(@type, @value)}
         class={[
-          "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
-          "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
-          @errors == [] && "border-zinc-300 focus:border-zinc-400",
+          "w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black",
+          "outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter",
+          "dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary",
           @errors != [] && "border-rose-400 focus:border-rose-400"
         ]}
         {@rest}
       />
+      <.help :if={@help}><%= @help %></.help>
       <.error :for={msg <- @errors}><%= msg %></.error>
     </div>
     """
   end
 
+  @doc """
+  Renders help text.
+  """
+  slot :inner_block, required: true
+
+  def help(assigns) do
+    ~H"""
+    <p class="mt-1 text-sm leading-5">
+      <%= render_slot(@inner_block) %>
+    </p>
+    """
+  end
+
   @doc """
   Renders a label.
   """
@@ -396,7 +422,7 @@ defmodule PinchflatWeb.CoreComponents do
 
   def label(assigns) do
     ~H"""
-    <label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800">
+    <label for={@for} class="mt-5 mb-2 block text-md font-medium text-black dark:text-white">
       <%= render_slot(@inner_block) %>
     </label>
     """
@@ -409,7 +435,7 @@ defmodule PinchflatWeb.CoreComponents do
 
   def error(assigns) do
     ~H"""
-    <p class="mt-3 flex gap-3 text-sm leading-6 text-rose-600 phx-no-feedback:hidden">
+    <p class="mt-1 mb-5 flex gap-3 text-md leading-6 text-rose-600 phx-no-feedback:hidden">
       <.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" />
       <%= render_slot(@inner_block) %>
     </p>
@@ -446,10 +472,10 @@ defmodule PinchflatWeb.CoreComponents do
 
   ## Examples
 
-      <.table id="users" rows={@users}>
+      <.old_table id="users" rows={@users}>
         <:col :let={user} label="id"><%= user.id %></:col>
         <:col :let={user} label="username"><%= user.username %></:col>
-      </.table>
+      </.old_table>
   """
   attr :id, :string, required: true
   attr :rows, :list, required: true
@@ -466,56 +492,54 @@ defmodule PinchflatWeb.CoreComponents do
 
   slot :action, doc: "the slot for showing user actions in the last table column"
 
-  def table(assigns) do
+  def old_table(assigns) do
     assigns =
       with %{rows: %Phoenix.LiveView.LiveStream{}} <- assigns do
         assign(assigns, row_id: assigns.row_id || fn {id, _item} -> id end)
       end
 
     ~H"""
-    <div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0">
-      <table class="w-[40rem] mt-11 sm:w-full">
-        <thead class="text-sm text-left leading-6 text-zinc-500">
-          <tr>
-            <th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th>
-            <th :if={@action != []} class="relative p-0 pb-4">
-              <span class="sr-only"><%= gettext("Actions") %></span>
-            </th>
-          </tr>
-        </thead>
-        <tbody
-          id={@id}
-          phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
-          class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-zinc-700"
-        >
-          <tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50">
-            <td
-              :for={{col, i} <- Enum.with_index(@col)}
-              phx-click={@row_click && @row_click.(row)}
-              class={["relative p-0", @row_click && "hover:cursor-pointer"]}
-            >
-              <div class="block py-4 pr-6">
-                <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
-                <span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
-                  <%= render_slot(col, @row_item.(row)) %>
-                </span>
-              </div>
-            </td>
-            <td :if={@action != []} class="relative w-14 p-0">
-              <div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">
-                <span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-zinc-50 sm:rounded-r-xl" />
-                <span
-                  :for={action <- @action}
-                  class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
-                >
-                  <%= render_slot(action, @row_item.(row)) %>
-                </span>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+    <table class="w-[40rem] mt-11 sm:w-full">
+      <thead class="text-sm text-left leading-6 text-zinc-500">
+        <tr>
+          <th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th>
+          <th :if={@action != []} class="relative p-0 pb-4">
+            <span class="sr-only"><%= gettext("Actions") %></span>
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        id={@id}
+        phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
+        class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-zinc-700"
+      >
+        <tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50">
+          <td
+            :for={{col, i} <- Enum.with_index(@col)}
+            phx-click={@row_click && @row_click.(row)}
+            class={["relative p-0", @row_click && "hover:cursor-pointer"]}
+          >
+            <div class="block py-4 pr-6">
+              <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
+              <span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
+                <%= render_slot(col, @row_item.(row)) %>
+              </span>
+            </div>
+          </td>
+          <td :if={@action != []} class="relative w-14 p-0">
+            <div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">
+              <span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-zinc-50 sm:rounded-r-xl" />
+              <span
+                :for={action <- @action}
+                class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
+              >
+                <%= render_slot(action, @row_item.(row)) %>
+              </span>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
     """
   end
 
@@ -536,10 +560,10 @@ defmodule PinchflatWeb.CoreComponents do
   def list(assigns) do
     ~H"""
     <div class="mt-2 mb-14">
-      <dl class="-my-4 divide-y divide-zinc-100">
+      <dl class="-my-4 divide-y dark:divide-strokedark">
         <div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
-          <dt class="w-1/4 flex-none text-zinc-500"><%= item.title %></dt>
-          <dd class="text-zinc-700"><%= render_slot(item) %></dd>
+          <dt class="w-1/4 flex-none dark:text-white"><%= item.title %></dt>
+          <dd class="dark:text-white"><%= render_slot(item) %></dd>
         </div>
       </dl>
     </div>
diff --git a/lib/pinchflat_web/components/custom_components/button_components.ex b/lib/pinchflat_web/components/custom_components/button_components.ex
new file mode 100644
index 0000000..5949ae0
--- /dev/null
+++ b/lib/pinchflat_web/components/custom_components/button_components.ex
@@ -0,0 +1,33 @@
+defmodule PinchflatWeb.CustomComponents.ButtonComponents do
+  @moduledoc false
+  use Phoenix.Component
+
+  @doc """
+  Render a button
+
+  ## Examples
+
+      <.button color="bg-primary" rounding="rounded-sm">
+        <span>Click me</span>
+      </.button>
+  """
+  attr :color, :string, default: "bg-primary"
+  attr :rounding, :string, default: "rounded-sm"
+  attr :class, :string, default: ""
+
+  slot :inner_block, required: true
+
+  def button(assigns) do
+    ~H"""
+    <button class={[
+      "text-center font-medium text-white",
+      "#{@rounding} inline-flex items-center justify-center px-10 py-4",
+      "#{@color}",
+      "hover:bg-opacity-90 lg:px-8 xl:px-10",
+      @class
+    ]}>
+      <%= render_slot(@inner_block) %>
+    </button>
+    """
+  end
+end
diff --git a/lib/pinchflat_web/components/custom_components/table_components.ex b/lib/pinchflat_web/components/custom_components/table_components.ex
new file mode 100644
index 0000000..fbe897c
--- /dev/null
+++ b/lib/pinchflat_web/components/custom_components/table_components.ex
@@ -0,0 +1,53 @@
+defmodule PinchflatWeb.CustomComponents.TableComponents do
+  @moduledoc false
+  use Phoenix.Component
+
+  @doc """
+  Renders a table component with the given rows and columns.
+
+  ## Examples
+
+      <.table rows={@users}>
+        <:col :let={user} label="Name"><%= user.name %></:col>
+      </.table>
+  """
+  attr :rows, :list, required: true
+  attr :table_class, :string, default: ""
+
+  attr :row_item, :any,
+    default: &Function.identity/1,
+    doc: "the function for mapping each row before calling the :col and :action slots"
+
+  slot :col, required: true do
+    attr :label, :string
+    attr :class, :string
+  end
+
+  def table(assigns) do
+    ~H"""
+    <table class={["w-full table-auto", @table_class]}>
+      <thead>
+        <tr class="bg-gray-2 text-left dark:bg-meta-4">
+          <th :for={col <- @col} class="px-4 py-4 font-medium text-black dark:text-white xl:pl-11">
+            <%= col[:label] %>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr :for={{row, i} <- Enum.with_index(@rows)}>
+          <td
+            :for={col <- @col}
+            class={[
+              "px-4 py-5 pl-9 dark:border-strokedark xl:pl-11",
+              i + 1 > length(@rows) && "border-b border-[#eee] dark:border-π",
+              col[:class]
+            ]}
+          >
+            <%= render_slot(col, @row_item.(row)) %>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    """
+  end
+end
diff --git a/lib/pinchflat_web/components/layouts.ex b/lib/pinchflat_web/components/layouts.ex
index c2aeff1..42172ec 100644
--- a/lib/pinchflat_web/components/layouts.ex
+++ b/lib/pinchflat_web/components/layouts.ex
@@ -9,7 +9,7 @@ defmodule PinchflatWeb.Layouts do
   attr :navigate, :any, required: true
 
   def sidebar_item(assigns) do
-    # I'm testing out grouping classes here. Tentative order: font, layout, animation, state-modifiers
+    # I'm testing out grouping classes here. Tentative order: font, layout, color, animation, state-modifiers
     ~H"""
     <li>
       <.link
diff --git a/lib/pinchflat_web/components/layouts/app.html.heex b/lib/pinchflat_web/components/layouts/app.html.heex
index e6bbc13..a582e8c 100644
--- a/lib/pinchflat_web/components/layouts/app.html.heex
+++ b/lib/pinchflat_web/components/layouts/app.html.heex
@@ -5,8 +5,8 @@
     <.header />
     <main>
       <div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
-        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 xl:grid-cols-4 2xl:gap-7.5">
-        </div>
+        <.flash_group flash={@flash} />
+        <%= @inner_content %>
       </div>
     </main>
   </div>
diff --git a/lib/pinchflat_web/components/layouts/partials/sidebar.html.heex b/lib/pinchflat_web/components/layouts/partials/sidebar.html.heex
index db2cd6c..8f27e76 100644
--- a/lib/pinchflat_web/components/layouts/partials/sidebar.html.heex
+++ b/lib/pinchflat_web/components/layouts/partials/sidebar.html.heex
@@ -15,7 +15,7 @@
       <div>
         <h3 class="mb-4 ml-4 text-sm font-medium text-bodydark2">MENU</h3>
         <ul class="mb-6 flex flex-col gap-1.5">
-          <.sidebar_item icon="hero-tv" text="Sources" navigate={~p"/media_sources/sources"} />
+          <.sidebar_item icon="hero-tv" text="Sources" navigate={~p"/sources"} />
 
           <.sidebar_item
             icon="hero-adjustments-vertical"
diff --git a/lib/pinchflat_web/components/layouts/root.html.heex b/lib/pinchflat_web/components/layouts/root.html.heex
index 680f70d..781ede5 100644
--- a/lib/pinchflat_web/components/layouts/root.html.heex
+++ b/lib/pinchflat_web/components/layouts/root.html.heex
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="[scrollbar-gutter:stable]">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -11,11 +11,7 @@
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
   </head>
-  <body
-    x-data="{ 'darkMode': true, 'sidebarToggle': false }"
-    x-init="darkMode = true;"
-    x-bind:class="{'dark text-bodydark bg-boxdark-2': darkMode === true}"
-  >
+  <body x-data="{ 'sidebarToggle': false }" class="dark text-bodydark bg-boxdark-2">
     <%= @inner_content %>
   </body>
 </html>
diff --git a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex
index 03aecb3..708efba 100644
--- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex
+++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex
@@ -6,25 +6,3 @@
     </.link>
   </:actions>
 </.old_header>
-
-<.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>
-    <.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>
diff --git a/lib/pinchflat_web/controllers/media_sources/source_controller.ex b/lib/pinchflat_web/controllers/media_sources/source_controller.ex
index 5061e34..63f4cbe 100644
--- a/lib/pinchflat_web/controllers/media_sources/source_controller.ex
+++ b/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
diff --git a/lib/pinchflat_web/controllers/media_sources/source_html/edit.html.heex b/lib/pinchflat_web/controllers/media_sources/source_html/edit.html.heex
index e435f65..9286ec3 100644
--- a/lib/pinchflat_web/controllers/media_sources/source_html/edit.html.heex
+++ b/lib/pinchflat_web/controllers/media_sources/source_html/edit.html.heex
@@ -1,12 +1,18 @@
-<.old_header>
-  Edit Source <%= @source.id %>
-  <:subtitle>Use this form to manage source records in your database.</:subtitle>
-</.old_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>
diff --git a/lib/pinchflat_web/controllers/media_sources/source_html/index.html.heex b/lib/pinchflat_web/controllers/media_sources/source_html/index.html.heex
index 1116f09..8b74117 100644
--- a/lib/pinchflat_web/controllers/media_sources/source_html/index.html.heex
+++ b/lib/pinchflat_web/controllers/media_sources/source_html/index.html.heex
@@ -1,24 +1,48 @@
-<.old_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>
-</.old_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>
diff --git a/lib/pinchflat_web/controllers/media_sources/source_html/new.html.heex b/lib/pinchflat_web/controllers/media_sources/source_html/new.html.heex
index f2d092c..6bd86c1 100644
--- a/lib/pinchflat_web/controllers/media_sources/source_html/new.html.heex
+++ b/lib/pinchflat_web/controllers/media_sources/source_html/new.html.heex
@@ -1,12 +1,14 @@
-<.old_header>
-  New Source
-  <:subtitle>Use this form to manage source records in your database.</:subtitle>
-</.old_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>
diff --git a/lib/pinchflat_web/controllers/media_sources/source_html/show.html.heex b/lib/pinchflat_web/controllers/media_sources/source_html/show.html.heex
index ae6db73..1d947d5 100644
--- a/lib/pinchflat_web/controllers/media_sources/source_html/show.html.heex
+++ b/lib/pinchflat_web/controllers/media_sources/source_html/show.html.heex
@@ -1,23 +1,38 @@
-<.old_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>
-</.old_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>
diff --git a/lib/pinchflat_web/controllers/media_sources/source_html/source_form.html.heex b/lib/pinchflat_web/controllers/media_sources/source_html/source_form.html.heex
index a070a84..4cc1499 100644
--- a/lib/pinchflat_web/controllers/media_sources/source_html/source_form.html.heex
+++ b/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>
diff --git a/lib/pinchflat_web/router.ex b/lib/pinchflat_web/router.ex
index fd06da3..3610003 100644
--- a/lib/pinchflat_web/router.ex
+++ b/lib/pinchflat_web/router.ex
@@ -20,10 +20,7 @@ defmodule PinchflatWeb.Router do
     get "/", PageController, :home
 
     resources "/media_profiles", MediaProfiles.MediaProfileController
-
-    scope "/media_sources", MediaSources do
-      resources "/sources", SourceController
-    end
+    resources "/sources", MediaSources.SourceController
   end
 
   # Other scopes may use custom stacks.
diff --git a/test/pinchflat_web/controllers/source_controller_test.exs b/test/pinchflat_web/controllers/source_controller_test.exs
index 39cb9d8..9f3e2bd 100644
--- a/test/pinchflat_web/controllers/source_controller_test.exs
+++ b/test/pinchflat_web/controllers/source_controller_test.exs
@@ -28,14 +28,14 @@ defmodule PinchflatWeb.SourceControllerTest do
 
   describe "index" do
     test "lists all sources", %{conn: conn} do
-      conn = get(conn, ~p"/media_sources/sources")
-      assert html_response(conn, 200) =~ "Listing Sources"
+      conn = get(conn, ~p"/sources")
+      assert html_response(conn, 200) =~ "All Sources"
     end
   end
 
   describe "new source" do
     test "renders form", %{conn: conn} do
-      conn = get(conn, ~p"/media_sources/sources/new")
+      conn = get(conn, ~p"/sources/new")
       assert html_response(conn, 200) =~ "New Source"
     end
   end
@@ -43,17 +43,17 @@ defmodule PinchflatWeb.SourceControllerTest do
   describe "create source" do
     test "redirects to show when data is valid", %{conn: conn, create_attrs: create_attrs} do
       expect(YtDlpRunnerMock, :run, 1, &runner_function_mock/3)
-      conn = post(conn, ~p"/media_sources/sources", source: create_attrs)
+      conn = post(conn, ~p"/sources", source: create_attrs)
 
       assert %{id: id} = redirected_params(conn)
-      assert redirected_to(conn) == ~p"/media_sources/sources/#{id}"
+      assert redirected_to(conn) == ~p"/sources/#{id}"
 
-      conn = get(conn, ~p"/media_sources/sources/#{id}")
-      assert html_response(conn, 200) =~ "Source #{id}"
+      conn = get(conn, ~p"/sources/#{id}")
+      assert html_response(conn, 200) =~ "Source ##{id}"
     end
 
     test "renders errors when data is invalid", %{conn: conn, invalid_attrs: invalid_attrs} do
-      conn = post(conn, ~p"/media_sources/sources", source: invalid_attrs)
+      conn = post(conn, ~p"/sources", source: invalid_attrs)
       assert html_response(conn, 200) =~ "New Source"
     end
   end
@@ -62,7 +62,7 @@ defmodule PinchflatWeb.SourceControllerTest do
     setup [:create_source]
 
     test "renders form for editing chosen source", %{conn: conn, source: source} do
-      conn = get(conn, ~p"/media_sources/sources/#{source}/edit")
+      conn = get(conn, ~p"/sources/#{source}/edit")
       assert html_response(conn, 200) =~ "Edit Source"
     end
   end
@@ -73,10 +73,10 @@ defmodule PinchflatWeb.SourceControllerTest do
     test "redirects when data is valid", %{conn: conn, source: source, update_attrs: update_attrs} do
       expect(YtDlpRunnerMock, :run, 1, &runner_function_mock/3)
 
-      conn = put(conn, ~p"/media_sources/sources/#{source}", source: update_attrs)
-      assert redirected_to(conn) == ~p"/media_sources/sources/#{source}"
+      conn = put(conn, ~p"/sources/#{source}", source: update_attrs)
+      assert redirected_to(conn) == ~p"/sources/#{source}"
 
-      conn = get(conn, ~p"/media_sources/sources/#{source}")
+      conn = get(conn, ~p"/sources/#{source}")
       assert html_response(conn, 200) =~ "https://www.youtube.com/source/321xyz"
     end
 
@@ -85,7 +85,7 @@ defmodule PinchflatWeb.SourceControllerTest do
       source: source,
       invalid_attrs: invalid_attrs
     } do
-      conn = put(conn, ~p"/media_sources/sources/#{source}", source: invalid_attrs)
+      conn = put(conn, ~p"/sources/#{source}", source: invalid_attrs)
       assert html_response(conn, 200) =~ "Edit Source"
     end
   end
@@ -94,11 +94,11 @@ defmodule PinchflatWeb.SourceControllerTest do
     setup [:create_source]
 
     test "deletes chosen source", %{conn: conn, source: source} do
-      conn = delete(conn, ~p"/media_sources/sources/#{source}")
-      assert redirected_to(conn) == ~p"/media_sources/sources"
+      conn = delete(conn, ~p"/sources/#{source}")
+      assert redirected_to(conn) == ~p"/sources"
 
       assert_error_sent 404, fn ->
-        get(conn, ~p"/media_sources/sources/#{source}")
+        get(conn, ~p"/sources/#{source}")
       end
     end
   end