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/live/artist_live/show.html.heex

@@ -1,17 +1,17 @@
 <div class="mt-4 px-4 sm:px-6 lg:px-8">
   <h1 class="mt-1 flex font-semibold text-base lg:text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
-    <%= @artist.name %>
+    {@artist.name}
   </h1>
   <p
     :if={artist_info = @artist_info.ok? && @artist_info.result}
     class="bio mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400"
   >
-    <%= (artist_info.bio || gettext("Biography not available")) |> raw() %>
+    {(artist_info.bio || gettext("Biography not available")) |> raw()}
   </p>
 
   <div :if={@artist_records.collection !== []} class="mt-4">
     <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
-      <%= gettext("Collection") %>
+      {gettext("Collection")}
     </h2>
     <ul
       role="list"
@@ -29,19 +29,19 @@
             class="absolute inset-0 focus:outline-none"
             phx-click={JS.navigate(~p"/collection/#{record}")}
           >
-            <span class="sr-only"><%= gettext("View details") %></span>
+            <span class="sr-only">{gettext("View details")}</span>
           </button>
         </div>
         <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
-          <%= record.title %>
+          {record.title}
         </p>
         <p class="pointer-events-none block text-sm font-medium text-zinc-500">
-          <%= Records.Record.format_long_label(record.format) %> · <%= Records.Record.type_long_label(
+          {Records.Record.format_long_label(record.format)} · {Records.Record.type_long_label(
             record.type
-          ) %>
+          )}
         </p>
         <p class="pointer-events-none block text-sm font-medium text-zinc-500">
-          <%= Records.Record.format_release(record.release) %>
+          {Records.Record.format_release(record.release)}
         </p>
       </li>
     </ul>
@@ -49,7 +49,7 @@
 
   <div :if={@artist_records.wishlist !== []} class="mt-4">
     <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
-      <%= gettext("Wishlist") %>
+      {gettext("Wishlist")}
     </h2>
     <ul
       role="list"
@@ -67,19 +67,19 @@
             class="absolute inset-0 focus:outline-none"
             phx-click={JS.navigate(~p"/wishlist/#{record}")}
           >
-            <span class="sr-only"><%= gettext("View details") %></span>
+            <span class="sr-only">{gettext("View details")}</span>
           </button>
         </div>
         <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
-          <%= record.title %>
+          {record.title}
         </p>
         <p class="pointer-events-none block text-sm font-medium text-zinc-500">
-          <%= Records.Record.format_long_label(record.format) %> · <%= Records.Record.type_long_label(
+          {Records.Record.format_long_label(record.format)} · {Records.Record.type_long_label(
             record.type
-          ) %>
+          )}
         </p>
         <p class="pointer-events-none block text-sm font-medium text-zinc-500">
-          <%= Records.Record.format_release(record.release) %>
+          {Records.Record.format_release(record.release)}
         </p>
       </li>
     </ul>

lib/music_library_web/live/collection_live/index.html.heex

@@ -14,17 +14,17 @@
         />
       </form>
       <.link patch={~p"/collection/import"}>
-        <.button><%= gettext("Import") %></.button>
+        <.button>{gettext("Import")}</.button>
       </.link>
     </div>
   </header>
 
   <p class="text-right text-sm max-sm:text-xs mt-8 text-zinc-900 dark:text-zinc-400">
-    <%= gettext(
+    {gettext(
       "Showing <b>%{visible}</b> of <b>%{total}</b> records",
       %{visible: Enum.count(@streams.records), total: @record_list_params.total_entries}
     )
-    |> raw() %>
+    |> raw()}
   </p>
 </div>
 
@@ -53,22 +53,22 @@
             class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
             patch={~p"/artists/#{artist.musicbrainz_id}"}
           >
-            <%= artist.name %>
+            {artist.name}
           </.link>
         </h1>
         <h2 class="mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
-          <%= record.title %>
+          {record.title}
         </h2>
         <p class="mt-1 text-xs leading-5 text-zinc-500 dark:text-zinc-400">
-          <%= Records.Record.format_release(record.release) %>
+          {Records.Record.format_release(record.release)}
           <span class="sm:hidden">
-            · <%= Records.Record.format_long_label(record.format) %> · <%= Records.Record.type_long_label(
+            · {Records.Record.format_long_label(record.format)} · {Records.Record.type_long_label(
               record.type
-            ) %>
+            )}
             <span :if={Records.Record.child_release_groups_count(record) > 0}>
               ·
               <span class="sr-only">
-                <%= gettext("Number of included records") %>
+                {gettext("Number of included records")}
               </span>
               <span class={[
                 "inline-flex items-center rounded-full",
@@ -78,7 +78,7 @@
                 "text-gray-600 dark:text-gray-500",
                 "ring-gray-500/10 dark:ring-gray-400/20"
               ]}>
-                <%= Records.Record.child_release_groups_count(record) %>
+                {Records.Record.child_release_groups_count(record)}
               </span>
             </span>
           </span>
@@ -88,13 +88,13 @@
     <div class="flex shrink-0 items-center gap-x-6">
       <div class="hidden sm:flex sm:flex-col sm:items-end">
         <p class="text-xs leading-6 text-zinc-900 dark:text-zinc-300">
-          <%= Records.Record.format_long_label(record.format) %> · <%= Records.Record.type_long_label(
+          {Records.Record.format_long_label(record.format)} · {Records.Record.type_long_label(
             record.type
-          ) %>
+          )}
           <span :if={Records.Record.child_release_groups_count(record) > 0}>
             ·
             <span class="sr-only">
-              <%= gettext("Number of included records") %>
+              {gettext("Number of included records")}
             </span>
             <span class={[
               "inline-flex items-center rounded-full",
@@ -104,7 +104,7 @@
               "text-gray-600 dark:text-gray-500",
               "ring-gray-500/10 dark:ring-gray-400/20"
             ]}>
-              <%= Records.Record.child_release_groups_count(record) %>
+              {Records.Record.child_release_groups_count(record)}
             </span>
           </span>
         </p>
@@ -118,7 +118,7 @@
           phx-click={toggle_actions_menu(record.id)}
           phx-click-away={close_actions_menu(record.id)}
         >
-          <span class="sr-only"><%= gettext("Open options") %></span>
+          <span class="sr-only">{gettext("Open options")}</span>
           <.icon
             name="hero-ellipsis-vertical"
             class="-mt-1 h-5 w-5"
@@ -153,7 +153,7 @@
             id={"actions-#{record.id}-show"}
             navigate={~p"/collection/#{record}"}
           >
-            <%= gettext("Show") %>
+            {gettext("Show")}
           </.link>
           <a
             href={musicbrainz_url(record)}
@@ -163,7 +163,7 @@
             tabindex="-1"
             id={"actions-#{record.id}-musicbrainz"}
           >
-            <%= gettext("View on MusicBrainz") %>
+            {gettext("View on MusicBrainz")}
           </a>
 
           <.link
@@ -173,7 +173,7 @@
             id={"actions-#{record.id}-edit"}
             patch={~p"/collection/#{record}/edit"}
           >
-            <%= gettext("Edit") %>
+            {gettext("Edit")}
           </.link>
 
           <.link
@@ -184,7 +184,7 @@
             phx-click={JS.push("delete", value: %{id: record.id}) |> hide("##{id}")}
             data-confirm={gettext("Are you sure?")}
           >
-            <%= gettext("Delete") %>
+            {gettext("Delete")}
           </.link>
         </.focus_wrap>
       </div>

lib/music_library_web/live/collection_live/show.html.heex

@@ -14,46 +14,46 @@
         class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
         patch={~p"/artists/#{artist.musicbrainz_id}"}
       >
-        <%= artist.name %>
+        {artist.name}
       </.link>
     </h1>
     <h2 class="mt-1 flex font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
-      <%= @record.title %>
+      {@record.title}
     </h2>
     <p class="mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
-      <%= Records.Record.format_release(@record.release) %> · <%= Records.Record.format_long_label(
+      {Records.Record.format_release(@record.release)} · {Records.Record.format_long_label(
         @record.format
-      ) %> · <%= Records.Record.type_long_label(@record.type) %>
+      )} · {Records.Record.type_long_label(@record.type)}
     </p>
     <!-- TODO: extract to a component -->
     <nav class="mt-5 isolate inline-flex rounded-md shadow-sm">
       <.link patch={~p"/collection/#{@record}/show/edit"} phx-click={JS.push_focus()}>
         <.button type="button" class="relative inline-flex items-center rounded-r-none">
-          <%= gettext("Edit") %>
+          {gettext("Edit")}
         </.button>
       </.link>
       <.link phx-click={JS.push("refresh_cover", value: %{id: @record.id})}>
         <.button type="button" class="relative -ml-px inline-flex items-center rounded-none">
-          <span class="sr-only"><%= gettext("Refresh") %></span>
+          <span class="sr-only">{gettext("Refresh")}</span>
           <.icon
             name="hero-arrow-path"
             class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
             aria-hidden="true"
             data-slot="icon"
           />
-          <%= gettext("Cover") %>
+          {gettext("Cover")}
         </.button>
       </.link>
       <.link phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}>
         <.button type="button" class="relative -ml-px inline-flex items-center rounded-none">
-          <span class="sr-only"><%= gettext("Refresh") %></span>
+          <span class="sr-only">{gettext("Refresh")}</span>
           <.icon
             name="hero-arrow-path"
             class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
             aria-hidden="true"
             data-slot="icon"
           />
-          <%= gettext("MB Data") %>
+          {gettext("MB Data")}
         </.button>
       </.link>
       <.link
@@ -64,7 +64,7 @@
           type="button"
           class="relative -ml-px inline-flex items-center rounded-l-none !text-red-600 hover:!text-red-500 dark:!text-red-700 hover:dark:!text-red-500"
         >
-          <%= gettext("Delete") %>
+          {gettext("Delete")}
         </.button>
       </.link>
     </nav>
@@ -74,7 +74,7 @@
     <dl class="mt-4 divide-y divide-zinc-100 dark:divide-slate-300/30">
       <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
         <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-          <%= gettext("Genres") %>
+          {gettext("Genres")}
         </dt>
         <dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
           <.link
@@ -82,23 +82,23 @@
             class="mr-2 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
             patch={~p"/collection?#{%{query: ~s(genre:"#{genre}")}}"}
           >
-            <%= genre %>
+            {genre}
           </.link>
         </dd>
       </div>
       <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
         <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-          <%= gettext("MusicBrainz ID") %>
+          {gettext("MusicBrainz ID")}
         </dt>
         <dd class="mt-1 text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
           <a href={musicbrainz_url(@record)}>
-            <code id={"mb-#{@record.musicbrainz_id}"}><%= @record.musicbrainz_id %></code>
+            <code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
           </a>
           <button phx-click={
             JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
             |> JS.transition("animate-shake")
           }>
-            <span class="sr-only"><%= gettext("Copy MusicBrainz ID to clipboard") %></span>
+            <span class="sr-only">{gettext("Copy MusicBrainz ID to clipboard")}</span>
             <.icon
               name="hero-clipboard-document"
               class="-mt-1 h-5 w-5"
@@ -110,10 +110,10 @@
       </div>
       <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
         <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-          <%= gettext("Purchased on") %>
+          {gettext("Purchased on")}
         </dt>
         <dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
-          <%= human_datetime(@record.purchased_at) %>
+          {human_datetime(@record.purchased_at)}
         </dd>
       </div>
       <div
@@ -121,30 +121,30 @@
         class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"
       >
         <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-          <%= gettext("Includes") %>
+          {gettext("Includes")}
         </dt>
         <dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
           <ul>
             <li :for={child_release_group <- Records.Record.child_release_groups(@record)}>
-              <%= child_release_group.artists %> - <%= child_release_group.title %>
+              {child_release_group.artists} - {child_release_group.title}
             </li>
           </ul>
         </dd>
       </div>
       <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
         <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-          <%= gettext("Inserted at") %>
+          {gettext("Inserted at")}
         </dt>
         <dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
-          <%= human_datetime(@record.inserted_at) %>
+          {human_datetime(@record.inserted_at)}
         </dd>
       </div>
       <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
         <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-          <%= gettext("Updated at") %>
+          {gettext("Updated at")}
         </dt>
         <dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
-          <%= human_datetime(@record.updated_at) %>
+          {human_datetime(@record.updated_at)}
         </dd>
       </div>
     </dl>
@@ -152,13 +152,13 @@
 </div>
 <!-- TODO: extract to a component -->
 <details class="mt-4 px-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300">
-  <summary class="text-xs sm:text-sm"><%= gettext("MusicBrainz data") %></summary>
+  <summary class="text-xs sm:text-sm">{gettext("MusicBrainz data")}</summary>
   <pre><code class="text-xs sm:text-sm"><%= Jason.encode!(@record.musicbrainz_data, pretty: true) %></code></pre>
 </details>
 
 <div class="mt-4">
   <.back navigate={@back_url}>
-    <%= gettext("Back to records") %>
+    {gettext("Back to records")}
   </.back>
 </div>
 

lib/music_library_web/live/record_live/form_component.ex

@@ -17,7 +17,7 @@ defmodule MusicLibraryWeb.RecordLive.FormComponent do
     <div>
       <header>
         <h1 class="text-base font-medium leading-6 text-zinc-700 dark:text-zinc-400">
-          <%= @title %>
+          {@title}
         </h1>
       </header>
 
@@ -54,16 +54,16 @@ defmodule MusicLibraryWeb.RecordLive.FormComponent do
         />
         <div phx-drop-target={@uploads.cover_data.ref}>
           <.label for={@uploads.cover_data.ref}>
-            <%= gettext("Cover art") %>
+            {gettext("Cover art")}
           </.label>
           <span
             :if={@uploads.cover_data.entries == []}
             class="float-right text-zinc-700 dark:text-zinc-400"
           >
-            <%= gettext("No cover selected") %>
+            {gettext("No cover selected")}
           </span>
           <%= for entry <- @uploads.cover_data.entries do %>
-            <span class="float-right text-zinc-700 dark:text-zinc-400"><%= entry.progress %>%</span>
+            <span class="float-right text-zinc-700 dark:text-zinc-400">{entry.progress}%</span>
           <% end %>
           <.live_file_input
             class="mt-2 block w-full rounded-lg text-zinc-900 dark:text-zinc-200 focus:ring-0 sm:text-sm sm:leading-6"
@@ -71,7 +71,7 @@ defmodule MusicLibraryWeb.RecordLive.FormComponent do
           />
         </div>
         <:actions>
-          <.button phx-disable-with={gettext("Saving...")}><%= gettext("Save") %></.button>
+          <.button phx-disable-with={gettext("Saving...")}>{gettext("Save")}</.button>
         </:actions>
       </.simple_form>
     </div>

lib/music_library_web/live/record_live/import_component.ex

@@ -42,7 +42,7 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
         :if={@release_groups == []}
         class="flex items-center justify-center h-32 text-md text-zinc-500"
       >
-        <%= gettext("No results") %>
+        {gettext("No results")}
       </div>
     </div>
     """
@@ -57,15 +57,15 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
       <div class="shrink-0 flex items-center justify-between w-full px-4">
         <div class="min-w-0 flex-auto">
           <h1 class="text-sm leading-6 text-zinc-700 dark:text-zinc-400">
-            <%= @release_group.artists %>
+            {@release_group.artists}
           </h1>
           <h2 class="mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
-            <%= @release_group.title %>
+            {@release_group.title}
           </h2>
           <p class="mt-1 text-xs leading-5 text-zinc-500 dark:text-zinc-400">
-            <%= Records.Record.format_release(@release_group.release) %> · <%= Records.Record.type_long_label(
+            {Records.Record.format_release(@release_group.release)} · {Records.Record.type_long_label(
               @release_group.type
-            ) %>
+            )}
           </p>
         </div>
         <div class="relative flex-none">
@@ -77,7 +77,7 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
             phx-click={toggle_actions_menu(@release_group.id)}
             phx-click-away={close_actions_menu(@release_group.id)}
           >
-            <span class="sr-only"><%= gettext("Choose which format to import") %></span>
+            <span class="sr-only">{gettext("Choose which format to import")}</span>
             <.icon name={@icon_name} class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
           </button>
           <!--
@@ -110,7 +110,7 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
                 JS.push("import", value: %{id: @release_group.id, format: format}, page_loading: true)
               }
             >
-              <%= Records.Record.format_long_label(format) %>
+              {Records.Record.format_long_label(format)}
             </.link>
           </.focus_wrap>
         </div>
@@ -124,7 +124,7 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
   defp type_badge(assigns) do
     ~H"""
     <span class="inline-flex items-center rounded-md bg-zinc-50 px-2 py-1 text-xs font-medium text-zinc-600 ring-1 ring-inset ring-zinc-500/10">
-      <%= @type %>
+      {@type}
     </span>
     """
   end

lib/music_library_web/live/stats_live/data_components.ex

@@ -21,7 +21,7 @@ defmodule MusicLibraryWeb.StatsLive.DataComponents do
           alt={@record.title}
         />
         <p class="ml-24 truncate text-xs sm:text-sm font-medium text-zinc-500 dark:text-zinc-400">
-          <%= @title %>
+          {@title}
         </p>
       </dt>
       <dd class="ml-24 flex items-baseline pb-6 sm:pb-7">
@@ -31,10 +31,10 @@ defmodule MusicLibraryWeb.StatsLive.DataComponents do
             class="text-sm md:text-base lg:text-2xl text-zinc-900 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
             patch={~p"/artists/#{artist.musicbrainz_id}"}
           >
-            <%= artist.name %>
+            {artist.name}
           </.link>
           <span class="text-sm md:text-base block text-zinc-600 dark:text-zinc-200">
-            <%= @record.title %>
+            {@record.title}
           </span>
         </p>
       </dd>
@@ -51,7 +51,7 @@ defmodule MusicLibraryWeb.StatsLive.DataComponents do
     <div class="overflow-hidden rounded-md bg-white dark:bg-zinc-800 px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6">
       <dt>
         <p class="truncate text-sm font-medium text-zinc-500 dark:text-zinc-400">
-          <%= @title %>
+          {@title}
         </p>
       </dt>
       <dd class="flex items-baseline mt-1 pb-6 sm:pb-7">
@@ -59,7 +59,7 @@ defmodule MusicLibraryWeb.StatsLive.DataComponents do
           href={@path}
           class="text-2xl font-semibold text-zinc-900 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
         >
-          <%= @count %>
+          {@count}
         </a>
       </dd>
     </div>

lib/music_library_web/live/stats_live/index.html.heex

@@ -1,6 +1,6 @@
 <div>
   <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
-    <%= gettext("Basics") %>
+    {gettext("Basics")}
   </h1>
   <dl class="mt-5 grid grid-cols-2 gap-5 sm:grid-cols-5">
     <.album_preview
@@ -19,7 +19,7 @@
 
 <div>
   <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
-    <%= gettext("Formats") %>
+    {gettext("Formats")}
   </h1>
   <dl class={[
     "mt-5 grid divide-zinc-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow divide-x",
@@ -27,14 +27,14 @@
   ]}>
     <div :for={{format, count} <- @collection_count_by_format} class="px-2 py-5 sm:px-4">
       <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 text-center max-sm:text-xs break-keep">
-        <%= Record.format_long_label(format) %>
+        {Record.format_long_label(format)}
       </dt>
       <dd class="mt-1 text-center">
         <a
           class="text-xl lg:text-2xl font-semibold hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
           href={~p"/collection?query=format:#{format}"}
         >
-          <%= count %>
+          {count}
         </a>
       </dd>
     </div>
@@ -43,7 +43,7 @@
 
 <div>
   <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
-    <%= gettext("Types") %>
+    {gettext("Types")}
   </h1>
   <dl class={[
     "mt-5 grid divide-zinc-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow divide-x",
@@ -51,14 +51,14 @@
   ]}>
     <div :for={{type, count} <- @collection_count_by_type} class="px-2 py-5 sm:px-4">
       <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 text-center max-sm:text-xs break-keep">
-        <%= Record.type_long_label(type) %>
+        {Record.type_long_label(type)}
       </dt>
       <dd class="mt-1 text-center">
         <a
           class="text-xl lg:text-2xl font-semibold hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
           href={~p"/collection?query=type:#{type}"}
         >
-          <%= count %>
+          {count}
         </a>
       </dd>
     </div>
@@ -68,14 +68,14 @@
 <div class="flow-root">
   <div class="mt-5 flex justify-between items-center">
     <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
-      <%= gettext("Scrobble activity") %>
+      {gettext("Scrobble activity")}
     </h1>
     <button
       type="button"
       class="phx-click-loading:animate-spin text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
       phx-click={JS.push("refresh_lastfm_feed")}
     >
-      <span class="sr-only"><%= gettext("Refresh LastFm Feed") %></span>
+      <span class="sr-only">{gettext("Refresh LastFm Feed")}</span>
       <.icon name="hero-arrow-path" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
     </button>
   </div>
@@ -97,19 +97,19 @@
             <img class="h-12 w-12 rounded-md shadow" src={track.cover_url} alt={track.title} />
             <div>
               <p class="font-semibold text-sm block text-zinc-500 dark:text-zinc-400">
-                <%= track.artist.name %>
+                {track.artist.name}
               </p>
               <p class="font-semibold text-sm md:text-base text-zinc-700 dark:text-zinc-300">
-                <%= track.title %>
+                {track.title}
               </p>
               <p class="font-semibold text-sm text-zinc-500 dark:text-zinc-400">
-                <%= track.album.title %>
+                {track.album.title}
               </p>
               <time
                 datetime={format_scrobbled_at_uts(track.scrobbled_at_uts)}
                 class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
               >
-                <%= track.scrobbled_at_label %>
+                {track.scrobbled_at_label}
               </time>
             </div>
           </div>
@@ -125,7 +125,7 @@
               "ring-zinc-600/20 dark:ring-zinc-500/20"
             ]}
           >
-            <%= gettext("No MB ID") %>
+            {gettext("No MB ID")}
           </span>
           <span
             :if={track.album.musicbrainz_id in @collected_release_ids}
@@ -138,7 +138,7 @@
               "ring-green-600/20 dark:ring-green-500/20"
             ]}
           >
-            <%= gettext("Collected") %>
+            {gettext("Collected")}
           </span>
           <span
             :if={track.album.musicbrainz_id in @wishlisted_release_ids}
@@ -151,7 +151,7 @@
               "ring-yellow-600/20 dark:ring-yellow-400/20"
             ]}
           >
-            <%= gettext("Wishlisted") %>
+            {gettext("Wishlisted")}
           </span>
 
           <div
@@ -170,7 +170,7 @@
               phx-click={toggle_actions_menu(track.scrobbled_at_uts)}
               phx-click-away={close_actions_menu(track.scrobbled_at_uts)}
             >
-              <span class="sr-only"><%= gettext("Choose which format to import") %></span>
+              <span class="sr-only">{gettext("Choose which format to import")}</span>
               <.icon name="hero-star" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
             </button>
             <!--
@@ -206,7 +206,7 @@
                   )
                 }
               >
-                <%= Records.Record.format_long_label(format) %>
+                {Records.Record.format_long_label(format)}
               </.link>
             </.focus_wrap>
           </div>

lib/music_library_web/live/wishlist_live/index.html.heex

@@ -14,17 +14,17 @@
         />
       </form>
       <.link patch={~p"/wishlist/import"}>
-        <.button><%= gettext("Import") %></.button>
+        <.button>{gettext("Import")}</.button>
       </.link>
     </div>
   </header>
 
   <p class="text-right text-sm max-sm:text-xs mt-8 text-zinc-900 dark:text-zinc-400">
-    <%= gettext(
+    {gettext(
       "Showing <b>%{visible}</b> of <b>%{total}</b> records",
       %{visible: Enum.count(@streams.records), total: @record_list_params.total_entries}
     )
-    |> raw() %>
+    |> raw()}
   </p>
 </div>
 
@@ -53,22 +53,22 @@
             class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
             patch={~p"/artists/#{artist.musicbrainz_id}"}
           >
-            <%= artist.name %>
+            {artist.name}
           </.link>
         </h1>
         <h2 class="mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
-          <%= record.title %>
+          {record.title}
         </h2>
         <p class="mt-1 text-xs leading-5 text-zinc-500 dark:text-zinc-400">
-          <%= Records.Record.format_release(record.release) %>
+          {Records.Record.format_release(record.release)}
           <span class="sm:hidden">
-            · <%= Records.Record.format_long_label(record.format) %> · <%= Records.Record.type_long_label(
+            · {Records.Record.format_long_label(record.format)} · {Records.Record.type_long_label(
               record.type
-            ) %>
+            )}
             <span :if={Records.Record.child_release_groups_count(record) > 0}>
               ·
               <span class="sr-only">
-                <%= gettext("Number of included records") %>
+                {gettext("Number of included records")}
               </span>
               <span class={[
                 "inline-flex items-center rounded-full",
@@ -78,7 +78,7 @@
                 "text-gray-600 dark:text-gray-500",
                 "ring-gray-500/10 dark:ring-gray-400/20"
               ]}>
-                <%= Records.Record.child_release_groups_count(record) %>
+                {Records.Record.child_release_groups_count(record)}
               </span>
             </span>
           </span>
@@ -88,13 +88,13 @@
     <div class="flex shrink-0 items-center gap-x-6">
       <div class="hidden sm:flex sm:flex-col sm:items-end">
         <p class="text-xs leading-6 text-zinc-900 dark:text-zinc-300">
-          <%= Records.Record.format_long_label(record.format) %> · <%= Records.Record.type_long_label(
+          {Records.Record.format_long_label(record.format)} · {Records.Record.type_long_label(
             record.type
-          ) %>
+          )}
           <span :if={Records.Record.child_release_groups_count(record) > 0}>
             ·
             <span class="sr-only">
-              <%= gettext("Number of included records") %>
+              {gettext("Number of included records")}
             </span>
             <span class={[
               "inline-flex items-center rounded-full",
@@ -104,7 +104,7 @@
               "text-gray-600 dark:text-gray-500",
               "ring-gray-500/10 dark:ring-gray-400/20"
             ]}>
-              <%= Records.Record.child_release_groups_count(record) %>
+              {Records.Record.child_release_groups_count(record)}
             </span>
           </span>
         </p>
@@ -118,7 +118,7 @@
           phx-click={toggle_actions_menu(record.id)}
           phx-click-away={close_actions_menu(record.id)}
         >
-          <span class="sr-only"><%= gettext("Open options") %></span>
+          <span class="sr-only">{gettext("Open options")}</span>
           <.icon
             name="hero-ellipsis-vertical"
             class="-mt-1 h-5 w-5"
@@ -153,7 +153,7 @@
             id={"actions-#{record.id}-show"}
             navigate={~p"/wishlist/#{record}"}
           >
-            <%= gettext("Show") %>
+            {gettext("Show")}
           </.link>
           <a
             href={musicbrainz_url(record)}
@@ -163,7 +163,7 @@
             tabindex="-1"
             id={"actions-#{record.id}-musicbrainz"}
           >
-            <%= gettext("View on MusicBrainz") %>
+            {gettext("View on MusicBrainz")}
           </a>
 
           <.link
@@ -173,7 +173,7 @@
             id={"actions-#{record.id}-edit"}
             patch={~p"/wishlist/#{record}/edit"}
           >
-            <%= gettext("Edit") %>
+            {gettext("Edit")}
           </.link>
 
           <.link
@@ -183,7 +183,7 @@
             id={"actions-#{record.id}-purchase"}
             phx-click={JS.push("purchase", value: %{id: record.id})}
           >
-            <%= gettext("Purchase") %>
+            {gettext("Purchase")}
           </.link>
 
           <.link
@@ -194,7 +194,7 @@
             phx-click={JS.push("delete", value: %{id: record.id}) |> hide("##{id}")}
             data-confirm={gettext("Are you sure?")}
           >
-            <%= gettext("Delete") %>
+            {gettext("Delete")}
           </.link>
         </.focus_wrap>
       </div>

lib/music_library_web/live/wishlist_live/show.html.heex

@@ -14,46 +14,46 @@
         class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
         patch={~p"/artists/#{artist.musicbrainz_id}"}
       >
-        <%= artist.name %>
+        {artist.name}
       </.link>
     </h1>
     <h2 class="mt-1 flex font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
-      <%= @record.title %>
+      {@record.title}
     </h2>
     <p class="mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
-      <%= Records.Record.format_release(@record.release) %> · <%= Records.Record.format_long_label(
+      {Records.Record.format_release(@record.release)} · {Records.Record.format_long_label(
         @record.format
-      ) %> · <%= Records.Record.type_long_label(@record.type) %>
+      )} · {Records.Record.type_long_label(@record.type)}
     </p>
     <!-- TODO: extract to a component -->
     <nav class="mt-5 isolate inline-flex rounded-md shadow-sm">
       <.link patch={~p"/wishlist/#{@record}/show/edit"} phx-click={JS.push_focus()}>
         <.button type="button" class="relative inline-flex items-center rounded-r-none">
-          <%= gettext("Edit") %>
+          {gettext("Edit")}
         </.button>
       </.link>
       <.link phx-click={JS.push("refresh_cover", value: %{id: @record.id})}>
         <.button type="button" class="relative -ml-px inline-flex items-center rounded-none">
-          <span class="sr-only"><%= gettext("Refresh") %></span>
+          <span class="sr-only">{gettext("Refresh")}</span>
           <.icon
             name="hero-arrow-path"
             class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
             aria-hidden="true"
             data-slot="icon"
           />
-          <%= gettext("Cover") %>
+          {gettext("Cover")}
         </.button>
       </.link>
       <.link phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}>
         <.button type="button" class="relative -ml-px inline-flex items-center rounded-none">
-          <span class="sr-only"><%= gettext("Refresh") %></span>
+          <span class="sr-only">{gettext("Refresh")}</span>
           <.icon
             name="hero-arrow-path"
             class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
             aria-hidden="true"
             data-slot="icon"
           />
-          <%= gettext("MB Data") %>
+          {gettext("MB Data")}
         </.button>
       </.link>
       <.link
@@ -64,7 +64,7 @@
           type="button"
           class="relative -ml-px inline-flex items-center rounded-l-none !text-red-600 hover:!text-red-500 dark:!text-red-700 hover:dark:!text-red-500"
         >
-          <%= gettext("Delete") %>
+          {gettext("Delete")}
         </.button>
       </.link>
     </nav>
@@ -75,7 +75,7 @@
     <dl class="mt-4 divide-y divide-zinc-100 dark:divide-slate-300/30">
       <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
         <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-          <%= gettext("Genres") %>
+          {gettext("Genres")}
         </dt>
         <dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
           <.link
@@ -83,23 +83,23 @@
             class="mr-2 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
             patch={~p"/wishlist?#{%{query: ~s(genre:"#{genre}")}}"}
           >
-            <%= genre %>
+            {genre}
           </.link>
         </dd>
       </div>
       <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
         <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-          <%= gettext("MusicBrainz ID") %>
+          {gettext("MusicBrainz ID")}
         </dt>
         <dd class="mt-1 text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
           <a href={musicbrainz_url(@record)}>
-            <code id={"mb-#{@record.musicbrainz_id}"}><%= @record.musicbrainz_id %></code>
+            <code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
           </a>
           <button phx-click={
             JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.musicbrainz_id)
             |> JS.transition("animate-shake")
           }>
-            <span class="sr-only"><%= gettext("Copy MusicBrainz ID to clipboard") %></span>
+            <span class="sr-only">{gettext("Copy MusicBrainz ID to clipboard")}</span>
             <.icon
               name="hero-clipboard-document"
               class="-mt-1 h-5 w-5"
@@ -114,30 +114,30 @@
         class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"
       >
         <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-          <%= gettext("Includes") %>
+          {gettext("Includes")}
         </dt>
         <dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
           <ul>
             <li :for={child_release_group <- Records.Record.child_release_groups(@record)}>
-              <%= child_release_group.artists %> - <%= child_release_group.title %>
+              {child_release_group.artists} - {child_release_group.title}
             </li>
           </ul>
         </dd>
       </div>
       <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
         <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-          <%= gettext("Inserted at") %>
+          {gettext("Inserted at")}
         </dt>
         <dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
-          <%= human_datetime(@record.inserted_at) %>
+          {human_datetime(@record.inserted_at)}
         </dd>
       </div>
       <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
         <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-          <%= gettext("Updated at") %>
+          {gettext("Updated at")}
         </dt>
         <dd class="mt-1 text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
-          <%= human_datetime(@record.updated_at) %>
+          {human_datetime(@record.updated_at)}
         </dd>
       </div>
     </dl>
@@ -145,13 +145,13 @@
 </div>
 <!-- TODO: extract to a component -->
 <details class="mt-4 px-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300">
-  <summary class="text-xs sm:text-sm"><%= gettext("MusicBrainz data") %></summary>
+  <summary class="text-xs sm:text-sm">{gettext("MusicBrainz data")}</summary>
   <pre><code class="text-xs sm:text-sm"><%= Jason.encode!(@record.musicbrainz_data, pretty: true) %></code></pre>
 </details>
 
 <div class="mt-4">
   <.back navigate={@back_url}>
-    <%= gettext("Back to wishlist") %>
+    {gettext("Back to wishlist")}
   </.back>
 </div>