chore(chat): interpolate values using new curly braces syntax

2024-12-24 00:05:51 +00:00 · 2024-12-24 00:05:51 +00:00 · ada10afa96
commit ada10afa96
parent cd45664a63
6 changed files with 41 additions and 39 deletions
--- a/lib/slax_web/components/core_components.ex
+++ b/lib/slax_web/components/core_components.ex
@ -80,7 +80,7 @@ defmodule SlaxWeb.CoreComponents do
                </button>
              </div>
              <div id={"#{@id}-content"}>
-                <%= render_slot(@inner_block) %>
+                {render_slot(@inner_block)}
              </div>
            </.focus_wrap>
          </div>
@ -125,9 +125,9 @@ defmodule SlaxWeb.CoreComponents do
      <p :if={@title} class="flex items-center gap-1.5 text-sm font-semibold leading-6">
        <.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" />
        <.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" />
-        <%= @title %>
+        {@title}
      </p>
-      <p class="mt-2 text-sm leading-5"><%= msg %></p>
+      <p class="mt-2 text-sm leading-5">{msg}</p>
      <button type="button" class="group absolute top-1 right-1 p-2" aria-label={gettext("close")}>
        <.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
      </button>
@ -158,7 +158,7 @@ defmodule SlaxWeb.CoreComponents do
        phx-connected={hide("#client-error")}
        hidden
      >
-        <%= gettext("Attempting to reconnect") %>
+        {gettext("Attempting to reconnect")}
        <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
      </.flash>

@ -170,7 +170,7 @@ defmodule SlaxWeb.CoreComponents do
        phx-connected={hide("#server-error")}
        hidden
      >
-        <%= gettext("Hang in there while we get back on track") %>
+        {gettext("Hang in there while we get back on track")}
        <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
      </.flash>
    </div>
@ -204,9 +204,9 @@ defmodule SlaxWeb.CoreComponents do
    ~H"""
    <.form :let={f} for={@for} as={@as} {@rest}>
      <div class="mt-10 space-y-8 bg-white">
-        <%= render_slot(@inner_block, f) %>
+        {render_slot(@inner_block, f)}
        <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
-          <%= render_slot(action, f) %>
+          {render_slot(action, f)}
        </div>
      </div>
    </.form>
@ -238,7 +238,7 @@ defmodule SlaxWeb.CoreComponents do
      ]}
      {@rest}
    >
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
    </button>
    """
  end
@ -322,9 +322,9 @@ defmodule SlaxWeb.CoreComponents do
          class="rounded border-zinc-300 text-zinc-900 focus:ring-0"
          {@rest}
        />
-        <%= @label %>
+        {@label}
      </label>
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.error :for={msg <- @errors}>{msg}</.error>
    </div>
    """
  end
@ -332,7 +332,7 @@ defmodule SlaxWeb.CoreComponents do
  def input(%{type: "select"} = assigns) do
    ~H"""
    <div>
-      <.label for={@id}><%= @label %></.label>
+      <.label for={@id}>{@label}</.label>
      <select
        id={@id}
        name={@name}
@ -340,10 +340,10 @@ defmodule SlaxWeb.CoreComponents do
        multiple={@multiple}
        {@rest}
      >
-        <option :if={@prompt} value=""><%= @prompt %></option>
-        <%= Phoenix.HTML.Form.options_for_select(@options, @value) %>
+        <option :if={@prompt} value="">{@prompt}</option>
+        {Phoenix.HTML.Form.options_for_select(@options, @value)}
      </select>
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.error :for={msg <- @errors}>{msg}</.error>
    </div>
    """
  end
@ -351,7 +351,7 @@ defmodule SlaxWeb.CoreComponents do
  def input(%{type: "textarea"} = assigns) do
    ~H"""
    <div>
-      <.label for={@id}><%= @label %></.label>
+      <.label for={@id}>{@label}</.label>
      <textarea
        id={@id}
        name={@name}
@ -362,7 +362,7 @@ defmodule SlaxWeb.CoreComponents do
        ]}
        {@rest}
      ><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.error :for={msg <- @errors}>{msg}</.error>
    </div>
    """
  end
@ -371,7 +371,7 @@ defmodule SlaxWeb.CoreComponents do
  def input(assigns) do
    ~H"""
    <div>
-      <.label for={@id}><%= @label %></.label>
+      <.label for={@id}>{@label}</.label>
      <input
        type={@type}
        name={@name}
@ -384,7 +384,7 @@ defmodule SlaxWeb.CoreComponents do
        ]}
        {@rest}
      />
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.error :for={msg <- @errors}>{msg}</.error>
    </div>
    """
  end
@ -398,7 +398,7 @@ defmodule SlaxWeb.CoreComponents do
  def label(assigns) do
    ~H"""
    <label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800">
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
    </label>
    """
  end
@ -412,7 +412,7 @@ defmodule SlaxWeb.CoreComponents do
    ~H"""
    <p class="mt-3 flex gap-3 text-sm leading-6 text-rose-600">
      <.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" />
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
    </p>
    """
  end
@ -431,13 +431,13 @@ defmodule SlaxWeb.CoreComponents do
    <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
      <div>
        <h1 class="text-lg font-semibold leading-8 text-zinc-800">
-          <%= render_slot(@inner_block) %>
+          {render_slot(@inner_block)}
        </h1>
        <p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
-          <%= render_slot(@subtitle) %>
+          {render_slot(@subtitle)}
        </p>
      </div>
-      <div class="flex-none"><%= render_slot(@actions) %></div>
+      <div class="flex-none">{render_slot(@actions)}</div>
    </header>
    """
  end
@ -478,9 +478,9 @@ defmodule SlaxWeb.CoreComponents do
      <table class="w-[40rem] mt-11 sm:w-full">
        <thead class="text-sm text-left leading-6 text-zinc-500">
          <tr>
-            <th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th>
+            <th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal">{col[:label]}</th>
            <th :if={@action != []} class="relative p-0 pb-4">
-              <span class="sr-only"><%= gettext("Actions") %></span>
+              <span class="sr-only">{gettext("Actions")}</span>
            </th>
          </tr>
        </thead>
@ -498,7 +498,7 @@ defmodule SlaxWeb.CoreComponents do
              <div class="block py-4 pr-6">
                <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
                <span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
-                  <%= render_slot(col, @row_item.(row)) %>
+                  {render_slot(col, @row_item.(row))}
                </span>
              </div>
            </td>
@ -509,7 +509,7 @@ defmodule SlaxWeb.CoreComponents do
                  :for={action <- @action}
                  class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
                >
-                  <%= render_slot(action, @row_item.(row)) %>
+                  {render_slot(action, @row_item.(row))}
                </span>
              </div>
            </td>
@ -539,8 +539,8 @@ defmodule SlaxWeb.CoreComponents do
    <div class="mt-14">
      <dl class="-my-4 divide-y divide-zinc-100">
        <div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
-          <dt class="w-1/4 flex-none text-zinc-500"><%= item.title %></dt>
-          <dd class="text-zinc-700"><%= render_slot(item) %></dd>
+          <dt class="w-1/4 flex-none text-zinc-500">{item.title}</dt>
+          <dd class="text-zinc-700">{render_slot(item)}</dd>
        </div>
      </dl>
    </div>
@ -565,7 +565,7 @@ defmodule SlaxWeb.CoreComponents do
        class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
      >
        <.icon name="hero-arrow-left-solid" class="h-3 w-3" />
-        <%= render_slot(@inner_block) %>
+        {render_slot(@inner_block)}
      </.link>
    </div>
    """
@ -591,10 +591,12 @@ defmodule SlaxWeb.CoreComponents do
  """
  attr :name, :string, required: true
  attr :class, :string, default: nil
+  attr :id, :string, default: nil
+  attr :style, :string, default: nil

  def icon(%{name: "hero-" <> _} = assigns) do
    ~H"""
-    <span class={[@name, @class]} />
+    <span class={[@name, @class]} id={@id} style={@style} />
    """
  end

--- a/lib/slax_web/components/layouts/app.html.heex
+++ b/lib/slax_web/components/layouts/app.html.heex
@ -1,4 +1,4 @@
 <main class="flex w-full h-screen text-gray-700">
  <.flash_group flash={@flash} />
-  <%= @inner_content %>
+  {@inner_content}
 </main>
--- a/lib/slax_web/components/layouts/root.html.heex
+++ b/lib/slax_web/components/layouts/root.html.heex
@ -5,13 +5,13 @@
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="csrf-token" content={get_csrf_token()} />
    <.live_title suffix=" · Slax">
-      <%= assigns[:page_title] || "Slax" %>
+      {assigns[:page_title] || "Slax"}
    </.live_title>
    <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
    <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
    </script>
  </head>
  <body class="bg-white">
-    <%= @inner_content %>
+    {@inner_content}
  </body>
 </html>
--- a/lib/slax_web/controllers/page_html/home.html.heex
+++ b/lib/slax_web/controllers/page_html/home.html.heex
@ -49,7 +49,7 @@
    <h1 class="text-brand mt-10 flex items-center text-sm font-semibold leading-6">
      Phoenix Framework
      <small class="bg-brand/5 text-[0.8125rem] ml-3 rounded-full px-2 font-medium leading-6">
-        v<%= Application.spec(:phoenix, :vsn) %>
+        v{Application.spec(:phoenix, :vsn)}
      </small>
    </h1>
    <p class="text-[2rem] mt-4 font-semibold leading-10 tracking-tighter text-zinc-900 text-balance">
--- a/lib/slax_web/live/chat_room_live/edit.ex
+++ b/lib/slax_web/live/chat_room_live/edit.ex
@ -9,7 +9,7 @@ defmodule SlaxWeb.ChatRoomLive.Edit do
    ~H"""
    <div class="mx-auto w-96 mt-12">
      <.header>
-        <%= @page_title %>
+        {@page_title}
        <:actions>
          <.link
            class="font-normal text-xs text-blue-600 hover:text-blue-700"
--- a/lib/slax_web/live/chat_room_live/index.ex
+++ b/lib/slax_web/live/chat_room_live/index.ex
@ -8,7 +8,7 @@ defmodule SlaxWeb.ChatRoomLive.Index do
    ~H"""
    <main class="flex-1 p-6 max-w-4xl mx-auto">
      <div class="mb-4">
-        <h1 class="text-xl font-semibold"><%= @page_title %></h1>
+        <h1 class="text-xl font-semibold">{@page_title}</h1>
      </div>
      <div class="bg-slate-50 border rounded">
        <div id="rooms" class="divide-y" phx-update="stream">
@ -20,7 +20,7 @@ defmodule SlaxWeb.ChatRoomLive.Index do
          >
            <div>
              <div class="font-medium mb-1">
-                #<%= room.name %>
+                #{room.name}
                <span class="mx-1 text-gray-500 font-light text-sm opacity-0 group-hover:opacity-100">
                  View room
                </span>
@ -33,7 +33,7 @@ defmodule SlaxWeb.ChatRoomLive.Index do
                  <span class="mx-1">·</span>
                <% end %>
                <%= if room.topic do %>
-                  <%= room.topic %>
+                  {room.topic}
                <% end %>
              </div>
            </div>