Use explicit Phoenix 1.8 style layouts

This commit is contained in:
Claudio Ortolina
2025-09-21 21:11:17 +03:00
parent 0071d45998
commit 64cb917a4e
11 changed files with 1907 additions and 1882 deletions
+2 -2
View File
@@ -62,8 +62,7 @@ defmodule MusicLibraryWeb do
def live_view do def live_view do
quote do quote do
use Phoenix.LiveView, use Phoenix.LiveView
layout: {MusicLibraryWeb.Layouts, :app}
unquote(html_helpers()) unquote(html_helpers())
end end
@@ -102,6 +101,7 @@ defmodule MusicLibraryWeb do
# HTML escaping functionality # HTML escaping functionality
import Phoenix.HTML import Phoenix.HTML
alias MusicLibraryWeb.Layouts
# Shortcut for generating JS commands # Shortcut for generating JS commands
alias Phoenix.LiveView.JS alias Phoenix.LiveView.JS
@@ -126,7 +126,7 @@
toasts_sync={assigns[:toasts_sync]} toasts_sync={assigns[:toasts_sync]}
toast_class_fn={&toast_class_fn/1} toast_class_fn={&toast_class_fn/1}
/> />
{@inner_content} {render_slot(@inner_block)}
</div> </div>
</main> </main>
@@ -1,4 +1,5 @@
<div class="mt-4 px-4 sm:px-6 lg:px-8"> <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<div class="mt-4 px-4 sm:px-6 lg:px-8">
<header class="mt-1 gap-1"> <header class="mt-1 gap-1">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h1 class="font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap"> <h1 class="font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
@@ -228,13 +229,13 @@
title={gettext("Discogs data")} title={gettext("Discogs data")}
data={@artist_info.discogs_data} data={@artist_info.discogs_data}
/> />
</div> </div>
<.structured_modal <.structured_modal
:if={@live_action == :import} :if={@live_action == :import}
id="record-modal" id="record-modal"
on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")} on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
> >
<.live_component <.live_component
module={MusicLibraryWeb.AddRecordComponent} module={MusicLibraryWeb.AddRecordComponent}
id={:search} id={:search}
@@ -244,21 +245,21 @@
initial_query={"arid:#{@artist.musicbrainz_id}"} initial_query={"arid:#{@artist.musicbrainz_id}"}
icon_name="hero-plus" icon_name="hero-plus"
/> />
</.structured_modal> </.structured_modal>
<.live_component <.live_component
id="artist-notes" id="artist-notes"
sheet_id="artist-notes-sheet" sheet_id="artist-notes-sheet"
module={MusicLibraryWeb.NotesComponent} module={MusicLibraryWeb.NotesComponent}
entity={:artist} entity={:artist}
musicbrainz_id={@artist.musicbrainz_id} musicbrainz_id={@artist.musicbrainz_id}
/> />
<.structured_modal <.structured_modal
:if={@live_action == :edit} :if={@live_action == :edit}
id="artist-info-modal" id="artist-info-modal"
on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")} on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
> >
<.live_component <.live_component
module={MusicLibraryWeb.ArtistLive.FormComponent} module={MusicLibraryWeb.ArtistLive.FormComponent}
id={@artist_info.id} id={@artist_info.id}
@@ -267,4 +268,5 @@
artist={@artist} artist={@artist}
patch={~p"/artists/#{@artist.musicbrainz_id}"} patch={~p"/artists/#{@artist.musicbrainz_id}"}
/> />
</.structured_modal> </.structured_modal>
</Layouts.app>
@@ -1,4 +1,5 @@
<div> <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<div>
<header class="gap-6 mb-2"> <header class="gap-6 mb-2">
<div class="flex items-center justify-between gap-6 mb-2 mt-2"> <div class="flex items-center justify-between gap-6 mb-2 mt-2">
<.search_form query={@record_list_params.query} /> <.search_form query={@record_list_params.query} />
@@ -52,19 +53,19 @@
</.button> </.button>
</.button_group> </.button_group>
</div> </div>
</div> </div>
<.record_list <.record_list
records={@streams.records} records={@streams.records}
record_show_path={fn record -> ~p"/collection/#{record}" end} record_show_path={fn record -> ~p"/collection/#{record}" end}
record_edit_path={fn record -> ~p"/collection/#{record}/edit" end} record_edit_path={fn record -> ~p"/collection/#{record}/edit" end}
/> />
<.structured_modal <.structured_modal
:if={@live_action == :edit} :if={@live_action == :edit}
id="record-modal" id="record-modal"
on_close={JS.patch(back_path(@record_list_params))} on_close={JS.patch(back_path(@record_list_params))}
> >
<.live_component <.live_component
module={MusicLibraryWeb.RecordFormComponent} module={MusicLibraryWeb.RecordFormComponent}
id={@record.id} id={@record.id}
@@ -73,13 +74,13 @@
record={@record} record={@record}
patch={back_path(@record_list_params)} patch={back_path(@record_list_params)}
/> />
</.structured_modal> </.structured_modal>
<.structured_modal <.structured_modal
:if={@live_action == :import} :if={@live_action == :import}
id="record-modal" id="record-modal"
on_close={JS.patch(back_path(@record_list_params))} on_close={JS.patch(back_path(@record_list_params))}
> >
<.live_component <.live_component
module={MusicLibraryWeb.AddRecordComponent} module={MusicLibraryWeb.AddRecordComponent}
id={:search} id={:search}
@@ -90,13 +91,13 @@
initial_query="" initial_query=""
icon_name="hero-plus" icon_name="hero-plus"
/> />
</.structured_modal> </.structured_modal>
<.structured_modal <.structured_modal
:if={@live_action == :barcode_scan} :if={@live_action == :barcode_scan}
id="barcode-scanner-modal" id="barcode-scanner-modal"
on_close={JS.patch(back_path(@record_list_params))} on_close={JS.patch(back_path(@record_list_params))}
> >
<.live_component <.live_component
module={MusicLibraryWeb.BarcodeScannerComponent} module={MusicLibraryWeb.BarcodeScannerComponent}
id={:barcode_scanner} id={:barcode_scanner}
@@ -104,6 +105,7 @@
action={@live_action} action={@live_action}
patch={back_path(@record_list_params)} patch={back_path(@record_list_params)}
/> />
</.structured_modal> </.structured_modal>
<.pagination id={:bottom_pagination} pagination_params={@record_list_params} /> <.pagination id={:bottom_pagination} pagination_params={@record_list_params} />
</Layouts.app>
@@ -1,4 +1,5 @@
<div class="md:flex mt-4 px-4 md:gap-x-4"> <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<div class="md:flex mt-4 px-4 md:gap-x-4">
<div class="drop-shadow-sm md:max-w-[38rem]"> <div class="drop-shadow-sm md:max-w-[38rem]">
<.record_cover <.record_cover
record={@record} record={@record}
@@ -287,7 +288,9 @@
</dt> </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"> <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> <ul>
<li :for={included_release_group <- Records.Record.included_release_groups(@record)}> <li :for={
included_release_group <- Records.Record.included_release_groups(@record)
}>
{included_release_group.artists} - {included_release_group.title} {included_release_group.artists} - {included_release_group.title}
</li> </li>
</ul> </ul>
@@ -321,30 +324,30 @@
</dl> </dl>
</div> </div>
</div> </div>
</div> </div>
<.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} /> <.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} />
<.live_component <.live_component
id="release-with-tracks" id="release-with-tracks"
sheet_id="release-with-tracks-sheet" sheet_id="release-with-tracks-sheet"
module={MusicLibraryWeb.ReleaseComponent} module={MusicLibraryWeb.ReleaseComponent}
record={@record} record={@record}
/> />
<.live_component <.live_component
id="record-notes" id="record-notes"
sheet_id="record-notes-sheet" sheet_id="record-notes-sheet"
module={MusicLibraryWeb.NotesComponent} module={MusicLibraryWeb.NotesComponent}
entity={:record} entity={:record}
musicbrainz_id={@record.musicbrainz_id} musicbrainz_id={@record.musicbrainz_id}
/> />
<.structured_modal <.structured_modal
:if={@live_action == :edit} :if={@live_action == :edit}
id="record-modal" id="record-modal"
on_close={JS.patch(~p"/collection/#{@record}")} on_close={JS.patch(~p"/collection/#{@record}")}
> >
<.live_component <.live_component
module={MusicLibraryWeb.RecordFormComponent} module={MusicLibraryWeb.RecordFormComponent}
id={@record.id} id={@record.id}
@@ -353,4 +356,5 @@
record={@record} record={@record}
patch={~p"/collection/#{@record}"} patch={~p"/collection/#{@record}"}
/> />
</.structured_modal> </.structured_modal>
</Layouts.app>
@@ -1,4 +1,5 @@
<header class="mb-6"> <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<header class="mb-6">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
<h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100"> <h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
@@ -12,9 +13,9 @@
</.button> </.button>
</div> </div>
</div> </div>
</header> </header>
<div class="mt-6 space-y-4"> <div class="mt-6 space-y-4">
<ul <ul
role="list" role="list"
class="divide-y divide-gray-200 dark:divide-gray-800" class="divide-y divide-gray-200 dark:divide-gray-800"
@@ -88,13 +89,13 @@
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
<.structured_modal <.structured_modal
:if={@live_action in [:new, :edit]} :if={@live_action in [:new, :edit]}
id="template-modal" id="template-modal"
on_close={JS.patch(~p"/online-store-templates")} on_close={JS.patch(~p"/online-store-templates")}
> >
<.live_component <.live_component
module={MusicLibraryWeb.OnlineStoreTemplateLive.FormComponent} module={MusicLibraryWeb.OnlineStoreTemplateLive.FormComponent}
id={@template.id || :new} id={@template.id || :new}
@@ -103,4 +104,5 @@
template={@template} template={@template}
patch={~p"/online-store-templates"} patch={~p"/online-store-templates"}
/> />
</.structured_modal> </.structured_modal>
</Layouts.app>
@@ -1,4 +1,5 @@
<header class="mb-6"> <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<header class="mb-6">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
<h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100"> <h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
@@ -26,9 +27,9 @@
</.button_group> </.button_group>
</div> </div>
</div> </div>
</header> </header>
<div class="mt-6 space-y-4"> <div class="mt-6 space-y-4">
<ul phx-update="stream" id="scrobble-rules-list" class="space-y-4"> <ul phx-update="stream" id="scrobble-rules-list" class="space-y-4">
<li <li
:for={{dom_id, scrobble_rule} <- @streams.scrobble_rules} :for={{dom_id, scrobble_rule} <- @streams.scrobble_rules}
@@ -97,13 +98,13 @@
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
<.structured_modal <.structured_modal
:if={@live_action in [:new, :edit]} :if={@live_action in [:new, :edit]}
id="scrobble_rule-modal" id="scrobble_rule-modal"
on_close={JS.patch(~p"/scrobble-rules")} on_close={JS.patch(~p"/scrobble-rules")}
> >
<.live_component <.live_component
module={MusicLibraryWeb.ScrobbleRulesLive.FormComponent} module={MusicLibraryWeb.ScrobbleRulesLive.FormComponent}
id={@scrobble_rule.id || :new} id={@scrobble_rule.id || :new}
@@ -112,4 +113,5 @@
scrobble_rule={@scrobble_rule} scrobble_rule={@scrobble_rule}
patch={~p"/scrobble-rules"} patch={~p"/scrobble-rules"}
/> />
</.structured_modal> </.structured_modal>
</Layouts.app>
@@ -1,4 +1,5 @@
<div> <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<div>
<header class="gap-6"> <header class="gap-6">
<div class="mb-2 mt-2"> <div class="mb-2 mt-2">
<.search_form query={@track_list_params.query} /> <.search_form query={@track_list_params.query} />
@@ -54,9 +55,9 @@
</.button> </.button>
</.button_group> </.button_group>
</div> </div>
</div> </div>
<div class="mt-6"> <div class="mt-6">
<ul <ul
class="divide-y divide-zinc-100 dark:divide-zinc-300/20 mt-5" class="divide-y divide-zinc-100 dark:divide-zinc-300/20 mt-5"
role="list" role="list"
@@ -143,13 +144,13 @@
</ul> </ul>
<.pagination id={:bottom_pagination} pagination_params={@track_list_params} /> <.pagination id={:bottom_pagination} pagination_params={@track_list_params} />
</div> </div>
<.structured_modal <.structured_modal
:if={@live_action == :edit} :if={@live_action == :edit}
id="track-modal" id="track-modal"
on_close={JS.patch(back_path(@track_list_params))} on_close={JS.patch(back_path(@track_list_params))}
> >
<.live_component <.live_component
module={MusicLibraryWeb.ScrobbledTracksLive.FormComponent} module={MusicLibraryWeb.ScrobbledTracksLive.FormComponent}
id={@track.scrobbled_at_uts} id={@track.scrobbled_at_uts}
@@ -157,4 +158,5 @@
track={@track} track={@track}
patch={back_path(@track_list_params)} patch={back_path(@track_list_params)}
/> />
</.structured_modal> </.structured_modal>
</Layouts.app>
@@ -1,4 +1,5 @@
<div> <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<div>
<h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold"> <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Records")} {gettext("Records")}
</h1> </h1>
@@ -21,9 +22,9 @@
tooltip={@scrobble_count} tooltip={@scrobble_count}
/> />
</dl> </dl>
</div> </div>
<div class="grid lg:grid-cols-2 gap-x-5"> <div class="grid lg:grid-cols-2 gap-x-5">
<div> <div>
<h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold"> <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Formats")} {gettext("Formats")}
@@ -45,16 +46,16 @@
category_path_fn={fn type -> ~p"/collection?query=type:#{type}" end} category_path_fn={fn type -> ~p"/collection?query=type:#{type}" end}
/> />
</div> </div>
</div> </div>
<div> <div>
<div class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-5"> <div class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-5">
<TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} /> <TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} />
<TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} /> <TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} />
</div> </div>
</div> </div>
<div class="flow-root"> <div class="flow-root">
<div class="mt-5 flex justify-between items-center"> <div class="mt-5 flex justify-between items-center">
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold"> <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Scrobble activity")} {gettext("Scrobble activity")}
@@ -415,7 +416,8 @@
</.link> </.link>
<.link <.link
:if={ :if={
record_id = tracked_record?(@wishlisted_releases, track.album.musicbrainz_id) record_id =
tracked_record?(@wishlisted_releases, track.album.musicbrainz_id)
} }
navigate={~p"/wishlist/#{record_id}"} navigate={~p"/wishlist/#{record_id}"}
> >
@@ -464,9 +466,9 @@
</ul> </ul>
</.tabs_panel> </.tabs_panel>
</.tabs> </.tabs>
</div> </div>
<div class="mt-5 grid grid-cols-1 lg:grid-cols-11 gap-4"> <div class="mt-5 grid grid-cols-1 lg:grid-cols-11 gap-4">
<div class="lg:col-span-3"> <div class="lg:col-span-3">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold"> <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
@@ -535,10 +537,13 @@
label_fn={fn {genre, _count} -> genre end} label_fn={fn {genre, _count} -> genre end}
value_fn={fn {_genre, count} -> count end} value_fn={fn {_genre, count} -> count end}
label_click={ label_click={
fn {genre, _count} -> JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}") end fn {genre, _count} ->
JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}")
end
} }
class="w-full" class="w-full"
/> />
</div> </div>
</div> </div>
</div> </div>
</Layouts.app>
@@ -1,4 +1,5 @@
<div> <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<div>
<header class="gap-6 mb-2"> <header class="gap-6 mb-2">
<div class="flex items-center justify-between gap-6 mb-2 mt-2"> <div class="flex items-center justify-between gap-6 mb-2 mt-2">
<.search_form query={@record_list_params.query} /> <.search_form query={@record_list_params.query} />
@@ -39,20 +40,20 @@
</.button> </.button>
</.button_group> </.button_group>
</div> </div>
</div> </div>
<.record_list <.record_list
current_date={@current_date} current_date={@current_date}
records={@streams.records} records={@streams.records}
record_show_path={fn record -> ~p"/wishlist/#{record}" end} record_show_path={fn record -> ~p"/wishlist/#{record}" end}
record_edit_path={fn record -> ~p"/wishlist/#{record}/edit" end} record_edit_path={fn record -> ~p"/wishlist/#{record}/edit" end}
/> />
<.structured_modal <.structured_modal
:if={@live_action == :edit} :if={@live_action == :edit}
id="record-modal" id="record-modal"
on_close={JS.patch(back_path(@record_list_params))} on_close={JS.patch(back_path(@record_list_params))}
> >
<.live_component <.live_component
module={MusicLibraryWeb.RecordFormComponent} module={MusicLibraryWeb.RecordFormComponent}
id={@record.id} id={@record.id}
@@ -61,13 +62,13 @@
record={@record} record={@record}
patch={back_path(@record_list_params)} patch={back_path(@record_list_params)}
/> />
</.structured_modal> </.structured_modal>
<.structured_modal <.structured_modal
:if={@live_action == :import} :if={@live_action == :import}
id="record-modal" id="record-modal"
on_close={JS.patch(back_path(@record_list_params))} on_close={JS.patch(back_path(@record_list_params))}
> >
<.live_component <.live_component
module={MusicLibraryWeb.AddRecordComponent} module={MusicLibraryWeb.AddRecordComponent}
id={:search} id={:search}
@@ -78,6 +79,7 @@
initial_query="" initial_query=""
icon_name="hero-plus" icon_name="hero-plus"
/> />
</.structured_modal> </.structured_modal>
<.pagination id={:bottom_pagination} pagination_params={@record_list_params} /> <.pagination id={:bottom_pagination} pagination_params={@record_list_params} />
</Layouts.app>
@@ -1,4 +1,5 @@
<div class="md:flex mt-4 px-4 md:gap-x-4"> <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<div class="md:flex mt-4 px-4 md:gap-x-4">
<div class="drop-shadow-sm md:max-w-[38rem]"> <div class="drop-shadow-sm md:max-w-[38rem]">
<.record_cover <.record_cover
record={@record} record={@record}
@@ -243,7 +244,9 @@
</dt> </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"> <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> <ul>
<li :for={included_release_group <- Records.Record.included_release_groups(@record)}> <li :for={
included_release_group <- Records.Record.included_release_groups(@record)
}>
{included_release_group.artists} - {included_release_group.title} {included_release_group.artists} - {included_release_group.title}
</li> </li>
</ul> </ul>
@@ -268,9 +271,9 @@
</dl> </dl>
</div> </div>
</div> </div>
</div> </div>
<div :if={@online_store_templates != []} class="mt-4"> <div :if={@online_store_templates != []} class="mt-4">
<details class="px-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"> <details class="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 font-medium cursor-pointer"> <summary class="text-xs sm:text-sm font-medium cursor-pointer">
{gettext("Check Online Stores")} {gettext("Check Online Stores")}
@@ -297,15 +300,15 @@
</.button> </.button>
</div> </div>
</details> </details>
</div> </div>
<.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} /> <.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} />
<.structured_modal <.structured_modal
:if={@live_action == :edit} :if={@live_action == :edit}
id="record-modal" id="record-modal"
on_close={JS.patch(~p"/wishlist/#{@record}")} on_close={JS.patch(~p"/wishlist/#{@record}")}
> >
<.live_component <.live_component
module={MusicLibraryWeb.RecordFormComponent} module={MusicLibraryWeb.RecordFormComponent}
id={@record.id} id={@record.id}
@@ -314,4 +317,5 @@
record={@record} record={@record}
patch={~p"/wishlist/#{@record}"} patch={~p"/wishlist/#{@record}"}
/> />
</.structured_modal> </.structured_modal>
</Layouts.app>