From 98a42a37623fb4440263b59051619016cbf611b5 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Sat, 7 Feb 2026 13:48:05 +0000
Subject: [PATCH] Remove redundant markup

---
 .../live/collection_live/index.html.heex      | 172 +++++++++---------
 .../live/wishlist_live/index.html.heex        | 162 ++++++++---------
 2 files changed, 165 insertions(+), 169 deletions(-)

diff --git a/lib/music_library_web/live/collection_live/index.html.heex b/lib/music_library_web/live/collection_live/index.html.heex
index 622b670a..69102149 100644
--- a/lib/music_library_web/live/collection_live/index.html.heex
+++ b/lib/music_library_web/live/collection_live/index.html.heex
@@ -1,102 +1,100 @@
 <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">
+  <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
-          patch={order_path(@record_list_params, :purchase)}
+          variant="solid"
           size="sm"
-          class={[
-            @record_list_params.order == :purchase && "bg-zinc-100! dark:bg-zinc-700!"
-          ]}
+          patch={~p"/collection/import"}
         >
-          <.icon
-            name="hero-banknotes-solid"
-            class="icon"
-            aria-hidden="true"
-            data-slot="icon"
-          />
-          <span class="sr-only sm:not-sr-only">{gettext("Purchase")}</span>
+          <.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
+          {gettext("Add")}
         </.button>
         <.button
-          patch={order_path(@record_list_params, :alphabetical)}
+          variant="solid"
           size="sm"
-          class={[
-            @record_list_params.order == :alphabetical && "bg-zinc-100! dark:bg-zinc-700!"
-          ]}
+          patch={~p"/collection/scan"}
         >
-          <.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
-          <span class="sr-only sm:not-sr-only">{gettext("A->Z")}</span>
-        </.button>
-        <.button
-          patch={order_path(@record_list_params, :release)}
-          size="sm"
-          class={[
-            @record_list_params.order == :release && "bg-zinc-100! dark:bg-zinc-700!"
-          ]}
-        >
-          <.icon name="hero-calendar-days" class="icon" aria-hidden="true" data-slot="icon" />
-          <span class="sr-only sm:not-sr-only">{gettext("Release")}</span>
-        </.button>
-      </.button_group>
-
-      <.button_group>
-        <.button
-          phx-click="set_display"
-          phx-value-mode="grid"
-          size="sm"
-          class={[
-            @display == :grid && "bg-zinc-100! dark:bg-zinc-700!"
-          ]}
-        >
-          <.icon
-            name="hero-squares-2x2"
-            class="icon"
-            aria-hidden="true"
-            data-slot="icon"
-          />
-          <span class="sr-only sm:not-sr-only">
-            {gettext("Grid")}
-          </span>
-        </.button>
-        <.button
-          phx-click="set_display"
-          phx-value-mode="list"
-          size="sm"
-          class={[
-            @display == :list && "bg-zinc-100! dark:bg-zinc-700!"
-          ]}
-        >
-          <.icon name="hero-list-bullet" class="icon" aria-hidden="true" data-slot="icon" />
-          <span class="sr-only sm:not-sr-only">
-            {gettext("List")}
-          </span>
+          <.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
+        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"
+        />
+        <span class="sr-only sm:not-sr-only">{gettext("Purchase")}</span>
+      </.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" />
+        <span class="sr-only sm:not-sr-only">{gettext("A->Z")}</span>
+      </.button>
+      <.button
+        patch={order_path(@record_list_params, :release)}
+        size="sm"
+        class={[
+          @record_list_params.order == :release && "bg-zinc-100! dark:bg-zinc-700!"
+        ]}
+      >
+        <.icon name="hero-calendar-days" class="icon" aria-hidden="true" data-slot="icon" />
+        <span class="sr-only sm:not-sr-only">{gettext("Release")}</span>
+      </.button>
+    </.button_group>
+
+    <.button_group>
+      <.button
+        phx-click="set_display"
+        phx-value-mode="grid"
+        size="sm"
+        class={[
+          @display == :grid && "bg-zinc-100! dark:bg-zinc-700!"
+        ]}
+      >
+        <.icon
+          name="hero-squares-2x2"
+          class="icon"
+          aria-hidden="true"
+          data-slot="icon"
+        />
+        <span class="sr-only sm:not-sr-only">
+          {gettext("Grid")}
+        </span>
+      </.button>
+      <.button
+        phx-click="set_display"
+        phx-value-mode="list"
+        size="sm"
+        class={[
+          @display == :list && "bg-zinc-100! dark:bg-zinc-700!"
+        ]}
+      >
+        <.icon name="hero-list-bullet" class="icon" aria-hidden="true" data-slot="icon" />
+        <span class="sr-only sm:not-sr-only">
+          {gettext("List")}
+        </span>
+      </.button>
+    </.button_group>
   </div>
 
   <.record_grid
diff --git a/lib/music_library_web/live/wishlist_live/index.html.heex b/lib/music_library_web/live/wishlist_live/index.html.heex
index c2f747d1..0e850b6a 100644
--- a/lib/music_library_web/live/wishlist_live/index.html.heex
+++ b/lib/music_library_web/live/wishlist_live/index.html.heex
@@ -1,87 +1,85 @@
 <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
-          variant="solid"
-          size="sm"
-          patch={~p"/wishlist/import"}
-        >
-          <.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
-          {gettext("Add")}
-        </.button>
-      </div>
-    </header>
-
-    <div class="flex items-end justify-between gap-6 mt-8">
-      <.button_group>
-        <.button
-          patch={order_path(@record_list_params, :insertion)}
-          size="sm"
-          class={[
-            @record_list_params.order == :insertion && "bg-zinc-100! dark:bg-zinc-700!"
-          ]}
-        >
-          <.icon name="hero-star" class="icon" aria-hidden="true" data-slot="icon" />
-          <span class="sr-only sm:not-sr-only">{gettext("Insertion")}</span>
-        </.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" />
-          <span class="sr-only sm:not-sr-only">{gettext("A->Z")}</span>
-        </.button>
-        <.button
-          patch={order_path(@record_list_params, :release)}
-          size="sm"
-          class={[
-            @record_list_params.order == :release && "bg-zinc-100! dark:bg-zinc-700!"
-          ]}
-        >
-          <.icon name="hero-calendar-days" class="icon" aria-hidden="true" data-slot="icon" />
-          <span class="sr-only sm:not-sr-only">{gettext("Release")}</span>
-        </.button>
-      </.button_group>
-
-      <.button_group>
-        <.button
-          phx-click="set_display"
-          phx-value-mode="grid"
-          size="sm"
-          class={[
-            @display == :grid && "bg-zinc-100! dark:bg-zinc-700!"
-          ]}
-        >
-          <.icon
-            name="hero-squares-2x2"
-            class="icon"
-            aria-hidden="true"
-            data-slot="icon"
-          />
-          <span class="sr-only sm:not-sr-only">
-            {gettext("Grid")}
-          </span>
-        </.button>
-        <.button
-          phx-click="set_display"
-          phx-value-mode="list"
-          size="sm"
-          class={[
-            @display == :list && "bg-zinc-100! dark:bg-zinc-700!"
-          ]}
-        >
-          <.icon name="hero-list-bullet" class="icon" aria-hidden="true" data-slot="icon" />
-          <span class="sr-only sm:not-sr-only">
-            {gettext("List")}
-          </span>
-        </.button>
-      </.button_group>
+  <header class="mb-2">
+    <div class="flex items-center justify-between gap-6 mb-2 mt-2">
+      <.search_form query={@record_list_params.query} />
+      <.button
+        variant="solid"
+        size="sm"
+        patch={~p"/wishlist/import"}
+      >
+        <.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
+        {gettext("Add")}
+      </.button>
     </div>
+  </header>
+
+  <div class="flex items-end justify-between gap-6 mt-8">
+    <.button_group>
+      <.button
+        patch={order_path(@record_list_params, :insertion)}
+        size="sm"
+        class={[
+          @record_list_params.order == :insertion && "bg-zinc-100! dark:bg-zinc-700!"
+        ]}
+      >
+        <.icon name="hero-star" class="icon" aria-hidden="true" data-slot="icon" />
+        <span class="sr-only sm:not-sr-only">{gettext("Insertion")}</span>
+      </.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" />
+        <span class="sr-only sm:not-sr-only">{gettext("A->Z")}</span>
+      </.button>
+      <.button
+        patch={order_path(@record_list_params, :release)}
+        size="sm"
+        class={[
+          @record_list_params.order == :release && "bg-zinc-100! dark:bg-zinc-700!"
+        ]}
+      >
+        <.icon name="hero-calendar-days" class="icon" aria-hidden="true" data-slot="icon" />
+        <span class="sr-only sm:not-sr-only">{gettext("Release")}</span>
+      </.button>
+    </.button_group>
+
+    <.button_group>
+      <.button
+        phx-click="set_display"
+        phx-value-mode="grid"
+        size="sm"
+        class={[
+          @display == :grid && "bg-zinc-100! dark:bg-zinc-700!"
+        ]}
+      >
+        <.icon
+          name="hero-squares-2x2"
+          class="icon"
+          aria-hidden="true"
+          data-slot="icon"
+        />
+        <span class="sr-only sm:not-sr-only">
+          {gettext("Grid")}
+        </span>
+      </.button>
+      <.button
+        phx-click="set_display"
+        phx-value-mode="list"
+        size="sm"
+        class={[
+          @display == :list && "bg-zinc-100! dark:bg-zinc-700!"
+        ]}
+      >
+        <.icon name="hero-list-bullet" class="icon" aria-hidden="true" data-slot="icon" />
+        <span class="sr-only sm:not-sr-only">
+          {gettext("List")}
+        </span>
+      </.button>
+    </.button_group>
   </div>
 
   <.record_grid