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>
        <a
          :if={lastfm_artist_info.on_tour}
          class="flex items-center"
          href={LastFm.Artist.events_url(lastfm_artist_info)}
          target="_blank"
        >
          <.badge variant="pill" class="mr-2">{gettext("On Tour")}</.badge>
        </a>
        <span
          :if={lastfm_artist_info.play_count > 0}
          class="text-xs font-medium text-zinc-700 dark:text-zinc-300 grow"
        >
          {ngettext("1 scrobble", "%{count} scrobbles", lastfm_artist_info.play_count)}
        </span>
        <span
          :if={lastfm_artist_info.play_count == 0}
          class="text-xs font-medium text-zinc-700 dark:text-zinc-300 grow"
        >
          {gettext("No scrobbles")}
        </span>
      </.async_result>
      <.link
        class={[
          "relative inline-flex items-center rounded-md",
          "px-3 py-2 text-xs sm:text-sm font-semibold",
          "bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200",
          "disabled:bg-zinc-300 dark:disabled:bg-zinc-300 disabled:active:text-white",
          "text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
          "focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
        ]}
        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")}
      </.link>
    </div>
  </header>

  <div class="mt-4 grid md:grid-cols-5 md:gap-4">
    <div class="col-span-5 md:col-span-1 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" <> "';"}
      />
      <.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.bio !== ""}
          class="text-sm leading-5 text-zinc-500 dark:text-zinc-400"
        >
          <summary class="text-sm mt-4 mb-4">{gettext("Biography")}</summary>
          {render_bio(@lastfm_artist_info.result.summary)}
        </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="text-sm leading-5 text-zinc-500 dark:text-zinc-400"
        >
          <summary class="text-sm mb-4">{gettext("Similar artists")}</summary>
          <ul>
            <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="col-span-4 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>