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

<div class="md:flex mt-4 px-4 md:gap-x-4">
  <div class="drop-shadow-sm md:max-w-[38rem]">
    <img
      class="w-full rounded-lg drop-shadow-sm"
      src={~p"/covers/#{@record.id}?vsn=#{@record.cover_hash}"}
      alt={@record.title}
    />
  </div>

  <div class="grow">
    <div class="mt-4 md:mt-0 flex justify-between">
      <div>
        <h1 class="text-base font-medium leading-6 text-zinc-700">
          <.link
            :for={artist <- @record.artists}
            class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
            navigate={~p"/artists/#{artist.musicbrainz_id}"}
          >
            {artist.name}
          </.link>
        </h1>
        <h2 class="mt-1 flex font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
          {@record.title}
        </h2>
        <p class="mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
          {Records.Record.format_release_date(@record.release_date)} · {format_label(
            @record.format
          )} · {type_label(@record.type)}
        </p>
      </div>
      <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(@record.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-#{@record.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(@record.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-#{@record.id}-edit"}
            patch={~p"/collection/#{@record}/show/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")}
          </.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-#{@record.id}-refresh-cover"}
            phx-click={JS.push("refresh_cover", value: %{id: @record.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 cover")}
          </.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-#{@record.id}-refresh-mb-data"}
            phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.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 MB data")}
          </.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-#{@record.id}-populate-genres"}
            phx-click={JS.push("populate_genres", value: %{id: @record.id})}
          >
            <.icon
              name="hero-sparkles"
              class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Populate genres")}
          </.link>

          <.link
            class="block px-3 py-1 text-sm leading-6 text-red-900 hover:bg-red-50 dark:text-red-700 dark:hover:bg-red-900/30 dark:hover:text-red-600"
            role="menuitem"
            tabindex="0"
            id={"actions-#{@record.id}-delete"}
            phx-click={JS.push("delete", value: %{id: @record.id})}
            data-confirm={gettext("Are you sure?")}
          >
            <.icon
              name="hero-trash"
              class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Delete")}
          </.link>
        </.focus_wrap>
      </div>
    </div>
    <div class="mt-4">
      <%!-- TODO: replace with OSS version --%>
      <dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">
        <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
          <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
            {gettext("ID")}
          </dt>
          <dd class="mt-1 text-xs md:text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
            <code id={"record-#{@record.id}"}>{@record.id}</code>
            <button phx-click={
              JS.dispatch("music_library:clipcopy", to: "#record-" <> @record.id)
              |> JS.transition("animate-shake")
            }>
              <span class="sr-only">{gettext("Copy record ID to clipboard")}</span>
              <.icon
                name="hero-clipboard-document"
                class="-mt-1 h-5 w-5"
                aria-hidden="true"
                data-slot="icon"
              />
            </button>
          </dd>
        </div>
        <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
          <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
            {gettext("Genres")}
          </dt>
          <dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
            <.link
              :for={genre <- @record.genres}
              class="mr-2 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
              patch={~p"/collection?#{%{query: ~s(genre:"#{genre}")}}"}
            >
              {genre}
            </.link>
          </dd>
        </div>
        <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
          <dt class="text-xs md: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 sm:col-span-2 sm:mt-0">
            <a href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}>
              <code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
            </a>
            <button phx-click={
              JS.dispatch("music_library:clipcopy", to: "#mb-" <> @record.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>
        </div>
        <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
          <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
            {gettext("Purchased on")}
          </dt>
          <dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
            {Records.Record.format_as_date(@record.purchased_at)}
          </dd>
        </div>
        <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
          <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
            {gettext("Published releases")}
          </dt>
          <dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
            {Records.Record.release_count(@record)}
          </dd>
        </div>
        <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
          <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
            {gettext("Collected release")}
          </dt>
          <dd class="mt-1 text-xs md:text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
            <span>{selected_release_label(@record)}</span>

            <button
              :if={@record.selected_release_id}
              phx-click={Fluxon.open_dialog("tracks-sheet")}
            >
              <span class="sr-only">{gettext("Show Tracks")}</span>
              <.icon
                name="hero-numbered-list"
                class="-mt-1 h-5 w-5"
                aria-hidden="true"
                data-slot="icon"
              />
            </button>
          </dd>
        </div>
        <div
          :if={Records.Record.included_release_groups_count(@record) > 0}
          class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"
        >
          <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
            {gettext("Includes")}
          </dt>
          <dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
            <ul>
              <li :for={included_release_group <- Records.Record.included_release_groups(@record)}>
                {included_release_group.artists} - {included_release_group.title}
              </li>
            </ul>
          </dd>
        </div>
        <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
          <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
            {gettext("Inserted at")}
          </dt>
          <dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
            {Records.Record.format_as_date(@record.inserted_at)}
          </dd>
        </div>
        <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
          <dt class="text-xs md:text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
            {gettext("Updated at")}
          </dt>
          <dd class="mt-1 text-xs md:text-sm leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
            {Records.Record.format_as_date(@record.updated_at)}
          </dd>
        </div>
      </dl>
    </div>
  </div>
</div>
<!-- TODO: extract to a component -->
<details class="mt-4 px-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300">
  <summary class="text-xs sm:text-sm">{gettext("MusicBrainz data")}</summary>
  <pre><code class="text-xs sm:text-sm"><%= Jason.encode!(@record.musicbrainz_data, pretty: true) %></code></pre>
</details>

<Fluxon.Components.Sheet.sheet
  :if={@record.selected_release_id}
  id="tracks-sheet"
  placement="right"
  on_open={JS.push("load_release_with_tracks")}
  open
>
  <h3 class="text-lg font-semibold mb-4">{gettext("Tracks")}</h3>

  <div :if={@release_with_tracks} class="space-y-4">
    <.async_result :let={release_with_tracks} assign={@release_with_tracks}>
      <:loading>
        <span class="sr-only">{gettext("Loading release with tracks")}</span>
        <Fluxon.Components.Loading.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 h-5 w-5"
            aria-hidden="true"
            data-slot="icon"
          />
          {gettext("Error loading tracks")}
        </div>
      </:failed>
      <div :for={medium <- release_with_tracks.media} class="space-y-4">
        <h4
          :if={MusicBrainz.Release.media_count(release_with_tracks) > 1}
          class="text-sm font-semibold"
        >
          {medium_title(medium)}
        </h4>
        <ul class="w-full table table-auto">
          <li
            :for={track <- medium.tracks}
            class="contents leading-5 text-zinc-700 dark:text-zinc-300 list-none"
          >
            <div class="table-row">
              <span class="table-cell text-xs text-right pr-1">{track.position}</span>
              <span class="table-cell text-xs font-medium leading-8">{track.title}</span>
              <span class="table-cell text-xs text-right pl-2">
                {format_duration(track.length)}
              </span>
            </div>
            <div :if={release_with_tracks.artists !== track.artists} class="table-row text-xs">
              <span class="table-cell" />
              <span class="table-cell">
                {Enum.map_join(track.artists, ", ", fn artist -> artist.name end)}
              </span>
            </div>
          </li>
        </ul>
        <Fluxon.Components.Separator.separator />
        <p class="text-xs text-right text-zinc-700 dark:text-zinc-300">
          {medium_duration(medium)}
        </p>
      </div>
    </.async_result>
  </div>
</Fluxon.Components.Sheet.sheet>

<.modal
  :if={@live_action == :edit}
  id="record-modal"
  show
  on_cancel={JS.patch(~p"/collection/#{@record}")}
>
  <.live_component
    module={MusicLibraryWeb.FormComponent}
    id={@record.id}
    action={@live_action}
    show_purchased_at={true}
    record={@record}
    patch={~p"/collection/#{@record}"}
  />
</.modal>