From 626a7bc305007989adce697c630d0fbd5b3d0f36 Mon Sep 17 00:00:00 2001
From: Chris McCord <chris@chrismccord.com>
Date: Fri, 13 May 2022 14:52:19 -0400
Subject: [PATCH] WIP

---
 assets/tailwind.config.js               |   1 +
 lib/live_beats_web/live/live_helpers.ex | 294 +++++++++++++++---------
 lib/live_beats_web/views/layout_view.ex |   3 +-
 mix.exs                                 |   5 +-
 mix.lock                                |   4 +-
 5 files changed, 199 insertions(+), 108 deletions(-)

diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index 4c5a135..9d40011 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -1,5 +1,6 @@
 // See the Tailwind configuration guide for advanced usage
 // https://tailwindcss.com/docs/configuration
+
 module.exports = {
   content: [
     './js/**/*.js',
diff --git a/lib/live_beats_web/live/live_helpers.ex b/lib/live_beats_web/live/live_helpers.ex
index 2dc8eb5..e957d79 100644
--- a/lib/live_beats_web/live/live_helpers.ex
+++ b/lib/live_beats_web/live/live_helpers.ex
@@ -1,6 +1,5 @@
 defmodule LiveBeatsWeb.LiveHelpers do
-  import Phoenix.LiveView
-  import Phoenix.LiveView.Helpers
+  use Phoenix.Component
 
   alias LiveBeatsWeb.Router.Helpers, as: Routes
   alias Phoenix.LiveView.JS
@@ -35,9 +34,21 @@ defmodule LiveBeatsWeb.LiveHelpers do
     >
       <div class="flex">
         <div class="flex-shrink-0">
-          <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-red-800" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          <svg
+            class="animate-spin -ml-1 mr-3 h-5 w-5 text-red-800"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
+            </circle>
+            <path
+              class="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            >
+            </path>
           </svg>
         </div>
         <div class="ml-3">
@@ -50,21 +61,30 @@ defmodule LiveBeatsWeb.LiveHelpers do
     """
   end
 
+  attr :flash, :map
+  attr :kiny, :atom
   def flash(%{kind: :error} = assigns) do
     ~H"""
     <%= if live_flash(@flash, @kind) do %>
       <div
         id="flash"
         class="rounded-md bg-red-50 p-4 fixed top-1 right-1 w-96 fade-in-scale z-50"
-        phx-click={JS.push("lv:clear-flash") |> JS.remove_class("fade-in-scale", to: "#flash") |> hide("#flash")}
+        phx-click={
+          JS.push("lv:clear-flash")
+          |> JS.remove_class("fade-in-scale", to: "#flash")
+          |> hide("#flash")
+        }
         phx-hook="Flash"
       >
         <div class="flex justify-between items-center space-x-3 text-red-700">
-          <.icon name={:exclamation_circle} class="w-5 w-5"/>
+          <.icon name={:exclamation_circle} class="w-5 w-5" />
           <p class="flex-1 text-sm font-medium" role="alert">
             <%= live_flash(@flash, @kind) %>
           </p>
-          <button type="button" class="inline-flex bg-red-50 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600">
+          <button
+            type="button"
+            class="inline-flex bg-red-50 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600"
+          >
             <.icon name={:x} class="w-4 h-4" />
           </button>
         </div>
@@ -84,11 +104,14 @@ defmodule LiveBeatsWeb.LiveHelpers do
         phx-hook="Flash"
       >
         <div class="flex justify-between items-center space-x-3 text-green-700">
-          <.icon name={:check_circle} class="w-5 h-5"/>
+          <.icon name={:check_circle} class="w-5 h-5" />
           <p class="flex-1 text-sm font-medium" role="alert">
             <%= live_flash(@flash, @kind) %>
           </p>
-          <button type="button" class="inline-flex bg-green-50 rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600">
+          <button
+            type="button"
+            class="inline-flex bg-green-50 rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600"
+          >
             <.icon name={:x} class="w-4 h-4" />
           </button>
         </div>
@@ -99,54 +122,73 @@ defmodule LiveBeatsWeb.LiveHelpers do
 
   def spinner(assigns) do
     ~H"""
-    <svg class="inline-block animate-spin h-2.5 w-2.5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    <svg
+      class="inline-block animate-spin h-2.5 w-2.5 text-gray-400"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+    >
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
+      </circle>
+      <path
+        class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      >
+      </path>
     </svg>
     """
   end
 
+  attr :name, :atom, required: true
+  attr :outlined, :boolean, default: false
+  attr :rest, :global, default: %{class: "w-4 h-4 inline-block"}
   def icon(assigns) do
-    assigns =
-      assigns
-      |> assign_new(:outlined, fn -> false end)
-      |> assign_new(:class, fn -> "w-4 h-4 inline-block" end)
-      |> assign_new(:"aria-hidden", fn -> !Map.has_key?(assigns, :"aria-label") end)
+    assigns = assign_new(assigns, :"aria-hidden", fn -> !Map.has_key?(assigns, :"aria-label") end)
 
     ~H"""
     <%= if @outlined do %>
-      <%= apply(Heroicons.Outline, @name, [assigns_to_attributes(assigns, [:outlined, :name])]) %>
+      <%= apply(Heroicons.Outline, @name, [Map.to_list(@rest)]) %>
     <% else %>
-      <%= apply(Heroicons.Solid, @name, [assigns_to_attributes(assigns, [:outlined, :name])]) %>
+      <%= apply(Heroicons.Solid, @name, [Map.to_list(@rest)]) %>
     <% end %>
     """
   end
 
+  attr :navigate, :string
+  attr :patch, :string
+  attr :href, :string, default: nil
+  attr :replace, :string, default: false
+  attr :rest, :global
   def link(%{navigate: _to} = assigns) do
     assigns = assign_new(assigns, :class, fn -> nil end)
 
     ~H"""
-    <a href={@navigate} data-phx-link="redirect" data-phx-link-state="push" class={@class}>
+    <a href={@navigate} data-phx-link="redirect" data-phx-link-state="push" {@rest}>
       <%= render_slot(@inner_block) %>
     </a>
     """
   end
 
-  def link(%{patch: to} = assigns) do
-    opts = assigns |> assigns_to_attributes() |> Keyword.put(:to, to)
-    assigns = assign(assigns, :opts, opts)
-
+  def link(%{patch: _to} = assigns) do
     ~H"""
-    <%= live_patch @opts do %><%= render_slot(@inner_block) %><% end %>
+    <a
+      href={@patch}
+      data-phx-link="patch"
+      data-phx-link-state={if @replace, do: "replace", else: "push"}
+      {@rest}
+    >
+      <%= render_slot(@inner_block) %>
+    </a>
     """
   end
 
   def link(%{} = assigns) do
-    opts = assigns |> assigns_to_attributes() |> Keyword.put(:to, assigns[:href] || "#")
-    assigns = assign(assigns, :opts, opts)
-
     ~H"""
-    <%= Phoenix.HTML.Link.link @opts do %><%= render_slot(@inner_block) %><% end %>
+    <a href={@href || "#"} {@rest}>
+      <%= render_slot(@inner_block) %>
+    </a>
     """
   end
 
@@ -171,13 +213,13 @@ defmodule LiveBeatsWeb.LiveHelpers do
         <:link navigate={Routes.settings_path(LiveBeatsWeb.Endpoint, :edit)}Settings</:link>
       </.dropdown>
   """
+  attr :id, :string, required: true
+  attr :ok, :string, required: true
+  attr :img, :list, default: []
+  attr :title, :list, default: []
+  attr :subtitle, :list, default: []
+  attr :link, :list, default: []
   def dropdown(assigns) do
-    assigns =
-      assigns
-      |> assign_new(:img, fn -> nil end)
-      |> assign_new(:title, fn -> nil end)
-      |> assign_new(:subtitle, fn -> nil end)
-
     ~H"""
     <!-- User account dropdown -->
     <div class="px-3 mt-6 relative inline-block text-left">
@@ -194,19 +236,32 @@ defmodule LiveBeatsWeb.LiveHelpers do
           <span class="flex w-full justify-between items-center">
             <span class="flex min-w-0 items-center justify-between space-x-3">
               <%= for img <- @img do %>
-                <img class="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" alt="" {assigns_to_attributes(img)}/>
+                <img
+                  class="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0"
+                  alt=""
+                  {assigns_to_attributes(img)}
+                />
               <% end %>
               <span class="flex-1 flex flex-col min-w-0">
-                <span class="text-gray-900 text-sm font-medium truncate"><%= render_slot(@title) %></span>
+                <span class="text-gray-900 text-sm font-medium truncate">
+                  <%= render_slot(@title) %>
+                </span>
                 <span class="text-gray-500 text-sm truncate"><%= render_slot(@subtitle) %></span>
               </span>
             </span>
-            <svg class="flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500"
-              xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-              fill="currentColor" aria-hidden="true">
-              <path fill-rule="evenodd"
+            <svg
+              class="flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                fill-rule="evenodd"
                 d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
-                clip-rule="evenodd"></path>
+                clip-rule="evenodd"
+              >
+              </path>
             </svg>
           </span>
         </button>
@@ -223,8 +278,11 @@ defmodule LiveBeatsWeb.LiveHelpers do
             <.link
               tabindex="-1"
               role="menuitem"
-              class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-purple-500" {link}
-            ><%= render_slot(link) %></.link>
+              class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-purple-500"
+              {link}
+            >
+              <%= render_slot(link) %>
+            </.link>
           <% end %>
         </div>
       </div>
@@ -333,30 +391,45 @@ defmodule LiveBeatsWeb.LiveHelpers do
     |> JS.dispatch("click", to: "##{id} [data-modal-return]")
   end
 
+  attr :id, :string, required: true
+  attr :show, :boolean, default: false
+  attr :patch, :string, default: nil
+  attr :navigate, :string, default: nil
+  attr :on_cancel, JS, default: %JS{}
+  attr :on_confirm, JS, default: %JS{}
+  # slots
+  attr :title, :list, default: []
+  attr :confirm, :list, default: []
+  attr :cancel, :list, default: []
+  attr :rest, :global
   def modal(assigns) do
-    assigns =
-      assigns
-      |> assign_new(:show, fn -> false end)
-      |> assign_new(:patch, fn -> nil end)
-      |> assign_new(:navigate, fn -> nil end)
-      |> assign_new(:on_cancel, fn -> %JS{} end)
-      |> assign_new(:on_confirm, fn -> %JS{} end)
-      # slots
-      |> assign_new(:title, fn -> [] end)
-      |> assign_new(:confirm, fn -> [] end)
-      |> assign_new(:cancel, fn -> [] end)
-      |> assign_rest(~w(id show patch navigate on_cancel on_confirm title confirm cancel)a)
-
     ~H"""
-    <div id={@id} class={"fixed z-10 inset-0 overflow-y-auto #{if @show, do: "fade-in", else: "hidden"}"} {@rest}>
+    <div
+      id={@id}
+      class={"fixed z-10 inset-0 overflow-y-auto #{if @show, do: "fade-in", else: "hidden"}"}
+      {@rest}
+    >
       <.focus_wrap id={"#{@id}-focus-wrap"} content={"##{@id}-container"}>
-        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" aria-labelledby={"#{@id}-title"} aria-describedby={"#{@id}-description"} role="dialog" aria-modal="true" tabindex="0">
-          <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
-          <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+        <div
+          class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+          aria-labelledby={"#{@id}-title"}
+          aria-describedby={"#{@id}-description"}
+          role="dialog"
+          aria-modal="true"
+          tabindex="0"
+        >
+          <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true">
+          </div>
+          <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+            &#8203;
+          </span>
           <div
             id={"#{@id}-container"}
-            class={"#{if @show, do: "fade-in-scale", else: "hidden"} sticky inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform sm:my-8 sm:align-middle sm:max-w-xl sm:w-full sm:p-6"}
-            phx-window-keydown={hide_modal(@on_cancel, @id)} phx-key="escape"
+            class={
+              "#{if @show, do: "fade-in-scale", else: "hidden"} sticky inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform sm:my-8 sm:align-middle sm:max-w-xl sm:w-full sm:p-6"
+            }
+            phx-window-keydown={hide_modal(@on_cancel, @id)}
+            phx-key="escape"
             phx-click-away={hide_modal(@on_cancel, @id)}
           >
             <%= if @patch do %>
@@ -366,16 +439,16 @@ defmodule LiveBeatsWeb.LiveHelpers do
               <.link navigate={@navigate} data-modal-return class="hidden"></.link>
             <% end %>
             <div class="sm:flex sm:items-start">
-              <div class={"mx-auto flex-shrink-0 flex items-center justify-center h-8 w-8 rounded-full bg-purple-100 sm:mx-0"}>
+              <div class="mx-auto flex-shrink-0 flex items-center justify-center h-8 w-8 rounded-full bg-purple-100 sm:mx-0">
                 <!-- Heroicon name: outline/plus -->
-                <.icon name={:information_circle} outlined class="h-6 w-6 text-purple-600"/>
+                <.icon name={:information_circle} outlined class="h-6 w-6 text-purple-600" />
               </div>
               <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full mr-12">
                 <h3 class="text-lg leading-6 font-medium text-gray-900" id={"#{@id}-title"}>
                   <%= render_slot(@title) %>
                 </h3>
                 <div class="mt-2">
-                  <p id={"#{@id}-content"} class={"text-sm text-gray-500"}>
+                  <p id={"#{@id}-content"} class="text-sm text-gray-500">
                     <%= render_slot(@inner_block) %>
                   </p>
                 </div>
@@ -410,6 +483,8 @@ defmodule LiveBeatsWeb.LiveHelpers do
     """
   end
 
+  attr :id, :string, required: true
+  attr :content, :string
   def focus_wrap(assigns) do
     ~H"""
     <div id={@id} phx-hook="FocusWrap" data-content={@content}>
@@ -420,29 +495,33 @@ defmodule LiveBeatsWeb.LiveHelpers do
     """
   end
 
+  attr :id, :string, required: true
+  attr :min, :integer, default: 0
+  attr :max, :integer, default: 100
+  attr :value, :integer
   def progress_bar(assigns) do
-    assigns =
-      assigns
-      |> assign_new(:min, fn -> 0 end)
-      |> assign_new(:max, fn -> 100 end)
-      |> assign_new(:value, fn -> assigns[:min] || 0 end)
+    assigns = assign_new(assigns, :value, fn -> assigns[:min] || 0 end)
 
     ~H"""
-    <div id={"#{@id}-container"} class="bg-gray-200 flex-auto dark:bg-black rounded-full overflow-hidden" phx-update="ignore">
+    <div
+      id={"#{@id}-container"}
+      class="bg-gray-200 flex-auto dark:bg-black rounded-full overflow-hidden"
+      phx-update="ignore"
+    >
       <div
         id={@id}
         class="bg-lime-500 dark:bg-lime-400 h-1.5 w-0"
         data-min={@min}
         data-max={@max}
-        data-val={@value}>
+        data-val={@value}
+      >
       </div>
     </div>
     """
   end
 
+  attr :actions, :list, default: []
   def title_bar(assigns) do
-    assigns = assign_new(assigns, :actions, fn -> [] end)
-
     ~H"""
     <!-- Page title & actions -->
     <div class="border-b border-gray-200 px-4 py-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8 sm:h-16">
@@ -460,13 +539,14 @@ defmodule LiveBeatsWeb.LiveHelpers do
     """
   end
 
+  attr :patch, :string
+  attr :primary, :boolean, default: false
+  attr :rest, :global
   def button(%{patch: _} = assigns) do
-    assigns = assign_new(assigns, :primary, fn -> false end)
-
     ~H"""
     <%= if @primary do %>
       <%= live_patch [to: @patch, class: "order-0 inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:order-1 sm:ml-3"] ++
-        assigns_to_attributes(assigns, [:primary, :patch]) do %>
+        Map.to_list(@rest) do %>
         <%= render_slot(@inner_block) %>
       <% end %>
     <% else %>
@@ -479,24 +559,31 @@ defmodule LiveBeatsWeb.LiveHelpers do
   end
 
   def button(%{} = assigns) do
-    assigns =
-      assigns
-      |> assign_new(:primary, fn -> false end)
-      |> assign(:rest, assigns_to_attributes(assigns))
-
     ~H"""
     <%= if @primary do %>
-      <button type="button" class="order-0 inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:order-1 sm:ml-3" {@rest}>
+      <button
+        type="button"
+        class="order-0 inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:order-1 sm:ml-3"
+        {@rest}
+      >
         <%= render_slot(@inner_block) %>
       </button>
     <% else %>
-      <button type="button" class="order-1 inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:order-0 sm:ml-0 lg:ml-3" {@rest}>
+      <button
+        type="button"
+        class="order-1 inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:order-0 sm:ml-0 lg:ml-3"
+        {@rest}
+      >
         <%= render_slot(@inner_block) %>
       </button>
     <% end %>
     """
   end
 
+  attr :row_id, :any, default: false
+  attr :rows, :list, required: true
+  # slots
+  attr :col, :list, required: true
   def table(assigns) do
     assigns =
       assigns
@@ -510,8 +597,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
           <thead>
             <tr class="border-t border-gray-200">
               <%= for col <- @col do %>
-                <th
-                  class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                   <span class="lg:pl-2"><%= col.label %></span>
                 </th>
               <% end %>
@@ -521,7 +607,9 @@ defmodule LiveBeatsWeb.LiveHelpers do
             <%= for {row, i} <- Enum.with_index(@rows) do %>
               <tr id={@row_id && @row_id.(row)} class="hover:bg-gray-50">
                 <%= for col <- @col do %>
-                  <td class={"px-6 py-3 whitespace-nowrap text-sm font-medium text-gray-900 #{if i == 0, do: "max-w-0 w-full"} #{col[:class]}"}>
+                  <td class={
+                    "px-6 py-3 whitespace-nowrap text-sm font-medium text-gray-900 #{if i == 0, do: "max-w-0 w-full"} #{col[:class]}"
+                  }>
                     <div class="flex items-center space-x-3 lg:pl-2">
                       <%= render_slot(col, row) %>
                     </div>
@@ -536,13 +624,16 @@ defmodule LiveBeatsWeb.LiveHelpers do
     """
   end
 
+  attr :id, :any, required: true
+  attr :module, :atom, required: true
+  attr :row_id, :any, default: false
+  attr :rows, :list, required: true
+  attr :owns_profile?, :boolean, default: false
+  attr :active_id, :any, default: nil
+  # slots
+  attr :col, :list
   def live_table(assigns) do
-    assigns =
-      assigns
-      |> assign_new(:row_id, fn -> false end)
-      |> assign_new(:active_id, fn -> nil end)
-      |> assign_new(:owns_profile?, fn -> assigns.owns_profile? end)
-      |> assign(:col, for(col <- assigns.col, col[:if] != false, do: col))
+    assigns = assign(assigns, :col, for(col <- assigns.col, col[:if] != false, do: col))
 
     ~H"""
     <div class="hidden mt-8 sm:block">
@@ -551,8 +642,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
           <thead>
             <tr class="border-t border-gray-200">
               <%= for col <- @col do %>
-                <th
-                  class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                   <span class="lg:pl-2"><%= col.label %></span>
                 </th>
               <% end %>
@@ -563,10 +653,12 @@ defmodule LiveBeatsWeb.LiveHelpers do
               <.live_component
                 module={@module}
                 id={@row_id.(row)}
-                row={row} col={@col}
+                row={row}
+                col={@col}
                 index={i}
                 active_id={@active_id}
-                class="hover:bg-gray-50",
+                class="hover:bg-gray-50"
+                ,
                 owns_profile?={@owns_profile?}
               />
             <% end %>
@@ -595,8 +687,4 @@ defmodule LiveBeatsWeb.LiveHelpers do
     |> JS.dispatch("js:focus-closest", to: to)
     |> hide(to)
   end
-
-  defp assign_rest(assigns, exclude) do
-    assign(assigns, :rest, assigns_to_attributes(assigns, exclude))
-  end
 end
diff --git a/lib/live_beats_web/views/layout_view.ex b/lib/live_beats_web/views/layout_view.ex
index 69fc6f8..dc0f98b 100644
--- a/lib/live_beats_web/views/layout_view.ex
+++ b/lib/live_beats_web/views/layout_view.ex
@@ -1,5 +1,6 @@
 defmodule LiveBeatsWeb.LayoutView do
   use LiveBeatsWeb, :view
+  use Phoenix.Component
 
   # Phoenix LiveDashboard is available only in development by default,
   # so we instruct Elixir to not warn if the dashboard route is missing.
@@ -69,7 +70,7 @@ defmodule LiveBeatsWeb.LayoutView do
 
   def sidebar_account_dropdown(assigns) do
     ~H"""
-    <.dropdown id={@id}>
+    <.dropdown id={@id} foo="bar">
       <:img src={@current_user.avatar_url}/>
       <:title><%= @current_user.name %></:title>
       <:subtitle>@<%= @current_user.username %></:subtitle>
diff --git a/mix.exs b/mix.exs
index 4790288..1720b66 100644
--- a/mix.exs
+++ b/mix.exs
@@ -7,7 +7,7 @@ defmodule LiveBeats.MixProject do
       version: "0.1.0",
       elixir: "~> 1.12",
       elixirc_paths: elixirc_paths(Mix.env()),
-      compilers: [:gettext] ++ Mix.compilers(),
+      compilers: [:gettext, :phoenix_live_view] ++ Mix.compilers(),
       start_permanent: Mix.env() == :prod,
       aliases: aliases(),
       deps: deps()
@@ -40,7 +40,8 @@ defmodule LiveBeats.MixProject do
       {:postgrex, ">= 0.0.0"},
       {:phoenix_html, "~> 3.0"},
       {:phoenix_live_reload, "~> 1.2", only: :dev},
-      {:phoenix_live_view, github: "phoenixframework/phoenix_live_view", override: true},
+      # {:phoenix_live_view, github: "phoenixframework/phoenix_live_view", override: true},
+      {:phoenix_live_view, path: "~/oss/phoenix_live_view", override: true},
       {:floki, ">= 0.30.0", only: :test},
       {:phoenix_live_dashboard, "~> 0.6"},
       {:esbuild, "~> 0.2", runtime: Mix.env() == :dev},
diff --git a/mix.lock b/mix.lock
index b88c34c..34ee1eb 100644
--- a/mix.lock
+++ b/mix.lock
@@ -22,12 +22,12 @@
   "libcluster": {:hex, :libcluster, "3.3.1", "e7a4875cd1290cee7a693d6bd46076863e9e433708b01339783de6eff5b7f0aa", [:mix], [{:jason, "~> 1.1", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "b575ca63c1cd84e01f3fa0fc45e6eb945c1ee7ae8d441d33def999075e9e5398"},
   "mime": {:hex, :mime, "2.0.2", "0b9e1a4c840eafb68d820b0e2158ef5c49385d17fb36855ac6e7e087d4b1dcc5", [:mix], [], "hexpm", "e6a3f76b4c277739e36c2e21a2c640778ba4c3846189d5ab19f97f126df5f9b7"},
   "mint": {:hex, :mint, "1.3.0", "396b3301102f7b775e103da5a20494b25753aed818d6d6f0ad222a3a018c3600", [:mix], [{:castore, "~> 0.1.0", [hex: :castore, repo: "hexpm", optional: true]}], "hexpm", "a9aac960562e43ca69a77e5176576abfa78b8398cec5543dd4fb4ab0131d5c1e"},
-  "phoenix": {:git, "https://github.com/phoenixframework/phoenix.git", "ae2fb6bddd64fc7e3908ee6dd632f608254f532e", []},
+  "phoenix": {:git, "https://github.com/phoenixframework/phoenix.git", "c5bb03eee8ad802c125c92202ebec4e15c35c3e8", []},
   "phoenix_ecto": {:hex, :phoenix_ecto, "4.4.0", "0672ed4e4808b3fbed494dded89958e22fb882de47a97634c0b13e7b0b5f7720", [:mix], [{:ecto, "~> 3.3", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "09864e558ed31ee00bd48fcc1d4fc58ae9678c9e81649075431e69dbabb43cc1"},
   "phoenix_html": {:hex, :phoenix_html, "3.2.0", "1c1219d4b6cb22ac72f12f73dc5fad6c7563104d083f711c3fcd8551a1f4ae11", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "36ec97ba56d25c0136ef1992c37957e4246b649d620958a1f9fa86165f8bc54f"},
   "phoenix_live_dashboard": {:hex, :phoenix_live_dashboard, "0.6.2", "0769470265eb13af01b5001b29cb935f4710d6adaa1ffc18417a570a337a2f0f", [:mix], [{:ecto, "~> 3.6.2 or ~> 3.7", [hex: :ecto, repo: "hexpm", optional: true]}, {:ecto_mysql_extras, "~> 0.3", [hex: :ecto_mysql_extras, repo: "hexpm", optional: true]}, {:ecto_psql_extras, "~> 0.7", [hex: :ecto_psql_extras, repo: "hexpm", optional: true]}, {:mime, "~> 1.6 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.17.1", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 0.6.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "5bc6c6b38a2ca8b5020b442322fcee6afd5e641637a0b1fb059d4bd89bc58e7b"},
   "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.3.3", "3a53772a6118d5679bf50fc1670505a290e32a1d195df9e069d8c53ab040c054", [:mix], [{:file_system, "~> 0.2.1 or ~> 0.3", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "766796676e5f558dbae5d1bdb066849673e956005e3730dfd5affd7a6da4abac"},
-  "phoenix_live_view": {:git, "https://github.com/phoenixframework/phoenix_live_view.git", "1ae64fb69b0951f2f67f01d369ec9a4006060001", []},
+  "phoenix_live_view": {:git, "https://github.com/phoenixframework/phoenix_live_view.git", "e24527536890be2f0565c4a6d122a89e819df58e", []},
   "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.1.1", "ba04e489ef03763bf28a17eb2eaddc2c20c6d217e2150a61e3298b0f4c2012b5", [:mix], [], "hexpm", "81367c6d1eea5878ad726be80808eb5a787a23dee699f96e72b1109c57cdd8d9"},
   "phoenix_view": {:hex, :phoenix_view, "1.0.0", "fea71ecaaed71178b26dd65c401607de5ec22e2e9ef141389c721b3f3d4d8011", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "82be3e2516f5633220246e2e58181282c71640dab7afc04f70ad94253025db0c"},
   "plug": {:hex, :plug, "1.13.4", "addb6e125347226e3b11489e23d22a60f7ab74786befb86c14f94fb5f23ca9a4", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "06114c1f2a334212fe3ae567dbb3b1d29fd492c1a09783d52f3d489c1a6f4cf2"},