From bbaa1dfd6bb4f4e2cf88f441f15edb517857cfaf Mon Sep 17 00:00:00 2001
From: shibao <shibao@bubbletea.dev>
Date: Thu, 26 Jan 2023 00:28:34 -0500
Subject: [PATCH] update to liveview 0.18

---
 lib/lokal_web.ex                              |   4 +-
 lib/lokal_web/components/invite_card.ex       |  22 ++--
 lib/lokal_web/components/topbar.ex            |  68 +++++++-----
 lib/lokal_web/components/user_card.ex         |  17 ++-
 lib/lokal_web/live/init_assigns.ex            |   2 +-
 .../live/invite_live/form_component.html.heex |   2 +-
 .../live/invite_live/index.html.heex          | 103 +++++++++---------
 lib/lokal_web/live/live_helpers.ex            |  35 +++---
 lib/lokal_web/templates/layout/root.html.heex |   5 +-
 .../templates/user_confirmation/new.html.heex |  16 ++-
 .../templates/user_registration/new.html.heex |  16 ++-
 .../user_reset_password/edit.html.heex        |  16 ++-
 .../user_reset_password/new.html.heex         |  16 ++-
 .../templates/user_session/new.html.heex      |  16 ++-
 .../templates/user_settings/edit.html.heex    |  20 ++--
 lib/lokal_web/views/error_helpers.ex          |   2 +-
 lib/lokal_web/views/view_helpers.ex           |  70 +++++++-----
 mix.exs                                       |  13 ++-
 mix.lock                                      |   7 +-
 priv/gettext/actions.pot                      |  20 ++--
 priv/gettext/default.pot                      |  56 +++++++---
 priv/gettext/en/LC_MESSAGES/actions.po        |  20 ++--
 priv/gettext/en/LC_MESSAGES/default.po        |  56 +++++++---
 priv/gettext/en/LC_MESSAGES/prompts.po        |   8 +-
 priv/gettext/prompts.pot                      |   8 +-
 25 files changed, 349 insertions(+), 269 deletions(-)

diff --git a/lib/lokal_web.ex b/lib/lokal_web.ex
index 6a07712..abe14b2 100644
--- a/lib/lokal_web.ex
+++ b/lib/lokal_web.ex
@@ -90,8 +90,8 @@ defmodule LokalWeb do
       # Use all HTML functionality (forms, tags, etc)
       use Phoenix.HTML
 
-      # Import LiveView and .heex helpers (live_render, live_patch, <.form>, etc)
-      import Phoenix.LiveView.Helpers
+      # Import LiveView and .heex helpers (live_render, link, <.form>, etc)
+      import Phoenix.Component
 
       # Import basic rendering functionality (render, render_layout, etc)
       import Phoenix.View
diff --git a/lib/lokal_web/components/invite_card.ex b/lib/lokal_web/components/invite_card.ex
index 846e5d5..feb4f68 100644
--- a/lib/lokal_web/components/invite_card.ex
+++ b/lib/lokal_web/components/invite_card.ex
@@ -7,6 +7,8 @@ defmodule LokalWeb.Components.InviteCard do
   alias LokalWeb.Endpoint
 
   def invite_card(assigns) do
+    assigns = assigns |> assign_new(:code_actions, fn -> [] end)
+
     ~H"""
     <div class="mx-4 my-2 px-8 py-4 flex flex-col justify-center items-center space-y-4
       border border-gray-400 rounded-lg shadow-lg hover:shadow-md
@@ -17,8 +19,14 @@ defmodule LokalWeb.Components.InviteCard do
 
       <%= if @invite.disabled_at |> is_nil() do %>
         <h2 class="title text-md">
-          <%= gettext("Uses Left:") %>
-          <%= @invite.uses_left || "Unlimited" %>
+          <%= if @invite.uses_left do %>
+            <%= gettext(
+              "Uses Left: %{uses_left}",
+              uses_left: @invite.uses_left
+            ) %>
+          <% else %>
+            <%= gettext("Uses Left: Unlimited") %>
+          <% end %>
         </h2>
       <% else %>
         <h2 class="title text-md">
@@ -30,13 +38,9 @@ defmodule LokalWeb.Components.InviteCard do
         <code
           id={"code-#{@invite.id}"}
           class="mx-2 my-1 text-xs px-4 py-2 rounded-lg text-center break-all text-gray-100 bg-primary-800"
-        >
-          <%= Routes.user_registration_url(Endpoint, :new, invite: @invite.token) %>
-        </code>
-
-        <%= if @code_actions do %>
-          <%= render_slot(@code_actions) %>
-        <% end %>
+          phx-no-format
+        ><%= Routes.user_registration_url(Endpoint, :new, invite: @invite.token) %></code>
+        <%= render_slot(@code_actions) %>
       </div>
 
       <%= if @inner_block do %>
diff --git a/lib/lokal_web/components/topbar.ex b/lib/lokal_web/components/topbar.ex
index dd46fec..26e056f 100644
--- a/lib/lokal_web/components/topbar.ex
+++ b/lib/lokal_web/components/topbar.ex
@@ -16,10 +16,12 @@ defmodule LokalWeb.Components.Topbar do
     <nav role="navigation" class="mb-8 px-8 py-4 w-full bg-primary-400">
       <div class="flex flex-col sm:flex-row justify-between items-center">
         <div class="mb-4 sm:mb-0 sm:mr-8 flex flex-row justify-start items-center space-x-2">
-          <%= live_redirect("Lokal",
-            to: Routes.live_path(Endpoint, HomeLive),
-            class: "mx-2 my-1 leading-5 text-xl text-white hover:underline"
-          ) %>
+          <.link
+            navigate={Routes.live_path(Endpoint, HomeLive)}
+            class="mx-2 my-1 leading-5 text-xl text-white hover:underline"
+          >
+            <%= gettext("Lokal") %>
+          </.link>
 
           <%= if @title_content do %>
             <span class="mx-2 my-1">
@@ -53,47 +55,59 @@ defmodule LokalWeb.Components.Topbar do
             </form>
             <%= if @current_user.role == :admin do %>
               <li class="mx-2 my-1">
-                <%= live_redirect(gettext("Invites"),
-                  to: Routes.invite_index_path(Endpoint, :index),
-                  class: "text-white text-white hover:underline"
-                ) %>
+                <.link
+                  navigate={Routes.invite_index_path(Endpoint, :index)}
+                  class="text-white text-white hover:underline"
+                >
+                  <%= gettext("Invites") %>
+                </.link>
               </li>
             <% end %>
             <li class="mx-2 my-1">
-              <%= live_redirect(@current_user.email,
-                to: Routes.user_settings_path(Endpoint, :edit),
-                class: "text-white text-white hover:underline truncate"
-              ) %>
+              <.link
+                navigate={Routes.user_settings_path(Endpoint, :edit)}
+                class="text-white text-white hover:underline truncate"
+              >
+                <%= @current_user.email %>
+              </.link>
             </li>
             <li class="mx-2 my-1">
-              <%= link to: Routes.user_session_path(Endpoint, :delete),
-                   method: :delete,
-                   data: [confirm: dgettext("prompts", "Are you sure you want to log out?")] do %>
+              <.link
+                href={Routes.user_session_path(Endpoint, :delete)}
+                method="delete"
+                data-confirm={dgettext("prompts", "Are you sure you want to log out?")}
+              >
                 <i class="fas fa-sign-out-alt"></i>
-              <% end %>
+              </.link>
             </li>
             <%= if @current_user.role == :admin and function_exported?(Routes, :live_dashboard_path, 2) do %>
               <li class="mx-2 my-1">
-                <%= live_redirect to: Routes.live_dashboard_path(Endpoint, :home),
-                  class: "text-white text-white hover:underline" do %>
+                <.link
+                  navigate={Routes.live_dashboard_path(Endpoint, :home)}
+                  class="text-white text-white hover:underline"
+                >
                   <i class="fas fa-gauge"></i>
-                <% end %>
+                </.link>
               </li>
             <% end %>
           <% else %>
             <%= if Accounts.allow_registration?() do %>
               <li class="mx-2 my-1">
-                <%= live_redirect(dgettext("actions", "Register"),
-                  to: Routes.user_registration_path(Endpoint, :new),
-                  class: "text-white text-white hover:underline truncate"
-                ) %>
+                <.link
+                  navigate={Routes.user_registration_path(Endpoint, :new)}
+                  class="text-white text-white hover:underline truncate"
+                >
+                  <%= dgettext("actions", "Register") %>
+                </.link>
               </li>
             <% end %>
             <li class="mx-2 my-1">
-              <%= live_redirect(dgettext("actions", "Log in"),
-                to: Routes.user_session_path(Endpoint, :new),
-                class: "text-white text-white hover:underline truncate"
-              ) %>
+              <.link
+                navigate={Routes.user_session_path(Endpoint, :new)}
+                class="text-white text-white hover:underline truncate"
+              >
+                <%= dgettext("actions", "Log in") %>
+              </.link>
             </li>
           <% end %>
         </ul>
diff --git a/lib/lokal_web/components/user_card.ex b/lib/lokal_web/components/user_card.ex
index f78c3ca..4b77c01 100644
--- a/lib/lokal_web/components/user_card.ex
+++ b/lib/lokal_web/components/user_card.ex
@@ -19,16 +19,23 @@ defmodule LokalWeb.Components.UserCard do
 
       <h3 class="px-4 py-2 rounded-lg title text-lg">
         <p>
-          <%= if @user.confirmed_at |> is_nil() do %>
-            Email unconfirmed
+          <%= if @user.confirmed_at do %>
+            <%= gettext(
+              "User was confirmed at%{confirmed_datetime}",
+              confirmed_datetime: ""
+            ) %>
+            <.datetime datetime={@user.confirmed_at} />
           <% else %>
-            User was confirmed at <%= @user.confirmed_at |> display_datetime() %>
+            <%= gettext("Email unconfirmed") %>
           <% end %>
         </p>
 
         <p>
-          <%= gettext("User registered on") %>
-          <%= @user.inserted_at |> display_datetime() %>
+          <%= gettext(
+            "User registered on%{registered_datetime}",
+            registered_datetime: ""
+          ) %>
+          <.datetime datetime={@user.inserted_at} />
         </p>
       </h3>
 
diff --git a/lib/lokal_web/live/init_assigns.ex b/lib/lokal_web/live/init_assigns.ex
index 7fb4dbd..9c5bcb7 100644
--- a/lib/lokal_web/live/init_assigns.ex
+++ b/lib/lokal_web/live/init_assigns.ex
@@ -2,7 +2,7 @@ defmodule LokalWeb.InitAssigns do
   @moduledoc """
   Ensures common `assigns` are applied to all LiveViews attaching this hook.
   """
-  import Phoenix.LiveView
+  import Phoenix.Component
   alias Lokal.Accounts
 
   def on_mount(:default, _params, %{"locale" => locale, "user_token" => user_token}, socket) do
diff --git a/lib/lokal_web/live/invite_live/form_component.html.heex b/lib/lokal_web/live/invite_live/form_component.html.heex
index 27c2fa2..c56a37c 100644
--- a/lib/lokal_web/live/invite_live/form_component.html.heex
+++ b/lib/lokal_web/live/invite_live/form_component.html.heex
@@ -3,7 +3,7 @@
     <%= @title %>
   </h2>
   <.form
-    let={f}
+    :let={f}
     for={@changeset}
     id="invite-form"
     class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
diff --git a/lib/lokal_web/live/invite_live/index.html.heex b/lib/lokal_web/live/invite_live/index.html.heex
index 657bed2..4ebbd0e 100644
--- a/lib/lokal_web/live/invite_live/index.html.heex
+++ b/lib/lokal_web/live/invite_live/index.html.heex
@@ -8,15 +8,13 @@
       <%= gettext("No invites 😔") %>
     </h1>
 
-    <%= live_patch(dgettext("actions", "Invite someone new!"),
-      to: Routes.invite_index_path(Endpoint, :new),
-      class: "btn btn-primary"
-    ) %>
+    <.link patch={Routes.invite_index_path(Endpoint, :new)} class="btn btn-primary">
+      <%= dgettext("actions", "Invite someone new!") %>
+    </.link>
   <% else %>
-    <%= live_patch(dgettext("actions", "Create Invite"),
-      to: Routes.invite_index_path(Endpoint, :new),
-      class: "btn btn-primary"
-    ) %>
+    <.link patch={Routes.invite_index_path(Endpoint, :new)} class="btn btn-primary">
+      <%= dgettext("actions", "Create Invite") %>
+    </.link>
   <% end %>
 
   <div class="w-full flex flex-row flex-wrap justify-center items-center">
@@ -33,25 +31,28 @@
             </button>
           </form>
         </:code_actions>
-        <%= live_patch to: Routes.invite_index_path(Endpoint, :edit, invite),
-                   class: "text-primary-600 link",
-                   data: [qa: "edit-#{invite.id}"] do %>
+        <.link
+          patch={Routes.invite_index_path(Endpoint, :edit, invite)}
+          class="text-primary-600 link"
+          data-qa={"edit-#{invite.id}"}
+        >
           <i class="fa-fw fa-lg fas fa-edit"></i>
-        <% end %>
+        </.link>
 
-        <%= link to: "#",
-             class: "text-primary-600 link",
-             phx_click: "delete_invite",
-             phx_value_id: invite.id,
-             data: [
-               confirm:
-                 dgettext("prompts", "Are you sure you want to delete the invite for %{invite_name}?",
-                   invite_name: invite.name
-                 ),
-               qa: "delete-#{invite.id}"
-             ] do %>
+        <.link
+          href="#"
+          class="text-primary-600 link"
+          phx-click="delete_invite"
+          phx-value-id={invite.id}
+          data-confirm={
+            dgettext("prompts", "Are you sure you want to delete the invite for %{invite_name}?",
+              invite_name: invite.name
+            )
+          }
+          data-qa={"delete-#{invite.id}"}
+        >
           <i class="fa-fw fa-lg fas fa-trash"></i>
-        <% end %>
+        </.link>
 
         <%= if invite.disabled_at |> is_nil() do %>
           <a href="#" class="btn btn-primary" phx-click="disable_invite" phx-value-id={invite.id}>
@@ -92,20 +93,21 @@
     <div class="w-full flex flex-row flex-wrap justify-center items-center">
       <%= for admin <- @admins do %>
         <.user_card user={admin}>
-          <%= link to: "#",
-               class: "text-primary-600 link",
-               phx_click: "delete_user",
-               phx_value_id: admin.id,
-               data: [
-                 confirm:
-                   dgettext(
-                     "prompts",
-                     "Are you sure you want to delete %{email}? This action is permanent!",
-                     email: admin.email
-                   )
-               ] do %>
+          <.link
+            href="#"
+            class="text-primary-600 link"
+            phx-click="delete_user"
+            phx-value-id={admin.id}
+            data-confirm={
+              dgettext(
+                "prompts",
+                "Are you sure you want to delete %{email}? This action is permanent!",
+                email: admin.email
+              )
+            }
+          >
             <i class="fa-fw fa-lg fas fa-trash"></i>
-          <% end %>
+          </.link>
         </.user_card>
       <% end %>
     </div>
@@ -121,20 +123,21 @@
     <div class="w-full flex flex-row flex-wrap justify-center items-center">
       <%= for user <- @users do %>
         <.user_card user={user}>
-          <%= link to: "#",
-               class: "text-primary-600 link",
-               phx_click: "delete_user",
-               phx_value_id: user.id,
-               data: [
-                 confirm:
-                   dgettext(
-                     "prompts",
-                     "Are you sure you want to delete %{email}? This action is permanent!",
-                     email: user.email
-                   )
-               ] do %>
+          <.link
+            href="#"
+            class="text-primary-600 link"
+            phx-click="delete_user"
+            phx-value-id={user.id}
+            data-confirm={
+              dgettext(
+                "prompts",
+                "Are you sure you want to delete %{email}? This action is permanent!",
+                email: user.email
+              )
+            }
+          >
             <i class="fa-fw fa-lg fas fa-trash"></i>
-          <% end %>
+          </.link>
         </.user_card>
       <% end %>
     </div>
diff --git a/lib/lokal_web/live/live_helpers.ex b/lib/lokal_web/live/live_helpers.ex
index 19fdbed..d3c1371 100644
--- a/lib/lokal_web/live/live_helpers.ex
+++ b/lib/lokal_web/live/live_helpers.ex
@@ -3,7 +3,7 @@ defmodule LokalWeb.LiveHelpers do
   Contains resuable methods for all liveviews
   """
 
-  import Phoenix.LiveView.Helpers
+  import Phoenix.Component
   alias Phoenix.LiveView.JS
 
   @doc """
@@ -27,17 +27,17 @@ defmodule LokalWeb.LiveHelpers do
   """
   def modal(assigns) do
     ~H"""
-    <%= live_patch to: @return_to,
-      id: "modal-bg",
-      class:
-        "fade-in fixed z-10 left-0 top-0
+    <.link
+      id="modal-bg"
+      patch={@return_to}
+      class="fade-in fixed z-10 left-0 top-0
          w-full h-full overflow-hidden
-         p-8 flex flex-col justify-center items-center cursor-auto",
-      style: "background-color: rgba(0,0,0,0.4);",
-      phx_remove: hide_modal()
-    do %>
+         p-8 flex flex-col justify-center items-center cursor-auto"
+      style="background-color: rgba(0,0,0,0.4);"
+      phx_remove={hide_modal()}
+    >
       <span class="hidden"></span>
-    <% end %>
+    </.link>
 
     <div
       id="modal"
@@ -53,15 +53,16 @@ defmodule LokalWeb.LiveHelpers do
         flex flex-col justify-start items-center
         bg-white border-2 rounded-lg"
       >
-        <%= live_patch to: @return_to,
-                   id: "close",
-                   class:
-                     "absolute top-8 right-10
+        <.link
+          id="close"
+          href={@return_to}
+          class="absolute top-8 right-10
                       text-gray-500 hover:text-gray-800
-                      transition-all duration-500 ease-in-out",
-                   phx_remove: hide_modal() do %>
+                      transition-all duration-500 ease-in-out"
+          phx_remove={hide_modal()}
+        >
           <i class="fa-fw fa-lg fas fa-times"></i>
-        <% end %>
+        </.link>
 
         <div class="overflow-x-hidden overflow-y-auto w-full p-8 flex flex-col space-y-4 justify-start items-center">
           <%= render_slot(@inner_block) %>
diff --git a/lib/lokal_web/templates/layout/root.html.heex b/lib/lokal_web/templates/layout/root.html.heex
index 144f4b2..1b6e98f 100644
--- a/lib/lokal_web/templates/layout/root.html.heex
+++ b/lib/lokal_web/templates/layout/root.html.heex
@@ -5,8 +5,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <%= csrf_meta_tag() %>
-    <%= if(assigns |> Map.has_key?(:page_title), do: @page_title, else: "Lokal")
-    |> live_title_tag(suffix: " | Lokal") %>
+    <.live_title suffix={" | #{gettext("Lokal")}"}>
+      <%= assigns[:page_title] || gettext("Lokal") %>
+    </.live_title>
     <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/css/app.css")} />
     <script
       defer
diff --git a/lib/lokal_web/templates/user_confirmation/new.html.heex b/lib/lokal_web/templates/user_confirmation/new.html.heex
index 64a7cf5..2b56212 100644
--- a/lib/lokal_web/templates/user_confirmation/new.html.heex
+++ b/lib/lokal_web/templates/user_confirmation/new.html.heex
@@ -4,7 +4,7 @@
   </h1>
 
   <.form
-    let={f}
+    :let={f}
     for={:user}
     action={Routes.user_confirmation_path(@conn, :create)}
     class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
@@ -21,14 +21,12 @@
 
   <div class="flex flex-row justify-center items-center space-x-4">
     <%= if Accounts.allow_registration?() do %>
-      <%= link(dgettext("actions", "Register"),
-        to: Routes.user_registration_path(@conn, :new),
-        class: "btn btn-primary"
-      ) %>
+      <.link href={Routes.user_registration_path(@conn, :new)} class="btn btn-primary">
+        <%= dgettext("actions", "Register") %>
+      </.link>
     <% end %>
-    <%= link(dgettext("actions", "Log in"),
-      to: Routes.user_session_path(@conn, :new),
-      class: "btn btn-primary"
-    ) %>
+    <.link href={Routes.user_session_path(@conn, :new)} class="btn btn-primary">
+      <%= dgettext("actions", "Log in") %>
+    </.link>
   </div>
 </div>
diff --git a/lib/lokal_web/templates/user_registration/new.html.heex b/lib/lokal_web/templates/user_registration/new.html.heex
index 140a7ab..1badb1a 100644
--- a/lib/lokal_web/templates/user_registration/new.html.heex
+++ b/lib/lokal_web/templates/user_registration/new.html.heex
@@ -4,7 +4,7 @@
   </h1>
 
   <.form
-    let={f}
+    :let={f}
     for={@changeset}
     action={Routes.user_registration_path(@conn, :create)}
     class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
@@ -44,13 +44,11 @@
   <hr class="hr" />
 
   <div class="flex flex-row justify-center items-center space-x-4">
-    <%= link(dgettext("actions", "Log in"),
-      to: Routes.user_session_path(@conn, :new),
-      class: "btn btn-primary"
-    ) %>
-    <%= link(dgettext("actions", "Forgot your password?"),
-      to: Routes.user_reset_password_path(@conn, :new),
-      class: "btn btn-primary"
-    ) %>
+    <.link href={Routes.user_session_path(@conn, :new)} class="btn btn-primary">
+      <%= dgettext("actions", "Log in") %>
+    </.link>
+    <.link href={Routes.user_reset_password_path(@conn, :new)} class="btn btn-primary">
+      <%= dgettext("actions", "Forgot your password?") %>
+    </.link>
   </div>
 </div>
diff --git a/lib/lokal_web/templates/user_reset_password/edit.html.heex b/lib/lokal_web/templates/user_reset_password/edit.html.heex
index 0fb7205..662b234 100644
--- a/lib/lokal_web/templates/user_reset_password/edit.html.heex
+++ b/lib/lokal_web/templates/user_reset_password/edit.html.heex
@@ -4,7 +4,7 @@
   </h1>
 
   <.form
-    let={f}
+    :let={f}
     for={@changeset}
     action={Routes.user_reset_password_path(@conn, :update, @token)}
     class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
@@ -39,14 +39,12 @@
 
   <div class="flex flex-row justify-center items-center space-x-4">
     <%= if Accounts.allow_registration?() do %>
-      <%= link(dgettext("actions", "Register"),
-        to: Routes.user_registration_path(@conn, :new),
-        class: "btn btn-primary"
-      ) %>
+      <.link href={Routes.user_registration_path(@conn, :new)} class="btn btn-primary">
+        <%= dgettext("actions", "Register") %>
+      </.link>
     <% end %>
-    <%= link(dgettext("actions", "Log in"),
-      to: Routes.user_session_path(@conn, :new),
-      class: "btn btn-primary"
-    ) %>
+    <.link href={Routes.user_session_path(@conn, :new)} class="btn btn-primary">
+      <%= dgettext("actions", "Log in") %>
+    </.link>
   </div>
 </div>
diff --git a/lib/lokal_web/templates/user_reset_password/new.html.heex b/lib/lokal_web/templates/user_reset_password/new.html.heex
index af89ff6..0f54975 100644
--- a/lib/lokal_web/templates/user_reset_password/new.html.heex
+++ b/lib/lokal_web/templates/user_reset_password/new.html.heex
@@ -4,7 +4,7 @@
   </h1>
 
   <.form
-    let={f}
+    :let={f}
     for={:user}
     action={Routes.user_reset_password_path(@conn, :create)}
     class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
@@ -21,14 +21,12 @@
 
   <div class="flex flex-row justify-center items-center space-x-4">
     <%= if Accounts.allow_registration?() do %>
-      <%= link(dgettext("actions", "Register"),
-        to: Routes.user_registration_path(@conn, :new),
-        class: "btn btn-primary"
-      ) %>
+      <.link href={Routes.user_registration_path(@conn, :new)} class="btn btn-primary">
+        <%= dgettext("actions", "Register") %>
+      </.link>
     <% end %>
-    <%= link(dgettext("actions", "Log in"),
-      to: Routes.user_session_path(@conn, :new),
-      class: "btn btn-primary"
-    ) %>
+    <.link href={Routes.user_session_path(@conn, :new)} class="btn btn-primary">
+      <%= dgettext("actions", "Log in") %>
+    </.link>
   </div>
 </div>
diff --git a/lib/lokal_web/templates/user_session/new.html.heex b/lib/lokal_web/templates/user_session/new.html.heex
index d05f8a5..fada967 100644
--- a/lib/lokal_web/templates/user_session/new.html.heex
+++ b/lib/lokal_web/templates/user_session/new.html.heex
@@ -4,7 +4,7 @@
   </h1>
 
   <.form
-    let={f}
+    :let={f}
     for={@conn}
     action={Routes.user_session_path(@conn, :create)}
     as="user"
@@ -36,14 +36,12 @@
 
   <div class="flex flex-row justify-center items-center space-x-4">
     <%= if Accounts.allow_registration?() do %>
-      <%= link(dgettext("actions", "Register"),
-        to: Routes.user_registration_path(@conn, :new),
-        class: "btn btn-primary"
-      ) %>
+      <.link href={Routes.user_registration_path(@conn, :new)} class="btn btn-primary">
+        <%= dgettext("actions", "Register") %>
+      </.link>
     <% end %>
-    <%= link(dgettext("actions", "Forgot your password?"),
-      to: Routes.user_reset_password_path(@conn, :new),
-      class: "btn btn-primary"
-    ) %>
+    <.link href={Routes.user_reset_password_path(@conn, :new)} class="btn btn-primary">
+      <%= dgettext("actions", "Forgot your password?") %>
+    </.link>
   </div>
 </div>
diff --git a/lib/lokal_web/templates/user_settings/edit.html.heex b/lib/lokal_web/templates/user_settings/edit.html.heex
index 86d99c8..142b2f3 100644
--- a/lib/lokal_web/templates/user_settings/edit.html.heex
+++ b/lib/lokal_web/templates/user_settings/edit.html.heex
@@ -6,7 +6,7 @@
   <hr class="hr" />
 
   <.form
-    let={f}
+    :let={f}
     for={@email_changeset}
     action={Routes.user_settings_path(@conn, :update)}
     class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
@@ -49,7 +49,7 @@
   <hr class="hr" />
 
   <.form
-    let={f}
+    :let={f}
     for={@password_changeset}
     action={Routes.user_settings_path(@conn, :update)}
     class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
@@ -104,7 +104,7 @@
   <hr class="hr" />
 
   <.form
-    let={f}
+    :let={f}
     for={@locale_changeset}
     action={Routes.user_settings_path(@conn, :update)}
     class="flex flex-col space-y-4 justify-center items-center"
@@ -136,10 +136,12 @@
 
   <hr class="hr" />
 
-  <%= link(dgettext("actions", "Delete User"),
-    to: Routes.user_settings_path(@conn, :delete, @current_user),
-    method: :delete,
-    class: "btn btn-alert",
-    data: [confirm: dgettext("prompts", "Are you sure you want to delete your account?")]
-  ) %>
+  <.link
+    href={Routes.user_settings_path(@conn, :delete, @current_user)}
+    method={:delete}
+    class="btn btn-alert"
+    data-confirm={dgettext("prompts", "Are you sure you want to delete your account?")}
+  >
+    <%= dgettext("actions", "Delete User") %>
+  </.link>
 </div>
diff --git a/lib/lokal_web/views/error_helpers.ex b/lib/lokal_web/views/error_helpers.ex
index 49a84b8..0a055ce 100644
--- a/lib/lokal_web/views/error_helpers.ex
+++ b/lib/lokal_web/views/error_helpers.ex
@@ -4,7 +4,7 @@ defmodule LokalWeb.ErrorHelpers do
   """
 
   use Phoenix.HTML
-  import Phoenix.LiveView.Helpers
+  import Phoenix.Component
   alias Ecto.Changeset
   alias Phoenix.{HTML.Form, LiveView.Rendered}
 
diff --git a/lib/lokal_web/views/view_helpers.ex b/lib/lokal_web/views/view_helpers.ex
index 889ca3b..7ebad37 100644
--- a/lib/lokal_web/views/view_helpers.ex
+++ b/lib/lokal_web/views/view_helpers.ex
@@ -5,48 +5,62 @@ defmodule LokalWeb.ViewHelpers do
   :view`
   """
 
-  import Phoenix.LiveView.Helpers
+  use Phoenix.Component
 
   @doc """
-  Returns a <time> element that renders the naivedatetime in the user's local
-  timezone with Alpine.js
+  Phoenix.Component for a <time> element that renders the naivedatetime in the
+  user's local timezone with Alpine.js
   """
-  @spec display_datetime(NaiveDateTime.t() | nil) :: Phoenix.LiveView.Rendered.t()
-  def display_datetime(nil), do: ""
 
-  def display_datetime(datetime) do
-    assigns = %{
-      datetime: datetime |> DateTime.from_naive!("Etc/UTC") |> DateTime.to_iso8601(:extended)
-    }
+  attr :datetime, :any, required: true, doc: "A `DateTime` struct or nil"
 
+  def datetime(assigns) do
     ~H"""
-    <time datetime={@datetime} x-data={"{
-        date:
-          Intl.DateTimeFormat([], {dateStyle: 'short', timeStyle: 'long'})
-            .format(new Date(\"#{@datetime}\"))
-      }"} x-text="date">
-      <%= @datetime %>
-    </time>
+    <%= if @datetime do %>
+      <time
+        datetime={cast_datetime(@datetime)}
+        x-data={"{
+          datetime:
+            Intl.DateTimeFormat([], {dateStyle: 'short', timeStyle: 'long'})
+              .format(new Date(\"#{cast_datetime(@datetime)}\"))
+        }"}
+        x-text="datetime"
+      >
+        <%= cast_datetime(@datetime) %>
+      </time>
+    <% end %>
     """
   end
 
+  @spec cast_datetime(NaiveDateTime.t() | nil) :: String.t()
+  defp cast_datetime(%NaiveDateTime{} = datetime) do
+    datetime |> DateTime.from_naive!("Etc/UTC") |> DateTime.to_iso8601(:extended)
+  end
+
+  defp cast_datetime(_datetime), do: ""
+
   @doc """
-  Returns a <date> element that renders the Date in the user's local
-  timezone with Alpine.js
+  Phoenix.Component for a <date> element that renders the Date in the user's
+  local timezone with Alpine.js
   """
-  @spec display_date(Date.t() | nil) :: Phoenix.LiveView.Rendered.t()
-  def display_date(nil), do: ""
 
-  def display_date(date) do
-    assigns = %{date: date |> Date.to_iso8601(:extended)}
+  attr :date, :any, required: true, doc: "A `Date` struct or nil"
 
+  def date(assigns) do
     ~H"""
-    <time datetime={@date} x-data={"{
-        date:
-          Intl.DateTimeFormat([], {timeZone: 'Etc/UTC', dateStyle: 'short'}).format(new Date(\"#{@date}\"))
-      }"} x-text="date">
-      <%= @date %>
-    </time>
+    <%= if @date do %>
+      <time
+        datetime={@date |> Date.to_iso8601(:extended)}
+        x-data={"{
+          date:
+            Intl.DateTimeFormat([], {timeZone: 'Etc/UTC', dateStyle: 'short'})
+              .format(new Date(\"#{@date |> Date.to_iso8601(:extended)}\"))
+        }"}
+        x-text="date"
+      >
+        <%= @date |> Date.to_iso8601(:extended) %>
+      </time>
+    <% end %>
     """
   end
 end
diff --git a/mix.exs b/mix.exs
index 1dffe78..b4876a8 100644
--- a/mix.exs
+++ b/mix.exs
@@ -48,21 +48,22 @@ defmodule Lokal.MixProject do
   defp deps do
     [
       {:bcrypt_elixir, "~> 2.0"},
-      {:phoenix, "~> 1.6.6"},
+      {:phoenix, "~> 1.6.0"},
       {:phoenix_ecto, "~> 4.4"},
-      {:ecto_sql, "~> 3.6"},
-      {:postgrex, ">= 0.0.0"},
       {:phoenix_html, "~> 3.0"},
       {:phoenix_live_reload, "~> 1.2", only: :dev},
-      {:phoenix_live_view, "~> 0.17.5"},
-      {:floki, ">= 0.30.0", only: :test},
+      {:phoenix_live_view, "~> 0.18.0"},
+      {:phoenix_view, "~> 1.1"},
       {:phoenix_live_dashboard, "~> 0.6"},
-      {:oban, "~> 2.10"},
+      {:ecto_sql, "~> 3.6"},
+      {:postgrex, ">= 0.0.0"},
+      {:floki, ">= 0.30.0", only: :test},
       # {:esbuild, "~> 0.3", runtime: Mix.env() == :dev},
       {:ex_doc, "~> 0.27", only: :dev, runtime: false},
       {:swoosh, "~> 1.6"},
       {:gen_smtp, "~> 1.0"},
       {:phoenix_swoosh, "~> 1.0"},
+      {:oban, "~> 2.10"},
       {:telemetry_metrics, "~> 0.6"},
       {:telemetry_poller, "~> 1.0"},
       {:gettext, "~> 0.18"},
diff --git a/mix.lock b/mix.lock
index 7ad69b3..0382bcc 100644
--- a/mix.lock
+++ b/mix.lock
@@ -33,13 +33,12 @@
   "phoenix": {:hex, :phoenix, "1.6.15", "0a1d96bbc10747fd83525370d691953cdb6f3ccbac61aa01b4acb012474b047d", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.0", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 1.0 or ~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: false]}, {:plug, "~> 1.10", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.2", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "d70ab9fbf6b394755ea88b644d34d79d8b146e490973151f248cacd122d20672"},
   "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.5", "1495bb014be12c9a9252eca04b9af54246f6b5c1e4cd1f30210cd00ec540cf8e", [: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.7", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 0.6.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "ef4fa50dd78364409039c99cf6f98ab5209b4c5f8796c17f4db118324f0db852"},
+  "phoenix_live_dashboard": {:hex, :phoenix_live_dashboard, "0.7.1", "b0bf8f3348dec4910907a2ad1453e642f6fe4d444376c1c9b26222d63c73cf97", [:mix], [{:ecto, "~> 3.6.2 or ~> 3.7", [hex: :ecto, repo: "hexpm", optional: true]}, {:ecto_mysql_extras, "~> 0.5", [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.18.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 0.6 or ~> 1.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "b6c5d744bf4b40692b1b361d3608bdfd05aeab83e17c7bc217d730f007f31abf"},
   "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.4.1", "2aff698f5e47369decde4357ba91fc9c37c6487a512b41732818f2204a8ef1d3", [: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", "9bffb834e7ddf08467fe54ae58b5785507aaba6255568ae22b4d46e2bb3615ab"},
-  "phoenix_live_view": {:hex, :phoenix_live_view, "0.17.12", "74f4c0ad02d7deac2d04f50b52827a5efdc5c6e7fac5cede145f5f0e4183aedc", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.0 or ~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.1", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "af6dd5e0aac16ff43571f527a8e0616d62cb80b10eb87aac82170243e50d99c8"},
+  "phoenix_live_view": {:hex, :phoenix_live_view, "0.18.2", "635cf07de947235deb030cd6b776c71a3b790ab04cebf526aa8c879fe17c7784", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.1", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "da287a77327e996cc166e4c440c3ad5ab33ccdb151b91c793209b39ebbce5b75"},
   "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.1.1", "ba04e489ef03763bf28a17eb2eaddc2c20c6d217e2150a61e3298b0f4c2012b5", [:mix], [], "hexpm", "81367c6d1eea5878ad726be80808eb5a787a23dee699f96e72b1109c57cdd8d9"},
   "phoenix_swoosh": {:hex, :phoenix_swoosh, "1.1.0", "f8e4780705c9f254cc853f7a40e25f7198ba4d91102bcfad2226669b69766b35", [:mix], [{:finch, "~> 0.8", [hex: :finch, repo: "hexpm", optional: true]}, {:hackney, "~> 1.10", [hex: :hackney, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6", [hex: :phoenix, repo: "hexpm", optional: true]}, {:phoenix_html, "~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:phoenix_view, "~> 1.0 or ~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: false]}, {:swoosh, "~> 1.5", [hex: :swoosh, repo: "hexpm", optional: false]}], "hexpm", "aa82f10afd9a4b6080fdf3274dbb9432b25b210d42b4b6b55308f6e59cd87c3d"},
-  "phoenix_template": {:hex, :phoenix_template, "1.0.0", "c57bc5044f25f007dc86ab21895688c098a9f846a8dda6bc40e2d0ddc146e38f", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "1b066f99a26fd22064c12b2600a9a6e56700f591bf7b20b418054ea38b4d4357"},
-  "phoenix_view": {:hex, :phoenix_view, "2.0.2", "6bd4d2fd595ef80d33b439ede6a19326b78f0f1d8d62b9a318e3d9c1af351098", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}], "hexpm", "a929e7230ea5c7ee0e149ffcf44ce7cf7f4b6d2bfe1752dd7c084cdff152d36f"},
+  "phoenix_view": {:hex, :phoenix_view, "1.1.2", "1b82764a065fb41051637872c7bd07ed2fdb6f5c3bd89684d4dca6e10115c95a", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "7ae90ad27b09091266f6adbb61e1d2516a7c3d7062c6789d46a7554ec40f3a56"},
   "plug": {:hex, :plug, "1.14.0", "ba4f558468f69cbd9f6b356d25443d0b796fbdc887e03fa89001384a9cac638f", [: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", "bf020432c7d4feb7b3af16a0c2701455cbbbb95e5b6866132cb09eb0c29adc14"},
   "plug_cowboy": {:hex, :plug_cowboy, "2.6.0", "d1cf12ff96a1ca4f52207c5271a6c351a4733f413803488d75b70ccf44aebec2", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "073cf20b753ce6682ed72905cd62a2d4bd9bad1bf9f7feb02a1b8e525bd94fa6"},
   "plug_crypto": {:hex, :plug_crypto, "1.2.3", "8f77d13aeb32bfd9e654cb68f0af517b371fb34c56c9f2b58fe3df1235c1251a", [:mix], [], "hexpm", "b5672099c6ad5c202c45f5a403f21a3411247f164e4a8fab056e5cd8a290f4a2"},
diff --git a/priv/gettext/actions.pot b/priv/gettext/actions.pot
index 08f01c5..96e5968 100644
--- a/priv/gettext/actions.pot
+++ b/priv/gettext/actions.pot
@@ -22,7 +22,7 @@ msgstr ""
 msgid "Change password"
 msgstr ""
 
-#: lib/lokal_web/templates/user_settings/edit.html.heex:139
+#: lib/lokal_web/templates/user_settings/edit.html.heex:145
 #, elixir-autogen, elixir-format
 msgid "Delete User"
 msgstr ""
@@ -34,9 +34,9 @@ msgstr ""
 msgid "Forgot your password?"
 msgstr ""
 
-#: lib/lokal_web/components/topbar.ex:93
+#: lib/lokal_web/components/topbar.ex:109
 #: lib/lokal_web/templates/user_confirmation/new.html.heex:29
-#: lib/lokal_web/templates/user_registration/new.html.heex:47
+#: lib/lokal_web/templates/user_registration/new.html.heex:48
 #: lib/lokal_web/templates/user_reset_password/edit.html.heex:47
 #: lib/lokal_web/templates/user_reset_password/new.html.heex:29
 #: lib/lokal_web/templates/user_session/new.html.heex:3
@@ -45,13 +45,13 @@ msgstr ""
 msgid "Log in"
 msgstr ""
 
-#: lib/lokal_web/components/topbar.ex:86
-#: lib/lokal_web/templates/user_confirmation/new.html.heex:24
+#: lib/lokal_web/components/topbar.ex:100
+#: lib/lokal_web/templates/user_confirmation/new.html.heex:25
 #: lib/lokal_web/templates/user_registration/new.html.heex:3
 #: lib/lokal_web/templates/user_registration/new.html.heex:41
-#: lib/lokal_web/templates/user_reset_password/edit.html.heex:42
-#: lib/lokal_web/templates/user_reset_password/new.html.heex:24
-#: lib/lokal_web/templates/user_session/new.html.heex:39
+#: lib/lokal_web/templates/user_reset_password/edit.html.heex:43
+#: lib/lokal_web/templates/user_reset_password/new.html.heex:25
+#: lib/lokal_web/templates/user_session/new.html.heex:40
 #, elixir-autogen, elixir-format
 msgid "Register"
 msgstr ""
@@ -73,7 +73,7 @@ msgstr ""
 msgid "Send instructions to reset password"
 msgstr ""
 
-#: lib/lokal_web/live/invite_live/index.html.heex:32
+#: lib/lokal_web/live/invite_live/index.html.heex:30
 #, elixir-autogen, elixir-format
 msgid "Copy to clipboard"
 msgstr ""
@@ -83,7 +83,7 @@ msgstr ""
 msgid "Create Invite"
 msgstr ""
 
-#: lib/lokal_web/live/invite_live/index.html.heex:11
+#: lib/lokal_web/live/invite_live/index.html.heex:12
 #, elixir-autogen, elixir-format
 msgid "Invite someone new!"
 msgstr ""
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 9fdb200..3537bc1 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -31,12 +31,12 @@ msgstr ""
 msgid "Forgot your password?"
 msgstr ""
 
-#: lib/lokal_web/components/invite_card.ex:25
+#: lib/lokal_web/components/invite_card.ex:33
 #, elixir-autogen, elixir-format
 msgid "Invite Disabled"
 msgstr ""
 
-#: lib/lokal_web/components/topbar.ex:56
+#: lib/lokal_web/components/topbar.ex:62
 #: lib/lokal_web/live/invite_live/index.ex:41
 #: lib/lokal_web/live/invite_live/index.html.heex:3
 #, elixir-autogen, elixir-format
@@ -84,11 +84,6 @@ msgstr ""
 msgid "Shop from your community"
 msgstr ""
 
-#: lib/lokal_web/components/invite_card.ex:20
-#, elixir-autogen, elixir-format
-msgid "Uses Left:"
-msgstr ""
-
 #: lib/lokal_web/live/home_live.html.heex:3
 #, elixir-autogen, elixir-format
 msgid "Welcome to Lokal"
@@ -99,12 +94,12 @@ msgstr ""
 msgid "Home"
 msgstr ""
 
-#: lib/lokal_web/live/invite_live/index.html.heex:89
+#: lib/lokal_web/live/invite_live/index.html.heex:90
 #, elixir-autogen, elixir-format
 msgid "Admins"
 msgstr ""
 
-#: lib/lokal_web/live/invite_live/index.html.heex:58
+#: lib/lokal_web/live/invite_live/index.html.heex:59
 #, elixir-autogen, elixir-format
 msgid "Disable"
 msgstr ""
@@ -114,7 +109,7 @@ msgstr ""
 msgid "Edit Invite"
 msgstr ""
 
-#: lib/lokal_web/live/invite_live/index.html.heex:62
+#: lib/lokal_web/live/invite_live/index.html.heex:63
 #, elixir-autogen, elixir-format
 msgid "Enable"
 msgstr ""
@@ -134,12 +129,12 @@ msgstr ""
 msgid "No invites 😔"
 msgstr ""
 
-#: lib/lokal_web/live/invite_live/index.html.heex:78
+#: lib/lokal_web/live/invite_live/index.html.heex:79
 #, elixir-autogen, elixir-format
 msgid "Set Unlimited"
 msgstr ""
 
-#: lib/lokal_web/live/invite_live/index.html.heex:118
+#: lib/lokal_web/live/invite_live/index.html.heex:120
 #, elixir-autogen, elixir-format
 msgid "Users"
 msgstr ""
@@ -155,12 +150,39 @@ msgstr ""
 msgid "English"
 msgstr ""
 
-#: lib/lokal_web/components/user_card.ex:30
-#, elixir-autogen, elixir-format
-msgid "User registered on"
-msgstr ""
-
 #: lib/lokal_web/templates/user_registration/new.html.heex:32
 #, elixir-autogen, elixir-format
 msgid "Language"
 msgstr ""
+
+#: lib/lokal_web/components/user_card.ex:29
+#, elixir-autogen, elixir-format
+msgid "Email unconfirmed"
+msgstr ""
+
+#: lib/lokal_web/components/topbar.ex:23
+#: lib/lokal_web/templates/layout/root.html.heex:8
+#: lib/lokal_web/templates/layout/root.html.heex:9
+#, elixir-autogen, elixir-format
+msgid "Lokal"
+msgstr ""
+
+#: lib/lokal_web/components/user_card.ex:34
+#, elixir-autogen, elixir-format
+msgid "User registered on%{registered_datetime}"
+msgstr ""
+
+#: lib/lokal_web/components/user_card.ex:23
+#, elixir-autogen, elixir-format
+msgid "User was confirmed at%{confirmed_datetime}"
+msgstr ""
+
+#: lib/lokal_web/components/invite_card.ex:23
+#, elixir-autogen, elixir-format
+msgid "Uses Left: %{uses_left}"
+msgstr ""
+
+#: lib/lokal_web/components/invite_card.ex:28
+#, elixir-autogen, elixir-format
+msgid "Uses Left: Unlimited"
+msgstr ""
diff --git a/priv/gettext/en/LC_MESSAGES/actions.po b/priv/gettext/en/LC_MESSAGES/actions.po
index 2d3a734..570b025 100644
--- a/priv/gettext/en/LC_MESSAGES/actions.po
+++ b/priv/gettext/en/LC_MESSAGES/actions.po
@@ -22,7 +22,7 @@ msgstr ""
 msgid "Change password"
 msgstr ""
 
-#: lib/lokal_web/templates/user_settings/edit.html.heex:139
+#: lib/lokal_web/templates/user_settings/edit.html.heex:145
 #, elixir-autogen, elixir-format
 msgid "Delete User"
 msgstr ""
@@ -34,9 +34,9 @@ msgstr ""
 msgid "Forgot your password?"
 msgstr ""
 
-#: lib/lokal_web/components/topbar.ex:93
+#: lib/lokal_web/components/topbar.ex:109
 #: lib/lokal_web/templates/user_confirmation/new.html.heex:29
-#: lib/lokal_web/templates/user_registration/new.html.heex:47
+#: lib/lokal_web/templates/user_registration/new.html.heex:48
 #: lib/lokal_web/templates/user_reset_password/edit.html.heex:47
 #: lib/lokal_web/templates/user_reset_password/new.html.heex:29
 #: lib/lokal_web/templates/user_session/new.html.heex:3
@@ -45,13 +45,13 @@ msgstr ""
 msgid "Log in"
 msgstr ""
 
-#: lib/lokal_web/components/topbar.ex:86
-#: lib/lokal_web/templates/user_confirmation/new.html.heex:24
+#: lib/lokal_web/components/topbar.ex:100
+#: lib/lokal_web/templates/user_confirmation/new.html.heex:25
 #: lib/lokal_web/templates/user_registration/new.html.heex:3
 #: lib/lokal_web/templates/user_registration/new.html.heex:41
-#: lib/lokal_web/templates/user_reset_password/edit.html.heex:42
-#: lib/lokal_web/templates/user_reset_password/new.html.heex:24
-#: lib/lokal_web/templates/user_session/new.html.heex:39
+#: lib/lokal_web/templates/user_reset_password/edit.html.heex:43
+#: lib/lokal_web/templates/user_reset_password/new.html.heex:25
+#: lib/lokal_web/templates/user_session/new.html.heex:40
 #, elixir-autogen, elixir-format
 msgid "Register"
 msgstr ""
@@ -73,7 +73,7 @@ msgstr ""
 msgid "Send instructions to reset password"
 msgstr ""
 
-#: lib/lokal_web/live/invite_live/index.html.heex:32
+#: lib/lokal_web/live/invite_live/index.html.heex:30
 #, elixir-autogen, elixir-format
 msgid "Copy to clipboard"
 msgstr ""
@@ -83,7 +83,7 @@ msgstr ""
 msgid "Create Invite"
 msgstr ""
 
-#: lib/lokal_web/live/invite_live/index.html.heex:11
+#: lib/lokal_web/live/invite_live/index.html.heex:12
 #, elixir-autogen, elixir-format
 msgid "Invite someone new!"
 msgstr ""
diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po
index e15ced6..19c90c2 100644
--- a/priv/gettext/en/LC_MESSAGES/default.po
+++ b/priv/gettext/en/LC_MESSAGES/default.po
@@ -31,12 +31,12 @@ msgstr ""
 msgid "Forgot your password?"
 msgstr ""
 
-#: lib/lokal_web/components/invite_card.ex:25
+#: lib/lokal_web/components/invite_card.ex:33
 #, elixir-autogen, elixir-format
 msgid "Invite Disabled"
 msgstr ""
 
-#: lib/lokal_web/components/topbar.ex:56
+#: lib/lokal_web/components/topbar.ex:62
 #: lib/lokal_web/live/invite_live/index.ex:41
 #: lib/lokal_web/live/invite_live/index.html.heex:3
 #, elixir-autogen, elixir-format
@@ -84,11 +84,6 @@ msgstr ""
 msgid "Shop from your community"
 msgstr ""
 
-#: lib/lokal_web/components/invite_card.ex:20
-#, elixir-autogen, elixir-format
-msgid "Uses Left:"
-msgstr ""
-
 #: lib/lokal_web/live/home_live.html.heex:3
 #, elixir-autogen, elixir-format
 msgid "Welcome to Lokal"
@@ -99,12 +94,12 @@ msgstr ""
 msgid "Home"
 msgstr ""
 
-#: lib/lokal_web/live/invite_live/index.html.heex:89
+#: lib/lokal_web/live/invite_live/index.html.heex:90
 #, elixir-autogen, elixir-format
 msgid "Admins"
 msgstr ""
 
-#: lib/lokal_web/live/invite_live/index.html.heex:58
+#: lib/lokal_web/live/invite_live/index.html.heex:59
 #, elixir-autogen, elixir-format
 msgid "Disable"
 msgstr ""
@@ -114,7 +109,7 @@ msgstr ""
 msgid "Edit Invite"
 msgstr ""
 
-#: lib/lokal_web/live/invite_live/index.html.heex:62
+#: lib/lokal_web/live/invite_live/index.html.heex:63
 #, elixir-autogen, elixir-format
 msgid "Enable"
 msgstr ""
@@ -134,12 +129,12 @@ msgstr ""
 msgid "No invites 😔"
 msgstr ""
 
-#: lib/lokal_web/live/invite_live/index.html.heex:78
+#: lib/lokal_web/live/invite_live/index.html.heex:79
 #, elixir-autogen, elixir-format
 msgid "Set Unlimited"
 msgstr ""
 
-#: lib/lokal_web/live/invite_live/index.html.heex:118
+#: lib/lokal_web/live/invite_live/index.html.heex:120
 #, elixir-autogen, elixir-format
 msgid "Users"
 msgstr ""
@@ -155,12 +150,39 @@ msgstr ""
 msgid "English"
 msgstr ""
 
-#: lib/lokal_web/components/user_card.ex:30
-#, elixir-autogen, elixir-format
-msgid "User registered on"
-msgstr ""
-
 #: lib/lokal_web/templates/user_registration/new.html.heex:32
 #, elixir-autogen, elixir-format
 msgid "Language"
 msgstr ""
+
+#: lib/lokal_web/components/user_card.ex:29
+#, elixir-autogen, elixir-format
+msgid "Email unconfirmed"
+msgstr ""
+
+#: lib/lokal_web/components/topbar.ex:23
+#: lib/lokal_web/templates/layout/root.html.heex:8
+#: lib/lokal_web/templates/layout/root.html.heex:9
+#, elixir-autogen, elixir-format
+msgid "Lokal"
+msgstr ""
+
+#: lib/lokal_web/components/user_card.ex:34
+#, elixir-autogen, elixir-format, fuzzy
+msgid "User registered on%{registered_datetime}"
+msgstr ""
+
+#: lib/lokal_web/components/user_card.ex:23
+#, elixir-autogen, elixir-format
+msgid "User was confirmed at%{confirmed_datetime}"
+msgstr ""
+
+#: lib/lokal_web/components/invite_card.ex:23
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Uses Left: %{uses_left}"
+msgstr ""
+
+#: lib/lokal_web/components/invite_card.ex:28
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Uses Left: Unlimited"
+msgstr ""
diff --git a/priv/gettext/en/LC_MESSAGES/prompts.po b/priv/gettext/en/LC_MESSAGES/prompts.po
index dad566d..a34c618 100644
--- a/priv/gettext/en/LC_MESSAGES/prompts.po
+++ b/priv/gettext/en/LC_MESSAGES/prompts.po
@@ -25,7 +25,7 @@ msgstr ""
 msgid "Are you sure you want to delete your account?"
 msgstr ""
 
-#: lib/lokal_web/components/topbar.ex:71
+#: lib/lokal_web/components/topbar.ex:78
 #, elixir-autogen, elixir-format
 msgid "Are you sure you want to log out?"
 msgstr ""
@@ -70,8 +70,8 @@ msgstr ""
 msgid "Your account has been deleted"
 msgstr ""
 
-#: lib/lokal_web/live/invite_live/index.html.heex:101
-#: lib/lokal_web/live/invite_live/index.html.heex:130
+#: lib/lokal_web/live/invite_live/index.html.heex:102
+#: lib/lokal_web/live/invite_live/index.html.heex:132
 #, elixir-autogen, elixir-format
 msgid "Are you sure you want to delete %{email}? This action is permanent!"
 msgstr ""
@@ -136,7 +136,7 @@ msgstr ""
 msgid "Are you sure you want to delete the invite for %{invite_name}?"
 msgstr ""
 
-#: lib/lokal_web/live/invite_live/index.html.heex:73
+#: lib/lokal_web/live/invite_live/index.html.heex:74
 #, elixir-autogen, elixir-format
 msgid "Are you sure you want to make %{invite_name} unlimited?"
 msgstr ""
diff --git a/priv/gettext/prompts.pot b/priv/gettext/prompts.pot
index 5f1e99c..1754250 100644
--- a/priv/gettext/prompts.pot
+++ b/priv/gettext/prompts.pot
@@ -25,7 +25,7 @@ msgstr ""
 msgid "Are you sure you want to delete your account?"
 msgstr ""
 
-#: lib/lokal_web/components/topbar.ex:71
+#: lib/lokal_web/components/topbar.ex:78
 #, elixir-autogen, elixir-format
 msgid "Are you sure you want to log out?"
 msgstr ""
@@ -70,8 +70,8 @@ msgstr ""
 msgid "Your account has been deleted"
 msgstr ""
 
-#: lib/lokal_web/live/invite_live/index.html.heex:101
-#: lib/lokal_web/live/invite_live/index.html.heex:130
+#: lib/lokal_web/live/invite_live/index.html.heex:102
+#: lib/lokal_web/live/invite_live/index.html.heex:132
 #, elixir-autogen, elixir-format
 msgid "Are you sure you want to delete %{email}? This action is permanent!"
 msgstr ""
@@ -136,7 +136,7 @@ msgstr ""
 msgid "Are you sure you want to delete the invite for %{invite_name}?"
 msgstr ""
 
-#: lib/lokal_web/live/invite_live/index.html.heex:73
+#: lib/lokal_web/live/invite_live/index.html.heex:74
 #, elixir-autogen, elixir-format
 msgid "Are you sure you want to make %{invite_name} unlimited?"
 msgstr ""