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/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>
@@ -425,7 +451,7 @@ defmodule PinchflatWeb.CoreComponents do
   slot :subtitle
   slot :actions
 
-  def header(assigns) do
+  def old_header(assigns) do
     ~H"""
     <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
       <div>
@@ -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>

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

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

lib/pinchflat_web/components/layouts.ex

@@ -2,4 +2,28 @@ defmodule PinchflatWeb.Layouts do
   use PinchflatWeb, :html
 
   embed_templates "layouts/*"
+  embed_templates "layouts/partials/*"
+
+  attr :icon, :string, required: true
+  attr :text, :string, required: true
+  attr :navigate, :any, required: true
+
+  def sidebar_item(assigns) do
+    # I'm testing out grouping classes here. Tentative order: font, layout, color, animation, state-modifiers
+    ~H"""
+    <li>
+      <.link
+        navigate={@navigate}
+        class={[
+          "font-medium text-bodydark1",
+          "group relative flex items-center gap-2.5 rounded-sm px-4 py-2 duration-300 ease-in-out",
+          "duration-300 ease-in-out",
+          "hover:bg-graydark dark:hover:bg-meta-4"
+        ]}
+      >
+        <.icon name={@icon} /> <%= @text %>
+      </.link>
+    </li>
+    """
+  end
 end

lib/pinchflat_web/components/layouts/app.html.heex

@@ -1,32 +1,13 @@
-<header class="px-4 sm:px-6 lg:px-8">
-  <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
-    <div class="flex items-center gap-4">
-      <a href="/">
-        <img src={~p"/images/logo.svg"} width="36" />
-      </a>
-      <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
-        v<%= Application.spec(:phoenix, :vsn) %>
-      </p>
-    </div>
-    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
-      <a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
-        @elixirphoenix
-      </a>
-      <a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
-        GitHub
-      </a>
-      <a
-        href="https://hexdocs.pm/phoenix/overview.html"
-        class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
-      >
-        Get Started <span aria-hidden="true">&rarr;</span>
-      </a>
-    </div>
+<div class="flex h-screen overflow-hidden">
+  <.sidebar />
+
+  <div class="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
+    <.header />
+    <main>
+      <div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
+        <.flash_group flash={@flash} />
+        <%= @inner_content %>
+      </div>
+    </main>
   </div>
-</header>
-<main class="px-4 py-20 sm:px-6 lg:px-8">
-  <div class="mx-auto max-w-2xl">
-    <.flash_group flash={@flash} />
-    <%= @inner_content %>
-  </div>
-</main>
+</div>

lib/pinchflat_web/components/layouts/partials/header.html.heex

@@ -0,0 +1,29 @@
+<header class="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
+  <div class="flex flex-grow items-center justify-end px-4 py-4 shadow-2 md:px-6 2xl:px-11">
+    <div class="flex items-center gap-2 sm:gap-4 lg:hidden">
+      <button
+        class="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
+        @click.stop="sidebarToggle = !sidebarToggle"
+      >
+        <.icon name="hero-bars-3" />
+      </button>
+      <a class="block flex-shrink-0 lg:hidden" href="#">
+        <h2 class="text-title-md2 font-bold text-white">Pinchflat</h2>
+      </a>
+    </div>
+    <div class="hidden sm:block bg-meta-4 rounded-md">
+      <%!-- Aspirational (for now) --%>
+      <div class="relative">
+        <span class="absolute left-2 top-1/2 -translate-y-1/2 flex">
+          <.icon name="hero-magnifying-glass" />
+        </span>
+
+        <input
+          type="text"
+          placeholder="Type to search..."
+          class="w-full bg-transparent pl-9 pr-4 border-0 focus:ring-0 focus:outline-none xl:w-125"
+        />
+      </div>
+    </div>
+  </div>
+</header>

lib/pinchflat_web/components/layouts/partials/sidebar.html.heex

@@ -0,0 +1,29 @@
+<aside
+  x-bind:class="sidebarToggle ? 'translate-x-0' : '-translate-x-full'"
+  class="absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-black duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0"
+  @click.outside="sidebarToggle = false"
+>
+  <div class="flex items-center justify-between gap-2 px-6 py-5.5 lg:py-6.5">
+    <h2 class="text-title-md2 font-bold text-white">Pinchflat</h2>
+
+    <button class="block lg:hidden" @click.stop="sidebarToggle = !sidebarToggle">
+      <.icon name="hero-arrow-left" class="fill-current" />
+    </button>
+  </div>
+  <div class="no-scrollbar flex flex-col overflow-y-auto duration-300 ease-linear">
+    <nav class="mt-5 px-4 py-4 lg:mt-9 lg:px-6">
+      <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"/sources"} />
+
+          <.sidebar_item
+            icon="hero-adjustments-vertical"
+            text="Media Profiles"
+            navigate={~p"/media_profiles"}
+          />
+        </ul>
+      </div>
+    </nav>
+  </div>
+</aside>

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,7 +11,7 @@
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
   </head>
-  <body class="bg-white antialiased">
+  <body x-data="{ 'sidebarToggle': false }" class="dark text-bodydark bg-boxdark-2">
     <%= @inner_content %>
   </body>
 </html>