Extract shared cart sidebar component

docs/architecture.md

@@ -297,6 +297,7 @@ All authenticated routes live inside a single `live_session` with three `on_moun
 | `StatsComponents` | Stats dashboard widgets (`section/1` layout, counters, album preview, records on this day) |
 | `ScrobbleComponents` | Scrobble activity displays: status badges, import dropdowns, metadata tooltips, and record-matching UI |
 | `SearchComponents` | Search result rendering |
+| `CartComponents` | `cart_sidebar/1` — shared cart aside used by `AddRecord` and `BarcodeScanner` |
 | `Pagination` | Pagination UI and logic |
 
 ### Web Utility Modules (lib/music_library_web/)

lib/music_library_web/components/add_record.ex

@@ -13,6 +13,7 @@ defmodule MusicLibraryWeb.Components.AddRecord do
 
   use MusicLibraryWeb, :live_component
 
+  import MusicLibraryWeb.CartComponents, only: [cart_sidebar: 1]
   import MusicLibraryWeb.RecordComponents, only: [format_label: 1, type_label: 1]
 
   alias MusicBrainz.ReleaseGroupSearchResult
@@ -81,156 +82,101 @@ defmodule MusicLibraryWeb.Components.AddRecord do
           </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"
+        <.cart_sidebar
+          count={length(@cart)}
+          expanded?={@cart_expanded?}
+          on_clear="clear_cart"
+          on_toggle="toggle_cart"
+          target={@myself}
+          empty_heading={gettext("Your cart is empty")}
+          empty_subtext={gettext("Add records from the search results to get started.")}
+        >
+          <:empty_icon>
+            <.icon
+              name="hero-shopping-bag"
+              class="size-8 text-zinc-400"
+              aria-hidden="true"
+              data-slot="icon"
+            />
+          </:empty_icon>
+          <:action>
+            <.button
+              variant="solid"
+              phx-click="import_cart"
+              phx-target={@myself}
+              disabled={@importing?}
+              class="w-full"
             >
               <.icon
-                name="hero-shopping-bag"
-                class="size-8 text-zinc-400"
+                :if={@importing?}
+                name="hero-arrow-path"
+                class="icon animate-spin"
                 aria-hidden="true"
                 data-slot="icon"
               />
-              <p class="text-sm text-zinc-500 dark:text-zinc-400">
-                {gettext("Your cart is empty")}
+              <.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>
+          </:action>
+          <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="text-xs text-zinc-500 dark:text-zinc-400">
-                {gettext("Add records from the search results to get started.")}
+              <p class="truncate text-sm font-medium text-zinc-700 dark:text-zinc-300">
+                {item.title}
               </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"
+              <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}
                     >
-                      {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>
+                      {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>
-          </div>
-        </aside>
+          </li>
+        </.cart_sidebar>
       </div>
     </div>
     """

lib/music_library_web/components/barcode_scanner.ex

@@ -1,6 +1,8 @@
 defmodule MusicLibraryWeb.Components.BarcodeScanner do
   use MusicLibraryWeb, :live_component
 
+  import MusicLibraryWeb.CartComponents, only: [cart_sidebar: 1]
+
   alias MusicBrainz.ReleaseGroupSearchResult
   alias MusicLibrary.BarcodeScan
   alias MusicLibrary.Records
@@ -40,108 +42,48 @@ defmodule MusicLibraryWeb.Components.BarcodeScanner do
           </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(@scan_results),
-                  count: length(@scan_results)
-                )}
-              </span>
-            </div>
-            <div class="flex items-center gap-3">
-              <button
-                :if={@scan_results != []}
-                type="button"
-                phx-click="clear_results"
-                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={@scan_results == []}
-              id="cart-empty"
-              class="flex flex-col items-center justify-center gap-2 px-6 py-10 text-center"
+        <.cart_sidebar
+          count={length(@scan_results)}
+          expanded?={@cart_expanded?}
+          on_clear="clear_results"
+          on_toggle="toggle_cart"
+          target={@myself}
+          empty_heading={gettext("Your cart is empty")}
+          empty_subtext={gettext("Scan barcodes to add records.")}
+        >
+          <:empty_icon>
+            <.barcode_icon class="size-8 text-zinc-400" />
+          </:empty_icon>
+          <:action>
+            <.button
+              variant="solid"
+              phx-disable-with={gettext("Adding...")}
+              phx-click={JS.push("import_releases", target: "#barcode-scanner")}
+              class="w-full"
             >
-              <.barcode_icon class="size-8 text-zinc-400" />
-              <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("Scan barcodes to add records.")}
-              </p>
-            </div>
-
-            <ul
-              :if={@scan_results != []}
-              id="cart-items"
-              class="divide-y divide-zinc-200 dark:divide-zinc-800 md:max-h-[calc(100vh-20rem)] overflow-y-auto"
-            >
-              <li
-                :for={result <- @scan_results}
-                id={"cart-item-#{result.number}"}
-                class="flex gap-3 px-4 py-3"
-                phx-mounted={
-                  JS.transition(
-                    {"first:ease-in duration-300", "first:opacity-0 first:p-0 first:h-0",
-                     "first:opacity-100"},
-                    time: 300
-                  )
-                }
-              >
-                <.cart_item result={result} myself={@myself} />
-              </li>
-            </ul>
-
-            <div
-              :if={@scan_results != []}
-              class="border-t border-zinc-200 dark:border-zinc-800 px-4 py-3"
-            >
-              <.button
-                variant="solid"
-                phx-disable-with={gettext("Adding...")}
-                phx-click={JS.push("import_releases", target: "#barcode-scanner")}
-                class="w-full"
-              >
-                {ngettext(
-                  "Add %{count} release",
-                  "Add %{count} releases",
-                  length(@scan_results),
-                  count: length(@scan_results)
-                )}
-              </.button>
-            </div>
-          </div>
-        </aside>
+              {ngettext(
+                "Add %{count} release",
+                "Add %{count} releases",
+                length(@scan_results),
+                count: length(@scan_results)
+              )}
+            </.button>
+          </:action>
+          <li
+            :for={result <- @scan_results}
+            id={"cart-item-#{result.number}"}
+            class="flex gap-3 px-4 py-3"
+            phx-mounted={
+              JS.transition(
+                {"first:ease-in duration-300", "first:opacity-0 first:p-0 first:h-0",
+                 "first:opacity-100"},
+                time: 300
+              )
+            }
+          >
+            <.cart_item result={result} myself={@myself} />
+          </li>
+        </.cart_sidebar>
       </div>
 
       <script :type={Phoenix.LiveView.ColocatedHook} name=".BarcodeScanner">

lib/music_library_web/components/cart_components.ex

@@ -0,0 +1,127 @@
+defmodule MusicLibraryWeb.CartComponents do
+  @moduledoc """
+  Shared cart sidebar used by the record import and barcode scanner flows.
+
+  Renders the right-hand `<aside>` shell: header (title, count, Clear all,
+  mobile toggle), collapsible body, empty state, items list, and action row.
+  Callers provide the per-item markup and action button via slots; cart state
+  (`:cart_expanded?`, item collection) and event handlers stay in the host
+  LiveComponent.
+  """
+
+  use MusicLibraryWeb, :html
+
+  @doc """
+  Renders the cart sidebar.
+
+  The default slot is rendered inside a `<ul>` as `<li>` items when `@count > 0`.
+
+  ## Examples
+
+      <.cart_sidebar
+        count={length(@cart)}
+        expanded?={@cart_expanded?}
+        on_clear="clear_cart"
+        on_toggle="toggle_cart"
+        target={@myself}
+        empty_heading={gettext("Your cart is empty")}
+        empty_subtext={gettext("Add records from the search results to get started.")}
+      >
+        <:empty_icon>
+          <.icon name="hero-shopping-bag" class="size-8 text-zinc-400" aria-hidden="true" />
+        </:empty_icon>
+        <:action>
+          <.button phx-click="import_cart" phx-target={@myself}>Import</.button>
+        </:action>
+        <li :for={item <- @cart} id={"cart-item-" <> item.id}>...</li>
+      </.cart_sidebar>
+  """
+  attr :count, :integer, required: true
+  attr :expanded?, :boolean, required: true
+  attr :on_clear, :string, required: true
+  attr :on_toggle, :string, required: true
+  attr :target, :any, required: true
+  attr :empty_heading, :string, required: true
+  attr :empty_subtext, :string, required: true
+
+  slot :empty_icon, required: true
+  slot :action
+  slot :inner_block
+
+  def cart_sidebar(assigns) do
+    ~H"""
+    <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", @count, count: @count)}
+          </span>
+        </div>
+        <div class="flex items-center gap-3">
+          <button
+            :if={@count > 0}
+            type="button"
+            phx-click={@on_clear}
+            phx-target={@target}
+            class="text-xs text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100"
+          >
+            {gettext("Clear all")}
+          </button>
+          <button
+            type="button"
+            phx-click={@on_toggle}
+            phx-target={@target}
+            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 @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 @expanded? && "hidden"]}>
+        <div
+          :if={@count == 0}
+          id="cart-empty"
+          class="flex flex-col items-center justify-center gap-2 px-6 py-10 text-center"
+        >
+          {render_slot(@empty_icon)}
+          <p class="text-sm text-zinc-500 dark:text-zinc-400">
+            {@empty_heading}
+          </p>
+          <p class="text-xs text-zinc-500 dark:text-zinc-400">
+            {@empty_subtext}
+          </p>
+        </div>
+
+        <ul
+          :if={@count > 0}
+          id="cart-items"
+          class="divide-y divide-zinc-200 dark:divide-zinc-800 md:max-h-[calc(100vh-20rem)] overflow-y-auto"
+        >
+          {render_slot(@inner_block)}
+        </ul>
+
+        <div
+          :if={@count > 0 and @action != []}
+          class="border-t border-zinc-200 dark:border-zinc-800 px-4 py-3"
+        >
+          {render_slot(@action)}
+        </div>
+      </div>
+    </aside>
+    """
+  end
+end

priv/gettext/default.pot

@@ -2459,8 +2459,7 @@ msgstr ""
 msgid "A rule for this album already exists"
 msgstr ""
 
-#: lib/music_library_web/components/add_record.ex
-#: lib/music_library_web/components/barcode_scanner.ex
+#: lib/music_library_web/components/cart_components.ex
 #, elixir-autogen, elixir-format
 msgid "%{count} record"
 msgid_plural "%{count} records"
@@ -2472,8 +2471,7 @@ msgstr[1] ""
 msgid "Add records from the search results to get started."
 msgstr ""
 
-#: lib/music_library_web/components/add_record.ex
-#: lib/music_library_web/components/barcode_scanner.ex
+#: lib/music_library_web/components/cart_components.ex
 #, elixir-autogen, elixir-format
 msgid "Cart"
 msgstr ""
@@ -2483,8 +2481,7 @@ msgstr ""
 msgid "Choose which format to add"
 msgstr ""
 
-#: lib/music_library_web/components/add_record.ex
-#: lib/music_library_web/components/barcode_scanner.ex
+#: lib/music_library_web/components/cart_components.ex
 #, elixir-autogen, elixir-format
 msgid "Clear all"
 msgstr ""
@@ -2496,8 +2493,7 @@ msgid_plural "Import %{count} records"
 msgstr[0] ""
 msgstr[1] ""
 
-#: lib/music_library_web/components/add_record.ex
-#: lib/music_library_web/components/barcode_scanner.ex
+#: lib/music_library_web/components/cart_components.ex
 #, elixir-autogen, elixir-format
 msgid "Toggle cart"
 msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -2459,8 +2459,7 @@ msgstr ""
 msgid "A rule for this album already exists"
 msgstr ""
 
-#: lib/music_library_web/components/add_record.ex
-#: lib/music_library_web/components/barcode_scanner.ex
+#: lib/music_library_web/components/cart_components.ex
 #, elixir-autogen, elixir-format
 msgid "%{count} record"
 msgid_plural "%{count} records"
@@ -2472,8 +2471,7 @@ msgstr[1] ""
 msgid "Add records from the search results to get started."
 msgstr ""
 
-#: lib/music_library_web/components/add_record.ex
-#: lib/music_library_web/components/barcode_scanner.ex
+#: lib/music_library_web/components/cart_components.ex
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Cart"
 msgstr ""
@@ -2483,8 +2481,7 @@ msgstr ""
 msgid "Choose which format to add"
 msgstr ""
 
-#: lib/music_library_web/components/add_record.ex
-#: lib/music_library_web/components/barcode_scanner.ex
+#: lib/music_library_web/components/cart_components.ex
 #, elixir-autogen, elixir-format
 msgid "Clear all"
 msgstr ""
@@ -2496,8 +2493,7 @@ msgid_plural "Import %{count} records"
 msgstr[0] ""
 msgstr[1] ""
 
-#: lib/music_library_web/components/add_record.ex
-#: lib/music_library_web/components/barcode_scanner.ex
+#: lib/music_library_web/components/cart_components.ex
 #, elixir-autogen, elixir-format
 msgid "Toggle cart"
 msgstr ""