#9 Artist show styling

Show page first draft almost complete.
TODOs: Add menu functionality from Livebeats. Investigate merging views. What we have here is technically functional and we can always hide the button.

lib/beatseek/albums.ex

@@ -6,6 +6,7 @@ defmodule Beatseek.Albums do
   import Ecto.Query, warn: false
   alias Beatseek.Repo
 
+  alias Beatseek.Artists.Artist
   alias Beatseek.Albums.Album
 
   @doc """
@@ -23,6 +24,21 @@ defmodule Beatseek.Albums do
     |> Repo.preload(:artist)
   end
 
+  @doc """
+  Returns the list of albums by artist.
+
+  ## Examples
+
+      iex> list_albums_by_artist()
+      [%Album{}, ...]
+
+  """
+  def list_albums_by_artist(artist) do
+    Album
+    |> where([album], album.artist_id == ^artist.id)
+    |> Repo.all()
+  end
+
   @doc """
   Gets a single album.
 

lib/beatseek_web/live/artist_live/show.ex

@@ -2,6 +2,7 @@ defmodule BeatseekWeb.ArtistLive.Show do
   use BeatseekWeb, :live_view
 
   alias Beatseek.Artists
+  alias Beatseek.Albums
 
   @impl true
   def mount(_params, _session, socket) do
@@ -10,12 +11,21 @@ defmodule BeatseekWeb.ArtistLive.Show do
 
   @impl true
   def handle_params(%{"id" => id}, _, socket) do
+    artist = Artists.get_artist!(id)
+    albums = list_albums_by_artist(artist)
+
     {:noreply,
      socket
      |> assign(:page_title, page_title(socket.assigns.live_action))
-     |> assign(:artist, Artists.get_artist!(id))}
+     |> assign(:artist, artist)
+     |> assign(:albums, albums)
+     |> assign(:album_count, Enum.count(albums))}
   end
 
   defp page_title(:show), do: "Show Artist"
   defp page_title(:edit), do: "Edit Artist"
+
+  defp list_albums_by_artist(artist) do
+    Albums.list_albums_by_artist(artist)
+  end
 end

lib/beatseek_web/live/artist_live/show.html.heex

@@ -1,7 +1,36 @@
 <div class="flex-row">
   <.back navigate={~p"/artists"}></.back>
-  <.header>
-    <%= @artist.name %>
-    <:subtitle>This is a artist record from your database.</:subtitle>
-  </.header>
+  <div class="flex flex-col pt-4 pl-10">
+    <header class="sticky top-0 w-full bg-white divide-y-2 pt-2 pb-2">
+      <div class="flex flex-row justify-between items-end">
+        <div class="text-3xl font-bold"><%= @artist.name %></div>
+        <button
+          id="artist_menu"
+          type="button"
+          class="group bg-gray-100 rounded-full px-0.5 py-0.5 text-sm text-left font-medium text-primary-500 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500"
+          phx-click={}
+          phx-hook="ArtistMenu"
+          data-active-class="bg-gray-100"
+          aria-haspopup="true"
+        >
+          <Heroicons.ellipsis_horizontal solid class="h-6 w-6 stroke-current" />
+        </button>
+        <%!-- <span class="text-primary-200">
+        </span> --%>
+      </div>
+      <div class="text-gray-500 text-sm uppercase font-medium"><%= @album_count %> albums</div>
+    </header>
+    <div :for={album <- @albums} class="flex pt-14">
+      <img
+        src={if is_nil(album.image_url), do: "/images/album.svg", else: album.image_url}
+        class="h-48 w-48 bg-gray-200"
+      />
+      <div class="pl-12 text-2xl">
+        <div class="text-black font-bold text-xl"><%= album.name %></div>
+        <div class="flex flex-col text-gray-500 text-sm uppercase font-medium pt-1">
+          <%= album.genre %> · <%= album.year %>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>