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

<div class="mt-4 px-4 sm:px-6 lg:px-8">
  <h1 class="flex items-end mt-1 font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
    {@artist.name}
    <.async_result :let={artist_info} assign={@artist_info}>
      <:loading>
        <div class="ml-2">
          <span class="sr-only">{gettext("Loading play count")}</span>
          <.icon
            name="hero-arrow-path"
            class="-mt-1 h-5 w-5 animate-spin"
            aria-hidden="true"
            data-slot="icon"
          />
        </div>
      </:loading>
      <:failed :let={_failure}>
        <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
          {gettext("There was an error loading the play count")}
        </div>
      </:failed>
      <span :if={artist_info.play_count > 0}>
        <span class="sr-only">
          {gettext("Number of scrobbles")}
        </span>
        <span class={[
          "rounded-full ml-2",
          "px-2 py-1 text-xs font-medium",
          "ring-1 ring-inset",
          "bg-gray-50 dark:bg-gray-400/10",
          "text-gray-600 dark:text-gray-500",
          "ring-gray-500/10 dark:ring-gray-400/20"
        ]}>
          {artist_info.play_count}
        </span>
      </span>
    </.async_result>
  </h1>

  <.async_result :let={artist_info} assign={@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">
        {gettext("There was an error loading the biography")}
      </div>
    </:failed>
    <details
      :if={artist_info.bio !== ""}
      class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400"
    >
      <summary class="text-sm mb-4">{gettext("Biography")}</summary>
      {render_bio(@artist_info.result.bio)}
    </details>
  </.async_result>

  <div :if={@artist_records.collection !== []} class="mt-4">
    <h2 class="flex items-end font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
      {gettext("Collection")}
      <span>
        <span class="sr-only">
          {gettext("Number of albums")}
        </span>
        <span class={[
          "rounded-full ml-2",
          "px-2 py-1 text-xs font-medium",
          "ring-1 ring-inset",
          "bg-gray-50 dark:bg-gray-400/10",
          "text-gray-600 dark:text-gray-500",
          "ring-gray-500/10 dark:ring-gray-400/20"
        ]}>
          {Enum.count(@artist_records.collection)}
        </span>
      </span>
    </h2>
    <%!-- TODO: replace with OSS version --%>
    <ul
      id="collection"
      role="list"
      class="mt-4 grid grid-cols-3 gap-x-4 gap-y-8 sm:grid-cols-4 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8"
    >
      <li :for={record <- @artist_records.collection} class="relative">
        <div class="group overflow-hidden rounded-lg bg-zinc-100 focus-within:ring-2 focus-within:ring-zinc-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100">
          <img
            alt={record.title}
            src={~p"/covers/#{record.id}?vsn=#{record.cover_hash || ""}"}
            class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
          />
          <button
            type="button"
            class="absolute inset-0 focus:outline-none"
            phx-click={JS.navigate(~p"/collection/#{record}")}
          >
            <span class="sr-only">{gettext("View details")}</span>
          </button>
        </div>
        <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
          {record.title}
        </p>
        <p class="pointer-events-none block text-sm font-medium text-zinc-500">
          {Records.Record.format_long_label(record.format)} · {Records.Record.type_long_label(
            record.type
          )}
        </p>
        <p class="pointer-events-none block text-sm font-medium text-zinc-500">
          {Records.Record.format_release(record.release)}
        </p>
      </li>
    </ul>
  </div>

  <div :if={@artist_records.wishlist !== []} class="mt-4">
    <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
      {gettext("Wishlist")}
      <span>
        <span class="sr-only">
          {gettext("Number of albums")}
        </span>
        <span class={[
          "rounded-full ml-2",
          "px-2 py-1 text-xs font-medium",
          "ring-1 ring-inset",
          "bg-gray-50 dark:bg-gray-400/10",
          "text-gray-600 dark:text-gray-500",
          "ring-gray-500/10 dark:ring-gray-400/20"
        ]}>
          {Enum.count(@artist_records.wishlist)}
        </span>
      </span>
    </h2>
    <%!-- TODO: replace with OSS version --%>
    <ul
      id="wishlist"
      role="list"
      class="mt-4 grid grid-cols-3 gap-x-4 gap-y-8 sm:grid-cols-4 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8"
    >
      <li :for={record <- @artist_records.wishlist} class="relative">
        <div class="group overflow-hidden rounded-lg bg-zinc-100 focus-within:ring-2 focus-within:ring-zing-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100">
          <img
            alt={record.title}
            src={~p"/covers/#{record.id}?vsn=#{record.cover_hash || ""}"}
            class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
          />
          <button
            type="button"
            class="absolute inset-0 focus:outline-none"
            phx-click={JS.navigate(~p"/wishlist/#{record}")}
          >
            <span class="sr-only">{gettext("View details")}</span>
          </button>
        </div>
        <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
          {record.title}
        </p>
        <p class="pointer-events-none block text-sm font-medium text-zinc-500">
          {Records.Record.format_long_label(record.format)} · {Records.Record.type_long_label(
            record.type
          )}
        </p>
        <p class="pointer-events-none block text-sm font-medium text-zinc-500">
          {Records.Record.format_release(record.release)}
        </p>
      </li>
    </ul>
  </div>
</div>