Navigate from scrobble search to release-group page

lib/music_library_web/live/scrobble_live/index.ex

@@ -1,9 +1,9 @@
 defmodule MusicLibraryWeb.ScrobbleLive.Index do
   use MusicLibraryWeb, :live_view
 
-  import MusicLibraryWeb.RecordComponents, only: [type_label: 1, country_label: 1]
+  import MusicLibraryWeb.RecordComponents, only: [type_label: 1]
 
-  alias MusicBrainz.{Release, ReleaseGroupSearchResult}
+  alias MusicBrainz.ReleaseGroupSearchResult
   alias MusicLibrary.Records
   alias MusicLibrary.ScrobbleActivity
 
@@ -25,7 +25,7 @@ defmodule MusicLibraryWeb.ScrobbleLive.Index do
             </.button>
           </div>
         </header>
-        <%= if @search_results != [] && @selected_release_group == nil do %>
+        <%= if @search_results != [] do %>
           <div class="space-y-3">
             <h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-200">
               {gettext("Release Groups")}
@@ -34,81 +34,30 @@ defmodule MusicLibraryWeb.ScrobbleLive.Index do
               "mt-5 divide-y divide-zinc-100 dark:divide-slate-300/30",
               "max-h-125 overflow-y-auto"
             ]}>
-              <li
-                :for={release_group <- @search_results}
-                phx-click="select_release_group"
-                phx-value-release_group_id={release_group.id}
-                class="flex cursor-pointer justify-between gap-x-6 py-5 hover:bg-zinc-100 dark:hover:bg-zinc-700"
-              >
-                <div class="flex w-full shrink-0 items-center justify-between px-4">
-                  <img
-                    class="mr-4 w-20 flex-none rounded-lg"
-                    alt={release_group.title}
-                    src={ReleaseGroupSearchResult.thumb_url(release_group)}
-                    onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
-                  />
-                  <div class="min-w-0 flex-auto">
-                    <p class="truncate text-sm/6 text-zinc-700 dark:text-zinc-400">
-                      {release_group.artists}
-                    </p>
-                    <p class="mt-1 flex truncate text-sm/5 font-semibold text-wrap text-zinc-700 sm:text-base dark:text-zinc-300">
-                      {release_group.title}
-                    </p>
-                    <p class="mt-1 flex items-center gap-1 text-xs/5 text-zinc-500 dark:text-zinc-400">
-                      {Records.Record.format_release_date(release_group.release_date)}
-                      <span>&middot;</span>
-                      <.badge variant="soft" size="xs">{type_label(release_group.type)}</.badge>
-                    </p>
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </div>
-        <% end %>
-
-        <%= if @selected_release_group && @releases != [] do %>
-          <div class="space-y-3">
-            <div class="flex items-center gap-2">
-              <.button
-                variant="ghost"
-                size="sm"
-                phx-click="clear_selection"
-              >
-                <.icon name="hero-arrow-left" class="icon" aria-hidden="true" data-slot="icon" />
-                {gettext("Back")}
-              </.button>
-              <h3 class="text-lg font-semibold">
-                {gettext("Releases for \"%{title}\"", title: @selected_release_group.title)}
-              </h3>
-            </div>
-
-            <ul class="divide-y divide-zinc-100 dark:divide-slate-300/30">
-              <li :for={release <- @releases}>
+              <li :for={release_group <- @search_results}>
                 <.link
-                  navigate={~p"/scrobble/#{release.id}"}
-                  class="flex items-center gap-x-4 px-4 py-5 transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-700"
+                  navigate={~p"/scrobble/#{release_group.id}"}
+                  class="flex cursor-pointer justify-between gap-x-6 py-5 hover:bg-zinc-100 dark:hover:bg-zinc-700"
                 >
-                  <img
-                    class="w-20 flex-none rounded-lg"
-                    alt={release.title}
-                    src={Release.thumb_url(release)}
-                    onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
-                  />
-                  <div class="min-w-0 flex-auto">
-                    <p class="font-medium text-zinc-900 dark:text-zinc-100">
-                      {release.title}
-                    </p>
-                    <div class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-zinc-500 dark:text-zinc-400">
-                      <span :if={release.date}>{release.date}</span>
-                      <span :if={release.country}>
-                        {country_label(release.country)}
-                      </span>
-                      <.badge :if={release.catalog_number} variant="soft" size="xs">
-                        {release.catalog_number}
-                      </.badge>
-                      <span :if={release.media != []}>
-                        {ngettext("1 disc", "%{count} discs", Release.media_count(release))}
-                      </span>
+                  <div class="flex w-full shrink-0 items-center justify-between px-4">
+                    <img
+                      class="mr-4 w-20 flex-none rounded-lg"
+                      alt={release_group.title}
+                      src={ReleaseGroupSearchResult.thumb_url(release_group)}
+                      onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
+                    />
+                    <div class="min-w-0 flex-auto">
+                      <p class="truncate text-sm/6 text-zinc-700 dark:text-zinc-400">
+                        {release_group.artists}
+                      </p>
+                      <p class="mt-1 flex truncate text-sm/5 font-semibold text-wrap text-zinc-700 sm:text-base dark:text-zinc-300">
+                        {release_group.title}
+                      </p>
+                      <p class="mt-1 flex items-center gap-1 text-xs/5 text-zinc-500 dark:text-zinc-400">
+                        {Records.Record.format_release_date(release_group.release_date)}
+                        <span>&middot;</span>
+                        <.badge variant="soft" size="xs">{type_label(release_group.type)}</.badge>
+                      </p>
                     </div>
                   </div>
                 </.link>
@@ -121,11 +70,7 @@ defmodule MusicLibraryWeb.ScrobbleLive.Index do
           <div class="py-8 text-center">
             <.loading class="mx-auto size-8 text-zinc-400" />
             <p class="mt-2 text-zinc-600 dark:text-zinc-400">
-              <%= if @selected_release_group do %>
-                {gettext("Loading releases...")}
-              <% else %>
-                {gettext("Searching...")}
-              <% end %>
+              {gettext("Searching...")}
             </p>
           </div>
         <% end %>
@@ -156,8 +101,6 @@ defmodule MusicLibraryWeb.ScrobbleLive.Index do
        current_section: :scrobble,
        search_query: "",
        search_results: [],
-       selected_release_group: nil,
-       releases: [],
        loading: false,
        can_scrobble?: ScrobbleActivity.can_scrobble?()
      )}
@@ -190,9 +133,7 @@ defmodule MusicLibraryWeb.ScrobbleLive.Index do
       {:noreply,
        assign(socket,
          search_query: query,
-         search_results: [],
-         selected_release_group: nil,
-         releases: []
+         search_results: []
        )}
     else
       send(self(), {:perform_search, query})
@@ -200,22 +141,6 @@ defmodule MusicLibraryWeb.ScrobbleLive.Index do
     end
   end
 
-  def handle_event("select_release_group", %{"release_group_id" => release_group_id}, socket) do
-    selected_release_group =
-      Enum.find(socket.assigns.search_results, &(&1.id == release_group_id))
-
-    if selected_release_group do
-      send(self(), {:fetch_releases, selected_release_group})
-      {:noreply, assign(socket, selected_release_group: selected_release_group, loading: true)}
-    else
-      {:noreply, socket}
-    end
-  end
-
-  def handle_event("clear_selection", _params, socket) do
-    {:noreply, assign(socket, selected_release_group: nil, releases: [])}
-  end
-
   @impl true
   def handle_info({:perform_search, query}, socket) do
     case MusicBrainz.search_release_group(query, limit: 20) do
@@ -223,9 +148,7 @@ defmodule MusicLibraryWeb.ScrobbleLive.Index do
         {:noreply,
          assign(socket,
            search_results: results.release_groups,
-           loading: false,
-           selected_release_group: nil,
-           releases: []
+           loading: false
          )}
 
       {:error, _reason} ->
@@ -235,21 +158,4 @@ defmodule MusicLibraryWeb.ScrobbleLive.Index do
          |> assign(loading: false)}
     end
   end
-
-  def handle_info({:fetch_releases, release_group}, socket) do
-    case MusicBrainz.get_releases(release_group.id, limit: 50) do
-      {:ok, %{"releases" => releases}} ->
-        releases =
-          releases
-          |> Enum.map(&MusicBrainz.Release.from_api_response/1)
-
-        {:noreply, assign(socket, releases: releases, loading: false)}
-
-      {:error, _reason} ->
-        {:noreply,
-         socket
-         |> put_flash(:error, gettext("Failed to fetch releases for this release group"))
-         |> assign(loading: false)}
-    end
-  end
 end