improve formatting

lib/memex_web.ex

@@ -46,7 +46,7 @@ defmodule MemexWeb do
   def live_view do
     quote do
       use Phoenix.LiveView,
-        layout: {MemexWeb.LayoutView, :live}
+        layout: {MemexWeb.LayoutView, "live.html"}
 
       on_mount MemexWeb.InitAssigns
       unquote(view_helpers())

lib/memex_web/components/invite_card.ex

@@ -6,6 +6,8 @@ defmodule MemexWeb.Components.InviteCard do
   use MemexWeb, :component
 
   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
@@ -16,8 +18,14 @@ defmodule MemexWeb.Components.InviteCard do
 
       <%= if @invite.disabled_at |> is_nil() do %>
         <h2 class="title text-md">
-          <%= gettext("Uses Left:") %>
+          <%= if @invite.uses_left do %>
-          <%= @invite.uses_left || gettext("unlimited") %>
+            <%= gettext(
+              "uses left: %{uses_left}",
+              uses_left: @invite.uses_left
+            ) %>
+          <% else %>
+            <%= gettext("uses left: unlimited") %>
+          <% end %>
         </h2>
       <% else %>
         <h2 class="title text-md">
@@ -29,13 +37,9 @@ defmodule MemexWeb.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"
-        >
+          phx-no-format
-          <%= Routes.user_registration_url(Endpoint, :new, invite: @invite.token) %>
+        ><%= Routes.user_registration_url(Endpoint, :new, invite: @invite.token) %></code>
-        </code>
-
-        <%= if @code_actions do %>
         <%= render_slot(@code_actions) %>
-        <% end %>
       </div>
 
       <%= if @inner_block do %>

lib/memex_web/components/user_card.ex

@@ -19,19 +19,23 @@ defmodule MemexWeb.Components.UserCard do
 
       <h3 class="px-4 py-2 rounded-lg title text-lg">
         <p>
-          <%= if @user.confirmed_at |> is_nil() do %>
+          <%= if @user.confirmed_at do %>
-            <%= gettext("email unconfirmed") %>
+            <%= gettext(
+              "user confirmed on%{confirmed_datetime}",
+              confirmed_datetime: ""
+            ) %>
+            <.datetime datetime={@user.confirmed_at} />
           <% else %>
-            <p>
+            <%= gettext("email unconfirmed") %>
-              <%= gettext("user confirmed on") %>
-              <%= @user.confirmed_at |> display_datetime() %>
-            </p>
           <% end %>
         </p>
 
         <p>
-          <%= gettext("user registered on") %>
+          <%= gettext(
-          <%= @user.inserted_at |> display_datetime() %>
+            "user registered on%{registered_datetime}",
+            registered_datetime: ""
+          ) %>
+          <.datetime datetime={@user.inserted_at} />
         </p>
       </h3>
 

lib/memex_web/views/view_helpers.ex

@@ -5,56 +5,62 @@ defmodule MemexWeb.ViewHelpers do
   :view`
   """
 
-  import Phoenix.Component
+  use Phoenix.Component
 
   @doc """
-  Returns a <time> element that renders the naivedatetime in the user's local
+  Phoenix.Component for a <time> element that renders the naivedatetime in the
-  timezone with Alpine.js
+  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
+  attr :datetime, :any, required: true, doc: "A `DateTime` struct or nil"
-    assigns = %{
-      datetime: datetime |> DateTime.from_naive!("Etc/UTC") |> DateTime.to_iso8601(:extended)
-    }
 
+  def datetime(assigns) do
     ~H"""
+    <%= if @datetime do %>
       <time
-      datetime={@datetime}
+        datetime={cast_datetime(@datetime)}
         x-data={"{
-        date:
+          datetime:
             Intl.DateTimeFormat([], {dateStyle: 'short', timeStyle: 'long'})
-            .format(new Date(\"#{@datetime}\"))
+              .format(new Date(\"#{cast_datetime(@datetime)}\"))
         }"}
-      x-text="date"
+        x-text="datetime"
       >
-      <%= @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
+  Phoenix.Component for a <date> element that renders the Date in the user's
-  timezone with Alpine.js
+  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
+  attr :date, :any, required: true, doc: "A `Date` struct or nil"
-    assigns = %{date: date |> Date.to_iso8601(:extended)}
 
+  def date(assigns) do
     ~H"""
+    <%= if @date do %>
       <time
-      datetime={@date}
+        datetime={@date |> Date.to_iso8601(:extended)}
         x-data={"{
           date:
-          Intl.DateTimeFormat([], {timeZone: 'Etc/UTC', dateStyle: 'short'}).format(new Date(\"#{@date}\"))
+            Intl.DateTimeFormat([], {timeZone: 'Etc/UTC', dateStyle: 'short'})
+              .format(new Date(\"#{@date |> Date.to_iso8601(:extended)}\"))
         }"}
         x-text="date"
       >
-      <%= @date %>
+        <%= @date |> Date.to_iso8601(:extended) %>
       </time>
+    <% end %>
     """
   end
 end

mix.exs

@@ -48,21 +48,22 @@ defmodule Memex.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.18.3"},
+      {:phoenix_live_view, "~> 0.18.0"},
+      {:phoenix_view, "~> 1.1"},
+      {:phoenix_live_dashboard, "~> 0.6"},
+      {:ecto_sql, "~> 3.6"},
+      {:postgrex, ">= 0.0.0"},
       {:floki, ">= 0.30.0", only: :test},
-      {:phoenix_live_dashboard, "~> 0.7.0"},
-      {:oban, "~> 2.10"},
       # {: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"},

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.7.2", "97cc4ff2dba1ebe504db72cb45098cb8e91f11160528b980bd282cc45c73b29c", [: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.3", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 0.6 or ~> 1.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "0e5fdf063c7a3b620c566a30fcf68b7ee02e5e46fe48ee46a6ec3ba382dc05b7"},
+  "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.18.11", "c50eac83dae6b5488859180422dfb27b2c609de87f4aa5b9c926ecd0501cd44f", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.1", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "76c99a0ffb47cd95bf06a917e74f282a603f3e77b00375f3c2dd95110971b102"},
+  "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, "1.1.2", "1b82764a065fb41051637872c7bd07ed2fdb6f5c3bd89684d4dca6e10115c95a", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "7ae90ad27b09091266f6adbb61e1d2516a7c3d7062c6789d46a7554ec40f3a56"},
-  "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"},
   "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"},

priv/gettext/de/LC_MESSAGES/default.po

@@ -56,11 +56,6 @@ msgstr ""
 msgid "Settings"
 msgstr ""
 
-#: lib/memex_web/components/invite_card.ex:19
-#, elixir-autogen, elixir-format
-msgid "Uses Left:"
-msgstr ""
-
 #: lib/memex_web/live/invite_live/form_component.html.heex:24
 #, elixir-autogen, elixir-format
 msgid "Uses left"
@@ -147,7 +142,7 @@ msgstr ""
 msgid "email"
 msgstr ""
 
-#: lib/memex_web/components/user_card.ex:23
+#: lib/memex_web/components/user_card.ex:29
 #, elixir-autogen, elixir-format
 msgid "email unconfirmed"
 msgstr ""
@@ -183,7 +178,7 @@ msgstr ""
 msgid "instance information"
 msgstr ""
 
-#: lib/memex_web/components/invite_card.ex:24
+#: lib/memex_web/components/invite_card.ex:32
 #, elixir-autogen, elixir-format
 msgid "invite disabled"
 msgstr ""
@@ -330,11 +325,6 @@ msgstr ""
 msgid "tags"
 msgstr ""
 
-#: lib/memex_web/components/invite_card.ex:20
-#, elixir-autogen, elixir-format
-msgid "unlimited"
-msgstr ""
-
 #: lib/memex_web/live/invite_live/index.html.heex:120
 #, elixir-autogen, elixir-format
 msgid "users"
@@ -646,17 +636,27 @@ msgstr ""
 msgid "while memEx fully supports multiple users, each memEx instance should be treated as a single cohesive and collaborative document."
 msgstr ""
 
-#: lib/memex_web/components/user_card.ex:26
-#, elixir-autogen, elixir-format
-msgid "user confirmed on"
-msgstr ""
-
-#: lib/memex_web/components/user_card.ex:33
-#, elixir-autogen, elixir-format, fuzzy
-msgid "user registered on"
-msgstr ""
-
 #: lib/memex_web/templates/user_registration/new.html.heex:32
 #, elixir-autogen, elixir-format, fuzzy
 msgid "language"
 msgstr ""
+
+#: lib/memex_web/components/user_card.ex:23
+#, elixir-autogen, elixir-format, fuzzy
+msgid "user confirmed on%{confirmed_datetime}"
+msgstr ""
+
+#: lib/memex_web/components/user_card.ex:34
+#, elixir-autogen, elixir-format, fuzzy
+msgid "user registered on%{registered_datetime}"
+msgstr ""
+
+#: lib/memex_web/components/invite_card.ex:22
+#, elixir-autogen, elixir-format
+msgid "uses left: %{uses_left}"
+msgstr ""
+
+#: lib/memex_web/components/invite_card.ex:27
+#, elixir-autogen, elixir-format
+msgid "uses left: unlimited"
+msgstr ""

priv/gettext/default.pot

@@ -45,11 +45,6 @@ msgstr ""
 msgid "Settings"
 msgstr ""
 
-#: lib/memex_web/components/invite_card.ex:19
-#, elixir-autogen, elixir-format
-msgid "Uses Left:"
-msgstr ""
-
 #: lib/memex_web/live/invite_live/form_component.html.heex:24
 #, elixir-autogen, elixir-format
 msgid "Uses left"
@@ -136,7 +131,7 @@ msgstr ""
 msgid "email"
 msgstr ""
 
-#: lib/memex_web/components/user_card.ex:23
+#: lib/memex_web/components/user_card.ex:29
 #, elixir-autogen, elixir-format
 msgid "email unconfirmed"
 msgstr ""
@@ -172,7 +167,7 @@ msgstr ""
 msgid "instance information"
 msgstr ""
 
-#: lib/memex_web/components/invite_card.ex:24
+#: lib/memex_web/components/invite_card.ex:32
 #, elixir-autogen, elixir-format
 msgid "invite disabled"
 msgstr ""
@@ -319,11 +314,6 @@ msgstr ""
 msgid "tags"
 msgstr ""
 
-#: lib/memex_web/components/invite_card.ex:20
-#, elixir-autogen, elixir-format
-msgid "unlimited"
-msgstr ""
-
 #: lib/memex_web/live/invite_live/index.html.heex:120
 #, elixir-autogen, elixir-format
 msgid "users"
@@ -635,17 +625,27 @@ msgstr ""
 msgid "while memEx fully supports multiple users, each memEx instance should be treated as a single cohesive and collaborative document."
 msgstr ""
 
-#: lib/memex_web/components/user_card.ex:26
-#, elixir-autogen, elixir-format
-msgid "user confirmed on"
-msgstr ""
-
-#: lib/memex_web/components/user_card.ex:33
-#, elixir-autogen, elixir-format
-msgid "user registered on"
-msgstr ""
-
 #: lib/memex_web/templates/user_registration/new.html.heex:32
 #, elixir-autogen, elixir-format
 msgid "language"
 msgstr ""
+
+#: lib/memex_web/components/user_card.ex:23
+#, elixir-autogen, elixir-format
+msgid "user confirmed on%{confirmed_datetime}"
+msgstr ""
+
+#: lib/memex_web/components/user_card.ex:34
+#, elixir-autogen, elixir-format
+msgid "user registered on%{registered_datetime}"
+msgstr ""
+
+#: lib/memex_web/components/invite_card.ex:22
+#, elixir-autogen, elixir-format
+msgid "uses left: %{uses_left}"
+msgstr ""
+
+#: lib/memex_web/components/invite_card.ex:27
+#, elixir-autogen, elixir-format
+msgid "uses left: unlimited"
+msgstr ""