From d47df899b70e5c8ade3e5ad37e21ac09f6a3378a Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Mon, 20 Apr 2026 15:31:14 +0100
Subject: [PATCH] Improve layout of add record form

Remove results count (I never looked at it)
---
 .../components/add_record.ex                  | 382 +++++++++---------
 1 file changed, 191 insertions(+), 191 deletions(-)

diff --git a/lib/music_library_web/components/add_record.ex b/lib/music_library_web/components/add_record.ex
index c12bd6a0..6609ff9c 100644
--- a/lib/music_library_web/components/add_record.ex
+++ b/lib/music_library_web/components/add_record.ex
@@ -14,7 +14,6 @@ defmodule MusicLibraryWeb.Components.AddRecord do
   use MusicLibraryWeb, :live_component
 
   import MusicLibraryWeb.RecordComponents, only: [format_label: 1, type_label: 1]
-  import MusicLibraryWeb.SearchComponents, only: [results_footer: 1]
 
   alias MusicBrainz.ReleaseGroupSearchResult
   alias MusicLibrary.Records
@@ -29,209 +28,210 @@ defmodule MusicLibraryWeb.Components.AddRecord do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="grid grid-cols-1 md:grid-cols-5">
-      <section class="md:col-span-3 p-4 md:border-r md:border-zinc-200 md:dark:border-zinc-800">
-        <.simple_form
-          for={@form}
-          id={:import_form}
-          phx-target={@myself}
-          phx-change="search"
-          phx-submit="search"
-        >
-          <.input
-            id={:mb_query}
-            name={:mb_query}
-            field={@form[:mb_query]}
-            type="search"
-            label={gettext("Search for a record")}
-            phx-debounce="500"
-            autocomplete="off"
-            autofocus
-          />
-        </.simple_form>
-        <.alert :if={@error_message} color="danger" hide_close class="mt-4">
-          {@error_message}
-        </.alert>
-        <ul
-          id="release-groups"
-          phx-viewport-bottom={!@loaded_all_results? && "load-more"}
-          phx-target={@myself}
-          role="list"
-          class={[
-            "mt-5 divide-y divide-zinc-100 dark:divide-slate-300/30",
-            "max-h-125 overflow-y-auto"
-          ]}
-        >
-          <.result
-            :for={release_group <- @release_groups}
-            id={"musicbrainz_#{release_group.id}"}
-            myself={@myself}
-            in_cart?={in_cart?(@cart_pairs, release_group.id)}
-            cart_formats={cart_formats(@cart, release_group.id)}
-            release_group={release_group}
-            icon_name={@icon_name}
-          />
-        </ul>
-        <div
-          :if={@release_groups_count == 0}
-          id="release-groups-empty"
-          class="text-md flex h-32 items-center justify-center text-zinc-500 md:h-64"
-        >
-          {gettext("No results")}
-        </div>
-        <.results_footer total_results={@release_groups_total_count} />
-      </section>
-
-      <aside class={[
-        "md:col-span-2 bg-zinc-50 dark:bg-zinc-900/60",
-        "border-t md:border-t-0 md:border-l md:border-zinc-200 md:dark:border-zinc-800",
-        "flex flex-col"
-      ]}>
-        <div class="px-4 py-3 flex items-center justify-between border-b border-zinc-200 dark:border-zinc-800">
-          <div class="flex items-center gap-2">
-            <p class="text-sm font-semibold text-zinc-700 dark:text-zinc-300">
-              {gettext("Cart")}
-            </p>
-            <span class="text-xs text-zinc-500 dark:text-zinc-400">
-              {ngettext("%{count} record", "%{count} records", length(@cart), count: length(@cart))}
-            </span>
-          </div>
-          <div class="flex items-center gap-3">
-            <button
-              :if={@cart != []}
-              type="button"
-              phx-click="clear_cart"
-              phx-target={@myself}
-              class="text-xs text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100"
-            >
-              {gettext("Clear all")}
-            </button>
-            <button
-              type="button"
-              phx-click="toggle_cart"
-              phx-target={@myself}
-              class="rounded-md p-1 text-zinc-500 hover:bg-zinc-200 dark:hover:bg-zinc-800 md:hidden"
-              aria-label={gettext("Toggle cart")}
-            >
-              <.icon
-                name={if @cart_expanded?, do: "hero-chevron-down", else: "hero-chevron-up"}
-                class="size-4"
-                aria-hidden="true"
-                data-slot="icon"
-              />
-            </button>
-          </div>
-        </div>
-
-        <div class={["md:!block", not @cart_expanded? && "hidden"]}>
-          <div
-            :if={@cart == []}
-            id="cart-empty"
-            class="flex flex-col items-center justify-center gap-2 px-6 py-10 text-center"
+    <div>
+      <div class="grid grid-cols-1 md:grid-cols-5">
+        <section class="md:col-span-3 md:p-4 md:border-r md:border-zinc-200 md:dark:border-zinc-800">
+          <.simple_form
+            for={@form}
+            id={:import_form}
+            phx-target={@myself}
+            phx-change="search"
+            phx-submit="search"
           >
-            <.icon
-              name="hero-shopping-bag"
-              class="size-8 text-zinc-400"
-              aria-hidden="true"
-              data-slot="icon"
+            <.input
+              id={:mb_query}
+              name={:mb_query}
+              field={@form[:mb_query]}
+              type="search"
+              label={gettext("Search for a record")}
+              phx-debounce="500"
+              autocomplete="off"
+              autofocus
             />
-            <p class="text-sm text-zinc-500 dark:text-zinc-400">
-              {gettext("Your cart is empty")}
-            </p>
-            <p class="text-xs text-zinc-500 dark:text-zinc-400">
-              {gettext("Add records from the search results to get started.")}
-            </p>
-          </div>
-
+          </.simple_form>
+          <.alert :if={@error_message} color="danger" hide_close class="mt-4">
+            {@error_message}
+          </.alert>
           <ul
-            :if={@cart != []}
-            id="cart-items"
-            class="divide-y divide-zinc-200 dark:divide-zinc-800 md:max-h-[calc(100vh-20rem)] overflow-y-auto"
+            id="release-groups"
+            phx-viewport-bottom={!@loaded_all_results? && "load-more"}
+            phx-target={@myself}
+            role="list"
+            class={[
+              "mt-5 divide-y divide-zinc-100 dark:divide-slate-300/30",
+              "max-h-125 overflow-y-auto"
+            ]}
           >
-            <li
-              :for={item <- @cart}
-              id={"cart-item-#{item.cart_item_id}"}
-              class="flex gap-3 px-4 py-3"
-            >
-              <img
-                class="w-12 h-12 rounded-md object-cover"
-                alt={item.title}
-                src={item.thumb_url}
-                onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
-              />
-              <div class="min-w-0 flex-1">
-                <p class="truncate text-xs text-zinc-500 dark:text-zinc-400">
-                  {item.artists}
-                </p>
-                <p class="truncate text-sm font-medium text-zinc-700 dark:text-zinc-300">
-                  {item.title}
-                </p>
-                <div class="mt-1 flex items-center gap-2">
-                  <form phx-change="change_format" phx-target={@myself}>
-                    <input type="hidden" name="cart_item_id" value={item.cart_item_id} />
-                    <select
-                      name="format"
-                      aria-label={gettext("Format")}
-                      class="rounded-md border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-950 text-xs px-1.5 py-0.5"
-                    >
-                      <option
-                        :for={format <- Records.Record.formats()}
-                        value={format}
-                        selected={format == item.format}
-                      >
-                        {format_label(format)}
-                      </option>
-                    </select>
-                  </form>
-                  <button
-                    type="button"
-                    phx-click="remove_from_cart"
-                    phx-value-cart_item_id={item.cart_item_id}
-                    phx-target={@myself}
-                    class="text-xs text-zinc-500 hover:text-red-600 dark:hover:text-red-400"
-                  >
-                    {gettext("Remove")}
-                  </button>
-                </div>
-              </div>
-            </li>
+            <.result
+              :for={release_group <- @release_groups}
+              id={"musicbrainz_#{release_group.id}"}
+              myself={@myself}
+              in_cart?={in_cart?(@cart_pairs, release_group.id)}
+              cart_formats={cart_formats(@cart, release_group.id)}
+              release_group={release_group}
+              icon_name={@icon_name}
+            />
           </ul>
-
           <div
-            :if={@cart != []}
-            class="border-t border-zinc-200 dark:border-zinc-800 px-4 py-3"
+            :if={@release_groups_count == 0}
+            id="release-groups-empty"
+            class="text-md flex h-64 items-center justify-center text-zinc-500 md:h-64"
           >
-            <.button
-              variant="solid"
-              phx-click="import_cart"
-              phx-target={@myself}
-              disabled={@importing?}
-              class="w-full"
+            {gettext("No results")}
+          </div>
+        </section>
+
+        <aside class={[
+          "md:col-span-2",
+          "border-t md:border-t-0 md:border-l md:border-zinc-200 md:dark:border-zinc-800",
+          "flex flex-col"
+        ]}>
+          <div class="px-4 py-3 flex items-center justify-between border-b border-zinc-200 dark:border-zinc-800">
+            <div class="flex items-center gap-2">
+              <p class="text-sm font-semibold text-zinc-700 dark:text-zinc-300">
+                {gettext("Cart")}
+              </p>
+              <span class="text-xs text-zinc-500 dark:text-zinc-400">
+                {ngettext("%{count} record", "%{count} records", length(@cart), count: length(@cart))}
+              </span>
+            </div>
+            <div class="flex items-center gap-3">
+              <button
+                :if={@cart != []}
+                type="button"
+                phx-click="clear_cart"
+                phx-target={@myself}
+                class="text-xs text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100"
+              >
+                {gettext("Clear all")}
+              </button>
+              <button
+                type="button"
+                phx-click="toggle_cart"
+                phx-target={@myself}
+                class="rounded-md p-1 text-zinc-500 hover:bg-zinc-200 dark:hover:bg-zinc-800 md:hidden"
+                aria-label={gettext("Toggle cart")}
+              >
+                <.icon
+                  name={if @cart_expanded?, do: "hero-chevron-down", else: "hero-chevron-up"}
+                  class="size-4"
+                  aria-hidden="true"
+                  data-slot="icon"
+                />
+              </button>
+            </div>
+          </div>
+
+          <div class={["md:!block", not @cart_expanded? && "hidden"]}>
+            <div
+              :if={@cart == []}
+              id="cart-empty"
+              class="flex flex-col items-center justify-center gap-2 px-6 py-10 text-center"
             >
               <.icon
-                :if={@importing?}
-                name="hero-arrow-path"
-                class="icon animate-spin"
+                name="hero-shopping-bag"
+                class="size-8 text-zinc-400"
                 aria-hidden="true"
                 data-slot="icon"
               />
-              <.icon
-                :if={not @importing?}
-                name="hero-plus"
-                class="icon"
-                aria-hidden="true"
-                data-slot="icon"
-              />
-              {ngettext(
-                "Import %{count} record",
-                "Import %{count} records",
-                length(@cart),
-                count: length(@cart)
-              )}
-            </.button>
+              <p class="text-sm text-zinc-500 dark:text-zinc-400">
+                {gettext("Your cart is empty")}
+              </p>
+              <p class="text-xs text-zinc-500 dark:text-zinc-400">
+                {gettext("Add records from the search results to get started.")}
+              </p>
+            </div>
+
+            <ul
+              :if={@cart != []}
+              id="cart-items"
+              class="divide-y divide-zinc-200 dark:divide-zinc-800 md:max-h-[calc(100vh-20rem)] overflow-y-auto"
+            >
+              <li
+                :for={item <- @cart}
+                id={"cart-item-#{item.cart_item_id}"}
+                class="flex gap-3 px-4 py-3"
+              >
+                <img
+                  class="w-12 h-12 rounded-md object-cover"
+                  alt={item.title}
+                  src={item.thumb_url}
+                  onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
+                />
+                <div class="min-w-0 flex-1">
+                  <p class="truncate text-xs text-zinc-500 dark:text-zinc-400">
+                    {item.artists}
+                  </p>
+                  <p class="truncate text-sm font-medium text-zinc-700 dark:text-zinc-300">
+                    {item.title}
+                  </p>
+                  <div class="mt-1 flex items-center gap-2">
+                    <form phx-change="change_format" phx-target={@myself}>
+                      <input type="hidden" name="cart_item_id" value={item.cart_item_id} />
+                      <select
+                        name="format"
+                        aria-label={gettext("Format")}
+                        class="rounded-md border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-950 text-xs px-1.5 py-0.5"
+                      >
+                        <option
+                          :for={format <- Records.Record.formats()}
+                          value={format}
+                          selected={format == item.format}
+                        >
+                          {format_label(format)}
+                        </option>
+                      </select>
+                    </form>
+                    <button
+                      type="button"
+                      phx-click="remove_from_cart"
+                      phx-value-cart_item_id={item.cart_item_id}
+                      phx-target={@myself}
+                      class="text-xs text-zinc-500 hover:text-red-600 dark:hover:text-red-400"
+                    >
+                      {gettext("Remove")}
+                    </button>
+                  </div>
+                </div>
+              </li>
+            </ul>
+
+            <div
+              :if={@cart != []}
+              class="border-t border-zinc-200 dark:border-zinc-800 px-4 py-3"
+            >
+              <.button
+                variant="solid"
+                phx-click="import_cart"
+                phx-target={@myself}
+                disabled={@importing?}
+                class="w-full"
+              >
+                <.icon
+                  :if={@importing?}
+                  name="hero-arrow-path"
+                  class="icon animate-spin"
+                  aria-hidden="true"
+                  data-slot="icon"
+                />
+                <.icon
+                  :if={not @importing?}
+                  name="hero-plus"
+                  class="icon"
+                  aria-hidden="true"
+                  data-slot="icon"
+                />
+                {ngettext(
+                  "Import %{count} record",
+                  "Import %{count} records",
+                  length(@cart),
+                  count: length(@cart)
+                )}
+              </.button>
+            </div>
           </div>
-        </div>
-      </aside>
+        </aside>
+      </div>
     </div>
     """
   end