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

<div class="mt-4 px-4 sm:px-6 lg:px-8">
  <header class="mt-1 gap-1">
    <h1 class="font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
      {@artist.name}
      <.country_flag country={@country} />
    </h1>

    <div class="mt-4 flex items-center justify-between">
      <.async_result :let={lastfm_artist_info} assign={@lastfm_artist_info}>
        <:loading>
          <span class="sr-only">{gettext("Loading play count")}</span>
          <.loading />
        </:loading>
        <:failed :let={_failure}>
          <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
            <.icon
              name="hero-exclamation-triangle"
              class="-mt-1 mr-1 ml-2 h-5 w-5"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Error loading play count")}
          </div>
        </:failed>
        <.on_tour_link lastfm_artist_info={lastfm_artist_info} />
        <.play_count play_count={lastfm_artist_info.play_count} />
      </.async_result>
      <.button variant="solid" as="link" patch={~p"/artists/#{@artist.musicbrainz_id}/import"}>
        <.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
        {gettext("Add more")}
      </.button>
    </div>
  </header>

  <div class="mt-4 grid md:grid-cols-10 md:gap-4">
    <div class="md:col-span-3 mt-4 order-2 md:order-1">
      <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
        {gettext("Meta")}
      </h2>
      <img
        class="w-full rounded-md shadow-sm mt-4"
        src={~p"/artists/#{@artist_info.id}/image?vsn=#{@artist_info.image_data_hash || ""}"}
        alt={@artist.name}
        onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
      />
      <dl>
        <dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
          {gettext("MusicBrainz ID")}
        </dt>
        <dd class="mt-1 text-xs md:text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300">
          <a href={MusicBrainz.Artist.url(@artist.musicbrainz_id)}>
            <code class="overflow-hidden text-clip" id={"mb-#{@artist.musicbrainz_id}"}>
              {@artist.musicbrainz_id}
            </code>
          </a>
          <button phx-click={
            JS.dispatch("music_library:clipcopy", to: "#mb-" <> @artist.musicbrainz_id)
            |> JS.transition("animate-shake")
          }>
            <span class="sr-only">{gettext("Copy MusicBrainz ID to clipboard")}</span>
            <.icon
              name="hero-clipboard-document"
              class="-mt-1 h-5 w-5"
              aria-hidden="true"
              data-slot="icon"
            />
          </button>
        </dd>
      </dl>
      <.async_result :let={lastfm_artist_info} assign={@lastfm_artist_info}>
        <:loading>
          <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
            {gettext("Loading biography")}
          </div>
        </:loading>
        <:failed :let={_failure}>
          <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
            <.icon
              name="hero-exclamation-triangle"
              class="-mt-1 mr-1 h-5 w-5"
              aria-hidden="true"
              data-slot="icon"
            />
            {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>
      </.async_result>

      <.async_result :let={similar_artists} assign={@similar_artists}>
        <:loading>
          <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
            {gettext("Loading similar artists")}
          </div>
        </:loading>
        <:failed :let={_failure}>
          <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
            <.icon
              name="hero-exclamation-triangle"
              class="-mt-1 mr-1 h-5 w-5"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Error loading similar artists")}
          </div>
        </:failed>
        <details
          :if={similar_artists !== []}
          class="mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400"
        >
          <summary class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
            {gettext("Similar artists")}
          </summary>
          <ul class="mt-2 ml-2">
            <li :for={artist <- similar_artists}>
              <.link
                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}
              </.link>
            </li>
          </ul>
        </details>
      </.async_result>
    </div>
    <div class="md:col-span-7 md:order-1">
      <.record_grid
        :if={@collection_records_count > 0}
        title={gettext("Collection")}
        id="collection"
        records={@streams.collection_records}
        records_count={@collection_records_count}
        record_path={fn record -> ~p"/collection/#{record}" end}
      />

      <.record_grid
        :if={@wishlist_records_count > 0}
        title={gettext("Wishlist")}
        id="wishlist"
        records={@streams.wishlist_records}
        records_count={@wishlist_records_count}
        record_path={fn record -> ~p"/wishlist/#{record}" end}
      />
    </div>
  </div>
</div>

<.modal
  :if={@live_action == :import}
  class="md:min-w-2xl max-w-sm md:max-w-3xl"
  id="record-modal"
  open
  on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
>
  <.live_component
    module={MusicLibraryWeb.AddRecordComponent}
    id={:search}
    title={@page_title}
    action={@live_action}
    record={@record}
    patch={~p"/artists/#{@artist.musicbrainz_id}"}
    initial_query={"arid:#{@artist.musicbrainz_id}"}
    icon_name="hero-plus"
  />
</.modal>