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

<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
  <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="flex items-center">
          <button
            class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
            phx-click={MusicLibraryWeb.Components.Notes.open("artist-notes-sheet")}
          >
            <span class="sr-only">{gettext("Open Notes")}</span>
            <.icon
              name="hero-pencil-square"
              class="-mt-1 h-5 w-5"
              aria-hidden="true"
              data-slot="icon"
            />
          </button>
          <.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end">
            <:toggle>
              <span class="sr-only">{gettext("Actions")}</span>
              <.icon
                name="hero-ellipsis-vertical"
                class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
                aria-hidden="true"
                data-slot="icon"
              />
            </:toggle>
            <.focus_wrap id={"actions-#{@artist.musicbrainz_id}-focus-wrap"}>
              <.dropdown_link
                id={"actions-#{@artist.musicbrainz_id}-edit"}
                patch={~p"/artists/#{@artist.musicbrainz_id}/edit"}
              >
                <.icon
                  name="hero-pencil-square"
                  class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
                  aria-hidden="true"
                  data-slot="icon"
                />
                {gettext("Edit")}
              </.dropdown_link>
              <.dropdown_link
                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")}
              </.dropdown_link>

              <.dropdown_link
                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")}
              </.dropdown_link>
            </.focus_wrap>
          </.dropdown>
        </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" patch={~p"/artists/#{@artist.musicbrainz_id}/import"}>
          <.icon name="hero-plus" class="icon" 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>
        <.artist_image
          class="w-full rounded-md shadow-sm mt-4"
          artist={@artist}
          image_hash={@artist_info.image_data_hash}
        />
        <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_show_path={fn record -> ~p"/collection/#{record}" end}
          record_edit_path={fn record -> ~p"/collection/#{record}/show/edit" 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_show_path={fn record -> ~p"/wishlist/#{record}" end}
          record_edit_path={fn record -> ~p"/wishlist/#{record}/show/edit" 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>

    <.json_viewer
      :if={@artist_info.musicbrainz_data}
      title={gettext("MusicBrainz data")}
      data={@artist_info.musicbrainz_data}
    />

    <.json_viewer
      :if={@artist_info.discogs_data}
      title={gettext("Discogs data")}
      data={@artist_info.discogs_data}
    />
  </div>

  <.structured_modal
    :if={@live_action == :import}
    id="record-modal"
    on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
  >
    <.live_component
      module={MusicLibraryWeb.Components.AddRecord}
      id={:search}
      title={@page_title}
      action={@live_action}
      patch={~p"/artists/#{@artist.musicbrainz_id}"}
      initial_query={"arid:#{@artist.musicbrainz_id}"}
      icon_name="hero-plus"
    />
  </.structured_modal>

  <.live_component
    id="artist-notes"
    sheet_id="artist-notes-sheet"
    module={MusicLibraryWeb.Components.Notes}
    entity={:artist}
    musicbrainz_id={@artist.musicbrainz_id}
  />

  <.structured_modal
    :if={@live_action == :edit}
    id="artist-info-modal"
    on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
  >
    <.live_component
      module={MusicLibraryWeb.ArtistLive.Form}
      id={@artist_info.id}
      action={@live_action}
      artist_info={@artist_info}
      artist={@artist}
      patch={~p"/artists/#{@artist.musicbrainz_id}"}
    />
  </.structured_modal>
</Layouts.app>