From 26b47ab060e4ca6cde52dfea81c82d11e7f065de Mon Sep 17 00:00:00 2001
From: shibao <shibao@bubbletea.dev>
Date: Sat, 22 Jan 2022 15:15:23 -0500
Subject: [PATCH] update components and templates to heex

---
 lib/cannery_web/component/topbar.ex           | 121 ++++++++++++++++++
 .../live/ammo_group_live/form_component.ex    |  30 +++++
 .../ammo_group_live/form_component.html.leex  |  22 ----
 .../live/ammo_type_live/form_component.ex     |  42 ++++++
 .../ammo_type_live/form_component.html.leex   |  34 -----
 lib/cannery_web/live/component/topbar.ex      |  13 --
 .../live/component/topbar.html.leex           | 107 ----------------
 .../live/container_live/form_component.ex     |  34 +++++
 .../container_live/form_component.html.leex   |  26 ----
 .../live/invite_live/form_component.ex        |  34 +++++
 .../live/invite_live/form_component.html.leex |  26 ----
 lib/cannery_web/live/modal_component.ex       |   6 +-
 .../live/tag_live/form_component.ex           |  47 ++++++-
 .../live/tag_live/form_component.html.leex    |  36 ------
 .../templates/layout/live.html.heex           |   8 +-
 15 files changed, 314 insertions(+), 272 deletions(-)
 create mode 100644 lib/cannery_web/component/topbar.ex
 delete mode 100644 lib/cannery_web/live/ammo_group_live/form_component.html.leex
 delete mode 100644 lib/cannery_web/live/ammo_type_live/form_component.html.leex
 delete mode 100644 lib/cannery_web/live/component/topbar.ex
 delete mode 100644 lib/cannery_web/live/component/topbar.html.leex
 delete mode 100644 lib/cannery_web/live/container_live/form_component.html.leex
 delete mode 100644 lib/cannery_web/live/invite_live/form_component.html.leex
 delete mode 100644 lib/cannery_web/live/tag_live/form_component.html.leex

diff --git a/lib/cannery_web/component/topbar.ex b/lib/cannery_web/component/topbar.ex
new file mode 100644
index 00000000..b32c4ee7
--- /dev/null
+++ b/lib/cannery_web/component/topbar.ex
@@ -0,0 +1,121 @@
+defmodule CanneryWeb.Component.Topbar do
+  use CanneryWeb, :component
+
+  alias Cannery.{Accounts}
+  alias CanneryWeb.{HomeLive}
+
+  def topbar(assigns) do
+    assigns =
+      %{results: [], title_content: nil, flash: nil, current_user: nil} |> Map.merge(assigns)
+
+    ~H"""
+    <header class="mb-8 px-8 py-4 w-full bg-primary-400">
+      <nav role="navigation">
+        <div class="flex flex-row justify-between items-center space-x-4">
+          <div class="flex flex-row justify-start items-center space-x-2">
+            <%= link to: Routes.live_path(CanneryWeb.Endpoint, HomeLive) do %>
+              <h1 class="leading-5 text-xl text-white hover:underline">Cannery</h1>
+            <% end %>
+
+            <%= if @title_content do %>
+              <span>|</span>
+              <%= @title_content %>
+            <% end %>
+          </div>
+
+          <ul class="flex flex-row flex-wrap justify-center items-center
+            space-x-4 text-lg text-white">
+            <%# user settings %>
+            <%= if @current_user do %>
+              <li>
+                <%= link "Tags", class: "hover:underline",
+                  to: Routes.tag_index_path(CanneryWeb.Endpoint, :index) %>
+              </li>
+              <li>
+                <%= link "Containers", class: "hover:underline",
+                  to: Routes.container_index_path(CanneryWeb.Endpoint, :index) %>
+              </li>
+              <li>
+                <%= link "Ammo", class: "hover:underline",
+                  to: Routes.ammo_type_index_path(CanneryWeb.Endpoint, :index) %>
+              </li>
+              <li>
+                <%= link "Manage", class: "hover:underline",
+                  to: Routes.ammo_group_index_path(CanneryWeb.Endpoint, :index) %>
+              </li>
+
+              <%= if @current_user.role == :admin do %>
+                <li>
+                  <%= link "Invites", class: "hover:underline",
+                    to: Routes.invite_index_path(CanneryWeb.Endpoint, :index) %>
+                </li>
+              <% end %>
+
+              <%# search %>
+              <%#
+              <form phx-change="suggest" phx-submit="search" phx-target="<%= @myself %#>">
+                <input type="text" name="q" class="input input-primary"
+                  placeholder="Search" list="results" autocomplete="off"/>
+                <datalist id="results">
+                  <%= for {app, _vsn} <- @results do %#>
+                    <option value={app}><%= app %#></option>
+                  <% end %#>
+                </datalist>
+              </form>
+              %>
+
+              <li>
+                <%= link @current_user.email, class: "hover:underline",
+                  to: Routes.user_settings_path(CanneryWeb.Endpoint, :edit) %>
+              </li>
+
+              <li>
+                <%= link to: Routes.user_session_path(CanneryWeb.Endpoint, :delete), method: :delete,
+                  data: [confirm: "Are you sure you want to log out?"] do %>
+                  <i class="fas fa-sign-out-alt"></i>
+                <% end %>
+              </li>
+
+              <%= if @current_user.role == :admin and function_exported?(Routes, :live_dashboard_path, 2) do %>
+                <li>
+                  <%= link to: Routes.live_dashboard_path(CanneryWeb.Endpoint, :home) do %>
+                    <i class="fas fa-tachometer-alt"></i>
+                  <% end %>
+                </li>
+              <% end %>
+
+            <% else %>
+
+              <%= if Accounts.allow_registration?() do %>
+                <li>
+                  <%= link "Register", class: "hover:underline",
+                    to: Routes.user_registration_path(CanneryWeb.Endpoint, :new) %>
+                </li>
+              <% end %>
+
+              <li>
+                <%= link "Log in", class: "hover:underline",
+                  to: Routes.user_session_path(CanneryWeb.Endpoint, :new) %>
+              </li>
+            <% end %>
+          </ul>
+        </div>
+      </nav>
+
+      <%= if @flash && @flash |> Map.has_key?(:info) do %>
+        <p class="alert alert-info" role="alert"
+          phx-click="lv:clear-flash" phx-value-key="info">
+          <%= live_flash(@flash, :info) %>
+        </p>
+      <% end %>
+
+      <%= if @flash && @flash |> Map.has_key?(:error) do %>
+        <p class="alert alert-danger" role="alert"
+          phx-click="lv:clear-flash" phx-value-key="error">
+          <%= live_flash(@flash, :error) %>
+        </p>
+      <% end %>
+    </header>
+    """
+  end
+end
diff --git a/lib/cannery_web/live/ammo_group_live/form_component.ex b/lib/cannery_web/live/ammo_group_live/form_component.ex
index b01aa0ff..02b585a1 100644
--- a/lib/cannery_web/live/ammo_group_live/form_component.ex
+++ b/lib/cannery_web/live/ammo_group_live/form_component.ex
@@ -27,6 +27,36 @@ defmodule CanneryWeb.AmmoGroupLive.FormComponent do
     save_ammo_group(socket, socket.assigns.action, ammo_group_params)
   end
 
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <h2><%= @title %></h2>
+
+      <.form let={f} for={@changeset},
+        id="ammo_group-form"
+        phx-target={@myself}
+        phx-change="validate"
+        phx-submit="save">
+
+        <%= label f, :count, class: "title text-lg text-primary-500" %>
+        <%= number_input f, :count %>
+        <%= error_tag f, :count %>
+
+        <%= label f, :price_paid, class: "title text-lg text-primary-500" %>
+        <%= number_input f, :price_paid, step: "any" %>
+        <%= error_tag f, :price_paid %>
+
+        <%= label f, :notes, class: "title text-lg text-primary-500" %>
+        <%= textarea f, :notes, class: "input" %>
+        <%= error_tag f, :notes %>
+
+        <%= submit "Save", phx_disable_with: "Saving..." %>
+      </.form>
+    </div>
+    """
+  end
+
   defp save_ammo_group(socket, :edit, ammo_group_params) do
     case Ammo.update_ammo_group(socket.assigns.ammo_group, ammo_group_params) do
       {:ok, _ammo_group} ->
diff --git a/lib/cannery_web/live/ammo_group_live/form_component.html.leex b/lib/cannery_web/live/ammo_group_live/form_component.html.leex
deleted file mode 100644
index 47b16038..00000000
--- a/lib/cannery_web/live/ammo_group_live/form_component.html.leex
+++ /dev/null
@@ -1,22 +0,0 @@
-<h2><%= @title %></h2>
-
-<%= f = form_for @changeset, "#",
-  id: "ammo_group-form",
-  phx_target: @myself,
-  phx_change: "validate",
-  phx_submit: "save" %>
-
-  <%= label f, :count, class: "title text-lg text-primary-500" %>
-  <%= number_input f, :count %>
-  <%= error_tag f, :count %>
-
-  <%= label f, :price_paid, class: "title text-lg text-primary-500" %>
-  <%= number_input f, :price_paid, step: "any" %>
-  <%= error_tag f, :price_paid %>
-
-  <%= label f, :notes, class: "title text-lg text-primary-500" %>
-  <%= textarea f, :notes, class: "input" %>
-  <%= error_tag f, :notes %>
-
-  <%= submit "Save", phx_disable_with: "Saving..." %>
-</form>
diff --git a/lib/cannery_web/live/ammo_type_live/form_component.ex b/lib/cannery_web/live/ammo_type_live/form_component.ex
index 3095b423..e4dad09c 100644
--- a/lib/cannery_web/live/ammo_type_live/form_component.ex
+++ b/lib/cannery_web/live/ammo_type_live/form_component.ex
@@ -27,6 +27,48 @@ defmodule CanneryWeb.AmmoTypeLive.FormComponent do
     save_ammo_type(socket, socket.assigns.action, ammo_type_params)
   end
 
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <h2><%= @title %></h2>
+
+      <.form let={f} for={@changeset}
+        id="ammo_type-form"
+        phx-target={@myself}
+        phx-change="validate"
+        phx-submit="save">
+
+        <%= label f, :name, class: "title text-lg text-primary-500" %>
+        <%= text_input f, :name, class: "input input-primary" %>
+        <%= error_tag f, :name %>
+
+        <%= label f, :desc, class: "title text-lg text-primary-500" %>
+        <%= text_input f, :desc, class: "input input-primary" %>
+        <%= error_tag f, :desc %>
+
+        <%= label f, :case_material, class: "title text-lg text-primary-500" %>
+        <%= text_input f, :case_material, class: "input input-primary" %>
+        <%= error_tag f, :case_material %>
+
+        <%= label f, :bullet_type, class: "title text-lg text-primary-500" %>
+        <%= text_input f, :bullet_type, class: "input input-primary" %>
+        <%= error_tag f, :bullet_type %>
+
+        <%= label f, :weight, class: "title text-lg text-primary-500" %>
+        <%= number_input f, :weight, step: "any" %>
+        <%= error_tag f, :weight %>
+
+        <%= label f, :manufacturer, class: "title text-lg text-primary-500" %>
+        <%= text_input f, :manufacturer, class: "input input-primary" %>
+        <%= error_tag f, :manufacturer %>
+
+        <%= submit "Save", phx_disable_with: "Saving..." %>
+      </.form>
+    </div>
+    """
+  end
+
   defp save_ammo_type(socket, :edit, ammo_type_params) do
     case Ammo.update_ammo_type(socket.assigns.ammo_type, ammo_type_params) do
       {:ok, _ammo_type} ->
diff --git a/lib/cannery_web/live/ammo_type_live/form_component.html.leex b/lib/cannery_web/live/ammo_type_live/form_component.html.leex
deleted file mode 100644
index abd99c2b..00000000
--- a/lib/cannery_web/live/ammo_type_live/form_component.html.leex
+++ /dev/null
@@ -1,34 +0,0 @@
-<h2><%= @title %></h2>
-
-<%= f = form_for @changeset, "#",
-  id: "ammo_type-form",
-  phx_target: @myself,
-  phx_change: "validate",
-  phx_submit: "save" %>
-
-  <%= label f, :name, class: "title text-lg text-primary-500" %>
-  <%= text_input f, :name, class: "input input-primary" %>
-  <%= error_tag f, :name %>
-
-  <%= label f, :desc, class: "title text-lg text-primary-500" %>
-  <%= text_input f, :desc, class: "input input-primary" %>
-  <%= error_tag f, :desc %>
-
-  <%= label f, :case_material, class: "title text-lg text-primary-500" %>
-  <%= text_input f, :case_material, class: "input input-primary" %>
-  <%= error_tag f, :case_material %>
-
-  <%= label f, :bullet_type, class: "title text-lg text-primary-500" %>
-  <%= text_input f, :bullet_type, class: "input input-primary" %>
-  <%= error_tag f, :bullet_type %>
-
-  <%= label f, :weight, class: "title text-lg text-primary-500" %>
-  <%= number_input f, :weight, step: "any" %>
-  <%= error_tag f, :weight %>
-
-  <%= label f, :manufacturer, class: "title text-lg text-primary-500" %>
-  <%= text_input f, :manufacturer, class: "input input-primary" %>
-  <%= error_tag f, :manufacturer %>
-
-  <%= submit "Save", phx_disable_with: "Saving..." %>
-</form>
diff --git a/lib/cannery_web/live/component/topbar.ex b/lib/cannery_web/live/component/topbar.ex
deleted file mode 100644
index d9823824..00000000
--- a/lib/cannery_web/live/component/topbar.ex
+++ /dev/null
@@ -1,13 +0,0 @@
-defmodule CanneryWeb.Live.Component.Topbar do
-  use CanneryWeb, :live_component
-
-  alias Cannery.{Accounts}
-
-  def mount(socket) do
-    {:ok, socket |> assign(results: [], title_content: nil)}
-  end
-
-  def update(assigns, socket) do
-    {:ok, socket |> assign(assigns)}
-  end
-end
diff --git a/lib/cannery_web/live/component/topbar.html.leex b/lib/cannery_web/live/component/topbar.html.leex
deleted file mode 100644
index 57fad13e..00000000
--- a/lib/cannery_web/live/component/topbar.html.leex
+++ /dev/null
@@ -1,107 +0,0 @@
-<header class="mb-8 px-8 py-4 w-full bg-primary-400">
-  <nav role="navigation">
-    <div class="flex flex-row justify-between items-center space-x-4">
-      <div class="flex flex-row justify-start items-center space-x-2">
-        <%= link to: Routes.home_path(CanneryWeb.Endpoint, :index) do %>
-          <h1 class="leading-5 text-xl text-white hover:underline">Cannery</h1>
-        <% end %>
-
-        <%= if @title_content do %>
-          <span>|</span>
-          <%= @title_content %>
-        <% end %>
-      </div>
-
-      <ul class="flex flex-row flex-wrap justify-center items-center
-        space-x-4 text-lg text-white">
-        <%# user settings %>
-        <%= if @current_user do %>
-          <li>
-            <%= link "Tags", class: "hover:underline",
-              to: Routes.tag_index_path(CanneryWeb.Endpoint, :index) %>
-          </li>
-          <li>
-            <%= link "Containers", class: "hover:underline",
-              to: Routes.container_index_path(CanneryWeb.Endpoint, :index) %>
-          </li>
-          <li>
-            <%= link "Ammo", class: "hover:underline",
-              to: Routes.ammo_type_index_path(CanneryWeb.Endpoint, :index) %>
-          </li>
-          <li>
-            <%= link "Manage", class: "hover:underline",
-              to: Routes.ammo_group_index_path(CanneryWeb.Endpoint, :index) %>
-          </li>
-
-          <%= if @current_user.role == :admin do %>
-            <li>
-              <%= link "Invites", class: "hover:underline",
-                to: Routes.invite_index_path(CanneryWeb.Endpoint, :index) %>
-            </li>
-          <% end %>
-
-          <%# search %>
-          <%#
-          <form phx-change="suggest" phx-submit="search" phx-target="<%= @myself %#>">
-            <input type="text" name="q" class="input input-primary"
-              placeholder="Search" list="results" autocomplete="off"/>
-            <datalist id="results">
-              <%= for {app, _vsn} <- @results do %#>
-                <option value="<%= app %#>"><%= app %#></option>
-              <% end %#>
-            </datalist>
-          </form>
-          %>
-
-          <li>
-            <%= link @current_user.email, class: "hover:underline",
-              to: Routes.user_settings_path(CanneryWeb.Endpoint, :edit) %>
-          </li>
-
-          <li>
-            <%= link to: Routes.user_session_path(CanneryWeb.Endpoint, :delete), method: :delete,
-              data: [confirm: "Are you sure you want to log out?"] do %>
-              <i class="fas fa-sign-out-alt"></i>
-            <% end %>
-          </li>
-
-          <%= if @current_user.role == :admin and function_exported?(Routes, :live_dashboard_path, 2) do %>
-            <li>
-              <%= link to: Routes.live_dashboard_path(CanneryWeb.Endpoint, :home) do %>
-                <i class="fas fa-tachometer-alt"></i>
-              <% end %>
-            </li>
-          <% end %>
-
-        <% else %>
-
-          <%= if Accounts.allow_registration?() do %>
-            <li>
-              <%= link "Register", class: "hover:underline",
-                to: Routes.user_registration_path(CanneryWeb.Endpoint, :new) %>
-            </li>
-          <% end %>
-
-          <li>
-            <%= link "Log in", class: "hover:underline",
-              to: Routes.user_session_path(CanneryWeb.Endpoint, :new) %>
-          </li>
-        <% end %>
-      </ul>
-    </div>
-  </nav>
-
-  <%= if live_flash(@flash, :info) do %>
-    <p class="alert alert-info" role="alert"
-      phx-click="lv:clear-flash" phx-value-key="info">
-      <%= live_flash(@flash, :info) %>
-    </p>
-  <% end %>
-
-  <%= if live_flash(@flash, :error) do %>
-    <p class="alert alert-danger" role="alert"
-      phx-click="lv:clear-flash" phx-value-key="error">
-      <%= live_flash(@flash, :error) %>
-    </p>
-  <% end %>
-</header>
diff --git a/lib/cannery_web/live/container_live/form_component.ex b/lib/cannery_web/live/container_live/form_component.ex
index 063b12eb..83215e52 100644
--- a/lib/cannery_web/live/container_live/form_component.ex
+++ b/lib/cannery_web/live/container_live/form_component.ex
@@ -27,6 +27,40 @@ defmodule CanneryWeb.ContainerLive.FormComponent do
     save_container(socket, socket.assigns.action, container_params)
   end
 
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <h2><%= @title %></h2>
+
+      <.form let={f} for={@changeset}
+        id="container-form"
+        phx-target={@myself}
+        phx-change="validate"
+        phx-submit="save">
+
+        <%= label f, :name, class: "title text-lg text-primary-500" %>
+        <%= text_input f, :name, class: "input input-primary" %>
+        <%= error_tag f, :name %>
+
+        <%= label f, :desc, class: "title text-lg text-primary-500" %>
+        <%= text_input f, :desc, class: "input input-primary" %>
+        <%= error_tag f, :desc %>
+
+        <%= label f, :type, class: "title text-lg text-primary-500" %>
+        <%= text_input f, :type, class: "input input-primary" %>
+        <%= error_tag f, :type %>
+
+        <%= label f, :location, class: "title text-lg text-primary-500" %>
+        <%= text_input f, :location, class: "input input-primary" %>
+        <%= error_tag f, :location %>
+
+        <%= submit "Save", phx_disable_with: "Saving..." %>
+      </.form>
+    </div>
+    """
+  end
+
   defp save_container(socket, :edit, container_params) do
     case Containers.update_container(socket.assigns.container, container_params) do
       {:ok, _container} ->
diff --git a/lib/cannery_web/live/container_live/form_component.html.leex b/lib/cannery_web/live/container_live/form_component.html.leex
deleted file mode 100644
index 7a66b6ea..00000000
--- a/lib/cannery_web/live/container_live/form_component.html.leex
+++ /dev/null
@@ -1,26 +0,0 @@
-<h2><%= @title %></h2>
-
-<%= f = form_for @changeset, "#",
-  id: "container-form",
-  phx_target: @myself,
-  phx_change: "validate",
-  phx_submit: "save" %>
-
-  <%= label f, :name, class: "title text-lg text-primary-500" %>
-  <%= text_input f, :name, class: "input input-primary" %>
-  <%= error_tag f, :name %>
-
-  <%= label f, :desc, class: "title text-lg text-primary-500" %>
-  <%= text_input f, :desc, class: "input input-primary" %>
-  <%= error_tag f, :desc %>
-
-  <%= label f, :type, class: "title text-lg text-primary-500" %>
-  <%= text_input f, :type, class: "input input-primary" %>
-  <%= error_tag f, :type %>
-
-  <%= label f, :location, class: "title text-lg text-primary-500" %>
-  <%= text_input f, :location, class: "input input-primary" %>
-  <%= error_tag f, :location %>
-
-  <%= submit "Save", phx_disable_with: "Saving..." %>
-</form>
diff --git a/lib/cannery_web/live/invite_live/form_component.ex b/lib/cannery_web/live/invite_live/form_component.ex
index 402b1f52..685f5156 100644
--- a/lib/cannery_web/live/invite_live/form_component.ex
+++ b/lib/cannery_web/live/invite_live/form_component.ex
@@ -27,6 +27,40 @@ defmodule CanneryWeb.InviteLive.FormComponent do
     save_invite(socket, socket.assigns.action, invite_params)
   end
 
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <h2 class="title text-xl text-primary-500">
+        <%= @title %>
+      </h2>
+
+      <.form let={f} for={@changeset}
+        id="invite-form"
+        class="grid grid-cols-3 justify-center items-center space-y-4"
+        phx-target={@myself}
+        phx-change="validate"
+        phx-submit="save">
+
+        <%= label f, :name, class: "title text-lg text-primary-500" %>
+        <%= text_input f, :name, class: "input input-primary col-span-2" %>
+        <span class="col-span-3">
+          <%= error_tag f, :name %>
+        </span>
+
+        <%= label f, :uses_left, class: "title text-lg text-primary-500" %>
+        <%= number_input f, :uses_left, min: 0, class: "input input-primary col-span-2" %>
+        <span class="col-span-3">
+          <%= error_tag f, :uses_left %>
+        </span>
+
+        <%= submit "Save", class: "mx-auto btn btn-primary col-span-3",
+          phx_disable_with: "Saving..." %>
+      </.form>
+    </div>
+    """
+  end
+
   defp save_invite(socket, :edit, invite_params) do
     case Invites.update_invite(socket.assigns.invite, invite_params) do
       {:ok, _invite} ->
diff --git a/lib/cannery_web/live/invite_live/form_component.html.leex b/lib/cannery_web/live/invite_live/form_component.html.leex
deleted file mode 100644
index d605b48e..00000000
--- a/lib/cannery_web/live/invite_live/form_component.html.leex
+++ /dev/null
@@ -1,26 +0,0 @@
-<h2 class="title text-xl text-primary-500">
-  <%= @title %>
-</h2>
-
-<%= f = form_for @changeset, "#",
-  id: "invite-form",
-  class: "grid grid-cols-3 justify-center items-center space-y-4",
-  phx_target: @myself,
-  phx_change: "validate",
-  phx_submit: "save" %>
-
-  <%= label f, :name, class: "title text-lg text-primary-500" %>
-  <%= text_input f, :name, class: "input input-primary col-span-2" %>
-  <span class="col-span-3">
-    <%= error_tag f, :name %>
-  </span>
-
-  <%= label f, :uses_left, class: "title text-lg text-primary-500" %>
-  <%= number_input f, :uses_left, min: 0, class: "input input-primary col-span-2" %>
-  <span class="col-span-3">
-    <%= error_tag f, :uses_left %>
-  </span>
-
-  <%= submit "Save", class: "mx-auto btn btn-primary col-span-3",
-    phx_disable_with: "Saving..." %>
-</form>
diff --git a/lib/cannery_web/live/modal_component.ex b/lib/cannery_web/live/modal_component.ex
index 870e4bde..7fbe0581 100644
--- a/lib/cannery_web/live/modal_component.ex
+++ b/lib/cannery_web/live/modal_component.ex
@@ -3,15 +3,15 @@ defmodule CanneryWeb.ModalComponent do
 
   @impl true
   def render(assigns) do
-    ~L"""
-    <div id="<%= @id %>" class="fixed z-10 left-0 top-0
+    ~H"""
+    <div id={@id} class="fixed z-10 left-0 top-0
       w-full h-full overflow-hidden
       p-8 flex flex-col justify-center items-center"
       style="opacity: 1 !important; background-color: rgba(0,0,0,0.4);"
       phx-capture-click="close"
       phx-window-keydown="close"
       phx-key="escape"
-      phx-target="#<%= @id %>"
+      phx-target={"#{@id}"}
       phx-page-loading>
 
       <div class="w-full max-w-4xl relative
diff --git a/lib/cannery_web/live/tag_live/form_component.ex b/lib/cannery_web/live/tag_live/form_component.ex
index 512e2ef2..3032e4ba 100644
--- a/lib/cannery_web/live/tag_live/form_component.ex
+++ b/lib/cannery_web/live/tag_live/form_component.ex
@@ -30,6 +30,50 @@ defmodule CanneryWeb.TagLive.FormComponent do
     save_tag(socket, socket.assigns.action, tag_params)
   end
 
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <h2 class="title text-xl text-primary-500">
+        <%= @title %>
+      </h2>
+
+      <.form let={f} for={@changeset}
+        id="tag-form"
+        class="grid grid-cols-3 justify-center items-center space-y-4"
+        phx-target={@myself}
+        phx-change="validate"
+        phx-submit="save">
+
+        <%= label f, :name, class: "title text-lg text-primary-500" %>
+        <%= text_input f, :name, class: "input input-primary col-span-2" %>
+        <span class="col-span-3">
+          <%= error_tag f, :name %>
+        </span>
+
+        <%= label f, :bg_color, class: "title text-lg text-primary-500" %>
+        <span class="mx-auto col-span-2" phx-update="ignore">
+          <%= color_input f, :bg_color, value: random_color() %>
+        </span>
+        <span class="col-span-3">
+          <%= error_tag f, :bg_color %>
+        </span>
+
+        <%= label f, :text_color, class: "title text-lg text-primary-500" %>
+        <span class="mx-auto col-span-2" phx-update="ignore">
+          <%= color_input f, :text_color, value: "#ffffff" %>
+        </span>
+        <span class="col-span-3">
+          <%= error_tag f, :text_color %>
+        </span>
+
+        <%= submit "Save", class: "mx-auto btn btn-primary col-span-3",
+          phx_disable_with: "Saving..." %>
+      </.form>
+    </div>
+    """
+  end
+
   defp save_tag(socket, :edit, tag_params) do
     case Tags.update_tag(socket.assigns.tag, tag_params) do
       {:ok, _tag} ->
@@ -54,8 +98,7 @@ defmodule CanneryWeb.TagLive.FormComponent do
       {:error, %Ecto.Changeset{} = changeset} ->
         {:noreply, socket |> assign(changeset: changeset)}
     end
-  end
-
+  end-
   @doc """
   Returns a random tag color in `#ffffff` hex format
   """
diff --git a/lib/cannery_web/live/tag_live/form_component.html.leex b/lib/cannery_web/live/tag_live/form_component.html.leex
deleted file mode 100644
index acd4f0e8..00000000
--- a/lib/cannery_web/live/tag_live/form_component.html.leex
+++ /dev/null
@@ -1,36 +0,0 @@
-<h2 class="title text-xl text-primary-500">
-  <%= @title %>
-</h2>
-
-<%= f = form_for @changeset, "#",
-  id: "tag-form",
-  class: "grid grid-cols-3 justify-center items-center space-y-4",
-  phx_target: @myself,
-  phx_change: "validate",
-  phx_submit: "save" %>
-
-  <%= label f, :name, class: "title text-lg text-primary-500" %>
-  <%= text_input f, :name, class: "input input-primary col-span-2" %>
-  <span class="col-span-3">
-    <%= error_tag f, :name %>
-  </span>
-
-  <%= label f, :bg_color, class: "title text-lg text-primary-500" %>
-  <span class="mx-auto col-span-2" phx-update="ignore">
-    <%= color_input f, :bg_color, value: random_color() %>
-  </span>
-  <span class="col-span-3">
-    <%= error_tag f, :bg_color %>
-  </span>
-
-  <%= label f, :text_color, class: "title text-lg text-primary-500" %>
-  <span class="mx-auto col-span-2" phx-update="ignore">
-    <%= color_input f, :text_color, value: "#ffffff" %>
-  </span>
-  <span class="col-span-3">
-    <%= error_tag f, :text_color %>
-  </span>
-
-  <%= submit "Save", class: "mx-auto btn btn-primary col-span-3",
-    phx_disable_with: "Saving..." %>
-</form>
diff --git a/lib/cannery_web/templates/layout/live.html.heex b/lib/cannery_web/templates/layout/live.html.heex
index 1beb8a82..29b68703 100644
--- a/lib/cannery_web/templates/layout/live.html.heex
+++ b/lib/cannery_web/templates/layout/live.html.heex
@@ -1,10 +1,12 @@
 
 <main class="container min-w-full min-h-full">
   <header>
-    <%= live_component CanneryWeb.Live.Component.Topbar, current_user: assigns[:current_user] %>
+    <CanneryWeb.Component.Topbar.topbar
+      current_user={assigns[:current_user]}>
+    </CanneryWeb.Component.Topbar.topbar>
 
     <div class="mx-8 my-2 flex flex-col space-y-4 text-center">
-      <%= if live_flash(@flash, :info) do %>
+      <%= if @flash && @flash |> Map.has_key?(:info) do %>
         <p class="alert alert-info" role="alert"
           phx-click="lv:clear-flash"
           phx-value-key="info">
@@ -12,7 +14,7 @@
         </p>
       <% end %>
 
-      <%= if live_flash(@flash, :error) do %>
+      <%= if @flash && @flash |> Map.has_key?(:error) do %>
         <p class="alert alert-danger" role="alert"
           phx-click="lv:clear-flash"
           phx-value-key="error">