Render artist bio in a left-side sheet

lib/music_library_web/live/artist_live/show.ex

@@ -240,4 +240,14 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
         )
     end
   end
+
+  defp remove_read_more_link(summary) do
+    last_fm_link_regex = ~r/<a.*Read more on Last\.fm<\/a>\.*\s*/
+    reformatted_summary = String.replace(summary, last_fm_link_regex, "")
+
+    PhoenixHTMLHelpers.Format.text_to_html(reformatted_summary,
+      escape: false,
+      attributes: [class: "mt-2 text-sm/7"]
+    )
+  end
 end

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

@@ -146,17 +146,27 @@
             {gettext("Error loading biography")}
           </div>
         </:failed>
-        <details
+        <dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-          :if={lastfm_artist_info.summary !== ""}
+          {gettext("Biography")}
-          class="mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400"
+        </dt>
-        >
+        <dd>
-          <summary class="text-sm mt-4 font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+          {remove_read_more_link(lastfm_artist_info.summary)}
-            {gettext("Biography")}
+          <.link
-          </summary>
+            class="block mt-2 text-sm font-medium text-zinc-900 dark:text-zinc-400"
-          <div class="ml-2">
+            phx-click={Fluxon.open_dialog("bio")}
-            {render_bio(lastfm_artist_info.summary)}
+          >
-          </div>
+            <.icon
-        </details>
+              name="hero-arrow-right-end-on-rectangle"
+              class="-mt-1 mr-1 h-5 w-5"
+              aria-hidden="true"
+              data-slot="icon"
+            />
+            {gettext("Read more")}
+          </.link>
+        </dd>
+        <.sheet id="bio" class="max-w-2xl" placement="left">
+          {render_bio(lastfm_artist_info.bio)}
+        </.sheet>
       </.async_result>
 
       <.async_result :let={similar_artists} assign={@similar_artists}>

priv/gettext/default.pot

@@ -360,11 +360,6 @@ msgstr ""
 msgid "View details"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex
-#, elixir-autogen, elixir-format
-msgid "Biography"
-msgstr ""
-
 #: lib/music_library_web/live/artist_live/show.html.heex
 #, elixir-autogen, elixir-format
 msgid "Loading biography"
@@ -848,3 +843,13 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Refresh info"
 msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex
+#, elixir-autogen, elixir-format
+msgid "Biography"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex
+#, elixir-autogen, elixir-format
+msgid "Read more"
+msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -360,11 +360,6 @@ msgstr ""
 msgid "View details"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex
-#, elixir-autogen, elixir-format
-msgid "Biography"
-msgstr ""
-
 #: lib/music_library_web/live/artist_live/show.html.heex
 #, elixir-autogen, elixir-format
 msgid "Loading biography"
@@ -848,3 +843,13 @@ msgstr ""
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Refresh info"
 msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex
+#, elixir-autogen, elixir-format
+msgid "Biography"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Read more"
+msgstr ""

test/music_library_web/live/artist_live/show_test.exs

@@ -43,8 +43,7 @@ defmodule MusicLibraryWeb.ArtistLive.ShowTest do
       |> visit(~p"/artists/#{artist_musicbrainz_id}")
       |> unwrap(&render_async/1)
       |> assert_has("span", text: "123")
-      |> assert_has("summary", text: "Biography")
+      |> assert_has("dt", text: "Biography")
-      |> assert_has("details")
     end
 
     test "it gracefully handles errors in fetching bio and play count", %{