Extract shared cart sidebar component

2026-04-20 15:57:44 +01:00
parent 9851a5c6bf
commit 8d004d39cc
6 changed files with 266 additions and 258 deletions
@@ -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