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">
    <div class="flex items-center justify-between">
      <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="relative flex-none">
        <button
          type="button"
          class="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
          aria-expanded="false"
          aria-haspopup="true"
          phx-click={toggle_actions_menu(@artist.musicbrainz_id)}
        >
          <span class="sr-only">{gettext("Open options")}</span>
          <.icon
            name="hero-ellipsis-vertical"
            class="-mt-1 h-5 w-5"
            aria-hidden="true"
            data-slot="icon"
          />
        </button>
        <.focus_wrap
          id={"actions-#{@artist.musicbrainz_id}"}
          class={[
            "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-hidden"
          ]}
          role="menu"
          aria-orientation="vertical"
          aria-labelledby="options-menu-0-button"
          phx-click-away={close_actions_menu(@artist.musicbrainz_id)}
        >
          <.link
            class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
            role="menuitem"
            tabindex="0"
            id={"actions-#{@artist.musicbrainz_id}-refresh-image"}
            phx-click={JS.push("refresh_artist_image", value: %{id: @artist.musicbrainz_id})}
          >
            <.icon
              name="hero-photo"
              class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Refresh image")}
          </.link>

          <.link
            class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
            role="menuitem"
            tabindex="0"
            id={"actions-#{@artist.musicbrainz_id}-refresh-artist-info"}
            phx-click={JS.push("refresh_artist_info", value: %{id: @artist.musicbrainz_id})}
          >
            <.icon
              name="hero-arrow-path"
              class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Refresh info")}
          </.link>
        </.focus_wrap>
      </div>
    </div>

    <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>
        <dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
          {gettext("Biography")}
        </dt>
        <dd class="text-zinc-700 dark:text-zinc-300">
          {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 text-zinc-700 dark:text-zinc-300" placement="left">
          {render_bio(lastfm_artist_info.bio)}
        </.sheet>
      </.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}
      />
      <.separator :if={@wishlist_records_count > 0} class="mt-8 mb-8" />
      <.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}
      />

      <.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>
        <.separator class="mt-8 mb-8" />
        <.artist_grid title={gettext("Similar artists")} artists={similar_artists} />
      </.async_result>
    </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>