Use explicit Phoenix 1.8 style layouts

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

@@ -1,109 +1,111 @@
-<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} />
+<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} />
+        <.button_group>
+          <.button
+            variant="solid"
+            size="sm"
+            patch={~p"/collection/import"}
+          >
+            <.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
+            {gettext("Add")}
+          </.button>
+          <.button
+            variant="solid"
+            size="sm"
+            patch={~p"/collection/scan"}
+          >
+            <.barcode_icon class="icon fill-current" />
+            {gettext("Scan")}
+          </.button>
+        </.button_group>
+      </div>
+    </header>
+
+    <div class="flex items-end justify-between gap-6 mt-8">
       <.button_group>
         <.button
-          variant="solid"
+          patch={order_path(@record_list_params, :purchase)}
           size="sm"
-          patch={~p"/collection/import"}
+          class={[
+            @record_list_params.order == :purchase && "!bg-zinc-100 dark:!bg-zinc-700"
+          ]}
         >
-          <.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
-          {gettext("Add")}
+          <.icon
+            name="hero-banknotes-solid"
+            class="icon"
+            aria-hidden="true"
+            data-slot="icon"
+          />
+          {gettext("Purchase")}
         </.button>
         <.button
-          variant="solid"
+          patch={order_path(@record_list_params, :alphabetical)}
           size="sm"
-          patch={~p"/collection/scan"}
+          class={[
+            @record_list_params.order == :alphabetical && "!bg-zinc-100 dark:!bg-zinc-700"
+          ]}
         >
-          <.barcode_icon class="icon fill-current" />
-          {gettext("Scan")}
+          <.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
+          {gettext("A->Z")}
         </.button>
       </.button_group>
     </div>
-  </header>
-
-  <div class="flex items-end justify-between gap-6 mt-8">
-    <.button_group>
-      <.button
-        patch={order_path(@record_list_params, :purchase)}
-        size="sm"
-        class={[
-          @record_list_params.order == :purchase && "!bg-zinc-100 dark:!bg-zinc-700"
-        ]}
-      >
-        <.icon
-          name="hero-banknotes-solid"
-          class="icon"
-          aria-hidden="true"
-          data-slot="icon"
-        />
-        {gettext("Purchase")}
-      </.button>
-      <.button
-        patch={order_path(@record_list_params, :alphabetical)}
-        size="sm"
-        class={[
-          @record_list_params.order == :alphabetical && "!bg-zinc-100 dark:!bg-zinc-700"
-        ]}
-      >
-        <.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
-        {gettext("A->Z")}
-      </.button>
-    </.button_group>
   </div>
-</div>
 
-<.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
-  :if={@live_action == :edit}
-  id="record-modal"
-  on_close={JS.patch(back_path(@record_list_params))}
->
-  <.live_component
-    module={MusicLibraryWeb.RecordFormComponent}
-    id={@record.id}
-    action={@live_action}
-    show_purchased_at={true}
-    record={@record}
-    patch={back_path(@record_list_params)}
+  <.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 == :import}
-  id="record-modal"
-  on_close={JS.patch(back_path(@record_list_params))}
->
-  <.live_component
-    module={MusicLibraryWeb.AddRecordComponent}
-    id={:search}
-    title={@page_title}
-    action={@live_action}
-    record={@record}
-    patch={back_path(@record_list_params)}
-    initial_query=""
-    icon_name="hero-plus"
-  />
-</.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}
+      action={@live_action}
+      show_purchased_at={true}
+      record={@record}
+      patch={back_path(@record_list_params)}
+    />
+  </.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}
-    title={@page_title}
-    action={@live_action}
-    patch={back_path(@record_list_params)}
-  />
-</.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}
+      title={@page_title}
+      action={@live_action}
+      record={@record}
+      patch={back_path(@record_list_params)}
+      initial_query=""
+      icon_name="hero-plus"
+    />
+  </.structured_modal>
 
-<.pagination id={:bottom_pagination} pagination_params={@record_list_params} />
+  <.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}
+      title={@page_title}
+      action={@live_action}
+      patch={back_path(@record_list_params)}
+    />
+  </.structured_modal>
+
+  <.pagination id={:bottom_pagination} pagination_params={@record_list_params} />
+</Layouts.app>