Update to new interpolation syntax

Includes a fix to a brittle test that failed due to changes in the
number of linebreaks.

lib/music_library_web/components/core_components.ex

@@ -84,7 +84,7 @@ defmodule MusicLibraryWeb.CoreComponents do
                 </button>
               </div>
               <div id={"#{@id}-content"}>
-                <%= render_slot(@inner_block) %>
+                {render_slot(@inner_block)}
               </div>
             </.focus_wrap>
           </div>
@@ -129,9 +129,9 @@ defmodule MusicLibraryWeb.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>
@@ -162,7 +162,7 @@ defmodule MusicLibraryWeb.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>
 
@@ -174,7 +174,7 @@ defmodule MusicLibraryWeb.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>
@@ -208,9 +208,9 @@ defmodule MusicLibraryWeb.CoreComponents do
     ~H"""
     <.form :let={f} for={@for} as={@as} {@rest}>
       <div class="mt-10 space-y-8 bg-white dark:bg-zinc-800">
-        <%= 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>
@@ -245,7 +245,7 @@ defmodule MusicLibraryWeb.CoreComponents do
       ]}
       {@rest}
     >
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </button>
     """
   end
@@ -330,9 +330,9 @@ defmodule MusicLibraryWeb.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
@@ -340,7 +340,7 @@ defmodule MusicLibraryWeb.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}
@@ -358,10 +358,10 @@ defmodule MusicLibraryWeb.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
@@ -369,7 +369,7 @@ defmodule MusicLibraryWeb.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}
@@ -380,7 +380,7 @@ defmodule MusicLibraryWeb.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
@@ -389,7 +389,7 @@ defmodule MusicLibraryWeb.CoreComponents do
   def input(assigns) do
     ~H"""
     <div>
-      <.label for={@id}><%= @label %></.label>
+      <.label for={@id}>{@label}</.label>
       <input
         type={@type}
         name={@name}
@@ -410,7 +410,7 @@ defmodule MusicLibraryWeb.CoreComponents do
         ]}
         {@rest}
       />
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """
   end
@@ -424,7 +424,7 @@ defmodule MusicLibraryWeb.CoreComponents do
   def label(assigns) do
     ~H"""
     <label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800 dark:text-zinc-400">
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </label>
     """
   end
@@ -438,7 +438,7 @@ defmodule MusicLibraryWeb.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
@@ -460,13 +460,13 @@ defmodule MusicLibraryWeb.CoreComponents do
     ]}>
       <div class="font-semibold">
         <h1 class="text-sm md:text-base lg:text-2xl text-zinc-900">
-          <%= render_slot(@inner_block) %>
+          {render_slot(@inner_block)}
         </h1>
         <h2 :if={@subtitle != []} class="mt-2 text-sm md:text-base text-zinc-600">
-          <%= render_slot(@subtitle) %>
+          {render_slot(@subtitle)}
         </h2>
       </div>
-      <div class="flex justify-center gap-2 sm:flex-none mt-4 mb-4"><%= render_slot(@actions) %></div>
+      <div class="flex justify-center gap-2 sm:flex-none mt-4 mb-4">{render_slot(@actions)}</div>
     </header>
     """
   end
@@ -507,9 +507,9 @@ defmodule MusicLibraryWeb.CoreComponents do
       <table class="md: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>
@@ -527,7 +527,7 @@ defmodule MusicLibraryWeb.CoreComponents do
               <div class="block py-4 pr-6">
                 <span class="absolute -inset-y-px right-0 -left-4 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>
@@ -538,7 +538,7 @@ defmodule MusicLibraryWeb.CoreComponents do
                   :for={action <- @action}
                   class="relative ml-4 max-sm:ml-2 max-sm:text-sm 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>
@@ -568,8 +568,8 @@ defmodule MusicLibraryWeb.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>
@@ -594,7 +594,7 @@ defmodule MusicLibraryWeb.CoreComponents do
         class="text-sm font-semibold leading-6 text-zinc-900 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300"
       >
         <.icon name="hero-arrow-left-solid" class="h-3 w-3" />
-        <%= render_slot(@inner_block) %>
+        {render_slot(@inner_block)}
       </.link>
     </div>
     """

lib/music_library_web/components/layouts/app.html.heex

@@ -4,28 +4,28 @@
       <div class="flex">
         <div class="flex space-x-4 md:space-x-8">
           <.link navigate={~p"/"} class={section_link_classes(assigns[:nav_section], :stats)}>
-            <%= gettext("Stats") %>
+            {gettext("Stats")}
           </.link>
           <.link
             navigate={~p"/collection"}
             class={section_link_classes(assigns[:nav_section], :records)}
           >
-            <%= gettext("Collection") %>
+            {gettext("Collection")}
           </.link>
           <.link
             navigate={~p"/wishlist"}
             class={section_link_classes(assigns[:nav_section], :wishlist)}
           >
-            <%= gettext("Wishlist") %>
+            {gettext("Wishlist")}
           </.link>
         </div>
       </div>
       <div class="flex space-x-8">
         <a class={["max-sm:hidden" | nav_link_classes()]} } href={~p"/dev/dashboard"}>
-          <%= gettext("Dev dashboard") %>
+          {gettext("Dev dashboard")}
         </a>
         <a class={nav_link_classes()} } href={~p"/login"}>
-          <%= gettext("Logout") %>
+          {gettext("Logout")}
         </a>
       </div>
     </div>
@@ -34,6 +34,6 @@
 <main class="px-4 py-4 max-sm:pb-20 sm:px-6 lg:px-8">
   <div class="mx-auto max-w-screen-xl">
     <.flash_group flash={@flash} />
-    <%= @inner_content %>
+    {@inner_content}
   </div>
 </main>

lib/music_library_web/components/layouts/root.html.heex

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
     <.live_title suffix=" · Music Library">
-      <%= assigns[:page_title] || assigns.conn.request_path %>
+      {assigns[:page_title] || assigns.conn.request_path}
     </.live_title>
     <link rel="preconnect" href="https://rsms.me/" />
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
@@ -35,7 +35,7 @@
     </script>
   </head>
   <body class="bg-white dark:bg-zinc-900">
-    <%= @inner_content %>
+    {@inner_content}
     <footer class="mt-8 border-t border-slate-900/10 dark:border-slate-300/10">
       <div class="mx-auto max-w-7xl px-6 pb-8 lg:px-8">
         <div class="pt-8 flex items-center justify-between">
@@ -55,7 +55,7 @@
             </a>
           </div>
           <p class="text-sm/6 text-zinc-600 dark:text-zinc-400 order-1">
-            <span><%= gettext("Made by") %></span>
+            <span>{gettext("Made by")}</span>
             <a
               class="font-medium text-zinc-500 hover:border-zinc-300 hover:text-zinc-700 dark:text-zinc-300 dark:hover:text-zinc-200"
               href="https://claudio-ortolina.org"

lib/music_library_web/components/layouts/unauthenticated.html.heex

@@ -1,6 +1,6 @@
 <main class="px-4 py-8 max-sm:pb-20 sm:px-6 lg:px-8">
   <div class="mx-auto max-w-5xl">
     <.flash_group flash={@flash} />
-    <%= @inner_content %>
+    {@inner_content}
   </div>
 </main>

lib/music_library_web/components/pagination.ex

@@ -32,7 +32,7 @@ defmodule MusicLibraryWeb.Pagination do
             "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
           ]}
         >
-          <%= gettext("Previous") %>
+          {gettext("Previous")}
         </.link>
         <.link
           :if={@page_links.next_page}
@@ -45,7 +45,7 @@ defmodule MusicLibraryWeb.Pagination do
             "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
           ]}
         >
-          <%= gettext("Next") %>
+          {gettext("Next")}
         </.link>
       </div>
       <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-items-center sm:justify-center">
@@ -108,7 +108,7 @@ defmodule MusicLibraryWeb.Pagination do
       ]}
       patch={"?" <> encode_query(page: @page_number, page_size: @page_size, query: @query)}
     >
-      <span class="sr-only"><%= gettext("Next") %></span>
+      <span class="sr-only">{gettext("Next")}</span>
       <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
         <path
           fill-rule="evenodd"
@@ -130,7 +130,7 @@ defmodule MusicLibraryWeb.Pagination do
       class="relative inline-flex items-center rounded-l-md px-2 py-2 text-zinc-400 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-50 focus:z-20 focus:outline-offset-0"
       patch={"?" <> encode_query(page: @page_number, page_size: @page_size, query: @query)}
     >
-      <span class="sr-only"><%= gettext("Previous") %></span>
+      <span class="sr-only">{gettext("Previous")}</span>
       <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
         <path
           fill-rule="evenodd"
@@ -158,7 +158,7 @@ defmodule MusicLibraryWeb.Pagination do
   defp numbered_link(assigns) when assigns.active do
     ~H"""
     <span class="relative z-10 inline-flex items-center first:rounded-l-md last:rounded-r-md bg-zinc-600 dark:bg-zinc-300 px-4 py-2 text-sm font-semibold text-white dark:text-zinc-700 focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600">
-      <%= @page_number %>
+      {@page_number}
     </span>
     """
   end
@@ -169,7 +169,7 @@ defmodule MusicLibraryWeb.Pagination do
       class="relative hidden items-center first:rounded-l-md last:rounded-r-md px-4 py-2 text-sm font-semibold text-zinc-900 dark:text-zinc-400 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-300 hover:text-zinc-500 focus:z-20 focus:outline-offset-0 md:inline-flex"
       patch={"?" <> encode_query(page: @page_number, page_size: @page_size, query: @query)}
     >
-      <%= @page_number %>
+      {@page_number}
     </.link>
     """
   end