From 80ca186ba88cdafc8a603cdc4f6f642553caff4c Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Wed, 21 May 2025 20:18:36 +0100
Subject: [PATCH] Render artist bio in a left-side sheet

---
 .../live/artist_live/show.ex                  | 10 ++++++
 .../live/artist_live/show.html.heex           | 32 ++++++++++++-------
 priv/gettext/default.pot                      | 15 ++++++---
 priv/gettext/en/LC_MESSAGES/default.po        | 15 ++++++---
 .../live/artist_live/show_test.exs            |  3 +-
 5 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/lib/music_library_web/live/artist_live/show.ex b/lib/music_library_web/live/artist_live/show.ex
index 2c682c82..01d4a5e6 100644
--- a/lib/music_library_web/live/artist_live/show.ex
+++ b/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
diff --git a/lib/music_library_web/live/artist_live/show.html.heex b/lib/music_library_web/live/artist_live/show.html.heex
index d3495fcd..e9fa79dc 100644
--- a/lib/music_library_web/live/artist_live/show.html.heex
+++ b/lib/music_library_web/live/artist_live/show.html.heex
@@ -146,17 +146,27 @@
             {gettext("Error loading biography")}
           </div>
         </:failed>
-        <details
-          :if={lastfm_artist_info.summary !== ""}
-          class="mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400"
-        >
-          <summary class="text-sm mt-4 font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-            {gettext("Biography")}
-          </summary>
-          <div class="ml-2">
-            {render_bio(lastfm_artist_info.summary)}
-          </div>
-        </details>
+        <dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+          {gettext("Biography")}
+        </dt>
+        <dd>
+          {remove_read_more_link(lastfm_artist_info.summary)}
+          <.link
+            class="block mt-2 text-sm font-medium text-zinc-900 dark:text-zinc-400"
+            phx-click={Fluxon.open_dialog("bio")}
+          >
+            <.icon
+              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}>
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index d7fedddc..ae8a8522 100644
--- a/priv/gettext/default.pot
+++ b/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 ""
diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po
index bb48a955..d27368af 100644
--- a/priv/gettext/en/LC_MESSAGES/default.po
+++ b/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 ""
diff --git a/test/music_library_web/live/artist_live/show_test.exs b/test/music_library_web/live/artist_live/show_test.exs
index 37807cc8..ba42709d 100644
--- a/test/music_library_web/live/artist_live/show_test.exs
+++ b/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("details")
+      |> assert_has("dt", text: "Biography")
     end
 
     test "it gracefully handles errors in fetching bio and play count", %{