Uniform use of .section/1 across all stats components

This commit is contained in:
Claudio Ortolina
2026-03-22 18:47:27 +00:00
parent a83efe9908
commit 87cbf55ee5
3 changed files with 258 additions and 256 deletions
@@ -337,4 +337,23 @@ defmodule MusicLibraryWeb.StatsComponents do
_other -> "" _other -> ""
end end
end end
attr :container_class, :string, default: nil
slot :title, required: true
slot :side_actions
slot :inner_block, required: true
def section(assigns) do
~H"""
<div class={["mt-5", @container_class]}>
<div class="flex items-center justify-between">
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
{render_slot(@title)}
</h1>
{render_slot(@side_actions)}
</div>
{render_slot(@inner_block)}
</div>
"""
end
end end
+178 -197
View File
@@ -227,191 +227,191 @@ defmodule MusicLibraryWeb.StatsLive.Index do
~H""" ~H"""
<div class="flow-root"> <div class="flow-root">
<.tabs id="scrobble-activity" class="mt-4"> <.tabs id="scrobble-activity" class="mt-4">
<div class="mt-5 flex end items-center justify-between"> <.section>
<div class="flex"> <:title>
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200 mr-2"> {gettext("Scrobble activity")}
{gettext("Scrobble activity")}
</h1>
<.refresh_lastfm_feed_button /> <.refresh_lastfm_feed_button />
</div> </:title>
<.tabs_list active_tab={@scrobble_activity_mode} variant="segmented"> <:side_actions>
<:tab <.tabs_list active_tab={@scrobble_activity_mode} variant="segmented">
name="albums" <:tab
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "albums"})} name="albums"
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "albums"})}
>
{gettext("Albums")}
</:tab>
<:tab
name="tracks"
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "tracks"})}
>
{gettext("Tracks")}
</:tab>
</.tabs_list>
</:side_actions>
<.tabs_panel name="albums" active={@scrobble_activity_mode == "albums"}>
<ul
id="scrobble-activity-albums"
role="list"
class="mt-4 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800"
phx-update="stream"
> >
{gettext("Albums")} <li
</:tab> :for={
<:tab {id,
name="tracks" %{
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "tracks"})} album: album,
> artist_id: artist_id,
{gettext("Tracks")} collected_record_id: collected_record_id,
</:tab> wishlisted_record_id: wishlisted_record_id,
</.tabs_list> cover_hash: cover_hash
</div> }} <- @streams.recent_albums
<.tabs_panel name="albums" active={@scrobble_activity_mode == "albums"}> }
<ul id={id}
id="scrobble-activity-albums" class="group"
role="list" >
class="mt-4 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800" <div class="relative pb-4 group-last:pb-0">
phx-update="stream" <span
> class="absolute top-6 left-6 -ml-px h-full w-0.5 bg-zinc-200 group-last:hidden"
<li aria-hidden="true"
:for={ >
{id, </span>
%{ <div class="relative flex items-center justify-between space-x-3">
album: album, <div class="flex min-w-0 items-center justify-between space-x-4">
artist_id: artist_id, <img
collected_record_id: collected_record_id, class="size-12 rounded-md shadow-sm"
wishlisted_record_id: wishlisted_record_id, src={track_or_album_cover_url(album, cover_hash)}
cover_hash: cover_hash alt={album.metadata.title}
}} <- @streams.recent_albums />
} <div>
id={id} <p
class="group" :if={!artist_id(album, artist_id)}
> class="block text-sm font-semibold text-zinc-500 dark:text-zinc-400"
<div class="relative pb-4 group-last:pb-0"> >
<span {album.artist.name}
class="absolute top-6 left-6 -ml-px h-full w-0.5 bg-zinc-200 group-last:hidden" </p>
aria-hidden="true" <.link
> :if={artist_id(album, artist_id)}
</span> class="block text-sm font-semibold text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
<div class="relative flex items-center justify-between space-x-3"> navigate={~p"/artists/#{artist_id(album, artist_id)}"}
<div class="flex min-w-0 items-center justify-between space-x-4"> >
<img {album.artist.name}
class="size-12 rounded-md shadow-sm" </.link>
src={track_or_album_cover_url(album, cover_hash)} <p class="text-sm font-semibold text-zinc-700 md:text-base dark:text-zinc-300">
alt={album.metadata.title} {album.metadata.title}
/> </p>
<div> <time
<p datetime={format_scrobbled_at_uts(album.scrobbled_at_uts)}
:if={!artist_id(album, artist_id)} class="text-right text-xs whitespace-nowrap text-zinc-500 sm:text-sm dark:text-zinc-400"
class="block text-sm font-semibold text-zinc-500 dark:text-zinc-400" >
> {album.scrobbled_at_label}
{album.artist.name} </time>
</p> <.album_metadata_tooltip album={album} />
<.link </div>
:if={artist_id(album, artist_id)}
class="block text-sm font-semibold text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
navigate={~p"/artists/#{artist_id(album, artist_id)}"}
>
{album.artist.name}
</.link>
<p class="text-sm font-semibold text-zinc-700 md:text-base dark:text-zinc-300">
{album.metadata.title}
</p>
<time
datetime={format_scrobbled_at_uts(album.scrobbled_at_uts)}
class="text-right text-xs whitespace-nowrap text-zinc-500 sm:text-sm dark:text-zinc-400"
>
{album.scrobbled_at_label}
</time>
<.album_metadata_tooltip album={album} />
</div> </div>
</div>
<.record_status_badges <.record_status_badges
musicbrainz_id={album.metadata.musicbrainz_id} musicbrainz_id={album.metadata.musicbrainz_id}
collected_record_id={collected_record_id} collected_record_id={collected_record_id}
wishlisted_record_id={wishlisted_record_id} wishlisted_record_id={wishlisted_record_id}
/> />
<.import_format_dropdown <.import_format_dropdown
:if={ :if={
album.metadata.musicbrainz_id !== "" and !collected_record_id and album.metadata.musicbrainz_id !== "" and !collected_record_id and
!wishlisted_record_id !wishlisted_record_id
} }
id={"actions-#{album.scrobbled_at_uts}-albums"} id={"actions-#{album.scrobbled_at_uts}-albums"}
musicbrainz_id={album.metadata.musicbrainz_id} musicbrainz_id={album.metadata.musicbrainz_id}
/>
</div>
</div>
</li>
</ul>
</.tabs_panel>
<.tabs_panel name="tracks" active={@scrobble_activity_mode == "tracks"}>
<ul
id="scrobble-activity-tracks"
role="list"
class="mt-5 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800"
phx-update="stream"
>
<li
:for={
{id,
%{
track: track,
artist_id: artist_id,
collected_record_id: collected_record_id,
wishlisted_record_id: wishlisted_record_id,
cover_hash: cover_hash
}} <- @streams.recent_tracks
}
id={id}
class="group"
>
<div class="relative pb-4 group-last:pb-0">
<span
class="absolute top-6 left-6 -ml-px h-full w-0.5 bg-zinc-200 group-last:hidden"
aria-hidden="true"
>
</span>
<div class="relative flex items-center justify-between space-x-3">
<div class="flex min-w-0 items-center justify-between space-x-4">
<img
class="size-12 rounded-md shadow-sm"
src={track_or_album_cover_url(track, cover_hash)}
alt={track.title}
/> />
<div>
<p
:if={!artist_id(track, artist_id)}
class="block text-sm font-semibold text-zinc-500 dark:text-zinc-400"
>
{track.artist.name}
</p>
<.link
:if={artist_id(track, artist_id)}
class="block text-sm font-semibold text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
navigate={~p"/artists/#{artist_id(track, artist_id)}"}
>
{track.artist.name}
</.link>
<p class="text-sm font-semibold text-zinc-700 md:text-base dark:text-zinc-300">
{track.title}
</p>
<p class="text-sm font-semibold text-zinc-500 dark:text-zinc-400">
{track.album.title}
</p>
<time
datetime={format_scrobbled_at_uts(track.scrobbled_at_uts)}
class="text-right text-xs whitespace-nowrap text-zinc-500 sm:text-sm dark:text-zinc-400"
>
{track.scrobbled_at_label}
</time>
<.track_metadata_tooltip track={track} />
</div>
</div> </div>
<.record_status_badges
musicbrainz_id={track.album.musicbrainz_id}
collected_record_id={collected_record_id}
wishlisted_record_id={wishlisted_record_id}
/>
<.import_format_dropdown
:if={
track.album.musicbrainz_id !== "" and !collected_record_id and
!wishlisted_record_id
}
id={"actions-#{track.scrobbled_at_uts}-tracks"}
musicbrainz_id={track.album.musicbrainz_id}
/>
</div> </div>
</div> </li>
</li> </ul>
</ul> </.tabs_panel>
</.tabs_panel> <.tabs_panel name="tracks" active={@scrobble_activity_mode == "tracks"}>
<ul
id="scrobble-activity-tracks"
role="list"
class="mt-4 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800"
phx-update="stream"
>
<li
:for={
{id,
%{
track: track,
artist_id: artist_id,
collected_record_id: collected_record_id,
wishlisted_record_id: wishlisted_record_id,
cover_hash: cover_hash
}} <- @streams.recent_tracks
}
id={id}
class="group"
>
<div class="relative pb-4 group-last:pb-0">
<span
class="absolute top-6 left-6 -ml-px h-full w-0.5 bg-zinc-200 group-last:hidden"
aria-hidden="true"
>
</span>
<div class="relative flex items-center justify-between space-x-3">
<div class="flex min-w-0 items-center justify-between space-x-4">
<img
class="size-12 rounded-md shadow-sm"
src={track_or_album_cover_url(track, cover_hash)}
alt={track.title}
/>
<div>
<p
:if={!artist_id(track, artist_id)}
class="block text-sm font-semibold text-zinc-500 dark:text-zinc-400"
>
{track.artist.name}
</p>
<.link
:if={artist_id(track, artist_id)}
class="block text-sm font-semibold text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
navigate={~p"/artists/#{artist_id(track, artist_id)}"}
>
{track.artist.name}
</.link>
<p class="text-sm font-semibold text-zinc-700 md:text-base dark:text-zinc-300">
{track.title}
</p>
<p class="text-sm font-semibold text-zinc-500 dark:text-zinc-400">
{track.album.title}
</p>
<time
datetime={format_scrobbled_at_uts(track.scrobbled_at_uts)}
class="text-right text-xs whitespace-nowrap text-zinc-500 sm:text-sm dark:text-zinc-400"
>
{track.scrobbled_at_label}
</time>
<.track_metadata_tooltip track={track} />
</div>
</div>
<.record_status_badges
musicbrainz_id={track.album.musicbrainz_id}
collected_record_id={collected_record_id}
wishlisted_record_id={wishlisted_record_id}
/>
<.import_format_dropdown
:if={
track.album.musicbrainz_id !== "" and !collected_record_id and
!wishlisted_record_id
}
id={"actions-#{track.scrobbled_at_uts}-tracks"}
musicbrainz_id={track.album.musicbrainz_id}
/>
</div>
</div>
</li>
</ul>
</.tabs_panel>
</.section>
</.tabs> </.tabs>
</div> </div>
""" """
@@ -516,25 +516,6 @@ defmodule MusicLibraryWeb.StatsLive.Index do
""" """
end end
attr :container_class, :string, default: nil
slot :title, required: true
slot :side_actions
slot :inner_block, required: true
defp section(assigns) do
~H"""
<div class={["mt-5", @container_class]}>
<div class="flex items-center justify-between">
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
{render_slot(@title)}
</h1>
{render_slot(@side_actions)}
</div>
{render_slot(@inner_block)}
</div>
"""
end
defp assign_counts(socket) do defp assign_counts(socket) do
collection_count_by_format = Collection.count_records_by_format() collection_count_by_format = Collection.count_records_by_format()
@@ -1,6 +1,8 @@
defmodule MusicLibraryWeb.StatsLive.TopByPeriod do defmodule MusicLibraryWeb.StatsLive.TopByPeriod do
use MusicLibraryWeb, :live_component use MusicLibraryWeb, :live_component
import MusicLibraryWeb.StatsComponents, only: [section: 1]
attr :id, :string, required: true attr :id, :string, required: true
attr :title, :string, required: true attr :title, :string, required: true
attr :key, :atom, required: true attr :key, :atom, required: true
@@ -19,67 +21,67 @@ defmodule MusicLibraryWeb.StatsLive.TopByPeriod do
@impl true @impl true
def render(assigns) do def render(assigns) do
~H""" ~H"""
<div class="mt-5"> <div>
<.tabs> <.tabs>
<div class="flex justify-between"> <.section>
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200"> <:title>{@title}</:title>
{@title} <:side_actions>
</h1> <.tabs_list active_tab={name_from_period(@key, @period)} variant="segmented" size="xs">
<.tabs_list active_tab={name_from_period(@key, @period)} variant="segmented" size="xs"> <:tab
<:tab class="flex-1"
class="flex-1" name={"#{@key}_last_7_days"}
name={"#{@key}_last_7_days"} phx-click={JS.push("set_period", value: %{period: "last_7_days"})}
phx-click={JS.push("set_period", value: %{period: "last_7_days"})} phx-target={@myself}
phx-target={@myself} >
> {gettext("7d")}
{gettext("7d")} </:tab>
</:tab> <:tab
<:tab class="flex-1"
class="flex-1" name={"#{@key}_last_30_days"}
name={"#{@key}_last_30_days"} phx-click={JS.push("set_period", value: %{period: "last_30_days"})}
phx-click={JS.push("set_period", value: %{period: "last_30_days"})} phx-target={@myself}
phx-target={@myself} >
> {gettext("30d")}
{gettext("30d")} </:tab>
</:tab> <:tab
<:tab class="flex-1"
class="flex-1" name={"#{@key}_last_90_days"}
name={"#{@key}_last_90_days"} phx-click={JS.push("set_period", value: %{period: "last_90_days"})}
phx-click={JS.push("set_period", value: %{period: "last_90_days"})} phx-target={@myself}
phx-target={@myself} >
> {gettext("90d")}
{gettext("90d")} </:tab>
</:tab> <:tab
<:tab class="flex-1"
class="flex-1" name={"#{@key}_last_365_days"}
name={"#{@key}_last_365_days"} phx-click={JS.push("set_period", value: %{period: "last_365_days"})}
phx-click={JS.push("set_period", value: %{period: "last_365_days"})} phx-target={@myself}
phx-target={@myself} >
> {gettext("1y")}
{gettext("1y")} </:tab>
</:tab> <:tab
<:tab class="flex-1"
class="flex-1" name={"#{@key}_all_time"}
name={"#{@key}_all_time"} phx-click={JS.push("set_period", value: %{period: "all_time"})}
phx-click={JS.push("set_period", value: %{period: "all_time"})} phx-target={@myself}
phx-target={@myself} >
> {gettext("∞")}
{gettext("∞")} </:tab>
</:tab> </.tabs_list>
</.tabs_list> </:side_actions>
</div> <.async_result :let={items} assign={assigns[@key]}>
<.async_result :let={items} assign={assigns[@key]}> <:loading>
<:loading> <div class="flex h-182 items-center justify-center">
<div class="flex h-182 items-center justify-center"> <.loading />
<.loading /> </div>
</:loading>
<div class="mt-4 rounded-md bg-white p-4 shadow-sm dark:bg-zinc-800">
<div class="space-y-2">
{render_slot(@item, items)}
</div>
</div> </div>
</:loading> </.async_result>
<div class="mt-4 rounded-md bg-white p-4 shadow-sm dark:bg-zinc-800"> </.section>
<div class="space-y-2">
{render_slot(@item, items)}
</div>
</div>
</.async_result>
</.tabs> </.tabs>
</div> </div>
""" """