Use explicit Phoenix 1.8 style layouts

lib/music_library_web.ex

@@ -62,8 +62,7 @@ defmodule MusicLibraryWeb do
 
   def live_view do
     quote do
-      use Phoenix.LiveView,
-        layout: {MusicLibraryWeb.Layouts, :app}
+      use Phoenix.LiveView
 
       unquote(html_helpers())
     end
@@ -102,6 +101,7 @@ defmodule MusicLibraryWeb do
       # HTML escaping functionality
       import Phoenix.HTML
 
+      alias MusicLibraryWeb.Layouts
       # Shortcut for generating JS commands
       alias Phoenix.LiveView.JS
 

lib/music_library_web/components/layouts/app.html.heex

@@ -126,7 +126,7 @@
       toasts_sync={assigns[:toasts_sync]}
       toast_class_fn={&toast_class_fn/1}
     />
-    {@inner_content}
+    {render_slot(@inner_block)}
   </div>
 </main>
 

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

@@ -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">
       <div class="flex items-center justify-between">
         <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")}
       data={@artist_info.discogs_data}
     />
-</div>
+  </div>
 
-<.structured_modal
+  <.structured_modal
     :if={@live_action == :import}
     id="record-modal"
     on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
->
+  >
     <.live_component
       module={MusicLibraryWeb.AddRecordComponent}
       id={:search}
@@ -244,21 +245,21 @@
       initial_query={"arid:#{@artist.musicbrainz_id}"}
       icon_name="hero-plus"
     />
-</.structured_modal>
+  </.structured_modal>
 
-<.live_component
+  <.live_component
     id="artist-notes"
     sheet_id="artist-notes-sheet"
     module={MusicLibraryWeb.NotesComponent}
     entity={:artist}
     musicbrainz_id={@artist.musicbrainz_id}
-/>
+  />
 
-<.structured_modal
+  <.structured_modal
     :if={@live_action == :edit}
     id="artist-info-modal"
     on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
->
+  >
     <.live_component
       module={MusicLibraryWeb.ArtistLive.FormComponent}
       id={@artist_info.id}
@@ -267,4 +268,5 @@
       artist={@artist}
       patch={~p"/artists/#{@artist.musicbrainz_id}"}
     />
-</.structured_modal>
+  </.structured_modal>
+</Layouts.app>

lib/music_library_web/live/collection_live/index.html.heex

@@ -1,4 +1,5 @@
-<div>
+<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
+  <div>
     <header class="gap-6 mb-2">
       <div class="flex items-center justify-between gap-6 mb-2 mt-2">
         <.search_form query={@record_list_params.query} />
@@ -52,19 +53,19 @@
         </.button>
       </.button_group>
     </div>
-</div>
+  </div>
 
-<.record_list
+  <.record_list
     records={@streams.records}
     record_show_path={fn record -> ~p"/collection/#{record}" end}
     record_edit_path={fn record -> ~p"/collection/#{record}/edit" end}
-/>
+  />
 
-<.structured_modal
+  <.structured_modal
     :if={@live_action == :edit}
     id="record-modal"
     on_close={JS.patch(back_path(@record_list_params))}
->
+  >
     <.live_component
       module={MusicLibraryWeb.RecordFormComponent}
       id={@record.id}
@@ -73,13 +74,13 @@
       record={@record}
       patch={back_path(@record_list_params)}
     />
-</.structured_modal>
+  </.structured_modal>
 
-<.structured_modal
+  <.structured_modal
     :if={@live_action == :import}
     id="record-modal"
     on_close={JS.patch(back_path(@record_list_params))}
->
+  >
     <.live_component
       module={MusicLibraryWeb.AddRecordComponent}
       id={:search}
@@ -90,13 +91,13 @@
       initial_query=""
       icon_name="hero-plus"
     />
-</.structured_modal>
+  </.structured_modal>
 
-<.structured_modal
+  <.structured_modal
     :if={@live_action == :barcode_scan}
     id="barcode-scanner-modal"
     on_close={JS.patch(back_path(@record_list_params))}
->
+  >
     <.live_component
       module={MusicLibraryWeb.BarcodeScannerComponent}
       id={:barcode_scanner}
@@ -104,6 +105,7 @@
       action={@live_action}
       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>

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

@@ -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]">
       <.record_cover
         record={@record}
@@ -287,7 +288,9 @@
             </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)}>
+                <li :for={
+                  included_release_group <- Records.Record.included_release_groups(@record)
+                }>
                   {included_release_group.artists} - {included_release_group.title}
                 </li>
               </ul>
@@ -321,30 +324,30 @@
         </dl>
       </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"
     sheet_id="release-with-tracks-sheet"
     module={MusicLibraryWeb.ReleaseComponent}
     record={@record}
-/>
+  />
 
-<.live_component
+  <.live_component
     id="record-notes"
     sheet_id="record-notes-sheet"
     module={MusicLibraryWeb.NotesComponent}
     entity={:record}
     musicbrainz_id={@record.musicbrainz_id}
-/>
+  />
 
-<.structured_modal
+  <.structured_modal
     :if={@live_action == :edit}
     id="record-modal"
     on_close={JS.patch(~p"/collection/#{@record}")}
->
+  >
     <.live_component
       module={MusicLibraryWeb.RecordFormComponent}
       id={@record.id}
@@ -353,4 +356,5 @@
       record={@record}
       patch={~p"/collection/#{@record}"}
     />
-</.structured_modal>
+  </.structured_modal>
+</Layouts.app>

lib/music_library_web/live/online_store_template_live/index.html.heex

@@ -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>
         <h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
@@ -12,9 +13,9 @@
         </.button>
       </div>
     </div>
-</header>
+  </header>
 
-<div class="mt-6 space-y-4">
+  <div class="mt-6 space-y-4">
     <ul
       role="list"
       class="divide-y divide-gray-200 dark:divide-gray-800"
@@ -88,13 +89,13 @@
         </div>
       </li>
     </ul>
-</div>
+  </div>
 
-<.structured_modal
+  <.structured_modal
     :if={@live_action in [:new, :edit]}
     id="template-modal"
     on_close={JS.patch(~p"/online-store-templates")}
->
+  >
     <.live_component
       module={MusicLibraryWeb.OnlineStoreTemplateLive.FormComponent}
       id={@template.id || :new}
@@ -103,4 +104,5 @@
       template={@template}
       patch={~p"/online-store-templates"}
     />
-</.structured_modal>
+  </.structured_modal>
+</Layouts.app>

lib/music_library_web/live/scrobble_rules_live/index.html.heex

@@ -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>
         <h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
@@ -26,9 +27,9 @@
         </.button_group>
       </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">
       <li
         :for={{dom_id, scrobble_rule} <- @streams.scrobble_rules}
@@ -97,13 +98,13 @@
         </div>
       </li>
     </ul>
-</div>
+  </div>
 
-<.structured_modal
+  <.structured_modal
     :if={@live_action in [:new, :edit]}
     id="scrobble_rule-modal"
     on_close={JS.patch(~p"/scrobble-rules")}
->
+  >
     <.live_component
       module={MusicLibraryWeb.ScrobbleRulesLive.FormComponent}
       id={@scrobble_rule.id || :new}
@@ -112,4 +113,5 @@
       scrobble_rule={@scrobble_rule}
       patch={~p"/scrobble-rules"}
     />
-</.structured_modal>
+  </.structured_modal>
+</Layouts.app>

lib/music_library_web/live/scrobbled_tracks_live/index.html.heex

@@ -1,4 +1,5 @@
-<div>
+<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
+  <div>
     <header class="gap-6">
       <div class="mb-2 mt-2">
         <.search_form query={@track_list_params.query} />
@@ -54,9 +55,9 @@
         </.button>
       </.button_group>
     </div>
-</div>
+  </div>
 
-<div class="mt-6">
+  <div class="mt-6">
     <ul
       class="divide-y divide-zinc-100 dark:divide-zinc-300/20 mt-5"
       role="list"
@@ -143,13 +144,13 @@
     </ul>
 
     <.pagination id={:bottom_pagination} pagination_params={@track_list_params} />
-</div>
+  </div>
 
-<.structured_modal
+  <.structured_modal
     :if={@live_action == :edit}
     id="track-modal"
     on_close={JS.patch(back_path(@track_list_params))}
->
+  >
     <.live_component
       module={MusicLibraryWeb.ScrobbledTracksLive.FormComponent}
       id={@track.scrobbled_at_uts}
@@ -157,4 +158,5 @@
       track={@track}
       patch={back_path(@track_list_params)}
     />
-</.structured_modal>
+  </.structured_modal>
+</Layouts.app>

lib/music_library_web/live/stats_live/index.html.heex

@@ -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">
       {gettext("Records")}
     </h1>
@@ -21,9 +22,9 @@
         tooltip={@scrobble_count}
       />
     </dl>
-</div>
+  </div>
 
-<div class="grid lg:grid-cols-2 gap-x-5">
+  <div class="grid lg:grid-cols-2 gap-x-5">
     <div>
       <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
         {gettext("Formats")}
@@ -45,16 +46,16 @@
         category_path_fn={fn type -> ~p"/collection?query=type:#{type}" end}
       />
     </div>
-</div>
+  </div>
 
-<div>
+  <div>
     <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} />
       <TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} />
     </div>
-</div>
+  </div>
 
-<div class="flow-root">
+  <div class="flow-root">
     <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">
         {gettext("Scrobble activity")}
@@ -415,7 +416,8 @@
                   </.link>
                   <.link
                     :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}"}
                   >
@@ -464,9 +466,9 @@
         </ul>
       </.tabs_panel>
     </.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="flex justify-between items-center">
         <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}
           value_fn={fn {_genre, count} -> count end}
           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"
         />
       </div>
     </div>
-</div>
+  </div>
+</Layouts.app>

lib/music_library_web/live/wishlist_live/index.html.heex

@@ -1,4 +1,5 @@
-<div>
+<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
+  <div>
     <header class="gap-6 mb-2">
       <div class="flex items-center justify-between gap-6 mb-2 mt-2">
         <.search_form query={@record_list_params.query} />
@@ -39,20 +40,20 @@
         </.button>
       </.button_group>
     </div>
-</div>
+  </div>
 
-<.record_list
+  <.record_list
     current_date={@current_date}
     records={@streams.records}
     record_show_path={fn record -> ~p"/wishlist/#{record}" end}
     record_edit_path={fn record -> ~p"/wishlist/#{record}/edit" end}
-/>
+  />
 
-<.structured_modal
+  <.structured_modal
     :if={@live_action == :edit}
     id="record-modal"
     on_close={JS.patch(back_path(@record_list_params))}
->
+  >
     <.live_component
       module={MusicLibraryWeb.RecordFormComponent}
       id={@record.id}
@@ -61,13 +62,13 @@
       record={@record}
       patch={back_path(@record_list_params)}
     />
-</.structured_modal>
+  </.structured_modal>
 
-<.structured_modal
+  <.structured_modal
     :if={@live_action == :import}
     id="record-modal"
     on_close={JS.patch(back_path(@record_list_params))}
->
+  >
     <.live_component
       module={MusicLibraryWeb.AddRecordComponent}
       id={:search}
@@ -78,6 +79,7 @@
       initial_query=""
       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>

lib/music_library_web/live/wishlist_live/show.html.heex

@@ -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]">
       <.record_cover
         record={@record}
@@ -243,7 +244,9 @@
             </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)}>
+                <li :for={
+                  included_release_group <- Records.Record.included_release_groups(@record)
+                }>
                   {included_release_group.artists} - {included_release_group.title}
                 </li>
               </ul>
@@ -268,9 +271,9 @@
         </dl>
       </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">
       <summary class="text-xs sm:text-sm font-medium cursor-pointer">
         {gettext("Check Online Stores")}
@@ -297,15 +300,15 @@
         </.button>
       </div>
     </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}
     id="record-modal"
     on_close={JS.patch(~p"/wishlist/#{@record}")}
->
+  >
     <.live_component
       module={MusicLibraryWeb.RecordFormComponent}
       id={@record.id}
@@ -314,4 +317,5 @@
       record={@record}
       patch={~p"/wishlist/#{@record}"}
     />
-</.structured_modal>
+  </.structured_modal>
+</Layouts.app>